/* ====================================
   多套前端主题 — CSS变量驱动
   通过 data-theme 属性切换：
   default | dark | rose | four | five | six

   注意：主题 five（模板5 · 粉紫柔光）的变量必须与
   templates/five/layout/main.php 内联样式保持一致，
   因为「其余页面复用 home 模板 + home 布局（data-theme="five"）」时
   只有本文件的变量生效。
   ==================================== */

/* ==================================== */

/* 全局兜底：模板中以 rgba(var(--accent-rgb),.12) 形式使用时不会失效 */
:root {
    --accent-rgb: 67,97,238;
    --accent2-rgb: 114,9,183;
}

/* ========== 主题1：清新蓝（默认） ========== */
[data-theme="default"] {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255,255,255,0.95);
    --bg-footer: #1a1a2e;
    --text-primary: #1a1a2e;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;
    --color-accent: #4361ee;
    --color-accent-hover: #3a56d4;
    --color-accent2: #7209b7;
    --color-success: #06d6a0;
    --color-danger: #ef476f;
    --color-warning: #f7931e;
    --border-color: #f0f0f0;
    --border-light: #e8e8e8;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.03);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --gradient-hero: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    --gradient-card: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    /* 品牌色 RGB 分量：供模板写 rgba(var(--accent-rgb),.12) 使用 */
    --accent-rgb: 67,97,238;
    --accent2-rgb: 114,9,183;
}

/* ========== 主题2：暗夜黑 ========== */
[data-theme="dark"] {
    --bg-primary: #0a0e27;
    --bg-secondary: #111636;
    --bg-card: rgba(255,255,255,0.04);
    --bg-header: rgba(10,14,39,0.92);
    --bg-footer: #060914;
    --text-primary: #e0e6ed;
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted: rgba(255,255,255,0.35);
    --text-inverse: #0a0e27;
    --color-accent: #6366f1;
    --color-accent-hover: #818cf8;
    --color-accent2: #a855f7;
    --color-success: #10b981;
    --color-danger: #f43f5e;
    --color-warning: #f59e0b;
    --border-color: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.12);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    --gradient-card: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --accent-rgb: 99,102,241;
    --accent2-rgb: 168,85,247;
}

