:root {
  --bg: #070b14;
  --bg2: #0d1424;
  --card: #121a2c;
  --card2: #162033;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8eefc;
  --muted: #8b97b3;
  --blue: #3b82f6;
  --blue2: #2563eb;
  --gold: #f5c542;
  --green: #34d399;
  --purple: #7c5cff;
  --cyan: #22d3ee;
  --orange: #fb923c;
  --red: #f43f5e;
  --radius: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  min-height: 100%;
  background-color: var(--bg);
}
body {
  min-height: 100%;
  min-height: 100dvh;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #1a2d58 0%, #101a30 34%, #070b14 62%, #070b14 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: calc(84px + var(--safe-bottom));
}

.page { padding: 18px 16px 24px; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Soft balance updates — avoid flash when paintBalance() patches DOM */
.balance-value [data-bal],
.profile-bal [data-bal],
.pay-mode [data-bal] {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s ease;
}

.eyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h1 {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.brand.compact { margin-bottom: 0; flex: 1; min-width: 0; }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.topbar-left { flex: 1; min-width: 0; }
.refresh-btn {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(59,130,246,.22), rgba(15,23,42,.55));
  color: #dbeafe;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.refresh-btn svg { width: 18px; height: 18px; }
.refresh-btn.spin svg { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

.channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.channel-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.channel-card.active {
  border-color: rgba(38, 161, 123, 0.55);
  background: linear-gradient(135deg, rgba(38,161,123,.16), rgba(18,26,44,.9));
  box-shadow: 0 0 0 1px rgba(38,161,123,.2) inset;
}
.channel-card.trx.active {
  border-color: rgba(239, 0, 39, 0.55);
  background: linear-gradient(135deg, rgba(239,0,39,.16), rgba(18,26,44,.9));
  box-shadow: 0 0 0 1px rgba(239,0,39,.18) inset;
}
.channel-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent;
  overflow: hidden;
}
.channel-ico.trx { background: transparent; }
.channel-ico svg { width: 48px; height: 48px; display: block; }
.channel-body { flex: 1; min-width: 0; }
.channel-body strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.channel-body small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.channel-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #26A17B;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.menu-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: white; flex-shrink: 0;
}
.menu-ico svg { width: 18px; height: 18px; display: block; }
.ico-blue { background: linear-gradient(145deg, #60a5fa, #2563eb); }
.ico-green { background: linear-gradient(145deg, #34d399, #059669); }
.ico-slate { background: linear-gradient(145deg, #94a3b8, #475569); }
.ico-orange { background: linear-gradient(145deg, #fdba74, #ea580c); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  background: linear-gradient(145deg, #ffe7a3, #fff8e7);
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.brand h2 { font-size: 18px; font-weight: 800; }
.brand p { color: var(--muted); font-size: 12px; margin-top: 2px; }

.balance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(245,197,66,.28), transparent 55%),
    radial-gradient(320px 160px at 0% 100%, rgba(59,130,246,.35), transparent 50%),
    linear-gradient(135deg, #1a3a78 0%, #152a55 42%, #0f1b38 100%);
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(15, 40, 100, .35);
}
.balance-card::after {
  content: "";
  position: absolute;
  right: -20px; top: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,66,.22), transparent 70%);
  pointer-events: none;
}
.balance-label { color: rgba(226,232,240,.78); font-size: 13px; position: relative; z-index: 1; }
.balance-value {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
  background: linear-gradient(90deg, #ffe08a, #f5c542 40%, #fff1b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.balance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.spend-card {
  margin-top: 12px;
  background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  padding: 14px;
}
.pd-page .spend-card { margin-top: 0; }
.spend-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}
.spend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.spend-col-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.spend-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 3px 0;
}
.spend-line strong { color: var(--text); font-weight: 750; }
.spend-line.total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(148,163,184,.14);
  color: var(--text);
}

.btn {
  appearance: none; border: 0; cursor: pointer;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px; font-weight: 700;
  color: white;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(0.98); opacity: .9; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue2)); }
.btn-ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-block { width: 100%; padding: 14px; font-size: 15px; border-radius: 14px; }

/* N6-style eSIM hero card */
.hero-card {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #4c1d95 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 32px rgba(49, 46, 129, 0.4);
  transition: transform 0.25s ease;
}
.hero-card:active { transform: scale(0.985); }
.hero-card__glow {
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.35) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.hero-card__body {
  position: relative;
  z-index: 2;
  padding-right: 64px;
}
.hero-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.hero-card__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.hero-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.hero-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #fff;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero-card:active .hero-card__cta { transform: scale(0.96); }
.hero-card__art {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 1;
}
.hero-art-star {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.55));
  animation: heroPulse 3s ease-in-out infinite;
}
.hero-art-star svg { width: 100%; height: 100%; }
@keyframes heroPulse {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50% { transform: scale(1.06) rotate(-2deg); }
}

