@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Rajdhani:wght@400;500;600&display=swap");

:root {
  color-scheme: light;

  --bg: #f7f7f3;
  --bg-2: #eeeeea;
  --text: #111820;
  --text-2: #29313a;
  --muted: #8d949d;
  --muted-2: #aab0b8;

  --surface: rgba(255, 255, 255, .78);
  --surface-2: rgba(255, 255, 255, .56);
  --surface-3: rgba(250, 250, 247, .92);
  --line: rgba(15, 20, 26, .07);

  --dark-card: #121821;
  --dark-card-2: #252b34;
  --dark-card-text: #ffffff;
  --dark-card-muted: rgba(255, 255, 255, .62);

  --orange: #ff7a18;
  --orange-2: #ff9a3d;
  --orange-soft: #fff0e1;

  /* finance/exchange style */
  --profit: #0ecb81;
  --profit-bg: rgba(14, 203, 129, .13);
  --loss: #f6465d;
  --loss-bg: rgba(246, 70, 93, .13);

  --shadow-xs: 0 8px 22px rgba(20, 24, 30, .055);
  --shadow-soft: 0 18px 54px rgba(20, 24, 30, .075);
  --shadow-strong: 0 28px 78px rgba(20, 24, 30, .15);
  --blur: blur(24px) saturate(1.14);

  --r-xl: 34px;
  --r-lg: 30px;
  --r-md: 24px;
  --r-sm: 18px;

  --page-x: 26px;
  --dock-h: 76px;

  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-balance: "Rajdhani", "Saira Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.35, .28, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090908;
  --bg-2: #12100e;
  --text: #f7f3ed;
  --text-2: rgba(247, 243, 237, .88);
  --muted: rgba(247, 243, 237, .50);
  --muted-2: rgba(247, 243, 237, .36);

  --surface: rgba(255, 255, 255, .070);
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .060);
  --line: rgba(255, 255, 255, .080);

  --dark-card: #151719;
  --dark-card-2: #252a30;
  --orange-soft: rgba(255, 122, 24, .22);

  --shadow-xs: 0 10px 26px rgba(0, 0, 0, .18);
  --shadow-soft: 0 20px 58px rgba(0, 0, 0, .28);
  --shadow-strong: 0 30px 82px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(78% 42% at 50% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 74%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: background-color .45s ease, color .45s ease;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(96% 50% at 50% -9%, rgba(255, 105, 12, .70), rgba(255, 119, 24, .18) 48%, transparent 82%),
    linear-gradient(180deg, #170a04 0%, #090908 48%, #050505 100%);
}

button,
input { font: inherit; }

button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.miniapp {
  position: relative;
  width: min(100%, 430px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
}

.view {
  min-height: 100svh;
  padding: max(36px, env(safe-area-inset-top)) var(--page-x) calc(var(--dock-h) + env(safe-area-inset-bottom) + 38px);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity .62s var(--ease-out),
    transform .62s var(--ease-pop),
    filter .62s var(--ease-out);
}

.view.is-leaving {
  opacity: 0;
  transform: translate3d(-22px, 0, 0) scale(.978) rotate(-.6deg);
  filter: blur(12px);
}

.view.is-entering {
  opacity: 0;
  transform: translate3d(28px, 16px, 0) scale(.965) rotate(.8deg);
  filter: blur(14px);
}

.header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  max-width: 245px;
  overflow: hidden;
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-button,
.theme-button,
.back-button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 19px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-xs);
  backdrop-filter: var(--blur);
  transition: transform .28s var(--ease-pop), background .42s ease, color .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .back-button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-xs);
}

.icon-button:active,
.theme-button:active,
.back-button:active,
.pill:active,
.quick-card:active,
.product-card:active,
.method-card:active,
.primary-button:active,
.buy-button:active,
.list-action:active,
.choice-card:active {
  transform: scale(.94);
}

.icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-button .moon-icon { display: none; }
html[data-theme="dark"] .theme-button .sun-icon { display: none; }
html[data-theme="dark"] .theme-button .moon-icon { display: block; }

.balance-card {
  position: relative;
  height: 248px;
  margin-top: 30px;
  padding: 32px 27px;
  overflow: hidden;
  border-radius: 34px;
  color: var(--dark-card-text);
  background:
    radial-gradient(70% 88% at 108% 8%, rgba(97, 107, 118, .42), transparent 48%),
    radial-gradient(43% 42% at 8% 100%, rgba(91, 101, 112, .34), transparent 70%),
    linear-gradient(135deg, var(--dark-card-2) 0%, #171d24 50%, var(--dark-card) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), var(--shadow-strong);
}

.balance-card::before,
.balance-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 34px solid rgba(255,255,255,.052);
  pointer-events: none;
}

.balance-card::before {
  width: 140px;
  height: 140px;
  right: -48px;
  top: -40px;
}

.balance-card::after {
  width: 112px;
  height: 112px;
  left: -48px;
  bottom: -48px;
  border-color: rgba(255,255,255,.060);
}

.balance-label {
  position: relative;
  z-index: 1;
  color: var(--dark-card-muted);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.02em;
}

.balance-line {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}

.balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.balance-id {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  color: var(--dark-card-muted);
  font-size: 16px;
  letter-spacing: -.025em;
}

.card-more {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 22px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: var(--blur);
}

.wallet-mark {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 26px;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(70% 70% at 36% 22%, #ffba72 0%, #ff8b32 48%, #ff6c16 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 36px rgba(255, 126, 31, .28);
}

.action-pills {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1.1fr .9fr;
  gap: 14px;
}

.pill {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.045em;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-xs);
  backdrop-filter: var(--blur);
  transition: transform .28s var(--ease-pop), background .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-xs);
}

.quick-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.quick-card {
  min-width: 0;
  min-height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  border-radius: 29px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-soft);
  backdrop-filter: var(--blur);
  transition: transform .28s var(--ease-pop), background .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .quick-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft);
}

.quick-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), var(--shadow-xs);
}

html[data-theme="dark"] .quick-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 11px 26px rgba(0,0,0,.18);
}

.quick-card.is-accent .quick-icon {
  color: var(--orange);
  background: linear-gradient(145deg, var(--orange-soft), var(--surface-2));
}

.quick-card span:last-child {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section {
  margin-top: 34px;
}

.section-title {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.065em;
  font-weight: 800;
}

.list {
  display: grid;
  gap: 14px;
}

.activity-card,
.order-card,
.payment-card,
.help-card,
.ref-card,
.info-card,
.detail-hero,
.choice-card {
  display: grid;
  align-items: center;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-soft);
  backdrop-filter: var(--blur);
  transition: background .42s ease, box-shadow .42s ease, transform .28s var(--ease-pop);
}

html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .ref-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .choice-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft);
}

.activity-card {
  min-height: 76px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 17px;
}

.finance-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 24px rgba(20,24,30,.08);
}

