/* ============================================================
 * 会员生日月度看板 · Claude UI 草稿
 * 视觉气质参考：archive/distributor_xm_shiyun_2026-04.html
 * 仅做 UI 层调整：字体、颜色、间距、卡片、按钮、tab、表格、洞察列表
 * 不动模块结构、不动业务逻辑、不动图表配置
 * 作用域：body.claude-birthday-ui （高优先级覆盖原内联 CSS）
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Hanken+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

body.claude-birthday-ui {
  --c-bg: #ffffff;
  --c-text: #0f172a;
  --c-text-sub: #64748b;
  --c-text-muted: #94a3b8;
  --c-line: #e2e8f0;
  --c-line-strong: #cbd5e1;
  --c-primary: #0052ff;
  --c-primary-strong: #003ec7;
  --c-primary-soft: rgba(0, 82, 255, 0.08);
  --c-primary-softer: rgba(0, 82, 255, 0.04);
  --c-ok: #16a34a;
  --c-warn: #f59e0b;
  --c-bad: #ef4444;
  --c-card-shadow: 0 8px 24px rgba(0, 82, 255, 0.06);
  --c-card-shadow-hover: 0 16px 38px rgba(0, 82, 255, 0.1);
  --c-radius-lg: 18px;
  --c-radius: 14px;
  --c-radius-sm: 10px;
  --c-radius-chip: 999px;
  --c-font-title: "Hanken Grotesk", "Microsoft YaHei", "PingFang SC", sans-serif;
  --c-font-body: "Inter", "Microsoft YaHei", "PingFang SC", sans-serif;
  --c-font-label: "JetBrains Mono", "Microsoft YaHei", monospace;
}

/* -----------------------------------------------------------
 * 全局背景与字体（白底 + 点阵 + 像素风字体栈）
 * --------------------------------------------------------- */
body.claude-birthday-ui {
  background-color: var(--c-bg) !important;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.32) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-body) !important;
}

body.claude-birthday-ui *::-webkit-scrollbar { width: 8px; height: 8px; }
body.claude-birthday-ui *::-webkit-scrollbar-track { background: #f1f5f9; }
body.claude-birthday-ui *::-webkit-scrollbar-thumb { background: #c7d5e8; border-radius: 10px; border: 2px solid #f1f5f9; }
body.claude-birthday-ui *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

body.claude-birthday-ui .wrap {
  max-width: 1820px !important;
  padding: 28px 22px 36px !important;
}

/* -----------------------------------------------------------
 * Hero 区 —— 双语标题 + 像素风 meta
 * --------------------------------------------------------- */
body.claude-birthday-ui .hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  padding: 6px 2px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

body.claude-birthday-ui .hero > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.claude-birthday-ui .hero h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--c-font-label) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.005em !important;
}

body.claude-birthday-ui .hero .bilingual-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.05 !important;
}

body.claude-birthday-ui .hero .bilingual-title .en-label {
  order: 1;
  display: block !important;
  margin: 0 !important;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

body.claude-birthday-ui .hero .bilingual-title .cn-label {
  order: 2;
  display: block !important;
  margin: 0 !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-title) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

body.claude-birthday-ui .hero .meta {
  margin: 4px 0 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--c-radius-chip);
  background: var(--c-primary-soft);
  color: var(--c-primary) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  width: max-content;
  max-width: 100%;
  line-height: 1.5;
}

body.claude-birthday-ui .hero .meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-primary);
  flex: 0 0 auto;
}

body.claude-birthday-ui .hero .toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
  padding: 8px 12px;
  box-shadow: var(--c-card-shadow);
}

body.claude-birthday-ui .hero .toolbar label {
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--c-text-sub) !important;
}

/* -----------------------------------------------------------
 * Section 标题 —— 像素风标题 + 蓝色竖条 + 英文小字
 * --------------------------------------------------------- */
body.claude-birthday-ui .section {
  margin-top: 28px !important;
}

body.claude-birthday-ui .section-title {
  margin: 0 0 14px !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 14px !important;
  font-family: var(--c-font-label) !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
}

body.claude-birthday-ui .section-title::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: var(--c-primary) !important;
  gap: 0 !important;
}

body.claude-birthday-ui .section-title .title-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  line-height: 1.1 !important;
}

body.claude-birthday-ui .section-title .title-stack .title-en {
  order: 1;
  display: block !important;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

body.claude-birthday-ui .section-title .title-stack .title-cn {
  order: 2;
  display: block !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-title) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
}

/* 卡片内部的小标题（matrix-card-head 内的 section-title，使用了 inline font-size） */
body.claude-birthday-ui .card .section-title[style*="font-size:14px"],
body.claude-birthday-ui .card .section-title[style*="font-size: 14px"] {
  font-family: var(--c-font-title) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  padding-left: 12px !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.005em !important;
}

body.claude-birthday-ui .card .section-title[style*="font-size:14px"]::before,
body.claude-birthday-ui .card .section-title[style*="font-size: 14px"]::before {
  height: 18px !important;
  width: 3px !important;
  background: var(--c-primary) !important;
}

