.header-cart-btn {
  position: relative;
  background: var(--card2,rgba(255,255,255,.08));
  border: 1px solid var(--border2,rgba(255,255,255,.12));
  cursor: pointer;
  color: var(--text);
  font-size: 17px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, box-shadow .32s;
  flex-shrink: 0;
}
.header-cart-btn:hover {
  background: var(--accent-grad);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.04);
}
.header-cart-btn .cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: var(--danger,#ef4444);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--bg);
  pointer-events: none;
}
:root {
  --bg:#08080a;
  --bg2:#0d0d10;
  --page-bg:#08080a;
  --card:#141417;
  --card2:#1a1a1f;
  --card3:#212127;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.09);
  --border3:rgba(255,255,255,0.14);
  --text:#eceef2;
  --text2:rgba(236,238,242,0.64);
  --text3:rgba(236,238,242,0.52);
  --text-muted:rgba(236,238,242,0.52);
  --input-bg:#1a1a1f;
  --accent:#22d36b;
  --accent2:#12c25c;
  --accent3:rgba(34, 211, 107,0.10);
  --accent-glow:rgba(34, 211, 107,0.22);
  --green:#22d36b;
  --green2:#7af7ae;
  --green-glow:rgba(34, 211, 107,0.22);
  --gold:#fbbf24;
  --gold2:#f59e0b;
  --danger:#f43f5e;
  --pink:#f43f5e;
  --cyan:#22d3ee;
  --success:#22d36b;
  --warning:#f59e0b;
  --radius:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-full:999px;
  --shadow:0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.6);
  --shadow-card:0 1px 2px rgba(0,0,0,0.4);
  --f:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-display:"Outfit",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Courier New",monospace;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --spring:cubic-bezier(0.34, 1.20, 0.64, 1);
  --header-bg:rgba(8,8,10,0.92);
  --header-border:rgba(255,255,255,0.08);
}
[data-theme=light] {
  --bg:#f7f8fa;
  --bg2:#eef0f3;
  --page-bg:#f7f8fa;
  --card:#ffffff;
  --card2:#f5f6f8;
  --card3:#ececf0;
  --border:rgba(15,23,20,0.08);
  --border2:rgba(15,23,20,0.12);
  --border3:rgba(15,23,20,0.18);
  --text:#0d1f17;
  --text2:rgba(13,31,23,0.60);
  --text3:rgba(13,31,23,0.38);
  --text-muted:rgba(13,31,23,0.38);
  --input-bg:#ffffff;
  --accent:#1fcf66;
  --accent2:#14b956;
  --accent3:rgba(31, 207, 102,0.10);
  --accent-glow:rgba(31, 207, 102,0.20);
  --green:#1fcf66;
  --green2:#22d36b;
  --green-glow:rgba(31, 207, 102,0.18);
  --shadow:0 2px 8px rgba(15,23,20,0.06),0 1px 2px rgba(15,23,20,0.04);
  --shadow-lg:0 8px 32px rgba(15,23,20,0.10),0 2px 8px rgba(15,23,20,0.06);
  --shadow-card:0 2px 12px rgba(15,23,20,0.07),0 1px 3px rgba(15,23,20,0.04);
  --header-bg:rgba(247,248,250,0.88);
  --header-border:rgba(15,23,20,0.08);
}
*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  background-color: var(--page-bg) !important;
  color: var(--text);
  min-height: 100dvh;
}
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 160% 160% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, .2) 100%);
}
html[data-theme=light]::after {
  background-image: none;
}
html[data-theme=amoled]::after {
  background-image: none;
}
body {
  font-family: var(--f);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  max-width: 100vw;
  width: 100%;
  min-height: 100dvh;
  background: 0 0 !important;
}
[data-theme=light] body {
  background: 0 0 !important;
}
@media (max-width: 860px) {
  body {
    background: 0 0 !important;
  }
  body::before {
    display: none !important;
  }
}
::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body,
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
* {
  -ms-overflow-style: none;
}
.header-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  padding: 10px 16px;
  pointer-events: none;
}
header {
  background: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-full);
  padding: 0 14px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 0 var(--border);
  pointer-events: all;
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
  flex-wrap: nowrap;
  min-width: 0;
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 211, 107, .5),
      transparent);
  border-radius: 999px;
}
.logo-area {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.logo-area img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  flex-shrink: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border2);
}
.header-nav-link {
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  background: 0 0;
  border: none;
  cursor: pointer;
  font-family: var(--f);
  transition:
    transform,
    box-shadow,
    opacity;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
}
.header-nav-link:hover {
  color: var(--text);
  background: var(--accent3);
}
.header-nav-link.active {
  color: var(--accent);
  background: var(--accent3);
  font-weight: 800;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: visible;
  min-width: 0;
}
.balance-header-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--accent3);
  border: 1.5px solid var(--accent-glow);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  white-space: nowrap;
  flex-shrink: 0;
}
.balance-header-btn:hover {
  background: var(--accent-grad);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.04);
}
.balance-header-btn .balance-icon {
  width: 18px;
  height: 18px;
  background: var(--accent-grad);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.user-name-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--border2);
  padding: 4px 11px 4px 4px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.user-name-pill:hover {
  border-color: var(--accent);
}
.user-name-pill img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.user-name-pill .uname {
  color: var(--text);
}
.history-pill-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border2);
  background: var(--card);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition:
    transform,
    box-shadow,
    opacity;
  position: relative;
  flex-shrink: 0;
}
.history-pill-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--header-bg);
  pointer-events: none;
}
.cart-badge.show {
  display: flex;
}
.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border2);
  background: var(--card);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition:
    transform,
    box-shadow,
    opacity;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent3);
  transform: rotate(20deg);
}
.auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  box-shadow: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .2px;
}
.auth-btn:hover {
  box-shadow: none;
  transform: translateY(-2px) scale(1.04);
}
.auth-btn:active {
  transform: translateY(0);
}
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px) scale(.97);
  transition: opacity .3s, transform .3s var(--spring);
}
.user-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: none;
}
.user-dropdown-top {
  padding: 12px 14px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  text-align: center;
}
.user-dropdown-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px;
  display: block;
  border: 2px solid var(--accent);
}
.user-dropdown-avatar-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(107, 114, 128, .1);
  color: var(--accent);
  font-size: 22px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border2);
}
.user-dropdown-top strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.user-dropdown-top .user-id {
  font-size: 12px;
  color: var(--text3);
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  background: 0 0;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--f);
  font-weight: 600;
}
.dropdown-item:hover {
  background: rgba(107, 114, 128, .06);
}
.dropdown-item.danger {
  color: var(--danger);
}
.dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--text3);
  font-size: 12px;
}
.dropdown-item.danger i {
  color: var(--danger);
}
.platform-card-price {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(11, 110, 255, .1);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(11, 110, 255, .2);
  white-space: nowrap;
}
.platform-card-info {
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, .25);
  border-top: 1px solid rgba(255, 255, 255, .05);
  gap: 6px;
}
.platform-card-info h3 {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 84px 20px 24px;
  overflow-x: clip;
}
.section-header {
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.6px;
  margin-bottom: 4px;
}
.section-sub {
  font-size: 13.5px;
  color: var(--text2);
  font-weight: 500;
}
.platform-screen {
  animation: fadeUp .38s var(--ease) both;
}
.platforms-section {
  padding: 24px 0 10px;
}
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.platform-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .28s var(--spring), box-shadow .25s;
  position: relative;
  animation: fadeUpIn .55s var(--spring) both;
  contain: content;
}
.platform-card:first-child {
  animation-delay: 50ms;
}
.platform-card:nth-child(2) {
  animation-delay: 80ms;
}
.platform-card:nth-child(3) {
  animation-delay: .11s;
}
.platform-card:nth-child(4) {
  animation-delay: .14s;
}
.platform-card:nth-child(5) {
  animation-delay: .17s;
}
.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(34, 211, 107, .15), 0 0 0 1px rgba(34, 211, 107, .25);
  border-color: rgba(34, 211, 107, .4);
}
.platform-card:active {
  transform: scale(.97);
}
.platform-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: var(--card2);
  padding: 14px;
  transition: transform .45s var(--spring);
}
.platform-card:hover .platform-card-img {
  transform: scale(1.08);
}
.platform-card-info {
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, .22);
  border-top: 1px solid var(--border);
}
.platform-card-info h3 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
.platform-card-logo {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg2);
  border: 1px solid var(--border2);
}
.platform-card-go {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  opacity: 0;
  transform: scale(.7) translateY(-4px);
  transition:
    transform,
    box-shadow,
    opacity;
  box-shadow: none;
  font-weight: 900;
}
.platform-card:hover .platform-card-go {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.platform-card-more {
  background: var(--card);
  border: 1.5px dashed rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
  text-align: center;
  transition:
    transform,
    box-shadow,
    opacity;
  min-height: 170px;
}
.platform-card-more:hover {
  border-color: rgba(34, 211, 107, .4);
  background: rgba(11, 110, 255, .04);
}
.platform-card-more-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(11, 110, 255, .08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.platform-card-more p {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.platform-card-more span {
  font-size: 11.5px;
  color: var(--text2);
}
.trust-section {
  padding: 20px 0 10px;
}
.trust-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: -.5px;
  position: relative;
}
.trust-title span {
  color: var(--accent);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.trust-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  transition: transform .38s var(--spring), box-shadow .38s;
  position: relative;
  overflow: hidden;
}
.trust-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      transparent);
  opacity: 0;
  transition: opacity .32s;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(34, 211, 107, .12);
  border-color: rgba(34, 211, 107, .35);
}
.trust-card:hover::before {
  opacity: 1;
}
.trust-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-glow);
}
.trust-card-icon.shield {
  background: var(--accent3);
  color: var(--accent);
}
.trust-card h4 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 7px;
}
.trust-card p {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
}
.catalog-screen {
  animation: fadeUp .38s var(--ease) both;
}
.roblox-platform-banner {
  position: relative;
  width: calc(100% + 40px);
  margin: -20px -20px 0;
  height: 200px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  margin-bottom: 0;
}
.roblox-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.roblox-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      transparent 40%,
      var(--page-bg) 100%);
  pointer-events: none;
}
@media (max-width: 600px) {
  .roblox-platform-banner {
    height: 160px;
  }
}
.catalog-header {
  padding: 20px 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--card);
  color: var(--text2);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  font-family: var(--f);
}
.back-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(107, 114, 128, .04);
}
.catalog-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.filter-btn {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  background: var(--card);
  color: var(--text2);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
}
.filter-btn:hover {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border3);
}
.filter-btn.active {
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}
.load-more-btn {
  padding: 11px 26px;
  border-radius: var(--radius-full);
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.load-more-btn:hover:not(:disabled) {
  background: var(--card2);
  border-color: var(--border3);
  transform: translateY(-1px);
}
.load-more-btn:disabled {
  background: var(--card2);
  color: var(--text-muted,#94a3b8);
  border-color: var(--border2);
  cursor: not-allowed;
  opacity: .65;
  transform: none;
  pointer-events: none;
}
.products {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.card {
  width: 160px;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .32s var(--spring), box-shadow .32s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  contain: layout style;
}
@media (max-width: 520px) {
  .card {
    width: calc((100% - 20px)/ 3);
  }
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: transparent;
}
.card:active {
  transform: scale(.97);
}
.card-oos {
  cursor: default;
  opacity: .62;
}
.card-oos:hover {
  transform: none;
}
.card-oos .card-img-wrap img {
  filter: grayscale(1);
}
.card-oos-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(15, 15, 15, .85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 8px;
  letter-spacing: .2px;
}
.card-oos .card-price-label {
  color: var(--text2,#8b8b8b);
}
.card-oos .buy-btn {
  background: var(--card3,#2a2a2a) !important;
  color: var(--text2,#8b8b8b) !important;
  cursor: not-allowed !important;
  opacity: .7;
}
.card-oos .buy-btn:hover {
  transform: none !important;
}
.platform-maintenance-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(245, 158, 11, .14),
      rgba(217, 119, 6, .08));
  border: 1.5px solid rgba(245, 158, 11, .35);
}
.platform-maintenance-banner .pmb-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--warning,#f59e0b);
  color: #1a1305;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.platform-maintenance-banner .pmb-text {
  flex: 1;
  min-width: 0;
}
.platform-maintenance-banner .pmb-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.platform-maintenance-banner .pmb-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
  line-height: 1.4;
}
.card-img-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--spring);
}
.card:hover .card-img-wrap img {
  transform: scale(1.07);
}
.card-body {
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 9px;
  flex: 1;
}
.card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
}
.card-price-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.card-price-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.card-price-block:has(.card-price-old) .card-price-label {
  color: #22d36b;
}
.card-price-val {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}
.card-price-cur {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-left: 2px;
}
.card-price-old {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-decoration: line-through;
  margin-bottom: 1px;
  opacity: .7;
}
.card-sale-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: .3px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .45);
  animation: salePop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes salePop {
  from {
    transform: scale(.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.card-price-label-sale {
  color: #22d36b !important;
}
.buy-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform .3s,
    box-shadow .3s,
    opacity .28s;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.buy-btn:hover {
  transform: scale(1.07);
  box-shadow: none;
  opacity: .92;
}
.buy-btn:active {
  transform: scale(.91);
}
.price {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}
.price-wrap {
  display: none !important;
}
.card h3 {
  display: none !important;
}
.platform-reviews-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border2);
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}
.platform-reviews-header {
  margin-bottom: 18px;
}
.platform-reviews-header h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}
.platform-reviews-header p {
  font-size: 13px;
  color: var(--text2);
}
.page-screen {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 20px;
  animation: fadeUp .38s var(--ease) both;
}
.page-screen.wide {
  max-width: 1100px;
}
.page-title-area {
  margin-bottom: 24px;
  text-align: center;
}
.page-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: 13.5px;
  color: var(--text2);
}
.reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-card {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .32s var(--spring), box-shadow .32s;
}
.review-card:hover {
  border-color: var(--accent);
  transform: translateX(3px);
  box-shadow: 0 6px 24px rgba(11, 110, 255, .08);
}
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-glow);
}
.review-avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  border: 1.5px solid var(--accent-glow);
}
.review-body {
  flex: 1;
  min-width: 0;
}
.review-header {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.review-name {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
}
.review-platform-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.review-date {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
}
.review-stars {
  color: var(--gold2);
  font-size: 13px;
  letter-spacing: 1px;
}
.review-product-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  background: var(--accent3);
  color: var(--accent);
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-glow);
}
.review-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  margin-top: 5px;
}
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-order-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
  overflow: hidden;
  transition: transform .32s var(--spring), box-shadow .32s;
}
.history-order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(34, 211, 107, .12);
  border-color: var(--accent-glow);
}
.history-order-main {
  flex: 1;
  min-width: 0;
}
.history-order-id {
  font-size: 12px;
  color: var(--text3);
  font-weight: 600;
  margin-bottom: 2px;
}
.history-order-num {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
}
.history-order-product {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 3px 0;
}
.history-order-status {
  font-size: 13.5px;
  font-weight: 800;
}
.history-order-status.status-approved {
  color: var(--green);
}
.history-order-status.status-pending {
  color: var(--gold2);
}
.history-order-status.status-processing {
  color: #3b82f6;
}
.history-order-status.status-rejected {
  color: var(--danger);
}
.history-order-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.history-order-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.history-review-btn {
  padding: 7px 14px;
  background: 0 0;
  border: 1.5px solid var(--accent-glow);
  color: var(--green);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  white-space: nowrap;
  font-family: var(--f);
}
.history-review-btn:hover {
  background: var(--accent3);
  border-color: var(--accent);
  transform: scale(1.05);
}
.history-review-btn-guest {
  opacity: .55;
  border-style: dashed;
  color: var(--text-muted) !important;
  border-color: var(--text-muted) !important;
}
.history-review-btn-guest:hover {
  opacity: .8;
  background: rgba(99, 102, 241, .08) !important;
  border-color: #6366f1 !important;
  transform: scale(1.03);
}
.history-review-btn-guest::after {
  content: " \1f512";
  font-size: 10px;
}
.history-reviewed-badge {
  font-size: 11px;
  font-weight: 800;
  color: #4d8eff;
  background: rgba(34, 211, 107, .1);
  border: 1.5px solid rgba(34, 211, 107, .25);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.history-detail-btn {
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  transition:
    transform,
    box-shadow,
    opacity;
  box-shadow: none;
}
.history-detail-btn:hover {
  box-shadow: none;
  transform: translateY(-2px) scale(1.04);
}
@keyframes orderStatusFlash {
  0% {
    background: rgba(22, 201, 122, .22);
    box-shadow: 0 0 0 2px rgba(22, 201, 122, .35);
  }
  100% {
    background: 0 0;
    box-shadow: 0 0 0 0 rgba(22, 201, 122, 0);
  }
}
.orders-page-card.status-flash-card {
  animation: orderStatusFlash 1.6s ease-out;
  border-radius: 18px;
}
.opc-status-badge.status-flash {
  animation: orderStatusFlash 1.6s ease-out;
  border-radius: 999px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  letter-spacing: .2px;
}
.status-pending {
  background: rgba(107, 114, 128, .1);
  color: var(--gold2);
}
.status-processing {
  background: rgba(59, 130, 246, .1);
  color: #3b82f6;
}
.status-approved {
  background: rgba(22, 163, 74, .1);
  color: var(--green);
}
.status-rejected {
  background: rgba(220, 38, 38, .1);
  color: var(--danger);
}
.profile-screen {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 24px;
}
.profile-header-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  position: relative;
  overflow: hidden;
}
.profile-header-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-grad);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  object-fit: cover;
}
.profile-info h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 2px;
}
.profile-info p {
  color: var(--text2);
  font-size: 12.5px;
}
.profile-badge {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(107, 114, 128, .08);
  color: var(--accent);
  border: 1px solid rgba(107, 114, 128, .15);
}
.profile-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 36px 24px 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card,0 1px 3px rgba(0,0,0,.08));
}
.profile-hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    linear-gradient(
      135deg,
      var(--accent,#6b7280),
      #374151);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 14px;
}
.profile-hero-name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.profile-hero-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
}
.profile-username-link {
  margin-top: 16px;
  background: 0 0;
  border: 1.5px solid var(--border2);
  color: var(--text2);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
}
.profile-username-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--f);
  transition: transform .18s var(--spring, ease);
}
.profile-menu-item:hover {
  border-color: var(--border3,var(--accent));
  transform: translateY(-1px);
}
.profile-menu-item:active {
  transform: scale(.99);
}
.profile-menu-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--card2);
  color: var(--text2);
}
.profile-menu-icon-balance {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(34, 211, 107, .28);
}
.profile-menu-icon-orders {
  background: rgba(139, 92, 246, .14);
  color: #8b5cf6;
}
.profile-menu-icon-tg {
  background: rgba(42, 171, 238, .14);
  color: #2aabee;
}
.profile-menu-icon-warn {
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}
.profile-menu-icon-danger {
  background: rgba(244, 63, 94, .14);
  color: var(--danger);
}
.profile-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.profile-menu-text strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.profile-menu-text span {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}
.profile-menu-chevron {
  font-size: 13px;
  color: var(--text3);
  flex-shrink: 0;
}
.profile-menu-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(34, 211, 107, .15);
  color: var(--accent);
}
.profile-menu-item-danger {
  color: var(--danger);
}
.profile-menu-item-danger .profile-menu-text strong {
  color: var(--danger);
}
.profile-menu-item-danger:hover {
  border-color: var(--danger);
  background: rgba(244, 63, 94, .06);
}
@media (max-width: 600px) {
  .profile-hero-card {
    padding: 30px 18px 22px;
  }
  .profile-hero-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
  .profile-menu-item {
    padding: 14px 16px;
  }
}
.wallet-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.wallet-balance-card {
  background:
    radial-gradient(
      120% 150% at 10% -20%,
      rgba(255, 255, 255, .3) 0,
      transparent 48%),
    linear-gradient(
      135deg,
      #7af7ae 0,
      #22d36b 45%,
      #12c25c 100%) !important;
  border-radius: 20px !important;
  padding: 26px 24px;
  color: #fff !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px -6px rgba(31, 207, 102, .45) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
.wallet-balance-card::after,
.wallet-balance-card::before {
  content: none !important;
}
.wallet-balance-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
  font-size: 18px;
  color: #fff !important;
}
.wallet-balance-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  opacity: .88;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  color: #fff !important;
  text-transform: uppercase;
}
.wallet-balance-amount {
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 18px !important;
  position: relative;
  z-index: 1;
  color: #fff !important;
}
.wallet-balance-amount span {
  font-size: 19px !important;
  font-weight: 700 !important;
  opacity: .85;
  margin-left: 3px;
}
.wallet-topup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff !important;
  border: none;
  color: #0f9d48 !important;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.wallet-topup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.wallet-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
  white-space: nowrap;
  flex-shrink: 0;
}
.wallet-more-btn:hover {
  background: rgba(255, 255, 255, .26) !important;
}
.wallet-balance-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.wallet-topup-modal {
  max-height: 88vh;
  overflow-y: auto;
}
.wallet-topup-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border2);
}
.wallet-topup-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -4px rgba(31, 207, 102, .5);
}
.wallet-topup-header-text h3 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.wallet-topup-header-text p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text2);
}
.wallet-topup-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card2);
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}
.wallet-topup-balance-row strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.wallet-topup-section-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 9px;
}
.wallet-topup-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.wallet-amount-pill {
  padding: 13px 4px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--card2);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  font-family: var(--f);
  text-align: center;
}
.wallet-amount-pill span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}
.wallet-amount-pill:hover {
  border-color: var(--accent);
}
.wallet-amount-pill.selected {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(31, 207, 102, .3);
}
.wallet-amount-pill.selected span {
  color: rgba(255, 255, 255, .75) !important;
}
.wallet-amount-custom-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--border3);
  background: 0 0;
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
  transition:
    transform,
    box-shadow,
    opacity;
}
.wallet-amount-custom-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}
.wallet-amount-custom-toggle.active {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent3);
}
.wallet-amount-input-wrap {
  position: relative;
  margin-bottom: 14px;
}
.wallet-amount-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 46px 15px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--accent);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  font-family: var(--f);
}
.wallet-amount-input-wrap input::placeholder {
  font-weight: 600;
  color: var(--text-muted);
}
.wallet-amount-input-wrap input:focus {
  outline: 0;
  border-color: var(--accent);
}
.wallet-amount-input-wrap span {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}
.wallet-topup-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--accent3);
  border: 1px solid var(--accent-glow);
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 600;
}
.wallet-topup-preview strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent);
}
.wallet-method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--card2);
  border: 1.5px solid var(--accent-glow);
  margin-bottom: 6px;
}
.wallet-method-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.wallet-method-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.wallet-method-row-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.wallet-method-row-text span {
  font-size: 12px;
  color: var(--text2);
}
.wallet-method-row-check {
  color: var(--accent);
  font-size: 17px;
  flex-shrink: 0;
}
.wallet-topup-error {
  color: #f87171;
  font-size: 12.5px;
  min-height: 16px;
  margin-top: 8px;
  font-weight: 600;
}
.wallet-topup-disclaimer {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin: 14px 0 16px;
}
.wallet-topup-footer {
  display: flex;
  gap: 10px;
}
.wallet-topup-cancel-btn {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-radius: 13px;
  border: none;
  background: var(--card2);
  color: var(--text2);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
}
.wallet-topup-cancel-btn:hover {
  background: var(--card3);
}
.wallet-topup-cta {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-grad) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 13px;
  cursor: pointer;
  font-family: var(--f);
  box-shadow: 0 8px 22px -6px rgba(31, 207, 102, .55);
  transition: transform .16s, opacity .16s;
}
.wallet-topup-cta:hover:not(:disabled) {
  transform: translateY(-1px);
}
.wallet-topup-cta:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.modal-content.wallet-topup-modal-v2 {
  max-width: 340px;
  text-align: center;
  padding: 32px 26px 26px;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.wtu-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 14px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(31, 207, 102, .55);
}
.wtu-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}
.wtu-balance {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 22px;
}
.wtu-balance strong {
  color: var(--text);
  font-weight: 800;
}
.wtu-input-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 8px;
}
.wtu-input-wrap:focus-within {
  border-color: var(--accent);
}
.wtu-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: 0 0;
  outline: 0;
  font-size: 25px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  font-family: var(--f);
}
.wtu-input-wrap input::placeholder {
  color: var(--text3);
  font-weight: 700;
}
.wtu-suffix {
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
}
.wtu-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.show .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-content {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  position: relative;
  transform: scale(.92) translateY(22px);
  opacity: 0;
  transition: transform .45s var(--spring), opacity .38s;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 0 1px var(--border2);
  max-height: 92dvh;
  overflow-y: auto;
  pointer-events: all;
}
.modal-content::-webkit-scrollbar {
  width: 0;
}
.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform,
    box-shadow,
    opacity;
  z-index: 10;
}
.close-btn:hover {
  background: var(--card3);
  color: var(--text);
  border-color: var(--accent);
  transform: rotate(90deg);
}
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  transition:
    transform,
    box-shadow,
    opacity;
}
.step-dot.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px var(--accent-glow);
  transform: scale(1.12);
}
.step-dot.done {
  background: var(--green);
  border-color: transparent;
  color: #fff;
}
.step-dot.done::after {
  content: "\2713";
  font-size: 11px;
}
.step-line {
  height: 1.5px;
  width: 48px;
  background: var(--border2);
  flex-shrink: 0;
}
.step-line.done {
  background: var(--green);
}
.step {
  animation: fadeUp .38s var(--ease) both;
}
.step.hidden {
  display: none;
}
.modal-header {
  text-align: center;
  margin-bottom: 20px;
}
.modal-header h2 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
}
.step-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text2);
  margin-bottom: 7px;
  letter-spacing: .1px;
}
.form-group label i {
  color: var(--accent);
  font-size: 11px;
}
.form-group input[type=email],
.form-group input[type=number],
.form-group input[type=password],
.form-group input[type=tel],
.form-group input[type=text] {
  width: 100%;
  padding: 12px 15px;
  border-radius: 13px;
  border: 1.5px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 14.5px;
  font-weight: 600;
  outline: 0;
  transition: box-shadow .32s, transform .3s;
}
.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  transform: scaleX(1.008);
}
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
}
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.input-field {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 14.5px;
  font-weight: 600;
  outline: 0;
  transition: box-shadow .3s;
}
.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, .1);
}
.delivery-info {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(22, 163, 74, .07);
  border: 1px solid rgba(22, 163, 74, .18);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 16px;
}
.amount-display {
  text-align: center;
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--gold2);
  margin-bottom: 8px;
}
.hint-text {
  font-size: 13px;
  color: var(--text3);
  text-align: center;
  font-weight: 500;
  margin-bottom: 14px;
}
.hint-text.small {
  font-size: 11px;
  margin-top: -8px;
}
.qr-wrapper {
  position: relative;
  width: 160px;
  margin: 0 auto 14px;
  cursor: pointer;
  transition: transform .38s, filter .38s;
}
.qr-wrapper:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 16px rgba(107, 114, 128, .25));
}
.qr {
  width: 100%;
  border-radius: 14px;
  display: block;
  border: 1.5px solid var(--border2);
}
.qr-hint {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}
.file-upload {
  border: 1.5px dashed var(--border3);
  border-radius: 12px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  position: relative;
  overflow: hidden;
  background: var(--card2);
}
.file-upload:hover {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .03);
}
.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text3);
  font-weight: 600;
  padding: 18px;
  text-align: center;
}
.upload-content i {
  font-size: 24px;
  color: var(--accent);
}
.file-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  position: absolute;
  inset: 0;
}
.file-preview.hidden {
  display: none;
}
.primary-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent-grad);
  color: #0a0a0f;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform,
    box-shadow,
    opacity;
  letter-spacing: .3px;
  position: relative;
  overflow: hidden;
}
.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: none;
}
.primary-btn:active {
  transform: translateY(0);
}
.primary-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.success-btn {
  background: var(--green) !important;
}
.success-btn:hover {
  background: #12c25c !important;
}
.price-tag {
  font-size: 21px;
  font-weight: 800;
  color: var(--gold2);
}
.payment-method-section {
  margin-top: 14px;
}
.payment-method-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pay-method-option {
  cursor: pointer;
  display: block;
}
.pay-method-option input[type=radio] {
  display: none;
}
.pay-method-content {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--card);
  transition:
    transform,
    box-shadow,
    opacity;
  cursor: pointer;
}
.pay-method-option input:checked + .pay-method-content {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .05);
  box-shadow: 0 0 0 2px rgba(107, 114, 128, .1);
}
.pay-method-option input:checked + .pay-method-content .pay-method-title {
  color: var(--accent);
  font-weight: 800;
}
.pay-method-content:hover {
  border-color: var(--border3);
  background: var(--card2);
}
.pay-method-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.pay-method-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.pay-method-sub {
  font-size: 10.5px;
  color: var(--text2);
  margin-top: 1px;
}
.balance-warning {
  margin-top: 9px;
  padding: 9px 11px;
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .22);
  border-radius: 9px;
  font-size: 12px;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 7px;
}
.balance-warning.hidden {
  display: none;
}
.topup-inline-btn {
  background: 0 0;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.old-price {
  font-size: 12.5px;
  color: var(--text3);
  text-decoration: line-through;
  margin-right: 5px;
}
.modal-price-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
}
.balance-pay-btn {
  width: 100%;
  padding: 11px;
  background: rgba(107, 114, 128, .07);
  border: 1px solid rgba(229, 229, 231, .15);
  color: var(--accent);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    transform,
    box-shadow,
    opacity;
}
.balance-pay-btn:hover {
  background: rgba(229, 229, 231, .1);
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--border2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
}
.consent-label:hover {
  border-color: var(--border3);
  background: var(--card2);
}
.consent-label:has(input:checked) {
  border-color: rgba(229, 229, 231, .25);
  background: rgba(107, 114, 128, .04);
}
.consent-checkbox {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}
.consent-text {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.55;
  font-weight: 500;
}
#orderDetailModal .modal-content {
  max-width: 520px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.od-wrap {
  display: flex;
  flex-direction: column;
}
.od-title-bar {
  text-align: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.od-title-bar h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
}
.od-rows {
  display: flex;
  flex-direction: column;
}
.od-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border);
  gap: 11px;
}
.od-row:last-child {
  border-bottom: none;
}
.od-label {
  font-size: 13.5px;
  color: var(--text2);
  font-weight: 500;
  flex-shrink: 0;
}
.od-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.od-value.num {
  font-weight: 800;
  color: var(--accent);
  font-size: 14px;
}
.od-value.status-approved {
  color: var(--green);
}
.od-value.status-pending {
  color: var(--gold2);
}
.od-value.status-processing {
  color: #3b82f6;
}
.od-value.status-rejected {
  color: var(--danger);
}
.od-products-header {
  text-align: center;
  padding: 12px 22px 9px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent);
  border-top: 1px solid var(--border);
  background: var(--card2);
}
.od-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 14px 16px;
  padding: 12px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
}
.od-product-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.od-product-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.od-product-sub {
  font-size: 12.5px;
  color: var(--text2);
}
.od-product-sub strong {
  color: var(--text);
  font-weight: 700;
}
.qr-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}
.qr-fullscreen-content {
  text-align: center;
  animation: popIn .45s var(--spring);
}
.qr-fullscreen-content img {
  max-width: min(320px, 88vw);
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .7);
  border: 2px solid rgba(255, 255, 255, .15);
}
.qr-fullscreen-content p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .35);
  margin-top: 12px;
}
#receiptModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s;
}
#receiptModal.show {
  opacity: 1;
  pointer-events: all;
}
#receiptModal button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: none;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#receiptImg {
  max-width: 90vw;
  max-height: 90dvh;
  border-radius: 14px;
}
#toast-container {
  position: fixed;
  top: 16px;
  right: 14px;
  max-width: calc(100vw - 24px);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  isolation: isolate;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  max-width: 300px;
  background: var(--card);
  border: 1.5px solid transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
  animation: toastIn .45s var(--spring) both;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.toast.success {
  border-color: rgba(22, 163, 74, .4);
  color: var(--green);
  box-shadow: 0 3px 20px rgba(22, 163, 74, .18);
}
.toast.error {
  border-color: rgba(220, 38, 38, .4);
  color: var(--danger);
  box-shadow: 0 3px 20px rgba(220, 38, 38, .18);
}
.toast.info {
  border-color: rgba(234, 179, 8, .4);
  color: var(--accent);
  box-shadow: none;
}
.msg-sender {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
  opacity: .75;
  padding: 0 5px;
  letter-spacing: .1px;
}
.msg-sender-user {
  color: var(--accent);
}
#supportTextarea {
  flex: 1;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: 22px;
  padding: 12px 18px;
  color: var(--text);
  font-family: var(--f);
  font-size: 15.5px;
  font-weight: 500;
  resize: none;
  outline: 0;
  max-height: 100px;
  line-height: 1.48;
}
#supportTextarea:focus {
  border-color: var(--accent);
}
#supportTextarea::placeholder {
  color: var(--text3);
}
.msg-quote {
  border-left: 3px solid currentColor;
  padding: 5px 10px;
  margin-bottom: 7px;
  background: rgba(255, 255, 255, .12);
  border-radius: 7px;
  opacity: .95;
}
.msg-quote-label {
  font-size: 11.5px;
  font-weight: 700;
  opacity: .9;
  margin-bottom: 2px;
}
.msg-quote-text {
  font-size: 13px;
  font-weight: 500;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  line-height: 1.35;
}
.star-picker {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 14px 0;
}
.star-btn {
  background: 0 0;
  border: none;
  font-size: 30px;
  color: var(--border3);
  cursor: pointer;
  transition: transform .28s;
  padding: 0 2px;
}
.star-btn.active {
  color: var(--gold2);
}
.star-btn:hover {
  transform: scale(1.18);
  color: var(--gold2);
}
.platform-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.platform-review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.platform-review-card:hover {
  border-color: var(--accent);
}
.platform-review-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
.platform-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(107, 114, 128, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 15px;
}
.platform-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.platform-review-meta {
  flex: 1;
  min-width: 0;
}
.platform-review-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-review-date {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 1px;
}
.platform-review-stars {
  font-size: 15px;
  color: var(--gold2);
  letter-spacing: 1px;
}
.platform-review-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}
.level-progress-wrap {
  background: var(--card2);
  border-radius: 7px;
  overflow: hidden;
  height: 5px;
  margin: 9px 0 3px;
}
.level-progress-bar {
  height: 100%;
  background: var(--accent-grad);
  border-radius: 7px;
  transition: width .65s;
}
.level-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 12px;
}
.level-tier {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 7px;
  text-align: center;
}
.level-tier.current {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .07);
}
.level-tier-icon {
  font-size: 17px;
  margin-bottom: 3px;
}
.level-tier-name {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 2px;
}
.level-tier-req {
  font-size: 9.5px;
  color: var(--text3);
}
.level-tier-discount {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
}
.order-card {
  display: flex;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  animation: fadeUp .38s var(--ease) both;
}
.order-img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--card2);
  flex-shrink: 0;
}
.order-info {
  flex: 1;
  min-width: 0;
}
.order-info-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-info-platform {
  font-size: 11px;
  color: var(--text3);
  margin: 2px 0 5px;
}
.order-info-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.order-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold2);
}
.order-date {
  font-size: 10px;
  color: var(--text3);
}
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.order-status.sent {
  background: rgba(8, 145, 178, .09);
  color: var(--cyan);
}
.order-status.approved {
  background: rgba(22, 163, 74, .09);
  color: var(--green);
}
.order-status.rejected {
  background: rgba(220, 38, 38, .09);
  color: var(--danger);
}
.site-footer {
  padding: 0;
  border-top: 1px solid rgba(34, 211, 107, .15);
  text-align: center;
  background: 0 0;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 211, 107, .6),
      transparent);
}
.footer-inner {
  padding: 40px 20px 28px;
  background: 0 0;
}
.footer-brand {
  margin-bottom: 24px;
}
.footer-brand-name {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -.5px;
  display: block;
  margin-bottom: 6px;
}
.footer-brand-desc {
  font-size: 13px;
  color: var(--text2);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.6;
}
.footer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.footer-stat {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 12px 8px;
}
.footer-stat-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  display: block;
  line-height: 1;
}
.footer-stat-lbl {
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
  display: block;
}
.footer-content p {
  font-size: 12.5px;
  color: var(--text3);
  font-weight: 500;
  margin-bottom: 5px;
}
.footer-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 3s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 16px;
  background: #25d366;
  color: #fff;
  border-radius: 18px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  transition: transform .28s, box-shadow .28s;
}
.footer-whatsapp-btn:hover {
  transform: translateY(-1px);
}
.footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.footer-legal-btn {
  background: 0 0;
  border: none;
  color: var(--text3);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  text-decoration: none;
  display: inline-block;
}
.footer-legal-btn:hover {
  color: var(--accent);
  background: rgba(229, 229, 231, .06);
}
.footer-legal-sep {
  color: var(--border);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}