.badge-ai { color: #111820; background: linear-gradient(145deg, #e8f8f2, #c8eedf); }
.badge-claude { color: #111820; background: linear-gradient(145deg, #fff1e4, #f7d4b4); }
.badge-edit { color: #111820; background: linear-gradient(145deg, #ffffff, #ededeb); }
.badge-tool { color: #111820; background: linear-gradient(145deg, #ffffff, #ededeb); }
.badge-topup { color: var(--profit); background: var(--profit-bg); }
.badge-tether { color: white; background: #26a17b; }
.badge-sbp { background: linear-gradient(135deg, #6b58f6, #27a8e0 45%, #20bf55 72%, #f68b1f); color: #fff; }

.item-main { min-width: 0; }

.item-main strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-main span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.amount {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.045em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.amount-positive { color: var(--profit); background: var(--profit-bg); }
.amount-negative { color: var(--loss); background: var(--loss-bg); }

.catalog-header,
.page-header {
  padding-top: 22px;
}

.catalog-header .header {
  margin-bottom: 50px;
}

.page-title {
  margin: 0;
  color: var(--text);
  font-size: 40px;
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.072em;
}

.catalog-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.product-card {
  min-width: 0;
  min-height: 266px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 16px 16px;
  border-radius: 32px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-soft);
  backdrop-filter: var(--blur);
  text-align: center;
  transition: transform .28s var(--ease-pop), background .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .product-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft);
}

.product-chip {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 26px;
  font-family: var(--font-balance);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
}

.product-card h3 {
  min-height: 42px;
  margin: 20px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.055em;
}

.product-spacer {
  flex: 1 1 auto;
  min-height: 14px;
}

.product-price {
  margin-top: 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.buy-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 54px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 210, 158, .85), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(121, 40, 0, .22),
    0 16px 34px rgba(255, 112, 22, .28);
  transition: transform .28s var(--ease-pop), box-shadow .42s ease, filter .42s ease;
}

html[data-theme="dark"] .buy-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 54px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 210, 158, .85), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(121, 40, 0, .22),
    0 16px 34px rgba(255, 112, 22, .28);
  transition: transform .28s var(--ease-pop), box-shadow .42s ease, filter .42s ease;
}

.profile-top {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 34px;
}

.avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  color: var(--orange);
  background: linear-gradient(145deg, var(--orange-soft), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-soft);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.06em;
}

.profile-name strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.065em;
}

.profile-name span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.2;
}

.profile-balance-card {
  margin-top: 28px;
  height: 126px;
  padding: 24px 24px;
}

.profile-balance-card .balance-label { font-size: 14px; }
.profile-balance-card .balance-line { margin-top: 10px; }
.profile-balance-card .balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}
.profile-balance-card .balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.topup-panel {
  margin-top: 22px;
  padding: 24px 16px 18px;
  border-radius: 30px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-soft);
  backdrop-filter: var(--blur);
  transition: background .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .topup-panel {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft);
}

.topup-title {
  margin: 0 0 18px 2px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.055em;
}

.methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.method-card {
  min-width: 0;
  min-height: 100px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px 7px;
  border-radius: 21px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), var(--shadow-xs);
  transition: transform .28s var(--ease-pop), background .42s ease, box-shadow .42s ease;
}

html[data-theme="dark"] .method-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.18);
}

.method-card.is-active {
  background: linear-gradient(145deg, var(--orange-soft), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 15px 34px rgba(255,119,24,.10);
}

.method-card .finance-badge {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  font-size: 11px;
}

.method-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.14;
  font-weight: 700;
  text-align: center;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
}

.method-card small {
  color: var(--orange);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.input-box {
  height: 56px;
  margin-top: 16px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 19px;
  color: var(--muted);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 3px rgba(20,24,30,.045);
  font-size: 17px;
}

.summary {
  margin-top: 14px;
}

.summary-row {
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: -.02em;
}

.summary-row + .summary-row { border-top: 1px solid var(--line); }

.summary-row b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.primary-button {
  width: 100%;
  height: 58px;
  margin-top: 16px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(180deg, #ff922f 0%, #ff7417 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.27), 0 18px 34px rgba(255,119,24,.20);
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.045em;
  transition: transform .28s var(--ease-pop), box-shadow .42s ease;
}

.profile-section { margin-top: 26px; }

.payment-list { display: grid; gap: 12px; }

.payment-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  min-height: 72px;
  padding: 14px;
}

.payment-card .finance-badge {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.payment-card .item-main strong { font-size: 15px; }
.payment-card .item-main span { font-size: 12px; }

.status-badge {
  align-self: center;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--profit);
  background: var(--profit-bg);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-wait {
  color: var(--orange);
  background: var(--orange-soft);
}

.pay-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 6px;
}

.pay-actions button {
  min-width: 0;
  height: 38px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-xs);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pay-actions button svg { width: 15px; height: 15px; }
.pay-actions button:first-child { color: var(--orange); }
.pay-actions button:last-child { color: var(--loss); }

.ref-card {
  margin-top: 10px;
  min-height: 112px;
  padding: 17px 16px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.ref-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.copy-link {
  grid-column: 1 / -1;
  margin-top: 7px;
  height: 38px;
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-xs);
  font-size: 13px;
  font-weight: 700;
}

.copy-link svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
}

.orders-list { margin-top: 34px; }

.order-card {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
}

.list-action {
  height: 38px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 13px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 13px;
  font-weight: 800;
}

.help-list {
  margin-top: 34px;
  display: grid;
  gap: 12px;
}

.help-card {
  min-height: 70px;
  padding: 16px 17px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
}

.help-card .finance-badge {
  width: 42px;
  height: 42px;
  color: var(--orange);
  background: var(--orange-soft);
}

.help-card strong {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.045em;
}

.help-card span {
  color: var(--muted);
  font-size: 13px;
}

.detail-header {
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-header .page-title {
  font-size: 34px;
}

.detail-hero {
  margin-top: 28px;
  padding: 22px;
  align-items: stretch;
}

.detail-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.detail-title {
  margin: 0;
  font-size: 29px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.07em;
}

.detail-desc {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.02em;
}

.detail-price {
  margin-top: 22px;
  color: var(--text);
  font-family: var(--font-balance);
  font-size: 60px;
  line-height: .9;
  font-weight: 500;
}

.info-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-card {
  min-height: 92px;
  display: block;
  padding: 15px;
}

.info-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.info-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.04em;
}

.detail-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.secondary-button {
  width: 100%;
  height: 54px;
  border-radius: 17px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-xs);
  font-weight: 800;
}

.choice-grid {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}

.choice-card {
  min-height: 78px;
  padding: 16px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
}

.choice-card .item-main strong {
  font-size: 17px;
}

.dock {
  position: fixed;
  left: max(24px, calc((100vw - 430px) / 2 + 24px));
  right: max(24px, calc((100vw - 430px) / 2 + 24px));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  height: var(--dock-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 20px 56px rgba(20,24,30,.105);
  backdrop-filter: var(--blur);
  transition: background .42s ease, box-shadow .42s ease, transform .42s var(--ease-pop);
}

html[data-theme="dark"] .dock {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 56px rgba(0,0,0,.38);
}

.dock-btn {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--muted);
  transition: color .34s ease, background .34s ease, transform .34s var(--ease-pop), box-shadow .34s ease;
}

.dock-btn svg {
  width: 25px;
  height: 25px;
}

