/* =========================================================================
 * themes.css — 站点模板（皮肤）与装饰元素
 * -------------------------------------------------------------------------
 * 用法：<html data-theme="sakura">；模板名由后台「设置 → 站点 → 网站模板」决定，
 *       前台由 common.js 在 boot() 时写入（同时缓存到 localStorage，避免首屏闪烁）。
 * 结构：本文件只覆盖 CSS 变量 + 少量装饰，不改任何布局，所以切换模板不会影响功能。
 *
 * 可选模板（classic 为原始默认）：
 *   classic  经典粉     sakura  樱花粉     peach  蜜桃橙    mint   薄荷绿
 *   ocean    海盐蓝     gold    香槟金     midnight 午夜蓝（暗）  neon 霓虹夜（暗）
 *   cyber    赛博青（暗）
 * ========================================================================= */

/* =========================================================================
 * 一、装饰元素（所有模板共享，纯视觉，不改布局）
 * ========================================================================= */

/* 顶栏：底部渐变色条 + 品牌色站名 + 会员号做成小胶囊 */
.topbar { border-bottom: none; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad); opacity: .92;
}
.topbar-title { font-weight: 800; letter-spacing: .3px; }
.topbar-id {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--grad); color: #fff; font-size: 11px; font-weight: 600;
}
.topbar-balance { font-weight: 700; color: var(--brand-1); }

/* 卡片标题 / 分区标题：左侧渐变小色条 */
.card-title, .sec-title { display: flex; align-items: center; gap: 8px; }
.card-title::before, .sec-title::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 15px; border-radius: 3px;
  background: var(--grad);
}

/* 主按钮 / 大按钮：品牌色柔光 */
.btn-primary, .pc-btn, .pc-btn-primary { box-shadow: var(--glow); }

/* 资料卡片、套餐卡：轻微按压反馈 + 选中发光 */
.profile-card { transition: transform .14s ease, box-shadow .14s ease; }
.profile-card:active { transform: scale(.995); }
.plan-card.selected, .pay-method.selected { box-shadow: var(--glow); }

/* 图集图片：统一细边框阴影，看起来更整齐 */
.gallery-item { box-shadow: 0 1px 6px rgba(0, 0, 0, .07); }

/* 空状态：做成一张柔和的卡片，而不是一段裸文字 */
.empty {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 16px;
}

/* 分隔用的小圆点装饰（顶栏右侧、卡片标题右侧） */
.topbar-center { position: relative; }

/* =========================================================================
 * 二、模板变量
 * ========================================================================= */

