/* M8 HUB web shop pages (WEB1 design 4). Built on ui/tokens.css and
   ui/components.css; everything here is shop-specific: home, shop, brand,
   product, checkout, price watch, orders, wallet, account, sign in. */

.main {
  min-width: 0;
  display: grid;
  gap: 26px;
  align-content: start;
  animation: m8-fade-in 0.35s var(--ease);
  grid-template-columns: minmax(0, 1fr);
}

.main > * {
  min-width: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

.grow {
  flex: 1;
  min-width: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  background: var(--panel-2);
}

.note.bad {
  color: var(--bad);
  background: rgba(248, 113, 113, 0.1);
}

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 100;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.boot img {
  animation: m8-float 2.4s var(--ease) infinite;
}

.noscript {
  padding: 24px;
  text-align: center;
}

/* ---------------------------------------------------------- headings */
.page-head h1,
.watch-head h1,
.brand-head h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-sub {
  margin: 4px 0 0;
  color: var(--muted);
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sec-head h2,
.sec-head h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.sec-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.sec-head.tight {
  margin-bottom: 8px;
}

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--violet);
  white-space: nowrap;
}

.sec-link svg {
  width: 16px;
  height: 16px;
}

:root[data-theme="dark"] .sec-link,
:root:not([data-theme]) .sec-link {
  color: #b9a2ff;
}

.card-pad h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

/* ----------------------------------------------------------- top bar */
.topbar .logo {
  margin-right: 6px;
}

.wallet-chip .wc-text {
  display: grid;
  line-height: 1.1;
}

.wallet-chip .wc-text small {
  font-size: 10.5px;
}

@media (max-width: 559px) {
  .wallet-chip .wc-text small,
  .top-avatar {
    display: none;
  }

  .wallet-chip {
    padding-right: 10px;
  }
}

/* -------------------------------------------------------------- hero */
.home-top {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.hero {
  position: relative;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  min-height: 270px;
  box-shadow: var(--shadow);
}

.hero-viewport {
  overflow: hidden;
  height: 100%;
}

.hero-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s var(--ease);
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 26px 22px 46px;
  color: #fff;
  overflow: hidden;
}

.slide-ai {
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 79, 163, 0.55), transparent 55%),
    linear-gradient(125deg, #2a1268, #5b2bd6 55%, #9a3cf0);
}

.slide-mlbb {
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 154, 90, 0.6), transparent 55%),
    linear-gradient(125deg, #3a1306, #a8380e 55%, #f08a2b);
}

.slide-wallet {
  background: radial-gradient(120% 140% at 100% 0%, rgba(56, 225, 255, 0.45), transparent 55%),
    linear-gradient(125deg, #081a3a, #1d3fa8 55%, #3d7bff);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 470px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
}

.hero-kicker svg {
  width: 14px;
  height: 14px;
}

.hero-copy h1 {
  margin: 12px 0 8px;
  font-size: clamp(25px, 4.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-copy p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 400px;
}

.hero-art {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  transform-origin: right center;
  opacity: 0.2;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 1;
}

.hero-art.multi {
  grid-template-columns: repeat(2, auto);
  gap: 14px;
}

.float {
  animation: m8-float 5s var(--ease) infinite;
}

.float.f1 {
  animation-delay: -1.2s;
}

.float.f2 {
  animation-delay: -2.4s;
}

.float.f3 {
  animation-delay: -3.6s;
}

.hero-wallet {
  width: 150px;
  height: auto;
}

.hero-dots {
  position: absolute;
  left: 22px;
  bottom: 16px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.3s var(--ease), background 0.3s;
}

.hero-dot[aria-selected="true"] {
  width: 24px;
  background: #fff;
}

/* ------------------------------------------------- wallet + sign in */
.signin-card {
  padding: 22px;
  display: grid;
  gap: 8px;
  justify-items: start;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
}

.signin-card .empty-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--brand-soft);
  color: var(--violet);
}

.signin-card .empty-ico svg {
  width: 22px;
  height: 22px;
}

.signin-card b {
  font-size: 17px;
}

.signin-card p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.wallet-side {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.wallet-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  padding: 18px 20px;
  color: #fff;
  background: var(--wallet);
  box-shadow: 0 22px 50px -24px rgba(124, 45, 158, 0.9);
  display: grid;
  gap: 3px;
}

.wallet-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 163, 0.5), transparent 70%);
}