.footer-company {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.footer-company p {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0 0 4px;
}
.footer-company p:last-child {
  margin-bottom: 0;
}
.footer-company a {
  color: var(--text3);
  text-decoration: none;
  font-weight: 600;
}
.footer-company a:hover {
  color: var(--accent);
}
.footer-company i {
  color: var(--text-muted);
  margin-right: 3px;
}
[data-platform=so2]:hover {
  border-color: rgba(239, 68, 68, .45) !important;
}
[data-platform=telegram]:hover {
  border-color: rgba(8, 145, 178, .45) !important;
}
[data-platform=spotify]:hover {
  border-color: rgba(22, 163, 74, .45) !important;
}
.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  font-size: 22px;
  color: var(--text3);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 22px;
  text-align: center;
  gap: 11px;
}
.empty-state i {
  font-size: 38px;
  color: var(--text3);
}
.empty-state p {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text2);
}
.orders-empty-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(34, 211, 107, .18),
      rgba(34, 211, 107, .05));
  border: 1.5px solid rgba(34, 211, 107, .2);
  margin-bottom: 4px;
}
.orders-empty-icon-wrap i {
  font-size: 34px;
  color: var(--accent);
}
.orders-empty-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.orders-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.orders-empty-note {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 6px;
}
.google-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 26px 12px 16px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 999px;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .16s ease, box-shadow .2s ease;
}
.google-signin-btn:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, .24), 0 1px 3px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
  background: #fafafa;
}
.google-signin-btn:active {
  transform: scale(.97);
}
.google-signin-btn svg {
  flex-shrink: 0;
}
.hidden {
  display: none !important;
}
.flex-col-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flex-row-8 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.txt-xs-muted {
  font-size: 10.5px;
  color: var(--text3);
}
.txt-sm-muted {
  font-size: 11.5px;
  color: var(--text3);
}
.btn-approve {
  background: rgba(22, 163, 74, .1);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, .22);
}
.btn-approve:hover {
  background: rgba(22, 163, 74, .18);
}
.btn-reject {
  background: rgba(220, 38, 38, .1);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, .22);
}
.btn-reject:hover {
  background: rgba(220, 38, 38, .18);
}
.btn-blue {
  background: rgba(107, 114, 128, .09);
  color: var(--accent);
  border: 1px solid rgba(229, 229, 231, .12);
}
.btn-blue:hover {
  background: rgba(229, 229, 231, .12);
}
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes popIn {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#catalogScreen,
#chatsPageScreen,
#orderDetailScreen,
#ordersPageScreen,
#platformScreen,
#profileScreen,
#reviewsScreen,
#userProfileScreen,
#walletScreen {
  animation: pageSlideIn .3s cubic-bezier(.22, 1, .36, 1) both;
}
body.no-page-anim #catalogScreen,
body.no-page-anim #chatsPageScreen,
body.no-page-anim #orderDetailScreen,
body.no-page-anim #ordersPageScreen,
body.no-page-anim #platformScreen,
body.no-page-anim #profileScreen,
body.no-page-anim #reviewsScreen,
body.no-page-anim #userProfileScreen,
body.no-page-anim #walletScreen {
  animation: none !important;
}
#catalogScreen.hidden,
#chatsPageScreen.hidden,
#orderDetailScreen.hidden,
#ordersPageScreen.hidden,
#platformScreen.hidden,
#profileScreen.hidden,
#reviewsScreen.hidden,
#userProfileScreen.hidden,
#walletScreen.hidden {
  animation: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(128, 128, 128, .025) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(128, 128, 128, .025) 1px,
      transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
body.support-open {
  overflow: hidden;
  touch-action: none;
}
.history-order-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 16px 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
}
.balance-tx-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.balance-tx-item:last-child {
  border-bottom: none;
}
.balance-tx-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.balance-tx-icon.debit {
  background: rgba(220, 38, 38, .09);
  color: var(--danger);
}
.balance-tx-icon.credit {
  background: rgba(22, 163, 74, .09);
  color: var(--green);
}
.balance-tx-info {
  flex: 1;
  min-width: 0;
}
.balance-tx-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.balance-tx-type {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 1px;
}
.balance-tx-amount {
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.balance-tx-amount.debit {
  color: var(--danger);
}
.balance-tx-amount.credit {
  color: var(--green);
}
.balance-tx-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-top: 2px;
}
.balance-tx-status.done {
  background: rgba(22, 163, 74, .09);
  color: var(--green);
}
.balance-tx-status.pending {
  background: rgba(107, 114, 128, .09);
  color: var(--gold2);
}
.catalog-screen {
  padding-top: 0;
}
#orderDetailModal {
  z-index: 10000 !important;
}
.modal-backdrop {
  z-index: 9000 !important;
}
#reviewModal {
  z-index: 999999 !important;
  position: fixed !important;
}
#cartBtn {
  display: none !important;
}
.profile-order-img {
  display: none !important;
}
.buy-btn {
  text-transform: uppercase;
  letter-spacing: .3px;
}
.smart-search-wrap {
  position: relative;
  max-width: 580px;
  margin: 0 auto 20px;
  padding: 0 14px;
  z-index: 100;
}
.smart-search-box {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-full);
  padding: 0 16px;
  gap: 10px;
  transition: box-shadow .32s, transform .32s var(--spring);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.smart-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 1px 3px rgba(0, 0, 0, .08);
  transform: scaleX(1.012);
}
.smart-search-icon {
  color: var(--text3);
  font-size: 13px;
  flex-shrink: 0;
}
.smart-search-input {
  flex: 1;
  background: 0 0;
  border: none;
  outline: 0;
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--f);
  padding: 12px 0;
}
.smart-search-input::placeholder {
  color: var(--text3);
}
.smart-search-clear {
  background: 0 0;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.smart-search-clear:hover {
  color: var(--text);
}
.smart-search-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 14px;
  right: 14px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  z-index: 99999;
  max-height: 380px;
  overflow-y: auto;
}
.search-section-label {
  padding: 6px 13px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--card2);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: var(--card3);
}
.search-platform-item {
  border-left: 2px solid var(--accent);
}
.search-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--card2);
}
.search-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.search-item-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-item-meta {
  font-size: 10.5px;
  color: var(--text3);
}
.search-item-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}
.search-item-price small {
  font-size: 9.5px;
  font-weight: 500;
}
.search-item-go {
  font-size: 10.5px;
  color: var(--accent);
  flex-shrink: 0;
}
.search-unclear {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  color: var(--text2);
}
.search-unclear i {
  font-size: 22px;
  color: var(--gold2);
  flex-shrink: 0;
  margin-top: 1px;
}
.search-unclear strong {
  display: block;
  color: var(--text);
  margin-bottom: 2px;
  font-size: 12.5px;
}
.search-unclear p {
  font-size: 11.5px;
  margin: 0;
  color: var(--text2);
}
.search-unclear em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
@keyframes searchPulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent-glow);
    border-color: var(--accent);
  }
  60% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: none;
  }
}
.card.search-highlight {
  animation: searchPulse 1.5s ease-out, fadeUpIn .45s var(--spring) both;
}
.chat-thankyou {
  text-align: center;
  padding: 13px 9px 9px;
}
.chat-thankyou-emoji {
  font-size: 28px;
  margin-bottom: 5px;
}
.chat-thankyou-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 3px;
}
.chat-thankyou-stars {
  font-size: 19px;
  color: var(--gold2);
  letter-spacing: 2px;
  margin-bottom: 3px;
}
.chat-thankyou-sub {
  font-size: 11.5px;
  color: var(--text3);
}
.logo-area .logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.platform-card-img {
  border-radius: 18px !important;
  overflow: hidden;
}
.wallet-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wallet-page .profile-order-card,
.wallet-page .profile-orders-title {
  display: none !important;
}
.profile-screen .profile-orders-title {
  display: none;
}
.catalog-top-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0 11px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: 0 0;
}
.catalog-top-bar .back-btn {
  flex-shrink: 0;
}
.catalog-top-bar .catalog-title {
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
  background: 0 0 !important;
  box-shadow: none !important;
}
.header-wrap.scrolled header {
  box-shadow: 0 3px 20px rgba(107, 114, 128, .1);
}
.header-nav-link i {
  font-size: 13px;
  flex-shrink: 0;
}
.header-nav-link .nav-label {
  font-size: 13px;
}
#supportBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
#brawlContactTGBox,
#brawlContactWABox {
  user-select: none;
}
.support-faq {
  padding: 0 12px 12px;
}
.support-faq-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 9px;
  margin-top: 3px;
}
.support-faq-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.support-faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .28s;
  font-family: var(--f);
}
.support-faq-item:hover {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .04);
  transform: translateY(-1px);
}
.support-faq-item .faq-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--accent-grad);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
@keyframes tgCalcIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes tgPriceUpdate {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
    color: var(--accent);
  }
  100% {
    transform: scale(1);
  }
}
.tg-price-pop {
  animation: tgPriceUpdate .38s var(--spring,cubic-bezier(.34,1.2,.64,1));
}
.tg-star-calc {
  margin: 0 0 22px 0;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -14px rgba(0, 0, 0, .16);
  animation: tgCalcIn .55s cubic-bezier(.22, 1, .36, 1) both;
}
.tg-star-calc:hover {
  border-color: var(--accent);
}
.tg-calc-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border2);
}
.tg-calc-title-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.tg-calc-title-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
.tg-calc-title-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tg-calc-title-text {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.tg-calc-title-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text2);
}
.tg-calc-form {
  display: flex;
  gap: 18px;
  padding: 18px;
  align-items: flex-start;
}
.tg-calc-img-col {
  flex-shrink: 0;
}
.tg-calc-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--card2);
  display: block;
  border: 1px solid var(--border2);
}
@media (max-width: 520px) {
  .tg-calc-form {
    flex-direction: column;
    gap: 14px;
  }
  .tg-calc-img {
    width: 100%;
    height: 84px;
    object-fit: contain;
  }
  .tg-calc-img-col {
    width: 100%;
  }
}
.tg-calc-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tg-calc-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tg-calc-input-wrap {
  position: relative;
}
.tg-calc-input {
  width: 100%;
  padding: 14px 52px 14px 16px;
  border: 1.5px solid var(--border2);
  border-radius: 14px;
  background: var(--card2);
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  font-family: var(--f);
  outline: 0;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.tg-calc-input::placeholder {
  color: var(--text2);
  font-weight: 700;
  opacity: .55;
}
.tg-calc-input::-webkit-inner-spin-button,
.tg-calc-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tg-calc-input:focus {
  border-color: var(--accent);
  background: var(--card);
}
.tg-calc-input-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 800;
  color: var(--text2);
  pointer-events: none;
  letter-spacing: .2px;
}
.tg-calc-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--card3);
  border: 1px solid var(--border2);
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 700;
}
.tg-calc-total {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
}
.tg-calc-buy-btn {
  width: 100%;
  padding: 15px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .2px;
}
.tg-calc-buy-btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
}
.tg-calc-buy-btn:not(:disabled):active {
  transform: translateY(0) !important;
}
.tg-calc-buy-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}
.tg-calc-min-hint {
  font-size: 12px;
  color: var(--danger);
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.header-reviews-btn {
  color: var(--gold2) !important;
}
.header-reviews-btn:hover {
  background: rgba(229, 229, 231, .06) !important;
}
.catalog-inline-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page-bg);
  margin-bottom: 3px;
}
@media (max-width: 900px) {
  .platforms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .header-wrap {
    padding: 7px 11px;
  }
  header {
    padding: 0 11px;
    height: 50px;
  }
  main {
    padding-top: 74px;
  }
  .hero-card {
    padding: 26px 22px;
    flex-direction: column;
    text-align: center;
  }
  .hero-img-wrap {
    justify-content: center;
  }
  .hero-img-wrap img {
    width: 130px;
  }
  .hero-title {
    font-size: clamp(20px, 5.5vw, 30px);
  }
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .platforms-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
  }
  .platform-card-info h3 {
    font-size: 10.5px !important;
  }
}
@media (max-width: 600px) {
  main {
    padding: 74px 11px 18px;
  }
  .hero-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .hero-title {
    font-size: 19px;
  }
  .hero-sub {
    font-size: 12.5px;
    margin-bottom: 18px;
  }
  .hero-cta {
    padding: 10px 20px;
    font-size: 13px;
  }
  .page-screen {
    padding: 22px 11px 18px;
  }
  .history-order-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .history-order-actions {
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  .history-detail-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
  }
  .modal-content {
    padding: 18px 13px;
  }
  .wallet-balance-amount {
    font-size: 32px;
  }
}
@media (max-width: 520px) {
  header {
    height: 46px;
    padding: 0 9px;
    gap: 4px;
  }
  .logo-area img {
    width: 44px;
    height: 44px;
    border-radius: 7px;
  }
  .header-nav-link {
    padding: 5px 7px;
    font-size: 11.5px;
  }
  .auth-btn {
    padding: 6px 10px;
    font-size: 11.5px;
    gap: 4px;
  }
  .balance-header-btn {
    padding: 3px 7px;
    font-size: 11px;
    gap: 3px;
    max-width: 118px;
  }
  .balance-header-btn .balance-icon {
    width: 15px;
    height: 15px;
    font-size: 8px;
    flex-shrink: 0;
  }
  .balance-header-btn > span:last-child {
    display: inline-block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-name-pill {
    padding: 3px 7px 3px 3px;
    gap: 4px;
  }
  .user-name-pill img {
    width: 22px;
    height: 22px;
  }
  .user-name-pill .uname {
    display: none;
  }
  .theme-toggle-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .user-menu {
    gap: 3px;
  }
  .header-actions {
    gap: 3px;
  }
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .modal-content {
    border-radius: 18px 18px 0 0 !important;
    max-width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    max-height: 88dvh;
    overflow-y: auto;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .modal-backdrop.show .modal-content {
    animation: modalSlideUp .45s cubic-bezier(.34, 1.2, .64, 1) both !important;
  }
  @keyframes modalSlideUp {
    from {
      transform: translateY(100%);
      opacity: .6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .profile-header-card {
    flex-direction: column;
    text-align: center;
  }
  .wallet-balance-amount {
    font-size: 28px;
  }
  .nav-catalog-btn {
    display: none !important;
  }
  .header-nav-link .nav-label {
    display: none;
  }
  .header-nav-link {
    padding: 7px 8px;
  }
  .header-nav-link i {
    font-size: 13px;
  }
}
@media (max-width: 400px) {
  header {
    padding: 0 8px;
    gap: 3px;
  }
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-title {
    font-size: 18px;
  }
  main {
    padding: 66px 9px 14px;
  }
}
@media (max-width: 360px) {
  .header-nav-link {
    padding: 4px 6px;
    font-size: 11px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .platform-card:hover {
    transform: none;
  }
  .card:hover {
    transform: none;
  }
  .platform-card:active {
    transform: scale(.97);
  }
  .card:active {
    transform: scale(.97);
  }
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.skeleton {
  background: var(--card2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--card3),
      transparent);
  animation: shimmer 1.6s ease-in-out infinite;
  will-change: transform;
}
.skeleton-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  animation: fadeUpIn .55s var(--spring) both;
}
.skeleton-img {
  width: 100%;
  aspect-ratio: 1;
}
.skeleton-line {
  height: 10px;
  margin: 10px 9px 6px;
  width: 70%;
}
.skeleton-line.short {
  width: 45%;
  margin-bottom: 9px;
}
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.card,
.platform-card,
.platform-review-card,
.review-card,
.trust-card {
  animation: cardEntrance .55s cubic-bezier(.22, 1, .36, 1) both;
}
.products .card:first-child {
  animation-delay: .28s;
}
.products .card:nth-child(2) {
  animation-delay: .28s;
}
.products .card:nth-child(3) {
  animation-delay: .28s;
}
.products .card:nth-child(4) {
  animation-delay: .28s;
}
.products .card:nth-child(5) {
  animation-delay: .3s;
}
.products .card:nth-child(6) {
  animation-delay: .3s;
}
.products .card:nth-child(7) {
  animation-delay: .32s;
}
.products .card:nth-child(8) {
  animation-delay: .32s;
}
.products .card:nth-child(9) {
  animation-delay: .38s;
}
.products .card:nth-child(10) {
  animation-delay: .38s;
}
.products .card:nth-child(11) {
  animation-delay: .45s;
}
.products .card:nth-child(12) {
  animation-delay: .45s;
}
@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(36px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes heroImgIn {
  from {
    opacity: 0;
    transform: translateX(28px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
.hero-card {
  animation: heroSlideIn .8s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-text {
  animation: heroTextIn .8s .28s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-img-wrap img {
  animation: heroImgIn .8s .3s cubic-bezier(.22, 1, .36, 1) both, heroFloat 5.5s .9s ease-in-out infinite;
}
@keyframes ctaRing {
  0% {
    transform: scale(1);
    opacity: .5;
  }
  70% {
    transform: scale(1.12);
    opacity: 0;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}
.hero-cta {
  position: relative;
}
.hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, .5);
  animation: ctaRing 2.5s 1.5s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.platform-card {
  transform-style: preserve-3d;
  perspective: 800px;
}
.platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(107, 114, 128, .1),
      rgba(96, 165, 250, .06));
  opacity: 0;
  transition: opacity .38s;
  pointer-events: none;
  z-index: 1;
}
.platform-card:hover::before {
  opacity: 1;
}
@keyframes ripple {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}
.buy-btn {
  position: relative;
  overflow: hidden;
}
.buy-btn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}
.buy-btn:active::after {
  animation: ripple .65s ease-out forwards;
}
@keyframes btnShimmer {
  from {
    transform: translateX(-110%) skewX(-15deg);
  }
  to {
    transform: translateX(210%) skewX(-15deg);
  }
}
.primary-btn {
  position: relative;
  overflow: hidden;
}
.primary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .18),
      transparent);
  transform: translateX(-110%) skewX(-15deg);
  pointer-events: none;
}
.primary-btn:hover::before {
  animation: btnShimmer .8s ease forwards;
}
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  opacity: 0;
  z-index: -1;
  transition: opacity .32s;
  pointer-events: none;
}
.card {
  position: relative;
}
.card:hover::after {
  opacity: .18;
}
@keyframes filterPop {
  0% {
    transform: scale(.92);
  }
  55% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.filter-btn.active {
  animation: filterPop .45s var(--spring) both;
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.88) translateY(28px);
  }
  60% {
    transform: scale(1.02) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal-backdrop.show .modal-content {
  animation: modalIn .55s cubic-bezier(.34, 1.2, .64, 1) both;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(36px) scale(.85);
  }
  65% {
    transform: translateX(-5px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(24px) scale(.9);
    max-height: 0;
    margin: 0;
    padding: 0;
  }
}
.toast {
  animation: toastIn .55s var(--spring) both;
}
.toast.removing {
  animation: toastOut .38s ease forwards;
}
@keyframes stepActivate {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
    box-shadow: 0 0 0 8px var(--accent-glow);
  }
  100% {
    transform: scale(1.12);
    box-shadow: 0 0 18px var(--accent-glow);
  }
}
.step-dot.active {
  animation: stepActivate .55s var(--spring) forwards;
}
@keyframes fabAttention {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: none;
  }
}
.trust-card:first-child {
  animation-delay: .28s;
}
.trust-card:nth-child(2) {
  animation-delay: .3s;
}
.trust-card:nth-child(3) {
  animation-delay: .32s;
}
.review-card:nth-child(odd) {
  animation: cardEntrance .55s .28s cubic-bezier(.22, 1, .36, 1) both;
}
.review-card:nth-child(2n) {
  animation: cardEntrance .55s .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
#catalogScreen,
#platformScreen,
#profileScreen,
#reviewsScreen {
  animation: pageReveal .65s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.header-wrap {
  animation: headerIn .65s .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes logoBounce {
  0% {
    transform: scale(.8) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
.logo-area img {
  animation: logoBounce .65s .3s cubic-bezier(.34, 1.2, .64, 1) both;
}
.smart-search-box {
  transition: box-shadow .32s, transform .32s var(--spring);
}
.smart-search-box:focus-within {
  transform: scaleX(1.012);
}
@keyframes numberPop {
  0% {
    transform: scale(.7) translateY(5px);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.wallet-balance-amount {
  animation: numberPop .65s var(--spring) both;
}
@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.user-dropdown.open {
  animation: dropIn .32s var(--spring) both;
}
#supportTextarea:focus,
.form-group input:focus,
.input-field:focus,
.tg-calc-input:focus {
  transition: box-shadow .38s var(--spring);
}
@keyframes imgFloat {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.02) translateY(-3px);
  }
}
.platform-card:hover .platform-card-img {
  transition: transform .65s cubic-bezier(.34, 1.2, .64, 1);
  transform: scale(1.08);
}
.back-btn i {
  transition: transform .32s var(--spring);
}
.back-btn:hover i {
  transform: translateX(-3px);
}
@keyframes qrBreath {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.qr-wrapper:not(:hover) .qr {
  position: relative;
  box-shadow: 0 2px 12px rgba(107, 114, 128, .1);
}
.qr-wrapper:not(:hover) .qr::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 6px 24px rgba(107, 114, 128, .22);
  animation: qrBreath 3s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity;
}
.apple-emoji {
  height: 1.2em;
  width: 1.2em;
  min-width: 1.2em;
  vertical-align: -.2em;
  display: inline-block;
  object-fit: contain;
  line-height: 1;
}
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .4;
    transform: scale(.75);
  }
}
.pulse-dot {
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes accentShimmer {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18) drop-shadow(0 0 8px rgba(147, 197, 253, .6));
  }
}
@keyframes filtersIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.filters {
  animation: filtersIn .55s .28s var(--ease) both;
}
.tg-checker-wrap {
  margin-top: 8px;
  min-height: 0;
  overflow: hidden;
}
@keyframes tgCheckerIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.tg-checker-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  animation: tgCheckerIn .38s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tg-checker-loading .tg-checker-card {
  border-color: var(--border2);
}
.tg-checker-found .tg-checker-card {
  border-color: rgba(22, 163, 74, .35);
  background: rgba(22, 163, 74, .04);
}
.tg-checker-notfound .tg-checker-card {
  border-color: rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .03);
}
.tg-checker-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
  position: relative;
}
.tg-checker-avatar-ok {
  background: rgba(107, 114, 128, .12);
  color: var(--accent);
  border: 2px solid rgba(107, 114, 128, .2);
}
.tg-checker-avatar-err {
  background: rgba(220, 38, 38, .08);
  color: var(--danger);
  border: 2px solid rgba(220, 38, 38, .18);
}
.tg-checker-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.tg-checker-skeleton {
  background: var(--card2);
  position: relative;
  overflow: hidden;
}
.tg-checker-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--card3),
      transparent);
  animation: shimmer 1.4s ease-in-out infinite;
  will-change: transform;
}
.tg-checker-avatar.tg-checker-skeleton {
  border-radius: 50%;
}
.tg-checker-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tg-checker-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.tg-checker-notfound .tg-checker-name {
  color: var(--danger);
  font-size: 13px;
}
.tg-checker-sub {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 500;
  display: block;
}
.tg-checker-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 900;
}
.tg-checker-badge-ok {
  background: rgba(22, 163, 74, .12);
  color: #16a34a;
  border: 1.5px solid rgba(22, 163, 74, .25);
}
.tg-checker-badge-err {
  background: rgba(220, 38, 38, .1);
  color: var(--danger);
  border: 1.5px solid rgba(220, 38, 38, .2);
}
.tg-checker-found .ff-avatar {
  border-color: rgba(255, 100, 0, .3) !important;
}
.ff-level-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(255, 100, 0, .12);
  color: var(--text2);
  border: 1px solid rgba(255, 100, 0, .22);
  vertical-align: middle;
  margin-left: 4px;
}
.header-cart-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  transition: transform .3s;
  flex-shrink: 0;
}
.header-cart-btn:hover {
  background: var(--accent-grad);
  color: #fff;
  transform: scale(1.08);
}
.header-cart-btn .cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--body-bg,#f1f5f9);
}
.platform-faq-section {
  margin: 32px 0 0;
  padding: 0 0 8px;
}
.platform-faq-header {
  margin-bottom: 18px;
  text-align: center;
}
.platform-faq-header h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.platform-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .platform-faq-list {
    grid-template-columns: 1fr;
  }
}
.platform-faq-item {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .32s;
}
.platform-faq-item.open {
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--accent-glow,rgba(229,229,231,.1));
}
.platform-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: 0 0;
  border: none;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.platform-faq-q:hover {
  background: rgba(229, 229, 231, .04);
}
.platform-faq-item.open .platform-faq-q {
  color: var(--accent);
}
.platform-faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--card2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text2);
  transition: transform .38s var(--spring, cubic-bezier(.34, 1.2, .64, 1));
}
.platform-faq-item.open .platform-faq-icon {
  transform: rotate(180deg);
  background: var(--accent-grad);
  color: #fff;
}
.platform-faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text2);
  padding: 0 16px;
  transition: max-height .45s ease, padding .45s ease;
}
.platform-faq-item.open .platform-faq-a {
  max-height: 300px;
  padding: 0 16px 14px;
}
#scheduleOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    linear-gradient(
      135deg,
      #0a0a1a 0,
      #0d1427 50%,
      #0a0f1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: scheduleIn .65s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes scheduleIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.schedule-overlay-inner {
  max-width: 440px;
  width: 100%;
  text-align: center;
  animation: scheduleSlide .8s .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes scheduleSlide {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.schedule-moon {
  font-size: 72px;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 32px rgba(147, 112, 219, .5));
  animation: moonFloat 3s ease-in-out infinite;
}
@keyframes moonFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.schedule-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -.5px;
}
.schedule-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
  margin: 0 0 28px;
}
.schedule-sub strong {
  color: rgba(255, 255, 255, .9);
}
.schedule-card {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.schedule-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 14px;
}
.schedule-card-row:last-child {
  border-bottom: none;
}
.schedule-label {
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
}
.schedule-value {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
#scheduleCountdown {
  color: var(--text2);
  font-size: 16px;
}
.schedule-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  margin: 0;
}
.schedule-hint a {
  color: #86efac;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(134, 239, 172, .3);
}
.schedule-hint a:hover {
  color: #4ade80;
}
.order-detail-screen {
  min-height: 100dvh;
  background: var(--page-bg);
  position: relative;
  z-index: 9500;
  font-family:
    Nunito,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.od-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: 0 0;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--f, "Nunito", sans-serif);
  margin: 12px 16px 0;
}
.od-back-btn:hover {
  color: var(--accent);
}
.od-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 32px;
  text-align: center;
}
.od-hero-img-wrap {
  width: 120px;
  height: 120px;
  background: var(--card);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  margin-bottom: 20px;
  overflow: hidden;
}
.od-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.od-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: .3px;
}
.od-hero-title {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.od-hero-platform {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
}
.od-compact-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 16px;
  text-align: center;
}
.od-compact-img-wrap {
  width: 80px;
  height: 80px;
  background: var(--card);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  overflow: hidden;
}
.od-compact-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.od-compact-title {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.2;
}
.od-card .od-row-fs {
  padding: 12px 16px;
}
.od-card .od-label-fs {
  font-size: 13px;
  color: var(--text2);
}
.od-card .od-val-fs {
  font-size: 13px;
}
.od-card {
  background: var(--card);
  border-radius: 20px;
  margin: 0 16px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  border: 1px solid var(--border2);
  overflow: hidden;
}
.od-row-fs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border2);
}
.od-row-fs:last-child {
  border-bottom: none;
}
.od-label-fs {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
  flex-shrink: 0;
}
.od-val-fs {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}
.od-num-fs {
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
}
.od-mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
#orderDetailModal {
  display: none !important;
}
.history-order-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  border: 1px solid var(--border2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.history-order-id {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
}
.history-order-num {
  color: var(--accent);
  font-weight: 900;
  font-size: 15px;
}
.history-order-product {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
  margin: 2px 0 4px;
}
.history-order-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.history-detail-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent-grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  transition: opacity .3s, transform .28s;
}
.history-detail-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}
.history-review-btn {
  padding: 10px 16px;
  background: 0 0;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
}
.history-review-btn:hover {
  background: rgba(229, 229, 231, .06);
}
.history-reviewed-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 12px;
  background: rgba(229, 229, 231, .06);
  border-radius: 20px;
}
.status-pending {
  color: var(--text2) !important;
}
.status-processing {
  color: #3b82f6 !important;
}
.status-approved {
  color: #22d36b !important;
}
.status-rejected {
  color: #ef4444 !important;
}
.review-card-new {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow-card,0 2px 12px rgba(0,0,0,.06));
  border: 1.5px solid var(--border2);
  transition: box-shadow .32s, transform .32s;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
  break-inside: avoid;
  margin-bottom: 16px;
  overflow: hidden;
}
.review-card-new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent2));
  opacity: .7;
}
.review-card-new:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
  border-color: var(--accent);
}
.review-quote-icon {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 30px;
  color: var(--accent);
  opacity: .08;
  pointer-events: none;
}
.review-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-card-skeleton:hover {
  transform: none;
  box-shadow: var(--shadow-card,0 2px 12px rgba(0,0,0,.06));
  border-color: var(--border2);
}
.review-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
}
.review-card-headinfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.review-card-nameline {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.review-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent3);
  padding: 2.5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.review-platform-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.review-rating-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.review-rating-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
}
.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.review-card-user {
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-verified-icon {
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.review-username {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.review-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.review-date-new {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}
.review-stars-new {
  font-size: 24px;
  margin-bottom: 10px;
  line-height: 1;
}
.review-text-new {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 14px;
}
.review-product-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card2,#f8fafc);
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border2);
}
.review-product-chip img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--card);
  flex-shrink: 0;
}
.review-product-chip .apple-emoji {
  width: 1.2em !important;
  height: 1.2em !important;
  min-width: 1.2em !important;
  border-radius: 0 !important;
  background: 0 0 !important;
  flex-shrink: 0;
}
.review-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-product-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.review-product-price {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}
.reviews-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.reviews-page-header {
  text-align: center;
  padding: 32px 0 24px;
}
.reviews-page-title {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 900;
  color: var(--accent);
  margin: 0 0 8px;
  font-style: italic;
}
.reviews-page-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 16px;
}
.reviews-hero-card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 22px;
  padding: 22px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card,0 2px 12px rgba(0,0,0,.06));
}
.reviews-hero-left {
  flex-shrink: 0;
  text-align: center;
  min-width: 92px;
}
.reviews-hero-avg {
  font-size: 40px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.5px;
}
.reviews-hero-stars {
  font-size: 15px;
  margin: 6px 0 4px;
  line-height: 1;
}
.reviews-hero-count {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.reviews-hero-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border2);
  flex-shrink: 0;
}
.reviews-hero-dist {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rhd-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rhd-star-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  width: 22px;
  flex-shrink: 0;
}
.rhd-star-label i {
  color: #f5b400;
  font-size: 9px;
}
.rhd-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--card2);
  overflow: hidden;
  min-width: 0;
}
.rhd-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--accent2),
      var(--accent));
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.rhd-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .reviews-hero-card {
    padding: 18px 14px;
    gap: 14px;
  }
  .reviews-hero-avg {
    font-size: 32px;
  }
  .reviews-hero-left {
    min-width: 74px;
  }
}
.reviews-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.reviews-filter-chips::-webkit-scrollbar {
  display: none;
}
.rf-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--card);
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--f);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s;
}
.rf-chip:active {
  transform: scale(.96);
}
.rf-chip.active {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #fff;
}
.reviews-list-new {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity .22s ease, transform .22s ease;
}
@media (min-width: 860px) {
  .reviews-page {
    max-width: 900px;
  }
  .reviews-list-new {
    display: block;
    column-count: 2;
    column-gap: 16px;
  }
}
@media (max-width: 480px) {
  .od-hero-img-wrap {
    width: 96px;
    height: 96px;
  }
  .od-row-fs {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .od-val-fs {
    text-align: left;
  }
}
@media (min-width: 768px) {
  .od-hero-img-wrap {
    width: 140px;
    height: 140px;
  }
  .od-hero-title {
    font-size: 32px;
  }
}
#ordersPageScreen {
  min-height: 100dvh;
  background: var(--page-bg);
}
.orders-page-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
@media (min-width: 861px) {
  .orders-page-wrap {
    max-width: 1180px;
  }
}
.orders-page-header {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 14px;
}
.orders-page-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 4px;
}
.orders-page-subtitle {
  font-size: 14px;
  color: var(--text2);
  margin: 0;
}
.orders-filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.orders-filter-tabs::-webkit-scrollbar {
  display: none;
}
.orders-filter-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full,999px);
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--f);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  white-space: nowrap;
}
.orders-filter-tab:hover {
  border-color: var(--accent-glow);
  color: var(--text);
}
.orders-filter-tab.active {
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(34, 211, 107, .28);
}
.orders-filter-tab .oft-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 11px;
  font-weight: 800;
}
.orders-filter-tab:not(.active) .oft-count {
  background: var(--card3);
  color: var(--text3);
}