/* -----------------------------------------------------------
 * Card 通用 —— 圆角 / 边框 / 阴影 / hover
 * --------------------------------------------------------- */
body.claude-birthday-ui .card {
  background: #ffffff !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-card-shadow) !important;
  padding: 16px !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.claude-birthday-ui .card:hover {
  transform: translateY(-3px);
  border-color: var(--c-line-strong) !important;
  box-shadow: var(--c-card-shadow-hover) !important;
}

/* 矩阵子卡片 hover 缩弱一点（数据展示密度高） */
body.claude-birthday-ui .matrix-card:hover {
  transform: translateY(-2px);
}

/* -----------------------------------------------------------
 * KPI 卡 —— label / value / desc 层级
 * --------------------------------------------------------- */
body.claude-birthday-ui .kpi {
  gap: 14px !important;
}

body.claude-birthday-ui .kpi .card,
body.claude-birthday-ui .kpi.ops .card,
body.claude-birthday-ui .kpi.followup .card {
  min-height: 138px !important;
  padding: 20px 22px 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-card-shadow) !important;
  display: flex;
  flex-direction: column;
}

body.claude-birthday-ui .kpi .k-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body.claude-birthday-ui .kpi .k-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.claude-birthday-ui .kpi .k-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary) !important;
  font-family: var(--c-font-label) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.claude-birthday-ui .kpi .tone-green .k-icon { color: var(--c-ok) !important; }
body.claude-birthday-ui .kpi .tone-orange .k-icon { color: var(--c-warn) !important; }
body.claude-birthday-ui .kpi .tone-red .k-icon { color: var(--c-bad) !important; }
body.claude-birthday-ui .kpi .tone-blue .k-icon { color: var(--c-primary) !important; }

body.claude-birthday-ui .kpi .k-badge {
  border-radius: var(--c-radius-chip) !important;
  padding: 4px 10px !important;
  background: var(--c-primary-soft) !important;
  color: var(--c-primary) !important;
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
}

