/* ============================================================
 * MiniShop  Mini-App  Premium Dark Theme
 * Green/Jade accents · Refined typography · Generous spacing
 * ============================================================ */

[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* =========================
 * Theme tokens (3 主题)
 * Default = jade (current 暗夜玉石)
 * data-theme="black"  = 纯黑 + 亮绿
 * data-theme="light"  = 白底 + 翠绿
 * ========================= */
:root {
  /* ---- jade (default dark) ---- */
  --bg:           #07100a;
  --bg-soft:      #0a1610;
  --surface:      #0f1d17;
  --surface-2:    #16291f;
  --surface-3:    #1f3a2c;
  --line:         rgba(120, 220, 160, 0.10);
  --line-strong:  rgba(120, 220, 160, 0.18);
  --green:        #1ec773;
  --green-2:      #34d987;
  --green-3:      #14a05c;
  --green-glow:   rgba(30, 199, 115, 0.45);
  --green-soft:   rgba(30, 199, 115, 0.10);
  --gold:         #d4b87a;
  --gold-soft:    rgba(212, 184, 122, 0.18);
  --fg:           #e9f1ed;
  --fg-2:         #c2cec9;
  --fg-3:         #85938b;
  --muted:        #6c7e75;
  --placeholder:  #5a6a62;
  --danger:       #ef5b5b;
  --warn:         #d6a23a;
  --primary-fg:   #06170d;      /* 绿底上的深色文字 */
  --mask-bg:      rgba(4,10,7,.65);
  --spinner-bg:   rgba(30,199,115,.18);
  --ambient-1:    radial-gradient(60% 40% at 50% 0%, rgba(30,199,115,.10), transparent 70%);
  --ambient-2:    radial-gradient(35% 25% at 100% 100%, rgba(212,184,122,.06), transparent 70%);
  --row-hover:    rgba(255,255,255,.02);

  --radius-s: 12px;
  --radius:   16px;
  --radius-l: 22px;
  --radius-xl: 28px;

  --shadow-sm:   0 1px 0 rgba(255,255,255,.04) inset, 0 10px 28px rgba(0,0,0,.24);
  --shadow:      0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.34);
  --shadow-glow: 0 0 0 1px rgba(30,199,115,.25), 0 6px 24px -2px rgba(30,199,115,.18);
}

/* ---- theme: black (纯黑 + 亮绿) ---- */
html[data-theme="black"] {
  --bg:           #000000;
  --bg-soft:      #0a0a0a;
  --surface:      #131313;
  --surface-2:    #1a1a1a;
  --surface-3:    #242424;
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(34,197,94,.32);
  --green:        #22c55e;
  --green-2:      #4ade80;
  --green-3:      #16a34a;
  --green-glow:   rgba(34,197,94,.55);
  --green-soft:   rgba(34,197,94,.12);
  --gold:         #facc15;
  --gold-soft:    rgba(250,204,21,.15);
  --fg:           #ffffff;
  --fg-2:         #d4d4d4;
  --fg-3:         #a3a3a3;
  --muted:        #737373;
  --placeholder:  #525252;
  --primary-fg:   #000000;
  --mask-bg:      rgba(0,0,0,.82);
  --spinner-bg:   rgba(34,197,94,.22);
  --ambient-1:    radial-gradient(48% 32% at 50% 0%, rgba(34,197,94,.15), transparent 70%);
  --ambient-2:    none;
  --row-hover:    rgba(255,255,255,.03);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow:       0 4px 22px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
}

/* ---- theme: light (白底 + 翠绿) ---- */
html[data-theme="light"] {
  --bg:           #f4f9f6;
  --bg-soft:      #eaf4ee;
  --surface:      #ffffff;
  --surface-2:    #f4faf6;
  --surface-3:    #dceee5;
  --line:         rgba(20,160,92,.10);
  --line-strong:  rgba(20,160,92,.22);
  --green:        #14a05c;
  --green-2:      #1ec773;
  --green-3:      #0d7841;
  --green-glow:   rgba(20,160,92,.30);
  --green-soft:   rgba(20,160,92,.10);
  --gold:         #b48a2a;
  --gold-soft:    rgba(180,138,42,.12);
  --fg:           #0f1d17;
  --fg-2:         #2d3d34;
  --fg-3:         #5a6b62;
  --muted:        #8a9a93;
  --placeholder:  #afbcb5;
  --danger:       #c92a2a;
  --warn:         #b67a0a;
  --primary-fg:   #ffffff;
  --mask-bg:      rgba(240,247,243,.85);
  --spinner-bg:   rgba(20,160,92,.18);
  --ambient-1:    radial-gradient(60% 40% at 50% 0%, rgba(20,160,92,.12), transparent 70%);
  --ambient-2:    radial-gradient(35% 25% at 100% 100%, rgba(180,138,42,.08), transparent 70%);
  --row-hover:    rgba(20,160,92,.05);
  --shadow-sm:    0 1px 2px rgba(20,30,25,.06);
  --shadow:       0 6px 22px rgba(20,30,25,.10);
  --shadow-glow:  0 0 0 1px rgba(20,160,92,.22), 0 6px 22px -2px rgba(20,160,92,.20);
}

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont,
               "PingFang SC", "Helvetica Neue", "Hiragino Sans GB",
               "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  background-image: var(--ambient-1), var(--ambient-2);
  background-attachment: fixed;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-2); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; outline: none; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
img { display: block; max-width: 100%; }

/* number alignment */
b, .num, .price { font-variant-numeric: tabular-nums; }

/* ====== Top bar ====== */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 2px;
  position: relative; z-index: 30;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--bg) 68%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.iconBtn {
  width: 38px; height: 38px; border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--fg-2);
  display: grid; place-items: center;
  font-size: 18px;
  transition: background .15s, transform .1s;
}
.iconBtn:active { transform: scale(.96); background: var(--surface-2); }

/* 语言切换 - 圆形 */
.langBtn {
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.15), transparent 70%),
    linear-gradient(140deg, var(--green-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  box-shadow: 0 4px 12px -4px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.10);
  position: relative;
}
.langBtn::after {
  content: '';
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--green-glow);
}
.langBtn[data-lang="en"] { font-size: 12px; }
.langBtn[data-lang="zh"] { font-size: 14px; }

.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brandIcon {
  width: 36px; height: 36px; border-radius: 13px;
  background: linear-gradient(140deg, var(--green) 0%, var(--green-3) 100%);
  display: grid; place-items: center;
  font-weight: 700; color: var(--primary-fg); font-size: 14px;
  box-shadow: 0 6px 18px -4px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.25);
  overflow: hidden;
}
.brandIcon img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.brandName {
  font-weight: 820; font-size: 17px; letter-spacing: 0;
  color: var(--fg);
}

/* ====== Tabs (隐藏 - 用 2x2 网格代替) ====== */
.tabs {
  display: none;  /* 顶部类目 tab 已撤掉, 首页改用网格卡片. 保留 .tabs class 兼容老代码 */
  gap: 6px;
  padding: 10px 12px 14px;
  overflow-x: auto;
  position: sticky; top: 60px; z-index: 20;
  background: linear-gradient(180deg, var(--bg) 80%, transparent);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.esimChips { scrollbar-width: none; }
.esimChips::-webkit-scrollbar { display: none; height: 0; }
.tab {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-2);
  font-weight: 500; font-size: 14px;
  white-space: nowrap;
  border: 1px solid var(--line);
  transition: all .15s ease;
}
.tab:active { transform: scale(.97); }
.tab.active {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color: var(--primary-fg);
  border-color: transparent;
  box-shadow: 0 4px 16px -4px var(--green-glow);
  font-weight: 600;
}

