/* =============================================================================
   Cosmos — phone frame + screen library
   -----------------------------------------------------------------------------
   Owns .phone (frame chrome, status bar, crossfade layers) and every .screen
   template produced by js/phone.js.

   Sizing rule: .phone is a size container, so every value inside a screen is
   written in `cqw` (1cqw = 1% of the phone's inner width). Type, radii, icons
   and spacing therefore scale exactly with --phone-w at any viewport.
   Reference geometry: 400 x 866 CSS px @1280 viewport.

   Motion rule: the static CSS is always the FINAL (settled) state; keyframes
   only supply the "from" pose. So a paused or reduced-motion phone still shows
   a complete, correct screen.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* frame                                                                       */
/* -------------------------------------------------------------------------- */

.phone {
  --phone-bezel: calc(var(--phone-w) * 0.0115);   /* ~4.6px @400 */
  --ez: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));

  position: relative;
  width: var(--phone-w);
  aspect-ratio: 400 / 866;
  border: var(--phone-bezel) solid #000;
  border-radius: var(--phone-radius);
  background: #000;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  container-name: phone;
  font-family: var(--font-sans);
  line-height: 1.25;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: var(--phone-shadow, 0 1.1vw 3.2vw rgba(0, 0, 0, 0.14));
}

/* --- screen stack + crossfade ------------------------------------------- */