/* ========== 主题3：玫红紫 ========== */
[data-theme="rose"] {
    --bg-primary: #fdf2f8;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255,255,255,0.95);
    --bg-footer: #4a1942;
    --text-primary: #831843;
    --text-secondary: #9d174d;
    --text-muted: #be185d;
    --text-inverse: #ffffff;
    --color-accent: #db2777;
    --color-accent-hover: #be185d;
    --color-accent2: #9333ea;
    --color-success: #059669;
    --color-danger: #e11d48;
    --color-warning: #ea580c;
    --border-color: #fce7f3;
    --border-light: #fbcfe8;
    --shadow-sm: 0 1px 4px rgba(219,39,119,0.04);
    --shadow-md: 0 2px 12px rgba(219,39,119,0.08);
    --shadow-lg: 0 8px 24px rgba(219,39,119,0.1);
    --gradient-hero: linear-gradient(135deg, #db2777 0%, #9333ea 100%);
    --gradient-card: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --accent-rgb: 219,39,119;
    --accent2-rgb: 147,51,234;
}

/* ========== 主题4：热情红 ========== */
[data-theme="four"] {
    --bg-primary: #fef2f2;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255,255,255,0.95);
    --bg-footer: #450a0a;
    --text-primary: #450a0a;
    --text-secondary: #7f1d1d;
    --text-muted: #991b1b;
    --text-inverse: #ffffff;
    --color-accent: #ef476f;
    --color-accent-hover: #dc2626;
    --color-accent2: #f43f5e;
    --color-success: #059669;
    --color-danger: #e11d48;
    --color-warning: #f59e0b;
    --border-color: #fee2e2;
    --border-light: #fecaca;
    --shadow-sm: 0 1px 4px rgba(239,71,111,0.04);
    --shadow-md: 0 2px 12px rgba(239,71,111,0.08);
    --shadow-lg: 0 8px 24px rgba(239,71,111,0.1);
    --gradient-hero: linear-gradient(135deg, #ef476f 0%, #dc2626 100%);
    --gradient-card: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --accent-rgb: 239,71,111;
    --accent2-rgb: 244,63,94;
}

/* ========== 主题5：粉紫柔光（浅色 · 爱心气球 · 浪漫和解） ==========
   与 templates/five/layout/main.php 内联变量保持一致：
   首页使用该布局自带样式，其余页面（复用 home 模板）依赖这里的变量 */
[data-theme="five"] {
    --bg-primary: #fdf8fc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255,255,255,0.78);
    --bg-footer: #fdf8fc;
    --text-primary: #3a2b45;
    --text-secondary: #7a6a86;
    --text-muted: #a89cb3;
    --text-inverse: #ffffff;
    --color-accent: #ff5f9e;
    --color-accent-hover: #f0407f;
    --color-accent2: #a78bfa;
    --color-success: #22c39a;
    --color-danger: #ff5c7a;
    --color-warning: #ffa72b;
    --border-color: #fbeaf5;
    --border-light: #f6dcea;
    --shadow-sm: 0 2px 8px rgba(190,120,170,0.08);
    --shadow-md: 0 10px 24px -18px rgba(190,120,170,0.9);
    --shadow-lg: 0 20px 44px -24px rgba(190,120,170,0.95);
    --gradient-hero: linear-gradient(120deg, #ff9dc0 0%, #c49bf5 100%);
    --gradient-card: linear-gradient(120deg, #ffb0cd 0%, #b891f3 100%);
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --accent-rgb: 255,95,158;
    --accent2-rgb: 167,139,250;
}

/* ========== 主题6：便签卡（浅灰白卡 · 黄色高亮 · 红色行动） ========== */
[data-theme="six"] {
    --bg-primary: #f2f3f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-footer: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-muted: #9aa0aa;
    --text-inverse: #ffffff;
    --color-accent: #f5a623;
    --color-accent-hover: #e2911a;
    --color-accent2: #e60012;
    --color-success: #22b573;
    --color-danger: #e60012;
    --color-warning: #f5a623;
    --border-color: #f0f0f0;
    --border-light: #eaeaea;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 30px rgba(0,0,0,0.1);
    --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
    --gradient-card: linear-gradient(135deg, #fff7e6 0%, #ffe9bf 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --accent-rgb: 245,166,35;
    --accent2-rgb: 230,0,18;
}

/* ============================================================
   主题5「粉紫柔光」— 全站页面统一对齐首页色调
   ------------------------------------------------------------
   模板5只自带首页与布局样式，其余页面复用 templates/home/ 下的模板，
   用 templates/home/layout/main.php（<html data-theme="five">）渲染，
   页面模板内的 <style> 位于 body，晚于本文件加载。
   因此这里用 [data-theme="five"] 前缀提升选择器特异性（0,2,0 > 0,1,0），
   在不使用 !important 的情况下稳定覆盖这些页面的类级样式
   （含 home 布局里写死的黄色公告条、实心顶部栏、贴底导航等）。
   ============================================================ */

/* 页面底色：柔光渐变，与首页一致 */
[data-theme="five"] body { background: #fdf8fc; }
[data-theme="five"] .app-container {
    background:
        radial-gradient(72% 26% at 10% -6%, #ffe4f1 0%, rgba(255,228,241,0) 68%),
        radial-gradient(64% 22% at 92% 0%, #ebe3ff 0%, rgba(235,227,255,0) 70%),
        linear-gradient(180deg, #fdeaf6 0%, #f5edff 44%, #fdf8fc 76%, #fdf8fc 100%);
}

/* 顶部栏：浅色毛玻璃，融入渐变背景 */
[data-theme="five"] .app-header {
    background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.28));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: none;
    box-shadow: none;
}
[data-theme="five"] .header-inner { max-width: 560px; }
[data-theme="five"] .logo {
    color: #6b4a7c; font-size: 15px; font-weight: 700; letter-spacing: .4px;
}
[data-theme="five"] .logo::before { content: none; }
[data-theme="five"] .nav-links { gap: 14px; }
[data-theme="five"] .nav-links a {
    color: #8b7898; font-size: 13.5px; border-bottom: none; padding: 4px 2px;
}
[data-theme="five"] .nav-links a:hover { color: var(--color-accent); border-bottom-color: transparent; }
[data-theme="five"] .nav-login-btn {
    background: linear-gradient(120deg, #ff9dc0, #c49bf5); color: #fff;
    border-radius: 999px; padding: 6px 18px; font-weight: 600;
    box-shadow: 0 10px 20px -12px rgba(214,124,190,.95);
}
[data-theme="five"] .nav-user { color: #6b4a7c; font-size: 13px; }

/* 公告条：粉紫渐变（覆盖 home 布局里写死的黄色告警样式） */
[data-theme="five"] .notice-bar {
    background: linear-gradient(120deg, #ff9ec4, #b98cf7);
    border-bottom: none; padding: 0;
    box-shadow: 0 10px 22px -18px rgba(180,110,190,.95);
}
[data-theme="five"] .notice-inner { max-width: 560px; padding: 10px 18px; gap: 9px; }
[data-theme="five"] .notice-tag {
    background: rgba(255,255,255,.28); color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
}
[data-theme="five"] .notice-text { color: #fff; font-size: 13px; font-weight: 500; }
[data-theme="five"] .notice-thumb { border-radius: 8px; border: 1px solid rgba(255,255,255,.55); }
[data-theme="five"] .notice-close,
[data-theme="five"] .notice-close:hover { color: rgba(255,255,255,.92); }

/* 底部导航：悬浮白色胶囊 */
[data-theme="five"] .bottom-nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 66px; border-radius: 24px; border: none; padding-bottom: 0; overflow: hidden;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 36px -18px rgba(184,124,180,.85), 0 2px 6px rgba(184,124,180,.14);
}
[data-theme="five"] .bn-item { color: #a89cb3; font-size: 11px; gap: 4px; }
[data-theme="five"] .bn-item svg { width: 23px; height: 23px; stroke-width: 1.9; }
[data-theme="five"] .bn-item.active,
[data-theme="five"] .bn-item.active svg {
    color: var(--color-accent); stroke: var(--color-accent);
}
[data-theme="five"] .bn-item.active { font-weight: 700; }
[data-theme="five"] .bn-item.active svg { filter: drop-shadow(0 4px 8px rgba(255,95,158,.35)); }
[data-theme="five"] .app-main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
@media (min-width: 769px) {
    [data-theme="five"] .app-main { padding-bottom: 40px; }
}

/* 按钮与浮层：圆润粉紫 */
[data-theme="five"] .btn { border-radius: 999px; }
[data-theme="five"] .btn-primary,
[data-theme="five"] .btn-primary:hover {
    background: linear-gradient(120deg, #ff8fb6, #b98cf7); color: #fff;
    box-shadow: 0 12px 24px -16px rgba(200,120,200,.95);
}
[data-theme="five"] .btn-primary:hover { background: linear-gradient(120deg, #ff7fae, #a97df6); }
[data-theme="five"] .btn-outline {
    background: #fff; color: var(--color-accent); border: 2px solid var(--border-light);
}
[data-theme="five"] .btn-outline:hover { background: #fff5fa; }
[data-theme="five"] .toast {
    background: linear-gradient(120deg, #ff8fb6, #b98cf7); color: #fff;
    border-radius: 16px; box-shadow: 0 16px 36px -20px rgba(190,120,180,.95);
}
[data-theme="five"] .loading { background: rgba(255,248,252,.72); }
[data-theme="five"] .loading-spinner { border-top-color: var(--color-accent); }
[data-theme="five"] .pay-dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* 通用白卡：统一柔和边框 + 粉紫投影 */
[data-theme="five"] .package-card,
[data-theme="five"] .flow-step,
[data-theme="five"] .feature-card {
    background: #fff; border-color: var(--border-color);
    box-shadow: 0 16px 32px -26px rgba(184,124,180,.95), 0 2px 8px rgba(200,150,200,.07);
}
[data-theme="five"] .package-card:hover,
[data-theme="five"] .feature-card:hover { border-color: var(--color-accent); }
[data-theme="five"] .package-num,
[data-theme="five"] .package-price { color: var(--color-accent); }

/* ============================================================
   主题5「粉紫柔光」— 次级页面细节精调
   把首页 hb-* 的设计语言（22px 大圆角白卡 + #fbeaf5 粉描边 +
   柔粉投影 + 999px 胶囊 + 三段粉紫渐变主按钮 + 渐变价格数字）
   套用到发短信/信箱/电话/传话/个人中心/订单等复用页面。
   注：hover/active 状态必须显式写出（页面自有 :hover 与
   本前缀同特异性，但位置更靠后会胜出）。
   ============================================================ */

/* ---- 1. 所有卡片统一为首页 hb-card 同款 ---- */
[data-theme="five"] .mb-card,
[data-theme="five"] .sr-card,
[data-theme="five"] .sr-reply-card,
[data-theme="five"] .send-card,
[data-theme="five"] .order-card,
[data-theme="five"] .wd-card,
[data-theme="five"] .log-item,
[data-theme="five"] .relay-item,
[data-theme="five"] .detail-card,
[data-theme="five"] .rc-section,
[data-theme="five"] .profile-card,
[data-theme="five"] .call-section,
[data-theme="five"] .auth-modal,
[data-theme="five"] .result-card {
    border-radius: 22px;
    border: 1px solid #fbeaf5;
    box-shadow: 0 16px 32px -26px rgba(184,124,180,.95), 0 2px 8px rgba(200,150,200,.07);
}

/* 底部弹层：上缘大圆角 */
[data-theme="five"] .rc-modal-box { border-radius: 28px 28px 0 0; }

/* 页面级渐变头（传话列表/详情、账变/余额记录）：底部收圆角，同首页英雄区 */
[data-theme="five"] .page-header { border-radius: 0 0 22px 22px; }

/* ---- 2. 页面主标题：加粗 + 首页标题字色 ---- */
[data-theme="five"] .mb-header h1,
[data-theme="five"] .sr-header h1,
[data-theme="five"] .rc-header h1,
[data-theme="five"] .list-wrap h2,
[data-theme="five"] .send-card h2,
[data-theme="five"] .profile-card h2 {
    color: #3a2b45; letter-spacing: .4px;
}
[data-theme="five"] .mb-header h1,
[data-theme="five"] .sr-header h1,
[data-theme="five"] .rc-header h1 { font-weight: 800; }

/* ---- 3. 状态标签 / 分类 tab：胶囊化 ---- */
[data-theme="five"] .mb-status,
[data-theme="five"] .sr-status,
[data-theme="five"] .relay-status,
[data-theme="five"] .wd-status,
[data-theme="five"] .mb-reply-tag,
[data-theme="five"] .mb-tab,
[data-theme="five"] .type-btn.active { border-radius: 999px; }

[data-theme="five"] .mb-tab.active {
    background: linear-gradient(118deg, #ff8fb6, #b98cf7);
    box-shadow: 0 10px 22px -14px rgba(214,124,190,.95);
}

/* ---- 4. 分页：胶囊化，当前页粉紫渐变 ---- */
[data-theme="five"] .mb-page,
[data-theme="five"] .pagination a,
[data-theme="five"] .pagination span,
[data-theme="five"] .rc-pagination a { border-radius: 999px; }
[data-theme="five"] .mb-page.active,
[data-theme="five"] .pagination a.active,
[data-theme="five"] .rc-pagination a.active {
    background: linear-gradient(118deg, #ff8fb6, #b98cf7);
    color: #fff; border: none;
    box-shadow: 0 10px 22px -14px rgba(214,124,190,.95);
}

/* ---- 5. 主操作按钮：首页 hb-cta 同款三段渐变 + 内高光 + 胶囊 ---- */
[data-theme="five"] .btn-submit,
[data-theme="five"] .rc-submit,
[data-theme="five"] .rc-modal-btn,
[data-theme="five"] .mb-btn,
[data-theme="five"] .call-btn-primary,
[data-theme="five"] .btn-register {
    background: linear-gradient(118deg, #ff8fb6 0%, #e988d8 52%, #b98cf7 100%);
    color: #fff; border: none; border-radius: 999px;
    box-shadow: 0 20px 38px -20px rgba(232,120,190,.95), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="five"] .btn-submit:hover,
[data-theme="five"] .rc-submit:hover,
[data-theme="five"] .call-btn-primary:hover,
[data-theme="five"] .btn-register:hover {
    background: linear-gradient(118deg, #ff8fb6 0%, #e988d8 52%, #b98cf7 100%);
    filter: brightness(1.05);
    box-shadow: 0 22px 42px -20px rgba(232,120,190,.95), inset 0 1px 0 rgba(255,255,255,.45);
}

/* 登录/注册页主按钮：首页 hb-cta 同款渐变胶囊 */
[data-theme="five"] .btn-login {
    background: linear-gradient(118deg, #ff8fb6 0%, #e988d8 52%, #b98cf7 100%);
    border-radius: 999px;
    box-shadow: 0 20px 38px -20px rgba(232,120,190,.95), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="five"] .btn-login:hover {
    background: linear-gradient(118deg, #ff8fb6 0%, #e988d8 52%, #b98cf7 100%);
    filter: brightness(1.05);
    box-shadow: 0 22px 42px -20px rgba(232,120,190,.95), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="five"] .btn-submit:active,
[data-theme="five"] .rc-submit:active,
[data-theme="five"] .call-btn-primary:active { transform: scale(.98); }

/* 小操作按钮（去付款/获取中间号/取号码等）：粉紫实底胶囊 */
[data-theme="five"] .mini-btn,
[data-theme="five"] .collect-btn,
[data-theme="five"] .rc-link-btn { border-radius: 999px; }
[data-theme="five"] .mini-btn {
    background: linear-gradient(118deg, #ff8fb6, #b98cf7); color: #fff;
    box-shadow: 0 8px 18px -12px rgba(214,124,190,.95);
}
[data-theme="five"] .mini-btn:hover { filter: brightness(1.05); }
[data-theme="five"] .mini-btn-outline,
[data-theme="five"] .call-btn-outline {
    background: #fff7fb; color: var(--color-accent); border: 1.6px solid #ffb8d2;
}

/* 获取验证码：主题主色胶囊 */
[data-theme="five"] .btn-code {
    background: linear-gradient(118deg, #ff8fb6, #b98cf7);
    border-radius: 999px;
    box-shadow: 0 8px 18px -12px rgba(214,124,190,.95);
}
[data-theme="five"] .btn-code:disabled { background: #d8cfe0; box-shadow: none; }

/* ---- 6. 价格 / 统计数字：首页套餐同款粉紫渐变字 ---- */
[data-theme="five"] .package-price,
[data-theme="five"] .relay-footer .price,
[data-theme="five"] .rc-price-hint .rc-price,
[data-theme="five"] .remain strong,
[data-theme="five"] .detail-value[style*="font-weight:600"] {
    background: linear-gradient(118deg, #ff6fa5, #a78bfa);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #ff6fa5;
}

/* 个人中心资产卡：首页 hb-stat 同款半透明白 + 玫粉数字 */
[data-theme="five"] .uc-asset {
    background: rgba(255,255,255,.8); border: 1px solid #fbeaf5; border-radius: 18px;
    box-shadow: 0 12px 26px -24px rgba(184,124,180,.95);
}
[data-theme="five"] .uc-avalue {
    color: #e7548f; font-variant-numeric: tabular-nums;
    background: none; -webkit-text-fill-color: currentColor;
}

/* ---- 7. 表单聚焦：柔粉光圈（不改变边框逻辑） ---- */
[data-theme="five"] input:focus,
[data-theme="five"] textarea:focus,
[data-theme="five"] select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,95,158,.14);
}

/* ---- 8. 空状态：柔粉图标底 ---- */
[data-theme="five"] .mb-empty,
[data-theme="five"] .empty-relay,
[data-theme="five"] .sr-empty,
[data-theme="five"] .empty { color: #b9aec4; }
[data-theme="five"] .mb-empty svg,
[data-theme="five"] .sr-empty svg { color: #e4b8d4; opacity: 1; }

/* ---- 9. 版心统一：次级页面容器与首页 hb-page/顶栏同为 560px ---- */
[data-theme="five"] .send-wrap,
[data-theme="five"] .profile-wrap,
[data-theme="five"] .match-wrap,
[data-theme="five"] .result-wrap,
[data-theme="five"] .mailbox-wrap,
[data-theme="five"] .sr-wrap,
[data-theme="five"] .uc-wrap,
[data-theme="five"] .rc-wrap,
[data-theme="five"] .rc-card,
[data-theme="five"] .rc-modal-box,
[data-theme="five"] .list-wrap,
[data-theme="five"] .call-wrap { max-width: 560px; }