/* ══════════════════════════════════════════════════════════
   HanziNames 取名工具 — name-generator.css
   六色体系：墨/青/朱/紫/玄/黄  参考中国传统色
   ══════════════════════════════════════════════════════════ */

/* ══ 字体变量 ══
   --f-display : Cinzel            大写装饰体，标题/按钮/标签
   --f-serif   : Cormorant Garamond 优雅衬线，拼音/名字展示
   --f-body    : EB Garamond       正文衬线，说明文字
   --f-zh      : 中文宋体堆叠
*/
:root {
  --f-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-serif:   'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --f-body:    'EB Garamond', 'Palatino Linotype', Georgia, serif;
  --f-zh:      'STSong', 'SimSun', 'Noto Serif SC', 'Source Han Serif', serif;
}

/* ══ 风格主题系统（6种中国传统色）══ */

/* ── 墨：宣纸白+重墨黑，高对比水墨 ── */
:root,
[data-palette="ink"] {
  --ng-bg:       #f5f5f3;
  --ng-bg2:      #ffffff;
  --ng-bg3:      #e8e8e6;
  --ng-border:   rgba(0,0,0,.12);
  --ng-border2:  #1a1a1a;
  --ng-ink:      #0d0d0d;
  --ng-ink2:     #1a1a1a;
  --ng-ink3:     #555555;
  --ng-gold:     #0d0d0d;
  --ng-gold2:    #333333;
  --ng-celadon:  #333333;
  --ng-celadon2: #555555;
  --ng-accent:   #0d0d0d;
  --ng-accent2:  #333333;
  --ng-red:      #660000;
  --ng-shadow:   0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.08);
  --ng-shadow-g: 0 6px 32px rgba(0,0,0,.16);
  --ng-btn-a:    #0d0d0d;
  --ng-btn-b:    #000000;
  --ng-btn-text: #ffffff;
}

[data-palette="ink"] .ng-wrap,
:root .ng-wrap {
  background-color: #f5f5f3 !important;
  background-image: none !important;
}

/* ── 青：青花瓷靛青，白瓷底+靛青纹饰
       色阶：#edf0f5(白瓷) → #c8d4e8(淡青) → #4a6fa8(中靛) → #1e3a6e(深靛) → #0f1e3c(墨青)
── */
[data-palette="cyan"] {
  --ng-bg:       #e8eef8;   /* 青花浅底，提亮 */
  --ng-bg2:      #f0f3f8;   /* 白瓷表单底，接近白 */
  --ng-bg3:      #c8d4e8;   /* 淡青花，分隔/描边浅色 */
  --ng-border:   rgba(30,58,110,.10);
  --ng-border2:  #1e3a6e;   /* 深靛青，主描边 */
  --ng-ink:      #0f1e3c;   /* 墨青，最深文字 */
  --ng-ink2:     #1e3a6e;   /* 深靛，次级文字 */
  --ng-ink3:     #4a6fa8;   /* 中靛，辅助文字 */
  --ng-gold:     #1e3a6e;   /* 青花主色（替代"金"，靛青即重色）*/
  --ng-gold2:    #4a6fa8;   /* 青花中色 */
  --ng-celadon:  #3a5c98;   /* 中深靛 */
  --ng-celadon2: #6888c0;   /* 中浅靛 */
  --ng-accent:   #1e3a6e;
  --ng-accent2:  #4a6fa8;
  --ng-red:      #6a4858;
  --ng-shadow:   0 2px 16px rgba(30,58,110,.08), 0 0 0 1px rgba(30,58,110,.12);
  --ng-shadow-g: 0 6px 32px rgba(30,58,110,.18);
  --ng-btn-a:    #1e3a6e;   /* 深靛按钮主色 */
  --ng-btn-b:    #0f1e3c;   /* 墨青按钮深色 */
  --ng-btn-text: #edf0f5;   /* 白瓷文字 */
}
[data-palette="cyan"] .ng-wrap {
  background-color: #e8eef8 !important;
  background-image: none !important;
}

/* ── 朱：胭脂红，中国传统色 #9D2932
       色阶：#fdf0f0(胭脂白底) → #f0d0d2(浅胭脂) → #c8707a(中胭脂) → #9D2932(胭脂主) → #5c1420(墨红深)
── */
[data-palette="vermilion"] {
  --ng-bg:       #f7e4e5;   /* 浅胭脂底，提亮 */
  --ng-bg2:      #fdf5f5;   /* 白胭脂表单底，接近白 */
  --ng-bg3:      #e0b0b4;   /* 中浅胭脂，分隔 */
  --ng-border:   rgba(157,41,50,.10);
  --ng-border2:  #9d2932;   /* 胭脂红主色，主描边 */
  --ng-ink:      #2a080c;   /* 深墨红，最深文字 */
  --ng-ink2:     #5c1420;   /* 墨红，次级文字 */
  --ng-ink3:     #9d2932;   /* 胭脂主色，辅助文字 */
  --ng-gold:     #9d2932;   /* 胭脂红（替代"金"）*/
  --ng-gold2:    #c8707a;   /* 中胭脂亮色 */
  --ng-celadon:  #7a2030;   /* 中深胭脂 */
  --ng-celadon2: #b85060;   /* 中浅胭脂亮 */
  --ng-accent:   #9d2932;
  --ng-accent2:  #c8707a;
  --ng-red:      #9d2932;
  --ng-shadow:   0 2px 16px rgba(157,41,50,.08), 0 0 0 1px rgba(157,41,50,.12);
  --ng-shadow-g: 0 6px 32px rgba(157,41,50,.20);
  --ng-btn-a:    #9d2932;   /* 胭脂红按钮 */
  --ng-btn-b:    #5c1420;   /* 墨红按钮深色 */
  --ng-btn-text: #fdf0f0;   /* 胭脂白文字 */
}
[data-palette="vermilion"] .ng-wrap {
  background-color: #f7e4e5 !important;
  background-image: none !important;
}

/* ── 紫：黛紫，明代传统色 #564163
       色阶：#f2eff5(白紫底) → #e0d8ea(浅紫) → #7e6f9d(灰紫中) → #564163(黛紫主) → #534b6b(墨紫深)
── */
[data-palette="violet"] {
  --ng-bg:       #ece5f3;   /* 浅黛紫底，提亮 */
  --ng-bg2:      #f5f2f8;   /* 白紫表单底，接近白 */
  --ng-bg3:      #ccc0dc;   /* 中浅紫，分隔 */
  --ng-border:   rgba(86,65,99,.10);
  --ng-border2:  #564163;   /* 黛紫主色，主描边 */
  --ng-ink:      #2a1e32;   /* 深墨紫，最深文字 */
  --ng-ink2:     #534b6b;   /* 墨紫，次级文字 */
  --ng-ink3:     #7e6f9d;   /* 灰紫，辅助文字 */
  --ng-gold:     #564163;   /* 黛紫主色（替代"金"）*/
  --ng-gold2:    #7e6f9d;   /* 灰紫中色 */
  --ng-celadon:  #6a5c80;   /* 中深紫 */
  --ng-celadon2: #9888b4;   /* 中浅紫亮色 */
  --ng-accent:   #564163;
  --ng-accent2:  #7e6f9d;
  --ng-red:      #cc718b;   /* 配色方案1的玫粉，作点缀色 */
  --ng-shadow:   0 2px 16px rgba(86,65,99,.08), 0 0 0 1px rgba(86,65,99,.12);
  --ng-shadow-g: 0 6px 32px rgba(86,65,99,.20);
  --ng-btn-a:    #564163;   /* 黛紫按钮 */
  --ng-btn-b:    #2a1e32;   /* 深墨紫按钮深色 */
  --ng-btn-text: #f2eff5;   /* 白紫文字 */
}
[data-palette="violet"] .ng-wrap {
  background-color: #ece5f3 !important;
  background-image: none !important;
}

/* ── 翠：翠微墨绿，中国传统色 #4C8045
       色阶：#f0f4ee(竹纸白底) → #d0ddc8(浅翠) → #8aaa80(中翠) → #4C8045(翠微主) → #2a4a24(深墨绿)
── */
[data-palette="inkblack"] {
  --ng-bg:       #deebd6;   /* 浅竹绿底，提亮 */
  --ng-bg2:      #f2f5f0;   /* 竹纸白表单底，接近白 */
  --ng-bg3:      #b4ccaa;   /* 中浅翠，分隔 */
  --ng-border:   rgba(76,128,69,.10);
  --ng-border2:  #4c8045;   /* 翠微主色，主描边 */
  --ng-ink:      #162010;   /* 深墨绿，最深文字 */
  --ng-ink2:     #2a4a24;   /* 墨绿，次级文字 */
  --ng-ink3:     #4c8045;   /* 翠微主色，辅助文字 */
  --ng-gold:     #4c8045;   /* 翠微主色 */
  --ng-gold2:    #8aaa80;   /* 中翠亮色 */
  --ng-celadon:  #3a6835;   /* 中深翠 */
  --ng-celadon2: #6a9860;   /* 中浅翠亮 */
  --ng-accent:   #4c8045;
  --ng-accent2:  #8aaa80;
  --ng-red:      #8a6030;   /* 竹黄，点缀暖色 */
  --ng-shadow:   0 2px 16px rgba(76,128,69,.08), 0 0 0 1px rgba(76,128,69,.12);
  --ng-shadow-g: 0 6px 32px rgba(76,128,69,.20);
  --ng-btn-a:    #4c8045;   /* 翠微按钮 */
  --ng-btn-b:    #2a4a24;   /* 墨绿按钮深色 */
  --ng-btn-text: #f0f4ee;   /* 竹纸文字 */
}
[data-palette="inkblack"] .ng-wrap {
  background-color: #deebd6 !important;
  background-image: none !important;
}