/* ==== Convenient dropdown filters (reviews + order history) ==== */
.mvp-filter-group {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.mvp-filter {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.mvp-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}
.mvp-filter-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.mvp-filter-trigger:hover {
  border-color: var(--accent-glow);
}
.mvp-filter.open .mvp-filter-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent3);
}
.mvp-filter-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mvp-filter-chevron {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text3);
  transition: transform .22s var(--ease);
}
.mvp-filter.open .mvp-filter-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.mvp-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.98);
  transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.mvp-filter.open .mvp-filter-menu {
  opacity: 1;
  pointer-events: all;
  transform: none;
}
.mvp-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.mvp-filter-option i {
  width: 16px;
  text-align: center;
  color: var(--text3);
  font-size: 12px;
  flex-shrink: 0;
}
.mvp-filter-option:hover {
  background: rgba(107, 114, 128, .08);
}
.mvp-filter-option.active {
  background: var(--accent3);
  color: var(--accent);
  font-weight: 800;
}
.mvp-filter-option.active i {
  color: var(--accent);
}
.mvp-filter-opt-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--card3);
  color: var(--text3);
  font-size: 11px;
  font-weight: 800;
}
.mvp-filter-option.active .mvp-filter-opt-count {
  background: rgba(34, 211, 107, .2);
  color: var(--accent);
}
@media (max-width: 420px) {
  .mvp-filter-group {
    gap: 8px;
  }
  .mvp-filter-trigger {
    padding: 10px 12px;
    font-size: 13px;
  }
  .mvp-filter-label {
    font-size: 10px;
  }
}
.orders-page-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 861px) {
  .orders-page-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
    gap: 14px;
  }
  .orders-page-list .empty-state,
  .orders-page-list .orders-filter-empty,
  .orders-page-list .orders-skeleton-list,
  .orders-page-list > div[style] {
    grid-column: 1/-1;
  }
  .orders-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
.orders-page-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card2);
  border-radius: 18px;
  padding: 15px 16px 15px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  border: 1px solid var(--border2);
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.orders-page-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border2);
}
.orders-page-card.status-approved::before {
  background: var(--green);
}
.orders-page-card.status-processing::before {
  background: #3b82f6;
}
.orders-page-card.status-pending::before {
  background: var(--gold2);
}
.orders-page-card.status-expired::before,
.orders-page-card.status-rejected::before {
  background: var(--danger);
}
.orders-page-card.order-card-rejected {
  border-color: rgba(244, 63, 94, .3);
}
.orders-page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  border-color: var(--border3,var(--border2));
}
.orders-page-card:active {
  transform: translateY(0) scale(.99);
}
.opc-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 7px;
  border-radius: 15px;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      var(--card3),
      var(--card2));
  border: 1px solid var(--border2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.opc-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  image-rendering: -webkit-optimize-contrast;
}
.opc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.opc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.opc-order-num {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text2);
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opc-price {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.2px;
}
.opc-price-cur {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}
.opc-product {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opc-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.opc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1px;
  flex-shrink: 0;
  white-space: nowrap;
}
.opc-status-badge i {
  font-size: 11px;
}
.opc-status-badge .opc-status-text {
  line-height: 1;
}
.opc-status-badge.status-approved {
  background: rgba(16, 163, 74, .12);
  color: var(--green);
}
.opc-status-badge.status-processing {
  background: rgba(59, 130, 246, .12);
  color: #3b82f6;
}
.opc-status-badge.status-processing i {
  animation: spin 1.6s linear infinite;
}
.opc-status-badge.status-pending {
  background: rgba(245, 158, 11, .12);
  color: var(--gold2);
}
.opc-status-badge.status-expired,
.opc-status-badge.status-rejected {
  background: rgba(244, 63, 94, .12);
  color: var(--danger);
}
.opc-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  background: var(--card3);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.opc-date i {
  font-size: 10px;
  opacity: .8;
}
.orders-page-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.orders-filter-empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
}
.orders-filter-empty i {
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--text3);
  display: block;
}
.orders-filter-empty p {
  font-size: 13.5px;
  margin: 0;
}
.orders-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orders-skeleton-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 15px 16px;
}
.sk {
  background: var(--card3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .09),
      transparent);
  animation: skShimmer 1.4s ease infinite;
  will-change: transform;
}
@keyframes skShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.sk-avatar {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex-shrink: 0;
}
.sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-line {
  height: 10px;
}
.sk-price {
  width: 52px;
  height: 16px;
  flex-shrink: 0;
}
.orders-page-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wallet-history-card {
  border-style: dashed;
}
.wallet-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.history-order-id {
  display: flex;
  align-items: center;
}
.cart-items-new {
  padding: 12px 16px 16px !important;
  gap: 10px !important;
}
.review-username-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: inherit;
  cursor: pointer;
  transition: opacity .3s;
}
.review-username-link:hover {
  opacity: .75;
  text-decoration: underline;
}
.history-order-reject-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #ef4444;
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .18);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 6px;
  line-height: 1.45;
  font-weight: 600;
}
.history-order-reject-reason i {
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 12px;
}
.od-reject-reason-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(239, 68, 68, .07);
  border: 1.5px solid rgba(239, 68, 68, .22);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 4px;
  color: #ef4444;
}
.od-reject-reason-block > i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.od-reject-reason-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  margin-bottom: 4px;
}
.od-reject-reason-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.user-profile-screen {
  min-height: 100dvh;
  background: var(--bg,#f0f2f8);
}
.up-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 16px 60px;
}
.up-hero-card {
  background: var(--card);
  border-radius: 22px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(229, 229, 231, .06);
  border: 1.5px solid var(--border2,rgba(229,229,231,.1));
  margin-bottom: 24px;
}
.up-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #e8e8ed,
      #f5f5f7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 34px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(229, 229, 231, .2);
}
.up-hero-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -.3px;
}
.up-hero-badge {
  display: inline-block;
  background: rgba(229, 229, 231, .08);
  color: var(--accent);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}
.up-stats-row {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.up-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.up-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.up-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.up-reviews-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.up-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.up-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
}
.up-empty i {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
}
.up-empty p {
  font-size: 14px;
  font-weight: 600;
}
.up-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.up-avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 24px;
  flex-shrink: 0;
}
.up-skeleton {
  background: var(--border,#e2e8f0);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.up-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--bg2,#f8fafc),
      transparent);
  animation: skeletonShimmer 1.4s infinite;
  will-change: transform;
}
.up-skel-name {
  height: 20px;
  width: 140px;
  margin-bottom: 8px;
}
.up-skel-sub {
  height: 14px;
  width: 90px;
}
@keyframes skeletonShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.profile-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.profile-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.profile-stat-chip i {
  color: var(--accent);
  font-size: 11px;
}
.amsg-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg2);
}
.amsg-messages::-webkit-scrollbar {
  width: 5px;
}
.amsg-messages::-webkit-scrollbar-track {
  background: 0 0;
}
.amsg-messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.amsg-msg-wrap {
  display: flex;
  margin-bottom: 2px;
  animation: amsgPopIn .22s cubic-bezier(.34, 1.4, .64, 1);
}
.amsg-msg-in {
  justify-content: flex-start;
}
.amsg-msg-out {
  justify-content: flex-end;
}
@keyframes amsgPopIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.amsg-bubble {
  max-width: 70%;
  padding: 10px 15px 22px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.48;
  word-break: break-word;
  position: relative;
  letter-spacing: .1px;
}
.amsg-bubble-in {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border2);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.amsg-bubble-out {
  background: var(--accent-grad);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px rgba(11, 110, 255, .16);
}
.amsg-bubble-sender {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
  opacity: .85;
  letter-spacing: .15px;
}
.amsg-bubble-in .amsg-bubble-sender {
  color: var(--accent);
}
.amsg-bubble-out .amsg-bubble-sender {
  color: rgba(255, 255, 255, .92);
}
.amsg-bubble-text {
  white-space: pre-wrap;
}
.amsg-quote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 0 6px;
  margin-bottom: 6px;
  opacity: .85;
}
.amsg-quote-bar {
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 16px;
  opacity: .55;
}
.amsg-quote-text {
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.amsg-bubble-time {
  position: absolute;
  bottom: 7px;
  right: 11px;
  font-size: 10.5px;
  font-weight: 500;
  opacity: .6;
  white-space: nowrap;
  line-height: 1;
}
.amsg-bubble-out .amsg-bubble-time {
  opacity: .78;
}
.amsg-input-area {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--card);
}
.amsg-textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  font-size: 15px;
  font-weight: 450;
  font-family: inherit;
  background: var(--bg2);
  color: var(--text);
  outline: 0;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
  box-sizing: border-box;
  line-height: 1.48;
}
.amsg-textarea:focus {
  border-color: var(--accent);
}
.amsg-send-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(11, 110, 255, .28);
  transition: opacity .3s, transform .28s;
}
.amsg-send-btn:hover {
  opacity: .88;
  transform: scale(1.05);
}
.amsg-send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}
.amsg-error,
.amsg-msgs-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.amsg-error {
  color: #f87171;
}
.amsg-msgs-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.amsg-msgs-empty i {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
  opacity: .25;
}
.amsg-msgs-empty p {
  color: var(--text-muted);
}
.section-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 20px 0;
  padding: 4px;
  background: var(--card2);
  border-radius: 14px;
  border: 1px solid var(--border);
  width: fit-content;
}
.section-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: 0 0;
  color: var(--text2);
  font-family: var(--f);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .3s, transform .3s;
  white-space: nowrap;
  letter-spacing: -.01em;
  position: relative;
}
.section-tab:hover:not(.active) {
  background: var(--card3);
  color: var(--text);
}
.section-tab.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 6px rgba(107, 114, 128, .1), 0 0 0 1px var(--border2);
  font-weight: 700;
}
.section-tab-icon {
  font-size: 15px;
  line-height: 1;
}
@media (max-width: 480px) {
  .section-tabs {
    width: 100%;
    justify-content: stretch;
  }
  .section-tab {
    flex: 1;
    justify-content: center;
    padding: 9px 10px;
    font-size: 12.5px;
  }
}
.login-flow-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 20px;
}
.login-flow-overlay.active {
  opacity: 1;
  pointer-events: all;
}
/* Скрытое окно не рисуется вовсе: размытие фона под невидимым полноэкранным
   слоем и бесконечный блик полосы иначе пересчитываются при каждой прокрутке.
   visibility скрывается после затухания (0,3 с), появление — как раньше. */