.quick {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
}
.quick-ico {
  width: 46px; height: 46px; margin: 0 auto 8px;
  border-radius: 15px; display: grid; place-items: center;
  color: white;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.quick-ico svg { width: 22px; height: 22px; display: block; }
.q1 { background: linear-gradient(145deg, #a78bfa, #7c3aed 55%, #4c1d95); }
.q2 { background: linear-gradient(145deg, #67e8f9, #22d3ee 45%, #0e7490); }
.q3 { background: linear-gradient(145deg, #fdba74, #fb923c 45%, #c2410c); }
.quick-item span { font-size: 12px; color: var(--muted); font-weight: 600; }

.section-title {
  margin: 22px 0 12px;
  font-size: 16px;
  font-weight: 800;
}

.service-list { display: grid; gap: 10px; }
.service {
  display: flex; gap: 12px; align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
}
.service-ico {
  width: 48px; height: 48px; border-radius: 15px;
  display: grid; place-items: center;
  color: white; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.service-ico svg { width: 24px; height: 24px; display: block; }
.service-ico.brand {
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  overflow: hidden;
}
.service-ico.brand svg,
.pd-head .service-ico.brand svg,
.esim-cat .service-ico.brand svg { width: 100%; height: 100%; }
.s-purple { background: linear-gradient(145deg, #c4b5fd, #8b5cf6 48%, #5b21b6); }
.s-yellow { background: linear-gradient(145deg, #fde68a, #f59e0b 48%, #b45309); }
.s-green { background: linear-gradient(145deg, #6ee7b7, #10b981 48%, #047857); }
.s-red { background: linear-gradient(145deg, #fda4af, #f43f5e 48%, #be123c); }
.s-orange { background: linear-gradient(145deg, #fdba74, #f97316 48%, #c2410c); }
.s-blue { background: linear-gradient(145deg, #93c5fd, #3b82f6 48%, #1d4ed8); }
.s-cyan { background: linear-gradient(145deg, #a5f3fc, #22d3ee 48%, #0891b2); }
.service-body { flex: 1; min-width: 0; }
.service-body h4 { font-size: 15px; font-weight: 750; }
.service-body p { margin-top: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-meta { text-align: right; }
.price { color: var(--gold); font-size: 12px; font-weight: 700; }
.badge {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: var(--green);
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
  padding: 3px 8px; border-radius: 999px;
}
.badge.maint, .pd-badge.maint {
  color: #fbbf24;
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.3);
}
.service.is-maint { opacity: .85; }
.pd-buy:disabled {
  opacity: .55; cursor: not-allowed;
  background: #475569;
}

.field-label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.field-label em {
  font-style: normal;
  color: var(--gold);
  font-weight: 750;
  font-size: 13px;
}
.channels, .amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.channels { grid-template-columns: 1fr 1fr; }
.amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.amounts-fixed { grid-template-columns: repeat(3, 1fr); }
.amt-chip {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.amt-chip strong { font-size: 18px; font-weight: 800; }
.amt-chip small { margin-top: 2px; }
.custom-amt-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.custom-amt-wrap .input {
  width: 100%;
  padding-right: 58px;
}
.custom-amt-suffix {
  position: absolute;
  right: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}
.chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
}
.chip.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(59,130,246,.35) inset;
  background: rgba(59,130,246,.12);
}
.chip strong { display: block; font-size: 13px; }
.chip small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.input:focus { border-color: var(--blue); }

.profile {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(145deg, #1a2744, #121a2c);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
}
.profile h3 { font-size: 17px; }
.profile p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.profile-bal { margin-left: auto; text-align: right; color: var(--gold); font-weight: 800; font-size: 14px; }

.menu-list {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item span { flex: 1; font-size: 14px; font-weight: 650; }
.menu-item em { color: var(--muted); font-style: normal; }
.lang {
  display: inline-flex; gap: 6px; background: rgba(255,255,255,.05);
  padding: 4px; border-radius: 999px;
}
.lang button {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.lang button.on { background: var(--blue); color: white; }

.version {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 18px;
}

.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #070b14;
  border-top: 0;
  padding: 10px 4px calc(10px + var(--safe-bottom));
  z-index: 20;
}
.tab {
  border: 0; background: transparent; color: #8b97b3;
  display: grid; gap: 5px; place-items: center;
  font-size: 13px; font-weight: 700; padding: 6px 4px;
  letter-spacing: 0.02em;
}
.tab.active { color: #60a5fa; }
.tab-ico {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  line-height: 1;
}
.tab-ico svg { width: 26px; height: 26px; display: block; }
.tab-label { line-height: 1; }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(20,28,48,.95); color: white;
  border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 12px;
  font-size: 13px; z-index: 50;
  opacity: 0; pointer-events: none; transition: .2s ease;
}
.toast.show { opacity: 1; }

.muted-box {
  color: var(--muted);
  text-align: center;
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.sheet-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 480px;
  background: #101827;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(18px + var(--safe-bottom));
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
  margin-bottom: 8px;
}
.sheet-title { display: flex; gap: 12px; align-items: center; }
.sheet-title h3 { font-size: 16px; }
.sheet-title p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.icon-btn svg { width: 16px; height: 16px; }

/* ===== Product detail pages (Premium / Stars / eSIM) ===== */
#app.product-mode { padding-bottom: calc(108px + var(--safe-bottom)); }
.pd-page { padding-bottom: calc(28px + 64px); }
.pd-page.server-page,
.pd-page.swap-page { padding-bottom: calc(28px + 72px); }

.pd-sticky {
  position: fixed !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: rgba(7,11,20,.98);
  border-top: 1px solid var(--line);
  z-index: 45;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.server-confirm-mask { z-index: 60; }
.server-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 16px;
}
.server-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
}
.server-confirm-row span { color: var(--muted); flex: 0 0 auto; }
.server-confirm-row strong { text-align: right; font-weight: 700; }
.server-confirm-row.total strong {
  color: var(--gold, #f5c451);
  font-size: 18px;
}
.server-confirm-detail {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.server-confirm-detail p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.server-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}
.server-region-en {
  display: block;
  font-size: 12px;
  color: #93c5fd;
  font-weight: 600;
  margin-top: 2px;
}
.server-region-stock {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.server-plan .esim-ip { margin-top: 4px; }
.server-region-mask { z-index: 50; }
.pd-sticky-total span { display: block; color: var(--muted); font-size: 12px; }
.pd-sticky-total strong { font-size: 20px; font-weight: 800; }
.pd-buy {
  min-width: 148px; height: 48px; border-radius: 999px;
  font-size: 15px; font-weight: 750;
}
.pd-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.pd-back {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
}
.pd-back svg { width: 18px; height: 18px; }
.pd-head .service-ico { width: 44px; height: 44px; border-radius: 12px; }
.pd-head .service-ico.esim-go {
  font-weight: 800; font-size: 14px; letter-spacing: .04em;
  color: #04140c;
}
.pd-head-text h2 { font-size: 18px; font-weight: 750; line-height: 1.2; }
.pd-badge {
  display: inline-block; margin-top: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(52,211,153,.14); color: var(--green);
  font-size: 11px; font-weight: 700;
}
.pd-badge.esim-renew-on {
  margin-left: 6px;
  background: rgba(59,130,246,.18);
  color: #93c5fd;
}
.pd-badge.esim-renew-off {
  margin-left: 6px;
  background: rgba(148,163,184,.16);
  color: #cbd5e1;
}
.pd-head-text .pd-badge { margin-top: 0; vertical-align: middle; }
.pd-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.pd-sec-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 14px; font-weight: 700;
}
.pd-sec-title em {
  font-style: normal;
  font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(59,130,246,.16); color: #93c5fd;
}
.plan-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.plan-chip {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px;
  color: var(--text); cursor: pointer; text-align: left;
}
.plan-chip strong { font-size: 14px; }
.plan-chip span { font-size: 12px; color: var(--muted); }
.plan-chip.active {
  border-color: var(--blue);
  background: rgba(59,130,246,.12);
  box-shadow: 0 0 0 1px rgba(59,130,246,.25) inset;
}
.pd-textarea {
  width: 100%; min-height: 140px; resize: vertical;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  padding: 12px 14px;
  font: inherit; font-size: 13px; line-height: 1.55;
}
.pd-textarea::placeholder { color: #6b7690; white-space: pre-line; }
.pd-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; color: var(--muted); font-size: 12px;
}
.pd-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

.qty-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.qty-chip {
  height: 44px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text); font-weight: 750; font-size: 15px;
  cursor: pointer;
}
.qty-chip.active {
  border-color: var(--gold);
  background: rgba(245,197,66,.12);
  color: #fde68a;
  box-shadow: 0 0 0 1px rgba(245,197,66,.25) inset;
}
.qty-input-wrap { position: relative; }
.qty-input { padding-right: 48px; }
.qty-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; font-weight: 650;
}

.pd-pricebox {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: grid; gap: 10px;
}
.pd-price-row {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 13px;
}
.pd-price-row strong { color: var(--text); font-weight: 700; }
.pd-price-row.fee strong { color: var(--gold); }
.pd-price-row.total { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.pd-price-row.total span { color: var(--text); font-weight: 700; }
.pd-price-row.total strong { color: var(--gold); font-size: 18px; font-weight: 800; }

.esim-cats { display: grid; gap: 10px; }
.esim-cat {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--text); cursor: pointer;
}
.esim-cat:hover, .esim-cat:focus {
  border-color: rgba(59,130,246,.55);
}
.esim-cat .service-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.esim-cat-body { flex: 1; min-width: 0; }
.esim-cat-body h4 { font-size: 15px; font-weight: 750; }
.esim-cat-body p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.esim-cat-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.esim-cat-meta .pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(148,163,184,.15); color: #cbd5e1;
}
.esim-cat-meta .price { color: var(--gold); font-size: 12px; font-weight: 750; }
.esim-chev { color: var(--muted); display: grid; place-items: center; }
.esim-chev svg { width: 18px; height: 18px; }
.esim-usage {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(148,163,184,.35);
  background: transparent;
  color: var(--muted);
  font-size: 13px; cursor: pointer;
}
.esim-usage svg { width: 16px; height: 16px; }
.esim-plans { display: grid; gap: 8px; }
.esim-number-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.esim-number-chip {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 650;
}
.esim-number-chip.active {
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.55);
  color: #93c5fd;
}
.esim-num-hint {
  font-style: normal;
  font-weight: 600;
  color: #93c5fd;
  font-size: 12px;
  margin-left: 6px;
}
.esim-plan-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.esim-num-tag {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 650;
}
.esim-num-tag.on { color: #93c5fd; }
.esim-num-tag.off { color: var(--muted); }
.esim-country-search { margin-bottom: 10px; }
.esim-country-search .input { width: 100%; }
.esim-country-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) transparent;
  cursor: grab;
}
.esim-country-row.dragging { cursor: grabbing; }
.esim-country-row::-webkit-scrollbar {
  height: 6px;
  display: block;
}
.esim-country-row::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.4);
  border-radius: 99px;
}
.esim-country-row::-webkit-scrollbar-track { background: transparent; }
.esim-country-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 12px; font-weight: 650;
  white-space: nowrap; cursor: pointer;
  user-select: none;
}
.esim-country-chip .flag { font-size: 14px; line-height: 1; }
.esim-country-chip.active {
  border-color: var(--blue);
  background: rgba(59,130,246,.16);
  color: #bfdbfe;
}
.esim-plan {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--text); cursor: pointer;
}
.esim-plan-top {
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
}
.esim-plan-intro { min-width: 0; flex: 1; }
.esim-plan-intro strong { font-size: 14px; font-weight: 750; display: block; }
.esim-ip {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 12px;
}
.esim-ip-dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: rgba(148,163,184,.55);
  flex-shrink: 0;
}
.esim-countries-btn {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  background: transparent; border: 0; padding: 0;
  color: #93c5fd; font-size: 12px; font-weight: 650; cursor: pointer;
}
.esim-countries-btn .chev { transition: transform .15s ease; opacity: .8; }
.esim-countries-btn .chev.open { transform: rotate(180deg); }
.esim-countries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
  max-height: 160px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.esim-country-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  font-size: 11px; color: var(--text);
}
.esim-country-tag .flag { font-size: 12px; }
.esim-plan .muted { font-size: 11px; margin-top: 3px; color: var(--muted); }
.esim-plan .price { color: var(--gold); font-weight: 750; white-space: nowrap; }

.server-region-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #1c2740;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.server-region-trigger:active {
  background: #243352;
  border-color: rgba(96, 165, 250, 0.55);
}
.server-region-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.server-region-trigger-text strong {
  font-size: 16px;
  font-weight: 750;
  color: #f1f5ff;
}
.server-region-trigger-text span {
  font-size: 12px;
  color: #a8b4cc;
}
.server-region-trigger-chev {
  width: 20px;
  height: 20px;
  opacity: .85;
  color: #93c5fd;
  transform: rotate(90deg);
  flex: 0 0 auto;
}
.server-region-trigger-chev svg { width: 100%; height: 100%; }
.server-region-sheet .server-region-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  padding-top: 4px;
}
.server-region-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #1c2740;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.server-region-option.active {
  border-color: #60a5fa;
  background: #1e3a5f;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}
.server-region-option.soldout {
  opacity: .45;
  cursor: not-allowed;
}
.server-region-option-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.server-region-option-main strong { font-size: 15px; font-weight: 750; color: #f1f5ff; }
.server-region-option-main span { font-size: 12px; color: #a8b4cc; }
.server-region-check {
  color: #93c5fd;
  font-weight: 800;
  font-size: 16px;
}
.server-done-body code,
.server-cred code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.server-cred {
  margin-top: 8px;
  line-height: 1.5;
}
.esim-plan.active {
  border-color: var(--blue);
  background: rgba(59,130,246,.12);
}

.pd-result {
  margin-top: 12px; padding: 12px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
  color: var(--muted); font-size: 12px;
  white-space: normal; word-break: break-all;
}
.energy-done { text-align: center; padding: 28px 18px 20px; }
.energy-done-mark {
  width: 54px; height: 54px; margin: 0 auto 10px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(52, 211, 153, .16);
  color: #86efac; font-size: 26px; font-weight: 800;
}
.energy-done h3 { margin: 0 0 8px; font-size: 26px; color: #86efac; }
.energy-done p { margin: 0; color: var(--muted); font-size: 13px; word-break: break-all; }
.energy-done-body { margin: 14px 0 4px; }
.energy-done-label {
  color: var(--muted); font-size: 12px; margin-bottom: 8px;
}
.energy-done-body strong { color: var(--text); font-size: 16px; }
.energy-done .btn { margin-top: 14px; }
.esim-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px 12px calc(16px + var(--safe-bottom));
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(6px);
}
.esim-modal[hidden] { display: none; }
.esim-sheet {
  width: min(440px, 100%);
  max-height: min(92vh, 780px);
  overflow: auto;
  padding: 16px 16px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #18243c 0%, #0e1628 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.esim-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.esim-sheet-top h3 { font-size: 18px; }
.esim-x {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
}
.esim-pass { margin-top: 12px; }
.esim-qr-plate {
  width: fit-content;
  margin: 4px auto 0;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7f8fb, #e6ebf3);
}
.esim-qr { display: grid; place-items: center; }
.esim-qr img { width: 188px; height: 188px; display: block; image-rendering: pixelated; }
.esim-qr-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.esim-pass-row, .esim-lpa { margin-top: 10px; font-size: 12px; }
.esim-pass-row span, .esim-lpa span { display: block; color: var(--muted); }
.esim-pass-row strong { display: block; margin-top: 2px; font-size: 13px; }
.esim-lpa {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.esim-lpa code {
  display: block; margin-top: 4px;
  color: var(--text); font-size: 12px; line-height: 1.45; word-break: break-all;
}
.esim-pass .btn { margin-top: 10px; }
.esim-guide-title { margin: 16px 0 8px; font-size: 14px; }
.esim-os {
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.esim-os h4 { font-size: 14px; }
.esim-os ol { margin: 8px 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.esim-os li + li { margin-top: 4px; }
.esim-reopen { margin-top: 10px; height: 36px; font-size: 13px; }
.esim-usage-card { margin-top: 14px; }
.esim-usage-status { font-weight: 800; margin-bottom: 8px; }
.esim-usage-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 10px 0; }
.esim-usage-bar > div { height: 100%; background: #3b82f6; }
.esim-usage-nums { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.esim-usage-err { color: #fca5a5; margin-top: 10px; }

.dep-card {
  margin: 14px 0 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
}
.dep-status {
  font-size: 13px; font-weight: 700;
  margin-bottom: 12px;
  color: #93c5fd;
}
.dep-status.confirmed { color: var(--green); }
.dep-status.expired { color: var(--red); }
.dep-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}
.dep-step {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.dep-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.dep-step.done { color: var(--green); }
.dep-step.done .dep-step-dot { background: rgba(52,211,153,.18); color: var(--green); border-color: transparent; }
.dep-step.current { color: #93c5fd; }
.dep-step.current .dep-step-dot { background: rgba(59,130,246,.2); color: #93c5fd; border-color: transparent; }
.dep-step.fail { color: var(--red); }
.dep-step.fail .dep-step-dot { background: rgba(244,63,94,.15); color: var(--red); border-color: transparent; }
.dep-history-item.dep-open { align-items: stretch; }
.dep-history-item.dep-open .btn { margin-top: 10px; }
.dep-success { position: fixed; inset: 0; z-index: 80; }
.dep-success[hidden] { display: none; }
.dep-success-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  padding: 24px;
}
.dep-success-card {
  width: min(360px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px 16px;
  text-align: center;
}
.dep-success-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: #052e1c;
  background: var(--green);
}
.dep-success-card h3 { font-size: 20px; margin-bottom: 8px; }
.dep-success-amt {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 6px;
}
.dep-success-bal { margin: 10px 0 14px; font-weight: 700; }
.dep-amount {
  display: flex; align-items: baseline; gap: 8px;
  margin: 6px 0 10px;
}
.dep-amount strong {
  font-size: 32px; font-weight: 800;
  color: var(--gold); letter-spacing: 0.02em;
}
.dep-amount span { color: var(--muted); font-size: 14px; font-weight: 700; }
.dep-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5;
  word-break: break-all;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.dep-meta {
  margin-top: 12px;
  color: var(--muted); font-size: 13px;
}
.dep-meta strong { color: var(--text); }
.dep-hint {
  margin-top: 12px;
  color: var(--muted); font-size: 12px; line-height: 1.5;
}
.dep-support {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.dep-support-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  min-width: auto;
  white-space: nowrap;
}
.dep-support-btn svg { width: 14px; height: 14px; }
.dep-actions {
  margin-top: 14px;
  display: flex; gap: 8px;
}
.dep-history-list { display: grid; gap: 10px; }
.dep-history-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}
.dep-history-item strong { font-size: 16px; font-weight: 800; color: var(--gold); }
.dep-history-item .muted { margin-top: 4px; font-size: 12px; color: var(--muted); }
.dep-history-badge {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(52,211,153,.14);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}
.order-history-item { align-items: flex-start; }
.order-history-item strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}
.order-item-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.order-item-top strong { flex: 1; min-width: 0; }
.order-cat-tag {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border: 1px solid rgba(147, 197, 253, .25);
}
.order-cat-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 14px;
}
.order-cat-chip {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 650;
}
.order-cat-chip.active {
  color: #ffe7a8;
  border-color: rgba(245,197,66,.55);
  background: rgba(245,197,66,.12);
}
.order-bal-rows {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.order-bal-rows b { color: var(--text); font-weight: 700; }
.order-bal-rows b.deduct { color: var(--gold); }
.muted-box {
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.swap-sub {
  margin: -2px 2px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.swap-market {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.swap-source {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #93c5fd;
}
.swap-time { margin-top: 3px; font-size: 12px; color: var(--muted); }
.swap-refresh {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.swap-refresh svg { width: 16px; height: 16px; }
.swap-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 12px;
}
.swap-price strong {
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  color: var(--gold);
}
.swap-price span { color: var(--muted); font-size: 13px; font-weight: 700; }
.swap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.swap-pills span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.swap-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.swap-field { position: relative; }
.swap-field .input {
  background: rgba(0,0,0,.22);
  font-size: 22px;
  font-weight: 800;
  padding-right: 72px;
  height: 52px;
}
.swap-field em {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}
.swap-amts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 14px;
}
.swap-chip {
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.swap-chip.active {
  color: #1a1403;
  background: var(--gold);
  border-color: var(--gold);
}
.swap-choices { margin-top: 14px; }
.pay-mode:disabled {
  opacity: 1;
  cursor: default;
}
.swap-balance-note {
  margin-top: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
  padding: 14px 14px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(245,197,66,.14), rgba(245,197,66,.04));
  border: 1px solid rgba(245,197,66,.22);
}
.swap-result-top small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.swap-result-top strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--gold);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.swap-result-top em {
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
}
.swap-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(245,197,66,.16);
}
.swap-split div { text-align: center; }
.swap-split div + div { border-left: 1px solid rgba(255,255,255,.08); }
.swap-split small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}
.swap-split b { font-size: 14px; font-weight: 800; }
.swap-qr { margin: 4px auto 14px; }
.swap-qr img { width: 168px; height: 168px; }
.swap-addr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line);
}
.swap-addr code {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
  color: var(--text);
}
.swap-addr button {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: #1a1403;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.swap-warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 197, 66, .08);
  color: #f6d56a;
  font-size: 12px;
  line-height: 1.5;
}
.swap-notes {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffe4e7;
  border: 1px solid #ffb4bc;
}
.swap-notes h4 {
  font-size: 13px;
  margin-bottom: 6px;
  color: #9f1239;
}
.swap-notes ol {
  margin: 0 0 0 18px;
  color: #9f1239;
  font-size: 12px;
  line-height: 1.55;
}
.swap-notes li + li { margin-top: 4px; }

@media (max-width: 380px) {
  .plan-row { grid-template-columns: 1fr; }
  .qty-grid { grid-template-columns: repeat(2, 1fr); }
}

.energy-addr-card .energy-addr-input {
  width: 100%;
  min-height: 72px;
  height: auto;
  resize: none;
  font-size: 16px; /* prevent iOS zoom on focus */
  line-height: 1.45;
  padding: 14px 14px;
  word-break: break-all;
  border-radius: 14px;
}
.energy-addr-actions {
  margin-top: 10px;
  gap: 8px;
}
.energy-book-title {
  margin-top: 16px;
}
.addr-book {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.addr-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 28px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.addr-chip.active {
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.16);
}
.addr-chip strong { font-size: 13px; }
.addr-chip small { font-size: 11px; color: var(--muted); }
.addr-del {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
}
.addr-del:hover { color: var(--red); background: rgba(244,63,94,.15); }

.pay-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.pay-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 14px 28px 13px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #1c2740;
  color: #f1f5ff;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pay-mode::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.55);
  box-sizing: border-box;
  background: transparent;
}
.pay-mode.active {
  border-color: #60a5fa;
  background: #1e3a5f;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}
.pay-mode.active::after {
  border-color: #60a5fa;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
.pay-mode strong {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  color: #f8fafc;
}
.pay-mode.active strong { color: #bfdbfe; }
.pay-mode small {
  font-size: 11px;
  line-height: 1.35;
  color: #a8b4cc;
}
.pay-mode.active small { color: #93c5fd; }

/* Launch splash — synced from N6Store entry animation */
.splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 80% at 50% 38%, #111a33 0%, var(--bg) 62%);
  transition: opacity 0.3s ease, visibility 0.3s;
  animation: splashAutoHide 0.3s ease 6s forwards;
}
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash__sig {
  display: grid;
  justify-items: center;
  gap: 14px;
  transform: translateY(-4vh);
}
.splash__logo-wrap {
  position: relative;
  width: 104px;
  height: 104px;
}
.splash__ring {
  position: absolute;
  inset: 0;
  width: 104px;
  height: 104px;
  overflow: visible;
}
.splash__mark {
  position: absolute;
  inset: 18px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 18px;
  opacity: 0;
  animation: splashFadeIn 0.35s ease-out 0.55s forwards;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.splash__badge-line {
  fill: none;
  stroke: #7cc0ff;
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(124, 192, 255, 0.9));
  animation:
    splashDraw 0.55s cubic-bezier(0.6, 0, 0.3, 1) forwards,
    splashFadeOut 0.25s ease 0.7s forwards;
}
.splash__badge-fill {
  opacity: 0;
  transform-origin: 60px 60px;
  filter: drop-shadow(0 10px 28px rgba(75, 160, 236, 0.45));
  animation:
    splashFill 0.4s ease-out 0.45s forwards,
    splashGlow 1.6s ease-in-out 0.9s infinite;
}
.splash__word {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  animation: splashRise 0.4s ease-out 0.6s forwards;
}
.splash__tag {
  margin-top: -8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  animation: splashRise 0.4s ease-out 0.72s forwards;
}
@keyframes splashDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes splashFadeOut {
  to {
    opacity: 0;
  }
}
@keyframes splashFadeIn {
  to {
    opacity: 1;
  }
}
@keyframes splashFill {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes splashGlow {
  0%,
  100% {
    filter: drop-shadow(0 10px 28px rgba(75, 160, 236, 0.45));
  }
  50% {
    filter: drop-shadow(0 10px 40px rgba(99, 102, 241, 0.7));
  }
}
@keyframes splashRise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splashAutoHide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash * {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
  .splash {
    animation: splashAutoHide 0.3s ease 3s forwards !important;
  }
}