/* ══ dark覆盖（所有浅色主题共用，不锁死背景颜色）══ */
[data-theme="dark"] {
  --ng-bg:       #161412;
  --ng-bg2:      #201e1a;
  --ng-bg3:      #2c2820;
  --ng-border:   rgba(255,255,255,.06);
  --ng-border2:  rgba(255,255,255,.10);
  --ng-ink:      #f0eae0;
  --ng-ink2:     #c8c0b0;
  --ng-ink3:     #887e70;
  --ng-gold:     #c0a050;
  --ng-gold2:    #dcc070;
  --ng-celadon:  #68a898;
  --ng-celadon2: #88c4b4;
  --ng-accent:   #c0a050;
  --ng-accent2:  #dcc070;
  --ng-red:      #c05050;
  --ng-shadow:   0 4px 28px rgba(0,0,0,.40);
  --ng-shadow-g: 0 6px 32px rgba(192,160,80,.14);
  --ng-btn-a:    #c0a050;
  --ng-btn-b:    #806820;
  --ng-btn-text: #161412;
}
[data-theme="dark"] .ng-wrap,
[data-theme="dark"] .ng-wrap .main-content {
  background-color: #161412 !important;
  background-image: none !important;
}
[data-theme="dark"][data-palette="cyan"] {
  --ng-gold:#7898d8; --ng-gold2:#a0b8f0;
  --ng-btn-a:#2a4a8e; --ng-btn-b:#101e4a; --ng-btn-text:#edf0f5;
}
[data-theme="dark"][data-palette="vermilion"] {
  --ng-gold:#c8707a; --ng-gold2:#e0a0a8;
  --ng-btn-a:#9d2932; --ng-btn-b:#5c1420; --ng-btn-text:#fdf0f0;
}
[data-theme="dark"][data-palette="violet"] {
  --ng-gold:#9888b4; --ng-gold2:#bbaad0;
  --ng-btn-a:#564163; --ng-btn-b:#2a1e32; --ng-btn-text:#f2eff5;
}
[data-theme="dark"][data-palette="inkblack"] {
  --ng-gold:#8aaa80; --ng-gold2:#aac8a0;
  --ng-btn-a:#4c8045; --ng-btn-b:#2a4a24; --ng-btn-text:#f0f4ee;
}


/* ── name-card 各主题角花纹样颜色 ── */
/* 墨：炭黑角花 */
[data-palette="ink"] .name-card::before,
[data-palette="ink"] .name-card::after,
:root .name-card::before,
:root .name-card::after { opacity:0.25; filter:grayscale(1) brightness(0); }

/* 青：青花靛青角花 */
[data-palette="cyan"] .name-card::before,
[data-palette="cyan"] .name-card::after { opacity:0.22; filter:hue-rotate(210deg) saturate(0.8) brightness(0.45); }

/* 朱：朱红角花 */
[data-palette="vermilion"] .name-card::before,
[data-palette="vermilion"] .name-card::after { opacity:0.18; filter:hue-rotate(340deg) saturate(0.8) brightness(0.55); }

/* 紫：黛紫角花 */
[data-palette="violet"] .name-card::before,
[data-palette="violet"] .name-card::after { opacity:0.20; filter:hue-rotate(280deg) saturate(0.65) brightness(0.50); }

/* 翠：翠微墨绿角花 */
[data-palette="inkblack"] .name-card::before,
[data-palette="inkblack"] .name-card::after { opacity:0.20; filter:hue-rotate(110deg) saturate(0.60) brightness(0.48); }

/* dark 模式：金色角花 */
[data-theme="dark"] .name-card::before,
[data-theme="dark"] .name-card::after { opacity:0.15; filter:hue-rotate(40deg) saturate(0.8) brightness(1.8); }


/* ── 全局 ── */
/* 背景色+纹样由各 [data-palette] 直接控制 .ng-wrap，勿在此锁死颜色 */
.ng-wrap { min-height: 100vh; background-color: var(--ng-bg); }
.ng-wrap .main-content {
  background-color: transparent !important;
  background-image: none !important;
  padding-top: calc(var(--header-height, 64px) + 46px + 1.5rem) !important;
}

.ng-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
  position: relative;
}
.ng-page > * { position: relative; }

/* ══ Hero ══ */
.ng-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  position: relative;
}
.ng-hero::before {
  content: '名';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 10rem;
  font-family: 'STSong','SimSun','Noto Serif SC',serif;
  color: var(--ng-border2);
  opacity: 0.07;
  pointer-events: none; user-select: none; line-height: 1; z-index: 0;
}
.ng-hero h1 {
  position: relative;
  font-size: clamp(2rem,5vw,3.2rem);
  font-weight: 700;
  color: var(--ng-ink);
  margin: 0 0 .6rem;
  font-family: var(--f-display);
  letter-spacing: .04em;
}
.ng-hero h1 .accent { color: var(--ng-gold); }
.ng-hero .tagline { color: var(--ng-ink3); font-size:.95rem; letter-spacing:.08em; position:relative; font-family: var(--f-body); font-style: italic; }
.ng-badges { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:1rem; position:relative; }
.ng-badge {
  background: rgba(138,99,24,.06);
  border: 1px solid rgba(138,99,24,.15);
  color: var(--ng-gold);
  font-size:.65rem; font-weight:600; padding:3px 13px;
  border-radius:20px; letter-spacing:.10em;
  font-family: var(--f-display);
  text-transform: uppercase;
}
.ng-badge.celadon { background:rgba(74,124,111,.06); border-color:rgba(74,124,111,.18); color:var(--ng-celadon); }

/* ══ 表单区 ══ */
.ng-form-wrap {
  background: var(--ng-bg2);
  border: 1px solid var(--ng-border2);
  border-radius: 4px;
  padding: 2rem 2.6rem;
  box-shadow: var(--ng-shadow);
  margin-bottom: 2rem;
  position: relative;
  overflow: visible;
}
/* 四角回纹装饰 */
.ng-form-wrap::after {
  content: '';
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.22;
  background-repeat: no-repeat;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px;
  background-position: left top, right top, right bottom, left bottom;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23666' stroke-width='0.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='41,3 3,3 3,41'/%3E%3Cpolyline points='7,7 7,37 37,37 37,7 11,7 11,33 33,33 33,11 15,11 15,29 29,29 29,15 19,15 19,25 25,25 25,19'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23666' stroke-width='0.9' stroke-linecap='square' stroke-linejoin='miter' transform='scale(-1,1) translate(-44,0)'%3E%3Cpolyline points='41,3 3,3 3,41'/%3E%3Cpolyline points='7,7 7,37 37,37 37,7 11,7 11,33 33,33 33,11 15,11 15,29 29,29 29,15 19,15 19,25 25,25 25,19'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23666' stroke-width='0.9' stroke-linecap='square' stroke-linejoin='miter' transform='rotate(180 22 22)'%3E%3Cpolyline points='41,3 3,3 3,41'/%3E%3Cpolyline points='7,7 7,37 37,37 37,7 11,7 11,33 33,33 33,11 15,11 15,29 29,29 29,15 19,15 19,25 25,25 25,19'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23666' stroke-width='0.9' stroke-linecap='square' stroke-linejoin='miter' transform='scale(1,-1) translate(0,-44)'%3E%3Cpolyline points='41,3 3,3 3,41'/%3E%3Cpolyline points='7,7 7,37 37,37 37,7 11,7 11,33 33,33 33,11 15,11 15,29 29,29 29,15 19,15 19,25 25,25 25,19'/%3E%3C/g%3E%3C/svg%3E");
}
.ng-form-wrap > * { position: relative; z-index: 1; }
@media(max-width:600px){ .ng-form-wrap{ padding:1.2rem 1rem; border-radius:4px; } }


.ng-form-wrap .section-title {
  font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ng-gold);
  margin:0 0 1.2rem;
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display);
}
/* section-title 右侧用主题色分隔线+末端小菱形 */
.ng-form-wrap .section-title::after {
  content:'';
  flex:1; height:1px;
  background: linear-gradient(90deg, var(--ng-border2) 0%, transparent 100%);
}

