/* ============================================================
   themes.css —— 六套主题（CSS Variables：html[data-theme] 根节点切换）
   主题枚举（v84 定稿）：cool-platinum（冷白铂金 · 回落默认）/ jade-green（翡翠绿）/
   crimson-gold（绛红金）/ champagne-gold（香槟白金）/ violet-azure（白瓷 · v85 温润瓷土调性）/
   lilac（丁香）。
   JS 仅负责 html.setAttribute('data-theme', ...)（theme.js applyTheme），
   本文件是全部主题差异的唯一定义处；未覆盖的变量回落 base.css :root。
   历史键名兼容（老数据零报错）：navy-gold → cool-platinum、graphite → champagne-gold，
   映射表在 js/core/theme.js 的 LEGACY_THEME_MAP。
   ⚠️ 第 1、4 两套（冷白铂金 / 香槟白金）都是**浅色系**：除配色 token 外，
   必须同时覆盖 .hero-card 的深色渐变与白字体系（做法同第 6 套 lilac 的「素白描边」），
   否则会出现「浅底 + 白字」不可读（v57 同类教训）。
   ============================================================ */

/* ---------- 1. cool-platinum 冷白铂金（v73 新增 · 回落默认 · 浅色系） ----------
   冷白/月白纸底 + 铂金银灰点缀；染色区（.hero-card）改用**浅色渐变**，
   姓名 / 职位 / 联系方式一律深色文字，保证可读。 */