.dock-btn.is-active {
  color: #fff;
  background: linear-gradient(145deg, #272d34, #11161c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 15px 30px rgba(20,24,30,.18);
  transform: translateY(-2px);
}

html[data-theme="dark"] .dock-btn.is-active {
  color: var(--orange);
  background: linear-gradient(145deg, rgba(255,122,24,.18), rgba(255,122,24,.09));
}

@media (max-width: 390px) {
  :root { --page-x: 22px; }

  .view { padding-top: max(30px, env(safe-area-inset-top)); }

  .brand { font-size: 18px; max-width: 215px; }

  .icon-button,
  .theme-button,
  .back-button {
    width: 46px;
    height: 46px;
    border-radius: 17px;
  }

  .balance-card {
    height: 232px;
    padding: 29px 23px;
  }

  .balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}

  .balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}
  .balance-id { font-size: 15px; }

  .wallet-mark {
    width: 60px;
    height: 60px;
    right: 22px;
    bottom: 22px;
  }

  .action-pills { gap: 11px; }
  .pill { height: 48px; font-size: 15px; }
  .quick-grid { gap: 11px; }

  .quick-card {
    min-height: 100px;
    border-radius: 25px;
  }

  .quick-card span:last-child { font-size: 14px; }

  .quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .catalog-grid { gap: 17px 14px; }

  .product-card {
    min-height: 258px;
    padding: 21px 14px 16px;
  }

  .product-chip {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 26px;
  }

  .product-card h3 { font-size: 19px; }
  .product-price { font-size: 28px; }

  .buy-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 54px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 210, 158, .85), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(121, 40, 0, .22),
    0 16px 34px rgba(255, 112, 22, .28);
  transition: transform .28s var(--ease-pop), box-shadow .42s ease, filter .42s ease;
}

  .methods { gap: 9px; }

  .method-card {
    min-height: 96px;
    padding-inline: 5px;
  }

  .method-card strong { font-size: 11px; }

  .payment-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .payment-card .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .dock {
    left: max(18px, calc((100vw - 430px) / 2 + 18px));
    right: max(18px, calc((100vw - 430px) / 2 + 18px));
  }
}


/* ==============================
   v5 fintech polish overrides
   ============================== */
:root {
  --text: #10151b;
  --text-2: #222a33;
  --muted: #7f8791;
  --surface: rgba(255, 255, 255, .82);
  --surface-2: rgba(255, 255, 255, .62);
  --line: rgba(15, 20, 26, .045);
  --profit: #00C076;
  --profit-bg: rgba(0, 192, 118, .105);
  --loss: #F23645;
  --loss-bg: rgba(242, 54, 69, .105);
  --shadow-xs: 0 10px 26px rgba(18, 24, 30, .045);
  --shadow-soft: 0 18px 46px rgba(18, 24, 30, .060);
  --shadow-strong: 0 28px 72px rgba(18, 24, 30, .135);
  --font-ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-balance: "Rajdhani", "Saira Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.18, .28, 1);
}

html[data-theme="dark"] {
  --surface: rgba(255, 255, 255, .062);
  --surface-2: rgba(255, 255, 255, .036);
  --line: rgba(255, 255, 255, .060);
  --shadow-xs: 0 10px 24px rgba(0, 0, 0, .16);
  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .25);
  --shadow-strong: 0 30px 76px rgba(0, 0, 0, .38);
}

body { font-family: var(--font-ui); }

.view {
  transition:
    opacity .50s var(--ease-out),
    transform .50s var(--ease-pop),
    filter .50s var(--ease-out);
}

.view.is-leaving {
  opacity: .22;
  transform: translate3d(-44px, 0, 0) scale(.985);
  filter: blur(8px);
}

.view.is-entering {
  opacity: .05;
  transform: translate3d(52px, 0, 0) scale(.982);
  filter: blur(10px);
}

.brand {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -.052em;
}

.balance-card {
  height: 244px;
  padding: 31px 27px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 26px 64px rgba(18, 24, 30, .14);
}

.balance-line { gap: 10px; }

.balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}

.balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.profile-balance-card .balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}
.profile-balance-card .balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.icon-button,
.theme-button,
.back-button,
.pill,
.quick-card,
.activity-card,
.order-card,
.payment-card,
.help-card,
.ref-card,
.info-card,
.detail-hero,
.choice-card,
.topup-panel,
.product-card,
.method-card,
.dock,
.secondary-button,
.copy-link,
.pay-actions button {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 0 0 1px rgba(255,255,255,.18),
    var(--shadow-soft);
}

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .back-button,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .ref-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .choice-card,
html[data-theme="dark"] .topup-panel,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .dock,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .copy-link,
html[data-theme="dark"] .pay-actions button {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.035),
    var(--shadow-soft);
}

.activity-card {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 14px 16px;
}

.finance-badge {
  font-family: var(--font-balance);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge-ai { color: #0b4f3a; background: linear-gradient(145deg, #e5f8f0, #c5eadb); }
.badge-claude { color: #6c320d; background: linear-gradient(145deg, #fff0e2, #f4d1ae); }
.badge-edit { color: #111820; background: linear-gradient(145deg, #ffffff, #e9ebe9); }
.badge-tool { color: #111820; background: linear-gradient(145deg, #ffffff, #e9ebe9); }

html[data-theme="dark"] .badge-ai { color: #b8ffe0; background: rgba(0, 192, 118, .12); }
html[data-theme="dark"] .badge-claude { color: #ffd0aa; background: rgba(255, 122, 24, .13); }
html[data-theme="dark"] .badge-edit,
html[data-theme="dark"] .badge-tool { color: #f7f3ed; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); }

.item-main strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.045em;
}

.item-main span {
  color: var(--muted);
  font-size: 13px;
}

.amount {
  color: var(--text);
  font-family: var(--font-balance);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .035em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.amount-positive {
  color: var(--profit);
  background: transparent;
}

.amount-negative {
  color: var(--loss);
  background: transparent;
}

.page-title {
  font-size: 37px;
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.062em;
}

.section-title {
  font-size: 23px;
  letter-spacing: -.058em;
}

.catalog-grid { gap: 18px; }

.product-card {
  min-height: 252px;
  padding: 20px 16px 16px;
  border-radius: 30px;
}

.product-chip {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  font-family: var(--font-balance);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .02em;
}

.product-card h3 {
  min-height: 38px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.045em;
}

.product-spacer { min-height: 18px; }

.product-price {
  font-family: var(--font-balance);
  font-size: 29px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.buy-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 54px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 210, 158, .85), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(121, 40, 0, .22),
    0 16px 34px rgba(255, 112, 22, .28);
  transition: transform .28s var(--ease-pop), box-shadow .42s ease, filter .42s ease;
}

.profile-top { margin-top: 32px; }

.avatar {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 14px 38px rgba(255, 122, 24, .08);
}

.profile-name strong {
  font-size: 23px;
  letter-spacing: -.055em;
}

.payment-card {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 74px;
  padding: 14px 15px;
}

.order-card {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 15px;
}

.detail-title {
  font-size: 27px;
  line-height: 1.08;
}

.detail-price {
  font-family: var(--font-balance);
  font-size: 52px;
  line-height: .9;
  font-weight: 600;
  letter-spacing: .01em;
}

.dock-btn {
  transition: color .30s ease, background .30s ease, transform .30s var(--ease-pop), box-shadow .30s ease;
}

.dock-btn.is-active { transform: translateY(-2px) scale(1.02); }

.view.is-settled .balance-card,
.view.is-settled .pill,
.view.is-settled .quick-card,
.view.is-settled .activity-card,
.view.is-settled .product-card,
.view.is-settled .order-card,
.view.is-settled .payment-card,
.view.is-settled .help-card,
.view.is-settled .detail-hero,
.view.is-settled .info-card,
.view.is-settled .choice-card,
.view.is-settled .topup-panel,
.view.is-settled .ref-card {
  animation: cardRise .44s var(--ease-pop) both;
}

.view.is-settled .quick-card:nth-child(2),
.view.is-settled .product-card:nth-child(2),
.view.is-settled .activity-card:nth-child(2) { animation-delay: .03s; }
.view.is-settled .quick-card:nth-child(3),
.view.is-settled .product-card:nth-child(3),
.view.is-settled .activity-card:nth-child(3) { animation-delay: .055s; }
.view.is-settled .quick-card:nth-child(4),
.view.is-settled .product-card:nth-child(4) { animation-delay: .08s; }

@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 390px) {
  .balance-value {
  color: rgba(255,255,255,.985);
  font-family: var(--font-balance);
  font-size: clamp(54px, 13.2vw, 64px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 12px 28px rgba(0,0,0,.20);
}
  .balance-currency {
  color: rgba(255,255,255,.96);
  font-family: var(--font-balance);
  font-size: 48px;
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.03em;
}
  .product-card { min-height: 246px; padding: 19px 14px 16px; }
  .product-chip { width: 66px; height: 66px; border-radius: 22px; font-size: 22px; }
  .product-card h3 { font-size: 17px; }
  .product-price { font-size: 26px; }
  .buy-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 54px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 210, 158, .85), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(121, 40, 0, .22),
    0 16px 34px rgba(255, 112, 22, .28);
  transition: transform .28s var(--ease-pop), box-shadow .42s ease, filter .42s ease;
}
}


.buy-button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.26), transparent);
  pointer-events: none;
  z-index: -1;
}

.buy-button::after {
  content: "";
  position: absolute;
  inset: auto 18% -18px 18%;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 117, 21, .55);
  filter: blur(16px);
  pointer-events: none;
  z-index: -2;
}

.buy-button:active {
  filter: brightness(1.05);
}

html[data-theme="dark"] {
  --orange: #ff7a18;
  --orange-2: #ff9b36;
}

html[data-theme="dark"] .buy-button,
html[data-theme="dark"] .primary-button {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 213, 164, .92), transparent 58%),
    linear-gradient(180deg, #ff9b36 0%, #ff6412 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(121, 40, 0, .28),
    0 0 0 1px rgba(255, 123, 24, .28),
    0 18px 42px rgba(255, 92, 12, .36);
}