.wallet-card > * {
  position: relative;
  z-index: 1;
}

.wallet-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
}

.wc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wc-chip {
  width: 34px;
  height: 25px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f5d98b, #b98a2e);
}

.wc-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

.wc-balance {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.wallet-card.big .wc-balance {
  font-size: 34px;
}

.wc-sub,
.wc-rate {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.wc-rate {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
}

.wc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.wc-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat {
  padding: 12px;
  border-radius: var(--r-card-sm);
  display: grid;
  gap: 2px;
}

.stat svg {
  width: 20px;
  height: 20px;
  color: var(--violet);
  margin-bottom: 4px;
}

.stat b {
  font-size: 19px;
}

.stat small {
  font-size: 12px;
  color: var(--muted);
}

/* -------------------------------------------------------- price watch */
.pulse-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.pulse-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  transition: transform 0.2s var(--ease), border-color 0.2s;
}

.pulse-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
}

.pt-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex: none;
  color: #fff;
}

.pt-ico svg {
  width: 21px;
  height: 21px;
}

.pulse-new .pt-ico {
  background: linear-gradient(135deg, #7c4dff, #c04bff);
}

.pulse-down .pt-ico {
  background: linear-gradient(135deg, #10b981, #0e7a5a);
}

.pulse-up .pt-ico {
  background: linear-gradient(135deg, #ff7a59, #e2365b);
}

.pt-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.pt-text small {
  color: var(--muted);
  font-size: 12.5px;
}

.pt-count {
  font-size: 22px;
  font-weight: 800;
}

.watch-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.watch-head p {
  margin: 2px 0 0;
  color: var(--muted);
}

.wh-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--glow);
  flex: none;
}

.wh-ico svg {
  width: 26px;
  height: 26px;
}

.watch-tabs .tab svg {
  width: 16px;
  height: 16px;
}

.watch-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.watch-note svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.watch-list {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.watch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-card-sm);
}

.wr-main {
  flex: 1;
  min-width: 0;
}

.wr-name {
  display: block;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.wr-spark {
  display: none;
}

.wr-spark.down {
  color: var(--ok);
}

.wr-spark.up {
  color: var(--bad);
}

.wr-price {
  display: grid;
  justify-items: end;
  text-align: right;
  font-size: 13px;
}

.wr-price s {
  color: var(--faint);
  font-size: 12px;
}

.wr-price small {
  color: var(--muted);
  font-size: 11.5px;
}

/* --------------------------------------------------- products, badges */
.price {
  display: grid;
  line-height: 1.25;
}

.price-usdt {
  font-size: 16px;
  font-weight: 800;
}

.price-mmk {
  font-size: 12px;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

.badge svg {
  width: 12px;
  height: 12px;
}

.badge-new {
  background: linear-gradient(135deg, #7c4dff, #ff4fa3);
}

.badge-down {
  background: #0f9f6e;
}

.badge-up {
  background: #e2365b;
}

.badge.corner {
  position: absolute;
  top: 0;
  left: 60px;
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}

.pcard:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 255, 0.45);
  box-shadow: var(--glow);
}

.pcard.out {
  opacity: 0.62;
}

.pcard-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fav {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--faint);
  background: var(--panel-2);
}

.fav svg {
  width: 18px;
  height: 18px;
}

.fav[aria-pressed="true"] {
  color: var(--gold);
}

.fav[aria-pressed="true"] svg path {
  fill: currentColor;
}

.pcard-brand {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcard-name {
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.pcard-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.pcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pcard-chips .chip {
  font-size: 11.5px;
}

.pcard-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.plus {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  flex: none;
  color: #fff;
  background: var(--brand);
  box-shadow: var(--glow);
}

.plus svg {
  width: 19px;
  height: 19px;
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(176px, 46%);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  scroll-snap-align: start;
}

.stories {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: none;
}

.stories::-webkit-scrollbar {
  display: none;
}

.story {
  display: grid;
  justify-items: center;
  gap: 4px;
  flex: none;
  width: 74px;
  text-align: center;
}

.story b {
  font-size: 12px;
  font-weight: 650;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story small {
  font-size: 11px;
  color: var(--muted);
}

.story-ring {
  padding: 3px;
  border-radius: 24px;
  background: var(--brand);
  transition: transform 0.2s var(--ease);
}

.story:hover .story-ring {
  transform: scale(1.05);
}

.story-ring .app-icon {
  border: 2px solid var(--bg);
}

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trust-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r-card-sm);
}

.trust-item b {
  display: block;
  font-size: 14px;
}

.trust-item small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.trust-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  color: var(--violet);
  background: var(--brand-soft);
}

