/* ============================================================
   Ape Wallet — in-phone app screens.
   Everything here is authored in the source design's coordinate
   system (402 × 874 pt) and scaled as a whole via --k, so every
   value below matches the Figma export 1:1.
   ============================================================ */

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  transform-origin: 0 0;
  transform: scale(var(--k, 0.707));
  background: #000000;
  /* the canvas rounds its own corners (55pt, same as the screen) so nothing
     square can peek out even if an ancestor's clip is defeated */
  border-radius: 55px;
  overflow: hidden;
  font-family: "Inter Tight", sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* ---------- status bar ---------- */
.app__status {
  position: absolute;
  top: 24.2px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 31px 0 48px;
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.app__status-icons { display: flex; align-items: center; gap: 6px; }
.app__status-icons svg { display: block; fill: #ffffff; }

/* ---------- header ---------- */
.app__head {
  position: absolute;
  top: 62px;
  left: 16px;
  right: 16px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* positioned absolutely: the flex header would not centre it on 201pt */
.app__logo {
  position: absolute;
  left: 165.1px;
  top: 67.8px;
  display: flex;
  align-items: flex-start;
  gap: 2.3px;
}
.app__logo svg { display: block; flex: none; }
.app__logo b {
  font-size: 36.7px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: -5.5px;   /* lands the baseline on 94pt, matching the export */
  color: #ffffff;       /* the export is flat white, not a metal gradient */
}
.app__gift {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #2a2a2c, #0e0e10 70%);
  border: 1px solid rgba(235, 235, 235, 0.12);
  display: grid;
  place-items: center;
}
.app__gift svg { display: block; }

/* ---------- ambient glow behind the balance ---------- */
.app__glow {
  position: absolute;
  top: 237px;
  left: 0;
  width: 402px;
  height: 194px;
  background: linear-gradient(180deg, #211d1d 0%, #999999 55%, #808080 100%);
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- balance ---------- */
.app__label {
  position: absolute;
  top: 142.8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13.2px;
  line-height: 1;
  font-weight: 400;
  color: rgba(241, 241, 243, 0.65);
}
.app__balance {
  position: absolute;
  top: 167.25px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 49.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.app__balance small { font-size: 26.8px; font-weight: 600; letter-spacing: 0; }
.app__sub {
  position: absolute;
  top: 223.6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: rgba(241, 241, 243, 0.72);
}

/* ---------- glassy 1px gradient border, reused everywhere ---------- */
.gborder { position: relative; }
.gborder::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(235, 235, 235, 0.55), rgba(51, 51, 51, 0) 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- quick actions ---------- */
.app__actions {
  position: absolute;
  top: 266px;
  left: 24px;
  display: flex;
  gap: 8px;
}
.qa {
  width: 82.5px;
  height: 72px;
  border-radius: 16px;
  background: rgba(231, 231, 232, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.qa svg { display: block; }
.qa span { font-size: 15px; font-weight: 500; line-height: 1; }
.qa svg { flex: none; }

/* ---------- asset cards ---------- */
/* full-width sheet the asset cards and promo sit on (export: y=362, h=314,
   64pt rounded top corners) — shifted up with the rest of the stack */
.app__sheet {
  position: absolute;
  top: 352px;
  left: 0;
  width: 402px;
  height: 294px;
  background: #0d0d0d;
  border-radius: 64px 64px 0 0;
}

/* the stack below the quick actions keeps a uniform 14pt rhythm:
   tiles 338 → sheet 352 → assets 366 → promo 500 → sheet ends 646 → peek 660 */
.app__assets {
  position: absolute;
  top: 366px;
  left: 16px;
  display: flex;
  gap: 8px;
}
.acard {
  width: 181px;
  height: 120px;
  border-radius: 24px;
  padding: 20px;
  box-sizing: border-box;
}
.acard__top { display: flex; align-items: center; gap: 10px; }
.acard__ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.acard__ico--usdt { background: #26a17b; }
.acard__ico--card { background: rgba(231, 231, 232, 0.1); }
.acard__name { font-size: 15px; font-weight: 500; }
.acard__val {
  margin-top: 10.3px;
  font-size: 21px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.acard__val small { font-size: 14px; font-weight: 600; }
.acard__sub {
  margin-top: 4.35px;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  color: rgba(241, 241, 243, 0.55);
  white-space: nowrap;
}

/* ---------- promo card ---------- */
.app__promo {
  position: absolute;
  top: 500px;
  left: 16px;
  width: 370px;
  height: 132px;
  border-radius: 24px;
  background: #212121;
  overflow: hidden;
}
.app__promo-txt {
  position: absolute;
  top: 21.5px;
  left: 20px;
  font-size: 16.2px;
  font-weight: 500;
  line-height: 1.26;
}
.app__promo-btn {
  position: absolute;
  top: 72px;
  left: 20px;
  width: 114px;
  height: 36px;
  border-radius: 18px;
  background: #ffffff;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.app__promo-img {
  position: absolute;
  top: 19px;
  left: 169px;
  width: 204px;
  height: auto;
}
.app__promo-glow {
  position: absolute;
  top: 20px;
  left: 214px;
  width: 142px;
  height: 114px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 70%);
  filter: blur(14px);
}

/* ---------- card peeking above the tab bar ---------- */
.app__peek {
  position: absolute;
  top: 660px;
  left: 16px;
  width: 370px;
  height: 355px;
  border-radius: 40px;
  background: #0d0d0d;
  overflow: hidden;
}
.app__peek img { width: 100%; opacity: 0.18; display: block; }

/* ---------- tab bar ---------- */
.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 105px;
  background: rgba(13, 13, 13, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  /* five equal columns put the tab centres on 40.2 / 120.6 / 201 / 281.4 / 361.8 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  align-items: start;
  padding-top: 16px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #847e7e;
}
.tab svg { display: block; }
.tab span { font-size: 12px; font-weight: 500; line-height: 1; }
.tab--on { color: #ffffff; }
.tab--mid {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  gap: 0;
  margin-top: -8px;
}
.app__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 144px;
  height: 5px;
  border-radius: 2.5px;
  background: #fafafa;
}

/* ============================================================
   Screen 2 — Virtual cards
   ============================================================ */
.cards__holder {
  position: absolute;
  top: 127.5px; left: 16px;
  /* height = card + 28.75 gutter top and bottom, so the inset is even all round */
  width: 370px; height: 253.7px;
  border-radius: 30px;
  background: rgba(240, 240, 240, 0.04);
}
.ccard {
  position: absolute;
  top: 156.25px; left: 44.75px;
  width: 312.5px; height: 196.2px;
  border-radius: 14.5px;
  overflow: hidden;
  background: linear-gradient(150deg, #2a2d30 0%, #141618 42%, #0b0d0e 100%);
}
.ccard__dash {
  position: absolute; inset: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  pointer-events: none;
}
.ccard__mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88.4px; height: 100px;   /* artwork bbox ratio 158.27:179.09 */
  opacity: 0.09;
}
/* balance and the reveal pill share one row, with equal 18pt gutters
   on the left, right and bottom of the card */
.ccard__row {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.ccard__lbl {
  font-size: 15px; font-weight: 400; line-height: 1; color: #a1a1a1;
  margin-bottom: 9px;
}
.ccard__amt {
  font-size: 30px; font-weight: 500; line-height: 1;
}
.ccard__eye {
  flex: none;
  width: 100px; height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 400; color: #d8d8d8;
}
.cards__dots {
  position: absolute; top: 396.6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 12px;
}
.cards__dots i { width: 5.8px; height: 5.8px; border-radius: 50%; background: #d9d9d9; opacity: 0.35; }
.cards__dots i:first-child { opacity: 1; }
.cards__fund {
  position: absolute; top: 412.7px; left: 16px;
  width: 306px; height: 40px;
  border-radius: 10px;
  background: rgba(231, 231, 232, 0.08);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 15px; font-weight: 500;
}
.cards__refresh {
  position: absolute; top: 412.7px; left: 330px;
  width: 56px; height: 40px;
  border-radius: 10px;
  background: rgba(231, 231, 232, 0.2);
  display: grid; place-items: center;
}
.app__meta {
  position: absolute; left: 16.9px;
  font-size: 13.5px; line-height: 1; color: #808080;
}
.app__meta b { color: #dcdcdc; font-weight: 400; }
.app__meta--addr { top: 469.3px; }
.app__meta--addrv { top: 492px; display: flex; align-items: center; gap: 8px; }
.app__meta--name { top: 527px; display: flex; align-items: center; gap: 8px; }
.app__h3 {
  position: absolute; left: 16.7px;
  font-size: 17px; line-height: 1; font-weight: 500;
}
.seg {
  position: absolute; top: 619.2px; left: 16px;
  width: 370px; height: 36px;
  border-radius: 18px;
  background: #0d0d0d;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center;
  font-size: 14px; font-weight: 500; color: #808080;
}
.seg i {
  font-style: normal; width: 118px; height: 28px;
  display: grid; place-items: center; border-radius: 14px;
}
.seg i.on { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.app__day {
  position: absolute; left: 16.3px;
  font-size: 13px; line-height: 1; color: #808080;
}
.trow { position: absolute; left: 16px; width: 370px; height: 44px; }
.trow__ico {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(240, 240, 240, 0.04);
  display: grid; place-items: center;
}
.trow__t {
  position: absolute; left: 56.7px; top: 5.3px;
  font-size: 15px; line-height: 1; font-weight: 500;
}
.trow__s {
  position: absolute; left: 56.6px; top: 27.6px;
  font-size: 12px; line-height: 1; color: #808080;
}
.trow__r {
  position: absolute; right: 0; top: 5.3px;
  font-size: 15px; line-height: 1; font-weight: 500; text-align: right;
}
.trow__r small { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; color: #808080; }

/* ============================================================
   Screen 3 — eSIM
   ============================================================ */
.esim__title {
  position: absolute; top: 78px; left: 17.3px;
  font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
}
.esim__blbl {
  position: absolute; top: 143px; left: 34.4px;
  font-size: 14px; line-height: 1; color: #808080;
}
.esim__bal {
  position: absolute; top: 163px; left: 34.7px;
  font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
}
.esim__fund {
  position: absolute; top: 146px; left: 189px;
  width: 179px; height: 48px;
  border-radius: 24px;
  background: #ffffff; color: #0a0a0a;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px; font-weight: 600;
}
.etile {
  position: absolute; top: 214px;
  height: 106px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
}
.etile--l { left: 16px; width: 222px; }
.etile--r { left: 250px; width: 136px; }
.etile__t {
  position: absolute; top: 15px; left: 15.4px;
  font-size: 15px; line-height: 1; font-weight: 500;
}
.etile__v {
  position: absolute; top: 40px; left: 15.7px;
  font-size: 17px; line-height: 1; font-weight: 600; color: #29c750;
}
.etile__bar {
  position: absolute; top: 85.2px; left: 11px;
  width: 192.2px; height: 6px; border-radius: 3px; background: #282828;
}
.etile__bar i { display: block; width: 170px; height: 6px; border-radius: 3px; background: #29c750; }
.etile__chip {
  position: absolute; top: 34px; right: 14px;
  width: 62px; height: 40px; border-radius: 8px;
  background: linear-gradient(145deg, #3a4a44, #1b2422);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: #9fd8c4;
}
.etile__flags { position: absolute; top: 46px; left: 12px; display: flex; gap: 4px; }
.eflag {
  width: 28px; height: 28px; border-radius: 10.2px;
  overflow: hidden; display: grid; place-items: center;
  background: rgba(240, 240, 240, 0.04);
}
.eflag img { width: 100%; height: 100%; object-fit: cover; }
.einfo {
  position: absolute; top: 332px; left: 16px;
  width: 370px; height: 144px;
  border-radius: 24px;
  background: #0d0d0d;
  border: 1px solid #333333;
  box-sizing: border-box;
}
.einfo__row {
  position: absolute; left: 12.5px; right: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; line-height: 1;
}
.einfo__row span { color: #cfcfcf; }
.einfo__row b { font-weight: 500; }
.einfo__pill {
  width: 58px; height: 28px; border-radius: 14px;
  background: rgba(41, 199, 80, 0.36);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 500; color: #ffffff;
}
.einfo__loc { display: flex; align-items: center; gap: 6px; }
.einfo__loc img { width: 16px; height: 16px; border-radius: 5.8px; object-fit: cover; }