.phone-screens {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.phone-screen {
  position: absolute;
  inset: 0;
  transform-origin: 50% 52%;
  backface-visibility: hidden;
  transition:
    opacity 0.4s var(--ez),
    transform 0.4s var(--ez);
}
.phone-screen.is-enter { opacity: 0; transform: scale(1.035); }
.phone-screen.is-in    { opacity: 1; transform: scale(1); }
.phone-screen.is-out   { opacity: 0; transform: scale(0.968); }

/* --- status bar overlay -------------------------------------------------- */

.phone-status {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 13.4cqw;
  padding: 2.6cqw 6.4cqw 0 8.2cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  pointer-events: none;
  transition: color 0.4s var(--ez);
}
.phone[data-theme='light'] .phone-status { color: #000; }

.sb-time {
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.sb-icons {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
}
.sb-ico { display: block; height: 3cqw; width: auto; }
.sb-signal { width: 4.5cqw; }
.sb-wifi   { width: 4cqw; }
.sb-batt   { width: 6.8cqw; }

/* -------------------------------------------------------------------------- */
/* screen shell + shared tokens                                                */
/* -------------------------------------------------------------------------- */

.screen {
  /* spacing scale */
  --pad: 5.5cqw;          /* 22px — the one horizontal inset for every screen */
  --safe-top: 13.4cqw;    /* status bar height */
  --safe-bottom: 7cqw;    /* home indicator zone */
  --gap: 4cqw;

  /* radii */
  --r-xl: 8cqw;
  --r-lg: 6cqw;
  --r-md: 4.4cqw;
  --r-sm: 2.6cqw;

  /* type */
  --t-2xs: 2.7cqw;
  --t-xs: 3.1cqw;
  --t-sm: 3.5cqw;
  --t-md: 3.9cqw;
  --t-lg: 4.5cqw;
  --t-xl: 5.6cqw;

  /* ink */
  --ink: #0a0a0a;
  --ink-2: #77777d;
  --line: rgba(0, 0, 0, 0.09);
  --fill: #f1f1ef;
  --fill-2: #e6e6e2;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  letter-spacing: -0.012em;
}

.screen--dark {
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.12);
  --fill: rgba(255, 255, 255, 0.07);
  --fill-2: rgba(255, 255, 255, 0.12);
  background: radial-gradient(120% 80% at 50% 0%, #101418 0%, #07080b 60%, #05060a 100%);
}

/* home indicator ---------------------------------------------------------- */
.home-bar {
  position: absolute;
  left: 50%;
  bottom: 2.1cqw;
  width: 33.5cqw;
  height: 1.3cqw;
  margin-left: -16.75cqw;
  border-radius: 999px;
  z-index: 30;
}
.home-bar--dark  { background: rgba(0, 0, 0, 0.82); }
.home-bar--light { background: rgba(255, 255, 255, 0.9); }

/* -------------------------------------------------------------------------- */
/* shared atoms                                                                */
/* -------------------------------------------------------------------------- */

.ico { display: block; width: 4.6cqw; height: 4.6cqw; }
.mark { width: 5.6cqw; height: 5.6cqw; }

.chev { display: inline-flex; color: var(--ink-2); flex: 0 0 auto; }
.chev-ico { display: block; width: 2.1cqw; height: 3.7cqw; }

.icon-btn {
  flex: 0 0 auto;
  width: 9.4cqw;
  height: 9.4cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--ink);
}

.app-bar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: var(--safe-top);
  height: 12cqw;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-bar-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.app-bar-side {
  position: relative;
  z-index: 1;
  min-width: 9.4cqw;
  display: flex;
}
.app-bar-side--end { justify-content: flex-end; }

/* avatars — CSS gradients only, never photos */
.avatar {
  flex: 0 0 auto;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.22);
}
.avatar--sm { width: 9cqw; height: 9cqw; }
.avatar--1 { background: conic-gradient(from 210deg, #ffd36e, #ff7a59 35%, #b4468f 62%, #4b46c8 88%, #ffd36e); }
.avatar--2 { background: conic-gradient(from 140deg, #6ef0a8, #00e013 30%, #0a8f6a 60%, #123b57 85%, #6ef0a8); }
.avatar--3 { background: conic-gradient(from 40deg, #9fd0ff, #5b7bff 40%, #8a4bd8 70%, #ff7ab6 100%); }

/* pills */
.pill-row {
  flex: 0 0 auto;
  display: flex;
  gap: 3cqw;
  padding: 0 var(--pad);
}
.pill-btn {
  flex: 1 1 0;
  height: 12cqw;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pill-btn--dark  { background: #0a0a0a; color: #fff; }
.pill-btn--green { background: var(--green); color: #000; }

/* thin progress track */
.track {
  --v: 0.5;
  position: relative;
  height: 1.3cqw;
  border-radius: 999px;
  background: var(--fill-2);
  overflow: hidden;
}
.track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  border-radius: inherit;
  background: var(--green);
  transform-origin: 0 50%;
  animation: track-grow 1.15s var(--ez) both;
}
@keyframes track-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* iOS-style switch */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 12.8cqw;
  height: 7.6cqw;
  border-radius: 999px;
  background: var(--fill-2);
}
.switch::after {
  content: '';
  position: absolute;
  top: 0.6cqw;
  left: 0.6cqw;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.28);
  transition: transform 0.25s var(--ez);
}
.switch.is-on { background: var(--green); }
.switch.is-on::after { transform: translateX(5.2cqw); }

/* progress ring */
.ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; }
.ring-bg { stroke: var(--line); }
.ring-fg {
  --left: 30;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--left);
  animation: ring-draw 6s var(--ez) infinite;
}
@keyframes ring-draw {
  0%   { stroke-dashoffset: 100; }
  32%  { stroke-dashoffset: var(--left); }
  88%  { stroke-dashoffset: var(--left); }
  100% { stroke-dashoffset: 100; }
}

/* sparkline */
.spark { display: block; width: 100%; height: 100%; color: var(--green); }
.spark-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: spark-draw 6s var(--ez) infinite;
}
@keyframes spark-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: 1; }
  40%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* generic list row */
.row {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  padding: 3.6cqw var(--pad);
}
.row-glyph {
  flex: 0 0 auto;
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--ink);
}
.row-glyph.is-green { background: rgba(0, 224, 19, 0.14); color: #04a812; }
.row-text { display: flex; flex-direction: column; gap: 0.5cqw; min-width: 0; flex: 1 1 auto; }
.row-title { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.02em; }
.row-sub { font-size: var(--t-xs); color: var(--ink-2); }
.row-value { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5cqw; flex: 0 0 auto; }
.row-amount { font-size: var(--t-md); font-weight: 500; }
.row-note { font-size: var(--t-2xs); color: var(--ink-2); }

.row--card {
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3.6cqw 4cqw;
}

.card {
  margin: 0 var(--pad);
  border-radius: var(--r-lg);
  background: var(--fill);
  overflow: hidden;
}
.card .row { padding-left: 4cqw; padding-right: 4cqw; }
.card .row + .row { border-top: 1px solid var(--line); }

/* -------------------------------------------------------------------------- */
/* abstract header art — layered radial gradients, zero photos                 */
/* -------------------------------------------------------------------------- */

.head-art { position: absolute; inset: 0; overflow: hidden; }
.head-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.42) 100%);
}
.head-art .blob { position: absolute; will-change: transform; }

