/* ========== 江南无忧 v3.0 - 紫红炫酷风格 (Purple-Red / Magenta) ========== */

/* ── CSS Variables ── */
:root {
  --primary: #c026d3;
  --primary-dark: #a21caf;
  --primary-darker: #86198f;
  --primary-light: #e879f9;
  --primary-soft: #fae8ff;
  --primary-bg: #fdf4ff;
  --primary-tint: #faf5ff;

  --accent: #f43f5e;
  --accent-soft: #ffe4e6;

  --bg: #ffffff;
  --bg-soft: #f9fafb;
  --bg-warm: #f3f4f6;

  --text: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --text-4: #9ca3af;

  --border: #e5e7eb;
  --border-light: #f3f4f6;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --site-w: 1440px; /* 站点最大内容宽度（统一布局基准） */

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
  --shadow-primary: 0 8px 24px rgba(192, 38, 211, 0.25);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: 'Inter', 'Noto Sans SC', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Noto Sans SC', 'Noto Sans KR', sans-serif;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --primary-bg: #3b0764;
  --primary-tint: #1e0a3c;
  --primary-soft: #581c87;

  --bg: #0d0712;
  --bg-soft: #150d1f;
  --bg-warm: #1c1330;

  --text: #f5f0fa;
  --text-2: #d8cfe4;
  --text-3: #a99fc0;
  --text-4: #7d7395;

  --border: #2a1f3d;
  --border-light: #1c1330;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--transition),color var(--transition);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%;height:auto}
input,textarea,select{font-family:inherit}

/* ── Layout helpers ── */
.container{max-width:var(--site-w);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
@media(max-width:768px){.section{padding:64px 0}}
.section-head{text-align:center;margin-bottom:56px;max-width:680px;margin-left:auto;margin-right:auto}
.section-tag{
  display:inline-block;
  padding:5px 14px;
  background:var(--primary-bg);
  color:var(--primary-dark);
  font-size:0.78rem;
  font-weight:600;
  border-radius:var(--radius-pill);
  margin-bottom:16px;
  letter-spacing:0.02em;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
  margin-bottom:14px;
  letter-spacing:-0.02em;
}
.section-head p{font-size:1.05rem;color:var(--text-3);line-height:1.6}
@media(max-width:768px){.section-head h2{font-size:1.85rem}}

/* ── Nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:all var(--transition);
}
[data-theme="dark"] .nav{background:rgba(11,18,32,0.85)}
.nav.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-xs)}
.nav-inner{
  max-width:var(--site-w);margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;height:72px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.brand--logo{
  padding:0;line-height:0;display:inline-flex;align-items:center;
  background:transparent !important;box-shadow:none !important;
  transition:transform .35s cubic-bezier(.16,1,.3,1), filter .35s ease;
}
.brand--logo:hover{
  transform:translateY(-1px);
  filter:drop-shadow(0 8px 18px rgba(192,38,211,0.45));
}
.brand-logo-img{
  height:48px;width:auto;max-width:180px;display:block;
  border-radius:10px;
  filter:drop-shadow(0 4px 12px rgba(192,38,211,0.28));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.brand-text,.brand-logo-bg{display:none !important}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--text-2);
  font-size:0.92rem;font-weight:500;
  transition:color var(--transition);
  position:relative;
}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}

/* ── Nav dropdown (categorized list) ── */
.nav-item--has-dropdown{
  position:relative;display:inline-flex;align-items:center;gap:2px;
  /* 让 li 的 hit-area 向下延伸 18px 覆盖 dropdown 起点，
     避免鼠标从 <a> 移到 dropdown 时穿过 18px 视觉间隙导致 :hover 中断、
     dropdown pointer-events 瞬间切回 none 而"点不中"。margin-bottom 抵消 layout 影响。*/
  padding-bottom:18px;
  margin-bottom:-18px;
}
.nav-item--has-dropdown>a{display:inline-flex;align-items:center}
.nav-caret{
  display:inline-block;width:8px;height:8px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  margin-left:4px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  opacity:.6;
}
.nav-item--has-dropdown:hover .nav-caret,
.nav-item--has-dropdown.is-open .nav-caret{
  transform:translateY(1px) rotate(-135deg);
  opacity:1;
}
.nav-dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:200px;padding:10px;
  background:var(--surface-1, #fff);
  border:1px solid var(--border-soft, rgba(192,38,211,.12));
  border-radius:16px;
  box-shadow:
    0 24px 60px -20px rgba(192,38,211,.18),
    0 10px 30px -10px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1);
  z-index:200;
  background-image:
    linear-gradient(180deg, rgba(192,38,211,.04), transparent 30%),
    radial-gradient(circle at 0% 0%, rgba(236,72,153,.06), transparent 40%);
}
[data-theme="dark"] .nav-dropdown{
  background:#15192a;
  border-color:rgba(255,255,255,.08);
  box-shadow:
    0 24px 60px -20px rgba(192,38,211,.35),
    0 10px 30px -10px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;
}
/* 透明桥接带：盖住 li 底边到下拉面板顶边之间的 18px 空隙。
   它是 .nav-dropdown 的子元素，鼠标停在上面时 li 仍处于 :hover，
   下拉框就不会在鼠标下移的途中消失。宽度跟随面板，斜向移动也接得住。
   面板关闭时 .nav-dropdown 是 pointer-events:none，桥接带不会挡住底下的内容。*/
.nav-dropdown::after{
  content:"";position:absolute;left:0;right:0;top:-20px;height:20px;
}
.nav-dropdown::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;
  background:var(--surface-1, #fff);
  border-left:1px solid var(--border-soft, rgba(192,38,211,.12));
  border-top:1px solid var(--border-soft, rgba(192,38,211,.12));
  border-radius:3px 0 0 0;
}
[data-theme="dark"] .nav-dropdown::before{
  background:#15192a;
  border-color:rgba(255,255,255,.08);
}
.nav-item--has-dropdown:hover > .nav-dropdown,
.nav-item--has-dropdown.is-open > .nav-dropdown{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.nav-dropdown-inner{
  display:flex;flex-direction:column;gap:2px;
  min-width:180px;
  position:relative;z-index:1;
}
.nav-dropdown-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px 9px 16px;
  border-radius:10px;
  color:var(--text-2);
  text-decoration:none;
  font-size:.88rem;font-weight:500;
  white-space:nowrap;
  position:relative;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible{
  background:linear-gradient(90deg, rgba(192,38,211,.08), rgba(236,72,153,.06));
  color:var(--primary);
  transform:translateX(2px);
  outline:none;
}
.nav-dropdown-item.is-active{
  color:var(--primary);
  background:linear-gradient(90deg, rgba(192,38,211,.10), rgba(236,72,153,.04));
  font-weight:600;
}
.nav-dd-arrow{
  font-style:normal;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
  color:var(--primary);
  font-size:.85rem;
}
.nav-dropdown-item:hover .nav-dd-arrow,
.nav-dropdown-item.is-active .nav-dd-arrow{
  opacity:1;
  transform:translateX(0);
}
.nav-dropdown-item::before{
  content:"";position:absolute;left:4px;top:50%;
  width:2px;height:0;background:linear-gradient(180deg,#c026d3,#ec4899);
  border-radius:2px;transform:translateY(-50%);
  transition:height .2s ease;
}
.nav-dropdown-item:hover::before,
.nav-dropdown-item.is-active::before{height:60%}
[data-theme="dark"] .nav-dropdown-item:hover,
[data-theme="dark"] .nav-dropdown-item.is-active{
  background:linear-gradient(90deg, rgba(192,38,211,.18), rgba(236,72,153,.10));
}

/* ── Current-category filter bar (above list pages) ── */
.cat-filter-bar{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 16px;
  padding:8px 8px 8px 16px;
  background:linear-gradient(90deg, rgba(192,38,211,.08), rgba(236,72,153,.04));
  border:1px solid rgba(192,38,211,.18);
  border-radius:999px;
  font-size:.85rem;color:var(--text-2);
  animation:catBarIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes catBarIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cat-filter-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#c026d3,#ec4899);
  box-shadow:0 0 0 4px rgba(192,38,211,.15);
  flex-shrink:0;
}
.cat-filter-label{color:var(--text-3);font-weight:500}
.cat-filter-name{
  color:var(--primary);font-weight:700;
  padding:2px 10px;background:rgba(192,38,211,.10);border-radius:999px;
}
.cat-filter-clear{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:4px;padding:4px 12px;
  border-radius:999px;background:rgba(0,0,0,.04);
  color:var(--text-2);text-decoration:none;font-size:.8rem;font-weight:500;
  transition:background .2s,color .2s;
}
.cat-filter-clear:hover{background:rgba(192,38,211,.12);color:var(--primary)}
.cat-filter-clear svg{width:12px;height:12px}
[data-theme="dark"] .cat-filter-bar{
  background:linear-gradient(90deg, rgba(192,38,211,.18), rgba(236,72,153,.08));
  border-color:rgba(192,38,211,.3);
}
[data-theme="dark"] .cat-filter-clear{background:rgba(255,255,255,.06);color:var(--text-2)}
[data-theme="dark"] .cat-filter-clear:hover{background:rgba(192,38,211,.25);color:var(--primary)}

/* ── Empty state for filter with no results ── */
.empty-state{
  text-align:center;padding:64px 24px;
  color:var(--text-3);
  background:linear-gradient(180deg, transparent, rgba(192,38,211,.04));
  border:1px dashed rgba(192,38,211,.18);
  border-radius:18px;
  grid-column:1 / -1;
}
.empty-state .empty-icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg, rgba(192,38,211,.15), rgba(236,72,153,.08));
  display:inline-flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:14px;
}
.empty-state p{margin-bottom:18px;font-size:.95rem}

.nav-actions{display:flex;align-items:center;gap:10px}
.btn-ghost{padding:8px 18px;font-size:0.88rem;font-weight:600;color:var(--text-2);transition:color var(--transition);border-radius:var(--radius-pill)}
.btn-ghost:hover{color:var(--primary)}
.btn-primary{
  padding:10px 22px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;
  font-size:0.88rem;font-weight:600;
  transition:all var(--transition);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-primary)}
.btn-primary svg{width:16px;height:16px}
/* ── 主题开关 ──
   日、月两个图标常驻显示，滑块停在哪一侧就是当前主题。
   滑块位置由 html[data-theme] 驱动，JS 只负责改这个属性，不碰按钮内部结构。*/