html[data-theme="dark"] .wallet-mark,
html[data-theme="dark"] .dock-btn.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 0 1px rgba(255, 122, 24, .26),
    0 16px 40px rgba(255, 100, 18, .34);
}

/* v6 product detail alignment */
.detail-hero {
  margin-top: 28px;
  padding: 26px 24px 28px;
  align-items: stretch;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px 22px;
}

.detail-hero .detail-topline {
  display: contents;
}

.detail-hero .product-chip {
  grid-row: 1 / span 2;
  width: 104px;
  height: 104px;
  border-radius: 32px;
  align-self: start;
}

.detail-hero .status-badge {
  grid-column: 2;
  justify-self: start;
  align-self: end;
  margin-top: 8px;
}

.detail-title {
  grid-column: 2;
  margin: 4px 0 0;
  align-self: end;
}

.detail-desc {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  max-width: 330px;
}

.detail-price {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.info-grid {
  align-items: stretch;
}

.info-card {
  min-height: 108px;
  padding: 17px;
}

.info-card strong {
  font-size: 18px;
  line-height: 1.18;
}

.detail-actions .primary-button {
  height: 62px;
  border-radius: 999px;
}

@media (max-width: 390px) {
  .detail-hero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px 18px;
    padding: 22px 20px 24px;
  }

  .detail-hero .product-chip {
    width: 88px;
    height: 88px;
    border-radius: 28px;
  }

  .detail-title {
    font-size: 26px;
  }
}

.product-card {
  min-height: 270px;
}

.product-spacer {
  flex: 1 1 auto;
  min-height: 24px;
}

.product-price {
  margin-top: 0;
}

html[data-theme="dark"] .balance-card {
  background:
    radial-gradient(88% 80% at 50% -18%, rgba(255, 116, 18, .28), transparent 50%),
    radial-gradient(70% 88% at 108% 8%, rgba(97, 107, 118, .36), transparent 48%),
    radial-gradient(43% 42% at 8% 100%, rgba(91, 101, 112, .28), transparent 70%),
    linear-gradient(135deg, #252a30 0%, #171d24 50%, #111315 100%);
}

html[data-theme="dark"] .balance-card::before {
  border-color: rgba(255, 126, 28, .13);
}

html[data-theme="dark"] .balance-card::after {
  border-color: rgba(255,255,255,.045);
}


/* ===== v7 overrides: catalog buy button + stronger dark orange gradient ===== */
html[data-theme="dark"] body {
  background:
    radial-gradient(120% 62% at 50% -10%, rgba(255, 125, 24, .90) 0%, rgba(255, 125, 24, .42) 22%, rgba(255, 125, 24, .12) 46%, transparent 68%),
    linear-gradient(180deg, #1e0a03 0%, #0c0908 36%, #050505 62%, #040404 100%);
}

html[data-theme="dark"] .app::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 44vh;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 132, 26, .10), rgba(255, 132, 26, 0));
  z-index: 0;
}

html[data-theme="dark"] .screen,
html[data-theme="dark"] .app-inner,
html[data-theme="dark"] .view {
  position: relative;
  z-index: 1;
}

/* brighter orange accents in dark theme */
html[data-theme="dark"] {
  --orange: #ff8a1e;
  --orange-2: #ffb14d;
  --orange-soft: rgba(255, 138, 30, .20);
}

/* catalog CTA rework */
.catalog-grid .buy-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 50px;
  margin-top: auto;
  padding: 0 18px;
  border-radius: 18px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #ffae51 0%, #ff8a1e 46%, #ff6514 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(115, 38, 0, .24),
    0 14px 28px rgba(255, 116, 20, .22);
}

.catalog-grid .buy-button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}

.catalog-grid .buy-button::after {
  content: "";
  position: absolute;
  inset: auto 16% -16px 16%;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 121, 24, .46);
  filter: blur(14px);
  pointer-events: none;
}

.catalog-grid .buy-button:hover,
.catalog-grid .buy-button:focus-visible {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(115, 38, 0, .26),
    0 18px 34px rgba(255, 116, 20, .28);
}

.catalog-grid .buy-button:active {
  transform: translateY(0) scale(.992);
}

html[data-theme="dark"] .catalog-grid .buy-button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #ffb14d 0%, #ff8718 42%, #ff5f0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(108, 30, 0, .28),
    0 0 0 1px rgba(255, 138, 30, .18),
    0 18px 34px rgba(255, 96, 15, .30);
}

html[data-theme="dark"] .catalog-grid .buy-button::after {
  background: rgba(255, 117, 16, .58);
}