.login-flow-overlay:not(.active) {
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.login-flow-overlay:not(.active) .lf-accent-bar::after { animation-play-state: paused; }
.login-flow-backdrop {
  display: none;
}
.login-flow-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: calc(100dvh - 40px);
  background: var(--card);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 48px 120px rgba(0, 0, 0, .75), 0 0 0 1px var(--border2);
  transform: scale(.94);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.login-flow-overlay.active .login-flow-panel {
  transform: scale(1);
  opacity: 1;
}
.lf-accent-bar {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
  background: var(--accent-grad);
  position: relative;
  overflow: hidden;
}
.lf-accent-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .5),
      transparent);
  animation: lf-shimmer 2.2s infinite;
}
@keyframes lf-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.login-flow-overlay[data-platform=spotify] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #1db954,
      #1ed760);
}
.login-flow-overlay[data-platform=roblox] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #e22134,
      #f44);
}
.login-flow-overlay[data-platform=brawl] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #3a3a3c,
      #e5e5e7);
}
.login-flow-overlay[data-platform=freefire] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #ff6b00,
      #ff9500);
}
.login-flow-overlay[data-platform=pubg] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #3a3a3c,
      #e5e5e7);
}
.login-flow-overlay[data-platform=so2] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #e53e3e,
      #fc5c7d);
}
.login-flow-overlay[data-platform=telegram] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #229ed9,
      #7ec8e3);
}
.login-flow-overlay[data-platform=fcmobile] .lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #16a34a,
      #22c55e);
}
[data-platform=fcmobile]:hover {
  border-color: rgba(34, 197, 94, .45) !important;
}
.lf-header {
  padding: 22px 24px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.lf-platform-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.lf-header-text {
  flex: 1;
  min-width: 0;
}
.lf-header-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.2;
}
.lf-header-sub {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 500;
}
.lf-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition:
    transform,
    box-shadow,
    opacity;
  flex-shrink: 0;
}
.lf-close-btn:hover {
  background: var(--card3);
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(90deg);
}
.lf-progress {
  padding: 14px 24px 0;
  flex-shrink: 0;
}
.lf-steps-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
}
.lf-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  position: relative;
}
.lf-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text3);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), box-shadow .38s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.lf-step-node.active .lf-step-circle {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #000;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px var(--accent-glow);
}
.lf-step-node.done .lf-step-circle {
  background: var(--green);
  border-color: var(--green);
  color: transparent;
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(11, 110, 255, .18);
}
.lf-step-node.done .lf-step-circle::before {
  content: none;
}
.lf-step-circle .lf-check-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lf-step-circle .lf-check-svg svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}
.lf-step-circle .lf-check-svg .check-path {
  stroke: #000;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: none;
}
.lf-step-node.done .lf-step-circle .lf-check-svg .check-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .38s cubic-bezier(.22, 1, .36, 1) 80ms;
}
@keyframes stepDoneRipple {
  0% {
    transform: scale(0);
    opacity: .6;
  }
  80% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.lf-step-circle .lf-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.lf-step-node.done .lf-step-circle .lf-ripple {
  animation: stepDoneRipple .55s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes stepDoneBounce {
  0% {
    transform: scale(.6);
  }
  55% {
    transform: scale(1.22);
  }
  80% {
    transform: scale(.96);
  }
  100% {
    transform: scale(1.05);
  }
}
.lf-step-node.done .lf-step-circle {
  animation: stepDoneBounce .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.lf-step-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  white-space: nowrap;
  letter-spacing: .2px;
}
.lf-step-node.active .lf-step-label {
  color: var(--accent);
}
.lf-step-node.done .lf-step-label {
  color: var(--green);
}
.lf-step-line {
  height: 2px;
  flex: 1;
  background: var(--border2);
  margin: 0 -1px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.lf-step-line.done {
  background: var(--green);
}
.lf-step-line.active {
  background:
    linear-gradient(
      90deg,
      var(--green) 50%,
      var(--border2) 50%);
}
.lf-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 24px;
  scrollbar-width: none;
}
.lf-body::-webkit-scrollbar {
  display: none;
}
.lf-step-panel {
  display: none;
  animation: lfStepIn .45s cubic-bezier(.22, 1, .36, 1) both;
}
.lf-step-panel.active {
  display: block;
}
.lf-step-panel.exit {
  display: block;
  animation: lfStepOut .38s ease both;
}
@keyframes lfStepIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes lfStepOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
.lf-step-panel.prev-in {
  animation: lfStepPrevIn .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes lfStepPrevIn {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.lf-step-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.lf-step-desc {
  font-size: 13px;
  color: var(--text2);
  margin: 0 0 22px;
  line-height: 1.55;
}
.lf-field {
  margin-bottom: 16px;
}
.lf-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.lf-field-label i {
  color: var(--accent);
  font-size: 12px;
}
.lf-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 16px;
  font-weight: 600;
  outline: 0;
  transition: box-shadow .32s, transform .3s;
  -webkit-appearance: none;
}
.lf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  transform: translateY(-1px);
}
.lf-input::placeholder {
  color: var(--text3);
  font-weight: 500;
}
.lf-pw-wrap {
  position: relative;
}
.lf-pw-wrap .lf-input {
  padding-right: 52px;
}
.lf-pw-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  border: none;
  background: 0 0;
}
.lf-pw-toggle:hover {
  color: var(--accent);
}
.lf-security-box {
  background: rgba(107, 114, 128, .07);
  border: 1.5px solid rgba(107, 114, 128, .22);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.lf-security-box.red {
  background: rgba(239, 68, 68, .06);
  border-color: rgba(239, 68, 68, .22);
}
.lf-security-box.yellow {
  background: rgba(229, 229, 231, .06);
  border-color: rgba(229, 229, 231, .18);
}
.lf-security-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.lf-security-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
}
.lf-security-text strong {
  color: var(--text);
}
.lf-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card2);
  border: 2px solid var(--border2);
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 18px;
}
.lf-consent:has(input:checked) {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .05);
}
.lf-consent input[type=checkbox] {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.lf-consent-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
  font-weight: 500;
}
.lf-contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.lf-contact-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--border2);
  background: var(--card2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
  transition:
    transform,
    box-shadow,
    opacity;
}
.lf-contact-option:hover {
  border-color: var(--border3);
  transform: translateY(-2px);
}
.lf-contact-option.selected {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .06);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: none;
}
.lf-contact-option img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.lf-product-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card2);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.lf-product-emoji {
  font-size: 32px;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card3);
  border-radius: 12px;
  overflow: hidden;
}
.lf-product-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.lf-product-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}
.lf-product-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}
.lf-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.lf-pay-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 2px solid var(--border2);
  background: var(--card2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  position: relative;
  overflow: hidden;
}
.lf-pay-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-grad);
  transform: scaleY(0);
  transition: transform .32s;
}
.lf-pay-card:hover {
  border-color: var(--border3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.lf-pay-card.selected {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .05);
  transform: translateY(-2px);
  box-shadow: none;
}
.lf-pay-card.selected::before {
  transform: scaleY(1);
}
.lf-pay-card-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--card);
  padding: 3px;
}
.lf-pay-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.lf-pay-card-sub {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 2px;
}
.lf-pay-card-check {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
  transition:
    transform,
    box-shadow,
    opacity;
}
.lf-pay-card.selected .lf-pay-card-check {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #fff;
}
.lf-pay-card-disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.3);
}
.lf-pay-card-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border2);
}
.lf-pay-card-soon {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text-muted);
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}
.lf-balance-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px dashed var(--border2);
  background: var(--card2);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  margin-bottom: 10px;
}
.lf-balance-row.selected {
  border-color: var(--accent);
  border-style: solid;
  background: rgba(107, 114, 128, .05);
}
.lf-balance-row.disabled {
  opacity: .45;
  cursor: not-allowed;
}
.lf-qr-section {
  text-align: center;
}
.lf-qr-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 6px;
  font-family: var(--f-display);
  animation: lfAmountPop .65s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes lfAmountPop {
  from {
    transform: scale(.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.lf-qr-hint {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
}
.lf-qr-img-wrap {
  width: 180px;
  margin: 0 auto 14px;
  position: relative;
  cursor: pointer;
}
.lf-qr-img-wrap img {
  width: 100%;
  border-radius: 16px;
  border: 2px solid var(--border2);
  display: block;
  transition: transform .38s, box-shadow .38s;
}
.lf-qr-img-wrap:hover img {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(107, 114, 128, .2);
}
.lf-qr-expand {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.lf-qr-small-hint {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 16px;
}
.lf-upload-zone {
  border: 2px dashed var(--border3);
  border-radius: 18px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  background: var(--card2);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.lf-upload-zone:hover {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .04);
  transform: translateY(-2px);
}
.lf-upload-zone.has-file {
  border-color: var(--green);
  border-style: solid;
}
.lf-upload-icon {
  font-size: 30px;
  color: var(--accent);
}
.lf-upload-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text2);
}
.lf-upload-sub {
  font-size: 11px;
  color: var(--text3);
}
.lf-upload-preview {
  position: absolute;
  inset: 0;
  object-fit: cover;
  border-radius: 16px;
  display: none;
}
.lf-upload-zone.has-file .lf-upload-preview {
  display: block;
}
.lf-upload-zone.has-file .lf-upload-icon,
.lf-upload-zone.has-file .lf-upload-sub,
.lf-upload-zone.has-file .lf-upload-text {
  display: none;
}
.lf-success {
  text-align: center;
  padding: 10px 0 6px;
  animation: lfSuccessIn .65s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes lfSuccessIn {
  from {
    transform: scale(.6) rotate(-8deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
.lf-success-icon {
  font-size: 72px;
  display: block;
  margin: 0 auto 18px;
  animation: lfSuccessIcon .8s cubic-bezier(.34, 1.56, .64, 1) .3s both;
}
@keyframes lfSuccessIcon {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.lf-success-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.lf-success-sub {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 22px;
}
.lf-success-card {
  background: var(--card2);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 2;
}
.lf-success-card b {
  color: var(--accent);
}
.lf-btn {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--f);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .1px;
  box-shadow: none;
  transition:
    transform,
    box-shadow,
    opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.lf-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      transparent 0,
      rgba(255, 255, 255, .12) 50%,
      transparent 100%);
  transform: translateX(-100%);
  transition: transform .65s;
}
.lf-btn:hover {
  transform: translateY(-2px);
  box-shadow: none;
  background: var(--accent-grad-hover);
}
.lf-btn:hover::after {
  transform: translateX(100%);
}
.lf-btn:active {
  transform: translateY(0) scale(.98);
}
.lf-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.lf-btn.success {
  background: var(--green);
  box-shadow: 0 6px 24px rgba(22, 163, 74, .28);
}
.lf-btn-secondary {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: 2px solid var(--border2);
  background: var(--card2);
  color: var(--text2);
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.lf-btn-secondary:hover {
  border-color: var(--border3);
  color: var(--text);
  background: var(--card3);
}
.lf-btn .lf-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lf-spin .8s linear infinite;
}
@keyframes lf-spin {
  to {
    transform: rotate(360deg);
  }
}
.lf-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .22);
  color: var(--green);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .login-flow-panel {
    max-width: 100%;
    width: 100%;
    border-radius: 22px 22px 0 0;
    margin: 0;
    max-height: 92dvh;
    height: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
  }
  .login-flow-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .lf-body {
    padding: 16px 18px 28px;
  }
  .lf-header {
    padding: 18px 18px 14px;
  }
}
.modal-backdrop {
  animation: none !important;
}
.modal-backdrop.show {
  display: flex !important;
  animation: modalBdIn .32s ease both !important;
}
@keyframes modalBdIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.platform-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 40px rgba(107, 114, 128, .16) !important;
}
.primary-btn {
  background: var(--accent-grad) !important;
  box-shadow: 0 4px 20px rgba(107, 114, 128, .3) !important;
}
.primary-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: 0 8px 28px rgba(234, 179, 8, .4) !important;
}
.form-group input:focus,
.input-field:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, .12) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
}
.step-dot.active {
  background: var(--accent-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgba(107, 114, 128, .38) !important;
}
.header-nav-link.active {
  color: var(--accent) !important;
  background: rgba(107, 114, 128, .08) !important;
}
.balance-header-btn {
  background: rgba(107, 114, 128, .08) !important;
  border-color: rgba(107, 114, 128, .16) !important;
  color: var(--accent) !important;
}
.balance-header-btn:hover {
  background: rgba(107, 114, 128, .14) !important;
}
.dropdown-item:hover {
  background: rgba(107, 114, 128, .06) !important;
}
.hero-cta {
  color: var(--text2) !important;
}
.section-tab.active {
  color: var(--accent) !important;
  box-shadow: 0 1px 6px rgba(107, 114, 128, .12), 0 0 0 1px var(--border2) !important;
}
.pay-method-option input:checked + .pay-method-content {
  border-color: var(--accent) !important;
  background: rgba(107, 114, 128, .05) !important;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, .12) !important;
}
.pay-method-option input:checked + .pay-method-content .pay-method-title {
  color: var(--accent) !important;
}
.history-order-card:hover {
  border-color: var(--accent) !important;
}
.auth-btn {
  background: var(--accent-grad) !important;
  box-shadow: 0 2px 12px rgba(229, 229, 231, .2) !important;
}
.auth-btn:hover {
  background: var(--accent-grad-hover) !important;
}
.history-detail-btn {
  background: var(--accent-grad) !important;
  box-shadow: 0 2px 10px rgba(229, 229, 231, .2) !important;
}
.history-detail-btn:hover {
  background: var(--accent-grad-hover) !important;
}
.consent-label:has(input:checked) {
  border-color: rgba(229, 229, 231, .25) !important;
  background: rgba(107, 114, 128, .04) !important;
}
.profile-header-card::before {
  background: var(--accent-grad) !important;
}
.support-faq-item:hover {
  border-color: var(--accent) !important;
  background: rgba(107, 114, 128, .06) !important;
}
.support-faq-item .faq-arrow {
  background: var(--accent-grad) !important;
}
.header-cart-btn:hover {
  background: var(--accent-grad) !important;
  border-color: var(--accent) !important;
}
.theme-toggle-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.history-pill-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.step-line.done {
  background: var(--green) !important;
}
.review-cta-btn {
  background:
    linear-gradient(
      135deg,
      #e8e8ed,
      #f5f5f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .3s, transform .28s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(229, 229, 231, .2) !important;
}
.review-cta-btn:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}
.review-cta-btn i {
  font-size: 12px;
}
.order-review-prompt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-top: 5px;
  background: rgba(229, 229, 231, .06);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(229, 229, 231, .14);
}
.order-review-prompt i {
  font-size: 11px;
}
.order-card-rejected {
  border-left: 3px solid rgba(239, 68, 68, .4) !important;
  background: rgba(239, 68, 68, .02) !important;
}
.od-review-cta-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(229, 229, 231, .06),
      rgba(229, 229, 231, .04));
  border: 1.5px solid rgba(229, 229, 231, .18);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 0 16px 16px;
  animation: reviewCtaSlideIn .45s cubic-bezier(.34, 1.2, .64, 1);
}
@keyframes reviewCtaSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.od-review-cta-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.od-review-cta-text {
  flex: 1;
  min-width: 0;
}
.od-review-cta-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.od-review-cta-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.od-review-cta-btn {
  flex-shrink: 0;
  background:
    linear-gradient(
      135deg,
      #e8e8ed,
      #f5f5f7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .3s, transform .28s !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(229, 229, 231, .25) !important;
}
.od-review-cta-btn:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 380px) {
  .od-review-cta-block {
    flex-wrap: wrap;
  }
  .od-review-cta-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
.profile-tabs-bar {
  display: flex;
  gap: 5px;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  padding: 5px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.profile-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--f);
  border: none;
  cursor: pointer;
  background: 0 0;
  color: var(--text3);
  transition:
    transform,
    box-shadow,
    opacity;
  letter-spacing: .1px;
}
.profile-tab-btn i {
  font-size: 14px;
}
.profile-tab-btn:hover {
  color: var(--text);
  background: var(--card2);
}
.profile-tab-btn.active {
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}
.profile-header-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent2),
      transparent) !important;
}
.profile-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--border2) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.profile-avatar-initial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  flex-shrink: 0;
  border: 2.5px solid var(--border2);
}
.profile-info {
  flex: 1;
  min-width: 0;
}
.profile-info h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  margin-bottom: 2px !important;
  color: var(--text) !important;
}
.profile-info p {
  color: var(--text2) !important;
  font-size: 12.5px !important;
}
.profile-badge {
  margin-left: auto !important;
  padding: 5px 13px !important;
  border-radius: var(--radius-full) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: rgba(107, 114, 128, .1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(107, 114, 128, .22) !important;
  flex-shrink: 0 !important;
}
.profile-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.profile-stat-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1.5px solid var(--border2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.profile-stat-chip i {
  color: var(--accent);
  font-size: 13px;
}
.profile-stat-chip:hover {
  border-color: var(--accent);
}
.profile-section-card {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  color: var(--text);
}
.profile-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-section-title i {
  color: var(--accent);
}
.theme-toggle-btn {
  position: relative;
}
.theme-toggle-btn::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-grad);
  border: 1.5px solid var(--card);
}
.profile-orders-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-orders-section-title h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-orders-section-title h4 i {
  color: var(--accent);
  font-size: 13px;
}
.profile-orders-see-all {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  background: 0 0;
  border: none;
  cursor: pointer;
  font-family: var(--f);
  padding: 0;
  transition: opacity .3s;
}
.profile-orders-see-all:hover {
  opacity: .7;
}
@media (max-width: 480px) {
  .profile-tabs-bar {
    gap: 4px;
    padding: 4px;
  }
  .profile-tab-btn {
    font-size: 12px;
    padding: 9px 8px;
    gap: 5px;
  }
  .profile-header-card {
    padding: 16px 16px !important;
    gap: 12px !important;
  }
  .profile-avatar {
    width: 52px !important;
    height: 52px !important;
  }
  .profile-stats-row {
    gap: 6px;
  }
  .profile-stat-chip {
    font-size: 11.5px;
    padding: 7px 11px;
  }
}
#profileContent [style*="background: var(--card)"],
#profileContent [style*="background:var(--card)"] {
  background: var(--card) !important;
  color: var(--text) !important;
}
#profileContent [style*="background:var(--card2)"] {
  background: var(--card2) !important;
}
.prof-plat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--card2);
  border: 1.5px solid var(--border2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
}
.prof-plat-chip strong {
  color: var(--accent);
}
#profileContent > div {
  animation: profileTabIn .38s var(--ease) both;
}
@keyframes profileTabIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.wallet-balance-card * {
  position: relative;
  z-index: 1;
}
.wallet-balance-amount {
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.wallet-balance-amount span {
  font-size: 20px !important;
  font-weight: 600 !important;
}
.wallet-balance-earned {
  font-size: 12px;
  opacity: .78;
  margin-top: 4px;
  margin-bottom: 16px;
}
.wallet-balance-card {
  padding: 20px 18px !important;
}
.profile-tab-btn span {
  display: none;
}
.profile-tab-btn {
  padding: 11px 12px !important;
}
.profile-tab-btn i {
  font-size: 17px !important;
}
body {
  background-color: var(--page-bg);
  color: var(--text);
}
#scheduleOverlay {
  background:
    linear-gradient(
      135deg,
      #0a0a0f 0,
      #121218 50%,
      #0a0a0f 100%) !important;
}
.modal-content,
.od-card,
.ordv2-card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
.buy-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
}
.buy-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.primary-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
}
.primary-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.primary-btn:disabled {
  background: #e8e8ed !important;
  color: rgba(255, 255, 255, .35) !important;
  box-shadow: none !important;
}
.lf-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
}
.lf-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.lf-btn:disabled {
  background: #e8e8ed !important;
  color: rgba(255, 255, 255, .35) !important;
  box-shadow: none !important;
}
.lf-btn.success {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.auth-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
  animation: none !important;
  background-image: none !important;
}
.auth-btn:hover {
  background: var(--accent-grad-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.history-detail-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
}
.history-detail-btn:hover {
  background: var(--accent-grad-hover) !important;
}
.filter-btn.active {
  background: #e5e5e7 !important;
  color: #1c1c1e !important;
  border-color: #e5e5e7 !important;
}
.section-tab.active {
  background: #e5e5e7 !important;
  color: #1c1c1e !important;
  box-shadow: 0 2px 10px rgba(229, 229, 231, .2) !important;
}
.profile-tab-btn.active {
  background:
    linear-gradient(
      135deg,
      #4d8eff,
      #22c55e) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(11, 110, 255, .36) !important;
  transform: translateY(-1px) !important;
}
.header-nav-link.active {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .1) !important;
}
.step-dot.active {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, .3) !important;
}
.step-dot.done {
  background: var(--accent-grad-hover) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.step-line.done {
  background: var(--accent-grad) !important;
}
.lf-step-node.active .lf-step-circle {
  background: var(--accent-grad) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .2) !important;
  color: #000 !important;
}
.lf-step-node.done .lf-step-circle {
  background: var(--accent-grad-hover) !important;
  border-color: #16a34a !important;
  color: transparent !important;
}
.lf-step-line.done {
  background: var(--accent-grad) !important;
}
.history-review-btn {
  border-color: rgba(34, 197, 94, .4) !important;
  color: #22c55e !important;
}
.history-review-btn:hover {
  background: rgba(34, 197, 94, .1) !important;
  border-color: #22c55e !important;
}
.chat-review-submit {
  background: var(--accent-grad) !important;
  box-shadow: none;
}
.od-review-cta-btn,
.review-cta-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
}
.od-review-cta-btn:hover,
.review-cta-btn:hover {
  background: var(--accent-grad-hover) !important;
}
.od-review-cta-block {
  background: rgba(34, 197, 94, .06) !important;
  border-color: rgba(34, 197, 94, .22) !important;
}
.history-order-status.status-pending,
.od-value.status-pending,
.status-pending {
  color: #facc15 !important;
  background: rgba(250, 204, 21, .1) !important;
}
.history-order-status.status-processing,
.od-value.status-processing,
.status-processing {
  color: #3b82f6 !important;
  background: rgba(59, 130, 246, .1) !important;
}
.history-order-status.status-approved,
.od-value.status-approved,
.status-approved {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .1) !important;
}
.history-order-status.status-rejected,
.od-value.status-rejected,
.status-rejected {
  color: #f87171 !important;
  background: rgba(248, 113, 113, .1) !important;
}
.order-status.sent {
  color: #facc15 !important;
  background: rgba(250, 204, 21, .09) !important;
}
.order-status.approved {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .09) !important;
}
.order-status.rejected {
  color: #f87171 !important;
  background: rgba(248, 113, 113, .09) !important;
}
.balance-tx-status.pending {
  color: #facc15 !important;
  background: rgba(250, 204, 21, .09) !important;
}
.balance-tx-status.done {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .09) !important;
}
.chat-thankyou-stars,
.platform-review-stars,
.review-stars,
.review-stars-new {
  color: #facc15 !important;
}
.star-btn.active,
.star-btn:hover {
  color: #facc15 !important;
}
.order-price {
  color: #22c55e !important;
}
.card-price-val {
  color: #1c1c1e !important;
}
.history-order-num {
  color: #22c55e !important;
}
.od-num-fs {
  color: #22c55e !important;
}
#supportTextarea:focus,
.form-group input:focus,
.input-field:focus,
.smart-search-box:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .15) !important;
}
.tg-calc-input:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #e8e8ed inset !important;
  -webkit-text-fill-color: #1c1c1e !important;
  caret-color: #1c1c1e !important;
}
.platform-card:hover {
  border-color: rgba(34, 197, 94, .45) !important;
  box-shadow: none;
}
.card:hover {
  border-color: rgba(34, 197, 94, .35) !important;
  box-shadow: none;
}
.logo-name span {
  color: #22c55e !important;
}
.hero-cta {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none;
  animation: none !important;
}
.hero-cta:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.hero-accent {
  color: #22c55e !important;
  animation: none !important;
}
.dropdown-item:hover {
  background: rgba(255, 255, 255, .06) !important;
}
.header-nav-link:hover {
  background: rgba(255, 255, 255, .06) !important;
}
.balance-header-btn {
  background: rgba(34, 197, 94, .1) !important;
  border-color: rgba(34, 197, 94, .22) !important;
  color: #22c55e !important;
}
.user-name-pill:hover {
  border-color: #22c55e !important;
}
.back-btn:hover {
  border-color: rgba(255, 255, 255, .3) !important;
  color: #fff !important;
}
.btn-approve {
  background: rgba(34, 197, 94, .12) !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, .25) !important;
}
.btn-approve:hover {
  background: rgba(34, 197, 94, .2) !important;
}
.btn-reject {
  background: rgba(248, 113, 113, .12) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, .25) !important;
}
.btn-reject:hover {
  background: rgba(248, 113, 113, .2) !important;
}
.toast.info {
  border-color: rgba(250, 204, 21, .4) !important;
  color: #facc15 !important;
}
.toast.success {
  border-color: rgba(34, 197, 94, .4) !important;
  color: #22c55e !important;
}
.toast.error {
  border-color: rgba(248, 113, 113, .4) !important;
  color: #f87171 !important;
}
.delivery-info {
  background: rgba(34, 197, 94, .08) !important;
  border-color: rgba(34, 197, 94, .22) !important;
  color: #22c55e !important;
}
.pay-method-option input:checked + .pay-method-content {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, .06) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .15) !important;
}
.pay-method-option input:checked + .pay-method-content .pay-method-title {
  color: #22c55e !important;
}
.lf-pay-card.selected {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, .06) !important;
  box-shadow: none;
}
.lf-pay-card.selected .lf-pay-card-check {
  background: var(--accent-grad) !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
.lf-pay-card.selected::before {
  background: var(--accent-grad) !important;
}
.lf-contact-option.selected {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, .06) !important;
  color: #22c55e !important;
  box-shadow: none;
}
.lf-balance-row.selected {
  border-color: #22c55e !important;
  border-style: solid !important;
  background: rgba(34, 197, 94, .06) !important;
}
.consent-label:has(input:checked) {
  border-color: rgba(34, 197, 94, .4) !important;
  background: rgba(34, 197, 94, .05) !important;
}
.lf-consent:has(input:checked) {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, .05) !important;
}
.profile-header-card::before {
  background:
    linear-gradient(
      90deg,
      #22c55e,
      #16a34a) !important;
}
.profile-avatar-initial {
  background:
    linear-gradient(
      135deg,
      #16a34a,
      #22c55e) !important;
  color: #fff !important;
}
.up-avatar-circle {
  background:
    linear-gradient(
      135deg,
      #16a34a,
      #22c55e) !important;
  color: #fff !important;
  box-shadow: none;
}
.up-hero-badge {
  background: rgba(34, 197, 94, .12) !important;
  color: #22c55e !important;
}
.amsg-input-area {
  background: var(--card) !important;
}
.amsg-bubble-in {
  background: var(--card2) !important;
  color: var(--text) !important;
}
.amsg-bubble-out {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.amsg-send-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.amsg-send-btn:hover {
  background: var(--accent-grad-hover) !important;
  transform: scale(1.05) !important;
}
.amsg-textarea {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
.amsg-textarea:focus {
  border-color: #22c55e !important;
}
.support-faq-item:hover {
  border-color: rgba(34, 197, 94, .35) !important;
}
.support-faq-item .faq-arrow {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.platform-faq-item.open {
  border-color: rgba(34, 197, 94, .35) !important;
}
.platform-faq-item.open .platform-faq-q {
  color: #22c55e !important;
}
.platform-faq-item.open .platform-faq-icon {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.smart-search-box:focus-within {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12) !important;
}
.tg-calc-quick-btn.active {
  border-color: #22c55e !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.tg-calc:hover {
  border-color: rgba(34, 197, 94, .35) !important;
}
.history-order-card:hover {
  border-color: rgba(34, 197, 94, .35) !important;
}
.review-card:hover {
  border-color: rgba(34, 197, 94, .35) !important;
}
.platform-review-card:hover {
  border-color: rgba(34, 197, 94, .35) !important;
}
.ordv2-share-copy {
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.ordv2-share-copy:hover {
  opacity: .88 !important;
}
.history-reviewed-badge {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .1) !important;
  border-color: rgba(34, 197, 94, .22) !important;
}
.header-cart-btn:hover {
  background: rgba(34, 197, 94, .15) !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, .3) !important;
}
.theme-toggle-btn:hover {
  border-color: rgba(34, 197, 94, .35) !important;
  color: #22c55e !important;
}
.history-pill-btn:hover {
  border-color: rgba(34, 197, 94, .35) !important;
  color: #22c55e !important;
}
.profile-section-title i {
  color: #22c55e !important;
}
.od-title-bar h2 {
  color: #22c55e !important;
}
.page-title {
  color: #22c55e !important;
}
.lf-accent-bar {
  background:
    linear-gradient(
      90deg,
      #22c55e,
      #16a34a) !important;
}
.lf-delivery-badge {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .25) !important;
  color: #22c55e !important;
}
.lf-qr-amount {
  color: #1c1c1e !important;
}
.reviews-page-title {
  color: #1c1c1e !important;
  font-style: normal !important;
}
.reviews-page-subtitle {
  color: rgba(0, 0, 0, .55) !important;
}
.amount-display {
  color: #1c1c1e !important;
}
.price-tag {
  color: #1c1c1e !important;
}
.trust-card-icon {
  background: rgba(34, 197, 94, .1) !important;
  color: #22c55e !important;
}
.pulse-dot {
  background: var(--accent-grad) !important;
}
.order-review-prompt {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .08) !important;
  border-color: rgba(34, 197, 94, .2) !important;
}
.od-review-cta-title {
  color: #22c55e !important;
}
.header-reviews-btn {
  color: #facc15 !important;
}
.header-reviews-btn:hover {
  background: rgba(250, 204, 21, .08) !important;
}
.balance-pay-btn {
  background: rgba(34, 197, 94, .08) !important;
  border-color: rgba(34, 197, 94, .2) !important;
  color: #22c55e !important;
}
.balance-pay-btn:hover {
  background: rgba(34, 197, 94, .15) !important;
}
.review-username-link {
  color: #22c55e !important;
}
.success-btn {
  background: var(--accent-grad-hover) !important;
  box-shadow: none;
}
.success-btn:hover {
  background: #12c25c !important;
}
input[type=checkbox] {
  accent-color: #22c55e !important;
}
.consent-checkbox {
  accent-color: #22c55e !important;
}
.crypto-currency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--card);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  font-size: 13px;
}
.crypto-currency-item:hover {
  border-color: var(--border3);
  background: var(--card2);
}
.crypto-currency-item.selected {
  border-color: var(--accent);
  background: rgba(107, 114, 128, .07);
}
.crypto-currency-item .cci-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #08c,
      #05a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.crypto-currency-item .cci-name {
  font-weight: 700;
  color: var(--text);
}
.crypto-currency-item .cci-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 1px;
}
.crypto-currency-item .cci-amount {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
#cryptoCurrencyList::-webkit-scrollbar {
  width: 4px;
}
#cryptoCurrencyList::-webkit-scrollbar-track {
  background: 0 0;
}
#cryptoCurrencyList::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
.theme-toggle-btn {
  position: relative;
  background: var(--card2);
  border: 1px solid var(--border2);
  cursor: pointer;
  color: var(--text2);
  font-size: 16px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--accent3);
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06) rotate(15deg);
}
[data-theme=amoled],
html[data-theme=amoled] body {
  background: #08080a !important;
  background-image:
    radial-gradient(
      ellipse 80% 50% at 20% -10%,
      rgba(11, 110, 255, .1) 0,
      transparent 60%),
    radial-gradient(
      ellipse 60% 40% at 80% 110%,
      rgba(99, 102, 241, .08) 0,
      transparent 60%) !important;
}
[data-theme=amoled] body::before {
  background-image:
    linear-gradient(rgba(11, 110, 255, .03) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(11, 110, 255, .03) 1px,
      transparent 1px) !important;
  background-size: 48px 48px !important;
}
[data-theme=amoled] .hero-card {
  background:
    linear-gradient(
      135deg,
      rgba(13, 13, 16, .98) 0,
      rgba(20, 20, 23, .95) 100%) !important;
  border: 1px solid rgba(11, 110, 255, .14) !important;
  box-shadow: none;
}
[data-theme=amoled] .platform-card {
  background:
    linear-gradient(
      160deg,
      #17171b 0,
      #0d0d10 100%) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
[data-theme=amoled] .platform-card:hover {
  border-color: rgba(11, 110, 255, .45) !important;
  box-shadow: none;
}
[data-theme=amoled] .platform-card-info {
  background: rgba(0, 0, 0, .4) !important;
  border-top-color: rgba(255, 255, 255, .05) !important;
}
[data-theme=amoled] .trust-card {
  background:
    linear-gradient(
      160deg,
      #17171b 0,
      #0d0d10 100%) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
[data-theme=amoled] .trust-card:hover {
  border-color: rgba(11, 110, 255, .3) !important;
  box-shadow: none;
}
[data-theme=amoled] .card {
  background: #141417 !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
[data-theme=amoled] .card:hover {
  border-color: transparent !important;
  box-shadow: none;
}
[data-theme=amoled] .card-img-wrap {
  background: var(--bg) !important;
}
[data-theme=amoled] .filter-btn {
  background: #141417 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme=amoled] .filter-btn.active {
  background: var(--accent-grad) !important;
  border-color: transparent !important;
  color: #08080a !important;
}
[data-theme=amoled] .back-btn {
  background: #141417 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme=amoled] .history-order-card,
[data-theme=amoled] .orders-page-card {
  background: var(--card2) !important;
  border-color: var(--border2) !important;
}
[data-theme=amoled] .orders-page-card:hover {
  border-color: var(--border3,var(--border2)) !important;
}
[data-theme=amoled] .platform-review-card,
[data-theme=amoled] .review-card-new {
  background: #141417 !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
[data-theme=amoled] input,
[data-theme=amoled] select,
[data-theme=amoled] textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}
[data-theme=amoled] input:-webkit-autofill,
[data-theme=amoled] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1f inset !important;
  -webkit-text-fill-color: #ffffff !important;
}
[data-theme=amoled] .amount-display,
[data-theme=amoled] .card-price-val,
[data-theme=amoled] .lf-qr-amount,
[data-theme=amoled] .price-tag,
[data-theme=amoled] .wallet-balance-amount {
  color: #fff !important;
}
[data-theme=amoled] .reviews-page-title {
  color: #fff !important;
}
[data-theme=amoled] .reviews-page-subtitle {
  color: rgba(255, 255, 255, .55) !important;
}
[data-theme=amoled] header {
  background: rgba(8, 8, 10, .92) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
[data-theme=amoled] .amsg-input-area {
  background: #0d0d10 !important;
}
[data-theme=amoled] .amsg-bubble-in {
  background: #1a1a1f !important;
}
[data-theme=amoled] .amsg-textarea {
  background: #08080a !important;
  color: #eceef2 !important;
}
[data-theme=amoled] .theme-toggle-btn {
  color: #facc15;
}
[data-theme=amoled] .hero-card {
  background: #0d1117 !important;
  border-color: rgba(11, 110, 255, .12) !important;
}
[data-theme=amoled] .hero-bg-glow {
  background:
    radial-gradient(
      ellipse,
      rgba(11, 110, 255, .12) 0,
      transparent 65%) !important;
}
[data-theme=amoled] .hero-bg-grid {
  background-image:
    linear-gradient(rgba(11, 110, 255, .05) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(11, 110, 255, .05) 1px,
      transparent 1px) !important;
}
[data-theme=amoled] .hero-live-feed {
  background: #111720 !important;
  border-color: rgba(255, 255, 255, .07) !important;
}
[data-theme=amoled] .live-feed-header {
  border-bottom-color: rgba(255, 255, 255, .07) !important;
}
[data-theme=amoled] .lfi-icon {
  background: #0d1117 !important;
}
[data-theme=amoled] .hero-cta-wa {
  background: #111720 !important;
  border-color: rgba(255, 255, 255, .09) !important;
  color: rgba(255, 255, 255, .65) !important;
}
[data-theme=amoled] .hero-cta-wa:hover {
  background: rgba(11, 110, 255, .1) !important;
  border-color: #4d8eff !important;
  color: #4d8eff !important;
}
[data-theme=amoled] .hero-cta-main {
  background:
    linear-gradient(
      135deg,
      #4d8eff,
      #22c55e) !important;
  color: #080b0f !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 28px rgba(11, 110, 255, .4) !important;
}
[data-theme=amoled] .hero-stat-val {
  color: #eceef2 !important;
}
[data-theme=amoled] .hero-title {
  color: #eceef2 !important;
}
[data-theme=amoled] .hero-badge {
  background: rgba(11, 110, 255, .1) !important;
  border-color: rgba(11, 110, 255, .22) !important;
}
[data-theme=amoled] .skeleton-box,
[data-theme=amoled] .skeleton-line {
  background: rgba(255, 255, 255, .07) !important;
}
:root .theme-toggle-btn,
[data-theme=light] .theme-toggle-btn {
  color: var(--text2);
}
[data-theme=light] .theme-toggle-btn:hover {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .1);
  transform: scale(1.06) rotate(15deg);
}
[data-theme=amoled] .theme-toggle-btn {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, .25);
  background: rgba(167, 139, 250, .08);
}
[data-theme=amoled] .theme-toggle-btn:hover {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, .5);
  background: rgba(167, 139, 250, .15);
}
[data-theme=light],
html[data-theme=light] {
  background-color: var(--page-bg) !important;
  background-image:
    radial-gradient(
      ellipse 100% 60% at 92% 100%,
      rgba(251, 191, 36, .12) 0,
      rgba(251, 191, 36, .02) 48%,
      transparent 65%) !important;
  color: var(--text) !important;
}
[data-theme=light] body,
html[data-theme=light] body {
  background: 0 0 !important;
  color: var(--text) !important;
}
html[data-theme=amoled] {
  background: var(--page-bg) !important;
  background-image: none !important;
}
html[data-theme=amoled] body {
  background: 0 0 !important;
  color: var(--text) !important;
}
html[data-theme=amoled] .amount-display,
html[data-theme=amoled] .card-price-val,
html[data-theme=amoled] .lf-qr-amount,
html[data-theme=amoled] .price-tag,
html[data-theme=amoled] .reviews-page-title,
html[data-theme=amoled] .wallet-balance-amount {
  color: #fff !important;
}
html[data-theme=amoled] .reviews-page-subtitle {
  color: rgba(255, 255, 255, .6) !important;
}
html[data-theme=light] .amount-display,
html[data-theme=light] .card-price-val,
html[data-theme=light] .price-tag {
  color: #1c1c1e !important;
}
html[data-theme=light] .reviews-page-title {
  color: #1c1c1e !important;
}
html[data-theme=light] .reviews-page-subtitle {
  color: rgba(0, 0, 0, .55) !important;
}
[data-theme=light] .modal-backdrop,
html[data-theme=light] .modal-backdrop {
  background: rgba(13, 31, 23, .92) !important;
}
html[data-theme=light] input:-webkit-autofill,
html[data-theme=light] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #e8e8ed inset !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
html[data-theme=light] input,
html[data-theme=light] select,
html[data-theme=light] textarea {
  -webkit-text-fill-color: #1c1c1e !important;
  caret-color: #1c1c1e !important;
}
html[data-theme=amoled] input:-webkit-autofill,
html[data-theme=amoled] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1f inset !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme=amoled] input,
html[data-theme=amoled] select,
html[data-theme=amoled] textarea {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}
.order-promo-wrap {
  margin-bottom: 12px;
  border-radius: 14px;
  border: 1.5px solid var(--border2,#334155);
  overflow: hidden;
}
.order-promo-wrap:focus-within {
  border-color: var(--accent,#6b7280);
}
.order-pay-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  border-radius: 13px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--f, inherit);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
}
.order-pay-method-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pay-balance-hint {
  font-size: 12px;
  margin: -4px 0 14px;
  line-height: 1.55;
}
.lf-step-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: 0 0;
  border: none;
  color: var(--text2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--f);
}
.lf-step-back:hover {
  color: var(--accent);
}
.order-promo-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--card2,#1e293b);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted,#94a3b8);
  font-family: var(--f, inherit);
  text-align: left;
}
.order-promo-toggle:hover {
  color: var(--text,#f1f5f9);
  background: var(--card3,#263244);
}
.order-promo-toggle .fa-tag {
  color: var(--accent,#6b7280);
}
.order-promo-chev {
  margin-left: auto;
  font-size: 11px;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.order-promo-body {
  padding: 10px 14px 12px;
  background: var(--card,#0f172a);
  border-top: 1px solid var(--border2,#334155);
}
.order-promo-input-row {
  display: flex;
  gap: 8px;
}
.order-promo-input {
  flex: 1;
  padding: 10px 13px;
  border: 1.5px solid var(--border2,#334155);
  border-radius: 10px;
  background: var(--card2,#1e293b);
  color: var(--text,#f1f5f9);
  font-size: 15px;
  font-weight: 800;
  font-family: monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  outline: 0;
  transition: box-shadow .32s;
}
.order-promo-input:focus {
  border-color: var(--accent,#6b7280);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, .15);
}
.order-promo-status {
  min-height: 18px;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
}
.order-promo-discount {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, .07);
  border: 1px solid rgba(34, 197, 94, .2);
  border-radius: 10px;
  font-size: 12px;
}
html[data-theme=light] .order-promo-toggle {
  background: #f1f5f9;
  color: #64748b;
}
html[data-theme=light] .order-promo-toggle:hover {
  background: #e8edf4;
  color: #1c1c1e;
}
html[data-theme=light] .order-promo-body {
  background: #fff;
  border-top-color: #e2e8f0;
}
html[data-theme=light] .order-promo-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1c1c1e;
}
html[data-theme=light] .order-promo-wrap {
  border-color: #cbd5e1;
}
html[data-theme=amoled] .order-promo-toggle {
  background: #1a1a1a;
}
html[data-theme=amoled] .order-promo-toggle:hover {
  background: #222;
}
html[data-theme=amoled] .order-promo-body {
  background: #111;
}
html[data-theme=amoled] .order-promo-input {
  background: #1a1a1a;
}
.mvp-pulse {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green,#4ade80);
  animation: mvpPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
  position: relative;
}
.mvp-pulse-sm {
  width: 18px;
  height: 18px;
}
.mvp-pulse-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#pageLoaderDot::after,
.mvp-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(74, 222, 128, .55);
  animation: mvpRing 2.2s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes mvpPulse {
  0% {
    transform: scale(.88);
    opacity: .85;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(.88);
    opacity: .85;
  }
}
@keyframes mvpRing {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
#pageLoaderDot {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green,#4ade80);
  animation: mvpPulse 2.2s ease-in-out infinite;
  position: relative;
}
.rv2-backdrop {
  background: rgba(10, 10, 12, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.rv2-backdrop.show {
  opacity: 1;
}
.rv2-modal {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  will-change: transform, opacity;
}
#reviewModal.rv2-backdrop,
[data-theme=light] #reviewModal.rv2-backdrop,
html[data-theme=light] #reviewModal.rv2-backdrop {
  background: rgba(6, 6, 8, .86) !important;
}
#reviewModal.rv2-backdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
#reviewModal .rv2-modal {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  max-height: min(640px, 90dvh) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
}
#reviewModal.rv2-backdrop.show .rv2-modal {
  animation: rv2ModalIn .38s cubic-bezier(.22, 1, .36, 1) both !important;
}
#reviewModal.rv2-backdrop.rv2-closing .rv2-modal {
  animation: none !important;
  transform: scale(.96) translateY(10px) !important;
  opacity: 0 !important;
  transition: transform .18s var(--ease), opacity .16s var(--ease) !important;
}
.rv3-review .close-btn {
  top: 16px !important;
  right: 16px !important;
  z-index: 6;
}
.rv3-body {
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rv3-head {
  padding-right: 26px;
}
.rv3-title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 5px;
  line-height: 1.25;
}
.rv3-sub {
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
  line-height: 1.5;
}
.rv3-order {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 12px 14px;
}
.rv3-order-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  overflow: hidden;
}
.rv3-order-info {
  flex: 1;
  min-width: 0;
}
.rv3-order-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv3-order-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.rv3-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text2);
  background: var(--card);
  border: 1px solid var(--border2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.rv3-chip:empty {
  display: none;
}
.rv3-chip i {
  font-size: 8.5px;
}
.rv3-chip.rv3-chip-done {
  color: var(--green);
  background: rgba(34, 211, 107, .13);
  border-color: rgba(34, 211, 107, .28);
}
.rv3-order-num {
  font-size: 10.5px;
  color: var(--text3);
  font-weight: 600;
}
.rv3-order-num:empty {
  display: none;
}
.rv3-divider {
  height: 1px;
  background: var(--border);
}
.rv3-field {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rv3-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rv3-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rv3-optional {
  font-size: 10.5px;
  color: var(--text3);
  font-weight: 600;
}
.rv3-stars {
  display: flex;
  gap: 8px;
}
.rv3-stars .star-btn {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  background: var(--card2);
  border: 1.5px solid var(--border2) !important;
  font-size: 19px;
  color: var(--border3);
  cursor: pointer;
  transition: transform .24s var(--spring), box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}
.rv3-stars .star-btn:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(217, 119, 6, .4) !important;
  color: var(--gold2);
  background: rgba(217, 119, 6, .06);
}
.rv3-stars .star-btn:active {
  transform: scale(.92);
}
.rv3-stars .star-btn.active {
  color: var(--gold2) !important;
  background: rgba(217, 119, 6, .1) !important;
  border-color: rgba(217, 119, 6, .42) !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(217, 119, 6, .16);
}
.rv3-stars .star-btn.active i {
  animation: rv3StarPop .34s var(--spring);
}
@keyframes rv3StarPop {
  0% {
    transform: scale(.55) rotate(-10deg);
  }
  60% {
    transform: scale(1.25) rotate(6deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.rv3-star-hint {
  font-size: 12.5px;
  color: var(--text3);
  text-align: center;
  min-height: 18px;
  font-weight: 700;
}
.rv3-textarea-wrap {
  position: relative;
}
.rv3-textarea {
  width: 100%;
  background: var(--card2);
  border: 1.5px solid var(--border2);
  border-radius: 14px;
  padding: 14px 14px 30px;
  color: var(--text);
  font-family: var(--f);
  font-size: 14px;
  resize: none;
  outline: 0;
  line-height: 1.6;
  transition: box-shadow .25s var(--ease);
  display: block;
  box-sizing: border-box;
}
.rv3-textarea:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.rv3-char-count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 10.5px;
  color: var(--text3);
  font-weight: 700;
  pointer-events: none;
}
.rv3-submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--f);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform .2s var(--spring),
    box-shadow .22s var(--ease),
    opacity .18s;
}
.rv3-submit:hover {
  transform: translateY(-2px);
  background: var(--accent-grad-hover);
  box-shadow: 0 10px 26px var(--accent-glow);
}
.rv3-submit:active {
  transform: scale(.97) translateY(0);
}
.rv3-submit:disabled {
  opacity: .85;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.rv3-submit .mvp-pulse {
  background: rgba(255, 255, 255, .9);
}
@media (max-width: 480px) {
  .rv3-body {
    padding: 26px 20px 22px;
    gap: 20px;
  }
  .rv3-title {
    font-size: 19px;
  }
  .rv3-stars .star-btn {
    height: 48px;
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}
.buy-btn,
.card,
.filter-btn,
.platform-card,
.section-tab,
[role=button],
a,
button {
  touch-action: manipulation;
}
:root {
  --bg:#08080a;
  --bg2:#0d0d10;
  --page-bg:#08080a;
  --card:#141417;
  --card2:#1a1a1f;
  --card3:#212127;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.09);
  --border3:rgba(255,255,255,0.14);
  --text:#eceef2;
  --text2:rgba(236,238,242,0.64);
  --text3:rgba(236,238,242,0.52);
  --text-muted:rgba(236,238,242,0.52);
  --input-bg:#1a1a1f;
  --accent:#22d36b;
  --accent2:#12c25c;
  --accent3:rgba(34, 211, 107,0.10);
  --accent-glow:rgba(34, 211, 107,0.22);
  --accent-grad:linear-gradient(
      135deg,
      #7af7ae 0%,
      #22d36b 45%,
      #12c25c 100%);
  --accent-grad-hover:linear-gradient(
      135deg,
      #7af7ae 0%,
      #22d36b 40%,
      #14b956 100%);
  --green:#22d36b;
  --green2:#7af7ae;
  --green-glow:rgba(34, 211, 107,0.15);
  --gold:#f59e0b;
  --gold2:#f59e0b;
  --danger:#f87171;
  --pink:#f87171;
  --cyan:#22d3ee;
  --success:#22c55e;
  --warning:#f59e0b;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-full:999px;
  --shadow:0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.6);
  --shadow-card:0 1px 2px rgba(0,0,0,0.4);
  --f:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-display:"Geist",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-mono:"Geist Mono","JetBrains Mono",monospace;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --spring:cubic-bezier(0.34, 1.20, 0.64, 1);
  --header-bg:rgba(8,8,10,0.92);
  --header-border:rgba(255,255,255,0.08);
}
[data-theme=light] {
  --bg:#f7f8fa;
  --bg2:#eef0f3;
  --page-bg:#f7f8fa;
  --card:#ffffff;
  --card2:#f5f6f8;
  --card3:#ececf0;
  --border:rgba(15,23,20,0.08);
  --border2:rgba(15,23,20,0.12);
  --border3:rgba(15,23,20,0.18);
  --text:#0a1f14;
  --text2:rgba(10,31,20,0.62);
  --text3:rgba(10,31,20,0.40);
  --text-muted:rgba(10,31,20,0.40);
  --input-bg:#ffffff;
  --accent:#1fcf66;
  --accent2:#14b956;
  --accent3:rgba(31, 207, 102,0.08);
  --accent-glow:rgba(31, 207, 102,0.20);
  --accent-grad:linear-gradient(
      135deg,
      #7af7ae 0%,
      #1fcf66 45%,
      #14b956 100%);
  --accent-grad-hover:linear-gradient(
      135deg,
      #7af7ae 0%,
      #1fcf66 40%,
      #0fa84d 100%);
  --green:#1fcf66;
  --green2:#22d36b;
  --green-glow:rgba(31, 207, 102,0.15);
  --shadow:0 2px 12px rgba(15,23,20,0.06),0 1px 3px rgba(15,23,20,0.04);
  --shadow-lg:0 8px 40px rgba(15,23,20,0.09),0 2px 10px rgba(15,23,20,0.05);
  --shadow-card:0 4px 20px rgba(15,23,20,0.07),0 1px 4px rgba(15,23,20,0.04);
  --header-bg:#f7f8fa;
  --header-border:rgba(15,23,20,0.08);
}
[data-theme=light] .platform-card,
html[data-theme=light] .platform-card {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 20, .1) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 20, .06) !important;
}
[data-theme=light] .platform-card:hover,
html[data-theme=light] .platform-card:hover {
  border-color: rgba(31, 207, 102, .35) !important;
  box-shadow: 0 8px 36px rgba(31, 207, 102, .14), 0 0 0 1px rgba(31, 207, 102, .22) !important;
}
[data-theme=light] .trust-card,
html[data-theme=light] .trust-card {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 20, .1) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 20, .06) !important;
}
[data-theme=light] .history-order-card,
html[data-theme=light] .history-order-card {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 20, .09) !important;
  box-shadow: 0 3px 16px rgba(15, 23, 20, .05) !important;
}
[data-theme=light] .card,
html[data-theme=light] .card {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 20, .09) !important;
  box-shadow: 0 3px 16px rgba(15, 23, 20, .05) !important;
}
[data-theme=light] .site-footer::before,
html[data-theme=light] .site-footer::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(31, 207, 102, .35),
      transparent) !important;
}
[data-theme=light] .footer-inner,
html[data-theme=light] .footer-inner {
  background: #fff !important;
}
[data-theme=light] .footer-stat,
html[data-theme=light] .footer-stat {
  background: #fff !important;
  border-color: rgba(15, 23, 20, .1) !important;
}
[data-theme=amoled] {
  --bg:#08080a;
  --bg2:#0d0d10;
  --page-bg:#08080a;
  --card:#141417;
  --card2:#1a1a1f;
  --card3:#212127;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.09);
  --border3:rgba(255,255,255,0.14);
  --text:#eceef2;
  --text2:rgba(236,238,242,0.64);
  --text3:rgba(236,238,242,0.52);
  --text-muted:rgba(236,238,242,0.52);
  --input-bg:#1a1a1f;
  --accent3:rgba(34, 211, 107,0.10);
  --accent-glow:rgba(34, 211, 107,0.22);
  --shadow:0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.6);
  --shadow-card:0 1px 2px rgba(0,0,0,0.4);
  --header-bg:rgba(8,8,10,0.92);
  --header-border:rgba(255,255,255,0.08);
}
[data-theme=amoled] body {
  background-image: none !important;
  background-color: var(--page-bg) !important;
  font-family: var(--f) !important;
}
[data-theme=amoled] header {
  background: var(--header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--header-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
[data-theme=amoled] header::after {
  display: none !important;
}
.header-wrap {
  animation: none !important;
  padding: 12px 16px !important;
}
.logo-area img {
  animation: none !important;
}
.hero-card {
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.hero-bg-glow {
  display: none !important;
}
.hero-bg-grid {
  display: none !important;
}
.hero-card::before {
  display: none !important;
}
.hero-accent {
  background: 0 0 !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}
.hero-cta,
.hero-cta-main {
  box-shadow: none !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.hero-cta-main::before {
  display: none !important;
}
.hero-cta-main:hover,
.hero-cta:hover {
  background: var(--accent-grad-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}
.hero-badge-dot {
  animation: none !important;
  box-shadow: none !important;
}
.platform-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border: 1px solid var(--border2) !important;
  animation: fadeUpIn .35s var(--ease) both !important;
}
.platform-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--accent) !important;
}
.platform-card:hover .platform-card-img {
  transform: none !important;
}
.platform-card-img {
  background: var(--card2) !important;
}
.platform-card-info {
  background: 0 0 !important;
  border-top: 1px solid var(--border) !important;
}
.platform-card-go {
  display: none !important;
}
.trust-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border: 1px solid var(--border2) !important;
}
.trust-card::before {
  display: none !important;
}
.trust-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--accent) !important;
}
.trust-card-icon {
  border-radius: 10px !important;
  background: var(--card2) !important;
  border: 1px solid var(--border2) !important;
}
.buy-btn {
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.buy-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.buy-btn::after,
.buy-btn::before {
  display: none !important;
}
.primary-btn {
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.primary-btn::before {
  display: none !important;
}
.primary-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.primary-btn:disabled {
  background: var(--card3) !important;
  color: var(--text3) !important;
  box-shadow: none !important;
}
.lf-btn {
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
}
.lf-btn::after {
  display: none !important;
}
.lf-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.lf-btn:disabled {
  background: var(--card3) !important;
  color: var(--text3) !important;
  box-shadow: none !important;
}
.lf-btn.success {
  background: var(--accent-grad-hover) !important;
  box-shadow: none !important;
}
.auth-btn {
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
  animation: none !important;
  background-image: none !important;
}
.auth-btn:hover {
  background: var(--accent-grad-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
#supportTextarea:focus,
.amsg-textarea:focus,
.form-group input:focus,
.input-field:focus,
.lf-input:focus,
.rv2-textarea:focus,
.smart-search-box:focus-within,
.tg-calc-input:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  outline: 0 !important;
}
.modal-backdrop.show .modal-content {
  animation: none !important;
  transform: none !important;
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-backdrop.show .modal-content {
  animation: modalIn .28s ease both !important;
}
#catalogScreen,
#platformScreen,
#profileScreen,
#reviewsScreen {
  animation: pageReveal .28s ease both !important;
}
@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.live-feed-dot {
  box-shadow: none !important;
}
@keyframes livePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.card::after {
  display: none !important;
}
.card:hover {
  box-shadow: none !important;
}
.card:hover {
  border-color: var(--accent) !important;
}
.toast {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
  backdrop-filter: none !important;
  border-radius: 10px !important;
}
.toast.success {
  box-shadow: none !important;
}
.toast.error {
  box-shadow: none !important;
}
.toast.info {
  box-shadow: none !important;
}
.filter-btn.active {
  animation: none !important;
}
.step-dot.active {
  box-shadow: none !important;
  animation: none !important;
}
.balance-header-btn {
  box-shadow: none !important;
  border-radius: 8px !important;
}
.balance-header-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
.profile-tab-btn.active {
  transform: none !important;
  box-shadow: none !important;
}
.header-nav-link {
  border-radius: 8px !important;
}
.back-btn:hover {
  transform: none !important;
}
.platform-review-card {
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}
.platform-review-card:hover {
  box-shadow: none !important;
}
.history-detail-btn {
  box-shadow: none !important;
  border-radius: 10px !important;
}
.history-detail-btn:hover {
  transform: none !important;
}
.login-flow-panel {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .2) !important;
  border-radius: 18px !important;
}
@media (max-width: 520px) {
  .login-flow-panel {
    border-radius: 22px 22px 0 0 !important;
  }
}
.section-tab.active {
  box-shadow: none !important;
}
.lf-contact-option:hover {
  transform: none !important;
}
.lf-contact-option.selected {
  transform: none !important;
  box-shadow: none !important;
}
.lf-pay-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.lf-pay-card.selected {
  transform: none !important;
  box-shadow: none !important;
}
.lf-step-node.active .lf-step-circle {
  box-shadow: none !important;
}
.user-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18) !important;
  border-radius: 14px !important;
}
.user-dropdown.open {
  animation: dropIn .22s ease both !important;
}
.hero-stat-btn:hover {
  transform: none !important;
}
.wallet-balance-amount {
  animation: none !important;
}
.platform-card-more {
  border-radius: var(--radius-lg) !important;
}
.platform-card-more:hover {
  transform: none !important;
}
.lf-qr-img-wrap:hover img {
  transform: none !important;
  box-shadow: none !important;
}
.header-wrap {
  animation: none !important;
}
.buy-btn:hover,
.platform-card:hover,
.trust-card:hover {
  transform: none !important;
}
.home-review-card {
  border-radius: 14px !important;
}
.home-review-card:hover {
  border-color: var(--accent) !important;
}
.tg-star-calc {
  border-radius: 22px !important;
  box-shadow: none !important;
  animation: none !important;
}
.tg-star-calc:hover {
  box-shadow: none !important;
  border-color: var(--accent) !important;
}
.smart-search-box:focus-within {
  transform: none !important;
}
.theme-toggle-btn:hover {
  transform: none !important;
}
.order-promo-input:focus {
  box-shadow: none !important;
}
.rv2-modal {
  border-radius: 16px !important;
}
.up-hero-card {
  box-shadow: none !important;
  border: 1px solid var(--border2) !important;
  border-radius: 16px !important;
}
.up-avatar-circle {
  box-shadow: none !important;
  background: var(--card2) !important;
}
.lf-qr-amount {
  animation: none !important;
}
.lf-success {
  animation: none !important;
}
.lf-success-icon {
  animation: none !important;
}
.hero-cta-main:active {
  transform: none !important;
}
.back-btn:hover i {
  transform: none !important;
}
.home-reviews-all-btn:hover {
  opacity: .65;
}
.history-order-status.status-approved {
  color: #22c55e !important;
}
.status-approved {
  background: rgba(34, 197, 94, .1) !important;
  color: #22c55e !important;
}
.history-reviewed-badge {
  color: #22c55e !important;
  background: rgba(34, 197, 94, .1) !important;
  border-color: rgba(34, 197, 94, .25) !important;
}
.card:hover {
  border-color: rgba(11, 110, 255, .35) !important;
}
.platform-card:hover {
  border-color: rgba(11, 110, 255, .45) !important;
}
.platform-card-price {
  background: rgba(11, 110, 255, .1) !important;
  border-color: rgba(11, 110, 255, .2) !important;
  color: var(--accent) !important;
}
.filter-btn.active {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.home-reviews-dot.active {
  background: var(--accent-grad) !important;
}
.buy-btn {
  color: #fff !important;
}
.hero-stats-bar {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
  gap: 0;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.hero-stat-num {
  font-size: 17px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -.5px;
  line-height: 1;
}
.hero-stat-label {
  font-size: 10.5px;
  color: var(--text2);
  font-weight: 600;
  text-align: center;
}
.hero-stat-sep {
  width: 1px;
  height: 30px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 8px;
}
.home-whatsapp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(37, 211, 102, .08);
  border: 1px solid rgba(37, 211, 102, .25);
  border-radius: 14px;
  padding: 12px 14px 12px 16px;
  margin-bottom: 16px;
}
.home-whatsapp-bar-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.4;
}
.home-whatsapp-bar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 3px 12px rgba(37, 211, 102, .35);
}
.home-whatsapp-bar-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.home-whatsapp-bar-btn:active {
  transform: translateY(0);
  opacity: .85;
}
@media (max-width: 480px) {
  .home-whatsapp-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .home-whatsapp-bar-btn {
    justify-content: center;
  }
}
.home-tg-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(42, 171, 238, .08);
  border: 1px solid rgba(42, 171, 238, .25);
  border-radius: 14px;
  padding: 12px 14px 12px 16px;
  margin-bottom: 16px;
}
.home-tg-bar-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.4;
}
.home-tg-bar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: #2aabee;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 3px 12px rgba(42, 171, 238, .35);
}
.home-tg-bar-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.home-tg-bar-btn:active {
  transform: translateY(0);
  opacity: .85;
}
@media (max-width: 480px) {
  .home-tg-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .home-tg-bar-btn {
    justify-content: center;
  }
}
.home-why-section {
  padding: 0 0 18px;
}
.home-whatsapp-section {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(34, 211, 107, .05);
  border: 1px solid rgba(34, 211, 107, .13);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.home-whatsapp-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(37, 211, 102, .14);
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.home-whatsapp-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 180px;
}
.home-whatsapp-text strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.home-whatsapp-text span {
  font-size: 11.5px;
  color: var(--text2);
}
.home-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      #25d366 0,
      #128c7e 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .3);
  transition: opacity .18s, transform .18s;
}
.home-whatsapp-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.home-whatsapp-btn:active {
  transform: translateY(0);
  opacity: .85;
}
@media (max-width: 480px) {
  .home-whatsapp-section {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .home-whatsapp-btn {
    width: 100%;
  }
}
[data-theme=light] .home-whatsapp-section,
html[data-theme=light] .home-whatsapp-section {
  background: #fff !important;
  border: 1px solid rgba(31, 207, 102, .14) !important;
  box-shadow: 0 3px 16px rgba(31, 207, 102, .08) !important;
}
.home-why-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 10px;
}
.home-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.home-why-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px;
  transition: transform .18s;
}
.home-why-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-why-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.home-why-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-why-text strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  display: block;
}
.home-why-text span {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}
@media (max-width: 480px) {
  .home-why-grid {
    grid-template-columns: 1fr;
  }
  .hero-stat-num {
    font-size: 14px;
  }
}
:root {
  --wlt-green:#22c55e;
  --wlt-red:#f87171;
  --wlt-orange:#fb923c;
  --wlt-blue:#60a5fa;
  --wlt-purple:#a855f7;
}
.wlt-page {
  padding: 24px 0 100px;
}
.wlt-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 4px;
}
.wlt-back-btn,
.wlt-refresh-btn {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.wlt-back-btn:hover,
.wlt-refresh-btn:hover {
  background: var(--card2);
}
.wlt-title {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wlt-title i {
  color: var(--accent);
}
.wlt-refresh-btn i {
  transition: transform .4s;
}
.wlt-refresh-btn:active i {
  transform: rotate(180deg);
}
.wlt-balance-hero {
  background:
    linear-gradient(
      135deg,
      var(--accent) 0,
      var(--accent2,#0041cc) 100%);
  border-radius: 24px;
  padding: 32px 24px 28px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
}
.wlt-balance-bg-circles::after,
.wlt-balance-bg-circles::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wlt-balance-bg-circles::before {
  width: 220px;
  height: 220px;
  top: -70px;
  left: -40px;
  background: rgba(255, 255, 255, .09);
}
.wlt-balance-bg-circles::after {
  width: 180px;
  height: 180px;
  bottom: -60px;
  right: -30px;
  background: rgba(255, 255, 255, .06);
}
.wlt-balance-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.wlt-hero-coin {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .25));
}
.wlt-balance-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.wlt-balance-label {
  font-size: 13px;
  font-weight: 600;
  opacity: .8;
  letter-spacing: .3px;
}
.wlt-balance-amount {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  letter-spacing: -1.5px;
}
.wlt-balance-cur {
  font-size: 16px;
  font-weight: 700;
  margin-left: 6px;
  opacity: .85;
  letter-spacing: 0;
}
.wlt-balance-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.wlt-btn-topup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: none;
  color: var(--accent);
  padding: 11px 26px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.wlt-btn-topup:hover {
  opacity: .92;
  transform: translateY(-1px);
}
.wlt-btn-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}
.wlt-pending-badge {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245, 158, 11, .25);
  border-radius: 20px;
  padding: 5px 14px;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.wlt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .wlt-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wlt-balance-amount {
    font-size: 34px;
  }
}
.wlt-stat-card {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: var(--shadow-card);
}
.wlt-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.wlt-stat-green {
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
}
.wlt-stat-red {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
}
.wlt-stat-orange {
  background: rgba(251, 146, 60, .12);
  color: #fb923c;
}
.wlt-stat-blue {
  background: rgba(59, 130, 246, .12);
  color: #60a5fa;
}
.wlt-stat-body {
  width: 100%;
}
.wlt-stat-num {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
}
.wlt-stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.wlt-section-card {
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.wlt-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wlt-promo-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.wlt-promo-row {
  display: flex;
  gap: 8px;
}
.wlt-promo-input {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: var(--card2);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--f);
  outline: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.wlt-promo-input:focus {
  border-color: var(--accent);
}
.wlt-promo-btn {
  padding: 11px 16px;
  background: var(--accent-grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}
.wlt-promo-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.wlt-promo-msg {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wlt-promo-msg.hidden {
  display: none;
}
.wlt-promo-success {
  background: rgba(74, 222, 128, .1);
  color: #22c55e;
  border: 1px solid rgba(74, 222, 128, .25);
}
.wlt-promo-error {
  background: rgba(248, 113, 113, .08);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, .2);
}
.wlt-pulse-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.wlt-empty {
  text-align: center;
  padding: 28px 0;
}
.wlt-empty-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.wlt-empty-text {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.wlt-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.wlt-tx-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wlt-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
}
.wlt-tx-item:hover {
  background: var(--card2);
}
.wlt-tx-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.wlt-tx-info {
  flex: 1;
  min-width: 0;
}
.wlt-tx-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wlt-tx-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.wlt-tx-amount {
  font-weight: 900;
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.wlt-amount-pos {
  color: #22c55e;
}
.wlt-amount-neg {
  color: var(--text-muted);
}
.wlt-tx-cur {
  font-size: 10px;
  font-weight: 600;
  opacity: .7;
  margin-left: 2px;
}
.wlt-tx-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.wlt-status-pending {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}
.wlt-status-rejected {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
}
.wlt-modal-label {
  font-size: 13px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.wlt-amount-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wlt-max-btn {
  padding: 10px 14px;
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--f);
  white-space: nowrap;
}
.wlt-max-btn:hover {
  border-color: var(--accent);
}
.topup-hero {
  position: relative;
  background:
    linear-gradient(
      135deg,
      var(--accent) 0,
      #0041cc 100%);
  padding: 32px 24px 24px;
  text-align: center;
  overflow: hidden;
}
.topup-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 80% at 50% -10%,
      rgba(255, 255, 255, .18),
      transparent);
  pointer-events: none;
}
.topup-hero-icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .18);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  margin: 0 auto 10px;
  backdrop-filter: blur(8px);
}
.topup-hero-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
}
.topup-hero-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  margin: 0;
}
.topup-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topup-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}
.topup-label i {
  margin-right: 5px;
}
.topup-amount-row {
  display: flex;
  align-items: center;
  background: var(--input-bg,var(--card));
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 4px 16px;
  gap: 8px;
}
.topup-amount-row:focus-within {
  border-color: var(--accent);
}
.topup-amount-input {
  flex: 1;
  background: 0 0;
  border: none;
  outline: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--f);
  padding: 10px 0;
}
.topup-amount-input::placeholder {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}
.topup-amount-cur {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(57, 216, 122, .1);
  padding: 4px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.topup-quick-amounts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.topup-quick-amounts button {
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--card2);
  border: 1.5px solid var(--border2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
  transition:
    transform,
    box-shadow,
    opacity;
}
.topup-quick-amounts button.active,
.topup-quick-amounts button:hover {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #fff;
}
.topup-methods-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.topup-methods-label i {
  margin-right: 5px;
}
.topup-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 400px) {
  .topup-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.topup-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  border: 2px solid var(--border2);
  background: var(--card);
  cursor: pointer;
  transition:
    transform,
    box-shadow,
    opacity;
  user-select: none;
}
.topup-method-card:hover {
  border-color: var(--accent);
  background: var(--card2);
}
.topup-method-card.selected {
  border-color: var(--accent);
  background: rgba(57, 216, 122, .07);
}
.topup-method-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.topup-method-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}
.topup-method-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background: var(--accent-grad);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
}
.topup-method-card.selected .topup-method-check {
  display: flex;
}
.topup-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.topup-qr-wrap {
  display: flex;
  justify-content: center;
}
.topup-qr-img {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.topup-qr-hint {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.topup-receipt-zone {
  border: 2px dashed var(--border2);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 80px;
  position: relative;
  overflow: hidden;
}
.topup-receipt-zone:hover {
  border-color: var(--accent);
  background: rgba(57, 216, 122, .04);
}
.topup-upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
.topup-upload-text i {
  font-size: 24px;
  color: var(--accent);
}
.topup-file-preview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 10px;
}
.topup-crypto-info {
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, .1),
      rgba(124, 58, 237, .05));
  border: 1.5px solid rgba(168, 85, 247, .25);
  border-radius: 16px;
  padding: 16px;
}
.topup-crypto-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.topup-crypto-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.topup-crypto-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.topup-submit-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--accent-grad);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--f);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .18s, transform .12s;
  box-shadow: 0 4px 20px rgba(57, 216, 122, .3);
}
.topup-submit-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}
.topup-submit-btn:active {
  transform: translateY(0);
}
.topup-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.topup-crypto-btn {
  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7c3aed);
  box-shadow: 0 4px 20px rgba(168, 85, 247, .3);
}
.topup-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
[data-theme=light] .topup-amount-input {
  color: var(--text);
}
[data-theme=light] .topup-method-card {
  background: var(--card2);
}
[data-theme=light] .topup-method-card.selected {
  background: rgba(21, 128, 61, .09);
}
.ordv2-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px 28px;
}
.ordv2-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .05);
  margin-bottom: 12px;
  overflow: hidden;
}
.ordv2-simple {
  padding: 22px 20px 18px;
}
.ordv2-simple-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  text-align: center;
  margin-bottom: 15px;
}
.ordv2-simple-rows {
  background: var(--card2);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ordv2-simple-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
[data-theme=amoled] .ordv2-simple-row {
  border-bottom-color: rgba(255, 255, 255, .06);
}
.ordv2-simple-row:last-child {
  border-bottom: none;
}
.ordv2-simple-row span {
  color: var(--text);
  font-weight: 600;
  text-align: left;
}
.ordv2-simple-row strong {
  color: var(--text);
  font-weight: 700;
  text-align: left;
}
.ordv2-simple-row.ordv2-row-accent strong {
  color: var(--accent);
  font-weight: 800;
}
.ordv2-simple-divider {
  background: var(--card2);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  border-bottom: 3px solid var(--border2);
}
.ordv2-simple-divider span {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
}
.ordv2-simple-product {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 10px 14px;
}
.ordv2-simple-product-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--card3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ordv2-simple-product-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.ordv2-simple-product-info {
  min-width: 0;
  flex: 1;
}
.ordv2-simple-product-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.ordv2-simple-product-uid {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ordv2-simple-product-uid strong {
  color: var(--text2);
  font-weight: 700;
}
.ordv2-simple .ordv2-cta {
  margin-top: 13px;
  padding-left: 0;
  padding-right: 0;
}
.ordv2-simple .ordv2-expired,
.ordv2-simple .ordv2-notice {
  margin-left: 0;
  margin-right: 0;
  margin-top: 13px;
}
@media (max-width: 420px) {
  .ordv2-simple {
    padding: 18px 14px 16px;
  }
  .ordv2-simple-row {
    font-size: 15px;
    padding: 11px 14px;
  }
  .ordv2-simple-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
}
.ordv2-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
}
.ordv2-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--card2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ordv2-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.ordv2-head-info {
  min-width: 0;
  flex: 1;
}
.ordv2-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.ordv2-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ordv2-price {
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.ordv2-price span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 2px;
}
.ordv2-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 18px;
}
.ordv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.ordv2-badge i {
  font-size: 11px;
}
.ordv2-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.ordv2-ticket-divider {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--border2);
  margin: 2px 0 0;
}
.ordv2-ticket-divider::after,
.ordv2-ticket-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--page-bg,var(--bg));
  transform: translateY(-50%);
}
.ordv2-ticket-divider::before {
  left: -11px;
}
.ordv2-ticket-divider::after {
  right: -11px;
}
.ordv2-tracker {
  padding: 20px 20px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ordv2-progress-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  position: relative;
}
.ordv2-progress-icon--done {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 0 0 6px var(--accent3);
}
.ordv2-progress-icon--fail {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(244, 63, 94, .14);
}
.ordv2-progress-icon--active {
  background: var(--card2);
  border: 2px solid var(--accent);
  position: relative;
}
.ordv2-progress-icon--active::after,
.ordv2-progress-icon--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ordv2-radar-ping 2.4s cubic-bezier(.2, .6, .4, 1) infinite;
}
.ordv2-progress-icon--active::after {
  animation-delay: 1.2s;
}
@keyframes ordv2-radar-ping {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
.ordv2-progress-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--accent3);
  border-top-color: var(--accent);
  animation: ordv2-spin .8s linear infinite;
  display: block;
}
@keyframes ordv2-spin {
  to {
    transform: rotate(360deg);
  }
}
.ordv2-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-grad);
  opacity: 0;
  animation: ordv2-spark-burst .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ordv2-spark-1 {
  --tx:0px;
  --ty:-34px;
  animation-delay: .08s;
}
.ordv2-spark-2 {
  --tx:24px;
  --ty:-24px;
  animation-delay: .14s;
  background: var(--gold);
}
.ordv2-spark-3 {
  --tx:32px;
  --ty:6px;
  animation-delay: .05s;
}
.ordv2-spark-4 {
  --tx:-24px;
  --ty:-24px;
  animation-delay: .18s;
  background: var(--gold);
}
.ordv2-spark-5 {
  --tx:-32px;
  --ty:6px;
  animation-delay: .1s;
}
.ordv2-spark-6 {
  --tx:0px;
  --ty:32px;
  animation-delay: .16s;
  background: var(--gold);
}
@keyframes ordv2-spark-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.3);
  }
}
.ordv2-progress-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.ordv2-tracker .ordv2-progress-icon--fail + .ordv2-progress-title {
  color: var(--danger);
}
.ordv2-progress-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
  max-width: 320px;
}
.ordv2-progress-bar {
  width: 100%;
  max-width: 260px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--card2);
  margin-top: 16px;
  overflow: hidden;
}
.ordv2-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent-grad);
  transition: width .5s var(--ease);
}
.ordv2-uid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 9px 16px;
  background: var(--card2);
  border-radius: var(--radius-full);
}
.ordv2-uid-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ordv2-uid-val {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .03em;
}
.ordv2-cta {
  padding: 4px 20px 16px;
}
.ordchat-entry-card2 .ordv2-cta,
.ordv2-review .ordv2-cta {
  padding: 16px 20px 16px;
}
.ordv2-cta-hint {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ordv2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 800;
  font-family: var(--f);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ordv2-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  text-decoration: none;
}
.ordv2-btn:active {
  transform: translateY(0);
  opacity: .85;
}
.ordv2-btn--primary {
  background: var(--accent-grad);
  color: #fff;
}
.ordv2-btn--whatsapp {
  background: #25d366;
  color: #fff;
}
.ordv2-btn--danger {
  background: var(--danger);
  color: #fff;
}
.ordv2-btn--ghost {
  background: var(--accent3);
  color: var(--accent);
  width: auto;
  padding: 10px 16px;
  flex-shrink: 0;
}
.ordv2-notice {
  margin: 0 20px 18px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(245, 158, 11, .09);
  border: 1px solid rgba(245, 158, 11, .28);
  color: var(--gold2);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ordv2-notice i {
  margin-top: 1px;
  flex-shrink: 0;
}
.ordv2-expired {
  margin: 0 20px 20px;
  padding: 26px 18px 22px;
  border-radius: 18px;
  background: rgba(244, 63, 94, .06);
  border: 1px solid rgba(244, 63, 94, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: ordv2-expired-in .5s var(--ease) both;
}
@keyframes ordv2-expired-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ordv2-expired-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(244, 63, 94, .12);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  position: relative;
  animation: ordv2-expired-tilt 3.6s ease-in-out .4s infinite;
}
.ordv2-expired-ring::after,
.ordv2-expired-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--danger);
  opacity: 0;
  animation: ordv2-radar-ping-danger 2.6s cubic-bezier(.2, .6, .4, 1) infinite;
}
.ordv2-expired-ring::after {
  animation-delay: 1.3s;
}
@keyframes ordv2-radar-ping-danger {
  0% {
    transform: scale(1);
    opacity: .5;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}
@keyframes ordv2-expired-tilt {
  0%, 100% {
    transform: rotate(0);
  }
  8% {
    transform: rotate(-10deg);
  }
  16% {
    transform: rotate(8deg);
  }
  24% {
    transform: rotate(-5deg);
  }
  32% {
    transform: rotate(0);
  }
}
.ordv2-expired-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--danger);
  margin-bottom: 6px;
}
.ordv2-expired-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 280px;
  margin-bottom: 16px;
}
.ordv2-review-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(251, 191, 36, .14);
  color: var(--gold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.ordv2-review-body {
  flex: 1;
  min-width: 0;
}
.ordv2-review-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.ordv2-review-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ordchat-entry-card {
  padding: 0;
  overflow: hidden;
}
.ordchat-entry-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
}
.ordchat-entry-row:hover {
  background: var(--bg2);
}
.ordchat-entry-row:active {
  background: var(--border2);
}
.ordchat-entry-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(11, 110, 255, .25);
}
.ordchat-entry-body {
  flex: 1;
  min-width: 0;
}
.ordchat-entry-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.ordchat-entry-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ordchat-entry-chevron {
  color: var(--text3);
  font-size: 13px;
  flex-shrink: 0;
}
.ordchat-unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#ordChatBackdrop {
  z-index: 100011 !important;
}
#ordChatPanel {
  z-index: 100012 !important;
}
.ordchat-panel {
  z-index: 100012;
}
.ordchat-attach-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: transform .18s;
}
.ordchat-attach-btn:hover {
  background: var(--border2);
  color: var(--accent);
}
.ordchat-attach-btn:active {
  transform: scale(.92);
}
.ordchat-bubble-img {
  display: block;
  max-width: 100%;
  width: 200px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: zoom-in;
}
.ordchat-img-preview-bar {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ordchat-img-preview-bar img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.ordchat-img-preview-label {
  flex: 1;
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 600;
}
.ordchat-img-preview-bar button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg2);
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ordchat-tab-badge {
  position: absolute;
  top: 3px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.ordv2-share {
  padding: 15px 18px;
}
.ordv2-share-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ordv2-share-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent3);
  color: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ordv2-share-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.ordv2-share-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.ordv2-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
}
.ordv2-share-url {
  flex: 1;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ordv2-share-copy {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .18s var(--ease);
}
.ordv2-share-copy:hover {
  opacity: .88;
}
.ordv2-share-copy--done {
  background: var(--accent-grad) !important;
  animation: ordv2-copy-pop .35s var(--ease);
}
@keyframes ordv2-copy-pop {
  0% {
    transform: scale(.85);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
.ordv2-share-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 380px) {
  .ordv2-head {
    padding: 18px 16px 14px;
  }
  .ordv2-cta,
  .ordv2-meta,
  .ordv2-tracker {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ordv2-expired,
  .ordv2-notice {
    margin-left: 16px;
    margin-right: 16px;
  }
}
.ff-checker-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border2,rgba(255,255,255,.08));
  background: var(--card,#1a2234);
  position: relative;
}
.ff-checker-loading {
  border-color: var(--accent3,rgba(11,110,255,.15));
  animation: ffPulse 1.4s ease-in-out infinite;
}
@keyframes ffPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .6;
  }
}
.ff-checker-found {
  border-color: var(--accent3,rgba(11,110,255,.35));
  background:
    linear-gradient(
      135deg,
      var(--accent3,rgba(11,110,255,.06)),
      var(--card,#1a2234));
  padding-right: 36px;
}
.ff-checker-notfound {
  border-color: rgba(255, 255, 255, .08);
}
.ff-checker-error {
  border-color: rgba(239, 68, 68, .25);
}
.ff-checker-avatar-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--accent3,rgba(11,110,255,.1));
  border: 1.5px solid var(--accent3,rgba(11,110,255,.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-checker-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ff-checker-avatar-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-checker-avatar-skeleton {
  width: 100%;
  height: 100%;
  background: var(--border2,rgba(255,255,255,.06));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.ff-checker-avatar-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .1),
      transparent);
  animation: ffSkeletonShimmer 1.2s infinite;
  will-change: transform;
}
@keyframes ffSkeletonShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.ff-checker-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ff-checker-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.ff-checker-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text,#f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-checker-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ff-checker-level {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--accent3,rgba(11,110,255,.15));
  color: var(--accent,#22d36b);
  border: 1px solid var(--accent3,rgba(11,110,255,.25));
}
.ff-checker-region {
  font-size: 11px;
  color: var(--text2,#94a3b8);
}
.ff-checker-sub {
  font-size: 11px;
  color: var(--text2,#94a3b8);
}
.ff-ban-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .25);
  letter-spacing: .03em;
}
.ff-checker-ok-icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--accent,#22d36b);
}
.ff-skeleton-line {
  border-radius: 6px;
  background: var(--border2,rgba(255,255,255,.06));
  position: relative;
  overflow: hidden;
}
.ff-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .1),
      transparent);
  animation: ffSkeletonShimmer 1.2s infinite;
  will-change: transform;
}
.ff-nick-help-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border2,rgba(255,255,255,.15));
  background: rgba(255, 255, 255, .06);
  color: var(--text2,#94a3b8);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s;
  padding: 0;
  line-height: 1;
  z-index: 1;
}
.ff-nick-help-btn:hover {
  background: var(--accent3,rgba(11,110,255,.15));
  border-color: var(--accent,#0b6eff);
  color: var(--accent,#0b6eff);
  transform: scale(1.08);
}
.nick-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 20, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, backdrop-filter .28s ease;
}
.nick-help-overlay.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(6, 10, 20, .55);
  backdrop-filter: blur(6px);
}
.nick-help-card {
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  background: var(--card,#1a2234);
  border: 1.5px solid var(--border2,rgba(255,255,255,.1));
  padding: 22px 20px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2, .9, .25, 1.1), opacity .25s ease;
}
.nick-help-overlay.show .nick-help-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.nick-help-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent3,rgba(11,110,255,.15));
  color: var(--accent,#0b6eff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.nick-help-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text,#f1f5f9);
  margin-bottom: 8px;
}
.nick-help-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2,#94a3b8);
  margin-bottom: 18px;
}
.nick-help-close {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: var(--accent,#0b6eff);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .15s;
}
.nick-help-close:hover {
  opacity: .9;
}
html.nav-panel-open {
  overflow: hidden !important;
}
.wlt-hero-coin {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35));
  position: relative;
  z-index: 1;
}
.wlt-hist-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.wlt-hist-filters::-webkit-scrollbar {
  display: none;
}
.wlt-hist-filter {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--f);
  cursor: pointer;
  white-space: nowrap;
}
.wlt-hist-filter.active {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px var(--accent-glow,rgba(99,102,241,.3));
}
.wlt-hist-filter:not(.active):hover {
  background: var(--card);
  color: var(--text);
}
.wlt-tx-clickable {
  cursor: pointer;
}
.wlt-tx-clickable:hover {
  background: var(--card2);
}
.wlt-tx-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}
.wlt-topup-amt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wlt-input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: var(--card2);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--f);
  outline: 0;
  width: 100%;
}
.wlt-input:focus {
  border-color: var(--accent);
}
.wlt-input-full {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: var(--card2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--f);
  outline: 0;
  box-sizing: border-box;
}
.wlt-input-full:focus {
  border-color: var(--accent);
}
.wlt-input-cur {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.wlt-max-btn {
  padding: 12px 14px;
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--f);
  white-space: nowrap;
  flex-shrink: 0;
}
.wlt-max-btn:hover {
  border-color: var(--accent);
}
.wlt-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.wlt-quick-btn {
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
}
.wlt-quick-btn.active,
.wlt-quick-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb,99 102 241)/.12);
  color: var(--accent);
}
.wlt-pay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 420px) {
  .wlt-pay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wlt-pay-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
  position: relative;
}
.wlt-pay-opt:hover {
  border-color: var(--accent);
}
.wlt-pay-opt.active {
  border-color: var(--accent);
  background: rgba(34, 197, 94, .08);
  color: var(--accent);
}
.wlt-pay-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
}
.wlt-pay-check {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-size: 8px;
  align-items: center;
  justify-content: center;
}
.wlt-pay-opt.active .wlt-pay-check {
  display: flex;
}
.wlt-qr-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 12px;
  transition: opacity .15s;
}
.wlt-qr-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.5;
}
.wlt-drop-zone {
  border: 2px dashed var(--border2);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 14px;
}
.wlt-drop-zone.drag-over,
.wlt-drop-zone:hover {
  border-color: var(--accent);
  background: rgba(34, 197, 94, .04);
}
.wlt-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.wlt-drop-inner i {
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 4px;
}
.wlt-drop-sub {
  font-size: 11px;
  font-weight: 500;
}
.wlt-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent-grad);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--f);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .2s, transform .15s;
  margin-bottom: 10px;
}
.wlt-submit-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}
.wlt-submit-btn:active {
  transform: scale(.98);
}
.wlt-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.wlt-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.wlt-crypto-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(168, 85, 247, .06);
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, .2);
  margin-bottom: 16px;
}
.wlt-crypto-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(168, 85, 247, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #a855f7;
  flex-shrink: 0;
}
.wlt-notice {
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.wlt-notice-warn {
  background: rgba(245, 158, 11, .08);
  border: 1.5px solid rgba(245, 158, 11, .25);
  color: #f59e0b;
}
.wlt-form-err {
  color: #f87171;
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(248, 113, 113, .08);
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(248, 113, 113, .18);
  margin-bottom: 10px;
  font-weight: 600;
}
.wlt-form-err.hidden {
  display: none;
}
@media (max-width: 360px) {
  .header-wrap {
    padding: 6px 8px;
  }
  header {
    padding: 0 7px;
    gap: 3px;
    height: 44px;
  }
  main {
    padding-top: 58px;
  }
  .logo-area img {
    width: 38px;
    height: 38px;
  }
  #themeToggleBtn {
    width: 30px;
    height: 30px;
  }
  #headerBalancePill {
    height: 32px;
    padding: 0 8px 0 3px;
    gap: 4px;
    border-radius: 10px;
  }
  #headerBalanceImg {
    width: 26px;
    height: 26px;
  }
  #headerBalanceAmt {
    font-size: 12px;
  }
  .hbp-cur {
    font-size: 10px;
  }
  #headerLoginBtn {
    padding: 5px 9px 5px 8px;
    font-size: 12px;
    border-radius: 14px;
  }
  #headerLoginBtn svg {
    width: 15px;
    height: 15px;
  }
}
.coupon-steps {
  padding: 0 0 18px;
}
.coupon-steps .lf-steps-track {
  max-width: 100%;
  width: 100%;
  margin: 0 auto 10px;
}
.coupon-steps .lf-step-node {
  min-width: 64px;
}
.coupon-steps .lf-step-label {
  font-size: 10.5px;
}
.coupon-enter-wrap {
  min-height: calc(100dvh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.coupon-enter-card {
  width: 100%;
  max-width: none;
  flex-shrink: 1;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.coupon-explainer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 14px 16px;
}
.coupon-explainer-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--accent3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.coupon-explainer-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.coupon-explainer-text {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}
.coupon-free-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.coupon-price-old {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
  text-decoration: line-through;
  opacity: .75;
}
.coupon-price-free {
  font-size: 18px;
  font-weight: 900;
  color: var(--green);
}
.coupon-price-old-inline {
  font-size: 12px;
}
.coupon-price-free-inline {
  font-size: 14px;
  font-weight: 900;
  color: var(--green);
}
.coupon-enter-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
}
.coupon-enter-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.coupon-enter-icon i {
  font-size: 26px;
  color: var(--accent);
}
.coupon-enter-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -.2px;
}
.coupon-enter-desc {
  margin: 0 0 22px !important;
  max-width: 320px;
}
.coupon-enter-field {
  width: 100%;
  margin-bottom: 14px;
  position: relative;
}
.coupon-code-input {
  text-align: center;
  letter-spacing: 1.5px;
  font-size: 17px;
  text-transform: uppercase;
  padding-right: 18px;
}
.coupon-code-counter {
  position: absolute;
  right: 4px;
  bottom: -18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
}
.coupon-enter-card .lf-btn,
.coupon-enter-card .lf-delivery-badge,
.coupon-enter-card .lf-field,
.coupon-enter-card .lf-product-card {
  width: 100%;
}
.coupon-enter-card .lf-delivery-badge,
.coupon-enter-card .lf-product-card {
  text-align: left;
}
.coupon-enter-card #cpnErr {
  width: 100%;
  text-align: left;
}
.coupon-pick-desc {
  text-align: left;
  margin: 0 0 18px !important;
  max-width: none;
}
.coupon-pick-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  color: var(--accent);
  font-size: 22px;
}
.coupon-pick-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.coupon-pick-card {
  margin-bottom: 0;
  cursor: pointer;
  transition: transform .1s;
}
.coupon-pick-card:focus-visible,
.coupon-pick-card:hover {
  border-color: var(--accent);
  outline: 0;
}
.coupon-pick-card:active {
  transform: scale(.98);
}
.coupon-pick-arrow {
  margin-left: auto;
  color: var(--text3);
  flex-shrink: 0;
}
.coupon-page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 80px 0;
  color: var(--text2);
  font-weight: 600;
  font-size: 14px;
  min-height: calc(100dvh - 200px);
  justify-content: center;
}
.coupon-page-loading i {
  font-size: 26px;
  color: var(--accent);
}
.coupon-err {
  background: rgba(239, 68, 68, .1);
  border: 1.5px solid rgba(239, 68, 68, .3);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 14px;
  width: 100%;
  text-align: left;
}
.coupon-page-error,
.coupon-page-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 16px;
  text-align: center;
  min-height: calc(100dvh - 200px);
}
.coupon-page-error-icon,
.coupon-page-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.coupon-page-error-icon {
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
}
.coupon-page-success-icon {
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
  font-size: 32px;
}
.coupon-page-error-title,
.coupon-page-success-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.coupon-page-error-text,
.coupon-page-success-text {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
  line-height: 1.5;
  max-width: 320px;
}
.coupon-confirm-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card2);
  border: 1.5px solid var(--border2);
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 16px;
  text-align: left;
}
.coupon-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border2);
}
.coupon-confirm-row:last-child {
  border-bottom: none;
}
.coupon-confirm-row span {
  color: var(--text2);
  font-weight: 600;
}
.coupon-confirm-row strong {
  color: var(--text);
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}
.coupon-confirm-hint {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  background: rgba(11, 110, 255, .07);
  border: 1px solid rgba(11, 110, 255, .18);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 18px;
}
.coupon-confirm-hint i {
  color: var(--accent);
  margin-top: 1px;
  flex-shrink: 0;
}
.coupon-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.coupon-confirm-actions .lf-btn,
.coupon-confirm-actions .lf-btn-secondary {
  width: auto;
  flex: 1;
}
@media (max-width: 480px) {
  .coupon-confirm-actions {
    flex-direction: column-reverse;
  }
}
.card,
.history-order-card,
.lf-btn,
.primary-btn,
.trust-card,
header,
ss .platform-card {
  transform: translateZ(0);
}
.faq-section,
.reviews-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 860px) {
  .card,
  .history-order-card,
  .platform-card,
  .trust-card {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  .history-order-card:hover,
  .platform-card:hover,
  .trust-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  }
  .history-order-card:nth-child(n+4),
  .platform-card:nth-child(n+5) {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.platform-card-img {
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
#platformScreen {
  animation: fadeUp .4s var(--ease) both;
}
.home-search {
  position: relative;
  z-index: 101;
  padding: 4px 0 24px;
}
.home-search-wrap.smart-search-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}
.home-search-box.smart-search-box {
  min-height: 54px;
  padding: 5px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-color: var(--border2);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .48);
}
.home-search-box.smart-search-box:focus-within {
  transform: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent3), 0 12px 30px -20px var(--accent-glow);
}
.home-search-box .smart-search-input {
  font-size: 14px;
  padding: 13px 0;
}
.home-search-wrap .smart-search-results {
  left: 0;
  right: 0;
}
@media (max-width: 760px) {
  .home-search {
    padding: 0 0 20px;
  }
  .home-search-box.smart-search-box {
    min-height: 50px;
    border-radius: 16px;
    padding: 4px 15px;
  }
  .home-search-box .smart-search-input {
    font-size: 13.5px;
  }
}
@keyframes mvFloatA {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -22px) scale(1.06);
  }
}
@keyframes mvFloatB {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-24px, 16px) scale(1.08);
  }
}
@keyframes mvDot {
  0%, 100% {
    opacity: .55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}
@keyframes mvRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mvShine {
  from {
    transform: translateX(-120%) rotate(8deg);
  }
  to {
    transform: translateX(220%) rotate(8deg);
  }
}
.mv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  margin: 4px 0 30px;
  padding: 36px 44px 34px;
  border: 1px solid var(--border2);
  background:
    radial-gradient(
      120% 150% at 12% -15%,
      rgba(74, 222, 128, .32) 0,
      transparent 58%),
    radial-gradient(
      90% 120% at 100% 115%,
      rgba(21, 128, 61, .3) 0,
      transparent 60%),
    linear-gradient(
      175deg,
      var(--card) 0,
      var(--card2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 20px 60px -30px rgba(0, 0, 0, .45);
}
.mv-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mv-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .7;
  will-change: transform;
}
.mv-orb-a {
  width: 400px;
  height: 400px;
  right: -110px;
  top: -160px;
  background:
    radial-gradient(
      circle,
      var(--accent) 0,
      var(--cyan,#22d3ee) 55%,
      transparent 72%);
  animation: mvFloatA 13s ease-in-out infinite;
}
.mv-orb-b {
  width: 300px;
  height: 300px;
  left: -70px;
  bottom: -140px;
  background:
    radial-gradient(
      circle,
      var(--cyan,#22d3ee) 0,
      var(--accent) 60%,
      transparent 72%);
  opacity: .4;
  animation: mvFloatB 16s ease-in-out infinite;
}
.mv-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-glow) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--accent-glow) 1px,
      transparent 1px);
  background-size: 46px 46px;
  opacity: .3;
  -webkit-mask-image:
    radial-gradient(
      120% 100% at 50% 0%,
      #000 0%,
      transparent 72%);
  mask-image:
    radial-gradient(
      120% 100% at 50% 0%,
      #000 0%,
      transparent 72%);
}
.mv-hero-noise {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      160% 120% at 50% 120%,
      rgba(0, 0, 0, .22) 0,
      transparent 60%);
}
.mv-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mv-hero-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--accent3);
  border: 1px solid var(--accent-glow);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 16px;
  transition: transform .28s var(--spring);
  animation: mvRise .5s var(--ease) both;
}
.mv-hero-tg:hover {
  background: var(--accent-glow);
  transform: translateY(-1px);
  color: var(--accent);
  text-decoration: none;
}
.mv-hero-tg i {
  font-size: 9px;
  transition: transform .28s var(--spring);
}
.mv-hero-tg:hover i {
  transform: translateX(3px);
}
.mv-hero-tg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-grad);
  animation: mvDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.mv-hero-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 12px;
  animation: mvRise .55s .05s var(--ease) both;
}
.mv-hero-title-accent {
  background:
    linear-gradient(
      100deg,
      var(--accent) 10%,
      var(--green2,var(--accent)) 55%,
      var(--cyan,var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mv-hero-sub {
  font-size: 14px;
  color: var(--text2);
  font-weight: 500;
  line-height: 1.55;
  max-width: 500px;
  margin-bottom: 22px;
  animation: mvRise .55s .1s var(--ease) both;
}
.mv-hero-search {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  animation: mvRise .55s .15s var(--ease) both;
}
.mv-search-box {
  padding: 5px 8px 5px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border3);
  background: var(--card);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
}
.mv-search-box .smart-search-input {
  padding: 13px 0;
  font-size: 14.5px;
}
.mv-search-box .smart-search-icon {
  font-size: 14px;
}
.mv-search-box:focus-within {
  box-shadow: 0 0 0 5px var(--accent-glow), 0 10px 30px -14px rgba(0, 0, 0, .35);
}
.mv-hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  animation: mvRise .55s .2s var(--ease) both;
}
.mv-hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.mv-hero-stat-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent3);
  color: var(--accent);
  font-size: 13.5px;
}
.mv-hero-stat strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
.mv-hero-stat span {
  display: block;
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 600;
  margin-top: 1px;
}
.mv-hero-stat-sep {
  width: 1px;
  align-self: center;
  height: 26px;
  background: var(--border3);
}
@media (max-width: 760px) {
  .mv-hero {
    padding: 24px 18px 22px;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .mv-hero-tg {
    margin-bottom: 12px;
  }
  .mv-hero-title {
    font-size: 23px;
    letter-spacing: -.6px;
    margin-bottom: 8px;
    line-height: 1.18;
  }
  .mv-hero-sub {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .mv-search-box .smart-search-input {
    padding: 10px 0;
    font-size: 13.5px;
  }
  .mv-hero-stats {
    gap: 10px 16px;
  }
  .mv-hero-stat {
    gap: 7px;
  }
  .mv-hero-stat-icon {
    width: 28px;
    height: 28px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .mv-hero-stat strong {
    font-size: 12px;
  }
  .mv-hero-stat span {
    font-size: 10.5px;
  }
  .mv-hero-stat-sep {
    display: none;
  }
}
@media (max-width: 420px) {
  .mv-hero {
    padding: 20px 14px 20px;
  }
  .mv-hero-title {
    font-size: 20px;
  }
  .mv-hero-sub {
    font-size: 12.5px;
    margin-bottom: 16px;
  }
}
.mv-catalog {
  padding: 0 0 8px;
}
.mv-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mv-catalog-title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
  margin-bottom: 3px;
}
.mv-catalog-sub {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
}
.mv-tabs.section-tabs {
  margin: 0;
}
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 600px) {
  .mv-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 900px) {
  .mv-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1140px) {
  .mv-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 374px) {
  .mv-grid {
    gap: 10px;
  }
}
.mv-card {
  position: relative;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: var(--card);
  overflow: hidden;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .32s var(--spring), box-shadow .32s;
}
.mv-card.mv-card-anim {
  animation: mvFadeQuick .15s ease-out both;
}
@keyframes mvFadeQuick { from { opacity: 0; } to { opacity: 1; } }
.mv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255, 255, 255, .1) 50%,
      transparent 60%);
  transform: translateX(-120%) rotate(8deg);
  pointer-events: none;
}
.mv-card:hover::before {
  animation: mvShine 1.1s ease;
}
.mv-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-glow);
  background: var(--card2);
  box-shadow: 0 18px 34px -18px var(--accent-glow), 0 2px 10px rgba(0, 0, 0, .14);
}
.mv-card:active {
  transform: translateY(-2px) scale(.99);
}
.mv-card-media {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(
      160deg,
      var(--card3),
      var(--card2));
  border: 1px solid var(--border);
}
.mv-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--spring);
}
.mv-card:hover .mv-card-img {
  transform: scale(1.09);
}
.mv-card-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 12px;
}
.mv-card-info h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-card-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.mv-card:hover .mv-card-price {
  color: var(--accent);
}
.mv-card-go {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border3);
  color: var(--text2);
  font-size: 10px;
  opacity: 0;
  transform: translateY(-4px) scale(.85);
  transition:
    transform,
    box-shadow,
    opacity;
}
.mv-card:hover .mv-card-go {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #fff;
}
@media (hover: none) and (pointer: coarse) {
  .mv-card:hover {
    transform: none;
    box-shadow: none;
  }
  .mv-card:active {
    transform: scale(.97);
  }
  .mv-card:hover .mv-card-img {
    transform: none;
  }
  .mv-card-go {
    display: none;
  }
}
@media (max-width: 760px) {
  .mv-card {
    border-radius: 16px;
  }
  .mv-card-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 10px 10px;
  }
  .mv-card-info h3 {
    font-size: 11.5px;
    width: 100%;
  }
  .mv-card-price {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .mv-catalog-head {
    align-items: flex-start;
  }
}
.mv-why {
  padding: 40px 0 12px;
}
.mv-why-head {
  text-align: center;
  margin-bottom: 20px;
}
.mv-why-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.mv-why-title {
  font-family: var(--f-display);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
}
.mv-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mv-why-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: var(--card);
  transition: transform .28s var(--spring);
}
.mv-why-card:hover {
  border-color: var(--accent-glow);
  background: var(--card2);
  transform: translateY(-3px);
}
.mv-why-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      rgba(74, 222, 128, .22) 0,
      rgba(21, 128, 61, .12) 100%);
  border: 1px solid var(--accent-glow);
  color: var(--accent);
  font-size: 15px;
}
.mv-why-icon::before {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mv-why-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-why-text strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.mv-why-text span {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .mv-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mv-why {
    padding: 30px 0 8px;
  }
}
@media (max-width: 420px) {
  .mv-why-card {
    padding: 16px 14px;
  }
}
.auth-btn:active,
.auth-btn:focus,
.auth-btn:hover,
.buy-btn:active,
.buy-btn:focus,
.buy-btn:hover,
.hero-cta-main:active,
.hero-cta-main:focus,
.hero-cta-main:hover,
.hero-cta:active,
.hero-cta:focus,
.hero-cta:hover,
.history-detail-btn:active,
.history-detail-btn:focus,
.history-detail-btn:hover,
.lf-btn:active,
.lf-btn:focus,
.lf-btn:hover,
.primary-btn:active,
.primary-btn:focus,
.primary-btn:hover {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.auth-btn::after,
.auth-btn::before,
.buy-btn::after,
.buy-btn::before,
.hero-cta-main::after,
.hero-cta-main::before,
.hero-cta::after,
.hero-cta::before,
.lf-btn::after,
.lf-btn::before,
.primary-btn::after,
.primary-btn::before {
  display: none !important;
  content: none !important;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border2);
  flex-shrink: 1;
  min-width: 0;
}
.header-nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text2);
  background: 0 0;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--f);
  white-space: nowrap;
}
.header-nav-link i {
  font-size: 12.5px;
  opacity: .85;
}
.header-nav-link:hover {
  background: var(--card2);
  color: var(--text);
}
.header-nav-link.active {
  background: var(--accent3);
  color: var(--accent);
  border-color: var(--accent-glow);
}
.header-nav-link.active i {
  opacity: 1;
}
.header-nav-link-promo {
  background: rgba(245, 158, 11, .09);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .22);
}
.header-nav-link-promo:hover {
  background: rgba(245, 158, 11, .16);
  color: #f59e0b;
}
.header-nav-link-promo.active {
  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #f97316);
  color: #fff;
  border-color: transparent;
}
.header-tg-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 15px;
  text-decoration: none;
}
.header-tg-btn:hover {
  background: #2aabee;
  color: #fff;
  border-color: #2aabee;
}
.account-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border2);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--f);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.account-trigger-login {
  padding: 7px 14px 7px 10px;
  gap: 7px;
}
.account-trigger-btn:hover {
  background: var(--card2);
  border-color: var(--border3);
}
.account-trigger-btn.open {
  background: var(--accent3);
  border-color: var(--accent-glow);
  color: var(--accent);
}
.account-trigger-avatar-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.account-trigger-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-trigger-chevron {
  font-size: 9px;
  color: var(--text3);
  transition: transform .25s var(--ease);
}
.account-trigger-btn.open .account-trigger-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 99980;
  background: rgba(10, 11, 14, .68);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.account-overlay.open {
  opacity: 1;
  pointer-events: all;
}
/* Скрытые оверлеи не рисуются: размытие фона под невидимым полноэкранным слоем
   иначе пересчитывается при каждой прокрутке (затухание сохраняется). */
