/* 共享组件 —— 从 report_html.py 抽出,首页与报告页共用,保证「官网 ↔ 报告」视觉一体。
   全部用 tokens.css 的 CSS 变量,改色只改 :root 一处。 */

/* —— 衬线巨号数字(肌龄/关键指标,杂志视觉锤)—— */
.hero-num {
  font-family: var(--rb-font-serif);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 700; line-height: 1; color: var(--rb-red);
}
.hero-num small { font-size: 0.3em; font-weight: 400; margin-left: 8px; color: var(--rb-ink); }

/* —— 衬线章节标题:序号 + 渐隐发丝线 —— */
.sec-title {
  font-family: var(--rb-font-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  display: flex; align-items: baseline; gap: 12px; color: var(--rb-ink);
}
.sec-title .num { font-size: 0.7em; color: var(--rb-red); letter-spacing: 2px; font-family: var(--rb-font-serif); }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--rb-line); margin-left: 8px; }

/* —— 成分 / 功效卡:浅米底 + 左红边 —— */
.ing-card {
  border-left: 3px solid var(--rb-red);
  background: var(--rb-soft);
  padding: 18px 20px;
  border-radius: 0 12px 12px 0;
}
.ing-card .ing-name { font-weight: 700; font-size: 1.05rem; }
.ing-card .ing-fn { font-size: 0.9rem; color: var(--rb-red); margin: 6px 0; }
.ing-card .ing-mech { font-size: 0.88rem; color: #666; line-height: 1.6; }

/* —— 红→金渐变进度条 —— */
.dim-bar { height: 4px; background: #F0E6DD; border-radius: 2px; overflow: hidden; }
.dim-fill { height: 100%; background: linear-gradient(90deg, var(--rb-red), var(--rb-gold)); border-radius: 2px; }

/* —— 红胶囊 CTA(全站主按钮)+ ghost 变体 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 34px;
  background: var(--rb-red); color: #fff;
  border: none; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .2s var(--rb-ease), box-shadow .2s var(--rb-ease), background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--rb-red-rgb), 0.28); }
.btn--ghost { background: #fff; color: var(--rb-red); border: 1px solid var(--rb-red); }
.btn--ghost:hover { background: rgba(var(--rb-red-rgb), 0.04); }
.btn--lg { padding: 18px 44px; font-size: 16px; }

/* —— 红 pill 标签 —— */
.tag {
  display: inline-block; font-size: 12px; padding: 5px 13px;
  background: #FFF6F6; color: var(--rb-red); border-radius: 20px; letter-spacing: 0.5px;
}

/* —— 红底白字 Logo 回退 —— */
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rb-red); color: #fff; border-radius: 10px; font-weight: 700;
}

/* —— 红色强调高亮(报告正文/品牌文案关键句)—— */
.hl { color: var(--rb-red); background: linear-gradient(transparent 60%, rgba(var(--rb-red-rgb), 0.08) 60%); padding: 0 2px; font-weight: 600; }

/* —— 信息卡(通用白卡,科学/产品/步骤用)—— */
.card {
  background: #fff; border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-sm); padding: 28px;
  transition: transform .25s var(--rb-ease), box-shadow .25s var(--rb-ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--rb-shadow); }

/* —— 序号圆点(三步流程等)—— */
.step-num {
  font-family: var(--rb-font-serif); font-weight: 700; font-size: 1.3rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--rb-red-rgb), 0.08); color: var(--rb-red);
}