/* a little cleaner dark cards so orange reads better */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .topup-panel,
html[data-theme="dark"] .dock,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .ref-card,
html[data-theme="dark"] .help-card {
  background: linear-gradient(180deg, rgba(24,24,24,.82), rgba(14,14,14,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 36px rgba(0,0,0,.22);
}


/* v8 fix: dock must never disappear on dark theme */
.dock {
  position: fixed !important;
  z-index: 40 !important;
}

html[data-theme="dark"] .miniapp::before {
  z-index: 0;
}

html[data-theme="dark"] .dock {
  position: fixed !important;
  z-index: 45 !important;
}


/* v8 route animation: faster card-stack slide, not fade-only */
.view {
  transform-origin: 50% 42%;
  transition:
    opacity .50s var(--ease-out),
    transform .50s var(--ease-pop),
    filter .50s var(--ease-out);
}

.view.is-leaving {
  opacity: .18;
  transform: translate3d(-34px, -6px, 0) scale(.975) rotate(-1.2deg);
  filter: blur(9px);
}

.view.is-entering {
  opacity: .02;
  transform: translate3d(44px, 18px, 0) scale(.955) rotate(1.4deg);
  filter: blur(12px);
}

.view.is-settled .balance-card,
.view.is-settled .product-card,
.view.is-settled .activity-card,
.view.is-settled .quick-card,
.view.is-settled .pill,
.view.is-settled .order-card,
.view.is-settled .payment-card,
.view.is-settled .help-card,
.view.is-settled .detail-hero,
.view.is-settled .info-card,
.view.is-settled .topup-panel,
.view.is-settled .ref-card {
  animation: v8PopIn .48s var(--ease-pop) both;
}

.view.is-settled .product-card:nth-child(2),
.view.is-settled .activity-card:nth-child(2),
.view.is-settled .quick-card:nth-child(2) {
  animation-delay: .035s;
}

.view.is-settled .product-card:nth-child(3),
.view.is-settled .activity-card:nth-child(3),
.view.is-settled .quick-card:nth-child(3) {
  animation-delay: .065s;
}

.view.is-settled .product-card:nth-child(4),
.view.is-settled .quick-card:nth-child(4) {
  animation-delay: .095s;
}

@keyframes v8PopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }
  58% {
    opacity: 1;
    transform: translateY(-3px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dock-btn.is-active {
  animation: dockKick .44s var(--ease-pop) both;
}

@keyframes dockKick {
  0% { transform: translateY(0) scale(.94); }
  58% { transform: translateY(-5px) scale(1.05); }
  100% { transform: translateY(-2px) scale(1); }
}


/* v8 catalog buy buttons: no fill, thin outline, lowercase text */
.product-card .buy-button {
  position: relative;
  width: 100%;
  height: 48px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .46);
  border-radius: 999px;
  color: var(--orange);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: lowercase;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    transform .28s var(--ease-pop),
    border-color .28s ease,
    color .28s ease,
    box-shadow .28s ease;
}

.product-card .buy-button::before {
  display: none !important;
}

.product-card .buy-button::after {
  display: none !important;
}

.product-card .buy-button:active {
  transform: scale(.96);
  border-color: rgba(255, 122, 24, .82);
  box-shadow: 0 0 0 4px rgba(255, 122, 24, .10) !important;
}

html[data-theme="dark"] .product-card .buy-button {
  color: #ff8a2c;
  border-color: rgba(255, 138, 44, .56);
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .product-card .buy-button:active {
  border-color: rgba(255, 156, 62, .92);
  box-shadow: 0 0 0 4px rgba(255, 122, 24, .16) !important;
}

.product-card {
  min-height: 264px;
}

.product-spacer {
  min-height: 22px;
}


/* v9 premium hover for outlined buy button */
.product-card .buy-button {
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, rgba(255, 122, 24, .42), rgba(255, 190, 122, .18), rgba(255, 122, 24, .42)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 0 rgba(255, 122, 24, 0) !important;
}

html[data-theme="dark"] .product-card .buy-button {
  background:
    linear-gradient(#0b0b0a, #0b0b0a) padding-box,
    linear-gradient(135deg, rgba(255, 122, 24, .56), rgba(255, 190, 122, .20), rgba(255, 122, 24, .56)) border-box !important;
}

.product-card .buy-button::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    conic-gradient(
      from 180deg,
      transparent 0deg,
      transparent 72deg,
      rgba(255, 122, 24, .0) 112deg,
      rgba(255, 156, 62, .90) 145deg,
      rgba(255, 231, 194, .95) 162deg,
      rgba(255, 156, 62, .90) 180deg,
      rgba(255, 122, 24, .0) 214deg,
      transparent 260deg,
      transparent 360deg
    );
  opacity: 0;
  filter: blur(.2px);
  transform: rotate(0deg) scale(1.03);
  transition: opacity .26s ease;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.product-card .buy-button::after {
  display: block !important;
  content: "";
  position: absolute;
  top: -40%;
  left: -32%;
  width: 42%;
  height: 180%;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-130%) rotate(18deg);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .product-card .buy-button:hover {
    transform: translateY(-2px) scale(1.018);
    color: #ff6d12;
    border-color: transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      0 0 0 4px rgba(255, 122, 24, .070),
      0 14px 30px rgba(255, 112, 18, .16) !important;
  }

  .product-card .buy-button:hover::before {
    opacity: 1;
    animation: borderBeam 1.18s linear infinite;
  }

  .product-card .buy-button:hover::after {
    opacity: 1;
    animation: shineSweep .82s var(--ease-out) both;
  }

  html[data-theme="dark"] .product-card .buy-button:hover {
    color: #ffffff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 0 0 4px rgba(255, 122, 24, .12),
      0 16px 38px rgba(255, 92, 12, .28) !important;
  }
}

.product-card .buy-button:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 4px rgba(255, 122, 24, .12),
    0 14px 30px rgba(255, 112, 18, .16) !important;
}

.product-card .buy-button:focus-visible::before {
  opacity: 1;
  animation: borderBeam 1.18s linear infinite;
}

.product-card .buy-button:active {
  transform: translateY(0) scale(.965);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 0 5px rgba(255, 122, 24, .11) !important;
}

.product-card .buy-button:active::before {
  opacity: 1;
  animation: borderBeam .78s linear infinite;
}

.product-card .buy-button:active::after {
  opacity: 1;
  animation: shineSweep .55s var(--ease-out) both;
}

@keyframes borderBeam {
  to {
    transform: rotate(360deg) scale(1.03);
  }
}

@keyframes shineSweep {
  0% {
    transform: translateX(-145%) rotate(18deg);
  }
  100% {
    transform: translateX(360%) rotate(18deg);
  }
}


/* v10 clean hover for buy button: no spinning/rotating effects */
.product-card .buy-button {
  border: 1px solid rgba(255, 122, 24, .42) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    transform .24s cubic-bezier(.2, 1, .22, 1),
    border-color .24s ease,
    color .24s ease,
    box-shadow .24s ease,
    background-color .24s ease !important;
}

.product-card .buy-button::before {
  display: none !important;
  animation: none !important;
}

.product-card .buy-button::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0 auto 0 -54%;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .product-card .buy-button:hover {
    transform: translateY(-2px);
    color: #ff6f14;
    border-color: rgba(255, 122, 24, .82) !important;
    background: rgba(255, 122, 24, .035) !important;
    box-shadow:
      0 0 0 4px rgba(255, 122, 24, .055),
      0 12px 26px rgba(255, 112, 18, .12) !important;
  }

  .product-card .buy-button:hover::after {
    opacity: 1;
    animation: cleanShine .62s cubic-bezier(.2, .8, .2, 1) both;
  }
}

.product-card .buy-button:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255, 122, 24, .82) !important;
  box-shadow:
    0 0 0 4px rgba(255, 122, 24, .10),
    0 12px 26px rgba(255, 112, 18, .12) !important;
}

