/* ===========================================================
   渡伴*AI 官网门户 · 外观主题表
   -----------------------------------------------------------
   两层可调：
     1) 配色主题   html[data-theme="moye|qingci|nuanmu|danxia|canglan|suye|feitao|xingtan|qiansha|duxin
                                |hutao|naiyou|kaji|bohe|wulan|taofen|ehuang"]
     2) 背景样式   html[data-bg="plain|paper|glow|eye"]
   两者自由组合。用户选择存本地 + 账号；管理员可指定站点默认。
   ⚠️ 新增主题务必同步：lib/theme.js（服务端白名单）、js/theme-boot.js（前端清单）,3份
  配色主题分两系：
    · 1-10  东方器物系（墨玉/青瓷/暖木…）
    · 11-17 家居配色系（业主 2026-10-01：米白+深胡桃木、奶油白+樱桃木/原木、浅卡其+深卡其，
            及四套软装公式 薄荷/雾蓝/桃粉/鹅黄）。家居系把给定浅色用作页面底色（大面积提亮），
            品牌色取同色系加深版，保证白字按钮/链接对比度 ≥4.5:1（浅色直接当品牌色会不可读）。
   =========================================================== */

/* ---------- 1. 墨玉（默认：墨绿 + 暖金） ---------- */
:root,
html[data-theme="moye"] {
  --ink: #1E2420;
  --ink-2: #55605A;
  --ink-3: #8A938C;
  --bg: #F8F7F0;
  --bg-2: #EFEEE2;
  --surface: #FFFFFF;
  --line: #E5E1D4;
  --line-2: #D5D0C0;

  --brand: #2E594C;
  --brand-2: #1F3F36;
  --brand-soft: #EAF1EE;

  --accent: #B9722F;
  --accent-2: #96581E;
  --accent-soft: #FBF0E2;

  --nav-bg: rgba(248, 247, 240, .88);
  --logo-grad: linear-gradient(150deg, #40765F 0%, #1F3F36 100%);
  --hero-grad: linear-gradient(160deg, #26483F 0%, #1C3A32 55%, #17302A 100%);
  --hero-glow: rgba(185, 114, 47, .22);
  --hero-em: #E3B478;
  --footer-bg: #16302A;

  /* 布局/阴影兜底：子站（live/jobs）只引入本表不引入门户 style.css 时，浮层仍能正常渲染 */
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(30, 36, 32, .04);
  --shadow: 0 4px 20px rgba(30, 36, 32, .06);
  --shadow-lg: 0 12px 40px rgba(30, 36, 32, .09);
}

/* ---------- 2. 青瓷（青蓝 + 赭金，清爽） ---------- */
html[data-theme="qingci"] {
  --ink: #17242A;
  --ink-2: #4F6067;
  --ink-3: #839498;
  --bg: #F0F7F7;
  --bg-2: #E2EFEF;
  --surface: #FFFFFF;
  --line: #DAE7E7;
  --line-2: #C6DADA;

  --brand: #2F6B76;
  --brand-2: #1D4851;
  --brand-soft: #E6F0F2;

  --accent: #B4832A;
  --accent-2: #8F661C;
  --accent-soft: #F8F1E2;

  --nav-bg: rgba(240, 247, 247, .88);
  --logo-grad: linear-gradient(150deg, #3E8593 0%, #1D4851 100%);
  --hero-grad: linear-gradient(160deg, #245A63 0%, #1A444C 55%, #14353C 100%);
  --hero-glow: rgba(180, 131, 42, .22);
  --hero-em: #E0BC72;
  --footer-bg: #123740;
}

/* ---------- 3. 暖木（赭棕 + 松绿，温厚） ---------- */
html[data-theme="nuanmu"] {
  --ink: #2A2119;
  --ink-2: #6B5B4C;
  --ink-3: #9C8B79;
  --bg: #FAF4EA;
  --bg-2: #F2E7D6;
  --surface: #FFFDFA;
  --line: #E8DCC8;
  --line-2: #DACCB2;

  --brand: #8A5A34;
  --brand-2: #6A4123;
  --brand-soft: #F6EAE0;

  --accent: #3F7A5E;
  --accent-2: #2F5F48;
  --accent-soft: #E8F1EA;

  --nav-bg: rgba(250, 244, 234, .88);
  --logo-grad: linear-gradient(150deg, #A66C40 0%, #6A4123 100%);
  --hero-grad: linear-gradient(160deg, #7A4E2C 0%, #5E3A1F 55%, #4A2C17 100%);
  --hero-glow: rgba(63, 122, 94, .24);
  --hero-em: #E8C48A;
  --footer-bg: #432812;
}

/* ---------- 4. 淡霞（藕荷 + 陶橙，柔和） ---------- */
html[data-theme="danxia"] {
  --ink: #291F28;
  --ink-2: #5F525C;
  --ink-3: #958798;
  --bg: #FBF5FA;
  --bg-2: #F4EAF3;
  --surface: #FFFFFF;
  --line: #E9DCE9;
  --line-2: #D9C7D8;

  --brand: #7A4E77;
  --brand-2: #5A3757;
  --brand-soft: #F4EAF3;

  --accent: #C0733F;
  --accent-2: #9A5828;
  --accent-soft: #FAEDE2;

  --nav-bg: rgba(251, 245, 250, .88);
  --logo-grad: linear-gradient(150deg, #9A6596 0%, #5A3757 100%);
  --hero-grad: linear-gradient(160deg, #6B4068 0%, #4F2D4C 55%, #3C2139 100%);
  --hero-glow: rgba(192, 115, 63, .24);
  --hero-em: #EFBE8E;
  --footer-bg: #361932;
}

/* ---------- 5. 沧澜（深蓝 + 金，理性） ---------- */
html[data-theme="canglan"] {
  --ink: #1A2433;
  --ink-2: #4E5D70;
  --ink-3: #8593A5;
  --bg: #F3F7FC;
  --bg-2: #E7EEF7;
  --surface: #FFFFFF;
  --line: #DBE5F0;
  --line-2: #C6D5E6;

  --brand: #2C4E7A;
  --brand-2: #1D3A5C;
  --brand-soft: #E9F0F9;

  --accent: #B98A2F;
  --accent-2: #93691C;
  --accent-soft: #F8F0DE;

  --nav-bg: rgba(243, 247, 252, .88);
  --logo-grad: linear-gradient(150deg, #3A6796 0%, #1D3A5C 100%);
  --hero-grad: linear-gradient(160deg, #234068 0%, #182F4C 55%, #122539 100%);
  --hero-glow: rgba(185, 138, 47, .24);
  --hero-em: #E4C07A;
  --footer-bg: #0F2033;
}

/* ---------- 6. 素叶（低饱和灰绿，久看不累） ---------- */
html[data-theme="suye"] {
  --ink: #20261F;
  --ink-2: #565F52;
  --ink-3: #8A9384;
  --bg: #F3F5EB;
  --bg-2: #E9EDDC;
  --surface: #FDFDFA;
  --line: #DFE4D2;
  --line-2: #CFD6BE;

  --brand: #4A6B58;
  --brand-2: #354F41;
  --brand-soft: #EBF0EA;

  --accent: #7A6A3A;
  --accent-2: #5E5129;
  --accent-soft: #F3EFE0;

  --nav-bg: rgba(243, 245, 235, .88);
  --logo-grad: linear-gradient(150deg, #5C8170 0%, #354F41 100%);
  --hero-grad: linear-gradient(160deg, #3D5A49 0%, #2E4638 55%, #25392D 100%);
  --hero-glow: rgba(122, 106, 58, .22);
  --hero-em: #CBBE8B;
  --footer-bg: #22332A;
}

/* ---------- 7. 绯陶（赤陶红 + 墨绿，热烈而稳） ---------- */
html[data-theme="feitao"] {
  --ink: #2B1F1A;
  --ink-2: #6B544A;
  --ink-3: #9D867C;
  --bg: #FBF3EC;
  --bg-2: #F4E6D9;
  --surface: #FFFEFB;
  --line: #EDDCCE;
  --line-2: #E0C9B4;

  --brand: #B14A32;
  --brand-2: #8A3421;
  --brand-soft: #F8E9E2;

  --accent: #3F6B52;
  --accent-2: #2E5240;
  --accent-soft: #E7F0E9;

  --nav-bg: rgba(251, 243, 236, .88);
  --logo-grad: linear-gradient(150deg, #C96A4E 0%, #8A3421 100%);
  --hero-grad: linear-gradient(160deg, #94402A 0%, #73301E 55%, #582416 100%);
  --hero-glow: rgba(63, 107, 82, .26);
  --hero-em: #EFC08E;
  --footer-bg: #4A1E12;
}

/* ---------- 8. 杏坛（杏黄暖阳 + 墨青，明快温暖） ---------- */
html[data-theme="xingtan"] {
  --ink: #2B2113;
  --ink-2: #6E5C42;
  --ink-3: #A18F74;
  --bg: #FDF8EC;
  --bg-2: #F7EDD6;
  --surface: #FFFEF9;
  --line: #F0E4C8;
  --line-2: #E3D3AC;

  --brand: #A86510;                 /* 2026-10-01 自检：原 #C07818 配白字仅 3.53:1 → 加深至 4.63:1 */
  --brand-2: #96590E;
  --brand-soft: #F9EFDC;

  --accent: #33625F;
  --accent-2: #244A48;
  --accent-soft: #E4EFEE;

  --nav-bg: rgba(253, 248, 236, .88);
  --logo-grad: linear-gradient(150deg, #D89434 0%, #96590E 100%);
  --hero-grad: linear-gradient(160deg, #A96A12 0%, #85510C 55%, #663D08 100%);
  --hero-glow: rgba(51, 98, 95, .26);
  --hero-em: #F2CE8A;
  --footer-bg: #59370A;
}

/* ---------- 9. 茜纱（茜红绯粉 + 暖金，柔美） ---------- */
html[data-theme="qiansha"] {
  --ink: #2C1D22;
  --ink-2: #6B505A;
  --ink-3: #9F838D;
  --bg: #FCF4F3;
  --bg-2: #F6E7E6;
  --surface: #FFFEFE;
  --line: #F0DEDD;
  --line-2: #E4CBC9;

  --brand: #A64D5E;
  --brand-2: #7E3644;
  --brand-soft: #F8E8EB;

  --accent: #B9822E;
  --accent-2: #91641E;
  --accent-soft: #F8EFDC;

  --nav-bg: rgba(252, 244, 243, .88);
  --logo-grad: linear-gradient(150deg, #C06B7C 0%, #7E3644 100%);
  --hero-grad: linear-gradient(160deg, #8E4050 0%, #6F2F3C 55%, #55222C 100%);
  --hero-glow: rgba(185, 130, 46, .26);
  --hero-em: #EFC89A;
  --footer-bg: #47202A;
}

/* ---------- 10. 渡心（低饱和灰蓝 + 陶土暖棕 · 品牌主推） ---------- */
html[data-theme="duxin"] {
  --ink: #1E2429;
  --ink-2: #55606A;
  --ink-3: #8A949C;
  --bg: #F7FAFB;
  --bg-2: #EBF2F4;
  --surface: #FFFFFF;
  --line: #DFE9EC;
  --line-2: #CCDCE0;

  --brand: #507988;
  --brand-2: #3A5C69;
  --brand-soft: #EAF1F4;

  --accent: #C08B52;
  --accent-2: #9E6F3E;
  --accent-soft: #FAF1E5;

  --nav-bg: rgba(247, 250, 251, .88);
  --logo-grad: linear-gradient(150deg, #6B93A2 0%, #3A5C69 100%);
  --hero-grad: linear-gradient(160deg, #436C7B 0%, #355867 55%, #2B4A57 100%);
  --hero-glow: rgba(212, 163, 115, .22);
  --hero-em: #E5C395;
  --footer-bg: #2A4652;
}

/* ===========================================================
   家居配色系（11-17）· 业主 2026-10-01 提供
   底 = 给定的浅色（大面积提亮），品牌/强调 = 同色系加深（保证对比度）
   =========================================================== */

/* ---------- 11. 胡桃（米白 + 深胡桃木，沉稳耐看） ---------- */
html[data-theme="hutao"] {
  --ink: #241C15;
  --ink-2: #5F5346;
  --ink-3: #9A8B7C;
  --bg: #FAF6F0;
  --bg-2: #F1EAE0;
  --surface: #FFFDFA;
  --line: #E7DED2;
  --line-2: #D8CCBC;

  --brand: #4A3423;
  --brand-2: #33241A;
  --brand-soft: #F0E9E1;

  --accent: #A8793C;
  --accent-2: #855C28;
  --accent-soft: #F7EEE1;

  --nav-bg: rgba(250, 246, 240, .88);
  --logo-grad: linear-gradient(150deg, #7A5A3C 0%, #4A3423 100%);
  --hero-grad: linear-gradient(160deg, #4A3423 0%, #3A2819 55%, #2C1E12 100%);
  --hero-glow: rgba(168, 121, 60, .22);
  --hero-em: #E7C296;
  --footer-bg: #2B1D12;
}

/* ---------- 12. 奶油（奶油白 + 樱桃木/原木，温柔百搭） ---------- */
html[data-theme="naiyou"] {
  --ink: #2A231A;
  --ink-2: #675C4B;
  --ink-3: #A0957F;
  --bg: #FDFAF3;
  --bg-2: #F6EEDF;
  --surface: #FFFDF9;
  --line: #EBE2D3;
  --line-2: #DDD1BB;

  --brand: #96583A;
  --brand-2: #74422A;
  --brand-soft: #F7ECE3;

  --accent: #AB7A2C;
  --accent-2: #875D1B;
  --accent-soft: #F8F1DF;

  --nav-bg: rgba(253, 250, 243, .88);
  --logo-grad: linear-gradient(150deg, #B4764E 0%, #74422A 100%);
  --hero-grad: linear-gradient(160deg, #8A5233 0%, #6B3D24 55%, #52301C 100%);
  --hero-glow: rgba(171, 122, 44, .22);
  --hero-em: #EBCA9A;
  --footer-bg: #4A2B18;
}

/* ---------- 13. 卡其（浅卡其 + 深卡其，同色系稳妥） ---------- */
html[data-theme="kaji"] {
  --ink: #2B281C;
  --ink-2: #66604A;
  --ink-3: #9E977E;
  --bg: #F7F4EA;
  --bg-2: #EEE9D9;
  --surface: #FDFCF7;
  --line: #E7E1CE;
  --line-2: #D6CFB6;

  --brand: #6A6244;
  --brand-2: #514A33;
  --brand-soft: #F1EFE4;

  --accent: #A9762F;
  --accent-2: #85591C;
  --accent-soft: #F7F0E0;

  --nav-bg: rgba(247, 244, 234, .88);
  --logo-grad: linear-gradient(150deg, #877E5E 0%, #514A33 100%);
  --hero-grad: linear-gradient(160deg, #5F573C 0%, #4A432D 55%, #3A3422 100%);
  --hero-glow: rgba(169, 118, 47, .22);
  --hero-em: #E0CB97;
  --footer-bg: #36301F;
}

/* ---------- 14. 薄荷（奶白 + 浅杏 + 浅薄荷绿，温柔清新最百搭｜软装公式1） ---------- */
html[data-theme="bohe"] {
  --ink: #1F2622;
  --ink-2: #566157;
  --ink-3: #8D968B;
  --bg: #FBFAF4;
  --bg-2: #F3F0E4;
  --surface: #FFFEFA;
  --line: #E6E7DA;
  --line-2: #D3D8C7;

  --brand: #35735D;
  --brand-2: #28594A;
  --brand-soft: #E8F2EE;

  --accent: #B07C3C;
  --accent-2: #8B6128;
  --accent-soft: #FAF0E2;

  --nav-bg: rgba(251, 250, 244, .88);
  --logo-grad: linear-gradient(150deg, #4E9179 0%, #28594A 100%);
  --hero-grad: linear-gradient(160deg, #2F6A57 0%, #265746 55%, #1F4537 100%);
  --hero-glow: rgba(176, 124, 60, .22);
  --hero-em: #E6C79A;
  --footer-bg: #1D3E32;
}

/* ---------- 15. 雾蓝（米白 + 暖浅黄 + 浅雾霾蓝，阳光感简约大气｜软装公式2） ---------- */
html[data-theme="wulan"] {
  --ink: #1F2429;
  --ink-2: #566067;
  --ink-3: #8C959B;
  --bg: #FAF9F4;
  --bg-2: #F3EEE2;
  --surface: #FFFEFB;
  --line: #E4E4DA;
  --line-2: #D2D3C6;

  --brand: #4A6A80;
  --brand-2: #395366;
  --brand-soft: #E9EFF3;

  --accent: #A87F2C;
  --accent-2: #84601B;
  --accent-soft: #F9F2E1;

  --nav-bg: rgba(250, 249, 244, .88);
  --logo-grad: linear-gradient(150deg, #6C8AA0 0%, #395366 100%);
  --hero-grad: linear-gradient(160deg, #46627A 0%, #3A5265 55%, #2F4353 100%);
  --hero-glow: rgba(168, 127, 44, .22);
  --hero-em: #E8D19A;
  --footer-bg: #2A3D4A;
}

/* ---------- 16. 桃粉（纯白 + 浅燕麦 + 淡桃粉，柔和亮色｜软装公式3） ---------- */
html[data-theme="taofen"] {
  --ink: #26201F;
  --ink-2: #635856;
  --ink-3: #9B8E8B;
  --bg: #FDFBF8;
  --bg-2: #F4EFE6;
  --surface: #FFFEFC;
  --line: #EAE3DC;
  --line-2: #DAD0C5;

  --brand: #A85E68;
  --brand-2: #86474F;
  --brand-soft: #F8EBEC;

  --accent: #AE833F;
  --accent-2: #8A642B;
  --accent-soft: #F9F0E1;

  --nav-bg: rgba(253, 251, 248, .88);
  --logo-grad: linear-gradient(150deg, #C2808A 0%, #86474F 100%);
  --hero-grad: linear-gradient(160deg, #9C5760 0%, #83454E 55%, #6B3740 100%);
  --hero-glow: rgba(174, 131, 63, .24);
  --hero-em: #EFCFA0;
  --footer-bg: #5C2E36;
}

/* ---------- 17. 鹅黄（奶白 + 浅灰 + 浅鹅黄，简约活力现代风｜软装公式4） ---------- */
html[data-theme="ehuang"] {
  --ink: #232420;
  --ink-2: #5B5E56;
  --ink-3: #93968C;
  --bg: #FBFAF6;
  --bg-2: #F2F0E7;
  --surface: #FFFEFB;
  --line: #E5E4DC;
  --line-2: #D4D3C8;

  --brand: #566166;
  --brand-2: #414A4D;
  --brand-soft: #ECEEEF;

  --accent: #B98E2E;
  --accent-2: #936D1C;
  --accent-soft: #F8F1DC;

  --nav-bg: rgba(251, 250, 246, .88);
  --logo-grad: linear-gradient(150deg, #6E797D 0%, #414A4D 100%);
  --hero-grad: linear-gradient(160deg, #556065 0%, #475156 55%, #3B4448 100%);
  --hero-glow: rgba(185, 142, 46, .24);
  --hero-em: #EBD9A0;
  --footer-bg: #333B3F;
}

/* ===========================================================
   背景样式（叠加在配色之上，可自由组合）
   =========================================================== */

/* 纯净：无纹理纯色底（默认） */
html[data-bg="plain"],
:root {
  --bg-image: none;
  --bg-attach: scroll;
}

/* 纸纹：极淡方格纸质感 */
html[data-bg="paper"] {
  --bg-image:
    repeating-linear-gradient(0deg, rgba(30, 48, 40, .022) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(30, 48, 40, .022) 0 1px, transparent 1px 24px);
  --bg-attach: scroll;
}

/* 柔光：顶部两团柔和品牌光晕，固定不随滚动 */
html[data-bg="glow"] {
  --bg-image:
    radial-gradient(1100px 560px at 10% -8%, rgba(46, 89, 76, .10), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(185, 114, 47, .09), transparent 58%);
  --bg-attach: fixed;
}

/* 护眼：豆沙绿底 + 细纹（长时间阅读更舒适，会覆盖底色） */
html[data-bg="eye"] {
  --bg: #EFF4E9;
  --bg-2: #E6EEDD;
  --surface: #FBFCF7;
  --line: #DDE5D2;
  --line-2: #CBD7BE;
  --bg-image:
    repeating-linear-gradient(0deg, rgba(40, 70, 50, .020) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(40, 70, 50, .020) 0 1px, transparent 1px 24px);
  --bg-attach: scroll;
}

body {
  background-color: var(--bg);
  background-image: var(--bg-image, none);
  background-attachment: var(--bg-attach, scroll);
}

/* 主题切换的过渡（避免生硬跳变；不影响首次加载） */
html.theme-anim body,
html.theme-anim .nav,
html.theme-anim .footer,
html.theme-anim .stage,
html.theme-anim .card,
html.theme-anim .linkcard {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

/* ===========================================================
   「外观」浮层（右下角，AI 助手按钮上方）
   =========================================================== */
.theme-fab {
  position: fixed; right: 22px; bottom: 84px; z-index: 890;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow); cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: .2s;
}
.theme-fab:hover { border-color: var(--brand); transform: translateY(-2px); }
.theme-fab svg { width: 21px; height: 21px; }

/* 首次到访引导：呼吸光圈 + 气泡 */
.theme-fab.theme-fab-hint::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: .55; pointer-events: none;
  animation: theme-fab-pulse 1.8s ease-out infinite;
}
@keyframes theme-fab-pulse {
  0% { transform: scale(.86); opacity: .6; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
.theme-hint-bubble {
  position: fixed; right: 76px; bottom: 96px; z-index: 891;
  background: var(--ink, #1E2420); color: #fff;
  font-size: 13px; line-height: 1; padding: 10px 14px; border-radius: 18px 18px 4px 18px;
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.12));
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s, transform .25s; white-space: nowrap;
}
.theme-hint-bubble.show { opacity: 1; transform: none; }

/* 导航栏「外观」入口（JS 注入到导航菜单末尾） */
.theme-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; white-space: nowrap; color: var(--ink-2, #555);
  font-size: inherit; text-decoration: none;
}
.theme-nav-btn svg { width: 16px; height: 16px; }
.theme-nav-btn:hover { color: var(--brand, currentColor); }

/* 管理后台浮层提示条 */
.tp-admin-note {
  margin-top: 12px; padding: 9px 12px; border-radius: 9px;
  background: var(--accent-soft, #FBF0E2); color: var(--accent-2, #96581E);
  font-size: 12.5px; line-height: 1.55;
}

.theme-mask {
  position: fixed; inset: 0; z-index: 895; background: rgba(20, 26, 23, .32);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.theme-mask.show { opacity: 1; pointer-events: auto; }

.theme-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 896;
  width: 366px; max-width: calc(100vw - 28px);
  max-height: min(620px, calc(100vh - 44px)); overflow: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 18px 18px 16px;
  transform: translateY(12px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.theme-panel.show { transform: none; opacity: 1; pointer-events: auto; }
.theme-panel h3 { font-size: 17px; margin-bottom: 4px; }
.theme-panel .tp-sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 14px; }
.theme-panel .tp-sec { margin-top: 16px; }
.theme-panel .tp-sec > b { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 9px; font-weight: 600; }

.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tp-grid.bg { grid-template-columns: repeat(4, 1fr); }

.tp-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px 7px;
  background: var(--bg); cursor: pointer; text-align: center; transition: .18s;
}
.tp-card:hover { border-color: var(--brand); }
.tp-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.tp-card em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }
.tp-card.on em { color: var(--brand); font-weight: 600; }
.tp-dots { display: flex; gap: 3px; justify-content: center; }
.tp-dots i { width: 13px; height: 13px; border-radius: 50%; display: block; border: 1px solid rgba(0, 0, 0, .07); }

.tp-bgbox {
  height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background-color: var(--pc-bg, #fff); display: block;
}
/* 背景卡片预览（与真实效果同款） */
.tp-bgbox.bg-plain { background-image: none; }
.tp-bgbox.bg-paper {
  background-image:
    repeating-linear-gradient(0deg, rgba(30, 48, 40, .10) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(30, 48, 40, .10) 0 1px, transparent 1px 8px);
}
.tp-bgbox.bg-glow {
  background-image:
    radial-gradient(70% 90% at 12% 0%, rgba(46, 89, 76, .38), transparent 65%),
    radial-gradient(70% 90% at 100% 10%, rgba(185, 114, 47, .34), transparent 62%);
}
.tp-bgbox.bg-eye {
  background-color: #EFF4E9;
  background-image:
    repeating-linear-gradient(0deg, rgba(40, 70, 50, .09) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(40, 70, 50, .09) 0 1px, transparent 1px 8px);
}

.theme-panel .tp-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.theme-panel .tp-msg { font-size: 12px; color: var(--ink-3); margin-left: auto; }

@media (max-width: 520px) {
  .theme-fab { right: 16px; bottom: 84px; }
  .theme-panel { right: 14px; left: 14px; width: auto; }
}