.head-art--money { background: linear-gradient(168deg, #16211b 0%, #0b1210 44%, #05070a 100%); }
.head-art--money .blob-1 {
  left: -18cqw; top: -10cqw; width: 92cqw; height: 80cqw;
  background: radial-gradient(closest-side, rgba(0, 224, 19, 0.56), rgba(0, 224, 19, 0));
  animation: drift-a 26s ease-in-out infinite alternate;
}
.head-art--money .blob-2 {
  right: -20cqw; top: 6cqw; width: 80cqw; height: 72cqw;
  background: radial-gradient(closest-side, rgba(64, 126, 255, 0.44), rgba(64, 126, 255, 0));
  animation: drift-b 33s ease-in-out infinite alternate;
}
.head-art--money .blob-3 {
  left: 2cqw; bottom: -24cqw; width: 100cqw; height: 66cqw;
  background: radial-gradient(closest-side, rgba(150, 78, 255, 0.32), rgba(150, 78, 255, 0));
  animation: drift-c 39s ease-in-out infinite alternate;
}

.head-art--plus { background: linear-gradient(170deg, #0c2c14 0%, #06170d 46%, #04090a 100%); }
.head-art--plus .blob-1 {
  left: -14cqw; top: -18cqw; width: 96cqw; height: 84cqw;
  background: radial-gradient(closest-side, rgba(0, 224, 19, 0.62), rgba(0, 224, 19, 0));
  animation: drift-a 24s ease-in-out infinite alternate;
}
.head-art--plus .blob-2 {
  right: -26cqw; top: 12cqw; width: 84cqw; height: 74cqw;
  background: radial-gradient(closest-side, rgba(0, 224, 19, 0.28), rgba(0, 224, 19, 0));
  animation: drift-b 30s ease-in-out infinite alternate;
}
.head-art--plus .blob-3 {
  left: 10cqw; bottom: -26cqw; width: 92cqw; height: 60cqw;
  background: radial-gradient(closest-side, rgba(210, 255, 120, 0.22), rgba(210, 255, 120, 0));
  animation: drift-c 36s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(7cqw, 5cqw, 0) scale(1.14) rotate(9deg); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-6cqw, 7cqw, 0) scale(0.94); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.96) rotate(0deg); }
  to   { transform: translate3d(5cqw, -6cqw, 0) scale(1.1) rotate(-8deg); }
}

/* -------------------------------------------------------------------------- */
/* screen: money                                                               */
/* -------------------------------------------------------------------------- */

.m-head {
  position: relative;
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  padding: var(--safe-top) var(--pad) 11cqw;
  color: #fff;
}
/* tab title — top-left, under the status bar, above the avatar/search row */
.m-title {
  position: relative;
  z-index: 1;
  margin-top: 1.6cqw;
  font-size: 7cqw;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}

.m-head-row {
  position: relative;
  z-index: 1;
  margin-top: 3.4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-head-tools { display: flex; gap: 2.6cqw; }
.m-head .icon-btn,
.pl-head .icon-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.m-cards {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  gap: 2.4cqw;
}
.m-card {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  height: 11.4cqw;
  padding: 0 3.4cqw 0 2.4cqw;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--t-xs);
  font-weight: 500;
  white-space: nowrap;
}
.m-card.is-active { background: rgba(255, 255, 255, 0.22); color: #fff; }
.m-card--add { width: 11.4cqw; padding: 0; justify-content: center; }
.card-art {
  flex: 0 0 auto;
  width: 10cqw;
  height: 6.6cqw;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.28);
}
.card-art--glow { background: linear-gradient(138deg, #00e013 0%, #05a94b 52%, #04613a 100%); }
.card-art--mood { background: linear-gradient(140deg, #8a68ff 0%, #3a6bff 58%, #1a2280 100%); }

.m-sheet {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  margin-top: -7cqw;
  padding: 6.5cqw var(--pad) calc(var(--safe-bottom) + 1.5cqw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -1cqw 5cqw rgba(0, 0, 0, 0.16);
}
.m-acct {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.m-acct-num { color: var(--ink-2); }
.m-acct .chev-ico { width: 1.8cqw; height: 3.2cqw; }
.m-amount {
  margin-top: 2cqw;
  font-size: 16cqw;
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.m-sheet .pill-row { padding: 0; margin-top: 6.4cqw; }

.m-plus { margin-top: 8cqw; }
.m-plus-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.6cqw;
}
.m-plus-name { font-size: var(--t-md); font-weight: 500; }
.m-plus-note { font-size: var(--t-xs); color: var(--ink-2); }

/* pools card (money + plus) */
.pools {
  margin-top: 7cqw;
  display: flex;
  align-items: center;
  gap: 3.6cqw;
  padding: 4cqw;
  border-radius: var(--r-lg);
  background: var(--fill);
}
.pools-badge { position: relative; flex: 0 0 auto; width: 15cqw; height: 15cqw; }
.pools-badge .ring-bg { stroke: rgba(0, 0, 0, 0.1); }
.faces {
  position: absolute;
  inset: 2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.face {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  box-shadow: 0 0 0 0.45cqw var(--fill);
}
.face + .face { margin-left: -1.5cqw; }
.face-1 { background: linear-gradient(140deg, #ffcf5c, #ff6a3d); }
.face-2 { background: linear-gradient(140deg, #7ce8ff, #3a6bff); }
.face-3 { background: linear-gradient(140deg, #b4ff9c, #00a34a); }

.pools-text { display: flex; flex-direction: column; gap: 0.4cqw; flex: 1 1 auto; min-width: 0; }
.pools-label { font-size: var(--t-2xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.pools-amount { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.03em; }
.pools-sub { font-size: var(--t-xs); color: var(--ink-2); }

/* crypto row (money + plus) */
.crypto {
  margin-top: auto;
  padding-top: 5.6cqw;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 3.2cqw;
}
.crypto-coin {
  flex: 0 0 auto;
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #ffb347 0%, #f5892b 55%, #d4661a 100%);
}
.crypto-text { display: flex; flex-direction: column; gap: 0.4cqw; flex: 0 0 auto; }
.crypto-name { font-size: var(--t-md); font-weight: 500; }
.crypto-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: var(--t-xs);
  color: #04a812;
}
.crypto-delta .ico { width: 2.8cqw; height: 2.8cqw; }
.crypto-spark { flex: 1 1 auto; height: 7cqw; min-width: 0; padding: 0 1.6cqw; }
.crypto-amount { font-size: var(--t-md); font-weight: 500; flex: 0 0 auto; }

/* -------------------------------------------------------------------------- */
/* screen: plus                                                                */
/* -------------------------------------------------------------------------- */

.pl-head {
  position: relative;
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  padding: var(--safe-top) var(--pad) 11cqw;
  color: #fff;
}
.pl-lockup {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 3cqw;
  color: var(--green);
}
.pl-mark {
  width: 11cqw;
  height: 11cqw;
  border-radius: 3.2cqw;
  display: grid;
  place-items: center;
  background: rgba(0, 224, 19, 0.16);
  border: 1px solid rgba(0, 224, 19, 0.4);
}
.pl-lockup-text { display: flex; align-items: baseline; gap: 2cqw; }
.pl-brand { font-size: var(--t-lg); font-weight: 500; color: #fff; letter-spacing: -0.02em; }
.pl-word { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; }
.pl-until {
  position: relative;
  z-index: 1;
  margin-top: 2.6cqw;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.62);
}

.pl-sheet {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  margin-top: -7cqw;
  padding: 6cqw var(--pad) calc(var(--safe-bottom) + 1.5cqw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -1cqw 5cqw rgba(0, 0, 0, 0.16);
}
.pl-status {
  padding: 5cqw;
  border-radius: var(--r-lg);
  background: rgba(0, 224, 19, 0.09);
  border: 1px solid rgba(0, 224, 19, 0.22);
}
.pl-status-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.8cqw;
}
.pl-status-name { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; }
.pl-status-note { font-size: var(--t-xs); color: var(--ink-2); }
.pl-status .track { background: rgba(0, 0, 0, 0.08); }
.pl-status-fine { display: block; margin-top: 3.4cqw; font-size: var(--t-2xs); color: var(--ink-2); line-height: 1.35; }

.pl-section {
  margin: 6.5cqw 0 3cqw;
  font-size: var(--t-2xs);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pl-perks { display: flex; gap: 2.6cqw; }
.perk {
  flex: 1 1 0;
  padding: 4cqw 3cqw;
  border-radius: var(--r-md);
  background: var(--fill);
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}
.perk-value { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.03em; }
.perk-label { font-size: var(--t-2xs); color: var(--ink-2); line-height: 1.3; }

.pl-sheet .pools { margin-top: 6cqw; }

/* -------------------------------------------------------------------------- */
/* screen: borrow                                                              */
/* -------------------------------------------------------------------------- */

.bw-hero {
  flex: 1 1 auto;          /* soaks up the free height so nothing floats */
  min-height: 0;
  padding: 6cqw var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bw-label { font-size: var(--t-sm); color: var(--ink-2); }
.bw-amount {
  margin-top: 1.8cqw;
  font-size: 24cqw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.bw-avail { margin-top: 2.6cqw; font-size: var(--t-sm); color: var(--ink-2); }

.bw-slider { flex: 0 0 auto; margin-top: 8cqw; padding: 0 var(--pad); }
.bw-track {
  position: relative;
  height: 2.6cqw;
  border-radius: 999px;
  background: var(--fill-2);
}
.bw-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--green);
  transform-origin: 0 50%;
  animation: track-grow 1.15s var(--ez) both;
}
.bw-knob {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 8.6cqw;
  height: 8.6cqw;
  margin: -4.3cqw 0 0 -4.3cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5cqw 1.6cqw rgba(0, 0, 0, 0.24), inset 0 0 0 0.4cqw rgba(0, 0, 0, 0.05);
  animation: knob-slide 1.15s var(--ez) both;
}
@keyframes knob-slide { from { transform: translateX(-40cqw); } to { transform: none; } }
.bw-ticks {
  margin-top: 3cqw;
  display: flex;
  justify-content: space-between;
  font-size: var(--t-2xs);
  color: var(--ink-2);
}

.bw-terms { flex: 0 0 auto; margin-top: 8cqw; }
.bw-cover {
  flex: 0 0 auto;
  margin: 3.4cqw var(--pad) 0;
  padding: 3.6cqw 4cqw;
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  border-radius: var(--r-lg);
  background: rgba(0, 224, 19, 0.1);
  border: 1px solid rgba(0, 224, 19, 0.24);
}
.bw-cover-glyph {
  flex: 0 0 auto;
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 224, 19, 0.2);
  color: #04a812;
}
.bw-foot {
  flex: 0 0 auto;
  margin-top: 6cqw;
  padding: 0 var(--pad) calc(var(--safe-bottom) + 2cqw);
}
.bw-foot .pill-btn { height: 13cqw; font-size: var(--t-md); }

/* -------------------------------------------------------------------------- */
/* screen: tags                                                                */
/* -------------------------------------------------------------------------- */

.tg-hero {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4cqw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6cqw;
}
.tg-token-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 52cqw;
  height: 52cqw;
  display: grid;
  place-items: center;
}
.tg-token {
  position: relative;
  width: 40cqw;
  height: 40cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(72% 72% at 34% 26%, #2b2f36 0%, #131519 46%, #06070a 100%);
  box-shadow:
    inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.1),
    0 3cqw 8cqw rgba(0, 0, 0, 0.55);
}
.tg-token-ring {
  position: absolute;
  inset: 3.4cqw;
  border-radius: 50%;
  border: 0.5cqw solid rgba(0, 224, 19, 0.55);
}
.tg-token-mark { color: var(--green); display: grid; place-items: center; }
.tg-token-mark .mark { width: 15cqw; height: 15cqw; }
.tg-pulse {
  position: absolute;
  width: 40cqw;
  height: 40cqw;
  border-radius: 50%;
  border: 0.4cqw solid rgba(0, 224, 19, 0.4);
  opacity: 0;
  animation: tap-pulse 3.4s var(--ez) infinite;
}
.tg-pulse--2 { animation-delay: 1.1s; }
@keyframes tap-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.tg-caption {
  flex: 0 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  text-align: center;
}
.tg-caption-title { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; }
.tg-caption-sub { font-size: var(--t-xs); color: var(--ink-2); }

.tg-list {
  flex: 0 0 auto;
  margin-top: 7cqw;
  padding: 0 var(--pad) calc(var(--safe-bottom) + 2.5cqw);
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
}
.tg-dot {
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: radial-gradient(66% 66% at 34% 28%, #33373f, #0b0c10);
  box-shadow: inset 0 0 0 0.4cqw rgba(255, 255, 255, 0.14);
}
.tg-dot--live { box-shadow: inset 0 0 0 0.4cqw rgba(0, 224, 19, 0.75); }
.tg-dot--travel { box-shadow: inset 0 0 0 0.4cqw rgba(255, 255, 255, 0.2); }

/* -------------------------------------------------------------------------- */
/* screen: save                                                                */
/* -------------------------------------------------------------------------- */

.sv-hero {
  flex: 1 1 auto;
  min-height: 0;
  padding: 5cqw 0;
  display: grid;
  place-items: center;
}
.sv-ring { position: relative; width: 68cqw; height: 68cqw; }
.sv-ring .ring circle { stroke-width: 2.6; }
.sv-ring .ring-bg { stroke: rgba(0, 0, 0, 0.07); }
.sv-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
}
.sv-amount { font-size: 10.4cqw; font-weight: 500; letter-spacing: -0.04em; }
.sv-goal { font-size: var(--t-xs); color: var(--ink-2); }

.sv-rows { flex: 0 0 auto; }
.sv-rows .row { padding-top: 4.2cqw; padding-bottom: 4.2cqw; }
.sv-rows .row + .row { border-top: 1px solid var(--line); }
.sv-actions {
  margin-top: 4cqw;
  padding-bottom: calc(var(--safe-bottom) + 2cqw);
}

/* -------------------------------------------------------------------------- */
/* screen: send                                                                */
/* -------------------------------------------------------------------------- */

.sn-to {
  flex: 0 0 auto;
  margin-top: 3cqw;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.sn-to-text { display: flex; flex-direction: column; gap: 0.4cqw; }
.sn-to-name { font-size: var(--t-md); font-weight: 500; }
.sn-to-tag { font-size: var(--t-xs); color: var(--ink-2); }

.sn-stage {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
}
.sn-amount { display: flex; align-items: center; gap: 1.2cqw; }
.sn-figure {
  font-size: 26cqw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--green);
}
.sn-caret {
  width: 1.1cqw;
  height: 20cqw;
  border-radius: 999px;
  background: var(--green);
  animation: caret-blink 1.1s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.sn-stickers { position: absolute; inset: 0; pointer-events: none; }
.sticker {
  position: absolute;
  width: 14cqw;
  height: 14cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.16), inset 0 0 0 0.4cqw rgba(0, 0, 0, 0.05);
  animation: sticker-pop 0.72s var(--ez) both;
}
.sticker-in {
  font-size: 6.4cqw;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-sans);
  animation: sticker-float 4.6s ease-in-out infinite alternate;
}
.sticker--a { left: 7cqw;  top: 8cqw;    animation-delay: 0.15s; }
.sticker--b { right: 9cqw; top: 3cqw;    animation-delay: 0.3s; }
.sticker--c { left: 12cqw; bottom: 6cqw; animation-delay: 0.45s; }
.sticker--d { right: 6cqw; bottom: 11cqw; animation-delay: 0.6s; }
.sticker--b .sticker-in { animation-delay: 0.5s; }
.sticker--c .sticker-in { animation-delay: 1s; }
.sticker--d .sticker-in { animation-delay: 1.5s; }
@keyframes sticker-pop {
  0%   { transform: scale(0.2) rotate(-16deg); opacity: 0; }
  62%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes sticker-float {
  from { transform: translateY(-1.1cqw) rotate(-4deg); }
  to   { transform: translateY(1.4cqw) rotate(5deg); }
}

.sn-note {
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 4cqw;
  padding: 2.4cqw 4.4cqw;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.keypad {
  flex: 0 0 auto;
  padding: 0 3cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1cqw;
}
.key {
  height: 15cqw;
  display: grid;
  place-items: center;
  font-size: 8cqw;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.key .ico { width: 7cqw; height: 7cqw; }

.sn-actions {
  flex: 0 0 auto;
  margin-top: 3.4cqw;
  padding: 0 var(--pad) calc(var(--safe-bottom) + 2cqw);
  display: flex;
  gap: 3cqw;
}
.sn-actions .pill-btn { height: 13cqw; font-size: var(--t-md); }

/* -------------------------------------------------------------------------- */
/* screen: security                                                            */
/* -------------------------------------------------------------------------- */

.sc-hero {
  flex: 1 1 auto;
  min-height: 0;
  padding: 5cqw var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sc-shield-wrap {
  position: relative;
  width: 34cqw;
  height: 34cqw;
  display: grid;
  place-items: center;
  margin-bottom: 5.5cqw;
}
.sc-shield {
  width: 24cqw;
  height: 24cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  background: radial-gradient(70% 70% at 50% 30%, rgba(0, 224, 19, 0.28), rgba(0, 224, 19, 0.06));
  box-shadow: inset 0 0 0 0.4cqw rgba(0, 224, 19, 0.35);
}
.sc-shield .ico { width: 12cqw; height: 12cqw; }
.sc-halo {
  position: absolute;
  width: 24cqw;
  height: 24cqw;
  border-radius: 50%;
  border: 0.4cqw solid rgba(0, 224, 19, 0.35);
  opacity: 0;
  animation: tap-pulse 3.8s var(--ez) infinite;
}
.sc-halo--2 { animation-delay: 1.3s; }
.sc-title { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.03em; }
.sc-sub { margin-top: 2cqw; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; max-width: 76%; }

.sc-rows {
  flex: 0 0 auto;
  margin-top: 7cqw;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
}
.sc-rows .row-glyph { background: rgba(255, 255, 255, 0.1); }
.sc-fine {
  flex: 0 0 auto;
  margin-top: 5.5cqw;
  padding: 0 var(--pad) calc(var(--safe-bottom) + 2cqw);
  text-align: center;
  font-size: var(--t-2xs);
  color: var(--ink-2);
}

/* -------------------------------------------------------------------------- */
/* pause + reduced motion                                                      */
/* -------------------------------------------------------------------------- */

/* The stage (or any ancestor) toggles .paused; the frame itself accepts it too.
   Only CSS animations freeze — screen crossfades are transitions and keep
   working while paused. */
.paused .phone,
.paused .phone *,
.phone.paused,
.phone.paused * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .phone,
  .phone * {
    animation: none !important;
    transition: none !important;
  }
}