@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.0.16/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.0.16/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.0.16/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@5.3.0/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@5.3.0/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@5.3.0/700.css');
/* 轻量模式设计系统 v2（依据 12 张高保真设计稿提取）
   固定色值/字号/间距/圆角/组件/动效，全站复用。 */
:root{
  /* 主色：明亮青绿渐变（设计稿 #5EEAD4 / #6EE7B7） */
  --c-primary:#059669;
  --c-primary-light:#6EE7B7;       /* 设计稿薄荷绿渐变 */
  --c-primary-ghost:#ECFDF5;       /* 浅薄荷背景 */
  --c-soft:#F0FDF4;
  --c-service:#F0F9FF;
  --c-line:#E5E7EB;
  --c-white:#FFFFFF;
  --c-red:#EF4444;
  --c-orange:#F97316;             /* 设计稿暖橙 */
  --c-orange-soft:#FFF7ED;
  --c-blue:#3B82F6;
  --c-purple:#8B5CF6;
  /* ===== Fairy 品牌色（V3 优化，2026-08-15 新增，不破坏旧组件） ===== */
  --brand-gradient:linear-gradient(135deg,#EC4899 0%,#8B5CF6 100%); /* 粉→紫 Fairy 渐变 */
  --brand-gradient-soft:linear-gradient(135deg,#FCE7F3 0%,#EDE9FE 100%);
  --brand-purple:#8B5CF6;
  --brand-purple-light:#C4B5FD;
  --brand-purple-deep:#6D28D9;
  --brand-purple-ghost:#F5F3FF;
  --brand-pink:#EC4899;               /* Fairy 粉（V3 客户端门户点缀，2026-08-15 新增） */
  --logo-icon-url:url(data:image/png;base64,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); /* Fairy 图标（2026-08-15 从 logo-suredietitian.png 提取） */
  --c-primary-deep:#047857;
  --c-primary-ghost-2:#D1FAE5;
  --c-t1:#111827;
  --c-t2:#1F2937;
  --c-t3:#4B5563;
  --c-t4:#6B7280;                 /* 提升浅灰对比度至 ≥4.5:1（2026-08-23 a11y 升级） */
  /* 圆角（设计稿大圆角风格） */
  --radius-card:20px;             /* 设计稿 ~20px */
  --radius-ctrl:14px;
  --radius-pill:999px;
  /* 阴影（设计稿柔和扩散） */
  --shadow-sm:0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 16px 48px rgba(0,0,0,.10);
  --shadow-xl:0 24px 64px rgba(0,0,0,.12);
  /* 背景 */
  --c-bg:#F0FAF7;                  /* 设计稿淡青绿背景 */
  --c-text:#374151;
  --c-border:#E5E7EB;
  --space:16px;
  /* 字体（2026-08-23 排版升级：引入有辨识度的中文字体，替代纯系统栈） */
  --font-sans:"Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Noto Serif SC","Microsoft YaHei",serif; /* 展示字体：衬线，传递信任与温度 */
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(139,92,246,.10), transparent 58%),
    radial-gradient(90% 45% at 100% 0%, rgba(5,150,105,.07), transparent 55%),
    var(--c-bg);
  color:var(--c-text);font-family:var(--font-sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* 展示字体工具类 + 顶栏标题（2026-08-23 排版升级：衬线传递品牌温度） */
.v3-display{font-family:var(--font-display);font-weight:700;letter-spacing:.01em}
.topbar h1{font-family:var(--font-display);font-weight:700}

.logo-icon{width:32px;height:32px;border-radius:10px;background:var(--logo-icon-url) center/contain no-repeat;display:inline-block;flex-shrink:0;vertical-align:middle;}

/* ==========================================================================
   页面布局
   ========================================================================== */
.page{max-width:1280px;margin:0 auto;padding:var(--space);}
.page-header{margin-bottom:24px;}
.page-title{font-size:24px;font-weight:700;color:var(--c-t1);}
.page-subtitle{font-size:14px;color:var(--c-t3);margin-top:4px;}

/* ==========================================================================
   顶栏（桌面端）
   ========================================================================== */
.topbar{background:var(--c-white);border-bottom:1px solid var(--c-line);padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:100;}
.topbar .brand{font-size:18px;font-weight:700;color:var(--c-primary);display:flex;align-items:center;gap:8px;}
.topbar .brand-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--c-primary-light),var(--c-primary));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}
.topbar .sub{font-size:12px;color:var(--c-t4);}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.topbar nav a{font-size:13px;padding:8px 14px;border-radius:var(--radius-ctrl);color:var(--c-t3);border:1px solid transparent;transition:all .15s ease;}
.topbar nav a:hover{background:var(--c-soft);color:var(--c-primary);}
.topbar nav a.cur{background:var(--c-soft);color:var(--c-primary);font-weight:600;}

