:root {
  --bg: #050505;
  --surface: #111111;
  --surface-2: #1a1a1a;
  --ink: #ffffff;
  --muted: #999999;
  --line: rgba(212, 175, 55, 0.2);
  --brand: #D4AF37;
  --brand-light: #F7C948;
  --brand-dark: #B8960C;
  --gold: #D4AF37;
  --green: #18a874;
  --blue: #287cc9;
  --violet: #8a5fd2;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.app-shell,
main,
.view,
.topbar,
.bottom-nav,
.modal,
.modal-backdrop,
.modal-content,
.client-support-shell,
.category-shell,
.category-layout,
.detail-shell,
.detail-main,
.games-grid,
.game-grid,
.provider-card,
.promo-page,
.support-chat,
.support-shell,
.support-console {
  max-width: 100vw;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  letter-spacing: 0.3px;
}

button,
input,
textarea,
select {
  font: inherit;
  font-size: max(16px, 1em);
  max-width: 100%;
  box-sizing: border-box;
}

input,
textarea,
select,
button {
  -webkit-text-size-adjust: 100%;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 86px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05), transparent 400px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  gap: 0;
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(20px);
}

.app-download-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #2e2a22, #26211a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.download-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.download-brand > div {
  min-width: 0;
}

.download-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #0e0e0e;
  color: #c6ad67;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
}

.download-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.download-brand strong {
  display: block;
  color: #f0df8e;
  font-size: 18px;
  font-weight: 800;
}

.download-brand span {
  color: #f7c948;
  font-size: 12px;
  letter-spacing: 3px;
}

.download-app-button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #f5b81b, #eea500);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.download-app-button.compact {
  min-height: 34px;
  padding: 0 14px;
}

.download-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #e6e6e6;
  font-size: 28px;
  line-height: 1;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--line);
}

.logged-in .main-header .brand span {
  display: block;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.brand-mark,
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  color: var(--brand);
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 16px;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.top-actions,
.hero-actions,
.section-title,
.category-row,
.module-tabs,
.bottom-nav,
.quick-grid {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-actions,
.user-actions {
  margin-left: auto;
}

.header-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

.language-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 184px;
}

.language-select select {
  width: 100%;
  min-height: 38px;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.56);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(247, 215, 106, 0.14), rgba(255, 255, 255, 0.03)),
    #101010;
  color: #f6e7a4;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  appearance: none;
}

.language-select::after {
  content: "⌄";
  position: absolute;
  right: 13px;
  color: #f7d76a;
  pointer-events: none;
}

.language-select select:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(247, 215, 106, 0.12);
}

.guest-actions .ghost-button,
.guest-actions .primary-button {
  min-height: 34px;
  padding: 0 14px;
}

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #2b3344;
  color: #fff;
  font-weight: 800;
}

.balance-pill span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f0b500;
  color: #111;
  font-size: 12px;
}

.ghost-button,
.secondary-button,
.primary-button,
.category-row button,
.module-tabs button,
.bottom-nav button,
.game-card button,
.quick-grid button {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  transition: all 0.3s ease;
}

.ghost-button:hover,
.secondary-button:hover,
.category-row button:hover,
.module-tabs button:hover,
.bottom-nav button:hover {
  border-color: var(--brand);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

.ghost-button,
.secondary-button,
.primary-button {
  min-height: 38px;
  padding: 0 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.primary-button {
  border-color: transparent;
  color: #111111;
  background: linear-gradient(180deg, #F7D76A, #D4AF37);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.primary-button:hover {
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
  transform: translateY(-2px);
}

.large {
  min-height: 46px;
  padding: 0 24px;
  font-size: 15px;
}

main {
  padding: 20px 20px 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-copy {
  padding: clamp(24px, 5vw, 52px);
  color: #fff;
  position: relative;
  z-index: 1;
}

.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  letter-spacing: 2px;
}

.hero h1 {
  margin: 18px 0 12px;
  max-width: 580px;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 2px;
}

.hero p {
  max-width: 520px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  font-size: 15px;
}

.wallet-panel,
.data-table,
.customer-list article,
.profile-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wallet-panel strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: var(--brand-light);
  font-weight: 900;
}

.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 18px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  overflow: hidden;
}

.notice-track {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notice-marquee {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-width: 100%;
  width: max-content;
  color: var(--brand-light);
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  animation: notice-marquee 26s linear infinite;
}

.notice-marquee span {
  display: inline-flex;
  align-items: center;
}

.notice-marquee span::after {
  content: "•";
  margin-left: 28px;
  color: rgba(247, 201, 72, 0.65);
}

.notice-marquee span:last-child::after {
  content: "";
  margin: 0;
}

.notice-marquee:last-child {
  animation-delay: -13s;
}

.notice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.module-tabs {
  overflow-x: auto;
  padding: 6px 0 16px;
}

.module-tabs button,
.category-row button,
.bottom-nav button,
.quick-grid button {
  min-height: 40px;
  padding: 0 18px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.module-tabs button.active,
.category-row button.active,
.bottom-nav button.active {
  border-color: var(--brand);
  color: var(--brand-light);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

html[data-n9-initial-view="profile"] #homeView,
html[data-n9-initial-view="profile"] #promoView,
html[data-n9-initial-view="promo"] #homeView,
html[data-n9-initial-view="promo"] #profileView {
  display: none;
}

html[data-n9-initial-view="profile"] #profileView,
html[data-n9-initial-view="promo"] #promoView {
  display: block;
}

.promo-mode .topbar {
  display: none;
}

.promo-mode main {
  padding: 0;
  min-height: calc(100vh - 74px);
  background: #eef5ff;
}

.promo-mode .app-shell {
  width: min(100%, 1120px);
  min-height: 100vh;
  padding-bottom: 74px;
  background: #eef5ff;
}

body.promo-mode {
  background: #eef5ff;
}

.ad-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.ad-carousel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ad-carousel-top strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  color: var(--brand-light);
  font-weight: 900;
}

.ad-carousel-hint {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--brand-light);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-carousel-viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ad-carousel-viewport::-webkit-scrollbar {
  height: 6px;
}

.ad-carousel-viewport::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 999px;
}

.ad-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 248px;
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
}

.ad-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62)),
    linear-gradient(90deg, rgba(212, 175, 55, 0.18), transparent 55%);
  pointer-events: none;
}

.ad-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  max-width: 74%;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.45);
  backdrop-filter: blur(12px);
}

.ad-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #111111;
  font-size: 9px;
  font-weight: 900;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  letter-spacing: 1px;
}

.ad-copy h3 {
  margin: 8px 0 6px;
  font-size: 20px;
  line-height: 1.15;
  color: #fffbe8;
}

.ad-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.7;
}

.ad-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ad-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
}

.ad-dots button.active {
  width: 24px;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
}

@keyframes notice-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.section-title {
  justify-content: space-between;
  margin: 10px 0 16px;
}

.section-title h2 {
  margin: 0;
  font-size: 22px;
  color: var(--brand-light);
  letter-spacing: 1px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(260px, 52vw);
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  transition: all 0.3s ease;
}

.search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.search-box span {
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.category-row {
  overflow-x: auto;
  padding-bottom: 14px;
}

.category-title {
  margin: 28px 0 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-light);
  padding-left: 12px;
  border-left: 3px solid var(--brand);
  letter-spacing: 1px;
}

.category-section {
  margin-bottom: 12px;
}

.category-section:first-of-type .category-title {
  margin-top: 10px;
}

.games-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.games-grid::-webkit-scrollbar {
  height: 6px;
}

.games-grid::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 3px;
}

.games-grid::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 3px;
}

.game-card {
  position: relative;
  min-height: 220px;
  min-width: calc(33.333% - 10px);
  max-width: calc(33.333% - 10px);
  flex-shrink: 0;
  overflow: hidden;
  padding: 18px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  scroll-snap-align: start;
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition: all 0.3s ease;
}

.game-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
  transform: translateY(-4px);
}

.game-card.green {
  background: linear-gradient(145deg, #1a2a1f, #0a1510);
}

.game-card.violet {
  background: linear-gradient(145deg, #2a1a2b, #150a15);
}

.game-card.blue {
  background: linear-gradient(145deg, #1a202a, #0a1015);
}

.game-card.amber {
  background: linear-gradient(145deg, #2a2218, #151108);
}

.game-card.slate {
  background: linear-gradient(145deg, #1e2226, #0f1113);
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  letter-spacing: 1px;
}

.badge.hot {
  color: #fff;
  background: linear-gradient(135deg, #F7D76A, #D4AF37);
  border-color: transparent;
}

.game-art {
  position: absolute;
  inset: 48px 18px 62px;
  opacity: 0.9;
}

.cards-art {
  background:
    linear-gradient(135deg, #fff 0 48%, #e7edf2 49%) left 30% top 20% / 70px 96px no-repeat,
    linear-gradient(135deg, #fff 0 48%, #e7edf2 49%) right 26% bottom 0 / 70px 96px no-repeat;
  transform: rotate(-8deg);
}

.mahjong-art {
  background:
    linear-gradient(#fff, #dfeee7) 18% 45% / 56px 72px no-repeat,
    linear-gradient(#fff, #dfeee7) 50% 20% / 56px 72px no-repeat,
    linear-gradient(#fff, #dfeee7) 78% 50% / 56px 72px no-repeat;
}

.slot-art {
  border: 10px solid rgba(212, 175, 55, 0.3);
  border-radius: 18px;
  background: repeating-linear-gradient(90deg, #fff 0 28%, #ffe3ad 28% 33%);
}

.fish-art {
  background:
    radial-gradient(ellipse at 40% 52%, #fff 0 24%, transparent 25%),
    radial-gradient(ellipse at 62% 44%, #bcecff 0 24%, transparent 25%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18));
}

.live-art {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #fff2c7 0 24%, transparent 25%),
    radial-gradient(circle at 50% 70%, #b92135 0 28%, transparent 29%);
}

.dice-art {
  background:
    linear-gradient(#fff, #dfe7ef) 28% 40% / 58px 58px no-repeat,
    linear-gradient(#fff, #dfe7ef) 68% 54% / 58px 58px no-repeat;
  transform: rotate(12deg);
}

.game-card strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 56px;
  font-size: 19px;
  letter-spacing: 0.5px;
}

.game-card button {
  position: absolute;
  left: 18px;
  bottom: 16px;
  min-height: 36px;
  padding: 0 18px;
  color: #111111;
  font-weight: 800;
  background: linear-gradient(180deg, #F7D76A, #D4AF37);
  border-color: transparent;
  letter-spacing: 0.5px;
}

.game-card button:hover {
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.wallet-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.data-table {
  overflow: hidden;
}

.data-table div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 50px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.data-table div:first-child {
  color: var(--muted);
  font-weight: 700;
  background: var(--surface-2);
  letter-spacing: 0.5px;
}

.data-table div:last-child {
  border-bottom: 0;
}

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

.pending {
  color: var(--brand);
}

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

.promo-card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.promo-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.promo-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  color: var(--brand-light);
  letter-spacing: 0.5px;
}

.promo-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.7;
}

.promo-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(212, 175, 55, 0.15);
  color: var(--brand);
  border: 1px solid rgba(212, 175, 55, 0.3);
  letter-spacing: 1px;
}

.promo-badge.hot {
  background: linear-gradient(135deg, #F7D76A, #D4AF37);
  color: #111111;
  border-color: transparent;
}

.promo-badge.new {
  background: var(--green);
  color: #fff;
  border-color: transparent;
}

.promo-badge.vip {
  background: var(--brand);
  color: #111111;
  border-color: transparent;
}

.customer-list,
.quick-grid {
  display: grid;
  gap: 14px;
}

.customer-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 18px;
  transition: all 0.3s ease;
}

.customer-list article:hover {
  border-color: var(--brand);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.customer-list small {
  grid-column: 1 / -1;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.profile-card h2,
.profile-card p {
  margin: 0;
}

.profile-card h2 {
  color: var(--brand-light);
  letter-spacing: 0.5px;
}

.profile-card p {
  margin-top: 6px;
  color: var(--muted);
}

.profile-page {
  display: grid;
  gap: 16px;
  margin: 0 -16px;
  padding: 0 16px 92px;
  background:
    radial-gradient(circle at 18% 0%, rgba(212, 175, 55, 0.16), transparent 260px),
    radial-gradient(circle at 86% 18%, rgba(245, 214, 123, 0.1), transparent 220px),
    linear-gradient(180deg, #050505 0%, #0a0f1f 48%, #050505 100%);
  color: #ffffff;
}

.profile-guest-card,
.profile-lux-card,
.profile-quick-panel,
.profile-group,
.profile-toast {
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 24px;
  background: #111827;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.profile-guest-card {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 20px;
}

.profile-guest-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-guest-brand img,
.profile-avatar img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
}

.profile-guest-brand h2 {
  margin: 0;
  color: #f5d67b;
  font-size: 20px;
}

.profile-guest-brand p {
  margin: 6px 0 0;
  color: #b8bdc9;
}

.profile-auth-actions {
  display: flex;
  gap: 10px;
}

.profile-vip-hero {
  position: relative;
  min-height: 258px;
  margin: 0 -16px 40px;
  padding: 20px 18px 72px;
  overflow: visible;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(245, 214, 123, 0.24) 40%, transparent 42%),
    linear-gradient(145deg, transparent 0 58%, rgba(212, 175, 55, 0.14) 60%, transparent 62%),
    radial-gradient(circle at 78% 22%, rgba(245, 214, 123, 0.2), transparent 28%),
    linear-gradient(180deg, #050505, #0a0f1f);
}

.profile-vip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}

.profile-hero-actions,
.profile-member-row,
.profile-quick-panel {
  position: relative;
  z-index: 1;
}

.profile-hero-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profile-hero-actions button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.52);
  color: #f5d67b;
}

.profile-member-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.profile-vip-avatar {
  width: 80px;
  height: 80px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.1), 0 0 30px rgba(245, 214, 123, 0.25);
}

.profile-vip-avatar img {
  width: 100%;
  height: 100%;
}

.profile-member-info {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profile-member-info > span {
  color: #f5d67b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.profile-member-info h2 {
  margin: 0;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
}

.profile-member-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8bdc9;
  font-size: 13px;
}

.profile-member-meta b {
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #050505;
  font-size: 12px;
}

.profile-copy-id {
  justify-self: start;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.42);
  color: #ffffff;
  font-size: 12px;
}

.profile-copy-id strong {
  margin-left: 8px;
  color: #f5d67b;
}

.profile-quick-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 96px;
  margin-top: -70px;
  background: rgba(5, 5, 5, 0.74);
  backdrop-filter: blur(18px);
}

.profile-quick-panel button {
  display: grid;
  place-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f5d67b;
}

.profile-quick-panel button + button {
  border-left: 1px solid rgba(212, 175, 55, 0.16);
}

.profile-lux-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.profile-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-section-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.profile-section-title button,
.profile-invite-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #050505;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.22);
}

.profile-assets-grid,
.profile-invite-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-assets-grid article,
.profile-invite-stats article {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 18px;
  background: rgba(5, 5, 5, 0.28);
}

.profile-assets-grid .primary {
  grid-column: 1 / -1;
}

.profile-assets-grid span,
.profile-invite-stats span,
.profile-mini-actions small {
  color: #b8bdc9;
  font-size: 13px;
}

.profile-assets-grid strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
}

.profile-invite-stats strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.15;
}

.profile-mini-actions,
.profile-record-grid,
.profile-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

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

.profile-mini-actions button,
.profile-record-grid button,
.profile-service-grid button {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 92px;
  padding: 12px 8px;
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 18px;
  background: rgba(5, 5, 5, 0.22);
  color: #ffffff;
  text-align: center;
}

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

.profile-line-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  color: #d4af37;
}

.profile-line-icon::before,
.profile-line-icon::after {
  content: "";
  position: absolute;
  background: #d4af37;
}

.profile-line-icon::before {
  width: 13px;
  height: 1.5px;
}

.profile-line-icon::after {
  width: 1.5px;
  height: 13px;
}

.profile-line-icon.message::after {
  display: none;
}

.profile-line-icon.settings {
  border-radius: 50%;
}

.profile-line-icon.settings::before {
  width: 14px;
  height: 14px;
  border: 1.5px solid #d4af37;
  border-radius: 50%;
  background: transparent;
}

.profile-line-icon.settings::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.profile-invite-card {
  background:
    radial-gradient(circle at 88% 18%, rgba(212, 175, 55, 0.12), transparent 180px),
    #111827;
}

.profile-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.role-entry {
  padding: 20px;
}

.role-entry h3 {
  margin: 0 0 10px;
  color: #f5d67b;
  font-size: 18px;
}

.profile-list {
  display: grid;
  gap: 8px;
}

.profile-list-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(5, 5, 5, 0.24);
  color: #fff;
  text-align: left;
  font-size: 14px;
}

.profile-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 40;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.28);
}

.profile-auth-actions .ghost-button,
.profile-auth-actions .primary-button {
  flex: 1;
}

@media (max-width: 460px) {
  .profile-record-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-member-info h2 {
    font-size: 24px;
  }

  .profile-assets-grid strong {
    font-size: 24px;
  }
}

body.profile-mode {
  background: #f5f7fb;
}

body.profile-mode .topbar {
  display: none;
}

body.profile-mode main {
  padding: 0 0 86px;
}

body.profile-mode .app-shell {
  width: min(430px, 100%);
  background: #f5f7fb;
}

body.profile-mode .profile-page {
  gap: 12px;
  margin: 0;
  padding: 0 18px 92px;
  background:
    radial-gradient(circle at 50% 318px, #ffffff 0 58px, transparent 59px),
    linear-gradient(180deg, #08224a 0 306px, #f6f7fb 306px 100%);
  color: #151923;
}

body.profile-mode .profile-vip-hero {
  min-height: 292px;
  margin: 0 -18px 0;
  padding: 28px 22px 118px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08), transparent 170px),
    radial-gradient(circle at 82% 16%, rgba(37, 99, 235, 0.18), transparent 190px),
    repeating-radial-gradient(ellipse at 4% 0%, rgba(255, 211, 136, 0.18) 0 1px, transparent 1px 10px),
    #08224a;
  overflow: hidden;
}

body.profile-mode .profile-vip-hero::before {
  content: "";
  position: absolute;
  inset: auto -70px -70px auto;
  width: 280px;
  height: 210px;
  border: 1px solid rgba(255, 210, 138, 0.12);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  mask-image: none;
}

body.profile-mode .profile-hero-actions {
  gap: 16px;
}

body.profile-mode .profile-hero-actions button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #ffffff;
}

body.profile-mode .profile-hero-actions svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

body.profile-mode .profile-message-button {
  position: relative;
}

body.profile-mode .profile-message-button b {
  position: absolute;
  top: -10px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0323b;
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
}

body.profile-mode .profile-member-row {
  margin-top: 32px;
  gap: 22px;
}

body.profile-mode .profile-vip-avatar {
  width: 108px;
  height: 108px;
  border: 6px solid #ffedc5;
  background: #17213a;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

body.profile-mode .profile-member-info {
  position: relative;
  gap: 14px;
  padding-right: 92px;
}

body.profile-mode .profile-member-info h2 {
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

body.profile-mode .profile-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #ffffff;
  font-size: 20px;
}

body.profile-mode .profile-member-meta span {
  flex: 0 0 auto;
}

body.profile-mode .profile-member-meta button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(#9ca9bd, #9ca9bd) 7px 4px / 11px 15px no-repeat,
    linear-gradient(#08224a, #08224a) 9px 6px / 9px 11px no-repeat,
    linear-gradient(#9ca9bd, #9ca9bd) 3px 8px / 12px 14px no-repeat;
}

body.profile-mode .profile-member-meta b {
  position: absolute;
  top: 8px;
  right: 0;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8, #ffc766);
  color: #4b2f00;
  font-size: 17px;
  box-shadow: 0 6px 16px rgba(249, 186, 72, 0.28);
}

body.profile-mode .profile-quick-panel {
  min-height: 132px;
  margin: -70px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(14, 36, 76, 0.86);
  box-shadow: 0 16px 28px rgba(8, 25, 57, 0.24);
  backdrop-filter: blur(18px);
}

body.profile-mode .profile-quick-panel button {
  position: relative;
  color: #ffffff;
  font-size: 16px;
}

body.profile-mode .profile-quick-panel em {
  position: absolute;
  top: 20px;
  left: calc(50% + 2px);
  min-width: 50px;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 16px 16px 16px 3px;
  background: #f0323b;
  color: #ffffff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

body.profile-mode .profile-quick-panel strong {
  color: #ffffff;
  font-size: 16px;
}

body.profile-mode .profile-quick-panel .profile-line-icon,
body.profile-mode .profile-mini-actions .profile-line-icon,
body.profile-mode .profile-record-grid .profile-line-icon,
body.profile-mode .profile-service-grid .profile-line-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #eef4ff, #dfe9ff);
  color: #2563eb;
  box-shadow: none;
}

body.profile-mode .profile-quick-panel .profile-line-icon {
  background: linear-gradient(180deg, #ffeebc, #ffd36d);
}

body.profile-mode .profile-line-icon::before,
body.profile-mode .profile-line-icon::after {
  background: currentColor;
}

body.profile-mode .profile-line-icon.withdraw::before {
  width: 18px;
}

body.profile-mode .profile-line-icon.withdraw::after {
  height: 18px;
  transform: rotate(90deg);
}

body.profile-mode .profile-line-icon.support {
  border-radius: 50%;
}

body.profile-mode .profile-line-icon.support::before {
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: transparent;
}

body.profile-mode .profile-line-icon.support::after {
  width: 11px;
  height: 8px;
  right: 6px;
  bottom: 9px;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  background: transparent;
}

body.profile-mode .profile-line-icon.recharge::before,
body.profile-mode .profile-line-icon.rechargeRecords::before,
body.profile-mode .profile-line-icon.withdrawRecords::before,
body.profile-mode .profile-line-icon.betRecords::before,
body.profile-mode .profile-line-icon.reportRecords::before,
body.profile-mode .profile-line-icon.promoRecords::before,
body.profile-mode .profile-line-icon.profileInfo::before,
body.profile-mode .profile-line-icon.securityCenter::before,
body.profile-mode .profile-line-icon.helpCenter::before {
  width: 16px;
}

body.profile-mode .profile-line-icon.recharge::after,
body.profile-mode .profile-line-icon.rechargeRecords::after,
body.profile-mode .profile-line-icon.withdrawRecords::after,
body.profile-mode .profile-line-icon.betRecords::after,
body.profile-mode .profile-line-icon.reportRecords::after,
body.profile-mode .profile-line-icon.promoRecords::after,
body.profile-mode .profile-line-icon.profileInfo::after,
body.profile-mode .profile-line-icon.securityCenter::after,
body.profile-mode .profile-line-icon.helpCenter::after {
  height: 16px;
}

body.profile-mode .profile-line-icon.recharge::before {
  width: 18px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: transparent;
}

body.profile-mode .profile-line-icon.recharge::after {
  right: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #eef4ff;
}

body.profile-mode .profile-line-icon.withdraw::before {
  width: 18px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: transparent;
}

body.profile-mode .profile-line-icon.withdraw::after {
  width: 12px;
  height: 2px;
  transform: none;
}

body.profile-mode .profile-line-icon.rechargeRecords::before,
body.profile-mode .profile-line-icon.withdrawRecords::before,
body.profile-mode .profile-line-icon.promoRecords::before {
  width: 15px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: transparent;
}

body.profile-mode .profile-line-icon.rechargeRecords::after,
body.profile-mode .profile-line-icon.withdrawRecords::after,
body.profile-mode .profile-line-icon.promoRecords::after {
  width: 9px;
  height: 2px;
  box-shadow: 0 5px 0 currentColor;
}

body.profile-mode .profile-line-icon.betRecords::before {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

body.profile-mode .profile-line-icon.betRecords::after {
  width: 2px;
  height: 18px;
  box-shadow: 6px 0 0 -1px currentColor, -6px 0 0 -1px currentColor;
  transform: rotate(45deg);
}

body.profile-mode .profile-line-icon.reportRecords::before {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 7px 4px 0 currentColor, 14px -3px 0 currentColor;
}

body.profile-mode .profile-line-icon.reportRecords::after {
  display: none;
}

body.profile-mode .profile-line-icon.profileInfo {
  border-radius: 50%;
}

body.profile-mode .profile-line-icon.profileInfo::before {
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

body.profile-mode .profile-line-icon.profileInfo::after {
  bottom: 5px;
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
}

body.profile-mode .profile-line-icon.securityCenter::before {
  width: 18px;
  height: 20px;
  clip-path: polygon(50% 0, 90% 16%, 82% 72%, 50% 100%, 18% 72%, 10% 16%);
}

body.profile-mode .profile-line-icon.securityCenter::after {
  width: 9px;
  height: 5px;
  border-left: 2px solid #eef4ff;
  border-bottom: 2px solid #eef4ff;
  background: transparent;
  transform: rotate(-45deg);
}

body.profile-mode .profile-line-icon.helpCenter {
  border-radius: 50%;
}

body.profile-mode .profile-line-icon.helpCenter::before {
  content: "?";
  width: auto;
  height: auto;
  background: transparent;
  color: currentColor;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

body.profile-mode .profile-line-icon.helpCenter::after {
  display: none;
}

body.profile-mode .profile-lux-card {
  gap: 18px;
  padding: 26px 18px;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(13, 28, 55, 0.08);
}

body.profile-mode .profile-assets-card {
  position: relative;
  margin-top: 0;
  border-radius: 24px;
}

body.profile-mode .profile-assets-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -34px;
  height: 52px;
  border-radius: 26px 26px 0 0;
  background: #ffffff;
}

body.profile-mode .profile-section-title h3 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111827;
  font-size: 22px;
}

body.profile-mode .profile-section-title h3::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(180deg, #4d82ff, #215bea);
}

body.profile-mode .profile-section-title button,
body.profile-mode .profile-invite-actions button {
  min-width: 104px;
  min-height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffdda0, #ffc05f);
  color: #111827;
  box-shadow: none;
}

body.profile-mode .profile-link-button {
  min-width: 86px;
  min-height: 28px;
  padding: 0;
  background: transparent;
  color: #7a8395;
  box-shadow: none;
}

body.profile-mode .profile-link-button::after,
body.profile-mode .profile-fund-detail::after {
  content: "›";
  margin-left: 8px;
  font-size: 28px;
  line-height: 0;
}

body.profile-mode .profile-assets-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

body.profile-mode .profile-assets-grid article,
body.profile-mode .profile-invite-stats article {
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.profile-mode .profile-assets-grid article + article,
body.profile-mode .profile-invite-stats article + article {
  padding-left: 22px;
  border-left: 1px solid #e8edf5;
}

body.profile-mode .profile-assets-grid .primary {
  grid-column: auto;
}

body.profile-mode .profile-fund-detail {
  grid-column: 2;
  justify-self: end;
  margin-top: -8px;
  border: 0;
  background: transparent;
  color: #7a8395;
  font-size: 15px;
}

body.profile-mode .profile-assets-grid span,
body.profile-mode .profile-invite-stats span,
body.profile-mode .profile-mini-actions small {
  color: #7a8395;
  font-size: 14px;
}

body.profile-mode .profile-assets-grid strong {
  color: #050505;
  font-size: 34px;
  letter-spacing: -0.5px;
}

body.profile-mode .profile-mini-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  padding: 14px 8px;
  border: 1px solid #edf1f7;
  border-radius: 14px;
}

body.profile-mode .profile-mini-actions button,
body.profile-mode .profile-record-grid button,
body.profile-mode .profile-service-grid button {
  min-height: 78px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
}

body.profile-mode .profile-mini-actions button + button,
body.profile-mode .profile-record-grid button + button {
  border-left: 1px solid #e8edf5;
}

body.profile-mode .profile-mini-actions strong,
body.profile-mode .profile-record-grid strong,
body.profile-mode .profile-service-grid strong {
  color: #202733;
  font-size: 15px;
}

body.profile-mode .profile-record-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

body.profile-mode .profile-invite-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

body.profile-mode .profile-gift-art {
  position: absolute;
  right: 26px;
  bottom: 26px;
  width: 126px;
  height: 112px;
}

body.profile-mode .profile-gift-art .gift-box {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 86px;
  height: 72px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255,255,255,.72) 45% 57%, transparent 58%),
    linear-gradient(180deg, #8eb3ff, #3471f4);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22);
}

body.profile-mode .profile-gift-art .gift-lid {
  position: absolute;
  right: 4px;
  top: 20px;
  width: 102px;
  height: 26px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255,255,255,.74) 45% 57%, transparent 58%),
    linear-gradient(180deg, #9bbcff, #477ef5);
}

body.profile-mode .profile-gift-art .gift-lid::before,
body.profile-mode .profile-gift-art .gift-lid::after {
  content: "";
  position: absolute;
  top: -22px;
  width: 42px;
  height: 30px;
  border: 8px solid #6e9dff;
  border-radius: 50% 50% 0 50%;
  transform: rotate(26deg);
}

body.profile-mode .profile-gift-art .gift-lid::before {
  left: 18px;
}

body.profile-mode .profile-gift-art .gift-lid::after {
  right: 12px;
  transform: rotate(-64deg);
}

body.profile-mode .profile-gift-art .gift-coin {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe7a5, #f5a623);
  border: 3px solid #ffd37b;
  box-shadow: 0 8px 12px rgba(245, 166, 35, 0.22);
}

body.profile-mode .profile-gift-art .coin-a {
  left: 8px;
  bottom: 10px;
  width: 42px;
  height: 42px;
}

body.profile-mode .profile-gift-art .coin-b {
  left: 36px;
  bottom: 0;
  width: 32px;
  height: 32px;
}

body.profile-mode .profile-invite-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-right: 138px;
}

body.profile-mode .profile-invite-stats strong {
  color: #050505;
  font-size: 22px;
}

body.profile-mode .profile-invite-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(100%, 300px);
}

body.profile-mode .profile-invite-actions button:first-child {
  background: linear-gradient(180deg, #3a78ff, #1657e8);
  color: #ffffff;
}

body.profile-mode .profile-invite-actions button:last-child {
  border: 1px solid #2563eb;
  background: #ffffff;
  color: #2563eb;
}

body.profile-mode .profile-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.profile-mode .profile-toast {
  background: rgba(8, 34, 74, 0.92);
}

body.profile-mode .bottom-nav {
  width: min(430px, 100%);
  padding: 8px 8px 12px;
  border-top: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
}

body.profile-mode .bottom-nav button {
  color: #8b93a5;
}

body.profile-mode .bottom-nav button.active {
  color: #2563eb;
}

body.profile-mode .profile-member-info {
  position: relative !important;
  padding-right: 92px !important;
}

body.profile-mode .profile-member-meta b {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
}

body.profile-mode .profile-page {
  gap: 8px;
  padding: 0 14px 72px;
  background:
    radial-gradient(circle at 50% 204px, #ffffff 0 32px, transparent 33px),
    linear-gradient(180deg, #08224a 0 200px, #f6f7fb 200px 100%);
}

body.profile-mode .profile-vip-hero {
  min-height: 196px;
  margin: 0 -14px;
  padding: 14px 18px 70px;
}

body.profile-mode .profile-hero-actions {
  gap: 10px;
}

body.profile-mode .profile-hero-actions button {
  width: 32px;
  height: 32px;
}

body.profile-mode .profile-hero-actions svg {
  width: 28px;
  height: 28px;
}

body.profile-mode .profile-message-button b {
  width: 24px;
  height: 24px;
  top: -7px;
  right: -6px;
  font-size: 12px;
}

body.profile-mode .profile-member-row {
  margin-top: 14px;
  gap: 12px;
}

body.profile-mode .profile-vip-avatar {
  width: 64px;
  height: 64px;
  border-width: 4px;
}

body.profile-mode .profile-member-info {
  gap: 7px !important;
  padding-right: 78px !important;
}

body.profile-mode .profile-member-info h2 {
  font-size: 22px;
}

body.profile-mode .profile-member-meta {
  gap: 7px;
  font-size: 13px;
}

body.profile-mode .profile-member-meta button {
  width: 18px;
  height: 18px;
}

body.profile-mode .profile-member-meta b {
  min-height: 24px;
  padding: 4px 10px;
  font-size: 12px;
}

body.profile-mode .profile-quick-panel {
  min-height: 74px;
  margin: -36px 8px 7px;
  border-radius: 18px;
}

body.profile-mode .profile-quick-panel .profile-line-icon,
body.profile-mode .profile-mini-actions .profile-line-icon,
body.profile-mode .profile-record-grid .profile-line-icon,
body.profile-mode .profile-service-grid .profile-line-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
}

body.profile-mode .profile-quick-panel strong,
body.profile-mode .profile-mini-actions strong,
body.profile-mode .profile-record-grid strong,
body.profile-mode .profile-service-grid strong {
  font-size: 11px;
}

body.profile-mode .profile-quick-panel em {
  top: 8px;
  min-width: 38px;
  min-height: 20px;
  padding: 3px 6px;
  font-size: 11px;
}

body.profile-mode .profile-lux-card {
  gap: 7px;
  padding: 10px 12px;
  border-radius: 16px;
}

body.profile-mode .profile-assets-card::before {
  top: -14px;
  height: 22px;
  border-radius: 18px 18px 0 0;
}

body.profile-mode .profile-section-title h3 {
  gap: 8px;
  font-size: 17px;
}

body.profile-mode .profile-section-title h3::before {
  width: 20px;
  height: 20px;
  border-radius: 7px;
}

body.profile-mode .profile-section-title button,
body.profile-mode .profile-invite-actions button {
  min-width: 66px;
  min-height: 32px;
  border-radius: 10px;
  font-size: 13px;
}

body.profile-mode .profile-assets-grid span,
body.profile-mode .profile-invite-stats span,
body.profile-mode .profile-mini-actions small {
  font-size: 10px;
}

body.profile-mode .profile-assets-grid strong {
  font-size: 22px;
}

body.profile-mode .profile-fund-detail {
  margin-top: -6px;
  font-size: 12px;
}

body.profile-mode .profile-mini-actions {
  margin-top: 2px;
  padding: 6px 4px;
  border-radius: 12px;
}

body.profile-mode .profile-mini-actions button,
body.profile-mode .profile-record-grid button,
body.profile-mode .profile-service-grid button {
  min-height: 44px;
  gap: 4px;
}

body.profile-mode .profile-record-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.profile-mode .profile-invite-stats {
  padding-right: 82px;
}

body.profile-mode .profile-invite-stats strong {
  font-size: 14px;
}

body.profile-mode .profile-gift-art {
  right: 18px;
  bottom: 12px;
  width: 92px;
  height: 80px;
  transform: scale(0.66);
  transform-origin: right bottom;
}

body.profile-mode .profile-invite-actions {
  width: min(100%, 220px);
  gap: 8px;
}

body.profile-mode .profile-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.profile-mode .bottom-nav {
  padding: 6px 8px 8px;
}

body.profile-mode .bottom-nav button {
  min-height: 44px;
}

body.profile-mode .profile-page {
  gap: 6px !important;
  padding: 0 12px 66px !important;
  background:
    radial-gradient(circle at 50% 176px, #ffffff 0 26px, transparent 27px),
    linear-gradient(180deg, #08224a 0 172px, #f6f7fb 172px 100%) !important;
}

body.profile-mode .profile-vip-hero {
  min-height: 168px !important;
  margin: 0 -12px !important;
  padding: 12px 18px 56px !important;
}

body.profile-mode .profile-hero-actions button {
  width: 28px !important;
  height: 28px !important;
}

body.profile-mode .profile-hero-actions svg {
  width: 24px !important;
  height: 24px !important;
}

body.profile-mode .profile-message-button b {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}

body.profile-mode .profile-member-row {
  margin-top: 8px !important;
  gap: 12px !important;
}

body.profile-mode .profile-vip-avatar {
  width: 56px !important;
  height: 56px !important;
  border-width: 3px !important;
}

body.profile-mode .profile-member-info h2 {
  font-size: 20px !important;
}

body.profile-mode .profile-member-meta {
  font-size: 12px !important;
}

body.profile-mode .profile-member-meta b {
  min-height: 22px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
}

body.profile-mode .profile-quick-panel {
  min-height: 60px !important;
  margin: -30px 8px 6px !important;
  border-radius: 16px !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon,
body.profile-mode .profile-mini-actions .profile-line-icon,
body.profile-mode .profile-record-grid .profile-line-icon,
body.profile-mode .profile-service-grid .profile-line-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
}

body.profile-mode .profile-quick-panel em {
  top: 5px !important;
  min-height: 18px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
}

body.profile-mode .profile-lux-card {
  gap: 5px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

body.profile-mode .profile-assets-card::before {
  top: -12px !important;
  height: 20px !important;
}

body.profile-mode .profile-section-title h3 {
  font-size: 16px !important;
  gap: 7px !important;
}

body.profile-mode .profile-section-title h3::before {
  width: 18px !important;
  height: 18px !important;
}

body.profile-mode .profile-section-title button,
body.profile-mode .profile-invite-actions button {
  min-width: 58px !important;
  min-height: 28px !important;
  font-size: 12px !important;
}

body.profile-mode .profile-assets-grid strong {
  font-size: 20px !important;
}

body.profile-mode .profile-assets-grid span,
body.profile-mode .profile-invite-stats span,
body.profile-mode .profile-mini-actions small {
  font-size: 9px !important;
}

body.profile-mode .profile-mini-actions {
  margin-top: 0 !important;
  padding: 4px !important;
}

body.profile-mode .profile-mini-actions button,
body.profile-mode .profile-record-grid button,
body.profile-mode .profile-service-grid button {
  min-height: 38px !important;
  gap: 3px !important;
}

body.profile-mode .profile-quick-panel strong,
body.profile-mode .profile-mini-actions strong,
body.profile-mode .profile-record-grid strong,
body.profile-mode .profile-service-grid strong {
  font-size: 11px !important;
}

body.profile-mode .profile-invite-stats {
  padding-right: 70px !important;
}

body.profile-mode .profile-invite-stats strong {
  font-size: 13px !important;
}

body.profile-mode .profile-gift-art {
  right: 12px !important;
  bottom: 10px !important;
  transform: scale(0.52) !important;
  transform-origin: right bottom !important;
}

body.profile-mode .profile-invite-actions {
  width: min(100%, 200px) !important;
  gap: 6px !important;
}

/* ===== 代理中心 ===== */
body.agent-page {
  margin: 0;
  background: #f4f8ff;
  color: #1e293b;
}

.agent-shell {
  min-height: 100vh;
  padding: 12px 12px 90px;
  background:
    radial-gradient(circle at 82% 3%, rgba(47, 107, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
}

.agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.agent-header h1 {
  margin: 0;
  color: #173e9e;
  font-size: 22px;
  font-weight: 950;
}

.agent-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.agent-back {
  width: 44px;
  height: 44px;
  border: 1px solid #dbe7ff;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(30, 87, 153, 0.08);
}

.agent-back img {
  width: 20px;
  height: 20px;
}

.agent-main {
  display: grid;
  gap: 12px;
}

.agent-card {
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(30, 87, 153, 0.09);
}

.agent-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 12px;
  min-height: 168px;
  color: #ffffff;
  background:
    radial-gradient(circle at 84% 16%, rgba(245, 214, 123, 0.34), transparent 28%),
    linear-gradient(135deg, #173e9e, #2f6bff 72%, #5c8dff);
}

.agent-hero span {
  display: inline-block;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.agent-hero h2 {
  margin: 8px 0 6px;
  font-size: 25px;
  font-weight: 950;
}

.agent-hero p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.agent-hero-points {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.agent-hero-points strong {
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  color: #173e9e;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  font-size: 12px;
}

.agent-hero-art {
  position: relative;
  display: grid;
  place-items: center;
}

.agent-hero-art b {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 26px;
  color: #173e9e;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 18px 32px rgba(0,0,0,.18);
}

.agent-hero-art i {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}

.agent-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.agent-section-head h2,
.agent-section-head p {
  margin: 0;
}

.agent-section-head h2 {
  color: #173e9e;
  font-size: 17px;
  font-weight: 950;
}

.agent-section-head p {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.agent-section-head em,
.agent-member-row em,
.agent-settlement-row em {
  align-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.agent-section-head em.success,
.agent-member-row em.success,
.agent-settlement-row em.success {
  background: rgba(34,197,94,.12);
  color: #16a34a;
}

.agent-section-head em.warning,
.agent-member-row em.warning,
.agent-settlement-row em.warning {
  background: rgba(212,175,55,.16);
  color: #9f7a13;
}

.agent-section-head em.neutral,
.agent-member-row em.neutral,
.agent-settlement-row em.neutral {
  background: #eef2f7;
  color: #64748b;
}

.agent-commission-main,
.agent-metric-grid,
.agent-performance-grid {
  display: grid;
  gap: 10px;
}

.agent-commission-main {
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: stretch;
}

.agent-commission-main > strong {
  display: grid;
  align-content: center;
  min-height: 82px;
  padding: 14px;
  border-radius: 16px;
  color: #173e9e;
  background: #f4f8ff;
  font-size: 24px;
  font-weight: 950;
}

.agent-commission-main article,
.agent-metric-grid article,
.agent-performance-grid article {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e8edf5;
  background: #f8fbff;
}

.agent-commission-main span,
.agent-metric-grid span,
.agent-performance-grid span,
.agent-settlement-row span,
.agent-member-row span,
.agent-summary-row span,
.agent-link-box span {
  color: #64748b;
  font-size: 12px;
}

.agent-commission-main b,
.agent-metric-grid strong,
.agent-performance-grid strong,
.agent-pyramid strong,
.agent-settlement-row strong,
.agent-member-row strong,
.agent-summary-row strong,
.agent-link-box strong {
  color: #1e293b;
  font-size: 15px;
  font-weight: 950;
}

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

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

.agent-metric-grid small {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.35;
}

.agent-pyramid {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.agent-pyramid article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 360px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  box-shadow: 0 12px 24px rgba(47,107,255,.18);
}

.agent-pyramid article:nth-child(1) { width: 58%; }
.agent-pyramid article:nth-child(2) { width: 72%; }
.agent-pyramid article:nth-child(3) { width: 86%; }
.agent-pyramid article:nth-child(4) {
  width: 100%;
  background: linear-gradient(135deg, #173e9e, #2f6bff);
}

.agent-pyramid span,
.agent-pyramid strong {
  color: #ffffff;
}

.agent-structure {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  padding: 4px 8px 0;
}

.agent-structure-pyramid {
  display: grid;
  justify-items: center;
  align-content: end;
  height: 142px;
  transform: perspective(280px) rotateX(10deg);
}

.agent-structure-pyramid i {
  display: block;
  height: 42px;
  background: linear-gradient(135deg, #5c8dff, #0f63e9);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 20px rgba(47, 107, 255, .18);
}

.agent-structure-pyramid i:nth-child(1) { width: 54px; }
.agent-structure-pyramid i:nth-child(2) { width: 92px; margin-top: -4px; }
.agent-structure-pyramid i:nth-child(3) { width: 132px; margin-top: -4px; }

.agent-structure-list {
  display: grid;
  gap: 0;
}

.agent-structure-list article {
  display: grid;
  grid-template-columns: 88px 72px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #dce8ff;
}

.agent-structure-list article.total {
  grid-template-columns: 1fr auto;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #f4f8ff;
}

.agent-structure-list span {
  color: #0b2d91;
  font-size: 14px;
  font-weight: 850;
}

.agent-structure-list strong {
  color: #173e9e;
  font-size: 17px;
  white-space: nowrap;
}

.agent-structure-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-structure-list div i {
  width: 12px;
  height: 14px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #5c8dff, #2f6bff);
}

.agent-promo-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 12px;
}

.agent-link-box {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: #f4f8ff;
  border: 1px solid #e8edf5;
}

.agent-link-box strong {
  word-break: break-all;
}

.agent-link-box button,
.agent-qr-box button,
.agent-share-row button {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.agent-qr-box {
  display: grid;
  gap: 8px;
}

.agent-qr-box img {
  width: 128px;
  height: 128px;
  padding: 8px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e8edf5;
}

.agent-share-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.agent-share-row button {
  background: #ffffff;
  color: #2f6bff;
  border: 1px solid rgba(47,107,255,.24);
}

.agent-member-table,
.agent-summary-list,
.agent-settlement-list {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.agent-member-head,
.agent-member-row {
  display: grid;
  grid-template-columns: 82px 126px repeat(4, 96px) 68px;
  gap: 8px;
  align-items: center;
  min-width: 760px;
}

.agent-member-head {
  padding: 0 10px 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.agent-member-row,
.agent-summary-row,
.agent-settlement-row {
  padding: 10px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #e8edf5;
}

.agent-summary-row {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(88px, auto));
  gap: 8px;
  align-items: center;
}

.agent-settlement-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.agent-settlement-row div {
  display: grid;
  gap: 3px;
}

.agent-skeleton {
  min-height: 170px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(47,107,255,.08), rgba(255,255,255,0)),
    #ffffff;
  background-size: 220% 100%;
  animation: agentSkeleton 1.1s ease-in-out infinite;
}

.agent-skeleton.short {
  min-height: 96px;
}

@keyframes agentSkeleton {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (min-width: 700px) {
  .agent-shell {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 430px) {
  .agent-shell {
    padding-inline: 10px;
  }

  .agent-card {
    padding: 12px;
    border-radius: 16px;
  }

  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 82px;
    min-height: 154px;
  }

  .agent-hero h2 {
    font-size: 23px;
  }

  .agent-hero-art b {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    font-size: 23px;
  }

  .agent-commission-main,
  .agent-metric-grid.four,
  .agent-promo-tools {
    grid-template-columns: 1fr;
  }

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

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

  .agent-qr-box {
    justify-items: start;
  }
}

/* ===== 客服实时聊天紧凑修复：微信/Telegram 风 ===== */
body.support-page,
.n9-support-root,
.n9-support-overlay,
.n9-support-viewport,
.n9-support-body,
.client-support-shell,
.client-support-thread,
.client-support-composer,
.svc-shell,
.svc-body,
.svc-chat-panel,
.svc-message-list,
.svc-compose {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.support-page,
.n9-support-root {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}

.n9-support-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #eef2f7 !important;
  box-sizing: border-box !important;
  z-index: 1200 !important;
}

.n9-support-root[hidden] {
  display: none !important;
}

.n9-support-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #eef2f7 !important;
}

.n9-support-viewport {
  position: relative !important;
  top: var(--n9-support-vv-top, 0px) !important;
  left: auto !important;
  width: min(100vw, 420px) !important;
  height: var(--n9-support-vh, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--n9-support-vh, 100dvh) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%) !important;
  box-sizing: border-box !important;
}

.n9-support-body {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.n9-support-root .client-support-shell {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  align-content: stretch !important;
}

html.support-ui-open,
body.support-ui-open {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.support-ui-open {
  position: static !important;
  width: 100% !important;
}

body.support-ui-open .app-shell {
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.client-support-thread {
  gap: 8px !important;
  padding: 6px 2px 2px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.client-support-loading,
.client-support-load-older {
  justify-self: center;
  border: 0;
  color: #64748b;
  font-size: 13px;
}

.client-support-loading {
  padding: 10px 14px;
  background: transparent;
}

.client-support-load-older {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.client-support-row {
  gap: 7px !important;
}

.client-support-mini-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

.client-support-bubble {
  max-width: min(76%, 292px) !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.055) !important;
}

.client-support-row.customer .client-support-bubble {
  background: #2f7bff !important;
}

.client-support-row.customer .client-support-bubble p,
.client-support-row.customer .client-support-bubble .client-support-file {
  color: #ffffff !important;
}

.client-support-row.customer .client-support-bubble small {
  color: rgba(255, 255, 255, 0.76) !important;
}

.client-support-bubble strong {
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

.client-support-bubble p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.client-support-bubble small {
  margin-top: 5px !important;
  font-size: 10px !important;
}

.client-support-image {
  width: min(220px, 100%) !important;
  max-height: 116px !important;
  border-radius: 12px !important;
}

.client-support-system {
  padding: 7px 12px !important;
  font-size: 11px !important;
}

.client-support-composer {
  gap: 7px !important;
  align-items: flex-end !important;
}

.client-support-attach-toggle,
.client-support-emoji {
  width: 38px !important;
  height: 38px !important;
  font-size: 21px !important;
}

.client-support-input {
  min-height: 46px !important;
  padding: 6px 7px 6px 13px !important;
  gap: 7px !important;
}

.client-support-input textarea {
  min-height: 28px !important;
  max-height: 78px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.client-support-send {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
}

.client-support-tools {
  gap: 7px !important;
  padding-bottom: 2px !important;
}

.client-support-tools button {
  min-height: 46px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}

body.support-page .svc-shell {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
}

body.support-page .svc-chat-card,
body.support-page .svc-message-list,
body.support-page .svc-compose {
  min-width: 0 !important;
}

body.support-page .svc-message-list {
  gap: 5px !important;
  padding: 4px !important;
}

body.support-page .svc-message-bubble {
  max-width: min(70%, 430px) !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  box-shadow: 0 4px 14px rgba(15, 35, 80, 0.045) !important;
}

body.support-page .svc-message.customer .svc-message-bubble {
  background: #ffffff !important;
  border-color: #e7edf8 !important;
}

body.support-page .svc-message.agent .svc-message-bubble {
  background: #2f7bff !important;
  border-color: #2f7bff !important;
}

body.support-page .svc-message.agent .svc-message-text,
body.support-page .svc-message.agent .svc-message-meta,
body.support-page .svc-message.agent .svc-message-meta span {
  color: #ffffff !important;
}

body.support-page .svc-message-text {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

body.support-page .svc-message-meta {
  margin-top: 5px !important;
  gap: 7px !important;
  font-size: 9px !important;
}

body.support-page .svc-compose {
  gap: 5px !important;
  padding-top: 3px !important;
}

body.support-page .svc-compose-top {
  gap: 6px !important;
}

body.support-page .svc-attach-toggle {
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
}

body.support-page .svc-compose textarea {
  min-height: 54px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  resize: none !important;
}

body.support-page .svc-compose-actions button,
body.support-page .svc-chat-actions button,
body.support-page .svc-compose-tools button,
body.support-page .svc-quick-replies button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

body.support-page .svc-compose-actions .primary {
  min-width: 66px !important;
}

@media (max-width: 760px) {
  body.support-page .svc-body {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  body.support-page .svc-message-bubble {
    max-width: 78% !important;
  }
}

/* 代理中心最终版：蓝白商务宽屏布局 */
body.agent-page {
  min-height: 100vh;
  background: #f4f8ff;
  color: #07133a;
  overflow-x: hidden;
}

body.agent-page *,
body.agent-page *::before,
body.agent-page *::after {
  box-sizing: border-box;
}

.agent-shell {
  width: 100%;
  max-width: 1024px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 28px 28px;
  background:
    radial-gradient(circle at 12% 8%, rgba(47, 107, 255, 0.09), transparent 260px),
    linear-gradient(180deg, #ffffff 0, #f4f8ff 120px, #f4f8ff 100%);
}

.agent-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 96px 1fr 96px;
  align-items: center;
  min-height: 70px;
  margin: 0 -28px 14px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(30, 87, 153, 0.08);
  backdrop-filter: blur(16px);
}

.agent-header h1 {
  justify-self: center;
  margin: 0;
  color: #050b1f;
  font-size: 28px;
  font-weight: 950;
}

.agent-back {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.agent-back img {
  width: 24px;
  height: 24px;
}

.agent-record-link {
  justify-self: end;
  color: #0b55e8;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}

.agent-main {
  gap: 16px;
  width: 100%;
  overflow: hidden;
}

.agent-card,
.agent-commission-card {
  width: 100%;
  min-width: 0;
  border: 1px solid #dce8ff;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(30, 87, 153, 0.09);
}

.agent-card {
  padding: 16px 20px;
}

.agent-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
  align-items: center;
  min-height: 282px;
  padding: 32px 36px;
  border-radius: 10px;
  color: #ffffff;
  background:
    radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.5), transparent 7%),
    radial-gradient(circle at 82% 58%, rgba(245, 214, 123, 0.32), transparent 18%),
    linear-gradient(135deg, #082d9f 0%, #0c55df 48%, #4d91ff 100%);
  box-shadow: 0 12px 28px rgba(47, 107, 255, 0.24);
  width: 100%;
  min-width: 0;
}

.agent-hero-image-card {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 16px 30px rgba(47, 107, 255, 0.18);
}

.agent-hero-image-card::before {
  display: none;
}

.agent-hero-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 282;
  border-radius: 18px;
  object-fit: cover;
}

.agent-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 0 38%, rgba(255,255,255,.18) 39%, transparent 40%),
    linear-gradient(142deg, transparent 0 45%, rgba(255,255,255,.12) 46%, transparent 47%),
    radial-gradient(circle at 91% 16%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 88% 24%, rgba(255,255,255,.9) 0 2px, transparent 3px);
  opacity: .78;
}

.agent-hero > div:first-child {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.agent-hero span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  letter-spacing: .08em;
}

.agent-hero h2 {
  margin: 18px 0 20px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 950;
}

.agent-hero-points {
  gap: 14px;
  margin: 0;
}

.agent-hero-points strong {
  position: relative;
  width: fit-content;
  padding: 0 0 0 44px;
  color: #ffffff;
  background: transparent;
  font-size: 22px;
  line-height: 1.35;
  max-width: 100%;
}

.agent-hero-points strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  box-shadow: inset 0 -2px 0 rgba(133, 91, 0, .25);
}

.agent-hero-art {
  position: relative;
  z-index: 1;
  min-height: 220px;
}

.agent-hero-art b {
  position: absolute;
  right: 108px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 130px;
  height: 112px;
  border: 3px solid #f5d67b;
  border-radius: 18px;
  color: #f5d67b;
  background: linear-gradient(135deg, #0f4bd1, #092b91);
  font-size: 45px;
  line-height: .85;
  box-shadow: 0 18px 28px rgba(0,0,0,.22);
}

.agent-hero-art b small {
  display: block;
  color: #ffffff;
  font-size: 20px;
}

.agent-coin {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  box-shadow: 0 8px 0 #a97c1c, 0 18px 26px rgba(8, 45, 159, .25);
}

.agent-coin.c1 {
  right: 248px;
  bottom: 18px;
  width: 86px;
  height: 24px;
}

.agent-coin.c2 {
  right: 48px;
  bottom: 24px;
  width: 72px;
  height: 22px;
}

.agent-people {
  position: absolute;
  border-radius: 999px 999px 22px 22px;
  background: linear-gradient(180deg, #ffffff, #93b9ff);
}

.agent-people::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -52px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  transform: translateX(-50%);
}

.agent-people.p1 {
  right: 214px;
  bottom: 72px;
  width: 84px;
  height: 74px;
}

.agent-people.p2 {
  right: 292px;
  bottom: 58px;
  width: 58px;
  height: 54px;
  background: linear-gradient(180deg, #5c8dff, #0c55df);
}

.agent-people.p2::before {
  width: 48px;
  height: 48px;
  top: -36px;
  background: linear-gradient(180deg, #7fb0ff, #1a60f2);
}

.agent-arrow {
  position: absolute;
  right: 28px;
  top: 22px;
  width: 132px;
  height: 132px;
  border-right: 18px solid rgba(255,255,255,.62);
  border-top: 18px solid rgba(255,255,255,.62);
  transform: rotate(12deg);
}

.agent-cup {
  position: absolute;
  right: 0;
  bottom: 16px;
  width: 48px;
  height: 58px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.agent-commission-card {
  overflow: hidden;
}

.agent-commission-main {
  grid-template-columns: 39% repeat(3, 1fr);
  gap: 0;
}

.agent-commission-main article {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 22px 30px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.agent-commission-main article:not(:last-child) {
  border-right: 1px solid #dce8ff;
}

.agent-commission-main .agent-commission-amount {
  border-right: 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #6aa3ff);
}

.agent-commission-main span {
  color: #173e9e;
  font-size: 18px;
  font-weight: 800;
}

.agent-commission-main b,
.agent-commission-main strong {
  color: #050b1f;
  font-size: 28px;
  font-weight: 950;
}

.agent-commission-main .agent-commission-amount span {
  color: #ffffff;
}

.agent-commission-main .agent-commission-amount strong {
  color: #f5d67b;
  font-size: 52px;
  line-height: 1;
}

.agent-mini-icon,
.agent-data-icon,
.agent-perf-icon,
.agent-gift-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  font-style: normal;
  font-weight: 950;
}

.agent-mini-icon::before { content: "%"; }
.agent-mini-icon.calendar::before { content: "□"; }
.agent-mini-icon.record::before { content: "▤"; }

.agent-section-head {
  margin-bottom: 12px;
}

.agent-section-head h2 {
  color: #0b2d91;
  font-size: 23px;
  line-height: 1.2;
}

.agent-section-head h2 small {
  font-size: 15px;
}

.agent-section-head p {
  color: #5d6d8f;
  font-size: 16px;
}

.agent-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.agent-team-grid article,
.agent-team-strip article {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 94px;
  padding: 16px 20px;
  border: 1px solid #dce8ff;
  border-radius: 10px;
  background: #ffffff;
}

.agent-team-grid strong,
.agent-team-strip strong {
  color: #0b55e8;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
}

.agent-team-grid span,
.agent-team-strip span {
  color: #0b2d91;
  font-size: 16px;
  font-weight: 800;
}

.agent-team-grid .agent-data-icon,
.agent-team-strip .agent-data-icon {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.agent-data-icon::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: currentColor; box-shadow: 0 17px 0 -5px currentColor; }
.agent-data-icon.two::before,
.agent-data-icon.group::before { box-shadow: -10px 16px 0 -6px currentColor, 10px 16px 0 -6px currentColor; }
.agent-data-icon.today { background: linear-gradient(135deg, #ff8a1f, #ffb86b); }
.agent-data-icon.month { background: linear-gradient(135deg, #16b86b, #42d88c); }

.agent-formula {
  margin: -2px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #64748b;
  background: #f4f8ff;
  font-size: 13px;
  line-height: 1.5;
}

.agent-team-strip {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 0;
  margin-top: 14px;
  border: 1px solid #dce8ff;
  border-radius: 10px;
  overflow: hidden;
}

.agent-team-strip article {
  border: 0;
  border-radius: 0;
}

.agent-team-strip article:not(:last-child) {
  border-right: 1px solid #dce8ff;
}

.agent-performance-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #dce8ff;
  border-radius: 10px 10px 0 0;
}

.agent-performance-grid article {
  justify-items: center;
  gap: 8px;
  min-height: 128px;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  text-align: center;
}

.agent-performance-grid article:not(:last-child) {
  border-right: 1px solid #dce8ff;
}

.agent-performance-grid span {
  color: #0b2d91;
  font-size: 15px;
  font-weight: 800;
}

.agent-performance-grid strong {
  color: #0b55e8;
  font-size: 25px;
}

.agent-perf-icon.recharge::before { content: "▣"; }
.agent-perf-icon.withdraw { background: linear-gradient(135deg, #16b86b, #42d88c); }
.agent-perf-icon.withdraw::before { content: "▰"; }
.agent-perf-icon.profit { background: linear-gradient(135deg, #ff7a1a, #ffb45f); }
.agent-perf-icon.profit::before { content: "↗"; }
.agent-perf-icon.loss { background: linear-gradient(135deg, #6057f5, #8d7cff); }
.agent-perf-icon.loss::before { content: "◔"; }
.agent-perf-icon.wallet::before { content: "▰"; }

.agent-settle-profit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 0 22px;
  border: 1px solid #f3d58d;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, #fffaf0, #ffffff);
}

.agent-settle-profit span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #050b1f;
  font-size: 20px;
  font-weight: 900;
}

.agent-settle-profit strong {
  justify-self: end;
  color: #0b55e8;
  font-size: 36px;
  font-weight: 950;
}

.agent-invite-box {
  display: grid;
  grid-template-columns: 100px 1fr minmax(260px, 42%);
  align-items: center;
  gap: 18px;
  min-height: 118px;
  padding: 16px 22px;
  border: 1px solid #dce8ff;
  border-radius: 10px;
  background: #ffffff;
}

.agent-gift-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
}

.agent-gift-icon::before {
  content: "";
  width: 44px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1e63f2, #7eb0ff);
  box-shadow: inset 16px 0 0 rgba(255,255,255,.22), inset 0 13px 0 rgba(255,255,255,.2);
}

.agent-invite-rules {
  display: grid;
  gap: 8px;
}

.agent-invite-rules span {
  position: relative;
  padding-left: 24px;
  color: #07133a;
  font-size: 16px;
  font-weight: 800;
}

.agent-invite-rules span::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f6bff;
}

.agent-invite-rules b {
  color: #ff761b;
}

.agent-invite-box article {
  display: grid;
  align-content: center;
  min-height: 90px;
  padding: 16px 24px;
  border: 1px solid #dce8ff;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fbff, #eef5ff);
}

.agent-invite-box article span {
  color: #0b2d91;
  font-size: 15px;
  font-weight: 800;
}

.agent-invite-box article strong {
  color: #0b55e8;
  font-size: 34px;
}

.agent-reward-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.agent-reward-stats article {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #dce8ff;
  border-radius: 10px;
  background: #f8fbff;
}

.agent-reward-stats span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.agent-reward-stats strong {
  color: #173e9e;
  font-size: 24px;
  font-weight: 950;
}

.agent-promo-tools {
  grid-template-columns: 36% 220px 1fr;
  align-items: center;
  gap: 0;
}

.agent-link-box,
.agent-qr-box {
  min-height: 150px;
  padding: 16px 24px;
  border: 0;
  border-right: 1px solid #dce8ff;
  border-radius: 0;
  background: #ffffff;
}

.agent-link-box strong {
  padding: 12px 14px;
  border: 1px solid #bfd2ff;
  border-radius: 8px;
  color: #1e293b;
  font-size: 16px;
  font-weight: 500;
}

.agent-link-box button,
.agent-qr-box button {
  width: 132px;
  min-height: 46px;
  border-radius: 8px;
  font-size: 17px;
}

.agent-qr-box {
  justify-items: center;
}

.agent-qr-box img {
  width: 104px;
  height: 104px;
  padding: 0;
  border-radius: 4px;
}

.agent-share-row {
  display: grid;
  grid-template-columns: repeat(3, 92px);
  justify-content: center;
  gap: 22px;
  margin: -128px 0 0 calc(36% + 220px);
  min-height: 128px;
  align-items: center;
}

.agent-share-row button {
  min-height: 56px;
  border: 1px solid #dce8ff;
  border-radius: 14px;
  color: #0b2d91;
  background: #f6f9ff;
  font-size: 14px;
}

.agent-bottom-note {
  margin: -2px 0 0;
  color: #173e9e;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.agent-member-row,
.agent-summary-row,
.agent-settlement-row {
  background: #f8fbff;
  border-color: #dce8ff;
}

.agent-summary-row {
  grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr));
}

.agent-summary-row b {
  color: #173e9e;
  font-size: 22px;
}

@media (max-width: 760px) {
  .agent-shell {
    width: 100%;
    padding: 0 12px 22px;
  }

  .agent-header {
    grid-template-columns: 64px 1fr 76px;
    min-height: 58px;
    margin: 0 -12px 12px;
    padding: 0 14px;
  }

  .agent-header h1 {
    font-size: 21px;
  }

  .agent-record-link {
    font-size: 13px;
  }

  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 88px;
    min-height: 176px;
    padding: 20px 18px;
  }

  .agent-hero-art {
    min-height: 100px;
  }

  .agent-hero span {
    font-size: 12px;
  }

  .agent-hero h2 {
    margin: 10px 0 12px;
    font-size: 22px;
  }

  .agent-hero-points {
    gap: 7px;
  }

  .agent-hero-points strong {
    padding-left: 24px;
    font-size: 12px;
  }

  .agent-hero-points strong::before {
    width: 16px;
    height: 16px;
  }

  .agent-hero-art b {
    right: 0;
    bottom: 16px;
    width: 72px;
    height: 62px;
    font-size: 24px;
  }

  .agent-hero-art b small {
    font-size: 12px;
  }

  .agent-coin,
  .agent-cup,
  .agent-people,
  .agent-arrow {
    display: none;
  }

  .agent-commission-main,
  .agent-invite-box,
  .agent-promo-tools {
    grid-template-columns: 1fr;
  }

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

  .agent-commission-main .agent-commission-amount {
    grid-column: 1 / -1;
  }

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

  .agent-team-strip {
    grid-template-columns: 1fr;
  }

  .agent-commission-main article,
  .agent-link-box,
  .agent-qr-box {
    border-right: 0 !important;
    border-bottom: 1px solid #dce8ff;
  }

  .agent-team-strip article,
  .agent-performance-grid article {
    border-right: 0 !important;
    border-bottom: 1px solid #dce8ff;
  }

  .agent-commission-main .agent-commission-amount strong {
    font-size: 36px;
  }

  .agent-commission-main article {
    min-height: 78px;
    padding: 12px 10px;
  }

  .agent-commission-main article:not(.agent-commission-amount) {
    justify-items: center;
    text-align: center;
  }

  .agent-commission-main span {
    font-size: 12px;
  }

  .agent-commission-main b {
    font-size: 18px;
  }

  .agent-mini-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .agent-team-grid article,
  .agent-team-strip article {
    grid-template-columns: 40px 1fr;
    min-height: 82px;
    padding: 12px;
  }

  .agent-team-grid .agent-data-icon,
  .agent-team-strip .agent-data-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .agent-team-grid strong,
  .agent-team-strip strong {
    font-size: 25px;
  }

  .agent-performance-grid article {
    min-height: 108px;
    padding: 12px 8px;
  }

  .agent-performance-grid strong {
    font-size: 19px;
  }

  .agent-settle-profit {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }

  .agent-settle-profit strong {
    justify-self: start;
    font-size: 28px;
  }

  .agent-share-row {
    margin: 12px 0 0;
    grid-template-columns: repeat(3, 1fr);
    min-height: auto;
  }

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

  .agent-reward-stats article {
    padding: 10px 8px;
  }

  .agent-reward-stats span {
    font-size: 11px;
  }

  .agent-reward-stats strong {
    font-size: 20px;
  }

  .agent-summary-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .agent-shell {
    padding: 0 10px 16px;
  }

  .agent-header {
    min-height: 48px;
    margin: 0 -10px 8px;
  }

  .agent-header h1 {
    font-size: 19px;
  }

  .agent-main {
    gap: 8px;
  }

  .agent-card,
  .agent-commission-card,
  .agent-hero {
    border-radius: 12px;
  }

  .agent-card {
    padding: 8px;
  }

  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 50px;
    min-height: 118px;
    padding: 12px;
  }

  .agent-hero-image-card {
    min-height: 0;
    padding: 0;
  }

  .agent-hero-image-card img {
    aspect-ratio: 1000 / 282;
    border-radius: 12px;
  }

  .agent-hero span {
    font-size: 9px;
  }

  .agent-hero h2 {
    margin: 5px 0 7px;
    font-size: 18px;
  }

  .agent-hero-points {
    gap: 3px;
  }

  .agent-hero-points strong {
    padding-left: 15px;
    font-size: 10px;
    line-height: 1.2;
  }

  .agent-hero-points strong::before {
    top: 1px;
    width: 9px;
    height: 9px;
  }

  .agent-hero-art {
    min-height: 74px;
  }

  .agent-hero-art b {
    width: 48px;
    height: 42px;
    border-width: 2px;
    border-radius: 12px;
    font-size: 16px;
  }

  .agent-hero-art b small {
    font-size: 8px;
  }

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

  .agent-commission-main article {
    min-height: 54px;
    padding: 7px 6px;
  }

  .agent-commission-main .agent-commission-amount {
    min-height: 68px;
  }

  .agent-commission-main .agent-commission-amount strong {
    font-size: 30px;
  }

  .agent-commission-main span {
    font-size: 10px;
  }

  .agent-commission-main b {
    font-size: 15px;
  }

  .agent-mini-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
  }

  .agent-section-head {
    margin-bottom: 6px;
  }

  .agent-section-head h2 {
    font-size: 16px;
  }

  .agent-section-head p {
    font-size: 11px;
  }

  .agent-team-grid {
    gap: 6px;
  }

  .agent-team-grid article,
  .agent-team-strip article {
    grid-template-columns: 26px 1fr;
    min-height: 54px;
    column-gap: 7px;
    padding: 8px;
  }

  .agent-formula {
    display: none;
  }

  .agent-team-grid .agent-data-icon,
  .agent-team-strip .agent-data-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }

  .agent-data-icon::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 9px 0 -3px currentColor;
  }

  .agent-data-icon.two::before,
  .agent-data-icon.group::before {
    box-shadow: -5px 8px 0 -3px currentColor, 5px 8px 0 -3px currentColor;
  }

  .agent-team-grid span,
  .agent-team-strip span {
    font-size: 12px;
  }

  .agent-team-grid strong,
  .agent-team-strip strong {
    font-size: 20px;
  }

  .agent-formula {
    margin: -2px 0 8px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .agent-performance-grid article {
    min-height: 68px;
    padding: 6px 4px;
  }

  .agent-performance-grid span {
    font-size: 10px;
  }

  .agent-performance-grid strong {
    font-size: 14px;
  }

  .agent-perf-icon,
  .agent-gift-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .agent-settle-profit {
    grid-template-columns: auto 1fr;
    min-height: 42px;
    padding: 6px 9px;
  }

  .agent-settle-profit span {
    font-size: 13px;
  }

  .agent-settle-profit strong {
    justify-self: end;
    font-size: 21px;
  }

  .agent-structure {
    grid-template-columns: 82px 1fr;
    gap: 8px;
    padding: 0;
  }

  .agent-structure-pyramid {
    height: 92px;
  }

  .agent-structure-pyramid i {
    height: 28px;
  }

  .agent-structure-pyramid i:nth-child(1) { width: 34px; }
  .agent-structure-pyramid i:nth-child(2) { width: 58px; }
  .agent-structure-pyramid i:nth-child(3) { width: 78px; }

  .agent-structure-list article {
    grid-template-columns: 62px 50px 1fr;
    gap: 5px;
    min-height: 24px;
  }

  .agent-structure-list article.total {
    min-height: 28px;
    padding: 0 8px;
  }

  .agent-structure-list span {
    font-size: 11px;
  }

  .agent-structure-list strong {
    font-size: 12px;
  }

  .agent-structure-list div {
    gap: 4px;
  }

  .agent-structure-list div i {
    width: 7px;
    height: 9px;
  }

  .agent-invite-box {
    grid-template-columns: 42px 1fr 120px;
    gap: 8px;
    min-height: 64px;
    padding: 8px;
  }

  .agent-gift-icon::before {
    width: 28px;
    height: 22px;
    border-radius: 5px;
  }

  .agent-invite-rules {
    gap: 3px;
  }

  .agent-invite-rules span {
    padding-left: 15px;
    font-size: 10px;
  }

  .agent-invite-box article {
    min-height: 48px;
    padding: 8px;
  }

  .agent-invite-box article span {
    font-size: 10px;
  }

  .agent-invite-box article strong {
    font-size: 18px;
  }

  .agent-reward-stats {
    display: none;
  }

  .agent-promo-tools {
    grid-template-columns: 1fr 86px;
    gap: 8px;
  }

  .agent-link-box,
  .agent-qr-box {
    min-height: 84px;
    padding: 8px;
    border: 1px solid #dce8ff !important;
    border-radius: 10px;
  }

  .agent-link-box strong {
    padding: 7px;
    font-size: 10px;
  }

  .agent-link-box button,
  .agent-qr-box button {
    width: 82px;
    min-height: 28px;
    font-size: 11px;
  }

  .agent-qr-box img {
    width: 54px;
    height: 54px;
  }

  .agent-share-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 6px 0 0;
  }

  .agent-share-row button {
    min-height: 30px;
    border-radius: 8px;
    font-size: 10px;
  }

  .agent-bottom-note {
    font-size: 10px;
  }
}

/* 代理中心手机高级版：广告图 Banner + 紧凑总览 */
@media (max-width: 760px) {
  .agent-shell {
    background: linear-gradient(180deg, #ffffff 0, #f4f8ff 86px, #f4f8ff 100%);
  }

  .agent-main {
    gap: 10px;
  }

  .agent-card,
  .agent-commission-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(31, 90, 170, 0.10);
  }

  .agent-hero {
    grid-template-columns: minmax(0, 1fr) 118px;
    min-height: 136px;
    padding: 14px 12px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 72% 18%, rgba(255,255,255,.78) 0 4px, transparent 5px),
      radial-gradient(circle at 76% 32%, rgba(255,255,255,.46), transparent 34px),
      linear-gradient(135deg, #082fa8 0%, #1265ed 58%, #67a7ff 100%);
    box-shadow: 0 16px 30px rgba(47, 107, 255, 0.22);
  }

  .agent-hero::before {
    background:
      linear-gradient(126deg, transparent 0 38%, rgba(255,255,255,.18) 39%, transparent 41%),
      linear-gradient(138deg, transparent 0 52%, rgba(255,255,255,.14) 53%, transparent 55%),
      radial-gradient(circle at 88% 18%, rgba(245,214,123,.9) 0 2px, transparent 3px),
      radial-gradient(circle at 94% 28%, rgba(255,255,255,.9) 0 2px, transparent 3px);
  }

  .agent-hero span {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .agent-hero h2 {
    margin: 6px 0 8px;
    font-size: 23px;
    letter-spacing: 0;
  }

  .agent-hero-points {
    gap: 4px;
  }

  .agent-hero-points strong {
    padding-left: 16px;
    color: rgba(255,255,255,.96);
    font-size: 10.5px;
  }

  .agent-hero-points strong::before {
    width: 8px;
    height: 8px;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(245,214,123,.32);
  }

  .agent-hero-art {
    min-height: 108px;
    overflow: visible;
  }

  .agent-coin,
  .agent-cup,
  .agent-people,
  .agent-arrow {
    display: block;
  }

  .agent-hero-art b {
    right: 30px;
    bottom: 8px;
    width: 58px;
    height: 52px;
    border: 0;
    border-radius: 12px;
    color: #f5d67b;
    background: linear-gradient(145deg, #1d67f3, #0a399f);
    font-size: 19px;
    box-shadow: 0 10px 18px rgba(2, 24, 90, .26);
  }

  .agent-hero-art b::before {
    content: "";
    position: absolute;
    inset: -6px 20px auto 20px;
    height: 64px;
    border-radius: 999px;
    border: 7px solid #f5d67b;
    border-bottom: 0;
    transform: rotate(-8deg);
  }

  .agent-hero-art b::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(180deg, #f5d67b, #d4af37);
  }

  .agent-hero-art b small {
    position: relative;
    z-index: 1;
    font-size: 8px;
  }

  .agent-people.p1 {
    right: 62px;
    bottom: 58px;
    width: 30px;
    height: 30px;
    opacity: .95;
  }

  .agent-people.p1::before {
    width: 26px;
    height: 26px;
    top: -20px;
  }

  .agent-people.p2 {
    right: 12px;
    bottom: 56px;
    width: 26px;
    height: 27px;
    opacity: .85;
  }

  .agent-people.p2::before {
    width: 22px;
    height: 22px;
    top: -17px;
  }

  .agent-arrow {
    right: 0;
    top: 20px;
    width: 50px;
    height: 50px;
    border-right-width: 8px;
    border-top-width: 8px;
    border-color: rgba(245, 214, 123, .9);
    transform: rotate(8deg);
  }

  .agent-coin.c1 {
    right: 84px;
    bottom: 9px;
    width: 38px;
    height: 10px;
    box-shadow: 0 4px 0 #b98519;
  }

  .agent-coin.c2 {
    right: 8px;
    bottom: 10px;
    width: 32px;
    height: 9px;
    box-shadow: 0 4px 0 #b98519;
  }

  .agent-cup {
    right: 0;
    bottom: 15px;
    width: 22px;
    height: 26px;
    border-radius: 0 0 9px 9px;
  }

  .agent-commission-card {
    overflow: hidden;
    background: linear-gradient(135deg, #2f6bff 0%, #6aa3ff 100%);
  }

  .agent-commission-main {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(92px, .8fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
    min-height: 112px;
  }

  .agent-commission-main .agent-commission-amount {
    grid-column: 1;
    grid-row: 1 / 4;
    align-content: center;
    min-height: 112px;
    padding: 14px;
    background: transparent;
  }

  .agent-commission-main article:not(.agent-commission-amount) {
    grid-column: 2;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-content: center;
    align-items: center;
    justify-items: start;
    column-gap: 7px;
    min-height: 0;
    padding: 7px 10px;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.28) !important;
    background: transparent;
    text-align: left;
  }

  .agent-commission-main .agent-commission-amount span,
  .agent-commission-main article:not(.agent-commission-amount) span {
    color: rgba(255,255,255,.9);
  }

  .agent-commission-main .agent-commission-amount strong {
    color: #f5d67b;
    font-size: 34px;
    line-height: 1;
  }

  .agent-commission-main b {
    color: #ffffff;
    font-size: 14px;
  }

  .agent-mini-icon {
    grid-row: span 2;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    color: #2f6bff;
    background: rgba(255,255,255,.92);
  }

  .agent-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #e2ebff;
  }

  .agent-team-grid article {
    grid-template-columns: 1fr;
    min-height: 58px;
    padding: 8px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .agent-team-grid article:not(:nth-child(3n)) {
    border-right: 1px solid #e2ebff;
  }

  .agent-team-grid article:nth-child(-n+3) {
    border-bottom: 1px solid #e2ebff;
  }

  .agent-team-grid .agent-data-icon {
    display: none;
  }

  .agent-team-grid span {
    color: #475569;
    font-size: 11px;
  }

  .agent-team-grid strong {
    margin-top: 2px;
    color: #0b55e8;
    font-size: 22px;
  }

  .agent-card:nth-of-type(3) {
    padding-bottom: 10px;
  }

  .agent-performance-grid {
    border: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: inset 0 0 0 1px #e2ebff;
  }

  .agent-performance-grid article {
    min-height: 72px;
    border-color: #e2ebff;
    background: #ffffff;
  }

  .agent-settle-profit {
    border: 0;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(90deg, #fff7df, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(212,175,55,.26);
  }

  .agent-hero.agent-hero-image-card {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: 0 16px 30px rgba(47, 107, 255, 0.18);
  }

  .agent-hero.agent-hero-image-card::before {
    display: none;
  }

  .agent-hero.agent-hero-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1000 / 282;
    border-radius: 18px;
    object-fit: cover;
  }
}

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

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 12;
  justify-content: center;
  width: min(520px, 100%);
  padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid #e8edf5;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 28px rgba(30, 87, 153, 0.1);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  gap: 4px;
}

.bottom-nav button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
}

.user-notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 2px 7px rgba(255, 59, 48, 0.34);
}

.bottom-notification-badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 10px);
  z-index: 4;
}

.profile-record-grid button,
.profile-section-title h3 {
  position: relative;
}

.profile-entry-notification {
  position: absolute;
  top: 5px;
  right: 8px;
}

.profile-section-notification {
  margin-left: 5px;
  vertical-align: middle;
}

/* ===== 代理中心一比一设计稿版 ===== */
body.agent-page {
  margin: 0;
  overflow: hidden auto;
  background: #f4f8ff;
}

body.agent-page .agent-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  max-width: none;
  min-height: 1450px;
  margin: 0;
  padding: 0 28px 22px;
  background: #f4f8ff;
  transform: scale(var(--agent-scale, 1));
  transform-origin: top left;
}

body.agent-page .agent-header {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr 104px;
  align-items: center;
  min-height: 68px;
  margin: 0 -28px 0;
  padding: 0 28px;
  background: #ffffff;
  box-shadow: none;
}

body.agent-page .agent-header h1 {
  justify-self: center;
  color: #0b1020;
  font-size: 30px;
  font-weight: 900;
}

body.agent-page .agent-back {
  width: 44px;
  height: 44px;
  background: transparent;
}

body.agent-page .agent-back img {
  width: 30px;
  height: 30px;
}

body.agent-page .agent-record-link {
  justify-self: end;
  color: #0757ff;
  font-size: 20px;
  font-weight: 900;
}

body.agent-page .agent-main {
  display: grid;
  gap: 14px;
  width: 100%;
  overflow: visible;
}

body.agent-page .agent-hero-image-card {
  width: 644px;
  height: 182px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 12px 30px rgba(27, 96, 185, 0.14);
}

body.agent-page .agent-hero-image-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 18px;
  object-fit: cover;
}

body.agent-page .agent-card,
body.agent-page .agent-commission-card {
  width: 644px;
  border: 1px solid #dce8ff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(33, 91, 155, 0.08);
}

body.agent-page .agent-commission-card {
  overflow: hidden;
}

body.agent-page .agent-commission-main {
  display: grid;
  grid-template-columns: 250px repeat(3, 1fr);
  grid-template-rows: 112px;
  min-height: 112px;
  gap: 0;
}

body.agent-page .agent-commission-main article {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 112px;
  padding: 16px 18px;
  border: 0;
  border-left: 1px solid #dce8ff;
  border-radius: 0;
  background: #ffffff;
}

body.agent-page .agent-commission-main .agent-commission-amount {
  grid-column: auto;
  grid-row: auto;
  border-left: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #2f6bff, #6aa3ff);
}

body.agent-page .agent-commission-main .agent-commission-amount span {
  color: #ffffff;
  font-size: 19px;
}

body.agent-page .agent-commission-main .agent-commission-amount strong {
  color: #f5d67b;
  font-size: 39px;
  line-height: 1.05;
  letter-spacing: 0;
}

body.agent-page .agent-commission-main span {
  color: #0b2d91;
  font-size: 17px;
  font-weight: 800;
}

body.agent-page .agent-commission-main b {
  color: #111827;
  font-size: 24px;
  font-weight: 900;
}

body.agent-page .agent-commission-main article:not(.agent-commission-amount) {
  display: flex;
  grid-column: auto !important;
  grid-row: auto !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
}

body.agent-page .agent-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  font-size: 16px;
}

body.agent-page .agent-commission-main article:not(.agent-commission-amount) span,
body.agent-page .agent-team-grid span,
body.agent-page .agent-performance-grid span {
  white-space: nowrap;
}

body.agent-page .agent-card {
  padding: 13px 18px;
}

body.agent-page .agent-section-head {
  margin-bottom: 10px;
}

body.agent-page .agent-section-head h2 {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: #0b2d91;
  font-size: 20px;
  font-weight: 900;
}

body.agent-page .agent-section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 5px;
  height: 20px;
  border-radius: 4px;
  background: #2f6bff;
}

body.agent-page .agent-section-head p {
  display: none;
}

body.agent-page .agent-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 12px;
  overflow: visible;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

body.agent-page .agent-team-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  column-gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #dce8ff;
  border-radius: 12px;
  background: #ffffff;
}

body.agent-page .agent-team-grid article:nth-child(n) {
  border-right: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff;
}

body.agent-page .agent-team-grid .agent-data-icon {
  display: inline-grid;
  grid-row: span 2;
  width: 36px;
  height: 36px;
  border-radius: 15px;
}

body.agent-page .agent-team-grid span {
  color: #0b2d91;
  font-size: 16px;
  font-weight: 800;
}

body.agent-page .agent-team-grid strong {
  color: #0757d9;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
}

body.agent-page .agent-card:nth-of-type(3) {
  padding-bottom: 12px;
}

body.agent-page .agent-performance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid #dce8ff;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
}

body.agent-page .agent-performance-grid article {
  min-height: 112px;
  padding: 12px 8px;
  border: 0;
  border-right: 1px solid #dce8ff;
  background: #ffffff;
}

body.agent-page .agent-performance-grid article:last-child {
  border-right: 0;
}

body.agent-page .agent-performance-grid span {
  color: #0b2d91;
  font-size: 16px;
}

body.agent-page .agent-performance-grid strong {
  color: #0757d9;
  font-size: 22px;
}

body.agent-page .agent-perf-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body.agent-page .agent-formula {
  display: none;
}

body.agent-page .agent-settle-profit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(90deg, #fff8e8, #ffffff);
}

body.agent-page .agent-settle-profit::after {
  content: "";
  width: 66px;
  height: 40px;
  background: radial-gradient(ellipse at 50% 70%, #d4af37 0 48%, transparent 50%);
  opacity: .75;
}

body.agent-page .agent-settle-profit span {
  color: #111827;
  font-size: 20px;
  font-weight: 900;
}

body.agent-page .agent-settle-profit strong {
  justify-self: end;
  color: #0757d9;
  font-size: 31px;
}

body.agent-page .agent-invite-box {
  display: grid;
  grid-template-columns: 62px 1fr 250px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 14px;
  border: 1px solid #dce8ff;
  border-radius: 14px;
}

body.agent-page .agent-gift-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

body.agent-page .agent-invite-rules span {
  color: #07133a;
  font-size: 15px;
}

body.agent-page .agent-invite-box article {
  min-height: 64px;
  border: 1px solid #dce8ff;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff, #eef5ff);
}

body.agent-page .agent-invite-box article span {
  color: #0b2d91;
  font-size: 15px;
}

body.agent-page .agent-invite-box article strong {
  color: #0757d9;
  font-size: 27px;
}

body.agent-page .agent-reward-stats {
  display: none;
}

body.agent-page .agent-promo-tools {
  display: grid;
  grid-template-columns: 222px 128px 1fr;
  gap: 0;
  align-items: stretch;
}

body.agent-page .agent-link-box,
body.agent-page .agent-qr-box {
  min-height: 106px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid #dce8ff;
  border-radius: 0;
  background: #ffffff;
}

body.agent-page .agent-link-box strong {
  padding: 9px 12px;
  border: 1px solid #bfd2ff;
  border-radius: 8px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 500;
}

body.agent-page .agent-link-box button,
body.agent-page .agent-qr-box button {
  width: 108px;
  min-height: 34px;
  border-radius: 8px;
  font-size: 15px;
}

body.agent-page .agent-qr-box img {
  width: 74px;
  height: 74px;
  border-radius: 4px;
}

body.agent-page .agent-share-row {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  justify-content: center;
  gap: 12px;
  margin: -92px 0 0 350px;
  min-height: 92px;
}

body.agent-page .agent-share-row button {
  min-height: 42px;
  border: 1px solid #dce8ff;
  border-radius: 14px;
  color: #0b2d91;
  background: #f6f9ff;
  font-size: 13px;
}

body.agent-page .agent-bottom-note {
  margin: -6px 0 0;
  color: #173e9e;
  font-size: 13px;
  text-align: center;
}

/* Agent center custom 3D micro icons. */
body.agent-page .agent-mini-icon,
body.agent-page .agent-data-icon,
body.agent-page .agent-perf-icon,
body.agent-page .agent-gift-icon,
body.agent-page .agent-promo-icon,
body.agent-page .agent-share-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  color: transparent;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.92) 0 10%, transparent 28%),
    linear-gradient(145deg, #74b2ff 0%, #2f6bff 52%, #173e9e 100%);
  box-shadow:
    inset 0 2px 7px rgba(255, 255, 255, 0.42),
    inset 0 -8px 14px rgba(7, 42, 130, 0.24),
    0 8px 14px rgba(47, 107, 255, 0.22);
  font-size: 0;
}

body.agent-page .agent-mini-icon::before,
body.agent-page .agent-mini-icon::after,
body.agent-page .agent-data-icon::before,
body.agent-page .agent-data-icon::after,
body.agent-page .agent-perf-icon::before,
body.agent-page .agent-perf-icon::after,
body.agent-page .agent-gift-icon::before,
body.agent-page .agent-gift-icon::after,
body.agent-page .agent-promo-icon::before,
body.agent-page .agent-promo-icon::after,
body.agent-page .agent-share-icon::before,
body.agent-page .agent-share-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

body.agent-page .agent-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

body.agent-page .agent-mini-icon.percent::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef6ff, #bed7ff);
  box-shadow: inset 0 -4px 6px rgba(23, 62, 158, 0.16);
}

body.agent-page .agent-mini-icon.percent::after {
  width: 20px;
  height: 4px;
  border-radius: 4px;
  background: #2f6bff;
  transform: rotate(-38deg);
  box-shadow: -7px -5px 0 -1px #2f6bff, 7px 5px 0 -1px #2f6bff;
}

body.agent-page .agent-mini-icon.calendar::before {
  width: 25px;
  height: 23px;
  border-radius: 7px;
  background: linear-gradient(145deg, #f8fbff, #c9dcff);
  box-shadow: inset 0 -4px 8px rgba(23, 62, 158, 0.18);
}

body.agent-page .agent-mini-icon.calendar::after {
  top: 13px;
  width: 25px;
  height: 7px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(90deg, #2f6bff, #5c8dff);
  box-shadow: -6px -5px 0 -4px #173e9e, 6px -5px 0 -4px #173e9e;
}

body.agent-page .agent-mini-icon.record::before {
  width: 24px;
  height: 29px;
  border-radius: 7px;
  background: linear-gradient(145deg, #f8fbff, #cbdfff);
  box-shadow: inset 0 -4px 8px rgba(23, 62, 158, 0.18);
}

body.agent-page .agent-mini-icon.record::after {
  width: 14px;
  height: 4px;
  border-radius: 5px;
  background: #2f6bff;
  box-shadow: 0 7px 0 #2f6bff, 0 -7px 0 #2f6bff;
}

body.agent-page .agent-data-icon.one::before,
body.agent-page .agent-data-icon.two::before,
body.agent-page .agent-data-icon.three::before,
body.agent-page .agent-data-icon.four::before,
body.agent-page .agent-data-icon.group::before,
body.agent-page .agent-data-icon.today::before,
body.agent-page .agent-data-icon.month::before {
  width: 16px;
  height: 16px;
  top: 10px;
  left: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #c8dcff);
  box-shadow: 0 15px 0 2px #eaf2ff, inset 0 -3px 5px rgba(47, 107, 255, 0.2);
}

body.agent-page .agent-data-icon.one::after {
  inset: 5px;
  border: 2px solid rgba(245, 214, 123, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 11px rgba(245, 214, 123, 0.5);
}

body.agent-page .agent-data-icon.two::after {
  width: 15px;
  height: 15px;
  top: 14px;
  left: 8px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dfeaff, #86b6ff);
  box-shadow: 23px 0 0 #dfeaff, 11px 15px 0 4px #eaf2ff;
}

body.agent-page .agent-data-icon.three::after {
  left: 11px;
  top: 8px;
  width: 26px;
  height: 32px;
  border-left: 3px solid #eaf2ff;
  border-right: 3px solid #eaf2ff;
  border-bottom: 3px solid #eaf2ff;
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 11px 0 -9px #f5d67b;
}

body.agent-page .agent-data-icon.four::after {
  left: 9px;
  bottom: 8px;
  width: 30px;
  height: 24px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(145deg, #eaf2ff, #9dc2ff);
  box-shadow: inset 0 -7px 8px rgba(23, 62, 158, 0.18);
}

body.agent-page .agent-data-icon.group::after {
  width: 14px;
  height: 14px;
  top: 13px;
  left: 7px;
  border-radius: 50%;
  background: #dfeaff;
  box-shadow: 20px 0 0 #dfeaff, 10px -5px 0 2px #ffffff, 10px 16px 0 5px #eaf2ff;
}

body.agent-page .agent-data-icon.today {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.92) 0 10%, transparent 28%),
    linear-gradient(145deg, #7be6b0, #19b86f 55%, #079153);
}

body.agent-page .agent-data-icon.today::after {
  right: 8px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-right: 5px solid #f5d67b;
  border-top: 5px solid #f5d67b;
  transform: rotate(45deg);
  filter: drop-shadow(0 2px 3px rgba(7, 42, 130, 0.22));
}

body.agent-page .agent-data-icon.month {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.9) 0 10%, transparent 28%),
    linear-gradient(145deg, #73f0c0, #2f8cff 52%, #173e9e);
}

body.agent-page .agent-data-icon.month::after {
  left: 8px;
  bottom: 9px;
  width: 31px;
  height: 16px;
  border-radius: 16px 16px 6px 6px;
  background: #eaf2ff;
  box-shadow: 10px -12px 0 -2px #ffffff, 22px -4px 0 -4px #9ff3ce;
}

body.agent-page .agent-team-grid .agent-data-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

body.agent-page .agent-perf-icon.recharge::before {
  width: 29px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(145deg, #eaf2ff, #94beff);
  box-shadow: inset 0 -5px 8px rgba(23, 62, 158, 0.2);
}

body.agent-page .agent-perf-icon.recharge::after {
  right: 7px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f5d67b, #d4af37);
  box-shadow: 0 12px 0 -5px #f5d67b;
}

body.agent-page .agent-perf-icon.withdraw {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.9) 0 10%, transparent 28%),
    linear-gradient(145deg, #6ee8a5, #18b86b 55%, #08864d);
}

body.agent-page .agent-perf-icon.withdraw::before {
  width: 29px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffffff, #d8e7ff);
}

body.agent-page .agent-perf-icon.withdraw::after {
  width: 18px;
  height: 18px;
  border-right: 5px solid #f5d67b;
  border-bottom: 5px solid #f5d67b;
  transform: rotate(45deg);
}

body.agent-page .agent-perf-icon.profit {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.9) 0 10%, transparent 28%),
    linear-gradient(145deg, #ffe59b, #ff9f2f 55%, #e97713);
}

body.agent-page .agent-perf-icon.profit::before {
  left: 10px;
  bottom: 12px;
  width: 28px;
  height: 19px;
  border-left: 5px solid #ffffff;
  border-top: 5px solid #ffffff;
  transform: skew(-23deg) rotate(-12deg);
  border-radius: 4px 0 0 0;
}

body.agent-page .agent-perf-icon.profit::after {
  right: 8px;
  top: 9px;
  width: 15px;
  height: 15px;
  border-right: 5px solid #ffffff;
  border-top: 5px solid #ffffff;
  transform: rotate(45deg);
}

body.agent-page .agent-perf-icon.loss {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.9) 0 10%, transparent 28%),
    linear-gradient(145deg, #a99bff, #6f63f6 55%, #4f46c6);
}

body.agent-page .agent-perf-icon.loss::before {
  width: 25px;
  height: 25px;
  border: 5px solid #eaf2ff;
  border-right-color: #f5d67b;
  border-radius: 50%;
}

body.agent-page .agent-perf-icon.loss::after {
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: #eaf2ff;
  box-shadow: 0 8px 0 #eaf2ff;
}

body.agent-page .agent-perf-icon.wallet::before {
  width: 30px;
  height: 23px;
  border-radius: 8px;
  background: linear-gradient(145deg, #eaf2ff, #83b6ff);
}

body.agent-page .agent-perf-icon.wallet::after {
  right: 8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f5d67b, #d4af37);
  box-shadow: -10px 9px 0 -3px #f5d67b;
}

body.agent-page .agent-gift-icon::before {
  width: 31px;
  height: 28px;
  bottom: 7px;
  border-radius: 7px;
  background: linear-gradient(145deg, #4fa2ff, #0646bf);
  box-shadow: inset 0 -5px 9px rgba(7, 42, 130, 0.24);
}

body.agent-page .agent-gift-icon::after {
  width: 36px;
  height: 12px;
  top: 11px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 42%, #f5d67b 42% 58%, transparent 58%),
    linear-gradient(145deg, #6ab1ff, #2f6bff);
  box-shadow: 0 13px 0 -4px #f5d67b, -7px -5px 0 -3px #f5d67b, 7px -5px 0 -3px #f5d67b;
}

body.agent-page .agent-promo-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.agent-page .agent-promo-head .agent-promo-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body.agent-page .agent-promo-icon.rocket::before {
  width: 13px;
  height: 30px;
  border-radius: 13px 13px 7px 7px;
  background: linear-gradient(145deg, #ffffff, #9ec5ff);
  transform: rotate(42deg);
  box-shadow: inset 0 -4px 6px rgba(23, 62, 158, 0.18);
}

body.agent-page .agent-promo-icon.rocket::after {
  left: 9px;
  bottom: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(145deg, #f5d67b, #ff8a1f);
  transform: rotate(-25deg);
}

body.agent-page .agent-link-box span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

body.agent-page .agent-link-box .agent-promo-icon,
body.agent-page .agent-qr-box .agent-promo-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body.agent-page .agent-promo-icon.link::before {
  width: 20px;
  height: 9px;
  border: 4px solid #eaf2ff;
  border-radius: 10px;
  transform: rotate(-30deg);
}

body.agent-page .agent-promo-icon.link::after {
  width: 20px;
  height: 9px;
  border: 4px solid #f5d67b;
  border-radius: 10px;
  transform: translate(6px, 5px) rotate(-30deg);
}

body.agent-page .agent-qr-box {
  display: grid;
  justify-items: center;
}

body.agent-page .agent-promo-icon.qr::before {
  width: 22px;
  height: 22px;
  background:
    linear-gradient(#eaf2ff 0 0) 0 0 / 8px 8px,
    linear-gradient(#eaf2ff 0 0) 14px 0 / 8px 8px,
    linear-gradient(#eaf2ff 0 0) 0 14px / 8px 8px,
    linear-gradient(#f5d67b 0 0) 14px 14px / 8px 8px;
  background-repeat: no-repeat;
}

body.agent-page .agent-promo-icon.qr::after {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #173e9e;
  box-shadow: 14px 0 0 #173e9e, 0 14px 0 #173e9e, 14px 14px 0 #173e9e;
}

body.agent-page .agent-share-row button {
  display: grid;
  grid-template-rows: 28px auto;
  justify-items: center;
  align-content: center;
  gap: 2px;
}

body.agent-page .agent-share-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

body.agent-page .agent-share-icon::before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eaf2ff;
  box-shadow: 9px -6px 0 -2px #eaf2ff, 9px 7px 0 -2px #f5d67b;
}

body.agent-page .agent-share-icon::after {
  width: 18px;
  height: 12px;
  border-top: 3px solid #eaf2ff;
  border-bottom: 3px solid #f5d67b;
  transform: rotate(-25deg);
}

body.agent-page .agent-upload-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 8px 12px rgba(47, 107, 255, 0.18));
}

body.agent-page .agent-commission-main .agent-upload-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

body.agent-page .agent-promo-head .agent-upload-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body.agent-page .agent-link-box .agent-upload-icon,
body.agent-page .agent-qr-box .agent-upload-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body.agent-page .agent-share-row .agent-upload-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

/* ===== 后台代理中心：一页式运营面板 ===== */
body.ops-page .ops-agent-console {
  display: grid;
  gap: 16px;
  color: #1e293b;
}

body.ops-page .ops-agent-hero,
body.ops-page .ops-agent-card {
  border: 1px solid #dbe8ff;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(47, 107, 255, 0.08);
}

body.ops-page .ops-agent-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, .9fr);
  align-items: center;
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at 88% 14%, rgba(92, 141, 255, 0.28), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f4f8ff 48%, #eaf2ff 100%);
}

body.ops-page .ops-agent-hero span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2f6bff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

body.ops-page .ops-agent-hero h2 {
  margin: 0;
  color: #173e9e;
  font-size: 30px;
  line-height: 1.1;
}

body.ops-page .ops-agent-hero p,
body.ops-page .ops-agent-title p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

body.ops-page .ops-agent-search {
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 10px;
  padding: 8px;
  border: 1px solid #dbe8ff;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(47, 107, 255, 0.1);
}

body.ops-page .ops-agent-search input,
body.ops-page .ops-agent-tools input {
  width: 100%;
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  padding: 0 14px;
  color: #1e293b;
  background: #f8fbff;
  font-size: 14px;
  outline: none;
}

body.ops-page .ops-agent-search input {
  min-height: 44px;
}

body.ops-page .ops-agent-search button,
body.ops-page .ops-agent-quick button,
body.ops-page .ops-agent-actions button,
body.ops-page .ops-agent-tools button {
  border: 0;
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  color: #173e9e;
  background: #eaf2ff;
  font-weight: 900;
  cursor: pointer;
}

body.ops-page .ops-agent-search button,
body.ops-page .ops-agent-quick .primary,
body.ops-page .ops-agent-actions .primary {
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  box-shadow: 0 10px 20px rgba(47, 107, 255, 0.22);
}

body.ops-page .ops-agent-quick .gold,
body.ops-page .ops-agent-actions .gold {
  color: #173e9e;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
  box-shadow: 0 10px 18px rgba(212, 175, 55, 0.2);
}

body.ops-page .ops-agent-quick {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

body.ops-page .ops-agent-card {
  padding: 18px;
}

body.ops-page .ops-agent-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

body.ops-page .ops-agent-title h3 {
  margin: 0;
  color: #173e9e;
  font-size: 20px;
}

body.ops-page .ops-agent-info-grid,
body.ops-page .ops-agent-metrics,
body.ops-page .ops-agent-summary-box,
body.ops-page .ops-agent-rate-grid,
body.ops-page .ops-agent-split-summary {
  display: grid;
  gap: 10px;
}

body.ops-page .ops-agent-info-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ops-page .ops-agent-info-grid div,
body.ops-page .ops-agent-metrics article,
body.ops-page .ops-agent-summary-box article,
body.ops-page .ops-agent-rate-grid article,
body.ops-page .ops-agent-split-summary article {
  min-height: 76px;
  padding: 14px;
  border: 1px solid #e4edff;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
}

body.ops-page .ops-agent-info-grid span,
body.ops-page .ops-agent-metrics span,
body.ops-page .ops-agent-summary-box span,
body.ops-page .ops-agent-rate-grid span,
body.ops-page .ops-agent-split-summary span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.ops-page .ops-agent-info-grid strong,
body.ops-page .ops-agent-metrics strong,
body.ops-page .ops-agent-summary-box strong,
body.ops-page .ops-agent-rate-grid strong,
body.ops-page .ops-agent-split-summary strong {
  display: block;
  margin-top: 8px;
  color: #0b55e8;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 950;
}

body.ops-page .ops-agent-rate-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ops-page .ops-agent-rate-grid button {
  margin-top: 12px;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  font-weight: 900;
  cursor: pointer;
}

body.ops-page .ops-agent-split-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

body.ops-page .ops-agent-metrics.compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

body.ops-page .ops-agent-metrics.performance {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ops-page .ops-agent-profit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(212, 175, 55, 0.36);
  border-radius: 16px;
  background: linear-gradient(90deg, #fff8e8, #ffffff);
}

body.ops-page .ops-agent-profit span {
  color: #173e9e;
  font-weight: 900;
}

body.ops-page .ops-agent-profit strong {
  justify-self: end;
  color: #d4af37;
  font-size: 30px;
}

body.ops-page .ops-agent-formula {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body.ops-page .ops-agent-formula article {
  padding: 12px;
  border-radius: 14px;
  color: #64748b;
  background: #f4f8ff;
  font-size: 13px;
}

body.ops-page .ops-agent-formula b {
  display: block;
  margin-bottom: 5px;
  color: #173e9e;
}

body.ops-page .ops-agent-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.ops-page .ops-agent-commission strong,
body.ops-page .ops-agent-reward strong {
  display: block;
  color: #d4af37;
  font-size: 34px;
  line-height: 1;
}

body.ops-page .ops-agent-commission span,
body.ops-page .ops-agent-reward span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-weight: 800;
}

body.ops-page .ops-agent-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

body.ops-page .ops-agent-tools {
  display: grid;
  grid-template-columns: 180px 72px 72px;
  gap: 8px;
}

body.ops-page .ops-agent-direct-table {
  overflow: hidden;
  border: 1px solid #e4edff;
  border-radius: 16px;
}

body.ops-page .ops-agent-direct-table .head,
body.ops-page .ops-agent-direct-table > div:not(.head) {
  display: grid;
  grid-template-columns: .85fr .9fr 1.5fr 1fr 1fr 1fr 1fr .75fr;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
}

body.ops-page .ops-agent-direct-table .head {
  color: #173e9e;
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

body.ops-page .ops-agent-direct-table > div:not(.head) {
  border-top: 1px solid #edf3ff;
  color: #1e293b;
  font-size: 13px;
}

body.ops-page .ops-agent-direct-table.level {
  margin-top: 12px;
}

body.ops-page .ops-agent-direct-table.level .head,
body.ops-page .ops-agent-direct-table.level > div:not(.head) {
  grid-template-columns: .85fr .9fr 1.5fr 1fr 1fr 1fr 1fr .75fr;
}

body.ops-page .ops-agent-direct-table.split .head,
body.ops-page .ops-agent-direct-table.split > div:not(.head) {
  grid-template-columns: 1.2fr .75fr 1fr 1fr .8fr 1fr 1.5fr;
}

body.ops-page .ops-agent-summary-box {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ops-page .ops-agent-tree {
  display: grid;
  gap: 12px;
}

body.ops-page .ops-agent-tree-node {
  border: 1px solid #dbe8ff;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow: 0 10px 22px rgba(47, 107, 255, 0.06);
}

body.ops-page .ops-agent-tree-node summary {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(110px, .75fr)) 82px;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

body.ops-page .ops-agent-tree-node summary::-webkit-details-marker,
body.ops-page .ops-agent-customer-details summary::-webkit-details-marker {
  display: none;
}

body.ops-page .ops-agent-tree-node summary::after {
  content: "展开";
  justify-self: end;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-agent-tree-node[open] > summary::after {
  content: "收起";
}

body.ops-page .ops-agent-tree-node summary b,
body.ops-page .ops-agent-tree-node summary span,
body.ops-page .ops-agent-tree-node summary em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

body.ops-page .ops-agent-tree-node summary strong {
  display: block;
  margin-top: 4px;
  color: #173e9e;
  font-size: 18px;
}

body.ops-page .ops-agent-tree-node summary em {
  justify-self: start;
  padding: 7px 10px;
  border-radius: 999px;
  color: #173e9e;
  background: #eaf2ff;
}

body.ops-page .ops-agent-tree-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

body.ops-page .ops-agent-tree-node.level-2,
body.ops-page .ops-agent-tree-node.level-3 {
  margin-left: 22px;
  background: #ffffff;
}

body.ops-page .ops-agent-customer-details {
  border: 1px dashed #cfe0ff;
  border-radius: 16px;
  background: #ffffff;
}

body.ops-page .ops-agent-customer-details summary {
  padding: 12px 14px;
  color: #173e9e;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

body.ops-page .ops-agent-customer-details summary::after {
  content: "点击展开";
  float: right;
  color: #2f6bff;
  font-size: 12px;
}

body.ops-page .ops-agent-customer-details[open] summary::after {
  content: "点击收起";
}

body.ops-page .ops-agent-tree-children {
  display: grid;
  gap: 10px;
}

body.ops-page .ops-agent-tree-children h4 {
  margin: 0;
  color: #173e9e;
  font-size: 15px;
}

/* 推广管理 / 代理中心：简洁展开式代理详情 */
body.ops-page .ops-agent-detail-console {
  display: grid;
  gap: 18px;
  color: #152947;
}

body.ops-page .ops-agent-detail-card {
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(47, 107, 255, 0.08);
}

body.ops-page .ops-agent-detail-overview {
  padding: 20px;
}

body.ops-page .ops-agent-detail-actions,
body.ops-page .ops-agent-detail-actions > div,
body.ops-page .ops-agent-detail-panel-head,
body.ops-page .ops-agent-detail-panel-head > div,
body.ops-page .ops-agent-detail-profile {
  display: flex;
  align-items: center;
}

body.ops-page .ops-agent-detail-actions {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

body.ops-page .ops-agent-detail-actions > span {
  color: #0b55e8;
  font-weight: 900;
}

body.ops-page .ops-agent-detail-actions > div,
body.ops-page .ops-agent-detail-panel-head > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

body.ops-page .ops-agent-detail-actions button,
body.ops-page .ops-agent-detail-panel-head button,
body.ops-page .ops-agent-detail-table-wrap button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #ffffff;
  color: #19355f;
  font-weight: 900;
  cursor: pointer;
}

body.ops-page .ops-agent-detail-actions button.primary {
  border-color: #0b55e8;
  background: #0b55e8;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(11, 85, 232, 0.2);
}

body.ops-page .ops-agent-detail-actions button.danger {
  color: #d92d20;
}

body.ops-page .ops-agent-detail-overview-body {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  gap: 28px;
}

body.ops-page .ops-agent-detail-profile {
  gap: 18px;
  align-items: flex-start;
  padding-right: 22px;
  border-right: 1px solid #dce6f5;
}

body.ops-page .ops-agent-detail-avatar-large {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #075eff 0 16px, transparent 17px),
    radial-gradient(circle at 50% 82%, #075eff 0 31px, transparent 32px),
    #eaf2ff;
}

body.ops-page .ops-agent-detail-profile h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #13284a;
  font-size: 18px;
}

body.ops-page .ops-agent-detail-profile dl {
  display: grid;
  gap: 11px;
  margin: 0;
}

body.ops-page .ops-agent-detail-profile dl div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
}

body.ops-page .ops-agent-detail-profile dt,
body.ops-page .ops-agent-detail-profile dd {
  margin: 0;
}

body.ops-page .ops-agent-detail-profile dt,
body.ops-page .ops-agent-detail-metrics span,
body.ops-page .ops-agent-detail-summary span,
body.ops-page .ops-agent-detail-table-wrap th {
  color: #586c8d;
  font-size: 13px;
  font-weight: 800;
}

body.ops-page .ops-agent-detail-profile dd {
  color: #152947;
  font-weight: 900;
}

body.ops-page .ops-agent-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 26px;
}

body.ops-page .ops-agent-detail-metrics article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.ops-page .ops-agent-detail-metrics strong {
  color: #162743;
  font-size: 22px;
  line-height: 1.1;
}

body.ops-page .ops-agent-detail-metrics .danger strong,
body.ops-page .ops-agent-detail-table-wrap td.danger,
body.ops-page .ops-agent-detail-summary strong.danger {
  color: #ff1e2d;
}

body.ops-page .ops-agent-detail-metrics .success strong,
body.ops-page .ops-agent-detail-table-wrap td.success {
  color: #00a15d;
}

body.ops-page .ops-agent-detail-metrics .blue strong {
  color: #075eff;
}

body.ops-page .ops-agent-detail-metrics .orange strong {
  color: #ff8a00;
}

body.ops-page .ops-agent-detail-rule {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid #dbe8fb;
  border-radius: 8px;
  background: #f6f9ff;
  color: #425777;
  font-size: 13px;
  line-height: 1.7;
}

body.ops-page .ops-agent-detail-rule strong {
  color: #183866;
}

body.ops-page .ops-agent-application-panel {
  margin-bottom: 18px;
  padding: 18px;
}

body.ops-page .ops-agent-application-table {
  overflow-x: auto;
}

body.ops-page .ops-agent-application-table > div {
  display: grid;
  grid-template-columns: 110px 150px 150px 170px minmax(150px, 1fr) 100px 140px;
  align-items: center;
  min-width: 980px;
  min-height: 48px;
  border-bottom: 1px solid #e5edf8;
}

body.ops-page .ops-agent-application-table > div.head {
  min-height: 42px;
  border-radius: 8px 8px 0 0;
  background: #f4f8ff;
  color: #586c8d;
  font-size: 13px;
  font-weight: 900;
}

body.ops-page .ops-agent-application-table > div > span {
  min-width: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

body.ops-page .ops-agent-application-table .actions {
  display: flex;
  gap: 7px;
}

body.ops-page .ops-agent-application-table button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #b8cdf7;
  border-radius: 7px;
  color: #0b55e8;
  background: #ffffff;
  font-weight: 900;
}

body.ops-page .ops-agent-application-table button.danger {
  border-color: #ffd0d0;
  color: #d92d20;
}

body.ops-page .ops-agent-detail-workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.ops-page .ops-agent-structure-panel {
  padding: 18px;
}

body.ops-page .ops-agent-structure-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid #dce8fa;
  border-radius: 8px;
  background: #f3f7fd;
}

body.ops-page .ops-agent-structure-tabs button {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #53657f;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.ops-page .ops-agent-structure-tabs button.active {
  background: #075eff;
  color: #ffffff;
}

body.ops-page .ops-agent-detail-table-wrap.wide table {
  min-width: 1540px;
}

body.ops-page .ops-agent-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #075eff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.ops-page .ops-agent-detail-team,
body.ops-page .ops-agent-detail-customers {
  min-height: 610px;
  padding: 18px;
}

body.ops-page .ops-agent-detail-panel-head {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

body.ops-page .ops-agent-detail-panel-head h3 {
  margin: 0;
  color: #13284a;
  font-size: 18px;
}

body.ops-page .ops-agent-detail-panel-head input {
  min-height: 38px;
  width: 170px;
  padding: 0 12px;
  border: 1px solid #d9e4f5;
  border-radius: 8px;
  background: #ffffff;
  color: #172844;
  outline: none;
}

body.ops-page .ops-agent-detail-tree,
body.ops-page .ops-agent-detail-tree ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ops-page .ops-agent-detail-tree ul {
  position: relative;
  margin-left: 28px;
  padding-left: 16px;
}

body.ops-page .ops-agent-detail-tree ul::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 20px;
  left: 0;
  width: 1px;
  background: #cbd9ee;
}

body.ops-page .ops-agent-detail-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fbfdff;
  color: #172a49;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

body.ops-page .ops-agent-detail-tree-node::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: #cbd9ee;
}

body.ops-page .ops-agent-detail-tree > li > .ops-agent-detail-tree-node::before {
  display: none;
}

body.ops-page .ops-agent-detail-tree-node strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

body.ops-page .ops-agent-detail-tree-node em {
  padding: 3px 8px;
  border-radius: 6px;
  background: #eaf2ff;
  color: #075eff;
  font-style: normal;
  font-weight: 900;
}

body.ops-page .ops-agent-detail-tree-node.active {
  border-color: #b9d3ff;
  background: #eef5ff;
  box-shadow: inset 3px 0 0 #075eff;
}

body.ops-page .ops-agent-detail-avatar {
  width: 28px;
  height: 28px;
  border: 1px solid #7aa8ff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #2d6cff 0 5px, transparent 6px),
    radial-gradient(circle at 50% 78%, #2d6cff 0 10px, transparent 11px),
    #e8f1ff;
}

body.ops-page .ops-agent-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 58px;
  padding: 16px;
  border: 1px solid #dce8f8;
  border-radius: 8px;
  background: #fbfdff;
}

body.ops-page .ops-agent-detail-summary h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: #152a4d;
}

body.ops-page .ops-agent-detail-summary div {
  display: grid;
  gap: 7px;
}

body.ops-page .ops-agent-detail-summary strong {
  color: #075eff;
}

body.ops-page .ops-agent-detail-customers {
  min-width: 0;
}

body.ops-page .ops-agent-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid #dbe5f3;
  border-radius: 8px;
}

body.ops-page .ops-agent-detail-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

body.ops-page .ops-agent-detail-table-wrap th,
body.ops-page .ops-agent-detail-table-wrap td {
  height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid #e2eaf6;
  text-align: left;
  white-space: nowrap;
}

body.ops-page .ops-agent-detail-table-wrap th {
  background: #f7faff;
}

body.ops-page .ops-agent-detail-table-wrap td {
  color: #243a5f;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .ops-agent-detail-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

body.ops-page .ops-agent-detail-table-wrap button {
  min-height: 28px;
  padding: 0 12px;
  border-color: transparent;
  background: #eef5ff;
  color: #075eff;
  font-size: 13px;
}

@media (max-width: 1180px) {
  body.ops-page .ops-agent-hero,
  body.ops-page .ops-agent-two {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-agent-quick,
  body.ops-page .ops-agent-metrics.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.ops-page .ops-agent-info-grid,
  body.ops-page .ops-agent-metrics.performance,
  body.ops-page .ops-agent-formula,
  body.ops-page .ops-agent-summary-box,
  body.ops-page .ops-agent-rate-grid,
  body.ops-page .ops-agent-split-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bottom-nav button svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}

.bottom-nav button > span:not(.user-notification-badge) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav button.active svg {
  filter: drop-shadow(0 4px 10px rgba(47, 107, 255, 0.24));
}

/* ===== 管理端 / 客服端 ===== */
.ops-page {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 340px),
    #07090d;
}

.ops-shell,
.support-shell {
  display: grid;
  min-height: 100vh;
  background: #07090d;
}

.ops-shell {
  grid-template-columns: 250px minmax(0, 1fr);
}

.ops-sidebar,
.support-list,
.member-card {
  border-right: 1px solid rgba(212, 175, 55, 0.16);
  background: #111827;
}

.ops-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  color: #ffe8a4;
  font-weight: 900;
  text-decoration: none;
}

.ops-brand img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.ops-menu,
.support-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.ops-menu button,
.support-ticket,
.member-card button,
.ops-card button,
.ops-table button,
.chat-header button,
.chat-input button,
.quick-replies button,
.ops-header-actions button {
  min-height: 38px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 8px;
  background: #1a2230;
  color: #d8e3ff;
  font-weight: 800;
}

.ops-menu button {
  display: flex;
  align-items: center;
}

.ops-nav-group {
  display: grid;
  gap: 6px;
}

.ops-group-toggle {
  justify-content: start;
  width: 100%;
  text-align: left;
}

.ops-submenu {
  display: none;
  gap: 6px;
  padding-left: 14px;
}

.ops-nav-group.open .ops-submenu {
  display: grid;
}

.ops-submenu button {
  min-height: 34px;
  justify-content: start;
  border-color: rgba(118, 157, 215, 0.18);
  background: #101827;
  color: #aebfe0;
  text-align: left;
  font-size: 13px;
}

.ops-submenu button::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(247, 215, 106, 0.35);
}

.ops-menu button.active,
.support-ticket.active {
  border-color: #f7d76a;
  color: #f7d76a;
  background: linear-gradient(180deg, rgba(247, 215, 106, 0.16), rgba(26, 34, 48, 0.96));
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}

.ops-main,
.chat-panel {
  min-width: 0;
  padding: 18px;
}

.ops-header,
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ops-header p,
.chat-header p {
  margin: 0 0 4px;
  color: #f7d76a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.ops-header h1,
.chat-header h1 {
  margin: 0;
  color: #fff7dd;
  font-size: 26px;
}

.ops-header-actions {
  display: flex;
  gap: 10px;
}

.ops-header-actions input,
.support-search input,
.chat-input input {
  min-height: 40px;
  border: 1px solid rgba(118, 157, 215, 0.28);
  border-radius: 8px;
  background: #0d1320;
  color: #fff;
  padding: 0 12px;
}

.ops-panel {
  display: none;
}

.ops-panel.active {
  display: block;
}

.ops-stats,
.ops-grid {
  display: grid;
  gap: 14px;
}

.ops-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.ops-stats article,
.ops-card,
.ops-table {
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, #151d2a, #0d121c);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.ops-stats article {
  padding: 16px;
}

.ops-stats span,
.ops-card p,
.member-card dt,
.support-ticket span,
.support-ticket small {
  color: #9fb0cf;
}

.ops-stats strong {
  display: block;
  margin: 8px 0;
  color: #f7d76a;
  font-size: 28px;
}

.ops-stats small {
  color: #80d89c;
}

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

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

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

.ops-card {
  padding: 16px;
}

.ops-card h2,
.member-card h2 {
  margin: 0 0 12px;
  color: #fff7dd;
}

.ops-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 180px;
  padding-top: 20px;
}

.ops-chart i {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #f7d76a, #8f6f12);
}

.ops-todo {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ops-todo li,
.ops-table > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-todo li {
  grid-template-columns: minmax(0, 1fr) auto;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.ops-todo b,
.ops-table .ok {
  color: #80d89c;
}

.ops-table .pending {
  color: #f7d76a;
}

.support-shell {
  grid-template-columns: 250px minmax(0, 1fr) 240px;
}

.support-search {
  display: block;
}

.support-search input {
  width: 100%;
}

.support-ticket {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 76px;
  padding: 10px 12px;
  text-align: left;
}

.chat-body {
  display: grid;
  align-content: start;
  gap: 12px;
  height: calc(100vh - 220px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 12px;
  background: #0d1320;
}

.message {
  max-width: 70%;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.6;
}

.message.client {
  justify-self: start;
  background: #202b3f;
  color: #e6efff;
}

.message.agent {
  justify-self: end;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  color: #111;
  font-weight: 800;
}

.quick-replies,
.chat-input {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.chat-input input {
  flex: 1;
}

.member-card {
  padding: 18px;
  border-left: 1px solid rgba(212, 175, 55, 0.16);
  border-right: 0;
}

.member-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  margin: 0 0 16px;
}

.member-card dd {
  margin: 0;
  color: #fff7dd;
  text-align: right;
}

.member-card button {
  width: 100%;
  margin-top: 10px;
}

.game-admin {
  display: grid;
  gap: 14px;
}

.game-admin-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.game-admin-tabs button {
  min-width: 92px;
  min-height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 8px;
  background: #1a2230;
  color: #d8e3ff;
  font-weight: 900;
}

.game-admin-tabs button.active {
  border-color: #f7d76a;
  color: #f7d76a;
  background: linear-gradient(180deg, rgba(247, 215, 106, 0.18), rgba(26, 34, 48, 0.96));
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}

.game-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}

.game-admin-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.game-admin-toolbar h2 {
  margin-bottom: 4px;
}

.game-admin-toolbar p,
.game-admin-editor p {
  margin: 0;
  color: #9fb0cf;
  line-height: 1.6;
}

.game-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.game-admin-actions input {
  min-height: 38px;
  min-width: 220px;
  border: 1px solid rgba(118, 157, 215, 0.28);
  border-radius: 8px;
  background: #0d1320;
  color: #fff;
  padding: 0 12px;
}

.game-admin-actions button,
.game-editor-form button {
  min-height: 38px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 8px;
  background: #1a2230;
  color: #f7d76a;
  font-weight: 900;
}

.game-admin-actions [data-game-save],
.game-editor-form button {
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  color: #111;
}

.game-admin-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding-right: 4px;
}

.game-admin-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 74px auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(118, 157, 215, 0.18);
  border-radius: 10px;
  background: #101827;
}

.game-admin-row.active {
  border-color: #f7d76a;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.18);
}

.game-admin-thumb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  background: #0a0f18;
  color: #f7d76a;
  font-size: 11px;
  font-weight: 900;
}

.game-admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-admin-meta {
  min-width: 0;
}

.game-admin-meta strong,
.game-admin-meta small {
  display: block;
}

.game-admin-meta strong {
  overflow: hidden;
  color: #fff7dd;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-admin-meta small {
  margin-top: 5px;
  color: #9fb0cf;
}

.game-admin-row input {
  width: 74px;
  min-height: 34px;
  border: 1px solid rgba(118, 157, 215, 0.28);
  border-radius: 8px;
  background: #0d1320;
  color: #fff;
  text-align: center;
}

.game-admin-row-actions {
  display: flex;
  gap: 6px;
}

.game-admin-row-actions button {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 7px;
  background: #1a2230;
  color: #d8e3ff;
  font-size: 12px;
  font-weight: 800;
}

.game-admin-editor {
  position: sticky;
  top: 18px;
}

.game-editor-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.game-editor-form label {
  display: grid;
  gap: 7px;
  color: #cfd8e8;
  font-weight: 800;
}

.game-editor-form input,
.game-editor-form select,
.game-editor-form textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(118, 157, 215, 0.28);
  border-radius: 8px;
  background: #0d1320;
  color: #fff;
  padding: 0 12px;
}

.game-editor-form textarea {
  padding-block: 10px;
  resize: vertical;
}

body.ops-page {
  background: #f3f5f9;
  color: #202938;
}

.ops-page .ops-shell {
  grid-template-columns: 250px minmax(0, 1fr);
  background: #f3f5f9;
}

.ops-page .ops-sidebar {
  border-right: 1px solid #e2e7f0;
  background: #ffffff;
  box-shadow: 8px 0 24px rgba(24, 39, 75, 0.04);
}

.ops-page .ops-brand {
  color: #1f2a44;
  border-bottom: 1px solid #edf1f7;
}

.ops-page .ops-menu {
  gap: 4px;
  padding: 12px;
}

.ops-page .ops-menu button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #46566f;
  font-weight: 750;
  text-align: left;
}

.ops-page .ops-menu > button,
.ops-page .ops-group-toggle {
  width: 100%;
  justify-content: space-between;
  padding: 0 12px;
}

.ops-page .ops-group-toggle::after {
  content: "⌄";
  margin-left: auto;
  color: #9aa6b8;
  font-size: 16px;
  transition: transform 0.18s ease;
}

.ops-page .ops-nav-group.open .ops-group-toggle::after {
  transform: rotate(180deg);
}

.ops-page .ops-menu button:hover,
.ops-page .ops-nav-group.open > .ops-group-toggle {
  background: #eef4ff;
  color: #2468c9;
}

.ops-page .ops-submenu {
  gap: 2px;
  padding: 4px 0 6px 16px;
}

.ops-page .ops-submenu button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: #61708a;
  font-size: 14px;
}

.ops-page .ops-submenu button::before {
  width: 6px;
  height: 6px;
  background: #b9c5d8;
}

.ops-page .ops-menu button.active {
  border: 0;
  background: #e8f1ff;
  color: #1f66d1;
  box-shadow: inset 3px 0 0 #2f78d6;
}

.ops-page .ops-main {
  background: #f3f5f9;
  padding: 20px 24px;
}

.ops-page .ops-header {
  min-height: 64px;
  margin: -20px -24px 20px;
  padding: 0 24px;
  border-bottom: 1px solid #e2e7f0;
  background: #ffffff;
}

.ops-page .ops-header p {
  color: #2f78d6;
}

.ops-page .ops-header h1 {
  color: #1f2a44;
  font-size: 24px;
}

.ops-page .ops-header-actions input,
.ops-page .game-admin-actions input,
.ops-page .game-editor-form input,
.ops-page .game-editor-form select,
.ops-page .game-editor-form textarea,
.ops-page .game-admin-row input {
  border: 1px solid #d9e1ee;
  background: #ffffff;
  color: #1f2a44;
}

.ops-page .ops-header-actions button,
.ops-page .ops-card button,
.ops-page .ops-table button,
.ops-page .game-admin-actions button,
.ops-page .game-editor-form button,
.ops-page .game-admin-row-actions button {
  border: 0;
  background: #2f78d6;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(47, 120, 214, 0.18);
}

.ops-page .ops-stats article,
.ops-page .ops-card,
.ops-page .ops-table {
  border: 1px solid #e3e8f1;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.06);
}

.ops-page .ops-stats span,
.ops-page .ops-card p,
.ops-page .game-admin-toolbar p,
.ops-page .game-admin-editor p,
.ops-page .game-admin-meta small {
  color: #7b879a;
}

.ops-page .ops-stats strong {
  color: #1f66d1;
}

.ops-page .ops-card h2,
.ops-page .game-admin-toolbar h2,
.ops-page .game-admin-editor h2 {
  color: #1f2a44;
}

.ops-page .game-admin-tabs button {
  border: 1px solid #d9e1ee;
  background: #ffffff;
  color: #52637d;
}

.ops-page .game-admin-tabs button.active {
  border-color: #2f78d6;
  background: #e8f1ff;
  color: #1f66d1;
  box-shadow: none;
}

.ops-page .game-admin-row {
  border: 1px solid #e3e8f1;
  background: #ffffff;
}

.ops-page .game-admin-row.active {
  border-color: #2f78d6;
  box-shadow: 0 0 0 3px rgba(47, 120, 214, 0.12);
}

.ops-page .game-admin-thumb {
  border: 1px solid #d9e1ee;
  background: #f6f8fb;
  color: #2f78d6;
}

.ops-page .game-admin-meta strong,
.ops-page .game-editor-form label {
  color: #26344a;
}

.ops-page .game-admin-actions [data-game-save],
.ops-page .game-editor-form button {
  background: #2f78d6;
  color: #ffffff;
}

/* ===== New Admin Console ===== */
body.ops-page {
  background: #f5f7fb;
  color: #1e293b;
}

body.ops-page .ops-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-width: 1180px;
  min-height: 100vh;
  background: #f5f7fb;
}

body.ops-page .ops-sidebar {
  position: sticky;
  z-index: 5;
  top: 0;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
}

body.ops-page .ops-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 18px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

body.ops-page .ops-brand img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

body.ops-page .ops-brand strong {
  display: block;
  font-size: 15px;
}

body.ops-page .ops-brand span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

body.ops-page .ops-nav {
  display: grid;
  gap: 4px;
  padding: 12px;
}

body.ops-page .ops-menu-item,
body.ops-page .ops-group-toggle,
body.ops-page .ops-submenu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  font-weight: 700;
  text-align: left;
  transition: all 0.2s ease;
}

body.ops-page .ops-menu-item {
  padding: 0 14px;
}

body.ops-page .ops-menu-item:hover,
body.ops-page .ops-group-toggle:hover,
body.ops-page .ops-submenu button:hover {
  background: #eff6ff;
  color: #2563eb;
}

body.ops-page .ops-menu-item.active {
  background: #eff6ff;
  color: #2563eb;
  box-shadow: inset 3px 0 0 #2563eb;
}

body.ops-page .ops-group {
  display: grid;
  gap: 4px;
}

body.ops-page .ops-group-toggle {
  justify-content: space-between;
  padding: 0 14px;
}

body.ops-page .ops-group-toggle i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

body.ops-page .ops-group.open .ops-group-toggle i {
  transform: rotate(-135deg);
}

body.ops-page .ops-submenu {
  display: none;
  gap: 2px;
  padding-left: 12px;
}

body.ops-page .ops-group.open .ops-submenu {
  display: grid;
}

body.ops-page .ops-submenu button {
  min-height: 40px;
  padding: 0 14px;
  color: #475569;
}

body.ops-page .ops-submenu button::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

body.ops-page .ops-submenu button.active {
  background: #eff6ff;
  color: #2563eb;
}

body.ops-page .ops-main {
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  background: #f5f7fb;
}

body.ops-page .ops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 72px;
  padding: 0 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

body.ops-page .ops-header-copy {
  flex: 0 0 230px;
  min-width: 0;
}

body.ops-page .ops-eyebrow {
  display: block;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

body.ops-page .ops-header h1,
body.ops-page .ops-header p {
  margin: 0;
}

body.ops-page .ops-header h1 {
  color: #1e293b;
  font-size: 20px;
  font-weight: 800;
}

body.ops-page .ops-header p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

body.ops-page .ops-global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 560px;
  margin-left: auto;
}

body.ops-page .ops-global-search input {
  flex: 1;
  min-height: 42px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 14px;
}

body.ops-page .ops-global-search button,
body.ops-page .ops-header-actions button,
body.ops-page .ops-filter-actions .primary,
body.ops-page .ops-text-button.success,
body.ops-page .ops-text-button.warning,
body.ops-page .ops-text-button.danger {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
}

body.ops-page .ops-global-search button,
body.ops-page .ops-filter-actions .primary {
  background: #2563eb;
  color: #ffffff;
  padding: 0 16px;
}

body.ops-page .ops-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

body.ops-page .ops-header-actions button,
body.ops-page .ops-filter-actions .ghost,
body.ops-page .ops-mini-link,
body.ops-page .ops-text-button {
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #334155;
  padding: 0 14px;
}

body.ops-page .ops-header-actions button:hover,
body.ops-page .ops-filter-actions .ghost:hover,
body.ops-page .ops-mini-link:hover,
body.ops-page .ops-text-button:hover {
  border-color: #2563eb;
  color: #2563eb;
}

body.ops-page .ops-content {
  min-width: 0;
  padding: 24px;
}

body.ops-page .ops-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.ops-page .ops-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.ops-page .ops-page-head h2 {
  margin: 0;
  color: #1e293b;
  font-size: 22px;
  font-weight: 800;
}

body.ops-page .ops-page-head p {
  margin: 6px 0 0;
  color: #64748b;
}

body.ops-page .ops-panel-card,
body.ops-page .ops-stat-card,
body.ops-page .ops-skeleton > div {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

body.ops-page .ops-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

body.ops-page .ops-stat-card {
  padding: 16px;
}

body.ops-page .ops-stat-card span {
  color: #64748b;
  font-size: 13px;
}

body.ops-page .ops-stat-card strong {
  display: block;
  margin-top: 8px;
  color: #1e293b;
  font-size: 22px;
}

body.ops-page .ops-stat-card small {
  display: block;
  margin-top: 8px;
  color: #22c55e;
}

body.ops-page .ops-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

body.ops-page .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

body.ops-page .panel-title h3 {
  margin: 0;
  color: #1e293b;
  font-size: 16px;
}

body.ops-page .panel-title span {
  color: #64748b;
  font-size: 13px;
}

body.ops-page .trend-chart {
  display: grid;
  gap: 14px;
}

body.ops-page .trend-chart svg {
  width: 100%;
  height: 220px;
  overflow: visible;
}

body.ops-page .trend-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

body.ops-page .trend-bar {
  display: grid;
  justify-items: center;
  gap: 8px;
}

body.ops-page .trend-bar i {
  display: block;
  width: 100%;
  min-height: 16px;
  border-radius: 999px 999px 6px 6px;
}

body.ops-page .trend-bar span {
  color: #64748b;
  font-size: 12px;
}

body.ops-page .mini-table {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

body.ops-page .mini-head,
body.ops-page .mini-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
}

body.ops-page .mini-head {
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .mini-row {
  align-items: center;
  min-height: 56px;
  color: #334155;
}

body.ops-page .mini-row:hover {
  background: #eff6ff;
}

body.ops-page .mini-empty,
body.ops-page .ops-empty {
  padding: 20px;
  color: #64748b;
  text-align: center;
}

body.ops-page .ops-panel-card {
  padding: 16px;
}

body.ops-page .ops-stack {
  display: grid;
  gap: 14px;
}

body.ops-page .ops-filter-form {
  display: grid;
  gap: 14px;
}

body.ops-page .ops-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-filter-grid label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
}

body.ops-page .ops-filter-grid input,
body.ops-page .ops-filter-grid select {
  min-height: 40px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 12px;
}

body.ops-page .ops-filter-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

body.ops-page .ops-filter-actions .ghost {
  background: #ffffff;
}

body.ops-page .ops-filter-card-withdraw-review,
body.ops-page .ops-filter-card-withdraw-records {
  padding: 12px;
}

body.ops-page .ops-filter-card-withdraw-review .ops-filter-grid,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-grid {
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 10px;
}

body.ops-page .ops-filter-card-withdraw-review .ops-filter-grid input,
body.ops-page .ops-filter-card-withdraw-review .ops-filter-grid select,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-grid input,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-grid select {
  min-height: 34px;
  font-size: 12px;
}

body.ops-page .ops-filter-card-withdraw-review .ops-filter-grid label span,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-grid label span {
  font-size: 12px;
}

body.ops-page .ops-filter-card-withdraw-review .ops-filter-actions,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-actions {
  align-items: end;
}

body.ops-page .ops-filter-card-withdraw-review .ops-filter-actions button,
body.ops-page .ops-filter-card-withdraw-records .ops-filter-actions button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

body.ops-page .ops-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

body.ops-page .ops-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

body.ops-page .ops-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

body.ops-page .ops-table tbody td {
  min-height: 56px;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: middle;
  white-space: nowrap;
}

body.ops-page .ops-table tbody tr:hover {
  background: #eff6ff;
}

body.ops-page .ops-table-card-withdraw-review .ops-table-wrap,
body.ops-page .ops-table-card-withdraw-records .ops-table-wrap {
  overflow-x: visible;
}

body.ops-page .ops-table-withdraw-review,
body.ops-page .ops-table-withdraw-records {
  table-layout: fixed;
  min-width: 0;
}

body.ops-page .ops-table-withdraw-review thead th,
body.ops-page .ops-table-withdraw-review tbody td,
body.ops-page .ops-table-withdraw-records thead th,
body.ops-page .ops-table-withdraw-records tbody td {
  padding: 10px 8px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

body.ops-page .ops-table-withdraw-review thead th,
body.ops-page .ops-table-withdraw-records thead th {
  font-size: 12px;
}

body.ops-page .ops-table-withdraw-review tbody td,
body.ops-page .ops-table-withdraw-records tbody td {
  min-height: 44px;
}

body.ops-page .ops-table-withdraw-review th:nth-child(1),
body.ops-page .ops-table-withdraw-review td:nth-child(1) {
  width: 14%;
  font-weight: 800;
}

body.ops-page .ops-table-withdraw-review th:nth-child(2),
body.ops-page .ops-table-withdraw-review td:nth-child(2) {
  width: 6%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(3),
body.ops-page .ops-table-withdraw-review td:nth-child(3) {
  width: 7%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(4),
body.ops-page .ops-table-withdraw-review td:nth-child(4),
body.ops-page .ops-table-withdraw-review th:nth-child(5),
body.ops-page .ops-table-withdraw-review td:nth-child(5),
body.ops-page .ops-table-withdraw-review th:nth-child(6),
body.ops-page .ops-table-withdraw-review td:nth-child(6) {
  width: 8%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(7),
body.ops-page .ops-table-withdraw-review td:nth-child(7) {
  width: 8%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(8),
body.ops-page .ops-table-withdraw-review td:nth-child(8) {
  width: 7%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(9),
body.ops-page .ops-table-withdraw-review td:nth-child(9) {
  width: 13%;
}

body.ops-page .ops-table-withdraw-review th:nth-child(10),
body.ops-page .ops-table-withdraw-review td:nth-child(10) {
  width: 13%;
}

body.ops-page .ops-table-withdraw-review .ops-badge,
body.ops-page .ops-table-withdraw-records .ops-badge {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

body.ops-page .ops-table-withdraw-review .ops-text-button,
body.ops-page .ops-table-withdraw-records .ops-text-button {
  min-height: 26px;
  margin: 2px 3px 2px 0;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 11px;
}

body.ops-page .ops-expanded-row td {
  background: #f8fafc;
  white-space: normal;
}

body.ops-page .ops-withdraw-expanded {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-withdraw-expanded div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

body.ops-page .ops-withdraw-expanded span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 12px;
}

body.ops-page .ops-withdraw-expanded strong {
  display: block;
  color: #1e293b;
  font-size: 13px;
  word-break: break-all;
}

body.ops-page .ops-withdraw-change-log {
  grid-column: 1 / -1;
}

body.ops-page .ops-withdraw-change-log strong + strong {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #dbe4ef;
}

body.ops-page .ops-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  color: #64748b;
}

body.ops-page .ops-pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.ops-page .ops-pagination-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.ops-page .ops-pagination-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.ops-page .ops-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-badge.success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

body.ops-page .ops-badge.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

body.ops-page .ops-badge.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

body.ops-page .ops-badge.neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

body.ops-page .ops-text-button {
  min-height: 32px;
  margin-right: 8px;
  padding: 0 10px;
}

body.ops-page .ops-text-button.success {
  color: #16a34a;
}

body.ops-page .ops-text-button.warning {
  color: #d97706;
}

body.ops-page .ops-text-button.danger {
  color: #dc2626;
}

body.ops-page .ops-order-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #EEF5FF;
  color: #2F7BFF;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-content {
  padding: 14px 18px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-header-copy {
  flex-basis: 260px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-header h1 {
  font-size: clamp(16px, 1.05vw, 20px);
}

body.ops-page[data-ops-page="recharge.orders"] .ops-header p {
  margin-top: 2px;
  font-size: clamp(11px, 0.75vw, 13px);
  line-height: 1.25;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-page-head {
  margin-bottom: 10px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-page-head h2 {
  font-size: clamp(17px, 1.1vw, 22px);
}

body.ops-page[data-ops-page="recharge.orders"] .ops-page-head p {
  margin-top: 3px;
  font-size: clamp(11px, 0.76vw, 13px);
  line-height: 1.25;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-stat-card {
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-stat-card span {
  font-size: clamp(10px, 0.7vw, 12px);
}

body.ops-page[data-ops-page="recharge.orders"] .ops-stat-card strong {
  margin-top: 4px;
  font-size: clamp(16px, 1.1vw, 20px);
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-card-recharge-orders {
  padding: 10px;
  border-radius: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-form {
  gap: 8px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-grid {
  grid-template-columns: 1fr .8fr .9fr .9fr .9fr .9fr;
  gap: 8px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-grid label {
  gap: 4px;
  font-size: 11px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-grid input,
body.ops-page[data-ops-page="recharge.orders"] .ops-filter-grid select {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-filter-actions button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-card-recharge-orders {
  padding: 10px;
  border-radius: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-card-recharge-orders .ops-table-wrap {
  border-radius: 10px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders {
  min-width: 1680px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders thead th,
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody td {
  padding: 8px 10px;
  font-size: clamp(11px, 0.76vw, 13px);
  line-height: 1.2;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders thead th {
  font-size: clamp(11px, 0.72vw, 12px);
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody td {
  min-height: 38px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-order-id {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-id-usdt {
  color: #7a5200;
  background: #ffe681;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-id-bank {
  color: #6d28d9;
  background: #ede9fe;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-id-wallet {
  color: #1d4ed8;
  background: #dbeafe;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-status-success {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #169447;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-status-rejected {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #d97706;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-recharge-status-pending {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #dc2626;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-success > td,
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-success:hover > td {
  background: #e3f7e9 !important;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-rejected > td,
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-rejected:hover > td {
  background: #fff0dc !important;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-pending > td,
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-pending:hover > td {
  background: #ffe5e5 !important;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-success > td:first-child {
  box-shadow: inset 4px 0 0 #22a559;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-rejected > td:first-child {
  box-shadow: inset 4px 0 0 #f59e0b;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders tbody tr.ops-recharge-row-pending > td:first-child {
  box-shadow: inset 4px 0 0 #ef4444;
}

body.ops-page .ops-reconcile-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
}

body.ops-page .ops-reconcile-card {
  width: min(680px, 100%);
  padding: 20px;
  border: 1px solid #dbe7ff;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

body.ops-page .ops-reconcile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.ops-page .ops-reconcile-head h3 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 18px;
}

body.ops-page .ops-reconcile-head p,
body.ops-page .ops-reconcile-help {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

body.ops-page .ops-reconcile-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  background: #f1f5f9;
  font-size: 22px;
  line-height: 1;
}

body.ops-page .ops-reconcile-label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

body.ops-page .ops-reconcile-card textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #172033;
  background: #f8fafc;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-sizing: border-box;
}

body.ops-page .ops-reconcile-card textarea:focus {
  outline: 2px solid rgba(47, 123, 255, 0.16);
  border-color: #2f7bff;
}

body.ops-page .ops-reconcile-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

body.ops-page .ops-reconcile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

body.ops-page .ops-reconcile-actions button {
  min-height: 42px;
  border: 1px solid #b9cdf7;
  border-radius: 8px;
  color: #2f6fde;
  background: #fff;
  font-weight: 700;
}

body.ops-page .ops-reconcile-actions button.primary {
  border-color: #2f7bff;
  color: #fff;
  background: #2f7bff;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) .ops-withdraw-order-id {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-id-usdt {
  color: #7a5200;
  background: #ffe681;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-id-bank {
  color: #6d28d9;
  background: #ede9fe;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-id-wallet {
  color: #1d4ed8;
  background: #dbeafe;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-status-success {
  color: #169447;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-status-rejected {
  color: #d97706;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) .ops-withdraw-status-pending {
  color: #dc2626;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-success > td,
body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-success:hover > td {
  background: #e3f7e9 !important;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-rejected > td,
body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-rejected:hover > td {
  background: #fff0dc !important;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-pending > td,
body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-pending:hover > td {
  background: #ffe5e5 !important;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-success > td:first-child {
  box-shadow: inset 4px 0 0 #22a559;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-rejected > td:first-child {
  box-shadow: inset 4px 0 0 #f59e0b;
}

body.ops-page:is([data-ops-page="withdraw.review"], [data-ops-page="withdraw.records"]) :is(.ops-table-withdraw-review, .ops-table-withdraw-records) tbody tr.ops-withdraw-row-pending > td:first-child {
  box-shadow: inset 4px 0 0 #ef4444;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(1),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(1) {
  min-width: 126px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(2),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(2) {
  min-width: 76px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(4),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(4),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(5),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(5) {
  min-width: 86px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(6),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(6) {
  min-width: 112px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(7),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(7) {
  min-width: 88px;
  text-align: center;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(12),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(12) {
  min-width: 76px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders th:nth-child(16),
body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders td:nth-child(16) {
  min-width: 72px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-order-code {
  min-width: 64px;
  padding: 3px 7px;
  font-size: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-badge {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-table-recharge-orders .ops-text-button {
  min-height: 24px;
  margin: 1px 2px 1px 0;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 11px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-pagination {
  padding: 8px 2px 0;
  font-size: 12px;
}

body.ops-page[data-ops-page="recharge.orders"] .ops-pagination-actions button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

body.ops-page .ops-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

body.ops-page .ops-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.ops-page .ops-tab.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
}

body.ops-page .ops-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-user-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-user-summary div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

body.ops-page .ops-user-summary span {
  color: #64748b;
  font-size: 13px;
}

body.ops-page .ops-user-summary strong {
  color: #1e293b;
  font-size: 14px;
}

body.ops-page .ops-user-detail-card {
  padding: 18px;
  border: 1px solid #e7edf8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

body.ops-page .ops-user-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

body.ops-page .ops-user-detail-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #eaf2ff;
  color: #2f7bff;
  font-size: 22px;
  font-weight: 900;
}

body.ops-page .ops-user-detail-head span {
  color: #8b95a7;
  font-size: 13px;
  font-weight: 800;
}

body.ops-page .ops-user-detail-head h3 {
  margin: 4px 0 0;
  color: #1f2a44;
  font-size: 20px;
  line-height: 1.2;
}

body.ops-page .ops-user-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

body.ops-page .ops-user-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body.ops-page .ops-user-security-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e7edf8;
}

body.ops-page .ops-user-security-title span,
body.ops-page .ops-user-security-title strong {
  display: block;
}

body.ops-page .ops-user-security-title span {
  color: #1f2a44;
  font-size: 16px;
  font-weight: 900;
}

body.ops-page .ops-user-security-title strong {
  margin-top: 4px;
  color: #8b95a7;
  font-size: 12px;
  font-weight: 700;
}

body.ops-page .ops-user-detail-cell,
body.ops-page .ops-user-security-cell {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #e7edf8;
  border-radius: 14px;
  background: #ffffff;
}

body.ops-page .ops-user-detail-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2f7bff;
}

body.ops-page .ops-user-detail-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ops-page .ops-user-detail-cell span,
body.ops-page .ops-user-security-cell span {
  display: block;
  color: #8b95a7;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-user-detail-cell strong,
body.ops-page .ops-user-security-cell strong {
  display: block;
  margin-top: 5px;
  color: #1f2a44;
  font-size: 15px;
  line-height: 1.2;
  word-break: break-all;
}

body.ops-page .ops-user-detail-cell em,
body.ops-page .ops-user-security-cell em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  color: #6b7890;
  font-size: 12px;
}

body.ops-page .ops-user-detail-cell button {
  position: absolute;
  right: 12px;
  top: 12px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #dce5f5;
  border-radius: 999px;
  background: #ffffff;
  color: #2f7bff;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-user-detail-cell.tone-blue strong {
  color: #2f7bff;
}

body.ops-page .ops-user-security-cell.tone-blue .ops-user-detail-icon,
body.ops-page .ops-user-security-cell.tone-blue strong {
  color: #2f7bff;
}

body.ops-page .ops-user-security-cell.tone-green .ops-user-detail-icon {
  background: #e7f8ef;
  color: #18a874;
}

body.ops-page .ops-user-security-cell.tone-green strong {
  color: #18a874;
}

body.ops-page .ops-user-security-cell.tone-orange .ops-user-detail-icon {
  background: #fff4e8;
  color: #ff9f43;
}

body.ops-page .ops-user-security-cell.tone-orange strong {
  color: #ff9f43;
}

body.ops-page .ops-user-detail-cell.tone-orange .ops-user-detail-icon {
  background: #fff4e8;
  color: #ff9f43;
}

body.ops-page .ops-user-detail-cell.tone-orange strong {
  color: #ff9f43;
}

body.ops-page .ops-user-detail-cell.tone-profit .ops-user-detail-icon {
  background: #fff0f0;
  color: #ff5b5b;
}

body.ops-page .ops-user-detail-cell.tone-profit strong {
  color: #ff5b5b;
}

body.ops-page .ops-user-detail-cell.tone-loss .ops-user-detail-icon {
  background: #e7f8ef;
  color: #18a874;
}

body.ops-page .ops-user-detail-cell.tone-loss strong {
  color: #18a874;
}

body.ops-page .ops-user-detail-cell.tone-purple .ops-user-detail-icon {
  background: #f3edff;
  color: #7c3aed;
}

body.ops-page .ops-user-detail-cell.tone-purple strong {
  color: #7c3aed;
}

body.ops-page .ops-user-status {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-user-status.success {
  background: #e7f8ef;
  color: #18a874;
}

body.ops-page .ops-user-status.danger {
  background: #ffeaea;
  color: #ff5b5b;
}

body.ops-page .ops-user-status.neutral {
  background: #eef2f8;
  color: #8b95a7;
}

body.ops-page .ops-phone-verified {
  color: #18a874 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.ops-page .ops-detail-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

body.ops-page .ops-detail-item span {
  color: #64748b;
  font-size: 13px;
}

body.ops-page .ops-detail-item strong {
  color: #1e293b;
}

body.ops-page .ops-settings-list {
  display: grid;
  gap: 10px;
}

body.ops-page .ops-settings-list div {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
}

body.ops-page .ops-page-settings-form {
  display: grid;
  gap: 18px;
}

body.ops-page .ops-inline-help {
  margin: -6px 0 0;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

body.ops-page .ops-setting-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.ops-page .ops-setting-rows.compact {
  grid-template-columns: 1fr;
}

body.ops-page .ops-setting-row {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.ops-page .ops-setting-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.ops-page .ops-setting-row-head strong {
  color: #0f172a;
  font-size: 16px;
}

body.ops-page .ops-setting-row-head span {
  color: #64748b;
  font-size: 12px;
}

body.ops-page .ops-setting-row label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .ops-setting-row label.ops-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

body.ops-page .ops-setting-row label.ops-inline-check input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

body.ops-page .ops-setting-row input,
body.ops-page .ops-setting-row textarea,
body.ops-page .ops-setting-row select {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

body.ops-page .ops-setting-row select {
  padding-right: 34px;
}

body.ops-page .ops-setting-row textarea {
  min-height: 78px;
  resize: vertical;
}

body.ops-page .ops-promo-admin-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.ops-page .ops-promo-activity-list {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 14px;
}

body.ops-page .ops-promo-add-activity {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

body.ops-page .ops-promo-activity-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #ffffff;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
}

body.ops-page .ops-promo-activity-item span {
  font-size: 14px;
  font-weight: 800;
}

body.ops-page .ops-promo-activity-item small {
  color: #64748b;
  font-size: 11px;
}

body.ops-page .ops-promo-activity-item.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

body.ops-page .ops-promo-activity-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.ops-page .ops-promo-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-promo-activity-editor label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .ops-promo-activity-editor label.ops-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

body.ops-page .ops-promo-activity-editor label.ops-inline-check input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

body.ops-page .ops-promo-activity-editor input,
body.ops-page .ops-promo-activity-editor textarea,
body.ops-page .ops-promo-activity-editor select {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

body.ops-page .ops-promo-activity-editor textarea {
  min-height: 78px;
  resize: vertical;
}

body.ops-page .ops-promo-specific-fields {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}

body.ops-page .ops-setting-row-head.compact strong {
  font-size: 14px;
}

body.ops-page .ops-agent-icon-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-agent-icon-field {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  background: #ffffff;
}

body.ops-page .ops-agent-icon-field .ops-page-image-preview {
  min-height: 62px;
}

body.ops-page .ops-agent-icon-field .ops-page-image-preview img {
  max-width: 54px;
  max-height: 54px;
}

body.ops-page .ops-page-image-preview {
  min-height: 72px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.ops-page .ops-page-image-preview img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

body.ops-page .ops-page-image-preview span {
  color: #94a3b8;
  font-size: 13px;
}

body.ops-page .ops-form-actions {
  display: flex;
  justify-content: flex-end;
}

body.ops-page .ops-form-actions.top {
  justify-content: flex-start;
}

body.ops-page .ops-form-actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
}

body.ops-page .ops-remove-card {
  min-height: 38px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
  font-weight: 800;
}

body.ops-page .ops-skeleton {
  display: grid;
  gap: 14px;
}

body.ops-page .ops-skel-head {
  height: 70px;
}

body.ops-page .ops-skel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.ops-page .ops-skel-card {
  height: 88px;
}

body.ops-page .ops-skel-panel {
  height: 180px;
}

body.ops-page .ops-skel-table {
  height: 420px;
}

body.ops-page .ops-skeleton > div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f8fafc 0%, #eef2f7 45%, #f8fafc 100%);
  background-size: 200% 100%;
  animation: ops-shimmer 1.2s infinite linear;
}

@keyframes ops-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body.ops-page .ops-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
}

body.ops-page .ops-modal.hidden {
  display: none;
}

body.ops-page .ops-modal-card {
  width: min(420px, calc(100vw - 28px));
  padding: 22px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

body.ops-page .ops-modal-card h3 {
  margin: 0 0 10px;
  color: #1e293b;
}

body.ops-page .ops-modal-card p {
  margin: 0 0 18px;
  color: #64748b;
}

body.ops-page .ops-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.ops-page .ops-modal-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.ops-page .ops-modal-confirm {
  border-color: #2563eb;
  background: #2563eb !important;
  color: #ffffff !important;
}

body.ops-page .success-text {
  color: #16a34a;
}

body.ops-page .danger-text {
  color: #dc2626;
}

body.ops-page .ops-dashboard-head {
  margin-bottom: 14px;
}

body.ops-page .ops-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 16px;
}

body.ops-page .ops-dashboard-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.ops-page .ops-dashboard-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.ops-page .ops-dashboard-range-card,
body.ops-page .ops-dashboard-kpi-card,
body.ops-page .ops-dashboard-chart-card,
body.ops-page .ops-dashboard-compact-card,
body.ops-page .ops-dashboard-side-card {
  border: 1px solid #E7EDF8;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.ops-page .ops-dashboard-range-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

body.ops-page .ops-dashboard-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.ops-page .ops-dashboard-range-buttons button,
body.ops-page .ops-dashboard-date-fields button {
  min-height: 36px;
  border: 1px solid #DCE5F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #3A4A66;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

body.ops-page .ops-dashboard-range-buttons button.active,
body.ops-page .ops-dashboard-date-fields button {
  border-color: #2F7BFF;
  background: #2F7BFF;
  color: #FFFFFF;
}

body.ops-page .ops-dashboard-date-fields {
  display: flex;
  align-items: end;
  gap: 10px;
}

body.ops-page .ops-dashboard-date-fields label {
  display: grid;
  gap: 5px;
  color: #6B7890;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-date-fields input {
  min-height: 36px;
  border: 1px solid #DCE5F5;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1F2A44;
  padding: 0 10px;
}

body.ops-page .ops-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.ops-page .ops-dashboard-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 16px;
}

body.ops-page .ops-dashboard-kpi-card div,
body.ops-page .ops-dashboard-compact-card div {
  min-width: 0;
}

body.ops-page .ops-dashboard-kpi-icon,
body.ops-page .ops-dashboard-compact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #EEF5FF;
  color: var(--dash-tone, #2F7BFF);
  box-shadow: 0 8px 18px rgba(47, 123, 255, 0.10);
}

body.ops-page .ops-dashboard-kpi-icon svg,
body.ops-page .ops-dashboard-compact-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ops-page .ops-dashboard-kpi-card p,
body.ops-page .ops-dashboard-compact-card p {
  margin: 0;
  color: #6B7890;
  font-size: 13px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-kpi-card strong {
  display: block;
  margin-top: 8px;
  color: #1F2A44;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.ops-page .ops-dashboard-kpi-card small,
body.ops-page .ops-dashboard-compact-card small {
  display: block;
  margin-top: 8px;
  color: #6B7890;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-kpi-card small.up,
body.ops-page .ops-dashboard-compact-card small.up {
  color: #FF4D4F;
}

body.ops-page .ops-dashboard-kpi-card small.down,
body.ops-page .ops-dashboard-compact-card small.down {
  color: #18A874;
}

body.ops-page .ops-dashboard-kpi-card small.flat,
body.ops-page .ops-dashboard-compact-card small.flat {
  color: #6B7890;
}

body.ops-page .ops-dashboard-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.ops-page .ops-dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.ops-page .ops-dashboard-section-head h3,
body.ops-page .ops-dashboard-side-head h3 {
  margin: 0;
  color: #1F2A44;
  font-size: 17px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-section-head span,
body.ops-page .ops-dashboard-side-head span {
  color: #6B7890;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.ops-page .ops-dashboard-chart-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

body.ops-page .ops-dashboard-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.ops-page .ops-dashboard-chart-head h3 {
  margin: 0;
  color: #1F2A44;
  font-size: 14px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-chart-head strong {
  display: block;
  margin-top: 6px;
  color: #1F2A44;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.ops-page .ops-dashboard-chart-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  background: #EEF5FF;
}

body.ops-page .ops-dashboard-chart-tabs span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #2F7BFF;
  font-size: 11px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-chart-tabs span:first-child {
  background: #FFFFFF;
}

body.ops-page .ops-dashboard-line {
  display: grid;
  gap: 6px;
}

body.ops-page .ops-dashboard-line svg {
  width: 100%;
  height: 132px;
  overflow: visible;
}

body.ops-page .ops-dashboard-line line {
  stroke: #E7EDF8;
  stroke-width: 1;
}

body.ops-page .ops-dashboard-line polyline {
  fill: none;
  stroke: var(--dash-line, #2F7BFF);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ops-page .ops-dashboard-line-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8B95A7;
  font-size: 11px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.ops-page .ops-dashboard-section.summary .ops-dashboard-compact-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.ops-page .ops-dashboard-compact-card {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

body.ops-page .ops-dashboard-compact-icon {
  width: 40px;
  height: 40px;
}

body.ops-page .ops-dashboard-compact-icon svg {
  width: 22px;
  height: 22px;
}

body.ops-page .ops-dashboard-compact-card strong {
  display: block;
  margin-top: 7px;
  color: #1F2A44;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.ops-page .ops-dashboard-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.ops-page .ops-dashboard-side-card {
  padding: 16px;
}

body.ops-page .ops-dashboard-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

body.ops-page .ops-dashboard-event-list,
body.ops-page .ops-dashboard-notice-list {
  display: grid;
  gap: 10px;
}

body.ops-page .ops-dashboard-event {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #E7EDF8;
  border-radius: 14px;
  background: #F8FAFD;
}

body.ops-page .ops-dashboard-event time {
  color: #2F7BFF;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-event p {
  margin: 0;
  color: #3A4A66;
  font-size: 13px;
  line-height: 1.45;
}

body.ops-page .ops-dashboard-event strong {
  grid-column: 2;
  color: #1F2A44;
  font-size: 13px;
}

body.ops-page .ops-dashboard-event.risk time {
  color: #FF4D4F;
}

body.ops-page .ops-dashboard-event.withdrawApply time,
body.ops-page .ops-dashboard-event.withdrawSuccess time {
  color: #FF9F43;
}

body.ops-page .ops-dashboard-notice-list article {
  padding: 12px;
  border: 1px solid #E7EDF8;
  border-radius: 14px;
  background: #FFFFFF;
}

body.ops-page .ops-dashboard-notice-list time {
  color: #8B95A7;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-dashboard-notice-list h4 {
  margin: 6px 0 5px;
  color: #1F2A44;
  font-size: 14px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-notice-list p {
  margin: 0;
  color: #3A4A66;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1500px) {
  body.ops-page .ops-dashboard-layout {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-dashboard-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  body.ops-page .ops-dashboard-kpis,
  body.ops-page .ops-dashboard-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ops-page .ops-dashboard-section.summary .ops-dashboard-compact-grid,
  body.ops-page .ops-dashboard-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body.ops-page .ops-promo-admin-layout {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-promo-activity-list {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ops-page .ops-promo-editor-grid {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-dashboard-range-card,
  body.ops-page .ops-dashboard-date-fields {
    align-items: stretch;
    flex-direction: column;
  }

  body.ops-page .ops-dashboard-kpis,
  body.ops-page .ops-dashboard-chart-grid,
  body.ops-page .ops-dashboard-two-columns,
  body.ops-page .ops-dashboard-sidebar,
  body.ops-page .ops-dashboard-section.summary .ops-dashboard-compact-grid,
  body.ops-page .ops-dashboard-compact-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard compact operating overview */
body.ops-page .ops-dashboard-head {
  margin-bottom: 10px;
}

body.ops-page .ops-dashboard-head h2 {
  font-size: clamp(18px, 1.4vw, 26px);
}

body.ops-page .ops-dashboard-head p {
  font-size: clamp(12px, 0.85vw, 15px);
}

body.ops-page .ops-dashboard-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 300px);
  gap: 12px;
}

body.ops-page .ops-dashboard-main {
  gap: 12px;
}

body.ops-page .ops-dashboard-sidebar {
  gap: 12px;
}

body.ops-page .ops-dashboard-range-card {
  gap: 10px;
  padding: 10px 12px;
}

body.ops-page .ops-dashboard-range-buttons {
  gap: 6px;
}

body.ops-page .ops-dashboard-range-buttons button,
body.ops-page .ops-dashboard-date-fields button {
  min-height: 32px;
  padding: 0 12px;
  font-size: clamp(12px, 0.78vw, 13px);
}

body.ops-page .ops-dashboard-date-fields {
  gap: 8px;
}

body.ops-page .ops-dashboard-date-fields label {
  font-size: clamp(11px, 0.72vw, 12px);
}

body.ops-page .ops-dashboard-date-fields input {
  min-height: 32px;
  padding: 0 8px;
  font-size: clamp(11px, 0.75vw, 13px);
}

body.ops-page .ops-dashboard-kpis {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

body.ops-page .ops-dashboard-kpi-card {
  position: relative;
  min-height: 96px;
  max-height: 112px;
  gap: 11px;
  padding: 14px 16px;
}

body.ops-page .ops-dashboard-kpi-icon {
  width: 42px;
  height: 42px;
}

body.ops-page .ops-dashboard-kpi-icon svg {
  width: 22px;
  height: 22px;
}

body.ops-page .ops-dashboard-kpi-card p,
body.ops-page .ops-dashboard-compact-card p {
  font-size: clamp(12px, 0.85vw, 15px);
}

body.ops-page .ops-dashboard-kpi-card strong {
  margin-top: 6px;
  font-size: clamp(20px, 1.8vw, 32px);
}

body.ops-page .ops-dashboard-kpi-card small,
body.ops-page .ops-dashboard-compact-card small {
  margin-top: 6px;
  font-size: clamp(11px, 0.75vw, 14px);
}

body.ops-page .ops-dashboard-help {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #DCE5F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F7BFF;
  font-size: 12px;
  font-weight: 900;
  cursor: help;
}

body.ops-page .ops-dashboard-profit-popover {
  position: absolute;
  z-index: 8;
  top: 34px;
  right: 10px;
  display: none;
  width: clamp(260px, 20vw, 320px);
  padding: 12px;
  border: 1px solid #E7EDF8;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 16px 36px rgba(15, 35, 80, 0.14);
}

body.ops-page .ops-dashboard-kpi-card.net-profit:hover .ops-dashboard-profit-popover,
body.ops-page .ops-dashboard-kpi-card.net-profit:focus-within .ops-dashboard-profit-popover {
  display: grid;
  gap: 7px;
}

body.ops-page .ops-dashboard-profit-popover h4 {
  margin: 0 0 4px;
  color: #1F2A44;
  font-size: clamp(12px, 0.85vw, 14px);
}

body.ops-page .ops-dashboard-profit-popover div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  color: #3A4A66;
  font-size: clamp(11px, 0.78vw, 13px);
}

body.ops-page .ops-dashboard-profit-popover div.result {
  padding-bottom: 7px;
  border-bottom: 1px dashed #DCE5F5;
}

body.ops-page .ops-dashboard-profit-popover div.total {
  padding-top: 7px;
  border-top: 1px solid #E7EDF8;
  color: #18A874;
  font-weight: 900;
}

body.ops-page .ops-dashboard-profit-popover strong {
  margin: 0;
  color: inherit;
  font-size: inherit;
  text-align: right;
  white-space: nowrap;
}

body.ops-page .ops-dashboard-section {
  gap: 9px;
}

body.ops-page .ops-dashboard-section-head h3,
body.ops-page .ops-dashboard-side-head h3 {
  font-size: clamp(13px, 0.95vw, 16px);
}

body.ops-page .ops-dashboard-section-head span,
body.ops-page .ops-dashboard-side-head span {
  font-size: clamp(11px, 0.72vw, 12px);
}

body.ops-page .ops-dashboard-chart-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

body.ops-page .ops-dashboard-chart-card {
  height: 210px;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}

body.ops-page .ops-dashboard-chart-head h3 {
  font-size: clamp(12px, 0.9vw, 15px);
}

body.ops-page .ops-dashboard-chart-head strong {
  margin-top: 4px;
  font-size: clamp(15px, 1.15vw, 20px);
}

body.ops-page .ops-dashboard-chart-tabs {
  display: none;
}

body.ops-page .ops-dashboard-line svg {
  height: 128px;
}

body.ops-page .ops-dashboard-line polyline {
  stroke-width: 3;
}

body.ops-page .ops-dashboard-line-labels {
  font-size: clamp(10px, 0.65vw, 11px);
}

body.ops-page .ops-dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-dashboard-bottom-grid .ops-dashboard-section {
  min-height: 0;
  max-height: 180px;
  overflow: hidden;
}

body.ops-page .ops-dashboard-compact-grid,
body.ops-page .ops-dashboard-section.summary .ops-dashboard-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.ops-page .ops-dashboard-compact-card {
  gap: 8px;
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 35, 80, 0.035);
}

body.ops-page .ops-dashboard-compact-icon {
  width: 30px;
  height: 30px;
}

body.ops-page .ops-dashboard-compact-icon svg {
  width: 17px;
  height: 17px;
}

body.ops-page .ops-dashboard-compact-card strong {
  margin-top: 3px;
  font-size: clamp(13px, 0.95vw, 16px);
}

body.ops-page .ops-dashboard-compact-card small {
  display: none;
}

body.ops-page .ops-dashboard-side-card {
  padding: 12px;
}

body.ops-page .ops-dashboard-side-head {
  margin-bottom: 9px;
}

body.ops-page .ops-dashboard-event-list,
body.ops-page .ops-dashboard-notice-list {
  gap: 7px;
}

body.ops-page .ops-dashboard-event {
  min-height: 48px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 8px 9px;
  border-radius: 12px;
}

body.ops-page .ops-dashboard-event time,
body.ops-page .ops-dashboard-event p,
body.ops-page .ops-dashboard-event strong,
body.ops-page .ops-dashboard-notice-list time,
body.ops-page .ops-dashboard-notice-list p {
  font-size: clamp(11px, 0.75vw, 13px);
}

body.ops-page .ops-dashboard-event p,
body.ops-page .ops-dashboard-notice-list p {
  line-height: 1.32;
}

body.ops-page .ops-dashboard-notice-list article {
  padding: 8px 9px;
  border-radius: 12px;
}

body.ops-page .ops-dashboard-notice-list h4 {
  margin: 3px 0 3px;
  font-size: clamp(12px, 0.82vw, 13px);
}

@media (max-width: 1500px) {
  body.ops-page .ops-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 1280px) {
  body.ops-page .ops-dashboard-layout,
  body.ops-page .ops-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-dashboard-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body.ops-page .ops-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  body.ops-page .ops-dashboard-chart-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  body.ops-page .ops-dashboard-range-card,
  body.ops-page .ops-dashboard-date-fields {
    align-items: stretch;
    flex-direction: column;
  }

  body.ops-page .ops-dashboard-kpis,
  body.ops-page .ops-dashboard-chart-grid,
  body.ops-page .ops-dashboard-sidebar,
  body.ops-page .ops-dashboard-compact-grid,
  body.ops-page .ops-dashboard-section.summary .ops-dashboard-compact-grid {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-dashboard-bottom-grid .ops-dashboard-section {
    max-height: none;
  }
}

/* Dashboard final operating overview structure */
body.ops-page .ops-dashboard-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  width: 100%;
}

body.ops-page .ops-dashboard-main {
  gap: 12px;
}

body.ops-page .ops-dashboard-sidebar {
  gap: 12px;
}

body.ops-page .ops-dashboard-range-card {
  padding: 10px 12px;
}

body.ops-page .ops-dashboard-range-buttons button,
body.ops-page .ops-dashboard-date-fields button {
  min-height: 32px;
  font-size: clamp(12px, 0.78vw, 13px);
}

body.ops-page .ops-dashboard-kpis {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

body.ops-page .ops-dashboard-kpi-card {
  min-height: 96px;
  max-height: 112px;
  padding: 14px 16px;
  border-radius: 16px;
}

body.ops-page .ops-dashboard-kpi-icon {
  width: 42px;
  height: 42px;
}

body.ops-page .ops-dashboard-kpi-card p {
  font-size: clamp(12px, 0.85vw, 15px);
}

body.ops-page .ops-dashboard-kpi-card strong {
  font-size: clamp(20px, 1.6vw, 28px);
}

body.ops-page .ops-dashboard-kpi-card small {
  font-size: clamp(11px, 0.75vw, 13px);
}

body.ops-page .ops-dashboard-detail-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #DCE5F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F7BFF;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

body.ops-page .ops-dashboard-detail-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 280px;
  padding: 12px;
  border: 1px solid #E7EDF8;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(15, 35, 80, 0.12);
}

body.ops-page .ops-dashboard-detail-popover h4 {
  margin: 0 0 8px;
  color: #1F2A44;
  font-size: 13px;
  font-weight: 900;
}

body.ops-page .ops-dashboard-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #3A4A66;
  font-size: 12px;
  line-height: 28px;
}

body.ops-page .ops-dashboard-detail-row strong {
  margin: 0;
  color: #1F2A44;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

body.ops-page .ops-dashboard-detail-row.total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #E7EDF8;
  color: #1F2A44;
  font-weight: 800;
}

body.ops-page .ops-dashboard-detail-row.total strong {
  color: #18A874;
}

body.ops-page .ops-dashboard-detail-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed #DCE5F5;
  color: #6B7890;
  font-size: 12px;
  line-height: 1.45;
}

body.ops-page .ops-dashboard-chart-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
}

body.ops-page .ops-dashboard-chart-card {
  height: 200px;
  padding: 12px;
}

body.ops-page .ops-dashboard-line svg {
  height: 122px;
}

body.ops-page .ops-dashboard-side-card {
  padding: 12px;
  border-radius: 14px;
}

body.ops-page .ops-dashboard-side-head {
  margin-bottom: 9px;
}

body.ops-page .ops-dashboard-event-list,
body.ops-page .ops-dashboard-notice-list,
body.ops-page .ops-dashboard-side-list .side-list {
  display: grid;
  gap: 8px;
}

body.ops-page .ops-dashboard-event {
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 12px;
}

body.ops-page .ops-dashboard-notice-list article {
  padding: 8px 9px;
}

body.ops-page .ops-dashboard-side-list .side-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 20px;
}

body.ops-page .ops-dashboard-side-list .side-list-row span {
  color: #6B7890;
}

body.ops-page .ops-dashboard-side-list .side-list-row strong {
  color: #1F2A44;
  font-weight: 800;
  text-align: right;
}

body.ops-page .ops-dashboard-side-list .side-list-row.profit strong {
  color: #18A874;
}

@media (max-width: 1500px) {
  body.ops-page .ops-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  body.ops-page .ops-dashboard-chart-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 1280px) {
  body.ops-page .ops-dashboard-layout {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-dashboard-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body.ops-page .ops-dashboard-kpis,
  body.ops-page .ops-dashboard-chart-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  body.ops-page .ops-dashboard-kpis,
  body.ops-page .ops-dashboard-chart-grid,
  body.ops-page .ops-dashboard-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  body.ops-page .ops-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.ops-page .ops-stats,
  body.ops-page .ops-grid-two,
  body.ops-page .ops-filter-grid,
  body.ops-page .ops-skel-grid,
  body.ops-page .ops-detail-grid,
  body.ops-page .ops-user-security-grid {
    grid-template-columns: 1fr;
  }
  body.ops-page .ops-content {
    padding: 16px;
  }
}

/* Final category-page layout: three complete artwork cards per row. */
body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.category-page .game-grid .provider-card-art,
body.category-page.slot-page .game-grid .provider-card-art,
#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .games-grid .provider-card .provider-card-art {
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}

/* Keep three columns while giving category-page cards a slightly taller frame. */
body.category-page .game-grid .provider-card,
body.category-page.slot-page .game-grid .provider-card {
  aspect-ratio: 1 / 1.18 !important;
}

/* Keep three columns while giving category-page cards a slightly taller frame. */
body.category-page .game-grid .provider-card,
body.category-page.slot-page .game-grid .provider-card {
  aspect-ratio: 1 / 1.18 !important;
}

/* Category pages stay compact at three cards per row, including their Hot tab. */
body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

/* Show the complete supplied artwork without cropping or empty bands. */
body.category-page .game-grid .provider-card-art,
body.category-page.slot-page .game-grid .provider-card-art,
#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .games-grid .provider-card .provider-card-art {
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}

@media (max-width: 860px) {
  .ops-shell,
  .support-shell {
    grid-template-columns: 1fr;
  }

  .ops-sidebar,
  .support-list,
  .member-card {
    border: 0;
  }

  .ops-menu {
    grid-template-columns: repeat(10, minmax(132px, 1fr));
    overflow-x: auto;
  }

  .ops-nav-group {
    align-content: start;
  }

  .ops-submenu {
    padding-left: 0;
  }

  .ops-stats,
  .ops-grid.two,
  .ops-grid.three,
  .ops-grid.four,
  .game-admin-layout {
    grid-template-columns: 1fr;
  }

  .game-admin-toolbar {
    display: grid;
  }

  .game-admin-actions {
    justify-content: stretch;
  }

  .game-admin-actions input {
    min-width: 0;
    width: 100%;
  }

  .game-admin-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .game-admin-row input,
  .game-admin-row-actions {
    grid-column: 2;
  }

  .game-admin-editor {
    position: static;
  }

  .member-card {
    display: none;
  }
}

.bottom-nav button:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.bottom-nav button.active {
  border-color: transparent;
  color: #2f6bff;
  background: transparent;
  box-shadow: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.modal.hidden {
  display: none;
}

.dialog {
  position: relative;
  width: min(520px, 100%);
  padding: 28px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #151515, #101010);
  box-shadow: var(--shadow);
  border: 1px solid rgba(247, 215, 106, 0.18);
}

.dialog h2 {
  margin: 0 0 16px;
  color: var(--brand-light);
  letter-spacing: 1px;
}

.launch-shell {
  display: grid;
  gap: 16px;
}

.launch-art {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.launch-copy {
  display: grid;
  gap: 10px;
}

.launch-chip {
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #111111;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.launch-copy h3 {
  margin: 0;
  font-size: 20px;
}

.launch-copy p {
  margin: 0;
  color: var(--muted);
}

.close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f4;
  font-size: 32px;
  line-height: 1;
  transition: all 0.3s ease;
}

.close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: scale(1.04);
}

.auth-shell {
  gap: 14px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.auth-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1c1c1c, #0d0d0d);
  color: transparent;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  box-shadow: 0 0 0 1px rgba(247, 215, 106, 0.18), 0 18px 34px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.auth-mark::before {
  content: "N9";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: transparent;
  background: linear-gradient(135deg, #d8b85a, #fff3b9 45%, #b79024 75%, #f7d76a);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 20px rgba(247, 215, 106, 0.14);
}

.auth-copy h3,
.auth-copy p,
.auth-title {
  margin: 0;
}

.auth-copy h3 {
  color: #f7d76a;
  font-size: 18px;
  letter-spacing: 2px;
}

.auth-copy p {
  margin-top: 6px;
  color: #8f97a8;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.auth-title {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
}

.auth-shell label {
  color: #aeb6c8;
}

.auth-shell input {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #3a3d3f;
  color: #ffffff;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d6d6d6;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6d6d6;
  font-size: 14px;
}

.auth-check input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  accent-color: #f7c948;
}

.auth-link,
.auth-switch button {
  border: 0;
  background: transparent;
  color: #9ba6bb;
  font-weight: 700;
}

.auth-submit {
  min-height: 56px;
  border-radius: 8px;
  font-size: 18px;
}

.auth-switch {
  color: #e8e8e8;
  text-align: center;
  font-size: 15px;
}

.auth-switch button {
  padding: 0;
  color: #9ba6bb;
  text-decoration: underline;
}

.form-stack {
  display: grid;
  gap: 12px;
}

.form-stack label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.form-stack input,
.form-stack textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  resize: vertical;
  background: var(--surface-2);
  color: var(--ink);
  transition: all 0.3s ease;
}

.form-stack input:focus,
.form-stack textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  outline: none;
}

.form-stack textarea {
  min-height: 96px;
}

.admin-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  transition: all 0.3s ease;
}

.admin-list li:hover {
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .ad-carousel {
    padding: 0 20px 20px;
  }

  .ad-slide {
    min-height: 240px;
  }

  .game-card {
    min-width: calc(50% - 7px);
    max-width: calc(50% - 7px);
  }

  .wallet-panel,
  .quick-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  main {
    padding-inline: 12px;
  }

  .topbar {
    padding-inline: 12px;
  }

  .top-actions .ghost-button {
    display: none;
  }

  .guest-actions .ghost-button {
    display: inline-flex;
  }

  .hero-copy {
    padding: 24px;
  }

  .ad-carousel {
    padding: 0 12px 16px;
  }

  .ad-carousel-top strong {
    font-size: 15px;
  }

  .ad-slide {
    min-height: 220px;
  }

  .ad-copy {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
    padding: 14px;
  }

  .ad-copy h3 {
    font-size: 18px;
  }

  .ad-copy p {
    font-size: 12px;
  }

  .notice-marquee {
    gap: 18px;
    font-size: 12px;
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .games-grid {
    gap: 10px;
  }

  .game-card {
    min-height: 195px;
    min-width: calc(60% - 7px);
    max-width: calc(60% - 7px);
    padding: 14px;
  }

  .game-card strong {
    left: 14px;
    right: 14px;
    font-size: 16px;
  }
}
/* ===== 活动中心样式 ===== */
.promo-page {
  min-height: calc(100vh - 74px);
  margin: -12px -12px 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 78% 24%, rgba(92, 141, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.promo-header {
  position: sticky;
  top: 68px;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: stretch;
  min-height: 56px;
  border-bottom: 1px solid #e8edf5;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.promo-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
}

.promo-back img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.promo-top-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
}

.promo-top-tabs::-webkit-scrollbar {
  display: none;
}

.promo-top-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: #1e293b;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 850;
  white-space: nowrap;
  padding: 0 4px;
}

.promo-top-tabs button.active {
  color: #2f7bff;
}

.promo-tab-badge {
  position: absolute;
  top: 7px;
  right: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ff3b30;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(255, 59, 48, 0.28);
  pointer-events: none;
}

.promo-top-tabs button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f7bff, #5b8cff);
  transform: translateX(-50%);
}

.promo-layout {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 10px;
  padding: 16px 10px 18px;
  min-height: calc(100vh - 130px);
}

.promo-layout.rebate-direct {
  grid-template-columns: minmax(0, 1fr);
}

.promo-layout.rebate-direct .promo-sidebar {
  display: none;
}

.promo-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-right: 7px;
  border-right: 1px solid #e3ebf7;
}

.promo-sidebar button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 5px 5px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 7px 16px rgba(30, 41, 59, 0.08), inset 0 0 12px rgba(92, 141, 255, 0.05);
}

.promo-sidebar button .promo-category-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  color: #5c8dff;
  font-size: 20px;
  font-weight: 950;
  opacity: 1;
}

.promo-sidebar button .promo-category-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.promo-sidebar button strong {
  display: block;
  color: inherit;
  font: inherit;
  line-height: 1.15;
  text-align: center;
}

.promo-sidebar button.active {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  box-shadow: 0 12px 24px rgba(47, 107, 255, 0.24);
}

.promo-sidebar button.active .promo-category-icon {
  color: #ffffff;
}

.promo-sidebar .promo-side-action {
  min-height: 38px;
  padding: 0 5px;
  border-color: rgba(47, 107, 255, 0.42);
  background: #ffffff;
  color: #2f6bff;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.08);
}

.promo-content {
  min-width: 0;
}

.promo-card-list {
  display: grid;
  gap: 13px;
}

.promo-offer-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  height: 176px;
  overflow: hidden;
  padding: 20px 18px 18px 62px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% 0%, rgba(92, 141, 255, 0.18), transparent 34%),
    linear-gradient(110deg, #ffffff 0%, #eef4ff 100%);
  box-shadow: 0 12px 26px rgba(30, 41, 59, 0.1);
}

.promo-offer-card::before {
  content: "Y7";
  position: absolute;
  top: 12px;
  left: 14px;
  color: #5c8dff;
  font-size: 50px;
  font-weight: 1000;
  font-style: italic;
  letter-spacing: -5px;
  text-shadow: none;
}

.promo-offer-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
}

.promo-brand {
  display: none;
}

.promo-offer-copy h3 {
  margin: 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.4px;
  max-width: 68%;
}

.promo-offer-copy p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
}

.promo-offer-copy strong {
  color: #2f6bff;
  font-size: 28px;
  font-weight: 1000;
  line-height: 1.05;
  text-shadow: none;
}

.promo-lines {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.promo-record-time {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.promo-offer-copy button {
  min-height: 32px;
  margin-top: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.promo-offer-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(37%, 180px);
  height: 100%;
  object-fit: cover;
}

.promo-offer-card.image-only {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(30, 87, 153, 0.16);
}

.promo-offer-card.image-only::before {
  display: none;
}

.promo-offer-full-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 10px;
}

.promo-image-action {
  position: absolute;
  right: 13px;
  bottom: 12px;
  min-height: 24px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(47, 107, 255, 0.28);
}

.promo-offer-card.vip {
  background:
    radial-gradient(circle at 76% 16%, rgba(92, 141, 255, 0.2), transparent 35%),
    linear-gradient(110deg, #ffffff 0%, #f7faff 100%);
}

.promo-offer-card.blue {
  border-color: #dbe7ff;
  background:
    radial-gradient(circle at 76% 16%, rgba(92, 141, 255, 0.2), transparent 36%),
    linear-gradient(110deg, #ffffff 0%, #eef4ff 100%);
}

.promo-empty {
  margin: 0;
  padding: 80px 16px;
  border: 1px dashed #cbd8f4;
  border-radius: 18px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
  font-weight: 700;
}

.telegram-support-promo-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  min-height: 192px;
  overflow: hidden;
  padding: 20px 18px;
  border: 1px solid rgba(47, 123, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 14%, rgba(246, 196, 83, 0.28), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 56%, #dceaff 100%);
  color: #1f2a44;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(15, 35, 80, 0.1);
}

.telegram-support-promo-card::before {
  content: "";
  position: absolute;
  inset: auto -42px -52px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(47, 123, 255, 0.12);
}

.telegram-support-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
}

.telegram-support-kicker {
  color: #2f7bff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.6px;
}

.telegram-support-copy h3 {
  margin: 0;
  color: #0e3b8f;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 950;
  line-height: 1.08;
}

.telegram-support-copy p {
  margin: 0;
  color: #3a4a66;
  font-size: 14px;
  font-weight: 800;
}

.telegram-support-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}

.telegram-support-copy li {
  padding: 5px 9px;
  border: 1px solid rgba(47, 123, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #3a4a66;
  font-size: 12px;
  font-weight: 850;
}

.telegram-support-action {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8d879, #f0b72e);
  color: #14315c;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(246, 196, 83, 0.28);
}

.telegram-support-plane {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: linear-gradient(135deg, #2f7bff, #5b8cff);
  color: #ffffff;
  box-shadow: 0 18px 34px rgba(47, 123, 255, 0.28);
  transform: rotate(-8deg);
}

.telegram-support-plane svg {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 6px 8px rgba(15, 35, 80, 0.18));
}

@media (max-width: 760px) {
  .telegram-support-promo-card {
    grid-template-columns: minmax(0, 1fr) 74px;
    min-height: 178px;
    padding: 18px 14px;
  }

  .telegram-support-copy ul {
    gap: 5px;
  }

  .telegram-support-copy li {
    padding: 4px 7px;
    font-size: 11px;
  }

  .telegram-support-plane {
    width: 68px;
    height: 68px;
    border-radius: 22px;
  }

  .telegram-support-plane svg {
    width: 42px;
    height: 42px;
  }
}

.promo-pending-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(30, 41, 59, 0.1);
}

.promo-pending-card.reward-center-card {
  grid-template-columns: 60px minmax(0, 1fr) auto;
  padding: 14px;
  gap: 12px;
}

.promo-reward-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #f3f7ff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(47, 123, 255, 0.1);
}

.promo-reward-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.promo-reward-image.placeholder {
  background: linear-gradient(135deg, #eaf2ff, #ffffff);
  color: #2f7bff;
  font-size: 18px;
  font-weight: 950;
}

.promo-reward-main {
  min-width: 0;
}

.promo-pending-card h3,
.promo-pending-card p,
.promo-pending-card small {
  margin: 0;
}

.promo-pending-card h3 {
  margin-top: 8px;
  color: #1e293b;
  font-size: 17px;
  font-weight: 900;
}

.promo-pending-card.reward-center-card h3 {
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-pending-card p,
.promo-pending-card small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.promo-pending-card aside {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.promo-pending-card aside strong {
  color: #2f6bff;
  font-size: 18px;
  font-weight: 950;
}

.promo-pending-card aside button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6bff, #5c8dff);
  color: #ffffff;
  font-weight: 900;
}

.promo-pending-card aside button:disabled {
  background: #e5e7eb;
  color: #94a3b8;
}

.promo-reward-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 58px 16px;
  border: 1px dashed #cbd8f4;
  border-radius: 18px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 10px 22px rgba(15, 35, 80, 0.04);
}

.promo-reward-empty strong {
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.promo-reward-empty span {
  color: #6b7890;
  font-size: 13px;
  font-weight: 700;
}

#promoView .promo-layout.pending-direct {
  grid-template-columns: minmax(0, 1fr);
  background: #f5f8ff;
}

#promoView .promo-layout.pending-direct .promo-sidebar {
  display: none;
}

#promoView .promo-layout.pending-direct .promo-card-list {
  gap: 0;
}

#promoView .promo-layout.pending-direct .promo-pending-page {
  display: grid;
  gap: 12px;
  width: 100%;
}

#promoView .promo-layout.pending-direct .promo-pending-summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid #e8eef8;
  border-radius: 12px;
  background: #ffffff;
}

#promoView .promo-layout.pending-direct .promo-pending-summary div {
  min-width: 0;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 800;
}

#promoView .promo-layout.pending-direct .promo-pending-summary strong {
  color: #ff9800;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

#promoView .promo-layout.pending-direct .promo-pending-summary button {
  flex: 0 0 auto;
  width: 96px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #2f7cff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

#promoView .promo-layout.pending-direct .promo-pending-summary button:disabled {
  background: #c9d3e5;
  color: #ffffff;
}

#promoView .promo-layout.pending-direct .promo-pending-list {
  display: grid;
  gap: 10px;
}

#promoView .promo-layout.pending-direct .promo-pending-card.reward-center-card {
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid #e8eef8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(31, 42, 68, 0.06);
}

#promoView .promo-layout.pending-direct .promo-reward-main {
  align-self: center;
}

#promoView .promo-layout.pending-direct .promo-pending-card h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

#promoView .promo-layout.pending-direct .promo-pending-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 10px;
  color: #7a8799;
  font-size: 13px;
  line-height: 1.25;
}

#promoView .promo-layout.pending-direct .promo-pending-card p span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#promoView .promo-layout.pending-direct .promo-pending-card aside {
  align-self: center;
  display: grid;
  justify-items: end;
  gap: 8px;
}

#promoView .promo-layout.pending-direct .promo-pending-card aside strong {
  color: #ff9800;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

#promoView .promo-layout.pending-direct .promo-pending-card aside strong small {
  color: #ff9800;
  font-size: 12px;
  font-weight: 850;
}

#promoView .promo-layout.pending-direct .promo-pending-card aside button {
  width: 90px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #28a879;
  color: #ffffff;
  font-size: 15px;
  font-weight: 850;
}

#promoView .promo-layout.pending-direct .promo-reward-empty {
  min-height: 240px;
  padding: 118px 16px 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Promo claim records mirror the compact transaction-record presentation. */
#promoView .promo-layout.record-direct {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  background: #f5f8ff;
}

#promoView .promo-layout.record-direct .promo-sidebar {
  display: none !important;
}

#promoView .promo-layout.record-direct .promo-card-list,
#promoView .promo-layout.record-direct .promo-claim-record-page {
  width: 100%;
  min-width: 0;
}

#promoView .promo-layout.record-direct .promo-claim-record-list {
  display: grid;
  gap: 12px;
}

#promoView .promo-layout.record-direct .promo-claim-record-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid #e7edf8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

#promoView .promo-layout.record-direct .promo-claim-record-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #7c5cff;
  background: #f1ecff;
}

#promoView .promo-layout.record-direct .promo-claim-record-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#promoView .promo-layout.record-direct .promo-claim-record-main,
#promoView .promo-layout.record-direct .promo-claim-record-side {
  display: grid;
  min-width: 0;
}

#promoView .promo-layout.record-direct .promo-claim-record-main strong {
  overflow: hidden;
  color: #1f2a44;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#promoView .promo-layout.record-direct .promo-claim-record-main span {
  margin-top: 5px;
  color: #6b7890;
  font-size: 12px;
}

#promoView .promo-layout.record-direct .promo-claim-record-side {
  justify-items: end;
  text-align: right;
}

#promoView .promo-layout.record-direct .promo-claim-record-side strong {
  color: #18a874;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

#promoView .promo-layout.record-direct .promo-claim-record-side span {
  margin-top: 5px;
  color: #18a874;
  font-size: 12px;
  font-weight: 700;
}

#promoView .promo-layout.record-direct .promo-claim-record-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #8b95a7;
  font-size: 14px;
}

@media (max-width: 380px) {
  #promoView .promo-layout.record-direct .promo-claim-record-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px 10px;
  }

  #promoView .promo-layout.record-direct .promo-claim-record-icon {
    width: 40px;
    height: 40px;
  }

  #promoView .promo-layout.record-direct .promo-claim-record-main strong,
  #promoView .promo-layout.record-direct .promo-claim-record-side strong {
    font-size: 14px;
  }
}

#promoView .promo-layout.pending-direct .promo-reward-empty strong {
  color: #1f2a44;
  font-size: 17px;
  font-weight: 850;
}

#promoView .promo-layout.pending-direct .promo-reward-empty span {
  color: #7a8799;
  font-size: 13px;
  font-weight: 600;
}

.promo-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.1);
  color: #2f6bff;
  font-size: 12px;
  font-weight: 900;
}

.promo-status.claimed {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.promo-status.expired {
  background: #eef2f7;
  color: #64748b;
}

.rebate-detail-page {
  display: grid;
  gap: 12px;
}

.rebate-detail-page .promo-detail-back {
  justify-self: start;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #dce5f5;
  border-radius: 12px;
  background: #ffffff;
  color: #2f7bff;
  font-size: 13px;
  font-weight: 900;
}

.rebate-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e7edf8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 35, 80, 0.06);
}

.rebate-summary-card span,
.rebate-section-head small,
.rebate-formula-card p,
.rebate-claim-card span,
.rebate-claim-card small,
.rebate-disabled-card p {
  color: #6b7890;
}

.rebate-summary-card strong {
  display: block;
  margin-top: 4px;
  color: #f6a623;
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
}

.rebate-summary-card button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f7bff, #5b8cff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.rebate-rule-bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid #d8e7ff;
  border-radius: 14px;
  background: #ffffff;
}

.rebate-rule-bar span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2f7bff;
  font-size: 13px;
  font-weight: 950;
}

.rebate-rule-bar p {
  margin: 0;
  color: #3a4a66;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
}

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

.rebate-category-list {
  display: grid;
  align-content: start;
  gap: 9px;
}

.rebate-category-list button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 58px;
  padding: 7px 4px;
  border: 1px solid #e7edf8;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2a44;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04);
}

.rebate-category-list button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2f7bff;
  font-size: 12px;
  font-weight: 950;
}

.rebate-category-icon img,
.rebate-vendor-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rebate-category-list button strong {
  font-size: 13px;
  line-height: 1;
}

.rebate-category-list button small {
  color: #8b95a7;
  font-size: 11px;
  line-height: 1;
}

.rebate-category-list button.active {
  border-color: #2f7bff;
  background: #2f7bff;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(47, 123, 255, 0.22);
}

.rebate-category-list button.active span {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.rebate-category-list button.disabled:not(.active) {
  background: #f5f7fb;
  color: #8b95a7;
}

.rebate-category-list button.disabled:not(.active) span {
  background: #e7edf8;
  color: #8b95a7;
}

.rebate-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.rebate-formula-card,
.rebate-vendor-card,
.rebate-claim-card {
  border: 1px solid #e7edf8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 35, 80, 0.05);
}

.rebate-formula-card {
  padding: 12px;
}

.rebate-formula-card h3,
.rebate-section-head h3,
.rebate-disabled-card h3 {
  margin: 0;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

.rebate-formula-card p {
  margin: 6px 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.rebate-example-grid {
  display: grid;
  gap: 7px;
}

.rebate-example-grid article {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #f4f7fc;
  color: #3a4a66;
  font-size: 12px;
  font-weight: 800;
}

.rebate-example-grid strong {
  color: #f6a623;
  white-space: nowrap;
}

.rebate-vendor-card {
  overflow: hidden;
}

.rebate-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #e7edf8;
}

.rebate-section-head small {
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.rebate-vendor-list {
  display: grid;
}

.rebate-vendor-row {
  display: grid;
  grid-template-columns: 36px minmax(54px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eef2f8;
  background: #ffffff;
  color: #1f2a44;
  text-align: left;
}

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

.rebate-vendor-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #eaf2ff;
  color: #2f7bff;
  font-size: 12px;
  font-weight: 950;
}

.rebate-vendor-row strong {
  font-size: 13px;
  font-weight: 950;
}

.rebate-vendor-row em,
.rebate-vendor-row b {
  font-style: normal;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.rebate-vendor-row em {
  color: #6b7890;
}

.rebate-vendor-row b {
  color: #f6a623;
}

.rebate-vendor-row i {
  color: #8b95a7;
  font-size: 18px;
  font-style: normal;
}

.rebate-disabled-card {
  padding: 18px 14px;
}

.rebate-disabled-card p {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.rebate-claim-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.rebate-claim-card article {
  padding: 12px;
}

.rebate-claim-card article:first-child {
  border-right: 1px solid #e7edf8;
}

.rebate-claim-card strong {
  display: block;
  margin: 5px 0;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 950;
}

.rebate-claim-card small,
.rebate-claim-card span {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}

@media (max-width: 760px) {
  .promo-header {
    top: 0;
  }

  .promo-offer-card {
    height: 152px;
    padding: 14px 88px 14px 14px;
    border-radius: 18px;
  }

  .promo-offer-card::before {
    display: none;
  }

  .promo-offer-copy h3 {
    font-size: 15px;
  }

  .promo-offer-copy p,
  .promo-lines {
    font-size: 11px;
  }

  .promo-offer-copy strong {
    font-size: 20px;
  }

  .promo-offer-art {
    width: 104px;
  }

  .promo-pending-card {
    grid-template-columns: 1fr;
  }

  .promo-pending-card.reward-center-card {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px;
  }

  .promo-reward-image {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .promo-pending-card aside {
    justify-items: start;
  }

  .promo-pending-card.reward-center-card aside {
    justify-items: end;
    gap: 7px;
  }

  .promo-pending-card.reward-center-card aside strong {
    font-size: 15px;
  }

  .promo-pending-card.reward-center-card aside button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  .rebate-layout {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
  }

  .rebate-category-list button {
    min-height: 54px;
    border-radius: 13px;
  }

  .rebate-vendor-row {
    grid-template-columns: 34px minmax(0, 1fr) 10px;
    grid-template-areas:
      "logo name arrow"
      "logo bet arrow"
      "logo rebate arrow";
    gap: 6px;
    min-height: 74px;
    padding: 9px 10px;
  }

  .rebate-vendor-logo {
    grid-area: logo;
    width: 34px;
    height: 34px;
  }

  .rebate-vendor-row strong {
    grid-area: name;
  }

  .rebate-vendor-row em {
    grid-area: bet;
  }

  .rebate-vendor-row b {
    grid-area: rebate;
  }

  .rebate-vendor-row i {
    grid-area: arrow;
  }

  .rebate-vendor-row em,
  .rebate-vendor-row b {
    white-space: nowrap;
  }

  .rebate-section-head {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }

  .rebate-section-head small {
    text-align: left;
  }
}

/* Promo page responsive mobile refresh. Scoped to #promoView only. */
#promoView .promo-page,
#promoView .promo-page * {
  box-sizing: border-box;
}

#promoView .promo-page {
  --promo-space: clamp(8px, 2.6vw, 16px);
  --promo-pad: clamp(10px, 3vw, 18px);
  --promo-radius: clamp(14px, 4vw, 24px);
  --promo-font: clamp(12px, 3.2vw, 16px);
  --promo-small: clamp(10px, 2.75vw, 13px);
  --promo-sidebar-width: clamp(72px, 21vw, 92px);
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

#promoView .promo-header {
  grid-template-columns: clamp(36px, 10.8vw, 44px) minmax(0, 1fr);
  min-height: clamp(46px, 13vw, 56px);
}

#promoView .promo-back {
  width: clamp(36px, 10.8vw, 44px);
  height: clamp(46px, 13vw, 56px);
}

#promoView .promo-back img {
  width: clamp(22px, 7vw, 28px);
  height: clamp(22px, 7vw, 28px);
}

#promoView .promo-top-tabs {
  min-width: 0;
}

#promoView .promo-top-tabs button {
  min-width: 0;
  padding: 0 clamp(1px, 1vw, 4px);
  font-size: clamp(11px, 3vw, 15px);
  line-height: 1;
}

#promoView .promo-tab-badge {
  top: clamp(4px, 1.6vw, 7px);
  right: clamp(2px, 1.2vw, 6px);
  min-width: clamp(14px, 4.4vw, 18px);
  height: clamp(14px, 4.4vw, 18px);
  padding: 0 clamp(3px, 1vw, 5px);
  border-width: 1px;
  font-size: clamp(8px, 2.4vw, 10px);
}

#promoView .promo-layout {
  grid-template-columns: minmax(72px, var(--promo-sidebar-width)) minmax(0, 1fr);
  gap: var(--promo-space);
  min-width: 0;
  min-height: auto;
  padding: var(--promo-space) var(--promo-space) calc(96px + env(safe-area-inset-bottom));
}

#promoView .promo-layout.rebate-direct {
  grid-template-columns: minmax(0, 1fr);
}

#promoView .promo-sidebar {
  width: 100%;
  max-width: 92px;
  min-width: 0;
  gap: clamp(7px, 2.2vw, 12px);
  padding-right: clamp(4px, 1.5vw, 7px);
}

#promoView .promo-sidebar button {
  min-width: 0;
  min-height: clamp(45px, 14vw, 58px);
  gap: clamp(2px, 1vw, 4px);
  padding: clamp(4px, 1.5vw, 6px);
  border-radius: clamp(11px, 3.4vw, 16px);
  font-size: clamp(10px, 2.9vw, 13px);
  line-height: 1.12;
}

#promoView .promo-sidebar button .promo-category-icon {
  width: clamp(24px, 8.5vw, 38px);
  height: clamp(24px, 8.5vw, 38px);
  font-size: clamp(13px, 4.6vw, 20px);
}

#promoView .promo-sidebar button .promo-category-icon img {
  width: clamp(24px, 8vw, 36px);
  height: clamp(24px, 8vw, 36px);
}

#promoView .promo-sidebar .promo-side-action {
  min-height: clamp(30px, 9vw, 38px);
  padding: 0 clamp(3px, 1.2vw, 5px);
  font-size: clamp(10px, 2.8vw, 13px);
}

#promoView .promo-content,
#promoView .promo-card-list,
#promoView .promo-offer-card,
#promoView .telegram-support-promo-card,
#promoView .promo-pending-card,
#promoView .promo-reward-empty,
#promoView .promo-empty {
  min-width: 0;
  max-width: 100%;
}

#promoView .promo-card-list {
  gap: var(--promo-space);
}

#promoView .promo-offer-card {
  grid-template-columns: minmax(0, 1fr) minmax(clamp(72px, 24vw, 150px), 34%);
  height: auto;
  min-height: 0;
  aspect-ratio: 2.06 / 1;
  padding: clamp(11px, 3vw, 18px) clamp(76px, 25vw, 154px) clamp(10px, 3vw, 18px) clamp(12px, 3vw, 58px);
  border-radius: var(--promo-radius);
}

#promoView .promo-offer-card::before {
  top: clamp(8px, 2.8vw, 12px);
  left: clamp(9px, 3vw, 14px);
  font-size: clamp(0px, 11vw, 42px);
  letter-spacing: clamp(-4px, -1vw, -2px);
}

#promoView .promo-offer-copy {
  gap: clamp(3px, 1.2vw, 6px);
  min-width: 0;
}

#promoView .promo-offer-copy h3 {
  max-width: min(100%, 14em);
  font-size: clamp(12px, 3.55vw, 18px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

#promoView .promo-offer-copy p,
#promoView .promo-lines,
#promoView .promo-record-time {
  font-size: clamp(10px, 2.85vw, 13px);
  line-height: 1.25;
}

#promoView .promo-offer-copy strong {
  font-size: clamp(15px, 5.2vw, 26px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

#promoView .promo-offer-copy button {
  min-height: clamp(27px, 8vw, 32px);
  margin-top: clamp(3px, 1.4vw, 8px);
  padding: 0 clamp(9px, 3vw, 14px);
  border-radius: clamp(9px, 2.9vw, 12px);
  font-size: clamp(10px, 2.85vw, 13px);
}

#promoView .promo-offer-art {
  width: min(34%, 150px);
  height: 100%;
  object-fit: cover;
}

#promoView .promo-offer-card.image-only {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(219, 231, 255, 0.9);
  border-radius: clamp(10px, 3vw, 14px);
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(30, 87, 153, 0.14);
  cursor: pointer;
}

#promoView .promo-offer-card.image-only::before {
  display: none;
}

#promoView .promo-offer-full-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  object-fit: contain;
  border-radius: inherit;
}

#promoView .promo-image-action {
  display: none;
}

#promoView .telegram-support-promo-card {
  grid-template-columns: minmax(0, 1fr) clamp(56px, 19vw, 92px);
  min-height: 0;
  aspect-ratio: 1.86 / 1;
  padding: var(--promo-pad);
  border-radius: var(--promo-radius);
}

#promoView .telegram-support-copy {
  gap: clamp(4px, 1.5vw, 7px);
  min-width: 0;
}

#promoView .telegram-support-kicker {
  font-size: clamp(9px, 2.6vw, 11px);
}

#promoView .telegram-support-copy h3 {
  font-size: clamp(15px, 5vw, 24px);
}

#promoView .telegram-support-copy p,
#promoView .telegram-support-copy li,
#promoView .telegram-support-action {
  font-size: var(--promo-small);
}

#promoView .telegram-support-copy ul {
  gap: clamp(4px, 1.4vw, 6px);
  margin: clamp(2px, 1vw, 4px) 0;
}

#promoView .telegram-support-copy li {
  padding: clamp(3px, 1vw, 5px) clamp(6px, 2vw, 9px);
}

#promoView .telegram-support-action {
  min-height: clamp(28px, 8.5vw, 34px);
  padding: 0 clamp(11px, 3.4vw, 16px);
}

#promoView .telegram-support-plane {
  width: clamp(52px, 18vw, 82px);
  height: clamp(52px, 18vw, 82px);
  border-radius: clamp(16px, 5vw, 26px);
}

#promoView .telegram-support-plane svg {
  width: clamp(32px, 11vw, 52px);
  height: clamp(32px, 11vw, 52px);
}

#promoView .promo-pending-card.reward-center-card {
  grid-template-columns: clamp(46px, 15vw, 60px) minmax(0, 1fr) auto;
  gap: clamp(7px, 2.3vw, 11px);
  padding: clamp(10px, 3vw, 14px);
  border-radius: var(--promo-radius);
}

#promoView .promo-reward-image {
  width: clamp(46px, 15vw, 60px);
  height: clamp(46px, 15vw, 60px);
  border-radius: clamp(11px, 3.5vw, 14px);
}

#promoView .promo-pending-card h3 {
  font-size: clamp(13px, 3.5vw, 16px);
}

#promoView .promo-pending-card p,
#promoView .promo-pending-card small {
  font-size: var(--promo-small);
}

#promoView .promo-pending-card.reward-center-card aside strong {
  font-size: clamp(13px, 3.7vw, 16px);
}

#promoView .promo-pending-card.reward-center-card aside button {
  min-height: clamp(27px, 8vw, 32px);
  padding: 0 clamp(8px, 2.5vw, 12px);
  font-size: clamp(10px, 2.85vw, 12px);
}

#promoView .promo-empty,
#promoView .promo-reward-empty {
  padding: clamp(30px, 13vw, 80px) clamp(12px, 3.5vw, 18px);
  border-radius: var(--promo-radius);
  font-size: var(--promo-font);
}

@media (max-width: 360px) {
  #promoView .promo-page {
    --promo-space: clamp(7px, 2.4vw, 10px);
    --promo-sidebar-width: clamp(70px, 22vw, 76px);
  }

  #promoView .promo-layout {
    grid-template-columns: minmax(70px, var(--promo-sidebar-width)) minmax(0, 1fr);
  }

  #promoView .promo-sidebar {
    gap: 7px;
    padding-right: 4px;
  }

  #promoView .promo-sidebar button {
    min-height: 42px;
    border-radius: 11px;
    font-size: 10px;
  }

  #promoView .promo-sidebar button .promo-category-icon,
  #promoView .promo-sidebar button .promo-category-icon img {
    width: 23px;
    height: 23px;
  }

  #promoView .promo-offer-card {
    aspect-ratio: 1.78 / 1;
    padding-right: clamp(66px, 24vw, 84px);
    padding-left: 10px;
  }

  #promoView .promo-offer-card.image-only {
    aspect-ratio: auto;
    padding: 0;
  }

  #promoView .promo-offer-card.image-only .promo-offer-full-image {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  #promoView .promo-offer-card::before {
    display: none;
  }

  #promoView .promo-offer-art {
    width: min(31%, 92px);
  }

  #promoView .telegram-support-promo-card {
    grid-template-columns: minmax(0, 1fr) 52px;
    aspect-ratio: 1.68 / 1;
  }

  #promoView .telegram-support-copy ul {
    display: none;
  }
}

@media (min-width: 431px) {
  #promoView .promo-layout {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  #promoView .promo-sidebar {
    max-width: 92px;
  }
}

/* ===== 返水页面最终版微调 ===== */
.promo-layout.rebate-direct {
  background: #f4f7fc;
}

.promo-layout.rebate-direct .promo-content {
  width: 100%;
}

.promo-layout.rebate-direct .promo-card-list {
  gap: 12px;
}

.rebate-summary-card {
  min-height: 80px;
  padding: 14px 16px;
  border-color: #e7edf8;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.05);
}

.rebate-summary-card span {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

.rebate-summary-card > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.rebate-summary-card strong {
  color: #f6a623;
  font-size: 26px;
  letter-spacing: 0;
  margin-top: 0;
  white-space: nowrap;
}

.rebate-summary-card button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  background: #2f7bff;
  box-shadow: 0 10px 20px rgba(47, 123, 255, 0.22);
  white-space: nowrap;
}

.rebate-rule-bar {
  min-height: 50px;
  border-color: #cfe0ff;
  background: #eef5ff;
}

.rebate-rule-bar span {
  background: #ffffff;
  color: #2f7bff;
}

.rebate-layout {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
}

.rebate-category-list {
  gap: 10px;
}

.rebate-category-list button {
  min-height: 76px;
  border-color: #e7edf8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.04);
}

.rebate-category-list button small {
  color: #6b7890;
  font-size: 12px;
  font-weight: 800;
}

.rebate-category-list button.active {
  background: #2f7bff;
}

.rebate-category-list button.active small,
.rebate-category-list button.active strong {
  color: #ffffff;
}

.rebate-category-list button.disabled:not(.active) {
  background: #f5f7fb;
  color: #8b95a7;
  box-shadow: none;
}

.rebate-content {
  gap: 10px;
}

.rebate-vendor-list {
  display: grid;
  gap: 10px;
}

.rebate-vendor-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(76px, auto) 16px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid #e7edf8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.05);
}

.rebate-vendor-logo {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #f6a623;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.5px;
}

.rebate-vendor-logo.image {
  width: 58px;
  height: 34px;
}

.rebate-category-icon.image {
  overflow: hidden;
}

.rebate-vendor-main,
.rebate-vendor-side {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rebate-vendor-main em,
.rebate-vendor-side em {
  color: #6b7890;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.rebate-vendor-main strong {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.rebate-vendor-main small {
  color: #6b7890;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.rebate-vendor-side {
  justify-items: start;
}

.rebate-vendor-side strong {
  color: #f6a623;
  font-size: 17px;
  font-weight: 1000;
  white-space: nowrap;
}

.rebate-progress {
  display: block;
  width: min(180px, 100%);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #2f6bff;
}

.rebate-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2f7bff;
}

.rebate-vendor-row > i {
  color: #8b95a7;
  font-size: 24px;
  font-style: normal;
  justify-self: end;
  line-height: 1;
}

@media (max-width: 760px) {
  .rebate-layout {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  .rebate-category-list button {
    min-height: 76px;
    padding: 8px 4px;
  }

  .rebate-vendor-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(70px, auto) 12px;
    grid-template-areas: none;
    gap: 8px;
    min-height: 78px;
    padding: 11px 10px;
  }

  .rebate-vendor-logo,
  .rebate-vendor-row strong,
  .rebate-vendor-row em,
  .rebate-vendor-row b,
  .rebate-vendor-row i {
    grid-area: auto;
  }

  .rebate-vendor-logo {
    font-size: 18px;
  }

  .rebate-vendor-main strong {
    font-size: 13px;
  }

  .rebate-vendor-side strong {
    font-size: 14px;
  }
}

/* ===== 返水页面：参考图蓝白布局 ===== */
#promoView .promo-layout.rebate-direct {
  background: #f5f9ff;
  padding: 10px 10px calc(92px + env(safe-area-inset-bottom));
}

.rebate-detail-page {
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.rebate-top-claim {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 38px;
  padding: 2px 4px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 800;
}

.rebate-top-claim strong {
  color: #f59e0b;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.rebate-layout {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.rebate-side-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(620px, calc(100dvh - 180px));
  min-width: 0;
}

.rebate-category-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.rebate-category-list::-webkit-scrollbar {
  display: none;
}

.rebate-category-list button {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid #d8e7ff;
  border-radius: 12px;
  background: #ffffff;
  color: #2563eb;
  box-shadow: none;
}

.rebate-category-list button strong {
  color: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 850;
}

.rebate-category-list button.active {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.rebate-side-actions {
  display: grid;
  gap: 8px;
}

.rebate-side-actions button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d8e7ff;
  border-radius: 12px;
  background: #ffffff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 850;
}

.rebate-side-actions button.primary {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.rebate-side-actions button:disabled {
  opacity: 0.55;
}

.rebate-content {
  min-width: 0;
}

.rebate-vendor-list {
  display: grid;
  gap: 8px;
}

.rebate-vendor-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 124px 18px;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 10px 10px;
  border: 1px solid #d8e7ff;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2a44;
  text-align: left;
  box-shadow: 0 6px 16px rgba(30, 87, 153, 0.06);
}

.rebate-vendor-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.rebate-vendor-logo.image {
  overflow: hidden;
}

.rebate-vendor-main,
.rebate-vendor-side,
.rebate-vendor-rate,
.rebate-vendor-claim {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rebate-vendor-side {
  gap: 6px;
  align-content: center;
  padding-left: 18px;
}

.rebate-vendor-rate,
.rebate-vendor-claim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.rebate-vendor-main em,
.rebate-vendor-rate em,
.rebate-vendor-claim em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.15;
  font-style: normal;
  font-weight: 700;
}

.rebate-vendor-main strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  white-space: nowrap;
}

.rebate-vendor-rate strong {
  color: #2563eb;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 900;
  white-space: nowrap;
}

.rebate-vendor-claim strong {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}

.rebate-progress {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #2f6bff;
}

.rebate-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.rebate-vendor-row > i {
  color: #94a3b8;
  font-size: 22px;
  font-style: normal;
  justify-self: end;
  line-height: 1;
}

.rebate-rate-detail-page {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.rebate-rate-detail-page h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

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

.rebate-filter-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.rebate-filter-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d8e7ff;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2a44;
  font-size: 16px;
  font-weight: 850;
}

.rebate-rate-table,
.rebate-rules-card {
  overflow: hidden;
  border: 1px solid #d8e7ff;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(30, 87, 153, 0.05);
}

.rebate-rate-head,
.rebate-rate-row {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.15fr 0.9fr;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 10px;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 850;
}

.rebate-rate-head {
  background: #eef5ff;
  color: #2563eb;
}

.rebate-rate-row {
  border-top: 1px solid #d8e7ff;
  background: #ffffff;
}

.rebate-rate-row b {
  color: #2563eb;
  font-size: 13px;
}

.rebate-rate-row em {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.rebate-rules-card {
  padding: 14px;
}

.rebate-rules-card h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.rebate-rules-card ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 760px) {
  .rebate-layout {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
  }

  .rebate-side-panel {
    min-height: calc(100dvh - 170px);
  }

  .rebate-vendor-row {
    grid-template-columns: 42px minmax(0, 1fr) 48px 66px 10px;
    gap: 6px;
    min-height: 76px;
    padding: 9px 8px;
  }

  .rebate-vendor-logo {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .rebate-vendor-main strong {
    font-size: 13px;
  }

  .rebate-vendor-rate strong,
  .rebate-vendor-claim strong {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .rebate-layout {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .rebate-category-list button {
    min-height: 40px;
  }

  .rebate-vendor-row {
    grid-template-columns: 38px minmax(0, 1fr) 43px 58px 9px;
    padding: 8px 6px;
  }
}

/* ===== 返水页面：参考图紧凑版覆盖 ===== */
#promoView .promo-layout.rebate-direct {
  padding: 8px 8px calc(84px + env(safe-area-inset-bottom));
}

.rebate-detail-page {
  gap: 8px;
}

.rebate-top-claim {
  min-height: 30px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
}

.rebate-top-claim strong {
  font-size: 13px;
}

.rebate-layout {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
}

.rebate-side-panel {
  gap: 8px;
  align-content: start;
  grid-template-rows: auto auto;
  min-height: auto;
}

.rebate-category-list {
  gap: 6px;
}

.rebate-category-list button {
  min-height: 64px;
  padding: 0 6px;
  border-radius: 12px;
}

.rebate-side-actions {
  gap: 6px;
}

.rebate-side-actions button {
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

.rebate-vendor-list {
  gap: 6px;
}

.rebate-vendor-row {
  grid-template-columns: 56px minmax(0, 1fr) 122px 18px;
  gap: 10px;
  min-height: 88px;
  max-height: 96px;
  padding: 8px 8px;
  border-radius: 10px;
  box-shadow: none;
}

.rebate-vendor-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 15px;
}

.rebate-vendor-logo.svg {
  padding: 3px;
  background: #ffffff;
}

.rebate-vendor-logo.svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rebate-vendor-logo.svg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rebate-vendor-logo.svg.booming {
  width: 92px !important;
  height: 42px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.booming img {
  width: 92px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

.rebate-vendor-logo.pg img {
  width: 48px !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

.rebate-vendor-logo.svg.cq9 {
  padding: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.cq9 svg {
  width: 64px !important;
  height: auto !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.jili {
  padding: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.jili svg {
  width: 60px !important;
  height: auto !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.jdb {
  padding: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.jdb svg {
  width: 60px !important;
  height: auto !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.km {
  padding: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.km svg {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.pp {
  padding: 0 !important;
  overflow: visible !important;
}

.rebate-vendor-logo.svg.pp svg {
  width: 34px !important;
  height: 42px !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.playngo {
  padding: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}

.rebate-vendor-logo.svg.playngo svg {
  display: block !important;
  width: 58px !important;
  height: auto !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.ka {
  padding: 1px !important;
  overflow: visible !important;
  background: #fff !important;
}

.rebate-vendor-logo.svg.ka svg {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  max-width: none !important;
}

.rebate-vendor-logo.svg.playtech {
  padding: 4px !important;
  overflow: visible !important;
  background: #fff !important;
}

.rebate-vendor-logo.svg.playtech svg {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
}

.rebate-vendor-main {
  gap: 7px;
}

.rebate-vendor-main > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.rebate-vendor-main em,
.rebate-vendor-rate em,
.rebate-vendor-claim em {
  font-size: 11px;
  line-height: 1;
}

.rebate-vendor-main strong {
  font-size: 13px;
  line-height: 1;
}

.rebate-vendor-side {
  gap: 8px;
  padding-left: 18px;
  align-content: center;
}

.rebate-vendor-rate,
.rebate-vendor-claim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.rebate-vendor-rate strong,
.rebate-vendor-claim strong {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.rebate-progress {
  height: 6px;
}

.rebate-vendor-row > i {
  font-size: 20px;
  justify-self: end;
}

.rebate-rate-detail-page {
  gap: 10px;
}

.rebate-rate-titlebar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 36px;
}

.rebate-rate-titlebar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #2563eb;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}

.rebate-rate-detail-page h2 {
  font-size: 18px;
  line-height: 1;
}

.rebate-filter-row {
  gap: 8px;
}

.rebate-filter-row label {
  gap: 4px;
  font-size: 12px;
}

.rebate-filter-row select {
  height: 38px;
  border-radius: 10px;
  font-size: 16px;
}

.rebate-rate-head,
.rebate-rate-row {
  min-height: 42px;
  padding: 0 8px;
  font-size: 11px;
}

.rebate-rules-card {
  padding: 10px 12px;
}

.rebate-rules-card h3 {
  margin-bottom: 6px;
  font-size: 14px;
}

.rebate-rules-card ol {
  gap: 4px;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .rebate-layout {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 7px;
  }

  .rebate-vendor-row {
    grid-template-columns: 48px minmax(0, 1fr) 48px 58px 9px;
    gap: 5px;
    min-height: 88px;
    padding: 7px 6px;
  }

  .rebate-vendor-logo {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .rebate-vendor-main em,
  .rebate-vendor-rate em,
  .rebate-vendor-claim em {
    font-size: 10px;
  }

  .rebate-vendor-main strong,
  .rebate-vendor-rate strong,
  .rebate-vendor-claim strong {
    font-size: 11px;
  }
}

/* ===== 返水左侧分类：对齐游戏分类厂商按钮尺寸 ===== */
.rebate-layout {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
}

.rebate-category-list {
  gap: 8px;
}

.rebate-category-list button {
  min-height: 42px;
  padding: 0 8px;
  border-radius: 12px;
  border-color: #d8e7ff;
  background: #f8fafc;
  color: #d4af37;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.rebate-category-list button strong {
  font-size: 14px;
  font-weight: 900;
}

.rebate-category-list button.active {
  border-color: #2563eb;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #d4af37;
}

@media (max-width: 760px) {
  .rebate-layout {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .rebate-category-list button {
    min-height: 42px;
    border-radius: 12px;
  }
}

@media (max-width: 390px) {
  .rebate-layout {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .rebate-category-list button strong {
    font-size: 13px;
  }
}

/* ===== 返水左侧分类：完全对齐分类游戏页左侧厂商按钮 ===== */
.rebate-layout {
  --rebate-filter-width: clamp(82px, calc((100vw - 40px) / 4), 112px);
  grid-template-columns: var(--rebate-filter-width) minmax(0, 1fr);
  gap: 5px;
}

.rebate-category-list {
  width: var(--rebate-filter-width);
  min-width: var(--rebate-filter-width);
  max-width: var(--rebate-filter-width);
  gap: 5px;
}

.rebate-category-list button {
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 3px 6px;
  border-radius: 12px;
  color: #d4af37;
}

.rebate-category-list button strong {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}

.rebate-category-list button.active {
  color: #ffe6a3;
}

.rebate-category-list button.active strong {
  color: #ffe6a3;
}

@media (max-width: 380px) {
  .rebate-layout {
    --rebate-filter-width: 84px;
  }
}

.activity-hero {
  margin: 10px 0 20px;
  padding: 28px 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.activity-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.activity-hero-content {
  position: relative;
  z-index: 1;
}

.activity-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--brand);
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.activity-hero h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}

.activity-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  letter-spacing: 0.5px;
}

.activity-grid {
  display: grid;
  gap: 16px;
}

.activity-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  overflow: hidden;
}

.activity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activity-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
  transform: translateY(-3px);
}

.activity-card:hover::before {
  opacity: 1;
}

.activity-card.highlight {
  background: linear-gradient(135deg, #faf8f0, #ffffff);
  border-color: rgba(212, 175, 55, 0.5);
}

.activity-card.vip {
  background: linear-gradient(135deg, #fff9e6, #ffffff);
  border-color: rgba(212, 175, 55, 0.6);
}

.activity-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.activity-info h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: 0.5px;
}

.activity-info p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.6;
}

.activity-btn {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.activity-btn:hover {
  background: linear-gradient(180deg, #F7D76A, #D4AF37);
  color: #111111;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.activity-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.activity-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand);
  stroke-width: 2;
}

.activity-card.highlight .activity-icon {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
}

.activity-card.vip .activity-icon {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15));
}

@media (max-width: 460px) {
  .activity-hero {
    padding: 24px 20px;
  }

  .activity-hero h3 {
    font-size: 24px;
  }

  .activity-card {
    padding: 20px;
  }

  .activity-info h4 {
    font-size: 16px;
  }

  .activity-icon {
    width: 50px;
    height: 50px;
  }

  .activity-icon svg {
    width: 24px;
    height: 24px;
  }
}

.hero {
  grid-template-columns: 1fr;
  min-height: 0;
}

.hero-copy {
  display: none;
}

.ad-carousel {
  padding: 18px 0 6px;
}

.ad-carousel-viewport {
  min-height: 320px;
  border-radius: 20px;
}

.ad-slide {
  min-height: 320px;
}

.ad-copy {
  max-width: 88%;
}

.category-row {
  justify-content: flex-start;
  margin: 10px 0 14px;
}

.category-row button {
  min-width: 92px;
}

.games-panel {
  display: none;
}

.games-panel.active {
  display: block;
}

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

.provider-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #161616, #090909);
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.provider-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 1;
}

.provider-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-card strong,
.provider-card small,
.provider-card-chip {
  position: relative;
  z-index: 2;
}

.provider-card strong {
  margin-top: 10px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.provider-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.provider-card-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #111111;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.provider-modal {
  display: grid;
  gap: 16px;
}

.provider-modal > p {
  margin: 0;
  color: var(--muted);
}

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

.provider-mini-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.provider-mini-card span,
.provider-mini-card small {
  display: block;
}

.provider-mini-card strong {
  display: block;
  margin: 6px 0;
  color: var(--brand-light);
}

/* ===== Final mobile agent/profile overrides ===== */
body.agent-page {
  margin: 0 !important;
  min-height: 100vh !important;
  background: #f3f7ff !important;
  color: #14213f !important;
}

body.agent-page .agent-shell {
  width: min(100%, 430px) !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 0 0 76px !important;
  background: #f3f7ff !important;
  transform: none !important;
}

body.agent-page .agent-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: 42px 1fr 42px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #dbe8ff !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

body.agent-page .agent-header h1 {
  margin: 0 !important;
  color: #173e9e !important;
  text-align: center !important;
  font-size: 18px !important;
}

body.agent-page .agent-main {
  display: grid !important;
  gap: 12px !important;
  padding: 12px !important;
}

body.agent-page .agent-mobile-hero,
body.agent-page .agent-mobile-card,
body.agent-page .agent-sub-card,
body.agent-page .agent-record-card,
body.agent-page .agent-customer-row {
  border: 1px solid #dbe8ff !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(47, 107, 255, 0.08) !important;
}

body.agent-page .agent-mobile-hero,
body.agent-page .agent-mobile-card {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

body.agent-page .agent-mobile-hero {
  background: radial-gradient(circle at 88% 6%, rgba(47, 107, 255, 0.2), transparent 34%), linear-gradient(135deg, #fff, #eaf2ff) !important;
}

body.agent-page .agent-mobile-hero h2,
body.agent-page .agent-mobile-card h3 {
  margin: 0 !important;
  color: #173e9e !important;
}

body.agent-page .agent-mobile-grid,
body.agent-page .agent-mobile-summary,
body.agent-page .agent-mobile-detail-list,
body.agent-page .agent-sub-detail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.agent-page .agent-mobile-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.agent-page .agent-mobile-grid article,
body.agent-page .agent-mobile-summary article,
body.agent-page .agent-mobile-detail-list article,
body.agent-page .agent-sub-detail article,
body.agent-page .agent-record-card article {
  padding: 10px !important;
  border-radius: 12px !important;
  background: #f6f9ff !important;
}

body.agent-page .agent-mobile-grid span,
body.agent-page .agent-mobile-summary span,
body.agent-page .agent-mobile-detail-list span,
body.agent-page .agent-sub-detail span,
body.agent-page .agent-record-card span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.agent-page .agent-mobile-grid strong,
body.agent-page .agent-mobile-summary strong,
body.agent-page .agent-mobile-detail-list strong,
body.agent-page .agent-sub-detail strong,
body.agent-page .agent-record-card strong {
  display: block !important;
  margin-top: 5px !important;
  color: #0b55e8 !important;
  font-size: 16px !important;
}

body.agent-page .agent-mobile-actions,
body.agent-page .agent-mobile-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.agent-page .agent-mobile-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.agent-page .agent-mobile-actions button,
body.agent-page .agent-mobile-menu button,
body.agent-page .agent-poster-card button,
body.agent-page .agent-text-link {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #0b55e8 !important;
  color: #fff !important;
  font-weight: 950 !important;
}

body.agent-page .agent-mobile-list {
  display: grid !important;
  gap: 10px !important;
}

body.agent-page .agent-sub-card {
  overflow: hidden !important;
}

body.agent-page .agent-sub-card > button,
body.agent-page .agent-customer-row {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 13px !important;
  border: 0 !important;
  background: #fff !important;
  color: #14213f !important;
  text-align: left !important;
}

body.agent-page .agent-sub-card > button {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.agent-page .agent-sub-detail {
  display: none !important;
  padding: 0 13px 13px !important;
}

body.agent-page .agent-sub-card.open .agent-sub-detail {
  display: grid !important;
}

body.agent-page .agent-record-card {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 13px !important;
}

body.agent-page .agent-record-card > div {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: space-between !important;
}

body.agent-page .agent-commission-month-card {
  align-items: stretch;
}

body.agent-page .agent-commission-month-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #173e9e;
  text-align: left;
}

body.agent-page .agent-commission-month-toggle span {
  display: grid;
  gap: 3px;
}

body.agent-page .agent-commission-month-toggle strong {
  margin: 0;
  font-size: 17px;
}

body.agent-page .agent-commission-month-toggle small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

body.agent-page .agent-commission-month-toggle b {
  color: #0b55e8;
  font-size: 24px;
  line-height: 1;
}

body.agent-page .agent-commission-month-details {
  grid-column: 1 / -1;
  display: block !important;
  width: 100%;
}

body.agent-page .agent-commission-daily-list {
  display: grid !important;
  width: 100%;
  gap: 7px;
  padding-top: 4px;
}

body.agent-page .agent-commission-daily-row {
  display: grid;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  background: #f9fbff;
}

body.agent-page .agent-commission-daily-row > strong {
  margin: 0;
  color: #173e9e;
  font-size: 13px;
}

body.agent-page .agent-commission-daily-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

body.agent-page .agent-commission-daily-grid article {
  grid-column: span 2;
  min-width: 0;
  padding: 6px 4px;
  background: #ffffff;
}

body.agent-page .agent-commission-daily-grid article:nth-child(n + 4) {
  grid-column: span 3;
}

body.agent-page .agent-commission-daily-grid article span {
  font-size: 10px;
}

body.agent-page .agent-commission-daily-grid article strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

body.agent-page .agent-poster-card {
  justify-items: center !important;
}

body.agent-page .agent-poster-card img {
  width: 180px !important;
  height: 180px !important;
  border-radius: 18px !important;
}

body.agent-page .agent-bottom-tabs {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: min(100%, 430px) !important;
  transform: translateX(-50%) !important;
  border-top: 1px solid #dbe8ff !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body.agent-page .agent-bottom-tabs button {
  min-height: 58px !important;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.agent-page .agent-bottom-tabs button.active {
  color: #0b55e8 !important;
}

body.profile-mode .profile-invite-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.profile-mode .profile-invite-card .profile-gift-art,
body.profile-mode .profile-agent-code {
  display: none !important;
}

/* ===== 移动端代理中心：蓝白简洁版 ===== */
body.agent-page {
  min-height: 100vh;
  margin: 0;
  background: #f3f7ff;
  color: #14213f;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body.agent-page .agent-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 0 76px;
  background: #f3f7ff;
  transform: none;
}

body.agent-page .agent-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border-bottom: 1px solid #dbe8ff;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

body.agent-page .agent-header h1 {
  margin: 0;
  color: #173e9e;
  text-align: center;
  font-size: 18px;
}

body.agent-page .agent-back {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #eaf2ff;
}

body.agent-page .agent-back img {
  width: 18px;
  height: 18px;
}

body.agent-page .agent-main {
  display: grid;
  gap: 12px;
  padding: 12px;
}

body.agent-page .agent-mobile-hero,
body.agent-page .agent-mobile-card,
body.agent-page .agent-sub-card,
body.agent-page .agent-record-card,
body.agent-page .agent-customer-row {
  border: 1px solid #dbe8ff;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(47, 107, 255, 0.08);
}

body.agent-page .agent-mobile-hero {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(circle at 88% 6%, rgba(47, 107, 255, 0.2), transparent 34%),
    linear-gradient(135deg, #ffffff, #eaf2ff);
}

body.agent-page .agent-mobile-hero span {
  color: #0b55e8;
  font-size: 14px;
  font-weight: 950;
}

body.agent-page .agent-mobile-hero h2 {
  margin: 6px 0 0;
  color: #102a67;
  font-size: 22px;
}

body.agent-page .agent-mobile-hero label {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

body.agent-page .agent-mobile-hero small,
body.agent-page .agent-mobile-grid span,
body.agent-page .agent-mobile-summary span,
body.agent-page .agent-sub-card span,
body.agent-page .agent-customer-row span,
body.agent-page .agent-customer-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.agent-page .agent-mobile-hero label strong,
body.agent-page .agent-poster-link {
  overflow-wrap: anywhere;
  color: #173e9e;
  font-size: 13px;
}

body.agent-page .agent-mobile-actions,
body.agent-page .agent-mobile-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.agent-page .agent-mobile-actions button,
body.agent-page .agent-mobile-menu button,
body.agent-page .agent-poster-card button,
body.agent-page .agent-text-link {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: #0b55e8;
  color: #ffffff;
  font-weight: 950;
}

body.agent-page .agent-mobile-actions button + button,
body.agent-page .agent-poster-card button + button {
  background: #eaf2ff;
  color: #173e9e;
}

body.agent-page .agent-mobile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body.agent-page .agent-mobile-card h3 {
  margin: 0;
  color: #173e9e;
  font-size: 17px;
}

body.agent-page .agent-mobile-grid,
body.agent-page .agent-mobile-summary,
body.agent-page .agent-mobile-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.agent-page .agent-mobile-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.agent-page .agent-mobile-grid article,
body.agent-page .agent-mobile-summary article,
body.agent-page .agent-mobile-detail-list article,
body.agent-page .agent-sub-detail article,
body.agent-page .agent-record-card article {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #f6f9ff;
}

body.agent-page .agent-mobile-grid strong,
body.agent-page .agent-mobile-summary strong,
body.agent-page .agent-mobile-detail-list strong,
body.agent-page .agent-sub-detail strong,
body.agent-page .agent-record-card strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #0b55e8;
  font-size: 16px;
}

body.agent-page .agent-mobile-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.agent-page .agent-mobile-menu button {
  min-height: 58px;
  padding: 6px;
  background: #f6f9ff;
  color: #173e9e;
  font-size: 12px;
}

body.agent-page .agent-mobile-list {
  display: grid;
  gap: 10px;
}

body.agent-page .agent-sub-card {
  overflow: hidden;
}

body.agent-page .agent-sub-card > button,
body.agent-page .agent-customer-row {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 13px;
  border: 0;
  background: #ffffff;
  color: #14213f;
  text-align: left;
}

body.agent-page .agent-sub-card > button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

body.agent-page .agent-sub-card strong,
body.agent-page .agent-customer-row strong {
  color: #14213f;
  font-size: 15px;
}

body.agent-page .agent-sub-card em,
body.agent-page .agent-record-card em {
  color: #0b55e8;
  font-style: normal;
  font-weight: 950;
}

body.agent-page .agent-sub-detail {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 13px 13px;
}

body.agent-page .agent-sub-card.open .agent-sub-detail {
  display: grid;
}

body.agent-page .agent-mobile-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  background: #f8fbff;
  color: #14213f;
  outline: none;
}

body.agent-page .agent-record-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
}

body.agent-page .agent-record-card > div {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

body.agent-page .agent-poster-card {
  justify-items: center;
}

body.agent-page .agent-poster-card img {
  width: 180px;
  height: 180px;
  border: 10px solid #f6f9ff;
  border-radius: 18px;
}

body.agent-page .agent-poster-card button {
  width: 100%;
}

body.agent-page .agent-poster-template div {
  display: grid;
  gap: 8px;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #0b55e8, #73a7ff);
  color: #ffffff;
}

body.agent-page .agent-poster-template span,
body.agent-page .agent-poster-template strong,
body.agent-page .agent-poster-template small {
  color: #ffffff;
}

body.agent-page .agent-poster-template strong {
  font-size: 28px;
}

body.agent-page .agent-empty-mobile {
  margin: 0;
  padding: 18px;
  color: #64748b;
  text-align: center;
}

body.agent-page .agent-bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 430px);
  transform: translateX(-50%);
  border-top: 1px solid #dbe8ff;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

body.agent-page .agent-bottom-tabs button {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body.agent-page .agent-bottom-tabs button.active {
  color: #0b55e8;
}

body.agent-page .agent-mobile-toast {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 30;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: #102a67;
  color: #ffffff;
  font-weight: 900;
}

body.profile-mode .profile-invite-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.profile-mode .profile-invite-card .profile-gift-art,
body.profile-mode .profile-agent-code {
  display: none;
}

/* ===== 代理列表页 ===== */
.agent-list-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.agent-list-summary div {
  display: grid;
  gap: 10px;
  min-height: 104px;
  padding: 22px;
  background: #fff;
}

.agent-list-summary span,
.agent-list-head p,
.agent-list-table th {
  color: #586c8d;
  font-size: 13px;
  font-weight: 800;
}

.agent-list-summary strong {
  color: #075eff;
  font-size: 28px;
  line-height: 1;
}

.agent-list-panel {
  padding: 20px;
}

.agent-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.agent-list-head h2 {
  margin: 0;
  color: #13284a;
  font-size: 20px;
}

.agent-list-head p {
  margin: 6px 0 0;
}

.agent-list-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.agent-list-tools input,
.agent-list-tools select {
  min-height: 38px;
  border: 1px solid #d9e4f5;
  border-radius: 8px;
  background: #fff;
  color: #172844;
  outline: none;
}

.agent-list-tools input {
  width: 210px;
  padding: 0 14px;
}

.agent-list-tools select {
  padding: 0 12px;
}

.agent-list-tools button,
.agent-table-link {
  min-height: 38px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: #19355f;
  font: inherit;
  font-weight: 900;
}

.agent-list-tools button {
  padding: 0 16px;
  cursor: pointer;
}

.agent-list-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.agent-list-table th,
.agent-list-table td {
  height: 54px;
  padding: 0 12px;
  border-bottom: 1px solid #e2eaf6;
  text-align: left;
  white-space: nowrap;
}

.agent-list-table th {
  background: #f7faff;
}

.agent-list-table td {
  color: #243a5f;
  font-size: 13px;
  font-weight: 700;
}

.agent-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.agent-status.ok {
  background: #def8ea;
  color: #078342;
}

.agent-status.locked {
  background: #fff0ed;
  color: #d92d20;
}

.agent-table-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-color: transparent;
  background: #eef5ff;
  color: #075eff;
  text-decoration: none;
}

@media (max-width: 1180px) {
  .agent-list-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-list-tools {
    justify-content: start;
  }
}

@media (max-width: 760px) {
  .agent-list-summary {
    grid-template-columns: 1fr;
  }

  .agent-list-tools input,
  .agent-list-tools select,
  .agent-list-tools button {
    width: 100%;
  }
}

/* ===== 代理详情 / 代理中心：简洁展开式后台页 ===== */
body.agent-admin-page {
  min-height: 100vh;
  margin: 0;
  background: #f4f7fc;
  color: #14213f;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

body.agent-admin-page *,
body.agent-admin-page *::before,
body.agent-admin-page *::after {
  box-sizing: border-box;
}

.agent-admin-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.agent-admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #dbe6f7;
  background: #fff;
}

.agent-admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 20px;
  border-bottom: 1px solid #edf2fb;
  color: #0f1f3d;
  text-decoration: none;
}

.agent-admin-brand img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.agent-admin-brand span,
.agent-admin-nav,
.agent-admin-nav section,
.agent-admin-nav section div {
  display: grid;
}

.agent-admin-brand strong {
  font-size: 17px;
  font-weight: 900;
}

.agent-admin-brand small {
  color: #425777;
  font-weight: 700;
}

.agent-admin-nav {
  gap: 6px;
  padding: 16px 18px 28px;
}

.agent-admin-nav a,
.agent-admin-nav button {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #283a5d;
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
}

.agent-admin-nav button {
  justify-content: space-between;
  width: 100%;
}

.agent-admin-nav button::after {
  content: "⌃";
  color: #075eff;
}

.agent-admin-nav section div {
  gap: 4px;
  padding-left: 16px;
}

.agent-admin-nav section div a {
  min-height: 34px;
  color: #60708f;
  font-size: 14px;
}

.agent-admin-nav section div a::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: #c7d5eb;
}

.agent-admin-nav a.active,
.agent-admin-nav a:hover,
.agent-admin-nav button:hover {
  background: #edf4ff;
  color: #075eff;
}

.agent-admin-nav a.active::before {
  background: #075eff;
}

.agent-admin-main {
  min-width: 0;
}

.agent-admin-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(360px, 520px) auto;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  padding: 12px 28px;
  border-bottom: 1px solid #dfe8f7;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.agent-admin-topbar span {
  color: #566a8d;
  font-size: 13px;
  font-weight: 800;
}

.agent-admin-topbar h1 {
  margin: 4px 0 0;
  color: #12264a;
  font-size: 18px;
  line-height: 1.2;
}

.agent-admin-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 10px;
}

.agent-admin-search input,
.agent-table-tools input,
.agent-panel-head input,
.agent-pagination select {
  min-height: 42px;
  border: 1px solid #d9e4f5;
  border-radius: 8px;
  background: #fff;
  color: #172844;
  outline: none;
}

.agent-admin-search input,
.agent-table-tools input,
.agent-panel-head input {
  width: 100%;
  padding: 0 14px;
}

.agent-admin-search input:focus,
.agent-table-tools input:focus,
.agent-panel-head input:focus {
  border-color: #0b68ff;
  box-shadow: 0 0 0 3px rgba(11, 104, 255, 0.1);
}

.agent-admin-search button,
.agent-overview-actions button,
.agent-table-tools button,
.agent-pagination button,
.agent-table-view {
  min-height: 38px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #fff;
  color: #19355f;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.agent-admin-search button,
.agent-overview-actions .primary {
  border-color: #075eff;
  background: #075eff;
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 94, 255, 0.18);
}

.agent-overview-actions .danger {
  color: #d92d20;
}

.agent-admin-user {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  color: #1c2f50;
}

.agent-admin-user button {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe6f7;
  border-radius: 50%;
  background: #fff;
  color: #183c73;
  font-weight: 900;
}

.agent-detail {
  display: grid;
  gap: 22px;
  padding: 24px 28px 32px;
}

.agent-detail-card {
  border: 1px solid #e0e8f5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 57, 108, 0.07);
}

.agent-overview {
  padding: 22px 24px;
}

.agent-overview-head,
.agent-table-head,
.agent-panel-head,
.agent-overview-actions,
.agent-table-tools,
.agent-pagination {
  display: flex;
  align-items: center;
}

.agent-overview-head {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.agent-overview-head a {
  color: #075eff;
  text-decoration: none;
  font-weight: 900;
}

.agent-overview-actions {
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.agent-overview-actions button,
.agent-table-tools button {
  padding: 0 16px;
}

.agent-overview-body {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  gap: 28px;
}

.agent-profile {
  display: flex;
  gap: 20px;
  padding-right: 24px;
  border-right: 1px solid #dce6f5;
}

.agent-profile-avatar {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #075eff 0 16px, transparent 17px),
    radial-gradient(circle at 50% 82%, #075eff 0 32px, transparent 33px),
    #eaf2ff;
}

.agent-profile h2,
.agent-table-head h3,
.agent-team-panel h3 {
  margin: 0;
  color: #13284a;
  font-size: 18px;
}

.agent-profile h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.agent-profile h2 span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.agent-profile h2 .ok {
  background: #def8ea;
  color: #078342;
}

.agent-profile h2 .locked {
  background: #fff0ed;
  color: #d92d20;
}

.agent-profile dl {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
}

.agent-profile dl div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
}

.agent-profile dt,
.agent-profile dd {
  margin: 0;
}

.agent-profile dt,
.agent-info-metric span,
.agent-team-summary span,
.agent-customer-table th {
  color: #586c8d;
  font-size: 13px;
  font-weight: 800;
}

.agent-profile dd {
  color: #152947;
  font-weight: 900;
}

.agent-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 26px;
  align-content: start;
}

.agent-info-metric {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.agent-info-metric strong {
  color: #162743;
  font-size: 22px;
  line-height: 1.1;
}

.agent-info-metric.danger-value strong,
.win-positive {
  color: #ff1e2d;
}

.agent-info-metric.success-value strong,
.win-negative {
  color: #00a15d;
}

.agent-info-metric.blue-value strong {
  color: #075eff;
}

.agent-info-metric.orange-value strong {
  color: #ff8a00;
}

.agent-commission-note {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #dbe8fb;
  border-radius: 8px;
  background: #f6f9ff;
  color: #425777;
  font-size: 13px;
  line-height: 1.7;
}

.agent-commission-note strong {
  color: #183866;
}

.agent-workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.agent-team-panel,
.agent-customer-panel {
  min-height: 650px;
  padding: 20px;
}

.agent-panel-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.agent-panel-head label {
  width: 170px;
}

.agent-panel-head input {
  min-height: 38px;
}

.agent-tree,
.agent-tree ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-tree ul {
  position: relative;
  margin-left: 28px;
  padding-left: 16px;
}

.agent-tree ul::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 20px;
  left: 0;
  width: 1px;
  background: #cbd9ee;
}

.agent-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fbfdff;
  color: #172a49;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.agent-tree-node::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: #cbd9ee;
}

.agent-tree > li > .agent-tree-node::before {
  display: none;
}

.agent-tree-node strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.agent-tree-node em {
  padding: 3px 8px;
  border-radius: 6px;
  background: #eaf2ff;
  color: #075eff;
  font-style: normal;
  font-weight: 900;
}

.agent-tree-node.active {
  border-color: #b9d3ff;
  background: #eef5ff;
  box-shadow: inset 3px 0 0 #075eff;
}

.agent-tree-avatar {
  width: 28px;
  height: 28px;
  border: 1px solid #7aa8ff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #2d6cff 0 5px, transparent 6px),
    radial-gradient(circle at 50% 78%, #2d6cff 0 10px, transparent 11px),
    #e8f1ff;
}

.agent-team-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 70px;
  padding: 18px;
  border: 1px solid #dce8f8;
  border-radius: 8px;
  background: #fbfdff;
}

.agent-team-summary h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: #152a4d;
}

.agent-team-summary div {
  display: grid;
  gap: 7px;
}

.agent-team-summary strong {
  color: #075eff;
}

.agent-customer-panel {
  min-width: 0;
}

.agent-table-head {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.agent-table-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-table-head > div:first-child span {
  color: #41628f;
  font-size: 25px;
}

.agent-table-tools {
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.agent-table-tools input {
  width: 150px;
  min-height: 38px;
}

.agent-table-wrap {
  overflow-x: auto;
  border: 1px solid #dbe5f3;
  border-radius: 8px;
}

.agent-customer-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.agent-customer-table th,
.agent-customer-table td {
  height: 54px;
  padding: 0 12px;
  border-bottom: 1px solid #e2eaf6;
  text-align: left;
  white-space: nowrap;
}

.agent-customer-table th {
  background: #f7faff;
}

.agent-customer-table td {
  color: #243a5f;
  font-size: 13px;
}

.agent-customer-table tbody tr:last-child td {
  border-bottom: 0;
}

.agent-table-view {
  min-height: 28px;
  padding: 0 12px;
  border-color: transparent;
  background: #eef5ff;
  color: #075eff;
  font-size: 13px;
}

.agent-empty {
  color: #7a8ba8;
  text-align: center;
}

.agent-pagination {
  justify-content: end;
  gap: 10px;
  margin-top: 18px;
}

.agent-pagination span {
  margin-right: 8px;
  color: #445a7c;
  font-weight: 800;
}

.agent-pagination button {
  width: 36px;
  min-height: 34px;
}

.agent-pagination button.active {
  border-color: #075eff;
  color: #075eff;
}

.agent-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.agent-pagination select {
  padding: 0 12px;
}

.agent-admin-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: 8px;
  background: #12264a;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(18, 38, 74, 0.18);
}

@media (max-width: 1180px) {
  .agent-admin-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .agent-admin-topbar,
  .agent-overview-body,
  .agent-workspace {
    grid-template-columns: 1fr;
  }

  .agent-profile {
    border-right: 0;
    border-bottom: 1px solid #dce6f5;
    padding: 0 0 20px;
  }
}

@media (max-width: 760px) {
  .agent-admin-layout {
    display: block;
  }

  .agent-admin-sidebar {
    position: relative;
    height: auto;
  }

  .agent-admin-topbar,
  .agent-detail {
    padding: 16px;
  }

  .agent-admin-topbar {
    position: relative;
    gap: 14px;
  }

  .agent-admin-search {
    grid-template-columns: 1fr;
  }

  .agent-overview,
  .agent-team-panel,
  .agent-customer-panel {
    padding: 16px;
  }

  .agent-overview-head,
  .agent-table-head,
  .agent-panel-head,
  .agent-profile {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-metrics,
  .agent-team-summary {
    grid-template-columns: 1fr;
  }

  .agent-panel-head label,
  .agent-table-tools input {
    width: 100%;
  }
}

body.records-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.16), transparent 30%),
    linear-gradient(180deg, #050505 0%, #0a0f1f 42%, #050505 100%);
  color: #ffffff;
}

.records-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 16px 28px;
}

.records-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  margin: -14px -16px 14px;
  padding: 12px 16px;
  background: rgba(5, 5, 5, 0.86);
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  backdrop-filter: blur(16px);
}

.records-topbar h1,
.records-topbar p {
  margin: 0;
  text-align: center;
}

.records-topbar h1 {
  font-size: 18px;
  font-weight: 900;
}

.records-topbar p {
  margin-top: 3px;
  color: #b8bdc9;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.records-back,
.records-support {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.72);
  color: #f5d67b;
  display: grid;
  place-items: center;
}

.records-back svg,
.records-support svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.records-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.records-tabs button {
  min-height: 40px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.7);
  color: #b8bdc9;
  font-size: 13px;
  font-weight: 800;
}

.records-tabs button.active {
  color: #050505;
  border-color: rgba(245, 214, 123, 0.7);
  background: linear-gradient(180deg, #f5d67b 0%, #d4af37 100%);
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.2);
}

.records-main,
.records-section,
.records-list {
  display: grid;
  gap: 16px;
}

.records-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.records-section-title h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.records-section-title span {
  color: #b8bdc9;
  font-size: 12px;
}

.records-card {
  padding: 18px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 22px;
  background: #111827;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.records-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.records-card-head span {
  color: #b8bdc9;
  font-size: 13px;
}

.records-card-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.records-card-head em.success {
  color: #22c55e;
}

.records-card-head em.failed {
  color: #ef4444;
}

.records-card-head em.pending {
  color: #d4af37;
}

.records-card > strong {
  display: block;
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
}

.records-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.records-card dl div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.records-card dt,
.records-card dd {
  margin: 0;
  font-size: 13px;
}

.records-card dt {
  color: #b8bdc9;
}

.records-card dd {
  max-width: 62%;
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.records-empty {
  margin: 0;
  padding: 26px 18px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 20px;
  background: rgba(17, 24, 39, 0.72);
  color: #b8bdc9;
  text-align: center;
  font-size: 13px;
}

body.records-page {
  background: #eef3fb;
  color: #172033;
}

.records-shell {
  max-width: 614px;
  padding: 0 0 20px;
  background: #eef3fb;
}

.records-topbar {
  position: sticky;
  top: 0;
  grid-template-columns: 58px auto 1fr;
  min-height: 78px;
  margin: 0;
  padding: 8px 18px 10px 4px;
  background: #ffffff;
  border-bottom: 1px solid #dfe7f3;
  box-shadow: none;
  backdrop-filter: none;
}

.records-topbar h1 {
  color: #172033;
  text-align: left;
  font-size: 26px;
  line-height: 1;
}

.records-back {
  width: 54px;
  height: 54px;
  border-color: rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  background: #f8fafc;
  color: #b58b16;
}

.records-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.records-top-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #d9e4f2;
  border-radius: 999px;
  background: #ffffff;
  color: #172033;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.records-top-actions button:first-child,
.records-top-actions button.active {
  border-color: rgba(212, 175, 55, 0.42);
  color: #d4af37;
  background: rgba(245, 214, 123, 0.1);
}

.records-tabs {
  display: none;
}

.records-main {
  gap: 12px;
  padding: 18px 18px 0;
}

.records-section {
  gap: 10px;
}

.records-section-title {
  display: none;
}

.records-list {
  gap: 12px;
}

.records-card {
  padding: 20px;
  border: 1px solid #d6e1ee;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(17, 32, 51, 0.02);
}

.records-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
}

.records-card-row > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.records-card-row > div:last-child {
  text-align: right;
}

.records-card-row strong,
.records-card-row b {
  color: #172033;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.records-card-row span,
.records-card-row em,
.records-card p {
  color: #60708b;
  font-size: 16px;
  line-height: 1.15;
}

.records-card-row em {
  font-style: normal;
  font-weight: 700;
}

.records-card-row em.success {
  color: #1f9d63;
}

.records-card-row em.failed {
  color: #d74444;
}

.records-card-row em.pending {
  color: #60708b;
}

.records-card p {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}

@media (max-width: 430px) {
  .records-topbar {
    grid-template-columns: 52px 1fr;
    row-gap: 10px;
    padding-right: 12px;
  }

  .records-top-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-left: 2px;
  }

  .records-top-actions button {
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }

  .records-card-row strong,
  .records-card-row b {
    font-size: 20px;
  }

  .records-card-row span,
  .records-card-row em,
  .records-card p {
    font-size: 14px;
  }
}

/* Transaction records bill style */
body.records-page {
  min-height: 100vh;
  margin: 0;
  background: #F4F7FC;
  color: #1F2A44;
}

body.records-page .records-shell {
  width: min(100%, 614px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 16px 28px;
  background: #F4F7FC;
}

body.records-page .records-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  margin: 0 -16px;
  padding: 12px 16px;
  border-bottom: 1px solid #E7EDF8;
  background: rgba(244, 247, 252, 0.94);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

body.records-page .records-heading {
  min-width: 0;
}

body.records-page .records-topbar h1 {
  margin: 0;
  color: #1F2A44;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
}

body.records-page .records-support-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 5px;
  border: 0;
  background: transparent;
  color: #2F7BFF;
  font-size: 13px;
  font-weight: 800;
  padding: 0;
}

body.records-page .records-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1F2A44;
}

body.records-page .records-back svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.records-page .records-filter-button {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #DCE5F5;
  border-radius: 12px;
  background: #FFFFFF;
  color: #1F2A44;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

body.records-page .records-tabs {
  position: sticky;
  top: 88px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  height: 54px;
  margin: 10px 0 14px;
  padding: 0 8px;
  border: 1px solid #E7EDF8;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.records-page .records-tabs button {
  position: relative;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3A4A66;
  font-size: 14px;
  font-weight: 800;
}

body.records-page .records-tabs button.active {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #2F7BFF;
}

body.records-page .records-tabs button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: #2F7BFF;
  transform: translateX(-50%);
}

body.records-page .records-main {
  display: grid;
  gap: 14px;
  padding: 0;
}

body.records-page .records-list {
  display: grid;
  gap: 12px;
}

body.records-page .record-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid #E7EDF8;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
  text-align: left;
}

body.records-page .record-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #2F7BFF;
  background: #EAF2FF;
}

body.records-page .record-icon.recharge {
  color: #18A874;
  background: #E7F8EF;
}

body.records-page .record-icon.withdraw {
  color: #FF3B6B;
  background: #FFEAF0;
}

body.records-page .record-icon.game {
  color: #2F7BFF;
  background: #EAF2FF;
}

body.records-page .record-icon.reward {
  color: #7C5CFF;
  background: #F1ECFF;
}

body.records-page .record-icon.rebate {
  color: #FF9F43;
  background: #FFF3E6;
}

body.records-page .record-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.records-page .record-icon.payment {
  overflow: hidden;
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 35, 80, 0.1);
}

body.records-page .record-icon.payment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.records-page .record-icon.provider {
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 35, 80, 0.1);
}

body.records-page .record-icon.provider svg.record-provider-avatar {
  display: block;
  width: 100%;
  height: 100%;
  fill: initial;
  stroke: none;
}

body.records-page .record-icon.provider svg.record-provider-avatar text {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body.records-page .record-main,
body.records-page .record-side {
  display: grid;
  min-width: 0;
}

body.records-page .record-title {
  overflow: hidden;
  color: #1F2A44;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.records-page .record-time {
  margin-top: 5px;
  color: #6B7890;
  font-size: 13px;
  line-height: 1.2;
}

body.records-page .record-side {
  justify-items: end;
  text-align: right;
}

body.records-page .record-amount {
  color: #1F2A44;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

body.records-page .record-amount.income {
  color: #18A874;
}

body.records-page .record-amount.expense {
  color: #FF4D4F;
}

body.records-page .record-amount.pending {
  color: #FF9F43;
}

body.records-page .record-status {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

body.records-page .record-card.game .record-side {
  min-width: 138px;
}

body.records-page .record-card.game,
body.records-page .record-card.reward {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

body.records-page .record-card.game .record-status {
  white-space: nowrap;
}

body.records-page .record-status.success,
body.records-page .record-result-card em.success {
  color: #18A874;
}

body.records-page .record-status.pending,
body.records-page .record-result-card em.pending {
  color: #FF9F43;
}

body.records-page .record-status.failed,
body.records-page .record-result-card em.failed {
  color: #FF4D4F;
}

body.records-page .record-arrow {
  color: #AAB3C5;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

body.records-page .records-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 70px 16px;
  color: #8B95A7;
  text-align: center;
}

body.records-page .records-empty-state span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #AAB3C5;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.records-page .records-empty-state svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body.records-page .records-empty-state strong {
  font-size: 15px;
  font-weight: 800;
}

body.records-page .record-detail-view {
  display: grid;
  gap: 14px;
}

body.records-page .record-result-card,
body.records-page .record-detail-card {
  border: 1px solid #E7EDF8;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.records-page .record-result-card {
  display: grid;
  justify-items: center;
  padding: 28px 16px;
  border-radius: 18px;
  text-align: center;
}

body.records-page .record-icon.large {
  width: 64px;
  height: 64px;
}

body.records-page .record-icon.large svg {
  width: 34px;
  height: 34px;
}

body.records-page .record-result-card h2 {
  margin: 14px 0 8px;
  color: #1F2A44;
  font-size: 18px;
  font-weight: 900;
}

body.records-page .record-result-amount {
  color: #1F2A44;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}

body.records-page .record-result-amount.income {
  color: #18A874;
}

body.records-page .record-result-amount.expense {
  color: #FF4D4F;
}

body.records-page .record-result-card em {
  margin-top: 8px;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
}

body.records-page .record-detail-card {
  padding: 16px;
  border-radius: 16px;
}

body.records-page .record-detail-card h2 {
  margin: 0 0 6px;
  color: #1F2A44;
  font-size: 17px;
  font-weight: 900;
}

body.records-page .detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF2F8;
}

body.records-page .detail-row:last-child {
  border-bottom: 0;
}

body.records-page .detail-label {
  flex: 0 0 auto;
  color: #6B7890;
  font-size: 14px;
}

body.records-page .detail-value {
  color: #1F2A44;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

body.records-page .detail-value button {
  width: 26px;
  height: 26px;
  margin-left: 6px;
  border: 0;
  border-radius: 8px;
  background: #EAF2FF;
  color: #2F7BFF;
  font-size: 12px;
  font-weight: 900;
}

body.records-page .record-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 4px;
}

body.records-page .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
}

body.records-page .timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 1px;
  background: #E7EDF8;
}

body.records-page .timeline-item:first-child::before {
  top: 16px;
}

body.records-page .timeline-item:last-child::before {
  bottom: calc(100% - 16px);
}

body.records-page .timeline-item i {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border: 3px solid #FFFFFF;
  border-radius: 999px;
  background: #2F7BFF;
  box-shadow: 0 0 0 1px #DCE5F5;
}

body.records-page .timeline-item.pending i {
  background: #FF9F43;
}

body.records-page .timeline-item.failed i {
  background: #FF4D4F;
}

body.records-page .timeline-item strong {
  display: block;
  color: #1F2A44;
  font-size: 14px;
  font-weight: 800;
}

body.records-page .timeline-item span,
body.records-page .timeline-item p {
  display: block;
  margin: 4px 0 0;
  color: #6B7890;
  font-size: 13px;
  line-height: 1.35;
}

body.records-page .record-detail-actions {
  display: grid;
  gap: 10px;
  padding-bottom: 6px;
}

body.records-page .record-detail-actions button,
body.records-page .records-filter-actions button {
  height: 52px;
  border: 1px solid #DCE5F5;
  border-radius: 14px;
  background: #FFFFFF;
  color: #1F2A44;
  font-size: 16px;
  font-weight: 900;
}

body.records-page .record-detail-actions button.primary,
body.records-page .records-filter-actions button.primary {
  border: 0;
  background: linear-gradient(180deg, #3B86FF, #176BFF);
  color: #FFFFFF;
}

body.records-page .records-filter-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(31, 42, 68, 0.28);
}

body.records-page .records-filter-sheet {
  position: fixed;
  right: max(0px, calc((100vw - 614px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 614px) / 2));
  z-index: 41;
  display: grid;
  gap: 18px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #FFFFFF;
  box-shadow: 0 -16px 36px rgba(15, 35, 80, 0.12);
}

body.records-page .records-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.records-page .records-filter-head h2,
body.records-page .records-filter-group h3 {
  margin: 0;
  color: #1F2A44;
  font-size: 18px;
  font-weight: 900;
}

body.records-page .records-filter-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #EEF2F8;
  color: #3A4A66;
  font-size: 22px;
  line-height: 1;
}

body.records-page .records-filter-group {
  display: grid;
  gap: 10px;
}

body.records-page .records-filter-group h3 {
  font-size: 15px;
}

body.records-page .records-filter-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

body.records-page .records-filter-options button {
  min-height: 40px;
  border: 1px solid #DCE5F5;
  border-radius: 12px;
  background: #FFFFFF;
  color: #3A4A66;
  font-size: 14px;
  font-weight: 800;
}

body.records-page .records-filter-options button.active {
  border-color: #2F7BFF;
  background: #EAF2FF;
  color: #2F7BFF;
}

body.records-page .records-filter-dates {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

body.records-page .records-filter-dates.show {
  display: grid;
}

body.records-page .records-filter-dates label {
  display: grid;
  gap: 6px;
  color: #6B7890;
  font-size: 12px;
  font-weight: 800;
}

body.records-page .records-filter-dates input {
  height: 42px;
  min-width: 0;
  border: 1px solid #DCE5F5;
  border-radius: 12px;
  background: #FFFFFF;
  color: #1F2A44;
  padding: 0 10px;
  font-size: 13px;
}

body.records-page .records-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 430px) {
  body.records-page .records-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.records-page .records-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    margin-right: -14px;
    margin-left: -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  body.records-page .records-topbar h1 {
    font-size: 26px;
  }

  body.records-page .record-card {
    grid-template-columns: 46px minmax(0, 1fr) 14px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 13px 14px;
  }

  body.records-page .record-icon {
    grid-row: 1 / 3;
  }

  body.records-page .record-main {
    grid-column: 2;
    grid-row: 1;
  }

  body.records-page .record-title {
    font-size: 16px;
  }

  body.records-page .record-amount {
    max-width: 100%;
    font-size: clamp(12px, 3.8vw, 16px);
    white-space: nowrap;
  }

  body.records-page .record-time,
  body.records-page .record-status {
    font-size: 12px;
  }

  body.records-page .record-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.records-page .record-side {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body.records-page .record-status {
    max-width: 100%;
    line-height: 1.25;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.records-page .record-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  body.records-page .record-card.game .record-side {
    min-width: 124px;
  }
}

body.first-recharge-page {
  min-height: 100vh;
  margin: 0;
  background: #f5f7fb;
  color: #102b62;
}

.first-recharge-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 85% 8%, rgba(245, 214, 123, 0.28), transparent 28%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3fb 100%);
}

.first-recharge-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8edf5;
  backdrop-filter: blur(18px);
}

.first-recharge-topbar h1 {
  margin: 0;
  color: #102b62;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.first-recharge-topbar button {
  min-height: 40px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #ffffff;
  color: #102b62;
  font-weight: 800;
}

.first-recharge-topbar button:first-child {
  width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}

.first-recharge-topbar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-recharge-main {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.first-hero-card,
.first-task-card {
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16, 43, 98, 0.08);
}

.first-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 8px;
  padding: 18px;
}

.first-hero-card span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #163a70, #2455a6);
  font-size: 13px;
  font-weight: 900;
}

.first-hero-card h2 {
  margin: 12px 0 10px;
  color: #102b62;
  font-size: 20px;
}

.first-hero-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #7b8494;
  font-size: 13px;
  line-height: 1.45;
}

.first-gift-art {
  position: relative;
  min-height: 168px;
}

.first-gift-art .vip-card {
  position: absolute;
  top: 8px;
  right: 0;
  width: 96px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, #163a70, #2455a6);
  color: #f5d67b;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 16px 28px rgba(36, 85, 166, 0.22);
  transform: rotate(5deg);
}

.first-gift-art .gift-box {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 92px;
  height: 76px;
  border-radius: 18px 18px 14px 14px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(245, 214, 123, 0.95) 42% 58%, transparent 58%),
    linear-gradient(135deg, #163a70, #2455a6);
  box-shadow: 0 18px 30px rgba(36, 85, 166, 0.22);
}

.first-gift-art .gift-box::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -16px;
  height: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.first-gift-art i {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.25);
}

.first-gift-art i:nth-of-type(1) { right: 100px; bottom: 18px; }
.first-gift-art i:nth-of-type(2) { right: 86px; bottom: 48px; width: 18px; height: 18px; }
.first-gift-art i:nth-of-type(3) { right: 4px; bottom: 94px; width: 16px; height: 16px; }

.first-task-card {
  padding: 18px;
}

.first-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.first-section-head h2,
.first-section-head p {
  margin: 0;
}

.first-section-head h2 {
  color: #102b62;
  font-size: 20px;
  font-weight: 950;
}

.first-section-head p {
  margin-top: 4px;
  color: #7b8494;
  font-size: 13px;
}

.first-section-head > span {
  align-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  color: #102b62;
  background: rgba(212, 175, 55, 0.14);
  font-size: 12px;
  font-weight: 900;
}

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

.first-task-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #fbfdff;
}

.first-task-item.active {
  border-color: rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.first-task-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: visible;
  background:
    linear-gradient(90deg, transparent 42%, #f5d67b 42% 58%, transparent 58%),
    linear-gradient(135deg, #163a70, #2455a6);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    0 8px 16px rgba(16, 43, 98, 0.14);
}

.first-task-icon::before,
.first-task-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.first-task-icon::before {
  left: -3px;
  right: -3px;
  top: 7px;
  height: 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 42%, #fff0a8 42% 58%, transparent 58%),
    linear-gradient(135deg, #f5d67b, #d4af37);
  box-shadow: 0 2px 5px rgba(16, 43, 98, 0.1);
}

.first-task-icon::after {
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 7px;
  border-radius: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff3ba, #d4af37);
  box-shadow: -13px -7px 0 -9px #f5d67b, 13px -7px 0 -9px #f5d67b;
}

.first-task-item:nth-child(2) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #2f7bff 42% 58%, transparent 58%),
    linear-gradient(135deg, #f8fbff, #b7c6dc 48%, #72849f);
}

.first-task-item:nth-child(2) .first-task-icon::before {
  background:
    linear-gradient(90deg, transparent 0 42%, #2f7bff 42% 58%, transparent 58%),
    linear-gradient(135deg, #ffffff, #d9e3ef);
}

.first-task-item:nth-child(2) .first-task-icon::after {
  background: linear-gradient(180deg, #69adff, #2f7bff);
  box-shadow: -12px -7px 0 -9px #2f7bff, 12px -7px 0 -9px #2f7bff;
}

.first-task-item:nth-child(3) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #fff2b8 42% 58%, transparent 58%),
    linear-gradient(135deg, #ffe69a, #f6c453 48%, #c78919);
}

.first-task-item:nth-child(3) .first-task-icon::before {
  background:
    linear-gradient(90deg, transparent 0 42%, #fff2b8 42% 58%, transparent 58%),
    linear-gradient(135deg, #fff5c8, #f6c453);
}

.first-task-item:nth-child(3) .first-task-icon::after {
  background: linear-gradient(180deg, #fff9d8, #d4a72c);
}

.first-task-item:nth-child(4) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #f6c453 42% 58%, transparent 58%),
    linear-gradient(135deg, #b79cff, #8b5cf6 50%, #5137b8);
}

.first-task-item:nth-child(4) .first-task-icon::before {
  background:
    linear-gradient(90deg, transparent 0 42%, #f6c453 42% 58%, transparent 58%),
    linear-gradient(135deg, #c8b6ff, #8b5cf6);
}

.first-task-item:nth-child(5) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #ffe2a6 42% 58%, transparent 58%),
    linear-gradient(135deg, #ffc46f, #ff9f43 48%, #d56c17);
}

.first-task-item:nth-child(5) .first-task-icon::after {
  right: -5px;
  left: auto;
  top: -4px;
  bottom: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  transform: none;
  background: linear-gradient(135deg, #fff2b8, #f6c453);
  box-shadow: 0 8px 12px rgba(212, 167, 44, 0.22);
}

.first-task-item:nth-child(6) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #fff2b8 42% 58%, transparent 58%),
    linear-gradient(135deg, #ff9b9b, #ff5b5b 48%, #c8273f);
}

.first-task-item:nth-child(6) .first-task-icon::after {
  left: -6px;
  top: 12px;
  bottom: auto;
  width: 58px;
  height: 14px;
  border-radius: 999px;
  transform: none;
  background:
    radial-gradient(circle at 18% 50%, #fff3ba 0 34%, transparent 36%),
    radial-gradient(circle at 82% 50%, #fff3ba 0 34%, transparent 36%);
  box-shadow: none;
}

.first-task-item:nth-child(7) .first-task-icon {
  background:
    linear-gradient(90deg, transparent 42%, #fff2b8 42% 58%, transparent 58%),
    linear-gradient(135deg, #ff5b5b, #f6c453 48%, #0e3b8f);
}

.first-task-item:nth-child(7) .first-task-icon::before {
  top: -3px;
  left: 7px;
  right: 7px;
  height: 18px;
  border-radius: 5px 5px 8px 8px;
  clip-path: polygon(0 100%, 0 38%, 20% 68%, 38% 18%, 50% 66%, 62% 18%, 80% 68%, 100% 38%, 100% 100%);
  background: linear-gradient(135deg, #fff1a6, #f6c453);
}

.first-task-item:nth-child(7) .first-task-icon::after {
  background: linear-gradient(180deg, #fff8d1, #f6c453);
}

.first-task-copy h3,
.first-task-copy p {
  margin: 0;
}

.first-task-copy h3 {
  color: #102b62;
  font-size: 14px;
  font-weight: 900;
}

.first-task-copy strong {
  display: block;
  margin-top: 4px;
  color: #d4af37;
  font-size: 16px;
  font-weight: 950;
}

.first-progress {
  height: 7px;
  margin: 9px 0 6px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
}

.first-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #163a70, #2455a6 56%, #d4af37);
}

.first-task-copy p {
  color: #7b8494;
  font-size: 12px;
}

.first-task-item button,
.first-recharge-actions button {
  border: 0;
  border-radius: 14px;
  font-weight: 950;
}

.first-task-item button {
  min-width: 78px;
  min-height: 38px;
  padding: 0 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.first-task-item button.claim {
  color: #102b62;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.first-task-item button:disabled {
  color: #7b8494;
  background: #edf1f6;
}

.first-loading {
  margin: 0;
  padding: 24px;
  color: #7b8494;
  text-align: center;
}

.first-recharge-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 520px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 12px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #e8edf5;
  backdrop-filter: blur(16px);
}

.first-recharge-actions button {
  min-height: 48px;
  font-size: 15px;
}

.first-recharge-actions button:first-child {
  border: 1px solid #102b62;
  color: #102b62;
  background: #ffffff;
}

.first-recharge-actions button:last-child {
  color: #102b62;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.first-recharge-actions button:disabled {
  color: #9aa3b3;
  background: #e5e9f0;
}

@media (max-width: 430px) {
  .first-hero-card {
    grid-template-columns: 1fr;
  }

  .first-gift-art {
    min-height: 126px;
  }

  .first-task-item {
    grid-template-columns: 42px 1fr;
  }

  .first-task-item button {
    grid-column: 2;
    justify-self: start;
  }
}

.promo-offer-card[data-promo-offer="new-user-deposit"] {
  cursor: pointer;
}

.first-recharge-shell {
  width: min(100%, 614px);
}

.first-recharge-topbar {
  min-height: 54px;
  padding: 7px 12px;
}

.first-recharge-main {
  gap: 10px;
  padding: 10px 12px;
}

.first-hero-card {
  grid-template-columns: 1fr 96px;
  padding: 12px;
  border-radius: 14px;
}

.first-hero-card span {
  min-height: 24px;
  padding: 0 10px;
  font-size: 12px;
}

.first-hero-card h2 {
  margin: 8px 0 6px;
  font-size: 17px;
}

.first-hero-card ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.3;
}

.first-gift-art {
  min-height: 106px;
}

.first-gift-art .vip-card {
  width: 76px;
  height: 44px;
  border-radius: 12px;
  font-size: 11px;
}

.first-gift-art .gift-box {
  right: 8px;
  bottom: 6px;
  width: 70px;
  height: 56px;
  border-radius: 14px 14px 12px 12px;
}

.first-gift-art .gift-box::before {
  top: -12px;
  height: 17px;
}

.first-gift-art i {
  width: 16px;
  height: 16px;
}

.first-task-card {
  padding: 12px;
  border-radius: 14px;
}

.first-section-head {
  margin-bottom: 9px;
}

.first-section-head h2 {
  font-size: 17px;
}

.first-section-head p,
.first-section-head > span {
  font-size: 11px;
}

.first-task-list {
  gap: 7px;
}

.first-task-item {
  grid-template-columns: 34px 1fr 70px;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 13px;
}

.first-task-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.first-task-copy h3 {
  font-size: 12px;
}

.first-task-copy strong {
  margin-top: 2px;
  font-size: 13px;
}

.first-progress {
  height: 4px;
  margin: 5px 0 4px;
}

.first-task-copy p {
  font-size: 10px;
}

.first-task-item button {
  min-width: 68px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
}

.first-recharge-actions {
  width: min(100%, 614px);
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
}

.first-recharge-actions button {
  min-height: 42px;
}

@media (max-width: 430px) {
  .first-recharge-topbar {
    grid-template-columns: 40px 1fr auto;
  }

  .first-recharge-topbar h1 {
    font-size: 16px;
  }

  .first-recharge-topbar button:last-child {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .first-hero-card {
    grid-template-columns: 1fr;
  }

  .first-hero-card ol {
    grid-template-columns: 1fr;
  }

  .first-gift-art {
    display: none;
  }

  .first-task-item {
    grid-template-columns: 30px 1fr 66px;
    gap: 7px;
    padding: 7px 8px;
  }

  .first-task-icon {
    width: 30px;
    height: 30px;
  }

  .first-task-item button {
    grid-column: auto;
    justify-self: end;
    min-width: 62px;
    min-height: 29px;
    font-size: 11px;
  }
}

body.loss-rescue-page {
  min-height: 100vh;
  margin: 0;
  background: #f5f7fb;
  color: #102b62;
}

.loss-rescue-shell {
  width: min(100%, 614px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 85% 8%, rgba(245, 214, 123, 0.24), transparent 28%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3fb 100%);
}

.loss-rescue-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8edf5;
  backdrop-filter: blur(18px);
}

.loss-rescue-topbar h1 {
  margin: 0;
  color: #102b62;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.loss-rescue-topbar button {
  min-height: 40px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #ffffff;
  color: #102b62;
  font-weight: 800;
}

.loss-rescue-topbar button:first-child {
  width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}

.loss-rescue-topbar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loss-rescue-main {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
}

.loss-data-card,
.loss-hero-card,
.loss-task-card {
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16, 43, 98, 0.08);
}

.loss-data-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.loss-data-card article {
  display: grid;
  gap: 4px;
}

.loss-data-card span {
  color: #7b8494;
  font-size: 12px;
}

.loss-data-card strong {
  color: #d4af37;
  font-size: 18px;
  font-weight: 950;
}

.loss-data-card article:first-child strong {
  color: #d95454;
}

.loss-data-card button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #163a70, #2455a6);
  color: #ffffff;
  font-weight: 900;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.loss-data-card button.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  animation: lossRefreshSpin 0.75s linear infinite;
}

@keyframes lossRefreshSpin {
  to { transform: rotate(360deg); }
}

.loss-hero-card {
  padding: 12px;
}

.loss-hero-card > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #163a70, #2455a6);
  font-size: 12px;
  font-weight: 900;
}

.loss-hero-card ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 9px 0 0;
  padding-left: 16px;
  color: #7b8494;
  font-size: 11px;
  line-height: 1.3;
}

.loss-task-card {
  padding: 12px;
}

.loss-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.loss-section-head h2,
.loss-section-head p {
  margin: 0;
}

.loss-section-head h2 {
  color: #102b62;
  font-size: 17px;
  font-weight: 950;
}

.loss-section-head p,
.loss-section-head > span {
  color: #7b8494;
  font-size: 11px;
}

.loss-section-head > span {
  align-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  color: #102b62;
  background: rgba(212, 175, 55, 0.14);
  font-weight: 900;
}

.loss-task-list {
  display: grid;
  gap: 7px;
}

.loss-task-item {
  display: grid;
  grid-template-columns: 34px 1fr 70px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e8edf5;
  border-radius: 13px;
  background: #fbfdff;
}

.loss-task-item.active {
  border-color: rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.loss-task-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #163a70, #2455a6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
}

.loss-task-icon::before {
  content: "";
  position: absolute;
  inset: 8px 10px 7px;
  border-radius: 10px 10px 12px 12px;
  border: 2px solid #f5d67b;
  border-top-width: 4px;
}

.loss-task-icon::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.loss-task-copy h3,
.loss-task-copy p {
  margin: 0;
}

.loss-task-copy h3 {
  color: #102b62;
  font-size: 12px;
  font-weight: 900;
}

.loss-task-copy strong {
  display: block;
  margin-top: 2px;
  color: #d4af37;
  font-size: 13px;
  font-weight: 950;
}

.loss-progress {
  height: 4px;
  margin: 5px 0 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.loss-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #163a70, #3b82f6);
}

.loss-task-copy p {
  color: #7b8494;
  font-size: 10px;
}

.loss-task-item button,
.loss-rescue-actions button {
  border: 0;
  border-radius: 14px;
  font-weight: 950;
}

.loss-task-item button {
  min-width: 68px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  color: #7b8494;
  background: #edf1f6;
  font-size: 12px;
}

.loss-task-item button.claim {
  color: #102b62;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.loss-loading {
  margin: 0;
  padding: 24px;
  color: #7b8494;
  text-align: center;
}

.loss-rescue-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 614px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 12px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #e8edf5;
  backdrop-filter: blur(16px);
}

.loss-rescue-actions button {
  min-height: 42px;
  font-size: 15px;
}

.loss-rescue-actions button:first-child {
  border: 1px solid #102b62;
  color: #102b62;
  background: #ffffff;
}

.loss-rescue-actions button:last-child {
  color: #102b62;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.loss-rescue-actions button:disabled {
  color: #9aa3b3;
  background: #e5e9f0;
}

body.first-recharge-page .activity-rules-card,
body.loss-rescue-page .activity-rules-card {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
}

body.first-recharge-page .activity-rule-block,
body.loss-rescue-page .activity-rule-block {
  overflow: hidden;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16, 43, 98, 0.08);
}

body.first-recharge-page .activity-rule-title,
body.loss-rescue-page .activity-rule-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 0 0;
  padding: 0 34px 0 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #174ea6);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

body.first-recharge-page .activity-rule-title::after,
body.loss-rescue-page .activity-rule-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -22px;
  width: 22px;
  height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

body.first-recharge-page .activity-rule-list,
body.loss-rescue-page .activity-rule-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px 16px 16px 34px;
  color: #687385;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

body.first-recharge-page .activity-rule-list li,
body.loss-rescue-page .activity-rule-list li {
  padding-left: 2px;
}

body.first-recharge-page .activity-rule-title,
body.loss-rescue-page .activity-rule-title {
  min-height: 32px;
  padding: 0 30px 0 14px;
  font-size: 14px;
}

body.first-recharge-page .activity-rule-title::after,
body.loss-rescue-page .activity-rule-title::after {
  right: -18px;
  width: 18px;
}

@media (max-width: 430px) {
  .loss-rescue-topbar {
    grid-template-columns: 40px 1fr auto;
  }

  .loss-rescue-topbar h1 {
    font-size: 16px;
  }

  .loss-rescue-topbar button:last-child {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .loss-data-card {
    grid-template-columns: 1fr 1fr;
  }

  .loss-data-card button {
    grid-column: 1 / -1;
  }

  .loss-hero-card ol {
    grid-template-columns: 1fr;
  }

  .loss-task-item {
    grid-template-columns: 30px 1fr 66px;
    gap: 7px;
    padding: 7px 8px;
  }

  .loss-task-icon {
    width: 30px;
    height: 30px;
  }

  .loss-task-item button {
    min-width: 62px;
    min-height: 29px;
    font-size: 11px;
  }
}

body.vip-gift-page {
  min-height: 100vh;
  margin: 0;
  background: #f4f7fc;
  color: #102b62;
}

.vip-gift-shell {
  width: min(100%, 614px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 82% 9%, rgba(245, 214, 123, 0.25), transparent 28%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3fb 100%);
}

.vip-gift-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8edf5;
  backdrop-filter: blur(18px);
}

.vip-gift-topbar h1 {
  margin: 0;
  color: #102b62;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}

.vip-gift-topbar button {
  min-height: 40px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #ffffff;
  color: #102b62;
  font-weight: 850;
}

.vip-gift-topbar button:first-child {
  width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}

.vip-gift-topbar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vip-gift-main {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
}

.vip-gift-banner,
.vip-progress-card,
.vip-list-card,
.vip-rule-card {
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16, 43, 98, 0.08);
}

.vip-gift-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 150px;
  gap: 10px;
  min-height: 168px;
  padding: 18px 16px;
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 18%, rgba(245, 214, 123, 0.35), transparent 25%),
    linear-gradient(135deg, #163a70 0%, #2455a6 100%);
}

.vip-gift-banner::before {
  content: "";
  position: absolute;
  inset: -40px -50px auto auto;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  border: 1px solid rgba(245, 214, 123, 0.22);
  box-shadow: 0 0 0 22px rgba(245, 214, 123, 0.05), 0 0 0 44px rgba(255, 255, 255, 0.04);
}

.vip-banner-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
}

.vip-banner-copy span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.vip-banner-copy h2,
.vip-banner-copy p {
  margin: 0;
}

.vip-banner-copy h2 {
  font-size: 25px;
  font-weight: 950;
}

.vip-banner-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.vip-banner-copy strong {
  color: #f5d67b;
  font-size: 15px;
  font-weight: 950;
}

.vip-banner-copy button {
  min-height: 34px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: #102b62;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
  font-weight: 950;
}

.vip-banner-art {
  position: relative;
  z-index: 1;
  min-height: 132px;
}

.vip-shield {
  position: absolute;
  right: 22px;
  top: 26px;
  width: 78px;
  height: 88px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 14%, 86% 68%, 50% 100%, 14% 68%, 8% 14%);
  color: #102b62;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  font-size: 21px;
  font-weight: 950;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}

.vip-crown {
  position: absolute;
  right: 34px;
  top: 2px;
  width: 52px;
  height: 32px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
  clip-path: polygon(0 76%, 10% 28%, 33% 62%, 50% 8%, 67% 62%, 90% 28%, 100% 76%, 100% 100%, 0 100%);
}

.vip-gift-box {
  position: absolute;
  right: 84px;
  bottom: 8px;
  width: 54px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #dce9ff);
  box-shadow: inset 0 0 0 2px rgba(245, 214, 123, 0.55);
}

.vip-gift-box::before,
.vip-gift-box::after {
  content: "";
  position: absolute;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
}

.vip-gift-box::before {
  left: 23px;
  top: 0;
  width: 8px;
  height: 44px;
}

.vip-gift-box::after {
  left: 0;
  top: 15px;
  width: 54px;
  height: 8px;
}

.vip-banner-art i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d67b, #d4af37);
}

.vip-banner-art i:nth-of-type(1) { right: 6px; bottom: 18px; }
.vip-banner-art i:nth-of-type(2) { right: 122px; top: 42px; }
.vip-banner-art i:nth-of-type(3) { right: 12px; top: 94px; }

.vip-progress-card,
.vip-list-card,
.vip-rule-card {
  padding: 12px;
}

.vip-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vip-progress-head div {
  display: grid;
  gap: 3px;
}

.vip-progress-head span,
.vip-progress-grid span,
.vip-detail-grid span {
  color: #7b8494;
  font-size: 11px;
}

.vip-progress-head strong {
  color: #102b62;
  font-size: 24px;
  font-weight: 950;
}

.vip-progress-head button,
.vip-level-actions button,
.vip-gift-actions button {
  border: 0;
  font-weight: 950;
}

.vip-progress-head button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 12px;
  color: #102b62;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
}

.vip-progress-head button:disabled {
  color: #9aa3b3;
  background: #e5e9f0;
}

.vip-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.vip-progress-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #f7faff;
  border: 1px solid #e8edf5;
}

.vip-progress-grid strong {
  color: #d4af37;
  font-size: 13px;
  font-weight: 950;
}

.vip-progress-grid b {
  color: #102b62;
}

.vip-progress-bar,
.vip-mini-progress {
  height: 7px;
  border-radius: 999px;
  background: #d9e2f0;
  overflow: hidden;
}

.vip-progress-bar {
  margin-top: 12px;
}

.vip-progress-bar span,
.vip-mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d4af37, #f5d67b);
}

.vip-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vip-section-head h2,
.vip-section-head p {
  margin: 0;
}

.vip-section-head h2 {
  color: #102b62;
  font-size: 17px;
  font-weight: 950;
}

.vip-section-head p,
.vip-section-head > span {
  color: #7b8494;
  font-size: 11px;
}

.vip-section-head > span {
  align-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  color: #102b62;
  background: rgba(212, 175, 55, 0.14);
  font-weight: 950;
}

.vip-level-list {
  display: grid;
  gap: 8px;
}

.vip-level-item {
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #fbfdff;
  overflow: hidden;
}

.vip-level-item.pending {
  border-color: rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.vip-level-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 64px 46px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: #102b62;
  text-align: left;
}

.vip-level-summary span {
  font-size: 17px;
  font-weight: 950;
}

.vip-level-summary strong {
  color: #d4af37;
  font-size: 13px;
  font-weight: 950;
}

.vip-level-summary em {
  justify-self: end;
  color: #7b8494;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.vip-level-summary i {
  justify-self: end;
  color: #2455a6;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.vip-level-detail {
  display: none;
  padding: 0 11px 12px;
}

.vip-level-item.open .vip-level-detail {
  display: grid;
  gap: 10px;
}

.vip-mini-progress {
  height: 5px;
}

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

.vip-detail-grid article {
  min-width: 0;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid #e8edf5;
  background: #ffffff;
}

.vip-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #d4af37;
  font-size: 13px;
  font-weight: 950;
}

.vip-detail-grid p {
  margin: 4px 0 0;
  color: #7b8494;
  font-size: 10px;
  line-height: 1.35;
}

.vip-level-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.vip-level-actions button {
  min-height: 34px;
  border-radius: 12px;
  color: #102b62;
  background: #e5e9f0;
}

.vip-level-actions button.claim,
.vip-level-actions button:nth-child(1):not(:disabled) {
  color: #102b62;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
}

.vip-level-actions button:nth-child(2) {
  color: #ffffff;
  background: linear-gradient(135deg, #163a70, #2455a6);
}

.vip-level-actions button:nth-child(3) {
  border: 1px solid #2455a6;
  color: #163a70;
  background: #ffffff;
}

.vip-rule-card > span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #163a70, #2455a6);
  font-size: 12px;
  font-weight: 950;
}

.vip-rule-card ol {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding-left: 17px;
  color: #7b8494;
  font-size: 11px;
  line-height: 1.42;
}

.vip-loading {
  margin: 0;
  padding: 24px;
  color: #7b8494;
  text-align: center;
}

.vip-gift-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 614px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 12px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #e8edf5;
  backdrop-filter: blur(16px);
}

.vip-gift-actions button {
  min-height: 42px;
  border-radius: 14px;
  font-size: 15px;
}

.vip-gift-actions button:first-child {
  border: 1px solid #102b62;
  color: #102b62;
  background: #ffffff;
}

.vip-gift-actions button:last-child {
  color: #102b62;
  background: linear-gradient(135deg, #d4af37, #f5d67b);
}

.vip-gift-actions button:disabled {
  color: #9aa3b3;
  background: #e5e9f0;
}

@media (max-width: 430px) {
  .vip-gift-topbar {
    grid-template-columns: 40px 1fr auto;
  }

  .vip-gift-topbar h1 {
    font-size: 16px;
  }

  .vip-gift-topbar button:last-child {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .vip-gift-banner {
    grid-template-columns: 1fr 112px;
    min-height: 150px;
    padding: 15px 13px;
  }

  .vip-banner-copy h2 {
    font-size: 22px;
  }

  .vip-banner-copy strong {
    font-size: 13px;
  }

  .vip-shield {
    right: 10px;
    top: 28px;
    width: 68px;
    height: 76px;
  }

  .vip-crown {
    right: 20px;
  }

  .vip-gift-box {
    right: 58px;
    width: 46px;
  }

  .vip-progress-grid {
    grid-template-columns: 1fr;
  }

  .vip-level-summary {
    grid-template-columns: 52px 1fr 50px 38px;
    gap: 6px;
    padding: 0 9px;
  }

  .vip-level-summary strong {
    font-size: 12px;
  }

  .vip-detail-grid {
    grid-template-columns: 1fr;
  }

  .vip-level-actions {
    grid-template-columns: 1fr;
  }
}

/* VIP gift royal blue-gold UI refresh. Scoped to the VIP gift page only. */
body.vip-gift-page {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  color: #0f2e66;
}

body.vip-gift-page .vip-gift-shell {
  background:
    radial-gradient(circle at 84% 8%, rgba(250, 204, 21, 0.18), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

body.vip-gift-page .vip-gift-topbar {
  min-height: 58px;
  border-bottom-color: #dbeafe;
  box-shadow: 0 6px 18px rgba(15, 46, 102, 0.05);
}

body.vip-gift-page .vip-gift-topbar h1 {
  color: #0f2e66;
  font-size: 20px;
  letter-spacing: 0;
}

body.vip-gift-page .vip-gift-topbar button {
  border-color: #bfdbfe;
  color: #0f2e66;
}

body.vip-gift-page .vip-gift-main {
  gap: 12px;
  padding: 12px;
}

body.vip-gift-page .vip-gift-banner {
  min-height: 176px;
  margin: 0;
  padding: 21px 20px;
  border: 1px solid rgba(191, 219, 254, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 77% 36%, rgba(255, 213, 79, 0.36), transparent 27%),
    radial-gradient(circle at 56% 18%, rgba(255, 255, 255, 0.22), transparent 18%),
    linear-gradient(135deg, #073b95 0%, #0b55d9 55%, #082b78 100%);
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.22);
}

body.vip-gift-page .vip-gift-banner::before {
  inset: auto -46px -70px auto;
  width: 260px;
  height: 260px;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 24px rgba(255, 255, 255, 0.05),
    0 0 0 50px rgba(250, 204, 21, 0.06);
}

body.vip-gift-page .vip-gift-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 74%, rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(-18deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 11px);
}

body.vip-gift-page .vip-banner-copy {
  gap: 8px;
}

body.vip-gift-page .vip-banner-copy span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 0.08em;
}

body.vip-gift-page .vip-banner-copy h2 {
  color: #ffffff;
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.06;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.24);
}

body.vip-gift-page .vip-banner-copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 800;
}

body.vip-gift-page .vip-banner-copy strong {
  color: #ffd54f;
  font-size: 20px;
  font-weight: 950;
}

body.vip-gift-page .vip-banner-copy button {
  min-height: 42px;
  margin-top: 7px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7cc, #facc15);
  color: #0f2e66;
  font-size: 16px;
  box-shadow: 0 8px 16px rgba(217, 119, 6, 0.25);
}

body.vip-gift-page .vip-banner-art {
  min-height: 134px;
}

body.vip-gift-page .vip-shield {
  right: 18px;
  top: 28px;
  width: 92px;
  height: 102px;
  color: #ffd54f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(145deg, #0f2e66 0%, #1d4ed8 72%, #08255f 100%);
  border: 4px solid #facc15;
  font-size: 25px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.24);
}

body.vip-gift-page .vip-shield::before {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

body.vip-gift-page .vip-crown {
  right: 34px;
  top: 5px;
  width: 60px;
  height: 34px;
  background: linear-gradient(135deg, #fff7cc, #facc15 48%, #d97706);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.2));
}

body.vip-gift-page .vip-gift-box {
  right: 86px;
  bottom: 7px;
  width: 58px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #eaf2ff);
  box-shadow:
    inset 0 0 0 2px rgba(250, 204, 21, 0.66),
    0 12px 20px rgba(0, 0, 0, 0.18);
}

body.vip-gift-page .vip-banner-art i {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18);
}

body.vip-gift-page .vip-banner-art i::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.6);
}

body.vip-gift-page .vip-progress-card,
body.vip-gift-page .vip-list-card,
body.vip-gift-page .vip-benefit-card,
body.vip-gift-page .vip-task-card,
body.vip-gift-page .vip-rule-card {
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(15, 46, 102, 0.08);
}

body.vip-gift-page .vip-progress-card,
body.vip-gift-page .vip-list-card,
body.vip-gift-page .vip-benefit-card,
body.vip-gift-page .vip-task-card {
  padding: 16px;
}

body.vip-gift-page .vip-level-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.vip-gift-page .vip-current-left {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body.vip-gift-page .vip-current-left span,
body.vip-gift-page .vip-info-label {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.vip-gift-page .vip-badge,
body.vip-gift-page .vip-small-badge {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffd54f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(145deg, #2563eb, #0f2e66);
  border: 2px solid #ffd54f;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
  clip-path: polygon(50% 0, 92% 14%, 86% 70%, 50% 100%, 14% 70%, 8% 14%);
}

body.vip-gift-page .vip-badge {
  width: 60px;
  height: 66px;
  font-size: 18px;
}

body.vip-gift-page .vip-level-title {
  display: block;
  margin-top: 1px;
  color: #1d4ed8;
  font-size: 40px;
  line-height: 1;
  font-weight: 950;
}

body.vip-gift-page .vip-claim-btn {
  min-height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
}

body.vip-gift-page .vip-claim-btn:disabled {
  color: #64748b;
  background: #edf3ff;
  box-shadow: none;
}

body.vip-gift-page .vip-next-level {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 92px;
}

body.vip-gift-page .vip-next-level span,
body.vip-gift-page .vip-block-head span,
body.vip-gift-page .vip-task-row span,
body.vip-gift-page .vip-benefit-grid span,
body.vip-gift-page .vip-task-reward-row span,
body.vip-gift-page .vip-task-reward-row em {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

body.vip-gift-page .vip-next-level strong {
  color: #1d4ed8;
  font-size: 22px;
  font-weight: 950;
}

body.vip-gift-page .vip-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

body.vip-gift-page .vip-block-head h2 {
  margin: 0;
  color: #0f2e66;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 950;
}

body.vip-gift-page .vip-block-head span {
  flex: 0 0 auto;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eff6ff;
  color: #1d4ed8;
}

body.vip-gift-page .vip-upgrade-condition {
  margin-top: 16px;
  border-top: 1px solid #dbeafe;
  padding-top: 14px;
}

body.vip-gift-page .vip-task-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body.vip-gift-page .vip-task-row div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

body.vip-gift-page .vip-task-row strong,
body.vip-gift-page .vip-benefit-grid strong,
body.vip-gift-page .vip-task-reward-row strong {
  color: #1d4ed8;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 950;
}

body.vip-gift-page .vip-task-row em {
  flex: 0 0 auto;
  color: #0f2e66;
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
}

body.vip-gift-page .vip-upgrade-message {
  margin: 12px 0 0;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 11px 12px;
  background: #eff6ff;
  color: #0f2e66;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 850;
}

body.vip-gift-page .vip-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.vip-gift-page .vip-benefit-grid article {
  display: grid;
  min-width: 0;
  gap: 7px;
  border: 1px solid #dbeafe;
  border-radius: 15px;
  padding: 13px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

body.vip-gift-page .vip-benefit-grid em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

body.vip-gift-page .vip-task-list {
  display: grid;
  gap: 12px;
}

body.vip-gift-page .vip-task-progress {
  display: grid;
  gap: 10px;
  border: 1px solid #dbeafe;
  border-radius: 15px;
  padding: 13px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.vip-gift-page .vip-task-reward-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbeafe;
  border-radius: 15px;
  padding: 13px;
  background: #eff6ff;
}

body.vip-gift-page .vip-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

body.vip-gift-page .vip-info-box {
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

body.vip-gift-page .vip-info-label b {
  color: #1d4ed8;
}

body.vip-gift-page .vip-info-value {
  display: block;
  margin-top: 6px;
  color: #1d4ed8;
  font-size: 17px;
  line-height: 1.16;
  font-weight: 950;
}

body.vip-gift-page .vip-progress-bar {
  height: 9px;
  margin-top: 14px;
  background: #dbeafe;
}

body.vip-gift-page .vip-progress-bar span,
body.vip-gift-page .vip-mini-progress span {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

body.vip-gift-page .vip-progress-note {
  margin: 12px 0 0;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

body.vip-gift-page .vip-section-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

body.vip-gift-page .vip-section-head h2 {
  color: #0f2e66;
  font-size: 20px;
}

body.vip-gift-page .vip-section-head > span {
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  background: #eff6ff;
}

body.vip-gift-page .vip-level-list {
  gap: 10px;
}

body.vip-gift-page .vip-level-item {
  border-color: #dbeafe;
  border-radius: 15px;
  background: #ffffff;
}

body.vip-gift-page .vip-level-item.pending {
  border-color: rgba(250, 204, 21, 0.68);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf4 100%);
}

body.vip-gift-page .vip-level-summary {
  grid-template-columns: 58px minmax(0, 1fr) 54px auto;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px;
}

body.vip-gift-page .vip-small-badge {
  width: 48px;
  height: 52px;
  font-size: 13px;
  letter-spacing: -0.02em;
}

body.vip-gift-page .vip-level-summary strong {
  display: grid;
  gap: 3px;
  color: #b77900;
  font-size: 16px;
  line-height: 1.25;
}

body.vip-gift-page .vip-level-summary strong b {
  color: #0f2e66;
  font-size: 13px;
  font-weight: 850;
}

body.vip-gift-page .vip-level-summary em {
  color: #0f2e66;
  font-size: 13px;
}

body.vip-gift-page .vip-expand-btn {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  justify-content: center;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 7px 11px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

body.vip-gift-page .vip-expand-btn span {
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

body.vip-gift-page .vip-detail-grid article {
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.vip-gift-page .vip-detail-grid strong {
  color: #b77900;
}

body.vip-gift-page .vip-level-actions button.claim,
body.vip-gift-page .vip-level-actions button:nth-child(1):not(:disabled),
body.vip-gift-page .vip-gift-actions button:last-child {
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

body.vip-gift-page .vip-rule-card > span {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

@media (max-width: 430px) {
  body.vip-gift-page .vip-gift-topbar h1 {
    font-size: 18px;
  }

  body.vip-gift-page .vip-gift-banner {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 158px;
    padding: 17px 14px;
  }

  body.vip-gift-page .vip-banner-copy span {
    font-size: 10px;
  }

  body.vip-gift-page .vip-banner-copy h2 {
    font-size: 26px;
  }

  body.vip-gift-page .vip-banner-copy p {
    font-size: 13px;
  }

  body.vip-gift-page .vip-banner-copy strong {
    font-size: 14px;
  }

  body.vip-gift-page .vip-banner-copy button {
    min-height: 36px;
    padding: 0 17px;
    font-size: 14px;
  }

  body.vip-gift-page .vip-shield {
    right: 8px;
    top: 32px;
    width: 68px;
    height: 78px;
    font-size: 19px;
  }

  body.vip-gift-page .vip-crown {
    right: 19px;
    top: 11px;
    width: 50px;
    height: 28px;
  }

  body.vip-gift-page .vip-gift-box {
    right: 58px;
    bottom: 10px;
    width: 46px;
    height: 39px;
  }

  body.vip-gift-page .vip-level-title {
    font-size: 34px;
  }

  body.vip-gift-page .vip-badge {
    width: 54px;
    height: 60px;
    font-size: 16px;
  }

  body.vip-gift-page .vip-claim-btn {
    min-height: 40px;
    padding: 0 15px;
    font-size: 14px;
  }

  body.vip-gift-page .vip-info-grid {
    grid-template-columns: 1fr;
  }

  body.vip-gift-page .vip-benefit-grid {
    grid-template-columns: 1fr;
  }

  body.vip-gift-page .vip-task-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  body.vip-gift-page .vip-task-row strong,
  body.vip-gift-page .vip-benefit-grid strong,
  body.vip-gift-page .vip-task-reward-row strong {
    font-size: 20px;
  }

  body.vip-gift-page .vip-task-row em {
    font-size: 13px;
  }

  body.vip-gift-page .vip-level-summary {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 64px;
    padding: 8px 9px;
  }

  body.vip-gift-page .vip-small-badge {
    width: 44px;
    height: 48px;
    font-size: 12px;
  }

  body.vip-gift-page .vip-level-summary strong {
    font-size: 14px;
  }

  body.vip-gift-page .vip-level-summary em,
  body.vip-gift-page .vip-expand-btn {
    font-size: 12px;
  }

  body.vip-gift-page .vip-level-summary em {
    display: none;
  }
}

/* Profile page icon colors/shapes aligned to the reference image. */
body.profile-mode .profile-section-title h3::before {
  background: linear-gradient(135deg, #4f86ff 0%, #1f5ff0 100%) !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22) !important;
}

body.profile-mode .profile-assets-card .profile-section-title h3::before {
  border-radius: 50% !important;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%) !important;
}

body.profile-mode .profile-lux-card:nth-of-type(2) .profile-section-title h3::before {
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    0 5px 12px rgba(37, 99, 235, 0.22) !important;
}

body.profile-mode .profile-lux-card:nth-of-type(2) .profile-section-title h3::after {
  content: "";
  width: 12px;
  height: 2px;
  margin-left: -28px;
  margin-right: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.85), 0 10px 0 rgba(255, 255, 255, 0.85);
}

body.profile-mode .profile-invite-card .profile-section-title h3::before {
  border-radius: 50% 50% 38% 38% !important;
  box-shadow:
    -8px 7px 0 -2px #2563eb,
    8px 7px 0 -2px #2563eb,
    0 5px 12px rgba(37, 99, 235, 0.22) !important;
}

body.profile-mode .profile-lux-card:last-of-type .profile-section-title h3::before {
  border-radius: 4px !important;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,.32) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255,255,255,.32) 46% 54%, transparent 54%),
    linear-gradient(135deg, #5b8cff 0%, #1f63f1 100%) !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon {
  color: #ffd982 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 9px rgba(245, 198, 103, 0.28));
}

body.profile-mode .profile-mini-actions .profile-line-icon {
  color: #2563eb !important;
  background: linear-gradient(180deg, #eef4ff 0%, #dfe8ff 100%) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12) !important;
}

body.profile-mode .profile-record-grid .profile-line-icon,
body.profile-mode .profile-service-grid .profile-line-icon {
  background: transparent !important;
  box-shadow: none !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.rechargeRecords {
  color: #4f7df4 !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.withdrawRecords,
body.profile-mode .profile-service-grid .profile-line-icon.securityCenter {
  color: #22c55e !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.betRecords,
body.profile-mode .profile-service-grid .profile-line-icon.helpCenter {
  color: #f59e0b !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.reportRecords,
body.profile-mode .profile-service-grid .profile-line-icon.support {
  color: #8b5cf6 !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.promoRecords {
  color: #f4b23e !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.profileInfo {
  color: #2563eb !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.promoRecords::before {
  width: 25px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: currentColor !important;
}

body.profile-mode .profile-record-grid .profile-line-icon.promoRecords::after {
  width: 13px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.82) !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.helpCenter::before {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.helpCenter::after {
  content: "?" !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body.profile-mode .profile-line-icon.has-svg {
  display: inline-grid !important;
  place-items: center !important;
}

body.profile-mode .profile-line-icon.has-svg::before,
body.profile-mode .profile-line-icon.has-svg::after {
  display: none !important;
}

body.profile-mode .profile-line-icon.has-svg svg {
  width: 82%;
  height: 82%;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.08));
}

body.profile-mode .profile-mini-actions .profile-line-icon.has-svg,
body.profile-mode .profile-record-grid .profile-line-icon.has-svg,
body.profile-mode .profile-service-grid .profile-line-icon.has-svg {
  width: 26px !important;
  height: 26px !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon.recharge::before,
body.profile-mode .profile-quick-panel .profile-line-icon.withdraw::before {
  width: 23px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fff2bd 0%, #ffd268 100%) !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon.recharge::after {
  right: 3px !important;
  bottom: 5px !important;
  width: 7px !important;
  height: 7px !important;
  border: 2px solid #17305d !important;
  border-radius: 50% !important;
  background: #ffd268 !important;
}

body.profile-mode .profile-quick-panel .profile-line-icon.withdraw::after {
  right: 3px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid #17305d !important;
  border-radius: 50% !important;
  background: #ffd268 !important;
  box-shadow: inset 0 -2px 0 #17305d !important;
}

body.profile-mode .profile-line-icon.support::before {
  top: 3px !important;
  width: 23px !important;
  height: 17px !important;
  border: 3px solid currentColor !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
}

body.profile-mode .profile-line-icon.support::after {
  right: 2px !important;
  bottom: 3px !important;
  width: 6px !important;
  height: 12px !important;
  border: 3px solid currentColor !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 7px 0 !important;
  background: transparent !important;
  box-shadow: -20px -2px 0 -3px currentColor !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.profileInfo::before {
  top: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.profileInfo::after {
  bottom: 0 !important;
  width: 24px !important;
  height: 13px !important;
  border: 2px solid currentColor !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
}

body.profile-mode .profile-mini-actions .profile-line-icon.recharge::after {
  background: #eef4ff !important;
  border-color: currentColor !important;
}

/* ===== 简化版分类 / 我的 / 代理中心 ===== */
#homeView .category-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 16px 12px;
  scroll-snap-type: x proximity;
  background: transparent;
  border: 0;
}

#homeView .category-row::-webkit-scrollbar {
  display: none;
}

#homeView .category-row button {
  position: relative;
  flex: 0 0 72px;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 68px;
  padding: 6px 4px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #94a3b8;
  box-shadow: none;
  scroll-snap-align: start;
}

#homeView .category-row button::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: transparent;
}

#homeView .category-row button.active {
  color: #f4c542;
  background: rgba(244, 197, 66, 0.08);
}

#homeView .category-row button.active::after {
  background: #f4c542;
  box-shadow: 0 0 12px rgba(244, 197, 66, 0.55);
}

.category-icon-wrap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.category-icon-wrap img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

.category-label {
  font-size: 12px;
  font-weight: 800;
}

.profile-page {
  display: grid;
  gap: 12px;
  padding: 14px 14px 22px;
  background: #050505;
}

.profile-simple-user,
.profile-balance-card,
.profile-agent-card,
.profile-function-grid,
.profile-work-entry,
.profile-logout-simple {
  border: 1px solid rgba(244, 197, 66, 0.25);
  border-radius: 14px;
  background: #0b1630;
}

.profile-simple-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.profile-simple-main h2,
.profile-agent-head h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.profile-simple-main p,
.profile-agent-head p,
.profile-balance-card span,
.profile-agent-code small,
.profile-agent-stats span {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.profile-vip-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(244, 197, 66, 0.14);
  color: #f4c542;
  font-size: 12px;
  font-weight: 900;
}

.profile-balance-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.profile-balance-card strong {
  color: #f4c542;
  font-size: 30px;
  line-height: 1;
}

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

.profile-balance-actions button,
.profile-agent-actions button,
.profile-work-entry,
.profile-logout-simple {
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
}

.profile-balance-actions .gold,
.profile-agent-actions .primary {
  border: 0;
  background: linear-gradient(180deg, #ffe477, #f4c542);
  color: #111827;
  box-shadow: 0 10px 22px rgba(244, 197, 66, 0.18);
}

.profile-balance-actions .outline,
.profile-agent-actions button:not(.primary) {
  border: 1px solid rgba(244, 197, 66, 0.35);
  background: rgba(5, 5, 5, 0.28);
  color: #f4c542;
}

.profile-agent-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 90% 10%, rgba(244, 197, 66, 0.18), transparent 32%),
    #0b1630;
}

.profile-agent-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.profile-agent-head > span {
  align-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(244, 197, 66, 0.14);
  color: #f4c542;
  font-size: 11px;
  font-weight: 900;
}

.profile-agent-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-agent-code strong,
.profile-agent-stats strong {
  color: #fff;
  font-size: 14px;
}

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

.profile-agent-stats article {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(244, 197, 66, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-agent-stats strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.profile-function-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 8px;
}

.profile-function-grid button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 8px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
}

.profile-function-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(244, 197, 66, 0.95), rgba(184, 135, 16, 0.95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.profile-function-grid strong {
  font-size: 12px;
}

.profile-work-entry {
  display: grid;
  place-items: center;
  color: #f4c542;
}

.profile-logout-simple {
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
}

body.withdraw-page {
  margin: 0;
  min-height: 100vh;
  background: #050505;
  color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

.withdraw-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 0 28px;
  background:
    radial-gradient(circle at 78% 8%, rgba(212, 175, 55, 0.18), transparent 32%),
    linear-gradient(180deg, #0a0f1f 0%, #050505 52%);
}

.withdraw-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(18px);
}

.withdraw-icon-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #d4af37;
  display: grid;
  place-items: center;
}

.withdraw-icon-button svg,
.withdraw-gold-icon svg,
.withdraw-account-card b svg,
.withdraw-balance-card button svg,
.withdraw-section-head button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.withdraw-tabs {
  flex: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.withdraw-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: #b8bdc9;
  font-size: 15px;
  font-weight: 800;
}

.withdraw-tabs button.active {
  color: #f5d67b;
}

.withdraw-tabs button.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37, #f5d67b);
}

.withdraw-main {
  padding: 16px;
  display: grid;
  gap: 16px;
}

.withdraw-balance-card,
.withdraw-form-card,
.withdraw-rules,
.withdraw-section-head,
.withdraw-account-card,
.withdraw-bind-card,
.withdraw-record-card {
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.withdraw-balance-card {
  min-height: 92px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.withdraw-balance-card span,
.withdraw-rules p,
.withdraw-form-card label > span,
.withdraw-account-card small,
.withdraw-account-type small,
.withdraw-bound-account small,
.withdraw-record-card p span,
.withdraw-section-head h2 span {
  color: #b8bdc9;
}

.withdraw-balance-card strong {
  display: block;
  margin-top: 8px;
  color: #f5d67b;
  font-size: 30px;
  line-height: 1;
}

.withdraw-balance-card button,
.withdraw-section-head button {
  border: 0;
  background: transparent;
  color: #d4af37;
}

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

.withdraw-methods button {
  min-height: 62px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  background: #111827;
  color: #b8bdc9;
  font-size: 16px;
  font-weight: 900;
}

.withdraw-methods button.active {
  border-color: rgba(245, 214, 123, 0.85);
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #080808;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.22);
}

.withdraw-account-card,
.withdraw-account-type,
.withdraw-bound-account {
  min-height: 76px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.withdraw-account-card {
  width: 100%;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: #111827;
  color: inherit;
}

.withdraw-gold-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.12);
  display: grid;
  place-items: center;
}

.withdraw-account-card strong,
.withdraw-account-type strong,
.withdraw-bound-account strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
}

.withdraw-account-card small,
.withdraw-account-type small,
.withdraw-bound-account small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.withdraw-account-card b,
.withdraw-account-type b {
  color: #d4af37;
}

.withdraw-form-card {
  padding: 16px;
}

.withdraw-form-card label {
  display: grid;
  gap: 10px;
}

.withdraw-form-card label > span {
  font-size: 18px;
  font-weight: 900;
}

.withdraw-amount-input {
  min-height: 58px;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  background: #0a0f1f;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.withdraw-amount-input b {
  color: #f5d67b;
}

.withdraw-amount-input input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
}

.withdraw-amount-input input::placeholder {
  color: #6b7280;
}

.withdraw-amount-input button {
  border: 0;
  background: transparent;
  color: #f5d67b;
  font-weight: 900;
}

.withdraw-submit {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #050505;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(212, 175, 55, 0.24);
}

.withdraw-submit:disabled,
.withdraw-amount-input button:disabled,
.withdraw-account-type:disabled {
  opacity: 0.52;
  filter: grayscale(0.35);
}

.withdraw-submit:disabled {
  background: #55575d;
  color: #d1d5db;
  box-shadow: none;
}

.withdraw-rules {
  padding: 16px;
}

.withdraw-rules p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
}

.withdraw-rules p:last-child {
  margin-bottom: 0;
}

.withdraw-section-head {
  min-height: 80px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.withdraw-section-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
}

.withdraw-account-list,
.withdraw-record-list {
  display: grid;
  gap: 12px;
}

.withdraw-account-type,
.withdraw-bound-account {
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 18px;
  background: #111827;
  color: inherit;
}

.withdraw-account-type em,
.withdraw-bound-account button {
  color: #f5d67b;
  font-style: normal;
  font-weight: 900;
}

.withdraw-bound-account button {
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.1);
  min-height: 34px;
  padding: 0 12px;
}

.withdraw-bind-card {
  padding: 16px;
}

.withdraw-bind-card .withdraw-section-head {
  min-height: auto;
  padding: 0 0 16px;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.withdraw-bind-card form {
  display: grid;
  gap: 12px;
}

.withdraw-bind-card label {
  display: grid;
  gap: 7px;
  color: #b8bdc9;
  font-size: 13px;
}

.withdraw-bind-card input,
.withdraw-bind-card select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  background: #0a0f1f;
  color: #ffffff;
}

.withdraw-bind-card form button {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #050505;
  font-weight: 950;
}

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

.withdraw-record-tabs button {
  min-height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 999px;
  background: #111827;
  color: #b8bdc9;
  font-weight: 800;
}

.withdraw-record-tabs button.active {
  background: rgba(212, 175, 55, 0.16);
  color: #f5d67b;
}

.withdraw-record-card {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.withdraw-record-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.withdraw-record-card > div span {
  color: #b8bdc9;
  font-size: 13px;
}

.withdraw-record-card > div strong {
  color: #ffffff;
  font-size: 22px;
}

.withdraw-record-card em {
  grid-row: 1 / span 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 900;
}

.withdraw-record-card em.processing {
  color: #f5d67b;
  background: rgba(212, 175, 55, 0.12);
}

.withdraw-record-card em.success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.withdraw-record-card em.failed {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.withdraw-record-card p,
.withdraw-confirm-lines p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #b8bdc9;
  font-size: 13px;
}

.withdraw-record-card p b,
.withdraw-confirm-lines strong {
  color: #ffffff;
  font-weight: 800;
  text-align: right;
}

.withdraw-empty {
  color: #b8bdc9;
  text-align: center;
}

.withdraw-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
  display: grid;
  place-items: center;
}

.withdraw-dialog.hidden {
  display: none;
}

.withdraw-dialog-card {
  width: min(100%, 380px);
  padding: 20px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 22px;
  background: #111827;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.withdraw-dialog-card h3 {
  margin: 0 0 16px;
  color: #f5d67b;
}

.withdraw-confirm-lines {
  display: grid;
  gap: 12px;
}

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

.withdraw-dialog-actions button {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 900;
}

.withdraw-dialog-actions button:first-child {
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: #0a0f1f;
  color: #b8bdc9;
}

.withdraw-dialog-actions button:last-child {
  border: 0;
  background: linear-gradient(180deg, #f5d67b, #d4af37);
  color: #050505;
}

body.withdraw-page button {
  transition: transform 200ms ease, opacity 200ms ease, border-color 200ms ease;
}

body.withdraw-page button:focus {
  outline: none;
}

body.withdraw-page button:active {
  transform: scale(0.96);
}

/* Withdraw page aligned with the recharge page visual system. */
body.withdraw-page {
  background: linear-gradient(180deg, #08111f 0%, #05080f 100%);
}

body.withdraw-page .withdraw-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  padding-bottom: 98px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.16), transparent 36%),
    linear-gradient(180deg, #08111d 0%, #05070d 100%);
}

body.withdraw-page .withdraw-topbar {
  height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  background: rgba(5, 10, 18, 0.96);
}

body.withdraw-page .withdraw-icon-button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

body.withdraw-page .withdraw-icon-button svg {
  width: 22px;
  height: 22px;
}

body.withdraw-page .withdraw-balance-card button svg {
  width: 20px;
  height: 20px;
}

body.withdraw-page .withdraw-tabs button {
  font-size: 14px;
}

body.withdraw-page .withdraw-tabs button.active::after {
  left: 16px;
  right: 16px;
  height: 2px;
}

body.withdraw-page .withdraw-main {
  padding: 12px;
  gap: 12px;
}

body.withdraw-page .withdraw-balance-card,
body.withdraw-page .withdraw-form-card,
body.withdraw-page .withdraw-rules,
body.withdraw-page .withdraw-section-head,
body.withdraw-page .withdraw-account-card,
body.withdraw-page .withdraw-bind-card,
body.withdraw-page .withdraw-record-card,
body.withdraw-page .withdraw-account-type,
body.withdraw-page .withdraw-bound-account {
  border-color: rgba(212, 175, 55, 0.15);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.98), rgba(8, 12, 20, 0.98));
  box-shadow: none;
}

body.withdraw-page .withdraw-balance-card {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
}

body.withdraw-page .withdraw-balance-card div {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.withdraw-page .withdraw-balance-card span {
  font-size: 12px;
}

body.withdraw-page .withdraw-balance-card strong {
  margin: 0;
  color: #f5d67b;
  font-size: 17px;
}

body.withdraw-page .withdraw-balance-card button {
  width: 32px;
  height: 32px;
}

body.withdraw-page .withdraw-methods {
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.98), rgba(8, 12, 20, 0.98));
  gap: 10px;
}

body.withdraw-page .withdraw-methods::before {
  content: "提现方式";
  grid-column: 1 / -1;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

body.withdraw-page .withdraw-methods button {
  min-height: 48px;
  border-color: rgba(212, 175, 55, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #b8bdc9;
  font-size: 14px;
}

body.withdraw-page .withdraw-methods button.active {
  border-color: rgba(212, 175, 55, 0.58);
  background: rgba(212, 175, 55, 0.12);
  color: #f5d67b;
  box-shadow: none;
}

body.withdraw-page .withdraw-account-card,
body.withdraw-page .withdraw-account-type,
body.withdraw-page .withdraw-bound-account {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 12px;
}

body.withdraw-page .withdraw-account-card::before {
  content: "提现账户";
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

body.withdraw-page .withdraw-gold-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.1);
}

body.withdraw-page .withdraw-gold-icon svg,
body.withdraw-page .withdraw-account-card b svg,
body.withdraw-page .withdraw-section-head button svg {
  width: 20px;
  height: 20px;
}

body.withdraw-page .withdraw-account-logo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  display: block;
}

body.withdraw-page .withdraw-account-card strong,
body.withdraw-page .withdraw-account-type strong,
body.withdraw-page .withdraw-bound-account strong {
  font-size: 14px;
}

body.withdraw-page .withdraw-account-card small,
body.withdraw-page .withdraw-account-type small,
body.withdraw-page .withdraw-bound-account small {
  font-size: 11px;
}

body.withdraw-page .withdraw-form-card,
body.withdraw-page .withdraw-rules,
body.withdraw-page .withdraw-bind-card,
body.withdraw-page .withdraw-record-card,
body.withdraw-page .withdraw-section-head {
  padding: 12px;
}

body.withdraw-page .withdraw-form-card label > span,
body.withdraw-page .withdraw-section-head h2 {
  font-size: 15px;
}

body.withdraw-page .withdraw-amount-input {
  min-height: 48px;
  border-color: rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: #0f1520;
}

body.withdraw-page .withdraw-amount-input input {
  font-size: 16px;
}

body.withdraw-page .withdraw-amount-input input::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

body.withdraw-page .withdraw-rules {
  order: 4;
}

body.withdraw-page .withdraw-rules p {
  margin-bottom: 6px;
  font-size: 12px;
}

body.withdraw-page .withdraw-submit {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 430px);
  min-height: 50px;
  padding: 0 12px;
  border-radius: 0;
  background: rgba(5, 8, 15, 0.96);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
}

body.withdraw-page .withdraw-submit::before {
  content: "确定提现";
  display: grid;
  place-items: center;
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ef4444, #c81e1e);
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

body.withdraw-page .withdraw-submit {
  font-size: 0;
  color: transparent;
}

body.withdraw-page .withdraw-submit:disabled {
  opacity: 1;
  background: rgba(5, 8, 15, 0.96);
  filter: none;
}

body.withdraw-page .withdraw-submit:disabled::before {
  background: #55575d;
  color: #d1d5db;
}

body.withdraw-page .withdraw-section-head {
  min-height: 54px;
}

body.withdraw-page .withdraw-account-list,
body.withdraw-page .withdraw-record-list {
  gap: 10px;
}

body.withdraw-page .withdraw-account-type em,
body.withdraw-page .withdraw-bound-account button {
  color: #f5d67b;
}

body.withdraw-page .withdraw-bind-card .withdraw-section-head {
  padding: 0 0 12px;
}

body.withdraw-page .withdraw-bind-card .withdraw-bind-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

body.withdraw-page .withdraw-bind-card .withdraw-bind-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #2f7bff;
  box-shadow: 0 4px 10px rgba(47, 123, 255, 0.22);
}

body.withdraw-page .withdraw-bind-card input,
body.withdraw-page .withdraw-bind-card select {
  min-height: 44px;
  border-color: rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: #0f1520;
}

body.withdraw-page .withdraw-bind-card form button {
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ef4444, #c81e1e);
  color: #ffffff;
}

body.withdraw-page .withdraw-record-tabs {
  gap: 8px;
}

body.withdraw-page .withdraw-record-tabs button {
  min-height: 38px;
  border-color: rgba(212, 175, 55, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}

body.withdraw-page .withdraw-record-tabs button.active {
  background: rgba(212, 175, 55, 0.12);
}

body.withdraw-page .withdraw-record-card > div strong {
  font-size: 19px;
}

body.withdraw-page .withdraw-record-card em {
  padding: 4px 9px;
  font-size: 12px;
}

/* ===== Withdraw page blue-white financial theme ===== */
body.withdraw-page {
  background: #f4f7fc;
  color: #1f2a44;
  font-family: "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

body.withdraw-page .withdraw-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  padding-bottom: 92px;
  background: #f4f7fc;
}

body.withdraw-page .withdraw-topbar {
  height: 58px;
  padding: 0 10px;
  border-bottom: 1px solid #e7edf8;
  background: #ffffff;
  backdrop-filter: none;
}

body.withdraw-page .withdraw-icon-button {
  color: #1f2a44;
  background: transparent;
}

body.withdraw-page .withdraw-icon-button:last-child {
  color: #2f7bff;
}

body.withdraw-page .withdraw-tabs button {
  color: #3a4a66;
  font-size: 14px;
  font-weight: 900;
}

body.withdraw-page .withdraw-tabs button.active {
  color: #2f7bff;
}

body.withdraw-page .withdraw-tabs button.active::after {
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #2f7bff;
  box-shadow: none;
}

body.withdraw-page .withdraw-main {
  padding: 0 12px 18px;
  gap: 12px;
}

body.withdraw-page .withdraw-balance-card {
  min-height: 56px;
  margin: 0 -12px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid #e7edf8;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

body.withdraw-page .withdraw-balance-card div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.withdraw-page .withdraw-balance-card span {
  color: #3a4a66;
  font-size: 14px;
}

body.withdraw-page .withdraw-balance-card strong {
  margin: 0;
  color: #2f7bff;
  font-size: 18px;
  font-weight: 950;
}

body.withdraw-page .withdraw-balance-card button,
body.withdraw-page .withdraw-section-head button {
  color: #2f7bff;
}

body.withdraw-page .withdraw-methods {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 32px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.withdraw-page .withdraw-methods::before {
  content: "提现方式";
  position: absolute;
  left: 0;
  top: 8px;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

body.withdraw-page .withdraw-methods button {
  position: relative;
  min-height: 72px;
  border: 1px solid #dce5f5;
  border-radius: 12px;
  background: #ffffff;
  color: #3a4a66;
  font-size: 15px;
  box-shadow: none;
}

body.withdraw-page .withdraw-methods button.active {
  border: 1.5px solid #2f7bff;
  background: #ffffff;
  color: #2f7bff;
  box-shadow: none;
}

body.withdraw-page .withdraw-methods button.active::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #2f7bff;
  box-shadow: inset 0 0 0 3px #ffffff;
}

body.withdraw-page .withdraw-account-card,
body.withdraw-page .withdraw-account-type,
body.withdraw-page .withdraw-bound-account,
body.withdraw-page .withdraw-form-card,
body.withdraw-page .withdraw-rules,
body.withdraw-page .withdraw-bind-card,
body.withdraw-page .withdraw-record-card,
body.withdraw-page .withdraw-section-head {
  border: 1px solid #e7edf8;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2a44;
  box-shadow: none;
}

body.withdraw-page .withdraw-account-card,
body.withdraw-page .withdraw-account-type,
body.withdraw-page .withdraw-bound-account {
  min-height: 78px;
  padding: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

body.withdraw-page .withdraw-account-card {
  position: relative;
  margin-top: 26px;
}

body.withdraw-page .withdraw-account-card::before {
  content: "提现账户";
  position: absolute;
  left: 0;
  top: -28px;
  transform: none;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

body.withdraw-page .withdraw-gold-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2f7bff;
}

body.withdraw-page .withdraw-account-card strong,
body.withdraw-page .withdraw-account-type strong,
body.withdraw-page .withdraw-bound-account strong,
body.withdraw-page .withdraw-section-head h2 {
  color: #1f2a44;
  font-size: 15px;
}

body.withdraw-page .withdraw-account-card small,
body.withdraw-page .withdraw-account-type small,
body.withdraw-page .withdraw-bound-account small,
body.withdraw-page .withdraw-section-head h2 span {
  color: #8b95a7;
}

body.withdraw-page .withdraw-account-card b,
body.withdraw-page .withdraw-account-type b {
  color: #8b95a7;
}

body.withdraw-page .withdraw-form-card {
  padding: 32px 0 0;
  border: 0;
  background: transparent;
}

body.withdraw-page .withdraw-form-card label > span {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

body.withdraw-page .withdraw-amount-input {
  min-height: 58px;
  border: 1px solid #dce5f5;
  border-radius: 12px;
  background: #ffffff;
}

body.withdraw-page .withdraw-amount-input b {
  color: #1f2a44;
}

body.withdraw-page .withdraw-amount-input input {
  color: #1f2a44;
}

body.withdraw-page .withdraw-amount-input input::placeholder {
  color: #8b95a7;
}

body.withdraw-page .withdraw-amount-input button {
  color: #2f7bff;
}

body.withdraw-page .withdraw-rules {
  padding: 12px 14px;
  background: #f8fafd;
  border: 0;
  color: #3a4a66;
}

body.withdraw-page .withdraw-rules p {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid #e7edf8;
  color: #3a4a66;
}

body.withdraw-page .withdraw-rules p:last-child {
  border-bottom: 0;
}

body.withdraw-page .withdraw-submit {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 430px);
  min-height: 74px;
  padding: 9px 14px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: transparent;
  box-shadow: 0 -8px 24px rgba(15, 35, 80, 0.08);
  transform: translateX(-50%);
}

body.withdraw-page .withdraw-submit::before {
  content: "确定提现";
  display: grid;
  place-items: center;
  min-height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, #3b86ff, #176bff);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

body.withdraw-page .withdraw-submit:disabled {
  opacity: 1;
  background: #ffffff;
  filter: none;
}

body.withdraw-page .withdraw-submit:disabled::before {
  background: #d8dee8;
  color: #ffffff;
}

body.withdraw-page .withdraw-account-tip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2f7bff;
  font-size: 13px;
  font-weight: 900;
}

body.withdraw-page .withdraw-account-tip b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #2f7bff;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

body.withdraw-page .withdraw-account-title {
  margin: 8px 0 2px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

body.withdraw-page .withdraw-section-head {
  min-height: 54px;
  padding: 0 12px;
}

body.withdraw-page .withdraw-bound-account {
  min-height: 96px;
  padding: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.withdraw-page .withdraw-bound-account .withdraw-gold-icon {
  width: 48px;
  height: 48px;
}

body.withdraw-page .withdraw-bound-account button,
body.withdraw-page .withdraw-account-type em {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #2f7bff;
  border-radius: 999px;
  background: #ffffff;
  color: #2f7bff;
  font-size: 12px;
}

body.withdraw-page .withdraw-bound-account button.active {
  border-color: #2f7bff;
  background: #2f7bff;
  color: #ffffff;
}

body.withdraw-page .withdraw-bound-account button.withdraw-edit-account {
  display: grid;
  place-items: center;
  width: 26px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b95a7;
}

body.withdraw-page .withdraw-bound-account button.withdraw-edit-account svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.withdraw-page .withdraw-warm-tip {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #f8fafd;
  color: #3a4a66;
}

body.withdraw-page .withdraw-warm-tip strong {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

body.withdraw-page .withdraw-warm-tip p {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

body.withdraw-page .withdraw-warm-tip p::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #8b95a7;
}

body.withdraw-page .withdraw-bind-card input,
body.withdraw-page .withdraw-bind-card select {
  border-color: #dce5f5;
  background: #ffffff;
  color: #1f2a44;
}

body.withdraw-page .withdraw-bind-card label {
  color: #3a4a66;
}

body.withdraw-page .withdraw-bind-card form button,
body.withdraw-page .withdraw-dialog-actions button:last-child {
  background: linear-gradient(180deg, #3b86ff, #176bff);
  color: #ffffff;
}

body.withdraw-page .withdraw-record-tabs {
  gap: 8px;
}

body.withdraw-page .withdraw-record-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: #eef2f8;
  color: #3a4a66;
}

body.withdraw-page .withdraw-record-tabs button.active {
  background: #2f7bff;
  color: #ffffff;
}

body.withdraw-page .withdraw-record-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 34px 14px 14px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.04);
}

body.withdraw-page .withdraw-record-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
}

body.withdraw-page .withdraw-record-card::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b95a7;
  font-size: 22px;
}

body.withdraw-page .withdraw-record-card > div span {
  grid-column: 1;
  grid-row: 1;
}

body.withdraw-page .withdraw-record-card > div strong {
  grid-column: 1;
  grid-row: 2;
  color: #1f2a44;
  font-size: 20px;
}

body.withdraw-page .withdraw-record-card em {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.withdraw-page .withdraw-record-card > div span,
body.withdraw-page .withdraw-record-card p {
  color: #8b95a7;
}

body.withdraw-page .withdraw-record-card p b {
  color: #3a4a66;
}

body.withdraw-page .withdraw-record-card em.processing {
  color: #d99a00;
  background: #fff4d8;
}

body.withdraw-page .withdraw-record-card em.success {
  color: #18a874;
  background: #e7f8ef;
}

body.withdraw-page .withdraw-record-card em.failed {
  color: #ff5b5b;
  background: #ffeaea;
}

body.withdraw-page .withdraw-dialog {
  background: rgba(31, 42, 68, 0.42);
}

body.withdraw-page .withdraw-dialog-card {
  border-color: #e7edf8;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 35, 80, 0.16);
}

body.withdraw-page .withdraw-dialog-card h3,
body.withdraw-page .withdraw-confirm-lines strong {
  color: #1f2a44;
}

body.withdraw-page .withdraw-confirm-lines p {
  color: #3a4a66;
}

body.withdraw-page .withdraw-dialog-actions button:first-child {
  border-color: #dce5f5;
  background: #ffffff;
  color: #3a4a66;
}

/* ===== 首页客服：独立顶层 Support Root ===== */
.n9-support-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 42px;
  height: 42px;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.client-support-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 20px 16px 18px;
  color: #1e293b;
}

.client-support-banner {
  justify-self: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.client-support-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 2px;
}

.client-support-avatar,
.client-support-mini-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 800;
}

.client-support-avatar {
  width: 52px;
  height: 52px;
  background: linear-gradient(180deg, #111827, #050505);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  font-size: 18px;
}

.client-support-intro strong {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-size: 15px;
}

.client-support-intro p {
  margin: 10px 0 0;
  color: #111827;
  font-size: 15px;
  line-height: 1.8;
}

.client-support-note {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.client-support-thread {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 8px 2px 4px;
}

.client-support-system {
  justify-self: center;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #4b5563;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.client-support-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.client-support-row.customer {
  flex-direction: row-reverse;
}

.client-support-mini-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(180deg, #2563eb, #7c9dff);
  font-size: 14px;
  overflow: hidden;
}

.client-support-mini-avatar img,
.client-support-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.client-support-row.customer .client-support-mini-avatar {
  background: linear-gradient(180deg, #d4af37, #f7d76a);
  color: #1f2937;
}

.client-support-bubble {
  max-width: min(80%, 300px);
  padding: 12px 14px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.client-support-row.customer .client-support-bubble {
  background: #e8f0ff;
}

.client-support-bubble strong {
  display: block;
  margin-bottom: 8px;
  color: #1e293b;
  font-size: 13px;
}

.client-support-bubble p {
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-wrap;
}

.client-support-image {
  display: block;
  width: min(240px, 100%);
  max-height: 128px;
  border-radius: 14px;
  object-fit: cover;
}

.client-support-file {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
}

.client-support-bubble small {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 12px;
}

.client-support-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.client-support-attach-toggle,
.client-support-emoji {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #3b82f6;
  font-size: 26px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.client-support-attach-toggle {
  color: #64748b;
  font-size: 28px;
}

.client-support-input {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: 58px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.client-support-input textarea {
  width: 100%;
  min-height: 34px;
  max-height: 88px;
  border: 0;
  resize: none;
  background: transparent;
  color: #111827;
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}

.client-support-input textarea::placeholder {
  color: #94a3b8;
}

.client-support-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

.client-support-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 6px;
}

.client-support-tools button {
  min-height: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.client-support-tools button span {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1;
}

.client-support-tools button:hover,
.client-support-attach-toggle:hover,
.client-support-emoji:hover,
.client-support-send:hover {
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .n9-support-viewport {
    width: 100%;
  }

  .client-support-shell {
    padding: 16px 12px 14px;
  }

  .client-support-thread {
    max-height: none;
  }

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

/* ===== Final recharge page white theme override ===== */
body.recharge-page {
  background: #eef3f8;
}

body.recharge-page .recharge-shell {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, #f9fbff 0%, #eef3f8 100%);
  color: #1e293b;
}

body.recharge-page .recharge-topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #dbe3ef;
}

body.recharge-page .recharge-topbar h1 {
  color: #1e293b;
}

body.recharge-page .recharge-top-actions button {
  background: #ffffff;
  color: #334155;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-section,
body.recharge-page .payment-summary,
body.recharge-page .receive-card,
body.recharge-page .payment-tips,
body.recharge-page .submitted-card,
body.recharge-page .recharge-records {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.recharge-page .recharge-section-head h2,
body.recharge-page .payment-tips h2,
body.recharge-page .submitted-card h2 {
  color: #2563eb;
}

body.recharge-page .recharge-section-head span,
body.recharge-page .recharge-field small,
body.recharge-page .receive-grid span,
body.recharge-page .receive-qr p,
body.recharge-page .payment-tips p,
body.recharge-page .submitted-card p,
body.recharge-page .recharge-records span,
body.recharge-page .recharge-records em {
  color: #64748b;
}

body.recharge-page .recharge-method-card,
body.recharge-page .recharge-channel-card {
  background: #ffffff;
  border-color: #dbe3ef;
  color: #1e293b;
}

body.recharge-page .recharge-method-card span,
body.recharge-page .recharge-recommend,
body.recharge-page .recharge-field span,
body.recharge-page .amount-input b {
  color: #2563eb;
}

body.recharge-page .recharge-method-card.active,
body.recharge-page .recharge-channel-card.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}

body.recharge-page .recharge-method-card em {
  border-color: #cbd5e1;
}

body.recharge-page .recharge-method-card.active em {
  background: #ef4444;
  border-color: #ef4444;
}

body.recharge-page .recharge-field input,
body.recharge-page .amount-input,
body.recharge-page .client-support-message textarea {
  background: #f8fafc;
  border-color: #dbe3ef;
  color: #1e293b;
}

body.recharge-page .recharge-next {
  background: linear-gradient(180deg, #ef4444, #dc2626);
}

body.recharge-page .recharge-next[disabled] {
  background: #cbd5e1;
  color: #64748b;
}

body.recharge-page .recharge-dialog-card {
  background: #ffffff;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-dialog-card h2 {
  color: #2563eb;
}

body.recharge-page .client-support-options button,
body.recharge-page .recharge-dialog-card button {
  background: #ffffff;
  border-color: #dbe3ef;
  color: #334155;
}

body.recharge-page .client-support-options button {
  box-shadow: none;
}

body.recharge-page .client-support-card button[data-support-submit],
body.recharge-page .recharge-dialog-card button:last-child {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: transparent;
}

body.recharge-page .client-support-message textarea::placeholder,
body.recharge-page .recharge-field input::placeholder {
  color: #94a3b8;
}

body.recharge-page .submitted-icon {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

body.recharge-page .recharge-status.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

body.recharge-page .recharge-records article {
  background: #f8fafc;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-records strong,
body.recharge-page .recharge-records b,
body.recharge-page .submitted-card dd,
body.recharge-page .payment-summary dd,
body.recharge-page .receive-grid strong {
  color: #1e293b;
}

body.recharge-page .receive-qr img {
  border-color: #dbe3ef;
}

body.recharge-page .client-support-card p,
body.recharge-page .recharge-dialog-card p {
  color: #64748b;
}

/* ===== Recharge admin editor ===== */
body.ops-page .ops-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.42);
}

body.ops-page .ops-editor-modal.hidden {
  display: none;
}

body.ops-page .ops-editor-card {
  width: min(100%, 860px);
  max-height: min(88vh, 920px);
  overflow: auto;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
  border: 1px solid #dbe3ef;
  padding: 18px;
}

body.ops-page .ops-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body.ops-page .ops-editor-head h3 {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
}

body.ops-page .ops-editor-close {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

body.ops-page .ops-editor-form {
  display: grid;
  gap: 14px;
}

body.ops-page .ops-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.ops-page .ops-editor-field {
  display: grid;
  gap: 8px;
}

body.ops-page .ops-editor-field.full {
  grid-column: 1 / -1;
}

body.ops-page .ops-editor-field span {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .ops-editor-field input,
body.ops-page .ops-editor-field select,
body.ops-page .ops-editor-field textarea {
  min-height: 44px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  color: #1e293b;
}

body.ops-page .ops-editor-field textarea {
  min-height: 90px;
  padding: 12px;
  resize: vertical;
}

body.ops-page .ops-editor-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.ops-page .ops-editor-preview img {
  width: 72px;
  height: 72px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  object-fit: cover;
  background: #f8fafc;
}

body.ops-page .ops-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

body.ops-page .ops-editor-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.ops-page .ops-editor-actions .primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

/* ===== Recharge console refinements ===== */
body.recharge-page {
  background: linear-gradient(180deg, #08111f 0%, #05080f 100%);
}

body.recharge-page .recharge-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 98px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.16), transparent 36%),
    linear-gradient(180deg, #08111d 0%, #05070d 100%);
}

body.recharge-page .recharge-topbar {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  background: rgba(5, 10, 18, 0.96);
}

body.recharge-page .recharge-back {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

body.recharge-page .recharge-topbar h1 {
  font-size: 17px;
  color: #f7d76a;
}

body.recharge-page .recharge-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.recharge-page .recharge-title-group button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.1);
  color: #f7d76a;
  font-size: 12px;
  font-weight: 900;
}

body.recharge-page .recharge-top-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

body.recharge-page .recharge-main {
  padding: 12px;
  gap: 12px;
}

body.recharge-page .recharge-section,
body.recharge-page .payment-summary,
body.recharge-page .receive-card,
body.recharge-page .payment-tips,
body.recharge-page .submitted-card,
body.recharge-page .recharge-records {
  border-color: rgba(212, 175, 55, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.98), rgba(8, 12, 20, 0.98));
}

body.recharge-page .recharge-section {
  padding: 12px;
}

body.recharge-page .recharge-section-head h2,
body.recharge-page .payment-tips h2,
body.recharge-page .submitted-card h2 {
  font-size: 15px;
}

body.recharge-page .recharge-section-head span {
  font-size: 11px;
}

body.recharge-page .recharge-method-grid {
  gap: 10px;
}

body.recharge-page .recharge-method-card {
  min-height: 128px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(23, 28, 40, 0.98), rgba(11, 14, 22, 0.98));
}

body.recharge-page .recharge-method-card img {
  width: 42px;
  height: 42px;
}

body.recharge-page .recharge-method-card strong {
  font-size: 15px;
}

body.recharge-page .recharge-method-card span {
  color: #ffd85a;
}

body.recharge-page .recharge-method-card em {
  width: 15px;
  height: 15px;
}

body.recharge-page .recharge-channel-card {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

body.recharge-page .recharge-channel-card strong {
  font-size: 14px;
}

body.recharge-page .recharge-field span {
  font-size: 12px;
}

body.recharge-page .recharge-field input,
body.recharge-page .amount-input {
  border-radius: 12px;
}

body.recharge-page .recharge-field input,
body.recharge-page .amount-input {
  background: #0f1520;
}

body.recharge-page .recharge-field input::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

body.recharge-page .amount-input input {
  font-size: 16px;
}

body.recharge-page .recharge-fixed-footer {
  padding: 10px 12px 14px;
}

body.recharge-page .recharge-next {
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ef4444, #c81e1e);
}

body.recharge-page .payment-summary {
  padding: 12px;
  gap: 10px;
}

body.recharge-page .payment-summary > div:first-child strong {
  font-size: 19px;
}

body.recharge-page .payment-summary dl,
body.recharge-page .submitted-card dl {
  gap: 7px;
}

body.recharge-page .receive-card {
  padding: 12px;
}

body.recharge-page .receive-grid {
  grid-template-columns: 1fr;
}

body.recharge-page .receive-row {
  grid-template-columns: 1fr auto;
  align-items: start;
}

body.recharge-page .receive-row span {
  grid-column: 1 / -1;
  margin-top: 4px;
}

body.recharge-page .receive-row strong {
  grid-column: 1;
}

body.recharge-page .receive-copy {
  grid-column: 2;
  min-height: 28px;
}

body.recharge-page .receive-grid span {
  margin-top: 4px;
}

body.recharge-page .receive-qr {
  margin-top: 10px;
  gap: 8px;
}

body.recharge-page .receive-qr img {
  width: 150px;
  height: 150px;
}

body.recharge-page .receive-save-qr,
body.recharge-page .submitted-card button,
body.recharge-page .recharge-dialog-card button {
  border-radius: 10px;
}

body.recharge-page .suffix-boxes {
  gap: 6px;
}

body.recharge-page .suffix-boxes input {
  min-height: 36px;
  font-size: 15px;
}

body.recharge-page .transfer-suffix .suffix-boxes input {
  min-height: 42px;
  border: 1px solid #c8d7ee;
  background: #ffffff;
  color: #1f2a44;
  -webkit-text-fill-color: #1f2a44;
  caret-color: #2563eb;
  opacity: 1;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

body.recharge-page .transfer-suffix .suffix-boxes input:focus {
  border-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

body.recharge-page .recharge-fixed-footer {
  background: transparent;
  box-shadow: none;
}

body.recharge-page .recharge-records article {
  border-radius: 10px;
}

body.recharge-page .recharge-dialog-card {
  border-radius: 16px;
}

body.recharge-page .client-support-card {
  display: grid;
  gap: 12px;
}

body.recharge-page .client-support-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.recharge-page .client-support-options button,
body.recharge-page .client-support-card button {
  min-height: 42px;
  border-radius: 10px;
}

body.recharge-page .client-support-options button {
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

body.recharge-page .client-support-message {
  display: grid;
  gap: 8px;
}

body.recharge-page .client-support-message span {
  color: #f7d76a;
  font-weight: 700;
}

body.recharge-page .client-support-message textarea {
  min-height: 96px;
  resize: vertical;
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  background: #0f1520;
  color: #fff;
  outline: none;
}

body.recharge-page .client-support-card > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Final recharge page white theme */
body.recharge-page {
  background: #eef3f8;
}

body.recharge-page .recharge-shell {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, #f9fbff 0%, #eef3f8 100%);
  color: #1e293b;
}

body.recharge-page .recharge-topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #dbe3ef;
}

body.recharge-page .recharge-topbar h1 {
  color: #1e293b;
}

body.recharge-page .recharge-top-actions button {
  background: #ffffff;
  color: #334155;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-section,
body.recharge-page .payment-summary,
body.recharge-page .receive-card,
body.recharge-page .payment-tips,
body.recharge-page .submitted-card,
body.recharge-page .recharge-records {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.recharge-page .recharge-section-head h2,
body.recharge-page .payment-tips h2,
body.recharge-page .submitted-card h2 {
  color: #2563eb;
}

body.recharge-page .recharge-section-head span,
body.recharge-page .recharge-field small,
body.recharge-page .receive-grid span,
body.recharge-page .receive-qr p,
body.recharge-page .payment-tips p,
body.recharge-page .submitted-card p,
body.recharge-page .recharge-records span,
body.recharge-page .recharge-records em {
  color: #64748b;
}

body.recharge-page .recharge-method-card,
body.recharge-page .recharge-channel-card {
  background: #ffffff;
  border-color: #dbe3ef;
  color: #1e293b;
}

body.recharge-page .recharge-method-card span,
body.recharge-page .recharge-recommend,
body.recharge-page .recharge-field span,
body.recharge-page .amount-input b {
  color: #2563eb;
}

body.recharge-page .recharge-method-card.active,
body.recharge-page .recharge-channel-card.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}

body.recharge-page .recharge-method-card em {
  border-color: #cbd5e1;
}

body.recharge-page .recharge-method-card.active em {
  background: #ef4444;
  border-color: #ef4444;
}

body.recharge-page .recharge-field input,
body.recharge-page .amount-input,
body.recharge-page .client-support-message textarea {
  background: #f8fafc;
  border-color: #dbe3ef;
  color: #1e293b;
}

body.recharge-page .recharge-next {
  background: linear-gradient(180deg, #ef4444, #dc2626);
}

body.recharge-page .recharge-next[disabled] {
  background: #cbd5e1;
  color: #64748b;
}

body.recharge-page .recharge-dialog-card {
  background: #ffffff;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-dialog-card h2 {
  color: #2563eb;
}

body.recharge-page .client-support-options button,
body.recharge-page .recharge-dialog-card button {
  background: #ffffff;
  border-color: #dbe3ef;
  color: #334155;
}

body.recharge-page .client-support-options button {
  box-shadow: none;
}

body.recharge-page .client-support-card button[data-support-submit],
body.recharge-page .recharge-dialog-card button:last-child {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: transparent;
}

body.recharge-page .client-support-message textarea::placeholder,
body.recharge-page .recharge-field input::placeholder {
  color: #94a3b8;
}

body.recharge-page .submitted-icon {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

body.recharge-page .recharge-status.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

body.recharge-page .recharge-records article {
  background: #f8fafc;
  border-color: #dbe3ef;
}

body.recharge-page .recharge-records strong,
body.recharge-page .recharge-records b,
body.recharge-page .submitted-card dd,
body.recharge-page .payment-summary dd,
body.recharge-page .receive-grid strong {
  color: #1e293b;
}

body.recharge-page .receive-qr img {
  border-color: #dbe3ef;
}

body.recharge-page .client-support-card p,
body.recharge-page .recharge-dialog-card p {
  color: #64748b;
}

/* Recharge admin editor */
body.ops-page .ops-page-head {
  align-items: center;
}

body.ops-page .ops-page-actions .primary {
  min-height: 38px;
}

body.ops-page .ops-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.52);
  padding: 18px;
}

body.ops-page .ops-editor-card {
  width: min(900px, calc(100vw - 28px));
  max-height: min(90vh, 900px);
  overflow: auto;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

body.ops-page .ops-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}

body.ops-page .ops-editor-head h3 {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
}

body.ops-page .ops-editor-head p {
  margin: 6px 0 0;
  color: #64748b;
}

body.ops-page .ops-editor-head button {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 22px;
}

body.ops-page .ops-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
}

body.ops-page .ops-editor-form label {
  display: grid;
  gap: 8px;
}

body.ops-page .ops-editor-form label span {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

body.ops-page .ops-editor-form input,
body.ops-page .ops-editor-form select,
body.ops-page .ops-editor-form textarea {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
}

body.ops-page .ops-editor-form textarea {
  min-height: 92px;
  resize: vertical;
}

body.ops-page .ops-editor-form .ops-editor-wide {
  grid-column: 1 / -1;
}

body.ops-page .ops-editor-preview {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 10px;
  border: 1px dashed #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
}

body.ops-page .ops-editor-preview img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}

body.ops-page .ops-editor-preview span {
  color: #94a3b8;
}

body.ops-page .ops-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

body.ops-page .ops-editor-actions button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.ops-page .ops-editor-actions .primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

body.ops-page .ops-game-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
}

body.ops-page .ops-game-bulk-toolbar strong {
  display: block;
  color: #1e293b;
  font-size: 14px;
}

body.ops-page .ops-game-bulk-toolbar span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

body.ops-page .ops-game-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.ops-page .ops-game-bulk-controls button,
body.ops-page .ops-game-bulk-controls select {
  min-height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  font-weight: 800;
  font-size: 12px;
}

body.ops-page .ops-game-bulk-controls button {
  padding: 0 10px;
}

body.ops-page .ops-game-bulk-controls select {
  padding: 0 28px 0 10px;
}

body.ops-page .ops-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef5ff;
  color: #2f7bff;
  cursor: grab;
  font-weight: 900;
}

body.ops-page .ops-table-games-list tr[draggable="true"] {
  cursor: grab;
}

body.ops-page .ops-table-games-list tr[draggable="true"]:active {
  cursor: grabbing;
}

body.ops-page .ops-game-editor-card {
  width: min(980px, calc(100vw - 28px));
}

body.ops-page .ops-game-editor-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ops-page .ops-game-icon-preview {
  min-height: 92px;
}

body.ops-page .ops-game-icon-preview img {
  max-width: 140px;
  max-height: 72px;
}

@media (max-width: 980px) {
  body.ops-page .ops-game-editor-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ops-page .ops-game-bulk-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.ops-page .ops-game-bulk-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body.ops-page .ops-editor-form {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-game-editor-form {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-editor-card {
    width: calc(100vw - 20px);
  }
}

/* Final viewport guard: keep the page fixed while preserving intentional inner scrollers. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}

body {
  position: relative;
}

img,
video,
canvas,
iframe {
  height: auto;
  max-width: 100%;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
}

.hidden {
  display: none !important;
}

/* Home top area override for mobile-first N9 header */
.app-shell > .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: visible;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 18%, rgba(212, 175, 55, 0.18), transparent 22%),
    linear-gradient(180deg, #0d2038 0%, #081726 48%, #071426 100%);
  backdrop-filter: blur(18px);
}

.app-shell > .topbar::before {
  content: "N9";
  position: absolute;
  right: 12px;
  top: 18px;
  color: rgba(255, 255, 255, 0.05);
  font-size: 92px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.app-shell > .topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 25%);
  pointer-events: none;
}

.app-shell > .topbar .app-download-strip {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 7px 12px;
}

.app-shell > .topbar .download-brand strong {
  font-size: 14px;
}

.app-shell > .topbar .download-brand span {
  font-size: 10px;
  letter-spacing: 2px;
}

.app-shell > .topbar .download-app-button {
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 6px;
}

.app-shell > .topbar .download-close {
  width: 28px;
  height: 28px;
  font-size: 22px;
}

.app-shell > .topbar .main-header {
  position: relative;
  z-index: 1;
  min-height: 50px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.app-shell > .topbar .brand {
  gap: 10px;
}

.app-shell > .topbar .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.app-shell > .topbar .brand strong {
  font-size: 17px;
  letter-spacing: 1.5px;
}

.app-shell > .topbar .brand small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  letter-spacing: 1.8px;
}

.app-shell > .topbar .header-tools {
  gap: 8px;
  flex-direction: row;
  align-items: center;
}

.app-shell > .topbar .guest-actions {
  gap: 8px;
}

.app-shell > .topbar .guest-actions .ghost-button,
.app-shell > .topbar .guest-actions .primary-button {
  min-height: 30px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 12px;
}

.app-shell > .topbar .auth-user-panel {
  position: relative;
  gap: 8px;
  align-items: center;
}

.app-shell > .topbar .language-switcher {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.app-shell > .topbar .account-pill {
  min-height: 34px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 25, 38, 0.9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.app-shell > .topbar .account-pill span {
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
}

.app-shell > .topbar .account-pill strong {
  font-size: 12px;
}

.app-shell > .topbar .account-pill small {
  font-size: 11px;
  color: #e8f1ff;
}

.app-shell > .topbar .balance-refresh {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.9);
  color: #f7d76a;
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.app-shell > .topbar .balance-refresh.is-refreshing {
  animation: n9-balance-refresh-spin 0.8s linear infinite;
}

@keyframes n9-balance-refresh-spin {
  to { transform: rotate(360deg); }
}

.app-shell > .topbar .language-flag {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.95);
  font-size: 17px;
  display: grid;
  place-items: center;
}

.app-shell > .topbar .language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 176px;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 14px;
  background: rgba(10, 17, 28, 0.98);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.app-shell > .topbar .language-menu button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #eef4ff;
  text-align: left;
  font-size: 13px;
}

.app-shell > .topbar .language-menu button.active {
  border-color: rgba(212, 175, 55, 0.55);
  color: #f7d76a;
  background: rgba(212, 175, 55, 0.12);
}

#homeView {
  position: relative;
}

#homeView .notice-bar {
  min-height: 34px;
  margin: 6px 0 8px;
  padding: 6px 11px;
  border-radius: 12px;
  background: rgba(6, 12, 22, 0.86);
  border: 1px solid rgba(212, 175, 55, 0.16);
}

#homeView .notice-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
}

#homeView .notice-marquee {
  font-size: 12px;
  gap: 18px;
  animation-duration: 20s;
}

#homeView .notice-marquee span::after {
  margin-left: 18px;
}

#homeView .hero {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#homeView .hero::before {
  display: none;
}

#homeView .ad-carousel {
  padding: 0 0 6px;
}

#homeView .ad-carousel-viewport {
  border-radius: 16px;
}

#homeView .ad-slide {
  min-height: 138px;
}

#homeView .ad-copy {
  max-width: 68%;
  left: 14px;
  right: 14px;
  bottom: 12px;
  padding: 9px 11px 9px;
  border-radius: 12px;
}

#homeView .ad-copy h3 {
  margin: 5px 0 3px;
  font-size: 15px;
}

#homeView .ad-copy p {
  font-size: 11px;
  line-height: 1.45;
}

#homeView .home-search {
  width: 100%;
  min-height: 42px;
  margin: 8px 0 8px;
  border-radius: 12px;
  background: rgba(13, 24, 38, 0.94);
}

#homeView .home-search input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

#homeView .category-row {
  top: 52px;
  padding-top: 6px;
  padding-bottom: 8px;
  margin-top: 0;
  background: rgba(7, 20, 38, 0.95);
}

#homeView .category-row button {
  min-width: 84px;
  min-height: 36px;
  border-radius: 10px;
}

#homeView .game-section {
  margin-top: 12px;
}

#homeView .game-section-title h2 {
  font-size: 20px;
}

@media (max-width: 540px) {
  .app-shell > .topbar::before {
    font-size: 66px;
    top: 26px;
    right: 8px;
  }

  .app-shell > .topbar .main-header {
    padding: 7px 10px 8px;
  }

  .app-shell > .topbar .brand strong {
    font-size: 16px;
  }

  .app-shell > .topbar .brand small {
    font-size: 9px;
  }

  .app-shell > .topbar .account-pill {
    padding: 5px 8px;
  }

  .app-shell > .topbar .account-pill small {
    font-size: 10px;
  }

  #homeView .ad-slide {
    min-height: 134px;
  }

  #homeView .category-row {
    top: 50px;
  }
}

/* 交易记录最终状态色：金额和右侧状态保持一致。 */
body.withdraw-page .withdraw-record-side strong.success {
  color: #18a874 !important;
}

body.withdraw-page .withdraw-record-side strong.processing {
  color: #ff9f43 !important;
}

body.withdraw-page .withdraw-record-side strong.rejected,
body.withdraw-page .withdraw-record-side strong.cancelled {
  color: #ff4d4f !important;
}

.app-shell > main {
  padding: 12px 12px 0;
}
/* Home header and layout overrides */
.auth-user-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #2b3344;
  color: #fff;
}

.account-pill span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f0b500;
  color: #111;
  font-size: 12px;
  font-weight: 900;
}

.account-pill strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
}

.account-pill small {
  color: #dbe6ff;
  font-size: 12px;
  line-height: 1.1;
}

.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #1b2330;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#homeView .notice-bar {
  margin: 10px 0 12px;
}

#homeView .hero {
  margin-top: 0;
}

#homeView .ad-slide {
  min-height: 178px;
}

#homeView .ad-copy {
  max-width: 72%;
  padding: 12px 12px 10px;
}

#homeView .category-row {
  top: 62px;
  padding-top: 8px;
  padding-bottom: 10px;
}

#homeView .game-section {
  margin-top: 12px;
}

@media (max-width: 540px) {
  #homeView .ad-slide {
    min-height: 164px;
  }
}

/* Final home header override */
#homeView .notice-bar {
  margin: 10px 0 12px;
}

#homeView .hero {
  margin-top: 0;
}

#homeView .ad-slide {
  min-height: 178px;
}

#homeView .ad-copy {
  max-width: 72%;
  padding: 12px 12px 10px;
}

#homeView .category-row {
  top: 62px;
  padding-top: 8px;
  padding-bottom: 10px;
}

#homeView .game-section {
  margin-top: 12px;
}

@media (max-width: 540px) {
  #homeView .ad-slide {
    min-height: 164px;
  }
}

/* 当前首页头部布局：账号余额、语言、公告在广告上方 */
.auth-user-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #2b3344;
  color: #fff;
}

.account-pill span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f0b500;
  color: #111;
  font-size: 12px;
  font-weight: 900;
}

.account-pill span::before {
  content: "$";
}

.account-pill span {
  font-size: 0;
}

.account-pill span::before {
  font-size: 12px;
}

.account-pill strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
}

.account-pill small {
  color: #dbe6ff;
  font-size: 12px;
  line-height: 1.1;
}

.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #1b2330;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#homeView .notice-bar {
  margin: 10px 0 12px;
}

#homeView .hero {
  margin-top: 0;
}

#homeView .ad-slide {
  min-height: 178px;
}

#homeView .ad-copy {
  max-width: 72%;
  padding: 12px 12px 10px;
}

#homeView .category-row {
  top: 62px;
  padding-top: 8px;
  padding-bottom: 10px;
}

#homeView .game-section {
  margin-top: 12px;
}

@media (max-width: 540px) {
  .auth-user-panel {
    gap: 6px;
  }

  .account-pill {
    padding: 5px 10px;
  }

  .account-avatar {
    width: 34px;
    height: 34px;
  }

  #homeView .ad-slide {
    min-height: 164px;
  }
}

/* 首页顶部微调 */
.main-header {
  padding-bottom: 8px;
}

.hero {
  margin-top: 2px;
}

.ad-carousel {
  padding-bottom: 8px;
}

.ad-slide {
  min-height: 188px;
}

.ad-copy {
  max-width: 70%;
  padding: 12px 12px 10px;
}

.ad-copy h3 {
  font-size: 18px;
  margin: 6px 0 4px;
}

.ad-copy p {
  font-size: 11px;
  line-height: 1.55;
}

.notice-bar {
  margin: 12px 0 14px;
}

.category-row {
  top: 62px;
  padding-top: 6px;
  padding-bottom: 8px;
}

.game-section {
  margin-top: 12px;
}

.section-search {
  top: 118px;
}

@media (max-width: 540px) {
  .ad-slide {
    min-height: 170px;
  }

  .category-row {
    top: 58px;
  }

  .section-search {
    top: 112px;
  }
}

/* Recharge page */
.recharge-page {
  background: #070707;
}

.recharge-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background:
    radial-gradient(circle at top, rgba(212, 175, 55, 0.15), transparent 35%),
    #070707;
  color: #fff;
  padding-bottom: 96px;
}

.recharge-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(10, 10, 10, 0.95));
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  backdrop-filter: blur(16px);
}

.recharge-back {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.12);
  padding: 0;
}

.recharge-back img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.recharge-topbar h1 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #f7d76a;
}

.recharge-top-actions {
  display: flex;
  gap: 8px;
}

.recharge-top-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #f2f2f2;
  font-size: 12px;
}

.recharge-main {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.recharge-section,
.payment-summary,
.receive-card,
.payment-tips,
.submitted-card,
.recharge-records {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(12, 12, 12, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

.recharge-section {
  padding: 14px;
}

.recharge-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.recharge-section-head h2 {
  margin: 0;
  color: #f7d76a;
  font-size: 16px;
}

.recharge-section-head span {
  color: #a9a9a9;
  font-size: 12px;
}

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

.recharge-method-card {
  position: relative;
  min-height: 132px;
  padding: 14px 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.95), rgba(14, 14, 14, 0.95));
  color: #fff;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  text-align: left;
}

.recharge-method-card img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

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

.recharge-method-card span {
  font-size: 12px;
  color: #f7d76a;
}

.recharge-method-card em {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.recharge-method-card.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 0 18px rgba(239, 68, 68, 0.16);
}

.recharge-method-card.active em {
  background: #ef4444;
  border-color: #ef4444;
}

.recharge-recommend {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.2);
  color: #f7d76a;
  font-size: 11px;
  font-style: normal;
}

.recharge-channel-list {
  display: grid;
  gap: 10px;
}

.recharge-channel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.recharge-channel-card strong {
  display: block;
  font-size: 15px;
}

.recharge-channel-card span,
.recharge-channel-card small {
  display: block;
  color: #b9b9b9;
  font-size: 12px;
}

.recharge-channel-card.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.recharge-field {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.recharge-field span {
  color: #f7d76a;
  font-size: 13px;
  font-weight: 700;
}

.recharge-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 12px;
  background: #111;
  color: #fff;
  outline: none;
}

.recharge-field small {
  color: #8f8f8f;
  font-size: 12px;
}

.recharge-field small.error {
  color: #ef4444;
}

.amount-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 12px;
  background: #111;
}

.amount-input b {
  color: #f7d76a;
}

.amount-input input {
  flex: 1;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  padding: 0;
}

.recharge-fixed-footer {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: grid;
  gap: 10px;
  padding: 12px 14px 16px;
  background: transparent;
}

.recharge-next {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ef4444, #c81e1e);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.24);
}

.recharge-next[disabled] {
  background: #3a3a3a;
  color: #9a9a9a;
  box-shadow: none;
}

.payment-summary {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.payment-summary > div:first-child,
.payment-countdown {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.payment-summary > div:first-child span,
.payment-countdown span {
  color: #a7a7a7;
  font-size: 12px;
}

.payment-summary > div:first-child strong {
  color: #f7d76a;
  font-size: 20px;
}

.payment-summary dl,
.submitted-card dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.payment-summary dl div,
.submitted-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.payment-summary dt,
.submitted-card dt {
  color: #a8a8a8;
}

.payment-summary dd,
.submitted-card dd {
  margin: 0;
  color: #fff;
  text-align: right;
}

.payment-countdown b {
  color: #ef4444;
  font-size: 20px;
}

.receive-card {
  padding: 14px;
}

.receive-grid {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
}

.receive-grid span {
  color: #9d9d9d;
  font-size: 12px;
}

.receive-grid strong {
  color: #fff;
  word-break: break-all;
}

.receive-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
}

.receive-row strong {
  min-width: 0;
}

.receive-copy {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.receive-qr {
  margin-top: 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.receive-qr img {
  width: 180px;
  height: 180px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: #fff;
}

.receive-save-qr {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.transfer-suffix {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(212, 175, 55, 0.2);
  display: grid;
  gap: 10px;
}

.transfer-suffix-head {
  display: grid;
  gap: 4px;
}

.transfer-suffix-head h3 {
  margin: 0;
  color: #f7d76a;
  font-size: 14px;
}

.transfer-suffix-head span,
.suffix-hint {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

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

.suffix-boxes input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}

.suffix-boxes input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.receive-qr p,
.payment-tips p {
  margin: 0;
  color: #bababa;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.receive-actions,
.submitted-card button,
.recharge-dialog-card div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.receive-actions {
  margin-top: 12px;
}

.receive-actions button,
.submitted-card button,
.recharge-dialog-card button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.payment-tips,
.submitted-card {
  padding: 14px;
}

.payment-tips h2,
.submitted-card h2 {
  margin: 0 0 10px;
  color: #f7d76a;
  font-size: 16px;
}

.submitted-card {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.submitted-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-size: 28px;
  font-weight: 900;
}

.submitted-card p {
  margin: 0;
  color: #bababa;
}

.recharge-status.pending {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.recharge-records {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.recharge-records article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.14);
}

.recharge-records article div {
  display: grid;
  gap: 4px;
}

.recharge-records article strong,
.recharge-records article b {
  color: #fff;
}

.recharge-records article span,
.recharge-records article em {
  color: #a8a8a8;
  font-style: normal;
  font-size: 12px;
}

.recharge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
}

.recharge-status.pending {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
}

.recharge-status.success {
  background: rgba(24, 168, 116, 0.14);
  color: #18a874;
}

.recharge-status.failed {
  background: rgba(255, 91, 91, 0.14);
  color: #ff5b5b;
}

.empty-record {
  padding: 24px;
  text-align: center;
  color: #9c9c9c;
}

.recharge-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 16px;
}

.recharge-dialog-card {
  width: min(100%, 360px);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: #121212;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.recharge-dialog-card h2 {
  margin: 0 0 10px;
  color: #f7d76a;
}

.recharge-dialog-card p {
  margin: 0 0 16px;
  color: #c6c6c6;
  line-height: 1.6;
}

.recharge-dialog-card div {
  justify-content: flex-end;
}

.recharge-dialog-card button:last-child {
  background: linear-gradient(180deg, #ef4444, #c81e1e);
  border-color: transparent;
}

@media (max-width: 360px) {
  .recharge-method-grid {
    grid-template-columns: 1fr;
  }

  .receive-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== N9 客服工作台 ===== */
body.support-page {
  margin: 0;
  background: #f5f7fb;
  color: #1e293b;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.support-page .svc-shell {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 100svh;
  height: 100svh;
  background: #f5f7fb;
  overflow: hidden;
}

body.support-page .svc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

body.support-page .svc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.support-page .svc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1e293b;
  text-decoration: none;
}

body.support-page .svc-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

body.support-page .svc-brand strong {
  display: block;
  font-size: 14px;
}

body.support-page .svc-brand span {
  display: block;
  color: #64748b;
  font-size: 11px;
}

body.support-page .svc-agent-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid #e2e8f0;
}

body.support-page .svc-agent-meta div {
  display: grid;
  gap: 2px;
}

body.support-page .svc-agent-meta span {
  color: #64748b;
  font-size: 10px;
}

body.support-page .svc-agent-meta strong {
  color: #1e293b;
  font-size: 12px;
}

body.support-page .svc-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.support-page .svc-state-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #f8fafc;
}

body.support-page .svc-state-switch button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-weight: 800;
}

body.support-page .svc-state-switch button.active {
  background: #2563eb;
  color: #ffffff;
}

body.support-page .svc-config-button {
  border: 1px solid #dbe6f6;
  border-radius: 999px;
  background: #ffffff;
  color: #31527a;
  font-weight: 800;
  padding: 9px 14px;
  cursor: pointer;
}

body.support-page .svc-head-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.support-page .svc-head-metrics article {
  min-width: 86px;
  padding: 6px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.support-page .svc-head-metrics span {
  display: block;
  color: #64748b;
  font-size: 10px;
}

body.support-page .svc-head-metrics strong {
  display: block;
  margin-top: 3px;
  color: #1e293b;
  font-size: 14px;
}

body.support-page .svc-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px 10px;
  overflow: hidden;
}

body.support-page .svc-panel,
body.support-page .svc-chat-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

body.support-page .svc-conversation-panel,
body.support-page .svc-info-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding: 12px 10px;
  overflow: hidden;
}

body.support-page .svc-info-head {
  align-items: flex-start;
}

body.support-page .svc-collapse-btn {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 16px;
  font-weight: 800;
}

body.support-page .svc-info-panel.is-collapsed {
  align-content: start;
}

body.support-page .svc-info-panel.is-collapsed .svc-info-content {
  display: none !important;
}

body.support-page .svc-info-content {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.support-page .svc-panel-head h2 {
  margin: 0;
  color: #1e293b;
  font-size: 16px;
}

body.support-page .svc-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

body.support-page .svc-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 0 14px;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
}

body.support-page .svc-filter-tabs,
body.support-page .svc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.support-page .svc-filter-tabs button,
body.support-page .svc-tabs button,
body.support-page .svc-chat-actions button,
body.support-page .svc-compose-tools button,
body.support-page .svc-compose-actions button,
body.support-page .svc-history-item button,
body.support-page .svc-record-head button {
  min-height: 32px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-weight: 700;
}

body.support-page .svc-filter-tabs button,
body.support-page .svc-tabs button {
  padding: 0 10px;
  font-size: 12px;
}

body.support-page .svc-filter-tabs button.active,
body.support-page .svc-tabs button.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
}

body.support-page .svc-conversation-list {
  display: block;
  min-height: 0;
  overflow: auto;
  padding: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.support-page .svc-conversation {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  border-radius: 0;
  background: #ffffff;
}

body.support-page .svc-conversation-select {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 7px 5px;
  border: 0;
  background: transparent;
  text-align: left;
}

body.support-page .svc-conversation:hover,
body.support-page .svc-conversation.active {
  border-color: #edf0f3;
  background: #f3f6fa;
  box-shadow: inset 3px 0 0 #2563eb;
}

body.support-page .svc-conversation-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

body.support-page .svc-conversation-avatar.tone-1 { background: #10b981; }
body.support-page .svc-conversation-avatar.tone-2 { background: #8b5cf6; }
body.support-page .svc-conversation-avatar.tone-3 { background: #f59e0b; }
body.support-page .svc-conversation-avatar.tone-4 { background: #ec4899; }
body.support-page .svc-conversation-avatar.tone-5 { background: #64748b; }

body.support-page .svc-conversation-avatar i {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #94a3b8;
}

body.support-page .svc-conversation-avatar i.success { background: #22c55e; }
body.support-page .svc-conversation-avatar i.warning { background: #f59e0b; }
body.support-page .svc-conversation-avatar i.danger { background: #ef4444; }

body.support-page .svc-conversation-content,
body.support-page .svc-conversation-meta,
body.support-page .svc-conversation-name-row {
  min-width: 0;
}

body.support-page .svc-conversation-content {
  display: grid;
  gap: 5px;
}

body.support-page .svc-conversation-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.support-page .svc-conversation-name-row strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.support-page .svc-conversation-meta {
  align-self: stretch;
  display: grid;
  grid-template-rows: 18px 1fr 16px;
  justify-items: end;
  min-width: 42px;
}

body.support-page .svc-conversation-meta time {
  color: #9ca3af;
  font-size: 10px;
  white-space: nowrap;
}

body.support-page .svc-conversation-meta > small {
  align-self: end;
  color: #94a3b8;
  font-size: 9px;
  white-space: nowrap;
}

body.support-page .svc-conversation-meta > small.success { color: #16a34a; }
body.support-page .svc-conversation-meta > small.warning { color: #d97706; }

body.support-page .svc-conversation-top,
body.support-page .svc-conversation-bottom,
body.support-page .svc-chat-top,
body.support-page .svc-chat-tags,
body.support-page .svc-modal-head,
body.support-page .svc-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.support-page .svc-conversation-flags {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.support-page .svc-conversation-top strong {
  color: #1e293b;
  font-size: 11px;
}

body.support-page .svc-conversation-top small,
body.support-page .svc-conversation-mid,
body.support-page .svc-conversation-message,
body.support-page .svc-conversation-bottom small {
  color: #64748b;
}

body.support-page .svc-conversation-message {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8b929d;
  font-size: 11px;
}

body.support-page .svc-badge,
body.support-page .svc-risk,
body.support-page .svc-unread,
body.support-page .svc-mini {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

body.support-page .svc-badge.success,
body.support-page .svc-risk.success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

body.support-page .svc-badge.warning,
body.support-page .svc-risk.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

body.support-page .svc-warning-chip {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-size: 8px;
  font-weight: 800;
}

body.support-page .svc-badge.danger,
body.support-page .svc-risk.danger,
body.support-page .svc-unread {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

body.support-page .svc-badge.neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

body.support-page .svc-unread {
  align-self: center;
  min-width: 18px;
  min-height: 18px;
  padding: 0 5px;
  justify-content: center;
  border-radius: 9px;
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
}

body.support-page .svc-note-row {
  display: grid;
  gap: 3px;
}

body.support-page .svc-note-row span {
  color: #64748b;
  font-size: 10px;
}

body.support-page .svc-note-input {
  min-height: 28px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 10px;
  font-size: 10px;
}

body.support-page .svc-note-card {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.support-page .svc-chat-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}

body.support-page .svc-chat-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 10px 12px;
}

body.support-page .svc-chat-top h3 {
  margin: 0;
  color: #1e293b;
  font-size: 15px;
}

body.support-page .svc-chat-top h3 span {
  margin-left: 8px;
  color: #64748b;
  font-size: 11px;
}

body.support-page .svc-chat-top p,
body.support-page .svc-mini {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 11px;
}

body.support-page .svc-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.support-page .svc-chat-actions .primary,
body.support-page .svc-compose-actions .primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

body.support-page .svc-chat-actions .danger {
  border-color: #ef4444;
  color: #dc2626;
}

body.support-page .svc-status-banner {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 11px;
}

body.support-page .svc-status-banner .success {
  color: #16a34a;
}

body.support-page .svc-status-banner .warning {
  color: #d97706;
}

body.support-page .svc-status-banner .danger {
  color: #dc2626;
}

body.support-page .svc-message-list {
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding: 8px 6px;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.support-page .svc-message {
  display: flex;
}

body.support-page .svc-message.left {
  justify-content: flex-start;
}

body.support-page .svc-message.right {
  justify-content: flex-end;
}

body.support-page .svc-message-bubble {
  max-width: min(72%, 420px);
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}

body.support-page .svc-message.agent .svc-message-bubble {
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  border-color: #c7ddff;
}

body.support-page .svc-message.customer .svc-message-bubble {
  background: #ffffff;
}

body.support-page .svc-message-text {
  color: #1e293b;
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 13px;
}

body.support-page .svc-message-image {
  display: block;
  max-width: 100%;
  max-height: 170px;
  border-radius: 12px;
  object-fit: cover;
}

body.support-page .svc-image-wrap {
  display: grid;
  gap: 8px;
}

body.support-page .svc-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.support-page .svc-image-actions button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 10px;
  font-weight: 700;
}

body.support-page .svc-message-file {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
}

body.support-page .svc-message-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  color: #64748b;
  font-size: 9px;
}

body.support-page .svc-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

body.support-page .svc-message-actions button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 10px;
}

body.support-page .svc-system-msg {
  display: flex;
  justify-content: center;
  padding: 6px 10px;
  color: #64748b;
  font-size: 12px;
}

body.support-page .svc-quick-replies,
body.support-page .svc-compose-tools,
body.support-page .svc-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body.support-page .svc-quick-replies button,
body.support-page .svc-compose-tools button {
  padding: 0 9px;
  font-size: 11px;
}

body.support-page .svc-compose {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

body.support-page .svc-compose-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

body.support-page .svc-attach-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

body.support-page .svc-compose-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

body.support-page .svc-compose-tools button {
  min-height: 34px;
  flex: 1 1 110px;
  border: 0;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body.support-page .svc-compose-tools button span {
  display: inline;
  margin: 0 5px 0 0;
  font-size: 13px;
  line-height: 1;
}

body.support-page .svc-compose textarea {
  min-height: 56px;
  max-height: 120px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 9px 11px;
  resize: vertical;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
}

body.support-page .svc-compose textarea:disabled,
body.support-page .svc-search input:disabled,
body.support-page .svc-compose button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.support-page .svc-compose-actions {
  justify-content: flex-end;
}

body.support-page .svc-info-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

body.support-page .svc-customer-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.support-page .svc-customer-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.support-page .svc-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2563eb, #7c9dff);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

body.support-page .svc-customer-card strong {
  display: block;
  color: #1e293b;
}

body.support-page .svc-customer-card p {
  margin: 4px 0 0;
  color: #64748b;
}

body.support-page .svc-customer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.support-page .svc-customer-tags span {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
}

body.support-page .svc-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.support-page .svc-detail-item {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.support-page .svc-detail-item span {
  color: #64748b;
  font-size: 12px;
}

body.support-page .svc-detail-item strong {
  color: #1e293b;
  font-size: 12px;
}

body.support-page .svc-history-filters {
  display: flex;
  gap: 10px;
}

body.support-page .svc-history-filters input,
body.support-page .svc-history-filters select {
  min-height: 38px;
  flex: 1;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  color: #1e293b;
}

body.support-page .svc-history-list,
body.support-page .svc-record-sections {
  display: grid;
  gap: 8px;
}

body.support-page .svc-history-item,
body.support-page .svc-record-section {
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.support-page .svc-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.support-page .svc-history-item strong,
body.support-page .svc-record-row strong {
  color: #1e293b;
}

body.support-page .svc-history-item p,
body.support-page .svc-history-item small,
body.support-page .svc-record-row span,
body.support-page .svc-record-row small {
  color: #64748b;
}

body.support-page .svc-record-head {
  margin-bottom: 10px;
}

body.support-page .svc-record-head h4 {
  margin: 0;
  color: #1e293b;
}

body.support-page .svc-record-list {
  display: grid;
  gap: 10px;
}

body.support-page .svc-record-row {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
}

body.support-page .svc-empty {
  padding: 20px;
  border: 1px dashed #dbe3ef;
  border-radius: 12px;
  color: #64748b;
  text-align: center;
}

body.support-page .svc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.44);
}

body.support-page .svc-modal.hidden {
  display: none;
}

body.support-page .svc-modal-card {
  width: min(720px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  padding: 14px;
}

body.support-page .svc-modal-head h3 {
  margin: 0;
  color: #1e293b;
}

body.support-page .svc-modal-head button {
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

body.support-page .svc-modal-body {
  margin-top: 14px;
}

body.support-page .svc-welcome-config {
  display: grid;
  gap: 14px;
}

body.support-page .svc-welcome-config label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 800;
}

body.support-page .svc-welcome-config textarea {
  min-height: 130px;
  resize: vertical;
}

body.support-page .svc-welcome-config textarea,
body.support-page .svc-welcome-config input[type="text"],
body.support-page .svc-welcome-config input[type="file"] {
  width: 100%;
  border: 1px solid #dbe6f6;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2a44;
  padding: 10px 12px;
  font: inherit;
}

body.support-page .svc-agent-profile-config {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f6;
  border-radius: 14px;
  background: #f8fbff;
}

body.support-page .svc-agent-profile-config strong {
  display: block;
  color: #1f2a44;
  font-size: 16px;
}

body.support-page .svc-agent-profile-config small {
  display: block;
  margin-top: 4px;
  color: #6b7890;
  font-size: 12px;
  line-height: 1.5;
}

body.support-page .svc-agent-profile-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body.support-page .svc-agent-avatar-preview {
  width: 68px;
  height: 68px;
  border: 1px solid #dbe6f6;
  border-radius: 20px;
  background: #ffffff;
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(15, 35, 80, 0.1);
}

body.support-page .svc-welcome-switch {
  display: flex !important;
  align-items: center;
  grid-template-columns: none;
  gap: 10px !important;
}

body.support-page .svc-welcome-switch input {
  width: 18px;
  height: 18px;
}

body.support-page .svc-welcome-preview {
  width: 260px;
  max-width: 100%;
  height: 140px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

body.support-page .svc-welcome-actions {
  display: flex;
  justify-content: flex-end;
}

body.support-page .svc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

body.support-page .svc-modal-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

body.support-page .svc-modal-actions .primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

body.support-page .svc-modal-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

body.support-page .svc-modal-meta div {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

body.support-page .svc-modal-meta span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

body.support-page .svc-modal-meta strong {
  display: block;
  margin-top: 6px;
  color: #1e293b;
}

body.support-page .svc-modal-transcript {
  display: grid;
  gap: 10px;
}

body.support-page .svc-modal-message {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

body.support-page .svc-modal-message.agent {
  background: #eff6ff;
}

body.support-page .svc-modal-message.customer {
  background: #ffffff;
}

body.support-page .svc-modal-message b {
  color: #1e293b;
}

body.support-page .svc-modal-message p {
  margin: 8px 0;
  color: #1e293b;
  line-height: 1.6;
}

body.support-page .svc-modal-message small {
  color: #64748b;
}

@media (max-width: 1280px) {
  body.support-page .svc-body {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  body.support-page .svc-info-panel {
    grid-column: 1 / -1;
  }
  body.support-page .svc-head-metrics {
    grid-template-columns: 1fr 1fr;
  }
  body.support-page .svc-modal-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body.support-page .svc-shell {
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.support-page .svc-header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  body.support-page .svc-header-left,
  body.support-page .svc-header-right {
    flex-direction: column;
    align-items: stretch;
  }
  body.support-page .svc-agent-meta {
    padding-left: 0;
    border-left: 0;
  }
  body.support-page .svc-body {
    grid-template-columns: 1fr;
  }
  body.support-page .svc-profile-grid,
  body.support-page .svc-modal-meta {
    grid-template-columns: 1fr;
  }
  body.support-page .svc-chat-panel {
    grid-template-rows: auto auto minmax(360px, 1fr) auto auto;
  }
}

/* Compact chat density: close to common mobile messenger proportions. */
body.support-page .svc-body {
  grid-template-columns: 250px minmax(0, 1fr) 280px !important;
  gap: 8px !important;
  padding: 7px 8px 8px !important;
}

body.support-page .svc-conversation-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 9px 8px !important;
}

body.support-page .svc-chat-panel {
  gap: 5px !important;
  padding: 8px !important;
}

body.support-page .svc-chat-card {
  padding: 7px 9px !important;
  border-radius: 10px !important;
}

body.support-page .svc-message-list {
  gap: 6px !important;
  padding: 5px 4px !important;
}

body.support-page .svc-message-bubble {
  max-width: min(64%, 360px) !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}

body.support-page .svc-message-text {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body.support-page .svc-message-meta {
  margin-top: 4px !important;
  font-size: 9px !important;
}

body.support-page .svc-message-actions {
  margin-top: 6px !important;
}

body.support-page .svc-message-actions button {
  min-height: 24px !important;
  padding: 0 8px !important;
}

body.support-page .svc-compose-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.support-page .svc-compose-tools button {
  min-height: 34px !important;
  flex: 1 1 110px !important;
  border-radius: 9px !important;
}

body.support-page .svc-compose-tools button span {
  display: inline !important;
  margin: 0 5px 0 0 !important;
  font-size: 13px !important;
}

body.support-page .svc-compose textarea {
  min-height: 44px !important;
  max-height: 96px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
}

body.support-page .svc-quick-replies button,
body.support-page .svc-compose-actions button,
body.support-page .svc-chat-actions button {
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

body.support-page .svc-attach-toggle {
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}

@media (max-width: 920px) {
  body.support-page .svc-body {
    grid-template-columns: 1fr !important;
  }

  body.support-page .svc-chat-panel {
    grid-template-rows: auto auto minmax(300px, 1fr) auto auto !important;
  }
}

.modal.detail-mode {
  align-items: stretch;
  padding: 0;
}

.modal.detail-mode .dialog {
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  overflow: auto;
}

.detail-shell {
  display: grid;
  gap: 14px;
  padding: 16px 18px 20px;
}

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

.detail-top h2 {
  margin: 0;
  font-size: 22px;
}

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

.detail-back {
  min-width: 82px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand-light);
  background: var(--surface);
}

.detail-search {
  position: static;
  top: auto;
  margin: 0;
}

.detail-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tab-pill {
  min-width: 92px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  background: #2d3649;
  color: #8ba7d7;
  font-weight: 700;
}

.tab-pill.active {
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  color: #111111;
  border-color: transparent;
}

.detail-main {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.detail-main.no-provider {
  grid-template-columns: 1fr;
}

.detail-main.no-provider .detail-load-more {
  grid-column: 1;
}

.detail-provider-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  overflow: auto;
  padding-right: 2px;
}

.detail-provider-rail .provider-pill {
  min-width: 0;
  white-space: nowrap;
}

.detail-grid {
  margin-top: 0;
}

.detail-load-more {
  grid-column: 2;
  width: min(240px, 72%);
  min-height: 40px;
  justify-self: center;
  margin: 4px auto 0;
  border: 1px solid rgba(47, 123, 255, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #2f7bff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.06);
}

@media (max-width: 760px) {
  .category-row {
    top: 64px;
  }

  .section-search {
    top: 114px;
  }

  .game-section {
    grid-template-columns: 1fr;
  }

  .provider-rail {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    position: static;
    padding-bottom: 2px;
  }

  .provider-pill {
    min-width: 88px;
    text-align: center;
  }

  .games-grid {
    gap: 10px;
  }

  .provider-card {
    min-height: 186px;
    padding: 12px;
    border-radius: 14px;
  }

  .provider-card strong {
    font-size: 15px;
  }
}

@media (max-width: 460px) {
  .category-row {
    top: 62px;
  }

  .section-search {
    top: 110px;
  }

  .games-grid {
    gap: 8px;
  }

  .provider-card {
    min-height: 168px;
    padding: 10px;
  }

  .provider-card strong {
    font-size: 13px;
  }

  .provider-card small {
    font-size: 10px;
  }

  .favorite-toggle {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 0;
  }

  .ad-carousel {
    padding-top: 12px;
  }

  .ad-carousel-viewport,
  .ad-slide {
    min-height: 260px;
  }

  .games-grid {
    gap: 10px;
  }

  .provider-card {
    min-height: 198px;
    padding: 12px;
    border-radius: 14px;
  }

  .provider-card strong {
    font-size: 15px;
  }

  .provider-modal-grid {
    grid-template-columns: 1fr;
  }

  .modal.detail-mode .dialog {
    min-height: 100vh;
  }

  .detail-shell {
    padding: 14px 14px 18px;
  }

  .detail-top {
    align-items: flex-start;
  }

  .detail-top h2 {
    font-size: 18px;
  }

  .detail-main {
    grid-template-columns: 1fr;
  }

  .detail-load-more {
    grid-column: 1;
  }

  .detail-provider-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

#homeView > .game-section > .section-search,
#homeView > .game-section > .provider-rail {
  display: none;
}

#homeView > .game-section {
  grid-template-columns: 1fr;
}

.category-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 28%),
    linear-gradient(180deg, #0a0f18 0%, #06070b 100%);
  color: #eef3ff;
}

.slot-page {
  overflow-x: hidden;
  overflow-y: auto;
}

.category-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 14px 14px 24px;
}

.category-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 0 14px;
  background: rgba(6, 7, 11, 0.96);
  backdrop-filter: blur(20px);
}

.category-back,
.category-switch-button,
.category-menu-button {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #d8e3ff;
}

.category-back {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.slot-page .category-back {
  background: transparent;
  box-shadow: none;
}

.category-back img,
.game-page-topbar button img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  display: block;
  transform: scale(1.02);
  transform-origin: center;
}

.category-title-wrap {
  position: relative;
  display: grid;
  justify-items: center;
}

.category-switch-button {
  min-width: 160px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: #1a2230;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.05) inset;
  color: #fff7dd;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.category-switch-button::after {
  content: "▾";
  margin-left: 8px;
  color: var(--brand-light);
  font-size: 12px;
}

.slot-page .category-topbar {
  grid-template-columns: 56px minmax(0, 1fr);
}

.slot-page .category-title-wrap {
  justify-items: center;
}

.category-switch {
  position: absolute;
  top: 54px;
  display: none;
  width: 210px;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  background: rgba(12, 16, 26, 0.98);
  box-shadow: var(--shadow);
}

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

.category-switch button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 10px;
  background: #1b2432;
  color: #c8d8ff;
  text-align: left;
}

.category-switch button:hover {
  border-color: var(--brand);
  color: #fff3c2;
}

.category-switch button.active {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(247, 215, 106, 0.18), rgba(35, 45, 63, 0.96));
  color: #ffe8a4;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.18);
}

.category-search {
  margin-top: 8px;
  position: sticky;
  top: 78px;
  z-index: 18;
}

.search-box.category-search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(126, 157, 220, 0.75);
  border-radius: 999px;
  background: rgba(18, 24, 38, 0.96);
}

.search-box.category-search span {
  width: 12px;
  height: 12px;
  border: 2px solid var(--brand-light);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.search-box.category-search span::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 8px;
  height: 2px;
  background: var(--brand-light);
  transform: rotate(45deg);
}

.search-box.category-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f4f7ff;
  outline: none;
}

.category-tabs {
  display: flex;
  gap: 12px;
  margin: 14px 0 16px;
  overflow-x: auto;
  position: sticky;
  top: 140px;
  z-index: 17;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, rgba(10, 15, 24, 0.98), rgba(10, 15, 24, 0.86));
}

.category-tab {
  min-height: 42px;
  min-width: 86px;
  padding: 0 16px;
  border: 1px solid rgba(127, 154, 208, 0.34);
  border-radius: 10px;
  background: #1c2434;
  color: #9cb5e2;
  font-weight: 700;
}

.category-tab.active {
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  color: #111111;
  border-color: transparent;
}

.category-layout {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
}

.slot-page .category-layout {
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
}

.provider-list {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 210px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  align-self: start;
}

.slot-page .provider-list {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  top: 184px;
}

.provider-button {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid rgba(127, 154, 208, 0.24);
  border-radius: 12px;
  background: rgba(29, 38, 56, 0.96);
  color: #a7bbe0;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.slot-page .provider-button {
  min-height: 54px;
  padding: 0 10px;
  text-align: center;
  font-size: 15px;
}

.slot-page .game-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex-shrink: 1;
  padding: 18px;
  min-height: 220px;
  border-radius: 12px;
}

.slot-page .game-card strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 58px;
  font-size: 18px;
  line-height: 1.1;
  text-align: left;
  word-break: break-word;
}

.slot-page .game-card-enter {
  position: absolute;
  left: 18px;
  bottom: 16px;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: #111111;
  background: linear-gradient(180deg, #F7D76A, #D4AF37);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
}

.slot-page .badge {
  top: 12px;
  left: 12px;
  right: auto;
}

.slot-page .game-art {
  position: absolute;
  inset: 48px 18px 62px;
  width: auto;
  height: auto;
  object-fit: cover;
  opacity: 0.95;
}

.slot-page .star-button {
  top: 12px;
  right: 12px;
}

.slot-page .game-card:hover .game-card-enter {
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45);
}

.provider-button.active {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(30, 39, 55, 0.96));
  color: #ffe8a4;
  box-shadow: 0 0 0 1px rgba(247, 215, 106, 0.16) inset, 0 0 18px rgba(212, 175, 55, 0.22);
}

.games-area {
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-right: 2px;
}

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

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #161616, #090909);
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.game-card:hover {
  border-color: rgba(247, 215, 106, 0.6);
  box-shadow: 0 0 0 1px rgba(247, 215, 106, 0.15) inset, 0 10px 28px rgba(212, 175, 55, 0.28);
  transform: translateY(-2px);
}

.game-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 1;
}

.game-card-body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 16px 14px 14px;
}

.game-card-provider {
  justify-self: start;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.14);
  color: #ffe7a3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.game-card strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.12;
}

.star-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(14, 18, 26, 0.78);
  color: rgba(255, 255, 255, 0.55);
}

.star-button.active {
  border-color: rgba(247, 215, 106, 0.7);
  color: var(--brand-light);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
}

.star-button svg {
  width: 16px;
  height: 16px;
}

.empty-state {
  margin-top: 28px;
  padding: 28px;
  border: 1px dashed rgba(212, 175, 55, 0.24);
  border-radius: 14px;
  color: #9fb0d6;
  text-align: center;
}

.game-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #0a0f18, #05070b);
  color: #eef3ff;
}

.game-page-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 14px;
}

.game-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  margin-bottom: 14px;
}

.game-page-topbar h1 {
  margin: 0;
  font-size: 20px;
  color: #ffe8a4;
}

.game-page-topbar button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  background: #1a2230;
  color: #e6efff;
  overflow: hidden;
}

.game-page-topbar [data-go-back] {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.game-launch {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}

.game-launch-card,
.game-launch-frame {
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 16px;
  background: rgba(16, 21, 32, 0.96);
  box-shadow: var(--shadow);
}

.game-launch-card {
  padding: 16px;
}

.game-launch-card img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.game-launch-meta {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.game-launch-meta span {
  color: var(--brand-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.game-launch-frame {
  min-height: 72vh;
  overflow: hidden;
}

.game-launch-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 72vh;
  border: 0;
  background: #0b0d12;
}

@media (max-width: 860px) {
  .category-layout,
  .game-launch {
    grid-template-columns: 1fr;
  }

  .provider-list {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .slot-page .category-topbar {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .slot-page .category-layout {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
  }

  .slot-page .provider-list {
    grid-template-columns: 1fr;
    position: sticky;
    top: 184px;
  }

  .slot-page .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .category-shell,
  .game-page-shell {
    padding-inline: 12px;
  }

  .category-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .category-switch-button {
    min-width: 132px;
    font-size: 18px;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .provider-list {
    grid-template-columns: 1fr;
  }

  .slot-page .category-tabs {
    top: 132px;
  }

  .slot-page .category-search {
    top: 70px;
  }

  .slot-page .category-layout {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .slot-page .provider-list {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    position: sticky;
    top: 178px;
  }

  .slot-page .provider-button {
    min-height: 44px;
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
  }

  .slot-page .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .slot-page .game-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 172px;
    border-radius: 12px;
  }

  .slot-page .game-card strong {
    left: 14px;
    right: 14px;
    bottom: 52px;
    font-size: 12px;
    line-height: 1.15;
  }

  .slot-page .game-card-enter {
    left: 14px;
    bottom: 12px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 10px;
  }

  .slot-page .badge {
    top: 8px;
    left: 8px;
  }

  .slot-page .game-art {
    inset: 42px 14px 54px;
  }

  .slot-page .star-button {
    width: 26px;
    height: 26px;
    top: 7px;
    right: 7px;
  }
}

@media (max-width: 460px) {
  .ad-carousel-viewport,
  .ad-slide {
    min-height: 228px;
  }

  .provider-card {
    min-height: 172px;
  }

  .provider-card strong {
    font-size: 13px;
  }

  .provider-card small {
    font-size: 11px;
  }
}

.game-section {
  display: block;
  margin: 18px 0 22px;
}

.game-section-title {
  margin: 0 0 14px;
}

.game-section-title h2 {
  margin: 0;
  font-size: 22px;
  color: var(--brand-light);
  letter-spacing: 1px;
}

.section-link,
.expand-toggle {
  border: 0;
  background: transparent;
  color: #7aa8df;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 0;
  font-size: 14px;
}

.expand-toggle span {
  font-size: 12px;
}

.category-row {
  position: sticky;
  top: 68px;
  z-index: 9;
  padding: 10px 0 12px;
  margin: 0;
  overflow-x: auto;
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(18px);
}

.category-row::-webkit-scrollbar,
.provider-rail::-webkit-scrollbar {
  height: 6px;
}

.category-row::-webkit-scrollbar-thumb,
.provider-rail::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 999px;
}

.category-row button {
  min-width: 92px;
  white-space: nowrap;
}

.game-section {
  display: none;
  margin: 18px 0 22px;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.game-section.active {
  display: grid;
}

.game-section.no-rail {
  grid-template-columns: 1fr;
}

.game-section-title,
.section-search,
.expand-toggle {
  grid-column: 1 / -1;
}

.section-search {
  position: sticky;
  top: 124px;
  z-index: 8;
  margin: 0;
  width: 100%;
  background: rgba(5, 5, 5, 0.98);
}

.provider-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding-right: 2px;
  position: sticky;
  top: 176px;
}

.provider-pill {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  background: #182131;
  color: #a9bce0;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.provider-pill.active {
  border-color: var(--brand);
  background: linear-gradient(180deg, #2b2d35, #1a1a1a);
  color: #f7d76a;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.14);
}

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

.provider-card {
  position: relative;
  min-height: 240px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #161616, #090909);
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.provider-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 26%, rgba(0, 0, 0, 0.82) 100%);
}

.provider-card strong,
.provider-card small,
.provider-card-chip,
.favorite-toggle {
  position: relative;
  z-index: 2;
}

.provider-card strong {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.provider-card small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.provider-card-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #111111;
  background: linear-gradient(180deg, #f7d76a, #d4af37);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.favorite-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.62);
  color: rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
}

.favorite-toggle svg {
  width: 16px;
  height: 16px;
}

.favorite-toggle.active {
  color: #ffd85a;
  box-shadow: 0 0 12px rgba(255, 216, 90, 0.24);
}

.provider-modal {
  display: grid;
  gap: 16px;
}

.provider-modal > p {
  margin: 0;
  color: var(--muted);
}

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

.provider-mini-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.provider-mini-card span,
.provider-mini-card small {
  display: block;
}

.provider-mini-card strong {
  display: block;
  margin: 6px 0;
  color: var(--brand-light);
}

/* ===== Final mobile agent/profile overrides at EOF ===== */
body.agent-page { margin: 0 !important; min-height: 100vh !important; background: #f3f7ff !important; color: #14213f !important; }
body.agent-page .agent-shell { width: min(100%, 430px) !important; min-height: 100vh !important; margin: 0 auto !important; padding: 0 0 76px !important; background: #f3f7ff !important; transform: none !important; }
body.agent-page .agent-header { position: sticky !important; top: 0 !important; z-index: 10 !important; display: grid !important; grid-template-columns: 42px 1fr 42px !important; align-items: center !important; min-height: 58px !important; padding: 8px 12px !important; border-bottom: 1px solid #dbe8ff !important; background: rgba(255,255,255,.94) !important; }
body.agent-page .agent-header h1 { margin: 0 !important; color: #173e9e !important; text-align: center !important; font-size: 18px !important; }
body.agent-page .agent-main { display: grid !important; gap: 12px !important; padding: 12px !important; }
body.agent-page .agent-mobile-hero, body.agent-page .agent-mobile-card, body.agent-page .agent-sub-card, body.agent-page .agent-record-card, body.agent-page .agent-customer-row { border: 1px solid #dbe8ff !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 10px 24px rgba(47,107,255,.08) !important; }
body.agent-page .agent-mobile-hero, body.agent-page .agent-mobile-card { display: grid !important; gap: 12px !important; padding: 14px !important; }
body.agent-page .agent-mobile-hero { background: radial-gradient(circle at 88% 6%, rgba(47,107,255,.2), transparent 34%), linear-gradient(135deg,#fff,#eaf2ff) !important; }
body.agent-page .agent-mobile-hero h2, body.agent-page .agent-mobile-card h3 { margin: 0 !important; color: #173e9e !important; }
body.agent-page .agent-mobile-hero label, body.agent-page .agent-poster-link { overflow-wrap: anywhere !important; color: #173e9e !important; }
body.agent-page .agent-mobile-grid, body.agent-page .agent-mobile-summary, body.agent-page .agent-mobile-detail-list, body.agent-page .agent-sub-detail { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
body.agent-page .agent-mobile-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
body.agent-page .agent-mobile-grid article, body.agent-page .agent-mobile-summary article, body.agent-page .agent-mobile-detail-list article, body.agent-page .agent-sub-detail article, body.agent-page .agent-record-card article { padding: 10px !important; border-radius: 12px !important; background: #f6f9ff !important; }
body.agent-page .agent-mobile-grid span, body.agent-page .agent-mobile-summary span, body.agent-page .agent-mobile-detail-list span, body.agent-page .agent-sub-detail span, body.agent-page .agent-record-card span { color: #64748b !important; font-size: 12px !important; font-weight: 800 !important; }
body.agent-page .agent-mobile-grid strong, body.agent-page .agent-mobile-summary strong, body.agent-page .agent-mobile-detail-list strong, body.agent-page .agent-sub-detail strong, body.agent-page .agent-record-card strong { display: block !important; margin-top: 5px !important; color: #0b55e8 !important; font-size: 16px !important; overflow-wrap: anywhere !important; }
body.agent-page .agent-mobile-actions, body.agent-page .agent-mobile-menu { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
body.agent-page .agent-mobile-menu { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
body.agent-page .agent-mobile-actions button, body.agent-page .agent-mobile-menu button, body.agent-page .agent-poster-card button, body.agent-page .agent-text-link { min-height: 42px !important; border: 0 !important; border-radius: 12px !important; background: #0b55e8 !important; color: #fff !important; font-weight: 950 !important; }
body.agent-page .agent-mobile-list { display: grid !important; gap: 10px !important; }
body.agent-page .agent-sub-card { overflow: hidden !important; }
body.agent-page .agent-sub-card > button, body.agent-page .agent-customer-row { display: grid !important; gap: 6px !important; width: 100% !important; padding: 13px !important; border: 0 !important; background: #fff !important; color: #14213f !important; text-align: left !important; }
body.agent-page .agent-sub-card > button { grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; }
body.agent-page .agent-sub-detail { display: none !important; padding: 0 13px 13px !important; }
body.agent-page .agent-sub-card.open .agent-sub-detail { display: grid !important; }
body.agent-page .agent-record-card { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; padding: 13px !important; }
body.agent-page .agent-record-card > div { grid-column: 1/-1 !important; display: flex !important; justify-content: space-between !important; }
body.agent-page .agent-poster-card { justify-items: center !important; }
body.agent-page .agent-poster-card img { width: 180px !important; height: 180px !important; border-radius: 18px !important; }
body.agent-page .agent-bottom-tabs { position: fixed !important; left: 50% !important; bottom: 0 !important; z-index: 20 !important; display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; width: min(100%,430px) !important; transform: translateX(-50%) !important; border-top: 1px solid #dbe8ff !important; background: rgba(255,255,255,.96) !important; }
body.agent-page .agent-bottom-tabs button { min-height: 58px !important; border: 0 !important; background: transparent !important; color: #64748b !important; font-size: 12px !important; font-weight: 900 !important; }
body.agent-page .agent-bottom-tabs button.active { color: #0b55e8 !important; }

/* Agent permission gate: non-agents see no commission, team or promotion data. */
body.agent-page.agent-locked .agent-main {
  display: grid !important;
  align-items: center !important;
  min-height: calc(100dvh - 64px) !important;
  padding: 24px 18px !important;
}

body.agent-page.agent-locked .agent-bottom-tabs {
  display: none !important;
}

body.agent-page .agent-locked-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  padding: 30px 22px;
  border: 1px solid #dbe8ff;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(47, 107, 255, 0.1);
  text-align: center;
}

body.agent-page .agent-locked-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #ffffff;
  background: #2f6bff;
  font-size: 30px;
  line-height: 1;
}

body.agent-page .agent-locked-card h2 {
  margin: 2px 0 0;
  color: #152947;
  font-size: 21px;
}

body.agent-page .agent-locked-card > p {
  max-width: 320px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.75;
}

body.agent-page .agent-locked-primary,
body.agent-page .agent-locked-service {
  width: min(100%, 300px);
  min-height: 44px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
}

body.agent-page .agent-locked-primary {
  border: 0;
  color: #ffffff;
  background: #2f6bff;
}

body.agent-page .agent-locked-service {
  border: 1px solid #b9cdf9;
  color: #2f6bff;
  background: #ffffff;
}

body.agent-page .agent-application-form {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}

body.agent-page .agent-application-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

body.agent-page .agent-application-form input,
body.agent-page .agent-application-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7e2f3;
  border-radius: 9px;
  background: #f9fbff;
  color: #172033;
  font: inherit;
  outline: none;
  resize: vertical;
}

body.agent-page .agent-application-form input:focus,
body.agent-page .agent-application-form textarea:focus {
  border-color: #2f6bff;
}

body.agent-page .agent-application-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.agent-page .agent-application-form button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  background: #2f6bff;
  font-weight: 800;
}

body.agent-page .agent-application-form button.secondary {
  border: 1px solid #b9cdf9;
  color: #2f6bff;
  background: #ffffff;
}
body.profile-mode .profile-invite-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
body.profile-mode .profile-invite-card .profile-gift-art, body.profile-mode .profile-agent-code { display: none !important; }

body.agent-page .agent-header {
  grid-template-columns: 58px 1fr 58px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
}

body.agent-page .agent-back {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin-left: 4px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.agent-page .agent-back img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* ===== Larger mobile back buttons ===== */
.agent-back,
.recharge-back,
.records-back,
.category-back,
.promo-back,
.detail-back,
.withdraw-icon-button,
.game-page-topbar [data-go-back],
[data-first-back],
[data-loss-back],
[data-vip-back] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.agent-back img,
.recharge-back img,
.records-back img,
.category-back img,
.promo-back img,
.withdraw-icon-button img,
.game-page-topbar [data-go-back] img,
[data-first-back] img,
[data-loss-back] img,
[data-vip-back] img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.detail-back {
  padding: 0 18px !important;
  width: auto !important;
}

body.agent-page .agent-header {
  margin: 0 !important;
  padding: 8px 12px !important;
  grid-template-columns: 58px 1fr 58px !important;
}

body.agent-page .agent-back {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin-left: 4px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.agent-page .agent-back img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* ===== Home color refresh only: blue-white finance style ===== */
body:not(.promo-mode):not(.profile-mode):not(.agent-page):not(.ops-page):not(.support-page):not(.recharge-page):not(.withdraw-page):not(.records-page) {
  --bg: #F4F7FC;
  --surface: #FFFFFF;
  --surface-2: #EDF2FA;
  --line: #E7EDF8;
  --text: #1F2A44;
  --muted: #8B95A7;
  --brand: #0E3B8F;
  --brand-dark: #0E3B8F;
  --brand-light: #2F7BFF;
  --gold: #F6C453;
  background: #F4F7FC !important;
  color: #3A4A66 !important;
}

body:not(.promo-mode):not(.profile-mode) .app-shell {
  background: #F4F7FC !important;
}

body:not(.promo-mode):not(.profile-mode) .app-shell > .topbar,
body:not(.promo-mode):not(.profile-mode) .main-header {
  background: #0E3B8F !important;
  color: #FFFFFF !important;
  border-color: #0E3B8F !important;
  box-shadow: none !important;
}

body:not(.promo-mode):not(.profile-mode) .brand,
body:not(.promo-mode):not(.profile-mode) .brand strong,
body:not(.promo-mode):not(.profile-mode) .brand small,
body:not(.promo-mode):not(.profile-mode) .header-tools,
body:not(.promo-mode):not(.profile-mode) .auth-user-panel {
  color: #FFFFFF !important;
}

body:not(.promo-mode):not(.profile-mode) .account-pill {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

body:not(.promo-mode):not(.profile-mode) .account-pill strong {
  color: #FFFFFF !important;
}

body:not(.promo-mode):not(.profile-mode) .account-pill small,
body:not(.promo-mode):not(.profile-mode) .account-pill span {
  color: #F6C453 !important;
}

body:not(.promo-mode):not(.profile-mode) .ghost-button,
body:not(.promo-mode):not(.profile-mode) .balance-refresh,
body:not(.promo-mode):not(.profile-mode) .language-flag {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

body:not(.promo-mode):not(.profile-mode) .primary-button {
  background: #2F7BFF !important;
  border-color: #2F7BFF !important;
  color: #FFFFFF !important;
}

#homeView {
  background: #F4F7FC !important;
  color: #3A4A66 !important;
}

#homeView .notice-bar,
#homeView .notice-track,
.notice-bar {
  background: #FFFFFF !important;
  border-color: #E7EDF8 !important;
  color: #3A4A66 !important;
}

#homeView .notice-marquee,
#homeView .notice-marquee span,
.notice-marquee,
.notice-marquee span {
  color: #3A4A66 !important;
}

#homeView .notice-dot,
.notice-dot {
  background: #2F7BFF !important;
}

#homeView .category-row {
  background: #FFFFFF !important;
  border-color: #E7EDF8 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

#homeView .category-row button {
  background: transparent !important;
  color: #8B95A7 !important;
  box-shadow: none !important;
}

#homeView .category-row button.active {
  background: transparent !important;
  color: #0E3B8F !important;
}

#homeView .category-row button::after {
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: 40px !important;
  height: 4px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#homeView .category-row button.active::after {
  background: #F6C453 !important;
}

#homeView .search-box,
#homeView .home-search,
#homeView .section-search,
.search-box {
  background: #FFFFFF !important;
  border-color: #DCE5F5 !important;
  color: #3A4A66 !important;
  box-shadow: none !important;
}

#homeView .search-box span,
.search-box span {
  color: #8B95A7 !important;
}

#homeView .search-box input,
.search-box input {
  color: #3A4A66 !important;
}

#homeView .search-box input::placeholder,
.search-box input::placeholder {
  color: #8B95A7 !important;
}

#homeView .game-section {
  background: transparent !important;
}

#homeView .game-section-title h2,
#homeView .section-title h2 {
  color: #0E3B8F !important;
}

#homeView .section-link,
#homeView .expand-toggle {
  color: #3A4A66 !important;
}

#homeView .provider-card {
  box-shadow: 0 8px 18px rgba(31, 42, 68, 0.10) !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav {
  background: #FFFFFF !important;
  border-top-color: #E7EDF8 !important;
  box-shadow: 0 -8px 22px rgba(31, 42, 68, 0.06) !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav button {
  color: #AAB3C5 !important;
  background: transparent !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav button.active {
  color: #2F7BFF !important;
  background: transparent !important;
}

/* 首页公告与广告精简：公告不叠字，广告只显示图片 */
#homeView .notice-track {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

#homeView .notice-marquee {
  display: inline-flex !important;
  min-width: max-content !important;
  width: max-content !important;
  gap: 0 !important;
  white-space: nowrap !important;
  animation: notice-marquee 24s linear infinite !important;
}

#homeView .notice-marquee[hidden],
#homeView .notice-marquee + .notice-marquee {
  display: none !important;
}

#homeView .notice-marquee span {
  display: inline-block !important;
  max-width: none !important;
  white-space: nowrap !important;
}

#homeView .notice-marquee span::after {
  content: "" !important;
  margin: 0 !important;
}

#homeView .ad-carousel {
  gap: 8px !important;
  padding-bottom: 6px !important;
}

#homeView .ad-carousel-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

#homeView .ad-carousel-viewport::-webkit-scrollbar {
  display: none !important;
}

#homeView .ad-slide {
  min-height: 178px !important;
  background: #ffffff !important;
}

#homeView .ad-slide::after,
#homeView .ad-copy {
  display: none !important;
}

#homeView .ad-dots {
  display: flex !important;
}

#homeView .ad-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 540px) {
  #homeView .ad-slide {
    min-height: 164px !important;
  }
}

/* 首页分类图标放大：保持原容器，只放大图片本身 */
#homeView .category-row button {
  min-height: 36px !important;
}

#homeView .category-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  transform: scale(1.35) !important;
  transform-origin: center !important;
}

/* 首页游戏区：去掉标题旁“全部”，让游戏列表更靠上 */
#homeView .game-section .section-link {
  display: none !important;
}

#homeView .game-section {
  gap: 6px !important;
  margin-top: 8px !important;
}

#homeView .game-section .game-section-title {
  margin-bottom: 0 !important;
}

/* 首页分类区再压矮：让分类栏更紧凑并靠近搜索框 */
#homeView .home-search {
  min-height: 38px !important;
  margin: 5px 0 4px !important;
  border-radius: 12px !important;
}

#homeView .category-row {
  padding-top: 3px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  border-radius: 14px !important;
}

#homeView .category-row button {
  min-width: 76px !important;
  min-height: 48px !important;
  padding: 3px 6px 6px !important;
  gap: 1px !important;
}

#homeView .category-icon-wrap {
  width: 34px !important;
  height: 32px !important;
}

#homeView .category-icon-wrap img {
  width: 34px !important;
  height: 34px !important;
  transform: scale(1.3) !important;
}

#homeView .category-label {
  font-size: 11px !important;
  line-height: 1.05 !important;
}

#homeView .category-row button::after {
  height: 3px !important;
  bottom: 0 !important;
}

#homeView .game-section {
  margin-top: 4px !important;
  gap: 4px !important;
}

#homeView .game-section .game-section-title {
  min-height: 22px !important;
  margin: 0 !important;
}

#homeView .game-section-title h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

/* 我的页面服务区：密码入口与退出登录 */
body.profile-mode .profile-service-grid .profile-line-icon.loginPassword {
  color: #2F7BFF !important;
}

body.profile-mode .profile-service-grid .profile-line-icon.withdrawPassword {
  color: #18A874 !important;
}

body.profile-mode .profile-lux-card .profile-logout-simple {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 12px !important;
  border: 0 !important;
  border-top: 1px solid #E7EDF8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FF4D4F !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body .modal.profile-form-mode {
  background: rgba(15, 35, 80, 0.2);
  backdrop-filter: blur(12px);
}

body .modal.profile-form-mode .dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 26px 20px 20px;
  border: 1px solid #E7EDF8;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 18px 42px rgba(15, 35, 80, 0.16);
}

body .modal.profile-form-mode .dialog h2 {
  margin: 0 0 18px;
  color: #1F2A44;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

body .modal.profile-form-mode .close {
  width: 36px;
  height: 36px;
  background: #EEF2F8;
  color: #6B7890;
  font-size: 26px;
}

.profile-password-form {
  display: grid;
  gap: 14px;
}

.profile-password-form label {
  display: grid;
  gap: 7px;
  color: #3A4A66;
  font-size: 13px;
  font-weight: 800;
}

.profile-password-form input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #DCE5F5;
  border-radius: 12px;
  outline: none;
  background: #FFFFFF;
  color: #1F2A44;
  font-size: 15px;
  box-sizing: border-box;
}

.profile-password-form input:focus {
  border-color: #2F7BFF;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.12);
}

.profile-password-form button,
.profile-logout-dialog .danger {
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #3B86FF, #176BFF);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
}

.profile-logout-dialog {
  display: grid;
  gap: 18px;
}

.profile-logout-dialog p {
  margin: 0;
  color: #1F2A44;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

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

.profile-logout-dialog button {
  height: 46px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 900;
}

.profile-logout-dialog .ghost {
  border: 1px solid #DCE5F5;
  background: #FFFFFF;
  color: #3A4A66;
}

.profile-logout-dialog .danger {
  background: #FF4D4F;
}

/* 底部导航优化：蓝白金融风，保留原 5 个入口和点击逻辑 */
.bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  width: min(520px, 100%) !important;
  min-height: 70px !important;
  padding: 7px 10px max(9px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(220, 229, 245, 0.9) !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 -12px 30px rgba(15, 35, 80, 0.10) !important;
  backdrop-filter: blur(18px) !important;
  gap: 5px !important;
}

.bottom-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  left: 50% !important;
  width: 42px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #DCE5F5 !important;
  transform: translateX(-50%) !important;
}

.bottom-nav button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 6px 4px 5px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #8B95A7 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.bottom-nav button svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  filter: none !important;
}

.bottom-nav button svg circle[fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}

.bottom-nav button > span:not(.user-notification-badge) {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.bottom-nav button.active {
  color: #2F7BFF !important;
  background: #EAF2FF !important;
  box-shadow: inset 0 0 0 1px rgba(47, 123, 255, 0.10), 0 8px 18px rgba(47, 123, 255, 0.10) !important;
}

.bottom-nav button.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #2F7BFF !important;
  transform: translateX(-50%) !important;
}

.bottom-nav button[data-open="recharge"] {
  min-height: 62px !important;
  margin-top: -12px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #3B86FF 0%, #176BFF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(47, 123, 255, 0.30) !important;
  transform: translateY(-3px) !important;
}

.bottom-nav button[data-open="recharge"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px 10px auto !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

.bottom-nav button[data-open="recharge"] svg {
  width: 24px !important;
  height: 24px !important;
  filter: drop-shadow(0 4px 8px rgba(5, 34, 94, 0.22)) !important;
}

.bottom-nav button[data-open="recharge"] span {
  font-size: 12px !important;
  font-weight: 900 !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav button.active,
body.promo-mode .bottom-nav button.active,
body.profile-mode .bottom-nav button.active {
  color: #2F7BFF !important;
  background: #EAF2FF !important;
  box-shadow: inset 0 0 0 1px rgba(47, 123, 255, 0.10), 0 8px 18px rgba(47, 123, 255, 0.10) !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav button:not(.active):not([data-open="recharge"]),
body.promo-mode .bottom-nav button:not(.active):not([data-open="recharge"]),
body.profile-mode .bottom-nav button:not(.active):not([data-open="recharge"]) {
  color: #8B95A7 !important;
  background: transparent !important;
}

body:not(.promo-mode):not(.profile-mode) .bottom-nav button[data-open="recharge"],
body.promo-mode .bottom-nav button[data-open="recharge"],
body.profile-mode .bottom-nav button[data-open="recharge"] {
  background: linear-gradient(180deg, #3B86FF 0%, #176BFF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(47, 123, 255, 0.30) !important;
}

/* 优惠页：邀请好友 · 轻松领奖 */
body.invite-reward-body {
  margin: 0;
  min-height: 100vh;
  background: #F4F7FC;
  color: #1F2A44;
  font-family: "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

.invite-reward-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 86px;
  background: #F4F7FC;
}

.invite-reward-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 14px;
  border-bottom: 1px solid #E7EDF8;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.invite-reward-topbar h1 {
  margin: 0;
  color: #1F2A44;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.invite-reward-topbar button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: #EEF5FF;
  color: #2F7BFF;
  font-size: 13px;
  font-weight: 900;
}

.invite-reward-topbar button:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  padding: 0;
}

.invite-reward-topbar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invite-reward-main {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.invite-reward-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 10px;
  width: min(520px, 100%);
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #E7EDF8;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 26px rgba(15, 35, 80, 0.08);
  transform: translateX(-50%);
  box-sizing: border-box;
}

.invite-reward-actions button {
  height: 48px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
}

.invite-reward-actions button:first-child {
  border: 1px solid #DCE5F5;
  background: #FFFFFF;
  color: #3A4A66;
}

.invite-reward-actions button:last-child {
  border: 0;
  background: linear-gradient(180deg, #3B86FF, #176BFF);
  color: #FFFFFF;
}

.invite-reward-page {
  display: grid;
  gap: 14px;
  color: #1F2A44;
}

.invite-back {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #DCE5F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F7BFF;
  font-weight: 900;
}

.invite-loading,
.invite-panel,
.invite-hero {
  border: 1px solid #E7EDF8;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(15, 35, 80, 0.06);
}

.invite-loading {
  padding: 28px 18px;
  text-align: center;
  color: #6B7890;
  font-weight: 800;
}

.invite-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  min-height: 178px;
  padding: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(246, 196, 83, 0.28), transparent 120px),
    linear-gradient(135deg, #EAF2FF 0%, #FFFFFF 56%, #EEF5FF 100%);
}

.invite-hero span,
.invite-section-head small,
.invite-friend-main p,
.invite-progress-meta {
  color: #6B7890;
}

.invite-hero span {
  font-size: 12px;
  font-weight: 900;
}

.invite-hero h2 {
  margin: 8px 0 8px;
  color: #0E3B8F;
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.12;
}

.invite-hero p {
  margin: 0;
  color: #3A4A66;
  font-weight: 800;
}

.invite-hero strong {
  display: block;
  margin-top: 8px;
  color: #2F7BFF;
  font-size: 22px;
  font-weight: 900;
}

.invite-hero-gift {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 26px;
  background: linear-gradient(180deg, #3B86FF, #176BFF);
  box-shadow: 0 16px 28px rgba(47, 123, 255, 0.28);
}

.invite-hero-gift::before,
.invite-hero-gift::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, #FFE78A, #F6C453);
}

.invite-hero-gift::before {
  width: 18px;
  height: 108px;
}

.invite-hero-gift::after {
  width: 108px;
  height: 18px;
}

.invite-hero-gift i {
  position: absolute;
  top: -16px;
  width: 78px;
  height: 28px;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #FFF0A8, #F6C453);
  box-shadow: 0 7px 14px rgba(246, 196, 83, 0.28);
}

.invite-hero-gift b,
.invite-hero-gift em {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  text-shadow: 0 3px 8px rgba(6, 30, 79, 0.3);
}

.invite-hero-gift b {
  margin-top: 18px;
  font-size: 22px;
  line-height: 1;
}

.invite-hero-gift em {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.invite-panel {
  padding: 16px;
}

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

.invite-section-head h3 {
  margin: 0;
  color: #1F2A44;
  font-size: 18px;
}

.invite-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #DCE5F5;
  border-radius: 14px;
  background: #F8FAFD;
}

.invite-link-box span {
  overflow: hidden;
  color: #0E3B8F;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-link-box button,
.invite-friend-side button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 12px;
  background: #2F7BFF;
  color: #FFFFFF;
  font-weight: 900;
}

.invite-share-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.invite-share-row button {
  min-height: 38px;
  border: 1px solid #DCE5F5;
  border-radius: 12px;
  background: #FFFFFF;
  color: #3A4A66;
  font-weight: 800;
}

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

.invite-stats article {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: #F4F7FC;
}

.invite-stats span {
  color: #6B7890;
  font-size: 12px;
  font-weight: 800;
}

.invite-stats strong {
  display: block;
  margin-top: 6px;
  color: #2F7BFF;
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.invite-friend-list {
  display: grid;
  gap: 10px;
}

.invite-friend-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #E7EDF8;
  border-radius: 16px;
  background: #FFFFFF;
}

.invite-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EAF2FF;
  color: #2F7BFF;
  font-weight: 900;
}

.invite-friend-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.invite-friend-title strong {
  color: #1F2A44;
  font-size: 15px;
}

.invite-friend-title span {
  color: #8B95A7;
  font-size: 12px;
  font-weight: 800;
}

.invite-friend-main p {
  margin: 4px 0 8px;
  font-size: 12px;
}

.invite-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.invite-progress {
  overflow: hidden;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: #EEF2F8;
}

.invite-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2F7BFF, #18A874);
}

.invite-friend-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.invite-status {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 24px;
}

.invite-status.warning {
  background: #FFF4D8;
  color: #D99A00;
}

.invite-status.success {
  background: #E7F8EF;
  color: #18A874;
}

.invite-status.claimed {
  background: #EAF2FF;
  color: #2F7BFF;
}

.invite-status.danger {
  background: #FFEAEA;
  color: #FF4D4F;
}

.invite-friend-side button:disabled {
  background: #EEF2F8;
  color: #8B95A7;
}

.invite-rules p,
.invite-rules li {
  color: #3A4A66;
  line-height: 1.75;
}

.invite-rules p {
  margin: 0 0 10px;
}

.invite-rules ol {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 620px) {
  .invite-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    padding: 18px;
  }

  .invite-hero-gift {
    width: 86px;
    height: 86px;
  }

  .invite-hero-gift::before {
    height: 86px;
  }

  .invite-hero-gift::after {
    width: 86px;
  }

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

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

  .invite-friend-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .invite-friend-side {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
  }
}

/* 邀请好友奖励页：iPhone 15 紧凑版 */
body.invite-reward-body {
  overflow-x: hidden;
  background: #F4F7FC;
}

.invite-reward-shell {
  width: min(100%, 430px);
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

.invite-reward-topbar {
  grid-template-columns: 40px minmax(0, 1fr) 70px;
  min-height: 56px;
  padding: 8px 14px;
}

.invite-reward-topbar h1 {
  font-size: 17px;
  letter-spacing: 0;
}

.invite-reward-topbar button {
  min-height: 36px;
  padding: 0 9px;
  font-size: 12px;
}

.invite-reward-topbar button:first-child {
  width: 36px;
}

.invite-reward-main {
  gap: 12px;
  padding: 12px;
}

.invite-reward-page {
  gap: 12px;
}

.invite-loading,
.invite-panel,
.invite-hero {
  border-color: #E7EDF8;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.045);
}

.invite-hero {
  grid-template-columns: minmax(0, 1fr) 102px;
  min-height: 160px;
  height: 160px;
  padding: 15px 16px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 83% 22%, rgba(246, 196, 83, 0.24), transparent 82px),
    radial-gradient(circle at 92% 82%, rgba(47, 123, 255, 0.12), transparent 92px),
    linear-gradient(135deg, #EAF2FF 0%, #FFFFFF 58%, #F5F9FF 100%);
}

.invite-hero-copy {
  min-width: 0;
}

.invite-hero-copy span {
  display: block;
  color: #0E3B8F;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.invite-hero-copy p {
  margin: 8px 0 0;
  color: #3A4A66;
  font-size: 13px;
  font-weight: 800;
}

.invite-hero-copy strong {
  display: block;
  margin-top: 6px;
  color: #2F7BFF;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}

.invite-hero-copy small {
  display: block;
  max-width: 210px;
  margin-top: 7px;
  color: #6B7890;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.invite-hero h2 {
  font-size: 22px;
}

.invite-hero-gift {
  width: 92px;
  height: 92px;
  border-radius: 24px;
}

.invite-hero-gift::before {
  width: 15px;
  height: 92px;
}

.invite-hero-gift::after {
  width: 92px;
  height: 15px;
}

.invite-hero-gift i {
  top: -12px;
  width: 66px;
  height: 24px;
}

.invite-hero-gift b {
  margin-top: 15px;
  font-size: 19px;
}

.invite-hero-gift em {
  font-size: 10px;
}

.invite-hero-gift span {
  position: absolute;
  right: -6px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE78A, #F6C453);
  box-shadow: 0 5px 12px rgba(246, 196, 83, 0.28);
}

.invite-hero-gift span:last-child {
  right: 12px;
  bottom: -8px;
  width: 16px;
  height: 16px;
}

.invite-panel {
  padding: 13px 14px;
}

.invite-link-panel {
  padding-bottom: 12px;
}

.invite-section-head {
  margin-bottom: 10px;
}

.invite-section-head h3 {
  font-size: 16px;
  line-height: 1.2;
}

.invite-section-head small {
  max-width: 210px;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.invite-link-box {
  min-height: 46px;
  padding: 7px 7px 7px 12px;
  border-radius: 13px;
}

.invite-link-box span {
  font-size: 14px;
}

.invite-link-box button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 13px;
}

.invite-share-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.invite-share-row button {
  display: grid;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3A4A66;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  justify-items: center;
  align-content: start;
  gap: 5px;
}

.invite-share-row button i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EEF2F8;
  color: #6B7890;
  font-style: normal;
  font-size: 14px;
  font-weight: 900;
}

.invite-share-row button i img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.invite-share-row .wechat i {
  background: #E7F8EF;
  color: #18A874;
}

.invite-share-row .telegram i {
  background: #EAF2FF;
  color: #2F7BFF;
}

.invite-share-row .messenger i {
  background: #EEF5FF;
  color: #4DA3FF;
}

.invite-share-row .facebook i {
  background: #EAF2FF;
  color: #0E3B8F;
}

.invite-share-row .more i {
  background: #EEF2F8;
  color: #6B7890;
}

.invite-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.invite-stats article {
  min-height: 58px;
  padding: 9px 7px;
  border-radius: 13px;
}

.invite-stats span {
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
}

.invite-stats strong {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.15;
}

.invite-friend-list {
  gap: 8px;
}

.invite-friend-card {
  grid-template-columns: 38px minmax(0, 1fr) 82px;
  min-height: 96px;
  gap: 8px;
  padding: 10px;
  border-radius: 15px;
  box-sizing: border-box;
}

.invite-avatar {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.invite-friend-title {
  gap: 5px;
  width: 100%;
}

.invite-friend-title strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-friend-title span {
  flex: 0 0 auto;
  font-size: 10.5px;
}

.invite-friend-title .invite-status {
  flex: 0 0 auto;
  margin-left: auto;
}

.invite-friend-main p {
  margin: 3px 0 6px;
  font-size: 10.5px;
  line-height: 1.2;
}

.invite-progress-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  line-height: 1.2;
}

.invite-progress-meta b {
  overflow: hidden;
  color: #3A4A66;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-progress-meta b:last-child {
  min-width: 30px;
  color: #2F7BFF;
}

.invite-progress {
  height: 6px;
  margin-top: 5px;
}

.invite-friend-card.not-qualified .invite-progress i {
  background: #2F7BFF;
}

.invite-friend-card.claimable .invite-progress i,
.invite-friend-card.claimed .invite-progress i {
  background: #18A874;
}

.invite-friend-card.invalid .invite-progress i {
  background: #FF4D4F;
}

.invite-status {
  min-height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
  line-height: 20px;
  white-space: nowrap;
}

.invite-status.not-qualified {
  background: #EEF2F8;
  color: #6B7890;
}

.invite-status.claimable {
  background: #FFF4D8;
  color: #FF9F43;
}

.invite-status.claimed {
  background: #E7F8EF;
  color: #18A874;
}

.invite-status.invalid {
  background: #FFEAEA;
  color: #FF4D4F;
}

.invite-friend-action {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.invite-friend-card.not-qualified .invite-friend-action {
  background: #EEF2F8;
  color: #6B7890;
}

.invite-friend-card.claimable .invite-friend-action {
  background: #2F7BFF;
  color: #FFFFFF;
}

.invite-friend-card.claimed .invite-friend-action,
.invite-friend-card.invalid .invite-friend-action,
.invite-friend-action:disabled {
  background: #E7EDF8;
  color: #8B95A7;
}

.invite-reward-actions {
  grid-template-columns: 1fr;
  width: min(430px, 100%);
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
}

.invite-reward-actions button {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #3B86FF, #176BFF);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(47, 123, 255, 0.24);
}

.invite-rule-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
}

.invite-rule-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 35, 80, 0.34);
}

.invite-rule-sheet {
  position: relative;
  width: min(430px, calc(100% - 24px));
  max-height: 76vh;
  margin: 0 auto max(12px, env(safe-area-inset-bottom));
  padding: 16px;
  overflow: auto;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 -16px 36px rgba(15, 35, 80, 0.18);
  box-sizing: border-box;
}

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

.invite-rule-head strong {
  color: #1F2A44;
  font-size: 18px;
  font-weight: 900;
}

.invite-rule-head button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #DCE5F5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2F7BFF;
  font-weight: 900;
}

.invite-rule-sheet ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.invite-rule-sheet li {
  color: #3A4A66;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 430px) {
  .invite-reward-main {
    padding: 10px 10px 12px;
  }

  .invite-hero {
    grid-template-columns: minmax(0, 1fr) 90px;
    height: 156px;
    min-height: 156px;
    padding: 14px;
  }

  .invite-hero-copy span {
    font-size: 19px;
  }

  .invite-hero-copy strong {
    font-size: 20px;
  }

  .invite-hero-gift {
    width: 84px;
    height: 84px;
    border-radius: 22px;
  }

  .invite-hero-gift::before {
    height: 84px;
  }

  .invite-hero-gift::after {
    width: 84px;
  }

  .invite-hero-gift b {
    font-size: 18px;
  }

  .invite-panel {
    padding: 12px;
  }

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

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

  .invite-friend-card {
    grid-template-columns: 36px minmax(0, 1fr) 78px;
    min-height: 94px;
    padding: 9px;
  }

  .invite-avatar {
    width: 36px;
    height: 36px;
  }
}

/* Invite reward blue-gold activity UI refresh. Scoped to invite reward page only. */
body.invite-reward-body {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  color: #0f2e66;
}

body.invite-reward-body .invite-reward-shell {
  background:
    radial-gradient(circle at 84% 8%, rgba(250, 204, 21, 0.16), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

body.invite-reward-body .invite-reward-topbar {
  border-bottom-color: #dbeafe;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(15, 46, 102, 0.05);
}

body.invite-reward-body .invite-reward-topbar h1 {
  color: #0f2e66;
  font-size: 18px;
  font-weight: 950;
}

body.invite-reward-body .invite-reward-topbar button {
  border-color: #bfdbfe;
  color: #0f2e66;
  background: #ffffff;
}

body.invite-reward-body .invite-reward-main {
  gap: 12px;
  padding: 12px;
}

body.invite-reward-body .invite-reward-page {
  gap: 12px;
}

body.invite-reward-body .invite-loading,
body.invite-reward-body .invite-panel,
body.invite-reward-body .invite-hero {
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(15, 46, 102, 0.06);
}

body.invite-reward-body .invite-hero {
  position: relative;
  display: flex;
  grid-template-columns: none;
  min-height: 154px;
  height: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  padding: 22px 20px;
  background:
    radial-gradient(circle at 84% 34%, rgba(255, 213, 79, 0.33), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 52%, #dbeafe 100%);
}

body.invite-reward-body .invite-hero::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -76px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(59, 130, 246, 0.13), transparent 62%),
    repeating-linear-gradient(-18deg, rgba(59, 130, 246, 0.08) 0 1px, transparent 1px 12px);
  pointer-events: none;
}

body.invite-reward-body .invite-hero-copy {
  position: relative;
  z-index: 1;
}

body.invite-reward-body .invite-hero-title {
  color: #0f2e66;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 950;
}

body.invite-reward-body .invite-hero-sub {
  margin-top: 10px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

body.invite-reward-body .invite-hero-reward {
  margin-top: 7px;
  color: #1d4ed8;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 950;
}

body.invite-reward-body .invite-hero-copy small {
  display: block;
  max-width: 220px;
  margin-top: 9px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.38;
  font-weight: 750;
}

body.invite-reward-body .invite-gift-icon {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  animation: inviteGiftFloatRoyal 2.6s ease-in-out infinite;
}

body.invite-reward-body .invite-gift-body {
  position: absolute;
  left: 18px;
  top: 30px;
  width: 66px;
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 46%),
    linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

body.invite-reward-body .invite-gift-body::before {
  content: "";
  position: absolute;
  left: 27px;
  top: -10px;
  width: 12px;
  height: 74px;
  background: linear-gradient(180deg, #fff7cc, #facc15, #d97706);
  opacity: 0.96;
}

body.invite-reward-body .invite-gift-body {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.invite-reward-body .invite-gift-lid {
  position: absolute;
  left: 13px;
  top: 18px;
  z-index: 2;
  width: 76px;
  height: 24px;
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(135deg, #fff7cc, #facc15 58%, #d97706);
  box-shadow: 0 5px 10px rgba(217, 119, 6, 0.18);
}

body.invite-reward-body .invite-gift-lid::before,
body.invite-reward-body .invite-gift-lid::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 28px;
  height: 20px;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, #ffffff, #dbeafe);
  border: 2px solid rgba(250, 204, 21, 0.78);
}

body.invite-reward-body .invite-gift-lid::before {
  left: 14px;
  transform: rotate(-18deg);
}

body.invite-reward-body .invite-gift-lid::after {
  right: 14px;
  transform: rotate(18deg) scaleX(-1);
}

body.invite-reward-body .invite-gift-coins {
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 40px;
  height: 24px;
  background:
    radial-gradient(circle at 8px 12px, #ffd54f 0 7px, transparent 8px),
    radial-gradient(circle at 23px 8px, #facc15 0 8px, transparent 9px),
    radial-gradient(circle at 33px 16px, #ffd54f 0 6px, transparent 7px);
  filter: drop-shadow(0 5px 8px rgba(217, 119, 6, 0.2));
}

body.invite-reward-body .invite-loss-gift {
  display: grid;
  place-items: center;
}

body.invite-reward-body .invite-loss-gift img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.invite-reward-body .invite-loss-gift strong {
  position: absolute;
  left: 50%;
  top: 59%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 2px 4px rgba(8, 35, 95, 0.45);
  white-space: nowrap;
}

@keyframes inviteGiftFloatRoyal {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

body.invite-reward-body .invite-panel {
  padding: 15px;
}

body.invite-reward-body .invite-section-head {
  margin-bottom: 10px;
}

body.invite-reward-body .invite-section-head h3 {
  color: #0f2e66;
  font-size: 17px;
  font-weight: 950;
}

body.invite-reward-body .invite-section-head small {
  color: #64748b;
  font-weight: 750;
}

body.invite-reward-body .invite-link-box {
  min-height: 54px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fbff;
  padding: 7px 8px 7px 14px;
  gap: 9px;
}

body.invite-reward-body .invite-link-text,
body.invite-reward-body .invite-link-box span {
  color: #1e40af;
  font-size: 15px;
  font-weight: 850;
}

body.invite-reward-body .invite-copy-btn,
body.invite-reward-body .invite-link-box button {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  padding: 0 14px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.22);
}

body.invite-reward-body .invite-share-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

body.invite-reward-body .invite-share-row button {
  min-height: 64px;
  gap: 6px;
  color: #334155;
  font-size: 11px;
}

body.invite-reward-body .invite-share-row button i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #ffffff;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 7px 14px rgba(15, 46, 102, 0.12);
}

body.invite-reward-body .invite-share-row button i img {
  display: block;
  width: 72% !important;
  height: 72% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0;
}

body.invite-reward-body .invite-share-row button i svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.invite-reward-body .invite-share-row button i:has(img) {
  background: #ffffff !important;
}

body.invite-reward-body .invite-share-row .wechat i {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

body.invite-reward-body .invite-share-row .telegram i {
  background: linear-gradient(135deg, #2aabee, #229ed9);
}

body.invite-reward-body .invite-share-row .messenger i {
  background: linear-gradient(135deg, #5aa9ff, #2563eb);
}

body.invite-reward-body .invite-share-row .facebook i {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}

body.invite-reward-body .invite-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.invite-reward-body .invite-stats article {
  min-height: 66px;
  border: 1px solid #dbeafe;
  border-radius: 15px;
  padding: 10px 8px;
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  text-align: center;
}

body.invite-reward-body .invite-stats span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

body.invite-reward-body .invite-stats strong {
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 950;
  text-align: center;
}

body.invite-reward-body .invite-friend-list {
  gap: 10px;
}

body.invite-reward-body .invite-friend-card {
  grid-template-columns: 42px minmax(0, 1fr) 82px;
  min-height: 100px;
  gap: 9px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 46, 102, 0.05);
}

body.invite-reward-body .invite-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(250, 204, 21, 0.8);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(145deg, #2563eb, #0f2e66);
  color: #ffd54f;
  font-size: 14px;
  font-weight: 950;
}

body.invite-reward-body .invite-friend-title strong {
  color: #0f2e66;
  font-size: 14px;
}

body.invite-reward-body .invite-friend-title span,
body.invite-reward-body .invite-friend-main p,
body.invite-reward-body .invite-progress-meta {
  color: #64748b;
}

body.invite-reward-body .invite-progress-meta b {
  color: #334155;
}

body.invite-reward-body .invite-progress-meta b:last-child {
  color: #1d4ed8;
}

body.invite-reward-body .invite-progress {
  height: 8px;
  border-radius: 999px;
  background: #e5edf8;
}

body.invite-reward-body .invite-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
}

body.invite-reward-body .invite-status {
  border-radius: 999px;
  font-weight: 950;
}

body.invite-reward-body .invite-friend-action {
  min-height: 38px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 950;
}

body.invite-reward-body .invite-friend-card.claimable .invite-friend-action {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.2);
}

body.invite-reward-body .invite-reward-actions {
  width: min(430px, 100%);
  padding: 10px 18px max(14px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #dbeafe;
  backdrop-filter: blur(16px);
}

body.invite-reward-body .invite-reward-actions button {
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
}

@media (max-width: 390px) {
  body.invite-reward-body .invite-reward-main {
    padding: 10px;
  }

  body.invite-reward-body .invite-hero {
    min-height: 146px;
    padding: 16px 14px;
  }

  body.invite-reward-body .invite-hero-title {
    font-size: 21px;
  }

  body.invite-reward-body .invite-hero-sub {
    font-size: 12px;
  }

  body.invite-reward-body .invite-hero-reward {
    font-size: 21px;
  }

  body.invite-reward-body .invite-gift-icon {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }

  body.invite-reward-body .invite-gift-body {
    left: 14px;
    top: 27px;
    width: 58px;
    height: 48px;
    font-size: 14px;
  }

  body.invite-reward-body .invite-gift-lid {
    left: 10px;
    top: 17px;
    width: 66px;
    height: 21px;
  }

  body.invite-reward-body .invite-stats {
    gap: 6px;
  }

  body.invite-reward-body .invite-stats article {
    min-height: 62px;
    padding: 8px 6px;
  }

  body.invite-reward-body .invite-friend-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body.invite-reward-body .invite-friend-action {
    grid-column: 2;
    justify-self: end;
    min-width: 88px;
  }
}

body.vip-gift-page .promo-config-hero-image,
body.invite-reward-body .promo-config-hero-image {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

body.vip-gift-page .promo-config-hero-image[hidden],
body.invite-reward-body .promo-config-hero-image[hidden] {
  display: none;
}

body.vip-gift-page .vip-gift-banner.has-config-image,
body.invite-reward-body .invite-hero.has-config-image {
  background: #ffffff;
}

body.vip-gift-page .vip-gift-banner.has-config-image::before,
body.vip-gift-page .vip-gift-banner.has-config-image::after,
body.invite-reward-body .invite-hero.has-config-image::after {
  display: none;
}

body.vip-gift-page .vip-gift-banner.has-config-image .vip-banner-copy,
body.vip-gift-page .vip-gift-banner.has-config-image .vip-banner-art,
body.invite-reward-body .invite-hero.has-config-image .invite-hero-copy,
body.invite-reward-body .invite-hero.has-config-image .invite-gift-icon {
  opacity: 0;
  pointer-events: none;
}

/* VIP reward table replica: one framed, scrollable blue-white table. */
body.vip-gift-page {
  height: 100svh;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #f5f9ff;
  color: #0f2e66;
}

body.vip-gift-page .vip-gift-shell {
  width: min(100%, 614px);
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 0;
  background: #f5f9ff;
}

body.vip-gift-page .vip-gift-topbar {
  min-height: 58px;
  border-bottom: 0;
  background: #f5f9ff;
  box-shadow: none;
}

body.vip-gift-page .vip-gift-topbar > span {
  display: block;
}

body.vip-gift-page .vip-gift-topbar h1 {
  color: #0f2e66;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

body.vip-gift-page .vip-gift-topbar button {
  border-color: #d8e7ff;
  color: #1d4ed8;
  background: #ffffff;
}

body.vip-gift-page .vip-gift-main {
  display: block;
  box-sizing: border-box;
  height: calc(100svh - 58px - env(safe-area-inset-bottom));
  overflow: hidden;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
}

body.vip-gift-page .vip-replica-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d8e7ff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
}

body.vip-gift-page .vip-replica-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 8px;
  border-bottom: 1px solid #d8e7ff;
  background: #f8fbff;
}

body.vip-gift-page .vip-replica-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: #1d4ed8;
  background: transparent;
  font-size: 16px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-tabs button.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

body.vip-gift-page .vip-replica-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  border-bottom: 1px solid #d8e7ff;
  background: #eff6ff;
}

body.vip-gift-page .vip-replica-head span {
  min-height: 40px;
  display: grid;
  place-items: center;
  color: #0f2e66;
  font-size: 14px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-head span:first-child {
  border-right: 1px solid #d8e7ff;
}

body.vip-gift-page .vip-replica-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

body.vip-gift-page .vip-replica-list {
  display: grid;
}

body.vip-gift-page .vip-replica-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid #d8e7ff;
  background: #ffffff;
}

body.vip-gift-page .vip-replica-row:not(.open) {
  min-height: 102px;
}

body.vip-gift-page .vip-replica-row.open {
  background: #f8fbff;
}

body.vip-gift-page .vip-replica-level {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #d8e7ff;
}

body.vip-gift-page .vip-replica-level strong {
  color: #0f2e66;
  font-size: 13px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 0, 92% 14%, 86% 70%, 50% 100%, 14% 70%, 8% 14%);
  border: 2px solid #f59e0b;
  color: #f59e0b;
  background: linear-gradient(145deg, #2563eb, #0f2e66);
  font-size: 11px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-badge.royal-shield {
  width: 49px;
  height: 49px;
  clip-path: none;
  border: 0;
  color: inherit;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

body.vip-gift-page .vip-replica-badge.royal-shield svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.vip-gift-page .vip-replica-reward {
  min-width: 0;
  padding: 8px 14px 8px 10px;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-reward {
  display: flex;
  align-items: center;
}

body.vip-gift-page .vip-replica-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

body.vip-gift-page .vip-replica-summary strong {
  color: #0f2e66;
  font-size: 15px;
  font-weight: 900;
}

body.vip-gift-page .vip-replica-summary b {
  color: #f59e0b;
  font-size: 17px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-summary button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  margin-right: 4px;
  padding: 0 10px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 13px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-detail {
  display: grid;
  margin-top: 10px;
  border-top: 1px solid #d8e7ff;
}

body.vip-gift-page .vip-replica-detail-item,
body.vip-gift-page .vip-replica-privilege {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #d8e7ff;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}

body.vip-gift-page .vip-replica-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

body.vip-gift-page .vip-replica-detail-item span,
body.vip-gift-page .vip-replica-privilege span {
  display: block;
  color: #0f2e66;
  font-size: 14px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-detail-item strong {
  display: block;
  margin-top: 3px;
  color: #f59e0b;
  font-size: 18px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-requirement,
body.vip-gift-page .vip-replica-note,
body.vip-gift-page .vip-replica-privilege p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

body.vip-gift-page .vip-replica-requirement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
}

body.vip-gift-page .vip-replica-requirement b {
  color: #0f2e66;
  font-weight: 900;
}

body.vip-gift-page .vip-replica-privilege {
  grid-template-columns: 54px minmax(0, 1fr);
}

body.vip-gift-page .vip-replica-privilege b {
  color: #f59e0b;
}

body.vip-gift-page .vip-replica-detail-item button {
  min-width: 78px;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  font-size: 13px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-detail-item [data-vip-action="game"] {
  color: #0f2e66;
  background: linear-gradient(135deg, #fff7cc, #f59e0b);
}

body.vip-gift-page .vip-replica-row.vip1-open {
  background: #f8fbff;
}

body.vip-gift-page .vip-replica-row.vip1-open .vip-replica-level {
  justify-content: center;
  background: #f8fbff;
}

body.vip-gift-page .vip1-open-summary {
  min-height: 42px;
}

body.vip-gift-page .vip1-open-summary strong {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: #172033;
  font-size: 17px;
  line-height: 1.25;
}

body.vip-gift-page .vip1-open-summary b {
  color: #f59e0b;
  font-size: 19px;
  letter-spacing: 0;
}

body.vip-gift-page .vip1-open-summary button {
  color: #1d4ed8;
  background: transparent;
  font-size: 14px;
}

body.vip-gift-page .vip1-reference-detail {
  margin-top: 10px;
  border-top: 0;
  background: #f8fbff;
}

body.vip-gift-page .vip1-reward-line {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid #d8e7ff;
  background: transparent;
}

body.vip-gift-page .vip1-reward-line.privilege {
  grid-template-columns: 50px minmax(0, 1fr);
}

body.vip-gift-page .vip1-reward-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.48);
}

body.vip-gift-page .vip1-reward-line.week .vip1-reward-icon {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.vip-gift-page .vip1-reward-line.week .vip1-reward-icon svg,
body.vip-gift-page .vip1-reward-line.month .vip1-reward-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.vip-gift-page .vip1-reward-line.month .vip1-reward-icon {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.vip-gift-page .vip1-reward-line.upgrade .vip1-reward-icon {
  background: linear-gradient(135deg, #ffd5bd, #ff8a3d);
}

body.vip-gift-page .vip1-reward-line.privilege .vip1-reward-icon {
  color: #f59e0b;
  background: linear-gradient(135deg, #fff8d7, #ffd66b);
}

body.vip-gift-page .vip1-reward-copy {
  min-width: 0;
}

body.vip-gift-page .vip1-reward-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.vip-gift-page .vip1-reward-title span {
  color: #172033;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
}

body.vip-gift-page .vip1-reward-title b {
  border-radius: 7px;
  padding: 1px 7px;
  color: #f59e0b;
  background: #ffedd5;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
}

body.vip-gift-page .vip1-reward-copy p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}

body.vip-gift-page .vip1-reward-line button {
  min-width: 78px;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  color: #ffffff;
  background: #f59e0b;
  font-size: 14px;
  font-weight: 950;
}

body.vip-gift-page .vip1-reward-line.upgrade button {
  background: #16a34a;
}

body.vip-gift-page .vip1-privilege-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin-top: 6px;
}

body.vip-gift-page .vip1-privilege-grid p {
  margin: 0;
}

body.vip-gift-page .vip1-privilege-grid p:last-child {
  grid-column: 1 / -1;
}

body.vip-gift-page .vip1-privilege-grid b {
  color: #172033;
  font-weight: 900;
}

body.vip-gift-page .vip-rule-pane {
  padding: 14px;
  background: #ffffff;
}

body.vip-gift-page .vip-rule-pane ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  color: #334155;
  font-size: 13px;
  line-height: 1.62;
}

body.vip-gift-page .vip-rule-pane strong {
  color: #0f2e66;
  font-weight: 950;
}

body.vip-gift-page .vip-loading {
  margin: 0;
  padding: 26px 12px;
  color: #64748b;
  text-align: center;
}

body.vip-gift-page .vip-gift-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

body.vip-gift-page .vip-current-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 120px;
  max-height: 124px;
  overflow: hidden;
  border: 1px solid #c7ddff;
  border-radius: 16px;
  padding: 10px 12px 10px 16px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.92), transparent 34%),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 48%, #f8fbff 100%);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.14);
  box-sizing: border-box;
}

body.vip-gift-page .vip-current-progress-card .vip-loading {
  grid-column: 1 / -1;
  padding: 0;
}

body.vip-gift-page .vip-progress-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.vip-gift-page .vip-progress-label {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.vip-gift-page .vip-progress-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.vip-gift-page .vip-progress-level-row strong {
  color: #0f2e66;
  font-size: 20px;
  line-height: 34px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

body.vip-gift-page .vip-progress-level-row button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 56px;
  min-height: 34px;
  height: 34px;
  border: 1px solid rgba(147, 197, 253, 0.62);
  border-radius: 999px;
  padding: 0 13px;
  color: #2563eb;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

body.vip-gift-page .vip-progress-level-row button b {
  font-size: 16px;
  line-height: 1;
  color: #2563eb;
}

body.vip-gift-page .vip-progress-meter-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body.vip-gift-page .vip-progress-meter-row b {
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 950;
}

body.vip-gift-page .vip-progress-meter-row span {
  color: #0f2e66;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

body.vip-gift-page .vip-progress-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.34);
}

body.vip-gift-page .vip-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #2563eb 60%, #1d4ed8);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.38);
  transition: width 260ms ease;
}

body.vip-gift-page .vip-progress-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: visible;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.22;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.vip-gift-page .vip-progress-value > span {
  flex: 0 0 auto;
  color: #64748b;
  font-weight: 800;
}

body.vip-gift-page .vip-progress-value > b {
  min-width: 0;
  color: #0f2e66;
  font-size: 14px;
  font-weight: 900;
}

body.vip-gift-page .vip-progress-mid p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.vip-gift-page .vip-progress-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 72px;
  height: 72px;
  min-width: 0;
  overflow: visible;
}

body.vip-gift-page .vip-progress-badge svg {
  display: block;
  width: 72px;
  height: 72px;
}

body.vip-gift-page .vip-progress-badge span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #0f2e66);
  font-size: 16px;
  font-weight: 950;
}

body.vip-gift-page .vip-replica-panel {
  min-height: 0;
}

body.vip-gift-page .vip-gift-actions {
  grid-template-columns: 1fr 1fr;
  border-top-color: #d8e7ff;
}

body.vip-gift-page .vip-gift-actions button:first-child {
  border-color: #d8e7ff;
  color: #1d4ed8;
}

body.vip-gift-page .vip-gift-actions button:last-child {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

@media (max-width: 430px) {
  body.vip-gift-page .vip-gift-topbar {
    grid-template-columns: 40px minmax(0, 1fr) 68px;
    padding: 7px 10px;
  }

  body.vip-gift-page .vip-gift-topbar h1 {
    font-size: 17px;
  }

  body.vip-gift-page .vip-gift-topbar button:last-child {
    font-size: 12px;
  }

  body.vip-gift-page .vip-replica-panel {
    height: 100%;
    min-height: 0;
    border-radius: 15px;
  }

  body.vip-gift-page .vip-replica-head,
  body.vip-gift-page .vip-replica-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.vip-gift-page .vip-replica-row:not(.open) {
    min-height: 98px;
  }

  body.vip-gift-page .vip-replica-tabs button {
    min-height: 38px;
    font-size: 14px;
  }

  body.vip-gift-page .vip-replica-badge {
    width: 36px;
    height: 40px;
    font-size: 10px;
  }

  body.vip-gift-page .vip-replica-badge.royal-shield {
    width: 44px;
    height: 44px;
  }

  body.vip-gift-page .vip-replica-level {
    gap: 4px;
    padding: 8px 3px;
  }

  body.vip-gift-page .vip-replica-reward {
    padding: 8px 10px 8px 8px;
  }

  body.vip-gift-page .vip-replica-summary strong {
    font-size: 13px;
  }

  body.vip-gift-page .vip-replica-summary b {
    font-size: 15px;
  }

  body.vip-gift-page .vip-replica-detail-item {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body.vip-gift-page .vip-replica-privilege {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  body.vip-gift-page .vip-replica-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 11px;
  }

  body.vip-gift-page .vip-replica-detail-item button {
    min-width: 60px;
    min-height: 34px;
    padding: 0 8px;
  }

  body.vip-gift-page .vip1-open-summary strong {
    font-size: 15px;
  }

  body.vip-gift-page .vip1-open-summary b {
    font-size: 17px;
  }

  body.vip-gift-page .vip1-reward-line {
    grid-template-columns: 42px minmax(0, 1fr) 68px;
    gap: 8px;
    padding: 9px 0;
  }

  body.vip-gift-page .vip1-reward-line.privilege {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body.vip-gift-page .vip1-reward-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 12px;
  }

  body.vip-gift-page .vip1-reward-title span {
    font-size: 14px;
  }

  body.vip-gift-page .vip1-reward-title b {
    font-size: 16px;
    padding: 1px 6px;
  }

  body.vip-gift-page .vip1-reward-copy p {
    font-size: 12px;
  }

  body.vip-gift-page .vip1-reward-line button {
    min-width: 64px;
    min-height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }

  body.vip-gift-page .vip1-privilege-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

body.slot-jackpot-body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -80px, rgba(47, 123, 255, 0.2), transparent 260px),
    linear-gradient(180deg, #f6f9ff 0%, #eef5ff 46%, #f8fbff 100%);
  color: #14213d;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.slot-jackpot-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background: transparent;
}

.slot-jackpot-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 76px;
  align-items: center;
  height: 58px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(196, 216, 248, 0.72);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.slot-jackpot-topbar h1 {
  margin: 0;
  overflow: hidden;
  color: #102a66;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-jackpot-topbar button {
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1d6cff;
  font-size: 12px;
  font-weight: 850;
}

.slot-jackpot-topbar button:first-child {
  display: inline-grid;
  place-items: center;
  color: #102a66;
}

.slot-jackpot-topbar svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slot-jackpot-main {
  display: grid;
  gap: 10px;
  padding: 12px 12px 94px;
}

.slot-jackpot-main > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.slot-jackpot-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  min-height: 172px;
  overflow: hidden;
  padding: 18px 14px 15px;
  border: 1px solid rgba(47, 123, 255, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 215, 94, 0.42), transparent 28%),
    radial-gradient(circle at 96% 78%, rgba(47, 123, 255, 0.25), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #edf5ff 46%, #d8e9ff 100%);
  box-shadow: 0 16px 34px rgba(47, 123, 255, 0.16);
}

.slot-jackpot-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, 0.58) 58% 60%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(47, 123, 255, 0.05) 0 1px, transparent 1px 20px);
  pointer-events: none;
}

.slot-jackpot-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.slot-jackpot-hero-copy span {
  color: #0f4fb8;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.slot-jackpot-hero-copy strong {
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(190, 127, 13, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8d7, #ffd867);
  color: #9c5e00;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.08;
  box-shadow: 0 8px 18px rgba(224, 156, 0, 0.18);
}

.slot-jackpot-hero-copy p {
  max-width: 210px;
  margin: 0;
  color: #40516f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.slot-jackpot-hero-art {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
  min-width: 0;
  width: 110px;
  height: 126px;
}

.slot-reel-machine {
  position: absolute;
  inset: 19px 4px 34px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 2px solid rgba(255, 220, 106, 0.9);
  border-radius: 20px;
  background: linear-gradient(180deg, #125bd2, #0f3b91);
  box-shadow: 0 16px 24px rgba(14, 59, 143, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.slot-reel-machine i {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #dcecff);
  color: #d99600;
  font-size: 25px;
  font-style: normal;
  font-weight: 1000;
}

.slot-jackpot-hero-art b {
  position: absolute;
  right: 1px;
  bottom: 17px;
  min-width: 62px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1a9, #f5bd28);
  color: #8a5200;
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 10px 18px rgba(213, 147, 0, 0.28);
}

.slot-coin {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 2px solid #fff6c7;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, #fff8c9 0 20%, #ffd35d 38%, #d99400 100%);
  box-shadow: 0 8px 14px rgba(196, 128, 0, 0.22);
}

.slot-coin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(137, 82, 0, 0.34);
  border-radius: inherit;
}

.slot-coin.coin-a {
  top: 3px;
  right: 20px;
}

.slot-coin.coin-b {
  top: 64px;
  left: 2px;
  width: 19px;
  height: 19px;
}

.slot-coin.coin-c {
  right: 8px;
  bottom: 0;
  width: 18px;
  height: 18px;
}

.slot-jackpot-panel {
  padding: 13px;
  border: 1px solid rgba(209, 225, 250, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 60, 130, 0.06);
}

.slot-jackpot-panel.compact {
  padding-bottom: 12px;
}

.slot-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.slot-section-head h2 {
  margin: 0;
  color: #102a66;
  font-size: 16px;
  font-weight: 950;
}

.slot-section-head span {
  max-width: 148px;
  color: #70819d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
}

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

.slot-tier-grid article {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 106px;
  overflow: hidden;
  padding: 12px 10px;
  border: 1px solid rgba(47, 123, 255, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 220, 91, 0.34), transparent 36%),
    linear-gradient(180deg, #ffffff, #edf5ff);
}

.slot-tier-grid article::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(47, 123, 255, 0.08);
}

.slot-tier-grid article.featured {
  border-color: rgba(230, 169, 31, 0.44);
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 222, 94, 0.48), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fff8dc 100%);
  box-shadow: 0 12px 24px rgba(226, 155, 0, 0.14);
  transform: translateY(-2px);
}

.slot-tier-grid article i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 12px;
  background: linear-gradient(180deg, #125bd2, #0f4fb8);
  color: #fff5c7;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  box-shadow: 0 8px 16px rgba(17, 83, 194, 0.22);
}

.slot-tier-grid article.featured i {
  background: linear-gradient(180deg, #ffe98b, #f1b722);
  color: #8a5200;
}

.slot-tier-grid span {
  position: relative;
  z-index: 1;
  color: #40516f;
  font-size: 12px;
  font-weight: 800;
}

.slot-tier-grid strong {
  position: relative;
  z-index: 1;
  color: #d28a00;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1.1;
}

.slot-rule-list,
.slot-step-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot-rule-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.slot-rule-list li {
  position: relative;
  min-height: 0;
  padding: 6px 7px 6px 28px;
  border-radius: 12px;
  background: #f6f9ff;
  color: #40516f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.slot-rule-list li:nth-child(8) {
  grid-column: auto;
  min-height: 0;
}

.slot-rule-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 11px;
  height: 11px;
  border: 2px solid #dbe9ff;
  border-radius: 999px;
  background: #1d6cff;
  box-shadow: inset 0 0 0 2px #ffffff;
}

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

.slot-require-grid span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 45px;
  padding: 8px;
  border: 1px solid #e3eefc;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  color: #40516f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  min-width: 0;
}

.slot-require-grid i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #e8f1ff;
  color: #1d6cff;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.slot-muted {
  margin: 10px 0 0;
  color: #70819d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.slot-step-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eef2f8;
}

.slot-step-list li:last-child {
  border-bottom: 0;
}

.slot-step-list b {
  color: #2f7bff;
  font-size: 12px;
  font-weight: 950;
}

.slot-step-list span {
  color: #40516f;
  font-size: 13px;
  font-weight: 750;
}

.slot-today-list {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.slot-today-list::-webkit-scrollbar {
  display: none;
}

.slot-today-list article {
  flex: 0 0 228px;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(47, 123, 255, 0.12);
  border-radius: 13px;
  background: linear-gradient(90deg, #f7fbff, #ffffff);
}

.slot-today-list b {
  color: #102a66;
  font-size: 12px;
  font-weight: 950;
}

.slot-today-list span {
  color: #40516f;
  font-size: 11px;
  font-weight: 750;
}

.slot-today-list strong {
  grid-row: span 2;
  color: #d28a00;
  font-size: 13px;
  font-weight: 1000;
  text-align: right;
}

.slot-record-list .promo-empty {
  padding: 18px 12px;
  border-radius: 14px;
  font-size: 12px;
}

.slot-status-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #e3eefc;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
}

.slot-status-card i {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.6) 44% 56%, transparent 56%),
    linear-gradient(180deg, #dfeeff, #bcd8ff);
  box-shadow: inset 0 0 0 1px rgba(47, 123, 255, 0.16);
}

.slot-status-card i.pending {
  background: linear-gradient(180deg, #fff0bd, #ffd45f);
}

.slot-status-card i.approved,
.slot-status-card i.paid {
  background: linear-gradient(180deg, #dff8ee, #8de0bd);
}

.slot-status-card i.rejected {
  background: linear-gradient(180deg, #ffe5e8, #ffb7c0);
}

.slot-status-card strong {
  display: block;
  color: #102a66;
  font-size: 14px;
  font-weight: 950;
}

.slot-status-card span {
  display: block;
  margin-top: 3px;
  color: #70819d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.slot-record-list {
  display: grid;
  gap: 10px;
}

.slot-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e3eefc;
  border-radius: 15px;
  background: #f8fbff;
}

.slot-record-main,
.slot-record-side {
  display: grid;
  gap: 5px;
}

.slot-record-main strong {
  color: #102a66;
  font-size: 14px;
  font-weight: 950;
}

.slot-record-main span,
.slot-record-side small {
  color: #70819d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.slot-record-side {
  justify-items: end;
  text-align: right;
}

.slot-record-side em {
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.slot-record-side em.pending {
  background: #fff4d8;
  color: #d99a00;
}

.slot-record-side em.approved {
  background: #eaf2ff;
  color: #2f7bff;
}

.slot-record-side em.rejected {
  background: #ffeaea;
  color: #ff4d4f;
}

.slot-record-side em.paid {
  background: #e7f8ef;
  color: #18a874;
}

.slot-record-side b {
  color: #102a66;
  font-size: 13px;
  font-weight: 950;
}

.slot-jackpot-actions {
  position: fixed;
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  bottom: 0;
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  z-index: 30;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(246, 249, 255, 0), #f6f9ff 30%);
}

.slot-jackpot-actions button {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 17px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 232, 129, 0.92), transparent 9%),
    linear-gradient(135deg, #0f62df, #1d86ff 52%, #0c4cb8);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(29, 108, 255, 0.3);
}

.slot-jackpot-actions button::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid #fff8c9;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe98d, #d99700);
}

@media (max-width: 380px) {
  .slot-jackpot-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 68px;
    padding: 0 8px;
  }

  .slot-jackpot-topbar h1 {
    font-size: 16px;
  }

  .slot-jackpot-main {
    padding-right: 10px;
    padding-left: 10px;
  }

  .slot-jackpot-hero {
    grid-template-columns: minmax(0, 1fr) 110px;
    min-height: 164px;
    padding: 15px 12px;
  }

  .slot-jackpot-hero-copy strong {
    font-size: 21px;
  }

  .slot-jackpot-hero-art {
    width: 108px;
    height: 112px;
  }

  .slot-reel-machine {
    inset: 20px 0 34px 0;
    gap: 4px;
    padding: 7px;
  }

  .slot-reel-machine i {
    font-size: 21px;
  }

  .slot-tier-grid strong {
    font-size: 17px;
  }

  .slot-today-list article {
    flex-basis: 218px;
    grid-template-columns: minmax(74px, 1fr) auto;
  }
}

/* Telegram-only slot jackpot challenge */
.slot-jackpot-topbar {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.slot-jackpot-hero {
  display: block;
  min-height: 0;
  aspect-ratio: 3 / 1;
  padding: 0;
  border-radius: 16px;
  background: #eaf3ff;
  box-shadow: 0 12px 28px rgba(24, 89, 190, 0.14);
}

.slot-jackpot-hero::after {
  display: none;
}

.slot-jackpot-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  background: #edf5ff;
}

.slot-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(104px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 4px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.slot-tier-grid::-webkit-scrollbar {
  display: none;
}

.slot-tier-grid article {
  scroll-snap-align: start;
  display: block;
  min-height: 0;
  padding: 0;
  border-color: rgba(54, 126, 235, 0.28);
  border-radius: 15px;
  text-align: center;
  overflow: hidden;
}

.slot-tier-grid article.featured {
  transform: none;
  border-color: rgba(231, 168, 25, 0.58);
  box-shadow: 0 10px 22px rgba(219, 151, 0, 0.13);
}

.slot-tier-grid article.highest {
  border-color: rgba(221, 142, 0, 0.72);
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 227, 107, 0.58), transparent 36%),
    linear-gradient(180deg, #fffdf3, #fff1c5);
  box-shadow: 0 10px 22px rgba(219, 151, 0, 0.17);
}

.slot-tier-grid article::after {
  display: none;
}

.slot-tier-grid .slot-tier-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f73ed, #1551bf);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.slot-tier-grid .featured .slot-tier-badge,
.slot-tier-grid .highest .slot-tier-badge {
  background: linear-gradient(135deg, #ffd65d, #df9200);
  color: #744400;
}

.slot-tier-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.slot-tier-grid strong {
  font-size: 16px;
  white-space: nowrap;
}

.slot-tier-grid small {
  position: relative;
  z-index: 1;
  color: #7b8799;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.slot-rule-list li:nth-child(8) {
  grid-column: auto;
}

.slot-rule-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  top: 8px;
  width: 15px;
  height: 15px;
  border: 0;
  background: #1d6cff;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  box-shadow: none;
}

.slot-today-list article {
  flex-basis: 224px;
}

.slot-support-notice {
  position: fixed;
  right: max(18px, calc((100vw - 430px) / 2 + 18px));
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: max(18px, calc((100vw - 430px) / 2 + 18px));
  z-index: 50;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 42, 102, 0.94);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.slot-support-notice.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 380px) {
  .slot-jackpot-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .slot-jackpot-hero {
    min-height: 0;
    padding: 0;
  }

  .slot-tier-grid {
    grid-template-columns: repeat(3, 104px);
  }
}

body.agent-growth-body {
  margin: 0;
  background: #f7f8fc;
  color: #1f2a44;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.agent-growth-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background: #f7f8fc;
}

.agent-growth-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 76px;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid #e7edf8;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.agent-growth-topbar h1 {
  margin: 0;
  overflow: hidden;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 950;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-growth-topbar button {
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #c91818;
  font-size: 12px;
  font-weight: 850;
}

.agent-growth-topbar button:first-child {
  display: inline-grid;
  place-items: center;
  color: #1f2a44;
}

.agent-growth-topbar svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-growth-main {
  display: grid;
  gap: 7px;
  padding: 8px 8px 0;
}

.agent-growth-loading {
  padding: 80px 16px;
  color: #6b7890;
  text-align: center;
  font-weight: 800;
}

.agent-growth-hero {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 116px;
  align-items: stretch;
  gap: 8px;
  overflow: hidden;
  min-height: 158px;
  padding: 10px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 14%, rgba(246, 196, 83, 0.36), transparent 28%),
    linear-gradient(135deg, #b30d0d, #e42b2b 50%, #7b0000);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(179, 13, 13, 0.24);
}

.agent-growth-hero::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -36px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(246, 196, 83, 0.48);
  border-radius: 999px;
}

.agent-growth-level-row,
.agent-growth-progress-head,
.agent-growth-progress-label {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.agent-growth-level-row {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 122px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.agent-growth-level-row::before {
  content: "";
  position: absolute;
  top: 8px;
  width: 54px;
  height: 22px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #fff4ba, #f6c453);
  box-shadow: 0 8px 14px rgba(65, 0, 0, 0.18);
}

.agent-growth-level-row::after {
  content: "";
  position: absolute;
  bottom: 14px;
  width: 78px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4ba, #f6c453);
  box-shadow: 0 8px 14px rgba(65, 0, 0, 0.2);
}

.agent-growth-level-row span,
.agent-growth-profit span,
.agent-growth-rate-grid span,
.agent-growth-progress-head span,
.agent-growth-progress-label span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
}

.agent-growth-level-row strong {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 72px;
  margin-top: 18px;
  border: 3px solid #f6c453;
  border-radius: 20px 20px 28px 28px;
  background: linear-gradient(180deg, #e42b2b, #9a0505);
  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.16), 0 12px 18px rgba(65, 0, 0, 0.24);
}

.agent-growth-hero.locked .agent-growth-level-row {
  gap: 8px;
  justify-content: center;
}

.agent-growth-hero.apply-only {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 132px;
}

.agent-growth-hero.locked .agent-growth-level-row::after {
  display: none;
}

.agent-growth-apply-btn {
  position: relative;
  z-index: 2;
  min-width: 148px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3a6, #f6c453);
  color: #8a2a00;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.15;
  box-shadow: 0 8px 16px rgba(65, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.agent-growth-hero-mid {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: grid;
  align-content: center;
  gap: 10px;
}

.agent-growth-profit {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin-top: 0;
}

.agent-growth-profit strong {
  color: #f6c453;
  font-size: 27px;
  font-weight: 1000;
  line-height: 1.05;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.agent-growth-profit small,
.agent-growth-progress-head small {
  font-size: 13px;
  font-weight: 950;
}

.agent-growth-rate-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

.agent-growth-rate-grid div {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 50px;
  padding: 5px 4px;
  border: 1px solid rgba(246, 196, 83, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.agent-growth-rate-grid b {
  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;
}

.agent-growth-upgrade {
  position: relative;
  z-index: 1;
  grid-column: 3;
  display: grid;
  align-content: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(246, 196, 83, 0.24);
}

.agent-growth-progress-head {
  display: grid;
  gap: 4px;
  margin-top: 0;
}

.agent-growth-progress-head b {
  color: #f6c453;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  text-align: left;
}

.agent-growth-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
}

.agent-growth-progress {
  position: relative;
  z-index: 1;
  height: 10px;
  margin-top: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.agent-growth-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff1a7, #f6c453);
}

.agent-growth-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}

.agent-growth-definition {
  padding: 7px 9px;
  border: 1px solid rgba(201, 24, 24, 0.08);
  border-radius: 12px;
  background: #fff8ed;
  color: #6b3b28;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.agent-growth-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 6px;
  border: 1px solid #e7edf8;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.05);
}

.agent-growth-stats article {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 0 3px;
  border-right: 1px solid #e7edf8;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.agent-growth-stats article:last-child {
  border-right: 0;
}

.agent-growth-stats article::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4e8, #ffe1c2);
}

.agent-growth-stats span {
  color: #6b7890;
  font-size: 10px;
  font-weight: 800;
}

.agent-growth-stats strong {
  color: #c91818;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.2;
}

.agent-growth-card {
  padding: 0;
  border: 1px solid #f2d8c9;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.05);
}

.agent-growth-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 8px;
}

.agent-growth-section-head h2 {
  margin: 0;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 950;
}

.agent-growth-section-head span {
  color: #6b7890;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.level-table-wrapper {
  overflow-x: auto;
  padding-bottom: 0;
}

.level-table-wrapper::-webkit-scrollbar {
  height: 4px;
}

.level-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(201, 24, 24, 0.24);
}

.level-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
}

.level-table th,
.level-table td {
  padding: 7px 4px;
  border-right: 1px solid #f1dfd4;
  border-bottom: 1px solid #f1dfd4;
  color: #3a4a66;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

.level-table th {
  background: linear-gradient(180deg, #d91111, #b90707);
  color: #ffffff;
  font-weight: 900;
}

.level-table th:nth-child(1),
.level-table td:nth-child(1) {
  width: 17%;
}

.level-table th:nth-child(2),
.level-table td:nth-child(2) {
  width: 28%;
}

.level-table th:nth-child(3),
.level-table td:nth-child(3),
.level-table th:nth-child(4),
.level-table td:nth-child(4) {
  width: 18%;
}

.level-table th:nth-child(5),
.level-table td:nth-child(5) {
  width: 19%;
}

.level-table tr:last-child td {
  border-bottom: 0;
}

.level-table th:last-child,
.level-table td:last-child {
  border-right: 0;
}

.level-table tr.current td {
  background: #fff3d8;
  color: #1f2a44;
}

.level-cell {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.level-cell em {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border: 2px solid #f6c453;
  border-radius: 999px;
  background: linear-gradient(180deg, #e42b2b, #8d0202);
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  vertical-align: middle;
  box-shadow: 0 4px 8px rgba(179, 13, 13, 0.16);
}

.level-cell span {
  display: inline-grid;
  vertical-align: middle;
  align-items: center;
  justify-items: start;
  gap: 2px;
}

.level-cell b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c91818;
  color: #ffffff;
  font-size: 9px;
  font-weight: 950;
}

.agent-growth-rule-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: growth-rule;
}

.agent-growth-rule-list li {
  position: relative;
  padding-left: 24px;
  color: #3a4a66;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.5;
}

.agent-growth-rule-list li::before {
  counter-increment: growth-rule;
  content: counter(growth-rule);
  position: absolute;
  top: 1px;
  left: 0;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #fff3d8;
  color: #c91818;
  font-size: 10px;
  font-weight: 950;
}

.agent-growth-example {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e7edf8;
  border-radius: 14px;
}

.agent-growth-example div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f8;
  background: #ffffff;
}

.agent-growth-example div:last-child {
  border-bottom: 0;
}

.agent-growth-example span {
  color: #6b7890;
  font-size: 12px;
  font-weight: 800;
}

.agent-growth-example b {
  color: #1f2a44;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.agent-growth-example .total {
  background: #fff8ed;
}

.agent-growth-example .total b {
  color: #c91818;
}

.agent-growth-example .zero b {
  color: #18a874;
}

.agent-growth-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.agent-growth-mini-card {
  display: grid;
  gap: 4px;
  min-height: 94px;
  padding: 8px;
  border: 1px solid #e7edf8;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 35, 80, 0.04);
}

.agent-growth-mini-card h2 {
  margin: 0 0 2px;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 950;
}

.agent-growth-mini-card p {
  margin: 0;
  color: #3a4a66;
  font-size: 10px;
  font-weight: 740;
  line-height: 1.32;
}

.agent-growth-mini-card b {
  color: #c91818;
  font-weight: 950;
}

.agent-growth-mini-card b.green {
  color: #18a874;
}

.agent-growth-accordions {
  display: grid;
  gap: 7px;
}

.agent-growth-collapse {
  border: 1px solid #e7edf8;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 35, 80, 0.04);
}

.agent-growth-collapse summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 950;
  list-style: none;
}

.agent-growth-collapse summary::-webkit-details-marker {
  display: none;
}

.agent-growth-collapse summary::after {
  content: "⌄";
  color: #c91818;
  font-size: 14px;
  font-weight: 950;
}

.agent-growth-collapse[open] summary::after {
  content: "⌃";
}

.agent-growth-collapse div {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
}

.agent-growth-collapse p {
  margin: 0;
  color: #3a4a66;
  font-size: 10px;
  font-weight: 740;
  line-height: 1.35;
}

.agent-growth-collapse b {
  color: #c91818;
  font-weight: 950;
}

.agent-growth-collapse b.green {
  color: #18a874;
}

.agent-growth-actions {
  position: static;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  background: #f7f8fc;
}

.agent-growth-actions button {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff3b3b, #d80f0f);
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(201, 24, 24, 0.28);
}

.agent-growth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
}

.agent-growth-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
}

.agent-growth-sheet {
  position: relative;
  width: min(100%, 430px);
  max-height: 72vh;
  margin: 0 auto;
  overflow: auto;
  padding: 16px;
  border-radius: 22px 22px 0 0;
  background: #ffffff;
  box-shadow: 0 -14px 32px rgba(15, 35, 80, 0.18);
}

.agent-growth-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.agent-growth-sheet-head strong {
  color: #1f2a44;
  font-size: 18px;
  font-weight: 950;
}

.agent-growth-sheet-head button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #fff3d8;
  color: #c91818;
  font-weight: 900;
}

.agent-growth-sheet ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
}

.agent-growth-sheet li {
  color: #3a4a66;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.55;
}

@media (max-width: 380px) {
  .agent-growth-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 68px;
    padding: 0 8px;
  }

  .agent-growth-topbar h1 {
    font-size: 16px;
  }

  .agent-growth-main {
    padding-right: 10px;
    padding-left: 10px;
  }

  .agent-growth-profit strong {
    font-size: 24px;
  }

  .agent-growth-stats strong {
    font-size: 15px;
  }
}

/* ===== 首页顶部余额：只显示余额数字 + 金币 ===== */
.app-shell > .topbar .account-pill {
  display: inline-grid !important;
  grid-template-columns: 24px auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 5px 10px 5px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(10, 45, 110, 0.16) !important;
}

.app-shell > .topbar .account-pill strong[data-account-id] {
  display: none !important;
}

.app-shell > .topbar .account-pill span {
  position: relative !important;
  grid-row: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 226, 131, 0.9) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 32% 24%, #fff7bd 0 13%, transparent 14%),
    linear-gradient(145deg, #fff0a6 0%, #f6c453 45%, #d4911c 100%) !important;
  color: #8a5500 !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(128, 73, 0, 0.22), 0 4px 8px rgba(7, 38, 100, 0.2) !important;
}

.app-shell > .topbar .account-pill span::before {
  content: "N" !important;
  position: relative !important;
  z-index: 1 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: #8a5500 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.app-shell > .topbar .account-pill span::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid rgba(138, 85, 0, 0.22) !important;
  border-radius: inherit !important;
}

.app-shell > .topbar .account-pill small {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* 首页顶部 N9 品牌文字改为金色 */
.app-shell > .topbar .brand strong,
.app-shell > .topbar .brand small {
  color: #F6C453 !important;
}

body:not(.promo-mode):not(.profile-mode) .app-shell > .topbar .brand strong,
body:not(.promo-mode):not(.profile-mode) .app-shell > .topbar .brand small {
  color: #F6C453 !important;
}

/* ===== 分类/游戏列表页：蓝白轻量视觉优化（只覆盖视觉，不改结构/逻辑） ===== */
body.category-page {
  background: linear-gradient(180deg, #F7FAFF 0%, #F3F7FF 100%) !important;
  color: #1F2A44 !important;
}

body.category-page .category-shell {
  padding: 12px 12px 24px !important;
}

body.category-page .category-topbar {
  background: rgba(247, 250, 255, 0.94) !important;
  border-bottom: 1px solid rgba(220, 229, 245, 0.9) !important;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.04) !important;
}

body.category-page .category-back {
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.category-page .category-switch-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  border: 1px solid #D7E6FF !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  color: #12336F !important;
  box-shadow: 0 8px 20px rgba(47, 123, 255, 0.08) !important;
  letter-spacing: 0 !important;
}

body.category-page .category-switch-button::after {
  flex: 0 0 auto !important;
  color: #2F7BFF !important;
}

body.category-page .category-switch-button .category-switch-icon {
  flex-basis: 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin-left: -2px !important;
}

body.category-page .category-switch-button .category-switch-icon.slot-icon svg {
  width: 48px !important;
  height: 34px !important;
}

body.category-page .category-switch-button .category-switch-icon.fish-icon svg,
body.category-page .category-switch-button .category-switch-icon.live-icon svg,
body.category-page .category-switch-button .category-switch-icon.poker-icon svg,
body.category-page .category-switch-button .category-switch-icon.sport-icon svg,
body.category-page .category-switch-button .category-switch-icon.cockfight-icon svg {
  width: 38px !important;
  height: 38px !important;
}

body.category-page .category-switch {
  border: 1px solid #D7E6FF !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 16px 36px rgba(15, 35, 80, 0.14) !important;
}

body.category-page .category-switch button {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid #E7EDF8 !important;
  background: #FFFFFF !important;
  color: #1F2A44 !important;
}

body.category-page .category-switch-icon {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: #EAF2FF !important;
  color: #2F7BFF !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  overflow: visible !important;
}

body.category-page .category-switch-icon.live-icon {
  background: transparent !important;
}

body.category-page .category-switch-icon.slot-icon,
body.category-page .category-switch-icon.fish-icon,
body.category-page .category-switch-icon.poker-icon,
body.category-page .category-switch-icon.sport-icon,
body.category-page .category-switch-icon.cockfight-icon {
  background: transparent !important;
}

body.category-page .category-switch-icon.slot-icon svg {
  display: block !important;
  width: 46px !important;
  height: 34px !important;
  object-fit: contain !important;
  transform: translateX(-3px) scale(1.12) !important;
  transform-origin: center !important;
}

body.category-page .category-switch-icon.fish-icon svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

body.category-page .category-switch-icon.live-icon svg {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  transform: translateY(-1px) scale(1.08) !important;
  transform-origin: center !important;
}

body.category-page .category-switch-icon.poker-icon svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

body.category-page .category-switch-icon.sport-icon svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

body.category-page .category-switch-icon.cockfight-icon svg {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  transform: translateY(-1px) scale(1.04) !important;
  transform-origin: center !important;
}

body.category-page .category-switch button:hover,
body.category-page .category-switch button.active {
  border-color: #2F7BFF !important;
  background: #EAF2FF !important;
  color: #0E3B8F !important;
  box-shadow: none !important;
}

body.category-page .category-search {
  margin-top: 10px !important;
}

body.category-page .search-box.category-search {
  min-height: 50px !important;
  border: 1px solid #D7E6FF !important;
  border-radius: 28px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(15, 35, 80, 0.045) !important;
}

body.category-page .search-box.category-search span {
  border-color: #2F7BFF !important;
}

body.category-page .search-box.category-search span::after {
  background: #2F7BFF !important;
}

body.category-page .search-box.category-search input {
  color: #3A4A66 !important;
  font-weight: 700 !important;
}

body.category-page .search-box.category-search input::placeholder {
  color: #8B95A7 !important;
}

body.category-page .category-tabs {
  gap: 8px !important;
  margin: 12px 0 12px !important;
  padding: 4px 0 8px !important;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(247, 250, 255, 0.88)) !important;
}

body.category-page .category-tab {
  min-width: 70px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #D7E6FF !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  color: #24415F !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04) !important;
}

body.category-page .category-tab.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3B86FF, #176BFF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 20px rgba(47, 123, 255, 0.24) !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  gap: 10px !important;
}

body.category-page .provider-list {
  gap: 8px !important;
}

body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  min-height: 48px !important;
  border: 1px solid #D7E6FF !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  color: #12336F !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.045) !important;
}

body.category-page .provider-button.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3B86FF, #176BFF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(47, 123, 255, 0.22) !important;
}

body.category-page .game-grid {
  gap: 9px !important;
}

body.category-page .provider-card,
body.category-page .provider-card.slot-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 156px !important;
  padding: 0 !important;
  border: 1px solid #E2ECFF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.07) !important;
}

body.category-page .provider-card::before {
  display: none !important;
}

body.category-page .provider-card-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 96px !important;
  object-fit: cover !important;
  background: #EAF2FF !important;
}

body.category-page .provider-card-chip {
  position: absolute !important;
  z-index: 3 !important;
  left: 7px !important;
  top: 7px !important;
  min-height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #3B86FF, #176BFF) !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 5px 10px rgba(47, 123, 255, 0.22) !important;
}

body.category-page .provider-card strong {
  position: relative !important;
  z-index: 2 !important;
  display: -webkit-box !important;
  min-height: 31px !important;
  margin: 7px 8px 0 !important;
  overflow: hidden !important;
  color: #12336F !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body.category-page .provider-card small {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 2px 8px 8px !important;
  overflow: hidden !important;
  color: #6B7890 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.category-page .star-button {
  top: 6px !important;
  right: 6px !important;
  z-index: 4 !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: rgba(31, 42, 68, 0.32) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.12) !important;
}

body.category-page .star-button.active {
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(47, 123, 255, 0.82) !important;
  color: #F6C453 !important;
  box-shadow: 0 6px 14px rgba(47, 123, 255, 0.24) !important;
}

body.category-page .star-button svg {
  width: 13px !important;
  height: 13px !important;
}

body.category-page .empty-state {
  border-color: #BFD7FF !important;
  background: #FFFFFF !important;
  color: #6B7890 !important;
}

@media (max-width: 540px) {
  body.category-page.slot-page .category-layout {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.category-page.slot-page .provider-list {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    min-height: 43px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }

  body.category-page .game-grid,
  body.category-page.slot-page .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.category-page .provider-card,
  body.category-page .provider-card.slot-card {
    min-height: 138px !important;
    border-radius: 13px !important;
  }

  body.category-page .provider-card-art {
    height: 76px !important;
  }

  body.category-page .provider-card strong {
    min-height: 29px !important;
    margin: 6px 7px 0 !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  body.category-page .provider-card small {
    margin: 1px 7px 7px !important;
    font-size: 9px !important;
  }

  body.category-page .provider-card-chip {
    left: 5px !important;
    top: 5px !important;
    min-height: 16px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  body.category-page .star-button {
    width: 22px !important;
    height: 22px !important;
    top: 5px !important;
    right: 5px !important;
  }
}

/* ===== 我的页面：充值/提现/交易记录入口去掉背景和阴影 ===== */
body.profile-mode .profile-mini-actions button {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.profile-mode .profile-mini-actions .profile-line-icon,
body.profile-mode .profile-mini-actions .profile-line-icon.has-svg {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

body.profile-mode .profile-mini-actions .profile-line-icon.has-svg svg {
  filter: none !important;
}

/* 我的页面代理中心：佣金数字去拥挤 */
body.profile-mode .profile-invite-stats {
  gap: 14px !important;
}

body.profile-mode .profile-invite-stats article {
  min-height: 70px !important;
  padding: 13px 8px !important;
}

body.profile-mode .profile-invite-stats span {
  white-space: nowrap !important;
}

body.profile-mode .profile-invite-stats strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* 我的页面：会员 ID 复制按钮清晰化 */
body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"] {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(47, 123, 255, 0.28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 4px 10px rgba(15, 35, 80, 0.08) !important;
  cursor: pointer !important;
}

body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"]::before,
body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"]::after {
  content: "" !important;
  position: absolute !important;
  box-sizing: border-box !important;
  width: 9px !important;
  height: 11px !important;
  border: 1.6px solid #2f7bff !important;
  border-radius: 3px !important;
}

body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"]::before {
  left: 5px !important;
  top: 5px !important;
  background: transparent !important;
}

body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"]::after {
  left: 8px !important;
  top: 7px !important;
  background: #ffffff !important;
}

body.profile-mode .profile-member-meta button[data-profile-action="copyMemberId"]:active {
  transform: scale(0.96);
}

body.profile-mode .profile-member-meta .profile-vip-level-link {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 7px 15px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffe7a8, #ffc766) !important;
  color: #4b2f00 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  box-shadow: 0 6px 14px rgba(120, 53, 15, 0.12) !important;
}

/* 登录 / 注册：蓝白金融风视觉重做，仅作用于 auth 弹窗 */
body .modal.auth-mode {
  align-items: start !important;
  place-items: start center !important;
  padding: max(14px, env(safe-area-inset-top)) 14px 18px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(47, 128, 255, 0.2), transparent 34%),
    linear-gradient(180deg, #f5f8ff 0%, #f7faff 48%, #ffffff 100%) !important;
  backdrop-filter: none !important;
  overflow-y: auto !important;
}

body .modal.auth-mode .dialog {
  width: min(430px, 100%) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 50px 16px 18px !important;
  border: 1px solid rgba(47, 128, 255, 0.14) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 18px 44px rgba(30, 99, 216, 0.13) !important;
  color: #1f2a44 !important;
}

body .modal.auth-mode .dialog::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 120px !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(180deg, rgba(47, 128, 255, 0.12), rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
}

body .modal.auth-mode .dialog > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

body .modal.auth-mode .close {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 2 !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(47, 128, 255, 0.14) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: 0 8px 18px rgba(30, 99, 216, 0.08) !important;
  font-size: 0 !important;
}

body .modal.auth-mode .close::before {
  content: "" !important;
  width: 11px !important;
  height: 11px !important;
  border-left: 2.4px solid #1f2a44 !important;
  border-bottom: 2.4px solid #1f2a44 !important;
  transform: rotate(45deg) translate(1px, -1px) !important;
  display: block !important;
  margin: 13px auto !important;
}

body .modal.auth-mode .auth-shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 12px !important;
}

body .modal.auth-mode .auth-page-head {
  display: grid !important;
  gap: 16px !important;
  margin-bottom: 2px !important;
}

body .modal.auth-mode .auth-brand {
  margin: 0 !important;
  gap: 12px !important;
}

body .modal.auth-mode .auth-mark {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(14, 59, 143, 0.18) !important;
  color: #facc15 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body .modal.auth-mode .auth-mark::before {
  content: none !important;
  display: none !important;
}

body .modal.auth-mode .auth-mark img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

body .modal.auth-mode .auth-mark.fallback {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #061b47, #0e3b8f) !important;
  color: #facc15 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body .modal.auth-mode .auth-copy h3 {
  color: #1f2a44 !important;
  font-size: 20px !important;
  letter-spacing: 0.3px !important;
}

body .modal.auth-mode .auth-copy p {
  margin-top: 3px !important;
  color: #6b7890 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body .modal.auth-mode .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: 46px !important;
  padding: 4px !important;
  border: 1px solid #dce8ff !important;
  border-radius: 16px !important;
  background: #f7faff !important;
}

body .modal.auth-mode .auth-tabs button {
  position: relative !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #6b7890 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body .modal.auth-mode .auth-tabs button.active {
  color: #1e63d8 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(30, 99, 216, 0.1) !important;
}

body .modal.auth-mode .auth-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  width: 34px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2f80ff, #1e63d8) !important;
  transform: translateX(-50%) !important;
}

body .modal.auth-mode .auth-field,
body .modal.auth-mode .auth-select-field {
  display: grid !important;
  gap: 7px !important;
  color: #3a4a66 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body .modal.auth-mode .auth-shell input:not([type="checkbox"]):not([type="radio"]),
body .modal.auth-mode .auth-shell select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid #dce8ff !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  outline: none !important;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.035) !important;
}

body .modal.auth-mode .auth-shell input:focus,
body .modal.auth-mode .auth-shell select:focus {
  border-color: #2f80ff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 255, 0.11) !important;
}
/* 登录/注册输入框：占位提示文字居中，用户输入的文字保持左对齐 */
body .modal.auth-mode .auth-shell input::placeholder {
  text-align: center !important;
}

body .modal.auth-mode .auth-phone-wrap {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 48px !important;
  border: 1px solid #dce8ff !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.035) !important;
  overflow: hidden !important;
}

body .modal.auth-mode .auth-phone-wrap:focus-within {
  border-color: #2f80ff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 255, 0.11) !important;
}

body .modal.auth-mode .auth-phone-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 92px !important;
  height: 30px !important;
  margin-left: 10px !important;
  padding: 0 10px !important;
  border-right: 1px solid #e7edf8 !important;
  color: #1f2a44 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body .modal.auth-mode .auth-phone-flag {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #eef5ff !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body .modal.auth-mode .auth-phone-dial {
  color: #2f80ff !important;
  letter-spacing: 0 !important;
}

body .modal.auth-mode .auth-phone-wrap input {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 12px !important;
}

body .modal.auth-mode .auth-phone-wrap input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

body .modal.auth-mode .auth-input-wrap {
  position: relative !important;
  display: block !important;
}

body .modal.auth-mode .auth-password-wrap {
  position: relative !important;
  display: block !important;
}

/* 图标在左 12px，输入文字前预留约两个字符空隙；选择器带 .auth-shell + :not 保证权重高于基础 padding 规则 */
body .modal.auth-mode .auth-shell .auth-input-wrap input:not([type="checkbox"]) {
  padding-left: 50px !important;
  padding-right: 14px !important;
}

body .modal.auth-mode .auth-shell .auth-password-wrap input:not([type="checkbox"]) {
  padding-left: 50px !important;
  padding-right: 48px !important;
}

body .modal.auth-mode .auth-field-icon {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #2f80ff !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

body .modal.auth-mode .auth-field-svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .modal.auth-mode .auth-eye {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #eef5ff !important;
  color: #8b95a7 !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

body .modal.auth-mode .auth-eye svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .modal.auth-mode .auth-eye.active {
  background: #e4efff !important;
  color: #2f80ff !important;
}

body .modal.auth-mode .auth-error {
  margin: -4px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 77, 79, 0.16) !important;
  border-radius: 12px !important;
  background: #fff1f1 !important;
  color: #ff4d4f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body .modal.auth-mode .auth-error[hidden] {
  display: none !important;
}

body .modal.auth-mode .auth-password-hint {
  margin: -5px 2px 0 !important;
  color: #7a8598 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body .modal.auth-mode .auth-strength {
  display: grid !important;
  grid-template-columns: auto repeat(5, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: -3px !important;
  color: #8b95a7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body .modal.auth-mode .auth-strength i {
  height: 5px !important;
  border-radius: 999px !important;
  background: #dce8ff !important;
}

body .modal.auth-mode .auth-strength i:nth-of-type(1),
body .modal.auth-mode .auth-strength i:nth-of-type(2) {
  background: linear-gradient(90deg, #2f80ff, #1e63d8) !important;
}

body .modal.auth-mode .auth-strength em {
  color: #f6a623 !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

body .modal.auth-mode .auth-strength[data-score="0"] i,
body .modal.auth-mode .auth-strength[data-score="1"] i,
body .modal.auth-mode .auth-strength[data-score="2"] i,
body .modal.auth-mode .auth-strength[data-score="3"] i,
body .modal.auth-mode .auth-strength[data-score="4"] i,
body .modal.auth-mode .auth-strength[data-score="5"] i {
  background: #dce8ff !important;
}

body .modal.auth-mode .auth-strength[data-score="1"] i:nth-of-type(-n + 1),
body .modal.auth-mode .auth-strength[data-score="2"] i:nth-of-type(-n + 2) {
  background: #ff8f5b !important;
}

body .modal.auth-mode .auth-strength[data-score="3"] i:nth-of-type(-n + 3) {
  background: linear-gradient(90deg, #f6a623, #2f80ff) !important;
}

body .modal.auth-mode .auth-strength[data-score="4"] i:nth-of-type(-n + 4),
body .modal.auth-mode .auth-strength[data-score="5"] i:nth-of-type(-n + 5) {
  background: linear-gradient(90deg, #2f80ff, #1e63d8) !important;
}

body .modal.auth-mode .auth-strength[data-capped="true"] em {
  color: #ff5b5b !important;
}

body .modal.auth-mode .auth-row,
body .modal.auth-mode .auth-helper-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #6b7890 !important;
}

body .modal.auth-mode .auth-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #3a4a66 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body .modal.auth-mode .auth-check input {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px !important;
  accent-color: #2f80ff !important;
  box-shadow: none !important;
}

body .modal.auth-mode .auth-agreement {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  color: #3a4a66 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
/* 协议勾选框：固定小尺寸，不继承输入框的 100% 宽/48px 高 */
body .modal.auth-mode .auth-agreement input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px !important;
  accent-color: #2f80ff !important;
  box-shadow: none !important;
}

body .modal.auth-mode .auth-link,
body .modal.auth-mode .auth-service {
  border: 0 !important;
  background: transparent !important;
  color: #1e63d8 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body .modal.auth-mode .auth-submit {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #2F80FF 0%, #1E63D8 100%) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 20px rgba(47, 128, 255, 0.25) !important;
}

body .modal.auth-mode .auth-telegram {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2AABEE, #229ED9) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(34, 158, 217, 0.25) !important;
}

body .modal.auth-mode .auth-telegram-icon {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: currentColor !important;
  transform: translate(-1px, 1px) !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-section {
  display: grid !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-title {
  display: block !important;
  color: #8b95a7 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card,
body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-service,
body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-telegram {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  width: auto !important;
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 8px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  text-align: center !important;
  box-shadow: 0 8px 18px rgba(30, 99, 216, 0.08) !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card strong {
  color: #1f2a44 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card small {
  color: #6b7890 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon.support {
  background: #eaf2ff !important;
  color: #2f80ff !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon.telegram {
  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 7px 14px rgba(34, 158, 217, 0.22) !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon.telegram .auth-telegram-icon {
  width: 23px !important;
  height: 23px !important;
  transform: translate(-1px, 1px) !important;
}

body .modal.auth-mode .auth-note {
  margin: -2px 0 0 !important;
  color: #d49310 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #ffe7bd !important;
  border-radius: 14px !important;
  background: #fff8ee !important;
  color: #d98a00 !important;
  box-shadow: 0 8px 18px rgba(217, 138, 0, 0.08) !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-note strong {
  color: #d98a00 !important;
  font-weight: 950 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-note-icon {
  display: inline-grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: #f6a623 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* 注册页紧凑版：只压缩垂直间距，不改变颜色和结构 */
body .modal.auth-mode [data-auth-panel="register"] {
  gap: 10px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-page-head {
  gap: 8px !important;
  margin-bottom: 0 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-brand {
  min-height: 44px !important;
  gap: 9px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-mark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 16px rgba(14, 59, 143, 0.14) !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-copy h3 {
  font-size: 18px !important;
  line-height: 1.08 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-copy p {
  margin-top: 1px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-tabs {
  height: 42px !important;
  border-radius: 15px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-field,
body .modal.auth-mode [data-auth-panel="register"] .auth-select-field {
  gap: 5px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-shell input:not([type="checkbox"]):not([type="radio"]),
body .modal.auth-mode [data-auth-panel="register"] .auth-shell select,
body .modal.auth-mode [data-auth-panel="register"] .auth-phone-wrap {
  min-height: 44px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-phone-wrap input {
  min-height: 42px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-strength {
  gap: 6px !important;
  margin-top: -5px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-check {
  min-height: 22px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-submit {
  min-height: 48px !important;
  margin-top: -2px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-section {
  gap: 7px !important;
  margin-top: -4px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-grid {
  gap: 8px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card,
body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-service,
body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-telegram {
  min-height: 72px !important;
  padding: 8px 7px !important;
  gap: 3px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-svg,
body .modal.auth-mode [data-auth-panel="register"] .auth-contact-icon.telegram .auth-telegram-icon {
  width: 19px !important;
  height: 19px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card strong {
  font-size: 13px !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card small {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-note {
  gap: 7px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
}

body .modal.auth-mode [data-auth-panel="register"] .auth-note-icon {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
}

/* 登录页底部联系区与注册页保持一致 */
body .modal.auth-mode [data-auth-panel="login"] .auth-contact-section {
  display: grid !important;
  gap: 7px !important;
  margin-top: -2px !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-title {
  display: block !important;
  color: #8b95a7 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-card,
body .modal.auth-mode [data-auth-panel="login"] .auth-contact-card.auth-service,
body .modal.auth-mode [data-auth-panel="login"] .auth-contact-card.auth-telegram {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  width: auto !important;
  height: auto !important;
  min-height: 72px !important;
  padding: 8px 7px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  text-align: center !important;
  box-shadow: 0 8px 18px rgba(30, 99, 216, 0.08) !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-card strong {
  color: #1f2a44 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-card small {
  color: #6b7890 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-icon.support {
  background: #eaf2ff !important;
  color: #2f80ff !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-icon.telegram {
  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 7px 14px rgba(34, 158, 217, 0.22) !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .modal.auth-mode [data-auth-panel="login"] .auth-contact-icon.telegram .auth-telegram-icon {
  width: 19px !important;
  height: 19px !important;
  transform: translate(-1px, 1px) !important;
}

body .modal.auth-mode .auth-switch,
body .modal.auth-mode .auth-floating-ad,
body .modal.auth-mode .worldcup-live,
body .modal.auth-mode [class*="worldcup"],
body .modal.auth-mode [class*="float-ad"] {
  display: none !important;
}

@media (max-width: 430px) {
  body .modal.auth-mode {
    padding-inline: 10px !important;
  }

  body .modal.auth-mode .dialog {
    padding: 48px 13px 16px !important;
    border-radius: 20px !important;
  }

  body .modal.auth-mode .auth-shell {
    gap: 10px !important;
  }

  body .modal.auth-mode .auth-shell input:not([type="checkbox"]):not([type="radio"]),
  body .modal.auth-mode .auth-shell select {
    min-height: 46px !important;
  }

  body .modal.auth-mode [data-auth-panel="register"] {
    gap: 9px !important;
  }

  body .modal.auth-mode [data-auth-panel="register"] .auth-brand {
    gap: 8px !important;
  }

  body .modal.auth-mode [data-auth-panel="register"] .auth-mark {
    width: 42px !important;
    height: 42px !important;
  }

  body .modal.auth-mode [data-auth-panel="register"] .auth-shell input:not([type="checkbox"]):not([type="radio"]),
  body .modal.auth-mode [data-auth-panel="register"] .auth-shell select,
  body .modal.auth-mode [data-auth-panel="register"] .auth-phone-wrap {
    min-height: 42px !important;
  }

  body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card,
  body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-service,
  body .modal.auth-mode [data-auth-panel="register"] .auth-contact-card.auth-telegram {
    min-height: 68px !important;
    padding: 7px 6px !important;
  }
}

/* Recharge page compact responsive layout */
body.recharge-page {
  background: #f4f7fc !important;
  overflow-x: hidden !important;
}

body.recharge-page .recharge-shell {
  width: min(100%, 430px) !important;
  min-height: 100dvh !important;
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  background: #f4f7fc !important;
  color: #1f2a44 !important;
}

body.recharge-page .recharge-topbar {
  min-height: clamp(48px, 7dvh, 56px) !important;
  padding: 7px clamp(10px, 3vw, 12px) !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e7edf8 !important;
  box-shadow: 0 6px 18px rgba(15, 35, 80, 0.05) !important;
}

body.recharge-page .recharge-back {
  width: clamp(34px, 9vw, 38px) !important;
  height: clamp(34px, 9vw, 38px) !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 14px rgba(15, 35, 80, 0.06) !important;
}

body.recharge-page .recharge-back img {
  width: 23px !important;
  height: 23px !important;
}

body.recharge-page .recharge-title-group {
  gap: 6px !important;
}

body.recharge-page .recharge-topbar h1 {
  color: #1f2a44 !important;
  font-size: clamp(16px, 4vw, 18px) !important;
  letter-spacing: 0 !important;
}

body.recharge-page .recharge-title-group button,
body.recharge-page .recharge-top-actions button {
  min-height: 28px !important;
  padding: 0 clamp(7px, 2.5vw, 10px) !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2f7bff !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.recharge-page .recharge-top-actions {
  gap: 5px !important;
}

body.recharge-page .recharge-main {
  padding: clamp(8px, 2.6vw, 12px) !important;
  gap: clamp(8px, 2.2vw, 10px) !important;
}

body.recharge-page .recharge-section,
body.recharge-page .payment-summary,
body.recharge-page .receive-card,
body.recharge-page .payment-tips,
body.recharge-page .submitted-card,
body.recharge-page .recharge-records {
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 35, 80, 0.045) !important;
}

body.recharge-page .recharge-section {
  padding: clamp(9px, 2.6vw, 11px) !important;
}

body.recharge-page .recharge-section-head {
  margin-bottom: clamp(7px, 2vw, 9px) !important;
  gap: 6px !important;
}

body.recharge-page .recharge-section-head h2,
body.recharge-page .payment-tips h2,
body.recharge-page .submitted-card h2 {
  color: #1f2a44 !important;
  font-size: clamp(14px, 3.6vw, 16px) !important;
  line-height: 1.2 !important;
}

body.recharge-page .recharge-section-head span {
  color: #6b7890 !important;
  font-size: clamp(10px, 2.6vw, 12px) !important;
  line-height: 1.2 !important;
}

body.recharge-page .recharge-method-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(7px, 2vw, 9px) !important;
}

body.recharge-page .recharge-method-card {
  min-height: clamp(74px, 10dvh, 86px) !important;
  padding: clamp(8px, 2vw, 10px) !important;
  gap: 4px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "icon title check"
    "icon bonus check" !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: start !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04) !important;
}

body.recharge-page .recharge-method-card img {
  grid-area: icon !important;
  width: clamp(30px, 8vw, 36px) !important;
  height: clamp(30px, 8vw, 36px) !important;
  border-radius: 10px !important;
}

body.recharge-page .recharge-method-card strong {
  grid-area: title !important;
  max-width: 100% !important;
  color: #1f2a44 !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.recharge-page .recharge-method-card span {
  grid-area: bonus !important;
  color: #ff4d4f !important;
  font-size: clamp(10px, 2.7vw, 12px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

body.recharge-page .recharge-method-card em {
  grid-area: check !important;
  position: static !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid #c8d6ee !important;
  border-radius: 999px !important;
}

body.recharge-page .recharge-method-card.active {
  border-color: #ff4d4f !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
  box-shadow: 0 8px 20px rgba(255, 77, 79, 0.16) !important;
}

body.recharge-page .recharge-method-card.active em {
  border-color: #ff4d4f !important;
  background:
    radial-gradient(circle at center, #ffffff 0 31%, transparent 33%),
    #ff4d4f !important;
}

body.recharge-page .recharge-recommend {
  top: 5px !important;
  right: 6px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #fff4d8 !important;
  color: #d99a00 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
}

body.recharge-page .recharge-channel-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(7px, 2vw, 9px) !important;
}

body.recharge-page .recharge-channel-card {
  min-height: clamp(58px, 8dvh, 68px) !important;
  padding: clamp(8px, 2vw, 10px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: center !important;
  align-items: center !important;
  gap: 4px 6px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  box-shadow: 0 6px 14px rgba(15, 35, 80, 0.035) !important;
  text-align: left !important;
}

body.recharge-page .recharge-channel-card div {
  min-width: 0 !important;
}

body.recharge-page .recharge-channel-card strong {
  max-width: 100% !important;
  color: #1f2a44 !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.recharge-page .recharge-channel-card span {
  display: inline-block !important;
  width: fit-content !important;
  margin-top: 3px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #ffeaea !important;
  color: #ff4d4f !important;
  font-size: clamp(9px, 2.4vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.recharge-page .recharge-channel-card small {
  color: #6b7890 !important;
  font-size: clamp(9px, 2.4vw, 11px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

body.recharge-page .recharge-channel-card.active {
  border-color: #ff4d4f !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
  box-shadow: 0 8px 18px rgba(255, 77, 79, 0.14) !important;
}

body.recharge-page .recharge-field {
  gap: 6px !important;
  margin-top: 0 !important;
}

body.recharge-page .recharge-field span {
  color: #1f2a44 !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
  line-height: 1.1 !important;
}

body.recharge-page .recharge-field input,
body.recharge-page .amount-input {
  min-height: clamp(46px, 6.4dvh, 50px) !important;
  padding: 0 clamp(11px, 3vw, 14px) !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  font-size: clamp(14px, 3.8vw, 16px) !important;
  box-shadow: none !important;
}

body.recharge-page .amount-input {
  gap: 8px !important;
}

body.recharge-page .amount-input b {
  color: #1f2a44 !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
}

body.recharge-page .amount-input input {
  min-height: 42px !important;
  color: #1f2a44 !important;
  font-size: clamp(14px, 3.8vw, 16px) !important;
}

body.recharge-page .recharge-field small {
  color: #6b7890 !important;
  font-size: clamp(10px, 2.6vw, 12px) !important;
  line-height: 1.2 !important;
}

body.recharge-page .recharge-amount-section {
  display: grid !important;
  gap: 7px !important;
  padding-top: 7px !important;
  margin-top: -6px !important;
}

body.recharge-page .recharge-amount-section .recharge-section-head {
  margin-bottom: 0 !important;
  min-height: 0 !important;
  justify-content: flex-end !important;
}

body.recharge-page .recharge-amount-section .recharge-section-head h2 {
  display: none !important;
}

body.recharge-page .recharge-amount-section .recharge-section-head span {
  display: none !important;
}

body.recharge-page .recharge-quick-amounts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.recharge-page .recharge-quick-amount {
  min-height: 50px !important;
  padding: 6px 4px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  color: #1f2a44 !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.035) !important;
}

body.recharge-page .recharge-quick-amount strong {
  font-size: clamp(15px, 4vw, 17px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.recharge-page .recharge-quick-amount span {
  color: #ff9800 !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.recharge-page .recharge-quick-amount.active {
  border-color: #2f7cff !important;
  background: #f0f6ff !important;
  box-shadow: 0 8px 18px rgba(47, 124, 255, 0.14) !important;
}

body.recharge-page .recharge-custom-amount {
  margin-top: 0 !important;
}

body.recharge-page .recharge-arrival-tip {
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #f5f9ff !important;
  color: #6b7890 !important;
  font-size: clamp(12px, 3.1vw, 13px) !important;
  line-height: 1.35 !important;
}

body.recharge-page .recharge-arrival-tip strong {
  color: #1f2a44 !important;
  font-weight: 950 !important;
}

body.recharge-page .recharge-arrival-tip em {
  color: #ff9800 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body.recharge-page .recharge-arrival-tip.waived {
  background: #f7f9fd !important;
}

body.recharge-page .recharge-waive-bonus {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  color: #516078 !important;
  font-size: clamp(12px, 3vw, 13px) !important;
  line-height: 1.2 !important;
}

body.recharge-page .recharge-waive-bonus input {
  width: 16px !important;
  height: 16px !important;
  accent-color: #2f7cff !important;
  flex: 0 0 auto !important;
}

body.recharge-page .payment-lang-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 4px 0 0 !important;
}

body.recharge-page .payment-lang-tabs button {
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  border: 1px solid #d8e0ec !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #4b5565 !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.035) !important;
}

body.recharge-page .payment-lang-tabs button.active {
  border-color: #2f7cff !important;
  background: #edf5ff !important;
  color: #176bff !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(47, 124, 255, 0.12) !important;
}

body.recharge-page .payment-summary {
  padding: 10px 12px !important;
  gap: 8px !important;
}

body.recharge-page .payment-summary > div:first-child span,
body.recharge-page .payment-countdown span,
body.recharge-page .payment-summary dt {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #6b7890 !important;
}

body.recharge-page .payment-summary > div:first-child strong,
body.recharge-page .payment-countdown b,
body.recharge-page .payment-summary dd {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.recharge-page .payment-summary dl {
  gap: 5px !important;
}

body.recharge-page .payment-summary dl div {
  gap: 8px !important;
  min-height: 22px !important;
  align-items: center !important;
}

body.recharge-page .receive-card {
  padding: 10px 12px !important;
  margin-top: -3px !important;
}

body.recharge-page .receive-card .recharge-section-head {
  margin-bottom: 6px !important;
}

body.recharge-page .receive-card .recharge-section-head h2 {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.recharge-page .receive-card .recharge-section-head span {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

body.recharge-page .receive-grid {
  gap: 3px 8px !important;
}

body.recharge-page .receive-row {
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  gap: 3px 8px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

body.recharge-page .receive-row span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.recharge-page .receive-row strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body.recharge-page .receive-copy {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

body.recharge-page .receive-qr {
  margin-top: 9px !important;
  gap: 7px !important;
}

body.recharge-page .transfer-suffix {
  margin-top: 5px !important;
  padding-top: 6px !important;
  gap: 6px !important;
}

body.recharge-page .transfer-suffix-head {
  justify-items: center !important;
  text-align: center !important;
}

body.recharge-page .transfer-suffix-head span {
  color: #f5b400 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.recharge-page .suffix-boxes {
  display: flex !important;
  justify-content: center !important;
  gap: 9px !important;
}

body.recharge-page .suffix-boxes input {
  width: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
}

body.recharge-page .payment-upload-hint {
  color: #516078 !important;
}

body.recharge-page .deposit-tips-card {
  margin-top: 10px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 18px 18px 18px 20px !important;
  box-shadow: 0 6px 18px rgba(20, 60, 120, 0.08) !important;
  border: 1px solid #edf2ff !important;
  position: relative !important;
  overflow: hidden !important;
}

body.recharge-page .deposit-tips-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #ff9f1a !important;
}

body.recharge-page .deposit-tips-title {
  margin: 0 0 12px !important;
  color: #a85b00 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body.recharge-page .deposit-tips-list {
  margin: 0 !important;
  padding-left: 20px !important;
  color: #7a4a16 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

body.recharge-page .deposit-tips-list li {
  margin-bottom: 8px !important;
}

body.recharge-page .deposit-tips-list li:last-child {
  margin-bottom: 0 !important;
}

body.recharge-page .recharge-fixed-footer {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(100%, 430px) !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  padding: 8px clamp(10px, 3vw, 12px) calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(244, 247, 252, 0.92) !important;
  box-shadow: 0 -8px 20px rgba(15, 35, 80, 0.08) !important;
  backdrop-filter: blur(12px) !important;
}

body.recharge-page .recharge-next {
  min-height: 52px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #3b86ff, #176bff) !important;
  color: #ffffff !important;
  font-size: clamp(15px, 4vw, 17px) !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(47, 123, 255, 0.22) !important;
}

body.recharge-page .recharge-next[disabled] {
  background: #d8dee8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

@media (max-width: 374px), (max-height: 720px) {
  body.recharge-page .recharge-main {
    padding: 7px !important;
    gap: 7px !important;
  }

  body.recharge-page .recharge-section {
    padding: 8px !important;
  }

  body.recharge-page .recharge-section-head {
    margin-bottom: 6px !important;
  }

  body.recharge-page .recharge-method-card {
    min-height: 70px !important;
    padding: 7px !important;
  }

  body.recharge-page .recharge-method-card img {
    width: 28px !important;
    height: 28px !important;
  }

  body.recharge-page .recharge-channel-card {
    min-height: 56px !important;
    padding: 7px !important;
  }

  body.recharge-page .recharge-field input,
  body.recharge-page .amount-input {
    min-height: 44px !important;
  }

  body.recharge-page .recharge-next {
    min-height: 48px !important;
  }
}

/* ===== Withdraw page compact blue-white final override ===== */
body.withdraw-page {
  background: #f4f7fc !important;
  color: #1f2a44 !important;
}

body.withdraw-page .withdraw-shell {
  width: min(100%, 430px) !important;
  min-height: 100dvh !important;
  padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  background: #f4f7fc !important;
}

body.withdraw-page .withdraw-topbar {
  height: clamp(50px, 7dvh, 56px) !important;
  padding: 0 clamp(8px, 2.6vw, 12px) !important;
  border-bottom: 1px solid #e7edf8 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 14px rgba(15, 35, 80, 0.035) !important;
}

body.withdraw-page .withdraw-icon-button {
  width: clamp(34px, 9vw, 38px) !important;
  height: clamp(34px, 9vw, 38px) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1f2a44 !important;
}

body.withdraw-page .withdraw-icon-button:last-child {
  color: #2f7bff !important;
}

body.withdraw-page .withdraw-tabs {
  min-width: 0 !important;
  height: 100% !important;
}

body.withdraw-page .withdraw-tabs button {
  min-width: 0 !important;
  padding: 0 clamp(4px, 1.8vw, 10px) !important;
  color: #3a4a66 !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.withdraw-page .withdraw-tabs button.active {
  color: #2f7bff !important;
}

body.withdraw-page .withdraw-tabs button.active::after {
  left: clamp(10px, 3vw, 18px) !important;
  right: clamp(10px, 3vw, 18px) !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #2f7bff !important;
}

body.withdraw-page .withdraw-main {
  padding: clamp(8px, 2.4vw, 12px) !important;
  gap: clamp(8px, 2.3vw, 10px) !important;
}

body.withdraw-page .withdraw-balance-card {
  min-height: clamp(50px, 7dvh, 56px) !important;
  margin: 0 !important;
  padding: 0 clamp(12px, 3.4vw, 16px) !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04) !important;
}

body.withdraw-page .withdraw-balance-card div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.withdraw-page .withdraw-balance-card span {
  color: #6b7890 !important;
  font-size: clamp(12px, 3vw, 14px) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.withdraw-page .withdraw-balance-card strong {
  margin: 0 !important;
  color: #2f7bff !important;
  font-size: clamp(16px, 4.1vw, 19px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.withdraw-page .withdraw-balance-card button {
  width: 34px !important;
  height: 34px !important;
  color: #2f7bff !important;
}

body.withdraw-page .withdraw-methods {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(7px, 2vw, 9px) !important;
  padding: 25px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.withdraw-page .withdraw-methods::before {
  content: "提现方式" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  color: #1f2a44 !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-methods button {
  min-height: clamp(58px, 8dvh, 66px) !important;
  padding: 0 10px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #3a4a66 !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
  font-weight: 950 !important;
  box-shadow: 0 5px 14px rgba(15, 35, 80, 0.035) !important;
}

body.withdraw-page .withdraw-methods button.active {
  border-color: #ff4d4f !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
  color: #ff4d4f !important;
  box-shadow: 0 8px 18px rgba(255, 77, 79, 0.12) !important;
}

body.withdraw-page .withdraw-methods button.active::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #ff4d4f !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
}

body.withdraw-page .withdraw-account-card {
  position: relative !important;
  min-height: clamp(62px, 8.4dvh, 72px) !important;
  margin-top: 24px !important;
  padding: clamp(9px, 2.5vw, 12px) !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 9px !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04) !important;
}

body.withdraw-page .withdraw-account-card::before {
  content: "提现账户" !important;
  position: absolute !important;
  left: 0 !important;
  top: -24px !important;
  color: #1f2a44 !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-gold-icon {
  width: clamp(36px, 9.5vw, 42px) !important;
  height: clamp(36px, 9.5vw, 42px) !important;
  border-radius: 12px !important;
  background: #eef5ff !important;
  color: #2f7bff !important;
}

body.withdraw-page .withdraw-account-card strong,
body.withdraw-page .withdraw-account-type strong,
body.withdraw-page .withdraw-bound-account strong {
  color: #1f2a44 !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body.withdraw-page .withdraw-account-card small,
body.withdraw-page .withdraw-account-type small,
body.withdraw-page .withdraw-bound-account small {
  color: #8b95a7 !important;
  font-size: clamp(10px, 2.7vw, 12px) !important;
  line-height: 1.25 !important;
}

body.withdraw-page .withdraw-account-card b {
  color: #8b95a7 !important;
}

body.withdraw-page .withdraw-form-card {
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.withdraw-page .withdraw-form-card label {
  gap: 7px !important;
}

body.withdraw-page .withdraw-form-card label > span {
  color: #1f2a44 !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-amount-input {
  min-height: clamp(48px, 6.8dvh, 52px) !important;
  padding: 0 clamp(10px, 3vw, 13px) !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.withdraw-page .withdraw-amount-input b {
  color: #1f2a44 !important;
  font-size: clamp(13px, 3.3vw, 15px) !important;
}

body.withdraw-page .withdraw-amount-input input {
  min-height: 42px !important;
  color: #1f2a44 !important;
  font-size: clamp(14px, 3.7vw, 16px) !important;
}

body.withdraw-page .withdraw-amount-input input::placeholder {
  color: #8b95a7 !important;
}

body.withdraw-page .withdraw-amount-input button {
  color: #2f7bff !important;
  font-size: clamp(12px, 3.1vw, 14px) !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.withdraw-page .withdraw-rules {
  display: grid !important;
  gap: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #f8fafd !important;
  box-shadow: none !important;
}

body.withdraw-page .withdraw-rules p {
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #e7edf8 !important;
  color: #3a4a66 !important;
  font-size: clamp(11px, 2.9vw, 13px) !important;
  line-height: 1.25 !important;
}

body.withdraw-page .withdraw-rules p:last-child {
  border-bottom: 0 !important;
}

body.withdraw-page .withdraw-submit {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 30 !important;
  width: min(100%, 430px) !important;
  min-height: auto !important;
  padding: 8px clamp(10px, 3vw, 12px) calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(244, 247, 252, 0.92) !important;
  color: transparent !important;
  box-shadow: 0 -8px 20px rgba(15, 35, 80, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  transform: translateX(-50%) !important;
}

body.withdraw-page .withdraw-submit::before {
  content: "确定提现" !important;
  display: grid !important;
  place-items: center !important;
  min-height: 52px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #3b86ff, #176bff) !important;
  color: #ffffff !important;
  font-size: clamp(15px, 4vw, 17px) !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(47, 123, 255, 0.22) !important;
}

body.withdraw-page .withdraw-submit:disabled {
  background: rgba(244, 247, 252, 0.92) !important;
  opacity: 1 !important;
  filter: none !important;
}

body.withdraw-page .withdraw-submit:disabled::before {
  background: #d8dee8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.withdraw-page .withdraw-account-tip {
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #eef5ff !important;
  color: #2f7bff !important;
  font-size: clamp(11px, 2.9vw, 13px) !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-account-title {
  margin: 6px 0 0 !important;
  color: #1f2a44 !important;
  font-size: clamp(16px, 4.2vw, 18px) !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-account-list,
body.withdraw-page .withdraw-record-list {
  gap: 8px !important;
}

body.withdraw-page .withdraw-account-type,
body.withdraw-page .withdraw-bound-account {
  min-height: clamp(70px, 9dvh, 82px) !important;
  padding: 11px !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(15, 35, 80, 0.04) !important;
}

body.withdraw-page .withdraw-bound-account .withdraw-gold-icon {
  width: clamp(38px, 10vw, 44px) !important;
  height: clamp(38px, 10vw, 44px) !important;
}

body.withdraw-page .withdraw-bound-account button,
body.withdraw-page .withdraw-account-type em {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #2f7bff !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2f7bff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-bound-account button.active {
  background: #2f7bff !important;
  color: #ffffff !important;
}

body.withdraw-page .withdraw-bound-account button.withdraw-edit-account {
  width: 26px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8b95a7 !important;
}

body.withdraw-page .withdraw-warm-tip {
  gap: 7px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #f8fafd !important;
}

body.withdraw-page .withdraw-warm-tip p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.withdraw-page .withdraw-bind-card {
  padding: 12px !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

body.withdraw-page .withdraw-bind-card .withdraw-section-head {
  min-height: 42px !important;
  padding: 0 0 8px !important;
}

body.withdraw-page .withdraw-bind-card .withdraw-bind-title {
  color: #1f2a44 !important;
  font-size: clamp(16px, 4.2vw, 18px) !important;
}

body.withdraw-page .withdraw-bind-card input,
body.withdraw-page .withdraw-bind-card select {
  min-height: 44px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
}

body.withdraw-page .withdraw-bind-card form {
  gap: 10px !important;
}

body.withdraw-page .withdraw-bind-card form button,
body.withdraw-page .withdraw-dialog-actions button:last-child {
  min-height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #3b86ff, #176bff) !important;
  color: #ffffff !important;
}

@media (max-width: 374px), (max-height: 720px) {
  body.withdraw-page .withdraw-main {
    padding: 7px !important;
    gap: 7px !important;
  }

  body.withdraw-page .withdraw-shell {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.withdraw-page .withdraw-methods {
    padding-top: 23px !important;
  }

  body.withdraw-page .withdraw-methods button {
    min-height: 54px !important;
    font-size: 13px !important;
  }

  body.withdraw-page .withdraw-account-card {
    min-height: 58px !important;
    margin-top: 22px !important;
    padding: 8px !important;
  }

  body.withdraw-page .withdraw-form-card {
    padding-top: 22px !important;
  }

  body.withdraw-page .withdraw-amount-input {
    min-height: 46px !important;
  }

  body.withdraw-page .withdraw-rules {
    padding: 6px 10px !important;
  }

  body.withdraw-page .withdraw-rules p {
    padding: 5px 0 !important;
  }

  body.withdraw-page .withdraw-submit::before {
    min-height: 48px !important;
  }
}

/* ===== Withdraw account edit form polish ===== */
body.withdraw-page .withdraw-bind-card {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.045) !important;
}

body.withdraw-page .withdraw-bind-card .withdraw-section-head {
  min-height: 38px !important;
  padding: 0 !important;
}

body.withdraw-page .withdraw-bind-card .withdraw-section-head button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2f7bff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-bind-card .withdraw-bind-title {
  color: #1f2a44 !important;
  font-size: clamp(17px, 4.5vw, 19px) !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-bind-method-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 72px !important;
  padding: 11px !important;
  border: 1px solid #e7edf8 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
}

body.withdraw-page .withdraw-bind-method-card .withdraw-gold-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: #eef5ff !important;
  color: #2f7bff !important;
}

body.withdraw-page .withdraw-bind-method-card strong {
  display: block !important;
  color: #1f2a44 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body.withdraw-page .withdraw-bind-method-card small {
  display: block !important;
  margin-top: 2px !important;
  color: #2f7bff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-bind-method-card p {
  margin: 4px 0 0 !important;
  color: #6b7890 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.withdraw-page .withdraw-bind-card form {
  gap: 10px !important;
}

body.withdraw-page .withdraw-bind-card label {
  gap: 6px !important;
  color: #1f2a44 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-bind-card label > span {
  color: #3a4a66 !important;
}

body.withdraw-page .withdraw-bind-card input,
body.withdraw-page .withdraw-bind-card select {
  min-height: 48px !important;
  padding: 0 13px !important;
  border: 1px solid #dce5f5 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #1f2a44 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.withdraw-page .withdraw-bind-card input:focus,
body.withdraw-page .withdraw-bind-card select:focus {
  border-color: #2f7bff !important;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.1) !important;
  outline: none !important;
}

body.withdraw-page .withdraw-bind-card input::placeholder {
  color: #8b95a7 !important;
  font-weight: 700 !important;
}

body.withdraw-page .withdraw-field-error {
  display: block !important;
  margin-top: 0 !important;
  color: #ff4d4f !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

body.withdraw-page .withdraw-record-card > div {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.withdraw-page .withdraw-record-card > div .withdraw-record-method-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #f4f8ff !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08) !important;
}

body.withdraw-page .withdraw-record-method-icon img,
body.withdraw-page .withdraw-record-method-icon svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.withdraw-page .withdraw-record-card > div > span:not(.withdraw-record-method-icon) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.withdraw-page .withdraw-record-card > div strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

body.withdraw-page .withdraw-record-card em {
  grid-column: 3 !important;
}

body.withdraw-page .withdraw-bind-safe-tip {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 10px 11px !important;
  border: 1px solid #ffe3b0 !important;
  border-radius: 14px !important;
  background: #fff8ee !important;
  color: #d98a00 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

body.withdraw-page .withdraw-bind-safe-tip b {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffb84d !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

body.withdraw-page .withdraw-bind-card form button[type="submit"] {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #3b86ff, #176bff) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(47, 123, 255, 0.2) !important;
}

body.withdraw-page .withdraw-password-setup {
  display: grid;
  gap: 12px;
}

body.withdraw-page .withdraw-password-setup p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dce5f5;
  border-radius: 14px;
  background: #eef5ff;
  color: #3a4a66;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

body.withdraw-page .withdraw-password-setup label {
  display: grid;
  gap: 6px;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 900;
}

body.withdraw-page .withdraw-password-setup input {
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #dce5f5;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2a44;
  font-size: 14px;
  font-weight: 800;
}

body.withdraw-page .withdraw-password-setup input:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.1);
  outline: none;
}

body.withdraw-page .withdraw-password-setup small {
  color: #ff4d4f;
  font-size: 12px;
  font-weight: 900;
}

/* ===== First recharge gift visual polish ===== */
body.first-recharge-page .first-gift-art.first-gift-art-svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 168px !important;
  overflow: visible !important;
}

body.first-recharge-page .first-gift-art.first-gift-art-svg img {
  display: block !important;
  width: min(190px, 132%) !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(4px) scale(1.03) !important;
  filter: drop-shadow(0 12px 22px rgba(37, 99, 235, 0.16)) !important;
}

body.first-recharge-page .first-gift-art .vip-card {
  border: 1px solid rgba(246, 196, 83, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(135deg, #0e3b8f, #2f7bff) !important;
  color: #fff1b8 !important;
  letter-spacing: 0 !important;
}

body.first-recharge-page .first-gift-art .gift-box {
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background:
    linear-gradient(90deg, transparent 39%, #f6c453 39% 61%, transparent 61%),
    linear-gradient(180deg, transparent 42%, rgba(14, 59, 143, 0.18) 42%),
    linear-gradient(135deg, #3b8cff, #0e3b8f) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 16px 30px rgba(47, 123, 255, 0.22) !important;
}

body.first-recharge-page .first-gift-art .gift-box::before {
  background:
    linear-gradient(90deg, transparent 39%, #fff3ba 39% 61%, transparent 61%),
    linear-gradient(135deg, #ffe18a, #f6c453) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 10px rgba(246, 196, 83, 0.22) !important;
}

body.first-recharge-page .first-task-list {
  counter-reset: firstTaskLevel !important;
}

body.first-recharge-page .first-task-item {
  counter-increment: firstTaskLevel !important;
}

body.first-recharge-page .first-task-item .first-task-icon {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 12px !important;
  overflow: visible !important;
  background:
    linear-gradient(90deg, transparent 39%, #f6c453 39% 61%, transparent 61%),
    linear-gradient(180deg, transparent 43%, rgba(14, 59, 143, 0.14) 43%),
    linear-gradient(135deg, #3f8cff 0%, #2f7bff 46%, #0e3b8f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 8px 16px rgba(47, 123, 255, 0.18) !important;
  clip-path: none !important;
}

body.first-recharge-page .first-task-item .first-task-icon::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  right: -3px !important;
  top: 6px !important;
  bottom: auto !important;
  width: auto !important;
  height: 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  transform: none !important;
  clip-path: none !important;
  background:
    linear-gradient(90deg, transparent 39%, #fff3ba 39% 61%, transparent 61%),
    linear-gradient(135deg, #ffe18a, #f6c453) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 3px 7px rgba(16, 43, 98, 0.1) !important;
}

body.first-recharge-page .first-task-item .first-task-icon::after {
  content: counter(firstTaskLevel) !important;
  position: absolute !important;
  left: -5px !important;
  right: auto !important;
  top: -6px !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  transform: none !important;
  clip-path: none !important;
  background: linear-gradient(135deg, #fff5c8, #f6c453) !important;
  box-shadow: 0 5px 10px rgba(246, 196, 83, 0.22) !important;
  color: #0e3b8f !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.first-recharge-page .first-task-item.active .first-task-icon {
  background:
    linear-gradient(90deg, transparent 39%, #fff0a8 39% 61%, transparent 61%),
    linear-gradient(180deg, transparent 43%, rgba(14, 59, 143, 0.16) 43%),
    linear-gradient(135deg, #52a0ff 0%, #2f7bff 44%, #0e3b8f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 18px rgba(47, 123, 255, 0.24) !important;
}

body.first-recharge-page .first-task-copy strong {
  color: #d4a72c !important;
}

@media (max-width: 430px) {
  body.first-recharge-page .first-gift-art.first-gift-art-svg {
    min-height: 110px !important;
  }

  body.first-recharge-page .first-gift-art.first-gift-art-svg img {
    width: min(134px, 136%) !important;
    transform: translateX(2px) scale(1.02) !important;
  }

  body.first-recharge-page .first-task-item .first-task-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  body.first-recharge-page .first-task-item .first-task-icon::before {
    top: 5px !important;
    height: 10px !important;
  }

  body.first-recharge-page .first-task-item .first-task-icon::after {
    left: -5px !important;
    top: -6px !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
  }
}

/* ===== Promo reward gift icons: vector asset, no pixelated CSS art ===== */
body.first-recharge-page .first-task-list,
body.loss-rescue-page .loss-task-list {
  counter-reset: promoGiftLevel !important;
}

body.first-recharge-page .first-task-item,
body.loss-rescue-page .loss-task-item {
  counter-increment: promoGiftLevel !important;
}

body.first-recharge-page .first-task-item .first-task-icon,
body.loss-rescue-page .loss-task-item .loss-task-icon {
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: url("./assets/promo/n9-gift-blue-gold.svg") center / 118% 118% no-repeat !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body.first-recharge-page .first-task-item .first-task-icon::before,
body.loss-rescue-page .loss-task-item .loss-task-icon::before {
  content: "" !important;
  display: none !important;
}

body.first-recharge-page .first-task-item .first-task-icon::after,
body.loss-rescue-page .loss-task-item .loss-task-icon::after {
  content: counter(promoGiftLevel) !important;
  position: absolute !important;
  left: -3px !important;
  top: -4px !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  transform: none !important;
  clip-path: none !important;
  background: linear-gradient(135deg, #fff4c4, #f6c453) !important;
  box-shadow: 0 5px 10px rgba(246, 196, 83, 0.22) !important;
  color: #0e3b8f !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.first-recharge-page .first-task-item.active .first-task-icon,
body.loss-rescue-page .loss-task-item.active .loss-task-icon {
  filter: drop-shadow(0 8px 12px rgba(47, 123, 255, 0.16)) !important;
}

@media (max-width: 430px) {
  body.first-recharge-page .first-task-item,
  body.loss-rescue-page .loss-task-item {
    grid-template-columns: 40px 1fr 66px !important;
  }

  body.first-recharge-page .first-task-item .first-task-icon,
  body.loss-rescue-page .loss-task-item .loss-task-icon {
    width: 40px !important;
    height: 40px !important;
  }

  body.first-recharge-page .first-task-item .first-task-icon::after,
  body.loss-rescue-page .loss-task-item .loss-task-icon::after {
    left: -3px !important;
    top: -4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }
}

/* ===== Loss rescue gift icon: inline SVG, no external image dependency ===== */
body.loss-rescue-page .loss-task-item {
  grid-template-columns: 81px minmax(0, 1fr) 70px !important;
}

.rescue-gift-icon {
  position: relative;
  flex: 0 0 81px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 81px;
  height: 81px;
  animation: rescueGiftFloat 2.5s ease-in-out infinite;
}

.rescue-gift-icon svg,
.rescue-gift-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 15px rgba(37, 99, 235, 0.34))
    drop-shadow(0 0 8px rgba(125, 183, 255, 0.24))
    brightness(1.16)
    saturate(1.2);
}

.rescue-gift-icon .gift-rank {
  position: absolute;
  left: 7px;
  top: 4px;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7cc, #facc15);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
  color: #0f2e66;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

@keyframes rescueGiftFloat {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

body.loss-rescue-page .loss-task-item .loss-task-icon {
  display: none !important;
}

/* ===== First deposit task gift icon: royal blue-gold chest ===== */
body.first-recharge-page .first-task-item {
  grid-template-columns: 99px minmax(0, 1fr) 70px !important;
}

.first-deposit-chest-icon {
  position: relative;
  flex: 0 0 99px;
  width: 99px;
  height: 99px;
  margin-right: 8px;
  animation: fdFloat 2.6s ease-in-out infinite;
}

.first-deposit-chest-icon img {
  display: block;
  width: 108px;
  max-width: none;
  height: 108px;
  object-fit: contain;
  transform: translate(-5px, -7px);
  filter:
    drop-shadow(0 8px 15px rgba(37, 99, 235, 0.3))
    drop-shadow(0 0 8px rgba(125, 183, 255, 0.22))
    brightness(1.14)
    saturate(1.18);
}

.first-deposit-chest-icon .fd-rank {
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 5;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #ffd54f);
  border: 2px solid #ffffff;
  color: #0f2e66;
  font-size: 12px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.28);
}

.first-deposit-chest-icon .fd-crown {
  position: absolute;
  left: 26px;
  top: 3px;
  z-index: 4;
  width: 25px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff7cc, #facc15, #d97706);
  clip-path: polygon(0 100%, 0 45%, 22% 70%, 38% 18%, 50% 62%, 66% 18%, 82% 70%, 100% 45%, 100% 100%);
}

.first-deposit-chest-icon .fd-chest {
  position: absolute;
  left: 9px;
  top: 24px;
  width: 50px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px 8px 10px 10px;
  background: linear-gradient(145deg, #2563eb, #0f2e66);
  box-shadow: 0 8px 15px rgba(37, 99, 235, 0.25);
}

.first-deposit-chest-icon .fd-lid {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 13px;
  background: linear-gradient(145deg, #60a5fa, #1d4ed8);
  border-bottom: 5px solid #facc15;
}

.first-deposit-chest-icon .fd-band {
  position: absolute;
  left: 21px;
  top: 0;
  width: 9px;
  height: 34px;
  background: linear-gradient(180deg, #fff7cc, #facc15, #d97706);
}

.first-deposit-chest-icon .fd-lock {
  position: absolute;
  left: 18px;
  top: 15px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff7cc, #facc15);
  color: #0f2e66;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

.first-deposit-chest-icon .fd-coins {
  position: absolute;
  left: 8px;
  bottom: 2px;
  z-index: 1;
  width: 50px;
  height: 10px;
  background:
    radial-gradient(circle at 12px 5px, #ffd54f 0 5px, transparent 6px),
    radial-gradient(circle at 28px 4px, #facc15 0 5px, transparent 6px),
    radial-gradient(circle at 43px 6px, #ffd54f 0 4px, transparent 5px);
}

@keyframes fdFloat {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 390px) {
  body.first-recharge-page .first-gift-art.first-gift-art-svg {
    display: flex !important;
    min-height: 124px !important;
  }

  body.first-recharge-page .first-gift-art.first-gift-art-svg img {
    width: min(168px, 78vw) !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body.first-recharge-page .first-task-item {
    grid-template-columns: 86px minmax(0, 1fr) 66px !important;
  }

  .first-deposit-chest-icon {
    flex-basis: 86px;
    width: 86px;
    height: 86px;
    margin-right: 6px;
  }

  .first-deposit-chest-icon img {
    width: 95px;
    height: 95px;
    transform: translate(-4px, -6px);
  }

  .first-deposit-chest-icon .fd-crown {
    left: 24px;
  }

  .first-deposit-chest-icon .fd-chest {
    left: 7px;
    width: 48px;
  }

  .first-deposit-chest-icon .fd-lid {
    width: 48px;
  }

  body.loss-rescue-page .loss-task-item {
    grid-template-columns: 74px minmax(0, 1fr) 66px !important;
  }

  .rescue-gift-icon {
    flex-basis: 74px;
    width: 74px;
    height: 74px;
  }

  .rescue-gift-icon .gift-rank {
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
  }
}

/* ===== Category games: cached loading, maintenance state, image fallback polish ===== */
body.category-page .category-inline-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #dce8ff;
  border-radius: 999px;
  background: rgba(234, 242, 255, 0.82);
  color: #2f7bff;
  font-size: 12px;
  font-weight: 800;
}

body.category-page .provider-card.is-maintenance {
  opacity: 0.82;
}

body.category-page .provider-card.is-maintenance .provider-card-art {
  filter: grayscale(0.35) saturate(0.75);
}

body.category-page .provider-card.is-maintenance .provider-card-chip {
  background: #fff4d8 !important;
  color: #d99a00 !important;
  border-color: rgba(246, 196, 83, 0.38) !important;
}

body.category-page .provider-card-art {
  background: linear-gradient(135deg, #eaf2ff, #ffffff);
}

/* ===== CQ9/category cards: larger complete artwork + faster perceived render ===== */
body.category-page .provider-card,
body.category-page .provider-card.slot-card {
  grid-template-rows: auto auto !important;
  min-height: 184px !important;
}

body.category-page .provider-card-art {
  height: 140px !important;
  object-fit: contain !important;
  object-position: center !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(234, 242, 255, 0.7) 52%, rgba(218, 232, 255, 0.88)) !important;
}

body.category-page .provider-card[data-provider-key="cq9"] .provider-card-art {
  object-fit: contain !important;
}

body.category-page .provider-card strong {
  margin-top: 7px !important;
  min-height: 30px !important;
  text-align: center !important;
}

body.category-page .provider-card small {
  display: none !important;
}

/* ===== 首页热门游戏：跟分类页同款海报卡，略大一点 ===== */
#homeView .game-section[data-section="hot"] .games-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

#homeView .game-section[data-section="hot"] .provider-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(226, 236, 255, 0.92) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #dfeaff !important;
  box-shadow: 0 9px 22px rgba(15, 35, 80, 0.09) !important;
}

#homeView .game-section[data-section="hot"] .provider-card-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: linear-gradient(135deg, #eaf2ff, #dbeaff) !important;
}

#homeView .game-section[data-section="hot"] .provider-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 48, 0) 0%,
    rgba(8, 22, 48, 0) 52%,
    rgba(8, 22, 48, 0.48) 78%,
    rgba(8, 22, 48, 0.82) 100%
  ) !important;
}

#homeView .game-section[data-section="hot"] .provider-card strong {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 7px 8px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.52) !important;
}

#homeView .game-section[data-section="hot"] .provider-card small {
  display: none !important;
}

#homeView .game-section[data-section="hot"] .provider-card-chip {
  position: absolute !important;
  z-index: 3 !important;
  left: 6px !important;
  top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  min-height: 18px !important;
  max-width: calc(100% - 42px) !important;
  padding: 0 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(47, 123, 255, 0.9) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

#homeView .game-section[data-section="hot"] .favorite-toggle {
  position: absolute !important;
  z-index: 4 !important;
  top: 6px !important;
  right: 6px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
  background: rgba(31, 42, 68, 0.32) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.16) !important;
  backdrop-filter: blur(8px) !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
}

#homeView .game-section .favorite-toggle,
#homeView .home-collection-section .favorite-toggle {
  z-index: 10 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
}

#homeView .game-section[data-section="hot"] .favorite-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

@media (min-width: 541px) {
  #homeView .game-section[data-section="hot"] .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 540px) {
  #homeView .game-section[data-section="hot"] .games-grid {
    gap: 8px !important;
  }

  #homeView .game-section[data-section="hot"] .provider-card {
    border-radius: 12px !important;
  }

  #homeView .game-section[data-section="hot"] .provider-card strong {
    padding: 18px 5px 7px !important;
    font-size: 10px !important;
  }

  #homeView .game-section[data-section="hot"] .provider-card-chip {
    left: 5px !important;
    top: 5px !important;
    min-width: 28px !important;
    min-height: 16px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  #homeView .game-section[data-section="hot"] .favorite-toggle {
    top: 5px !important;
    right: 5px !important;
    width: 34px !important;
    height: 34px !important;
  }
}

/* ===== 后台游戏管理：分类厂商入口图片配置 ===== */
body.ops-page .ops-game-bulk-toolbar {
  align-items: stretch;
  flex-direction: column;
}

body.ops-page .ops-provider-card-config {
  display: grid;
  gap: 10px;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid #e7edf8;
}

body.ops-page .ops-provider-card-config-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body.ops-page .ops-provider-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

body.ops-page .ops-provider-card-field {
  display: grid;
  gap: 5px;
}

body.ops-page .ops-provider-card-field span {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-provider-card-field input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 10px;
  font-size: 12px;
  outline: none;
}

body.ops-page .ops-provider-card-field input:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.12);
}

body.ops-page .ops-provider-card-actions {
  display: flex;
  justify-content: flex-end;
}

body.ops-page .ops-provider-card-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #2f7bff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

/* ===== 后台游戏管理：运营列表 / 热门管理 ===== */
body.ops-page .ops-game-thumb {
  position: relative;
  width: 58px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe7fb;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf5ff, #ffffff);
  color: #2f7bff;
  font-size: 11px;
  font-weight: 950;
}

body.ops-page .ops-game-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.ops-page .ops-game-thumb-fallback {
  padding: 4px;
  text-align: center;
  line-height: 1.1;
}

body.ops-page .ops-game-name-cell {
  display: block;
  min-width: 120px;
  color: #1f2a44;
  font-size: 13px;
  line-height: 1.25;
}

body.ops-page .ops-game-code-cell {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  color: #475569;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ops-page .ops-inline-sort-input {
  width: 64px;
  min-height: 30px;
  box-sizing: border-box;
  border: 1px solid #dbe7fb;
  border-radius: 9px;
  background: #ffffff;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

body.ops-page .ops-inline-sort-input:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.12);
}

body.ops-page .ops-hot-manager {
  display: grid;
  gap: 12px;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid #e7edf8;
}

body.ops-page .ops-hot-manager-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body.ops-page .ops-hot-manager-head small {
  flex: none;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2f7bff;
  font-size: 11px;
  font-weight: 950;
}

body.ops-page .ops-hot-manager-controls {
  display: grid;
  grid-template-columns: 120px 120px minmax(220px, 1fr) 110px auto;
  gap: 8px;
  align-items: end;
}

body.ops-page .ops-hot-manager-controls label {
  display: grid;
  gap: 5px;
}

body.ops-page .ops-hot-manager-controls label span {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-hot-manager-controls select,
body.ops-page .ops-hot-manager-controls input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 10px;
  font-size: 12px;
  outline: none;
}

body.ops-page .ops-hot-manager-controls button,
body.ops-page .ops-hot-item button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: #2f7bff;
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 950;
}

body.ops-page .ops-hot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

body.ops-page .ops-hot-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e7edf8;
  border-radius: 14px;
  background: #f8fbff;
}

body.ops-page .ops-hot-item .ops-game-thumb {
  width: 46px;
  border-radius: 10px;
}

body.ops-page .ops-hot-item strong,
body.ops-page .ops-hot-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ops-page .ops-hot-item strong {
  color: #1f2a44;
  font-size: 12px;
}

body.ops-page .ops-hot-item span,
body.ops-page .ops-hot-empty {
  color: #64748b;
  font-size: 11px;
}

body.ops-page .ops-hot-item button {
  background: #ffffff;
  border: 1px solid #ffd5d5;
  color: #ef4444;
}

body.ops-page .ops-game-provider-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

body.ops-page .ops-game-provider-tabs button {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 54px;
  display: grid;
  gap: 3px;
  align-content: center;
  border: 1px solid #dbe7fb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  color: #1f2a44;
  box-shadow: 0 8px 18px rgba(55, 91, 145, 0.08);
}

body.ops-page .ops-game-provider-tabs button strong,
body.ops-page .ops-game-provider-tabs button span {
  display: block;
}

body.ops-page .ops-game-provider-tabs button strong {
  font-size: 13px;
  font-weight: 950;
}

body.ops-page .ops-game-provider-tabs button span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body.ops-page .ops-game-provider-tabs button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #2f80ff, #1e63d8);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(47, 128, 255, 0.22);
}

body.ops-page .ops-game-provider-tabs button.active span {
  color: rgba(255, 255, 255, 0.82);
}

body.ops-page .ops-game-console {
  display: grid;
  gap: 14px;
}

body.ops-page .ops-game-console.has-provider-panel {
  grid-template-columns: 286px minmax(0, 1fr);
  align-items: start;
}

body.ops-page .ops-game-provider-panel {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe7fb;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  box-shadow: 0 12px 30px rgba(55, 91, 145, 0.08);
}

body.ops-page .ops-game-provider-panel-head {
  display: grid;
  gap: 2px;
  padding: 4px 4px 8px;
}

body.ops-page .ops-game-provider-panel-head strong {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 950;
}

body.ops-page .ops-game-provider-panel-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-provider-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px solid #dbe7fb;
  border-radius: 16px;
  background: #ffffff;
  color: #1f2a44;
  text-align: left;
  box-shadow: 0 8px 18px rgba(55, 91, 145, 0.06);
}

body.ops-page .ops-provider-tile strong,
body.ops-page .ops-provider-tile span,
body.ops-page .ops-provider-tile small {
  display: block;
  min-width: 0;
}

body.ops-page .ops-provider-tile strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ops-page .ops-provider-tile span,
body.ops-page .ops-provider-tile small {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

body.ops-page .ops-provider-tile b {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 34px;
  border-radius: 12px;
  background: #edf5ff;
  color: #2f7bff;
  font-size: 14px;
  font-weight: 950;
}

body.ops-page .ops-provider-tile small {
  grid-column: 1 / -1;
}

body.ops-page .ops-provider-tile.active {
  border-color: transparent;
  background: linear-gradient(135deg, #2f80ff, #1e63d8);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(47, 128, 255, 0.22);
}

body.ops-page .ops-provider-tile.active span,
body.ops-page .ops-provider-tile.active small {
  color: rgba(255, 255, 255, 0.82);
}

body.ops-page .ops-provider-tile.active b {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body.ops-page .ops-game-console-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

body.ops-page .ops-game-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #dbe7fb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(55, 91, 145, 0.06);
}

body.ops-page .ops-game-search {
  display: grid;
  gap: 5px;
}

body.ops-page .ops-game-search span {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-game-search input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid #dbe7fb;
  border-radius: 12px;
  background: #f8fbff;
  color: #1f2a44;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}

body.ops-page .ops-game-search input:focus {
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.12);
}

body.ops-page .ops-game-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

body.ops-page .ops-game-segments button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #dbe7fb;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.ops-page .ops-game-segments button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #2f80ff, #1e63d8);
  color: #ffffff;
}

body.ops-page .ops-game-ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe7fb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(55, 91, 145, 0.06);
}

body.ops-page .ops-game-ops-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

body.ops-page .ops-game-ops-toolbar strong {
  color: #1f2a44;
  font-size: 14px;
  font-weight: 950;
}

body.ops-page .ops-game-ops-toolbar span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.ops-page .ops-game-card-grid-wrap {
  display: grid;
  gap: 12px;
}

body.ops-page .ops-game-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 12px;
}

body.ops-page .ops-game-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe7fb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(55, 91, 145, 0.08);
}

body.ops-page .ops-game-card.is-hidden-game {
  opacity: 0.68;
}

body.ops-page .ops-game-card-check {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

body.ops-page .ops-game-card-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

body.ops-page .ops-game-card-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  background: linear-gradient(135deg, #edf5ff, #ffffff);
  cursor: pointer;
  overflow: hidden;
}

body.ops-page .ops-game-card-image .ops-game-thumb {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

body.ops-page .ops-game-card-image .ops-game-thumb img {
  object-fit: cover;
}

body.ops-page .ops-game-card-ribbon {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.92);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

body.ops-page .ops-game-card-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

body.ops-page .ops-game-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.ops-page .ops-game-card-title strong,
body.ops-page .ops-game-card-title span,
body.ops-page .ops-game-card code {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ops-page .ops-game-card-title strong {
  color: #1f2a44;
  font-size: 13px;
  font-weight: 950;
}

body.ops-page .ops-game-card-title span,
body.ops-page .ops-game-card code {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

body.ops-page .ops-game-card-meta,
body.ops-page .ops-game-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body.ops-page .ops-game-card-sort {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.ops-page .ops-game-card-sort label {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

body.ops-page .ops-game-card-sort .ops-inline-sort-input {
  width: 100%;
}

body.ops-page .ops-game-card-actions button {
  min-height: 30px;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2a44;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

body.ops-page .ops-game-card-actions button:hover {
  border-color: #2f7bff;
  color: #2f7bff;
}

body.ops-page .ops-game-card-actions button.danger {
  border-color: #ffd5d5;
  color: #ef4444;
}

body.ops-page .ops-game-card-missing {
  margin: 0;
  color: #ef4444;
  font-size: 11px;
  font-weight: 900;
}

body.ops-page .ops-hot-page {
  padding: 14px;
}

@media (max-width: 1180px) {
  body.ops-page .ops-game-console.has-provider-panel {
    grid-template-columns: 1fr;
  }

  body.ops-page .ops-game-provider-panel {
    position: static;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  body.ops-page .ops-game-provider-panel-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body.ops-page .ops-game-filter-bar,
  body.ops-page .ops-game-ops-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.ops-page .ops-game-ops-toolbar {
    display: grid;
  }

  body.ops-page .ops-game-segments,
  body.ops-page .ops-game-bulk-controls {
    justify-content: flex-start;
  }

  body.ops-page .ops-game-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  }
}

@media (max-width: 980px) {
  body.ops-page .ops-hot-manager-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ops-page .ops-hot-manager-controls .wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  body.category-page .game-grid,
  body.category-page.slot-page .game-grid {
    gap: 6px !important;
  }

  body.category-page .provider-card,
  body.category-page .provider-card.slot-card {
    min-height: 158px !important;
  }

  body.category-page .provider-card-art {
    height: 118px !important;
  }

  body.category-page .provider-card strong {
    min-height: 27px !important;
    margin: 6px 5px 0 !important;
    font-size: 10.5px !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  body.category-page .provider-card small {
    margin: 1px 5px 6px !important;
    font-size: 8.5px !important;
    text-align: center !important;
  }
}

/* ===== CQ9 mobile layout: narrow provider rail + 3-column game grid ===== */
@media (max-width: 540px) {
  body.category-page,
  body.category-page * {
    box-sizing: border-box !important;
  }

  body.category-page .category-shell,
  body.category-page .category-layout,
  body.category-page .games-area,
  body.category-page .game-grid {
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  body.category-page.slot-page .category-layout,
  body.category-page .category-layout {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.category-page.slot-page .provider-list,
  body.category-page .provider-list {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    gap: 6px !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    min-height: 40px !important;
    padding: 0 4px !important;
    border-radius: 11px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  body.category-page .game-grid,
  body.category-page.slot-page .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.category-page .provider-card,
  body.category-page .provider-card.slot-card {
    min-width: 0 !important;
  }

  body.category-page .provider-card-art {
    object-fit: contain !important;
  }
}

@media (max-width: 380px) {
  body.category-page.slot-page .category-layout,
  body.category-page .category-layout {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.category-page.slot-page .provider-list,
  body.category-page .provider-list {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    font-size: 10px !important;
  }
}

/* ===== Real game poster cards: full-cover artwork + bottom title overlay ===== */
body.category-page .provider-card,
body.category-page .provider-card.slot-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(226, 236, 255, 0.92) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #eaf2ff !important;
  box-shadow: 0 8px 20px rgba(15, 35, 80, 0.08) !important;
}

body.category-page .provider-card::before,
body.category-page .provider-card.slot-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 48, 0.02) 0%,
    rgba(8, 22, 48, 0.02) 48%,
    rgba(8, 22, 48, 0.46) 76%,
    rgba(8, 22, 48, 0.76) 100%
  ) !important;
}

body.category-page .provider-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 4px !important;
  object-fit: contain !important;
  object-position: center !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.16), rgba(234, 242, 255, 0.68) 56%, rgba(207, 225, 255, 0.92)),
    linear-gradient(135deg, #eef5ff, #dbeaff) !important;
}

body.category-page .provider-card[data-provider-key="cq9"] .provider-card-art {
  object-fit: contain !important;
}

body.category-page .provider-card-chip {
  position: absolute !important;
  z-index: 3 !important;
  left: 6px !important;
  top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  min-height: 18px !important;
  max-width: calc(100% - 42px) !important;
  padding: 0 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(47, 123, 255, 0.9) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

body.category-page .provider-card strong {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 7px 8px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

body.category-page .provider-card small {
  display: none !important;
}

body.category-page .star-button {
  position: absolute !important;
  z-index: 4 !important;
  top: 6px !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
  background: rgba(31, 42, 68, 0.32) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 5px 12px rgba(15, 35, 80, 0.16) !important;
  backdrop-filter: blur(8px) !important;
}

body.category-page .star-button svg {
  width: 12px !important;
  height: 12px !important;
}

body.category-page .star-button.active {
  background: rgba(47, 123, 255, 0.86) !important;
  color: #f6c453 !important;
}

body.category-page .game-open-hitbox {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: transparent !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

body.category-page .provider-card strong,
body.category-page .provider-card small,
body.category-page .provider-card-art,
body.category-page .provider-card-chip {
  pointer-events: none !important;
}

@media (max-width: 540px) {
  body.category-page .provider-card,
  body.category-page .provider-card.slot-card {
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px !important;
  }

  body.category-page .provider-card-art {
    height: 100% !important;
    padding: 3px !important;
    object-fit: contain !important;
  }

  body.category-page .provider-card strong {
    padding: 18px 5px 7px !important;
    font-size: 10px !important;
  }

  body.category-page .provider-card-chip {
    left: 5px !important;
    top: 5px !important;
    min-width: 28px !important;
    min-height: 16px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  body.category-page .star-button {
    top: 5px !important;
    right: 5px !important;
    width: 21px !important;
    height: 21px !important;
  }
}

/* ===== Game card final: poster fills full card, title overlays image ===== */
body.category-page .provider-card,
body.category-page .provider-card.slot-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #dfeaff !important;
}

body.category-page .provider-card-art,
body.category-page .provider-card[data-provider-key="cq9"] .provider-card-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: linear-gradient(135deg, #eaf2ff, #dbeaff) !important;
}

/* ===== Fast media loading: stable placeholders + soft reveal ===== */
body.category-page .provider-card-art,
#homeView .game-section[data-section="hot"] .provider-card-art,
#promoView .promo-offer-full-image,
#promoView .promo-offer-art {
  opacity: 0;
  transition: opacity 180ms ease;
}

body.category-page .provider-card-art.is-loaded,
#homeView .game-section[data-section="hot"] .provider-card-art.is-loaded,
#promoView .promo-offer-full-image.is-loaded,
#promoView .promo-offer-art.is-loaded {
  opacity: 1;
}

body.category-page .provider-card-art.is-session-cached,
#homeView .provider-card-art.is-session-cached,
#promoView .promo-offer-full-image.is-session-cached,
#promoView .promo-offer-art.is-session-cached {
  transition: none !important;
}

body.category-page .provider-card.media-session-cached,
#homeView .provider-card.media-session-cached,
#promoView .promo-offer-card.media-session-cached {
  animation: none !important;
}

body.category-page .provider-card,
#homeView .game-section[data-section="hot"] .provider-card,
#promoView .promo-offer-card.image-only {
  background-color: #edf4ff;
  background-image: linear-gradient(100deg, #edf4ff 20%, #f8fbff 38%, #e5efff 56%, #edf4ff 74%);
  background-size: 220% 100%;
  animation: n9-media-placeholder 1.35s ease-in-out infinite;
}

body.category-page .provider-card.media-loaded,
#homeView .game-section[data-section="hot"] .provider-card.media-loaded,
#promoView .promo-offer-card.image-only.media-loaded {
  animation: none;
  background-image: none;
  background-color: #eaf2ff;
}

#promoView .promo-offer-card.image-only {
  aspect-ratio: auto;
  min-height: 0;
}

#promoView .promo-offer-card.image-only .promo-offer-full-image {
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  object-fit: contain;
  object-position: center;
}

@keyframes n9-media-placeholder {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.category-page .provider-card,
  #homeView .game-section[data-section="hot"] .provider-card,
  #promoView .promo-offer-card.image-only {
    animation: none;
  }

  body.category-page .provider-card-art,
  #homeView .game-section[data-section="hot"] .provider-card-art,
  #promoView .promo-offer-full-image,
  #promoView .promo-offer-art {
    transition: none;
  }
}


body.category-page .provider-card::before,
body.category-page .provider-card.slot-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 48, 0) 0%,
    rgba(8, 22, 48, 0) 52%,
    rgba(8, 22, 48, 0.48) 78%,
    rgba(8, 22, 48, 0.82) 100%
  ) !important;
}

body.category-page .provider-card strong {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 22px 7px 8px !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.52) !important;
}

body.category-page .provider-card small {
  display: none !important;
}

/* ===== 游戏分类页公共布局：所有分类共用 ===== */
body.category-page .category-shell {
  width: min(100%, 1180px) !important;
  padding: 10px 8px 24px !important;
}

body.category-page .category-search {
  width: min(100%, 520px) !important;
  margin: 6px auto 0 !important;
}

body.category-page .search-box.category-search {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 13px !important;
  gap: 8px !important;
}

body.category-page .category-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 8px 0 6px !important;
  padding: 2px 0 4px !important;
}

body.category-page .category-tab {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  grid-template-columns: clamp(76px, 16vw, 108px) minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  margin-top: 0 !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  width: clamp(76px, 16vw, 108px) !important;
  min-width: clamp(76px, 16vw, 108px) !important;
  max-width: clamp(76px, 16vw, 108px) !important;
  gap: 6px !important;
  top: 174px !important;
  transform: translateX(-1px) !important;
}

body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  min-height: 44px !important;
  padding: 0 6px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 540px) {
  body.category-page .category-shell {
    padding: 9px 6px 22px 6px !important;
  }

  body.category-page .category-search,
  body.category-page.slot-page .category-search {
    top: 66px !important;
    width: min(100%, 390px) !important;
    margin: 5px auto 0 !important;
  }

  body.category-page .search-box.category-search {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 11px !important;
  }

  body.category-page .category-tabs,
  body.category-page.slot-page .category-tabs {
    top: 116px !important;
    gap: 5px !important;
    margin: 7px 0 5px !important;
    padding: 2px 0 3px !important;
  }

  body.category-page .category-tab {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }

  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: clamp(72px, 19vw, 84px) minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: clamp(72px, 19vw, 84px) !important;
    min-width: clamp(72px, 19vw, 84px) !important;
    max-width: clamp(72px, 19vw, 84px) !important;
    gap: 5px !important;
    top: 166px !important;
    transform: translateX(-2px) !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    min-height: 42px !important;
    padding: 0 4px !important;
    border-radius: 11px !important;
    font-size: 10.5px !important;
  }

  body.category-page .game-grid,
  body.category-page.slot-page .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

@media (max-width: 380px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  body.category-page .category-tab {
    min-width: 0 !important;
    padding: 0 6px !important;
  }
}

/* ===== 分类页厂商入口：图片 + 名称，两段式公共组件 ===== */
body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  gap: 6px !important;
}

body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 44px !important;
  padding: 4px 6px !important;
  text-align: left !important;
}

body.category-page .provider-button-image {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #eef5ff !important;
  color: #2f7bff !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.category-page .provider-button-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.category-page .provider-button[data-provider="booming"],
body.category-page.slot-page .provider-button[data-provider="booming"] {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

body.category-page .provider-button[data-provider="booming"] .provider-button-image.booming-logo,
body.category-page.slot-page .provider-button[data-provider="booming"] .provider-button-image.booming-logo {
  width: 58px !important;
  height: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="booming"] .provider-button-image.booming-logo img,
body.category-page.slot-page .provider-button[data-provider="booming"] .provider-button-image.booming-logo img {
  width: 58px !important;
  height: auto !important;
  max-height: 24px !important;
  object-fit: contain !important;
}

body.category-page .provider-button-image em {
  font-style: normal !important;
}

body.category-page .provider-button strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.category-page .provider-button.active .provider-button-image {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

@media (max-width: 540px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    min-height: 40px !important;
    padding: 3px 5px !important;
    gap: 4px !important;
  }

  body.category-page .provider-button-image {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
  }

  body.category-page .provider-button strong {
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: 74px minmax(0, 1fr) !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

/* ===== 分类页厂商入口尺寸对齐顶部按钮 ===== */
body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  margin-top: 0 !important;
  gap: 5px !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  top: 156px !important;
  gap: 5px !important;
}

body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  min-height: 38px !important;
  height: 38px !important;
  grid-template-columns: 27px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 3px 6px !important;
  border-radius: 12px !important;
}

body.category-page .provider-button-image {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
}

@media (max-width: 540px) {
  body.category-page .category-tabs,
  body.category-page.slot-page .category-tabs {
    margin-bottom: 3px !important;
  }

  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    top: 154px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    min-height: 36px !important;
    height: 36px !important;
    grid-template-columns: 25px minmax(0, 1fr) !important;
    padding: 3px 5px !important;
  }

  body.category-page .provider-button-image {
    width: 25px !important;
    height: 25px !important;
  }
}

@media (max-width: 380px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}

/* ===== 分类页顶部筛选与游戏区域贴合 ===== */
body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout,
body.category-page .game-provider-layout,
body.category-page .provider-section,
body.category-page .vendor-layout,
body.category-page .game-list-wrapper,
body.category-page .game-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  transform: translateY(-2px) !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list,
body.category-page .games-area,
body.category-page.slot-page .games-area,
body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  align-self: start !important;
}

@media (max-width: 540px) {
  body.category-page .category-tabs,
  body.category-page.slot-page .category-tabs {
    margin-bottom: 2px !important;
    padding-bottom: 1px !important;
  }

  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    transform: translateY(-3px) !important;
  }
}

/* ===== 分类页厂商按钮宽度对齐“全部”按钮 ===== */
@media (max-width: 760px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    --category-tab-gap: 5px;
    --category-tab-width: calc((100% - (var(--category-tab-gap) * 3)) / 4);
    grid-template-columns: var(--category-tab-width) minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: var(--category-tab-width) !important;
    min-width: var(--category-tab-width) !important;
    max-width: var(--category-tab-width) !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }
}

/* ===== 分类页厂商按钮真实对齐顶部筛选宽度 ===== */
@media (max-width: 760px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    --provider-filter-width: clamp(82px, calc((100vw - 40px) / 4), 112px);
    grid-template-columns: var(--provider-filter-width) minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    width: var(--provider-filter-width) !important;
    min-width: var(--provider-filter-width) !important;
    max-width: var(--provider-filter-width) !important;
    justify-items: stretch !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  body.category-page .provider-button strong {
    display: block !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    --provider-filter-width: 84px;
  }
}

/* ===== 分类页厂商栏左边缘对齐顶部“全部”按钮 ===== */
@media (max-width: 760px) {
  body.category-page .category-layout,
  body.category-page.slot-page .category-layout {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body.category-page .provider-list,
  body.category-page.slot-page .provider-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
    justify-items: start !important;
  }

  body.category-page .provider-button,
  body.category-page.slot-page .provider-button {
    justify-self: start !important;
    margin-left: 0 !important;
  }
}

/* ===== 分类页左侧厂商：取消图片槽，只保留金色文字 ===== */
body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
  color: #D4AF37 !important;
}

body.category-page .provider-button-image {
  display: none !important;
}

body.category-page .provider-button strong,
body.category-page.slot-page .provider-button strong {
  width: 100% !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

body.category-page .provider-button.active strong,
body.category-page.slot-page .provider-button.active strong {
  color: #FFE6A3 !important;
}

body.category-page .provider-button.active,
body.category-page.slot-page .provider-button.active {
  color: #FFE6A3 !important;
}

/* ===== 分类页顶部筛选与第一个厂商按钮留一点呼吸感 ===== */
body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  margin-top: 5px !important;
  transform: none !important;
}

/* ===== 分类页按钮间隔稍微拉开 ===== */
body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  gap: 8px !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  gap: 8px !important;
}

/* ===== 分类页筛选栏与游戏区域最终贴合 ===== */
body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout,
body.category-page .game-provider-layout,
body.category-page .provider-section,
body.category-page .vendor-layout,
body.category-page .game-list-wrapper,
body.category-page .game-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  transform: translateY(-1px) !important;
}

/* ===== 分类页首屏厂商栏取消 sticky 下坠 ===== */
body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  position: static !important;
  top: auto !important;
}

body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  margin-bottom: 5px !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
}

/* ===== 分类页左侧厂商图标徽标 ===== */
body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 6px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button-image {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #fff7d7, #d4af37) !important;
  color: #1f2a44 !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

body.category-page .provider-button[data-provider="cq9"] .provider-button-image {
  background: linear-gradient(135deg, #f6e8ff, #8d5bff) !important;
  color: #ffffff !important;
}

body.category-page .provider-button[data-provider="pg"] .provider-button-image {
  background: linear-gradient(135deg, #ffe9f9, #ff62c7) !important;
  color: #ffffff !important;
}

body.category-page .provider-button[data-provider="jili"] .provider-button-image {
  background: linear-gradient(135deg, #fff1ba, #f0a400) !important;
  color: #3d2800 !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image {
  background: linear-gradient(135deg, #e2f0ff, #2f7bff) !important;
  color: #ffffff !important;
}

body.category-page .provider-button[data-provider="spribe"] .provider-button-image {
  background: linear-gradient(135deg, #dff5ff, #229ed9) !important;
  color: #ffffff !important;
}

body.category-page .provider-button-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.category-page .provider-button-image em {
  font-style: normal !important;
}

body.category-page .provider-button strong,
body.category-page.slot-page .provider-button strong {
  text-align: left !important;
}

/* ===== 分类页左侧厂商：彻底取消厂商图片 ===== */
body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

body.category-page .provider-button-image,
body.category-page.slot-page .provider-button-image {
  display: none !important;
}

body.category-page .provider-button strong,
body.category-page.slot-page .provider-button strong {
  color: #D4AF37 !important;
  text-align: center !important;
}

/* ===== 分类页顶部功能按钮：平台活动标签风 ===== */
body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  gap: 8px !important;
  align-items: stretch !important;
}

body.category-page .category-tab,
body.category-page.slot-page .category-tab {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 1px solid #D6E7FF !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.99), rgba(238, 247, 255, 0.96)) !important;
  color: #173A72 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow:
    0 8px 18px rgba(47, 123, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* ===== 分类页按钮增加极浅蓝底，保持整体更干净 ===== */
body.category-page .provider-button,
body.category-page.slot-page .provider-button {
  border-color: #D6E7FF !important;
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.99), rgba(238, 247, 255, 0.96)) !important;
}

body.category-page .provider-button.active,
body.category-page.slot-page .provider-button.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #4B96FF 0%, #2F7BFF 48%, #145FE6 100%) !important;
}

body.category-page .category-tab::before,
body.category-page.slot-page .category-tab::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 5px !important;
  width: 18px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
}

body.category-page .category-tab::after,
body.category-page.slot-page .category-tab::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 28px !important;
  height: 28px !important;
  background:
    linear-gradient(135deg, transparent 49%, rgba(47, 123, 255, 0.14) 50%),
    radial-gradient(circle at 100% 100%, rgba(91, 140, 255, 0.14), transparent 68%) !important;
  pointer-events: none !important;
}

body.category-page .category-tab.active,
body.category-page.slot-page .category-tab.active {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #4B96FF 0%, #2F7BFF 48%, #145FE6 100%) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 35, 100, 0.22) !important;
  box-shadow:
    0 12px 24px rgba(47, 123, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 35, 100, 0.16) !important;
}

body.category-page .category-tab.active::before,
body.category-page.slot-page .category-tab.active::before {
  left: -5px !important;
  top: 6px !important;
  width: 34px !important;
  height: 15px !important;
  border-radius: 5px !important;
  background:
    linear-gradient(135deg, #FFF1A6 0%, #F6C957 48%, #D99A16 100%) !important;
  box-shadow:
    0 3px 8px rgba(161, 105, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: rotate(-18deg) !important;
}

body.category-page .category-tab.active::after,
body.category-page.slot-page .category-tab.active::after {
  right: -10px !important;
  bottom: -12px !important;
  width: 62px !important;
  height: 42px !important;
  background:
    radial-gradient(ellipse at 70% 76%, rgba(203, 229, 255, 0.54) 0 22%, transparent 23%),
    radial-gradient(ellipse at 42% 82%, rgba(255, 255, 255, 0.24) 0 18%, transparent 19%),
    linear-gradient(135deg, transparent 36%, rgba(146, 198, 255, 0.32) 37% 68%, transparent 69%) !important;
  opacity: 0.9 !important;
}

/* Admin HUIDU environment visibility */
.ops-env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 123, 255, 0.24);
  background: #eef5ff;
  color: #1f4f9f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ops-env-badge.production {
  border-color: rgba(24, 168, 116, 0.28);
  background: #ecfff7;
  color: #0f8c62;
}

.ops-env-summary {
  display: grid;
  gap: 8px;
}

.ops-env-summary div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e4ecf8;
  border-radius: 12px;
  background: #f8fbff;
}

.ops-env-summary span {
  color: #6b7a90;
  font-size: 12px;
  font-weight: 800;
}

.ops-env-summary strong {
  min-width: 0;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ops-env-warning,
.ops-env-note {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.ops-env-warning {
  background: #fff8ee;
  color: #c97900;
}

.ops-env-note {
  background: #eef5ff;
  color: #2f65bd;
}

.ops-dashboard-env-card .ops-dashboard-side-head {
  align-items: center;
}

/* Promotion materials center */
.ops-promo-material-summary .ops-stats {
  margin-bottom: 12px;
}

.ops-promo-material-form {
  display: grid;
  gap: 14px;
}

.ops-promo-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.ops-promo-material-grid.text {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ops-promo-material-card,
.ops-promo-settings-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 46, 102, 0.06);
}

.ops-promo-material-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ops-promo-material-card-head strong {
  color: #0f2e66;
  font-size: 15px;
  font-weight: 900;
}

.ops-promo-material-preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #eef5ff, #ffffff);
  object-fit: cover;
  overflow: hidden;
}

.ops-promo-material-preview.empty {
  display: grid;
  place-items: center;
  text-align: center;
  color: #6b7a90;
  font-weight: 800;
}

.ops-promo-material-preview.empty span {
  display: block;
  color: #1d4ed8;
  font-size: 16px;
}

.ops-promo-material-preview.empty small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

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

.ops-promo-material-fields label,
.ops-promo-settings-card label {
  display: grid;
  gap: 6px;
  color: #53627a;
  font-size: 12px;
  font-weight: 800;
}

.ops-promo-material-fields label.wide {
  grid-column: 1 / -1;
}

.ops-promo-material-fields input,
.ops-promo-material-fields textarea,
.ops-promo-settings-card input,
.ops-promo-settings-card select {
  width: 100%;
  min-width: 0;
  border: 1px solid #cfe0fb;
  border-radius: 12px;
  background: #f8fbff;
  color: #15233d;
  font-size: 13px;
  font-weight: 800;
}

.ops-promo-material-fields input,
.ops-promo-settings-card input,
.ops-promo-settings-card select {
  height: 40px;
  padding: 0 10px;
}

.ops-promo-material-textarea {
  min-height: 104px;
  padding: 10px;
  resize: vertical;
  line-height: 1.55;
}

.ops-promo-material-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #1f4f9f;
  font-size: 13px;
  font-weight: 900;
}

.ops-promo-material-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ops-promo-settings-card {
  max-width: 720px;
}

.ops-promo-settings-card p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2f65bd;
  font-size: 13px;
  font-weight: 800;
}

body.agent-page .agent-promo-material-card {
  overflow: hidden;
}

body.agent-page .agent-material-head,
body.agent-page .agent-material-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.agent-page .agent-material-head h3,
body.agent-page .agent-material-carousel-head h3 {
  margin: 0;
  color: #0f2e66;
  font-size: 18px;
  font-weight: 900;
}

body.agent-page .agent-material-head span,
body.agent-page .agent-material-carousel-head span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

body.agent-page .agent-material-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
}

body.agent-page .agent-material-link-box strong {
  min-width: 0;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.agent-page .agent-material-link-box button,
body.agent-page .agent-material-qr-row button,
body.agent-page .agent-material-switcher button,
body.agent-page .agent-material-primary {
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

body.agent-page .agent-material-link-box button,
body.agent-page .agent-material-qr-row button {
  min-height: 34px;
  padding: 0 12px;
}

body.agent-page .agent-material-qr-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body.agent-page .agent-material-qr-row img {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  border: 1px solid #dbeafe;
  background: #fff;
  padding: 6px;
}

body.agent-page .agent-material-qr-row div {
  display: grid;
  gap: 6px;
}

body.agent-page .agent-material-qr-row strong {
  color: #0f2e66;
  font-size: 15px;
  font-weight: 900;
}

body.agent-page .agent-material-qr-row span {
  color: #708099;
  font-size: 12px;
  font-weight: 800;
}

body.agent-page .agent-material-poster-preview {
  position: relative;
  display: grid;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 224, 138, 0.5), transparent 26%),
    linear-gradient(135deg, #0b4fd4, #1d4ed8 58%, #09245f);
}

body.agent-page .agent-material-poster-preview img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: min(72vh, 760px);
  object-fit: contain;
  background: #eef5ff;
}

body.agent-page .agent-material-poster-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  color: #fff;
}

body.agent-page .agent-material-poster-preview img + .agent-material-poster-fallback {
  display: none;
}

body.agent-page .agent-material-poster-preview.fallback .agent-material-poster-fallback {
  display: grid;
}

body.agent-page .agent-material-poster-fallback span {
  color: #ffe08a;
  font-size: 13px;
  font-weight: 900;
}

body.agent-page .agent-material-poster-fallback strong {
  max-width: 78%;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

body.agent-page .agent-material-poster-fallback small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
}

body.agent-page .agent-material-switcher {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.agent-page .agent-material-switcher strong {
  min-width: 0;
  color: #0f2e66;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.agent-page .agent-material-switcher button {
  min-height: 34px;
  padding: 0 10px;
  background: #eef5ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}

body.agent-page .agent-material-primary {
  width: 100%;
  min-height: 46px;
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

body.agent-page .agent-material-save-tip {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef5ff;
  color: #2f65bd;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

body.agent-page .agent-material-text-preview {
  margin: 0;
  padding: 12px;
  min-height: 86px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #0f2e66;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

@media (max-width: 390px) {
  .ops-promo-material-fields {
    grid-template-columns: 1fr;
  }

  body.agent-page .agent-material-qr-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  body.agent-page .agent-material-qr-row img {
    width: 82px;
    height: 82px;
  }

  body.agent-page .agent-material-poster-preview {
    min-height: 240px;
  }
}

/* Mobile overflow guard: tables can scroll inside, the whole page cannot shake sideways. */
html,
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg,
iframe,
table,
input,
select,
textarea,
button {
  max-width: 100%;
}

.app-shell,
.view,
.page,
.mobile-frame,
.promo-view,
.promo-content,
.agent-growth-shell,
.agent-shell,
.support-page,
.recharge-page,
.withdraw-page,
.ops-admin,
.ops-main,
.ops-content {
  max-width: 100%;
  overflow-x: clip;
}

.level-table-wrapper,
.ops-agent-detail-table-wrap,
.ops-agent-direct-table,
.ops-agent-tree,
.promo-list,
.records-table-wrap,
.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.agent-growth-card,
.agent-growth-hero,
.agent-growth-definition,
.agent-growth-stats,
.agent-growth-accordions,
.promo-card,
.promo-poster-card,
.ops-agent-detail-card {
  max-width: 100%;
}

body.agent-page .agent-direct-customer-card {
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.agent-page .agent-direct-customer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.agent-page .agent-direct-customer-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #14213f !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.agent-page .agent-direct-customer-head em {
  flex: 0 0 auto !important;
  min-width: 46px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  text-align: center !important;
}

body.agent-page .agent-direct-customer-head em.normal {
  background: #e9f9ef !important;
  color: #159447 !important;
}

body.agent-page .agent-direct-customer-head em.frozen {
  background: #fff1f2 !important;
  color: #e11d48 !important;
}

body.agent-page .agent-direct-customer-phone {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.agent-page .agent-direct-customer-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.agent-page .agent-direct-customer-grid article {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: #f6f9ff !important;
}

body.agent-page .agent-direct-customer-grid article.tone-primary {
  background: #eaf2ff !important;
}

body.agent-page .agent-direct-customer-grid span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.agent-page .agent-direct-customer-grid strong {
  display: block !important;
  margin-top: 5px !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  color: #0b55e8 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body.agent-page .agent-direct-customer-card {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid #dbe8ff !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 12px 26px rgba(47, 107, 255, 0.1) !important;
}

body.agent-page .agent-direct-customer-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

body.agent-page .agent-direct-customer-avatar {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0b55e8, #73a7ff) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.agent-page .agent-direct-customer-head > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body.agent-page .agent-direct-customer-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #102a67 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.agent-page .agent-direct-customer-head small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.agent-page .agent-direct-customer-head em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 54px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body.agent-page .agent-direct-customer-head em i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

body.agent-page .agent-direct-customer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.agent-page .agent-direct-customer-grid article {
  min-width: 0 !important;
  padding: 10px 8px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  text-align: center !important;
}

body.agent-page .agent-direct-customer-grid article.tone-primary {
  background: #eaf2ff !important;
}

body.agent-page .agent-direct-customer-grid span,
body.agent-page .agent-direct-customer-time span {
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.agent-page .agent-direct-customer-grid strong {
  display: block !important;
  margin-top: 5px !important;
  min-width: 0 !important;
  color: #0b55e8 !important;
  font-size: clamp(13px, 3.5vw, 17px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

body.agent-page .agent-direct-customer-time {
  display: grid !important;
  gap: 5px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e5efff !important;
}

body.agent-page .agent-direct-customer-time strong {
  color: #173e9e !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere !important;
}

body.agent-page .agent-commission-payout-countdown {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(47, 107, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(47, 107, 255, 0.05) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.agent-page .agent-commission-payout-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 14px rgba(47, 107, 255, 0.12) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body.agent-page .agent-commission-payout-countdown strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #173e9e !important;
  font-size: clamp(15px, 4.4vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.agent-page .agent-commission-payout-countdown small {
  flex: 0 0 auto !important;
  color: #64748b !important;
  font-size: clamp(12px, 3.4vw, 15px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.agent-page .agent-commission-payout-countdown b {
  display: inline-block !important;
  margin: 0 2px !important;
  background: linear-gradient(135deg, #0b55e8, #3b82f6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-size: clamp(20px, 5.8vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.agent-page .agent-platform-profit-positive strong {
  color: #16a34a !important;
}

body.agent-page .agent-platform-profit-negative strong {
  color: #dc2626 !important;
}

body.agent-page .agent-platform-profit-zero strong {
  color: #0b55e8 !important;
}

@media (max-width: 360px) {
  body.agent-page .agent-commission-payout-countdown {
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  body.agent-page .agent-commission-payout-countdown strong {
    font-size: 14px !important;
  }

body.agent-page .agent-commission-payout-countdown small {
    font-size: 12px !important;
  }
}

/* VIP奖励列表：只压缩收起状态的整行高度 */
body.vip-gift-page .vip-replica-row:not(.open) {
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  overflow: hidden !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-level,
body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-reward {
  height: 86px !important;
  min-height: 86px !important;
  box-sizing: border-box !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-level {
  align-content: center !important;
  gap: 2px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-badge.royal-shield {
  width: 38px !important;
  height: 38px !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-level strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-reward {
  display: flex !important;
  align-items: center !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-summary {
  height: 100% !important;
  align-items: center !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-summary button {
  align-self: center !important;
  min-height: 34px !important;
  height: 34px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* VIP1展开内容：三列对齐排版 */
body.vip-gift-page .vip1-reference-detail {
  margin-top: 8px !important;
  border-top: 1px solid #d8e7ff !important;
  background: #f8fbff !important;
}

body.vip-gift-page .vip1-reward-line {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) 86px !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-width: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #d8e7ff !important;
  background: transparent !important;
}

body.vip-gift-page .vip1-reward-line.privilege {
  grid-template-columns: 50px minmax(0, 1fr) !important;
}

body.vip-gift-page .vip1-reward-icon {
  justify-self: center !important;
  align-self: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

body.vip-gift-page .vip1-reward-copy {
  min-width: 0 !important;
  align-self: center !important;
}

body.vip-gift-page .vip1-reward-title {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

body.vip-gift-page .vip1-reward-title span {
  flex: 0 0 auto !important;
  color: #172033 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.vip-gift-page .vip1-reward-title b {
  flex: 0 0 auto !important;
  color: #f59e0b !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.vip-gift-page .vip1-reward-copy p {
  margin: 5px 0 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.vip-gift-page .vip1-reward-line button {
  justify-self: end !important;
  align-self: center !important;
  width: 86px !important;
  min-width: 86px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  padding: 0 8px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.vip-gift-page .vip1-privilege-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 14px !important;
  margin-top: 6px !important;
}

body.vip-gift-page .vip1-privilege-grid p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.vip-gift-page .vip1-privilege-grid p:last-child {
  grid-column: 1 / -1 !important;
}

/* VIP1展开内容：晋级奖金 / VIP特权图标尺寸与周、月工资保持一致 */
body.vip-gift-page .vip1-reward-line.upgrade .vip1-reward-icon,
body.vip-gift-page .vip1-reward-line.privilege .vip1-reward-icon {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.vip-gift-page .vip1-reward-line.upgrade .vip1-reward-icon svg,
body.vip-gift-page .vip1-reward-line.privilege .vip1-reward-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.vip-gift-page .vip1-reward-line.upgrade .vip1-reward-icon svg {
  transform: scale(1.06);
}

body.vip-gift-page .vip1-reward-line.privilege .vip1-reward-icon svg {
  transform: scale(1.13);
}

/* VIP1展开区域：缩小按钮、文字和图标，把空间还给内容 */
body.vip-gift-page .vip-replica-row,
body.vip-gift-page .vip-replica-row.vip1-open {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}

body.vip-gift-page .vip-replica-level {
  justify-items: start !important;
  padding-left: 5px !important;
  padding-right: 2px !important;
}

body.vip-gift-page .vip-replica-badge.royal-shield {
  width: 34px !important;
  height: 34px !important;
}

body.vip-gift-page .vip-replica-level strong {
  width: 34px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body.vip-gift-page .vip-replica-row.vip1-open .vip-replica-level {
  gap: 2px !important;
  padding-left: 5px !important;
  padding-right: 2px !important;
}

body.vip-gift-page .vip-replica-row.vip1-open .vip-replica-badge.royal-shield {
  width: 34px !important;
  height: 34px !important;
}

body.vip-gift-page .vip-replica-row.vip1-open .vip-replica-level strong {
  width: 34px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

body.vip-gift-page .vip1-reward-line {
  grid-template-columns: 44px minmax(0, 1fr) 72px !important;
  column-gap: 6px !important;
  padding: 9px 0 !important;
}

body.vip-gift-page .vip1-reward-line.privilege {
  grid-template-columns: 44px minmax(0, 1fr) !important;
}

body.vip-gift-page .vip1-reward-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

body.vip-gift-page .vip1-reward-title {
  gap: 6px !important;
  align-items: baseline !important;
}

body.vip-gift-page .vip1-reward-title span {
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.vip-gift-page .vip1-reward-title b {
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.vip-gift-page .vip1-reward-copy p,
body.vip-gift-page .vip1-privilege-grid p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.vip-gift-page .vip1-reward-line button {
  width: 72px !important;
  min-width: 72px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.vip-gift-page .vip1-reward-line.upgrade .vip1-reward-icon svg,
body.vip-gift-page .vip1-reward-line.privilege .vip1-reward-icon svg {
  transform: none !important;
}

/* VIP列表：等级文字和收起行距再压紧 */
body.vip-gift-page .vip-replica-row:not(.open) {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}

body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-level,
body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-reward {
  height: 70px !important;
  min-height: 70px !important;
}

body.vip-gift-page .vip-replica-level {
  gap: 0 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

body.vip-gift-page .vip-replica-level strong,
body.vip-gift-page .vip-replica-row:not(.open) .vip-replica-level strong,
body.vip-gift-page .vip-replica-row.vip1-open .vip-replica-level strong {
  width: 34px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* VIP顶部当前等级进度卡：等级、进度、徽章紧凑布局 */
body.vip-gift-page .vip-current-progress-card {
  grid-template-columns: minmax(0, 1fr) 72px !important;
  min-height: 120px !important;
  max-height: 124px !important;
  gap: 12px !important;
}

body.vip-gift-page .vip-progress-content {
  gap: 6px !important;
}

body.vip-gift-page .vip-progress-level-row strong {
  font-size: 20px !important;
  line-height: 34px !important;
}

body.vip-gift-page .vip-progress-level-row button {
  height: 34px !important;
  min-height: 34px !important;
  margin-left: 56px !important;
  padding: 0 13px !important;
  color: #2563eb !important;
  background: #ffffff !important;
  border: 1px solid rgba(147, 197, 253, 0.62) !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12) !important;
}

body.vip-gift-page .vip-progress-meter-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 7px !important;
}

body.vip-gift-page .vip-progress-meter-row b {
  font-size: 16px !important;
}

body.vip-gift-page .vip-progress-meter-row span {
  font-size: 15px !important;
  white-space: nowrap !important;
}

body.vip-gift-page .vip-progress-track {
  height: 7px !important;
}

body.vip-gift-page .vip-progress-value {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  overflow: visible !important;
  font-size: 13px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

body.vip-gift-page .vip-progress-badge {
  width: 72px !important;
  height: 72px !important;
}

body.vip-gift-page .vip-progress-badge svg,
body.vip-gift-page .vip-progress-badge span {
  width: 72px !important;
  height: 72px !important;
}

/* 返水比例详情：独立紧凑页，不显示活动中心分类外壳 */
#promoView.rebate-rate-mode .promo-header {
  display: none !important;
}

#promoView.rebate-rate-mode .promo-layout {
  min-height: calc(100vh - 76px) !important;
  padding-top: 8px !important;
}

#promoView.rebate-rate-mode .promo-content,
#promoView.rebate-rate-mode .promo-card-list {
  min-width: 0 !important;
}

#promoView.rebate-rate-mode .rebate-rate-detail-page {
  gap: 8px !important;
  overflow: visible !important;
}

#promoView.rebate-rate-mode .rebate-rate-titlebar {
  position: relative !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 36px !important;
  align-items: center !important;
  min-height: 38px !important;
}

#promoView.rebate-rate-mode .rebate-rate-titlebar button[data-rebate-detail-back] {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #d8e7ff !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#promoView.rebate-rate-mode .rebate-rate-titlebar button[data-rebate-detail-back]::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-left: 2px solid #2563eb !important;
  border-bottom: 2px solid #2563eb !important;
  transform: rotate(45deg) translate(2px, -1px) !important;
}

#promoView.rebate-rate-mode .rebate-filter-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
}

#promoView.rebate-rate-mode .rebate-filter-row label {
  gap: 0 !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

#promoView.rebate-rate-mode .rebate-filter-row select {
  height: 30px !important;
  padding: 0 22px 0 10px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 16px !important;
  background-color: #fbfbfb !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

#promoView.rebate-rate-mode .rebate-picker {
  position: relative !important;
  z-index: 5 !important;
  min-width: 0 !important;
}

#promoView.rebate-rate-mode .rebate-picker.open {
  z-index: 20 !important;
}

#promoView.rebate-rate-mode .rebate-picker-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 16px !important;
  background: #fbfbfb !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease !important;
}

#promoView.rebate-rate-mode .rebate-picker.open .rebate-picker-button {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08) !important;
}

#promoView.rebate-rate-mode .rebate-picker-button i {
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #9ca3af !important;
  border-bottom: 2px solid #9ca3af !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 180ms ease, border-color 180ms ease !important;
}

#promoView.rebate-rate-mode .rebate-picker.open .rebate-picker-button i {
  border-color: #2563eb !important;
  transform: rotate(225deg) translate(-2px, -1px) !important;
}

#promoView.rebate-rate-mode .rebate-picker-menu {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 4px) !important;
  width: 128% !important;
  max-height: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease !important;
}

#promoView.rebate-rate-mode .rebate-picker.open .rebate-picker-menu {
  max-height: 220px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

#promoView.rebate-rate-mode .rebate-picker-menu button {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: left !important;
}

#promoView.rebate-rate-mode .rebate-picker-menu button.active {
  color: #2563eb !important;
  background: #ffffff !important;
}

#promoView.rebate-rate-mode .rebate-filter-row > strong {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
}

#promoView.rebate-rate-mode .rebate-rate-head,
#promoView.rebate-rate-mode .rebate-rate-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: center !important;
}

#promoView.rebate-rate-mode .rebate-rate-table {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#promoView.rebate-rate-mode .rebate-rate-row b {
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

#promoView.rebate-rate-mode .rebate-rate-row em {
  height: 18px !important;
  margin-left: 4px !important;
  padding: 0 5px !important;
  background: #f1f5f9 !important;
  color: #9ca3af !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

#promoView.rebate-rate-mode .rebate-rate-row span:last-child {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 32px !important;
}

#promoView.rebate-rate-mode .rebate-rate-row span:last-child em {
  position: absolute !important;
  top: 0 !important;
  right: 2px !important;
  height: 16px !important;
  margin-left: 0 !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  line-height: 16px !important;
}

/* ===== 分类页 PG 厂商入口使用专属 SVG 图标 ===== */
body.category-page .provider-button[data-provider="pg"],
body.category-page.slot-page .provider-button[data-provider="pg"] {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 5px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="pg"] .provider-button-image.pg-logo,
body.category-page.slot-page .provider-button[data-provider="pg"] .provider-button-image.pg-logo {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="pg"] .provider-button-image.pg-logo svg,
body.category-page.slot-page .provider-button[data-provider="pg"] .provider-button-image.pg-logo svg {
  display: block !important;
  width: 30px !important;
  height: auto !important;
}

body.category-page .provider-button[data-provider="pg"] strong,
body.category-page.slot-page .provider-button[data-provider="pg"] strong {
  display: block !important;
  text-align: left !important;
}

/* ===== 分类页 JILI 厂商入口使用专属 SVG 图标 ===== */
body.category-page .provider-button[data-provider="jili"],
body.category-page.slot-page .provider-button[data-provider="jili"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="jili"] .provider-button-image.jili-logo,
body.category-page.slot-page .provider-button[data-provider="jili"] .provider-button-image.jili-logo {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 24px !important;
  transform: translateX(-4px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="jili"] .provider-button-image.jili-logo svg,
body.category-page.slot-page .provider-button[data-provider="jili"] .provider-button-image.jili-logo svg {
  display: block !important;
  width: 42px !important;
  height: auto !important;
}

body.category-page .provider-button[data-provider="jili"] strong,
body.category-page.slot-page .provider-button[data-provider="jili"] strong {
  display: block !important;
  text-align: left !important;
  transform: translateX(-1px) !important;
}

/* ===== 分类页 JDB 厂商入口使用专属 SVG 图标 ===== */
body.category-page .provider-button[data-provider="jdb"],
body.category-page.slot-page .provider-button[data-provider="jdb"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 24px !important;
  transform: translateX(-4px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  display: block !important;
  width: 42px !important;
  height: auto !important;
}

body.category-page .provider-button[data-provider="jdb"] strong,
body.category-page.slot-page .provider-button[data-provider="jdb"] strong {
  display: block !important;
  text-align: left !important;
  transform: translateX(-1px) !important;
}

/* ===== 分类页 2J 厂商入口使用专属 SVG 图标 ===== */
body.category-page .provider-button[data-provider="2j"],
body.category-page.slot-page .provider-button[data-provider="2j"] {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 5px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="2j"] .provider-button-image.twoj-logo,
body.category-page.slot-page .provider-button[data-provider="2j"] .provider-button-image.twoj-logo {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="2j"] .provider-button-image.twoj-logo svg,
body.category-page.slot-page .provider-button[data-provider="2j"] .provider-button-image.twoj-logo svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

body.category-page .provider-button[data-provider="2j"] strong,
body.category-page.slot-page .provider-button[data-provider="2j"] strong {
  display: block !important;
  text-align: left !important;
}

/* ===== 分类页 CQ9 厂商入口使用专属 SVG 图标 ===== */
body.category-page .provider-button[data-provider="cq9"],
body.category-page.slot-page .provider-button[data-provider="cq9"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo,
body.category-page.slot-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 24px !important;
  transform: translateX(-7px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo svg,
body.category-page.slot-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo svg {
  display: block !important;
  width: 50px !important;
  height: auto !important;
}

body.category-page .provider-button[data-provider="cq9"] strong,
body.category-page.slot-page .provider-button[data-provider="cq9"] strong {
  display: block !important;
  text-align: left !important;
  transform: translateX(-2px) !important;
}

/* ===== 分类页按钮最终浅蓝填充：让框框内部也透出一点蓝 ===== */
body.category-page .category-tab:not(.active),
body.category-page.slot-page .category-tab:not(.active),
body.category-page .provider-button:not(.active),
body.category-page.slot-page .provider-button:not(.active) {
  background:
    linear-gradient(180deg, #edf6ff 0%, #d8ebff 100%) !important;
  background-color: #d8ebff !important;
}

body.category-page .category-tab:not(.active)::after,
body.category-page.slot-page .category-tab:not(.active)::after {
  background:
    linear-gradient(135deg, transparent 49%, rgba(47, 123, 255, 0.24) 50%),
    radial-gradient(circle at 100% 100%, rgba(91, 140, 255, 0.22), transparent 68%) !important;
}

/* ===== 分类页厂商图标旁文字统一起点 ===== */
body.category-page .provider-button[data-provider="pg"],
body.category-page.slot-page .provider-button[data-provider="pg"],
body.category-page .provider-button[data-provider="jili"],
body.category-page.slot-page .provider-button[data-provider="jili"],
body.category-page .provider-button[data-provider="2j"],
body.category-page.slot-page .provider-button[data-provider="2j"],
body.category-page .provider-button[data-provider="cq9"],
body.category-page.slot-page .provider-button[data-provider="cq9"],
body.category-page .provider-button[data-provider="jdb"],
body.category-page.slot-page .provider-button[data-provider="jdb"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
}

body.category-page .provider-button[data-provider="pg"] strong,
body.category-page.slot-page .provider-button[data-provider="pg"] strong,
body.category-page .provider-button[data-provider="jili"] strong,
body.category-page.slot-page .provider-button[data-provider="jili"] strong,
body.category-page .provider-button[data-provider="2j"] strong,
body.category-page.slot-page .provider-button[data-provider="2j"] strong,
body.category-page .provider-button[data-provider="cq9"] strong,
body.category-page.slot-page .provider-button[data-provider="cq9"] strong,
body.category-page .provider-button[data-provider="jdb"] strong,
body.category-page.slot-page .provider-button[data-provider="jdb"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* JDB 最终尺寸：和 CQ9 视觉大小保持一致，但避免文字过挤 */
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 44px !important;
  height: 20px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 48px !important;
}

/* ===== 分类页固定筛选栏：只滚动右侧游戏列表 ===== */
body.category-page {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.category-page .category-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

body.category-page .category-topbar,
body.category-page .category-search,
body.category-page .category-tabs {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

body.category-page .provider-list::-webkit-scrollbar {
  display: none;
}

body.category-page .games-area,
body.category-page.slot-page .games-area {
  min-height: 0 !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 18px !important;
}

body.category-page .games-area::-webkit-scrollbar {
  display: none;
}

/* 有搜索内容时，用输入框最左侧的叉号代替放大镜。 */
body.category-page .category-search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e7efff;
  color: #2f73ed;
  font: 700 23px/1 Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.category-page .category-search-clear[hidden] {
  display: none !important;
}

body.category-page .category-search-clear + span {
  display: none;
}

body.category-page .category-search-clear[hidden] + span {
  display: block;
}

body.category-page .category-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* ===== 分类页最终结构：顶部控件不重叠，厂商栏与游戏区独立滚动 ===== */
body.category-page .category-shell {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

body.category-page .category-topbar,
body.category-page.slot-page .category-topbar,
body.category-page .category-search,
body.category-page.slot-page .category-search,
body.category-page .category-tabs,
body.category-page.slot-page .category-tabs,
body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

body.category-page .category-layout,
body.category-page.slot-page .category-layout {
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list,
body.category-page .games-area,
body.category-page.slot-page .games-area {
  min-height: 0 !important;
}

body.category-page .provider-list,
body.category-page.slot-page .provider-list {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

/* 活动页使用完整内容宽度，避免顶部标签栏右侧留下未填满区域。 */
body.promo-mode .app-shell > main {
  padding: 0;
}

#promoView .promo-page {
  width: 100%;
  margin: 0;
}

/* ===== 提现记录最终覆盖：清除历史规则对金额/状态的网格定位 ===== */
body.withdraw-page .withdraw-record-card {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 42px minmax(0, 1fr) minmax(92px, auto) 14px !important;
  overflow: hidden !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-main {
  display: block !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-main > strong {
  grid-column: auto !important;
  grid-row: auto !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-side {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  min-width: 92px !important;
  max-width: 128px !important;
  justify-items: end !important;
  align-content: center !important;
  text-align: right !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-side > strong,
body.withdraw-page .withdraw-record-card > .withdraw-record-side > em {
  grid-column: 1 !important;
  grid-row: auto !important;
  position: static !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-side > strong {
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
}

body.withdraw-page .withdraw-record-card > .withdraw-record-side > em {
  margin-top: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

@media (max-width: 420px) {
  body.withdraw-page .withdraw-record-card {
    grid-template-columns: 40px minmax(0, 1fr) minmax(82px, auto) 12px !important;
  }

  body.withdraw-page .withdraw-record-card > .withdraw-record-side {
    min-width: 82px !important;
    max-width: 112px !important;
  }

  body.withdraw-page .withdraw-record-card > .withdraw-record-side > strong {
    font-size: 13px !important;
  }

  body.withdraw-page .withdraw-record-card > .withdraw-record-side > em {
    font-size: 12px !important;
  }
}

/* ===== 提现记录：与充值记录保持一致的左中右卡片 ===== */
body.withdraw-page .withdraw-record-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body.withdraw-page .withdraw-record-filters {
  min-width: 0;
}

body.withdraw-page .withdraw-record-filters > button {
  max-width: 112px;
  min-width: 0;
  padding-inline: 11px;
}

body.withdraw-page .withdraw-status-menu {
  left: 78px;
}

body.withdraw-page .withdraw-record-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.withdraw-page .withdraw-record-card {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  grid-template-columns: 42px minmax(0, 1fr) minmax(92px, auto) 14px;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: #f8f9fb;
  box-shadow: 0 2px 8px rgba(31, 73, 125, 0.035);
  overflow: hidden;
  cursor: pointer;
}

body.withdraw-page .withdraw-record-icon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #ffffff;
  color: #7d96b8;
}

body.withdraw-page .withdraw-record-icon .withdraw-account-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.withdraw-page .withdraw-record-icon > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.withdraw-page .withdraw-record-main {
  min-width: 0;
  overflow: hidden;
}

body.withdraw-page .withdraw-record-main > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.withdraw-page .withdraw-record-main small {
  display: flex;
  min-width: 0;
  gap: 5px;
  margin-top: 8px;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

body.withdraw-page .withdraw-record-main small > span:first-child {
  flex: 0 1 auto;
  min-width: 62px;
}

body.withdraw-page .withdraw-record-main .withdraw-record-order {
  flex: 1 1 auto;
  min-width: 0;
}

body.withdraw-page .withdraw-record-main small button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  color: #20a77a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.withdraw-page .withdraw-record-main small button svg {
  width: 17px;
  height: 17px;
  display: block;
}

body.withdraw-page .withdraw-record-side {
  min-width: 92px;
  max-width: 128px;
  flex-shrink: 0;
  display: grid;
  justify-items: end;
  align-self: stretch;
  align-content: center;
  overflow: hidden;
  text-align: right;
}

body.withdraw-page .withdraw-record-side strong {
  max-width: 100%;
  overflow: hidden;
  color: #333333;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.withdraw-page .withdraw-record-side strong.success {
  color: #18a874;
}

body.withdraw-page .withdraw-record-side strong.processing {
  color: #ff9f43;
}

body.withdraw-page .withdraw-record-side strong.rejected,
body.withdraw-page .withdraw-record-side strong.cancelled {
  color: #ff4d4f;
}

body.withdraw-page .withdraw-record-side em {
  position: static;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

body.withdraw-page .withdraw-record-arrow {
  align-self: center;
  color: #999999;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 420px) {
  body.withdraw-page .withdraw-record-card {
    padding-inline: 10px;
    grid-template-columns: 40px minmax(0, 1fr) minmax(82px, auto) 12px;
    gap: 8px;
  }

  body.withdraw-page .withdraw-record-icon {
    width: 40px;
    height: 40px;
  }

  body.withdraw-page .withdraw-record-main > strong,
  body.withdraw-page .withdraw-record-side strong {
    font-size: 13px;
  }

  body.withdraw-page .withdraw-record-side {
    min-width: 82px;
    max-width: 112px;
  }

  body.withdraw-page .withdraw-record-side em {
    font-size: 12px;
  }
}

/* 提现记录状态筛选：选项间距放宽 */
body.withdraw-page .withdraw-status-menu {
  gap: 6px !important;
  padding: 8px !important;
}

body.withdraw-page .withdraw-status-menu button {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  line-height: 40px !important;
}

/* 提现记录日期筛选：大白色浮层 + 模拟滚轮日期 */
body.withdraw-page .withdraw-date-menu {
  left: 0 !important;
  top: 42px !important;
  width: min(408px, calc(100vw - 44px)) !important;
  min-width: 0 !important;
  padding: 16px 16px 18px !important;
  gap: 18px !important;
  border: 1px solid #e0e6ef !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(20, 45, 90, 0.14) !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-quick {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-quick button {
  min-height: 42px !important;
  border: 1px solid #dfe4ec !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #2d3138 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-quick button.active {
  border-color: #2f7cff !important;
  background: #eef5ff !important;
  color: #2f7cff !important;
}

body.withdraw-page .withdraw-date-custom-title {
  margin: 2px 0 -4px !important;
  color: #2d3138 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-range {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

body.withdraw-page .withdraw-date-wheel-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0 12px;
}

body.withdraw-page .withdraw-date-wheel-card:first-child {
  padding-left: 0;
  border-right: 1px solid #e4e8ef;
}

body.withdraw-page .withdraw-date-wheel-card:last-child {
  padding-right: 0;
}

body.withdraw-page .withdraw-date-wheel-card > strong {
  color: #5f6670;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}

body.withdraw-page .withdraw-date-wheel {
  display: grid;
  gap: 0;
}

body.withdraw-page .withdraw-wheel-row {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr 0.82fr;
  align-items: center;
  min-height: 40px;
}

body.withdraw-page .withdraw-wheel-row.selected {
  border-top: 1px solid #d9dde5;
  border-bottom: 1px solid #d9dde5;
}

body.withdraw-page .withdraw-wheel-row button {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  color: #3b414b;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

body.withdraw-page .withdraw-wheel-row.faded button {
  color: #9aa3af;
  font-weight: 500;
  opacity: 0.88;
}

body.withdraw-page .withdraw-wheel-row button.active {
  color: #202734;
  font-size: 17px;
  font-weight: 500;
}

body.withdraw-page .withdraw-wheel-row.disabled button,
body.withdraw-page .withdraw-wheel-row button:disabled {
  color: #d9dde4;
  cursor: not-allowed;
  opacity: 0.46;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-actions button {
  min-height: 46px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-actions button:first-child {
  border: 1px solid #2f7cff !important;
  color: #2f7cff !important;
  background: #ffffff !important;
}

body.withdraw-page .withdraw-date-menu .withdraw-filter-actions button:last-child {
  border: 1px solid #2f7cff !important;
  color: #ffffff !important;
  background: #2f7cff !important;
}

/* 提现页最终调整：显示账户标题，提现方式选中态改为蓝色 */
body.withdraw-page .withdraw-account-card {
  margin-top: 30px !important;
}

body.withdraw-page .withdraw-account-card::before {
  content: "提现账户" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: -24px !important;
  color: #1f2a44 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.withdraw-page .withdraw-methods button.active {
  border-color: #2f7cff !important;
  background: #eef5ff !important;
  color: #2f7cff !important;
}

body.withdraw-page .withdraw-methods button.active::after {
  background: #2f7cff !important;
}

/* 提现申请页小修：隐藏账户区标题，余额只显示黄色数字，金额单位显示 K */
body.withdraw-page .withdraw-account-card::before {
  content: none !important;
  display: none !important;
}

body.withdraw-page .withdraw-account-card {
  margin-top: 8px !important;
}

body.withdraw-page .withdraw-balance-card strong {
  color: #ffb000 !important;
}

body.withdraw-page .withdraw-amount-input b {
  color: #1f2a44 !important;
  font-weight: 900 !important;
}

/* Final override: activity rules title bars on first deposit and daily loss pages must be blue. */
body.first-recharge-page .activity-rule-title,
body.loss-rescue-page .activity-rule-title {
  min-height: 32px !important;
  padding: 0 30px 0 14px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #174ea6) !important;
  font-size: 14px !important;
}

body.first-recharge-page .activity-rule-title::after,
body.loss-rescue-page .activity-rule-title::after {
  right: -18px !important;
  width: 18px !important;
  background: inherit !important;
}

body.first-recharge-page .activity-rule-list,
body.loss-rescue-page .activity-rule-list {
  font-size: 13px !important;
}

/* Promo sidebar: fixed semantic SVG icons with the original blue palette. */
#promoView .promo-sidebar {
  gap: 8px !important;
  padding-right: 4px !important;
  border-right: 0 !important;
}

#promoView .promo-sidebar button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 58px !important;
  padding: 6px 5px !important;
  border: 1px solid #d6e7ff !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #edf6ff 0%, #d8ebff 100%) !important;
  color: #173a72 !important;
  box-shadow:
    0 8px 18px rgba(47, 123, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#promoView .promo-sidebar button::after {
  content: none !important;
}

#promoView .promo-sidebar button.active {
  border-color: transparent !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #4b96ff 0%, #2f7bff 48%, #145fe6 100%) !important;
  box-shadow:
    0 10px 20px rgba(47, 123, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

#promoView .promo-sidebar button .promo-category-icon {
  width: 30px !important;
  height: 28px !important;
  color: inherit !important;
}

#promoView .promo-sidebar button .promo-category-icon svg {
  width: 25px !important;
  height: 25px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#promoView .promo-sidebar button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#promoView .promo-sidebar button strong {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#promoView .promo-sidebar .promo-side-action {
  min-height: 38px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(47, 107, 255, 0.42) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #2f6bff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.08) !important;
}

#promoView .promo-sidebar .promo-side-action::after {
  content: none !important;
}

/* Promo categories use a compact horizontal button: icon left, label right. */
#promoView .promo-layout:not(.rebate-direct):not(.pending-direct):not(.record-direct) {
  grid-template-columns: 90px minmax(0, 1fr) !important;
  gap: 8px !important;
}

#promoView .promo-layout:not(.rebate-direct):not(.pending-direct):not(.record-direct) .promo-sidebar {
  width: 100% !important;
  max-width: none !important;
}

#promoView .promo-sidebar button[data-promo-category] {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 3px !important;
  min-height: 42px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}

#promoView .promo-sidebar button[data-promo-category] .promo-category-icon {
  justify-self: center !important;
  width: 22px !important;
  height: 22px !important;
}

#promoView .promo-sidebar button[data-promo-category] .promo-category-icon svg {
  width: 19px !important;
  height: 19px !important;
}

#promoView .promo-sidebar button[data-promo-category] strong {
  min-width: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* First-deposit invitation appears only after the install prompt is settled. */
.first-deposit-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(13, 34, 28, 0.42);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.first-deposit-popup-overlay.is-visible {
  opacity: 1;
}

.first-deposit-popup {
  position: relative;
  width: min(100%, 430px);
  max-height: min(88vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: #f7fbf9;
  box-shadow: 0 24px 70px rgba(8, 55, 39, 0.28);
  transform: translateY(12px);
  transition: transform 180ms ease;
}

.first-deposit-popup-overlay.is-visible .first-deposit-popup {
  transform: translateY(0);
}

.first-deposit-popup > header {
  position: relative;
  padding: 18px 54px 15px 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #20b67d, #0c8257);
}

.first-deposit-popup > header small,
.first-deposit-popup > header p {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
}

.first-deposit-popup > header h2 {
  margin: 3px 0 4px;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: 0;
}

.first-deposit-popup > header button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.first-deposit-refresh {
  position: absolute;
  top: 68px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.first-deposit-refresh svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-deposit-task-list {
  display: grid;
  gap: 8px;
  max-height: min(54vh, 470px);
  overflow-y: auto;
  padding: 12px;
  overscroll-behavior: contain;
}

.first-deposit-task {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 9px;
  border: 1px solid #d7ebe3;
  border-radius: 10px;
  background: #ffffff;
}

.first-deposit-gift {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(145deg, #ffc84d, #f39b13);
}

.first-deposit-gift svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-deposit-task-copy {
  min-width: 0;
}

.first-deposit-task-copy > strong,
.first-deposit-task-copy > span {
  display: block;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.first-deposit-task-copy > strong {
  color: #23453a;
  font-size: 12px;
}

.first-deposit-task-copy > span {
  margin-top: 3px;
  color: #71857e;
  font-size: 11px;
}

.first-deposit-task-copy b {
  color: #ec9413;
}

.first-deposit-progress {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #e7f2ed;
}

.first-deposit-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #21ae77;
}

.first-deposit-task > button {
  flex: 0 0 auto;
  min-width: 58px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #1ca66f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.first-deposit-popup-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 12px;
}

.first-deposit-popup-actions button {
  height: 38px;
  border: 1px solid #a8d8c5;
  border-radius: 9px;
  color: #14825a;
  background: #ffffff;
  font-weight: 800;
}

.first-deposit-popup-mutes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 14px;
  color: #61766e;
  font-size: 12px;
  font-weight: 700;
}

.first-deposit-popup-mutes label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.first-deposit-popup-mutes input {
  width: 16px;
  height: 16px;
  accent-color: #159465;
}

@media (max-width: 370px) {
  .first-deposit-popup-overlay { padding: 10px; }
  .first-deposit-task { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; padding: 7px; }
  .first-deposit-gift { width: 34px; height: 34px; }
  .first-deposit-task > button { min-width: 52px; padding-inline: 7px; }
}

/* ===== Withdraw page refresh: account chooser, password boxes, records, detail ===== */
body.withdraw-page {
  background: #f4f6fa;
  color: #2d3138;
}

body.withdraw-page .withdraw-shell {
  width: min(100%, 430px);
  background: #f4f6fa;
  padding-bottom: 94px;
}

body.withdraw-page .withdraw-topbar {
  background: #ffffff;
  border-bottom: 1px solid #dfe4ec;
}

body.withdraw-page .withdraw-icon-button {
  color: #5f666f;
}

body.withdraw-page .withdraw-icon-button:last-child,
body.withdraw-page .withdraw-tabs button.active {
  color: #22a77b;
}

body.withdraw-page .withdraw-tabs button {
  color: #333941;
  font-size: 15px;
  font-weight: 800;
}

body.withdraw-detail-mode .withdraw-tabs button {
  display: none;
}

body.withdraw-detail-mode .withdraw-tabs::before {
  content: "提现详情";
  display: grid;
  place-items: center;
  height: 100%;
  color: #2d3138;
  font-size: 20px;
  font-weight: 900;
}

body.withdraw-page .withdraw-tabs button.active::after {
  background: #22a77b;
  box-shadow: none;
}

body.withdraw-page .withdraw-main {
  padding: 0 14px 18px;
  gap: 12px;
}

body.withdraw-page .withdraw-balance-card {
  min-height: 64px;
  margin: 0 -14px;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid #dfe4ec;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

body.withdraw-page .withdraw-balance-card span {
  color: #8b929c;
  font-size: 15px;
}

body.withdraw-page .withdraw-balance-card strong {
  color: #ff9800;
  font-size: 20px;
  font-weight: 900;
}

body.withdraw-page .withdraw-balance-card button,
body.withdraw-page .withdraw-record-total button {
  color: #22a77b;
}

body.withdraw-page .withdraw-methods {
  padding-top: 36px;
}

body.withdraw-page .withdraw-methods::before,
body.withdraw-page .withdraw-account-card::before,
body.withdraw-page .withdraw-form-card label > span,
body.withdraw-page .withdraw-password-head strong {
  color: #2d3138;
  font-size: 16px;
  font-weight: 900;
}

body.withdraw-page .withdraw-methods button {
  min-height: 58px;
  border-color: #d8dde5;
  border-radius: 10px;
  background: #ffffff;
  color: #2d3138;
}

body.withdraw-page .withdraw-methods button.active {
  border-color: #22a77b;
  background: #f0fff9;
  color: #22a77b;
}

body.withdraw-page .withdraw-methods button.active::after {
  background: #22a77b;
}

body.withdraw-page .withdraw-account-card,
body.withdraw-page .withdraw-form-card,
body.withdraw-page .withdraw-password-card,
body.withdraw-page .withdraw-rules,
body.withdraw-page .withdraw-bind-card,
body.withdraw-page .withdraw-record-card,
body.withdraw-page .withdraw-detail-card {
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #ffffff;
  color: #2d3138;
  box-shadow: 0 6px 16px rgba(20, 45, 90, 0.04);
}

body.withdraw-page .withdraw-account-card {
  min-height: 82px;
  margin-top: 30px;
  padding: 14px;
}

body.withdraw-page .withdraw-account-card small,
body.withdraw-page .withdraw-bound-account small,
body.withdraw-page .withdraw-account-type small {
  color: #8f969f;
  font-size: 13px;
}

body.withdraw-page .withdraw-gold-icon,
body.withdraw-page .withdraw-record-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eef7ff;
  color: #22a77b;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

body.withdraw-page .withdraw-account-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.withdraw-page .withdraw-form-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.withdraw-page .withdraw-amount-input {
  min-height: 58px;
  border-color: #d4d9e1;
  border-radius: 10px;
  background: #ffffff;
}

body.withdraw-page .withdraw-amount-input button {
  color: #22a77b;
}

body.withdraw-page .withdraw-password-card {
  padding: 14px;
  display: grid;
  gap: 12px;
}

body.withdraw-page .withdraw-password-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.withdraw-page .withdraw-password-head button,
body.withdraw-page .withdraw-password-missing button,
body.withdraw-page .withdraw-sheet-empty button,
body.withdraw-page .withdraw-account-sheet header button {
  border: 0;
  background: transparent;
  color: #22a77b;
  font-weight: 800;
}

body.withdraw-page .withdraw-password-head .withdraw-password-eye {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #2f7cff;
  background: #eef5ff;
  border: 1px solid #cfe0ff;
  box-shadow: 0 4px 10px rgba(47, 124, 255, 0.12);
}

body.withdraw-page .withdraw-password-head .withdraw-password-eye svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.withdraw-page .withdraw-password-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid #d4d9e1;
  border-radius: 12px;
  overflow: hidden;
}

body.withdraw-page .withdraw-password-grid input {
  width: 100%;
  height: 54px;
  border: 0;
  border-right: 1px solid #d4d9e1;
  background: #ffffff;
  color: #2d3138;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  outline: none;
}

body.withdraw-page .withdraw-password-grid input:last-child {
  border-right: 0;
}

body.withdraw-page .withdraw-password-missing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  color: #8f969f;
}

body.withdraw-page .withdraw-rules {
  padding: 12px 14px;
  background: #f8fbff;
}

body.withdraw-page .withdraw-rules p {
  color: #64748b;
  font-size: 13px;
}

body.withdraw-page .withdraw-submit::before {
  background: linear-gradient(180deg, #34b98a, #22a77b);
}

body.withdraw-page .withdraw-submit:disabled::before {
  background: #a8a8a8;
}

body.withdraw-page .withdraw-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(18, 28, 42, 0.42);
}

body.withdraw-page .withdraw-account-sheet {
  width: min(100%, 430px);
  padding: 10px 16px 18px;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  box-shadow: 0 -18px 40px rgba(20, 45, 90, 0.16);
}

body.withdraw-page .withdraw-sheet-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #d6dce6;
}

body.withdraw-page .withdraw-account-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

body.withdraw-page .withdraw-account-sheet header strong {
  color: #2d3138;
  font-size: 17px;
}

body.withdraw-page .withdraw-sheet-list {
  display: grid;
  gap: 10px;
}

body.withdraw-page .withdraw-sheet-account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
}

body.withdraw-page .withdraw-sheet-account strong,
body.withdraw-page .withdraw-record-main strong {
  display: block;
  color: #2d3138;
  font-size: 15px;
}

body.withdraw-page .withdraw-sheet-account small {
  color: #8f969f;
}

body.withdraw-page .withdraw-sheet-account i {
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
}

body.withdraw-page .withdraw-sheet-account i.active {
  border-color: #22a77b;
  box-shadow: inset 0 0 0 4px #ffffff;
  background: #22a77b;
}

body.withdraw-page .withdraw-sheet-account.is-selected {
  border-color: rgba(34, 167, 123, 0.42);
  background: #f1fff9;
}

body.withdraw-page .withdraw-sheet-account.is-add {
  background: #ffffff;
}

body.withdraw-page .withdraw-method-action {
  justify-self: end;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.withdraw-page .withdraw-method-action.active {
  color: #22a77b;
}

body.withdraw-page .withdraw-method-action.add {
  color: #22a77b;
}

body.withdraw-page .withdraw-sheet-note,
body.withdraw-page .withdraw-sheet-empty {
  color: #8f969f;
  text-align: center;
}

body.withdraw-page .withdraw-record-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 6px 0 12px;
}

body.withdraw-page .withdraw-record-filters {
  display: flex;
  gap: 8px;
  position: relative;
  margin-top: -2px;
}

body.withdraw-page .withdraw-record-filters > button {
  min-height: 32px;
  padding: 0 12px;
  max-width: min(170px, 48vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #bcd3ff;
  border-radius: 999px;
  background: #eef5ff;
  color: #2f7cff;
  font-size: 12px;
  font-weight: 800;
}

body.withdraw-page .withdraw-record-filters > button.expanded {
  border-color: #2f7cff;
  background: #e4efff;
  box-shadow: 0 6px 14px rgba(47, 124, 255, 0.12);
}

body.withdraw-page .withdraw-filter-menu {
  display: grid;
  position: absolute;
  top: 38px;
  z-index: 20;
  min-width: 120px;
  padding: 6px;
  border: 1px solid #dde3ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(20, 45, 90, 0.12);
}

body.withdraw-page .withdraw-status-menu {
  left: 84px;
}

body.withdraw-page .withdraw-date-menu {
  left: 0;
  width: min(315px, calc(100vw - 32px));
  gap: 10px;
  padding: 12px;
}

body.withdraw-page .withdraw-filter-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.withdraw-page .withdraw-filter-quick button,
body.withdraw-page .withdraw-status-menu button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #526174;
}

body.withdraw-page .withdraw-filter-quick button.active,
body.withdraw-page .withdraw-status-menu button.active {
  color: #2f7cff;
  background: #eef5ff;
  font-weight: 800;
}

body.withdraw-page .withdraw-filter-range {
  display: grid;
  gap: 8px;
}

body.withdraw-page .withdraw-filter-range label {
  display: grid;
  gap: 5px;
  color: #7a8799;
  font-size: 12px;
  font-weight: 700;
}

body.withdraw-page .withdraw-filter-range input {
  height: 36px;
  border: 1px solid #dbe7ff;
  border-radius: 10px;
  padding: 0 10px;
  color: #1f2a44;
  background: #f8fbff;
  font-size: 13px;
}

body.withdraw-page .withdraw-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.withdraw-page .withdraw-filter-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
}

body.withdraw-page .withdraw-filter-actions button:first-child {
  color: #7a8799;
  background: #f1f5fb;
}

body.withdraw-page .withdraw-filter-actions button:last-child {
  color: #ffffff;
  background: #2f7cff;
}

body.withdraw-page .withdraw-record-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  align-items: center;
  color: #8f969f;
  text-align: right;
  font-size: 12px;
}

body.withdraw-page .withdraw-record-total strong {
  color: #ffb000;
  font-size: 14px;
  line-height: 1.15;
}

body.withdraw-page .withdraw-record-total button {
  grid-row: 1 / span 2;
  grid-column: 2;
  border: 0;
  background: transparent;
}

body.withdraw-page .withdraw-record-card {
  min-height: 80px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
}

body.withdraw-page .withdraw-record-card::after {
  content: none;
}

body.withdraw-page .withdraw-empty span {
  color: #2f7cff;
  font-weight: 800;
}

body.withdraw-page .withdraw-record-main {
  display: block;
  min-width: 0;
}

body.withdraw-page .withdraw-record-main small {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
  color: #999;
  font-size: 13px;
}

body.withdraw-page .withdraw-record-main small span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.withdraw-page .withdraw-record-main small button,
body.withdraw-page .withdraw-detail-lines button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #22a77b;
  font-size: 18px;
}

body.withdraw-page .withdraw-record-side {
  display: block;
  text-align: right;
}

body.withdraw-page .withdraw-record-side strong {
  display: block;
  color: #2d3138;
  font-size: 18px;
  font-weight: 800;
}

body.withdraw-page .withdraw-record-side em {
  display: block;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

body.withdraw-page .withdraw-record-side em.processing,
body.withdraw-page .withdraw-detail-status.processing strong {
  color: #ff9800;
}

body.withdraw-page .withdraw-record-side em.success,
body.withdraw-page .withdraw-detail-status.success strong {
  color: #22a77b;
}

body.withdraw-page .withdraw-record-side em.failed,
body.withdraw-page .withdraw-record-side em.rejected,
body.withdraw-page .withdraw-detail-status.failed strong,
body.withdraw-page .withdraw-detail-status.rejected strong {
  color: #ff3b30;
}

body.withdraw-page .withdraw-record-side em.cancelled,
body.withdraw-page .withdraw-detail-status.cancelled strong {
  color: #8f969f;
}

body.withdraw-page .withdraw-record-arrow {
  color: #9ca3af;
  font-size: 30px;
  font-weight: 400;
}

body.withdraw-page .withdraw-list-end {
  margin: 12px 0 0;
  color: #9ca3af;
  text-align: center;
  font-size: 13px;
}

body.withdraw-page .withdraw-detail-card {
  margin-top: 14px;
  padding: 18px 24px;
}

body.withdraw-page .withdraw-detail-status {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 0 26px;
  border-bottom: 1px dashed #d9dfe8;
}

body.withdraw-page .withdraw-detail-status span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: #ffab13;
  color: #ffffff;
  font-size: 36px;
  font-weight: 900;
}

body.withdraw-page .withdraw-detail-status.success span {
  background: #22a77b;
}

body.withdraw-page .withdraw-detail-status.failed span,
body.withdraw-page .withdraw-detail-status.cancelled span {
  background: #ff3b30;
}

body.withdraw-page .withdraw-detail-status p {
  margin: 0;
  color: #2d3138;
  font-size: 32px;
  font-weight: 500;
}

body.withdraw-page .withdraw-detail-lines {
  display: grid;
  gap: 18px;
  padding-top: 22px;
}

body.withdraw-page .withdraw-detail-lines p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #2d3138;
  font-size: 15px;
}

body.withdraw-page .withdraw-detail-lines p span {
  flex-shrink: 0;
}

body.withdraw-page .withdraw-detail-lines p strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  color: #8c8f96;
  text-align: right;
  font-weight: 500;
  word-break: break-all;
}

body.withdraw-page .withdraw-detail-lines .withdraw-account-logo {
  width: 28px;
  height: 28px;
}

body.withdraw-page .withdraw-notice {
  display: grid;
  gap: 10px;
  justify-items: center;
}

body.withdraw-page .withdraw-notice > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #22a77b;
  color: #ffffff;
  font-size: 36px;
  font-weight: 900;
}

body.withdraw-page .withdraw-notice > strong {
  color: #2d3138;
  font-size: 20px;
}

body.withdraw-page .withdraw-notice > small {
  color: #8f969f;
}

body.withdraw-page .withdraw-notice p {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
}

body.withdraw-page .withdraw-notice em {
  color: #2d3138;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
*** End of File

/* ===== 充值付款页：收款信息最终紧凑版，EOF 强制生效 ===== */
body.recharge-page .receive-card {
  padding: 10px 12px !important;
}

body.recharge-page .receive-card .recharge-section-head {
  margin-bottom: 5px !important;
}

body.recharge-page .receive-grid {
  display: grid !important;
  gap: 3px 8px !important;
}

body.recharge-page .receive-row {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px 8px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

body.recharge-page .receive-row span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.recharge-page .receive-row strong {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  word-break: break-all !important;
}

body.recharge-page .receive-copy {
  min-width: 44px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== 充值付款页：收款信息最终紧凑版，放在文件末尾确保生效 ===== */
body.recharge-page .receive-card {
  padding: 10px 12px !important;
}

body.recharge-page .receive-card .recharge-section-head {
  margin-bottom: 5px !important;
}

body.recharge-page .receive-grid {
  display: grid !important;
  gap: 3px 8px !important;
}

body.recharge-page .receive-row {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px 8px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

body.recharge-page .receive-row span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.recharge-page .receive-row strong {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  word-break: break-all !important;
}

body.recharge-page .receive-copy {
  min-width: 44px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== 充值付款页：收款信息最终紧凑版，放在文件末尾确保生效 ===== */
body.recharge-page .receive-card {
  padding: 10px 12px !important;
}

body.recharge-page .receive-card .recharge-section-head {
  margin-bottom: 5px !important;
}

body.recharge-page .receive-grid {
  display: grid !important;
  gap: 3px 8px !important;
}

body.recharge-page .receive-row {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px 8px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}

body.recharge-page .receive-row span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.recharge-page .receive-row strong {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  word-break: break-all !important;
}

body.recharge-page .receive-copy {
  min-width: 44px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Pending rewards page refresh: scoped only to the promo pending tab. */
#promoView .promo-layout.pending-direct {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  background: #f5f8ff;
}

#promoView .promo-layout.pending-direct .promo-sidebar {
  display: none !important;
}

#promoView .promo-layout.pending-direct .promo-card-list {
  gap: 0 !important;
}

#promoView .promo-layout.pending-direct .promo-pending-page {
  display: grid;
  gap: 12px;
  width: 100%;
}

#promoView .promo-layout.pending-direct .promo-pending-card.reward-center-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 86px;
  padding: 14px !important;
  border-radius: 12px !important;
}

#promoView .promo-layout.pending-direct .promo-reward-image {
  display: none !important;
}

#promoView .promo-layout.pending-direct .promo-pending-card aside button {
  width: 90px;
  height: 40px;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #28a879;
  font-size: 15px !important;
}

#promoView .promo-layout.pending-direct .promo-reward-empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 首页电子分类：使用内联金属 777 SVG */
#homeView .category-icon-wrap.slot-svg {
  width: 46px !important;
  height: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.slot-svg svg {
  display: block !important;
  width: 54px !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) scale(1.08) !important;
  transform-origin: center !important;
}

/* 首页捕鱼分类：使用内联鲨鱼 SVG */
#homeView .category-icon-wrap.fish-svg {
  width: 38px !important;
  height: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.fish-svg svg {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

/* 首页真人分类：使用内联 SVG */
#homeView .category-icon-wrap.live-svg {
  width: 36px !important;
  height: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.live-svg svg {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

/* 首页棋牌分类：使用内联扑克 SVG */
#homeView .category-icon-wrap.poker-svg {
  width: 38px !important;
  height: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.poker-svg svg {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

/* 首页体育分类：使用内联足球 SVG */
#homeView .category-icon-wrap.sport-svg {
  width: 38px !important;
  height: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.sport-svg svg {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.08) !important;
  transform-origin: center !important;
}

/* 首页斗鸡分类：限制 SVG 在图标槽里，避免压到“斗鸡”文字 */
#homeView .category-icon-wrap.cockfight-svg {
  width: 38px !important;
  height: 34px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.cockfight-svg svg {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  transform: translateY(-2px) scale(1.02) !important;
  transform-origin: center !important;
}

#homeView .category-row button[data-category="cockfight"] .category-label {
  position: relative !important;
  z-index: 2 !important;
}

/* 首页分类：热门像门一样固定，其他分类只在右侧轨道内滑动 */
#homeView .category-row {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding-left: 2px !important;
  padding-right: 0 !important;
  background: #f5f9ff !important;
}

#homeView .category-fixed-door {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: stretch !important;
  background: #f5f9ff !important;
  box-shadow: 8px 0 12px rgba(245, 249, 255, 0.98) !important;
}

#homeView .category-scroll-track {
  min-width: 0 !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  padding-right: 12px !important;
}

#homeView .category-scroll-track::-webkit-scrollbar {
  display: none !important;
}

#homeView .category-row button {
  flex: 0 0 76px !important;
}

#homeView .category-fixed-door button[data-category="hot"] {
  position: relative !important;
  left: auto !important;
  z-index: 9 !important;
  width: 76px !important;
  min-width: 76px !important;
  background: #f5f9ff !important;
  box-shadow: none !important;
}

#homeView .category-icon-wrap.hot-svg {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.hot-svg svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.25) !important;
  transform-origin: center !important;
}

/* 首页热门：改为内联 SVG，避免再走图片资源 */
#homeView .category-icon-wrap.hot-svg {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeView .category-icon-wrap.hot-svg svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.25) !important;
  transform-origin: center !important;
}

/* 首页分类滑动：热门固定，其他分类横向滑动 */
#homeView .category-row button[data-category="hot"] {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  background: #f5f9ff !important;
  box-shadow: 8px 0 12px rgba(245, 249, 255, 0.9) !important;
}

#homeView .category-row button[data-category="hot"].active {
  background: #f5f9ff !important;
}

/* 首页热门下方分类：纵向厂商入口，每排三张，默认两排。 */
html.home-mode,
body.home-mode {
  overflow-x: visible !important;
}

body.home-mode .app-shell,
#homeView {
  overflow-x: visible !important;
}

#homeView .game-section.active {
  display: block !important;
}

#homeView .game-section[hidden] {
  display: none !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) {
  scroll-margin-top: calc(var(--n9-home-topbar-height, 58px) + 76px) !important;
  margin: 18px 0 24px !important;
}

/* Keep the category controls immediately below the complete, variable-height header. */
#homeView .category-row {
  top: var(--n9-home-topbar-height, 58px) !important;
  z-index: 19 !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .game-section-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  min-height: 34px !important;
  margin: 0 0 10px !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .game-section-title h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #263b5f !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .game-section-title h2::before {
  content: none !important;
}

#homeView .game-section-title .section-category-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
}

#homeView .game-section-title .section-category-icon svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

#homeView .game-section-title .section-category-label {
  min-width: 0;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .section-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  color: #71809a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-rail,
#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .section-search {
  display: none !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .games-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1 / 1.25 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 1px solid #e2eaf7 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #eaf2ff !important;
  box-shadow: 0 7px 18px rgba(31, 58, 108, 0.11) !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, transparent 48%, rgba(12, 28, 56, 0.82) 100%) !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card strong {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 6px 8px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card small,
#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .provider-card-chip {
  display: none !important;
}

#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .expand-toggle {
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 7px 0 0 !important;
  color: #8b95a7 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#homeView .game-section .expand-toggle[hidden] {
  display: none !important;
}

#homeView .game-section .expand-toggle .expand-action {
  color: #18a874 !important;
  font-weight: 800 !important;
}

#homeView .game-section[data-section="hot"] .expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  min-height: 28px;
  margin: 8px auto 0;
  padding: 3px 8px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: #e7343f !important;
  font-size: 14px;
  letter-spacing: 0;
}

#homeView .game-section[data-section="hot"] .expand-toggle .expand-action {
  color: #e7343f !important;
  font-size: 11px;
  opacity: 1;
}

#homeView .game-section[data-section="hot"] .expand-toggle:active {
  opacity: 0.72;
}

/* ===== 分类页 KM 厂商入口使用皇冠 M 图标 ===== */
body.category-page .provider-button[data-provider="km"],
body.category-page.slot-page .provider-button[data-provider="km"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="km"] .provider-button-image.km-logo,
body.category-page.slot-page .provider-button[data-provider="km"] .provider-button-image.km-logo {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="km"] .provider-button-image.km-logo svg,
body.category-page.slot-page .provider-button[data-provider="km"] .provider-button-image.km-logo svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
}

body.category-page .provider-button[data-provider="km"] strong,
body.category-page.slot-page .provider-button[data-provider="km"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 PP 厂商入口使用皇冠 PLAY 图标 ===== */
body.category-page .provider-button[data-provider="pp"],
body.category-page.slot-page .provider-button[data-provider="pp"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="pp"] .provider-button-image.pp-logo,
body.category-page.slot-page .provider-button[data-provider="pp"] .provider-button-image.pp-logo {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="pp"] .provider-button-image.pp-logo svg,
body.category-page.slot-page .provider-button[data-provider="pp"] .provider-button-image.pp-logo svg {
  display: block !important;
  width: 30px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="pp"] strong,
body.category-page.slot-page .provider-button[data-provider="pp"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 Play N GO 厂商入口使用官方蓝红图标 ===== */
body.category-page .provider-button[data-provider="png"],
body.category-page.slot-page .provider-button[data-provider="png"] {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="png"] .provider-button-image.playngo-logo,
body.category-page.slot-page .provider-button[data-provider="png"] .provider-button-image.playngo-logo {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="png"] .provider-button-image.playngo-logo svg,
body.category-page.slot-page .provider-button[data-provider="png"] .provider-button-image.playngo-logo svg {
  display: block !important;
  width: 48px !important;
  height: 30px !important;
  max-width: none !important;
}

body.category-page .provider-button[data-provider="png"] strong,
body.category-page.slot-page .provider-button[data-provider="png"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 v8 厂商入口使用透明底金色 V8 图标 ===== */
body.category-page .provider-button[data-provider="v8"],
body.category-page.slot-page .provider-button[data-provider="v8"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="v8"] .provider-button-image.v8-logo,
body.category-page.slot-page .provider-button[data-provider="v8"] .provider-button-image.v8-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="v8"] .provider-button-image.v8-logo svg,
body.category-page.slot-page .provider-button[data-provider="v8"] .provider-button-image.v8-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="v8"] strong,
body.category-page.slot-page .provider-button[data-provider="v8"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 V-POWER 厂商入口使用透明外部圆形 VP 图标 ===== */
body.category-page .provider-button[data-provider="vpower"],
body.category-page.slot-page .provider-button[data-provider="vpower"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="vpower"] .provider-button-image.vpower-logo,
body.category-page.slot-page .provider-button[data-provider="vpower"] .provider-button-image.vpower-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="vpower"] .provider-button-image.vpower-logo svg,
body.category-page.slot-page .provider-button[data-provider="vpower"] .provider-button-image.vpower-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="vpower"] strong,
body.category-page.slot-page .provider-button[data-provider="vpower"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 FC 厂商入口使用白蓝橙 FC 图标 ===== */
body.category-page .provider-button[data-provider="fc"],
body.category-page.slot-page .provider-button[data-provider="fc"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="fc"] .provider-button-image.fc-logo,
body.category-page.slot-page .provider-button[data-provider="fc"] .provider-button-image.fc-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="fc"] .provider-button-image.fc-logo svg,
body.category-page.slot-page .provider-button[data-provider="fc"] .provider-button-image.fc-logo svg {
  display: block !important;
  width: 38px !important;
  height: 26px !important;
}

body.category-page .provider-button[data-provider="fc"] strong,
body.category-page.slot-page .provider-button[data-provider="fc"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 Imperium Games 厂商入口使用 IGS 灯牌图标 ===== */
body.category-page .provider-button[data-provider="igs"],
body.category-page.slot-page .provider-button[data-provider="igs"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="igs"] .provider-button-image.igs-logo,
body.category-page.slot-page .provider-button[data-provider="igs"] .provider-button-image.igs-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="igs"] .provider-button-image.igs-logo svg,
body.category-page.slot-page .provider-button[data-provider="igs"] .provider-button-image.igs-logo svg {
  display: block !important;
  width: 36px !important;
  height: 32px !important;
}

body.category-page .provider-button[data-provider="igs"] strong,
body.category-page.slot-page .provider-button[data-provider="igs"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 SA 厂商入口使用金色 SA 图标 ===== */
body.category-page .provider-button[data-provider="s4"],
body.category-page.slot-page .provider-button[data-provider="s4"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="s4"] .provider-button-image.sa-logo,
body.category-page.slot-page .provider-button[data-provider="s4"] .provider-button-image.sa-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="s4"] .provider-button-image.sa-logo svg,
body.category-page.slot-page .provider-button[data-provider="s4"] .provider-button-image.sa-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="s4"] strong,
body.category-page.slot-page .provider-button[data-provider="s4"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 DG 厂商入口使用金色龙牌图标 ===== */
body.category-page .provider-button[data-provider="dg"],
body.category-page.slot-page .provider-button[data-provider="dg"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="dg"] .provider-button-image.dg-logo,
body.category-page.slot-page .provider-button[data-provider="dg"] .provider-button-image.dg-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="dg"] .provider-button-image.dg-logo svg,
body.category-page.slot-page .provider-button[data-provider="dg"] .provider-button-image.dg-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="dg"] strong,
body.category-page.slot-page .provider-button[data-provider="dg"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 Sexy 真人入口使用粉红 Sexy SVG 图标 ===== */
body.category-page .provider-button[data-provider="qf"],
body.category-page.slot-page .provider-button[data-provider="qf"] {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="qf"] .provider-button-image.qf-logo,
body.category-page.slot-page .provider-button[data-provider="qf"] .provider-button-image.qf-logo {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="qf"] .provider-button-image.qf-logo svg,
body.category-page.slot-page .provider-button[data-provider="qf"] .provider-button-image.qf-logo svg {
  display: block !important;
  width: 52px !important;
  height: 24px !important;
}

body.category-page .provider-button[data-provider="qf"] strong,
body.category-page.slot-page .provider-button[data-provider="qf"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 KA 厂商入口使用统一红色立方体图标 ===== */
body.category-page .provider-button[data-provider="ka"],
body.category-page.slot-page .provider-button[data-provider="ka"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="ka"] .provider-button-image.ka-logo,
body.category-page.slot-page .provider-button[data-provider="ka"] .provider-button-image.ka-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="ka"] .provider-button-image.ka-logo svg,
body.category-page.slot-page .provider-button[data-provider="ka"] .provider-button-image.ka-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="ka"] strong,
body.category-page.slot-page .provider-button[data-provider="ka"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

/* ===== 分类页 Playtech 厂商入口使用统一播放轨道图标 ===== */
body.category-page .provider-button[data-provider="q6"],
body.category-page.slot-page .provider-button[data-provider="q6"] {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch !important;
  text-align: left !important;
}

body.category-page .provider-button[data-provider="q6"] .provider-button-image.playtech-logo,
body.category-page.slot-page .provider-button[data-provider="q6"] .provider-button-image.playtech-logo {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="q6"] .provider-button-image.playtech-logo svg,
body.category-page.slot-page .provider-button[data-provider="q6"] .provider-button-image.playtech-logo svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}

body.category-page .provider-button[data-provider="q6"] strong,
body.category-page.slot-page .provider-button[data-provider="q6"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 48px !important;
  height: 22px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 52px !important;
}

/* JDB 最终缩小一档 */
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 44px !important;
  height: 20px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 48px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 48px !important;
  height: 22px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 52px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 48px !important;
  height: 22px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 52px !important;
}

/* ===== CQ9/JDB 横向 Logo 放宽，避免靠左和文字拥挤 ===== */
body.category-page .provider-button[data-provider="cq9"],
body.category-page.slot-page .provider-button[data-provider="cq9"],
body.category-page .provider-button[data-provider="jdb"],
body.category-page.slot-page .provider-button[data-provider="jdb"] {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.category-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo,
body.category-page.slot-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo,
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 52px !important;
  height: 24px !important;
  transform: none !important;
  justify-self: start !important;
}

body.category-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo svg,
body.category-page.slot-page .provider-button[data-provider="cq9"] .provider-button-image.cq9-logo svg,
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 56px !important;
  max-width: none !important;
  height: auto !important;
}

body.category-page .provider-button[data-provider="cq9"] strong,
body.category-page.slot-page .provider-button[data-provider="cq9"] strong,
body.category-page .provider-button[data-provider="jdb"] strong,
body.category-page.slot-page .provider-button[data-provider="jdb"] strong {
  justify-self: start !important;
  text-align: left !important;
  transform: none !important;
}
/* JDB 最终尺寸：和 CQ9 视觉大小保持一致，但避免文字过挤 */
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 48px !important;
  height: 22px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 52px !important;
}
/* JDB 最终缩小一档 */
body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo {
  width: 44px !important;
  height: 20px !important;
}

body.category-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg,
body.category-page.slot-page .provider-button[data-provider="jdb"] .provider-button-image.jdb-logo svg {
  width: 48px !important;
}
/* Admin realtime pending alerts */
.admin-alert-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  max-height: 40px;
  padding: 4px 14px;
  border-bottom: 1px solid #dbe7f8;
  background: #f8fbff;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-alert-strip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #d5e2f4;
  border-radius: 6px;
  background: #fff;
  color: #40516d;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.admin-alert-strip button:hover {
  border-color: #7aa7ee;
  color: #165fca;
}

.admin-alert-sound span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8b1bf;
}

.admin-alert-sound.active {
  border-color: #8bd8b1;
  color: #087f4f;
  background: #effcf5;
}

.admin-alert-sound.active span {
  background: #18a86b;
  box-shadow: 0 0 0 4px rgba(24, 168, 107, 0.12);
}

.admin-alert-count strong {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #e8eef7;
  color: #52627a;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  box-sizing: border-box;
}

.admin-alert-count.has-pending {
  border-color: #ffb3b3;
  color: #b91c1c;
  background: #fff7f7;
}

.admin-alert-count.has-pending strong {
  background: #ef4444;
  color: #fff;
}

body.support-page .admin-alert-strip {
  position: relative;
  z-index: 12;
  padding-right: 12px;
  padding-left: 12px;
}

body.ops-page .ops-main.admin-alerts-mounted {
  grid-template-rows: 72px 40px minmax(0, 1fr);
}

body.support-page .svc-shell.admin-alerts-mounted {
  grid-template-rows: 58px 40px minmax(0, 1fr);
}

@media (max-width: 720px) {
  .admin-alert-strip {
    padding: 4px 8px;
  }

  .admin-alert-strip button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ===== Game artwork final: always show the complete supplied image ===== */
#homeView .game-section .games-grid .provider-card,
body.category-page .game-grid .provider-card,
.detail-grid .provider-card,
.game-card {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

#homeView .game-section[data-section="hot"] .games-grid .provider-card .provider-card-art,
#homeView .game-section:not([data-section="recent"]):not([data-section="favorite"]) .games-grid .provider-card .provider-card-art,
body.category-page .game-grid .provider-card .provider-card-art,
.detail-grid .provider-card-art,
.game-card > img,
.game-card .game-image {
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #eaf2ff !important;
  background-image: linear-gradient(135deg, #f5f9ff, #dfeaff) !important;
  transform: none !important;
  scale: 1 !important;
}

#homeView .game-section[data-section="hot"] .games-grid .provider-card:hover .provider-card-art,
#homeView .game-section:not([data-section="recent"]):not([data-section="favorite"]) .games-grid .provider-card:hover .provider-card-art,
body.category-page .game-grid .provider-card:hover .provider-card-art,
.detail-grid .provider-card:hover .provider-card-art,
.game-card:hover > img,
.game-card:hover .game-image {
  transform: none !important;
  scale: 1 !important;
}

/* Category pages use larger cards; homepage hot cards intentionally stay unchanged. */
body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.category-page .game-grid .provider-card,
body.category-page.slot-page .game-grid .provider-card {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  border-radius: 12px !important;
}

body.category-page .game-grid .provider-card-art,
body.category-page.slot-page .game-grid .provider-card-art {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Prevent iOS and mobile browsers from zooming the viewport when a field receives focus. */
@media (max-width: 900px) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  input,
  textarea,
  select,
  button {
    touch-action: manipulation;
  }
}

/* Final category-page layout: three complete artwork cards per row. */
body.category-page .game-grid,
body.category-page.slot-page .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.category-page .game-grid .provider-card,
body.category-page.slot-page .game-grid .provider-card {
  aspect-ratio: 1 / 1.18 !important;
}

body.category-page .game-grid .provider-card-art,
body.category-page.slot-page .game-grid .provider-card-art,
#homeView .game-section:not([data-section="hot"]):not([data-section="recent"]):not([data-section="favorite"]) .games-grid .provider-card .provider-card-art {
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
}
/* Category launch feedback stays responsive across browser back/forward restores. */
body.category-page [data-game-id].is-launching,
#homeView [data-game-id].is-launching {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: -3px;
}

/* Homepage recent and favorite collections stay inside the homepage. */
#homeView .home-collection-section {
  scroll-margin-top: calc(var(--n9-home-topbar-height, 58px) + 76px);
  margin: 18px 0 24px;
}

#homeView .home-collection-section .game-section-title {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 10px;
}

#homeView .home-collection-section .game-section-title h2 {
  margin: 0;
  color: #263b5f;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
}

#homeView .home-collection-section .games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#homeView .home-collection-section .provider-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.18 !important;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 1px solid #e2eaf7;
  border-radius: 12px;
  overflow: hidden;
  background: #eaf2ff;
  box-shadow: 0 7px 18px rgba(31, 58, 108, 0.11);
}

#homeView .home-collection-section .provider-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 48%, rgba(12, 28, 56, 0.82) 100%);
}

#homeView .home-collection-section .provider-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill !important;
  object-position: center;
  transform: none !important;
}

#homeView .home-collection-section .provider-card strong {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: 0;
  padding: 22px 6px 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

#homeView .home-collection-section .provider-card small,
#homeView .home-collection-section .provider-card-chip {
  display: none;
}

#homeView .home-collection-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 20px;
  border: 1px dashed #b9cdef;
  border-radius: 12px;
  background: #f7faff;
  color: #7b8ba8;
  font-size: 14px;
  font-weight: 700;
}

body.category-page [data-game-id].is-launching::after,
#homeView [data-game-id].is-launching::after {
  content: "正在进入游戏...";
  position: absolute;
  inset: auto 8px 8px;
  z-index: 8;
  padding: 7px 8px;
  border-radius: 6px;
  background: rgba(18, 58, 132, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.category-game-launch-feedback {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 12000;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(15, 45, 104, 0.94);
  box-shadow: 0 8px 22px rgba(20, 62, 140, 0.25);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* Category lists reveal ten rows at a time so slow connections still show a full first page. */
.category-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 20px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #1769e8;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

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

.category-load-more svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-load-more:active {
  opacity: 0.7;
}

/* Promo view: keep navigation fixed and scroll only the activity content pane. */
body.promo-mode {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

body.promo-mode .app-shell {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

body.promo-mode .app-shell > main {
  height: calc(100vh - 78px - env(safe-area-inset-bottom));
  height: calc(100svh - 78px - env(safe-area-inset-bottom));
  min-height: 0;
  overflow: hidden;
}

body.promo-mode #promoView.active,
body.promo-mode #promoView .promo-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.promo-mode #promoView .promo-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: 0;
}

body.promo-mode #promoView .promo-header {
  position: relative;
  top: auto;
}

body.promo-mode #promoView .promo-layout {
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
  padding-bottom: 10px;
}

body.promo-mode #promoView .promo-sidebar {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

body.promo-mode #promoView .promo-sidebar::-webkit-scrollbar {
  display: none;
}

body.promo-mode #promoView .promo-content {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.promo-mode #promoView .promo-content::-webkit-scrollbar {
  display: none;
}

/* Stable mobile geometry while browser chrome expands and collapses. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

#homeView .game-section[data-section="hot"],
#homeView .game-section[data-section="hot"] .games-grid,
#homeView .game-section[data-section="hot"] .provider-card {
  content-visibility: visible !important;
}

#homeView .game-section[data-section="hot"] .provider-card {
  contain: none !important;
  animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

#homeView .game-section[data-section="hot"] .provider-card-art {
  aspect-ratio: 3 / 4;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

#homeView .game-section[data-section="hot"] .provider-card-chip,
#homeView .game-section[data-section="hot"] .favorite-toggle {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.category-page .game-grid .provider-card-art,
body.category-page.slot-page .game-grid .provider-card-art {
  opacity: 1 !important;
  transition: none !important;
}

body.records-page .records-load-more {
  display: block;
  width: min(220px, calc(100% - 32px));
  min-height: 42px;
  margin: 8px auto 24px;
  border: 1px solid #b9d3ff;
  border-radius: 8px;
  background: #ffffff;
  color: #2563eb;
  font-size: 16px;
  font-weight: 800;
}

/* ===== 分类页顶部与分类菜单最终校正 ===== */
body.category-page .category-shell {
  width: min(100%, 1180px) !important;
  padding: 0 8px 20px !important;
}

body.category-page .category-topbar,
body.category-page.slot-page .category-topbar {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 0 !important;
  min-height: 54px !important;
  padding: 2px 0 5px !important;
}

body.category-page .category-back {
  grid-column: 1 !important;
  width: 40px !important;
  height: 40px !important;
}

body.category-page .category-title-wrap,
body.category-page.slot-page .category-title-wrap {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-items: center !important;
}

body.category-page .category-switch-button {
  min-width: 126px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
}

body.category-page .category-switch-button .category-switch-icon {
  flex-basis: 27px !important;
  width: 27px !important;
  height: 27px !important;
  margin-left: 0 !important;
}

body.category-page .category-switch {
  top: 44px !important;
  left: 50% !important;
  width: min(210px, calc(100vw - 44px)) !important;
  padding: 7px !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
}

body.category-page .category-switch.open {
  gap: 5px !important;
}

body.category-page .category-switch button {
  min-height: 37px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}

body.category-page .category-switch-icon {
  flex-basis: 25px !important;
  width: 25px !important;
  height: 25px !important;
}

body.category-page .category-switch-icon.utility-icon svg {
  width: 19px !important;
  height: 19px !important;
}

body.category-page .category-switch-icon.utility-icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.category-page .category-switch-icon.utility-icon svg path:first-child {
  vector-effect: non-scaling-stroke;
}

body.category-page .category-search,
body.category-page.slot-page .category-search {
  width: min(calc(100% - 24px), 480px) !important;
  margin: 5px auto 0 !important;
}

body.category-page .search-box.category-search {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  border-radius: 22px !important;
}

body.category-page .search-box.category-search input {
  font-size: 16px !important;
}

body.category-page .category-tabs,
body.category-page.slot-page .category-tabs {
  margin: 6px 0 5px !important;
}

@media (max-width: 540px) {
  body.category-page .category-shell {
    padding: 0 6px 18px !important;
  }

  body.category-page .category-topbar,
  body.category-page.slot-page .category-topbar {
    min-height: 52px !important;
    padding-top: 0 !important;
  }

  body.category-page .category-switch-button {
    min-width: 120px !important;
    min-height: 38px !important;
    font-size: 16px !important;
  }

  body.category-page .category-switch {
    top: 41px !important;
    width: min(202px, calc(100vw - 40px)) !important;
  }

  body.category-page .category-search,
  body.category-page.slot-page .category-search {
    width: calc(100% - 20px) !important;
  }
}

/* 最终覆盖：提现金额颜色随订单状态变化。 */
body.withdraw-page .withdraw-record-side strong.success {
  color: #18a874 !important;
}

body.withdraw-page .withdraw-record-side strong.processing {
  color: #ff9f43 !important;
}

body.withdraw-page .withdraw-record-side strong.rejected,
body.withdraw-page .withdraw-record-side strong.cancelled {
  color: #ff4d4f !important;
}
.n9-auth-restoring [data-auth-guest] {
  visibility: hidden !important;
}

html.n9-auth-restoring [data-auth-guest-panel],
html[data-n9-auth-state="restoring"] [data-auth-guest-panel],
html[data-n9-auth-state="authenticated"] [data-auth-guest-panel] {
  display: none !important;
}

/* 2026-07-26: category pages must scroll naturally on phones. Do not lock the grid to one viewport row. */
html body.category-page,
html body.category-page.slot-page {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative !important;
}

html body.category-page .category-shell,
html body.category-page.slot-page .category-shell {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .category-layout,
html body.category-page.slot-page .category-layout {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

html body.category-page .games-area,
html body.category-page.slot-page .games-area {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .game-grid,
html body.category-page.slot-page .game-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .provider-list,
html body.category-page.slot-page .provider-list {
  max-height: none !important;
  overflow: visible !important;
  align-self: flex-start !important;
}

/* 2026-07-26: final mobile category recovery.
   Keep category pages as one natural document so mobile browsers do not crop
   provider results to the first row when an older fixed-height rule is cached. */
html body.category-page,
html body.category-page.slot-page {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.category-page .category-shell,
html body.category-page.slot-page .category-shell {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .category-layout,
html body.category-page.slot-page .category-layout {
  display: grid !important;
  grid-template-columns: clamp(92px, 24vw, 132px) minmax(0, 1fr) !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .provider-list,
html body.category-page.slot-page .provider-list,
html body.category-page .games-area,
html body.category-page.slot-page .games-area,
html body.category-page .game-grid,
html body.category-page.slot-page .game-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.category-page .game-open-hitbox,
html body.category-page.slot-page .game-open-hitbox {
  z-index: 6 !important;
  pointer-events: auto !important;
}

html body.category-page .star-button,
html body.category-page.slot-page .star-button {
  z-index: 8 !important;
}

/* One favorite control across home, category, provider, search, and collections. */
#homeView .game-section[data-section="hot"] .favorite-toggle,
#homeView .game-section .favorite-toggle,
#homeView .home-collection-section .favorite-toggle,
#homeView .favorite-toggle,
html body.category-page .star-button,
html body.category-page.slot-page .star-button {
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 50% !important;
  background: rgba(20, 28, 45, 0.42) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 3px 8px rgba(15, 35, 80, 0.13) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#homeView .game-section[data-section="hot"] .favorite-toggle svg,
#homeView .game-section .favorite-toggle svg,
#homeView .home-collection-section .favorite-toggle svg,
#homeView .favorite-toggle svg,
html body.category-page .star-button svg,
html body.category-page.slot-page .star-button svg {
  width: 9px !important;
  height: 9px !important;
  fill: transparent !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

#homeView .game-section[data-section="hot"] .favorite-toggle.active,
#homeView .game-section .favorite-toggle.active,
#homeView .home-collection-section .favorite-toggle.active,
html body.category-page .star-button.active,
html body.category-page.slot-page .star-button.active {
  border-color: #ffd75a !important;
  background: rgba(20, 28, 45, 0.52) !important;
  color: #ffd75a !important;
  box-shadow: 0 0 0 1px rgba(255, 215, 90, 0.2), 0 4px 10px rgba(15, 35, 80, 0.16) !important;
}

#homeView .favorite-toggle.active svg,
html body.category-page .star-button.active svg,
html body.category-page.slot-page .star-button.active svg {
  fill: currentColor !important;
}

/* 2026-07-26: make category scrolling deterministic on mobile browsers.
   The page chrome stays fixed while provider and game columns scroll internally,
   avoiding devices where natural body scrolling becomes locked after tab/provider
   changes. */
@media (max-width: 768px) {
  html body.category-page,
  html body.category-page.slot-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html body.category-page .category-shell,
  html body.category-page.slot-page .category-shell {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  html body.category-page .category-topbar,
  html body.category-page.slot-page .category-topbar,
  html body.category-page .category-search,
  html body.category-page.slot-page .category-search,
  html body.category-page .category-tabs,
  html body.category-page.slot-page .category-tabs {
    min-height: 0 !important;
  }

  html body.category-page .category-layout,
  html body.category-page.slot-page .category-layout {
    display: grid !important;
    grid-template-columns: clamp(88px, 24vw, 116px) minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  html body.category-page .provider-list,
  html body.category-page.slot-page .provider-list,
  html body.category-page .games-area,
  html body.category-page.slot-page .games-area {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  html body.category-page .games-area,
  html body.category-page.slot-page .games-area {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  html body.category-page .game-grid,
  html body.category-page.slot-page .game-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final artwork ratio guard for category pages. Older fill overrides can stretch
   square/portrait transfer-wallet thumbnails, especially KM table games. */
body.category-page .game-grid .provider-card .provider-card-art,
body.category-page.slot-page .game-grid .provider-card .provider-card-art,
body.category-page.poker-page .game-grid .provider-card .provider-card-art,
body.category-page.fish-page .game-grid .provider-card .provider-card-art {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

body.category-page[data-category="sport"] .game-grid .provider-card .provider-card-art,
#homeView .game-section[data-section="sport"] .games-grid .provider-card .provider-card-art {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

body.category-page[data-category="live"] .game-grid .provider-card,
#homeView .game-section[data-section="live"] .games-grid .provider-card {
  overflow: hidden !important;
}

body.category-page[data-category="live"] .game-grid .provider-card .provider-card-art,
#homeView .game-section[data-section="live"] .games-grid .provider-card .provider-card-art {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background-color: transparent !important;
  background-image: none !important;
  transform: none !important;
}

/* Final provider-logo guard: keep custom SVG provider icons visible in category
   sidebars and rebate cards even when older provider rules load later. */
body.category-page .provider-button[data-provider="bng"],
body.category-page .provider-button[data-provider="bt"],
body.category-page .provider-button[data-provider="bi"],
body.category-page .provider-button[data-provider="ak"],
body.category-page .provider-button[data-provider="mg"],
body.category-page .provider-button[data-provider="m9"],
body.category-page .provider-button[data-provider="booming"],
body.category-page.slot-page .provider-button[data-provider="bng"],
body.category-page.slot-page .provider-button[data-provider="bt"],
body.category-page.slot-page .provider-button[data-provider="bi"],
body.category-page.slot-page .provider-button[data-provider="ak"],
body.category-page.slot-page .provider-button[data-provider="mg"],
body.category-page.slot-page .provider-button[data-provider="m9"],
body.category-page.slot-page .provider-button[data-provider="booming"] {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 5px !important;
  text-align: left !important;
  justify-items: stretch !important;
}

body.category-page .provider-button[data-provider="booming"],
body.category-page.slot-page .provider-button[data-provider="booming"] {
  grid-template-columns: 60px minmax(0, 1fr) !important;
}

body.category-page .provider-button[data-provider="bng"] .provider-button-image,
body.category-page .provider-button[data-provider="bt"] .provider-button-image,
body.category-page .provider-button[data-provider="bi"] .provider-button-image,
body.category-page .provider-button[data-provider="ak"] .provider-button-image,
body.category-page .provider-button[data-provider="mg"] .provider-button-image,
body.category-page .provider-button[data-provider="m9"] .provider-button-image,
body.category-page .provider-button[data-provider="booming"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="bng"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="bt"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="bi"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="ak"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="mg"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="m9"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="booming"] .provider-button-image {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 30px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.category-page .provider-button[data-provider="booming"] .provider-button-image,
body.category-page.slot-page .provider-button[data-provider="booming"] .provider-button-image {
  width: 58px !important;
  min-width: 58px !important;
}

body.category-page .provider-button[data-provider="bng"] .provider-button-image img,
body.category-page .provider-button[data-provider="bt"] .provider-button-image img,
body.category-page .provider-button[data-provider="bi"] .provider-button-image img,
body.category-page .provider-button[data-provider="ak"] .provider-button-image img,
body.category-page .provider-button[data-provider="mg"] .provider-button-image img,
body.category-page .provider-button[data-provider="m9"] .provider-button-image img,
body.category-page .provider-button[data-provider="booming"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="bng"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="bt"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="bi"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="ak"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="mg"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="m9"] .provider-button-image img,
body.category-page.slot-page .provider-button[data-provider="booming"] .provider-button-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 30px !important;
  object-fit: contain !important;
}

.rebate-vendor-logo.svg.big img,
.rebate-vendor-logo.svg.bng img,
.rebate-vendor-logo.svg.bt img,
.rebate-vendor-logo.svg.ak img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.ops-page .ops-muted {
  display: inline-block;
  margin-left: 12px;
  color: #6b7a90;
  font-size: 13px;
}

body.ops-page .ops-empty-text {
  margin: 10px 0 0;
  color: #8a98aa;
  font-size: 14px;
}

body.ops-page .ops-mini-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body.ops-page .ops-mini-row {
  display: grid;
  grid-template-columns: 1.3fr .7fr .8fr 1fr .7fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dce8f8;
  border-radius: 8px;
  background: #f8fbff;
  color: #23314d;
  font-size: 13px;
}

/* Performance 2.1: every actionable surface acknowledges the pointer in the
   same frame, while the real page or API work continues unchanged. */
button,
a,
[role="button"],
[data-game-id] {
  -webkit-tap-highlight-color: transparent;
}

[data-n9-feedback="1"] {
  transform: scale(.985);
  filter: brightness(.97);
  transition: transform 70ms ease, filter 70ms ease;
}

html.n9-runtime-busy::after {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 34%;
  height: 3px;
  content: "";
  pointer-events: none;
  background: #2f80ff;
  box-shadow: 0 1px 5px rgba(47, 128, 255, .35);
  animation: n9-runtime-progress 900ms ease-out both;
}

@keyframes n9-runtime-progress {
  from { transform: translateX(-110%); opacity: .8; }
  to { transform: translateX(295%); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  [data-n9-feedback="1"] { transition: none; }
  html.n9-runtime-busy::after { animation: none; width: 100%; opacity: .35; }
}

/* Keep the synchronous shell/catalog visible while authority is revalidated in the background. */
html.hot-catalog-pending #homeView .game-section[data-section="hot"] .games-grid {
  min-height: 84px;
}

html.hot-catalog-pending #homeView .game-section[data-section="hot"]::after {
  display: none;
  content: "";
}

/* Task 7: compact secondary record header, aligned with Security Center. */
body.records-page .records-topbar {
  grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr) !important;
  gap: 8px !important;
  min-height: 58px !important;
  padding: 6px 12px !important;
}

body.records-page .records-heading {
  grid-column: 2 !important;
  justify-self: center !important;
}

body.records-page .records-topbar h1 {
  overflow: hidden !important;
  max-width: 180px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.records-page .records-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
}

body.records-page .records-back svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 2.2 !important;
}

body.records-page .records-filter-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.records-page .records-tabs {
  top: 58px !important;
}

/* Agent offer totals: compact two-row presentation; commission ownership stays server-side. */
body.agent-page .agent-home-income-grid,
body.agent-page .agent-commission-top-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.agent-page .agent-home-income-grid article,
body.agent-page .agent-commission-top-summary article,
body.agent-page .agent-commission-month-grid article,
body.agent-page .agent-commission-paid-meta article {
  display: grid !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 7px 5px !important;
  text-align: center !important;
}

body.agent-page .agent-home-income-grid span,
body.agent-page .agent-commission-top-summary span,
body.agent-page .agent-commission-month-grid span,
body.agent-page .agent-commission-paid-meta span {
  overflow: hidden !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.agent-page .agent-home-income-grid strong,
body.agent-page .agent-commission-top-summary strong,
body.agent-page .agent-commission-month-grid strong,
body.agent-page .agent-commission-paid-meta strong {
  overflow: hidden !important;
  margin-top: 3px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.agent-page .agent-record-card > .agent-commission-month-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.agent-page .agent-commission-month-grid article:nth-child(5) {
  grid-column: 1 / 2;
}

body.agent-page .agent-commission-daily-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.agent-page .agent-commission-daily-grid article,
body.agent-page .agent-commission-daily-grid article:nth-child(n + 4) {
  grid-column: auto !important;
}

body.agent-page .agent-record-card > .agent-commission-paid-meta {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.agent-page .agent-offer-scope-note {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.agent-growth-definition {
  display: grid;
  gap: 3px;
}

.agent-growth-definition strong,
.agent-growth-definition span {
  display: block;
}

.agent-growth-definition span {
  color: #7b5b48;
  font-size: 9px;
  font-weight: 700;
}

body.agent-page .agent-offer-warning strong,
.agent-growth-stats .agent-growth-offer-warning strong {
  color: #d99a00 !important;
}

body.agent-page .agent-opening-negative-danger strong {
  color: #e11d48 !important;
}

body.agent-page .agent-opening-negative-zero strong {
  color: #64748b !important;
}

body.ops-page .ops-agent-detail-metrics .warning strong {
  color: #d99a00;
}

@media (max-width: 350px) {
  body.agent-page .agent-home-income-grid,
  body.agent-page .agent-commission-top-summary,
  body.agent-page .agent-commission-month-grid {
    gap: 5px !important;
  }

  body.agent-page .agent-home-income-grid strong,
  body.agent-page .agent-commission-top-summary strong,
  body.agent-page .agent-commission-month-grid strong {
    font-size: 11px !important;
  }
}