/* ============================================================
 * 网站主题（配色方案）
 *
 * 原理：style.css 的 :root 定义基础变量，这里用
 *       html[data-theme="xxx"] 覆盖。
 *       属性选择器权重(0,1,1) 高于 :root(0,1,0)，所以能覆盖，不需要 !important。
 *
 * 新增主题：在下面加一段 html[data-theme="新名"]{...}，
 *          并在 includes/theme.php 的 themeList() 里加一项即可。
 * ========================================================== */

/* ---------- 默认 · 臻藏金 ---------- */
html[data-theme="gold"]{
  --bg:#f5f6f8; --card:#fff; --line:#e5e8ec; --text:#1f2328; --muted:#6b7480; --muted2:#8b93a1;
  --gold:#b8934a; --gold2:#d8b877; --gold3:#8a6d2f; --dark:#232733;
  --green:#2e8b57; --red:#c0392b;
  --topbar:#f0f2f5; --hero1:#2b3140; --hero2:#1d222c; --chip:#f0f2f5;
  --hdrbg:#fff; --hdrtext:#1f2328; --onbrand:#fff; --ondark:#fff;
  --tint1:#fffdf6; --tint2:#fdf6e6; --tintline:#f0e4c4;
}

/* ---------- 中国红 ---------- */
html[data-theme="red"]{
  --bg:#faf5f4; --card:#fff; --line:#f0dcd8; --text:#2a1f1d; --muted:#7a6660; --muted2:#9c8781;
  --gold:#c0392b; --gold2:#e05a4a; --gold3:#8a2a22; --dark:#7a1f16;
  --green:#2e8b57; --red:#c0392b;
  --topbar:#f7e9e6; --hero1:#8c261c; --hero2:#6b1a12; --chip:#f7e9e6;
  --hdrbg:#fff; --hdrtext:#2a1f1d; --onbrand:#fff; --ondark:#fff;
  --tint1:#fff8f7; --tint2:#fdecea; --tintline:#f2cfc8;
}