.account-overlay:not(.open),
.nick-help-overlay:not(.show) {
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.account-panel {
  position: fixed;
  z-index: 99990;
  background: var(--card);
  border: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.account-panel-handle {
  display: none;
}
.account-panel-close {
  display: none;
}
#userMenu {
  flex-direction: column;
  gap: 14px;
  padding: 2px 2px 4px;
}
.ap-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 8px;
  margin: 0 -2px;
  background: 0 0;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 16px;
  font-family: var(--f);
}
.ap-hero:hover {
  background: var(--card2);
}
.ap-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 2px;
  background: var(--accent-grad);
}
.ap-hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--card2);
  border: 2px solid var(--card);
}
.ap-hero-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ap-hero-info strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-hero-info span#dropdownEmail {
  font-size: 12.5px;
  color: var(--text3);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-hero-info span#dropdownEmail:empty {
  display: none;
}
.ap-hero-link {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 1px;
}
.ap-hero-chevron {
  font-size: 12px;
  color: var(--text3);
  flex-shrink: 0;
  margin-left: auto;
}
.ap-balance-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      var(--accent3),
      rgba(34, 211, 107, .03));
  border: 1.5px solid var(--accent-glow);
  cursor: pointer;
  text-align: left;
  font-family: var(--f);
  transition: transform .18s var(--spring);
}
.ap-balance-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.ap-balance-card:active {
  transform: scale(.99);
}
.ap-balance-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(34, 211, 107, .28);
}
.ap-balance-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ap-balance-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.ap-balance-text span {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 500;
  white-space: nowrap;
}
.ap-balance-amount {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ap-balance-chevron {
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
}
.ap-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ap-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 10px;
}
.ap-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 3px;
  overflow: hidden;
}
.account-panel-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 9px;
  border-radius: 13px;
  background: 0 0;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--f);
}
.account-panel-item:hover {
  background: var(--card);
}
.account-panel-item.active {
  background: var(--accent3);
  color: var(--accent);
}
.account-panel-item.active .account-panel-icon {
  color: var(--accent);
}
.account-panel-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--card);
  color: var(--text2);
}
.ap-icon-violet {
  background: rgba(139, 92, 246, .14);
  color: #8b5cf6;
}
.ap-icon-green {
  background: var(--accent3);
  color: var(--accent);
}
.ap-icon-tg {
  background: rgba(42, 171, 238, .14);
  color: #2aabee;
}
.ap-icon-amber {
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}
.ap-icon-red {
  background: rgba(244, 63, 94, .14);
  color: var(--danger);
}
.ap-chev {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text3);
}
.ap-chev-ext {
  font-size: 10px;
}
.account-panel-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}
.account-panel-tag-green {
  background: rgba(34, 211, 107, .15);
  color: var(--accent);
}
.account-panel-logout {
  color: var(--danger);
}
.account-panel-logout:hover {
  background: rgba(244, 63, 94, .1);
}
.account-panel-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 16px 14px;
  gap: 4px;
}
.account-panel-guest-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--accent3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.account-panel-guest h3 {
  font-size: 21px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  letter-spacing: -.01em;
}
.account-panel-guest p {
  font-size: 13.5px;
  color: var(--text2);
  font-weight: 500;
  margin: 8px 0 22px;
  max-width: 280px;
  line-height: 1.5;
}
.account-panel-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  color: #1c1c1e;
  border: none;
  font-size: 15.5px;
  font-weight: 800;
  font-family: var(--f);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .18s var(--spring), box-shadow .18s;
}
.account-panel-google-btn svg {
  width: 21px;
  height: 21px;
}
.account-panel-google-btn:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}
.account-panel-google-btn:active {
  transform: scale(.98);
}
.account-panel-guest-tg {
  margin-top: 12px;
  justify-content: center;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(42, 171, 238, .12);
  border: 1.5px solid rgba(42, 171, 238, .28);
  font-size: 15px;
  font-weight: 800;
  gap: 10px;
  transition: transform .18s var(--spring);
}
.account-panel-guest-tg:hover {
  background: rgba(42, 171, 238, .18);
  transform: translateY(-1px);
}
.account-panel-guest-tg i {
  font-size: 19px;
}
@media (min-width: 861px) {
  .account-panel {
    top: 68px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: 300px;
    max-height: min(70vh, 560px);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .14);
    transform: translateY(-6px) scale(.97);
    transition: opacity .18s ease, transform .2s var(--ease);
  }
  .account-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
  }
  .account-panel-guest {
    padding: 20px 8px 8px;
  }
  .bottom-tabbar {
    display: none;
  }
}
@media (max-width: 860px) {
  .account-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(400px, calc(100vw - 32px));
    max-height: min(86vh, 640px);
    border-radius: 24px;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.94);
    transition: opacity .26s ease, transform .32s var(--spring);
  }
  .account-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
  }
  .account-panel-handle {
    display: none;
  }
  .account-panel-close {
    display: flex;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card2);
    border: 1px solid var(--border2);
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 13px;
    cursor: pointer;
  }
  .account-panel-item {
    padding: 12px 10px;
    font-size: 14px;
  }
  .ap-hero {
    padding: 8px 26px 8px 8px;
  }
  .ap-hero-info strong {
    font-size: 15.5px;
  }
  #desktopNavProfile,
  .header-nav,
  .header-tg-btn {
    display: none !important;
  }
}
.account-panel.is-guest {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(.94);
  width: min(400px, calc(100vw - 32px));
  max-height: min(88vh, 620px);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3);
  transition: opacity .22s ease, transform .28s var(--spring);
}
.account-panel.is-guest.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.account-panel.is-guest .account-panel-handle {
  display: none;
}
.account-panel.is-guest .account-panel-close {
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--border2);
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
}
.bottom-tabbar {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 10000;
  display: none;
  background: var(--card2);
  border: 1px solid var(--border3);
  border-radius: 26px;
  padding: 6px;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3);
  transform: translateZ(0);
}
.bottom-tabbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, .14),
      transparent 30%,
      transparent 68%,
      var(--accent3));
  opacity: .8;
}
.bottom-tabbar::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 24px;
  z-index: -1;
  background:
    radial-gradient(
      50% 100% at 50% 0,
      var(--accent-glow),
      transparent 75%);
  opacity: .55;
  filter: blur(6px);
  pointer-events: none;
}
@keyframes dock-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 860px) {
  .bottom-tabbar {
    display: flex;
  }
  main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}