body.claude-birthday-ui .kpi .k-badge.up { background: rgba(22, 163, 74, 0.1) !important; color: var(--c-ok) !important; }
body.claude-birthday-ui .kpi .k-badge.down { background: rgba(239, 68, 68, 0.1) !important; color: var(--c-bad) !important; }
body.claude-birthday-ui .kpi .k-badge.warn { background: rgba(245, 158, 11, 0.1) !important; color: var(--c-warn) !important; }
body.claude-birthday-ui .kpi .k-badge.neutral { background: #f1f5f9 !important; color: var(--c-text-sub) !important; }

body.claude-birthday-ui .kpi .k-value,
body.claude-birthday-ui .kpi.ops .k-value,
body.claude-birthday-ui .kpi.followup .k-value {
  color: var(--c-text) !important;
  font-family: var(--c-font-title) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
}

body.claude-birthday-ui .kpi .k-desc,
body.claude-birthday-ui .kpi.ops .k-desc,
body.claude-birthday-ui .kpi.followup .k-desc {
  margin-top: 10px !important;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.55 !important;
}

body.claude-birthday-ui .kpi .k-label {
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* -----------------------------------------------------------
 * Insight 列表 —— 编号胶囊 + 像素字 + hover
 * --------------------------------------------------------- */
body.claude-birthday-ui .insight-card {
  background: #ffffff !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-card-shadow) !important;
  padding: 14px 16px !important;
}

body.claude-birthday-ui .insight-list { gap: 10px !important; }

body.claude-birthday-ui .insight-list li {
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
  border-radius: var(--c-radius-sm) !important;
  padding: 14px 18px !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

body.claude-birthday-ui .insight-list li:hover {
  background: #ffffff !important;
  border-color: var(--c-line-strong) !important;
  transform: translateX(2px);
}

body.claude-birthday-ui .insight-list li::before {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

body.claude-birthday-ui .insight-list li:nth-child(2)::before { background: var(--c-ok) !important; }
body.claude-birthday-ui .insight-list li:nth-child(3)::before { background: var(--c-warn) !important; }
body.claude-birthday-ui .insight-list li:nth-child(4)::before { background: var(--c-primary-strong) !important; }
body.claude-birthday-ui .insight-list li:nth-child(5)::before { background: #1e293b !important; }

body.claude-birthday-ui .insight-hi {
  color: var(--c-primary) !important;
  font-weight: 700 !important;
}

body.claude-birthday-ui .insight-good {
  color: var(--c-ok) !important;
  font-weight: 700 !important;
}

/* -----------------------------------------------------------
 * Hint / Note / region-link-hint / matrix-region-state
 * --------------------------------------------------------- */
body.claude-birthday-ui .hint,
body.claude-birthday-ui .region-note,
body.claude-birthday-ui .region-link-hint,
body.claude-birthday-ui .matrix-region-state {
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

body.claude-birthday-ui .region-link-hint strong,
body.claude-birthday-ui .matrix-region-state strong {
  color: var(--c-primary) !important;
  font-weight: 700 !important;
}

/* -----------------------------------------------------------
 * Select / Input —— 统一控件
 * --------------------------------------------------------- */
body.claude-birthday-ui select,
body.claude-birthday-ui input {
  height: 36px !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-sm) !important;
  background: #ffffff !important;
  color: var(--c-text) !important;
  padding: 0 12px !important;
  font-family: var(--c-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  outline: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-shadow: none !important;
}

body.claude-birthday-ui select:hover,
body.claude-birthday-ui input:hover {
  border-color: var(--c-line-strong) !important;
}

body.claude-birthday-ui select:focus,
body.claude-birthday-ui input:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-primary-soft) !important;
}

body.claude-birthday-ui input::placeholder {
  color: var(--c-text-muted) !important;
}

body.claude-birthday-ui .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.claude-birthday-ui .toolbar label {
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--c-text-sub) !important;
}

/* -----------------------------------------------------------
 * Matrix tabs —— 圆角胶囊 tab
 * --------------------------------------------------------- */
body.claude-birthday-ui .matrix-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: #f1f5f9 !important;
  border-radius: var(--c-radius-chip) !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: none !important;
}

body.claude-birthday-ui .matrix-tab {
  border: none !important;
  background: transparent !important;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  border-radius: var(--c-radius-chip) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

body.claude-birthday-ui .matrix-tab:hover {
  color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
}

body.claude-birthday-ui .matrix-tab.active {
  background: #ffffff !important;
  color: var(--c-text) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

body.claude-birthday-ui .matrix-tab.active[data-mode="yoy"] {
  background: var(--c-primary-soft) !important;
  color: var(--c-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 82, 255, 0.14) !important;
}

body.claude-birthday-ui .matrix-tab.active[data-mode="mom"] {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--c-warn) !important;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.16) !important;
}

/* -----------------------------------------------------------
 * 表格 —— 像素风表头 + 行 hover
 * --------------------------------------------------------- */
body.claude-birthday-ui table {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.claude-birthday-ui th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--c-line) !important;
  padding: 11px 10px !important;
  text-align: left;
  color: var(--c-text-sub) !important;
  font-family: var(--c-font-label) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.claude-birthday-ui td {
  padding: 10px 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.claude-birthday-ui tbody tr:hover td {
  background: #f8fafc !important;
}

body.claude-birthday-ui tbody tr:last-child td {
  border-bottom: none !important;
}

/* matrix-name 列保持原 word-break，仅调字重 */
body.claude-birthday-ui .matrix-name-text {
  font-family: var(--c-font-body) !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
}

/* metric-cell 内的 main 和 delta */
body.claude-birthday-ui .metric-main {
  color: var(--c-text) !important;
  font-family: var(--c-font-label) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}

body.claude-birthday-ui .metric-delta {
  font-family: var(--c-font-label) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
}

body.claude-birthday-ui .metric-delta.up { color: var(--c-ok) !important; }
body.claude-birthday-ui .metric-delta.down { color: var(--c-bad) !important; }
body.claude-birthday-ui .metric-delta.flat,
body.claude-birthday-ui .metric-delta.na { color: var(--c-text-muted) !important; }

/* -----------------------------------------------------------
 * Region 高亮行（来自 xm_monthly_theme.css 的逻辑保留，仅调色）
 * --------------------------------------------------------- */
body.claude-birthday-ui .region-highlight-row td {
  background: var(--c-primary-soft) !important;
  color: var(--c-text) !important;
  font-weight: 700 !important;
}

body.claude-birthday-ui .region-highlight-row td:first-child {
  box-shadow: inset 3px 0 0 var(--c-primary) !important;
}

/* -----------------------------------------------------------
 * 按钮 —— 主按钮 / 次按钮
 * --------------------------------------------------------- */
body.claude-birthday-ui .btn {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-sm) !important;
  background: #ffffff !important;
  color: var(--c-text) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 8px 14px !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

body.claude-birthday-ui .btn:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
}

body.claude-birthday-ui .btn:active {
  transform: translateY(1px);
}

/* -----------------------------------------------------------
 * Modal 弹窗 —— 圆角 + 阴影 + 头部
 * --------------------------------------------------------- */
body.claude-birthday-ui .modal {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(4px);
}

body.claude-birthday-ui .modal-card {
  background: #ffffff !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-lg) !important;
  padding: 18px 20px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

body.claude-birthday-ui .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}

body.claude-birthday-ui .modal-head strong {
  font-family: var(--c-font-title) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.01em !important;
}

/* -----------------------------------------------------------
 * Empty 状态
 * --------------------------------------------------------- */
body.claude-birthday-ui .empty {
  color: var(--c-text-muted) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 24px 0 !important;
  text-align: center !important;
}

/* -----------------------------------------------------------
 * Chart 容器 —— 背景透明，让点阵透过
 * --------------------------------------------------------- */
body.claude-birthday-ui .chart {
  background: transparent !important;
}

/* -----------------------------------------------------------
 * 响应式（≤ 1180px）
 * --------------------------------------------------------- */
@media (max-width: 1180px) {
  body.claude-birthday-ui .hero { flex-direction: column !important; }
  body.claude-birthday-ui .hero .toolbar { width: 100%; justify-content: flex-start; }
  body.claude-birthday-ui .kpi,
  body.claude-birthday-ui .grid-2,
  body.claude-birthday-ui .region-contribution-grid,
  body.claude-birthday-ui .matrix-layout,
  body.claude-birthday-ui .matrix-top-row,
  body.claude-birthday-ui .matrix-bottom-row { display: block !important; }
  body.claude-birthday-ui .matrix-top-row > * + *,
  body.claude-birthday-ui .matrix-bottom-row > * + *,
  body.claude-birthday-ui .grid-2 > * + *,
  body.claude-birthday-ui .region-contribution-grid > * + * { margin-top: 14px; }
}

@media (max-width: 768px) {
  body.claude-birthday-ui .hero .bilingual-title .cn-label { font-size: 28px !important; }
  body.claude-birthday-ui .section-title .title-stack .title-cn { font-size: 18px !important; }
  body.claude-birthday-ui .kpi .k-value { font-size: 28px !important; }
}

/* ============================================================
 * R3 · 深度对齐厦门时韫风格（在中度对齐基础上追加）
 * 后规则覆盖前规则，同优先级时按声明顺序生效
 * 回滚方式：删除本注释及以下所有规则即可回到中度对齐版本
 * ============================================================ */

/* -----------------------------------------------------------
 * R3-1. 紧凑深色 Hero 卡片头
 * --------------------------------------------------------- */
body.claude-birthday-ui .hero {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 40px 36px !important;
  min-height: 212px !important;
  margin: 4px 0 28px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background:
    linear-gradient(120deg, rgba(2, 12, 42, 0.98) 0%, rgba(14, 50, 140, 0.94) 48%, rgba(70, 56, 168, 0.92) 100%),
    radial-gradient(900px 240px at 70% 18%, rgba(124, 234, 255, 0.20) 0%, transparent 60%),
    radial-gradient(720px 220px at 24% 72%, rgba(56, 189, 248, 0.20) 0%, transparent 64%) !important;
  background-blend-mode: normal !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.20) !important;
}

/* Hero 装饰层 1：网格扫描线 + 静态星点底图（z-index 0） */
body.claude-birthday-ui .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 横向网格 */
    linear-gradient(to right, rgba(125, 211, 252, 0.08) 1px, transparent 1px) 0 0 / 64px 100%,
    /* 纵向网格 */
    linear-gradient(to bottom, rgba(125, 211, 252, 0.07) 1px, transparent 1px) 0 0 / 100% 56px,
    /* 静态小星点（不动的远景） */
    radial-gradient(circle at 14% 32%, rgba(186, 230, 253, 0.45) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 28% 64%, rgba(196, 181, 253, 0.4) 0 1.4px, transparent 2px),
    radial-gradient(circle at 48% 22%, rgba(186, 230, 253, 0.36) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 62% 58%, rgba(216, 180, 254, 0.4) 0 1.4px, transparent 2px),
    radial-gradient(circle at 78% 30%, rgba(125, 211, 252, 0.42) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 88% 66%, rgba(196, 181, 253, 0.38) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 6% 78%, rgba(186, 230, 253, 0.32) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 12%, rgba(125, 211, 252, 0.5) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 56% 84%, rgba(186, 230, 253, 0.36) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 92% 14%, rgba(216, 180, 254, 0.42) 0 1.3px, transparent 1.9px);
  pointer-events: none;
  opacity: 0.92;
  z-index: 0;
}