/* ====== Cards ====== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 16px;
  margin: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.cardRow { display: flex; align-items: center; gap: 14px; }
.cardIcon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--green-soft), transparent);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--green-2);
  font-size: 22px;
  flex: 0 0 48px;
  overflow: hidden;
}
.cardIconImg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cardTitle { font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.cardDesc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

/* Hero/category card variant */
.heroCard {
  background:
    radial-gradient(120% 80% at 0% 0%, var(--green-soft), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.heroCard::before {
  content: '';
  position: absolute; right: -20px; top: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(50% 50% at 50% 50%, var(--green-soft), transparent 70%);
  pointer-events: none;
}

/* ====== Home / Services ====== */
.homeTop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 8px;
}
.homeBrandMark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--green) 0%, var(--green-3) 100%);
  box-shadow: 0 18px 34px -18px var(--green-glow);
}
.homeBrandName {
  color: var(--fg);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
}
.homeBrandSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.balanceHero {
  position: relative;
  margin: 12px 14px 14px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background:
    radial-gradient(46% 72% at 98% 8%, rgba(30,199,115,.18), transparent 68%),
    radial-gradient(60% 90% at 0% 100%, rgba(212,184,122,.20), transparent 70%),
    linear-gradient(145deg, var(--surface-3), var(--surface-2) 58%, var(--surface));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.balanceHero::after {
  content: '';
  position: absolute;
  right: -44px;
  top: -44px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 36px rgba(255,255,255,.025);
}
.balanceHeroTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.balanceHeroTop b {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--fg-2);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.balanceHeroAmount {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  color: var(--fg);
  font-size: 40px;
  font-weight: 850;
  line-height: 1;
}
.balanceHeroAmount small {
  color: var(--fg-2);
  font-size: 18px;
  font-weight: 800;
}
.balanceHeroActions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 26px;
}
.balanceHeroActions button {
  min-height: 52px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: var(--fg);
}
.balanceHeroActions button:first-child {
  background: linear-gradient(135deg, var(--green-2), var(--green-3));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 30px -18px var(--green-glow);
}
.quickGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 14px 18px;
}
.quickGrid button {
  min-height: 94px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 760;
}
.quickGrid svg { color: var(--green-2); }
.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 0;
}
.sectionHead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 850;
}
.sectionHead button {
  color: var(--green-2);
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 2px;
}
.homeHeader {
  padding: 16px 14px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.pageKicker {
  color: var(--green-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.homeTitle  { margin: 0; font-size: 30px; font-weight: 850; letter-spacing: 0; line-height: 1.05; }
.homeSubtitle { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.countPill {
  min-width: 58px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.catGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 8px 12px 16px;
}
.catTile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 18px 76px 18px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  min-height: 104px;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 16px;
  align-items: center;
  overflow: hidden;
}
.catTile::after {
  content: '→';
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--green-2);
  font-size: 25px; line-height: 45px;
  text-align: center;
  opacity: .95;
}
.catTile:active { transform: scale(.985); box-shadow: var(--shadow-glow); }
.catTileIcon {
  width: 58px; height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--green-2), var(--green-3));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: #fff; font-size: 24px;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 14px 30px -14px var(--green-glow);
}
.catTileIcon .cardIconImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.catTileText { min-width: 0; }
.catTileTitle {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catTileDesc {
  font-size: 13px; color: var(--muted); line-height: 1.35;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.catTileMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  color: var(--green-2);
  font-size: 13px;
  font-weight: 800;
}
.catTileMeta em {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.14);
  color: #5ee6a5;
  font-style: normal;
  font-size: 12px;
}
.catTile.featured:first-child {
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(255,214,102,.24), transparent 66%),
    linear-gradient(135deg, #0f3b28, #1e6b45 56%, #6c5a2a);
}
.catTile.featured:first-child .catTileIcon {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.16);
}
.catGrid.featured {
  padding-top: 12px;
}

/* ====== Form fields ====== */
.field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.field input { flex: 1; padding: 4px 0; font-size: 15px; }
.field .prefix { color: var(--muted); font-size: 15px; }
.field .apply {
  color: var(--green-2); font-weight: 600; font-size: 14px;
  padding: 6px 12px; border-radius: 8px; background: var(--green-soft);
  cursor: pointer; transition: background .15s;
}
.field .apply:active { background: var(--green-soft); }