.tabbar-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      155deg,
      var(--accent3),
      color-mix(in srgb, var(--accent) 14%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 4px 14px -6px var(--accent-glow);
  opacity: 0;
  transition: transform .48s var(--spring), opacity .25s var(--ease);
}
.tabbar-indicator.is-visible {
  opacity: 1;
}
.tabbar-indicator.is-pressed {
  transform-origin: center;
}
.bottom-tabbar .tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 2px 6px;
  border-radius: 18px;
  min-height: 56px;
  background: 0 0;
  border: none;
  cursor: pointer;
  font-family: var(--f);
  color: var(--text3);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
  overflow: visible;
  transition: transform .3s var(--spring);
}
.bottom-tabbar .tabbar-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition: transform .38s var(--spring);
}
.bottom-tabbar .tabbar-item i {
  font-size: 17px;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: transform .38s var(--spring);
}
.bottom-tabbar .tabbar-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .3s var(--spring), opacity .25s var(--ease);
  position: relative;
  z-index: 1;
  transform: translateY(0);
}
.bottom-tabbar .tabbar-item:active .tabbar-icon {
  transform: scale(.86);
}
.bottom-tabbar .tabbar-item:active .tabbar-label {
  transform: scale(.94);
}
.bottom-tabbar .tabbar-item.active,
.bottom-tabbar .tabbar-item.open {
  color: var(--accent);
  background: 0 0;
  border-color: transparent;
}
.bottom-tabbar .tabbar-item.active .tabbar-icon,
.bottom-tabbar .tabbar-item.open .tabbar-icon {
  transform: translateY(-1px);
}
.bottom-tabbar .tabbar-item.active i,
.bottom-tabbar .tabbar-item.open i {
  transform: scale(1.08);
}
.bottom-tabbar .tabbar-item.active .tabbar-label,
.bottom-tabbar .tabbar-item.open .tabbar-label {
  transform: translateY(1px);
}
.bottom-tabbar .tabbar-item.tab-pop .tabbar-icon {
  animation: tab-pop .42s var(--spring);
}
@keyframes tab-pop {
  0% {
    transform: translateY(-1px) scale(1);
  }
  38% {
    transform: translateY(-3px) scale(1.22);
  }
  100% {
    transform: translateY(-1px) scale(1);
  }
}
@media (min-width: 380px) and (max-width: 860px) {
  .bottom-tabbar .tabbar-label {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-tabbar,
  .bottom-tabbar .tabbar-icon,
  .bottom-tabbar .tabbar-item,
  .bottom-tabbar .tabbar-item i,
  .bottom-tabbar .tabbar-label,
  .tabbar-indicator {
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .logo-area img {
    width: 140px;
    height: 48px;
  }
  .header-nav {
    padding-left: 10px;
    margin-left: 4px;
    gap: 1px;
  }
  .header-nav-link {
    padding: 8px 10px;
  }
  .header-nav-link .nav-label {
    display: none;
  }
  .account-trigger-name {
    max-width: 70px;
  }
}
.card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  transition: transform .26s var(--spring), box-shadow .22s var(--ease);
}
.card:hover {
  border-color: var(--accent-glow);
  background: var(--card2);
  box-shadow: 0 12px 26px -14px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, .12);
}
.card-img-wrap {
  background:
    linear-gradient(
      160deg,
      var(--card3),
      var(--card2));
}
.card-body {
  padding: 11px 11px 12px;
}
.card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}
.card-price-val {
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -.2px;
}
.card-price-label {
  color: var(--text3);
}
.buy-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-grad);
  box-shadow: 0 3px 10px -3px var(--accent-glow);
}
.buy-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 14px -3px var(--accent-glow);
}
.buy-btn:active {
  transform: scale(.92);
}
.card-sale-badge {
  background:
    linear-gradient(
      135deg,
      #f97316,
      #ef4444);
  box-shadow: 0 2px 8px rgba(239, 68, 68, .35);
}
.filter-btn {
  background: var(--card);
  border-color: var(--border2);
  font-weight: 700;
  letter-spacing: .01em;
}
.filter-btn:hover {
  background: var(--card2);
  border-color: var(--border3);
}
.filter-btn.active {
  background: var(--accent-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.section-tab {
  border-radius: var(--radius-full);
  font-weight: 700;
}
.section-tab.active {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.back-btn {
  background: var(--card);
  border: 1.5px solid var(--border2);
  color: var(--text2);
  font-weight: 700;
}
.back-btn:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent3);
}
.catalog-top-bar {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border2);
  border-radius: 0 0 16px 16px;
  padding: 14px 4px 12px;
}
.catalog-title,
.catalog-top-bar .catalog-title {
  font-family: var(--f-display);
  letter-spacing: -.3px;
}
.auth-btn:not(.account-trigger-btn),
.lf-btn,
.primary-btn {
  background: var(--accent-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px -6px var(--accent-glow) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.lf-btn:hover,
.primary-btn:hover {
  filter: brightness(1.06);
}
.lf-btn:active,
.primary-btn:active {
  transform: scale(.98);
}
.lf-btn-secondary {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border2) !important;
  box-shadow: none !important;
}
.lf-btn-secondary:hover {
  background: var(--card2) !important;
  border-color: var(--border3) !important;
}
.lf-btn:disabled {
  opacity: .5 !important;
  box-shadow: none !important;
  filter: none !important;
}
.history-order-card {
  background: var(--card);
  border: 1px solid var(--border2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.history-order-card:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 10px 24px -14px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, .12);
}
.history-order-num {
  font-family: var(--f-display);
}
.history-detail-btn {
  background: var(--accent-grad);
  box-shadow: 0 4px 12px -4px var(--accent-glow);
}
.history-detail-btn:hover {
  box-shadow: 0 6px 16px -4px var(--accent-glow);
}
.profile-header-card {
  background:
    linear-gradient(
      160deg,
      var(--card2),
      var(--card));
  border: 1px solid var(--border2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.profile-header-card::before {
  height: 56px;
  background:
    linear-gradient(
      120deg,
      var(--accent) 0,
      var(--accent2,var(--accent)) 60%,
      transparent 100%);
  opacity: .85;
}
.profile-avatar {
  border-color: var(--card);
  box-shadow: 0 0 0 2px var(--accent-glow);
  position: relative;
  z-index: 1;
}
.profile-info {
  position: relative;
  z-index: 1;
}
.profile-badge {
  background: var(--accent3);
  color: var(--accent);
  border-color: var(--accent-glow);
  font-weight: 800;
}
.status-badge {
  font-weight: 800;
  letter-spacing: .01em;
}
.catalog-title,
.mv-catalog-title,
.platform-reviews-header h3 {
  font-family: var(--f-display);
  letter-spacing: -.3px;
}
.review-card {
  background: var(--card);
  border-color: var(--border2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.review-card:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 10px 24px -14px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, .12);
  transform: translateX(2px);
}
.review-stars {
  color: #f59e0b;
}
.toast {
  background: var(--card);
  border-color: var(--border2);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.empty-state .empty-icon,
.empty-state i {
  color: var(--text3);
}
.lf-accent-bar {
  box-shadow: 0 2px 10px -2px var(--accent-glow);
}
.lf-platform-icon {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 0 1px var(--border2);
}
.step-dot.active {
  box-shadow: 0 0 0 4px var(--accent3), 0 0 16px var(--accent-glow);
}
.lf-product-card {
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 16px;
}
#ordChatBackdrop {
  background: rgba(6, 10, 8, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .3s;
}
#ordChatPanel {
  width: 396px;
  height: 620px;
  max-height: calc(100dvh - 96px);
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .32),
    0 6px 20px rgba(0, 0, 0, .16),
    0 0 0 1px var(--border);
  overflow: hidden;
  transform: translateY(18px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
}
#ordChatPanel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
.ordchat-pro-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 8px;
  background: var(--accent-grad);
  flex-shrink: 0;
  min-height: 60px;
  box-sizing: border-box;
  position: relative;
}
.ordchat-pro-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.ordchat-close-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ordchat-close-btn:hover {
  background: rgba(255, 255, 255, .26);
}
.ordchat-close-btn:active {
  transform: scale(.88);
}
.ordchat-pro-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 2px solid rgba(255, 255, 255, .34);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  position: relative;
}
.ordchat-pro-avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4ade80;
  border: 2.5px solid rgba(255, 255, 255, .95);
}
.ordchat-pro-title {
  flex: 1;
  min-width: 0;
}
.ordchat-pro-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
  line-height: 1.2;
}
.ordchat-pro-status {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-weight: 500;
}
.ordchat-pro-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #86efac;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(134, 239, 172, .75);
  animation: ocPulse 2.4s infinite;
}
@keyframes ocPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .45;
  }
}
.ordchat-order-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.ordchat-order-card:empty {
  display: none;
}
.ordchat-oc-media {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
}
.ordchat-oc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ordchat-oc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ordchat-oc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ordchat-oc-product {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ordchat-oc-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.ordchat-oc-price-cur {
  font-weight: 600;
  opacity: .75;
  font-size: 11px;
}
.ordchat-oc-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ordchat-oc-platform {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ordchat-oc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}
.ordchat-oc-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ordchat-oc-acc,
.ordchat-oc-date {
  font-size: 10.5px;
  color: var(--text3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#ordChatMessages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg2);
  position: relative;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}
#ordChatMessages::-webkit-scrollbar {
  width: 4px;
}
#ordChatMessages::-webkit-scrollbar-track {
  background: 0 0;
}
#ordChatMessages::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
.ordchat-date-sep {
  display: flex;
  justify-content: center;
  margin: 10px 0 12px;
  position: sticky;
  top: 2px;
  z-index: 2;
  pointer-events: none;
}
.ordchat-date-sep span {
  background: var(--card);
  border: 1px solid var(--border2);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  letter-spacing: .1px;
}
#ordChatPanel .amsg-msg-wrap {
  margin-bottom: 9px;
  animation: none;
}
#ordChatPanel .amsg-msg-wrap.ordchat-grouped {
  margin-bottom: 2px;
}
#ordChatPanel .amsg-msg-wrap.ordchat-anim-in {
  animation: ordchatMsgIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ordchatMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ordChatPanel .amsg-msg-wrap.ordchat-anim-in {
    animation: none;
  }
}
#ordChatPanel .amsg-bubble {
  padding: 8px 12px 21px;
  border-radius: 17px;
  max-width: 78%;
  font-size: 14.5px;
  line-height: 1.44;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .05);
}
#ordChatPanel .amsg-msg-in .amsg-bubble {
  background: var(--card);
  border: 1px solid var(--border2);
  border-bottom-left-radius: 5px;
  color: var(--text);
}
#ordChatPanel .amsg-msg-in.ordchat-grouped .amsg-bubble {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
#ordChatPanel .amsg-msg-out .amsg-bubble {
  background: var(--accent-grad);
  border-bottom-right-radius: 5px;
  color: #fff;
  box-shadow: 0 2px 10px rgba(34, 211, 107, .22);
}
#ordChatPanel .amsg-msg-out.ordchat-grouped .amsg-bubble {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
#ordChatPanel .amsg-bubble-sender {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
  letter-spacing: .1px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#ordChatPanel .amsg-msg-in .amsg-bubble-sender {
  color: var(--accent);
}
#ordChatPanel .ordchat-grouped .amsg-bubble-sender {
  display: none;
}
#ordChatPanel .amsg-bubble-text {
  white-space: pre-wrap;
}
#ordChatPanel .amsg-bubble-time {
  position: absolute;
  bottom: 4px;
  right: 11px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
