:root {
  --ui-bg: #f6f4ee;
  --ui-surface: #fffdfa;
  --ui-surface-2: #fbf4e8;
  --ui-ink: #2f2520;
  --ui-muted: #7f6d62;
  --ui-line: #eadcca;
  --ui-red: #b8322a;
  --ui-red-dark: #6f201c;
  --ui-red-soft: #fff0eb;
  --ui-gold: #d9a23e;
  --ui-green: #186b5b;
  --ui-shadow: 0 18px 44px rgba(78, 45, 27, .12);
  --ui-shadow-soft: 0 10px 26px rgba(78, 45, 27, .08);
  --station-red: var(--ui-red);
  --station-red-dark: var(--ui-red-dark);
  --station-red-deep: #421412;
  --station-gold: var(--ui-gold);
  --station-bg: var(--ui-bg);
  --station-panel: var(--ui-surface);
  --station-line: var(--ui-line);
  --station-text: var(--ui-ink);
  --station-muted: var(--ui-muted);
  --station-shadow: var(--ui-shadow-soft);
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

a {
  color: inherit;
}

.mobile-app,
.app,
.page {
  background: var(--ui-bg) !important;
}

.topbar,
.desktop-top {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 52%),
    linear-gradient(135deg, #521713 0, #842620 54%, #a9342d 100%) !important;
  color: #fffaf0 !important;
  box-shadow: 0 14px 34px rgba(73, 24, 18, .16) !important;
}

.desktop-brand strong,
.desktop-brand span,
.desktop-user strong,
.desktop-user span,
.topbar a,
.back {
  color: #fffaf0 !important;
}

.logo-mark,
.desktop-logo,
.desktop-avatar,
.avatar,
.logo {
  background:
    radial-gradient(circle at 30% 32%, #fff6c8 0, #e2ad45 31%, transparent 32%),
    linear-gradient(135deg, #bf4236 0, #7c211d 72%) !important;
}

.hero,
.desktop-hero {
  background:
    linear-gradient(135deg, rgba(255, 236, 189, .12), transparent 36%),
    linear-gradient(135deg, #70211d 0, #a9342d 56%, #bf7138 100%) !important;
  border: 1px solid rgba(255, 238, 198, .22) !important;
  box-shadow: 0 20px 44px rgba(92, 37, 23, .16) !important;
  color: #fffaf0 !important;
}

.desktop-hero::before {
  background:
    radial-gradient(circle at right center, rgba(217, 162, 62, .26), transparent 32%),
    radial-gradient(circle at left top, rgba(255, 255, 255, .13), transparent 28%) !important;
}

.desktop-hero h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  color: #fff7df !important;
  text-shadow: 0 10px 28px rgba(64, 20, 14, .22);
}

.desktop-hero .sub,
.hero-note,
.hero small,
.draw-head {
  color: rgba(255, 248, 226, .92) !important;
}

.hero-pill,
.hero-pill-alt,
.banner-badge,
.float-mini {
  background: rgba(255, 248, 226, .16) !important;
  color: #fff5cf !important;
}

.panel,
.card,
.block,
.desktop-side-panel,
.recommend-card,
.board-card,
.bottom-bar,
.auth-shell,
.form-panel,
.popup-card,
.stat,
.item,
.amount-card,
.quick-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.panel,
.card,
.block,
.desktop-side-panel,
.board-card,
.bottom-bar {
  border-radius: 16px !important;
}

.float-card,
.side-nav,
.issue-rail {
  background:
    linear-gradient(180deg, rgba(255, 248, 226, .06), transparent 48%),
    linear-gradient(180deg, #6a201c 0, #451513 100%) !important;
  color: #fff8e6 !important;
  border: 1px solid rgba(255, 238, 198, .14) !important;
  box-shadow: 0 18px 34px rgba(61, 22, 17, .15) !important;
}

.desktop-panel-head,
.subtabs,
.filters,
#content,
.roadmap-sheet,
.roadmap-desc {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
}

.switch-btn,
.side-btn,
.subtab,
.filter-btn,
.roadmap-tab,
.unit-tab,
.multi-quick-btn,
.preset,
.tool-btn,
.road-close button,
select,
input {
  background: linear-gradient(180deg, #fffdfa, #f9eedc) !important;
  border: 1px solid var(--ui-line) !important;
  color: #684437 !important;
  box-shadow: none !important;
}

.switch-btn.active,
.side-btn.active,
.subtab.active,
.filter-btn.active,
.roadmap-tab.active,
.unit-tab.active,
.multi-quick-btn.active,
.preset.active,
.issue-link.active,
.block-head strong,
.download-btn,
.popup-close,
.bet-submit,
button.submit,
button[type="submit"],
.switcher a.active,
.announce-tag {
  background: linear-gradient(135deg, #c64a3d 0, var(--ui-red) 64%, #7a221d 100%) !important;
  color: #fffaf0 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 20px rgba(174, 50, 42, .18) !important;
}

.side-btn.active,
.issue-link.active {
  border-radius: 10px !important;
}

.ticker,
.tips,
.summary,
.service-card,
.pay-panel,
.menu a,
.pick,
.amount-card,
.roadmap-viewport {
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-muted) !important;
}

.row strong,
.stat strong,
.amount-card strong,
.summary strong,
.ticker strong,
.card h3,
.board-card h3,
.roadmap-title,
.block-head span,
.quick-card,
.tab.active,
.menu a,
.multiple-btn {
  color: var(--ui-red) !important;
}

.badge.pending {
  background: #fff5da !important;
  color: #8b5d06 !important;
}

.badge.won {
  background: #e9f7f1 !important;
  color: var(--ui-green) !important;
}

.badge.lost {
  background: #fff0eb !important;
  color: var(--ui-red) !important;
}

.badge.cancelled {
  background: #f0eee9 !important;
  color: var(--ui-muted) !important;
}

.dice,
.ball,
.road-ball {
  background: linear-gradient(180deg, #fff9e8, #f4d990) !important;
  color: var(--ui-red) !important;
  border: 1px solid rgba(184, 132, 42, .20) !important;
  box-shadow: inset 0 -2px 0 rgba(184, 132, 42, .20), 0 7px 15px rgba(77, 37, 21, .12) !important;
}

.countdown-box,
.mobile-countdown-box {
  background: rgba(67, 21, 18, .34) !important;
  border-radius: 14px !important;
}

.countdown-box i,
.mobile-countdown-box i {
  background: linear-gradient(180deg, #fff9e8, #f3d994) !important;
  color: var(--ui-red-dark) !important;
  box-shadow: inset 0 -2px 0 rgba(184, 132, 42, .20), 0 4px 10px rgba(64, 20, 14, .18) !important;
}

.countdown-progress span,
.rebate-slider {
  accent-color: var(--ui-red) !important;
}

.tabbar,
.download-bar {
  background: rgba(255, 253, 250, .98) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-muted) !important;
  box-shadow: 0 -12px 24px rgba(84, 45, 24, .10) !important;
}

.download-bar {
  background: rgba(47, 37, 32, .92) !important;
  color: #fffaf0 !important;
}

.banner-card,
.banner-image {
  background: var(--ui-surface) !important;
  color: var(--ui-red) !important;
}

.desktop-slide-media,
.desktop-slide-media img,
.banner-card,
.banner-image {
  border-radius: 16px !important;
}

.option-grid {
  gap: 10px !important;
}

.bet-item,
.option-card,
.item {
  border-radius: 12px !important;
}

.bet-item {
  background: linear-gradient(180deg, #fffdfa, #fbf3e6) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-ink) !important;
}

.bet-item.active,
.option-card.active {
  background: var(--ui-red-soft) !important;
  border-color: rgba(184, 50, 42, .42) !important;
  box-shadow: inset 0 0 0 1px rgba(184, 50, 42, .18) !important;
}

.bet-item strong,
.option-card strong {
  color: var(--ui-red-dark) !important;
}

.toast {
  background: rgba(47, 37, 32, .94) !important;
  color: #fffaf0 !important;
}

@media (max-width: 1099px) {
  .page,
  .app,
  .mobile-app {
    max-width: 430px !important;
  }

  .topbar {
    min-height: 52px !important;
    border-radius: 0 0 12px 12px !important;
  }

  .game-page .hero {
    border-radius: 0 !important;
  }

  .block,
  .card,
  .panel {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .switch-btn,
  .subtab,
  .filter-btn,
  .roadmap-tab,
  .unit-tab,
  .multi-quick-btn,
  .tool-btn,
  .bet-submit {
    border-radius: 10px !important;
  }

  .side-nav {
    border-radius: 0 14px 14px 0 !important;
  }
}

@media (min-width: 1100px) {
  html,
  body {
    background:
      linear-gradient(180deg, #541713 0, #8b2923 280px, var(--ui-bg) 280px, var(--ui-bg) 100%) !important;
  }

  .desktop-stage,
  .desktop-main {
    margin-top: 14px !important;
  }

  .desktop-nav a {
    color: #fff8e6 !important;
  }

  .desktop-nav a.active {
    background: rgba(255, 248, 226, .15) !important;
    box-shadow: inset 0 -2px 0 rgba(217, 162, 62, .78) !important;
  }

  .hero,
  .desktop-hero {
    border-radius: 18px !important;
  }

  .side-nav,
  .float-card,
  .issue-rail {
    border-radius: 18px !important;
  }

  .game-page .layout {
    align-items: start !important;
  }
}

.recommend-icon,
.service-icon,
.zodiac-icon {
  background: linear-gradient(180deg, #e8f4ef, #cfe6dc) !important;
  color: var(--ui-green) !important;
}

.service-card strong,
.recommend-card strong {
  color: var(--ui-green) !important;
}

.odds,
.bet-item span,
.option-card span,
.card-tip,
.meta,
.item span,
.amount-card span {
  color: var(--ui-muted) !important;
}