.product-card .buy-button:active {
  transform: translateY(0) scale(.975);
  border-color: rgba(255, 122, 24, .95) !important;
  background: rgba(255, 122, 24, .055) !important;
  box-shadow:
    0 0 0 5px rgba(255, 122, 24, .09) !important;
}

.product-card .buy-button:active::after {
  opacity: 1;
  animation: cleanShine .44s cubic-bezier(.2, .8, .2, 1) both;
}

html[data-theme="dark"] .product-card .buy-button {
  color: #ff9140;
  border-color: rgba(255, 145, 64, .54) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  html[data-theme="dark"] .product-card .buy-button:hover {
    color: #ffb176;
    border-color: rgba(255, 158, 74, .88) !important;
    background: rgba(255, 122, 24, .055) !important;
    box-shadow:
      0 0 0 4px rgba(255, 122, 24, .11),
      0 14px 30px rgba(255, 92, 12, .18) !important;
  }
}

html[data-theme="dark"] .product-card .buy-button:active {
  background: rgba(255, 122, 24, .075) !important;
  box-shadow:
    0 0 0 5px rgba(255, 122, 24, .13) !important;
}

@keyframes cleanShine {
  0% {
    transform: translateX(0) skewX(-18deg);
  }
  100% {
    transform: translateX(360%) skewX(-18deg);
  }
}


/* v11 final catalog polish */
.catalog-grid {
  gap: 16px;
  align-items: stretch;
}

.product-card {
  min-height: unset !important;
  height: clamp(228px, 59vw, 246px);
  padding: 18px 15px 15px !important;
  border-radius: 28px !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.product-chip {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto;
  border-radius: 22px !important;
  font-size: 22px !important;
  flex: 0 0 auto;
}

.product-card h3 {
  min-height: 39px !important;
  margin: 15px 0 0 !important;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 17px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: normal;
  text-wrap: balance;
}

.product-spacer {
  flex: 1 1 auto;
  min-height: 10px !important;
}

.product-price {
  margin: 0 !important;
  color: var(--text);
  font-family: var(--font-balance);
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums lining-nums;
  flex: 0 0 auto;
}

.product-card .buy-button {
  position: relative;
  width: 100%;
  height: 44px !important;
  margin-top: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .44) !important;
  border-radius: 999px !important;
  color: var(--orange);
  font-family: var(--font-ui);
  font-size: 15px !important;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  transition:
    transform .26s cubic-bezier(.2, 1, .22, 1),
    border-color .26s ease,
    color .26s ease,
    box-shadow .26s ease,
    background-color .26s ease;
}

.product-card .buy-button::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 122, 24, .00) 28%,
      rgba(255, 165, 84, .22) 45%,
      rgba(255, 255, 255, .40) 50%,
      rgba(255, 165, 84, .22) 56%,
      rgba(255, 122, 24, .00) 72%,
      transparent 100%);
  transform: translateX(-125%);
  opacity: 0;
  pointer-events: none;
}

.product-card .buy-button::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: auto 22% -9px 22%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 122, 24, .42);
  filter: blur(13px);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(.7);
  transition: opacity .26s ease, transform .26s ease;
}

@media (hover: hover) {
  .product-card .buy-button:hover {
    transform: translateY(-2px);
    color: #ff6f14;
    border-color: rgba(255, 122, 24, .82) !important;
    background: rgba(255, 122, 24, .028) !important;
    box-shadow:
      0 0 0 3px rgba(255, 122, 24, .050),
      0 10px 24px rgba(255, 112, 18, .105) !important;
  }

  .product-card .buy-button:hover::before {
    opacity: 1;
    animation: v11ButtonShine .56s cubic-bezier(.2, .8, .2, 1) both;
  }

  .product-card .buy-button:hover::after {
    opacity: .75;
    transform: scaleX(1);
  }
}

.product-card .buy-button:focus-visible {
  outline: none;
  transform: translateY(-2px);
  color: #ff6f14;
  border-color: rgba(255, 122, 24, .90) !important;
  box-shadow:
    0 0 0 4px rgba(255, 122, 24, .095),
    0 10px 24px rgba(255, 112, 18, .12) !important;
}

.product-card .buy-button:focus-visible::before {
  opacity: 1;
  animation: v11ButtonShine .56s cubic-bezier(.2, .8, .2, 1) both;
}

.product-card .buy-button:active {
  transform: translateY(0) scale(.975);
  border-color: rgba(255, 122, 24, .95) !important;
  background: rgba(255, 122, 24, .050) !important;
  box-shadow:
    0 0 0 4px rgba(255, 122, 24, .085) !important;
}

.product-card .buy-button:active::before {
  opacity: 1;
  animation: v11ButtonShine .42s cubic-bezier(.2, .8, .2, 1) both;
}

html[data-theme="dark"] .product-card .buy-button {
  color: #ff9544;
  border-color: rgba(255, 149, 68, .56) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  html[data-theme="dark"] .product-card .buy-button:hover {
    color: #ffbe87;
    border-color: rgba(255, 165, 84, .92) !important;
    background: rgba(255, 122, 24, .050) !important;
    box-shadow:
      0 0 0 3px rgba(255, 122, 24, .12),
      0 12px 28px rgba(255, 92, 12, .17) !important;
  }
}

html[data-theme="dark"] .product-card .buy-button::before {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 122, 24, .00) 28%,
      rgba(255, 149, 68, .28) 45%,
      rgba(255, 231, 194, .50) 50%,
      rgba(255, 149, 68, .28) 56%,
      rgba(255, 122, 24, .00) 72%,
      transparent 100%);
}

html[data-theme="dark"] .product-card .buy-button::after {
  background: rgba(255, 110, 18, .58);
}

@keyframes v11ButtonShine {
  from {
    transform: translateX(-125%);
  }
  to {
    transform: translateX(125%);
  }
}

/* Make product detail more structured and less scattered */
.detail-hero {
  padding: 24px !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 16px 18px !important;
  align-items: center;
}

.detail-hero .product-chip {
  width: 92px !important;
  height: 92px !important;
  border-radius: 30px !important;
  font-size: 27px !important;
}

.detail-title {
  margin: 2px 0 0 !important;
  font-size: 27px !important;
  line-height: 1.08 !important;
}

.detail-desc {
  grid-column: 1 / -1;
  margin: 18px 0 0 !important;
  max-width: none !important;
  font-size: 15px;
  line-height: 1.5;
}

.detail-price {
  grid-column: 1 / -1;
  margin-top: 20px !important;
  font-size: 52px !important;
}

.info-grid {
  gap: 12px;
}

.info-card {
  min-height: 98px !important;
  padding: 16px !important;
}

@media (max-width: 390px) {
  .catalog-grid {
    gap: 14px;
  }

  .product-card {
    height: 232px !important;
    padding: 16px 13px 14px !important;
    border-radius: 26px !important;
  }

  .product-chip {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    font-size: 20px !important;
  }

  .product-card h3 {
    min-height: 37px !important;
    margin-top: 13px !important;
    font-size: 16px !important;
  }

  .product-price {
    font-size: 25px !important;
  }

  .product-card .buy-button {
    height: 42px !important;
    margin-top: 12px !important;
    font-size: 14px !important;
  }

  .detail-hero {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 14px 16px !important;
    padding: 22px 20px !important;
  }

  .detail-hero .product-chip {
    width: 80px !important;
    height: 80px !important;
    border-radius: 27px !important;
    font-size: 24px !important;
  }

  .detail-title {
    font-size: 24px !important;
  }
}