/* classic 经典粉（默认，等同于原始配色） */
:root, [data-theme="classic"] {
  --brand-1: #ff2d6f;
  --brand-2: #ff6a3d;
  --grad: linear-gradient(135deg, #ff2d6f, #ff6a3d);
  --glow: 0 6px 18px rgba(255, 45, 111, .28);
}

/* ① 樱花粉：浅粉底、大圆角、柔和光 */
[data-theme="sakura"] {
  --brand-1: #ff5c8a;
  --brand-2: #ff9ec7;
  --grad: linear-gradient(135deg, #ff5c8a, #ff9ec7);
  --glow: 0 8px 22px rgba(255, 92, 138, .26);
  --text: #3a2b33;
  --text-2: #8a7480;
  --text-3: #b8a4ae;
  --bg: #fff5f8;
  --card: #ffffff;
  --line: #ffe4ed;
  --radius: 18px;
  --shadow: 0 4px 18px rgba(255, 92, 138, .10);
  --shadow-lg: 0 12px 36px rgba(255, 92, 138, .18);
  --link: #ff5c8a;
  --warn-bg: #fff4e8;
}
[data-theme="sakura"] body {
  background-image: radial-gradient(600px 220px at 50% -40px, #ffe3ee, transparent 70%);
}

/* ② 蜜桃橙：暖色调、圆润卡片 */
[data-theme="peach"] {
  --brand-1: #ff7a45;
  --brand-2: #ffb066;
  --grad: linear-gradient(135deg, #ff7a45, #ffb066);
  --glow: 0 8px 22px rgba(255, 122, 69, .26);
  --text: #3b2a20;
  --text-2: #8c7266;
  --text-3: #bda596;
  --bg: #fff7f1;
  --card: #ffffff;
  --line: #ffead9;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(255, 122, 69, .10);
  --shadow-lg: 0 12px 34px rgba(255, 122, 69, .18);
  --link: #ff7a45;
  --warn-bg: #fff5e6;
}
[data-theme="peach"] body {
  background-image: linear-gradient(180deg, #fff1e4 0, var(--bg) 300px);
}

/* ③ 薄荷绿：清新、干净 */
[data-theme="mint"] {
  --brand-1: #12b886;
  --brand-2: #63e6be;
  --grad: linear-gradient(135deg, #12b886, #63e6be);
  --glow: 0 8px 22px rgba(18, 184, 134, .24);
  --text: #12312a;
  --text-2: #5f7d75;
  --text-3: #9ab5ad;
  --bg: #f3fbf8;
  --card: #ffffff;
  --line: #dff3ec;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(18, 184, 134, .10);
  --shadow-lg: 0 12px 34px rgba(18, 184, 134, .18);
  --link: #12b886;
  --ok: #12b886;
  --warn-bg: #fff8e6;
}
[data-theme="mint"] body {
  background-image: radial-gradient(700px 240px at 50% -60px, #e2f7f0, transparent 70%);
}

/* ④ 海盐蓝：冷静、克制 */
[data-theme="ocean"] {
  --brand-1: #2f80ff;
  --brand-2: #43c6ff;
  --grad: linear-gradient(135deg, #2f80ff, #43c6ff);
  --glow: 0 8px 22px rgba(47, 128, 255, .24);
  --text: #172331;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --bg: #f4f8ff;
  --card: #ffffff;
  --line: #e2ecfb;
  --radius: 15px;
  --shadow: 0 4px 16px rgba(47, 128, 255, .10);
  --shadow-lg: 0 12px 34px rgba(47, 128, 255, .18);
  --link: #2f80ff;
  --warn-bg: #fff7e6;
}
[data-theme="ocean"] body {
  background-image: linear-gradient(180deg, #e8f1ff 0, var(--bg) 280px);
}

/* ⑤ 香槟金：轻奢、米金底 */
[data-theme="gold"] {
  --brand-1: #b8860b;
  --brand-2: #e0b055;
  --grad: linear-gradient(135deg, #b8860b, #e0b055);
  --glow: 0 8px 22px rgba(184, 134, 11, .24);
  --text: #332b18;
  --text-2: #82755a;
  --text-3: #b3a68a;
  --bg: #fdfaf3;
  --card: #ffffff;
  --line: #f0e6cf;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(184, 134, 11, .10);
  --shadow-lg: 0 12px 34px rgba(184, 134, 11, .18);
  --link: #b8860b;
  --warn: #c98a00;
  --warn-bg: #fff6df;
}
[data-theme="gold"] body {
  background-image: linear-gradient(180deg, #fbf3e2 0, var(--bg) 320px);
}

/* ⑥ 午夜蓝（暗色） */
[data-theme="midnight"] {
  --brand-1: #5b8cff;
  --brand-2: #8f6bff;
  --grad: linear-gradient(135deg, #5b8cff, #8f6bff);
  --glow: 0 8px 24px rgba(91, 140, 255, .35);
  --text: #e8ecf6;
  --text-2: #9aa6c0;
  --text-3: #6f7b96;
  --bg: #0f1421;
  --card: #1a2132;
  --line: #2a3348;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .55);
  --ok: #34d399;
  --ok-bg: #123326;
  --err: #ff6b81;
  --warn: #f7b955;
  --warn-bg: #33291a;
  --link: #7aa2ff;
}
[data-theme="midnight"] body {
  background-image: radial-gradient(900px 320px at 50% -80px, rgba(91, 140, 255, .16), transparent 70%);
}

/* ⑦ 霓虹夜（暗色 + 荧光粉紫） */
[data-theme="neon"] {
  --brand-1: #ff2d9b;
  --brand-2: #a855f7;
  --grad: linear-gradient(135deg, #ff2d9b, #a855f7);
  --glow: 0 0 22px rgba(255, 45, 155, .45);
  --text: #f2eaff;
  --text-2: #b9a8d6;
  --text-3: #8577a8;
  --bg: #0b0714;
  --card: #17102a;
  --line: #2e2050;
  --radius: 16px;
  --shadow: 0 4px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 46px rgba(168, 85, 247, .28);
  --ok: #4ade80;
  --ok-bg: #123023;
  --err: #ff5c8a;
  --warn: #ffd166;
  --warn-bg: #33270f;
  --link: #c084fc;
}
[data-theme="neon"] body {
  background-image:
    radial-gradient(700px 260px at 20% -60px, rgba(255, 45, 155, .22), transparent 70%),
    radial-gradient(700px 260px at 90% 0%, rgba(168, 85, 247, .20), transparent 70%);
}
[data-theme="neon"] .card { border: 1px solid rgba(168, 85, 247, .28); }

/* ⑧ 赛博青（暗色 + 青紫霓虹 + 网格底纹） */
[data-theme="cyber"] {
  --brand-1: #00e5ff;
  --brand-2: #7c4dff;
  --grad: linear-gradient(135deg, #00e5ff, #7c4dff);
  --glow: 0 0 20px rgba(0, 229, 255, .40);
  --text: #e6fbff;
  --text-2: #8fb3c4;
  --text-3: #65808f;
  --bg: #050d12;
  --card: #0d1a22;
  --line: #16323d;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 46px rgba(0, 229, 255, .22);
  --ok: #00e5a0;
  --ok-bg: #062b23;
  --err: #ff5470;
  --warn: #ffd166;
  --warn-bg: #2b2410;
  --link: #00e5ff;
}
[data-theme="cyber"] body {
  background-image:
    linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px),
    radial-gradient(800px 300px at 50% -80px, rgba(0, 229, 255, .16), transparent 70%);
  background-size: 22px 22px, 22px 22px, auto;
}
[data-theme="cyber"] .card { border: 1px solid rgba(0, 229, 255, .22); }

/* =========================================================================
 * 三、暗色模板的补丁
 * style.css 里有若干硬编码的浅色（白卡片、浅灰占位等），暗色模板下要改写。
 * ========================================================================= */
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .select,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .input,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .textarea,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .topbar,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .dsh-sheet,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .dsh-modal,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .sk-card,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .fav-toggle,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .ph-fav,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .contact-dock,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .plan-card,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .preset,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .chat-bubble,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .chat-inputbar,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .chat-float-head,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .mobile-only-guard {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}

:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pc-img-main,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pc-img-side,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .gallery-item,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pc-img-ph {
  background: #22304a;
  color: var(--text-3);
}

:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pc-summary,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .fav-toggle.on,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .preset.selected {
  background: rgba(255, 255, 255, .07);
}
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .vote-btn.like.on,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .vote-btn.dislike.on {
  background: rgba(255, 255, 255, .10);
}
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .vip-banner {
  color: var(--warn);
}
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .vip-membership {
  background: var(--ok-bg);
  color: var(--ok);
}
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pwd-err,
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .pay-hint {
  background: rgba(255, 255, 255, .06);
  color: var(--err);
}
:is([data-theme="midnight"], [data-theme="neon"], [data-theme="cyber"]) .gallery-item img {
  background: #22304a;
}