#ordChatPanel .amsg-msg-out .amsg-bubble-time {
  color: rgba(255, 255, 255, .78);
}
#ordChatPanel .amsg-msg-in .amsg-bubble-time {
  color: var(--text-muted);
  opacity: .75;
}
#ordChatPanel .amsg-msgs-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 4px;
}
.ordchat-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 10px;
}
.ordchat-empty-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.ordchat-empty-sub {
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 240px;
  margin: 2px 0 0;
}
.ordchat-skeleton {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
  justify-content: flex-end;
  height: 100%;
}
.ordchat-skel-row {
  display: flex;
}
.ordchat-skel-row.in {
  justify-content: flex-start;
}
.ordchat-skel-row.out {
  justify-content: flex-end;
}
.ordchat-skel-bubble {
  height: 34px;
  border-radius: 17px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.ordchat-skel-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border2),
      transparent);
  animation: ocShimmer 1.5s infinite;
  will-change: transform;
}
.ordchat-scroll-btn {
  position: absolute;
  right: 14px;
  bottom: 84px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--card);
  color: var(--text2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transform: translateY(6px) scale(.9);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.ordchat-scroll-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.ordchat-scroll-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ordchat-scroll-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
}
.ordchat-img-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
  border-radius: 12px;
  overflow: hidden;
}
.ordchat-bubble-img {
  display: block;
  max-width: 208px;
  width: 208px;
  height: 136px;
  border-radius: 12px;
  object-fit: cover;
  cursor: zoom-in;
  transition: filter .18s, transform .18s;
}
.ordchat-img-wrap:hover .ordchat-bubble-img:not(.ordchat-img-loading):not(.ordchat-img-error) {
  filter: brightness(.92);
}
.ordchat-bubble-img.ordchat-img-loading {
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.ordchat-bubble-img.ordchat-img-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border2),
      transparent);
  animation: ocShimmer 1.6s infinite;
  will-change: transform;
}
@keyframes ocShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.ordchat-bubble-img.ordchat-img-error {
  opacity: .35;
  filter: grayscale(1);
  cursor: default;
}
.ordchat-img-retry {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 10px;
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.ordchat-img-retry:hover {
  background: rgba(239, 68, 68, .22);
}
.ordchat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, .92);
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ordchat-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.ordchat-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: scale(.96);
  transition: transform .22s ease;
}
.ordchat-lightbox.open img {
  transform: scale(1);
}
.ordchat-lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s;
}
.ordchat-lightbox-close:hover {
  background: rgba(255, 255, 255, .22);
}
.ordchat-lightbox-close:active {
  transform: scale(.9);
}
#ordChatPanel .amsg-input-area {
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
#ordChatPanel .amsg-textarea {
  flex: 1;
  padding: 11px 15px;
  border: 1.5px solid var(--border2);
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 450;
  font-family: inherit;
  background: var(--bg2);
  color: var(--text);
  outline: 0;
  resize: none;
  max-height: 110px;
  overflow-y: auto;
  box-sizing: border-box;
  line-height: 1.45;
}
#ordChatPanel .amsg-textarea::placeholder {
  color: var(--text-muted);
}
#ordChatPanel .amsg-textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}
#ordChatPanel .amsg-send-btn {
  width: 42px;
  height: 42px;
  border: none;
  background: var(--accent-grad);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(34, 211, 107, .26);
  transition:
    opacity .2s,
    transform .2s,
    box-shadow .2s;
  touch-action: manipulation;
}
#ordChatPanel .amsg-send-btn:hover {
  opacity: .92;
  transform: scale(1.06);
  box-shadow: 0 5px 16px rgba(34, 211, 107, .36);
}
#ordChatPanel .amsg-send-btn:active {
  transform: scale(.94);
}
#ordChatPanel .amsg-send-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
#ordChatPanel .amsg-send-btn.ordchat-sending i {
  animation: ordchatSpin .7s linear infinite;
}
@keyframes ordchatSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 640px) {
  #ordChatBackdrop {
    display: none !important;
  }
  #ordChatPanel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1) !important;
    box-shadow: none !important;
  }
  #ordChatPanel.open {
    transform: translateY(0) !important;
  }
  .ordchat-pro-header {
    border-radius: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
  #ordChatPanel .amsg-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ordchat-scroll-btn {
    bottom: 80px;
  }
  body.ordchat-modal-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}
.img-not-found-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 32px;
  border-radius: inherit;
  background: rgba(239, 68, 68, .1);
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}
@keyframes rv2ModalIn {
  from {
    transform: scale(.92) translateY(18px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.rv2-backdrop.rv2-closing {
  opacity: 0 !important;
  transition: opacity .16s linear !important;
}
#supportBackdrop {
  background: rgba(6, 10, 8, .55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#supportChat {
  width: 396px !important;
  height: 620px !important;
  max-height: calc(100dvh - 96px) !important;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  right: 20px !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .32),
    0 6px 20px rgba(0, 0, 0, .16),
    0 0 0 1px var(--border) !important;
  transform: translateY(18px) scale(.97) !important;
  opacity: 0 !important;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .24s ease !important;
}
#supportChat.open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}
@media (max-width: 480px) {
  #supportChat {
    max-width: none !important;
  }
}
#supportChat #supportMsgList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 12px;
  gap: 2px;
  background: var(--bg2);
  position: relative;
}
#supportChat #supportMsgList::-webkit-scrollbar {
  width: 4px;
}
#supportChat #supportMsgList::-webkit-scrollbar-track {
  background: 0 0;
}
#supportChat #supportMsgList::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
#supportChat .amsg-msg-wrap {
  margin-bottom: 9px;
  position: relative;
  animation: ordchatMsgIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #supportChat .amsg-msg-wrap {
    animation: none !important;
  }
}
#supportChat .amsg-bubble {
  padding: 8px 12px 21px !important;
  border-radius: 17px !important;
  max-width: 78%;
  font-size: 14.5px;
  line-height: 1.44;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .05) !important;
  animation: none !important;
}
#supportChat .amsg-msg-in .amsg-bubble {
  background: var(--card) !important;
  border: 1px solid var(--border2);
  border-bottom-left-radius: 5px !important;
  color: var(--text);
}
#supportChat .amsg-msg-out .amsg-bubble {
  background: var(--accent-grad) !important;
  border-bottom-right-radius: 5px !important;
  color: #fff;
  box-shadow: 0 2px 10px rgba(34, 211, 107, .22) !important;
}
#supportChat .amsg-bubble-sender {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
  letter-spacing: .1px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}
#supportChat .amsg-bubble-text {
  white-space: pre-wrap;
}
#supportChat .amsg-bubble-time {
  position: absolute;
  bottom: 4px;
  right: 11px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
#supportChat .amsg-msg-out .amsg-bubble-time {
  color: rgba(255, 255, 255, .78);
}
#supportChat .amsg-msg-in .amsg-bubble-time {
  color: var(--text-muted);
  opacity: .75;
}
#supportChat .amsg-msg-wrap.swiping {
  transition: none;
}
#supportChat .amsg-textarea {
  padding: 11px 15px !important;
  border-radius: 22px !important;
  font-size: 14.5px !important;
  max-height: 110px;
  line-height: 1.45;
}
#supportChat .amsg-send-btn {
  width: 42px !important;
  height: 42px !important;
  font-size: 15px !important;
  box-shadow: 0 3px 10px rgba(34, 211, 107, .26) !important;
}
#supportChat .amsg-send-btn:hover {
  opacity: .92;
  transform: scale(1.06);
  box-shadow: 0 5px 16px rgba(34, 211, 107, .36) !important;
}
#supportChat .amsg-send-btn:active {
  transform: scale(.94);
}
#supportChat .ordchat-scroll-btn {
  bottom: 84px;
}
@media (max-width: 640px) {
  #supportBackdrop.open {
    display: none !important;
  }
  #supportChat {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1) !important;
    box-shadow: none !important;
  }
  #supportChat.open {
    transform: translateY(0) !important;
  }
  #supportChat .ordchat-pro-header {
    border-radius: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
  #supportChat .ordchat-scroll-btn {
    bottom: 80px;
  }
  body.support-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}