/* ==========================================================================
   侧边栏（管理端）
   ========================================================================== */
.layout-sidebar{display:flex;min-height:100vh;}
.sidebar{width:220px;background:var(--c-white);border-right:1px solid var(--c-line);padding:20px 12px;flex-shrink:0;}
.sidebar-brand{padding:8px 12px 20px;border-bottom:1px solid var(--c-line);margin-bottom:16px;}
.sidebar-brand .logo{width:40px;height:40px;background:linear-gradient(135deg,var(--c-primary-light),var(--c-primary));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-bottom:8px;}
.sidebar-brand h2{font-size:15px;font-weight:700;color:var(--c-t1);}
.sidebar-brand p{font-size:12px;color:var(--c-t4);}
.sidebar-section{font-size:11px;font-weight:600;color:var(--c-t4);text-transform:uppercase;letter-spacing:.5px;padding:12px 12px 6px;}
.sidebar-nav{list-style:none;}
.sidebar-nav li{margin-bottom:2px;}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-ctrl);color:var(--c-t3);font-size:14px;transition:all .15s ease;}
.sidebar-nav a:hover{background:var(--c-soft);color:var(--c-primary);}
.sidebar-nav a.cur{background:var(--c-soft);color:var(--c-primary);font-weight:600;}
.sidebar-nav .icon{width:20px;text-align:center;font-size:16px;}
.sidebar-footer{margin-top:auto;padding:16px 12px;border-top:1px solid var(--c-line);font-size:11px;color:var(--c-t4);}
.sidebar-content{flex:1;padding:24px;overflow-y:auto;}

/* ==========================================================================
   用户信息区（顶栏右侧）
   ========================================================================== */
.user-badge{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--c-soft);}
.user-avatar{width:28px;height:28px;background:linear-gradient(135deg,var(--c-primary-light),var(--c-primary));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;}
.user-name{font-size:13px;font-weight:600;color:var(--c-t2);}
.env-badge{font-size:11px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--c-primary-ghost);color:var(--c-primary);font-weight:600;}

/* ==========================================================================
   卡片（大圆角 + 柔和阴影，设计稿风格）
   ========================================================================== */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-card);padding:24px;margin-bottom:var(--space);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease;}
.card:hover{box-shadow:var(--shadow-md);}
.card-soft{background:linear-gradient(135deg,var(--c-soft),var(--c-primary-ghost));}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-title{font-size:15px;font-weight:600;color:var(--c-primary);border-left:4px solid var(--c-primary);padding-left:10px;}
.card-actions{display:flex;gap:8px;}