.theme-switch{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;
  width:62px;height:34px;padding:3px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.5) 100%);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 2px 8px rgba(192,38,211,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--transition);
}
.theme-switch:hover{border-color:var(--primary-soft)}
[data-theme="dark"] .theme-switch{
  background:linear-gradient(135deg, rgba(30,20,40,0.6) 0%, rgba(20,15,30,0.4) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.theme-switch-thumb{
  position:absolute;top:3px;left:3px;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  box-shadow:0 3px 10px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease;
}
[data-theme="dark"] .theme-switch-thumb{
  transform:translateX(28px);
  background:linear-gradient(135deg,#a78bfa 0%,#6366f1 100%);
  box-shadow:0 3px 10px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.28);
}
.theme-switch-ico{
  position:relative;z-index:1;
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-3);
  transition:color .3s ease;
}
.theme-switch-ico svg{width:15px;height:15px}
.theme-switch-ico--sun{color:#fff}
[data-theme="dark"] .theme-switch-ico--sun{color:var(--text-3)}
[data-theme="dark"] .theme-switch-ico--moon{color:#fff}
@media(max-width:640px){
  .theme-switch{width:54px;height:30px}
  .theme-switch-thumb{width:24px;height:24px}
  [data-theme="dark"] .theme-switch-thumb{transform:translateX(24px)}
  .theme-switch-ico{width:24px;height:24px}
  .theme-switch-ico svg{width:13px;height:13px}
}
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  height:36px;padding:3px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.5) 100%);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(192,38,211,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="dark"] .lang-switch{
  background:linear-gradient(135deg, rgba(30,20,40,0.6) 0%, rgba(20,15,30,0.4) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lang-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:28px;padding:0 9px;
  border-radius:999px;
  background:transparent;border:0;cursor:pointer;
  font-size:0.78rem;font-weight:600;letter-spacing:0.01em;
  color:var(--text-2);
  white-space:nowrap;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.lang-btn.active{
  color:#fff;
  background:linear-gradient(135deg,#c026d3 0%,#a21caf 55%,#f43f5e 100%);
  box-shadow:0 3px 10px rgba(192,38,211,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  transform:translateY(-0.5px);
}
.lang-btn .lang-label{font-size:0.78rem}
@media(max-width:900px){
  .lang-btn{padding:0 7px;gap:4px}
  .lang-label{font-size:0.72rem}
}
@media(max-width:640px){
  .lang-switch{height:32px;padding:2px;gap:1px}
  .lang-btn{height:24px;padding:0 6px;gap:3px}
  .lang-label{font-size:0.66rem}
  .nav-actions{gap:6px}
}
@media(max-width:900px){.nav-links{display:none}}

/* ── Hero ── */
.hero{
  padding:0;
  min-height:calc(100vh - 72px);
  position:relative;overflow:hidden;
  isolation:isolate;
  background:var(--bg);
}
/* WebGL 光线波动画布（aurora mesh）*/
.hero-bg-fx{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
.hero-bg-fx.is-ready{ opacity:1; }
/* WebGL 不可用时的 CSS 降级（同样有动效）*/
.hero-bg-fx-fallback{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 78% 22%, rgba(196,181,253,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 18% 65%, rgba(253,164,175,0.50) 0%, transparent 70%),
    radial-gradient(ellipse 65% 50% at 50% 95%, rgba(147,197,253,0.45) 0%, transparent 70%),
    linear-gradient(135deg, #faf7ff 0%, #f0e9ff 50%, #fce7f3 100%);
  animation:heroBgFallback 18s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
.hero-bg-fx-fallback::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.4px);
  background-size:3px 3px;
  opacity:.5;mix-blend-mode:overlay;
}
[data-theme="dark"] .hero-bg-fx-fallback{
  background:
    radial-gradient(ellipse 60% 50% at 78% 22%, rgba(139,92,246,0.40) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 18% 65%, rgba(236,72,153,0.32) 0%, transparent 70%),
    radial-gradient(ellipse 65% 50% at 50% 95%, rgba(59,130,246,0.34) 0%, transparent 70%),
    linear-gradient(135deg, #1a1530 0%, #16162a 50%, #1f1230 100%);
  filter:saturate(1.15) brightness(1.05);
}
.hero-bg-fx--no-webgl + .hero-bg-fx-fallback{ z-index:0; }
@keyframes heroBgFallback{
  0%{
    background-position:
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
    transform:scale(1) rotate(0);
  }
  50%{
    background-position:
      8% -5%,
      -6% 4%,
      4% -3%,
      0% 0%;
    transform:scale(1.05) rotate(0.5deg);
  }
  100%{
    background-position:
      -4% 6%,
      7% -3%,
      -5% 4%,
      0% 0%;
    transform:scale(1.02) rotate(-0.3deg);
  }
}

/* ── Hero 浅白色波形装饰线（叠在 aurora 之上，补足动效层次，避免画面空）── */
.hero-lines{
  position:absolute;inset:0;
  z-index:1;pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero-lines.is-ready{opacity:1}
.hero-lines-svg{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
}
.hero-line{
  fill:none;
  stroke:#ffffff;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.50;
  stroke-dasharray:3000 0;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.18));
  animation:
    heroLineFloat 11s ease-in-out infinite,
    heroLineSway 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes heroLineFloat{
  0%,100%{ transform:translateX(-38px) translateY(0) }
  50%    { transform:translateX( 38px) translateY(0) }
}
@keyframes heroLineSway{
  0%,100%{ transform:translateX( 28px) translateY(-2px) }
  50%    { transform:translateX(-28px) translateY( 2px) }
}

/* 13 条线各自不同节奏（速度 / 上下摆幅 / 透明度） */
.hero-line:nth-child(1) {stroke-width:1.4;opacity:.55;animation-duration:18s,11s;animation-delay:-2s,-3s}
.hero-line:nth-child(2) {stroke-width:1.9;opacity:.65;animation-duration:13s,8.5s;animation-delay:-5s,-1s}
.hero-line:nth-child(3) {stroke-width:1.5;opacity:.50;animation-duration:16s,10s;animation-delay:-9s,-2s}
.hero-line:nth-child(4) {stroke-width:1.3;opacity:.55;animation-duration:20s,12s;animation-delay:-3s,-7s}
.hero-line:nth-child(5) {stroke-width:2.2;opacity:.75;animation-duration:11s,7.5s;animation-delay:-7s,-4s}
.hero-line:nth-child(6) {stroke-width:1.6;opacity:.62;animation-duration:14s,9s;animation-delay:-1s,-6s}
.hero-line:nth-child(7) {stroke-width:1.2;opacity:.48;animation-duration:22s,13s;animation-delay:-11s,-1s}
.hero-line:nth-child(8) {stroke-width:2.0;opacity:.70;animation-duration:12.5s,8s;animation-delay:-4s,-6s}
.hero-line:nth-child(9) {stroke-width:1.4;opacity:.55;animation-duration:17s,10.5s;animation-delay:-8s,-2s}
.hero-line:nth-child(10){stroke-width:1.2;opacity:.50;animation-duration:19s,11.5s;animation-delay:-6s,-5s}
.hero-line:nth-child(11){stroke-width:1.7;opacity:.62;animation-duration:15s,9.5s;animation-delay:-10s,-3s}
.hero-line:nth-child(12){stroke-width:1.3;opacity:.52;animation-duration:21s,12.5s;animation-delay:-4s,-8s}
.hero-line:nth-child(13){stroke-width:2.1;opacity:.70;animation-duration:12s,8s;animation-delay:-7s,-2s}

/* 暗色主题：白色描边更亮 */
[data-theme="dark"] .hero-line{opacity:.65}
[data-theme="dark"] .hero-line:nth-child(1) {opacity:.55}
[data-theme="dark"] .hero-line:nth-child(2) {opacity:.78}
[data-theme="dark"] .hero-line:nth-child(3) {opacity:.65}
[data-theme="dark"] .hero-line:nth-child(4) {opacity:.60}
[data-theme="dark"] .hero-line:nth-child(5) {opacity:.88}
[data-theme="dark"] .hero-line:nth-child(6) {opacity:.72}
[data-theme="dark"] .hero-line:nth-child(7) {opacity:.55}
[data-theme="dark"] .hero-line:nth-child(8) {opacity:.82}
[data-theme="dark"] .hero-line:nth-child(9) {opacity:.62}
[data-theme="dark"] .hero-line:nth-child(10){opacity:.58}
[data-theme="dark"] .hero-line:nth-child(11){opacity:.72}
[data-theme="dark"] .hero-line:nth-child(12){opacity:.58}
[data-theme="dark"] .hero-line:nth-child(13){opacity:.82}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  .hero-line{
    animation-duration:30s,30s;
    opacity:.32;
  }
}

/* 移动端减少线密度 */
@media (max-width: 640px){
  .hero-line:nth-child(n+8){opacity:.22}
  .hero-line:nth-child(n+10){opacity:0}
}

.hero-grid{
  position:relative;z-index:1;
  max-width:var(--site-w);margin:0 auto;
  min-height:calc(100vh - 72px);
  padding:112px 24px 96px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;
}
/* .hero-eyebrow（「628 韩国正规医美机构入驻」那颗小胶囊）已按需求整块去掉，
   连它专用的 .dot 和 @keyframes pulse 一起删了（全站没有别的消费方，
   资讯卡和侧栏那两处 .dot 各有自己的 .n-card-meta .dot / .hot-news-meta .dot）。
   现在 h1 是 .hero-text-cell 的第一个元素，上间距由 .hero-grid 的 padding 给。 */
.hero h1{
  font-family:var(--font-display);
  font-size:4.4rem;font-weight:800;line-height:1.08;
  color:var(--text);letter-spacing:-0.03em;margin-bottom:26px;
}
.hero h1 .hl{
  position:relative;display:inline-block;
  background:linear-gradient(120deg,var(--primary),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero h1 .hl::after{
  content:'';position:absolute;left:0;right:0;bottom:6px;height:12px;
  background:var(--primary-soft);z-index:-1;border-radius:4px;
}
/* Hero 三颗特性胶囊（价格透明 / 在线预约 / 签证办理）。
   纯展示，不是链接也不是按钮 —— 设计稿里它们是 hero_sub 那句话的前半截
   （「…等全流程服务，助您轻松赴韩轻松变美」），所以下外边距刻意做小，
   视觉上要和紧跟其后的副标题连成一段，别当成独立的一排按钮拉开距离。 */
.hero-feats{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-bottom:14px;
}
.hero-feat{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-size:0.92rem;font-weight:600;color:var(--text-2);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.hero-feat svg{width:17px;height:17px;flex:0 0 auto;color:var(--primary)}
.hero-sub{font-size:1.2rem;color:var(--text-3);margin-bottom:38px;max-width:520px;line-height:1.75}
.hero-search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  padding:8px 8px 8px 22px;
  max-width:540px;box-shadow:var(--shadow-sm);
  /* 按设计稿改序后搜索框是左栏最后一个元素（数字挪到它上面了），
     原来的 margin-bottom:44px 会在 hero 底部多顶出一截空白，所以归零。 */
  margin-bottom:0;
  transition:border-color var(--transition);
}
.hero-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.hero-search input{
  flex:1;border:none;background:transparent;
  font-size:1.02rem;color:var(--text);outline:none;
}
.hero-search input::placeholder{color:var(--text-4)}
.hero-search button{
  padding:11px 22px;font-size:0.98rem;
}
/* ── Hero 左栏的官方微信 / 官方电话（原来这里是三个统计数字）──
   位置在搜索框**上面**，所以这一块自己带 margin-bottom，而 .hero-search 是
   左栏最后一个元素、margin-bottom:0。这两条是一对，调序时要一起翻过来。
   毛玻璃：backdrop-filter 必须和 -webkit- 前缀成对写（Safari 到现在还只认前缀版），
   而且**背景色不能是纯色**——不透明就没有「透」，blur 等于白做。 */
.hero-contact{
  display:flex;align-items:stretch;flex-wrap:wrap;gap:14px;
  padding-top:2px;
  margin-bottom:34px;
}
.hero-contact-card{
  flex:1 1 250px;min-width:0;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-radius:18px;
  /* 半透明白 + 模糊 = 毛玻璃。深色主题在下面单独盖一遍（那边要半透明的黑） */
  background:linear-gradient(135deg,rgba(255,255,255,0.72),rgba(255,255,255,0.42));
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,0.65);
  /* 第二层 inset 是玻璃边缘的高光，去掉就会显得很「平」 */
  box-shadow:0 8px 26px -12px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.75);
  cursor:pointer;outline:none;user-select:none;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hero-contact-card:hover{
  transform:translateY(-2px);
  border-color:rgba(192,38,211,0.38);
  box-shadow:0 14px 32px -12px rgba(192,38,211,0.34), inset 0 1px 0 rgba(255,255,255,0.85);
}
.hero-contact-card:focus-visible{ box-shadow:0 0 0 3px rgba(217,70,239,.35); }
.hero-contact-ico{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
}
.hero-contact-ico svg{width:22px;height:22px}
/* 渠道色照右侧浮窗那份 SITE_CONTACT 的 color 走：微信绿 #07c160、电话蓝 #2563eb */
.hero-contact-ico.is-wechat{background:linear-gradient(135deg,#07c160,#059c4d);box-shadow:0 4px 12px -4px rgba(7,193,96,.55)}
.hero-contact-ico.is-phone {background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px -4px rgba(37,99,235,.55)}
.hero-contact-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hero-contact-label{font-size:0.8rem;color:var(--text-3);font-weight:600;letter-spacing:.02em}
.hero-contact-val{
  font-family:var(--font-display);font-size:1.02rem;font-weight:800;
  color:var(--text);letter-spacing:-.01em;
  /* 微信号是一长串字母，窄栏下要能断行，否则会把「点击复制」按钮挤出卡片 */
  word-break:break-all;line-height:1.25;
}
/* .book-action 的样式挂在 .book-line 下（医院详情侧栏），选择器进不来，这里自己写一份 */
.hero-contact-card .book-action{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
  padding:7px 13px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;
  font-size:0.76rem;font-weight:700;white-space:nowrap;
  box-shadow:0 4px 12px -4px rgba(192,38,211,.6);
  transition:background var(--transition);
}
.hero-contact-card:hover .book-action{background:var(--primary-dark)}
/* 复制成功态：initBookingCopy() 加 .is-copied 1.5 秒，bookPulse 关键帧定义在文件下方的 .book-line 那一节 */
.hero-contact-card.is-copied{
  border-color:rgba(34,197,94,.5);
  box-shadow:0 10px 28px -12px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,0.8);
}
.hero-contact-card.is-copied .book-action{
  background:#22c55e;box-shadow:0 4px 12px -4px rgba(34,197,94,.6);
  animation:bookPulse .4s ease;
}
[data-theme="dark"] .hero-contact-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 26px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-theme="dark"] .hero-contact-card:hover{
  border-color:rgba(232,121,249,0.42);
  box-shadow:0 14px 32px -12px rgba(192,38,211,0.5), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* ── 首页 Hero 右栏「扫码联系顾问」二维码卡 ──
   替换了原来的 .hero-portrait 医院图轮播。块数由模板从 $SITE_CONTACT_CFG 里筛
   （show=1 且填了 qr），现在是 3 块；grid 用 auto-fit 而不是写死 repeat(3)，
   以后加减渠道不用回来改 CSS。
   毛玻璃：background 必须半透明，backdrop-filter 必须和 -webkit- 前缀成对写
   （Safari 至今只认前缀版），深色主题在下面单独盖一遍。 */
.hero-qr-card{
  position:relative;
  padding:30px 28px 26px;
  border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(255,255,255,0.78) 0%,rgba(253,244,255,0.62) 55%,rgba(255,228,230,0.52) 100%);
  border:1px solid rgba(255,255,255,0.68);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  /* 第二层 inset 是玻璃边缘的高光，去掉会显得很「平」（和 .hero-contact-card 一致） */
  box-shadow:0 22px 56px -22px rgba(134,25,143,0.28), inset 0 1px 0 rgba(255,255,255,0.8);
}
.hero-qr-head{text-align:center;margin-bottom:22px}
.hero-qr-title{
  font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  color:var(--text);letter-spacing:-0.01em;margin-bottom:8px;line-height:1.25;
}
.hero-qr-sub{font-size:0.88rem;color:var(--text-3);line-height:1.5}
.hero-qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:16px}
.hero-qr-item{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:var(--radius-lg);
  padding:13px 11px 11px;text-align:center;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hero-qr-item:hover{
  transform:translateY(-4px);
  border-color:rgba(192,38,211,0.32);
  box-shadow:0 12px 26px -12px rgba(192,38,211,0.3);
}
/* 二维码必须是正方形且完整可见 —— object-fit 用 contain 不用 cover，
   cover 会把码的定位角裁掉，扫不出来 */
.hero-qr-img{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:#fff;margin-bottom:9px;
}
.hero-qr-img img{width:100%;height:100%;object-fit:contain;display:block}
.hero-qr-name{font-size:0.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
/* 码下面那行原来是提示语（.hero-qr-hint「长按或扫一扫」），已换成账号本身。
   .hero-qr-hint 现在全站无消费方，留着不删，改回提示语就不用重写样式。
   账号是要被抄走的：user-select:all 让点一下就整段选中（ID 里有数字，双击只会选中一段），
   break-all 防长 ID 顶破格子，tabular-nums 让数字等宽、三格对齐。 */
.hero-qr-hint{font-size:0.72rem;color:var(--text-4)}
.hero-qr-acct{
  font-size:0.78rem;color:var(--text-3);line-height:1.35;
  font-variant-numeric:tabular-nums;letter-spacing:0.01em;
  word-break:break-all;-webkit-user-select:all;user-select:all;cursor:text;
}
[data-theme="dark"] .hero-qr-card{
  background:linear-gradient(150deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04));
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 22px 56px -22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-theme="dark"] .hero-qr-item{
  background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);
}
[data-theme="dark"] .hero-qr-item:hover{border-color:rgba(232,121,249,0.42)}
@media(max-width:960px){
  .hero-qr-card{padding:22px 18px 20px}
  .hero-qr-title{font-size:1.25rem}
  .hero-qr-grid{gap:12px}
}

.hero-visual{position:relative}
.hero-portrait-wrap{position:relative}
.hero-portrait{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-xl);
  background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary-bg) 100%);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
}
.hero-portrait .media-mono{
  font-family:var(--font-display);font-weight:800;
  font-size:8rem;color:rgba(192,38,211,0.18);
  user-select:none;
}
.hero-portrait::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(192,38,211,0.08) 0%, transparent 60%);
}
.hero-portrait::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(192,38,211,0.15) 1px, transparent 1.5px);
  background-size:24px 24px;
  opacity:0.3;
  mask-image:radial-gradient(ellipse 80% 80% at 80% 80%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 80% 80%, #000 0%, transparent 70%);
}