.gc-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--accent3);
  border: 1.5px solid var(--accent);
}
.gc-notice-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
}
.gc-notice-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}
.gc-notice-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text2);
}
.lp-notice {
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: rgba(245, 158, 11, .09);
  border: 1.5px solid rgba(245, 158, 11, .5);
  font-family: var(--f);
  color: var(--text);
  flex-direction: column;
  gap: 12px;
}
.lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lp-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.lp-head-title i {
  color: #f59e0b;
  font-size: 16px;
}
.lp-lang {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border2);
}
.lp-lang button {
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: 700 13px/1 var(--f);
  color: var(--text);
  opacity: .55;
  cursor: pointer;
}
.lp-notice[data-lang="ru"] [data-set-lang="ru"],
.lp-notice[data-lang="ky"] [data-set-lang="ky"] {
  background: #f59e0b;
  color: #fff;
  opacity: 1;
}
.lp-notice[data-lang="ru"] [data-l="ky"],
.lp-notice[data-lang="ky"] [data-l="ru"] {
  display: none;
}
.lp-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.lp-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.lp-item-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 2px 0 3px;
}
.lp-item-text {
  font-size: 14px;
  line-height: 1.5;
  opacity: .82;
}
.gc-card {
  padding: 20px;
}
.gc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.gc-logo {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #12100c;
  background:
    linear-gradient(
      140deg,
      #f0d9a4,
      #c9a25c);
}
.gc-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.01em;
}
.gc-sub {
  font-size: 12.5px;
  color: var(--text2);
  margin-top: 2px;
}
.gc-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 9px;
  letter-spacing: .01em;
}
.gc-code-row {
  margin-bottom: 12px;
}
.gc-code {
  display: block;
  width: 100%;
  padding: 16px 14px;
  border-radius: 14px;
  background: var(--card2);
  border: 1.5px dashed var(--border3);
  font-family: var(--f-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: clamp(15px, 4.6vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  text-align: center;
  letter-spacing: .08em;
  word-break: break-all;
  cursor: pointer;
  -webkit-user-select: all;
  user-select: all;
  -webkit-touch-callout: default;
}
.gc-code:hover {
  border-color: var(--accent);
}
.gc-code--flash {
  animation: gcFlash .7s ease;
}
@keyframes gcFlash {
  0% {
    background: var(--accent3);
    border-color: var(--accent);
  }
  100% {
    background: var(--card2);
    border-color: var(--border3);
  }
}
.gc-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--f);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.gc-copy-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}
.gc-copy-btn:active {
  transform: translateY(0);
  opacity: .85;
}
.gc-copy-btn--done {
  background: #16a34a;
}
.gc-redeem-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  text-decoration: none;
}
.gc-redeem-link:hover {
  color: var(--accent);
}
.gc-state {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
}
.gc-state > .mvp-pulse,
.gc-state > i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 16px;
}
.gc-state-title {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
  font-size: 13.5px;
}
.gc-state-text {
  color: var(--text2);
}
.gc-state--wait {
  background: var(--card2);
  border: 1.5px solid var(--border2);
  color: var(--accent);
}
.gc-state--fail {
  background: rgba(239, 68, 68, .09);
  border: 1.5px solid rgba(239, 68, 68, .3);
  color: var(--danger,#ef4444);
}
.steam-calc {
  margin: 0 0 20px 0;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: tgCalcIn .35s cubic-bezier(0.22,1,0.36,1) both;
}
.steam-calc-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}
.steam-calc-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.steam-amount-wrap {
  position: relative;
}
.steam-amount-input {
  width: 100%;
  background: var(--card2);
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  padding: 11px 50px 11px 14px;
  font-size: 23px;
  font-weight: 900;
  color: var(--text);
  font-family: var(--f);
  outline: 0;
  box-sizing: border-box;
  -moz-appearance: textfield;
  transition: border-color .2s, background .2s;
}
.steam-amount-input::placeholder {
  color: var(--text2);
  opacity: .5;
  font-weight: 700;
}
.steam-amount-input::-webkit-inner-spin-button,
.steam-amount-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.steam-amount-input:focus {
  border-color: var(--accent);
  background: var(--card);
}
.steam-amount-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 800;
  color: var(--text2);
  pointer-events: none;
}
.steam-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.steam-quick-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f);
  transition: opacity .15s;
}
.steam-quick-link:hover {
  opacity: .65;
}
.steam-divider {
  height: 1px;
  background: var(--border2);
  margin: 2px 0;
}
.steam-cur-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.steam-cur-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  background: var(--card2);
  border: 1px solid var(--border2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.steam-cur-chip .scc-icon {
  color: var(--chip-c, var(--accent));
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.steam-cur-chip .scc-code {
  color: var(--text2);
  font-weight: 700;
  font-size: 11px;
}
.steam-info-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  animation: tgCalcIn .25s ease both;
}
.steam-info-note i {
  color: var(--success, #22c55e);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}
.steam-info-note span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--success, #22c55e);
  font-weight: 600;
}
.steam-buy-btn {
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-weight: 900;
  border-radius: 12px !important;
  letter-spacing: .2px;
}
.steam-buy-btn:not(:disabled):hover {
  transform: translateY(-2px);
}
.steam-buy-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}
.steam-calc-hint {
  font-size: 12px;
  color: var(--danger, #ef4444);
  font-weight: 700;
  text-align: center;
  animation: tgCalcIn .2s ease both;
}
@media (max-width: 768px), (pointer: coarse) {
  #ordChatBackdrop,
  #supportBackdrop,
  .account-overlay,
  .login-flow-overlay,
  .modal-backdrop,
  .nick-help-overlay.show,
  .rv2-backdrop,
  .toast,
  .topup-hero-icon {
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  .mv-orb {
    filter: blur(24px);
    width: 240px !important;
    height: 240px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pageLoaderDot::after,
.hero-cta::after,
.hero-img-wrap img,
.mv-orb-a,
.mv-orb-b,
.mvp-pulse::after,
.qr-wrapper:not(:hover) .qr::after {
    animation: none !important;
  }
}

/* ===== Theme switcher: light / dark / black ===== */
#themeToggleBtn {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--card2);
  color: var(--text2);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}
#themeToggleBtn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
#themeToggleBtn:active {
  transform: scale(.94);
}
#themeToggleBtn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.theme-btn-icon {
  display: flex;
  width: 18px;
  height: 18px;
}
.theme-btn-icon svg {
  display: none;
  width: 100%;
  height: 100%;
}
html[data-theme=light] .theme-btn-icon .ti-light,
html[data-theme=amoled] .theme-btn-icon .ti-amoled {
  display: block;
}

/* ── Способ оплаты: карточки с изображениями ─────────────── */
.pmx-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 2px 0 14px;
}
.pmx-card {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: var(--card2);
  color: var(--text);
  font-family: var(--f);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition:
    transform .38s cubic-bezier(.2, .8, .2, 1),
    border-color .25s ease,
    background-color .25s ease,
    box-shadow .38s cubic-bezier(.2, .8, .2, 1),
    opacity .25s ease;
}
.pmx-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.pmx-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 76px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #f3f6f5;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    0 6px 16px -8px rgba(0, 0, 0, .35);
}
.pmx-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition:
    transform .55s cubic-bezier(.2, .8, .2, 1),
    filter .3s ease;
}
.pmx-check {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid rgba(15, 23, 42, .16);
  color: #fff;
  font-size: 9px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .3s ease;
}
.pmx-check i {
  transform: scale(0) rotate(-60deg);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.pmx-lock {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
}
.pmx-lock i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 17, 21, .72);
  color: #fff;
  font-size: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pmx-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0 2px;
}
.pmx-text strong {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -.01em;
}
.pmx-text span {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text2);
  overflow-wrap: anywhere;
}

/* hover — только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .pmx-card:hover {
    transform: translateY(-2px);
    border-color: var(--border3);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .45);
  }
  .pmx-card:hover .pmx-media img {
    transform: scale(1.07);
  }
}
.pmx-card:active {
  transform: scale(.97);
  transition-duration: .12s;
}
.pmx-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* невыбранные карточки чуть приглушены — выбранная выделяется сразу */
.pmx-grid:has(.pmx-card.selected) .pmx-card:not(.selected):not(:hover) .pmx-media img {
  filter: saturate(.75) brightness(.96);
}

/* активное состояние */
.pmx-card.selected {
  border-color: var(--accent);
  background: var(--accent3);
  box-shadow:
    0 0 0 1px var(--accent),
    0 10px 24px -14px var(--accent-glow);
}
.pmx-card.selected::after {
  animation: pmxRing .7s cubic-bezier(.2, .8, .2, 1);
}
.pmx-card.selected .pmx-media {
  animation: pmxPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.pmx-card.selected .pmx-check {
  background: var(--accent);
  border-color: #fff;
  box-shadow: 0 3px 10px var(--accent-glow);
}
.pmx-card.selected .pmx-check i {
  transform: scale(1) rotate(0);
}
@keyframes pmxPop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes pmxRing {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* заблокировано (оплата с баланса без входа) */
.pmx-card.locked {
  cursor: not-allowed;
  opacity: .8;
}
.pmx-card.locked .pmx-media img {
  filter: grayscale(1) opacity(.55) !important;
  transform: none !important;
}
.pmx-card.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border2);
}
.pmx-card.locked .pmx-check { display: none; }
.pmx-card.locked .pmx-lock { display: flex; }

/* одна карточка — горизонтальная строка */
.pmx-card:only-child {
  flex-direction: row;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  text-align: left;
}
.pmx-card:only-child .pmx-media { width: 60px; border-radius: 15px; }
.pmx-card:only-child .pmx-text strong { font-size: 14.5px; }
.pmx-card:only-child .pmx-text span { font-size: 12px; }

/* телефоны */
@media (max-width: 480px) {
  .pmx-grid { gap: 8px; }
  .pmx-card {
    gap: 8px;
    padding: 12px 6px 10px;
    border-radius: 16px;
  }
  .pmx-media { width: 64px; border-radius: 16px; }
  .pmx-check { top: 4px; right: 4px; width: 17px; height: 17px; font-size: 8px; }
  .pmx-text strong { font-size: 12.5px; }
  .pmx-text span { font-size: 11px; }
  .pmx-card:only-child { padding: 8px 14px 8px 8px; gap: 12px; }
  .pmx-card:only-child .pmx-media { width: 54px; border-radius: 14px; }
  .pmx-card:only-child .pmx-text strong { font-size: 14px; }
}

/* узкие телефоны + 3 способа: компактный список строк. Класс .pmx-3 ставит
   скрипт, показывающий кнопку Stars: прежнее :has(... [style*="none"]) заставляло
   браузер при любом изменении inline-стиля на странице перепроверять стили
   всех img и span документа. */
@media (max-width: 420px) {
  .pmx-grid.pmx-3 {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .pmx-grid.pmx-3 .pmx-card {
    flex-direction: row;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    text-align: left;
  }
  .pmx-grid.pmx-3 .pmx-media { width: 52px; border-radius: 14px; }
  .pmx-grid.pmx-3 .pmx-check { top: 3px; right: 3px; width: 15px; height: 15px; font-size: 7px; border-width: 1px; }
  .pmx-grid.pmx-3 .pmx-text strong { font-size: 14px; }
  .pmx-grid.pmx-3 .pmx-text span { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MVP Shop — вход (Google / Telegram) и личный кабинет.
   Использует токены тем сайта (--card, --text, --accent …): светлая, тёмная
   и AMOLED работают без отдельных правил. Префикс классов: acc-.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --acc-tg: #2aabee;
  --acc-tg-2: #229ed9;
  --acc-amber: #f59e0b;
  --acc-blue: #3b82f6;
  --acc-red: #ef4444;
  --acc-slate: #94a3b8;
  --acc-hero-1: #0f1c17;
  --acc-hero-2: #13261e;
  --acc-hero-ink: #f1f5f3;
  --acc-hero-dim: rgba(241, 245, 243, .62);
  --acc-radius: 20px;
  --acc-ease: cubic-bezier(.22, 1, .36, 1);
}
[data-theme=amoled] { --acc-hero-1: #050807; --acc-hero-2: #0b1511; }

/* ── Общие элементы ─────────────────────────────────────────────────────── */
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--border2); background: var(--card2); color: var(--text);
  font: 700 14px/1 var(--f); cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--acc-ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.acc-btn:hover { border-color: var(--border3); background: var(--card3); }
.acc-btn:active { transform: scale(.97); }
.acc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.acc-btn:focus-visible, .acc-switch:focus-visible, .acc-tab:focus-visible,
.acc-row-btn:focus-visible, .acc-link:focus-visible, .acc-order:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.acc-btn-primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 6px 18px var(--accent-glow); }
.acc-btn-primary:hover { background: var(--accent2); border-color: transparent; }
.acc-btn-tg { background: var(--acc-tg); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(42, 171, 238, .28); }
.acc-btn-tg:hover { background: var(--acc-tg-2); border-color: transparent; }
.acc-btn-ghost { background: transparent; }
.acc-btn-danger { color: var(--acc-red); background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .22); }
.acc-btn-danger:hover { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); }
.acc-btn-block { width: 100%; }
a.acc-btn, a.acc-btn:hover { text-decoration: none; }
.acc-btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.acc-btn .fa-spin { font-size: 13px; }

.acc-link {
  border: 0; background: none; padding: 0; color: var(--accent); font: 700 13px var(--f);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.acc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.acc-switch {
  position: relative; width: 46px; height: 28px; flex-shrink: 0; border-radius: 99px;
  border: 0; background: var(--card3); cursor: pointer; transition: background .25s var(--acc-ease);
  box-shadow: inset 0 0 0 1px var(--border2);
}
.acc-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .28s var(--acc-ease);
}
.acc-switch[aria-checked=true] { background: var(--accent); box-shadow: none; }
.acc-switch[aria-checked=true]::after { transform: translateX(18px); }
.acc-switch:disabled { opacity: .45; cursor: not-allowed; }

.acc-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  font: 700 12px/1 var(--f); white-space: nowrap; background: var(--card2); color: var(--text2);
}
.acc-pill i { font-size: 10px; }
.acc-pill-pending { color: #b45309; background: rgba(245, 158, 11, .14); }
.acc-pill-processing { color: #2563eb; background: rgba(59, 130, 246, .13); }
.acc-pill-done { color: #0f9d48; background: rgba(34, 211, 107, .14); }
.acc-pill-rejected { color: #dc2626; background: rgba(239, 68, 68, .12); }
.acc-pill-expired { color: var(--text2); background: var(--card2); }
[data-theme=amoled] .acc-pill-pending { color: #fbbf24; }
[data-theme=amoled] .acc-pill-processing { color: #93c5fd; }
[data-theme=amoled] .acc-pill-done { color: #7af7ae; }
[data-theme=amoled] .acc-pill-rejected { color: #fca5a5; }

.acc-skel {
  display: block; border-radius: 8px; background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%);
  background-size: 200% 100%; animation: acc-shimmer 1.3s linear infinite;
}
@keyframes acc-shimmer { to { background-position: -200% 0; } }
@keyframes acc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes acc-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes acc-pulse { 0% { box-shadow: 0 0 0 0 rgba(42, 171, 238, .45); } 70% { box-shadow: 0 0 0 10px rgba(42, 171, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(42, 171, 238, 0); } }
@keyframes acc-draw { to { stroke-dashoffset: 0; } }
@keyframes acc-fade { from { opacity: 0; } to { opacity: 1; } }

html.acc-lock #supportFab,
html.acc-lock .bottom-tabbar,
html.acc-lock #tgNudge { visibility: hidden !important; }

/* ── Поток Telegram (вход и привязка) ────────────────────────────────────── */
.acc-tg { display: grid; gap: 14px; }
.acc-tg-steps { display: grid; gap: 0; position: relative; }
.acc-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.acc-step:last-child { padding-bottom: 0; }
.acc-step::before {
  content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--border2);
}
.acc-step:last-child::before { display: none; }
.acc-step-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card2); color: var(--text2); font: 800 13px var(--f); border: 1px solid var(--border2);
  transition: background .3s, color .3s, border-color .3s;
}
.acc-step.done .acc-step-n { background: var(--accent); color: #fff; border-color: transparent; }
.acc-step.active .acc-step-n { background: var(--acc-tg); color: #fff; border-color: transparent; }
.acc-step-t { font: 700 14px/30px var(--f); color: var(--text); }
.acc-step-d { font: 500 13px/1.45 var(--f); color: var(--text2); margin: -2px 0 10px; }

.acc-cmd {
  display: flex; align-items: stretch; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border2); background: var(--card2);
}
.acc-cmd code {
  flex: 1; min-width: 0; padding: 12px 14px; font: 600 13px/1.5 var(--f-mono); color: var(--text);
  word-break: break-all; user-select: all; -webkit-user-select: all;
}
.acc-cmd code b { color: var(--acc-tg); font-weight: 700; }
.acc-cmd button {
  flex-shrink: 0; border: 0; border-left: 1px solid var(--border2); background: var(--card); color: var(--text);
  padding: 0 16px; font: 700 13px var(--f); cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background .2s, color .2s;
}
.acc-cmd button:hover { background: var(--card3); }
.acc-cmd button.copied { color: var(--accent); }
.acc-cmd.acc-cmd-loading code { color: transparent; }

.acc-wait {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(42, 171, 238, .09), rgba(42, 171, 238, .03));
  border: 1px solid rgba(42, 171, 238, .2);
}
.acc-wait-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--acc-tg); flex-shrink: 0; animation: acc-pulse 1.6s infinite; }
.acc-wait-txt { flex: 1; min-width: 0; }
.acc-wait-txt b { display: block; font: 700 14px var(--f); color: var(--text); }
.acc-wait-txt span { font: 500 12.5px/1.4 var(--f); color: var(--text2); }
.acc-timer { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.acc-timer svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.acc-timer circle { fill: none; stroke-width: 4; }
.acc-timer .bg { stroke: var(--border2); }
.acc-timer .fg { stroke: var(--acc-tg); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.acc-timer.low .fg { stroke: var(--acc-amber); }
.acc-timer span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px var(--f); color: var(--text); font-variant-numeric: tabular-nums; }

.acc-wait.is-expired { background: var(--card2); border-color: var(--border2); }
.acc-wait.is-expired .acc-wait-dot { background: var(--acc-slate); animation: none; }
.acc-wait.is-error { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .22); }
.acc-wait.is-error .acc-wait-dot { background: var(--acc-red); animation: none; }

/* ── Модальные окна ─────────────────────────────────────────────────────── */
.acc-modal {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(4, 8, 6, .56); backdrop-filter: blur(6px); animation: acc-fade .2s ease;
}
.acc-modal-box {
  width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto;
  border-radius: 24px; background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); padding: 24px; animation: acc-rise .3s var(--acc-ease);
}
.acc-modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.acc-modal-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--card2); font-size: 18px; }
.acc-modal-ic.danger { background: rgba(239, 68, 68, .12); color: var(--acc-red); }
.acc-modal-ic.tg { background: rgba(42, 171, 238, .14); color: var(--acc-tg); }
.acc-modal-title { font: 800 19px/1.25 var(--f); color: var(--text); }
.acc-modal-text { margin-top: 6px; font: 500 14px/1.55 var(--f); color: var(--text2); }
.acc-modal-list { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.acc-modal-list li { display: flex; gap: 10px; font: 500 13.5px/1.45 var(--f); color: var(--text2); }
.acc-modal-list li i { margin-top: 3px; width: 14px; text-align: center; }
.acc-modal-list .ok i { color: var(--accent); }
.acc-modal-list .off i { color: var(--acc-red); }
.acc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.acc-modal-actions .acc-btn { flex: 1 1 140px; }

/* ── Личный кабинет ─────────────────────────────────────────────────────── */
#profileScreen.acc-mode .orders-page-header { display: none; }
#profileScreen.acc-mode .orders-page-wrap { max-width: 1180px; }
.acc { display: grid; gap: 18px; padding-bottom: 32px; color: var(--text); font-family: var(--f); }
.acc > * { animation: acc-rise .5s var(--acc-ease) both; }
.acc > *:nth-child(2) { animation-delay: .05s; }
.acc > *:nth-child(3) { animation-delay: .1s; }
.acc > *:nth-child(4) { animation-delay: .15s; }

.acc-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 26px 28px;
  color: var(--acc-hero-ink);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(34, 211, 107, .30) 0, transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(42, 171, 238, .12) 0, transparent 60%),
    linear-gradient(135deg, var(--acc-hero-2), var(--acc-hero-1));
  box-shadow: 0 18px 48px rgba(6, 18, 13, .22);
}
.acc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 30px 30px; mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.acc-hero-top { display: flex; align-items: center; gap: 18px; }
.acc-back {
  position: absolute; top: 18px; right: 18px; height: 36px; padding: 0 12px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--acc-hero-ink);
  font: 700 13px var(--f); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.acc-back:hover { background: rgba(255, 255, 255, .12); }
.acc-avatar {
  width: 76px; height: 76px; border-radius: 24px; flex-shrink: 0; display: grid; place-items: center;
  font: 800 30px var(--f); color: #062016;
  background: linear-gradient(145deg, #6ee7b7, #22d36b); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 10px 26px rgba(34, 211, 107, .35);
  overflow: hidden; position: relative;
}
.acc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-hero-id { min-width: 0; }
.acc-hero-name { font: 800 26px/1.15 var(--f-display, var(--f)); letter-spacing: -.02em; overflow-wrap: anywhere; }
.acc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font: 600 13px var(--f); color: var(--acc-hero-dim); }
.acc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: var(--acc-hero-ink);
  font: 700 12px var(--f); cursor: default;
}
button.acc-chip { cursor: pointer; }
button.acc-chip:hover { background: rgba(255, 255, 255, .14); }
.acc-chip .ok { color: #7af7ae; }
.acc-chip .tg { color: #7dd3fc; }
.acc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.acc-hero-actions .acc-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: var(--acc-hero-ink); }
.acc-hero-actions .acc-btn:hover { background: rgba(255, 255, 255, .15); }
.acc-hero-actions .acc-btn-primary { background: #22d36b; border-color: transparent; color: #04150e; box-shadow: 0 8px 22px rgba(34, 211, 107, .35); }
.acc-hero-actions .acc-btn-primary:hover { background: #7af7ae; }

.acc-card {
  border-radius: var(--acc-radius); background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); min-width: 0; scroll-margin-top: 130px;
}
.acc-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.acc-card-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--card2); color: var(--text2); font-size: 15px; }
.acc-card-ic.tg { background: rgba(42, 171, 238, .12); color: var(--acc-tg); }
.acc-card-ic.g { background: var(--accent3); color: var(--accent); }
.acc-card-ic.amber { background: rgba(245, 158, 11, .12); color: var(--acc-amber); }
.acc-card-title { font: 800 16px/1.2 var(--f); color: var(--text); }
.acc-card-sub { margin-top: 2px; font: 600 12.5px var(--f); color: var(--text2); }
.acc-card-head .acc-link, .acc-card-head .acc-card-aside { margin-left: auto; }
.acc-card-body { padding: 4px 20px 20px; }

.acc-rows { display: grid; }
.acc-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--border); min-width: 0; }
.acc-row-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--card2); color: var(--text2); font-size: 14px; }
.acc-row-main { flex: 1; min-width: 0; }
.acc-row-t { display: block; font: 700 14px/1.3 var(--f); overflow-wrap: anywhere; }
.acc-row-d { display: block; margin-top: 2px; font: 600 12.5px/1.4 var(--f); color: var(--text2); }
.acc-row-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 20px; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; text-align: left; font-family: var(--f); transition: background .15s;
}
.acc-row-btn:hover { background: var(--card2); }
.acc-row-btn > .fa-chevron-right { margin-left: auto; color: var(--text3); font-size: 12px; }
.acc-row-btn.danger { color: var(--acc-red); }
.acc-row-btn.danger .acc-row-ic { background: rgba(239, 68, 68, .1); color: var(--acc-red); }
.acc-state { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--f); white-space: nowrap; }
.acc-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acc-state.on { color: var(--accent); }
.acc-state.off { color: var(--text3); }
.acc-state.warn { color: var(--acc-amber); }

/* Кабинет «только аккаунт» */
.acc-slim { max-width: 720px; margin: 0 auto; }
.acc-slim .acc-hero { padding: 24px 26px; }
.acc-row-note { padding: 0 20px 14px; }
.acc-muted { font: 500 13px/1.5 var(--f); color: var(--text2); }
.acc-card-body .acc-muted { margin-bottom: 12px; display: block; }
.acc-notify-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.acc-notify-foot .acc-muted { margin: 0; font-size: 12.5px; }
.acc-logout { min-height: 50px; border-radius: 16px; }
.acc-warn { flex: 1; }
.acc-toast-inline { font: 600 12.5px var(--f); color: var(--text2); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .acc-cmd { flex-direction: column; }
  .acc-cmd button { border-left: 0; border-top: 1px solid var(--border2); padding: 11px 16px; justify-content: center; }

  .acc { gap: 14px; }
  .acc-hero { padding: 20px 16px 18px; border-radius: 22px; }
  .acc-hero-top { gap: 14px; align-items: flex-start; }
  .acc-avatar { width: 58px; height: 58px; border-radius: 18px; font-size: 24px; }
  .acc-hero-name { font-size: 20px; padding-right: 76px; }
  .acc-back { top: 14px; right: 12px; height: 32px; padding: 0 10px; }
  .acc-card-head { padding: 16px 16px 10px; }
  .acc-card-body { padding: 4px 16px 16px; }
  .acc-row, .acc-row-btn { padding-left: 16px; padding-right: 16px; }
  .acc-row-note { padding: 0 16px 14px; }
  .acc-notify-foot { flex-direction: column; align-items: stretch; }
  .acc-slim .acc-hero { padding: 20px 16px 18px; }
  .acc-modal { align-items: flex-end; padding: 0; }
  .acc-modal-box { border-radius: 24px 24px 0 0; max-height: 92dvh; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .acc *, .acc-modal * { animation: none !important; transition: none !important; }
  .acc > * { animation: none !important; }
}

/* ============================================================================
   Статусы доступности: active / maintenance / out_of_stock
   Одинаковые бейдж, приглушение и отключённая кнопка на главной, на странице
   игры, в купонах и при оформлении заказа. Источник статусов —
   functions/_lib/shopStatus.js.
   ========================================================================== */
:root {
  --avail-mt-fg: #fbbf24;
  --avail-mt-bg: rgba(245, 158, 11, .14);
  --avail-mt-border: rgba(245, 158, 11, .38);
  --avail-oos-fg: rgba(236, 238, 242, .82);
  --avail-oos-bg: rgba(148, 163, 184, .16);
  --avail-oos-border: rgba(148, 163, 184, .34);
  --avail-badge-solid: rgba(17, 19, 23, .82);
}
[data-theme=light] {
  --avail-mt-fg: #b45309;
  --avail-mt-bg: rgba(245, 158, 11, .12);
  --avail-mt-border: rgba(217, 119, 6, .34);
  --avail-oos-fg: #475569;
  --avail-oos-bg: rgba(100, 116, 139, .10);
  --avail-oos-border: rgba(100, 116, 139, .28);
  --avail-badge-solid: rgba(255, 255, 255, .92);
}

/* Бейдж */
.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--avail-oos-border);
  background: var(--avail-oos-bg);
  color: var(--avail-oos-fg);
  font-family: var(--f);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avail-badge i { font-size: 9.5px; flex-shrink: 0; }
.avail-badge.avail-maintenance {
  border-color: var(--avail-mt-border);
  background: var(--avail-mt-bg);
  color: var(--avail-mt-fg);
}
.avail-badge-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  background: var(--avail-badge-solid);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.avail-badge-overlay.avail-maintenance { background: var(--avail-badge-solid); }

/* Отключённая кнопка (перекрывает !important из тем .lf-btn / .primary-btn) */
.avail-btn,
.lf-btn.avail-btn,
.primary-btn.avail-btn,
.lf-btn.avail-btn:hover,
.primary-btn.avail-btn:hover,
.lf-btn.avail-btn:disabled {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--avail-oos-bg) !important;
  color: var(--avail-oos-fg) !important;
  border: 1px solid var(--avail-oos-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 1 !important;
  font-family: var(--f);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .1px;
  pointer-events: none;
}
.avail-btn.avail-maintenance,
.lf-btn.avail-btn.avail-maintenance,
.primary-btn.avail-btn.avail-maintenance,
.lf-btn.avail-btn.avail-maintenance:disabled {
  background: var(--avail-mt-bg) !important;
  color: var(--avail-mt-fg) !important;
  border-color: var(--avail-mt-border) !important;
}
.avail-btn::before,
.avail-btn::after { display: none !important; }

/* Карточка товара (страница игры) */
.card.card-unavail {
  opacity: 1;
  cursor: default;
}
.card.card-unavail:hover,
.card.card-unavail:active { transform: none; box-shadow: none; }
.card.card-unavail .card-img-wrap img,
.card.card-unavail:hover .card-img-wrap img {
  filter: grayscale(.45) opacity(.72);
  transform: none;
}
.card.card-unavail .card-name,
.card.card-unavail .card-price-block { opacity: .6; }
.card.card-unavail .card-sale-badge { display: none; }
.card.card-unavail .card-bottom {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.card-avail-btn {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.card-avail-btn i { font-size: 10px; flex-shrink: 0; }

/* Карточка платформы / игры (главная) — остаётся кликабельной, чтобы
   можно было посмотреть ассортимент. */
.mv-card.mv-card-unavail .mv-card-img { filter: grayscale(.45) opacity(.75); }
.mv-card.mv-card-unavail .mv-card-info { opacity: .7; }
.mv-card.mv-card-unavail:hover { transform: translateY(-2px); }
.mv-card.mv-card-unavail:hover .mv-card-img { transform: none; }

/* Баннер на странице игры */
.platform-maintenance-banner.avail-out_of_stock {
  background: var(--avail-oos-bg);
  border-color: var(--avail-oos-border);
}
.platform-maintenance-banner.avail-out_of_stock .pmb-icon {
  background: var(--card3);
  color: var(--text2);
}

/* Глобальный баннер магазина */
.store-status-banner {
  margin: 0 0 14px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--avail-mt-border);
}
.store-status-banner .ssb-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--avail-mt-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.store-status-banner .ssb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--avail-mt-bg);
  border: 1px solid var(--avail-mt-border);
  color: var(--avail-mt-fg);
  font-size: 12px;
}
.store-status-banner .ssb-text strong { color: var(--avail-mt-fg); font-weight: 800; }
.store-status-banner.avail-out_of_stock { border-color: var(--avail-oos-border); }
.store-status-banner.avail-out_of_stock .ssb-inner { background: var(--avail-oos-bg); }
.store-status-banner.avail-out_of_stock .ssb-icon {
  background: var(--avail-oos-bg);
  border-color: var(--avail-oos-border);
  color: var(--avail-oos-fg);
}
.store-status-banner.avail-out_of_stock .ssb-text strong { color: var(--avail-oos-fg); }
@media (max-width: 520px) {
  .store-status-banner .ssb-inner {
    font-size: 12px;
    padding: 10px 12px;
  }
  /* На узких карточках товара бейдж — только иконка: текст уже на кнопке. */
  .card .avail-badge-overlay .avail-badge-text { display: none; }
  .card .avail-badge-overlay { padding: 5px 7px; }
  .mv-card .avail-badge-overlay {
    white-space: normal;
    border-radius: 10px;
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
  }
}

/* Оформление заказа */
.checkout-avail-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--avail-oos-border);
  background: var(--avail-oos-bg);
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.45;
}
.checkout-avail-note.avail-maintenance {
  border-color: var(--avail-mt-border);
  background: var(--avail-mt-bg);
}

/* Купон: выбор товара */
.coupon-pick-card.coupon-pick-unavail {
  cursor: not-allowed;
}
.coupon-pick-card.coupon-pick-unavail img { filter: grayscale(.45) opacity(.72); }
.coupon-pick-card.coupon-pick-unavail .lf-product-name,
.coupon-pick-card.coupon-pick-unavail .lf-product-price { opacity: .6; }
.coupon-pick-card .avail-badge { margin-left: auto; flex-shrink: 0; }

/* Смена темы мгновенная: на один кадр переходы отключены (applyTheme в script.js). */
html.theme-instant,
html.theme-instant *,
html.theme-instant *::before,
html.theme-instant *::after {
  transition: none !important;
}
/* Футер над нижним меню на телефоне */
@media (max-width: 860px) { .site-footer .footer-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* Нижнее меню при открытии сайта: без переходов, пока адрес выставляет вкладку */
.bottom-tabbar.tabbar-boot,
.bottom-tabbar.tabbar-boot * { transition: none !important; animation: none !important; }
/* Страница игры и купона сразу высотой с экран: пока грузятся товары, футер
   не мелькает посреди экрана и не «уезжает» вниз, когда товары появятся. */
#catalogScreen:not(.hidden),
#couponActivateScreen:not(.hidden) { min-height: 100vh; min-height: 100dvh; }
/* Экраны сайта переключаются сразу: появление из прозрачности (0,28–0,65 с)
   задерживало отклик на нажатие — экран уже открыт, а виден не полностью. */
#catalogScreen, #platformScreen, #profileScreen, #reviewsScreen, #chatsPageScreen,
#orderDetailScreen, #ordersPageScreen, #userProfileScreen, #walletScreen { animation: none !important; }
/* Главная: до первой анимации карточки скрыты (класс ставится в <head>,
   анимация — window.mvEnterCards в index.html, сразу после сетки). */
html.mv-enter #platformsGrid > .mv-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.mv-enter #platformsGrid > .mv-card { opacity: 1; }
}