/* =========================================================
   Site-wide material pass — NewAPI-like glass / depth
   Layout untouched. Load last on every prototype page.
   ========================================================= */

:root {
  --glass-bg: #0c0e13;
  --glass-bg-elev: #12151c;
  --glass-surface: rgba(255, 255, 255, 0.035);
  --glass-surface-2: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.075);
  --glass-border-top: rgba(255, 255, 255, 0.14);
  --glass-border-bottom: rgba(255, 255, 255, 0.04);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 24px 64px -28px rgba(0, 0, 0, 0.72);
  --glass-shadow-soft: 0 12px 36px -18px rgba(0, 0, 0, 0.55);
  --glass-r: 18px;
  --glass-r-lg: 22px;
  --glass-r-sm: 12px;
  /* 彩色顶条基准：free-games .dt-list-shell */
  --accent-stripe: linear-gradient(
    90deg,
    #3d8bfd,
    #22c55e,
    #ffc14a,
    #ff3b4a,
    #3d8bfd
  );
  /* 仅顶部 3px 高，宽度 250% 用于流动；第二层铺满面板面 */
  --accent-stripe-size: 250% 3px;
  --accent-stripe-h: 3px;
  --accent-face-size: 100% 100%;
  --accent-stripe-anim: glass-accent-stripe 4s linear infinite;
}

/* —— Canvas —— */
html:not([data-theme="light"]) body,
body,
body.dt-body {
  --bg: #0c0e13 !important;
  --bg-soft: #10131a !important;
  --panel: rgba(255, 255, 255, 0.035) !important;
  --panel-2: rgba(255, 255, 255, 0.05) !important;
  --line: rgba(255, 255, 255, 0.075) !important;
  --line-strong: rgba(255, 255, 255, 0.12) !important;
  --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.55) !important;
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.65) !important;
  --shadow-lg: 0 28px 70px -28px rgba(0, 0, 0, 0.75) !important;
  --r: 16px;
  background:
    radial-gradient(920px 520px at 18% -8%, rgba(99, 140, 255, 0.14), transparent 58%),
    radial-gradient(760px 480px at 88% 4%, rgba(168, 85, 247, 0.08), transparent 52%),
    radial-gradient(700px 420px at 50% 108%, rgba(56, 189, 248, 0.05), transparent 55%),
    linear-gradient(180deg, #0e1118 0%, #0c0e13 42%, #0a0c10 100%) !important;
  color-scheme: dark;
}

body::before,
body.dt-body::before {
  background:
    radial-gradient(1000px 560px at 12% -12%, rgba(99, 140, 255, 0.16), transparent 58%),
    radial-gradient(820px 480px at 92% 0%, rgba(139, 92, 246, 0.09), transparent 52%),
    radial-gradient(640px 380px at 48% 100%, rgba(34, 197, 94, 0.04), transparent 55%),
    transparent !important;
}

body::after {
  opacity: 0.045 !important;
  mix-blend-mode: soft-light !important;
}

body,
body.dt-body {
  position: relative;
}

html:not([data-theme="light"]) body::before,
html:not([data-theme="light"]) body.dt-body::before {
  background:
    radial-gradient(1000px 560px at 12% -12%, rgba(99, 140, 255, 0.16), transparent 58%),
    radial-gradient(820px 480px at 92% 0%, rgba(139, 92, 246, 0.09), transparent 52%),
    radial-gradient(640px 380px at 48% 100%, rgba(34, 197, 94, 0.04), transparent 55%),
    linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px) !important;
  background-size:
    auto,
    auto,
    auto,
    4rem 4rem,
    4rem 4rem !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 15%, transparent 78%);
}