/* ---------- 深邃黑（夜间） ---------- */
html[data-theme="dark"]{
  --bg:#15181e; --card:#1e222a; --line:#2c313b; --text:#e6e9ee; --muted:#9aa3b0; --muted2:#7b8493;
  --gold:#d8b877; --gold2:#e8cf9a; --gold3:#e8cf9a; --dark:#0f1216;
  --green:#4caf7d; --red:#e05a4a;
  --topbar:#1a1e25; --hero1:#232833; --hero2:#15181e; --chip:#262b34;
  --hdrbg:#1e222a; --hdrtext:#e6e9ee; --onbrand:#15181e; --ondark:#e6e9ee;
  --tint1:#232833; --tint2:#1a1e25; --tintline:#2c313b;
}
/* 深色下需要额外修掉几处写死的浅色底 */
html[data-theme="dark"] .topbar{color:var(--muted)}
html[data-theme="dark"] .hsearch input{background:var(--card);color:var(--text);border-color:var(--gold)}
html[data-theme="dark"] .inp,
html[data-theme="dark"] select.inp,
html[data-theme="dark"] textarea.inp{background:#262b34;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .m-chip{background:var(--chip);color:var(--muted)}
html[data-theme="dark"] .m-chips{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] ::placeholder{color:var(--muted2)}
html[data-theme="dark"] .site-header{background:var(--hdrbg);border-color:var(--line)}

/* ---------- 樱花粉 ---------- */
html[data-theme="pink"]{
  --bg:#fdf5f7; --card:#fff; --line:#f5dfe6; --text:#2b2024; --muted:#7d6a71; --muted2:#a08d95;
  --gold:#e0567f; --gold2:#f08aa8; --gold3:#a8385e; --dark:#8e3350;
  --green:#3d9970; --red:#d6406f;
  --topbar:#fceef2; --hero1:#a03a5c; --hero2:#822e4a; --chip:#fceef2;
  --hdrbg:#fff; --hdrtext:#2b2024; --onbrand:#fff; --ondark:#fff;
  --tint1:#fff8fa; --tint2:#fceaf0; --tintline:#f4c9d8;
}

/* ---------- 清新绿 ---------- */
html[data-theme="green"]{
  --bg:#f4f8f5; --card:#fff; --line:#dde9e0; --text:#1f2a22; --muted:#667a6c; --muted2:#8a9c90;
  --gold:#2e8b57; --gold2:#5cb187; --gold3:#1f6b44; --dark:#1e5c39;
  --green:#2e8b57; --red:#c0392b;
  --topbar:#e8f2ea; --hero1:#256b45; --hero2:#1a5034; --chip:#e8f2ea;
  --hdrbg:#fff; --hdrtext:#1f2a22; --onbrand:#fff; --ondark:#fff;
  --tint1:#f6fbf7; --tint2:#eaf5ee; --tintline:#cfe5d8;
}

/* ---------- 天空蓝 ---------- */
html[data-theme="blue"]{
  --bg:#f4f7fa; --card:#fff; --line:#dde5ee; --text:#1f262d; --muted:#66737f; --muted2:#8a97a4;
  --gold:#2f6fb5; --gold2:#5b93d1; --gold3:#245a91; --dark:#1e4a78;
  --green:#2e8b57; --red:#c0392b;
  --topbar:#e8eff7; --hero1:#245a91; --hero2:#1a4370; --chip:#e8eff7;
  --hdrbg:#fff; --hdrtext:#1f262d; --onbrand:#fff; --ondark:#fff;
  --tint1:#f7fafd; --tint2:#eaf2fb; --tintline:#cfe0f2;
}

/* ---------- 怀念灰（哀悼纪念） ----------
   说明：整站去色 + 图片转灰，表达对遇难者的哀思。
   这里刻意不用 filter:grayscale() 加在 html/body 上——
   那会让 position:fixed 的元素（浮动客服按钮）跟着页面滚动，是常见坑。
   改为「灰度配色 + 图片单独置灰」，视觉一致且不破坏布局。      */
html[data-theme="gray"]{
  --bg:#f0f0f0; --card:#fafafa; --line:#dcdcdc; --text:#2b2b2b; --muted:#6b6b6b; --muted2:#8f8f8f;
  --gold:#6b6b6b; --gold2:#8a8a8a; --gold3:#4a4a4a; --dark:#3a3a3a;
  --green:#5a5a5a; --red:#5c5c5c;
  --topbar:#e8e8e8; --hero1:#4a4a4a; --hero2:#333; --chip:#e8e8e8;
  --hdrbg:#fafafa; --hdrtext:#2b2b2b; --onbrand:#fff; --ondark:#f0f0f0;
  --tint1:#f7f7f7; --tint2:#eee; --tintline:#ddd;
}
html[data-theme="gray"] img,
html[data-theme="gray"] .site-logo,
html[data-theme="gray"] video,
html[data-theme="gray"] .m-hero,
html[data-theme="gray"] .hero{filter:grayscale(100%)}
/* 价格已由 --red 统一变灰，这里处理剩下的装饰色 */
html[data-theme="gray"] .pill,
html[data-theme="gray"] .tag.p{background:#e4e4e4;color:#4a4a4a}
/* 微信绿分享按钮 / 浮动客服 / 分享提示一并去色 */
html[data-theme="gray"] .m-actbar .m-btn.share{
  background:linear-gradient(135deg,#6b6b6b,#4a4a4a);box-shadow:none;
}
html[data-theme="gray"] .m-sharetip{background:#e8e8e8;color:#3d3d3d}
html[data-theme="gray"] .chat-fab{background:#5a5a5a}
html[data-theme="gray"] .chat-hd{background:linear-gradient(135deg,#4a4a4a,#5a5a5a)}

/* ============================================================
 * 哀悼提示条
 * ========================================================== */
.mourning-bar{
  background:#3a3a3a;color:#e2e2e2;text-align:center;
  font-size:13px;letter-spacing:2px;padding:9px 12px;line-height:1.5;
}
.mourning-bar span{opacity:.95}

/* ============================================================
 * 主题切换器 · PC
 * ========================================================== */
.ts{position:relative;display:inline-block;vertical-align:middle}
.ts-btn{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--muted);font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:.15s;font-family:inherit
}
.ts-btn:hover{color:var(--gold);border-color:var(--gold)}
.ts-btn i{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ts-btn:after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;opacity:.7}
.ts-panel{
  position:absolute;right:0;top:34px;z-index:90;width:170px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.13);padding:6px
}
.ts-h{font-size:12px;color:var(--muted2);padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ts-i{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;
  border:0;background:none;border-radius:7px;font-size:13.5px;color:var(--text);
  cursor:pointer;text-align:left;font-family:inherit
}
.ts-i i{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ts-i span{flex:1}
.ts-i:hover{background:var(--chip)}
.ts-i.on{color:var(--gold);font-weight:700;background:var(--chip)}
.ts-i b{color:var(--gold);font-size:13px}
.ts-i.mourning{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;border-radius:0}
.ts-i.mourning span{color:var(--muted)}

/* ============================================================
 * 主题切换器 · 手机版
 * ========================================================== */
.ts-m{position:relative;display:inline-block}
.ts-m-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--chip);padding:0
}
.ts-m-btn i{width:16px;height:16px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ts-m-panel{
  position:absolute;right:0;top:36px;z-index:120;width:180px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px
}
.ts-m-h{font-size:12px;color:var(--muted2);padding:7px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ts-m-i{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:0;background:none;border-radius:8px;font-size:14px;color:var(--text);
  cursor:pointer;text-align:left;font-family:inherit
}
.ts-m-i i{width:16px;height:16px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ts-m-i span{flex:1}
.ts-m-i:active{background:var(--chip)}
.ts-m-i.on{color:var(--gold);font-weight:700;background:var(--chip)}
.ts-m-i b{color:var(--gold)}
.ts-m-i.mourning{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;border-radius:0}
.ts-m-i.mourning span{color:var(--muted)}