.ng-form-wrap .section-sub {
  font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ng-ink3); opacity:.5;
  margin: 1.6rem 0 .9rem;
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-display);
}
.ng-form-wrap .section-sub::before,.ng-form-wrap .section-sub::after{
  content:''; flex:1; height:1px; background:var(--ng-border);
}

/* 表单行 */
.frow2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.frow3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media(max-width:650px){ .frow2,.frow3{ grid-template-columns:1fr; } }

.fgroup { margin-bottom:.9rem; }
.fgroup label {
  display:flex; align-items:center; gap:5px;
  font-size:.62rem; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color: var(--ng-ink2);
  margin-bottom:.35rem;
  font-family: var(--f-display);
}
.fgroup label .req { color:var(--ng-gold); }
.fgroup label .opt { font-size:.64rem; font-weight:400; opacity:.45; text-transform:none; letter-spacing:0; }
.fgroup label .hint { font-size:.64rem; font-weight:400; opacity:.4; text-transform:none; letter-spacing:0; margin-left:auto; }

.fgroup input,
.fgroup select,
.fgroup textarea {
  width:100%; background:var(--ng-bg);
  border:1px solid var(--ng-border2);
  border-radius:7px;
  padding:.72rem 1rem;
  color:var(--ng-ink);
  font-size:1rem;
  font-family: var(--f-body);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box; -webkit-appearance:none; appearance:none;
}
.fgroup textarea { resize:vertical; min-height:60px; line-height:1.5; }
.fgroup input::placeholder,.fgroup textarea::placeholder { color:var(--ng-ink3); opacity:.4; }
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus {
  border-color:var(--ng-gold);
  box-shadow:0 0 0 3px rgba(138,99,24,.08);
}
.fgroup select option { background:var(--ng-bg); color:var(--ng-ink); }

/* 快捷标签 */
.qtags { display:flex; flex-wrap:wrap; gap:5px; margin-top:.4rem; }
.qtag {
  font-size:.58rem; padding:3px 10px;
  border-radius:14px; border:1px solid var(--ng-border2);
  color:var(--ng-ink3); cursor:pointer;
  background:var(--ng-bg3);
  transition:border-color .15s,color .15s,background .15s;
  user-select:none;
  font-family: var(--f-display);
  letter-spacing:.08em; text-transform:uppercase;
}
.qtag:hover { border-color:var(--ng-gold); color:var(--ng-gold); }
.qtag.active { background:rgba(138,99,24,.08); border-color:var(--ng-gold); color:var(--ng-gold); }

/* 生成按钮 */
.btn-generate {
  width:100%; padding:.95rem 1.5rem;
  background:linear-gradient(135deg,var(--ng-btn-a,#6b4a1c),var(--ng-btn-b,#3a2810));
  color:var(--ng-btn-text,#e8d5a0); font-weight:600; font-size:.9rem;
  border:none; border-radius:8px; cursor:pointer;
  letter-spacing:.18em; text-transform:uppercase;
  transition:opacity .2s,transform .1s,box-shadow .2s;
  margin-top:1.4rem;
  box-shadow: var(--ng-shadow-g);
  font-family: var(--f-display);
  display:flex; align-items:center; justify-content:center; gap:8px;
  position:relative; overflow:hidden;
}
.btn-generate::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(196,154,60,.18),transparent);
  opacity:0; transition:opacity .3s;
}
.btn-generate:hover:not(:disabled)::before { opacity:1; }
.btn-generate:hover:not(:disabled) { opacity:.93; box-shadow:0 8px 36px rgba(138,99,24,.28); }
.btn-generate:active:not(:disabled){ transform:scale(.98); }
.btn-generate:disabled { opacity:.4; cursor:not-allowed; }
[data-theme="dark"] .btn-generate { background:linear-gradient(135deg,var(--ng-btn-a,#c49a3c),var(--ng-btn-b,#8a6318)); color:var(--ng-btn-text,#1c1410); }
.free-note { text-align:center; font-size:.69rem; color:var(--ng-ink3); opacity:.5; margin-top:.5rem; }

/* ══ 结果区 ══ */
.ng-result-section { margin-top:.5rem; }

/* 空态 */
.ng-placeholder {
  background:var(--ng-bg2);
  border:1.5px dashed var(--ng-border2);
  border-radius:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:260px; gap:1.2rem; padding:3rem 2rem;
  text-align:center;
  color:var(--ng-ink3); opacity:.55;
}
.ng-placeholder .ph-char {
  font-size:4rem; font-family:'STSong','SimSun',serif; color:var(--ng-gold); opacity:.25;
  line-height:1;
}
.ng-placeholder h3 { font-size:1rem; font-weight:700; margin:0; color:var(--ng-ink2); }
.ng-placeholder p { font-size:.83rem; line-height:1.7; max-width:340px; margin:0; }

/* Loading */
.ng-loading {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  min-height:260px; gap:1.8rem;
  background:var(--ng-bg2); border-radius:18px; border:1px solid var(--ng-border2);
  padding:2.5rem;
}
.ink-spinner {
  width:52px; height:52px;
  border:3px solid rgba(138,99,24,.12);
  border-top-color:var(--ng-gold);
  border-right-color:rgba(138,99,24,.4);
  border-radius:50%;
  animation:ink-spin .8s linear infinite;
}
@keyframes ink-spin { to{ transform:rotate(360deg); } }
.ng-loading p { font-size:.92rem; color:var(--ng-ink3); letter-spacing:.06em; font-family:'STSong','SimSun',serif; }
.ng-loading .dots::after { content:''; animation:dots3 1.5s steps(4,end) infinite; }
@keyframes dots3 { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* Error */
.ng-error {
  display:none;
  background:rgba(158,42,42,.05);
  border:1px solid rgba(158,42,42,.18);
  border-radius:12px; padding:1.1rem 1.4rem;
  color:var(--ng-red); font-size:.88rem; text-align:center; margin-top:.5rem;
}

/* 结果标题 */
.result-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.4rem; flex-wrap:wrap; gap:.7rem;
}
.result-hd h2 {
  font-size:1.3rem; font-weight:700; color:var(--ng-ink); margin:0;
  font-family: var(--f-display); letter-spacing:.06em;
}
.result-hd .for-name { font-size:.88rem; color:var(--ng-gold2); font-weight:700; letter-spacing:.06em; }

/* ══ 名字卡片 ══ */
.name-cards { display:flex; flex-direction:column; gap:2rem; margin-bottom:2rem; }

.name-card {
  background:var(--ng-bg2);
  border:1px solid var(--ng-border);
  border-radius:16px; overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .2s;
  position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
/* 名字卡片左上角回纹 */
.name-card::before {
  content:'';
  position:absolute; top:-4px; left:-4px;
  width:60px; height:60px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23888888' stroke-width='1' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='56,4 4,4 4,56'/%3E%3Cpolyline points='10,10 10,50 50,50 50,10 16,10 16,44 44,44 44,16 22,16 22,38 38,38 38,22 28,22 28,32 32,32 32,26'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:60px 60px;
  opacity:0.18; pointer-events:none; z-index:0;
}
/* 名字卡片右下角回纹（旋转180°） */
.name-card::after {
  content:'';
  position:absolute; bottom:-4px; right:-4px;
  width:60px; height:60px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23888888' stroke-width='1' stroke-linecap='square' stroke-linejoin='miter' transform='rotate(180 30 30)'%3E%3Cpolyline points='56,4 4,4 4,56'/%3E%3Cpolyline points='10,10 10,50 50,50 50,10 16,10 16,44 44,44 44,16 22,16 22,38 38,38 38,22 28,22 28,32 32,32 32,26'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:60px 60px;
  opacity:0.15; pointer-events:none; z-index:0;
}
.name-card > * { position:relative; z-index:1; }
.name-card:hover { border-color:var(--ng-border2); box-shadow:var(--ng-shadow-g); transform:translateY(-2px); }

/* 卡片顶栏 */
.card-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.6rem;
  background:linear-gradient(90deg,var(--ng-bg3),transparent);
  border-bottom:1px solid var(--ng-border);
}
.ctbadge {
  font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 14px; border-radius:20px;
  background:rgba(138,99,24,.10); color:var(--ng-gold); border:1px solid rgba(138,99,24,.2);
  font-family: var(--f-display);
}
.ctbadge.classical { background:rgba(74,124,111,.08); color:var(--ng-celadon); border-color:rgba(74,124,111,.2); }
.ctbadge.elemental { background:rgba(92,61,30,.07); color:var(--ng-accent2); border-color:rgba(92,61,30,.18); }
[data-theme="dark"] .ctbadge { background:rgba(196,154,60,.10); color:var(--ng-gold2); border-color:rgba(196,154,60,.2); }
[data-theme="dark"] .ctbadge.classical { background:rgba(106,170,154,.08); color:var(--ng-celadon2); border-color:rgba(106,170,154,.2); }
[data-theme="dark"] .ctbadge.elemental { background:rgba(196,154,60,.07); color:var(--ng-gold2); border-color:rgba(196,154,60,.15); }

.card-score { font-size:.75rem; font-weight:700; color:var(--ng-ink3); display:flex; align-items:center; gap:4px; }
.card-score .stars { color:var(--ng-gold2); letter-spacing:1px; font-size:.8rem; }

/* 卡片主区 */
.card-body { padding:0; }

.card-hero {
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--ng-border);
}
.card-hanzi-block {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  padding:2rem 2.4rem;
  background:linear-gradient(135deg,rgba(0,0,0,.03),transparent);
  border-right:1px solid var(--ng-border);
  min-width:160px;
  position:relative;
}
.card-hanzi-block::after {
  content:attr(data-num);
  position:absolute; bottom:8px; right:12px;
  font-size:3rem; font-family:'STSong','SimSun',serif;
  color:rgba(138,99,24,.06); line-height:1;
  pointer-events:none; user-select:none;
}
.card-chinese {
  font-size:4.8rem;
  font-weight:900; line-height:1;
  color:var(--ng-ink);
  font-family:'STSong','SimSun','Noto Serif SC','Source Han Serif',serif;
  letter-spacing:.14em;
  text-shadow:0 2px 18px rgba(138,99,24,.10);
}
.card-meta-block {
  flex:1; padding:1.4rem 1.8rem;
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
}
.card-pinyin {
  font-size:1.7rem; color:var(--ng-gold); font-weight:500;
  letter-spacing:.18em; font-family: var(--f-serif); font-style: italic;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.card-pinyin-char {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
}
.card-pinyin-char .py { font-size:1rem; color:var(--ng-gold); font-weight:500; letter-spacing:.05em; font-family: var(--f-serif); font-style: italic; }
.card-pinyin-char .hz { font-size:1.6rem; color:var(--ng-ink); font-family: var(--f-zh); font-weight:700; }
.card-elements {
  font-size:.8rem; color:var(--ng-celadon); font-weight:600;
  display:flex; align-items:center; gap:6px;
  background:rgba(74,124,111,.06); border:1px solid rgba(74,124,111,.15);
  border-radius:20px; padding:3px 12px; width:fit-content;
}
.card-tone {
  font-size:.72rem; color:var(--ng-ink3); opacity:.55; letter-spacing:.04em;
  display:flex; align-items:center; gap:4px;
}
.score-wrap { display:flex; align-items:center; gap:8px; }
.score-bar { flex:1; height:4px; background:var(--ng-border); border-radius:4px; overflow:hidden; max-width:120px; }
.score-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--ng-gold),var(--ng-gold2)); transition:width .9s ease; }
.score-num { font-size:.72rem; color:var(--ng-gold); font-weight:700; }

/* 字卡区（笔顺 + 字义）*/
.card-chars-section {
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--ng-border);
}
.char-cell {
  flex:1; min-width:200px;
  padding:1.4rem 1.8rem;
  border-right:1px solid var(--ng-border);
  display:flex; flex-direction:column; gap:.8rem;
}
.char-cell:last-child { border-right:none; }

.char-cell-top { display:flex; align-items:center; gap:1.2rem; }
.stroke-box {
  width:90px; height:90px; flex-shrink:0;
  background:var(--ng-bg);
  border:1px solid var(--ng-border2);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.stroke-box::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(138,99,24,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,99,24,.06) 1px,transparent 1px);
  background-size:50% 50%; border-radius:9px;
}
.char-cell-info { flex:1; }
.char-big {
  font-size:2rem; color:var(--ng-ink);
  font-family:'STSong','SimSun',serif; font-weight:700; line-height:1;
  margin-bottom:.3rem;
}
.char-meaning {
  font-size:.82rem; color:var(--ng-ink2); line-height:1.6;
}
.char-meta {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:.4rem;
}
.char-meta-tag {
  font-size:.65rem; padding:1px 8px; border-radius:10px;
  border:1px solid var(--ng-border2);
  color:var(--ng-ink3); background:var(--ng-bg3);
}

/* 解析区 */
.card-analysis {
  padding:1.4rem 1.8rem;
  display:flex; flex-direction:column; gap:1rem;
}
.classical-quote {
  background:linear-gradient(135deg,rgba(74,124,111,.05),rgba(74,124,111,.01));
  border-left:3px solid rgba(74,124,111,.35);
  border-radius:0 10px 10px 0;
  padding:.8rem 1.1rem; font-size:.9rem;
  color:var(--ng-ink2); line-height:1.85;
  font-style:italic; font-family: var(--f-body);
}
.classical-quote .poet {
  font-style:normal; font-weight:600; color:var(--ng-celadon);
  font-size:.72rem; display:block; margin-top:.35rem; opacity:.85;
  font-family: var(--f-display); letter-spacing:.08em; text-transform:uppercase;
}
.cslabel {
  font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ng-ink3); opacity:.4; margin-bottom:.3rem;
  font-family: var(--f-display);
}
.cstext { font-size:.9rem; color:var(--ng-ink2); line-height:1.76; font-family: var(--f-body); }

/* ══ 证书付费入口（旧样式保留兼容）══ */
.cert-upsell {
  background:linear-gradient(135deg,rgba(138,99,24,.08),rgba(74,124,111,.05));
  border:1px solid rgba(138,99,24,.2);
  border-radius:14px; padding:1.3rem 1.8rem;
  margin: 0 0 1.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.cert-upsell-left { flex:1; min-width:200px; }
.cert-upsell-left h3 {
  font-size:.9rem; font-weight:600; color:var(--ng-ink); margin:0 0 .35rem;
  font-family: var(--f-display); letter-spacing:.06em;
  display:flex; align-items:center; gap:8px;
}
.cert-upsell-left h3 .cert-seal {
  width:26px; height:26px;
  background:linear-gradient(135deg,var(--ng-gold),var(--ng-gold2));
  border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; color:#fff; font-weight:900; font-style:normal; flex-shrink:0;
}
.cert-upsell-left p { font-size:.78rem; color:var(--ng-ink3); line-height:1.65; margin:0; }
.cert-upsell-left .cert-features { display:flex; flex-wrap:wrap; gap:5px; margin-top:.6rem; }
.cert-feature-tag {
  font-size:.67rem; padding:2px 9px; border-radius:12px;
  background:rgba(138,99,24,.07); border:1px solid rgba(138,99,24,.15);
  color:var(--ng-gold); font-weight:600;
}
.btn-cert {
  display:inline-flex; align-items:center; gap:7px;
  padding:.7rem 1.6rem; border-radius:9px;
  background:linear-gradient(135deg,var(--ng-gold),var(--ng-gold2));
  color:#1c1410; font-weight:600; font-size:.78rem;
  border:none; cursor:pointer; text-decoration:none;
  box-shadow:var(--ng-shadow-g);
  transition:opacity .2s,transform .1s,box-shadow .2s;
  white-space:nowrap; letter-spacing:.12em; text-transform:uppercase;
  font-family: var(--f-display);
}
.btn-cert:hover { opacity:.88; box-shadow:0 8px 36px rgba(138,99,24,.30); }
.btn-cert:active { transform:scale(.97); }
.cert-price { font-size:.7rem; opacity:.6; font-weight:400; font-family: var(--f-body); letter-spacing:0; }

/* 底部信息框 */
.info-box {
  background:var(--ng-bg2); border:1px solid var(--ng-border2);
  border-radius:12px; padding:1.1rem 1.4rem; margin-bottom:1.2rem;
}
.info-box-title {
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ng-gold); margin-bottom:.55rem;
  display:flex; align-items:center; gap:6px;
  font-family: var(--f-display);
}
.info-box-text { font-size:.88rem; color:var(--ng-ink2); line-height:1.78; font-family: var(--f-body); }
.info-box.zodiac-box { border-color:rgba(74,124,111,.15); background:rgba(74,124,111,.03); }
.info-box.zodiac-box .info-box-title { color:var(--ng-celadon); }
[data-theme="dark"] .info-box.zodiac-box .info-box-title { color:var(--ng-celadon2); }
.info-box.tips-box { border-color:rgba(138,99,24,.15); background:rgba(138,99,24,.03); }
.info-box.tips-box .info-box-title { color:var(--ng-gold); }