/* ── Hero 轮播 ── */
.hero-carousel{
  position:relative;outline:none;
  cursor:grab;
  user-select:none;
}
.hero-carousel.dragging{cursor:grabbing}
.hc-track{
  position:absolute;inset:0;
  border-radius:inherit;overflow:hidden;
}
.hc-slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.16,1,.3,1);
  transform:scale(1.04);
  will-change:opacity, transform;
}
.hc-slide.is-active{
  opacity:1;pointer-events:auto;
  transform:scale(1);
  animation:hcFadeIn .6s cubic-bezier(.4,0,.2,1);
}
.hc-slide.is-active.from-right{transform:translateX(28px) scale(1.02);animation:hcInR .6s cubic-bezier(.16,1,.3,1) forwards}
.hc-slide.is-active.from-left {transform:translateX(-28px) scale(1.02);animation:hcInL .6s cubic-bezier(.16,1,.3,1) forwards}
.hc-slide.is-clickable{cursor:pointer}
.hc-slide-link{
  position:absolute;inset:0;z-index:1;
  text-indent:-9999px;overflow:hidden;
  background:transparent;
  cursor:pointer;
  /* 让原生链接吃 click，但拖拽逻辑仍走 root 的 pointerup（仅判断是否 moved） */
}
.hc-slide-link:focus-visible{outline:2px dashed #fff;outline-offset:-6px;text-indent:0;color:#fff;font-size:0.75rem;padding:6px 10px;}
@keyframes hcFadeIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes hcInR{from{opacity:0;transform:translateX(40px) scale(1.04)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes hcInL{from{opacity:0;transform:translateX(-40px) scale(1.04)}to{opacity:1;transform:translateX(0) scale(1)}}
.hc-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hc-caption{
  position:absolute;left:18px;right:18px;bottom:48px;
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hc-badge{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:0.74rem;font-weight:600;
  letter-spacing:0.04em;
}
.hc-cap-text{
  color:#fff;font-weight:700;
  font-family:var(--font-display);
  font-size:1.4rem;line-height:1.25;
  letter-spacing:-0.01em;
}
.hc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--text);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
  z-index:5;cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hc-arrow svg{width:18px;height:18px}
/* 现在按钮在 .hero-portrait-wrap 内部, 相对 wrap 定位;
   left/right 用 -54 让按钮溢出到 portrait 卡片外(38 宽 + 16 间距) */
.hc-prev{left:-54px}
.hc-next{right:-54px}
/* hover 显示触发: 任何鼠标进入 wrap 都显示两侧箭头 (即使 portrait 在 hover) */
.hero-portrait-wrap:hover .hc-arrow{opacity:1}
.hero-carousel:hover .hc-arrow{opacity:1}
.hc-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hc-arrow:active{transform:translateY(-50%) scale(0.94)}
.hc-dots{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:18px;z-index:5;
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hc-dot{
  position:relative;
  width:24px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.35);
  border:none;padding:0;cursor:pointer;
  overflow:hidden;transition:width .3s ease, background .3s ease;
}
.hc-dot.active{width:36px;background:rgba(255,255,255,.45)}
.hc-dot-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,#fde68a 100%);
  transform-origin:left;transform:scaleX(0);
  border-radius:2px;
}
@keyframes hcFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-carousel:focus-visible{box-shadow:var(--shadow-lg), 0 0 0 3px var(--primary-bg)}

/* 让徽章和 tag 不挡住轮播交互 */
.hero-visual>.hero-badge{z-index:6}
.hero-visual>.hero-tag-bottom{z-index:6}
/* 箭头默认溢出到 portrait 卡片外(right:-54px)。容器 max-width 1392px 居中,
   两侧留白 = max(24, (vw-1392)/2), 要放下 54px 的溢出得 vw >= 1508。
   窄于这个宽度右箭头会被推到视口外(body overflow-x:hidden, 直接看不见也点不到,
   表现就是「左右切换没反应」), 所以此断点起改成 portrait 内嵌。
   原来这里写的是 1024px —— 1024~1508 之间右箭头一直是消失的 */
@media(max-width:1520px){
  .hc-prev{left:12px}
  .hc-next{right:12px}
}
@media(max-width:640px){
  .hc-cap-text{font-size:1.1rem}
  .hc-caption{left:14px;right:14px;bottom:42px}
  .hc-arrow{width:32px;height:32px}
  .hc-arrow svg{width:16px;height:16px}
  /* 移动端: arrow 较小, 仍内嵌 portrait 内 */
  .hc-prev{left:8px}
  .hc-next{right:8px}
  .hc-dot{width:18px}
  .hc-dot.active{width:28px}
  .hc-dots{bottom:12px}
}

.hero-badge{
  position:absolute;top:24px;right:-12px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
  animation:floatY 5s ease-in-out infinite;
}
.hero-badge-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--primary-bg);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.hero-badge-text{font-size:0.82rem;color:var(--text-2);font-weight:500}
.hero-badge-text strong{display:block;color:var(--text);font-size:1.1rem;font-weight:700;margin-top:2px}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* 右侧预约浮窗(.contact-dock)固定在 right:20px, 连 预约 胶囊一起占 93px, 纵向 262~639,
   正好压住 badge 的下半截(纵向 212~295)。容器留白 = max(24,(vw-1392)/2),
   badge 右缘 = vw - 留白 + 12, 要躲开浮窗得留白 >= 125, 即 vw >= 1642。
   窄于这个宽度就把 badge 收进卡片里, 128 = 浮窗 93 + 12 的外挂 + 一点余量。
   不这么做的话数字(在架项目 329)会被 预约 按钮盖掉一半 */
@media(max-width:1660px){
  .hero-badge{right:128px}
}
.hero-tag-bottom{
  position:absolute;bottom:24px;left:-12px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:10px 18px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;
  font-size:0.85rem;font-weight:600;color:var(--text-2);
  animation:floatY 5s ease-in-out infinite -2s;
}
.hero-tag-bottom .star{color:var(--accent)}
@media(max-width:900px){
  .hero{min-height:auto;padding:0}
  .hero-grid{min-height:auto;grid-template-columns:1fr;gap:48px;padding:104px 20px 64px}
  .hero h1{font-size:3.2rem}
  /* 单栏了，三颗胶囊挤一行会溢出：缩小内边距和字号让它们尽量还是一行。
     真放不下就靠 .hero-feats 自己的 flex-wrap 折第二行，不用 display:none。 */
  .hero-feats{gap:8px;margin-bottom:12px}
  .hero-feat{padding:8px 13px;font-size:0.86rem}
  .hero-sub{font-size:1.08rem}
  /* 单栏了，两颗联系卡并排会很挤：flex-basis 放宽到整行，自然折成上下两颗 */
  .hero-contact{gap:12px;margin-bottom:26px}
  .hero-contact-card{flex:1 1 100%;padding:12px 14px}
}

/* ── Trust strip (Our Alumi Work) ── */
.trust{
  background:var(--bg-soft);
  padding:48px 0;
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
}
.trust-title{
  text-align:center;font-family:var(--font-display);
  font-size:1.5rem;font-weight:700;color:var(--text);
  margin-bottom:32px;
}
.trust-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
}
.trust-logo{
  display:flex;align-items:center;justify-content:center;height:64px;
  font-family:var(--font-display);font-weight:700;
  font-size:0.95rem;color:var(--text-3);
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0 16px;
  letter-spacing:-0.02em;
  text-align:center;text-decoration:none;
  transition:all var(--transition);
}
.trust-logo:hover{color:var(--primary);border-color:var(--primary-soft);transform:translateY(-2px)}
/* 机构条和 Hero 轮播是同一批医院：轮播翻到哪家，这里就点亮哪家（site.js 按下标同步 is-active） */
.trust-logo.is-active{
  color:var(--primary);border-color:var(--primary);
  box-shadow:0 6px 18px var(--primary-soft);
}
@media(max-width:768px){.trust-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Featured testimonial (Success Stories headline) ── */
.featured-testimonial{
  padding:96px 0;background:var(--bg);
}
.featured-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;
}
.featured-card{
  position:relative;
  background:linear-gradient(135deg,var(--primary-bg) 0%,var(--primary-tint) 100%);
  border-radius:var(--radius-xl);
  padding:32px;
  border:1px solid var(--primary-soft);
  box-shadow:var(--shadow);
}
.featured-card-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.featured-card-stars{display:flex;gap:4px;color:var(--accent);font-size:1.1rem;margin-bottom:4px}
.featured-card-rating-count{font-size:0.78rem;color:var(--text-3);font-weight:500}
.featured-card-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.1rem;
  font-family:var(--font-display);
  flex-shrink:0;
}
.featured-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:2px}
.featured-card-role{font-size:0.85rem;color:var(--text-3)}
.featured-card-quote{font-size:1.05rem;color:var(--text-2);line-height:1.7;margin:20px 0;padding-left:14px;border-left:3px solid var(--primary)}
.featured-card-stats{display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--primary-soft);font-size:0.82rem;color:var(--text-3)}
.featured-card-stats strong{color:var(--primary-dark);font-weight:700}

.featured-content h2{
  font-family:var(--font-display);
  font-size:2.8rem;font-weight:800;line-height:1.15;
  color:var(--text);letter-spacing:-0.02em;margin-bottom:20px;
}
.featured-content h2 .hl{color:var(--primary-dark)}
.featured-content p{font-size:1.05rem;color:var(--text-3);margin-bottom:24px;line-height:1.7;max-width:520px}
.btn-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary-dark);font-weight:600;font-size:0.95rem;
  padding:6px 0;transition:gap var(--transition);
}
.btn-link:hover{gap:10px}
.btn-link svg{width:16px;height:16px}
.featured-bg-deco{
  position:absolute;width:200px;height:200px;
  background:var(--primary-bg);border-radius:50%;
  filter:blur(60px);opacity:0.6;z-index:-1;
}
@media(max-width:900px){
  .featured-grid{grid-template-columns:1fr;gap:40px}
  .featured-content h2{font-size:2rem}
}

/* ── Success stories grid (3 case cards) ── */
.success-stories{padding:96px 0;background:var(--bg-soft)}
.stories-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.story-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;position:relative;
  transition:all var(--transition);
}
.story-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-soft)}
.story-card-image{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.story-card-image::before{
  content:'“';position:absolute;top:8px;left:14px;
  font-family:var(--font-display);font-size:3.4rem;font-weight:800;
  color:rgba(192,38,211,0.25);line-height:1;
}
.story-card-image .media-mono{
  font-family:var(--font-display);font-weight:800;
  font-size:2.8rem;color:rgba(192,38,211,0.22);
}
/* Hero portrait 直接子图（无 carousel 时的降级占位）—— 含 6px padding 让图不贴边 */
.hero-portrait > img{
  position:relative;z-index:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;padding:6px;
}
/* 但 .hero-portrait 内嵌的轮播 hc-slide/img 走 cover 充满 */
.hero-portrait .hc-slide img{
  width:100%;height:100%;object-fit:cover;display:block;padding:0;
}
.story-card-body{padding:16px 18px}
.story-card-meta{
  display:inline-block;padding:3px 9px;background:var(--primary-bg);
  color:var(--primary-dark);font-size:0.7rem;font-weight:600;
  border-radius:var(--radius-pill);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:0.04em;
}
.story-card h3{font-family:var(--font-display);font-size:0.98rem;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.story-card p{font-size:0.82rem;color:var(--text-3);line-height:1.55;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.story-card-author{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--border-light)}
.story-card-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.74rem;font-weight:700;flex-shrink:0}
.story-card-name{font-size:0.8rem;color:var(--text-2);font-weight:600;line-height:1.2}
.story-card-role{font-size:0.7rem;color:var(--text-4);line-height:1.2}
@media(max-width:1100px){.stories-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.stories-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.stories-grid{grid-template-columns:1fr}}

/* ── Stats row (4 metrics) ── */
.stats-row{
  padding:64px 0;background:var(--bg);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
}
.stats-row-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  text-align:center;
}
.stat-item-num{
  font-family:var(--font-display);font-size:2.6rem;font-weight:800;
  color:var(--primary);line-height:1;letter-spacing:-0.02em;margin-bottom:8px;
}
.stat-item-label{font-size:0.92rem;color:var(--text-2);font-weight:500}
@media(max-width:768px){.stats-row-grid{grid-template-columns:repeat(2,1fr);gap:32px}.stat-item-num{font-size:2rem}}