.trust-ico svg {
  width: 19px;
  height: 19px;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  overflow: hidden;
}

.ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ok);
}

.ticker-label svg {
  width: 15px;
  height: 15px;
}

.ticker-viewport {
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: m8-marquee 40s linear infinite;
}

.tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.tick b {
  color: var(--text);
  font-weight: 650;
}

.tick-dot,
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bento-tile {
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: 132px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  transition: transform 0.2s var(--ease), border-color 0.2s;
}

.bento-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 255, 0.45);
}

.bento-tile.big {
  grid-column: span 2;
  background: var(--brand-soft), var(--panel);
}

.bento-tile b {
  font-size: 15px;
}

.bento-tile small {
  color: var(--muted);
  font-size: 12.5px;
}

.bento-tile .chip {
  justify-self: start;
}

.stack {
  display: flex;
  margin-bottom: 8px;
}

.stack .app-icon + .app-icon {
  margin-left: -10px;
}

.stack .app-icon {
  border: 2px solid var(--bg-2);
}

.bento-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--muted);
}

.bento-ico svg {
  width: 22px;
  height: 22px;
}

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 650;
}

.pay-method .opt-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
}

.pay-method .opt-ico svg {
  width: 16px;
  height: 16px;
}

.pay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ------------------------------------------------------- shop, brand */
.filter-bar {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  grid-template-columns: minmax(0, 1fr);
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.filter-search svg {
  width: 18px;
  height: 18px;
  color: var(--faint);
}

.filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.filter-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.select svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.select select {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.select option {
  background: var(--panel-solid);
  color: var(--text);
}

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.toggle-row.spaced {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.filter-chips .chip {
  flex: none;
}

.load-more {
  display: flex;
  margin: 16px auto 0;
}

.load-more[hidden] {
  display: none;
}

.grid-brands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.btile {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  transition: transform 0.2s var(--ease), border-color 0.2s;
}

.btile:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 255, 0.45);
}

.btile .app-icon {
  margin-bottom: 8px;
}

.btile b {
  font-size: 14.5px;
}

.btile small {
  font-size: 12.5px;
  color: var(--muted);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: -12px;
}

.crumbs svg {
  width: 14px;
  height: 14px;
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs span {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.brand-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-head small {
  color: var(--violet);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brand-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* ----------------------------------------------------------- product */
.product-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.product-main {
  display: grid;
  gap: 16px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.product-side {
  display: none;
}

.product-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 22px 18px;
  text-align: center;
  overflow: hidden;
}

.product-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 260px;
  background: radial-gradient(closest-side, rgba(139, 92, 255, 0.35), transparent);
  pointer-events: none;
}

.product-hero > * {
  position: relative;
}

.product-hero .fav {
  position: absolute;
  top: 14px;
  right: 14px;
}

.ph-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.ph-info h1 {
  margin: 10px 0 8px;
  font-size: clamp(21px, 3.6vw, 28px);
  line-height: 1.25;
}

.ph-price {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.ph-price b {
  font-size: 30px;
  letter-spacing: -0.02em;
}

.ph-price span {
  color: var(--muted);
}

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

.feature {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: var(--r-card-sm);
}

.feature small {
  color: var(--muted);
  font-size: 11.5px;
}

.feature b {
  font-size: 13.5px;
}

.f-ico {
  color: var(--cyan);
  margin-bottom: 4px;
}

.f-ico svg {
  width: 20px;
  height: 20px;
}

.history-chart {
  color: var(--violet);
  margin: 6px 0 12px;
}

.history-chart .spark {
  width: 100%;
  height: 72px;
}

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

.history-stats > div {
  display: grid;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel-2);
}

.history-stats small {
  color: var(--muted);
  font-size: 11.5px;
}

.history-stats b,
.history-stats s {
  font-size: 13.5px;
}

.follow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--brand-soft);
  border: 1px solid rgba(139, 92, 255, 0.25);
}

.follow-row b {
  display: block;
  font-size: 14px;
}

.follow-row small {
  color: var(--muted);
  font-size: 12.5px;
}

.packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.package {
  display: grid;
  gap: 1px;
  padding: 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 13px;
  transition: border-color 0.2s;
}

.package b {
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.package small {
  color: var(--muted);
}

.package .badge {
  justify-self: start;
  margin-top: 4px;
}

.package.active {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet) inset;
}

.package.out {
  opacity: 0.55;
}

.tab-body {
  padding-top: 14px;
}

.prose p {
  margin: 0 0 8px;
  color: var(--muted);
}

.steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.steps b {
  display: block;
  color: var(--text);
}

.steps.small {
  font-size: 13px;
  gap: 4px;
  margin: 14px 0 0;
}

.needs {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-2);
}