/* v12: bigger +/- in recent activity amounts */
.activity-card .amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
}

.activity-card .amount-sign {
  font-size: 1.12em;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
}

.activity-card .amount-body {
  line-height: 1;
}

/* v12: 4 payment methods layout */
.methods {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.method-card {
  min-height: 94px;
}

.method-card small {
  text-align: center;
}


/* v13 catalog categories */
.category-strip {
  width: calc(100% + 8px);
  margin: 22px -4px 0;
  padding: 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-pill {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 122, 24, .24);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  transition:
    color .24s ease,
    border-color .24s ease,
    background-color .24s ease,
    transform .24s var(--ease-pop),
    box-shadow .24s ease;
}

.category-pill.is-active {
  color: var(--orange);
  border-color: rgba(255, 122, 24, .74);
  background: rgba(255, 122, 24, .055);
  box-shadow: 0 0 0 3px rgba(255, 122, 24, .055);
}

.category-pill:active {
  transform: scale(.96);
}

html[data-theme="dark"] .category-pill {
  border-color: rgba(255, 145, 64, .24);
  color: rgba(247, 243, 237, .50);
}

html[data-theme="dark"] .category-pill.is-active {
  color: #ff9b3d;
  border-color: rgba(255, 145, 64, .76);
  background: rgba(255, 122, 24, .075);
  box-shadow: 0 0 0 3px rgba(255, 122, 24, .095);
}

.catalog-grid {
  margin-top: 18px !important;
}

.catalog-grid.is-filtered .product-card {
  animation: catalogFilterIn .34s var(--ease-pop) both;
}

.catalog-grid.is-filtered .product-card:nth-child(2) { animation-delay: .035s; }
.catalog-grid.is-filtered .product-card:nth-child(3) { animation-delay: .065s; }
.catalog-grid.is-filtered .product-card:nth-child(4) { animation-delay: .095s; }

@keyframes catalogFilterIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.965);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* v13 real product image inside card */
.product-image-chip {
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.60)) !important;
  overflow: hidden;
  padding: 10px;
}

.product-image-chip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 18px;
}

html[data-theme="dark"] .product-image-chip {
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(255,255,255,.14), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
}

.detail-hero .product-image-chip {
  padding: 12px;
}

@media (max-width: 390px) {
  .category-strip {
    gap: 8px;
  }

  .category-pill {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .product-image-chip {
    padding: 9px;
  }
}


/* v14 real logos: GPT and Claude on clean white background */
.product-image-chip {
  background: #ffffff !important;
  padding: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 14px 28px rgba(20, 24, 30, .075) !important;
}

.product-image-chip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 16px;
}

html[data-theme="dark"] .product-image-chip {
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(255,255,255,.08),
    0 16px 34px rgba(0,0,0,.28) !important;
}

.detail-hero .product-image-chip {
  padding: 13px !important;
}


/* v18: brand categories in catalog, visible without horizontal scroll */
.category-strip {
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  overflow: visible !important;
}

.category-pill {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-size: 13px !important;
  letter-spacing: -.035em;
}

.category-pill:first-child {
  grid-column: span 1;
}

.catalog-grid {
  margin-top: 18px !important;
}

/* v18: new brand chips */
.badge-gemini {
  color: #ffffff;
  background: linear-gradient(145deg, #4285f4, #9b72f2 48%, #fbbc05);
}

.badge-youtube {
  color: #ffffff;
  background: linear-gradient(145deg, #ff2d2d, #c50000);
}

.badge-figma {
  color: #ffffff;
  background: linear-gradient(145deg, #a259ff, #1abcfe 54%, #0acf83);
}

html[data-theme="dark"] .badge-gemini,
html[data-theme="dark"] .badge-youtube,
html[data-theme="dark"] .badge-figma {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 26px rgba(0,0,0,.22);
}

/* v18: Help rows without question mark icon */
.help-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 70px;
  padding: 16px 18px !important;
}

.help-card .item-main strong,
.help-card .item-main span {
  text-align: left;
}

.help-detail-topline {
  display: flex !important;
  justify-content: flex-start;
}

/* v18: language switch under referral */
.language-section {
  margin-top: 24px;
}

.language-switch {
  min-height: 58px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    var(--shadow-soft);
  backdrop-filter: var(--blur);
}

.language-option {
  height: 46px;
  border-radius: 17px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  transition:
    color .24s ease,
    background .24s ease,
    transform .24s var(--ease-pop),
    box-shadow .24s ease;
}

.language-option.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #ff9638 0%, #ff7116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 14px 28px rgba(255, 112, 18, .18);
}

.language-option:active {
  transform: scale(.965);
}

html[data-theme="dark"] .language-switch {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    var(--shadow-soft);
}

html[data-theme="dark"] .language-option.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #ff9b36 0%, #ff6412 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(255, 92, 12, .24);
}