/* 操作按钮 */
.result-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.btn-action {
  display:inline-flex; align-items:center; gap:6px;
  padding:.58rem 1.3rem; border-radius:9px;
  font-size:.68rem; font-weight:600; cursor:pointer;
  border:1px solid var(--ng-border2);
  background:var(--ng-bg3); color:var(--ng-ink3);
  transition:all .2s; text-decoration:none; letter-spacing:.10em;
  text-transform:uppercase; font-family: var(--f-display);
}
.btn-action:hover { border-color:var(--ng-gold); color:var(--ng-gold); }
.btn-action.primary {
  background:linear-gradient(135deg,#6b4a1c,#3a2810);
  color:#e8d5a0; border-color:transparent; box-shadow:var(--ng-shadow-g);
}
[data-theme="dark"] .btn-action.primary { background:linear-gradient(135deg,var(--ng-gold),var(--ng-gold2)); color:#1c1410; }
.btn-action.primary:hover { opacity:.9; }

/* ══ How it works ══ */
.how-section { margin-top:4rem; padding-top:3rem; border-top:1px solid var(--ng-border); }
.how-section h2 {
  text-align:center; font-size:1.3rem; font-weight:800;
  color:var(--ng-ink); margin-bottom:1.8rem;
  font-family:'STSong','SimSun',serif; letter-spacing:.04em;
}
.how-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; }
.how-card {
  background:var(--ng-bg2); border:1px solid var(--ng-border);
  border-radius:13px; padding:1.3rem 1.1rem; text-align:center;
  transition:border-color .2s;
}
.how-card:hover { border-color:rgba(138,99,24,.3); }
.how-card .icon { font-size:1.7rem; margin-bottom:.5rem; }
.how-card h3 { font-size:.87rem; font-weight:800; color:var(--ng-ink); margin:0 0 .4rem; }
.how-card p { font-size:.77rem; color:var(--ng-ink3); line-height:1.65; margin:0; opacity:.8; }

/* ══ FAQ ══ */
.faq-section { margin-top:2.5rem; }
.faq-section h2 { font-size:1.15rem; font-weight:800; color:var(--ng-ink); margin-bottom:1rem; font-family:'STSong','SimSun',serif; }
.faq-item { border:1px solid var(--ng-border); border-radius:11px; margin-bottom:.65rem; overflow:hidden; background:var(--ng-bg2); }
.faq-q {
  padding:.85rem 1.3rem; font-size:.87rem; font-weight:700;
  color:var(--ng-ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  user-select:none; opacity:.85;
}
.faq-q:hover { opacity:1; }
.faq-q .arr { transition:transform .22s; color:var(--ng-ink3); opacity:.5; }
.faq-item.open .faq-q .arr { transform:rotate(180deg); }
.faq-a { display:none; padding:0 1.3rem .95rem; font-size:.82rem; color:var(--ng-ink3); line-height:1.72; }
.faq-item.open .faq-a { display:block; }

/* 移动端 */
@media(max-width:700px){
  .card-hero { flex-direction:column; }
  .card-hanzi-block { border-right:none; border-bottom:1px solid var(--ng-border); min-width:unset; padding:1.5rem 2rem; }
  .card-chinese { font-size:4rem; }
  .card-pinyin { font-size:1.3rem; }
  .char-cell { min-width:100%; }
  .ng-form-wrap { padding:1.2rem 1rem; border-radius:8px; }
  .cert-upsell { flex-direction:column; }
  .palette-switcher { gap:3px; }
}

/* ══ 风格切换按钮 ══ */
.palette-switcher {
  display:flex; align-items:center; gap:4px;
  background:var(--ng-bg3);
  border:1px solid var(--ng-border2);
  border-radius:24px;
  padding:3px 6px;
}
.pal-btn {
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  font-size:.72rem; font-weight:900; cursor:pointer; line-height:1;
  font-family:'STSong','SimSun',serif;
  transition:transform .15s, border-color .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}
.pal-btn[data-pal="ink"]       { background:#343430; color:#f0f0ee; }
.pal-btn[data-pal="cyan"]      { background:#4a88a8; color:#fff; }
.pal-btn[data-pal="vermilion"] { background:#a04030; color:#fff; }
.pal-btn[data-pal="violet"]    { background:#564163; color:#f2eff5; }
.pal-btn[data-pal="inkblack"]  { background:#4c8045; color:#f0f4ee; }
.pal-btn:hover { transform:scale(1.18); }
.pal-btn.active { border-color:var(--ng-ink); box-shadow:0 0 0 2px rgba(255,255,255,.3); transform:scale(1.12); }

/* ══ 忌讳 & 自由输入区 ══ */
.taboo-hint {
  font-size:.72rem; color:var(--ng-ink3); line-height:1.6;
  background:rgba(158,42,42,.04); border:1px solid rgba(158,42,42,.1);
  border-radius:8px; padding:.5rem .85rem; margin-top:.35rem;
  display:flex; gap:6px; align-items:flex-start;
}
.taboo-hint .th-icon { flex-shrink:0; font-size:.85rem; }
.free-idea-box {
  background:linear-gradient(135deg,rgba(138,99,24,.04),rgba(74,124,111,.03));
  border:1px dashed var(--ng-border2);
  border-radius:10px; padding:1rem 1.2rem; margin-top:.8rem;
}
.free-idea-box .fi-title {
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ng-gold); margin-bottom:.45rem;
  display:flex; align-items:center; gap:6px;
}
.free-idea-box textarea {
  width:100%; background:var(--ng-bg);
  border:1px solid var(--ng-border2); border-radius:7px;
  padding:.65rem 1rem; color:var(--ng-ink); font-size:.9rem;
  outline:none; resize:vertical; min-height:70px; line-height:1.6;
  transition:border-color .2s, box-shadow .2s; box-sizing:border-box;
}
.free-idea-box textarea::placeholder { color:var(--ng-ink3); opacity:.4; }
.free-idea-box textarea:focus { border-color:var(--ng-gold); box-shadow:0 0 0 3px rgba(138,99,24,.08); }

/* ══ 选择名字按钮 ══ */
.card-choose-row {
  padding:.85rem 1.6rem 1.2rem;
  display:flex; justify-content:center;
}
.btn-choose-name {
  padding:.65rem 2.2rem; border-radius:30px;
  background:linear-gradient(135deg,var(--ng-btn-a,#6b4a1c),var(--ng-btn-b,#3a2810));
  color:var(--ng-btn-text,#e8d5a0);
  font-size:.9rem; font-weight:800; letter-spacing:.04em;
  border:none; cursor:pointer; transition:transform .15s,box-shadow .15s;
  font-family:'STSong','SimSun',serif;
}
.btn-choose-name:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.18); }
.btn-choose-name.chosen {
  background:linear-gradient(135deg,#2a6a3a,#1a4828);
  color:#c8f0d0;
}
.name-card.chosen-card {
  box-shadow:0 0 0 2px var(--ng-gold),0 4px 20px rgba(0,0,0,.10);
  background:#fffdf8;
}
.btn-speak {
  display:inline-flex; align-items:center; gap:.3rem;
  margin-top:.5rem;
  padding:.25rem .75rem;
  background:transparent;
  border:1px solid var(--ng-gold);
  border-radius:20px;
  color:var(--ng-gold);
  font-size:.78rem;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.btn-speak:hover { background:var(--ng-gold); color:#1a1208; }

/* ══ 服务面板 ══ */
.service-panel-header {
  text-align:center; padding:1.5rem 1rem .8rem;
  border-bottom:1px solid var(--ng-border);
  margin-bottom:1.2rem;
}
.sp-chosen-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ng-ink3); margin-bottom:.3rem; }
.sp-chosen-name { font-size:2.8rem; font-weight:900; color:var(--ng-ink); font-family:'STSong','SimSun',serif; line-height:1.1; }
.sp-chosen-pinyin { font-size:1rem; color:var(--ng-gold); margin-top:.2rem; letter-spacing:.06em; }

.service-section-title {
  font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ng-ink3); margin:0 0 .6rem; padding-left:.2rem;
}
.service-free-list {
  display:flex; flex-wrap:wrap; gap:.4rem .8rem;
  margin-bottom:1.4rem;
}
.service-free-item {
  font-size:.8rem; color:var(--ng-ink2);
  display:flex; align-items:center; gap:4px;
}

.service-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem;
  margin-bottom:1.4rem;
}
@media(max-width:600px){ .service-cards{grid-template-columns:1fr;} }
.svc-card {
  background:var(--ng-bg2); border:1px solid var(--ng-border2);
  border-radius:12px; padding:.9rem 1rem;
  display:flex; align-items:flex-start; gap:.7rem;
  transition:box-shadow .15s;
}
.svc-card:hover { box-shadow:var(--ng-shadow); }
.svc-icon { font-size:1.5rem; flex-shrink:0; margin-top:.1rem; }
.svc-body { flex:1; }
.svc-title { font-size:.88rem; font-weight:800; color:var(--ng-ink); margin-bottom:.2rem; }
.svc-desc { font-size:.74rem; color:var(--ng-ink3); line-height:1.6; }
.svc-preview-btn {
  flex-shrink:0; align-self:center;
  padding:.3rem .8rem; border-radius:20px;
  background:var(--ng-bg3); border:1px solid var(--ng-border2);
  font-size:.72rem; color:var(--ng-gold); cursor:pointer; font-weight:700;
  transition:background .15s;
}
.svc-preview-btn:hover { background:var(--ng-bg); }
.svc-included-tag {
  flex-shrink:0; align-self:center;
  padding:.3rem .8rem; border-radius:20px;
  background:rgba(74,124,111,.1); border:1px solid rgba(74,124,111,.2);
  font-size:.72rem; color:var(--ng-celadon); font-weight:700;
}

.service-buy-row {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding:1rem 0 .4rem;
  border-top:1px solid var(--ng-border);
}
.service-buy-note { font-size:.76rem; color:var(--ng-ink3); line-height:1.5; flex:1; min-width:180px; }
.btn-buy-all {
  padding:.8rem 2rem; border-radius:30px;
  background:linear-gradient(135deg,var(--ng-btn-a,#6b4a1c),var(--ng-btn-b,#3a2810));
  color:var(--ng-btn-text,#e8d5a0);
  font-size:.95rem; font-weight:900; border:none; cursor:pointer;
  display:flex; align-items:center; gap:.6rem;
  transition:transform .15s, box-shadow .15s;
  font-family:'STSong','SimSun',serif;
}
.btn-buy-all:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.22); }
.buy-price {
  background:rgba(255,255,255,.2); border-radius:20px;
  padding:.15rem .7rem; font-size:.88rem;
}
.service-skip-row { text-align:center; padding:.7rem 0 0; }
.service-skip-row a { font-size:.78rem; color:var(--ng-ink3); text-decoration:none; }
.service-skip-row a:hover { color:var(--ng-ink); }

/* ══ 预览弹层 ══ */
.preview-modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:900;
  backdrop-filter:blur(3px);
}
.preview-modal-box {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:901; background:var(--ng-bg); border-radius:16px;
  padding:1.8rem; width:min(92vw,660px); max-height:92vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.preview-close {
  position:absolute; top:.8rem; right:1rem;
  background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--ng-ink3);
}
.preview-modal-title {
  font-size:1rem; font-weight:800; color:var(--ng-ink);
  margin-bottom:1rem; padding-right:2rem;
}
.preview-modal-actions {
  display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem;
}
.btn-change-preview {
  flex:0 0 auto; padding:.6rem 1.1rem; border-radius:8px;
  background:var(--ng-bg2); border:1.5px solid var(--ng-border2);
  font-size:.82rem; color:var(--ng-ink2); cursor:pointer;
  white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem;
}
.btn-change-preview:hover { background:var(--ng-bg3); border-color:var(--ng-border); }

.btn-download-preview {
  flex:1; padding:.6rem; border-radius:8px;
  background:var(--ng-bg3); border:1px solid var(--ng-border2);
  font-size:.82rem; color:var(--ng-ink2); cursor:pointer;
}
.btn-buy-preview {
  flex:1; padding:.6rem; border-radius:8px;
  background:linear-gradient(135deg,var(--ng-btn-a,#6b4a1c),var(--ng-btn-b,#3a2810));
  color:var(--ng-btn-text,#e8d5a0); border:none;
  font-size:.82rem; font-weight:800; cursor:pointer;
}

/* ══ 付费弹层（购买邮箱收集）══ */
.pay-modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1000;
  backdrop-filter:blur(4px);
}
.pay-modal-box {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1001; background:var(--ng-bg); border-radius:18px;
  padding:2rem 2.2rem; width:min(92vw,460px);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.pay-modal-title {
  font-size:1.1rem; font-weight:900; color:var(--ng-ink);
  font-family:'STSong','SimSun',serif; margin:0 0 .3rem;
  text-align:center; letter-spacing:.04em;
}
.pay-modal-sub {
  font-size:.78rem; color:var(--ng-ink3); text-align:center;
  margin-bottom:1.4rem; line-height:1.6;
}
.pay-modal-name-preview {
  font-size:2.4rem; font-weight:900; color:var(--ng-gold);
  font-family:'STSong','SimSun',serif; text-align:center;
  line-height:1; margin-bottom:.3rem;
}
.pay-modal-pinyin-preview {
  font-size:.95rem; color:var(--ng-ink3); text-align:center;
  margin-bottom:1.2rem; letter-spacing:.06em;
}
.pay-items-list {
  background:var(--ng-bg2); border:1px solid var(--ng-border2);
  border-radius:10px; padding:.85rem 1.1rem; margin-bottom:1.2rem;
}
.pay-item {
  font-size:.8rem; color:var(--ng-ink2);
  display:flex; align-items:center; gap:6px;
  padding:.22rem 0;
}
.pay-item .pi-check { color:var(--ng-celadon); font-size:.85rem; }
.pay-total {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--ng-border); padding-top:.65rem; margin-top:.5rem;
}
.pay-total-label { font-size:.8rem; color:var(--ng-ink3); }
.pay-total-price { font-size:1.3rem; font-weight:900; color:var(--ng-gold); letter-spacing:.02em; }

.pay-email-group { margin-bottom:1rem; }
.pay-email-group label {
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ng-ink2); display:block; margin-bottom:.35rem;
}
.pay-email-group input {
  width:100%; background:var(--ng-bg);
  border:1px solid var(--ng-border2); border-radius:8px;
  padding:.72rem 1rem; color:var(--ng-ink); font-size:.95rem;
  outline:none; transition:border-color .2s,box-shadow .2s; box-sizing:border-box;
}
.pay-email-group input:focus { border-color:var(--ng-gold); box-shadow:0 0 0 3px rgba(138,99,24,.08); }
.pay-email-group input::placeholder { color:var(--ng-ink3); opacity:.45; }

/* 游客/登录切换提示 */
.pay-member-hint {
  font-size:.73rem; color:var(--ng-ink3); text-align:center;
  margin-bottom:1rem; line-height:1.6;
}
.pay-member-hint a {
  color:var(--ng-gold); text-decoration:none; font-weight:700;
}
.pay-member-hint a:hover { text-decoration:underline; }

.btn-pay-submit {
  width:100%; padding:.9rem; border-radius:10px;
  background:linear-gradient(135deg,var(--ng-btn-a,#6b4a1c),var(--ng-btn-b,#3a2810));
  color:var(--ng-btn-text,#e8d5a0);
  font-size:1rem; font-weight:900; border:none; cursor:pointer;
  font-family:'STSong','SimSun',serif; letter-spacing:.04em;
  transition:opacity .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-pay-submit:hover { opacity:.9; box-shadow:0 6px 24px rgba(0,0,0,.22); }
.btn-pay-submit:disabled { opacity:.45; cursor:not-allowed; }
[data-theme="dark"] .btn-pay-submit { background:linear-gradient(135deg,var(--ng-gold),var(--ng-gold2)); color:#1c1410; }

.pay-cancel-link {
  display:block; text-align:center; margin-top:.8rem;
  font-size:.76rem; color:var(--ng-ink3); text-decoration:none; cursor:pointer;
}
.pay-cancel-link:hover { color:var(--ng-ink); }
.pay-secure-note {
  font-size:.68rem; color:var(--ng-ink3); opacity:.5;
  text-align:center; margin-top:.5rem;
}

/* 订单成功提示 */
.pay-success-box {
  text-align:center; padding:1rem 0;
}
.pay-success-icon { font-size:3rem; margin-bottom:.6rem; }
.pay-success-title {
  font-size:1.1rem; font-weight:900; color:var(--ng-ink);
  font-family:'STSong','SimSun',serif; margin-bottom:.4rem;
}
.pay-success-desc { font-size:.82rem; color:var(--ng-ink3); line-height:1.7; }
.pay-order-id { font-size:.72rem; color:var(--ng-gold); margin-top:.5rem; font-family:monospace; }

/* ══ 付费弹层 — 服务清单 ══ */
.pay-what-you-get {
  display:flex; flex-direction:column; gap:.4rem;
  background:var(--ng-bg2); border:1px solid var(--ng-border);
  border-radius:10px; padding:.8rem 1rem; margin-bottom:1rem;
}
.pay-item {
  display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; color:var(--ng-ink2);
}
.pay-item-icon { font-size:1rem; flex-shrink:0; }

/* 选中名字预览行 */
.pay-name-preview {
  text-align:center;
  font-size:1.6rem; font-weight:900;
  font-family:'STSong','SimSun','Noto Serif SC',serif;
  color:var(--ng-ink); letter-spacing:.12em;
  margin-bottom:.9rem;
  padding:.4rem; background:linear-gradient(135deg,rgba(138,99,24,.05),transparent);
  border-radius:8px; border:1px solid var(--ng-border);
}

/* ══ 选名后付费弹窗（Choose Modal）══ */
.choose-modal-mask {
  position:fixed; inset:0;
  background:rgba(0,0,0,.72);
  z-index:1100;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  animation:cmFadeIn .22s ease;
}
@keyframes cmFadeIn { from{opacity:0} to{opacity:1} }

.choose-modal-box {
  background:var(--ng-bg2);
  border-radius:22px;
  width:min(94vw, 520px);
  max-height:92vh;
  overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.22), 0 0 0 1px var(--ng-border);
  position:relative;
  animation:cmSlideUp .28s cubic-bezier(.22,.88,.36,1);
}
@keyframes cmSlideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

/* 弹窗顶部装饰条 */
.choose-modal-ribbon {
  height:4px;
  background:linear-gradient(90deg, var(--ng-btn-a), var(--ng-gold2), var(--ng-celadon));
  border-radius:22px 22px 0 0;
}

/* 关闭按钮 */
.choose-modal-close {
  position:absolute; top:.9rem; right:1rem;
  background:var(--ng-bg3); border:none;
  width:30px; height:30px; border-radius:50%;
  font-size:.9rem; cursor:pointer;
  color:var(--ng-ink3); display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
  z-index:2;
}
.choose-modal-close:hover { background:var(--ng-border2); color:var(--ng-ink); }

/* 弹窗主体 */
.choose-modal-inner { padding:1.6rem 2rem 1.8rem; }
@media(max-width:480px){ .choose-modal-inner{ padding:1.2rem 1.2rem 1.4rem; } }

/* 名字展示区 */
.cm-name-display {
  text-align:center;
  padding:1.6rem .5rem 1.2rem;
  position:relative;
  background:var(--ng-bg3);
  border-radius:14px;
  margin-bottom:.8rem;
  border:1px solid var(--ng-border);
}
.cm-name-display::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.04) 0%, transparent 70%);
  border-radius:14px;
  pointer-events:none;
}
/* 印章装饰 */
.cm-seal-deco {
  position:absolute; right:1rem; top:.5rem;
  font-size:2.2rem;
  font-family:'STSong','SimSun',serif;
  color:var(--ng-red);
  opacity:.18;
  transform:rotate(12deg);
  line-height:1;
  user-select:none;
}
.cm-name-label {
  font-size:.65rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ng-ink3); opacity:.7; margin-bottom:.5rem;
}
.cm-name-zh {
  font-size:4rem; font-weight:900; line-height:1.1;
  font-family:'STSong','SimSun','Noto Serif SC',serif;
  color:var(--ng-ink); letter-spacing:.18em;
  text-shadow:0 3px 20px rgba(0,0,0,.12);
}
.cm-name-py {
  font-size:1.15rem; color:var(--ng-gold); font-weight:700;
  letter-spacing:.14em; margin-top:.35rem; font-family:Georgia,serif;
  font-style:italic;
}
.cm-name-meaning {
  font-size:.82rem; color:var(--ng-ink3); margin-top:.5rem; line-height:1.6;
  font-style:italic; opacity:.75;
}

/* 分隔线 */
.cm-divider {
  display:flex; align-items:center; gap:.8rem;
  margin:1rem 0 .9rem;
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ng-gold); opacity:.6;
}
.cm-divider::before,.cm-divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--ng-border2), transparent);
}

/* 套餐卡 */
.cm-package-card {
  background:linear-gradient(135deg, var(--ng-bg2), var(--ng-bg3));
  border:1.5px solid var(--ng-border2);
  border-radius:14px; padding:1rem 1.2rem;
  margin-bottom:.9rem;
  position:relative; overflow:hidden;
}
.cm-package-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--ng-gold), var(--ng-gold2));
}
.cm-package-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 12px; border-radius:20px;
  background:linear-gradient(135deg, var(--ng-gold), var(--ng-gold2));
  color:var(--ng-btn-text);
  margin-bottom:.7rem;
}
.cm-feature-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem .5rem;
  margin-bottom:.85rem;
}
.cm-feature-item {
  display:flex; align-items:center; gap:5px;
  font-size:.79rem; color:var(--ng-ink2);
}
.cm-feature-item .cm-check { color:var(--ng-celadon); font-size:.85rem; flex-shrink:0; }
.cm-price-row {
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:.6rem; border-top:1px solid var(--ng-border);
}
.cm-price-main { font-size:1.8rem; font-weight:900; color:var(--ng-gold); }
.cm-price-orig {
  font-size:.8rem; color:var(--ng-ink3); text-decoration:line-through; opacity:.5;
  margin-left:.3rem;
}
.cm-price-note { font-size:.72rem; color:var(--ng-ink3); opacity:.65; }