/* Hero 装饰层 2：缓慢横向扫光（科技感扫描线） */
body.claude-birthday-ui .hero > .hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(125, 211, 252, 0.10) 50%,
    rgba(186, 230, 253, 0.18) 52%,
    rgba(125, 211, 252, 0.10) 54%,
    transparent 70%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: hero-scan-sweep 9s linear infinite;
  z-index: 0;
  mix-blend-mode: screen;
}

@keyframes hero-scan-sweep {
  0% { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}

/* Hero 装饰层 3：独立闪烁的星点集合（每颗各自的延迟 / 周期 / 缩放） */
body.claude-birthday-ui .hero > .hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.claude-birthday-ui .hero > .hero-stars > i {
  position: absolute;
  display: block;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(186, 230, 253, 0.85);
  opacity: 0.6;
  will-change: opacity, transform;
  animation-name: star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

/* 17 颗星，位置 / 大小 / 颜色 / 节奏全部错开，看起来非同步 */
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(1)  { top: 14%; left: 6%;  width: 2px; height: 2px; animation-duration: 2.8s; animation-delay: 0.0s; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(2)  { top: 62%; left: 10%; width: 1.5px; height: 1.5px; animation-duration: 4.3s; animation-delay: 0.6s; background:#bae6fd; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(3)  { top: 28%; left: 18%; width: 2.5px; height: 2.5px; animation-duration: 3.4s; animation-delay: 1.1s; background:#c4b5fd; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(4)  { top: 78%; left: 22%; width: 1.5px; height: 1.5px; animation-duration: 5.1s; animation-delay: 0.3s; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(5)  { top: 44%; left: 30%; width: 2px; height: 2px; animation-duration: 3.0s; animation-delay: 1.8s; background:#7dd3fc; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(6)  { top: 18%; left: 38%; width: 1.5px; height: 1.5px; animation-duration: 4.7s; animation-delay: 0.9s; background:#bae6fd; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(7)  { top: 82%; left: 44%; width: 2.5px; height: 2.5px; animation-duration: 3.6s; animation-delay: 2.1s; background:#ddd6fe; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(8)  { top: 32%; left: 52%; width: 1.5px; height: 1.5px; animation-duration: 5.4s; animation-delay: 0.4s; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(9)  { top: 66%; left: 58%; width: 2px; height: 2px; animation-duration: 2.6s; animation-delay: 1.3s; background:#a5f3fc; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(10) { top: 22%; left: 64%; width: 1.5px; height: 1.5px; animation-duration: 4.0s; animation-delay: 2.4s; background:#c4b5fd; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(11) { top: 50%; left: 70%; width: 2.5px; height: 2.5px; animation-duration: 3.3s; animation-delay: 0.7s; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(12) { top: 86%; left: 76%; width: 1.5px; height: 1.5px; animation-duration: 5.7s; animation-delay: 1.5s; background:#bae6fd; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(13) { top: 12%; left: 82%; width: 2px; height: 2px; animation-duration: 2.9s; animation-delay: 2.7s; background:#7dd3fc; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(14) { top: 38%; left: 88%; width: 1.5px; height: 1.5px; animation-duration: 4.6s; animation-delay: 0.2s; background:#ddd6fe; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(15) { top: 74%; left: 92%; width: 2.5px; height: 2.5px; animation-duration: 3.7s; animation-delay: 1.9s; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(16) { top: 54%; left: 96%; width: 1.5px; height: 1.5px; animation-duration: 5.0s; animation-delay: 0.5s; background:#a5f3fc; }
body.claude-birthday-ui .hero > .hero-stars > i:nth-child(17) { top: 90%; left: 4%;  width: 2px; height: 2px; animation-duration: 3.1s; animation-delay: 1.6s; background:#c4b5fd; }

/* Hero 装饰层 4：偶发流星（2 颗，斜向掠过，错开节奏） */
body.claude-birthday-ui .hero > .hero-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

body.claude-birthday-ui .hero > .hero-meteors > i {
  position: absolute;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(186, 230, 253, 0.0) 8%, rgba(186, 230, 253, 0.6) 60%, #ffffff 92%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(186, 230, 253, 0.8));
  border-radius: 999px;
  opacity: 0;
  transform: rotate(22deg);
  will-change: transform, opacity;
}

body.claude-birthday-ui .hero > .hero-meteors > i:nth-child(1) {
  top: 14%;
  left: -15%;
  animation: meteor-shoot 8.5s ease-in 1.2s infinite;
}

body.claude-birthday-ui .hero > .hero-meteors > i:nth-child(2) {
  top: 56%;
  left: -15%;
  width: 90px;
  animation: meteor-shoot 11s ease-in 5.8s infinite;
}

body.claude-birthday-ui .hero > .hero-meteors > i:nth-child(3) {
  top: 34%;
  left: -15%;
  width: 130px;
  background: linear-gradient(90deg, transparent 0%, rgba(216, 180, 254, 0.0) 8%, rgba(216, 180, 254, 0.65) 60%, #ffffff 92%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(216, 180, 254, 0.85));
  animation: meteor-shoot 9.5s ease-in 3.4s infinite;
}

@keyframes meteor-shoot {
  0%   { transform: translate3d(0, 0, 0) rotate(22deg); opacity: 0; }
  6%   { opacity: 1; }
  14%  { opacity: 0.95; }
  22%  { opacity: 0; }
  100% { transform: translate3d(140vw, 60vw, 0) rotate(22deg); opacity: 0; }
}

/* Hero 装饰层 5：meta 胶囊小蓝点呼吸光（在已有 box-shadow 基础上做脉冲） */
body.claude-birthday-ui .hero .meta::before {
  animation: meta-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes meta-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(199, 210, 254, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 12px rgba(199, 210, 254, 1); transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  body.claude-birthday-ui .hero > .hero-stars > i,
  body.claude-birthday-ui .hero > .hero-meteors > i,
  body.claude-birthday-ui .hero > .hero-scan,
  body.claude-birthday-ui .hero .meta::before {
    animation: none !important;
  }
  body.claude-birthday-ui .hero > .hero-stars > i { opacity: 0.7; }
}

/* -----------------------------------------------------------
 * R4. 进度条 / 大区柱条载入动效（width 过渡，由 JS 触发 0→target）
 * --------------------------------------------------------- */
body.claude-birthday-ui .region-fill,
body.claude-birthday-ui .k-progress-fill,
body.claude-birthday-ui .k-foot-bar-fill,
body.claude-birthday-ui .region-track > * {
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* -----------------------------------------------------------
 * R4-2. 月份切换器细线图标
 * --------------------------------------------------------- */
body.claude-birthday-ui .toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(226, 232, 240, 0.78);
  flex: 0 0 16px;
}
body.claude-birthday-ui .toolbar-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.4;
}
body.claude-birthday-ui .toolbar-icon svg .pulse-dot {
  fill: currentColor;
  opacity: 0.85;
  animation: toolbar-icon-pulse 2.2s ease-in-out infinite;
}
@keyframes toolbar-icon-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

body.claude-birthday-ui .hero > div,
body.claude-birthday-ui .hero > .toolbar {
  position: relative;
  z-index: 1;
}

body.claude-birthday-ui .hero > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hero 标题改深底浅字 + JetBrains Mono 48px */
body.claude-birthday-ui .hero h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--c-font-label) !important;
  line-height: 1.06 !important;
}

body.claude-birthday-ui .hero .bilingual-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 中英位置互换：中文做副标题（上小），英文做主标题（下大） */
body.claude-birthday-ui .hero .bilingual-title .cn-label {
  order: 1;
  color: rgba(226, 232, 240, 0.88) !important;
  font-family: var(--c-font-label) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

body.claude-birthday-ui .hero .bilingual-title .en-label {
  order: 2;
  color: #f8fafc !important;
  font-family: var(--c-font-label) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  line-height: 1.06 !important;
  text-transform: uppercase !important;
  text-shadow: 0 8px 24px rgba(15, 23, 42, 0.4) !important;
}

/* Hero meta 改深底浅色胶囊 */
body.claude-birthday-ui .hero .meta {
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(226, 232, 240, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px 13px 5px 11px !important;
}

body.claude-birthday-ui .hero .meta::before {
  background: #c7d2fe !important;
  box-shadow: 0 0 8px rgba(199, 210, 254, 0.7);
}

/* Hero 内的 toolbar 改深底浅色 */
body.claude-birthday-ui .hero .toolbar {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(8px);
}

body.claude-birthday-ui .hero .toolbar label {
  color: rgba(226, 232, 240, 0.78) !important;
}

body.claude-birthday-ui .hero .toolbar select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  height: 34px !important;
}

body.claude-birthday-ui .hero .toolbar select:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

body.claude-birthday-ui .hero .toolbar select:focus {
  border-color: #c7d2fe !important;
  box-shadow: 0 0 0 3px rgba(199, 210, 254, 0.24) !important;
}

/* select 的 option 在大多数浏览器里继承的是系统色，但部分浏览器允许覆盖 */
body.claude-birthday-ui .hero .toolbar select option {
  background: #0f172a;
  color: #f8fafc;
}

/* -----------------------------------------------------------
 * R3-2. Section 标题加大到 32px / 竖条 36px
 * --------------------------------------------------------- */
body.claude-birthday-ui .section { margin-top: 32px !important; }

body.claude-birthday-ui .section-title {
  margin: 0 0 18px !important;
  padding-left: 16px !important;
  gap: 14px !important;
}

body.claude-birthday-ui .section-title::before {
  width: 3px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: var(--c-primary) !important;
}

body.claude-birthday-ui .section-title .title-stack {
  gap: 5px !important;
}

/* Section 标题：英文大黑字做主标题，中文小灰字做副标题（与 hero 区相反） */
body.claude-birthday-ui .section-title .title-stack .title-en {
  font-family: var(--c-font-label) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase !important;
  line-height: 1.04 !important;
}

body.claude-birthday-ui .section-title .title-stack .title-cn {
  font-family: var(--c-font-label) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* -----------------------------------------------------------
 * R3-3. 所有数字统一 JetBrains Mono
 * --------------------------------------------------------- */
body.claude-birthday-ui .kpi .k-value,
body.claude-birthday-ui .kpi.ops .k-value,
body.claude-birthday-ui .kpi.followup .k-value {
  font-family: var(--c-font-label) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
}

/* 表格数据列也走像素字体（matrix-table 的 2/3/4 列、其它表的 4-8 列） */
body.claude-birthday-ui .matrix-table td:nth-child(n + 2),
body.claude-birthday-ui table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
  font-family: var(--c-font-label) !important;
  letter-spacing: 0.01em !important;
}

/* rank-style 大数字（如有） */
body.claude-birthday-ui .rank-sales {
  font-family: var(--c-font-label) !important;
  font-weight: 500 !important;
}

/* -----------------------------------------------------------
 * R3-4. 小卡片体系（hint / region-note / link-hint / matrix-state）
 * --------------------------------------------------------- */
body.claude-birthday-ui .hint,
body.claude-birthday-ui .region-note,
body.claude-birthday-ui .region-link-hint,
body.claude-birthday-ui .matrix-region-state {
  border: 1px solid #dbe3f2 !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.72) !important;
  padding: 10px 14px !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin-top: 10px !important;
}

body.claude-birthday-ui .region-link-hint strong,
body.claude-birthday-ui .matrix-region-state strong {
  color: var(--c-primary) !important;
  font-family: var(--c-font-label) !important;
  font-weight: 600 !important;
}

/* 卡片内首条 hint 紧贴上方时去掉 margin-top */
body.claude-birthday-ui .card .hint:first-child,
body.claude-birthday-ui .card .region-link-hint:first-child {
  margin-top: 0 !important;
}

/* -----------------------------------------------------------
 * R3-5. 卡片 hover 加深为 -5px
 * --------------------------------------------------------- */
body.claude-birthday-ui .card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
  border-color: #c7d2fe !important;
}

body.claude-birthday-ui .matrix-card:hover {
  transform: translateY(-3px) !important;
}

body.claude-birthday-ui .insight-list li:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

/* -----------------------------------------------------------
 * R3-6. 冷色调色板（metric-delta + KPI badge）
 *      ↑ 蓝（#0052ff）、↓ 紫（#731be5）—— 业务"绿涨红跌"约定被本草稿主动打破
 * --------------------------------------------------------- */
body.claude-birthday-ui .metric-delta.up {
  color: #0052ff !important;
}

body.claude-birthday-ui .metric-delta.down {
  color: #731be5 !important;
}

body.claude-birthday-ui .metric-delta.flat,
body.claude-birthday-ui .metric-delta.na {
  color: #94a3b8 !important;
}

body.claude-birthday-ui .kpi .k-badge.up {
  background: rgba(0, 82, 255, 0.1) !important;
  color: #0052ff !important;
}

body.claude-birthday-ui .kpi .k-badge.down {
  background: rgba(115, 27, 229, 0.1) !important;
  color: #731be5 !important;
}

body.claude-birthday-ui .kpi .k-badge.warn {
  background: rgba(115, 27, 229, 0.08) !important;
  color: #731be5 !important;
}

body.claude-birthday-ui .kpi .tone-green .k-icon { color: #0052ff !important; }
body.claude-birthday-ui .kpi .tone-orange .k-icon { color: #731be5 !important; }
body.claude-birthday-ui .kpi .tone-red .k-icon { color: #731be5 !important; }
body.claude-birthday-ui .kpi .tone-blue .k-icon { color: #0052ff !important; }

/* insight-list 编号同步换冷色（原中度版有 ok/warn/bad 色） */
body.claude-birthday-ui .insight-list li:nth-child(1)::before { background: #0052ff !important; }
body.claude-birthday-ui .insight-list li:nth-child(2)::before { background: #3b82f6 !important; }
body.claude-birthday-ui .insight-list li:nth-child(3)::before { background: #731be5 !important; }
body.claude-birthday-ui .insight-list li:nth-child(4)::before { background: #0ea5e9 !important; }
body.claude-birthday-ui .insight-list li:nth-child(5)::before { background: #1e293b !important; }

body.claude-birthday-ui .insight-hi { color: #0052ff !important; }
body.claude-birthday-ui .insight-good { color: #0052ff !important; }

/* region-highlight-row 用蓝色 inset */
body.claude-birthday-ui .region-highlight-row td:first-child {
  box-shadow: inset 3px 0 0 #0052ff !important;
}

/* -----------------------------------------------------------
 * R3-7. 响应式 hero 适配
 * --------------------------------------------------------- */
@media (max-width: 1180px) {
  body.claude-birthday-ui .hero {
    flex-direction: column !important;
    padding: 24px 22px !important;
    min-height: 0 !important;
  }
  body.claude-birthday-ui .hero .toolbar {
    width: 100%;
    justify-content: flex-start !important;
  }
  body.claude-birthday-ui .hero .bilingual-title .en-label {
    font-size: 36px !important;
  }
}

@media (max-width: 768px) {
  body.claude-birthday-ui .hero .bilingual-title .en-label { font-size: 28px !important; }
  body.claude-birthday-ui .hero .bilingual-title .cn-label { font-size: 12px !important; }
  body.claude-birthday-ui .section-title .title-stack .title-en { font-size: 22px !important; }
  body.claude-birthday-ui .section-title::before { height: 26px !important; }
  body.claude-birthday-ui .kpi .k-value { font-size: 28px !important; }
}

/* -----------------------------------------------------------
 * R3-8. 淡淡点状背景（对齐参考页 distributor_xm_shiyun_2026-04）
 *
 * 关键修复：父主题 body.xm-unified-theme::before 叠加了一层
 * 白色渐变蒙版（rgba(255,255,255,0.82~0.98)），会把点阵盖住。
 * 在 claude-birthday-ui 作用域内禁用这层蒙版，让点阵能透出来。
 * --------------------------------------------------------- */
body.xm-unified-theme.claude-birthday-ui::before {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* 点阵与参考页一致：1px 圆点、20×20 网格、灰蓝 #94a3b8 0.38 透明度 */
body.claude-birthday-ui,
body.xm-unified-theme.claude-birthday-ui {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.38) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}

/* -----------------------------------------------------------
 * R3-9. 滚动上浮动画（IntersectionObserver 触发）
 *
 * 初态：透明 + 下沉 24px
 * 进入可视区后切换到 .r3-reveal-in，过渡 0.55s
 * 用户开启了 prefers-reduced-motion 时自动跳过
 * --------------------------------------------------------- */
body.claude-birthday-ui .section.r3-reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

body.claude-birthday-ui .section.r3-reveal-init.r3-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.claude-birthday-ui .section.r3-reveal-init,
  body.claude-birthday-ui .section.r3-reveal-init.r3-reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------
 * R3-10. KPI 卡：中英双语 label + 仅 #3 显示 mini progress + 角落点阵装饰
 * --------------------------------------------------------- */
body.claude-birthday-ui .kpi .card {
  position: relative !important;
  overflow: hidden !important;
}

/* 只有 .has-progress 或 .has-foot 的卡片在底部留装饰空间 */
body.claude-birthday-ui .kpi .card.has-progress,
body.claude-birthday-ui .kpi .card.has-foot {
  padding-bottom: 22px !important;
}

/* 无 progress 卡片的底部 footer 装饰行 */
body.claude-birthday-ui .kpi .k-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.claude-birthday-ui .kpi .k-foot-text {
  font-family: var(--c-font-label);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-text-sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KPI #1: 蓝色发光圆点 */
body.claude-birthday-ui .kpi .k-foot-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0052ff;
  box-shadow: 0 0 8px rgba(0, 82, 255, 0.55);
  flex: 0 0 8px;
  animation: r3-foot-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes r3-foot-dot-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 82, 255, 0.55); opacity: 1; }
  50% { box-shadow: 0 0 12px rgba(0, 82, 255, 0.9); opacity: 0.7; }
}

/* KPI #2: 大箭头胶囊 */
body.claude-birthday-ui .kpi .k-foot-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  font-family: var(--c-font-label);
  font-size: 15px;
  font-weight: 600;
  flex: 0 0 26px;
  line-height: 1;
}

body.claude-birthday-ui .kpi .k-foot-arrow.up {
  background: rgba(0, 82, 255, 0.1);
  color: #0052ff;
  border: 1px solid rgba(0, 82, 255, 0.18);
}

body.claude-birthday-ui .kpi .k-foot-arrow.down {
  background: rgba(115, 27, 229, 0.1);
  color: #731be5;
  border: 1px solid rgba(115, 27, 229, 0.18);
}

/* KPI #4: mini bar（持续运营分销商占比可视化） */
body.claude-birthday-ui .kpi .k-foot-bar {
  position: relative;
  flex: 0 0 90px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 82, 255, 0.07);
  overflow: hidden;
}

body.claude-birthday-ui .kpi .k-foot-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #731be5 0%, #a855f7 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(115, 27, 229, 0.35);
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 重新打开 ::after（原 xm 主题 .kpi.ops .card::after 用 content:none !important 关掉了） */
body.claude-birthday-ui .kpi .card::after {
  content: "" !important;
  position: absolute !important;
  right: -12px !important;
  bottom: -12px !important;
  width: 80px !important;
  height: 80px !important;
  background:
    radial-gradient(circle, rgba(0, 82, 255, 0.10) 0 1.1px, transparent 1.5px) !important;
  background-size: 9px 9px !important;
  pointer-events: none !important;
  opacity: 0.9;
  mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
}

/* 双语 label 容器 */
body.claude-birthday-ui .kpi .k-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.claude-birthday-ui .kpi .k-label-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
}

body.claude-birthday-ui .kpi .k-cn {
  font-family: var(--c-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

body.claude-birthday-ui .kpi .k-sep {
  color: var(--c-text-muted) !important;
  font-family: var(--c-font-label) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body.claude-birthday-ui .kpi .k-en {
  font-family: var(--c-font-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--c-text-sub) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* badge 不被压扁 */
body.claude-birthday-ui .kpi .k-badge {
  flex: 0 0 auto !important;
}

/* 底部 mini progress bar（仅 .has-progress 卡片显示） */
body.claude-birthday-ui .kpi .k-progress {
  position: relative;
  margin-top: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 82, 255, 0.07);
  overflow: hidden;
}

body.claude-birthday-ui .kpi .k-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0052ff 0%, #3b82f6 60%, #22d3ee 100%);
  box-shadow: 0 0 10px rgba(0, 82, 255, 0.45);
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 进度条下方的英文注脚（vs 80% target · 100%） */
body.claude-birthday-ui .kpi .k-progress-label {
  margin-top: 6px;
  font-family: var(--c-font-label);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-text-sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* k-value 下加一条 1px 极淡蓝色横线增加层次感 */
body.claude-birthday-ui .kpi .k-value {
  position: relative;
}

/* k-icon 改为蓝色软底胶囊外观，更有"控件感" */
body.claude-birthday-ui .kpi .k-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(0, 82, 255, 0.08);
  border: 1px solid rgba(0, 82, 255, 0.14);
  font-size: 13px !important;
  flex: 0 0 28px !important;
}

body.claude-birthday-ui .kpi .tone-orange .k-icon {
  background: rgba(115, 27, 229, 0.08);
  border-color: rgba(115, 27, 229, 0.14);
}

body.claude-birthday-ui .kpi .tone-red .k-icon {
  background: rgba(115, 27, 229, 0.08);
  border-color: rgba(115, 27, 229, 0.14);
}

/* k-head 给 k-title 和 badge 之间更稳的间距 */
body.claude-birthday-ui .kpi .k-head {
  align-items: flex-start !important;
}