.needs ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.pay-bar {
  position: fixed;
  z-index: 44;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 22px;
  background: rgba(13, 11, 28, 0.86);
  border: 1px solid var(--border-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8);
}

:root[data-theme="light"] .pay-bar {
  background: rgba(255, 255, 255, 0.92);
}

.pay-bar > div {
  display: grid;
  line-height: 1.2;
}

.pay-bar small {
  color: var(--muted);
  font-size: 11.5px;
}

.pay-bar b {
  font-size: 18px;
}

.pay-bar span {
  color: var(--muted);
  font-size: 12px;
}

/* ---------------------------------------------------------- checkout */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.co-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.co-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.co-head b {
  display: block;
  font-size: 14.5px;
  line-height: 1.3;
}

.co-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  padding: 4px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.qty output {
  min-width: 36px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
}

.qty .icon-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  min-width: 0;
}

.sum-row span {
  flex: none;
}

.sum-row span {
  color: var(--muted);
}

.sum-row.name b {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62%;
}

.sum-row.neg b {
  color: var(--bad);
}

.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--border-2);
}

.sum-total > div {
  display: grid;
  justify-items: end;
}

.sum-total b {
  font-size: 22px;
}

.sum-total small {
  color: var(--muted);
}

.hold {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}

.hold[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.hold-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: rgba(255, 255, 255, 0.22);
}

.co-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.co-note svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
}

.sheet-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.sheet-price {
  margin-bottom: 10px;
}

.checkout.compact .co-head {
  display: none;
}

/* ------------------------------------------------------------ orders */
.orders {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.order {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card-sm);
  grid-template-columns: minmax(0, 1fr);
}

.order-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-top b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-top small {
  color: var(--muted);
  font-size: 12.5px;
}

.order-top h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.order-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.status-line {
  margin-top: -6px;
  color: var(--muted);
  font-size: 12.5px;
}

.order-top .chip {
  flex: none;
}

.progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.progress span {
  height: 5px;
  border-radius: 99px;
  background: var(--border-2);
}

.progress span.on {
  background: var(--brand);
}

.progress.refunded span.on {
  background: var(--bad);
}

.progress.closed span.on {
  background: var(--faint);
}

.meter {
  height: 7px;
  border-radius: 99px;
  background: var(--border-2);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.order-detail {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.delivery {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}

.delivery-hidden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
  border-radius: 16px;
  border: 1px dashed var(--border-2);
  color: var(--muted);
  cursor: pointer;
  background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 8px, var(--panel-2) 8px, var(--panel-2) 16px);
}

.delivery-hidden svg {
  width: 20px;
  height: 20px;
}

.delivery-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background: var(--panel-2);
}