/* ── Top services (tabbed) ── */
.top-services{padding:96px 0;background:var(--bg)}
.tabs-nav{
  max-width:var(--site-w);margin:0 auto 40px;padding:0 24px;
  display:flex;gap:8px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
}
.tabs-nav::-webkit-scrollbar{display:none}
.tab-btn{
  padding:14px 18px;font-size:0.95rem;font-weight:600;
  color:var(--text-3);
  border-bottom:2px solid transparent;
  transition:all var(--transition);
  white-space:nowrap;
  position:relative;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--primary-dark);border-bottom-color:var(--primary)}
.services-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.service-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);position:relative;
  overflow:hidden;cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease;
  display:flex;flex-direction:column;
  will-change:transform;
}
/* 注：.service-card:hover 在 line 1582 之后定义 —— 用 .fade-up.visible:hover 提高 specificity，
   解决 .js .fade-up.visible{ transform:translateY(0) } 把 hover transform 盖住的问题 */
.service-card-image{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--primary-bg) 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.6rem;font-weight:800;
  color:rgba(192,38,211,0.25);
  overflow:hidden;
}
.service-card-image img{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center}
.service-card-image::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.04) 100%);
  z-index:1;pointer-events:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.service-card-image::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5), transparent 60%);
  pointer-events:none;
}
.service-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.service-card-cat{font-size:0.72rem;color:var(--primary-dark);font-weight:600;margin-bottom:5px;letter-spacing:0.02em}
.service-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.35}
.service-card-desc{font-size:0.85rem;color:var(--text-3);line-height:1.55;margin-bottom:14px;flex:1}
.service-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border-light);gap:10px}
/* la_project 没有价格字段，首页服务卡的 footer 只剩一个按钮，靠右（同 .h-card-footer.is-single） */
.service-card-footer.is-single{justify-content:flex-end}
/* 搜索页每类最多 24 条，截断时在结果下方说明还剩多少 */
.search-more{margin:18px 0 0;text-align:center;font-size:0.85rem;color:var(--text-3)}

/* ── 查看详情按钮（pill · 触感反馈）── */
.btn-view-detail{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px 6px 14px;
  background:var(--primary);color:#fff;
  border:none;border-radius:var(--radius-pill);
  font-size:0.78rem;font-weight:700;line-height:1;
  letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;user-select:none;
  box-shadow:0 2px 6px rgba(192,38,211,.25);
  transition:background .25s ease, box-shadow .25s ease, transform .15s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
  z-index:2; /* 高于 .card-link，让按钮自身可点可 :active */
}
.btn-view-detail::after{
  /* 按下涟漪槽（active 时显示） */
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%);
  opacity:0;transform:scale(.4);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.btn-view-detail:hover{background:var(--primary-dark);box-shadow:0 6px 18px -2px rgba(192,38,211,.45)}
.btn-view-detail:hover .vd-arrow{transform:translateX(4px)}
.btn-view-detail:active{transform:scale(.94);box-shadow:0 1px 3px rgba(192,38,211,.30)}
.btn-view-detail:active::after{opacity:1;transform:scale(1.4);transition:opacity .12s ease, transform .12s ease}
.btn-view-detail:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.vd-arrow{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.vd-arrow svg{width:11px;height:11px;display:block;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* 旧 class 别名，兼容（如有遗留引用） */
.service-card-link,.h-card-link{
  color:var(--primary-dark);font-size:0.82rem;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.services-grid{grid-template-columns:1fr}}

/* ── Why trusted (split) ── */
.why-trusted{padding:96px 0;background:var(--bg-soft)}
.why-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;
}
.why-image-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.why-image{
  aspect-ratio:1;width:100%;max-width:420px;
  border-radius:var(--radius-xl);
  background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary-bg) 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.why-image .media-mono{
  font-family:var(--font-display);font-weight:800;
  font-size:7rem;color:rgba(192,38,211,0.2);
}
.why-image::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(192,38,211,0.18) 1.5px, transparent 2px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%);
}
/* Why-Trusted 左侧的镜像轮播：直接复用 Hero 那套 .hc-* slide / dot 样式，
   跟随由 site.js 的 initHeroCarousel 统一驱动（见 [data-hc-mirror]），这里只管尺寸和层级。
   .why-image 本身已经有 aspect-ratio:1 / overflow:hidden / border-radius，slide 铺满即可。 */
.why-carousel{cursor:default}
/* 有真图了就别再叠那层紫色点阵，否则照片整体发灰 */
.why-carousel::before{display:none}
/* 底部压一层渐变，医院招牌图多半是浅色，白字直接放上去看不清。
   放在 slide 的 ::after 上而不是 track 上：track 上的伪元素会盖住 slide 内部的 caption。
   层级：img(0) < ::after 渐变(1) < caption(2) < 整块链接(3) < dots(5，基础样式里已给) */
.why-carousel .hc-slide::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:48%;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.14) 55%,transparent 100%);
  pointer-events:none;
}
.why-carousel .hc-caption{z-index:2;left:14px;right:14px;bottom:44px}
.why-carousel .hc-cap-text{font-size:1.05rem}
.why-carousel .hc-slide-link{z-index:3}
@media(max-width:560px){
  .why-carousel .hc-cap-text{font-size:0.95rem}
  .why-carousel .hc-caption{left:12px;right:12px;bottom:40px}
}
.why-image-card{
  position:absolute;bottom:-24px;right:-24px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
}
.why-image-card-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--primary-bg);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;
}
.why-image-card-num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--text);line-height:1}
.why-image-card-label{font-size:0.78rem;color:var(--text-3);margin-top:4px}
.why-content h2{
  font-family:var(--font-display);
  font-size:2.6rem;font-weight:800;line-height:1.15;
  color:var(--text);letter-spacing:-0.02em;margin-bottom:20px;
}
.why-content h2 .hl{color:var(--primary-dark)}
.why-content>p{font-size:1.05rem;color:var(--text-3);margin-bottom:32px;line-height:1.7;max-width:520px}
.why-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--border);overflow-x:auto}
.why-tabs::-webkit-scrollbar{display:none}
.why-tab{
  padding:12px 16px;font-size:0.9rem;font-weight:600;color:var(--text-3);
  border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap;
}
.why-tab:hover{color:var(--text)}
.why-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary)}
.why-panels{position:relative;min-height:140px}
.why-panel{display:none}
.why-panel.active{display:block;animation:fadeIn 0.4s ease}
.why-panel h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:10px}
.why-panel p{color:var(--text-3);line-height:1.7;margin-bottom:20px}
.why-panel .checklist{list-style:none;padding:0;margin:0}
.why-panel .checklist li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:0.92rem;color:var(--text-2)}
.why-panel .checklist li svg{width:18px;height:18px;color:var(--primary);flex-shrink:0;margin-top:2px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:40px}.why-content h2{font-size:2rem}}

/* ── CTA section ── */
.cta-section{
  padding:96px 0;background:var(--bg);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  top:50%;left:50%;width:600px;height:600px;
  background:radial-gradient(circle,var(--primary-bg) 0%, transparent 70%);
  transform:translate(-50%,-50%);z-index:0;opacity:0.6;
}
.cta-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  position:relative;z-index:1;
}
.cta-content h2{
  font-family:var(--font-display);
  font-size:3.2rem;font-weight:800;line-height:1.1;
  color:var(--text);letter-spacing:-0.02em;max-width:560px;
}
.cta-content h2 .hl{color:var(--primary-dark)}
.cta-content p{font-size:1.05rem;color:var(--text-3);margin-top:20px;max-width:480px;line-height:1.7}
.cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
.btn-cta-primary{
  padding:16px 32px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;
  font-size:0.95rem;font-weight:600;
  transition:all var(--transition);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-cta-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-primary)}
.btn-cta-outline{
  padding:14px 28px;border-radius:var(--radius-pill);
  background:transparent;color:var(--text-2);
  font-size:0.9rem;font-weight:600;
  border:1.5px solid var(--border);
  transition:all var(--transition);
}
.btn-cta-outline:hover{border-color:var(--primary);color:var(--primary-dark)}
@media(max-width:900px){
  .cta-grid{flex-direction:column;align-items:flex-start;gap:32px}
  .cta-content h2{font-size:2.2rem}
  .cta-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
}

/* ── Footer ── */
.footer{
  background:var(--bg-soft);
  border-top:1px solid var(--border);
  padding:64px 0 32px;
}
.footer-grid{
  max-width:var(--site-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:48px;
}
.footer-brand h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:14px;letter-spacing:-0.02em}
.footer-brand-link{display:inline-block;line-height:0;margin-bottom:14px}
.footer-logo-img{height:64px;width:auto;max-width:220px;display:block;border-radius:12px;filter:drop-shadow(0 6px 18px rgba(192,38,211,0.25))}
.footer-brand p{font-size:0.88rem;color:var(--text-3);line-height:1.7;margin-bottom:18px;max-width:280px}
/* 页脚社交入口：与右侧预约浮窗（.dock-item）同一套品牌色圆钮，
   内容由 JS 依据 SITE_CONTACT / DOCK_ICONS 渲染，图标与配色只维护一份。*/
.footer-socials{display:flex;flex-wrap:wrap;gap:10px;min-height:38px}
.footer-social{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:none;padding:0;cursor:pointer;flex-shrink:0;
  box-shadow:0 3px 10px rgba(15,23,42,0.18);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.footer-social svg{width:19px;height:19px}
.footer-social:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 18px rgba(15,23,42,0.26)}
.footer-social:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.footer-col h4{font-size:0.88rem;font-weight:700;margin-bottom:16px;color:var(--text)}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:0.85rem;color:var(--text-3);transition:color var(--transition)}
.footer-col a:hover{color:var(--primary-dark)}
.footer-bottom{
  max-width:var(--site-w);margin:48px auto 0;padding:24px 24px 0;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.82rem;color:var(--text-3);flex-wrap:wrap;gap:12px;
}

/* ── 页脚免责声明 ──
   刻意做成**深色实心带**，浅色主题下也是深底：这是法律文案，得和上面那堆页脚
   链接在视觉上分开，做成跟着主题走的浅底就会被当成普通小字直接滑过去。
   宽度用 min() 对齐 .footer-grid 的内容宽（site-w 扣掉两侧 24px 内边距），
   窄屏自动退化成 calc(100% - 48px)，两侧始终留 24px 气口。
   border 在浅色下是 transparent 占位的，免得深色主题补描边时整块跳 2px。 */
.footer-disclaimer{
  width:min(calc(var(--site-w) - 48px), calc(100% - 48px));
  margin:22px auto 0;
  padding:20px 28px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:#2b1d24;
  color:rgba(255,255,255,0.70);
  font-size:0.78rem;line-height:1.95;text-align:center;
}
.footer-disclaimer p{margin:0}
/* 深色主题：#2b1d24 和 --bg-soft(#150d1f) 太近会糊成一片，换个色号 + 补描边 */
[data-theme="dark"] .footer-disclaimer{
  background:#1f1426;border-color:var(--border);color:var(--text-3);
}
@media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:768px){
  .footer-disclaimer{width:calc(100% - 32px);padding:16px 16px;font-size:0.72rem;line-height:1.9}
}

/* ── Page hero (sub-pages) ── */
.page-hero{
  padding:120px 24px 24px;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, var(--primary-bg) 0%, transparent 70%),
    var(--bg);
  text-align:center;
  position:relative;overflow:hidden;
}
/* When a list page puts the filter chips directly under the page-hero,
   collapse the section's top padding so chips hug the search bar. */
.page-hero + .section{padding-top:24px}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(192,38,211,0.08) 1px, transparent 1.5px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events:none;
}
.page-hero h1{
  font-family:var(--font-display);
  font-size:2.8rem;font-weight:800;line-height:1.15;
  letter-spacing:-0.02em;margin:12px 0 14px;position:relative;z-index:1;
}
.page-hero h1 .hl{color:var(--primary-dark)}
.page-hero p{font-size:1.05rem;color:var(--text-3);max-width:600px;margin:0 auto;position:relative;z-index:1}

/* ── Filter chips ── */
.filter-chips{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:36px;align-items:center;
}
.filter-chip{
  padding:8px 18px;border-radius:var(--radius-pill);
  background:var(--bg);border:1px solid var(--border);
  font-size:0.88rem;font-weight:500;color:var(--text-2);
  cursor:pointer;transition:all var(--transition);
}
.filter-chip:hover{border-color:var(--primary-soft);color:var(--primary-dark)}
.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── Filter chips 折叠（分类多的列表只留两行）── */
/* 两行的高度由 site.js 的 initChipsCollapse() 量出来写进行内 max-height：
   chip 高度和 row-gap 随主题/断点都会变，写死会在某个宽度下卡出半行。
   没 JS 时不会有行内 max-height，全部分类照常显示，不影响抓取 */
.filter-chips[data-chips-collapse]{overflow:hidden;transition:max-height .3s ease}
/* 折叠按钮接手了原来 .filter-chips 的下边距，这里收窄，别把按钮甩太远 */
.filter-chips.has-toggle{margin-bottom:14px}
.chips-toggle{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 36px;padding:7px 16px;border-radius:var(--radius-pill);
  background:var(--primary-bg);border:1px solid transparent;
  font-size:0.82rem;font-weight:600;color:var(--primary-dark);
  cursor:pointer;transition:all var(--transition);
}
.chips-toggle:hover{border-color:var(--primary-soft)}
/* inline-flex 会盖掉 hidden 属性自带的 display:none，必须显式补一条 */
.chips-toggle[hidden]{display:none}
.chips-toggle-count{opacity:.72}
.chips-toggle.is-on .chips-toggle-count{display:none}
.chips-toggle-arrow{display:inline-flex;transition:transform var(--transition)}
.chips-toggle-arrow svg{width:14px;height:14px}
.chips-toggle.is-on .chips-toggle-arrow{transform:rotate(180deg)}
[data-theme="dark"] .chips-toggle{background:rgba(192,38,211,.18);color:#f0abfc}

/* ── Filter chips (two-row layout: each row has its own label) ── */
/* 关键：必须显式 align-items: stretch 覆盖上方 .filter-chips 的 center,
   否则在 column flex 下 group 会以内容宽度居中（看着像居中, 而不是靠左） */
.filter-chips-2rows{
  display:flex;flex-direction:column;gap:14px;
  align-items:stretch;
  margin-bottom:40px;
}
.filter-chips-group{
  display:flex;align-items:center;gap:14px;
  flex-wrap:nowrap;
}
.filter-chips-row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1;
}
.filter-chips-row-label{
  flex:0 0 88px;
  font-size:0.82rem;font-weight:600;color:var(--primary-dark);
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--primary-bg);
  letter-spacing:.02em;white-space:nowrap;
  position:relative;
}
.filter-chips-row-label::after{
  content:'';display:inline-block;
  width:14px;height:1px;background:var(--primary-soft);
  margin-left:2px;
}
/* 暗色主题的标签也要读得到 */
[data-theme="dark"] .filter-chips-row-label{
  background:rgba(192,38,211,.18);color:#f0abfc;
}
[data-theme="dark"] .filter-chips-row-label::after{
  background:rgba(192,38,211,.45);
}
/* 移动端：标签与 chips 一起折行（保留 flex-wrap 让长 label 不会被裁切） */
@media (max-width:640px){
  .filter-chips-group{flex-wrap:wrap;gap:10px}
  .filter-chips-row-label{flex:0 0 auto}
  .filter-chips-row{flex:1 1 100%}
}

/* ── Search box (page level) ── */
.search-box{
  max-width:540px;margin:24px auto 0;
  position:relative;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 6px 6px 20px;
  box-shadow:var(--shadow-sm);
  position:relative;z-index:1;
}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.search-box input{flex:1;border:none;background:transparent;font-size:0.95rem;outline:none;color:var(--text)}
.search-box .btn-primary{padding:10px 22px;font-size:0.88rem}

/* ── Grid layouts ── */
.cards-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.cards-grid{grid-template-columns:1fr}}
/* 4-column grid for list pages (hospitals / doctors / projects) */
.cards-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.cards-grid-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cards-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards-grid-4{grid-template-columns:1fr}}
.cards-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:900px){.cards-grid-2{grid-template-columns:1fr}}

/* ── Featured doctors (home) ── */
.featured-doctors{padding:96px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--primary-tint) 100%)}
/* Doctor carousel (coverflow) */
.doctor-carousel{position:relative;margin-top:8px}
.doctor-track{
  display:flex;gap:22px;flex:1;overflow-x:auto;padding:34px 4px;
  scroll-snap-type:x mandatory;cursor:grab;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.doctor-track::-webkit-scrollbar{display:none}
.doctor-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.doctor-track .dc-item{
  flex:0 0 auto;width:min(300px,72vw);scroll-snap-align:center;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s ease,filter .45s ease;
  transform:scale(.82);opacity:.45;filter:saturate(.65) blur(.4px);
}
.doctor-track .dc-item.is-center{
  transform:scale(1.06);opacity:1;filter:none;z-index:2;
}
.doctor-track .dc-item .d-card{height:100%}
.doctor-track .d-card{transition:box-shadow .3s,border-color .3s;cursor:pointer}
.doctor-track .d-card:hover{transform:none}
.doctor-track .dc-item.is-center .d-card{box-shadow:var(--shadow);border-color:var(--primary)}
.doctor-track .d-card--carousel{opacity:1;transform:none;animation:none}
.dc-nav{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg);color:var(--primary-dark);
  font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:all var(--transition);z-index:3;user-select:none;
}
.dc-nav:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.08)}
.dc-nav:active{transform:scale(.96)}
.dc-dots{display:flex;gap:8px;justify-content:center;margin-top:22px;pointer-events:none}
.dc-dot{
  position:relative;display:block;width:9px;height:9px;border-radius:50%;
  background:var(--border);overflow:hidden;transition:all .3s ease;
}
.dc-dot.active{width:30px;border-radius:6px;background:var(--primary-tint)}
.dc-dot::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);
  border-radius:inherit;
}
.dc-dot.active::after{animation:dc-fill 4s linear}
@keyframes dc-fill{from{width:0}to{width:100%}}
@media(max-width:560px){
  .doctor-track{gap:14px;padding:26px 2px}
  .doctor-track .dc-item{width:min(264px,74vw);transform:scale(.78)}
  .doctor-track .dc-item.is-center{transform:scale(1.02)}
}
/* ── 首页医生区：4 列 × 2 行网格 ──
   替换了上面那一整套 .doctor-carousel/.doctor-track/.dc-item/.dc-nav/.dc-dots 左右滑动轮播。
   $featured_doctors 是 LIMIT 8，正好 4×2。上面那些规则和 site.js 的 initDoctorCarousel
   现在全站都没有消费方了，留着不删是为了随时能改回轮播（模板里把三个 data- 钩子加回去即可）。
   d-card 拉成 flex 列 + actions 顶到底，是为了让同一行里内容长短不一的卡片按钮对齐。 */
.doctors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
.doctors-grid .d-card{display:flex;flex-direction:column}
.doctors-grid .d-card-actions{margin-top:auto}
@media(max-width:1100px){.doctors-grid{grid-template-columns:repeat(3,1fr)}}
/* 手机上 4 列每格只有 ~80px，降到 2 列 —— 「4 列」只保证宽屏 */
@media(max-width:820px){.doctors-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:400px){.doctors-grid{grid-template-columns:1fr}}

/* ── 区块标题右上角的「查看全部」──
   原来这两个类是「区块底部居中」，已按需求挪到标题行右上角。
   .section-head 是 max-width:680px 居中的，所以只能靠 .section-head-row 做定位容器
   + CTA 绝对定位；改成 flex 并排会把标题挤得不居中。
   ≤1024px 退回下面这份静态居中（绝对定位那份写在 min-width 里），
   否则窄屏时会压到标题上。 */
.featured-doctors-cta,
.featured-hospitals-cta{display:flex;justify-content:center;margin-top:0;margin-bottom:28px}
.section-head-row{position:relative}
@media(min-width:1025px){
  .section-head-row .featured-doctors-cta,
  .section-head-row .featured-hospitals-cta{position:absolute;right:0;top:4px;margin:0;display:block}
}
.section-more{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--bg);
  font-size:0.92rem;font-weight:600;color:var(--primary-dark);
  white-space:nowrap;box-shadow:var(--shadow-xs);
  transition:all var(--transition);
}
.section-more:hover{
  background:var(--primary);border-color:var(--primary);color:#fff;
  box-shadow:var(--shadow-primary);
}
.section-more-arr{transition:transform var(--transition)}
.section-more:hover .section-more-arr{transform:translateX(3px)}
[data-theme="dark"] .section-more{background:rgba(255,255,255,0.06);color:var(--primary-light)}
[data-theme="dark"] .section-more:hover{background:var(--primary);color:#fff}

.featured-hospitals{padding:96px 0;background:linear-gradient(180deg,var(--primary-tint) 0%,var(--bg) 100%)}
.hospitals-showcase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
@media(max-width:1100px){.hospitals-showcase-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hospitals-showcase-grid{grid-template-columns:1fr}}
/* .featured-hospitals-cta 的规则已并到上面「区块标题右上角的查看全部」那一节 */

/* ── Hospital/Project card ── */
.h-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease;
  display:flex;flex-direction:column;
  will-change:transform;
}
.h-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -12px rgba(192,38,211,.22), 0 4px 12px rgba(0,0,0,.06);
  border-color:var(--primary-soft);
}
.h-card:hover .h-card-img img{transform:scale(1.06)}
.h-card:hover .btn-view-detail{background:var(--primary-dark);box-shadow:0 6px 16px -2px rgba(192,38,211,.45)}
.h-card:hover .btn-view-detail .vd-arrow{transform:translateX(4px)}
.h-card:active{transform:translateY(-3px) scale(.995)}
.h-card-img{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--primary-bg) 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;
  font-size:3.5rem;color:rgba(192,38,211,0.3);
  overflow:hidden;
}
.h-card-img img{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center;width:100%;height:100%;object-fit:cover;display:block}
.h-card-img::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(255,255,255,0.4), transparent 60%);
}
.h-card-badge{
  position:absolute;top:14px;left:14px;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.95);
  color:var(--text);font-size:0.78rem;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
  backdrop-filter:blur(8px);
}
.h-card-badge.star{color:var(--accent)}
.h-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.h-card-cat{font-size:0.75rem;color:var(--primary-dark);font-weight:600;margin-bottom:4px;letter-spacing:0.02em}
.h-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}
.h-card-meta{font-size:0.82rem;color:var(--text-3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.h-card-meta svg{width:14px;height:14px}
.h-card-desc{font-size:0.85rem;color:var(--text-3);line-height:1.55;margin-bottom:14px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.h-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.h-card-tag{
  padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--primary-bg);color:var(--primary-dark);
  font-size:0.72rem;font-weight:600;
}
.h-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-light);gap:10px}
/* 服务项目卡片：左侧没有价格/评分，只剩的按钮靠右，别被 space-between 顶到最左。
   另有 216/329 个项目正文只有图、摘要剥不出字，.h-card-desc 整段不渲染，
   撑开卡片的 flex:1 就没了，footer 会浮在半空——margin-top:auto 把它按回底边 */
.h-card-footer.is-single{justify-content:flex-end;margin-top:auto}
.h-card-price{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:1rem}
.h-card-link{color:var(--primary-dark);font-size:0.85rem;font-weight:600}

/* ── 项目/服务卡片"所属医院"徽章 ── */
.h-card-hospitals{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:auto;padding:10px 0 12px;
  border-top:1px dashed var(--border-light);
}
.h-card-hospitals-label{
  font-size:0.72rem;font-weight:600;
  color:var(--text-3);letter-spacing:0.02em;
  margin-right:2px;
}
.service-card-hospitals{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  margin-bottom:10px;
}
.hospital-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  background:linear-gradient(135deg, rgba(192,38,211,.06), rgba(236,72,153,.04));
  border:1px solid rgba(192,38,211,.18);
  border-radius:999px;
  font-size:0.74rem;font-weight:600;
  color:var(--primary-dark);
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:2;          /* 盖过 .card-link 拦截点击 */
  font-family:inherit;
}
.hospital-pill:hover{
  background:linear-gradient(135deg, rgba(192,38,211,.14), rgba(236,72,153,.08));
  border-color:rgba(192,38,211,.38);
  transform:translateY(-1px);
  box-shadow:0 4px 12px -2px rgba(192,38,211,.22);
}
.hospital-pill:active{transform:translateY(0) scale(.96)}
.hospital-pill .hp-icon{font-size:0.78rem;line-height:1;opacity:0.85}
.hospital-pill-sm{padding:3px 8px;font-size:0.7rem}
.hospital-pill-more{
  background:transparent;
  border-style:dashed;
  color:var(--text-3);
  cursor:default;
}
.hospital-pill-more:hover{
  background:transparent;
  border-color:var(--border-soft);
  transform:none;
  box-shadow:none;
  color:var(--text-2);
}
[data-theme="dark"] .hospital-pill{
  background:rgba(192,38,211,.10);
  border-color:rgba(192,38,211,.28);
  color:#f0abfc;
}
[data-theme="dark"] .hospital-pill:hover{
  background:rgba(192,38,211,.18);
  border-color:rgba(192,38,211,.42);
}
[data-theme="dark"] .hospital-pill-more{
  background:transparent;
  color:var(--text-3);
}

/* ── 卡片整体可点覆盖层（兜底 JS 加载失败时浏览器原生跳转）──
   pointer-events:none + z-index:0 让点击穿透到 card 自身 onclick；
   button 自己用 z-index:2 + position:relative 拿回点击事件。 */
.card-link{
  position:absolute;inset:0;z-index:0;
  text-indent:-9999px;overflow:hidden;
  background:transparent;border:0;padding:0;
  pointer-events:none;
}
/* 卡片内部的按钮/链接浮在 card-link 之上（不冲突） */
.d-card-actions,
.d-card-actions *,
.n-card-link,
.story-card-link{ position:relative; z-index:2; }

/* ── Doctor card ── */
.d-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;text-align:center;cursor:pointer;position:relative;
  transition:all var(--transition);
}
.d-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary-soft)}
.d-card-avatar{
  width:80px;height:80px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.6rem;
  color:var(--primary-dark);
  border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--primary-soft);
}
.d-card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:4px}
.d-card-clinic{font-size:0.82rem;color:var(--text-3);margin-bottom:10px}
.d-card-title{
  display:inline-block;padding:3px 10px;background:var(--primary-bg);
  color:var(--primary-dark);font-size:0.72rem;font-weight:600;
  border-radius:var(--radius-pill);margin-bottom:10px;
}
.d-card-spec{font-size:0.8rem;color:var(--text-2);margin-bottom:14px;line-height:1.5}
.d-card-actions{display:flex;gap:8px;justify-content:center}
.d-card-actions a,.d-card-actions button{
  padding:7px 14px;border-radius:var(--radius-pill);
  font-size:0.8rem;font-weight:600;transition:all var(--transition);
}
.btn-cta-sm{background:var(--primary);color:#fff}
.btn-cta-sm:hover{background:var(--primary-dark)}
.btn-cta-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.btn-cta-ghost:hover{border-color:var(--primary);color:var(--primary-dark)}

/* ── News card ── */
.n-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;cursor:pointer;position:relative;
  transition:all var(--transition);
  display:flex;flex-direction:column;
  height:100%;
}
.n-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary-soft)}
.n-card-meta{
  font-size:0.78rem;color:var(--primary-dark);font-weight:600;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.n-card-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text-4)}
