/* ============================================================
   贰周目Hub · 主题层（叠加在 css/style.css 之上，不修改原文件）
   A. 主题切换开关 UI（深浅两套通用）
   B. 浅色主题变量
   C. 浅色主题覆盖 style.css
   D. 浅色主题覆盖各页内联样式
   ============================================================ */

/* ============================================================
   A. 主题切换开关（下拉）
   ============================================================ */
.theme-switch { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; z-index: 130; }
.header-inner > .theme-switch { grid-column: 3; justify-self: end; }
/* 独立页顶栏：插在「用户头像」前，靠 .conn 的 margin-left:auto 自然靠右 */
.topbar > .theme-switch { margin-left: 0; }

.theme-switch .ts-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 20px; cursor: pointer;
  font-size: 13px; font-family: inherit; font-weight: 500; line-height: 1;
  color: var(--text-muted, var(--muted, #94a3b8));
  background: var(--card-bg, var(--card, #151e2e));
  border: 1px solid var(--border, #233047);
  transition: color .2s, border-color .2s, background .2s;
}
.theme-switch .ts-btn:hover { color: var(--text, #e5e7eb); border-color: var(--primary, #8b5cf6); }
.theme-switch .ts-btn:focus-visible { outline: 2px solid var(--primary, #8b5cf6); outline-offset: 2px; }
.theme-switch .ts-ico { font-size: 14px; line-height: 1; }
.theme-switch .ts-label { white-space: nowrap; }
.theme-switch .ts-caret { font-size: 9px; opacity: .75; transition: transform .2s; }
.theme-switch.open .ts-caret { transform: rotate(180deg); }

.theme-switch .ts-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px;
  padding: 6px; display: none;
  background: var(--card-bg, var(--card, #151e2e));
  border: 1px solid var(--border, #233047);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
.theme-switch.open .ts-menu { display: block; }
.theme-switch .ts-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px; background: none;
  color: var(--text-muted, var(--muted, #94a3b8));
  font-size: 13px; font-family: inherit; line-height: 1.2; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.theme-switch .ts-item:hover { background: var(--card-bg-hover, var(--card-hover, #1a2538)); color: var(--text, #e5e7eb); }
.theme-switch .ts-item.on { color: var(--primary, #8b5cf6); font-weight: 600; }
.theme-switch .ts-item .ts-tick { margin-left: auto; font-size: 12px; opacity: 0; }
.theme-switch .ts-item.on .ts-tick { opacity: 1; }

@media (max-width: 640px) {
  .theme-switch .ts-label { display: none; }
  .theme-switch .ts-btn { padding: 7px 10px; }
}

/* ============================================================
   B. 浅色主题变量
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-2: #ffffff;
  --card-bg: #ffffff;
  --card-bg-hover: #f1f5f9;
  --primary: #7c3aed;
  --primary-light: #0891b2;
  --accent: #0891b2;
  --danger: #e11d48;
  --text: #1e2937;
  --text-muted: #64748b;
  --border: #e4e8f0;
  --shadow: 0 4px 20px rgba(15, 23, 42, .08);
  --glow: 0 6px 18px rgba(124, 58, 237, .16);
  /* 独立页面（game-rooms / netplay-lobby）用的变量别名 */
  --card: #ffffff;
  --card-hover: #f1f5f9;
  --muted: #64748b;
  --ok: #059669;
  --warn: #b45309;
  --text-secondary: #475569;
}
html[data-theme="dark"] { color-scheme: dark; }

/* ============================================================
   C. 浅色主题覆盖 style.css
   ============================================================ */

/* —— 基础与导航 —— */
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .86); }
html[data-theme="light"] .logo-text .logo-hub { -webkit-text-fill-color: #0891b2; color: #0891b2; text-shadow: 0 0 12px rgba(8, 145, 178, .35); }
html[data-theme="light"] .logo-icon { box-shadow: 0 4px 14px rgba(124, 58, 237, .25); }
html[data-theme="light"] .main-nav a:hover { color: var(--primary); background: rgba(124, 58, 237, .1); }
html[data-theme="light"] .main-nav a.active { box-shadow: 0 4px 14px rgba(124, 58, 237, .28); }

/* —— Hero（非轮播版）—— */
html[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, .14), transparent),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(8, 145, 178, .08), transparent),
    linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
}
/* 注意：这些元素原样式靠 background-clip:text 做渐变文字，
   必须用 background-image 覆盖，不能用 background 简写（简写会把 clip 重置成 border-box，
   导致渐变铺满整块 + 文字透明 = 看不见字） */
html[data-theme="light"] .hero h1 { background-image: linear-gradient(90deg, #312e81 20%, var(--accent) 80%); }
html[data-theme="light"] .hero-search { box-shadow: 0 8px 26px rgba(15, 23, 42, .08); }
html[data-theme="light"] .hero-search:focus-within { box-shadow: 0 0 0 3px rgba(124, 58, 237, .18), 0 8px 26px rgba(15, 23, 42, .08); }
html[data-theme="light"] .hero-search input::placeholder { color: #94a3b8; }
html[data-theme="light"] .hero-tags a { color: #475569; background: rgba(255, 255, 255, .8); border-color: rgba(15, 23, 42, .12); }
html[data-theme="light"] .hero-tags a:hover { color: #fff; background: var(--primary); border-color: transparent; }

/* —— 卡片与标签 —— */
html[data-theme="light"] .page-title::before { box-shadow: 0 0 10px rgba(124, 58, 237, .35); }
html[data-theme="light"] .game-card:hover { border-color: rgba(124, 58, 237, .45); box-shadow: 0 12px 30px rgba(15, 23, 42, .12); }
html[data-theme="light"] .game-thumb { background: #eef2f7; }
/* 无封面时的占位字母：底是饱和品牌色，白字才看得清（不要改深色） */
html[data-theme="light"] .game-thumb .thumb-fallback { color: rgba(255, 255, 255, .96); text-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
html[data-theme="light"] .game-card:hover .game-info h3 { color: var(--primary); }
html[data-theme="light"] .tag { background: rgba(124, 58, 237, .09); color: #6d28d9; border-color: rgba(124, 58, 237, .22); }
html[data-theme="light"] .tag.hot { background: rgba(225, 29, 72, .08); color: #be123c; border-color: rgba(225, 29, 72, .22); }
html[data-theme="light"] .tag.new { background: rgba(8, 145, 178, .08); color: #0e7490; border-color: rgba(8, 145, 178, .22); }
html[data-theme="light"] .filter-btn:hover { color: var(--primary); }
html[data-theme="light"] .filter-count { background: rgba(100, 116, 139, .14); }

/* —— 搜索栏 / 下拉 —— */
html[data-theme="light"] .search-dropdown { background: #fff; box-shadow: 0 16px 44px rgba(15, 23, 42, .16); }
html[data-theme="light"] .sd-item { border-bottom-color: rgba(15, 23, 42, .07); }
html[data-theme="light"] .sd-item:hover { background: rgba(124, 58, 237, .08); }
html[data-theme="light"] .sd-item img { background: #eef2f7; }

/* —— 详情页 —— */
html[data-theme="light"] .detail-cover { box-shadow: 0 4px 18px rgba(15, 23, 42, .12); }
html[data-theme="light"] .detail-main h1 { background-image: linear-gradient(90deg, #1e1b4b, #7c3aed); }
html[data-theme="light"] .btn-steam { background: #eaf6fd; color: #0b5c8a; border-color: #bfe3f7; }
html[data-theme="light"] .btn-steam:hover { background: #d8eefa; }
html[data-theme="light"] .btn-epic { background: #f1f5f9; color: #1e2937; border-color: #cbd5e1; }
html[data-theme="light"] .btn-epic:hover { background: #e2e8f0; }
html[data-theme="light"] .download-box { background: rgba(5, 150, 105, .07); border-color: rgba(5, 150, 105, .25); }
html[data-theme="light"] .download-note { color: #047857; }
html[data-theme="light"] .gallery-item { background: #eef2f7; }
html[data-theme="light"] .req-block li { background: rgba(124, 58, 237, .05); }
html[data-theme="light"] .req-grid .req-block { background: rgba(124, 58, 237, .05); }
html[data-theme="light"] .req-grid .req-block li { border-bottom-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .req-grid .req-rec { background: rgba(8, 145, 178, .05); border-color: rgba(8, 145, 178, .2); }
html[data-theme="light"] .req-grid .req-rec h3 { color: #0e7490; }

/* —— 公告 / 关于 / 页脚 —— */
html[data-theme="light"] .news-item:hover { border-color: rgba(124, 58, 237, .35); }
html[data-theme="light"] .about-card h2 { color: var(--text); }
html[data-theme="light"] .site-footer { background: #fff; }

/* —— 首页轮播（文字压在海报上，保持白字；只改无图时的底色）—— */
html[data-theme="light"] .hero-carousel { background: #e9eef7; }

/* —— 热门排行 —— */
html[data-theme="light"] .hot-thumb { background: #eef2f7; }
html[data-theme="light"] .hot-item:hover .hot-info h3 { color: var(--primary); }
html[data-theme="light"] .hot-item:nth-child(2) .hot-rank { color: #64748b; }

/* —— 免责声明 —— */
html[data-theme="light"] .disclaimer { background: linear-gradient(135deg, rgba(124, 58, 237, .05), rgba(8, 145, 178, .04)); border-color: rgba(124, 58, 237, .16); }

/* —— 详情页右侧下载面板 —— */
html[data-theme="light"] .download-sidebar { box-shadow: 0 4px 22px rgba(15, 23, 42, .1); }
html[data-theme="light"] .dl-head { background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(8, 145, 178, .07)); }
html[data-theme="light"] .dl-head-count { background: rgba(15, 23, 42, .06); }
html[data-theme="light"] .pan-badge { background: rgba(225, 29, 72, .1); color: #be123c; }
html[data-theme="light"] .code-chip { background: rgba(15, 23, 42, .06); color: #0e7490; }
html[data-theme="light"] .code-chip:hover { background: rgba(8, 145, 178, .14); }
html[data-theme="light"] .dl-tip { background: rgba(8, 145, 178, .06); border-color: rgba(8, 145, 178, .2); color: #4338ca; }
html[data-theme="light"] .dl-tip b { color: #0e7490; }
html[data-theme="light"] .dl-qr { box-shadow: 0 4px 16px rgba(15, 23, 42, .14); }
html[data-theme="light"] .pan-btn:hover { box-shadow: 0 4px 14px rgba(124, 58, 237, .18); }

/* —— SWITCH 必下 / 独立扫码页 —— */
html[data-theme="light"] .sub-filter-wrap,
html[data-theme="light"] .sd-card {
  background: linear-gradient(135deg, #eef2ff 0%, #e9eefb 60%, #eff6fb 100%);
  border-color: rgba(99, 102, 241, .26);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
}
html[data-theme="light"] .sub-filter-wrap::before { background: radial-gradient(600px 120px at 10% 0%, rgba(99, 102, 241, .1), transparent 60%); }
html[data-theme="light"] .sd-card::before { background: radial-gradient(400px 140px at 50% 0%, rgba(99, 102, 241, .1), transparent 60%); }
html[data-theme="light"] .sub-filter-title .sft-text { background-image: linear-gradient(90deg, #4f46e5, #0891b2); }
html[data-theme="light"] .sub-filter-title .sft-badge { color: #b45309; border-color: rgba(180, 83, 9, .35); background: rgba(251, 191, 36, .12); }
html[data-theme="light"] .sfb-qr { box-shadow: 0 4px 14px rgba(15, 23, 42, .14); }
html[data-theme="light"] .sd-title { color: var(--text); }
html[data-theme="light"] .sd-sub { color: var(--text-muted); }
html[data-theme="light"] .sd-scan-hint { color: #0e7490; }
html[data-theme="light"] .sd-pwd { color: #475569; }
html[data-theme="light"] .sd-pwd b { color: #b45309; }
html[data-theme="light"] .sd-qr-box { box-shadow: 0 8px 24px rgba(15, 23, 42, .16); }

/* ============================================================
   D. 浅色主题覆盖各页内联样式
   ============================================================ */

/* —— game-res.html（资源页）—— */
html[data-theme="light"] .gr-hero { background: linear-gradient(135deg, #eef2ff 0%, #e9eefb 60%, #eff6fb 100%); border-color: rgba(99, 102, 241, .24); }
html[data-theme="light"] .gr-hero::before { background: radial-gradient(500px 160px at 85% 0%, rgba(124, 58, 237, .1), transparent 60%); }
html[data-theme="light"] .gr-cover { background: #eef2f7; border-color: rgba(15, 23, 42, .08); box-shadow: 0 8px 22px rgba(15, 23, 42, .1); }
html[data-theme="light"] .gr-kicker { color: #0e7490; background: rgba(8, 145, 178, .08); border-color: rgba(8, 145, 178, .24); }
html[data-theme="light"] .gr-meta span { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .gr-check { color: #4338ca; background: rgba(124, 58, 237, .07); border-color: rgba(124, 58, 237, .2); }
html[data-theme="light"] .gr-check b { color: #5b21b6; }
html[data-theme="light"] .gr-card { box-shadow: 0 4px 20px rgba(15, 23, 42, .08); }
html[data-theme="light"] .gr-card-head { background: linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(8, 145, 178, .05)); }
html[data-theme="light"] .gr-badge { background: rgba(5, 150, 105, .1); color: #047857; border-color: rgba(5, 150, 105, .24); }
html[data-theme="light"] .gr-qr { box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
html[data-theme="light"] .gr-qr-hint b,
html[data-theme="light"] .gr-tip b { color: #0e7490; }
html[data-theme="light"] .gr-code { color: #0e7490; background: rgba(15, 23, 42, .05); border-color: rgba(8, 145, 178, .24); }
html[data-theme="light"] .gr-code:hover { background: rgba(8, 145, 178, .12); }
html[data-theme="light"] .gr-tip { border-left-color: rgba(8, 145, 178, .35); }
html[data-theme="light"] .gr-note { background: rgba(8, 145, 178, .05); border-color: rgba(8, 145, 178, .18); color: #4338ca; }
html[data-theme="light"] .gr-note b { color: #0e7490; }

/* —— curse-warrior-download.html —— */
html[data-theme="light"] .cw-hero,
html[data-theme="light"] .cw-qr-card { background: linear-gradient(135deg, #eef2ff 0%, #e9eefb 60%, #eff6fb 100%); border-color: rgba(129, 140, 248, .26); }
html[data-theme="light"] .cw-hero::before { background: radial-gradient(480px 160px at 80% 0%, rgba(124, 58, 237, .1), transparent 60%); }
html[data-theme="light"] .cw-qr-card::before { background: radial-gradient(400px 140px at 50% 0%, rgba(99, 102, 241, .1), transparent 60%); }
html[data-theme="light"] .cw-qr-card { box-shadow: 0 12px 34px rgba(15, 23, 42, .1); }
html[data-theme="light"] .cw-cover { border-color: rgba(15, 23, 42, .08); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
html[data-theme="light"] .cw-meta div { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .cw-scan-hint { color: #4338ca; }
html[data-theme="light"] .cw-pwd b { color: #0e7490; }
html[data-theme="light"] .cw-qr-card .cw-qr { box-shadow: 0 6px 20px rgba(15, 23, 42, .14); }

/* —— play.html（模拟器页）：只调外壳，游戏画面保持黑底 —— */
html[data-theme="light"] .play-info .meta h1 { color: var(--text); }
html[data-theme="light"] .play-info .back { color: #0891b2; }
html[data-theme="light"] #np-side { background: #fff; border-left-color: var(--border); }
html[data-theme="light"] #np-head { border-bottom-color: var(--border); background: linear-gradient(180deg, rgba(124, 58, 237, .06), transparent); }
html[data-theme="light"] #np-head .t { color: var(--text); }
html[data-theme="light"] #np-tabs button { color: #64748b; }
html[data-theme="light"] #np-tabs button.on { color: #0891b2; border-bottom-color: #0891b2; }
html[data-theme="light"] #np-chat-log .m { color: #334155; }
html[data-theme="light"] #np-chat-log .m b { color: #0891b2; }
html[data-theme="light"] #np-chat-in input { color: var(--text); }
html[data-theme="light"] #np-chat-in button { color: #0891b2; }
html[data-theme="light"] .np-member { color: var(--text); border-bottom-color: rgba(15, 23, 42, .07); }
html[data-theme="light"] .np-set { background: #fff; border-color: var(--border); }
html[data-theme="light"] .np-set .lab { color: var(--text); }
html[data-theme="light"] .np-switch { background: #cbd5e1; }
html[data-theme="light"] .np-switch::after { background: #fff; }
html[data-theme="light"] .np-switch.on { background: rgba(124, 58, 237, .4); }
html[data-theme="light"] .np-switch.on::after { background: #7c3aed; }
html[data-theme="light"] .np-btn:disabled { background: #eef2f7; color: #94a3b8; }
html[data-theme="light"] #np-toast { background: #fff; color: var(--text); box-shadow: 0 10px 30px rgba(15, 23, 42, .16); }
html[data-theme="light"] #cheat-panel { background: #fff; border-color: rgba(217, 119, 6, .35); color: var(--text); }
html[data-theme="light"] #cheat-panel .cp-head { background: rgba(245, 158, 11, .1); }
html[data-theme="light"] .cp-item { border-bottom-color: rgba(15, 23, 42, .07); }
html[data-theme="light"] .cp-item .cp-name { color: var(--text); }
html[data-theme="light"] .cp-item button { background: #f1f5f9; color: #b45309; border-color: #cbd5e1; }
html[data-theme="light"] .np-lock { color: #64748b; }
/* 加载层：由黑底换成浅底 */
html[data-theme="light"] #npLoad { background: radial-gradient(120% 90% at 50% 0%, #eef2ff 0%, #eef1f7 55%, #f4f6fb 100%); }
html[data-theme="light"] .npl-t { color: var(--text); }
html[data-theme="light"] .npl-bar { background: rgba(100, 116, 139, .18); }
html[data-theme="light"] .npl-pct { color: #0891b2; }
html[data-theme="light"] .npl-sub { color: #64748b; }
html[data-theme="light"] .npl-tip { color: #94a3b8; }
html[data-theme="light"] .npl-tip b { color: #0891b2; }

/* —— game-rooms.html / netplay-lobby.html（独立页，自带一套变量）—— */
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .78); }
html[data-theme="light"] .hero img,
html[data-theme="light"] .room img,
html[data-theme="light"] .rc-cover img,
html[data-theme="light"] .gc-cover img,
html[data-theme="light"] .pick img { background: #eef2f7; }
html[data-theme="light"] .hero img,
html[data-theme="light"] .hero-noimg { box-shadow: 0 12px 30px rgba(15, 23, 42, .12); }
html[data-theme="light"] .hero-noimg { background: linear-gradient(135deg, #eef2f7, #e6ecf5); }
html[data-theme="light"] .hero-noimg span { color: rgba(124, 58, 237, .5); }
html[data-theme="light"] .gc-noimg { background: linear-gradient(135deg, #eef2f7, #e6ecf5); }
html[data-theme="light"] .gc-noimg span { color: rgba(124, 58, 237, .5); }
html[data-theme="light"] .h-cat { color: #0e7490; background: rgba(8, 145, 178, .08); border-color: rgba(8, 145, 178, .26); }
html[data-theme="light"] .hstat { background: #f6f8fc; }
html[data-theme="light"] .hstat b { color: #0891b2; }
html[data-theme="light"] .modal input[type=text] { background: #f6f8fc; }
html[data-theme="light"] .seg button { background: #f6f8fc; }
html[data-theme="light"] .seg button.on { background: rgba(124, 58, 237, .08); color: #6d28d9; }
html[data-theme="light"] .mask { background: rgba(15, 23, 42, .45); }
html[data-theme="light"] .toast { box-shadow: 0 8px 26px rgba(15, 23, 42, .14); }
html[data-theme="light"] .btn-join { color: #04202b; }
html[data-theme="light"] .btn-line:hover { color: var(--text); }
html[data-theme="light"] .btn-rooms:hover { box-shadow: 0 4px 12px rgba(8, 145, 178, .22); }
html[data-theme="light"] .r-name .lock { color: #b45309; }
html[data-theme="light"] .slot.e { color: #94a3b8; }
html[data-theme="light"] .btn-big:disabled { background: #e9edf4; color: #94a3b8; }