/* ====== Coin / payment selector ====== */
.coins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 14px; }
.coin {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: all .15s ease;
}
.coin:active { transform: scale(.98); }
.coin.active {
  border-color: var(--green);
  background: linear-gradient(140deg, var(--green-soft), transparent);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.coinIcon {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--primary-fg);
  flex: 0 0 32px;
  overflow: hidden;
}
.coinIcon.ton  { background: linear-gradient(135deg, #0098ea, #0070b3); }
.coinIcon.usdt { background: linear-gradient(135deg, #26a17b, #1e7d5e); }
.coinIcon.okpay{ background: linear-gradient(135deg, #f5a623, #c97e0d); }
.coinIcon.fll  { background: linear-gradient(135deg, #c34cf5, #8e2cb9); }
.coinIconImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.coin .name { font-weight: 500; font-size: 14px; }

/* ====== Products price list ====== */
.priceList {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 8px 10px;
  overflow: hidden;
}
.priceRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .15s;
}
.priceRow:last-child { border-bottom: 0; }
.priceRow:active { background: var(--row-hover); }
.priceRow.active { background: linear-gradient(90deg, var(--green-soft) 0%, transparent 100%); }
.priceBreakdown { font-size: 11px; margin-top: 3px; color: var(--muted); }

/* 新行内"购买"按钮模式 */
.priceRowItem {
  display: flex; align-items: center; gap: 8px;
  min-height: 54px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.priceRowItem:last-child { border-bottom: 0; }
.priceRowItem:active { background: var(--row-hover); }
.priceRowMain { flex: 1; min-width: 0; }
.priceRowName {
  font-size: 14px;
  font-weight: 650;
  color: var(--fg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.priceRowSub  {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}
.productBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.productBadge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-input, var(--bg));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}
.productBadge.ok {
  border-color: rgba(38, 161, 123, .28);
  background: var(--green-soft);
  color: var(--green-3);
}
.productBadge.warn {
  border-color: rgba(211, 74, 74, .28);
  background: rgba(211, 74, 74, .08);
  color: var(--warn);
}
.productBadge.info {
  border-color: var(--line-strong);
}
.productHint {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.priceRowRight { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.priceRowPrice {
  font-size: 14px; font-weight: 750; color: var(--warn);
  display: flex; align-items: baseline; gap: 4px;
  white-space: nowrap;
  text-align: right;
}
.priceRowPrice .ccy { font-size: 10px; font-weight: 500; color: var(--muted); }
.priceBuyBtn {
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  font-size: 12px; font-weight: 700;
  border: 0;
  box-shadow: 0 3px 8px -2px var(--green-glow);
  cursor: pointer;
}
.priceBuyBtn:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.2);
  box-shadow: none;
}
.priceBuyBtn:active { transform: scale(.95); }
.priceRow.active::before {
  content: '';
  position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  background: var(--green); border-radius: 0 3px 3px 0;
}
.priceRow .name { font-size: 15px; font-weight: 500; color: var(--fg); }
.priceRow .price {
  font-weight: 700; font-size: 16px; color: var(--fg);
  text-align: right; line-height: 1.2;
}
.priceRow.active .price { color: var(--green-2); }
.priceRow .sub {
  display: block; font-size: 11px; color: var(--muted);
  font-weight: 400; margin-top: 3px; letter-spacing: 0;
}

/* eSIM 子类列表: 固定列宽, 让中间内容上下完全对齐 */
.esimCatRow.priceRowItem {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 0;
  min-height: 124px;
  padding: 14px 14px 14px 0;
}
.esimCatRow .cardIcon {
  width: 64px;
  height: 64px;
  margin: 0 auto !important;
  border-radius: 18px;
}
.esimCatRow .priceRowMain {
  min-width: 0;
  padding: 0;
}
.esimCatRow .priceRowName,
.esimCatRow .priceRowSub {
  width: 100%;
}
.esimCatRow .priceRowRight {
  width: 32px;
  justify-content: center;
}
.esimCatRow .priceRowRight .muted {
  font-size: 28px !important;
  line-height: 1 !important;
}

/* ====== Bottom fixed nav (钱包/我的) ====== */
.bottomNav {
  position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; right: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px;
  --bn-count: 4;
  --bn-index: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 50;
  overflow: hidden;
}
.bnGlider {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: calc((100% - 12px) / var(--bn-count));
  border-radius: 24px;
  pointer-events: none;
  transform: translateX(calc(var(--bn-index) * 100%));
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.30)),
    linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.06));
  border: 1px solid rgba(255,255,255,.48);
  box-shadow:
    0 16px 36px rgba(16,185,129,.14),
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(16,185,129,.10);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
.bnItem {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px;
  border-radius: 22px;
  background: transparent; border: 0;
  color: var(--muted);
  font: inherit;
  transition: color .22s ease, transform .22s ease;
}
.bnItem:active { transform: scale(.96); }
.bnItem.active { color: var(--green-2); background: transparent; }
.bnIcon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.bnIcon svg { width: 24px; height: 24px; }
.bnLabel { font-size: 11px; font-weight: 500; }

/* main 给底部 nav 留空间 */
#view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 108px;
}

/* topbar 头像 */
.iconBtn.avatarBtn {
  padding: 0; overflow: hidden;
}
.iconBtn.avatarBtn img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ====== Bottom action bar ====== */
.actionBar {
  position: fixed; bottom: 60px; left: 0; right: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, var(--bg) 35%);
  z-index: 40;
  pointer-events: none;
}
.actionBar .primary {
  pointer-events: auto;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color: var(--primary-fg);
  font-weight: 700; font-size: 16px; letter-spacing: -0.005em;
  box-shadow: 0 8px 24px -6px var(--green-glow),
              inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .1s, box-shadow .15s;
}
.actionBar .primary:active { transform: translateY(1px); box-shadow: 0 4px 12px -4px var(--green-glow); }
.inlineBuyBtn {
  width: 100%; padding: 15px 18px;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color: var(--primary-fg);
  font-weight: 700; font-size: 16px; letter-spacing: -0.005em;
  border: 0;
  box-shadow: 0 8px 24px -6px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .1s, box-shadow .15s;
  cursor: pointer;
}
.inlineBuyBtn:active { transform: translateY(1px); box-shadow: 0 4px 12px -4px var(--green-glow); }
.inlineBuyBtn:disabled {
  background: var(--surface-2); color: var(--muted);
  box-shadow: none; cursor: not-allowed;
}
.actionBar .primary:disabled {
  background: var(--surface-2); color: var(--muted);
  box-shadow: none; cursor: not-allowed;
}

/* ====== Pay panel (price + balance summary) ====== */
.payPanel {
  margin: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.payRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.payRow:last-child { border-bottom: 0; }
.payRow .label { color: var(--muted); font-size: 13px; }
.payRow .val { font-weight: 700; font-size: 16px; color: var(--fg); }
.payRow .val.big { font-size: 22px; letter-spacing: -.01em; }
.payRow .val.green { color: var(--green-2); }
.payRow .val.warn { color: var(--warn); }
.payRow .val .sub { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 500; }
.payRow.shortHint {
  background: rgba(214,162,58,.08);
  color: var(--warn);
  font-size: 12px;
  border-top: 1px dashed var(--line-strong);
  padding: 10px 18px;
}

/* ====== Balance pill ====== */
.balance {
  margin: 4px 14px 0;
  padding: 12px 16px;
  font-size: 13px; color: var(--fg-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.balance .label { color: var(--muted); font-size: 12px; }
.balance .val { color: var(--fg); font-weight: 600; }
.balance .val.green { color: var(--green-2); }
.balance .divider { width: 1px; height: 16px; background: var(--line-strong); }

/* ====== Section title ====== */
.sectionTitle {
  padding: 16px 18px 6px;
  color: var(--muted);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}

/* ====== Menu list (Me page etc) ====== */
.menuList {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  margin: 12px 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.menuItem {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .15s;
  color: var(--fg);
  font-size: 16px;
  font-weight: 800;
}
.menuItem:last-child { border-bottom: 0; }
.menuItem:active { background: var(--row-hover); }
.menuItem .arrow { color: var(--muted); font-size: 28px; line-height: 1; }
.menuItem b { color: var(--fg); }
.menuItem > div:first-child > span:first-child {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px;
  align-items: center !important;
  justify-content: center !important;
  background: var(--green-soft);
  color: var(--green-2) !important;
}

/* ====== Profile block ====== */
.accountHeader {
  padding: 18px 14px 8px;
}
.accountHeader h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: 0;
}
.profile {
  margin: 12px 14px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex; gap: 14px; align-items: center;
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-2), var(--green-3));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-weight: 700; font-size: 22px;
  color: #fff;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile .name { font-size: 18px; font-weight: 800; letter-spacing: 0; }
.profile .id { font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.profileBalance {
  text-align: right;
  flex: 0 0 auto;
}
.profileBalance span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.profileBalance b {
  display: block;
  color: var(--gold);
  font-size: 21px;
  line-height: 1.1;
  white-space: nowrap;
}

/* ====== HeroUI-style polish: soft surfaces, restrained accent, unified components ====== */
.topbar {
  padding: 10px 16px 4px;
}
.iconBtn,
.langBtn,
.bottomNav,
.menuList,
.profile,
.quickGrid button,
.catTile,
.balanceHero,
.card,
.field,
.priceList,
.ucardPanel,
.merchantPanel {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.iconBtn,
.langBtn {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.homeTop {
  padding: 16px 18px 8px;
}
.homeBrandMark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background:
    radial-gradient(70% 70% at 28% 22%, rgba(255,255,255,.30), transparent 55%),
    linear-gradient(145deg, var(--green), var(--green-3));
  box-shadow: 0 16px 34px -20px var(--green-glow);
}
.homeBrandName {
  font-size: 21px;
  letter-spacing: 0;
}
.homeBrandSub {
  color: var(--fg-3);
}
.balanceHero {
  margin: 12px 14px 16px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(58% 80% at 98% 0%, var(--green-soft), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 45px -32px rgba(0,0,0,.85);
}
.balanceHero::after {
  opacity: .45;
}
.balanceHeroTop {
  letter-spacing: 0;
}
.balanceHeroTop b {
  background: var(--green-soft);
  border-color: var(--line-strong);
  color: var(--green-2);
}
.balanceHeroAmount {
  margin-top: 20px;
  font-size: 38px;
}
.balanceHeroActions {
  margin-top: 22px;
}
.balanceHeroActions button,
.quickGrid button,
.catTile::after,
.priceBuyBtn,
.copyBtn,
.ucardPrimary,
.merchantPrimary {
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.balanceHeroActions button {
  background: var(--surface-3);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.balanceHeroActions button:first-child {
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  box-shadow: 0 12px 26px -18px var(--green-glow);
}
.quickGrid {
  gap: 12px;
  margin: 0 14px 20px;
}
.quickGrid button {
  min-height: 88px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -26px rgba(0,0,0,.75);
}
.quickGrid button:active,
.catTile:active,
.menuItem:active,
.balanceHeroActions button:active {
  transform: scale(.985);
}
.sectionHead {
  padding: 8px 18px 2px;
}
.sectionHead .pageKicker,
.homeHeader .pageKicker,
.accountHeader .pageKicker {
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .92;
}
.sectionHead h2,
.homeTitle,
.accountHeader h2 {
  font-weight: 820;
}
.catGrid {
  gap: 10px;
  padding-left: 14px;
  padding-right: 14px;
}
.catTile {
  min-height: 96px;
  border-radius: 24px;
  padding: 16px 70px 16px 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -30px rgba(0,0,0,.8);
}
.catTile::after {
  content: '›';
  width: 42px;
  height: 42px;
  right: 16px;
  border-radius: 16px;
  line-height: 39px;
  background: var(--green-soft);
  border: 1px solid var(--line);
  color: var(--green-2);
}
.catTileIcon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(70% 70% at 28% 22%, rgba(255,255,255,.26), transparent 58%),
    linear-gradient(145deg, var(--green), var(--green-3));
  box-shadow: 0 14px 30px -20px var(--green-glow);
}
.catTileTitle {
  font-size: 16px;
  font-weight: 780;
}
.catTileDesc {
  color: var(--fg-3);
}
.catTileMeta {
  margin-top: 9px;
  font-size: 12px;
}
.catTileMeta em {
  height: 22px;
  color: var(--green-2);
  background: var(--green-soft);
  border: 1px solid var(--line);
}
.catTile.featured:first-child {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(212,184,122,.16), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.catTile.featured:first-child .catTileIcon {
  background:
    radial-gradient(70% 70% at 28% 22%, rgba(255,255,255,.26), transparent 58%),
    linear-gradient(145deg, var(--green), var(--green-3));
  border-color: var(--line-strong);
}
.bottomNav {
  left: 14px;
  right: 14px;
  bottom: max(12px, env(safe-area-inset-bottom));
  border-radius: 30px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 48px -24px rgba(0,0,0,.85);
}
.bnItem {
  border-radius: 24px;
}
.bnItem.active {
  background: transparent;
  box-shadow: none;
}
.accountHeader {
  padding-left: 18px;
  padding-right: 18px;
}
.profile,
.menuList {
  margin-left: 14px;
  margin-right: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -28px rgba(0,0,0,.8);
}
.profile {
  padding: 18px;
}
.avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    radial-gradient(70% 70% at 28% 22%, rgba(255,255,255,.28), transparent 58%),
    linear-gradient(145deg, var(--green), var(--green-3));
}
.profileBalance b {
  color: var(--gold);
  font-weight: 850;
}
.menuItem {
  padding: 16px 18px;
  font-weight: 760;
}
.menuItem > div:first-child > span:first-child {
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

/* ====== Stat row (for Me) ====== */
.statGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 14px; }
.statBox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.statBox .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.statBox .num { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--green-2); }

/* ====== Amount chips ====== */
.amountChips { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 12px 0; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 0;
  text-align: center;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  color: var(--fg-2);
  transition: all .15s;
}
.chip:active { transform: scale(.97); }
.chip.active {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color: var(--primary-fg); border-color: transparent;
  box-shadow: 0 4px 14px -4px var(--green-glow);
}

/* ====== Code / address box ====== */
.codeBox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 14px;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  word-break: break-all;
}
.codeBox .val {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; flex: 1; color: var(--fg-2); line-height: 1.5;
}
.copyBtn {
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  border-radius: 9px;
  font-weight: 600; font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px var(--green-glow);
  border: 0; cursor: pointer;
}
.copyBtn:active { transform: scale(.96); }

/* 支付页超链接按钮: 用 <a> 让 WebView 原生处理跳转 */
.payAnchor {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color: var(--primary-fg) !important;
  font-weight: 700; font-size: 16px; letter-spacing: -0.005em;
  box-shadow: 0 8px 24px -6px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.18);
  text-align: center;
  text-decoration: none;
  transition: transform .1s;
}
.payAnchor:active { transform: translateY(1px); }

/* ====== Pills/status ====== */
.pill {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  display: inline-block; letter-spacing: 0;
}
.pill.pending    { background: var(--gold-soft); color: var(--warn); }
.pill.paid       { background: var(--green-soft); color: var(--green-2); }
.pill.success    { background: var(--green-soft); color: var(--green-2); }
.pill.failed     { background: rgba(239,91,91,.18); color: var(--danger); }
.pill.refunded   { background: var(--surface-3); color: var(--muted); }
.pill.processing { background: var(--gold-soft); color: var(--gold); }
.pill.cancelled  { background: var(--surface-3); color: var(--muted); }

/* ====== UCard ====== */
.ucardHero {
  margin: 8px 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.ucardEyebrow {
  color: var(--green-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.ucardHero h2 { margin: 4px 0 2px; font-size: 26px; line-height: 1.1; letter-spacing: 0; }
.ucardHero p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ucardGhostBtn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.ucardGhostBtn:active { transform: scale(.97); background: var(--surface-2); }
.ucardPanel {
  margin: 8px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ucardBinScroller {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}
.ucardBin {
  text-align: left;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 9px 10px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ucardBin:active { transform: scale(.98); }
.ucardBin.active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.ucardBinTop, .ucardCardFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ucardBinTop b { font-size: 13px; }
.ucardBinTop span, .ucardMeta span {
  font-size: 11px;
  color: var(--green-2);
  background: var(--green-soft);
  border-radius: 999px;
  padding: 2px 8px;
}
.ucardBinNo {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.ucardMeta { display: flex; gap: 6px; margin-top: 5px; }
.ucardAmountBox {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}
.ucardAmountBox label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.ucardAmountBox input {
  width: 100%;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.2;
}
.ucardLimits {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  padding-bottom: 4px;
}
.ucardQuick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.ucardQuick button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 650;
  background: var(--surface-2);
}
.ucardSummary {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.ucardSummary div, .ucardInfoList div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.ucardSummary span, .ucardInfoList span { color: var(--muted); font-size: 13px; }
.ucardSummary b { font-size: 14px; }
.ucardSummary .total b { color: var(--green-2); font-size: 16px; }
.ucardPrimary {
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  font-weight: 750;
  box-shadow: 0 6px 18px -5px var(--green-glow);
}
.ucardPrimary:active { transform: translateY(1px); }
.ucardCards {
  display: grid;
  gap: 8px;
  margin: 8px 10px;
}
.ucardOpenHeader {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 8px;
  text-align: center;
}
.ucardOpenTitle {
  color: var(--fg);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
}
.ucardOpenSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.ucardBackMini {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--green-2);
  font-size: 13px;
  font-weight: 760;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ucardHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.myEsimList {
  display: grid;
  gap: 10px;
  margin: 8px 10px 122px;
}
.myEsimCard {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.myEsimTop {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.myEsimIcon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #38bdf8, #16a34a);
  box-shadow: 0 14px 30px -16px rgba(34,197,94,.62);
}
.myEsimIcon .cardIconImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myEsimMain {
  min-width: 0;
}
.myEsimMain h3 {
  margin: 0;
  color: var(--fg);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myEsimMain p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myEsimRows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.myEsimRows div,
.myEsimUsageGrid div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.myEsimRows span,
.myEsimUsageGrid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}
.myEsimRows b,
.myEsimUsageGrid b {
  display: block;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myEsimUsage {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--green-soft);
  color: var(--fg);
  font-size: 13px;
}
.myEsimUsage.bad {
  border-color: rgba(239,91,91,.35);
  background: rgba(239,91,91,.10);
}
.myEsimUsageBar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--line);
}
.myEsimUsageBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-2), var(--green-3));
}
.myEsimUsageGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.myEsimUsageMeta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.myEsimActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.myEsimActions .copyBtn[disabled] {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
}
.ucardOpenPanel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ucardTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 4px 12px;
}
.ucardTab {
  position: relative;
  padding: 0;
  min-height: 42px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  text-align: center;
  border: 0;
  background: transparent;
}
.ucardTab.active {
  color: var(--fg);
  box-shadow: none;
}
.ucardTab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--green-2);
  transform: translateX(-50%);
}
.ucardPlanCard,
.ucardOptionPanel,
.ucardPaySummary {
  margin: 0 4px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -30px rgba(0,0,0,.8);
  overflow: hidden;
}
.ucardPlanCard {
  padding-top: 0;
}
.ucardPlanTop {
  min-height: 76px;
  padding: 18px 18px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(212,184,122,.16), transparent 70%),
    linear-gradient(135deg, var(--green-soft), transparent);
}
.ucardPlanTop b {
  color: var(--fg);
  font-size: 22px;
  font-weight: 850;
}
.ucardPlanTop span {
  color: var(--green-2);
  font-size: 19px;
  font-weight: 850;
}
.ucardPlanRows {
  padding: 10px 18px 8px;
}
.ucardPlanRows div,
.ucardPlanFoot div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.ucardPlanRows span,
.ucardPlanFoot span {
  color: var(--muted);
  font-size: 14px;
}
.ucardPlanRows b,
.ucardPlanFoot b {
  color: var(--fg);
  font-size: 15px;
  font-weight: 820;
}
.ucardPlanFoot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  padding: 0 18px;
}
.ucardPlanFoot div:first-child {
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.ucardPlanFoot div:last-child {
  padding-left: 14px;
}
.ucardOptionPanel {
  padding: 16px;
}
.ucardOptionPanel label {
  display: block;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 14px;
}
.ucardChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.ucardChoice {
  min-height: 48px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  font-size: 15px;
  font-weight: 760;
}
.ucardChoice.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-2);
  box-shadow: 0 0 0 2px var(--green-soft);
}
.ucardHeadChip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 18px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--green);
  background: var(--green-soft);
  color: var(--green-2);
  font-size: 15px;
  font-weight: 800;
}
.ucardSceneGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.ucardSceneGrid span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
}
.ucardSceneGrid span:nth-child(3n) { border-right: 0; }
.ucardSceneGrid span:nth-last-child(-n+3) { border-bottom: 0; }
.ucardOpenPanel .ucardAmountBox,
.ucardOpenPanel .ucardQuick,
.ucardPaySummary {
  margin-left: 4px;
  margin-right: 4px;
}
.ucardOpenPanel .ucardAmountBox {
  border-radius: 16px;
  background: var(--surface);
}
.ucardPaySummary {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.ucardOpenPanel .ucardPrimary {
  margin: 0 4px 4px;
  width: calc(100% - 8px);
  min-height: 52px;
  border-radius: 10px;
  background: #1b2f4f;
  color: #fff;
  box-shadow: 0 12px 28px -20px rgba(0,0,0,.8);
}
.ucardCard {
  text-align: left;
}
.ucardCardFace {
  min-height: 128px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(30,199,115,.22), transparent 42%),
    linear-gradient(160deg, var(--surface-3), var(--surface));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.ucardCardFace.big {
  min-height: 188px;
  margin: 10px 14px;
}
.ucardCardBrand {
  font-size: 12px;
  font-weight: 800;
  color: var(--green-2);
}
.ucardCardNo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px;
  color: var(--fg);
  margin: 18px 0;
}
.ucardCardFace.big .ucardCardNo { font-size: 22px; }
.ucardCardFoot span { color: var(--fg-2); font-size: 12px; }
.ucardCardFoot b { color: var(--fg); font-size: 16px; }
.ucardEmpty {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 22px 14px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}
.ucardDetailTop {
  display: flex;
  justify-content: space-between;
  margin: 0 14px 10px;
}
.ucardActionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  margin: 10px 14px;
}
.ucardActionGrid button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 4px;
  font-size: 13px;
  font-weight: 700;
}
.ucardActionGrid button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.ucardActionGrid button.danger { color: var(--danger); }
.ucardInfoList {
  margin: 10px 14px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.ucardInfoList code {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ====== Merchant Center ====== */
.merchantHero {
  margin: 10px 14px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.merchantEyebrow {
  color: var(--green-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.merchantHero h2 { margin: 4px 0 3px; font-size: 24px; letter-spacing: 0; }
.merchantHero p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.merchantGhostBtn,
.merchantMiniBtn,
.merchantPanelRow button,
.merchantSecretBox button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg-2);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.merchantGhostBtn:active,
.merchantMiniBtn:active,
.merchantPanelRow button:active,
.merchantSecretBox button:active { transform: scale(.97); background: var(--surface-2); }
.merchantStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 14px;
}
.merchantStats div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 13px;
}
.merchantStats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.merchantStats b {
  display: block;
  margin-top: 4px;
  color: var(--green-2);
  font-size: 20px;
}
.merchantKeyList {
  display: grid;
  gap: 10px;
  margin: 10px 14px;
}
.merchantKeyCard,
.merchantPanel,
.merchantEmpty {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.merchantKeyCard { padding: 14px; }
.merchantKeyHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.merchantKeyLabel {
  font-size: 15px;
  font-weight: 750;
  margin-bottom: 3px;
}
.merchantKeyHead code,
.merchantCode,
.merchantPre,
.merchantSecretBox code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.merchantKeyHead code {
  display: block;
  color: var(--muted);
  font-size: 11px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merchantStatus {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
}
.merchantStatus.on { color: var(--green-2); background: var(--green-soft); }
.merchantStatus.off { color: var(--muted); background: var(--surface-3); }
.merchantScopeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.merchantScopeRow span,
.merchantEndpointGrid span {
  color: var(--green-2);
  background: var(--green-soft);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
}
.merchantKeyMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.merchantKeyActions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.merchantMiniBtn.danger { color: var(--danger); }
.merchantEmpty {
  padding: 22px 14px;
  color: var(--muted);
  text-align: center;
}
.merchantPrimary {
  width: 100%;
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  font-weight: 800;
  box-shadow: 0 6px 18px -5px var(--green-glow);
}
.merchantPrimary:disabled { opacity: .45; }
.merchantPanel {
  margin: 10px 14px;
  padding: 14px;
}
.merchantPanelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.merchantPanelRow span {
  font-size: 14px;
  font-weight: 750;
}
.merchantCode {
  display: block;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--fg-2);
  font-size: 11px;
  line-height: 1.5;
  word-break: break-all;
}
.merchantEndpointGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.merchantHint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 9px;
}
.merchantPre {
  margin: 0;
  max-height: 190px;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--fg-2);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.merchantModalField {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 11px 12px;
  margin: 8px 0 12px;
}
.merchantScopePick {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.merchantScopePick label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
}
.merchantScopePick span {
  display: grid;
  gap: 1px;
  font-weight: 700;
}
.merchantScopePick small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.merchantSecretBox {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 9px;
  margin-top: 8px;
}
.merchantSecretBox span { color: var(--muted); font-size: 12px; }
.merchantSecretBox code {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== Loader ====== */
.loader {
  position: fixed; inset: 0;
  background: var(--mask-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid; place-items: center; align-content: center; gap: 14px;
  z-index: 80;
}
.spinner {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--spinner-bg);
  border-top-color: var(--green-2);
  animation: spin .8s linear infinite;
}
.loaderText { color: var(--fg-2); font-size: 13px; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== Toast ====== */
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  max-width: 82%;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .25s;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ====== Modal ====== */
.modalMask {
  position: fixed; inset: 0;
  background: var(--mask-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid; place-items: end center;
  z-index: 90;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px 20px 0 0;
  padding: 22px 20px max(20px, env(safe-area-inset-bottom));
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  animation: slideUp .25s ease;
  position: relative;
}
.modal .closeBtn {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  color: var(--fg-2);
  cursor: pointer;
  z-index: 1;
}
.modal .closeBtn:active { transform: scale(.9); }
.modal .modalBackBtn {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 12px 6px 8px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  z-index: 1;
}
.modal .modalBackBtn:active { transform: scale(.95); }
/* 给所有 modal 顶部留出空间避免被两个按钮压住 h3 */
.modal h3:first-of-type, .modal > h3 { margin-top: 18px; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.modal p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.modal .btns { display: flex; gap: 10px; margin-top: 16px; }
.modal .btns button {
  flex: 1; padding: 13px;
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  transition: transform .1s;
}
.modal .btns button:active { transform: scale(.97); }
.modal .btns .ok {
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  box-shadow: 0 4px 14px -4px var(--green-glow);
}
.modal .btns .cancel {
  background: var(--surface-2);
  color: var(--fg-2);
  border: 1px solid var(--line);
}

/* ====== Misc ====== */
.muted { color: var(--muted); }
.empty {
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 14px;
  -webkit-user-select: none;
  user-select: none;
}
.empty::before {
  content: '○';
  display: block; font-size: 42px; color: var(--surface-3);
  margin-bottom: 14px;
}
.emptyStateCard {
  margin: 14px 14px;
  padding: 42px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -30px rgba(0,0,0,.8);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.emptyStateIcon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  border: 1px solid var(--line);
  color: var(--green-2);
  font-size: 28px;
}
.emptyStateTitle {
  color: var(--fg);
  font-size: 18px;
  font-weight: 820;
  line-height: 1.25;
}
.emptyStateDesc {
  max-width: 360px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.accountsSearchWrap {
  position: relative;
  margin: 12px 14px 0;
}
.accountsSearchWrap input {
  width: 100%;
  min-height: 56px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--fg);
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.accountsSearchWrap input::placeholder {
  color: var(--placeholder);
}
.accountsGroupList {
  margin: 12px 14px 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.accountsGroupList .priceRowItem {
  padding-left: 18px;
  padding-right: 18px;
}
.loadErrorCard {
  margin: 44px 16px;
  padding: 24px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--fg);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.loadErrorIcon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--green-2);
  font-weight: 800;
  font-size: 24px;
}
.loadErrorCard h2 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0;
}
.loadErrorCard p {
  margin: 0;
  color: var(--fg-2);
  line-height: 1.55;
  font-size: 14px;
}
.loadErrorCard small {
  display: block;
  margin: 10px auto 18px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 320px;
}
.loadErrorCard .copyBtn {
  min-width: 132px;
  padding: 11px 24px;
}
.divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); margin: 14px 18px; font-size: 12px;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

main#view { padding-top: 4px; min-height: 0; }

/* ====== Order list cards ====== */
.orderCard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 14px;
  padding: 14px 16px;
}
.orderCard .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.orderCard .title { font-weight: 600; font-size: 14px; }
.orderCard .meta { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.orderCard .amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-weight: 700;
  color: var(--green-2);
  font-size: 15px;
  text-align: right;
}
.orderInsight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 14px 10px;
}
.orderInsight div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.orderInsight b {
  display: block;
  font-size: 18px;
  color: var(--fg-1);
}
.orderInsight span {
  color: var(--muted);
  font-size: 12px;
}
.orderList {
  margin: 10px 14px 122px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.orderListItem {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name amount"
    "status action";
  align-items: center;
  gap: 5px 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: transparent;
}
.orderListItem:last-child { border-bottom: 0; }
.orderListItem:active { background: var(--row-hover); }
.orderListName {
  grid-area: name;
  min-width: 0;
  color: var(--fg);
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orderListAmount {
  grid-area: amount;
  color: var(--green-2);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}
.orderListItem .pill {
  grid-area: status;
  justify-self: start;
}
.orderListAction {
  grid-area: action;
  color: var(--green-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.orderProgress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 8px;
}
.orderProgress span {
  position: relative;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding-top: 9px;
}
.orderProgress span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
}
.orderProgress span.on {
  color: var(--green-2);
  font-weight: 600;
}
.orderProgress span.on::before {
  background: var(--green-2);
}
.orderProgress.bad span.on,
.orderProgress.bad span {
  color: var(--warn);
}
.orderProgress.bad span::before {
  background: rgba(226, 81, 81, .35);
}
.orderActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.orderWarn {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(226, 81, 81, .35);
  background: rgba(226, 81, 81, .10);
  color: var(--fg-1);
  font-size: 12px;
  line-height: 1.5;
}
.orderWarn.good {
  border-color: rgba(38, 161, 123, .35);
  background: rgba(38, 161, 123, .10);
}
.orderHint {
  margin: 8px 0 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(214, 162, 58, .28);
  background: rgba(214, 162, 58, .08);
  color: var(--fg-1);
  font-size: 12px;
  line-height: 1.5;
}
.orderHint.good {
  border-color: rgba(38, 161, 123, .35);
  background: rgba(38, 161, 123, .10);
}
.orderHint.bad {
  border-color: rgba(226, 81, 81, .35);
  background: rgba(226, 81, 81, .10);
}
.orderMiniGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.orderMiniGrid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 8px 9px;
}
.orderMiniGrid span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}
.orderMiniGrid b {
  display: block;
  color: var(--fg-1);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orderMiniGrid .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}
.orderDetailPage {
  padding: 10px 14px 28px;
}
.orderDetailTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}
.orderDetailBack {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
}
.orderDetailTop h1 {
  margin: 0;
  color: var(--fg);
  font-size: 24px;
  line-height: 1.12;
}
.orderDetailTop span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}
.orderDetailHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.orderDetailHero span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.orderDetailHero b {
  display: block;
  margin-top: 4px;
  color: var(--fg);
  font-size: 20px;
  line-height: 1.2;
}
.orderDetailRows {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.orderDetailRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.orderDetailRow:last-child { border-bottom: 0; }
.orderDetailRow span {
  color: var(--muted);
  font-size: 13px;
  flex: 0 0 82px;
}
.orderDetailRow b {
  color: var(--fg);
  font-size: 14px;
  font-weight: 750;
  text-align: right;
  word-break: break-word;
}
.orderDetailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.detailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.detailGrid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--surface-2);
}
.detailGrid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}
.detailGrid b {
  display: block;
  font-size: 13px;
  word-break: break-word;
}
.rechargeCard.pending {
  border-color: rgba(231, 163, 46, .35);
}
.rechargeCard.paid {
  border-color: rgba(38, 161, 123, .35);
}
.rechargeCard.failed,
.rechargeCard.expired,
.rechargeCard.cancelled {
  border-color: rgba(226, 81, 81, .35);
}
.buyPlan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px 0;
}
.buyPlan div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.buyPlan span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.buyPlan b {
  text-align: right;
  font-size: 13px;
  color: var(--fg-1);
}
.buyNotice {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.buyNotice div {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--fg-1);
  font-size: 12px;
  line-height: 1.45;
}