@media (max-width: 390px) {
  .category-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  .category-pill {
    height: 36px;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .language-switch {
    min-height: 56px;
  }

  .language-option {
    height: 44px;
    font-size: 14px;
  }
}


/* v19: added Grok and Adobe categories, keep all categories visible without horizontal scroll */
.category-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.category-pill {
  height: 36px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
  letter-spacing: -.035em !important;
}

/* v19: Grok and Adobe product chips */
.badge-grok {
  color: #ffffff;
  background:
    radial-gradient(80% 80% at 34% 16%, rgba(255,255,255,.18), transparent 58%),
    linear-gradient(145deg, #111111, #2a2a2a);
}

.badge-adobe {
  color: #ffffff;
  background:
    radial-gradient(80% 80% at 34% 16%, rgba(255,255,255,.20), transparent 58%),
    linear-gradient(145deg, #ff2a2a, #a70000);
}

html[data-theme="dark"] .badge-grok,
html[data-theme="dark"] .badge-adobe {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 26px rgba(0,0,0,.22);
}

@media (max-width: 390px) {
  .category-strip {
    gap: 7px !important;
  }

  .category-pill {
    height: 34px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
  }
}

/* Functional layer: modal, forms, admin and live API states use the same visual language. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 20px);
  z-index: 40;
  width: min(360px, calc(100% - 36px));
  padding: 14px 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, #ff922f 0%, #ff7417 100%);
  box-shadow: 0 18px 34px rgba(255,119,24,.24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .24s ease, transform .24s var(--ease-out);
  font-weight: 750;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.48);
}
.modal.show { display: flex; }
.modal-card {
  position: relative;
  width: min(430px, 100%);
  max-height: 88svh;
  overflow: auto;
  padding: 24px 18px 18px;
  border-radius: 30px 30px 24px 24px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-3));
  box-shadow: var(--shadow-strong);
  backdrop-filter: var(--blur);
}
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  box-shadow: var(--shadow-xs);
  font-size: 24px;
}
.form-card { display: grid; gap: 12px; }
.form-card h2, .form-card h3, .modal-card h2, .modal-card h3 { margin: 0 42px 8px 0; letter-spacing: -.055em; }
.form-card label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 650; }
input, textarea, select {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 18px;
  padding: 0 15px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 3px rgba(20,24,30,.06);
  outline: none;
}
textarea { min-height: 96px; padding-top: 12px; resize: vertical; }
pre.order-data, .modal-card pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .primary-button, .actions .secondary-button, .actions .danger-button { flex: 1 1 auto; }
.product-details { display: grid; gap: 16px; }
.product-details-head { display: flex; align-items: center; gap: 14px; padding-right: 42px; }
.product-details-head .product-chip { flex: 0 0 auto; margin: 0; }
.product-details-head h2 { margin: 0 0 5px; }
.product-details-price { color: var(--orange); font-size: 22px; }
.product-description { display: grid; gap: 7px; }
.product-description span, .product-meta dt { color: var(--muted); font-size: 13px; font-weight: 750; }
.product-description p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.product-meta { display: grid; gap: 1px; margin: 0; overflow: hidden; border-radius: 18px; background: var(--line); }
.product-meta div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; background: var(--surface-2); }
.product-meta dd { margin: 0; text-align: right; font-weight: 800; overflow-wrap: anywhere; }
.product-details > .primary-button { width: 100%; }
.secondary-button, .danger-button, .list-action {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 17px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54), var(--shadow-xs);
}
.danger-button { color: var(--loss); background: var(--loss-bg); }
.danger-text { color: var(--loss); margin: 0; font-weight: 800; }
.warn-text { color: var(--orange); margin: 0; font-weight: 800; }
button:disabled { opacity: .48; cursor: not-allowed; }
.buy-button.is-unavailable { opacity: .48; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); }
.admin-panel, .form-panel { margin-top: 18px; display: grid; gap: 12px; }

/* Compact balance card sizing */
.balance-card {
  height: 206px !important;
  margin-top: 20px !important;
  padding: 24px 24px !important;
  border-radius: 30px !important;
}
.balance-label {
  font-size: 14px !important;
}
.balance-line {
  margin-top: 12px !important;
  gap: 7px !important;
}
.balance-currency {
  font-size: 40px !important;
}
.balance-value {
  font-size: clamp(44px, 10.6vw, 52px) !important;
}
.balance-id {
  margin-top: 12px !important;
  font-size: 14px !important;
}
.card-more {
  width: 42px !important;
  height: 42px !important;
  right: 18px !important;
  top: 18px !important;
  border-radius: 16px !important;
}
.wallet-mark {
  width: 56px !important;
  height: 56px !important;
  right: 24px !important;
  bottom: 22px !important;
  border-radius: 20px !important;
}
.profile-balance-card {
  height: 112px !important;
  margin-top: 20px !important;
  padding: 20px 22px !important;
}
.profile-balance-card .balance-line {
  margin-top: 8px !important;
}
.profile-balance-card .balance-currency {
  font-size: 34px !important;
}
.profile-balance-card .balance-value {
  font-size: clamp(38px, 9.6vw, 46px) !important;
}
.profile-balance-card .wallet-mark {
  width: 48px !important;
  height: 48px !important;
  right: 20px !important;
  bottom: 18px !important;
  border-radius: 18px !important;
}
@media (max-width: 390px) {
  .balance-card {
    height: 194px !important;
    padding: 22px 22px !important;
    border-radius: 28px !important;
  }
  .balance-value {
    font-size: clamp(40px, 10vw, 48px) !important;
  }
  .wallet-mark {
    width: 52px !important;
    height: 52px !important;
  }
  .profile-balance-card {
    height: 106px !important;
  }
}

/* Profile balance and top-up spacing refinement */
.profile-balance-card {
  height: 178px !important;
  margin-top: 24px !important;
  padding: 24px 24px !important;
  border-radius: 30px !important;
}
.profile-balance-card .balance-label {
  font-size: 14px !important;
}
.profile-balance-card .balance-line {
  margin-top: 12px !important;
}
.profile-balance-card .balance-currency {
  font-size: 40px !important;
}
.profile-balance-card .balance-value {
  font-size: clamp(44px, 10.6vw, 52px) !important;
}
.profile-balance-card .wallet-mark {
  width: 54px !important;
  height: 54px !important;
  right: 24px !important;
  bottom: 22px !important;
  border-radius: 20px !important;
}
.topup-panel {
  margin-top: 28px !important;
  padding: 26px 20px 22px !important;
}
.topup-panel label {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.topup-panel input {
  margin-bottom: 2px !important;
}
.topup-panel .methods {
  margin-top: 18px !important;
  gap: 14px !important;
}
.topup-panel .method-card {
  min-height: 112px !important;
}
.topup-panel .primary-button {
  margin-top: 22px !important;
}
@media (max-width: 390px) {
  .profile-balance-card {
    height: 166px !important;
    padding: 22px 22px !important;
  }
  .profile-balance-card .balance-value {
    font-size: clamp(40px, 10vw, 48px) !important;
  }
  .topup-panel {
    padding: 24px 18px 20px !important;
  }
  .topup-panel .methods {
    gap: 12px !important;
  }
}

/* Center profile balance content inside the existing card */
.profile-balance-card {
  padding-top: 34px !important;
}
.profile-balance-card .balance-label {
  margin-top: 0 !important;
}
.profile-balance-card .balance-line {
  margin-top: 14px !important;
}
@media (max-width: 390px) {
  .profile-balance-card {
    padding-top: 30px !important;
  }
  .profile-balance-card .balance-line {
    margin-top: 12px !important;
  }
}

/* Referral center uses the same profile icon as the referral tile */
.ref-icon-badge {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), var(--shadow-xs);
}
.ref-icon-badge .icon {
  width: 27px;
  height: 27px;
  stroke-width: 2.25;
}
html[data-theme="dark"] .ref-icon-badge {
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
}

/* Referral icon compact alignment */
.ref-card {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  column-gap: 14px !important;
}
.ref-icon-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 17px !important;
  transform: translateX(-2px) !important;
}
.ref-icon-badge .icon {
  width: 23px !important;
  height: 23px !important;
}
@media (max-width: 390px) {
  .ref-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }
  .ref-icon-badge {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Cleaner theme moon icon */
.theme-button {
  position: relative !important;
}
.theme-button .icon {
  display: none !important;
}
.theme-button::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.theme-button::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 13px;
  left: 22px;
  background: #6a320f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02);
}
html[data-theme="dark"] .theme-button::after {
  background: #22100a;
}
@media (max-width: 390px) {
  .theme-button::before {
    width: 19px;
    height: 19px;
  }
  .theme-button::after {
    width: 17px;
    height: 17px;
    top: 13px;
    left: 21px;
  }
}

/* Simple half-moon icon */
.theme-button::before {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: inset -7px 0 0 0 currentColor !important;
  display: block !important;
}
.theme-button::after {
  display: none !important;
}
@media (max-width: 390px) {
  .theme-button::before {
    width: 21px !important;
    height: 21px !important;
    box-shadow: inset -7px 0 0 0 currentColor !important;
  }
}

/* Slightly faster interface animations */
.view {
  transition-duration: .42s, .42s, .42s !important;
}
.icon-button,
.theme-button,
.back-button,
.pill,
.quick-card,
.product-card,
.method-card,
.primary-button,
.buy-button,
.list-action,
.choice-card,
.dock-btn,
.category-pill,
.language-option {
  transition-duration: .18s !important;
}
.catalog-grid.is-filtered .product-card {
  animation-duration: .24s !important;
}
.bottom-nav button,
.dock-btn,
.dock-btn .icon {
  transition-duration: .18s !important;
}
@keyframes tabPopFast {
  0% { transform: translateY(2px) scale(.9); }
  60% { transform: translateY(-2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.dock-btn.is-active .icon,
.bottom-nav button.active .nav-icon {
  animation-duration: .24s !important;
}