.n-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;line-height:1.45;margin-bottom:10px;color:var(--text)}
.n-card p{font-size:0.88rem;color:var(--text-3);line-height:1.6;margin-bottom:16px;flex:1}
.n-card-link{color:var(--primary-dark);font-size:0.85rem;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.n-card-link:hover{gap:6px}

/* ── Detail page ── */
.detail-layout{
  display:grid;grid-template-columns:1.6fr 1fr;gap:48px;
  align-items:start;
}
.detail-main .detail-cover{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
  border-radius:var(--radius-xl);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;
  font-size:6rem;color:rgba(192,38,211,0.25);
  margin-bottom:32px;position:relative;overflow:hidden;
}
.detail-main h1{font-family:var(--font-display);font-size:2.2rem;font-weight:800;line-height:1.2;margin-bottom:8px;letter-spacing:-0.02em}
.detail-sub{color:var(--text-3);font-size:0.95rem;margin-bottom:24px}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.detail-tag{
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--primary-bg);color:var(--primary-dark);
  font-size:0.82rem;font-weight:600;
}
.info-block{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border-light)}
.info-block h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:14px}
.info-block p{color:var(--text-2);line-height:1.8}
/* 后台富文本正文（医生履历等）：库里存的是带内联样式的 <p>/<img>，
   这里只兜底行距和图片宽度，不覆盖它自带的颜色字号 */
.detail-rich{color:var(--text-2);line-height:1.8}
.detail-rich p{margin:0 0 10px}
.detail-rich p:last-child{margin-bottom:0}
.detail-rich img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
.detail-rich .ql-indent-1{padding-left:1.5em}
.detail-rich .ql-indent-2{padding-left:3em}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:14px}
.info-grid-item{background:var(--bg-soft);border-radius:var(--radius);padding:16px}
.info-grid-label{font-size:0.8rem;color:var(--text-3);margin-bottom:6px}
.info-grid-value{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:1rem}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.sidebar-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;
  margin-bottom:20px;
}
.sidebar-card h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:14px}
.sidebar-item{display:flex;gap:8px;padding:8px 0;font-size:0.88rem;color:var(--text-2);border-bottom:1px solid var(--border-light)}
.sidebar-item:last-child{border-bottom:none}
.sidebar-label{color:var(--text-3);min-width:60px;flex-shrink:0}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}}

/* ── Back link ── */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-3);font-size:0.88rem;font-weight:500;
  margin-bottom:24px;transition:color var(--transition);
}
.back-link:hover{color:var(--primary-dark)}

/* ── No results ── */
.no-results{
  text-align:center;padding:48px 0;color:var(--text-3);
  font-size:0.95rem;
}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,23,42,0.5);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  /* 只淡入,不要用 fadeIn —— 那条带 translateY(8px),
     铺满视口的遮罩跟着位移会在底部露出 8px 没变暗也没模糊的缝 */
  animation:overlayIn 0.2s ease;
}
.modal{
  background:var(--bg);border-radius:var(--radius-xl);
  width:100%;max-width:520px;max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-lg);
  /* 缓动曲线**不能**写 var(--transition-slow):它的值是 `0.5s cubic-bezier(...)`,
     带着时长。animation 已经有 0.3s 了,再塞进去会被当成第二个时间值 = 延迟 0.5s,
     表现是弹窗先完整显示半秒、再突然消失重新滑入,也就是「弹出后闪一下」。
     transition 那边可以照常用这个变量(那里本来就要时长+曲线) */
  animation:slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 24px 0;
}
.modal-header h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700}
.modal-close{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-soft);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all var(--transition);
}
.modal-close:hover{background:var(--primary-bg);color:var(--primary-dark)}
.modal-body{padding:24px}
/* 预约提交成功后就地替换掉表单的结果页（bookingDone()）。
   高度会比表单矮一大截,弹窗是垂直居中的,所以看着像原地收拢,不会跳到别处 */
.book-done{text-align:center;padding:36px 24px 28px}
.book-done-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--primary-bg);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
}
.book-done-icon svg{width:28px;height:28px}
.book-done h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:10px}
.book-done p{color:var(--text-3);font-size:0.92rem;line-height:1.7}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:0.85rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form-input{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  font-size:0.92rem;background:var(--bg);color:var(--text);
  transition:all var(--transition);
  outline:none;
}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
textarea.form-input{resize:vertical;min-height:80px}

/* ── Toast ── */
#toast-container{
  position:fixed;bottom:24px;right:24px;z-index:300;
  display:flex;flex-direction:column;gap:10px;
}
.toast{
  background:var(--text);color:var(--bg);
  padding:14px 22px;border-radius:var(--radius);
  font-size:0.9rem;font-weight:500;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(20px);
  transition:all var(--transition-slow);
  max-width:340px;
}
.toast.show{opacity:1;transform:translateY(0)}

/* ── Animations ──
   Progressive enhancement: hidden state only applies when JS is active (.js on <html>).
   If JS fails entirely, content stays fully visible — no blank page. */
.js .fade-up{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s var(--transition-slow)}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── 卡片 hover 强动效（高 specificity 覆盖 .fade-up.visible）──
   .service-card:hover 的 specificity (0,2,0) 输给 .js .fade-up.visible (0,3,0)，
   所以这里用 .fade-up.visible:hover (0,3,1) 反超。 */
.service-card.fade-up.visible:hover,
.h-card.fade-up.visible:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -12px rgba(192,38,211,.22), 0 4px 12px rgba(0,0,0,.06);
  border-color:var(--primary-soft);
}
.service-card.fade-up.visible:hover .service-card-image img,
.service-card.fade-up.visible:hover .service-card-image::before{transform:scale(1.06)}
.service-card.fade-up.visible:hover .btn-view-detail{background:var(--primary-dark);box-shadow:0 6px 16px -2px rgba(192,38,211,.45)}
.service-card.fade-up.visible:hover .btn-view-detail .vd-arrow{transform:translateX(4px)}
.service-card.fade-up.visible:active{transform:translateY(-3px) scale(.995)}
.h-card.fade-up.visible:hover .h-card-img img{transform:scale(1.06)}
.h-card.fade-up.visible:hover .btn-view-detail{background:var(--primary-dark);box-shadow:0 6px 16px -2px rgba(192,38,211,.45)}
.h-card.fade-up.visible:hover .btn-view-detail .vd-arrow{transform:translateX(4px)}
.h-card.fade-up.visible:active{transform:translateY(-3px) scale(.995)}
/* Hero 区域内容必须立即可见，不依赖 IntersectionObserver 触发动画 */
.hero .fade-up, .hero .hero-text-cell{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .js .fade-up{opacity:1;transform:none}
}

/* ── Mobile fine-tune ── */
@media(max-width:640px){
  .nav-inner{padding:0 16px;height:64px}
  .brand-logo-img{height:36px;border-radius:8px}
  .btn-primary{padding:8px 16px;font-size:0.82rem}
  .hero{padding:0}
  .hero h1{font-size:2.6rem}
  .hero-feats{gap:7px;margin-bottom:10px}
  .hero-feat{padding:7px 12px;font-size:0.8rem;gap:6px}
  .hero-feat svg{width:15px;height:15px}
  .hero-sub{font-size:1.02rem;line-height:1.7}
  .hero-portrait{aspect-ratio:4/3}
  .section{padding:64px 0}
  .container,.footer-grid,.stories-grid,.services-grid{padding-left:16px;padding-right:16px}
  .featured-content h2,.why-content h2{font-size:1.7rem}
  .stats-row-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero h1{font-size:1.9rem}
  .footer-logo-img{height:48px;border-radius:10px}
}

/* ── 预约浮窗（右侧固定）── */
.contact-dock{
  position:fixed; top:50%; right:20px; transform:translateY(-50%);
  z-index:150; display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  pointer-events:none;
}
.contact-dock > *{ pointer-events:auto; }

.dock-book{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-weight:700; font-size:0.9rem; letter-spacing:0.02em;
  border:1px solid rgba(255,255,255,0.28); cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 24px rgba(192,38,211,0.42);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.dock-book:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 12px 30px rgba(192,38,211,0.55); }
.dock-book svg{ width:18px; height:18px; }

.dock-rail{
  display:flex; flex-direction:column; gap:12px;
  padding:14px 11px; border-radius:26px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .dock-rail{
  background:rgba(20,13,31,0.62);
  border-color:rgba(255,255,255,0.12);
}

/* 浮窗底部的「在线咨询」：整颗就是一张图（/statics/images/zixun.png）
   ------------------------------------------------------------------
   按钮自己不画任何东西 —— 背景/边框/内边距全清掉，视觉完全交给这张
   97x97 的圆形透明 PNG。图自带白底圆和描边，再叠玻璃拟态就是两层圆
   边框套在一起。

   投影用 filter:drop-shadow 而不是 box-shadow：PNG 四个角是透明的，
   box-shadow 描的是元素的方框，会在圆形外面露出一圈方角的影子。
   drop-shadow 按 alpha 走，跟着圆形边缘。

   64px 是照浮窗宽度预算定的：本文件 .hero-badge 上方那段注释（约 1001
   行）里 1660px 那条媒体查询的 128px 偏移，是按浮窗 93px 算出来的
   —— 浮窗宽度取最宽的那个子元素，现在是 .dock-book（93px）。这颗只要
   不超过 ~100px 就不会在 1660px 附近压住首页 hero 的数据角标；64px 同时
   和 .dock-rail 里 48px 的渠道圆钮在同一个尺度上。想放大先算这条。

   词典键 dock_consult 还留着，但已经没有可见文案了：它现在只喂 .sr-only
   那行，也就是这颗按钮的无障碍名称。 */
.dock-consult{
  display:block; width:64px; height:64px;
  padding:0; border:0; border-radius:50%;
  background:transparent; box-shadow:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 6px 16px rgba(15,23,42,0.22));
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
.dock-consult img{ display:block; width:100%; height:100%; }
.dock-consult:hover{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 10px 24px rgba(192,38,211,0.42));
}
/* 深色下投影得改成浅色光晕，深灰投影在深底上等于没有 */
[data-theme="dark"] .dock-consult{
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}
[data-theme="dark"] .dock-consult:hover{
  filter:drop-shadow(0 10px 26px rgba(192,38,211,0.5));
}

/* 只给读屏看的文本：按钮的可见内容是图片，名称靠这个跨度提供。
   不能用 display:none / visibility:hidden —— 那样读屏也读不到了。 */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.dock-item{
  position:relative; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:none; cursor:pointer; flex-shrink:0;
  box-shadow:0 4px 12px rgba(15,23,42,0.22);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.dock-item svg{ width:24px; height:24px; }
.dock-item:hover{ transform:scale(1.13) translateX(-2px); box-shadow:0 8px 20px rgba(15,23,42,0.3); }
.dock-item:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.dock-tip{
  position:absolute; right:58px; top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--bg); color:var(--text);
  font-size:0.82rem; font-weight:600; white-space:nowrap;
  padding:6px 12px; border-radius:10px;
  border:1px solid var(--border); box-shadow:var(--shadow);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip{
  opacity:1; transform:translateY(-50%) translateX(0);
}

/* 弹层 */
.dock-pop{
  position:fixed; z-index:300; width:268px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:18px;
  opacity:0; transform:translateY(10px) scale(.98); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.dock-pop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dock-pop-close{
  position:absolute; top:10px; right:12px;
  background:none; border:none; color:var(--text-3);
  font-size:1.05rem; cursor:pointer; line-height:1; padding:4px;
  transition:color .2s ease;
}
.dock-pop-close:hover{ color:var(--primary); }
.dock-pop-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; padding-right:18px; }
.dock-pop-icon{
  width:42px; height:42px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,0.2);
}
.dock-pop-icon svg{ width:23px; height:23px; }
.dock-pop-title{ font-weight:700; font-size:1.02rem; }
.dock-pop-note{ font-size:0.76rem; color:var(--text-3); margin-top:2px; line-height:1.4; }
.dock-pop-value{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-soft); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:12px;
  font-weight:600; font-size:0.95rem; word-break:break-all;
}
.dock-pop-value code{ font-family:var(--font-display); letter-spacing:0.01em; }
.dock-pop-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-weight:700; font-size:0.9rem; text-decoration:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.dock-pop-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(192,38,211,0.38); }
.dock-pop-btn svg{ width:16px; height:16px; }

/* ── 预约二维码弹窗（点击 dock 预约按钮触发）── */
.qr-modal-overlay{
  position:fixed; inset:0; z-index:400;
  background:radial-gradient(ellipse at 50% 30%, rgba(192,38,211,.22), rgba(15,23,42,.55) 60%);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.qr-modal-overlay.show{ opacity:1; pointer-events:auto; }
[data-theme="dark"] .qr-modal-overlay{
  background:radial-gradient(ellipse at 50% 30%, rgba(192,38,211,.32), rgba(0,0,0,.78) 60%);
}
.qr-modal{
  width:100%; max-width:420px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:28px;
  padding:30px 26px 24px;
  position:relative;
  box-shadow:
    0 40px 90px -20px rgba(192,38,211,.45),
    0 20px 50px -10px rgba(15,23,42,.30),
    0 0 0 1px rgba(255,255,255,.5) inset;
  transform:translateY(20px) scale(.96);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
[data-theme="dark"] .qr-modal{
  background:#15192a;
  box-shadow:
    0 40px 90px -20px rgba(192,38,211,.55),
    0 20px 50px -10px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.qr-modal-overlay.show .qr-modal{ transform:translateY(0) scale(1); }
.qr-modal::before{
  content:""; position:absolute; inset:-2px; border-radius:30px; padding:1.5px;
  background:linear-gradient(135deg, rgba(192,38,211,.55), rgba(236,72,153,.35) 40%, rgba(34,211,238,.35) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:0;
}
.qr-card{ position:relative; z-index:1; }

.qr-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(15,23,42,.05); color:var(--text-2);
  border:none; cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease;
}
[data-theme="dark"] .qr-close{ background:rgba(255,255,255,.06); color:#cbd5e1; }
.qr-close:hover{ background:var(--primary); color:#fff; transform:rotate(90deg); }

.qr-brand{ text-align:center; margin-bottom:18px; }
.qr-brand-kicker{
  display:inline-block;
  font-size:.66rem; letter-spacing:.18em; font-weight:700;
  color:var(--primary);
  padding:4px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(192,38,211,.10), rgba(236,72,153,.10));
  border:1px solid rgba(192,38,211,.18);
  margin-bottom:10px;
}
.qr-title{
  font-family:var(--font-display);
  font-size:1.55rem; font-weight:800;
  margin:0 0 4px; letter-spacing:-.01em;
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #ec4899 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.qr-subtitle{
  margin:0; font-size:.86rem; color:var(--text-3); font-weight:500;
}

/* 二维码方框 + 扫描线 */
.qr-frame{
  position:relative;
  width:230px; height:230px; margin:0 auto 18px;
  background:#fff;
  border-radius:20px;
  padding:14px;
  box-shadow:
    0 20px 50px -12px rgba(192,38,211,.35),
    0 6px 20px -4px rgba(15,23,42,.12),
    inset 0 0 0 1px rgba(192,38,211,.08);
}
.qr-frame-corners{ position:absolute; inset:8px; pointer-events:none; }
.qr-corner{
  position:absolute; width:18px; height:18px;
  border:2.5px solid var(--primary);
}
.qr-corner-tl{ top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.qr-corner-tr{ top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.qr-corner-bl{ bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.qr-corner-br{ bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0; }

.qr-img-wrap{
  position:relative; width:100%; height:100%;
  border-radius:8px; overflow:hidden;
  background:
    linear-gradient(135deg, #f5f3ff 0%, #fce7f3 100%);
}
.qr-img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:contrast(1.05);
}
.qr-scan-line{
  position:absolute; left:8px; right:8px; top:8px; height:2px;
  background:linear-gradient(90deg, transparent, #c026d3, #ec4899, transparent);
  box-shadow:0 0 8px rgba(192,38,211,.6);
  opacity:0;
}
.qr-scan-line.run{
  animation:qrScan 2.4s ease-in-out infinite;
  opacity:1;
}
@keyframes qrScan{
  0%   { transform:translateY(0);   opacity:0; }
  10%  { opacity:1; }
  50%  { transform:translateY(196px); opacity:1; }
  60%  { opacity:.4; }
  100% { transform:translateY(0); opacity:0; }
}
.qr-scan-hint{
  position:absolute; left:0; right:0; bottom:-28px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.74rem; color:var(--text-3); font-weight:500;
}
.qr-scan-hint svg{ width:13px; height:13px; }

/* 微信号 + 复制 */
.qr-id{
  margin-top:36px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
}
.qr-id-label{
  font-size:.7rem; font-weight:600; color:var(--text-3);
  letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:6px;
}
.qr-id-row{
  display:flex; align-items:center; gap:10px;
}
.qr-id-value{
  flex:1; font-family:var(--font-display);
  font-size:1.05rem; font-weight:700; color:var(--text);
  background:none; word-break:break-all;
}
.qr-copy-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; border:none; cursor:pointer;
  font-size:.78rem; font-weight:600;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.qr-copy-btn svg{ width:14px; height:14px; }
.qr-copy-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(192,38,211,.4); }
.qr-copy-btn.is-copied{
  background:linear-gradient(135deg,#10b981,#059669);
}
.qr-id-alt{
  font-size:.72rem; color:var(--text-3); margin-top:4px;
}

/* 底部提示 */
.qr-tip{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px;
  font-size:.78rem; color:var(--text-2); font-weight:500;
  text-align:center;
}
.qr-tip-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.5);
  animation:qrPulse 1.6s ease-in-out infinite;
}
@keyframes qrPulse{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5); }
  70%{ box-shadow:0 0 0 8px rgba(16,185,129,0); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

/* 分割线 */
.qr-divider{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 12px;
  color:var(--text-3); font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.qr-divider::before, .qr-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}

/* 其他联系方式 */
.qr-others{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.qr-other-item{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 4px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .25s ease;
  text-decoration:none;
}
.qr-other-item:hover{
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:0 6px 16px -4px rgba(192,38,211,.25);
}
.qr-other-icon{
  width:34px; height:34px; border-radius:10px;
  background:var(--c);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 4px 10px -2px rgba(15,23,42,.15);
}
.qr-other-icon svg{ width:18px; height:18px; }
.qr-other-name{
  font-size:.68rem; font-weight:600; color:var(--text-2);
}

@media(max-width:640px){
  .contact-dock{ right:12px; gap:10px; }
  .dock-book{ padding:9px 13px; font-size:0.8rem; }
  .dock-book svg{ width:15px; height:15px; }
  .dock-rail{ padding:10px 8px; gap:10px; border-radius:22px; }
  .dock-consult{ width:54px; height:54px; }
  .dock-item{ width:42px; height:42px; }
  .dock-item svg{ width:21px; height:21px; }
  .dock-tip{ display:none; }
  .dock-pop{ width:calc(100vw - 80px); max-width:268px; }
  .qr-modal{ padding:24px 20px 20px; border-radius:24px; }
  .qr-title{ font-size:1.3rem; }
  .qr-frame{ width:200px; height:200px; padding:12px; }
  .qr-others{ grid-template-columns:repeat(4, 1fr); gap:6px; }
  .qr-other-item{ padding:8px 2px; }
  .qr-other-icon{ width:30px; height:30px; }
  .qr-other-name{ font-size:.62rem; }
}

/* ── 上传图片填充占位容器（后台上传系统）── */
.h-card-img, .service-card-image, .detail-cover, .story-card-image, .d-card-avatar { overflow: hidden; }
.h-card-img img, .service-card-image img, .detail-cover img, .story-card-image img, .d-card-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.d-card-avatar img, .detail-cover img { border-radius: inherit; }

/* ── 热门资讯侧边栏（详情页 sidebar 末尾）── */
.hot-news-card{ padding:24px 22px; }
.hot-news-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:16px;
}
.hot-news-head h4{ margin-bottom:0; }
.hot-news-more{
  font-size:0.78rem;font-weight:600;color:var(--primary-dark);
  white-space:nowrap;transition:gap var(--transition);
  display:inline-flex;align-items:center;gap:3px;
}
.hot-news-more:hover{ gap:6px; }
.hot-news-list{ display:flex;flex-direction:column;gap:14px; }
.hot-news-item{
  display:grid;grid-template-columns:22px 64px 1fr;gap:12px;align-items:center;
  padding:8px;border-radius:14px;
  text-decoration:none;color:inherit;
  transition:background var(--transition), transform var(--transition);
  position:relative;
}
.hot-news-item:hover{
  background:var(--primary-bg);
  transform:translateX(2px);
}
.hot-news-item:hover .hot-news-title{ color:var(--primary-dark); }
.hot-news-item:hover .hot-news-thumb img{ transform:scale(1.08); }
.hot-news-item:hover .hot-news-thumb-initial{ transform:scale(1.05); }
.hot-news-rank{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  color:var(--primary);
  text-align:center;
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
  border-radius:8px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:-0.02em;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(192,38,211,0.08);
}
.hot-news-thumb{
  width:64px;height:64px;border-radius:12px;overflow:hidden;
  position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:800;
  font-size:1.4rem;letter-spacing:-0.02em;
}
.hot-news-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.5s var(--transition-slow);
}
.hot-news-thumb-initial{
  display:inline-block;
  transition:transform 0.4s var(--transition-slow);
  text-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.hot-news-body{ min-width:0; }
.hot-news-title{
  font-size:0.86rem;font-weight:600;line-height:1.45;
  color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  margin-bottom:5px;
  transition:color var(--transition);
}
.hot-news-meta{
  font-size:0.72rem;color:var(--text-3);
  display:flex;align-items:center;gap:6px;line-height:1;
}
.hot-news-cat{ color:var(--primary-dark);font-weight:600; }
.hot-news-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--text-4);flex-shrink:0; }
@media (max-width:900px){
  .hot-news-item{ grid-template-columns:18px 56px 1fr;gap:10px;padding:6px; }
  .hot-news-thumb{ width:56px;height:56px; }
  .hot-news-title{ font-size:0.84rem; }
  .hot-news-rank{ font-size:0.92rem;width:18px;height:18px; }
}

/* ── 预约电话 / 预约微信（医院详情 sidebar）── */
.book-line{
  display:flex;align-items:center;gap:10px;
  margin:10px -4px 0;padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(217,70,239,.10),rgba(217,70,239,.04));
  border:1px solid rgba(217,70,239,.22);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  user-select:none;
}
.book-line:hover{
  background:linear-gradient(135deg,rgba(217,70,239,.18),rgba(217,70,239,.08));
  border-color:rgba(217,70,239,.45);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(217,70,239,.4);
}
.book-line .sidebar-label{ min-width:auto;color:var(--primary);font-weight:600;flex-shrink:0; }
.book-line .book-val{
  flex:1;font-weight:700;color:var(--text);
  font-family:var(--font-display);letter-spacing:-.01em;
  font-size:0.95rem;word-break:break-all;
}
.book-line .book-action{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;font-size:0.78rem;font-weight:600;
  white-space:nowrap;
  transition:all .2s ease;
}
.book-line:hover .book-action{ background:var(--primary-dark); }
.book-line.book-wechat{cursor:pointer;outline:none;}
.book-line.book-wechat:focus-visible{ box-shadow:0 0 0 3px rgba(217,70,239,.35); }
.book-line.is-copied{
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.06));
  border-color:rgba(34,197,94,.45);
}
.book-line.is-copied .book-action{ background:#22c55e; }
@keyframes bookPulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.book-line.is-copied .book-action{ animation:bookPulse .4s ease; }
@media(max-width:560px){
  .book-line{ padding:10px 12px;gap:8px; }
  .book-line .book-val{ font-size:0.86rem; }
  .book-line .book-action{ padding:5px 10px;font-size:0.72rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   浮窗左出二维码卡片（5 个渠道：微信/电话/TikTok/Instagram/Line）
   ─────────────────────────────────────────────────────────── */
.dock-qr-pop{
  position:fixed; z-index:340;
  width:268px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px 18px 16px;
  box-shadow:
    0 30px 70px -20px rgba(15,23,42,.35),
    0 12px 28px -10px rgba(15,23,42,.18),
    0 0 0 1px rgba(255,255,255,.5) inset;
  opacity:0;
  transform:translateX(14px) scale(.96);
  pointer-events:none;
  transition:opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
  /* mask-composite 渐变描边 */
  isolation:isolate;
}
.dock-qr-pop::before{
  content:""; position:absolute; inset:-1.5px; border-radius:21px; padding:1.5px;
  background:linear-gradient(135deg, var(--accent, #c026d3) 0%, rgba(236,72,153,.6) 35%, rgba(34,211,238,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:0;
}
.dock-qr-pop.show{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.dock-qr-pop--right{ transform:translateX(-14px) scale(.96); }
.dock-qr-pop--right.show{ transform:translateX(0) scale(1); }
[data-theme="dark"] .dock-qr-pop{
  background:#161b2c;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.7),
    0 12px 28px -10px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.dock-qr-pop > *{ position:relative; z-index:1; }

/* 通道色顶部小条 */
.dock-qr-pop::after{
  content:""; position:absolute; top:0; left:18px; right:18px; height:3px;
  background:linear-gradient(90deg, var(--accent,#c026d3) 0%, transparent 100%);
  border-radius:0 0 4px 4px; z-index:2;
  opacity:.85;
}

/* 指向按钮的小箭头 */
.dock-qr-arrow{
  position:absolute; right:-7px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:14px; height:14px;
  background:var(--bg);
  border-right:1.5px solid var(--border);
  border-top:1.5px solid var(--border);
  border-radius:2px;
  z-index:2;
}
.dock-qr-pop--right .dock-qr-arrow{ right:auto; left:-7px; transform:translateY(-50%) rotate(225deg); }
[data-theme="dark"] .dock-qr-arrow{ background:#161b2c; }

/* 关闭按钮 */
.dock-qr-close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  background:rgba(15,23,42,.06); color:var(--text-2);
  border:none; cursor:pointer; font-size:.9rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease;
}
[data-theme="dark"] .dock-qr-close{ background:rgba(255,255,255,.08); color:#cbd5e1; }
.dock-qr-close:hover{ background:var(--accent,#c026d3); color:#fff; transform:rotate(90deg); }

/* 头部 icon + title */
.dock-qr-head{
  display:flex; align-items:center; gap:11px;
  margin-bottom:14px; padding-right:24px;
}
.dock-qr-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.18);
}
.dock-qr-icon svg{ width:22px; height:22px; }
.dock-qr-titles{ min-width:0; }
.dock-qr-title{ font-weight:700; font-size:1rem; line-height:1.2; }
.dock-qr-note{ font-size:.74rem; color:var(--text-3); margin-top:3px; line-height:1.45; }

/* QR 框 */
.dock-qr-frame{
  position:relative;
  width:100%; aspect-ratio:1/1;
  background:#fff;
  border-radius:14px;
  padding:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.06) inset;
  overflow:hidden;
}
[data-theme="dark"] .dock-qr-frame{
  background:#fff; /* QR 始终白底，便于扫码 */
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(15,23,42,.10) inset;
}
.dock-qr-corners{ position:absolute; inset:8px; pointer-events:none; }
.dock-qr-corner{
  position:absolute; width:18px; height:18px;
  border:2.5px solid var(--accent,#c026d3);
}
.dock-qr-corner-tl{ top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.dock-qr-corner-tr{ top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.dock-qr-corner-bl{ bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.dock-qr-corner-br{ bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0; }
.dock-qr-img{
  display:block; width:100%; height:100%;
  object-fit:contain; position:relative; z-index:1;
}
.dock-qr-scan{
  position:absolute; left:14px; right:14px; top:14px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent,#c026d3), transparent);
  box-shadow:0 0 12px var(--accent,#c026d3);
  z-index:2; opacity:0;
  border-radius:999px;
}
.dock-qr-scan.run{ animation:dockQrScan 2.4s ease-in-out infinite; }
@keyframes dockQrScan{
  0%   { opacity:0; transform:translateY(0); }
  10%  { opacity:.95; }
  50%  { opacity:.95; transform:translateY(calc(100% + 200px)); }
  60%  { opacity:0; transform:translateY(calc(100% + 200px)); }
  100% { opacity:0; transform:translateY(0); }
}

/* 提示行 */
.dock-qr-hint{
  display:flex; align-items:center; gap:6px; justify-content:center;
  margin-top:10px; color:var(--text-3);
  font-size:.74rem;
}
.dock-qr-hint svg{ width:13px; height:13px; flex-shrink:0; }

/* 账号 + 复制/主操作 */
.dock-qr-value{
  display:flex; flex-direction:column; gap:8px;
  margin-top:10px;
}
.dock-qr-code{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--font-display);
  font-size:.84rem; font-weight:600;
  color:var(--text);
  word-break:break-all;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  -webkit-user-select:none; user-select:none;
}
.dock-qr-code:hover{ background:rgba(192,38,211,.08); color:var(--primary); }
.dock-qr-code.is-flash{ background:rgba(34,197,94,.18); color:#16a34a; border-color:rgba(34,197,94,.4); }
.dock-qr-action{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%;
  padding:10px 12px; border-radius:10px; border:none; cursor:pointer;
  /* 渐变渠道（tiktok/instagram）的 --accent 是 linear-gradient 字符串，
     不能直接作为 background；回落到 --accent-solid 单色 */
  background:var(--accent-solid, var(--accent, #c026d3));
  color:#fff; font-weight:700; font-size:.82rem;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .2s ease;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.dock-qr-action:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(15,23,42,.30), 0 0 0 1px rgba(255,255,255,.15) inset; filter:brightness(1.08); }
.dock-qr-action:active{ transform:translateY(0); }
.dock-qr-action.is-copied{ background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; box-shadow:0 4px 12px rgba(34,197,94,.35); }
.dock-qr-action svg{ width:14px; height:14px; }

/* 同组多账号左右并排（微信主号 + 备用号共用一颗按钮，弹层里一账号一列）。
   用 flex 而不是 grid-template-columns:repeat(var(--cols),…) —— 后者把变量塞进
   repeat() 的次数位，部分浏览器直接判整条声明无效，回落成单列就变上下堆叠了。
   单账号时只有一个子元素，flex:1 铺满，版式和以前完全一致。 */
.dock-qr-grid{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:14px;
}
.dock-qr-col{ flex:1 1 0; min-width:0; }
.dock-qr-col-label{
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  color:var(--text-2); text-align:center;
  margin-bottom:6px;
}
/* 两列要塞得下两张能扫的码，弹层加宽、每列内部的间距收紧 */
.dock-qr-pop--multi{ width:440px; }
.dock-qr-pop--multi .dock-qr-frame{ border-radius:12px; padding:10px; }
.dock-qr-pop--multi .dock-qr-corners{ inset:6px; }
.dock-qr-pop--multi .dock-qr-scan{ left:10px; right:10px; top:10px; }
.dock-qr-pop--multi .dock-qr-value{ margin-top:8px; gap:6px; }
.dock-qr-pop--multi .dock-qr-code{ font-size:.78rem; padding:7px 8px; }
.dock-qr-pop--multi .dock-qr-action{ padding:8px 10px; font-size:.78rem; }

@media(max-width:560px){
  .dock-qr-pop{
    width:calc(100vw - 32px);
    max-width:300px;
  }
  /* 窄屏也保持左右并排（两张码同屏对比才是这颗按钮的意义），靠缩小间距和字号让位。
     比单码版宽出来一截：两列各留 ~165px，二维码还扫得动 */
  .dock-qr-pop--multi{
    width:calc(100vw - 24px);
    max-width:380px;
  }
  .dock-qr-pop--multi .dock-qr-grid{ gap:10px; }
  .dock-qr-pop--multi .dock-qr-frame{ padding:7px; }
  .dock-qr-pop--multi .dock-qr-corners{ inset:4px; }
  .dock-qr-pop--multi .dock-qr-scan{ left:7px; right:7px; top:7px; }
  .dock-qr-pop--multi .dock-qr-code{ font-size:.72rem; padding:6px 7px; }
  .dock-qr-pop--multi .dock-qr-action{ padding:7px 8px; font-size:.72rem; }
  .dock-qr-arrow{ display:none; }
}


/* ── 列表页分页：共N页 / 页码 / 跳转框 ── */
.pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:24px 56px;
  margin:64px 0 8px;
  font-size:.95rem; color:var(--text-3);
}
.pager-total{ white-space:nowrap; }
.pager-total span{ margin:0 3px; color:var(--text-2); font-weight:600; }

.pager-list{ display:flex; align-items:center; gap:6px; }
.pager-num{
  min-width:40px; height:40px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:600; line-height:1;
  color:var(--text-3); text-decoration:none;
  transition:background var(--transition), color var(--transition);
}
a.pager-num:hover{ background:var(--bg-soft); color:var(--primary); }
.pager-num.is-active{
  background:var(--primary); color:#fff;
  box-shadow:var(--shadow-primary);
}
.pager-gap{ min-width:28px; text-align:center; color:var(--text-4); letter-spacing:1px; user-select:none; }

.pager-jump{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.pager-jump-input{
  width:66px; height:40px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text);
  text-align:center; font-size:.95rem; font-family:inherit;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.pager-jump-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }

@media(max-width:760px){
  .pager{ gap:16px 24px; margin:40px 0 4px; font-size:.88rem; }
  .pager-list{ gap:2px; }
  .pager-num{ min-width:34px; height:34px; padding:0 6px; font-size:.88rem; }
  .pager-gap{ min-width:20px; }
  .pager-jump-input{ width:56px; height:34px; }
}

/* ── 资讯列表 / 相关资讯 / 搜索结果里的故事卡栅格 ──
   .story-card 复用首页「来自用户的真实变美故事」的样式，但 .stories-grid 自带
   max-width + padding（首页那块在 .container 之外）。列表页已经套在 .container 里，
   -in 把这两样摘掉，否则左右会双份内边距、宽度再被夹一次。
   放在文件末尾是必须的：上面窄屏断点里有 .stories-grid{padding:0 16px}，同权重，靠顺序压过去 */
.stories-grid-in{max-width:none;margin:0;padding-left:0;padding-right:0}

/* ── /zixun/ 资讯栏目（数据源 fa_article，和上面的故事卡是两套东西）──
   列表是左图右文横排卡 + 右侧「最新新闻」侧栏。
   放在文件末尾同 .stories-grid-in 的理由：上面窄屏断点里有同权重的规则，靠顺序压过去 */
.zx-count{
  font-size:0.9rem;color:var(--text-3);margin-bottom:22px;
  display:flex;align-items:center;gap:5px;
}
.zx-count strong{ font-family:var(--font-display);color:var(--primary-dark);font-weight:800;font-size:1.05rem; }

.zx-layout{ display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start; }
.zx-main{ min-width:0; }
.zx-side{ position:sticky;top:96px; }

/* 横排卡：缩略图列 flex 定宽，正文列 min-width:0 —— 少了它长标题会把弹性列撑破 */
.zx-card{
  display:flex;gap:20px;align-items:stretch;
  padding:18px;margin-bottom:16px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
}
.zx-card:hover{
  border-color:var(--primary-soft);
  box-shadow:0 10px 30px rgba(15,15,20,0.07);
  transform:translateY(-2px);
}
.zx-card:hover .zx-card-title{ color:var(--primary-dark); }
.zx-card:hover .zx-card-thumb img{ transform:scale(1.06); }

.zx-card-thumb{
  flex:0 0 220px;aspect-ratio:16/10;
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
}
.zx-card-thumb img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s var(--transition-slow); }

.zx-card-body{ min-width:0;flex:1;display:flex;flex-direction:column; }
.zx-card-title{
  font-family:var(--font-display);font-size:1.12rem;font-weight:700;line-height:1.45;
  color:var(--text);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--transition);
}
.zx-card-desc{
  font-size:0.88rem;color:var(--text-3);line-height:1.7;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zx-card-meta{
  margin-top:auto;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:0.78rem;color:var(--text-3);line-height:1;
}
.zx-card-cat{
  padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--primary-bg);color:var(--primary-dark);font-weight:600;
}
.zx-card-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--text-4);flex-shrink:0; }
.zx-card-date{ margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--text-4); }

/* 侧栏「热门医院」：三列栅格照 .hot-news-item（序号 / 缩略图 / 文字），只有 3 家所以间距放宽一点 */
.zx-hos-card{ padding:24px 22px; }
.zx-hos-head{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px; }
.zx-hos-head h4{ margin-bottom:0; }
.zx-hos-more{ font-size:0.8rem;color:var(--primary-dark);font-weight:600;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;transition:gap var(--transition); }
.zx-hos-more:hover{ gap:6px; }
.zx-hos-list{ display:flex;flex-direction:column;gap:14px; }
.zx-hos-item{
  display:grid;grid-template-columns:22px 64px 1fr;gap:12px;align-items:center;
  padding:8px;border-radius:14px;text-decoration:none;color:inherit;position:relative;
  transition:background var(--transition), transform var(--transition);
}
.zx-hos-item:hover{ background:var(--primary-bg);transform:translateX(2px); }
.zx-hos-item:hover .zx-hos-name{ color:var(--primary-dark); }
.zx-hos-item:hover .zx-hos-thumb img{ transform:scale(1.08); }
.zx-hos-rank{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--primary);
  background:linear-gradient(135deg,var(--primary-soft),var(--primary-bg));
  border-radius:8px;width:22px;height:22px;letter-spacing:-0.02em;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(192,38,211,0.08);
}
.zx-hos-thumb{
  width:64px;height:64px;border-radius:12px;overflow:hidden;
  background:var(--bg-soft);flex-shrink:0;
}
.zx-hos-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.5s var(--transition-slow);
}
.zx-hos-body{ min-width:0; }
.zx-hos-name{
  font-size:0.86rem;font-weight:600;line-height:1.45;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:5px;transition:color var(--transition);
}
/* 地区和第一个擅长项目，其中任一为空时模板不渲染，不留空位 */
.zx-hos-meta{ display:flex;align-items:center;gap:6px;font-size:0.72rem;line-height:1;color:var(--text-3);min-width:0; }
.zx-hos-area{ flex-shrink:0; }
.zx-hos-tag{
  color:var(--primary-dark);font-weight:600;
  background:var(--primary-bg);border-radius:6px;padding:3px 7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 文末提醒 + 免责声明
   ------------------------------------------------------------------
   放在 .detail-main 里跟正文同宽，不做通栏：页脚最末已经有一条通栏的
   .footer-disclaimer，两条深浅不同的通栏挨着会被当成重复的页脚。
   颜色全走变量，深色主题靠 :root 那边的变量覆盖跟着走，不用单独写 [data-theme]。 */
.zx-notice{
  margin-top:32px;padding:20px 22px;
  border:1px solid var(--primary-soft);border-radius:var(--radius-lg);
  background:var(--primary-bg);
  font-size:0.84rem;line-height:1.85;color:var(--text-2);
}
.zx-notice-tip strong{ display:block;color:var(--primary-dark);font-weight:700;margin-bottom:4px; }
.zx-notice-tip p{ margin:0; }
/* 法律文案压一档字号并用虚线分隔，和上面那段小程序推广拉开层级 */
.zx-notice-legal{
  margin:14px 0 0;padding-top:14px;
  border-top:1px dashed var(--primary-soft);
  font-size:0.78rem;color:var(--text-3);
}

/* 详情页封面：没图时模板整块不渲染，这里只管有图的情况 */
.zx-detail-cover{ aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:28px; }
.zx-detail-cover img{ width:100%;height:100%;object-fit:cover;display:block; }

@media (max-width:900px){
  .zx-layout{ grid-template-columns:1fr;gap:28px; }
  .zx-side{ position:static; }
  .zx-card{ gap:14px;padding:14px; }
  .zx-card-thumb{ flex:0 0 110px; }
  .zx-card-title{ font-size:0.98rem; }
  .zx-card-desc{ font-size:0.82rem;-webkit-line-clamp:2; }
  .zx-card-meta{ font-size:0.72rem;gap:6px; }
}
@media (max-width:520px){
  /* 窄屏仍保持横排（用户指定的版式），只把图再收一档、摘要压到 1 行 */
  .zx-card-thumb{ flex:0 0 92px; }
  .zx-card-desc{ -webkit-line-clamp:1;margin-bottom:10px; }
  .zx-card-date{ margin-left:0; }
}