/* hide top of view when entering modal */
body.noscroll { overflow: hidden; }

/* removed debug box from previous diagnostic version */
.debugBox { display: none !important; }

/* ====== Recharge-first wallet page ====== */
.walletPage {
  padding: 10px 14px 122px;
}
.walletHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 20px;
}
.walletHead h1 {
  margin: 6px 0 0;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fg);
}
.walletBalanceMini {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: right;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.walletBalanceMini span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.walletBalanceMini b {
  display: block;
  margin-top: 2px;
  color: var(--green-2);
  font-size: 14px;
  white-space: nowrap;
}
.walletRechargePanel {
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -32px rgba(0,0,0,.82);
}
.walletRechargePanel h2 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--fg);
}
.walletGatewayGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.walletGateway {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.walletGateway:active,
.walletAmount:active,
.walletContinue:active,
.pdBack:active,
.pdBuyBtn:active {
  transform: scale(.985);
}
.walletGateway.active {
  border-color: var(--green);
  background: linear-gradient(140deg, var(--green-soft), var(--surface));
  box-shadow: 0 0 0 3px var(--green-soft);
}
.walletGatewayIcon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green), var(--green-3));
}
.walletGatewayIcon.usdt { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.walletGatewayIcon.okpay { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
.walletGatewayIcon.fll { background: linear-gradient(135deg, #38bdf8, #0f766e); }
.walletGatewayIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.walletGateway b,
.walletGateway em {
  display: block;
  font-style: normal;
}
.walletGateway b {
  color: var(--fg);
  font-size: 17px;
  line-height: 1.15;
}
.walletGateway em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.walletAmountPanel {
  padding-top: 16px;
}
.walletAmountGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.walletAmount {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  display: grid;
  place-items: center;
  align-content: center;
  transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.walletAmount.active {
  border-color: var(--green);
  background: linear-gradient(140deg, var(--green-soft), var(--surface));
  box-shadow: 0 0 0 3px var(--green-soft);
}
.walletAmount b {
  font-size: 22px;
  line-height: 1;
  color: var(--fg);
}
.walletAmount.active b {
  color: var(--green-2);
}
.walletAmount span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.walletCustomLabel {
  display: block;
  margin: 12px 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
}
.walletAmountInput {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--fg);
  font-size: 18px;
  font-weight: 650;
}
.walletAmountInput:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.walletContinue {
  width: 100%;
  height: 62px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 14px 30px -20px var(--green-glow);
}
.walletHistoryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 4px 10px;
}
.walletHistoryHead h2 {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.walletHistoryHead span {
  color: var(--green-2);
  font-weight: 700;
}
.walletHistory {
  display: grid;
  gap: 10px;
}
.walletHistoryItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.walletHistoryItem b,
.walletHistoryItem span {
  display: block;
}
.walletHistoryItem b {
  color: var(--fg);
  font-size: 14px;
}
.walletHistoryItem span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.walletHistoryItem strong {
  color: var(--green-2);
  font-size: 15px;
  white-space: nowrap;
}
.walletHistoryItem button {
  min-width: 52px;
  height: 34px;
  border-radius: 12px;
  color: var(--green-2);
  background: var(--green-soft);
  font-weight: 700;
  font-size: 13px;
}
.walletEmpty {
  padding: 54px 14px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 22px;
}

/* ====== Product detail page ====== */
body.detailMode {
  padding-bottom: 0;
}
body.detailMode #view {
  padding-bottom: 0;
}
.categoryDetailTop {
  display: grid;
  grid-template-columns: 58px 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 10px 12px 16px;
}
.categoryBackBtn {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.categoryBackBtn:active {
  transform: scale(.985);
}
.categoryDetailIcon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  overflow: hidden;
  background: linear-gradient(145deg, var(--green), var(--green-3));
  box-shadow: 0 18px 30px -18px var(--green-glow);
}
.categoryDetailIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.categoryDetailText {
  min-width: 0;
}
.categoryDetailText h1 {
  margin: 0;
  color: var(--fg);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 880;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoryDetailText span {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 12px;
  color: var(--green-2);
  background: var(--green-soft);
  font-weight: 800;
  font-size: 14px;
}
.productDetailPage {
  min-height: calc(100vh - 62px);
  margin: 0 10px 12px;
  padding: 16px 0 118px;
  border-radius: 24px;
  background:
    radial-gradient(80% 30% at 50% 0%, var(--green-soft), transparent 72%),
    var(--bg);
}
.pdTop {
  display: grid;
  grid-template-columns: 64px 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 12px 16px;
}
.pdBack {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--fg);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.pdIcon {
  width: 66px;
  height: 66px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 20px 32px -24px currentColor;
}
.pdIcon.gold { background: linear-gradient(145deg, #ffd95a, #f59e0b); color: #fff7d6; }
.pdIcon.violet { background: linear-gradient(145deg, #c084fc, #7c3aed); }
.pdIcon.blue { background: linear-gradient(145deg, #38bdf8, #2563eb); }
.pdIcon.cyan { background: linear-gradient(145deg, #22d3ee, #0f766e); }
.pdIcon.green { background: linear-gradient(145deg, var(--green), var(--green-3)); }
.pdIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdTitleWrap h1 {
  margin: 0;
  color: var(--fg);
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: 0;
}
.pdTitleWrap span {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 12px;
  color: var(--green-2);
  background: var(--green-soft);
  font-weight: 800;
  font-size: 14px;
}
.pdPanel {
  margin: 0 12px 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.pdPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pdPanelHead h2 {
  margin: 0;
  color: var(--fg);
  font-size: 20px;
  line-height: 1.15;
}
.pdPanelHead em {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 14px;
  color: var(--green-2);
  background: var(--green-soft);
  font-style: normal;
  font-weight: 800;
}
.pdDetailGrid {
  display: grid;
  gap: 10px;
}
.pdDetailGrid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pdDetailGrid div:last-child {
  border-bottom: 0;
}
.pdDetailGrid span {
  color: var(--muted);
}
.pdDetailGrid b {
  color: var(--fg);
  text-align: right;
  word-break: break-word;
}
.pdNotes {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.pdNotes p {
  margin: 0 0 8px;
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.5;
}
.pdNotes p:last-child {
  margin-bottom: 0;
}
.pdInputLabel {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
.pdInput {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.pdInput span {
  color: var(--muted);
  font-size: 22px;
  font-weight: 800;
}
.pdInput input {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
}
.pdHint {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}
.pdHint.good {
  margin-top: 0;
  padding: 14px;
  border-radius: 16px;
  color: var(--green-2);
  background: var(--green-soft);
}
.pdCheckout {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(144px, 42%);
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.pdCheckout span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.pdCheckout b {
  display: block;
  margin-top: 4px;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
}
.pdCheckout small {
  font-size: 16px;
}
.pdCheckout button {
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  color: var(--primary-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 850;
  box-shadow: 0 16px 34px -20px var(--green-glow);
}
.pdCheckout button:disabled {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

@media (max-width: 390px) {
  .walletAmountGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walletGatewayGrid { grid-template-columns: 1fr; }
  .pdTop { grid-template-columns: 56px 62px minmax(0, 1fr); }
  .pdBack { width: 52px; height: 52px; }
  .pdIcon { width: 58px; height: 58px; border-radius: 19px; }
  .pdTitleWrap h1 { font-size: 22px; }
  .pdCheckout { grid-template-columns: 1fr; }
}

/* ====== Typography refinement ======
 * Keep the Mini App calm and consistent: large type is reserved for money
 * and true task totals, while page/card labels stay in a tight hierarchy.
 */
:root {
  --fs-kicker: 10.5px;
  --fs-caption: 12px;
  --fs-meta: 13px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-section: 18px;
  --fs-page: 24px;
  --fs-money: 34px;
}

body { font-size: var(--fs-body); }

.brandName,
.homeBrandName {
  font-size: 19px;
  line-height: 1.18;
}

.pageKicker,
.sectionHead .pageKicker,
.homeHeader .pageKicker,
.accountHeader .pageKicker,
.ucardEyebrow,
.merchantEyebrow {
  font-size: var(--fs-kicker);
  letter-spacing: .18em;
}

.homeTitle,
.walletHead h1,
.accountHeader h2,
.ucardHero h2,
.merchantHero h2 {
  font-size: var(--fs-page);
  line-height: 1.12;
  font-weight: 830;
}

.sectionHead h2,
.walletRechargePanel h2,
.pdPanelHead h2,
.ucardOpenTitle {
  font-size: var(--fs-section);
  line-height: 1.18;
  font-weight: 800;
}

.cardTitle,
.catTileTitle,
.menuItem,
.profile .name,
.walletGateway b,
.pdTitleWrap h1,
.categoryDetailText h1,
.ucardPlanTop b {
  font-size: var(--fs-title);
  line-height: 1.25;
}

.cardDesc,
.catTileDesc,
.homeSubtitle,
.homeBrandSub,
.walletGateway em,
.walletHistoryItem b,
.walletHistoryItem strong,
.orderCard .title,
.pdHint,
.pdDetailGrid,
.pdNotes p,
.ucardHero p,
.ucardOptionPanel label,
.ucardChoice,
.ucardHeadChip,
.merchantHero p {
  font-size: var(--fs-body);
}

.balanceHeroTop,
.balanceHeroActions button,
.quickGrid button,
.catTileMeta,
.field input,
.field .prefix,
.coin .name,
.priceRow .name,
.priceRowPrice,
.payRow .val,
.menuItem .arrow,
.walletAmountInput,
.walletContinue,
.pdInput input,
.pdCheckout button,
.ucardPrimary {
  font-size: 15px;
}

.countPill,
.bnLabel,
.payRow .label,
.balance .label,
.sectionTitle,
.profile .id,
.orderCard .meta,
.walletBalanceMini span,
.walletAmount span,
.walletCustomLabel,
.walletHistoryItem span,
.walletHistoryItem button,
.categoryDetailText span,
.pdTitleWrap span,
.pdCheckout span,
.ucardOpenSub,
.ucardBackMini,
.ucardTab,
.ucardPlanRows span,
.ucardPlanFoot span,
.ucardSceneGrid span,
.ucardActionGrid button,
.ucardSummary span,
.ucardInfoList span {
  font-size: var(--fs-caption);
}

.balanceHeroAmount {
  font-size: var(--fs-money);
  line-height: 1.05;
}
.balanceHeroAmount small {
  font-size: 15px;
}
.walletAmount b,
.ucardAmountBox input,
.ucardCardFace.big .ucardCardNo,
.pdCheckout b {
  font-size: 20px;
}
.ucardPlanTop span {
  font-size: 17px;
}
.ucardPlanRows b,
.ucardPlanFoot b,
.ucardSummary .total b,
.ucardCardFoot b {
  font-size: 15px;
}

.catTile::after,
.homeBrandMark,
.catTileIcon,
.categoryDetailIcon,
.pdIcon {
  font-size: 22px;
}

.walletHead {
  margin-bottom: 16px;
}
.walletContinue {
  height: 58px;
}
.pdCheckout {
  grid-template-columns: minmax(0, 1fr) minmax(136px, 40%);
}

@media (max-width: 390px) {
  :root {
    --fs-page: 22px;
    --fs-money: 32px;
  }
  .brandName,
  .homeBrandName { font-size: 18px; }
  .balanceHeroActions button,
  .walletContinue,
  .pdCheckout button { font-size: 14px; }
}

/* Category detail header: keep long descriptions from breaking the page rhythm. */
.categoryDetailTop {
  grid-template-columns: 44px 54px minmax(0, 1fr);
  gap: 10px;
  margin: 12px 14px 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(95% 120% at 18% 0%, var(--green-soft), transparent 58%),
    var(--surface);
  box-shadow: 0 12px 28px -22px var(--green-glow), 0 1px 0 rgba(255,255,255,.7) inset;
}
.categoryDetailTop.hasLongDesc {
  grid-template-areas:
    "back icon title"
    "desc desc desc";
  align-items: center;
}
.categoryDetailTop.hasLongDesc .categoryBackBtn {
  grid-area: back;
}
.categoryDetailTop.hasLongDesc .categoryDetailIcon {
  grid-area: icon;
}
.categoryDetailTop.hasLongDesc .categoryDetailText {
  grid-area: title;
}
.categoryBackBtn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.categoryDetailIcon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}
.categoryDetailText h1 {
  font-size: 20px;
  line-height: 1.16;
}
.categoryDetailText span {
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.categoryDetailDesc {
  grid-area: desc;
  margin-top: 2px;
  padding: 11px 12px;
  border: 1px solid rgba(32, 197, 112, .12);
  border-radius: 16px;
  background: rgba(32, 197, 112, .08);
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.55;
}