html[data-theme='cool-platinum'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(62, 71, 83, .13);
  --kt-bar-line: rgba(228, 231, 235, .9);
  --kt-ico-radius: 7px;
  --kt-active-shadow: 0 0 0 2px rgba(122, 134, 148, .45);
  --kt-1-bg: #F0F2F5; --kt-1-fg: #4A5460; --kt-1-ico: #7E8894;
  --kt-2-bg: #EFF2F6; --kt-2-fg: #43505F; --kt-2-ico: #5A6878;
  --kt-3-bg: #F2F3F5; --kt-3-fg: #4E545C; --kt-3-ico: #6E7681;
  --kt-4-bg: #EDF1F4; --kt-4-fg: #42525C; --kt-4-ico: #55707E;
  --c-primary: #5C6773;
  --c-primary-2: #8A96A3;
  --c-primary-deep: #3E4753;
  --c-gold: #A9B3BF;
  --c-gold-light: #C6CED7;
  --c-gold-soft: rgba(169, 179, 191, .18);
  --c-bg: #F6F7F9;
  --c-card: #FFFFFF;
  --c-text: #1F242B;
  --c-text-2: #5A626C;
  --c-text-3: #98A0AA;
  --c-line: #E4E7EB;
  --c-danger: #C9433F;
  --c-hero-glow: rgba(138, 150, 163, .20);
  --radius-card: 16px;
  --shadow-card: 0 4px 16px rgba(92, 103, 115, .08);
  --shadow-float: 0 12px 40px rgba(62, 71, 83, .20);
  --c-title: #232A33;
  --c-eyebrow: #AEB6C0;
  --c-line-soft: #EEF0F3;
  --c-gold-bar-1: #C6CED7;
  --c-gold-bar-2: #A9B3BF;
  --c-price: #8A6A3A;
  --shadow-soft: 0 2px 10px rgba(92, 103, 115, .05);
  --c-avatar-ink: #2E353D;
  --c-card-hairline: rgba(216, 222, 229, .60);
  --c-card-hairline-2: rgba(216, 222, 229, .14);
}
/* 冷白铂金染色区 = 浅色渐变（月白 → 冷银）+ 深色文字 */
html[data-theme='cool-platinum'] .hero-card {
  background:
    linear-gradient(180deg, rgba(214, 221, 228, .9) 0%, rgba(214, 221, 228, .2) 4px, transparent 4px),
    linear-gradient(135deg, #FFFFFF 0%, #F1F4F7 52%, #E3E9EF 100%);
  color: #1F242B;
  border: 1px solid #E1E5E9;
  box-shadow: 0 6px 20px rgba(92, 103, 115, .10);
}
html[data-theme='cool-platinum'] .hero-card .hero-card-ring { border-color: rgba(92, 103, 115, .07); }
html[data-theme='cool-platinum'] .hero-card .hero-card-tag,
html[data-theme='cool-platinum'] .hero-card.is-compact .hero-card-tag {
  background: #F1F4F7;
  border: 1px solid #E1E5E9;
  color: #4A5460;
}
html[data-theme='cool-platinum'] .hero-card .hero-card-address-nav { color: rgba(62, 71, 83, .80); }
html[data-theme='cool-platinum'] .hero-card.is-compact .hero-card-avatar,
html[data-theme='cool-platinum'] .hero-card.is-compact .hero-card-avatar.is-fallback {
  background: linear-gradient(135deg, #F1F4F7, #D8DEE5);
  color: #38404A;
}
html[data-theme='cool-platinum'] .hero-manage-btn,
html[data-theme='cool-platinum'] .hero-login-btn {
  background: #F5F7F9;
  border-color: rgba(92, 103, 115, .35);
  color: #4A5460;
}
html[data-theme='cool-platinum'] .card-footer-brand-badge {
  background: linear-gradient(135deg, #8A96A3 0%, #3E4753 100%);
}

/* ---------- 2. jade-green 翡翠绿（仅覆盖三主色与光晕，金色/中性色继承默认） ---------- */
html[data-theme='jade-green'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(14, 110, 84, .15);
  --kt-bar-line: rgba(214, 234, 227, .95);
  --kt-ico-radius: 9px;
  --kt-active-shadow: 0 0 0 2px rgba(14, 110, 84, .40);
  --kt-1-bg: #E8F5F0; --kt-1-fg: #0E6E54; --kt-1-ico: #128A69;
  --kt-2-bg: #EAF7F1; --kt-2-fg: #0B6B57; --kt-2-ico: #0F9573;
  --kt-3-bg: #E6F3EC; --kt-3-fg: #14705C; --kt-3-ico: #1C8F72;
  --kt-4-bg: #E9F6F3; --kt-4-fg: #0C6B63; --kt-4-ico: #0E9B8E;
  --c-primary: #0E6E54;
  --c-primary-2: #0F8A6A;
  --c-primary-deep: #0A513E;
  --c-hero-glow: rgba(14, 110, 84, .30);
  --shadow-card: 0 4px 16px rgba(14, 110, 84, .10);
  --shadow-float: 0 12px 40px rgba(10, 81, 62, .26);
}

/* ---------- 3. crimson-gold 绛红金 ---------- */
html[data-theme='crimson-gold'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(140, 31, 40, .15);
  --kt-bar-line: rgba(240, 221, 220, .95);
  --kt-ico-radius: 5px;
  --kt-active-shadow: 0 0 0 2px rgba(140, 31, 40, .38);
  --kt-1-bg: #FBECEC; --kt-1-fg: #8C1F28; --kt-1-ico: #A83238;
  --kt-2-bg: #FDEEEA; --kt-2-fg: #9A2A20; --kt-2-ico: #C04434;
  --kt-3-bg: #FCF0E4; --kt-3-fg: #8A5A16; --kt-3-ico: #C9A961;
  --kt-4-bg: #FBECEC; --kt-4-fg: #7E2A34; --kt-4-ico: #B24A54;
  --c-primary: #8C1F28;
  --c-primary-2: #A83238;
  --c-primary-deep: #6B141C;
  --c-hero-glow: rgba(201, 169, 97, .30);
  --shadow-card: 0 4px 16px rgba(107, 20, 28, .10);
  --shadow-float: 0 12px 40px rgba(107, 20, 28, .26);
}

/* ---------- 4. champagne-gold 香槟白金（v73 新增 · 浅色系） ----------
   香槟暖白纸底 + 淡金点缀；染色区（.hero-card）为**浅色暖金渐变**，
   姓名 / 职位 / 联系方式一律深色文字，保证可读。 */
html[data-theme='champagne-gold'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(154, 123, 63, .15);
  --kt-bar-line: rgba(239, 231, 216, .95);
  --kt-ico-radius: 11px;
  --kt-active-shadow: 0 0 0 2px rgba(201, 169, 97, .55);
  --kt-1-bg: #FBF5E9; --kt-1-fg: #7A6534; --kt-1-ico: #C9A961;
  --kt-2-bg: #FBF3E2; --kt-2-fg: #7E5C22; --kt-2-ico: #D2A648;
  --kt-3-bg: #FAF2E2; --kt-3-fg: #6E5730; --kt-3-ico: #C4A667;
  --kt-4-bg: #FBF6EC; --kt-4-fg: #7A6236; --kt-4-ico: #CBAE73;
  --c-primary: #9A7B3F;
  --c-primary-2: #C4A667;
  --c-primary-deep: #6E5730;
  --c-gold: #C9A961;
  --c-gold-light: #E0C68C;
  --c-gold-soft: rgba(201, 169, 97, .16);
  --c-bg: #FBF8F2;
  --c-card: #FFFFFF;
  --c-text: #2A241A;
  --c-text-2: #6B6151;
  --c-text-3: #A39A88;
  --c-line: #EDE5D6;
  --c-danger: #C0453F;
  --c-hero-glow: rgba(196, 166, 103, .22);
  --radius-card: 16px;
  --shadow-card: 0 4px 16px rgba(154, 123, 63, .09);
  --shadow-float: 0 12px 40px rgba(110, 87, 48, .20);
  --c-title: #322B1F;
  --c-eyebrow: #BCB3A0;
  --c-line-soft: #F4EFE5;
  --c-gold-bar-1: #E0C68C;
  --c-gold-bar-2: #C9A961;
  --c-price: #A8702F;
  --shadow-soft: 0 2px 10px rgba(154, 123, 63, .06);
  --c-avatar-ink: #3A3126;
  --c-card-hairline: rgba(232, 211, 160, .62);
  --c-card-hairline-2: rgba(232, 211, 160, .14);
}
/* 香槟白金染色区 = 浅色暖金渐变（香槟白 → 淡金）+ 深色文字 */
html[data-theme='champagne-gold'] .hero-card {
  background:
    linear-gradient(180deg, rgba(232, 211, 160, .88) 0%, rgba(232, 211, 160, .2) 4px, transparent 4px),
    linear-gradient(135deg, #FFFFFF 0%, #FBF5E9 50%, #F2E6CE 100%);
  color: #2A241A;
  border: 1px solid #EFE7D8;
  box-shadow: 0 6px 20px rgba(154, 123, 63, .11);
}
html[data-theme='champagne-gold'] .hero-card .hero-card-ring { border-color: rgba(154, 123, 63, .08); }
html[data-theme='champagne-gold'] .hero-card .hero-card-tag,
html[data-theme='champagne-gold'] .hero-card.is-compact .hero-card-tag {
  background: #FBF6EC;
  border: 1px solid #EFE7D8;
  color: #7A6534;
}
html[data-theme='champagne-gold'] .hero-card .hero-card-address-nav { color: rgba(110, 87, 48, .85); }
html[data-theme='champagne-gold'] .hero-card.is-compact .hero-card-avatar,
html[data-theme='champagne-gold'] .hero-card.is-compact .hero-card-avatar.is-fallback {
  background: linear-gradient(135deg, #FBF6EC, #E8D3A0);
  color: #6E5730;
}
html[data-theme='champagne-gold'] .hero-manage-btn,
html[data-theme='champagne-gold'] .hero-login-btn {
  background: #FBF7EE;
  border-color: rgba(201, 169, 97, .45);
  color: #7A6534;
}
html[data-theme='champagne-gold'] .card-footer-brand-badge {
  background: linear-gradient(135deg, #C4A667 0%, #6E5730 100%);
}

/* ---------- 5. violet-azure 白瓷（v62 紫曜 → v84 换白 → v85 调性转暖「温润瓷土」） ----------
   沿革：v62 新增「紫曜」（高饱和蓝紫青三色）→ v69 曾就地换装「铂银」（未经确认，v73 作废复原）
     → v84（需求 2，用户指令）**换装为白色主题「白瓷」**——「紫曜」外观整体下线
     → v85（用户指令，选定「温润瓷土」方案）**在仍为白色的前提下把调性由冷转暖**：
       页底暖白 #FDFBF7 / 卡片奶白斜向渐变（#FFFFFF → #FFFDF9 → #FBF6EE）/
       描边暖灰 #EDE6DB / 文字暖褐（#3A342C、#6B6259）/ 点缀砂色（#C9AE8B、#D8C4A6）。
   要点：卡片大面积仍保持白，只把 v84 的「冷灰」换成「暖砂」——离素不离白。
   历史键名 violet-azure **保留不改**：老数据 settings.theme='violet-azure' 零迁移；
     展示名维持「白瓷」（personalize.js / editor-pages.js 的 THEME_DEFS）。
   ⚠️ 浅色主题：只覆盖主色三件套 + 点缀色家族 + 少量浅色专属量，其余回落 :root。 */
html[data-theme='violet-azure'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(90, 72, 48, .10);
  --kt-bar-line: rgba(239, 232, 221, .95);
  --kt-ico-radius: 999px;
  --kt-active-shadow: 0 0 0 2px rgba(138, 110, 78, .42);
  --kt-chip-bd: #EFE7DA;
  --kt-chip-sh: 0 2px 8px rgba(90, 72, 48, .07);
  --kt-ico-bd: rgba(138, 110, 78, .26);
  --kt-ico-ink: #8A6E4E;
  --kt-1-bg: #FFFFFF; --kt-1-fg: #6B5843; --kt-1-ico: #FFFFFF;
  --kt-2-bg: #FFFFFF; --kt-2-fg: #6B5843; --kt-2-ico: #FFFFFF;
  --kt-3-bg: #FFFFFF; --kt-3-fg: #6B5843; --kt-3-ico: #FFFFFF;
  --kt-4-bg: #FFFFFF; --kt-4-fg: #6B5843; --kt-4-ico: #FFFFFF;
  --c-primary: #8A6E4E;
  --c-primary-2: #A98A66;
  --c-primary-deep: #6B5843;
  --c-gold: #C9AE8B;
  --c-gold-light: #E4D5BE;
  --c-gold-soft: rgba(138, 110, 78, .08);
  --c-bg: #FDFBF7;
  --c-card: #FFFFFF;
  --c-text: #3A342C;
  --c-text-2: #6B6259;
  --c-text-3: #A2968A;
  --c-line: #EFE8DD;
  --c-danger: #C9433F;
  --c-hero-glow: rgba(138, 110, 78, .06);
  --radius-card: 16px;
  --shadow-card: 0 3px 14px rgba(90, 72, 48, .06);
  --shadow-float: 0 12px 36px rgba(90, 72, 48, .12);
  --shadow-soft: 0 2px 8px rgba(90, 72, 48, .05);
  --c-title: #3A342C;
  --c-eyebrow: #C6B49C;
  --c-line-soft: #F7F2EA;
  --c-gold-bar-1: #E4D5BE;
  --c-gold-bar-2: #C9AE8B;
  --c-price: #A8702F;
}

/* 白瓷（温润瓷土）横卡 = 「暖砂素白描边」——覆盖 card.css 的深色渐变与白字体系（仅本主题生效）。
   同名元素的白字档（名片管理 / 登录胶囊）与硬编码金→暗金渐变必须一并换装，
   否则在浅色卡上隐形 / 发浑（v63 效果图渲染阶段实证，与第 6 套 lilac 同套路）。
   v85：左侧 3px 竖条与卡面由冷灰换暖砂（#D8C4A6），卡身改奶白斜向渐变。 */
html[data-theme='violet-azure'] .hero-card {
  background:
    linear-gradient(90deg, #D8C4A6 0%, #F6EEE1 3px, rgba(246, 238, 225, 0) 3px),
    linear-gradient(135deg, #FFFFFF 0%, #FFFDF9 55%, #FBF6EE 100%) #FFFFFF;
  color: #3A342C;
  border: 1px solid #EDE6DB;
  box-shadow: 0 6px 20px rgba(90, 72, 48, .09);
}
html[data-theme='violet-azure'] .hero-card .hero-card-ring { border-color: rgba(138, 110, 78, .10); }
html[data-theme='violet-azure'] .hero-card .hero-card-tag,
html[data-theme='violet-azure'] .hero-card.is-compact .hero-card-tag {
  background: #FDF9F3;
  border: 1px solid #EDE3D5;
  color: #6B5843;
}
html[data-theme='violet-azure'] .hero-card .hero-card-address-nav { color: rgba(107, 88, 67, .90); }
html[data-theme='violet-azure'] .hero-card.is-compact .hero-card-avatar,
html[data-theme='violet-azure'] .hero-card.is-compact .hero-card-avatar.is-fallback {
  background: linear-gradient(135deg, #FDF8F1, #EDE2D2);
  color: #4A423A;
}
html[data-theme='violet-azure'] .hero-manage-btn,
html[data-theme='violet-azure'] .hero-login-btn {
  background: #FFFFFF;
  border-color: rgba(138, 110, 78, .32);
  color: #6B5843;
}
html[data-theme='violet-azure'] .card-footer-brand-badge {
  background: linear-gradient(135deg, #DCC9A8 0%, #6B5843 100%);
}

/* ---------- 6. lilac 丁香（v64 新增 · 「丁香 · 素白描边」独立成套） ----------
   配色 = v63 紫曜改版时用户选定的 C 方案原值，v64 起独立为主题档位——
     · 横卡不是大色块：纯白底 + 1px 淡紫细描边 + 左侧 3px 淡紫竖条（覆盖段见下）；
     · 点缀色整体淡紫（原青色与蓝紫撞色是"花"的主因）；
     · 光晕/阴影大幅收力，页面底近乎纯白。
   ⚠️ 浅色主题：只覆盖主色三件套 + 点缀色家族 + 少量浅色专属量，其余回落 :root。 */
html[data-theme='lilac'] {
  /* v133（需求 1）：按键主题 --kt-* 家族随 --c-* 同段同命运（原 card.css data-keytheme 块） */
  --kt-bar-shadow: 0 8px 24px rgba(108, 95, 168, .15);
  --kt-bar-line: rgba(237, 235, 244, .95);
  --kt-ico-radius: 4px;
  --kt-active-shadow: 0 0 0 2px rgba(138, 124, 203, .50);
  --kt-1-bg: #F3F0FC; --kt-1-fg: #6C5FA8; --kt-1-ico: #A79BE2;
  --kt-2-bg: #F5F1FD; --kt-2-fg: #6A5AA8; --kt-2-ico: #9B8CD6;
  --kt-3-bg: #F2EFFB; --kt-3-fg: #7264A8; --kt-3-ico: #B0A6DE;
  --kt-4-bg: #F4F1FD; --kt-4-fg: #5F5297; --kt-4-ico: #8A7CCB;
  --c-primary: #8A7CCB;
  --c-primary-2: #A79BE2;
  --c-primary-deep: #6C5FA8;
  --c-gold: #B0A6DE;
  --c-gold-light: #D2CBF0;
  --c-gold-soft: rgba(138, 124, 203, .10);
  --c-bg: #FDFCFF;
  --c-card: #FFFFFF;
  --c-text: #241F35;
  --c-text-2: #5E5972;
  --c-text-3: #9C97AB;
  --c-line: #EDEBF4;
  --c-danger: #C9484B;
  --c-hero-glow: rgba(138, 124, 203, .07);
  --radius-card: 16px;
  --shadow-card: 0 3px 14px rgba(138, 124, 203, .07);
  --shadow-float: 0 12px 36px rgba(108, 95, 168, .13);
  --shadow-soft: 0 2px 8px rgba(138, 124, 203, .05);
  --c-title: #2A2440;
  --c-eyebrow: #BFB9CC;
  --c-line-soft: #F5F3FA;
  --c-gold-bar-1: #D2CBF0;
  --c-gold-bar-2: #B0A6DE;
  --c-price: #A85FBE;
}

/* 丁香横卡 = 「素白描边」——覆盖 card.css 的深色渐变与白字体系（仅本主题生效）。
   同名元素的白字档（名片管理 / 登录胶囊）与硬编码金→暗金渐变必须一并换装，
   否则在纯白卡上隐形 / 发浑（v63 效果图渲染阶段实证）。 */
html[data-theme='lilac'] .hero-card {
  background:
    linear-gradient(90deg, #A79BE2 0%, #D2CBF0 3px, rgba(210, 203, 240, 0) 3px),
    #FFFFFF;
  color: #241F35;
  border: 1px solid #E6E2F4;
  box-shadow: 0 6px 20px rgba(108, 95, 168, .09);
}
html[data-theme='lilac'] .hero-card .hero-card-ring { border-color: rgba(138, 124, 203, .07); }
html[data-theme='lilac'] .hero-card .hero-card-tag,
html[data-theme='lilac'] .hero-card.is-compact .hero-card-tag {
  background: #F6F4FC;
  border: 1px solid #E7E3F5;
  color: #6C5FA8;
}
html[data-theme='lilac'] .hero-card .hero-card-address-nav { color: rgba(108, 95, 168, .85); }
html[data-theme='lilac'] .hero-card.is-compact .hero-card-avatar,
html[data-theme='lilac'] .hero-card.is-compact .hero-card-avatar.is-fallback {
  background: linear-gradient(135deg, #EFECFA, #D2CBF0);
  color: #4A3F82;
}
html[data-theme='lilac'] .hero-manage-btn,
html[data-theme='lilac'] .hero-login-btn {
  background: #F6F4FC;
  border-color: rgba(138, 124, 203, .35);
  color: #6C5FA8;
}
html[data-theme='lilac'] .card-footer-brand-badge {
  background: linear-gradient(135deg, #A79BE2 0%, #6C5FA8 100%);
}

/* ============================================================
   v59（需求 6）：个性化「五风格」—— 版式与装饰层（10 个风格位）
   ------------------------------------------------------------------
   与上半部分（四主题）的分工，是刻意切开的：
     · 四主题 = **配色**（改 --c-primary / --c-gold / --c-bg …）；
     · 五风格 = **版式与装饰**（名片卡底纹 / 圆角 / 金线点缀色），
       只提供 --style-accent 与 --style-radius 两个自定义量，
       **一律不改配色 token** —— 这样 4 主题 × 10 风格 = 40 种组合都成立，
       也不会出现「可爱风格的浅底色 + graphite 深色主题的浅色文字」这种不可读组合。
   写块规则：
     · 每个风格位一个 `html[data-style='<id>']` 变量块（accent + radius），
       紧跟一个 `html[data-style='<id>'] .hero-card` 背景块（装饰底纹）；
     · 底纹块必须**复刻 card.css 的两条基础渐变**（顶部金线 + 主色 135° 渐变），
       只把金线换成 --style-accent —— 否则选中风格后主题配色就失效了；
     · **未选风格时 html 上没有 data-style 属性**（style.js applyStyle 用
       removeAttribute 而不是写空串），故本段所有 `html[data-style]` 选择器
       在「没选过风格的名片」上完全不命中 —— 这是「其余不动」的实现口径，
       保证 v58 名片像素级零变化。
   ============================================================ */

/* 共享规则：风格生效时才覆盖半径与金线点缀色（不改任何配色 token） */
html[data-style] .hero-card { border-radius: var(--style-radius, 16px); }
html[data-style] .card { border-radius: var(--style-radius, 16px); }
html[data-style] .section-title::before {
  background: linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 100%);
}

/* ---------- 1. 精英 elite-1 深蓝格纹 ---------- */
html[data-style='elite-1'] { --style-accent: #C9A961; --style-radius: 16px; }
html[data-style='elite-1'] .hero-card {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 5px, rgba(255, 255, 255, 0) 5px 12px),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 2. 精英 elite-2 铂金细线 ---------- */
html[data-style='elite-2'] { --style-accent: #8B99B5; --style-radius: 14px; }
html[data-style='elite-2'] .hero-card {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(255, 255, 255, 0) 1px 24px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 24px),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 3. 山水 land-1 青绿远山 ---------- */
html[data-style='land-1'] { --style-accent: #2F7A63; --style-radius: 18px; }
html[data-style='land-1'] .hero-card {
  background:
    radial-gradient(120% 72% at 12% 120%, rgba(255, 255, 255, .17) 0 42%, rgba(255, 255, 255, 0) 43%),
    radial-gradient(140% 82% at 92% 128%, rgba(255, 255, 255, .11) 0 46%, rgba(255, 255, 255, 0) 47%),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 4. 山水 land-2 水墨晕染 ---------- */
html[data-style='land-2'] { --style-accent: #6B7278; --style-radius: 14px; }
html[data-style='land-2'] .hero-card {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(255deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 42%),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 5. 可爱 cute-1 奶油波点 ---------- */
html[data-style='cute-1'] { --style-accent: #D97A93; --style-radius: 22px; }
html[data-style='cute-1'] .hero-card {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .20) 0 2.6px, rgba(255, 255, 255, 0) 3.2px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 6. 可爱 cute-2 马卡龙糖 ---------- */
html[data-style='cute-2'] { --style-accent: #9A7BD1; --style-radius: 22px; }
html[data-style='cute-2'] .hero-card {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .11) 0 9px, rgba(255, 255, 255, 0) 9px 20px),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 7. 清冷 cool-1 雾灰冰蓝 ---------- */
html[data-style='cool-1'] { --style-accent: #6D8A9C; --style-radius: 16px; }
html[data-style='cool-1'] .hero-card {
  background:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .10) 0 1px, rgba(255, 255, 255, 0) 1px 16px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .08) 0 1px, rgba(255, 255, 255, 0) 1px 16px),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 8. 清冷 cool-2 月白极简（无底纹，靠大留白 + 小圆角 + 冷灰点缀） ---------- */
html[data-style='cool-2'] { --style-accent: #9AA3AC; --style-radius: 12px; }
html[data-style='cool-2'] .hero-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);
}

/* ---------- 9. 中国风 cn-1 朱砂云纹 ---------- */
html[data-style='cn-1'] { --style-accent: #A63A32; --style-radius: 18px; }
html[data-style='cn-1'] .hero-card {
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0) 0 12px, rgba(255, 255, 255, .10) 12px 13.5px, rgba(255, 255, 255, 0) 13.5px 24px) 0 0 / 48px 48px,
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}

/* ---------- 10. 中国风 cn-2 青花回纹 ---------- */
html[data-style='cn-2'] { --style-accent: #3B6BA5; --style-radius: 16px; }
html[data-style='cn-2'] .hero-card {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, rgba(255, 255, 255, 0) 2px 15px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 2px, rgba(255, 255, 255, 0) 2px 15px),
    linear-gradient(180deg, var(--style-accent) 0%, var(--style-accent) 3px, transparent 3px),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%);
}