/* 免费项提示 */
.cm-free-note {
  display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; color:var(--ng-ink3); opacity:.65;
  margin-bottom:.9rem; padding:.5rem .8rem;
  background:var(--ng-bg2); border-radius:8px;
  border:1px solid var(--ng-border);
}
.cm-free-note-icon { font-size:.9rem; }

/* CTA按钮 */
.btn-cm-buy {
  width:100%; padding:1rem;
  background:linear-gradient(135deg, var(--ng-btn-a), var(--ng-btn-b));
  color:var(--ng-btn-text);
  font-size:1rem; font-weight:900; border:none;
  border-radius:12px; cursor:pointer;
  font-family:'STSong','SimSun',serif; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:var(--ng-shadow-g);
  transition:opacity .2s, transform .1s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.btn-cm-buy::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  opacity:0; transition:opacity .2s;
}
.btn-cm-buy:hover::before { opacity:1; }
.btn-cm-buy:hover { opacity:.93; box-shadow:0 10px 40px rgba(0,0,0,.28); }
.btn-cm-buy:active { transform:scale(.98); }
[data-theme="dark"] .btn-cm-buy { background:linear-gradient(135deg,var(--ng-gold),var(--ng-gold2)); color:#0f0d0a; }

.btn-cm-skip {
  display:block; text-align:center;
  margin-top:.7rem; padding:.5rem;
  font-size:.76rem; color:var(--ng-ink3);
  background:none; border:none; cursor:pointer;
  text-decoration:none;
  transition:color .15s;
}
.btn-cm-skip:hover { color:var(--ng-ink); }

/* inkblack主题弹窗微调 */
[data-palette="inkblack"] .choose-modal-box {
  border:1px solid rgba(212,170,80,.2);
}
[data-palette="inkblack"] .cm-name-zh {
  text-shadow:0 0 30px rgba(212,170,80,.25), 0 3px 20px rgba(0,0,0,.5);
}
/* inkblack(翠微)主题弹窗微调 */
[data-palette="inkblack"] .cm-package-card {
  background:linear-gradient(135deg,#e8f0e4,#d0ddc8);
}

/* ══════════════════════════════════════════════════════════
   新表单：快速区 / 折叠区 / 多选标签  (v6)
   ══════════════════════════════════════════════════════════ */

/* ── 快速区 ── */
.quick-zone { margin-bottom:0; }
.quick-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:.9rem;
  align-items:center;
}
@media(max-width:650px){ .quick-row{ grid-template-columns:1fr; } }

/* Gender 行：label + 按钮组同行 */
.gender-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.gender-row .birth-toggle-text { flex-shrink:0; white-space:nowrap; }
.gender-row .gender-btns { flex:1; }

/* 性别按钮组 */
.gender-btns { display:flex; gap:5px; flex-wrap:wrap; }
.gbtn {
  flex:1; min-width:72px;
  padding:.55rem .4rem;
  border:1px solid var(--ng-border2);
  background:var(--ng-bg);
  color:var(--ng-ink3);
  border-radius:8px; cursor:pointer; font-size:.78rem; font-weight:600;
  transition:all .15s; letter-spacing:.02em;
  font-family: var(--f-display);
}
.gbtn:hover { border-color:var(--ng-gold); color:var(--ng-gold); }
.gbtn.active {
  background:var(--ng-btn-a,#0d0d0d);
  color:var(--ng-btn-text,#fff);
  border-color:transparent;
}



/* 出生年月横排（保留兼容旧select用） */
.birth-row { display:flex; gap:6px; }
.birth-sel { flex:1; }
.birth-year { flex:2; }
.birth-month { flex:1.5; }

/* ── Toggle 开关行 ── */
.birth-toggle-row {
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.birth-toggle-text {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ng-ink2);
}
.birth-toggle-row .opt {
  font-size:.7rem; color:var(--ng-ink3); font-weight:400; text-transform:none; letter-spacing:0;
}

/* Toggle Switch 按钮 */
.birth-switch {
  position:relative; display:inline-block;
  width:36px; height:20px; flex-shrink:0;
  background:var(--ng-bg3);
  border:1px solid var(--ng-border2);
  border-radius:20px;
  cursor:pointer; padding:0;
  transition:background .25s, border-color .25s;
  outline:none;
}
.birth-switch-thumb {
  position:absolute; top:3px; left:3px;
  width:12px; height:12px; border-radius:50%;
  background:var(--ng-ink3);
  transition:transform .25s, background .25s;
  display:block;
}
.birth-switch.on {
  background:var(--ng-gold);
  border-color:var(--ng-gold);
}
.birth-switch.on .birth-switch-thumb {
  transform:translateX(16px);
  background:#1c1410;
}

/* 定位锚点（toggle行下方，面板从此绝对定位） */
.birth-popup-anchor {
  position:relative;
}

/* 展开的生日面板 — 浮层 */
.birth-panel {
  position:absolute;
  top:8px; left:0;
  z-index:200;
  background:var(--ng-bg2);
  border:1px solid var(--ng-border2);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  padding:14px 16px;
  min-width:360px;
  max-width:480px;
}
@media(max-width:650px){
  .birth-panel { min-width:0; width:calc(100vw - 40px); left:0; }
}

/* 面板内双栏 */
.birth-panel-inner {
  display:flex; gap:14px; align-items:flex-start;
}
.birth-panel-left { flex-shrink:0; }

/* 底部说明（缩短版） */
.birth-zodiac-note {
  margin-top:.45rem;
  font-size:.68rem; color:var(--ng-ink3); font-style:italic; line-height:1.4;
  max-width:190px;
}

/* ── 生肖信息卡 ── */
.birth-zodiac-card {
  flex:1; min-width:0;
  padding:10px 12px;
  background:var(--ng-bg3);
  border:1px solid var(--ng-border);
  border-radius:8px;
  transition:opacity .3s;
}
.bzc-emoji {
  font-size:2rem; line-height:1;
  margin-bottom:4px;
  display:block;
}
.bzc-name {
  font-family:var(--f-display);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ng-gold);
  margin-bottom:6px;
}
.bzc-trait {
  font-size:.72rem; color:var(--ng-ink2);
  line-height:1.55;
  margin-bottom:8px;
}
.bzc-naming {
  font-size:.7rem; color:var(--ng-ink3);
  font-style:italic; line-height:1.5;
  border-top:1px solid var(--ng-border);
  padding-top:6px;
}

/* Done 按钮行 */
.birth-panel-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:8px;
  border-top:1px solid var(--ng-border);
  gap:10px;
}
.birth-selected-display {
  font-size:.78rem; font-family:var(--f-display);
  color:var(--ng-gold); font-weight:700; letter-spacing:.05em;
  min-height:1.2em;
}
.birth-done-btn {
  flex-shrink:0;
  padding:5px 16px;
  background:var(--ng-btn-a);
  color:var(--ng-btn-text);
  border:none; border-radius:6px;
  font-size:.72rem; font-family:var(--f-display);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s;
}
.birth-done-btn:hover { opacity:.82; }

/* toggle行右侧的已选日期标签 */
.birth-selected-tag {
  font-size:.72rem; font-family:var(--f-display);
  color:var(--ng-gold); font-weight:700; letter-spacing:.06em;
  margin-left:4px;
}

/* ── 滚筒选择器容器 ── */
.drum-picker-wrap {
  display:flex; align-items:center; gap:8px;
  margin:.4rem 0;
}
.drum-sep {
  font-size:1.2rem; color:var(--ng-ink3); line-height:1;
}

/* 单个滚筒 */
.drum-picker {
  position:relative;
  width:90px; height:180px; /* 5行×36px */
  overflow:hidden;
  border:1px solid var(--ng-border2);
  border-radius:8px;
  background:var(--ng-bg2);
  flex-shrink:0;
}
#drumYear { width:100px; }
#drumMonth { width:80px; }

/* 中间高亮窗口（伪元素） */
.drum-window {
  position:absolute; top:50%; left:0; right:0;
  height:36px; margin-top:-18px;
  background:rgba(138,99,24,.08);
  border-top:1px solid var(--ng-border2);
  border-bottom:1px solid var(--ng-border2);
  pointer-events:none; z-index:2;
}
/* 上下渐隐 */
.drum-picker::before,
.drum-picker::after {
  content:''; position:absolute; left:0; right:0; height:60px; z-index:1; pointer-events:none;
}
.drum-picker::before { top:0;    background:linear-gradient(to bottom, var(--ng-bg2) 0%, transparent 100%); }
.drum-picker::after  { bottom:0; background:linear-gradient(to top,    var(--ng-bg2) 0%, transparent 100%); }

/* 滚动列表 */
.drum-list {
  height:100%; overflow-y:scroll; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.drum-list::-webkit-scrollbar { display:none; }

/* 每一项 */
.drum-item {
  height:36px; line-height:36px;
  text-align:center;
  font-size:.88rem; font-family:var(--f-display);
  color:var(--ng-ink3);
  scroll-snap-align:start;
  cursor:pointer;
  transition:color .15s, font-size .15s;
  user-select:none;
}
.drum-item.drum-pad { cursor:default; pointer-events:none; }
.drum-item.drum-active {
  color:var(--ng-gold);
  font-size:.95rem; font-weight:700;
}

/* 底部说明 */
.birth-zodiac-note {
  margin-top:.5rem;
  font-size:.72rem; color:var(--ng-ink3); font-style:italic; line-height:1.5;
}

/* 姓 + 百家姓按钮 */
.qf-surname { position:static; }
.quick-row > .fgroup { margin-bottom:0; }
.surname-wrap { position:relative; display:flex; gap:5px; }
.surname-wrap input { flex:1; }
.surname-pick-btn {
  flex-shrink:0;
  padding:.55rem .8rem;
  background:var(--ng-bg3);
  border:1px solid var(--ng-border2);
  border-radius:7px; cursor:pointer;
  font-size:.72rem; font-weight:700; color:var(--ng-gold);
  white-space:nowrap; transition:all .15s;
  font-family:'STSong','SimSun',serif;
}
.surname-pick-btn:hover { border-color:var(--ng-gold); background:var(--ng-bg2); }
/* 百家姓下拉 — 向上弹出 */
.surname-dropdown {
  display:none;
  position:absolute;
  bottom:calc(100% + 6px); top:auto;
  left:0; right:0;
  background:var(--ng-bg2);
  border:1px solid var(--ng-border2);
  border-radius:10px;
  padding:.6rem;
  z-index:9999;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
  max-height:220px; overflow-y:auto;
}
.surname-dropdown.open { display:block; }
.sd-grid {
  display:flex; flex-wrap:wrap; gap:4px;
}
.sd-item {
  padding:4px 10px; border-radius:8px; cursor:pointer;
  font-size:.85rem; font-family:'STSong','SimSun',serif;
  background:var(--ng-bg3); color:var(--ng-ink2);
  border:1px solid var(--ng-border);
  transition:all .12s;
}
.sd-item:hover { background:var(--ng-gold); color:#fff; border-color:transparent; }

/* 名字长度按钮组 */
.length-hint {
  font-size:.7rem; color:var(--ng-ink3); margin-bottom:.4rem;
  line-height:1.5;
}
.length-note { opacity:.55; }
.length-btns { display:flex; gap:5px; }
.lbtn {
  flex:1; padding:.5rem .3rem;
  border:1px solid var(--ng-border2);
  background:var(--ng-bg);
  color:var(--ng-ink3);
  border-radius:8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:.8rem; font-weight:700; transition:all .15s;
  font-family: var(--f-display);
}
.lbtn span { font-size:.62rem; font-weight:400; opacity:.6; }
.lbtn:hover { border-color:var(--ng-gold); color:var(--ng-gold); }
.lbtn.active {
  background:var(--ng-btn-a,#0d0d0d);
  color:var(--ng-btn-text,#fff);
  border-color:transparent;
}
.lbtn.active span { opacity:.7; }

/* ── 折叠区通用 ── */
.collapse-section {
  border:1px solid var(--ng-border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:.75rem;
}
.collapse-toggle {
  width:100%; display:flex; align-items:center; gap:.55rem;
  padding:.75rem 1rem;
  background:var(--ng-bg3);
  border:none; cursor:pointer; text-align:left;
  color:var(--ng-ink2); font-size:.82rem; font-weight:700;
  transition:background .15s;
  font-family: var(--f-display); letter-spacing:.06em;
}
.collapse-toggle:hover { background:var(--ng-bg2); }
.ct-icon { font-size:.85rem; color:var(--ng-gold); flex-shrink:0; }
.ct-label { font-weight:800; color:var(--ng-ink); }
.ct-tags-preview {
  flex:1; font-size:.68rem; font-weight:400;
  color:var(--ng-ink3); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:none; opacity:.7;
}
.ct-arrow {
  flex-shrink:0; font-size:.7rem; color:var(--ng-ink3);
  transition:transform .22s;
}
.collapse-section.open .ct-arrow { transform:rotate(180deg); }

.collapse-body {
  display:none;
  padding:.9rem 1rem .6rem;
  border-top:1px solid var(--ng-border);
}
.collapse-section.open .collapse-body { display:block; }

/* ── 多选标签 ── */
.tag-group { margin-bottom:.9rem; }
.tag-group-label {
  font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ng-ink3); opacity:.6;
  margin-bottom:.45rem;
  font-family: var(--f-display);
}
.mtags { display:flex; flex-wrap:wrap; gap:5px; }
.mtag {
  font-size:.7rem; padding:4px 12px;
  border-radius:16px; border:1px solid var(--ng-border2);
  color:var(--ng-ink3); cursor:pointer;
  background:var(--ng-bg3);
  transition:all .15s; user-select:none;
  font-family: var(--f-display); letter-spacing:.06em;
}
.mtag:hover { border-color:var(--ng-gold); color:var(--ng-gold); background:var(--ng-bg2); }
.mtag.active {
  background:var(--ng-btn-a,#0d0d0d);
  border-color:transparent;
  color:var(--ng-btn-text,#fff);
}
/* dark模式：金色激活 */
[data-theme="dark"] .mtag.active { background:var(--ng-gold); color:#1c1410; border-color:transparent; }
[data-theme="dark"] .gbtn.active  { background:var(--ng-gold); color:#1c1410; border-color:transparent; }
[data-theme="dark"] .lbtn.active  { background:var(--ng-gold); color:#1c1410; border-color:transparent; }