/* —— Shared glass surface helper tokens —— */
.glass-surface {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-top-color: rgba(255, 255, 255, 0.13);
  border-bottom-color: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* —— Topbar (home + terminal) —— */
.topbar,
.dt-topbar {
  background: rgba(12, 14, 19, 0.62) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 40px -20px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

.top-search,
.dt-topbar .top-search {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.top-search:focus-within,
.dt-topbar .top-search:focus-within {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(125, 168, 255, 0.35) !important;
  box-shadow:
    0 0 0 3px rgba(61, 139, 253, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

.theme-btn,
.region-btn,
.dt-topbar .theme-btn,
.dt-topbar .region-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-btn:hover,
.region-btn:hover,
.dt-topbar .theme-btn:hover,
.dt-topbar .region-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.region-menu,
.user-menu {
  background: rgba(18, 22, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 60px -20px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-radius: 14px !important;
}

.nav-links a,
.dt-nav a {
  border-radius: 8px !important;
}

.nav-links a:hover,
.nav-links a.is-active,
.dt-nav a:hover,
.dt-nav a.is-active {
  border-radius: 8px !important;
  background: rgba(61, 139, 253, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(61, 139, 253, 0.12) inset !important;
}

/* —— Home hero chips —— */
.hero-stat,
.stat,
.dt-hero-stat {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.025) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--glass-r-sm) !important;
}

.hero-intro .eyebrow,
.dt-page-hero .kicker {
  background: rgba(61, 139, 253, 0.08) !important;
  border: 1px solid rgba(61, 139, 253, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding-left: 10px;
  padding-right: 12px;
}

/* —— Home carousel / media —— */
.carousel {
  border-radius: var(--glass-r-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 28px 70px -30px rgba(0, 0, 0, 0.75) !important;
  background: linear-gradient(180deg, #12161f 0%, #0b0e14 100%) !important;
}

.slide-price-card,
.hero-price-card {
  background: linear-gradient(
    165deg,
    rgba(18, 22, 32, 0.72) 0%,
    rgba(10, 12, 18, 0.62) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px -18px rgba(0, 0, 0, 0.55) !important;
  border-radius: 18px !important;
}

.carousel-arrow {
  background: rgba(12, 14, 19, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.carousel-arrow:hover {
  background: rgba(61, 139, 253, 0.75) !important;
  border-color: transparent !important;
}

.hero-hot-item {
  border-radius: var(--glass-r) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 40px -22px rgba(0, 0, 0, 0.65) !important;
  overflow: hidden;
}

/* —— Home sections / path cards —— */
.section-block,
.list-panel,
.panel {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-top-color: rgba(255, 255, 255, 0.13) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: var(--glass-r-lg) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    var(--glass-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  overflow: hidden;
}

/* —— 全站彩色顶条：以 free-games .dt-list-shell 为基准 ——
   用「背景层」画条，随 border-radius 自然裁切；
   避免 ::after + overflow:visible 时左右探出圆角。 */
@keyframes glass-accent-stripe {
  to {
    background-position: 200% 0, 0 0;
  }
}

.section-block,
.list-panel,
.panel,
.dt-panel,
.dt-section-block,
.dt-list-shell,
.dt-list-shell.is-demo,
.dt-page-hero,
.dt-page-hero.is-demo,
.dt-panel.is-matrix-panel,
/* 详情页卡片（生产类名，对齐原型 dt-panel 顶条） */
.dt-detail-hero,
.game-deal-panel,
.game-deal-side-card,
.game-deal-side-card.is-side-buy,
.dt-decision-buy,
.dt-detail-tabs-panel {
  position: relative !important;
  /* 第1层：仅顶 3px 彩虹条；第2层：面板面。随 border-radius 自然圆角裁切 */
  background-image: var(--accent-stripe), var(--panel-face) !important;
  background-size: var(--accent-stripe-size), var(--accent-face-size) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  animation: var(--accent-stripe-anim) !important;
  overflow: hidden !important;
}

/* 面板面：与原先 glass 面一致，作为第二背景层 */
.section-block,
.list-panel,
.panel {
  --panel-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  overflow: hidden !important;
}

.dt-panel,
.dt-section-block,
.dt-list-shell,
.dt-list-shell.is-demo,
.dt-detail-hero,
.game-deal-panel,
.game-deal-side-card,
.game-deal-side-card.is-side-buy,
.dt-decision-buy,
.dt-detail-tabs-panel {
  --panel-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

.dt-page-hero,
.dt-page-hero.is-demo {
  --panel-face: linear-gradient(145deg, #1a2233, #121826);
}

/*
 * 页头 is-rich：terminal.css 用 background 简写写了多层径向光，
 * 会盖掉上面的 background-image 顶条。这里强制「顶条 + 原氛围面」。
 */
.dt-page-hero.is-rich {
  --panel-face:
    radial-gradient(520px 200px at 100% -20%, rgba(52, 211, 153, 0.16), transparent 55%),
    radial-gradient(360px 160px at 0% 120%, rgba(59, 130, 246, 0.08), transparent 50%),
    linear-gradient(135deg, #151b28 0%, #121722 48%, #10161f 100%);
  background-image:
    var(--accent-stripe),
    radial-gradient(520px 200px at 100% -20%, rgba(52, 211, 153, 0.16), transparent 55%),
    radial-gradient(360px 160px at 0% 120%, rgba(59, 130, 246, 0.08), transparent 50%),
    linear-gradient(135deg, #151b28 0%, #121722 48%, #10161f 100%) !important;
  background-size: var(--accent-stripe-size), auto, auto, auto !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  animation: glass-accent-stripe-rich 4s linear infinite !important;
}

.dt-page-hero.is-rich.is-demo {
  background-image:
    var(--accent-stripe),
    radial-gradient(520px 200px at 100% -20%, rgba(251, 191, 36, 0.18), transparent 55%),
    radial-gradient(360px 160px at 0% 120%, rgba(245, 158, 11, 0.08), transparent 50%),
    linear-gradient(135deg, #1a1710 0%, #151b28 45%, #121722 100%) !important;
  background-size: var(--accent-stripe-size), auto, auto, auto !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  animation: glass-accent-stripe-rich 4s linear infinite !important;
}

@keyframes glass-accent-stripe-rich {
  to {
    background-position: 200% 0, 0 0, 0 0, 0 0;
  }
}

/* 关掉旧 ::after 顶条，防止双线 / 探出（页头网格纹理除外） */
.section-block::after,
.list-panel::after,
.panel::after,
.dt-panel::after,
.dt-section-block::after,
.dt-list-shell::after,
.dt-list-shell.is-demo::after,
.dt-page-hero::after,
.dt-panel.is-matrix-panel::after,
.dt-detail-hero::after,
.game-deal-panel::after,
.game-deal-side-card::after,
.dt-decision-buy::after,
.dt-detail-tabs-panel::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* is-rich 的 ::after 是网格纹理，保留；顶条已在 background-image 第一层 */
.dt-page-hero.is-rich::after,
.dt-page-hero.is-rich.is-demo::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.35 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: repeat, repeat !important;
  animation: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 70%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 70%, transparent) !important;
}

.path-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: var(--glass-r) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.path-card:hover {
  border-color: rgba(125, 168, 255, 0.28) !important;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(61, 139, 253, 0.05) 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 48px -20px rgba(0, 0, 0, 0.6) !important;
}

/* —— Home tables / cards —— */
.deal-mini-table thead th {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.deal-mini-table tbody tr:hover td {
  background: rgba(61, 139, 253, 0.06) !important;
}

.deal-mini-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.045) !important;
}

.product-card,
.section-block .deal-card,
.deal-grid .deal-card,
.card-grid .deal-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--glass-r) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 40px -22px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.product-card:hover,
.section-block .deal-card:hover,
.deal-grid .deal-card:hover,
.card-grid .deal-card:hover {
  border-color: rgba(125, 168, 255, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 28px 56px -24px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(61, 139, 253, 0.12) !important;
  transform: translateY(-4px) !important;
}

.dt-game-art-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--glass-r) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    var(--glass-shadow-soft) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dt-game-art-card:hover {
  border-color: rgba(125, 168, 255, 0.25) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 50px -22px rgba(0, 0, 0, 0.65) !important;
}

/* =========================================================
   Terminal pages — dt-* components
   ========================================================= */

/* Page hero */
.dt-page-hero {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: var(--glass-r-lg) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    var(--glass-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* page-hero face for light theme below; stripe is background-layer */

.dt-page-hero .hero-ico {
  background: rgba(61, 139, 253, 0.12) !important;
  border: 1px solid rgba(125, 168, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Toolbar / filters */
.dt-toolbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: var(--glass-r) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    var(--glass-shadow-soft) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
}

.dt-field select,
.dt-field input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dt-field select:focus,
.dt-field input:focus {
  border-color: rgba(125, 168, 255, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.12) !important;
}

/* Panels — 面层变量供顶条双背景使用；圆角统一 16px（与 free-games 列表壳一致） */
.dt-panel,
.dt-section-block,
.dt-list-shell,
.dt-list-shell.is-demo,
.dt-panel.is-matrix-panel {
  --panel-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-top-color: rgba(255, 255, 255, 0.13) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    var(--glass-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* 矩阵：允许 ··· 浮层溢出；顶条已是 background，不再依赖 overflow 裁切 */
.dt-panel.is-matrix-panel {
  overflow: visible !important;
  isolation: isolate;
}

/* Matrix table */
.dt-table th {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.dt-table td {
  border-bottom-color: rgba(255, 255, 255, 0.045) !important;
}

.dt-table tbody tr:hover td {
  background: rgba(61, 139, 253, 0.055) !important;
}

/* Matrix dark skins — only when NOT light (shell hardcodes #141a26 on all cells) */
html:not([data-theme="light"]) .dt-table.is-matrix th,
html:not([data-theme="light"]) .dt-table.is-matrix td {
  background: #141a26 !important;
}

html:not([data-theme="light"]) .dt-table.is-matrix thead th {
  background: rgba(12, 14, 19, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html:not([data-theme="light"]) .dt-table.is-matrix .sticky-rank,
html:not([data-theme="light"]) .dt-table.is-matrix .sticky-game,
html:not([data-theme="light"]) .dt-table.is-matrix .sticky-advice {
  background: #141a26 !important;
}

html:not([data-theme="light"]) .dt-table.is-matrix tbody tr:hover td,
html:not([data-theme="light"]) .dt-table.is-matrix tbody tr:hover .sticky-rank,
html:not([data-theme="light"]) .dt-table.is-matrix tbody tr:hover .sticky-game,
html:not([data-theme="light"]) .dt-table.is-matrix tbody tr:hover .sticky-advice {
  background: #182235 !important;
}

.dt-more-panel {
  background: rgba(18, 22, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 20px 50px -18px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  border-radius: 14px !important;
}

.dt-more-trigger {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* Pager */
.dt-pager {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dt-page-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  border-radius: 10px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dt-page-btn:hover,
.dt-page-btn.is-active {
  background: rgba(61, 139, 253, 0.14) !important;
  border-color: rgba(125, 168, 255, 0.28) !important;
  color: #cfe0ff !important;
}

/* Product grid on free/demo pages */
.dt-product-grid .product-card,
.dt-product-card,
.dt-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--glass-r) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    var(--glass-shadow-soft) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Detail page */
.dt-cover {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 16px 40px -18px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
}

.dt-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dt-chip.is-active {
  background: linear-gradient(
    180deg,
    rgba(61, 139, 253, 0.28) 0%,
    rgba(61, 139, 253, 0.12) 100%
  ) !important;
  border-color: rgba(125, 168, 255, 0.35) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(61, 139, 253, 0.1) !important;
}

.dt-country-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.dt-country-tab {
  background: transparent !important;
}

.dt-country-tab.is-active {
  background: rgba(61, 139, 253, 0.1) !important;
}

.dt-country-tab .price {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dt-decision {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
}

/* 建议卡：档位色只打在上卡本体 */
.dt-decision-advice.is-good {
  background: linear-gradient(
    165deg,
    rgba(16, 185, 129, 0.16) 0%,
    rgba(16, 185, 129, 0.05) 55%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.dt-decision-advice.is-ok {
  background: linear-gradient(
    165deg,
    rgba(34, 197, 94, 0.12) 0%,
    rgba(34, 197, 94, 0.04) 55%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
}

.dt-decision-chip {
  border-radius: 8px !important;
}

.dt-decision-remind {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.dt-decision-price-num {
  color: #3dd68c !important;
}

.dt-detail-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.dt-detail-tab.is-active {
  color: #60a5fa !important;
}

html[data-theme="light"] .dt-detail-tabs {
  background: rgba(15, 23, 42, 0.02) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-detail-tab {
  color: #64748b !important;
}

html[data-theme="light"] .dt-detail-tab:hover {
  color: #334155 !important;
}

html[data-theme="light"] .dt-detail-tab.is-active {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-detail-tab.is-active::after {
  background: #2563eb !important;
  box-shadow: none !important;
}

html[data-theme="light"] .dt-detail-tab-panel-head .sub {
  color: #94a3b8 !important;
}

html[data-theme="light"] .dt-steam-dlc-item,
html[data-theme="light"] .dt-steam-review-item {
  background: rgba(15, 23, 42, 0.025) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-steam-about-heading {
  color: #0f172a !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* 回到顶部：日夜都用主色蓝；显隐仍由 .is-visible 控制 */
.dt-back-top {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .dt-back-top,
html[data-theme="light"] #backToTop.dt-back-top {
  background: linear-gradient(160deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 12px 28px -10px rgba(37, 99, 235, 0.55),
    0 0 0 1px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme="light"] #backToTop.dt-back-top:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-theme="light"] #backToTop.dt-back-top.is-visible {
  opacity: 0.95 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-theme="light"] .dt-media-stage {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: #0f172a !important;
}

html[data-theme="light"] .dt-media-thumb {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .dt-media-thumb.is-active {
  border-color: #2563eb !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.45),
    0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

html[data-theme="light"] .dt-media-thumbs-nav {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: rgba(15, 23, 42, 0.03) !important;
  color: #64748b !important;
}

html[data-theme="light"] .dt-steam-meta-row b,
html[data-theme="light"] .dt-steam-dlc-body .t,
html[data-theme="light"] .dt-steam-review-head .author {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-steam-about-text,
html[data-theme="light"] .dt-steam-review-body {
  color: #475569 !important;
}

html[data-theme="light"] .dt-steam-tag {
  color: #1d4ed8 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="light"] .dt-steam-review-score {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="light"] .dt-steam-review-score .label,
html[data-theme="light"] .dt-steam-review-score .pct,
html[data-theme="light"] .dt-steam-dlc-price {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-steam-dlc-included {
  color: #047857 !important;
}

.dt-hero-advice {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dt-hero-advice.is-newlow {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.12) 0%,
    rgba(16, 185, 129, 0.08) 45%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
}

.dt-price-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dt-price-card.is-highlight {
  border-color: rgba(61, 139, 253, 0.45) !important;
  background: linear-gradient(
    160deg,
    rgba(61, 139, 253, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
}

.dt-note {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
}

.dt-cross-hint {
  background: rgba(255, 193, 74, 0.06) !important;
  border: 1px solid rgba(255, 193, 74, 0.18) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dt-art-related-item,
.dt-art-row {
  border-radius: 12px !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dt-art-related-item:hover,
.dt-art-row:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.dt-btn,
.dt-btn-primary,
.dt-btn-ghost,
.dt-btn-buy {
  border-radius: 11px !important;
}

.dt-btn-primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 24px rgba(37, 99, 235, 0.28) !important;
}

.dt-btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dt-btn-buy {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 24px rgba(22, 163, 74, 0.28) !important;
}

.dt-badge,
.dt-tag-low,
.dt-pill {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* Article detail content */
.art-page .dt-panel,
.art-content,
.dt-article-body {
  /* covered by .dt-panel above */
}

/* Footer */
footer,
.dt-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #6b7388 !important;
}

/* Pills / chips shared */
.product-pill,
.dt-pill,
.rec,
.rating-chip {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Buttons shared */
.btn-primary,
.top-search button,
.dt-topbar .top-search button[type="submit"] {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 24px rgba(37, 99, 235, 0.32) !important;
}

.btn-buy,
.dt-btn-buy {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 24px rgba(22, 163, 74, 0.28) !important;
}

a.sec-more-link {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 11px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

/* Toast */
.toast {
  background: rgba(18, 22, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow-soft) !important;
  border-radius: 12px !important;
}

/* =========================================================
   Light theme — NewAPI-like clean day mode
   Fix: dark-skin hardcodes (#fff / #c5cede) were unreadable on white.
   ========================================================= */
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] body,
html[data-theme="light"] body.dt-body {
  /* NewAPI day: soft sky-blue wash, not flat gray-white */
  --bg: #eef4ff !important;
  --bg-soft: #e4edff !important;
  --panel: #ffffff !important;
  --panel-2: #f7faff !important;
  --text: #475569 !important;
  --strong: #0f172a !important;
  --muted: #64748b !important;
  --soft: #94a3b8 !important;
  --line: rgba(15, 23, 42, 0.08) !important;
  --line-strong: rgba(15, 23, 42, 0.12) !important;
  --blue: #2563eb !important;
  --blue-2: #3b82f6 !important;
  --blue-ink: #1d4ed8 !important;
  --blue-soft: rgba(37, 99, 235, 0.1) !important;
  --green: #16a34a !important;
  --green-soft: rgba(22, 163, 74, 0.1) !important;
  --amber: #d97706 !important;
  --amber-soft: rgba(217, 119, 6, 0.1) !important;
  --pink: #db2777 !important;
  --pink-soft: rgba(219, 39, 119, 0.08) !important;
  --shadow-sm: 0 4px 14px -8px rgba(37, 99, 235, 0.08) !important;
  --shadow: 0 18px 44px -24px rgba(37, 99, 235, 0.12) !important;
  --shadow-lg: 0 28px 60px -28px rgba(37, 99, 235, 0.14) !important;
  color: #475569 !important;
  background:
    radial-gradient(1100px 640px at 18% -8%, rgba(96, 165, 250, 0.34), transparent 58%),
    radial-gradient(900px 520px at 88% 0%, rgba(167, 139, 250, 0.12), transparent 52%),
    radial-gradient(800px 480px at 50% 110%, rgba(125, 211, 252, 0.16), transparent 55%),
    linear-gradient(180deg, #eef5ff 0%, #f3f7ff 38%, #f6f8fc 100%) !important;
}

html[data-theme="light"] body::before,
html[data-theme="light"] body.dt-body::before {
  /* Soft blue bloom + faint cool grid */
  background:
    radial-gradient(980px 560px at 22% 8%, rgba(59, 130, 246, 0.18), transparent 62%),
    radial-gradient(720px 420px at 78% 12%, rgba(147, 197, 253, 0.16), transparent 58%),
    radial-gradient(640px 380px at 50% 100%, rgba(186, 230, 253, 0.14), transparent 55%),
    linear-gradient(to right, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.035) 1px, transparent 1px) !important;
  background-size:
    auto,
    auto,
    auto,
    4.5rem 4.5rem,
    4.5rem 4.5rem !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 18%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 18%, transparent 82%);
  opacity: 1 !important;
}

html[data-theme="light"] body::after {
  opacity: 0.03 !important;
  mix-blend-mode: soft-light !important;
}

/* Topbar */
html[data-theme="light"] .topbar,
html[data-theme="light"] .dt-topbar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 30px -18px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand span,
html[data-theme="light"] .dt-brand,
html[data-theme="light"] .dt-brand span {
  color: #0f172a !important;
}

html[data-theme="light"] .nav-links a,
html[data-theme="light"] .dt-nav a {
  color: #64748b !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.is-active,
html[data-theme="light"] .dt-nav a:hover,
html[data-theme="light"] .dt-nav a.is-active {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html[data-theme="light"] .top-search,
html[data-theme="light"] .dt-topbar .top-search {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

html[data-theme="light"] .top-search:focus-within,
html[data-theme="light"] .dt-topbar .top-search:focus-within {
  background: #fff !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

html[data-theme="light"] .top-search input,
html[data-theme="light"] .dt-topbar .top-search input {
  color: #0f172a !important;
}

html[data-theme="light"] .top-search input::placeholder,
html[data-theme="light"] .dt-topbar .top-search input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] .top-search svg,
html[data-theme="light"] .dt-topbar .top-search svg {
  color: #94a3b8 !important;
}

html[data-theme="light"] .theme-btn,
html[data-theme="light"] .region-btn,
html[data-theme="light"] .dt-topbar .theme-btn,
html[data-theme="light"] .dt-topbar .region-btn {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #475569 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .theme-btn:hover,
html[data-theme="light"] .region-btn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .region-menu,
html[data-theme="light"] .user-menu,
html[data-theme="light"] .dt-more-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.2) !important;
  color: #334155 !important;
}

html[data-theme="light"] .region-menu .rm-title,
html[data-theme="light"] .region-note {
  color: #64748b !important;
}

html[data-theme="light"] .region-menu button {
  color: #334155 !important;
}

html[data-theme="light"] .region-menu button:hover,
html[data-theme="light"] .region-menu button.is-active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
}

/* Hero title — solid dark + blue accent (readable) */
html[data-theme="light"] .hero-intro h1,
html[data-theme="light"] .hero-copy h1,
html[data-theme="light"] .page-title-row h1,
html[data-theme="light"] .dt-page-hero h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hero-intro h1 b,
html[data-theme="light"] .hero-copy h1 b,
html[data-theme="light"] .dt-page-hero h1 em {
  background: linear-gradient(115deg, #2563eb 10%, #7c3aed 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

html[data-theme="light"] .hero-intro p,
html[data-theme="light"] .dt-page-hero p,
html[data-theme="light"] .dt-page-desc {
  color: #64748b !important;
}

html[data-theme="light"] .hero-intro .eyebrow,
html[data-theme="light"] .dt-page-hero .kicker {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
}

html[data-theme="light"] .hero-stat,
html[data-theme="light"] .stat,
html[data-theme="light"] .dt-hero-stat {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 10px 28px -16px rgba(15, 23, 42, 0.12) !important;
  color: #64748b !important;
}

html[data-theme="light"] .hero-stat b,
html[data-theme="light"] .stat b,
html[data-theme="light"] .dt-hero-stat b {
  color: #0f172a !important;
}

html[data-theme="light"] .hero-stat span,
html[data-theme="light"] .dt-hero-stat span {
  color: #64748b !important;
}

/* Surfaces / cards */
/* 卡片类：无顶条的白面 */
html[data-theme="light"] .path-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .section-block .deal-card,
html[data-theme="light"] .deal-grid .deal-card,
html[data-theme="light"] .card-grid .deal-card,
html[data-theme="light"] .dt-toolbar,
html[data-theme="light"] .dt-game-art-card,
html[data-theme="light"] .dt-decision {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.9) 100%
  ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 1) !important;
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px -24px rgba(15, 23, 42, 0.14) !important;
  color: #475569 !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

/* 带顶条的面板：只改面层变量，保留彩虹 background-image */
html[data-theme="light"] .section-block,
html[data-theme="light"] .list-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .dt-panel,
html[data-theme="light"] .dt-section-block,
html[data-theme="light"] .dt-list-shell,
html[data-theme="light"] .dt-list-shell.is-demo,
html[data-theme="light"] .dt-panel.is-matrix-panel,
html[data-theme="light"] .dt-page-hero,
html[data-theme="light"] .dt-page-hero.is-demo,
html[data-theme="light"] .dt-detail-hero,
html[data-theme="light"] .game-deal-panel,
html[data-theme="light"] .game-deal-side-card,
html[data-theme="light"] .game-deal-side-card.is-side-buy,
html[data-theme="light"] .dt-decision-buy,
html[data-theme="light"] .dt-detail-tabs-panel {
  --panel-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.92) 100%
  );
  background-image: var(--accent-stripe), var(--panel-face) !important;
  background-size: var(--accent-stripe-size), var(--accent-face-size) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top-color: rgba(15, 23, 42, 0.08) !important;
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px -24px rgba(15, 23, 42, 0.14) !important;
  color: #475569 !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

html[data-theme="light"] .path-card:hover,
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .section-block .deal-card:hover,
html[data-theme="light"] .dt-game-art-card:hover {
  border-color: rgba(37, 99, 235, 0.22) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 48px -22px rgba(15, 23, 42, 0.16) !important;
  background: #fff !important;
}

html[data-theme="light"] .path-card h3,
html[data-theme="light"] .sec-head h2,
html[data-theme="light"] .panel-head h2,
html[data-theme="light"] .dt-panel-head h2,
html[data-theme="light"] .product-body h3,
html[data-theme="light"] .section-block .deal-body h3,
html[data-theme="light"] .deal-grid .deal-body h3,
html[data-theme="light"] .dt-game-art-body .name,
html[data-theme="light"] .dt-game-art-body .name a {
  color: #0f172a !important;
}

html[data-theme="light"] .path-card p,
html[data-theme="light"] .sec-head .sub,
html[data-theme="light"] .panel-head .sub,
html[data-theme="light"] .dt-panel-head .sub,
html[data-theme="light"] .product-foot .hint,
html[data-theme="light"] .product-pill,
html[data-theme="light"] .dt-matrix-hint {
  color: #64748b !important;
}

html[data-theme="light"] .path-card .go {
  color: #64748b !important;
}

html[data-theme="light"] .path-card:hover .go {
  color: #2563eb !important;
}

/* Tables */
html[data-theme="light"] .deal-mini-table thead th,
html[data-theme="light"] .dt-table th {
  color: #64748b !important;
  background: rgba(15, 23, 42, 0.02) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .deal-mini-table td,
html[data-theme="light"] .dt-table td {
  color: #334155 !important;
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
  background: transparent !important;
}

html[data-theme="light"] .deal-mini-table tbody tr:hover td,
html[data-theme="light"] .dt-table tbody tr:hover td {
  background: rgba(37, 99, 235, 0.04) !important;
}

/* Matrix list: full-row light (shell hardcodes #141a26 on EVERY cell) */
html[data-theme="light"] .dt-table.is-matrix th,
html[data-theme="light"] .dt-table.is-matrix td,
html[data-theme="light"] .dt-table.is-matrix thead th,
html[data-theme="light"] .dt-table.is-matrix .sticky-rank,
html[data-theme="light"] .dt-table.is-matrix .sticky-game,
html[data-theme="light"] .dt-table.is-matrix .sticky-advice,
html[data-theme="light"] .dt-table.is-matrix thead .sticky-rank,
html[data-theme="light"] .dt-table.is-matrix thead .sticky-game,
html[data-theme="light"] .dt-table.is-matrix thead .sticky-advice,
html[data-theme="light"] .dt-table.is-matrix .col-store,
html[data-theme="light"] .dt-table.is-matrix .col-trend,
html[data-theme="light"] .dt-table.is-matrix .col-more,
html[data-theme="light"] .dt-table.is-matrix .col-action {
  background: #fff !important;
  color: #334155 !important;
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .dt-table.is-matrix thead th {
  color: #64748b !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-table.is-matrix tbody tr:hover td,
html[data-theme="light"] .dt-table.is-matrix tbody tr:hover .sticky-rank,
html[data-theme="light"] .dt-table.is-matrix tbody tr:hover .sticky-game,
html[data-theme="light"] .dt-table.is-matrix tbody tr:hover .sticky-advice {
  background: #f1f5f9 !important;
}

html[data-theme="light"] .dt-game-cell .name,
html[data-theme="light"] .dt-game-cell .name a,
html[data-theme="light"] .dt-price-cell,
html[data-theme="light"] .dt-price-cell .p,
html[data-theme="light"] .dt-price-cell .num,
html[data-theme="light"] .num {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-price-cell .p.is-low,
html[data-theme="light"] .dt-table.is-matrix .dt-price-cell .p.is-low {
  color: #15803d !important;
}

html[data-theme="light"] .dt-matrix-hint {
  color: #64748b !important;
}

/* 排序序号日间：默认可读；前三名实心渐变 + 白字 */
html[data-theme="light"] .dt-rank {
  color: #334155 !important;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 3px 8px -2px rgba(15, 23, 42, 0.1) !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .dt-rank.is-top1 {
  color: #fff !important;
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

/* 第 1 名皇冠：日间也保留（结构在 shell） */
html[data-theme="light"] .dt-rank.is-top1::before {
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 50%, #f59e0b 100%) !important;
  filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.4)) !important;
}

html[data-theme="light"] .dt-table.is-matrix .sticky-rank {
  overflow: visible !important;
}

html[data-theme="light"] .dt-rank.is-top2 {
  color: #fff !important;
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 12px rgba(100, 116, 139, 0.3) !important;
}

html[data-theme="light"] .dt-rank.is-top3 {
  color: #fff !important;
  background: linear-gradient(135deg, #f59e0b, #b45309) !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 12px rgba(180, 83, 9, 0.3) !important;
}

html[data-theme="light"] .dt-more-trigger {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

html[data-theme="light"] .dt-game-cell .sub,
html[data-theme="light"] .dt-game-cell .genre,
html[data-theme="light"] .dt-price-cell .off,
html[data-theme="light"] .dt-price-cell small {
  color: #64748b !important;
}

/* Fields / pager */
html[data-theme="light"] .dt-field {
  color: #64748b !important;
}

html[data-theme="light"] .dt-field select,
html[data-theme="light"] .dt-field input {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .dt-page-btn {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #475569 !important;
}

html[data-theme="light"] .dt-page-btn:hover,
html[data-theme="light"] .dt-page-btn.is-active {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  color: #1d4ed8 !important;
}

html[data-theme="light"] .dt-pager-meta {
  color: #64748b !important;
}

/* Detail / chips / tabs */
html[data-theme="light"] .dt-chip {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #475569 !important;
}

html[data-theme="light"] .dt-chip.is-active {
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.14) 0%,
    rgba(37, 99, 235, 0.08) 100%
  ) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  color: #1d4ed8 !important;
}

html[data-theme="light"] .dt-country-tabs {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-country-tab {
  color: #64748b !important;
}

html[data-theme="light"] .dt-country-tab.is-active {
  color: #0f172a !important;
  background: rgba(37, 99, 235, 0.06) !important;
}

html[data-theme="light"] .dt-country-tab .price {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #64748b !important;
  border-color: transparent !important;
}

html[data-theme="light"] .dt-country-tab.is-active .price {
  color: #15803d !important;
  background: rgba(22, 163, 74, 0.1) !important;
}

html[data-theme="light"] .dt-note {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #64748b !important;
}

html[data-theme="light"] .dt-cross-hint {
  background: rgba(217, 119, 6, 0.06) !important;
  border-color: rgba(217, 119, 6, 0.18) !important;
  color: #92400e !important;
}

html[data-theme="light"] .dt-btn-ghost {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #334155 !important;
}

html[data-theme="light"] .dt-art-related-item:hover,
html[data-theme="light"] .dt-art-row:hover {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* Carousel stays dark media; keep glass price card readable */
html[data-theme="light"] .carousel {
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.2) !important;
}

/*
 * 幻灯价格卡：贴在深色封面上，日/夜都用「暗色毛玻璃」
 * 避免日间白玻璃叠封面发灰、发闷、突兀
 */
.slide-price-card,
.hero-price-card,
html[data-theme="light"] .slide-price-card,
html[data-theme="light"] .hero-price-card {
  background: linear-gradient(
    165deg,
    rgba(12, 16, 24, 0.42) 0%,
    rgba(8, 12, 18, 0.28) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
  color: rgba(244, 247, 255, 0.92) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 18px 44px -16px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-radius: 18px !important;
}

html[data-theme="light"] .slide-price-card .label,
html[data-theme="light"] .hero-price-card .label,
.slide-price-card .label,
.hero-price-card .label {
  color: rgba(226, 232, 240, 0.72) !important;
}

html[data-theme="light"] .slide-price-card .now,
html[data-theme="light"] .hero-price-card .now,
.slide-price-card .now,
.hero-price-card .now {
  background: linear-gradient(135deg, #6ee7b7, #34d399) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

html[data-theme="light"] .slide-price-card .old,
html[data-theme="light"] .hero-price-card .old,
.slide-price-card .old,
.hero-price-card .old {
  color: rgba(203, 213, 225, 0.55) !important;
}

html[data-theme="light"] .slide-price-card .off,
html[data-theme="light"] .hero-price-card .off {
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.35) !important;
}

/* 渠道 pill：暗玻璃小芯片，贴封面 */
html[data-theme="light"] .slide-price-card .store,
html[data-theme="light"] .hero-price-card .store,
.slide-price-card .store,
.hero-price-card .store {
  color: rgba(241, 245, 249, 0.88) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .slide-price-card .store.best,
html[data-theme="light"] .hero-price-card .store.best,
.slide-price-card .store.best,
.hero-price-card .store.best {
  color: #86efac !important;
  background: rgba(52, 211, 153, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.32) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 4px 12px -4px rgba(16, 185, 129, 0.25) !important;
}

/* Soft links / more buttons */
html[data-theme="light"] a.sec-more-link {
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.1),
    rgba(37, 99, 235, 0.04)
  ) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08) !important;
}

html[data-theme="light"] a.sec-more-link:hover {
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.16),
    rgba(37, 99, 235, 0.08)
  ) !important;
}

html[data-theme="light"] .free-block a.sec-more-link {
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.2) !important;
  background: linear-gradient(
    135deg,
    rgba(22, 163, 74, 0.1),
    rgba(22, 163, 74, 0.04)
  ) !important;
}

html[data-theme="light"] .demo-block a.sec-more-link {
  color: #b45309 !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.1),
    rgba(217, 119, 6, 0.04)
  ) !important;
}

/* Pills / ratings that used light-on-dark tokens */
html[data-theme="light"] .product-pill,
html[data-theme="light"] .dt-pill {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #64748b !important;
}

html[data-theme="light"] .rating-chip.is-s {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .rating-chip.is-a {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

html[data-theme="light"] .rating-chip.is-b {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}

html[data-theme="light"] .rating-chip.is-c {
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Footer / toast */
html[data-theme="light"] footer,
html[data-theme="light"] .dt-foot {
  border-top-color: rgba(15, 23, 42, 0.06) !important;
  color: #64748b !important;
}

html[data-theme="light"] footer strong,
html[data-theme="light"] footer a,
html[data-theme="light"] .dt-foot a {
  color: #334155 !important;
}

html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 40px -18px rgba(15, 23, 42, 0.18) !important;
}

/* Shell page chrome that hardcodes light-on-dark */
html[data-theme="light"] .dt-page-hero .hero-ico {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  color: #2563eb !important;
}

html[data-theme="light"] .dt-page-hero.is-demo .hero-ico {
  background: rgba(217, 119, 6, 0.1) !important;
  color: #d97706 !important;
}

html[data-theme="light"] .dt-crumbs,
html[data-theme="light"] .dt-crumbs a {
  color: #64748b !important;
}

html[data-theme="light"] .dt-crumbs a:hover {
  color: #2563eb !important;
}

html[data-theme="light"] #gameName,
html[data-theme="light"] .slug,
html[data-theme="light"] .dt-best-line,
html[data-theme="light"] .score-desc,
html[data-theme="light"] .score-title {
  color: #0f172a !important;
}

html[data-theme="light"] .slug,
html[data-theme="light"] .score-desc,
html[data-theme="light"] .dt-best-line {
  color: #64748b !important;
}

html[data-theme="light"] .dt-kv span {
  color: #64748b !important;
}

html[data-theme="light"] .dt-kv b {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-price-xl {
  color: #16a34a !important;
}

html[data-theme="light"] .dt-table tbody tr.is-best td {
  background: rgba(22, 163, 74, 0.05) !important;
}

html[data-theme="light"] .empty,
html[data-theme="light"] .dt-more-empty {
  color: #94a3b8 !important;
}


/* =========================================================
   Light theme — global readability fix (all pages)
   Overrides dark-skin hardcodes in shell/store/home inline CSS.
   ========================================================= */

/* Broad text defaults on light canvas */
html[data-theme="light"] body,
html[data-theme="light"] body.dt-body,
html[data-theme="light"] .dt-page,
html[data-theme="light"] .dt-wrap,
html[data-theme="light"] main {
  color: #475569 !important;
}

/* Article game cards */
html[data-theme="light"] .dt-game-art-card {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .dt-game-art-body .name,
html[data-theme="light"] .dt-game-art-body .name a {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-game-art-body .name a:hover {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-game-art-price .num {
  color: #15803d !important;
}

html[data-theme="light"] .dt-game-art-price .store {
  color: #64748b !important;
}

html[data-theme="light"] .dt-art-row {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  color: #334155 !important;
}

html[data-theme="light"] .dt-art-row:hover {
  background: rgba(37, 99, 235, 0.05) !important;
  border-color: rgba(37, 99, 235, 0.14) !important;
}

html[data-theme="light"] .dt-art-row .title {
  color: #1e293b !important;
}

html[data-theme="light"] .dt-art-row:hover .title {
  color: #0f172a !important;
}

/* Article type tags — darker text + soft tint for white cards */
html[data-theme="light"] .art-guide,
html[data-theme="light"] .token-art-guide {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

html[data-theme="light"] .art-event,
html[data-theme="light"] .token-art-event {
  color: #be185d !important;
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: rgba(236, 72, 153, 0.2) !important;
}

html[data-theme="light"] .art-code,
html[data-theme="light"] .token-art-code {
  color: #6d28d9 !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

html[data-theme="light"] .art-avoid,
html[data-theme="light"] .token-art-avoid {
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

html[data-theme="light"] .art-update,
html[data-theme="light"] .token-art-update {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="light"] .dt-game-art-foot {
  border-top-color: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .dt-game-art-foot a {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-game-art-foot a:hover {
  color: #1d4ed8 !important;
}

/* Detail related articles */
html[data-theme="light"] .dt-art-related-item {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .dt-art-related-item .t {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-art-related-item:hover .t {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-art-related-item .s,
html[data-theme="light"] .dt-art-related-item .meta,
html[data-theme="light"] .dt-art-empty {
  color: #64748b !important;
}

html[data-theme="light"] .dt-art-hook {
  color: #166534 !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.18) !important;
}

html[data-theme="light"] .dt-art-hook b {
  color: #15803d !important;
}

/* Hardcoded light text from shell/store — force dark equivalents */
html[data-theme="light"] .dt-brand,
html[data-theme="light"] .brand span,
html[data-theme="light"] .sec-head h2,
html[data-theme="light"] .panel-head h2,
html[data-theme="light"] .dt-panel-head h2,
html[data-theme="light"] .path-card h3,
html[data-theme="light"] .code-top h3,
html[data-theme="light"] .product-body h3,
html[data-theme="light"] .product-body h3 a,
html[data-theme="light"] .deal-body h3,
html[data-theme="light"] .deal-body h3 a,
html[data-theme="light"] .dt-game-cell .name,
html[data-theme="light"] .dt-game-cell .name a {
  color: #0f172a !important;
}

html[data-theme="light"] .sec-head .sub,
html[data-theme="light"] .panel-head .sub,
html[data-theme="light"] .dt-panel-head .sub,
html[data-theme="light"] .path-card p,
html[data-theme="light"] .path-card .go,
html[data-theme="light"] .product-foot .hint,
html[data-theme="light"] .product-summary,
html[data-theme="light"] .dt-matrix-hint,
html[data-theme="light"] .dt-pager-meta,
html[data-theme="light"] .dt-field,
html[data-theme="light"] footer,
html[data-theme="light"] .dt-foot,
html[data-theme="light"] .region-note,
html[data-theme="light"] .region-menu .rm-title,
html[data-theme="light"] .rm-title {
  color: #64748b !important;
}

html[data-theme="light"] .nav-links a,
html[data-theme="light"] .dt-nav a {
  color: #64748b !important;
}

html[data-theme="light"] .nav-links a.is-active,
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .dt-nav a.is-active,
html[data-theme="light"] .dt-nav a:hover {
  color: #2563eb !important;
}

/* Prices */
html[data-theme="light"] .price-now,
html[data-theme="light"] .num.price,
html[data-theme="light"] .deal-mini-table .num,
html[data-theme="light"] .dt-price-cell .num,
html[data-theme="light"] .dt-price-cell {
  color: #0f172a !important;
}

html[data-theme="light"] .price-now.is-good,
html[data-theme="light"] .dt-price-xl.is-good,
html[data-theme="light"] .dt-price-xl {
  color: #15803d !important;
}

/* Mini table / matrix muted columns */
html[data-theme="light"] .deal-mini-table th,
html[data-theme="light"] .dt-table th {
  color: #64748b !important;
}

html[data-theme="light"] .deal-mini-table td,
html[data-theme="light"] .dt-table td {
  color: #334155 !important;
}

html[data-theme="light"] .deal-mini-table td b,
html[data-theme="light"] .dt-table td b,
html[data-theme="light"] .dt-table td strong {
  color: #0f172a !important;
}

/* Soft / muted utility classes often hardcoded */
html[data-theme="light"] .muted,
html[data-theme="light"] .soft,
html[data-theme="light"] .meta,
html[data-theme="light"] .hint,
html[data-theme="light"] .sub,
html[data-theme="light"] .empty {
  color: #64748b !important;
}

/* Product pills / chips */
html[data-theme="light"] .product-pill {
  color: #475569 !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* 建议档日间：禁止再覆盖成浅底浅字（统一用下方 solid 色板 + 白字） */

/* Store ticker / misc hardcodes — 与原型一致：日间 slate 字，b 更深 */
html[data-theme="light"] .store-ticker-track,
html[data-theme="light"] .store-ticker-track span,
html[data-gde-theme="light"] .store-ticker-track,
html[data-gde-theme="light"] .store-ticker-track span {
  color: #334155 !important;
}
html[data-theme="light"] .store-ticker-track b,
html[data-gde-theme="light"] .store-ticker-track b {
  color: #0f172a !important;
}

/* Region / theme controls */
html[data-theme="light"] .region-btn #regionLabel,
html[data-theme="light"] .region-btn .meta-label,
html[data-theme="light"] .region-btn {
  color: #334155 !important;
}

/* User menu reinforce */
html[data-theme="light"] .user-menu-head .um-name {
  color: #0f172a !important;
}

html[data-theme="light"] .user-menu-head .um-mail,
html[data-theme="light"] .user-menu a,
html[data-theme="light"] .user-menu button.um-item {
  color: #475569 !important;
}

html[data-theme="light"] .user-menu a:hover,
html[data-theme="light"] .user-menu button.um-item:hover {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

/* More stores popover rows */
html[data-theme="light"] .dt-more-panel,
html[data-theme="light"] .dt-more-panel-h,
html[data-theme="light"] .dt-more-row,
html[data-theme="light"] .dt-more-link {
  color: #334155 !important;
}

html[data-theme="light"] .dt-more-panel-h {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-more-empty {
  color: #94a3b8 !important;
}

/* Free/demo product cards */
html[data-theme="light"] .product-card {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .product-body h3,
html[data-theme="light"] .product-body h3 a {
  color: #0f172a !important;
}

html[data-theme="light"] .product-body h3 a:hover {
  color: #2563eb !important;
}

/* Quiet buttons / ghost links on light */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-quiet,
html[data-theme="light"] a.btn-quiet {
  color: #334155 !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .btn-quiet:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.05) !important;
}

/* Code/list panels from store skin */
html[data-theme="light"] .code-card,
html[data-theme="light"] .code-box,
html[data-theme="light"] .store-item {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

html[data-theme="light"] .code-top h3,
html[data-theme="light"] .store-item b {
  color: #0f172a !important;
}

/* 日间：面板面层改白，顶条仍是第一背景层 */
html[data-theme="light"] .section-block,
html[data-theme="light"] .list-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .dt-panel,
html[data-theme="light"] .dt-section-block,
html[data-theme="light"] .dt-list-shell,
html[data-theme="light"] .dt-list-shell.is-demo,
html[data-theme="light"] .dt-panel.is-matrix-panel,
html[data-theme="light"] .dt-detail-hero,
html[data-theme="light"] .game-deal-panel,
html[data-theme="light"] .game-deal-side-card,
html[data-theme="light"] .game-deal-side-card.is-side-buy,
html[data-theme="light"] .dt-decision-buy,
html[data-theme="light"] .dt-detail-tabs-panel {
  --panel-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.92) 100%
  );
  background-image: var(--accent-stripe), var(--panel-face) !important;
  background-size: var(--accent-stripe-size), var(--accent-face-size) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  animation: var(--accent-stripe-anim) !important;
}

html[data-theme="light"] .dt-page-hero,
html[data-theme="light"] .dt-page-hero.is-demo {
  --panel-face: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.92) 100%
  );
  background-image: var(--accent-stripe), var(--panel-face) !important;
  background-size: var(--accent-stripe-size), var(--accent-face-size) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  animation: var(--accent-stripe-anim) !important;
}

/* 日间 is-rich 也强制顶条（不走深色氛围图） */
html[data-theme="light"] .dt-page-hero.is-rich,
html[data-theme="light"] .dt-page-hero.is-rich.is-demo {
  background-image: var(--accent-stripe), var(--panel-face) !important;
  background-size: var(--accent-stripe-size), var(--accent-face-size) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  animation: var(--accent-stripe-anim) !important;
}

html[data-theme="light"] .dt-page-hero.is-rich::after,
html[data-theme="light"] .dt-page-hero.is-rich.is-demo::after {
  opacity: 0.12 !important;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

html[data-theme="light"] a.sec-more-link .sec-more-label {
  color: inherit !important;
}

/* Detail page hero text bits */
html[data-theme="light"] #gameName {
  color: #0f172a !important;
}

html[data-theme="light"] #gameSlug,
html[data-theme="light"] .slug {
  color: #64748b !important;
}

html[data-theme="light"] #heroBest,
html[data-theme="light"] .dt-best-line,
html[data-theme="light"] #sideDesc,
html[data-theme="light"] .score-desc,
html[data-theme="light"] .dt-decision-reason {
  color: #64748b !important;
}

html[data-theme="light"] #sideTitle,
html[data-theme="light"] .score-title {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-decision-advice.is-good .score-title {
  color: #047857 !important;
}

html[data-theme="light"] .dt-decision-advice.is-good {
  background: linear-gradient(
    165deg,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(255, 255, 255, 0.96) 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.26) !important;
}

html[data-theme="light"] .dt-decision-advice.is-ok {
  background: linear-gradient(
    165deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(255, 255, 255, 0.96) 100%
  ) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
}

html[data-theme="light"] .dt-decision-chip {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .dt-decision-advice.is-soft .dt-decision-chip {
  color: #1d4ed8 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="light"] .dt-decision-remind {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-decision-remind li {
  color: #64748b !important;
}

html[data-theme="light"] .dt-decision-price-num {
  color: #059669 !important;
}

html[data-theme="light"] .dt-decision-price-store,
html[data-theme="light"] .dt-decision-price-label {
  color: #64748b !important;
}

html[data-theme="light"] .dt-decision-foot {
  color: #94a3b8 !important;
}

html[data-theme="light"] .dt-hero-advice {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-hero-advice.is-newlow {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.1) 0%,
    rgba(16, 185, 129, 0.06) 48%,
    rgba(255, 255, 255, 0.98) 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .dt-hero-advice-title {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-hero-advice.is-newlow .dt-hero-advice-title {
  color: #047857 !important;
}

html[data-theme="light"] .dt-hero-advice.is-super .dt-hero-advice-title {
  color: #be185d !important;
}

html[data-theme="light"] .dt-hero-advice.is-recom .dt-hero-advice-title {
  color: #15803d !important;
}

html[data-theme="light"] .dt-hero-advice.is-consider .dt-hero-advice-title {
  color: #1d4ed8 !important;
}

html[data-theme="light"] .dt-hero-advice-reason {
  color: #64748b !important;
}

html[data-theme="light"] .dt-advice-chip.is-hist {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .dt-advice-chip.is-super {
  color: #be185d !important;
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: rgba(236, 72, 153, 0.22) !important;
}

html[data-theme="light"] .dt-advice-chip.is-discount {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.24) !important;
}

html[data-theme="light"] .dt-advice-chip.is-rating {
  color: #6d28d9 !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.22) !important;
}

html[data-theme="light"] .dt-advice-chip.is-hot {
  color: #c2410c !important;
  background: rgba(249, 115, 22, 0.1) !important;
  border-color: rgba(249, 115, 22, 0.22) !important;
}

html[data-theme="light"] .dt-advice-chip.is-soft {
  color: #475569 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] .dt-price-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .dt-price-card.is-highlight {
  border-color: rgba(37, 99, 235, 0.32) !important;
  background: linear-gradient(
    160deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(255, 255, 255, 0.98) 100%
  ) !important;
}

html[data-theme="light"] .dt-price-card-title,
html[data-theme="light"] .dt-price-card-store {
  color: #64748b !important;
}

html[data-theme="light"] .dt-price-card-now {
  color: #2563eb !important;
}

html[data-theme="light"] .dt-price-card-orig,
html[data-theme="light"] .dt-price-card-date {
  color: #94a3b8 !important;
}

/* Tables relative lowest / hist labels */
html[data-theme="light"] .dt-tag-low {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .dt-page-ellipsis {
  color: #94a3b8 !important;
}

/* Solid CTAs keep white text — NOT advice tokens (they use tinted chips) */
html[data-theme="light"] .dt-game-art-foot a.btn-go,
html[data-theme="light"] .dt-btn-primary,
html[data-theme="light"] .dt-btn-buy,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-buy,
html[data-theme="light"] .top-search button,
html[data-theme="dark"] .dt-game-art-foot a.btn-go,
html[data-theme="dark"] .dt-btn-primary,
html[data-theme="dark"] .dt-btn-buy,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-buy,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-glass,
html[data-theme="dark"] body.night a.btn-primary,
html[data-theme="dark"] body.night a.btn-glass,
body.night a.btn-primary,
body.night a.btn-glass,
html[data-theme="dark"] .top-search button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 建议档颜色：见规则文档/前端UI规则.md；日夜间共用下方 solid 色板 */

/* Home inline CTA / soft links that forced pale blue */
html[data-theme="light"] a.sec-more-link {
  color: #2563eb !important;
}

html[data-theme="light"] .free-block a.sec-more-link {
  color: #15803d !important;
}

html[data-theme="light"] .demo-block a.sec-more-link {
  color: #b45309 !important;
}

/* Catch pale hardcodes often used as body text */
html[data-theme="light"] [style*="color:#9ec0ff"],
html[data-theme="light"] [style*="color: #9ec0ff"],
html[data-theme="light"] [style*="color:#dbe4f3"],
html[data-theme="light"] [style*="color: #dbe4f3"],
html[data-theme="light"] [style*="color:#c5cede"],
html[data-theme="light"] [style*="color: #c5cede"],
html[data-theme="light"] [style*="color:#8b96ab"],
html[data-theme="light"] [style*="color: #8b96ab"],
html[data-theme="light"] [style*="color:#f4f7ff"],
html[data-theme="light"] [style*="color: #f4f7ff"] {
  color: #334155 !important;
}

html[data-theme="light"] [style*="color:#6ee7b7"],
html[data-theme="light"] [style*="color: #6ee7b7"] {
  color: #15803d !important;
}

/* =========================================================
   Site-wide tag standard
   轻圆角 8px + 描边 + 轻浮空（全站标签统一，非 999 全胶囊）
   ========================================================= */

:root {
  --tag-r: 8px;
  --tag-pad-y: 5px;
  --tag-pad-x: 10px;
  --tag-fs: 12px;
  --tag-fw: 700;
  --tag-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 12px -2px rgba(15, 23, 42, 0.12),
    0 8px 18px -8px rgba(15, 23, 42, 0.1);
  --tag-shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 16px -4px rgba(0, 0, 0, 0.45),
    0 10px 22px -10px rgba(0, 0, 0, 0.4);
}

.rec,
.rec-legend .rec,
.dt-badge,
.dt-pill,
.dt-tag-low,
.dt-chip,
.dt-rating-chip,
.product-pill,
.rating-chip,
.slide-kicker,
.hero-hot-item .tag,
.deal-tag,
.deal-cover .tag,
.tag-low,
.tag-hot,
.tag-ok,
.tag-wait,
.store-pill,
.store-mini,
.art-guide,
.art-event,
.art-code,
.art-avoid,
.art-update,
.token-art-guide,
.token-art-event,
.token-art-code,
.token-art-avoid,
.token-art-update,
.token-newlow,
.token-super,
.token-recom,
.token-consider,
.token-normal,
.dt-art-row .tag,
.dt-game-art-cover .art-count {
  border-radius: var(--tag-r) !important;
  border-style: solid !important;
  border-width: 1px !important;
  font-weight: var(--tag-fw) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  box-shadow: var(--tag-shadow) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* size baseline for text tags (not ribbon corners) */
.rec,
.dt-badge,
.dt-pill,
.dt-tag-low,
.dt-chip,
.dt-rating-chip,
.product-pill,
.rating-chip,
.slide-kicker,
.hero-hot-item .tag,
.store-pill,
.store-mini,
.art-guide,
.art-event,
.art-code,
.art-avoid,
.art-update,
.token-art-guide,
.token-art-event,
.token-art-code,
.token-art-avoid,
.token-art-update,
.token-newlow,
.token-super,
.token-recom,
.token-consider,
.token-normal,
.dt-art-row .tag {
  padding: var(--tag-pad-y) var(--tag-pad-x) !important;
  font-size: var(--tag-fs) !important;
}

/* —— 建议档标签（全站权威；日/夜同一套） ——
   形态：8px + 白字 + 描边浮空
   历史新低 橙+皇冠；超值 粉+星；其余 圆点
   选择器含 html[data-theme] 防止旧日间浅色规则压过 */
html[data-theme="light"] .rec,
html[data-theme="light"] .dt-badge,
html:not([data-theme="light"]) .rec,
html:not([data-theme="light"]) .dt-badge,
.rec,
.dt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #fff !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 4px 12px -2px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .rec::before,
html[data-theme="light"] .dt-badge::before,
html:not([data-theme="light"]) .rec::before,
html:not([data-theme="light"]) .dt-badge::before,
.rec::before,
.dt-badge::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: currentColor !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 历史新低：皇冠 */
html[data-theme="light"] .rec-strong::before,
html[data-theme="light"] .token-newlow::before,
html[data-theme="light"] .dt-badge.token-newlow::before,
html:not([data-theme="light"]) .rec-strong::before,
html:not([data-theme="light"]) .token-newlow::before,
html:not([data-theme="light"]) .dt-badge.token-newlow::before,
.rec-strong::before,
.token-newlow::before,
.dt-badge.token-newlow::before {
  width: 11px !important;
  height: 9px !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23000' d='M2.5 15.5h19v2H2.5v-2zm1-1.5L5 7l3.5 4L12 4.5 15.5 11 19 7l1.5 7H3.5z'/%3E%3Ccircle cx='5' cy='6.2' r='1.4'/%3E%3Ccircle cx='12' cy='3.6' r='1.5'/%3E%3Ccircle cx='19' cy='6.2' r='1.4'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23000' d='M2.5 15.5h19v2H2.5v-2zm1-1.5L5 7l3.5 4L12 4.5 15.5 11 19 7l1.5 7H3.5z'/%3E%3Ccircle cx='5' cy='6.2' r='1.4'/%3E%3Ccircle cx='12' cy='3.6' r='1.5'/%3E%3Ccircle cx='19' cy='6.2' r='1.4'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* 超值优惠：星 */
html[data-theme="light"] .rec-super::before,
html[data-theme="light"] .token-super::before,
html[data-theme="light"] .dt-badge.token-super::before,
html:not([data-theme="light"]) .rec-super::before,
html:not([data-theme="light"]) .token-super::before,
html:not([data-theme="light"]) .dt-badge.token-super::before,
.rec-super::before,
.token-super::before,
.dt-badge.token-super::before {
  width: 11px !important;
  height: 11px !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.6l2.7 6.4 6.9.6-5.2 4.5 1.6 6.7L12 17.8 5.9 20.8l1.6-6.7L2.4 9.6l6.9-.6L12 2.6z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.6l2.7 6.4 6.9.6-5.2 4.5 1.6 6.7L12 17.8 5.9 20.8l1.6-6.7L2.4 9.6l6.9-.6L12 2.6z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* 色板：橙 / 粉 / 绿 / 蓝 / 灰（白字）—— 含日夜高优先级选择器 */
html[data-theme="light"] .rec-strong,
html[data-theme="light"] .token-newlow,
html[data-theme="light"] .dt-badge.token-newlow,
html:not([data-theme="light"]) .rec-strong,
html:not([data-theme="light"]) .token-newlow,
html:not([data-theme="light"]) .dt-badge.token-newlow,
.rec-strong,
.token-newlow,
.dt-badge.token-newlow {
  color: #fff !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b 55%, #ea580c) !important;
  border-color: rgba(234, 88, 12, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 14px -2px rgba(245, 158, 11, 0.4) !important;
}

html[data-theme="light"] .rec-super,
html[data-theme="light"] .token-super,
html[data-theme="light"] .dt-badge.token-super,
html:not([data-theme="light"]) .rec-super,
html:not([data-theme="light"]) .token-super,
html:not([data-theme="light"]) .dt-badge.token-super,
.rec-super,
.token-super,
.dt-badge.token-super {
  color: #fff !important;
  background: linear-gradient(135deg, #f472b6, #ec4899 55%, #db2777) !important;
  border-color: rgba(219, 39, 119, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 14px -2px rgba(236, 72, 153, 0.38) !important;
}

html[data-theme="light"] .rec-buy,
html[data-theme="light"] .token-recom,
html[data-theme="light"] .dt-badge.token-recom,
html:not([data-theme="light"]) .rec-buy,
html:not([data-theme="light"]) .token-recom,
html:not([data-theme="light"]) .dt-badge.token-recom,
.rec-buy,
.token-recom,
.dt-badge.token-recom {
  color: #fff !important;
  background: linear-gradient(135deg, #34d399, #22c55e 55%, #16a34a) !important;
  border-color: rgba(22, 163, 74, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 4px 14px -2px rgba(34, 197, 94, 0.35) !important;
}

html[data-theme="light"] .rec-consider,
html[data-theme="light"] .token-consider,
html[data-theme="light"] .dt-badge.token-consider,
html:not([data-theme="light"]) .rec-consider,
html:not([data-theme="light"]) .token-consider,
html:not([data-theme="light"]) .dt-badge.token-consider,
.rec-consider,
.token-consider,
.dt-badge.token-consider {
  color: #fff !important;
  background: linear-gradient(135deg, #60a5fa, #3b82f6 55%, #2563eb) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 4px 14px -2px rgba(59, 130, 246, 0.35) !important;
}

html[data-theme="light"] .rec-wait,
html[data-theme="light"] .token-normal,
html[data-theme="light"] .dt-badge.token-normal,
html:not([data-theme="light"]) .rec-wait,
html:not([data-theme="light"]) .token-normal,
html:not([data-theme="light"]) .dt-badge.token-normal,
.rec-wait,
.token-normal,
.dt-badge.token-normal {
  color: #fff !important;
  background: linear-gradient(135deg, #94a3b8, #64748b 55%, #475569) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 12px -2px rgba(71, 85, 105, 0.28) !important;
}

/* —— low / hot store tags —— */
.dt-tag-low,
.tag-low,
.tag.tag-low {
  color: #b45309 !important;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 243, 199, 0.88)) !important;
  border-color: rgba(217, 119, 6, 0.32) !important;
}

.tag-hot,
.tag.tag-hot {
  color: #be185d !important;
  background: linear-gradient(180deg, rgba(253, 242, 248, 0.96), rgba(252, 231, 243, 0.9)) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}

.tag-ok,
.tag.tag-ok {
  color: #047857 !important;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(209, 250, 229, 0.88)) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.tag-wait,
.tag.tag-wait {
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.88)) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

/* pills / chips neutral */
.dt-pill,
.product-pill,
.dt-chip,
.store-pill,
.store-mini {
  color: #475569 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

.dt-chip.is-active,
.store-pill.best,
.store-mini.best {
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.9)) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

/* slide kicker 默认粉条：仅无建议档 token 时使用；有 .rec 时走建议档色板（对齐 140019） */
.slide-kicker:not(.rec) {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255, 59, 74, 0.92), rgba(255, 77, 154, 0.88)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 16px -4px rgba(255, 59, 74, 0.35),
    0 10px 22px -10px rgba(0, 0, 0, 0.35) !important;
}

.slide-kicker.code:not(.rec) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.92), rgba(236, 72, 153, 0.88)) !important;
}

/* 轮播建议档徽章：紧凑胶囊，禁止被 grid 拉满列宽 */
.slide-content .slide-kicker.rec,
.slide-copy .slide-kicker.rec {
  width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* article type tags */
.art-guide,
.token-art-guide {
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.9)) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
}

.art-event,
.token-art-event {
  color: #be185d !important;
  background: linear-gradient(180deg, rgba(253, 242, 248, 0.96), rgba(252, 231, 243, 0.9)) !important;
  border-color: rgba(236, 72, 153, 0.22) !important;
}

.art-code,
.token-art-code {
  color: #6d28d9 !important;
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.96), rgba(237, 233, 254, 0.9)) !important;
  border-color: rgba(139, 92, 246, 0.22) !important;
}

.art-avoid,
.token-art-avoid {
  color: #b91c1c !important;
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(254, 226, 226, 0.9)) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

.art-update,
.token-art-update {
  color: #047857 !important;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(209, 250, 229, 0.9)) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

/* rating chips */
.rating-chip.is-s,
.dt-rating-chip.is-s {
  color: #047857 !important;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(209, 250, 229, 0.88)) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
}

.rating-chip.is-a,
.dt-rating-chip.is-a {
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.88)) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

.rating-chip.is-b,
.dt-rating-chip.is-b {
  color: #b45309 !important;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 243, 199, 0.88)) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
}

.rating-chip.is-c,
.dt-rating-chip.is-c {
  color: #b91c1c !important;
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(254, 226, 226, 0.88)) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}

/* cover art-count stays dark glass */
.dt-game-art-cover .art-count {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 14px -4px rgba(0, 0, 0, 0.45) !important;
}

/* —— Dark theme: same shape, cooler float —— */
html:not([data-theme="light"]) .rec,
html:not([data-theme="light"]) .dt-badge,
html:not([data-theme="light"]) .dt-pill,
html:not([data-theme="light"]) .dt-tag-low,
html:not([data-theme="light"]) .dt-chip,
html:not([data-theme="light"]) .dt-rating-chip,
html:not([data-theme="light"]) .product-pill,
html:not([data-theme="light"]) .rating-chip,
html:not([data-theme="light"]) .store-pill,
html:not([data-theme="light"]) .store-mini,
html:not([data-theme="light"]) .art-guide,
html:not([data-theme="light"]) .art-event,
html:not([data-theme="light"]) .art-code,
html:not([data-theme="light"]) .art-avoid,
html:not([data-theme="light"]) .art-update,
html:not([data-theme="light"]) .token-art-guide,
html:not([data-theme="light"]) .token-art-event,
html:not([data-theme="light"]) .token-art-code,
html:not([data-theme="light"]) .token-art-avoid,
html:not([data-theme="light"]) .token-art-update,
html:not([data-theme="light"]) .dt-art-row .tag {
  box-shadow: var(--tag-shadow-dark) !important;
}
/* 注意：token-newlow/super/recom/consider/normal 不要写进上方阴影批处理，会冲掉建议档实色板 */

/* 建议档夜间色板已在上方 solid 色板统一，勿再覆盖成浅色字 */

html:not([data-theme="light"]) .dt-pill,
html:not([data-theme="light"]) .product-pill,
html:not([data-theme="light"]) .dt-chip,
html:not([data-theme="light"]) .store-pill,
html:not([data-theme="light"]) .store-mini {
  color: #c5cede !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) .dt-chip.is-active,
html:not([data-theme="light"]) .store-pill.best,
html:not([data-theme="light"]) .store-mini.best {
  color: #8bbcff !important;
  background: linear-gradient(180deg, rgba(61, 139, 253, 0.22), rgba(61, 139, 253, 0.1)) !important;
  border-color: rgba(125, 168, 255, 0.32) !important;
}

html:not([data-theme="light"]) .art-guide,
html:not([data-theme="light"]) .token-art-guide {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
}

html:not([data-theme="light"]) .art-event,
html:not([data-theme="light"]) .token-art-event {
  color: #f9a8d4 !important;
  background: rgba(236, 72, 153, 0.12) !important;
  border-color: rgba(236, 72, 153, 0.28) !important;
}

html:not([data-theme="light"]) .art-code,
html:not([data-theme="light"]) .token-art-code {
  color: #c4b5fd !important;
  background: rgba(167, 139, 250, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

html:not([data-theme="light"]) .art-avoid,
html:not([data-theme="light"]) .token-art-avoid {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
}

html:not([data-theme="light"]) .art-update,
html:not([data-theme="light"]) .token-art-update {
  color: #6ee7b7 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
}

/* product ribbons stay diagonal corner badges — only soften radius on span */
.product-ribbon span,
.dt-product-ribbon span {
  border-radius: var(--tag-r) !important;
}

/* =========================================================
   ADVICE TAG FINAL FORCE — 必须在文件最末，压过一切旧浅色规则
   权威：规则文档/前端UI规则.md
   ========================================================= */
html[data-theme="light"] .rec,
html[data-theme="dark"] .rec,
html:not([data-theme="light"]) .rec,
html[data-theme="light"] .dt-badge,
html:not([data-theme="light"]) .dt-badge,
.rec,
.dt-badge {
  color: #fff !important;
}

html[data-theme="light"] .rec-strong,
html[data-theme="dark"] .rec-strong,
html:not([data-theme="light"]) .rec-strong,
html[data-theme="light"] .token-newlow,
html:not([data-theme="light"]) .token-newlow,
html[data-theme="light"] .dt-badge.token-newlow,
html:not([data-theme="light"]) .dt-badge.token-newlow,
.rec-strong,
.token-newlow {
  color: #fff !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b 55%, #ea580c) !important;
  border-color: rgba(234, 88, 12, 0.45) !important;
}

html[data-theme="light"] .rec-super,
html:not([data-theme="light"]) .rec-super,
html[data-theme="light"] .token-super,
html:not([data-theme="light"]) .token-super,
html[data-theme="light"] .dt-badge.token-super,
html:not([data-theme="light"]) .dt-badge.token-super,
.rec-super,
.token-super {
  color: #fff !important;
  background: linear-gradient(135deg, #f472b6, #ec4899 55%, #db2777) !important;
  border-color: rgba(219, 39, 119, 0.45) !important;
}

html[data-theme="light"] .rec-buy,
html:not([data-theme="light"]) .rec-buy,
html[data-theme="light"] .token-recom,
html:not([data-theme="light"]) .token-recom,
html[data-theme="light"] .dt-badge.token-recom,
html:not([data-theme="light"]) .dt-badge.token-recom,
.rec-buy,
.token-recom {
  color: #fff !important;
  background: linear-gradient(135deg, #34d399, #22c55e 55%, #16a34a) !important;
  border-color: rgba(22, 163, 74, 0.4) !important;
}

html[data-theme="light"] .rec-consider,
html:not([data-theme="light"]) .rec-consider,
html[data-theme="light"] .token-consider,
html:not([data-theme="light"]) .token-consider,
html[data-theme="light"] .dt-badge.token-consider,
html:not([data-theme="light"]) .dt-badge.token-consider,
.rec-consider,
.token-consider {
  color: #fff !important;
  background: linear-gradient(135deg, #60a5fa, #3b82f6 55%, #2563eb) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

html[data-theme="light"] .rec-wait,
html:not([data-theme="light"]) .rec-wait,
html[data-theme="light"] .token-normal,
html:not([data-theme="light"]) .token-normal,
html[data-theme="light"] .dt-badge.token-normal,
html:not([data-theme="light"]) .dt-badge.token-normal,
.rec-wait,
.token-normal {
  color: #fff !important;
  background: linear-gradient(135deg, #94a3b8, #64748b 55%, #475569) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
}

/* ============================================================
 * LIGHT MODE FINAL FORCE — topbar + shared shell (all pages)
 * Must stay at end of glass.css. Prototype-aligned colors.
 * ============================================================ */
html[data-theme="light"] .gdh-topbar,
html[data-theme="light"] .gdh-topbar.is-deal-terminal,
html[data-theme="light"] .gdh-topbar.game-deals-shared-topbar,
html[data-gde-theme="light"] .gdh-topbar.game-deals-shared-topbar {
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 30px -18px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}

html[data-theme="light"] .gdh-topbar .gdh-brand,
html[data-theme="light"] .gdh-topbar .gdh-brand span {
  color: #0f172a !important;
}

html[data-theme="light"] .gdh-nav-links a,
html[data-theme="light"] .gdh-topbar .gdh-nav a,
html[data-theme="light"] .gdh-topbar .gdh-nav-links a {
  color: #64748b !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .gdh-nav-links a.is-active,
html[data-theme="light"] .gdh-nav-links a:hover,
html[data-theme="light"] .gdh-topbar .gdh-nav-links a.is-active,
html[data-theme="light"] .gdh-topbar .gdh-nav-links a:hover {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.1) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .gdh-top-search {
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}
html[data-theme="light"] .gdh-top-search input {
  color: #0f172a !important;
}
html[data-theme="light"] .gdh-top-search input::placeholder {
  color: #94a3b8 !important;
}
html[data-theme="light"] .gdh-top-search svg,
html[data-theme="light"] .gdh-top-search button {
  color: #94a3b8 !important;
}

html[data-theme="light"] .gdh-topbar .game-deals-theme-toggle,
html[data-theme="light"] .gdh-topbar .game-deals-theme-toggle.gdh-icon-btn {
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #475569 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .gdh-login,
html[data-theme="light"] .gdh-topbar .gdh-login {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 0 !important;
}

/* body/page light text for list pages */
html[data-theme="light"] body.dt-body,
html[data-theme="light"] body.deal-terminal-list,
html[data-theme="light"] body.deal-terminal-freebies,
html[data-theme="light"] body.deal-terminal-demos {
  color: #334155 !important;
  background:
    radial-gradient(1100px 480px at 72% -10%, rgba(18, 87, 255, 0.07), transparent 58%),
    #eef1f7 !important;
}

/* freebies old cards hidden — product cards already styled in glass */

/* matrix empty dash */
html[data-theme="light"] .dt-table .empty,
html[data-theme="light"] .dt-price-cell .empty,
html[data-theme="light"] .dt-more-empty {
  color: #94a3b8 !important;
}

html[data-theme="light"] .dt-game-cell .meta,
html[data-theme="light"] .dt-price-cell .d {
  color: #64748b !important;
}

html[data-theme="light"] .dt-game-cell .name {
  color: #0f172a !important;
}

html[data-theme="light"] .dt-btn-detail,
html[data-theme="light"] a.dt-btn-detail {
  color: #fff !important;
  background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
}

html[data-theme="light"] .dt-foot,
html[data-theme="light"] .dt-foot a {
  color: #64748b !important;
}
html[data-theme="light"] .dt-foot a:hover {
  color: #2563eb !important;
}

/* field selects on light */
html[data-theme="light"] .dt-field select,
html[data-theme="light"] .dt-field input {
  color: #0f172a !important;
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* free/demo empty text */
html[data-theme="light"] #empty,
html[data-theme="light"] [data-gde-freebies-empty] {
  color: #64748b !important;
}