.delivery-line code {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.warranty-box {
  display: grid;
  justify-items: center;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.ring {
  position: relative;
  width: 84px;
  height: 84px;
}

.ring > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
}

.ring b {
  font-size: 20px;
}

.ring small {
  font-size: 10.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------ wallet */
.wallet-page {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ledger-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.l-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: none;
}

.l-ico svg {
  width: 18px;
  height: 18px;
}

.l-ico.in {
  color: var(--ok);
  background: rgba(52, 211, 153, 0.12);
}

.l-ico.out {
  color: var(--bad);
  background: rgba(248, 113, 113, 0.12);
}

.pos {
  color: var(--ok);
}

.neg {
  color: var(--bad);
}

/* ---------------------------------------------------- sign in, account */
.login-wrap {
  display: grid;
  gap: 16px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
}

.login-card {
  display: grid;
  gap: 10px;
  padding: 26px 20px;
  text-align: center;
  grid-template-columns: minmax(0, 1fr);
}

.login-card h1 {
  margin: 0;
  font-size: 26px;
}

.login-card > p {
  margin: 0 0 6px;
}

.login-logo {
  justify-self: center;
  border-radius: 20px;
  box-shadow: var(--glow);
}

.tg-flow {
  display: grid;
  gap: 10px;
  text-align: left;
  grid-template-columns: minmax(0, 1fr);
}

.qr-box {
  display: grid;
  gap: 14px;
  justify-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.qr-frame {
  padding: 10px;
  border-radius: 18px;
  background: #fff;
}

.qr-img {
  width: 168px;
  height: 168px;
}

.qr-side {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.login-code {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.login-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.live-dot {
  animation: m8-float 1.6s var(--ease) infinite;
}

.or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 12.5px;
  margin: 4px 0;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.perk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-card-sm);
  font-size: 13.5px;
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.account-head h1 {
  margin: 0 0 6px;
  font-size: 22px;
}

.avatar.big {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  font-size: 24px;
}

.acc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.acc-row:last-child {
  border-bottom: 0;
}

.acc-row b {
  display: block;
}

.acc-row small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}

.lang-choice {
  min-height: 48px;
}

.lang-choice .code {
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  background: var(--panel-2);
  color: var(--muted);
}

.lang-choice b {
  flex: 1;
  text-align: left;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.shortcut {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.shortcut svg {
  width: 22px;
  height: 22px;
  color: var(--violet);
}

.signout {
  margin-top: 14px;
  color: var(--bad);
}

.soon-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
  grid-template-columns: minmax(0, 1fr);
}

.soon-card h1 {
  margin: 0;
  font-size: 26px;
}

.soon-card p {
  max-width: 460px;
  margin: 0 0 6px;
}

.soon-art {
  margin-bottom: 6px;
}

.soon-art .app-icon {
  animation: m8-float 5s var(--ease) infinite;
}

/* ------------------------------------------------------- closed page */
body.closed {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
}

.closed-box {
  max-width: 440px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.closed-box h1 {
  margin: 6px 0 0;
  font-size: 22px;
}

.closed-box p {
  margin: 0;
}

/* -------------------------------------------------------- responsive */
@media (min-width: 560px) {
  .grid-products,
  .grid-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pulse-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rail {
    grid-auto-columns: minmax(200px, 31%);
  }

  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wr-spark {
    display: block;
  }

  .qr-box {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .qr-side {
    justify-items: start;
    text-align: left;
  }

  .lang-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .home-top {
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: stretch;
  }

  .hero,
  .hero-slide {
    min-height: 320px;
  }

  .hero-slide {
    padding: 34px 34px 50px;
  }

  .hero-art {
    right: 26px;
    opacity: 0.35;
  }

  .hero-dots {
    left: 34px;
  }

  .grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-brands {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rail-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .rail {
    grid-auto-columns: minmax(210px, 23%);
  }

  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .filter-chips {
    grid-column: 1 / -1;
  }

  .product-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }

  .product-side {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + 28px);
  }

  .pay-bar {
    display: none;
  }

  .product-hero {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    padding: 26px;
  }

  .ph-chips {
    justify-content: flex-start;
  }

  .ph-price {
    justify-items: start;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .wallet-page {
    grid-template-columns: 380px minmax(0, 1fr);
    align-items: start;
  }

  .login-wrap {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }

  .login-perks {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .hero-copy {
    max-width: min(470px, calc(100% - 200px));
  }

  .hero-art {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@media (min-width: 1180px) {
  .grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-brands {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .rail-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ WEB2 checkout and top-up */
.hold.on .hold-fill {
  inset: 0;
  transition: inset 0.9s linear;
}

.hold .hold-hint {
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.85;
}

.hold {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.warnbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(251, 191, 36, 0.12);
  color: var(--warn);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.warnbox svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.warnbox p {
  margin: 0;
}

.warnbox p + p {
  margin-top: 6px;
}

.warnbox b {
  display: block;
  margin-bottom: 2px;
}

.opt-tag {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.amt-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.amt-chips button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 58px;
  padding: 10px 4px;
  border-radius: 13px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  line-height: 1.15;
}

.amt-chips button b {
  font-size: 15px;
  white-space: nowrap;
}

.amt-chips button small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.amt-chips button[aria-pressed="true"] {
  border-color: var(--pink);
  background: var(--brand-soft);
}

.amt-chips button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.conv {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--panel);
}

.conv > div {
  flex: 1;
  min-width: 0;
}

.conv small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.conv b {
  font-size: 18px;
}

.rate-line {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.topup-form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.pay-two {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

.pay-main,
.wait-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.open-requests {
  display: grid;
  gap: 8px;
}

.open-request {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
}

.open-request small {
  display: block;
  color: var(--muted);
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 18px;
  text-align: center;
}

.result h1 {
  margin: 4px 0 0;
  font-size: 22px;
}

.result > p {
  margin: 0;
  max-width: 480px;
  color: var(--muted);
}

.res-badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #7c4dff, #38e1ff);
}

.res-badge svg {
  width: 38px;
  height: 38px;
}

.res-badge.ok {
  background: linear-gradient(135deg, #10b981, #38e1ff);
}

.res-badge.warm {
  background: linear-gradient(135deg, #ff9a5a, #ff4fa3);
}

.res-badge.bad {
  background: linear-gradient(135deg, #f87171, #ff4fa3);
}

.res-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  text-align: left;
}

.res-item small {
  display: block;
  color: var(--muted);
}

.steps3 {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.steps3 > div {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.steps3 span {
  width: 100%;
  height: 6px;
  border-radius: 9px;
  background: var(--border-2);
}

.steps3 .d span {
  background: var(--brand);
}

.steps3 .a span {
  background: linear-gradient(90deg, var(--pink) 50%, var(--border-2) 50%);
}

.cpy {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.cpy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  text-align: left;
}

.cpy-row small {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.cpy-row b {
  font-size: 15.5px;
  overflow-wrap: anywhere;
}

.pay-screen .warnbox,
.pay-screen .tx-form {
  width: 100%;
  max-width: 480px;
}

.tx-form {
  display: grid;
  gap: 8px;
  text-align: left;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
}

.input:focus {
  border-color: var(--violet);
}

.input.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

.cd-ring {
  position: relative;
  width: 120px;
  height: 120px;
  color: var(--violet);
}

.cd-ring[data-tone="amber"] {
  color: #ffb23f;
}

.cd-ring[data-tone="red"] {
  color: var(--bad);
}

.cd-ring .cd-arc {
  transition: stroke-dashoffset 1s linear, color 0.6s;
}

.cd-ring > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.15;
}

.cd-ring b {
  font-size: 24px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cd-ring[data-tone="red"] b {
  color: var(--bad);
}

.cd-ring small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.kpay {
  display: grid;
  gap: 12px;
}

.kpay-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kpay-head h1 {
  margin: 0;
  font-size: 22px;
}

.big {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.kpay .qr-frame,
.kpay .cpy {
  justify-self: center;
}

.upl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  border: 1.5px dashed var(--border-2);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.upl:hover {
  border-color: var(--violet);
  color: var(--text);
}

.cred {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

@media (max-width: 559px) {
  .amt-chips.usdt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .pay-two {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }

  .wait-card {
    position: sticky;
    top: 96px;
  }
}

/* ------------------------------------------- LSB1 sign-in code entry */
.code-form {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
}

.input.login-code-input {
  height: 56px;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- LSB1 privacy page */
body.privacy {
  min-height: 100vh;
  padding: 24px 16px 48px;
}

.privacy-box {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

.privacy-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.privacy-langs {
  display: flex;
  gap: 8px;
}

.privacy-langs .chip[aria-pressed="true"] {
  border-color: var(--violet);
}

.privacy-doc h1 {
  margin: 8px 0 4px;
  font-size: 24px;
}

.privacy-doc h2 {
  margin: 22px 0 6px;
  font-size: 17px;
}

.privacy-doc p,
.privacy-doc ul {
  margin: 6px 0;
}

.privacy-doc ul {
  padding-left: 20px;
}

.privacy-doc li + li {
  margin-top: 4px;
}

.privacy-doc a {
  color: inherit;
  text-decoration: underline;
}

/* WEB3 — MLBB Brazil diamonds (preview v2, phone-first). One column, sticky
   pay bar, 44 px tap targets, numeric inputs at 16 px (no iOS zoom), no
   horizontal scroll at 360 px; a desktop centres the same column. Shop
   tokens only; the tinted fills have a plain rgba fallback first. */
.ml {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  min-width: 0;
}
.ml .num {
  font-variant-numeric: tabular-nums;
}
.ml-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.ml-hero b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.25;
}
.ml-hero small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
}
.ml-gi {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #1b3a8a, #2f6bff 55%, #7fd1ff);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 26px -10px rgba(47, 107, 255, 0.7);
}
.ml-gi.sm {
  width: 42px;
  height: 42px;
  font-size: 11px;
}
.ml-tag {
  font-size: 11px;
  font-weight: 800;
  border-radius: 7px;
  padding: 1px 7px;
  background: var(--panel-2);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ml-tag.ok {
  background: rgba(52, 211, 153, 0.13);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
}
.ml-lab,
.ml-gl {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--faint);
}
.ml-gl {
  grid-column: 1 / -1;
  font-size: 11px;
  margin-top: 4px;
}
.ml-saved {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ml-chip {
  min-height: 44px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.ml-chip.on {
  border-color: var(--violet);
  color: var(--text);
}
.ml-f2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 104px);
  gap: 8px;
}
.ml-fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ml-fld span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.ml-inp {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ml-inp:focus {
  outline: 2px solid var(--violet);
  outline-offset: 1px;
}
.ml-btn {
  min-height: 44px;
  width: 100%;
}
.ml-who {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.13);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--text);
  font: inherit;
  min-width: 0;
}
button.ml-who {
  min-height: 44px;
  cursor: pointer;
}
.ml-who > div:not(.ml-av) {
  min-width: 0;
  flex: 1;
}
.ml-who b {
  display: block;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.ml-who small {
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
}
.ml-who.sm {
  padding: 7px 10px;
}
.ml-who.sm b {
  font-size: 13.5px;
}
.ml-av {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 18px;
}
.ml-who.sm .ml-av {
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.ml-chg {
  flex: none;
  color: var(--muted);
}
.ml-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.ml-pk {
  min-height: 64px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 7px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ml-pk b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.ml-pk i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--faint);
}
.ml-pk em {
  margin-top: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.ml-pk.ft i {
  color: var(--warn);
}
.ml-pk.on {
  border-color: transparent;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--brand) border-box;
}
.ml-pk.on em {
  color: var(--text);
}
.ml-sum {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-2);
  background: var(--panel-solid);
}
.ml-li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.ml-li span:first-child {
  color: var(--muted);
}
.ml-li .num {
  font-weight: 700;
  text-align: right;
}
/* DEPLOY1: the pack's live name may be long: it wraps on a phone. */
.ml-li .ml-nm {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ml-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(56, 225, 255, 0.28);
  background: rgba(56, 225, 255, 0.08);
  font-size: 13.5px;
  font-weight: 700;
}
.ml-q small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.ml-q .num {
  font-size: 15px;
  flex: none;
}
.ml-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
}
.ml-note.i {
  background: var(--panel);
  color: var(--muted);
}
.ml-note.w {
  background: rgba(251, 191, 36, 0.12);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}
.ml-note.k {
  background: rgba(52, 211, 153, 0.13);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
}
.ml-paybar {
  position: sticky;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  padding: 8px;
  margin: 0 -8px;
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.8);
}
.ml-pay {
  min-height: 52px;
  white-space: normal;
}
.ml-sb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.ml-sb b {
  font-size: 14px;
}
.ml-sb p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.ml-sb.b {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.13);
  background: color-mix(in srgb, var(--bad) 13%, transparent);
}
.ml-sb.b b {
  color: var(--bad);
}
.ml-sb.w {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.12);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.ml-sb.w b {
  color: var(--warn);
}
.ml-sb.k {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.13);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}
.ml-sb.k b {
  color: var(--ok);
}
.ml-oh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ml-oh b {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ml-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--ok);
}
.ml-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
  animation: ml-pulse 1.6s ease-in-out infinite;
}
@keyframes ml-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ml-live::before {
    animation: none;
  }
}
.ml-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ml-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 14px;
}
.ml-tl li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.ml-tl li:last-child::before {
  display: none;
}
.ml-tl .d {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--panel-2);
  color: var(--faint);
}
.ml-tl .done .d {
  background: var(--ok);
  color: #06281c;
}
.ml-tl .now .d {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(139, 92, 255, 0.25);
}
.ml-tl b {
  display: block;
  font-size: 14px;
}
.ml-tl small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ml-tl .ml-q {
  margin-top: 6px;
}
.ml-tl time {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}
.ml-big {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.13);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  text-align: center;
}
.ml-big b {
  font-size: 18px;
  font-weight: 800;
  color: var(--ok);
}
.ml-big span {
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ml-again {
  background: var(--ok);
  color: #06281c;
  font-weight: 800;
}

/* MINI1: inside the Telegram Mini App the page fills Telegram's own
   viewport height (set from its viewport_changed event). */
html.in-miniapp body {
  min-height: var(--tg-viewport-height, 100vh);
}

/* LAND1: the pre-login landing page (approved preview v2): one phone-first
   column on the Design 4 tokens and system fonts; no letter-spacing on
   Burmese. */
.ld {
  max-width: 620px;
  margin: 0 auto;
  padding: 10px var(--gutter, 16px) 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ld-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 8px 0 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}
.ld-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ld-logo img {
  border-radius: 11px;
  flex: none;
}
.ld-logo span {
  min-width: 0;
}
.ld-logo b {
  display: block;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
}
.ld-logo small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-hero {
  padding: 22px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld-ey {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ok);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
}
.ld-ey i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.ld-hero h1 {
  margin: 0;
  font-size: clamp(27px, 7.4vw, 40px);
  line-height: 1.14;
  font-weight: 800;
}
:lang(my) .ld-hero h1 {
  font-size: clamp(23px, 6.2vw, 34px);
  line-height: 1.5;
  letter-spacing: 0;
}
.ld-gr {
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ld-lead {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 15.5px;
}
.ld-price {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ld-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ld-stats div {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ld-stats b {
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
}
.ld-stats span,
.ld-live {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.ld-live {
  margin: -4px 0 0;
  color: var(--faint);
}
.ld-signin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ld-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}
.ld-hint b {
  color: var(--text);
}
.ld-s {
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ld-s h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}
.ld-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 12px;
  border-radius: 20px;
}
.ld-br {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  min-width: 0;
}
.ld-br i {
  width: 46px;
  height: 46px;
  border-radius: 28%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-style: normal;
  font-weight: 700;
  color: #fff;
}
.ld-br i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld-letters {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.ld-br small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-br.more i {
  background: var(--brand-soft);
  border: 1px dashed var(--border-2);
  color: var(--text);
  font-size: 13px;
}
.ld-prom {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-radius: 20px;
}
.ld-prom li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14.5px;
}
.ld-prom li + li {
  border-top: 1px solid var(--border);
}
.ld-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  flex: none;
}
.ld-foot {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.ld-foot a {
  color: var(--muted);
  font-weight: 700;
}
/* phone tap targets: at least 44 px tall */
.ld-foot div a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
}
.ld-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  text-decoration: none;
  color: var(--text) !important;
  font-weight: 800;
}
.ld-fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.ld-fl button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--muted);
}
.ld-fl button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--brand-soft);
}
.ld-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(transparent, var(--bg) 40%);
  transform: translateY(110%);
  transition: transform 0.25s;
}
.ld-dock.show {
  transform: none;
}
.ld-dock .btn {
  max-width: 620px;
  margin: 0 auto;
}
.ld-state {
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld-choose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .ld-choose {
    grid-template-columns: 1fr 1fr;
  }
}
.ld-door {
  text-align: left;
  border-radius: 24px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 170px;
  border: 1px solid var(--border-2);
  text-decoration: none;
  color: var(--text);
  background: var(--panel-2);
}
.ld-door.ds {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}
.ld-door b {
  font-size: 22px;
  font-weight: 800;
}
.ld-door p {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
}
.ld-di {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-2);
}
.ld-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .ld-dock {
    transition: none;
  }
}

/* TOP1: a typed KPay amount, and Cancel before "I have paid". */
.amt-entry {
  display: grid;
  gap: 6px;
}

.input.amt-input {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.amt-hint {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.amt-hint.bad {
  color: var(--bad);
}

.topup-dyn {
  display: grid;
  gap: 10px;
}

.kpay-cancel {
  display: grid;
}

.kpay-confirm {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.kpay-confirm p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bad);
}

.kpay-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-danger {
  background: var(--bad);
  color: #fff;
}

/* ------------------------------------------- WAR1C warranty request */
.claim-box {
  display: grid;
  gap: 8px;
  width: 100%;
}

.claim-state {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.claim-state small,
.claim-note-text {
  color: var(--muted);
}

.claim-sheet {
  display: grid;
  gap: 10px;
}

textarea.input {
  height: auto;
  min-height: 84px;
  padding: 10px 14px;
  font-weight: 400;
  resize: vertical;
}

.claim-count {
  justify-self: end;
}

/* GMAIL1: the bell inbox's unread items */
.order.unread {
  border-color: var(--pink);
}

.order .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
}