/* KPI 卡片（设计稿特色） */
.kpi-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-card);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;transition:all .2s ease;}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.kpi-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.kpi-icon.green{background:linear-gradient(135deg,#D1FAE5,#A7F3D0);color:var(--c-primary);}
.kpi-icon.orange{background:linear-gradient(135deg,#FED7AA,#FDBA74);color:var(--c-orange);}
.kpi-icon.blue{background:linear-gradient(135deg,#BFDBFE,#93C5FD);color:var(--c-blue);}
.kpi-icon.purple{background:linear-gradient(135deg,#DDD6FE,#C4B5FD);color:var(--c-purple);}
.kpi-data{display:flex;flex-direction:column;}
.kpi-value{font-size:28px;font-weight:700;color:var(--c-t1);line-height:1;}
.kpi-label{font-size:13px;color:var(--c-t3);margin-top:4px;}
.kpi-badge{font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--c-soft);color:var(--c-primary);font-weight:600;margin-left:auto;}

/* ==========================================================================
   按钮（设计稿大圆角胶囊风格）
   ========================================================================== */
.btn{font-family:inherit;font-size:14px;font-weight:500;border-radius:var(--radius-pill);padding:10px 20px;cursor:pointer;border:1px solid var(--c-border);background:var(--c-white);color:var(--c-t2);box-shadow:var(--shadow-sm);transition:all .15s ease;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--c-primary-light),var(--c-primary));color:#fff;border:none;box-shadow:0 4px 12px rgba(5,150,105,.25);}
.btn-primary:hover{box-shadow:0 6px 16px rgba(5,150,105,.35);transform:translateY(-1px);}
.btn-secondary{background:var(--c-white);color:var(--c-primary);border-color:var(--c-primary);}
.btn-danger{background:var(--c-white);color:var(--c-red);border-color:var(--c-red);}
.btn-ghost{background:transparent;color:var(--c-t3);border-color:transparent;}
.btn-ghost:hover{background:var(--c-soft);color:var(--c-primary);}
.btn-block{width:100%;justify-content:center;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}
/* 禁用态：浅灰底 + 灰字，明确表达「不可用」（与 --c-bg / --c-t4 token 一致） */
.btn:disabled,.btn[disabled]{background:var(--c-bg);color:var(--c-t4);border-color:var(--c-border);box-shadow:none;cursor:not-allowed;opacity:1;transform:none;filter:none;}
.btn:disabled:hover,.btn[disabled]:hover{box-shadow:none;transform:none;}

/* ==========================================================================
   表单（设计稿大圆角 + 柔和边框）
   ========================================================================== */
input,select,textarea{font-family:inherit;font-size:14px;color:var(--c-t1);background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-ctrl);padding:12px 16px;transition:border-color .2s,box-shadow .2s;}
input:focus,select:focus,textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(5,150,105,.08);outline:none;}
input::placeholder,textarea::placeholder{color:var(--c-t4);}
label{font-size:14px;color:var(--c-t3);font-weight:500;}
.field{margin-bottom:16px;}
.field-label{display:block;font-size:13px;font-weight:500;color:var(--c-t3);margin-bottom:6px;}
.hint{display:block;font-size:12px;color:var(--c-t4);margin-top:4px;}
.req::before{content:"【必填】";color:var(--c-red);}

/* ==========================================================================
   表格
   ========================================================================== */
.tablewrap{overflow-x:auto;border-radius:var(--radius-card);border:1px solid var(--c-line);background:var(--c-white);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{border-bottom:1px solid var(--c-line);padding:12px 16px;text-align:left;}
th{background:var(--c-soft);color:var(--c-t2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;}
td{color:var(--c-t3);}
td.num{text-align:right;font-variant-numeric:tabular-nums;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--c-primary-ghost);}

/* ==========================================================================
   标签/徽章（设计稿胶囊风格）
   ========================================================================== */
.tag{display:inline-block;background:var(--c-soft);color:var(--c-primary);border-radius:var(--radius-pill);padding:4px 12px;font-size:12px;font-weight:500;}
.tag-ok{background:#D1FAE5;color:#065F46;}
.tag-over{background:#FEE2E2;color:#991B1B;}
.tag-warn{background:#FEF3C7;color:#92400E;}
.badge{display:inline-block;background:var(--c-orange);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;}
.badge-soft{background:var(--c-primary-ghost);color:var(--c-primary);}
/* Fairy 品牌标签（V3 落地页产品标签） */
.tag-fairy{background:var(--brand-purple-ghost);color:var(--brand-purple-deep);border:1px solid var(--brand-purple-light);}

/* ==========================================================================
   状态色
   ========================================================================== */
.ok{color:#059669;font-weight:600;}
.bad{color:var(--c-red);font-weight:600;}
.mid{color:var(--c-orange);font-weight:600;}
.note{background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:12px 16px;border-radius:var(--radius-card);font-size:13px;margin-bottom:var(--space);}
.warnbox{background:#FEE2E2;border:1px solid #FECACA;color:#991B1B;padding:12px 16px;border-radius:var(--radius-card);font-size:13px;margin-bottom:var(--space);}

/* ==========================================================================
   进度条（设计稿圆角填充）
   ========================================================================== */
.track{height:12px;background:var(--c-soft);border-radius:var(--radius-pill);overflow:hidden;position:relative;}
.fill{height:100%;border-radius:var(--radius-pill);transition:width .6s ease;}
.fill.g{background:linear-gradient(90deg,var(--c-primary-light),var(--c-primary));}.fill.o{background:linear-gradient(90deg,#FDE68A,var(--c-orange));}.fill.r{background:linear-gradient(90deg,#FECACA,var(--c-red));}.fill.b{background:linear-gradient(90deg,#BFDBFE,var(--c-blue));}
/* V3 Fairy 品牌组件（P2 客户端门户，2026-08-15 新增，与旧组件共存） */
.fill.p{background:var(--brand-gradient);}
.btn-sm{padding:7px 14px;font-size:13px;line-height:1.2;}
.avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:var(--brand-gradient);flex-shrink:0;overflow:hidden;}
.avatar-sm{width:32px;height:32px;font-size:14px;}
.kpi-icon.pink{background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(139,92,246,.14));color:var(--brand-purple);}
.card-fairy{background:linear-gradient(135deg,#FCE7F3,#EDE9FE);border:1px solid var(--brand-purple-light);}

/* ==========================================================================
   网格/布局
   ========================================================================== */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.daycol{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-card);padding:12px;}
.daycol h3{font-size:13px;margin:0 0 8px;text-align:center;color:var(--c-t2);}

/* ==========================================================================
   底部导航（移动端）
   ========================================================================== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--c-white);border-top:1px solid var(--c-line);display:flex;padding:8px 0 env(safe-area-inset-bottom);z-index:100;}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;font-size:11px;color:var(--c-t4);text-decoration:none;transition:color .15s;}
.bottom-nav a.active{color:var(--c-primary);}
.bottom-nav a .icon{font-size:20px;}

/* ==========================================================================
   空状态
   ========================================================================== */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:var(--c-t4);text-align:center;}
.empty .icon{font-size:48px;margin-bottom:12px;opacity:.5;}
.empty p{font-size:14px;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media(max-width:768px){
  .sidebar{position:fixed;left:-240px;top:0;bottom:0;z-index:200;transition:left .3s ease;}
  .sidebar.open{left:0;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .kpi-card{padding:16px;}
  .kpi-value{font-size:24px;}
  .topbar nav{width:100%;overflow-x:auto;}
}
.foot{font-size:12px;color:var(--c-t4);text-align:center;margin:24px 0 12px;}

/* ==========================================================================
   动效系统（全局复用）
   ========================================================================== */

/* View 切换淡入 */
.view-enter {
  animation: ds-fade-in .3s ease both;
}
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toast 弹出/消失 */
.ds-toast {
  position: fixed;
  left: 50%; bottom: 80px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(17,24,39,.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  box-shadow: var(--shadow-lg);
}
.ds-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ds-toast.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}

/* 按钮按压反馈 */
.btn-press {
  transition: transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.btn-press:active {
  transform: scale(.96);
  opacity: .88;
}

/* 卡片悬浮 */
.card-hover {
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* 加载条 */
.ds-loader {
  width: 100%; height: 4px; background: var(--c-line); border-radius: 2px; overflow: hidden;
}
.ds-loader::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg,var(--c-primary-light),var(--c-primary));
  border-radius: 2px;
  animation: ds-loading 1.2s ease-in-out infinite;
}
@keyframes ds-loading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* 弹窗遮罩 */
.ds-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: ds-fade-in .2s ease;
}

/* 弹窗面板 */
.ds-modal {
  background: var(--c-white);
  border-radius: 20px;
  padding: 28px;
  width: min(480px, 92vw);
  box-shadow: var(--shadow-xl);
  animation: ds-modal-in .3s ease;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes ds-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 数据行入场 */
.ds-row-enter {
  animation: ds-fade-in .25s ease both;
}

/* ==========================================================================
   临床组件兼容样式（补齐 design-system.css）
   注：clinical-design-system.css 并未归档——它仍被 build_single.py / build_full.py
       内联，且其类（cbtn/cinput/cselect/ctabs/cmb-md 等）被 login/admin/index/client
       等内联视图实际使用。2026-08-17 已将其品牌色由 #3DC7A4 薄荷蓝绿整体重染为
       V3 翡翠绿（#059669 系列，对齐 design-system.css），消除薄荷绿偏离。下方兼容块
       仅作冗余兜底，非唯一来源。
   ========================================================================== */

.cinput, .cselect, .ctextarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--c-t2);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-ctrl);
  padding: 10px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  display: block;
}

.cinput:focus, .cselect:focus, .ctextarea:focus {
  border-color: var(--c-primary-light);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-ghost);
}

.ctextarea { resize: vertical; min-height: 80px; }

.cinput--inline { width: auto; min-width: 140px; display: inline-block; }

/* 小型输入框 */
.cinput--sm, .cselect--sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-ctrl);
}

/* 禁用状态 */
.cinput:disabled, .cselect:disabled, .ctextarea:disabled {
  background: var(--c-bg);
  color: var(--c-t4);
  cursor: not-allowed;
}

/* 错误状态 */
.cinput--error, .cselect--error, .ctextarea--error {
  border-color: var(--c-red);
}
.cinput--error:focus, .cselect--error:focus, .ctextarea--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* 字段标签 */
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-t3);
  margin-bottom: 6px;
}

/* 表格样式 */
.ctablewrap { overflow-x: auto; border-radius: var(--radius-ctrl); }
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th {
  background: var(--c-primary-ghost);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--c-t2);
  border-bottom: 1px solid var(--c-border);
}
.ctable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-t2);
}
.ctable tr:hover td { background: var(--c-soft); }

/* Badge 徽章 */
.cbadge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.cbadge--primary { background: var(--c-primary-ghost); color: var(--c-primary); }
.cbadge--success { background: #ECFDF5; color: #059669; }
.cbadge--warning { background: #FFF7ED; color: #EA580C; }
.cbadge--danger { background: #FEF2F2; color: #DC2626; }
.cbadge--info { background: #EFF6FF; color: #2563EB; }
.cbadge--muted { background: var(--c-bg); color: var(--c-t4); }

/* ===== 客户/营养师详情 Tab 工具类（从 clinical 设计系统补齐，统一到 design-system 令牌） ===== */
.ctabs { display: inline-flex; gap: 6px; background: var(--c-primary-ghost); padding: 4px; border-radius: 999px; margin-bottom: 12px; flex-wrap: wrap; }
.ctab { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--c-t3); cursor: pointer; border: none; background: transparent; transition: .15s; }
.ctab:hover { color: var(--c-primary); }
.ctab.active { background: var(--c-surface, #fff); color: var(--c-primary); box-shadow: var(--shadow-sm); font-weight: 600; }
.ccard--soft { background: var(--c-primary-ghost); box-shadow: none; border: 1px solid var(--c-border); border-radius: var(--radius-card); }
.ccard__body { padding: 16px; }
.msg-bubble { background: var(--c-primary-ghost); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; max-width: 82%; }
.msg-bubble--out { background: var(--c-primary); color: #fff; margin-left: auto; }
.msg-text { font-size: 14px; line-height: 1.5; }
.msg-time { font-size: 11px; opacity: .7; margin-top: 4px; }

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--c-bg) 25%, var(--c-border) 50%, var(--c-bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-ctrl);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   V3 品牌组件（2026-08-17 并入：对齐 output/v3-pages/design-system-v3.css 真源）
   仅增量补充 design-system.css 缺失的 Fairy 品牌组件，不覆盖已有类。
   ========================================================================== */

/* Fairy 品牌 Hero */
.brand-hero {
  background: var(--brand-gradient);
  color: #fff;
  padding: 48px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.brand-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: rgba(255,255,255,.10);
  border-radius: 50%;
}
.brand-hero::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.brand-hero h1 { font-size: 32px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; position: relative; z-index: 1; }
.brand-hero .en { font-family: Georgia, serif; font-style: italic; font-size: 20px; opacity: .85; margin-bottom: 4px; position: relative; z-index: 1; }
.brand-hero p { font-size: 14px; opacity: .85; position: relative; z-index: 1; }

/* Fairy 品牌按钮 */
.btn-fairy {
  background: var(--brand-gradient);
  color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(236,72,153,.3);
}
.btn-fairy:hover { box-shadow: 0 6px 16px rgba(236,72,153,.4); }

/* 步骤指示器 */
.step-indicator { display: flex; align-items: center; gap: 0; padding: 18px 24px; background: var(--c-white); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.step-item { display: flex; align-items: center; cursor: pointer; padding: 4px 0; transition: all .2s ease; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-primary-ghost);
  border: 2px solid var(--c-line);
  color: var(--c-t4);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-right: 10px;
  flex-shrink: 0; transition: all .25s ease;
}
.step-label { font-size: 13px; color: var(--c-t4); font-weight: 500; transition: color .2s ease; }
.step-item.active .step-num { background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary)); color: #fff; border-color: var(--c-primary); box-shadow: 0 3px 10px rgba(5,150,105,.35); }
.step-item.active .step-label { color: var(--c-primary); font-weight: 600; }
.step-item.completed .step-num { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.step-line { flex: 1; height: 3px; background: var(--c-primary-ghost); margin: 0 8px; border-radius: 2px; position: relative; overflow: hidden; }
.step-line.done { background: var(--c-primary); }

/* 大号头像 */
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }