/* ============================================================
   theme.css —— 全站统一设计令牌（唯一真源）
   ------------------------------------------------------------
   任何页面要颜色/字体/圆角/阴影，一律引这里，别再自己写一套。
   覆盖：C 端主站 + apps/ 下的二级应用（经络穴位 / 舌相 / 健康管理 / 文化）。

   引入方式（放在各页 <head> 最前面，在页面自己的 style 之前）：
     <link rel="stylesheet" href="/assets/theme.css">

   改色只改这里。改完所有页面自动跟随。
   ============================================================ */

:root{
  /* —— 底色与文字 —— */
  --bg:        #F5F1E8;   /* 页面底色（暖米） */
  --panel:     #FFFDF8;   /* 卡片底 */
  --panel-2:   #FBF8F0;   /* 次级底 */
  --ink:       #2E2A24;   /* 主文字 */
  --ink-2:     #6B6255;   /* 次要文字 */
  --muted:     #8A8175;   /* 弱化文字 */
  --faint:     #9A9086;   /* 最弱（页脚/说明） */
  --line:      #E8DFCE;   /* 描边 */
  --line-2:    #EFE6D2;   /* 更浅描边 */

  /* —— 品牌主色（艾草绿）—— */
  --brand:     #2A4A36;   /* 深绿：标题 / 主色 */
  --brand-2:   #3E6B4F;   /* 中绿：按钮 / 强调 */
  --brand-3:   #6F9B7E;   /* 浅绿：图标 / 次级 */
  --brand-bg:  #EAF1EC;   /* 绿色浅底 */

  /* —— 辅色（暖金）—— */
  --gold:      #B98A2F;   /* 金：标签 / 商业入口 */
  --gold-2:    #D8B45F;
  --gold-bg:   #FBF3E2;
  --gold-line: #E5D8BC;

  /* —— 状态色 —— */
  --ok:        #3E7A57;
  --ok-bg:     #EAF5EE;
  --warn:      #8A5E16;
  --warn-bg:   #FBF3E2;
  --warn-line: #ECD9B0;
  --danger:    #C4564B;
  --danger-bg: #FBECEB;

  /* —— 形状 —— */
  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 20px;
  --radius-pill: 99px;
  --shadow:    0 6px 22px rgba(42,74,54,.10);
  --shadow-lg: 0 12px 26px rgba(42,74,54,.14);

  /* —— 字体（全站统一，不要各自为政）—— */
  --font-sans: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Songti SC","STSong",serif;

  /* —— 版心 —— */
  --wrap:      1020px;
  --wrap-narrow: 900px;
}

/* ---------- 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}

/* 标题一律衬线，正文一律无衬线 —— 全站统一 */
h1,h2,h3,.serif{font-family:var(--font-serif);letter-spacing:.5px;}

/* ---------- 通用容器 ---------- */
.dx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px;}
.dx-wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 16px;}

.dx-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}

/* ---------- 统一顶栏（apps 二级应用用） ---------- */
.dx-top{
  position:sticky;top:0;z-index:40;
  background:rgba(245,241,232,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.dx-top .in{
  max-width:var(--wrap);margin:0 auto;padding:0 16px;
  height:58px;display:flex;align-items:center;gap:12px;
}
.dx-top .mk{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--gold));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:17px;font-weight:700;
}
.dx-top .tt{font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--brand);white-space:nowrap;}
.dx-top .tt small{display:block;font-family:var(--font-sans);font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0;line-height:1.2;}
.dx-top .sp{margin-left:auto;}
.dx-top .home{
  display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px;
  border-radius:var(--radius-pill);border:1px solid var(--line);
  background:var(--panel);color:var(--brand-2);font-size:13.5px;font-weight:500;
  transition:.15s;white-space:nowrap;
}
.dx-top .home:hover{background:var(--brand-bg);border-color:var(--brand-3);}

/* —— 顶栏一级导航（三页同一套：统一 2 字标签 + 统一激活态）——
   经络艾灸学堂 / 舌相学堂 / 个人IP页 / 象小蜜 都走这里，别再各写一套。 */
.dx-top .nav{
  display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.dx-top .nav::-webkit-scrollbar{display:none;}
.dx-top .nav button,.dx-top .nav a{
  flex-shrink:0;background:none;border:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font-sans);font-size:13.5px;line-height:1.45;
  color:var(--ink-2);padding:6px 12px;border-radius:var(--radius-pill);transition:.15s;
}
.dx-top .nav button:hover,.dx-top .nav a:hover{background:var(--brand-bg);color:var(--brand);}
.dx-top .nav button.on,.dx-top .nav a.on{background:var(--brand-2);color:#fff;font-weight:600;}

/* 顶栏次级按钮（如舌相页「免责声明」）—— 与「⌂ 首页」同高同形，色系区分 */
.dx-top .sub-btn{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;white-space:nowrap;
  border-radius:var(--radius-pill);border:1px solid var(--gold-line);background:var(--gold-bg);
  color:var(--warn);font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s;
}
.dx-top .sub-btn:hover{background:#F7EBD4;}

/* 窄屏：顶栏导航统一收起，改由各页底部 Tab 承担（三页口径一致） */
@media(max-width:768px){ .dx-top .nav{display:none!important;} }
@media(max-width:420px){ .dx-top .tt small{display:none;} }

/* ---------- 统一底部虚浮提示条（替代顶部常驻横条） ---------- */
.dx-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:center;pointer-events:none;
  padding:0 12px calc(10px + env(safe-area-inset-bottom));
}
.dx-notice .in{
  pointer-events:auto;max-width:var(--wrap);
  background:rgba(251,243,226,.96);
  border:1px solid var(--warn-line);
  border-radius:var(--radius-pill);
  color:var(--warn);
  font-size:12.2px;line-height:1.5;
  padding:7px 16px;
  box-shadow:0 4px 16px rgba(138,94,22,.12);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  text-align:center;
}
@media(max-width:640px){
  .dx-notice .in{font-size:11.6px;padding:6px 13px;border-radius:12px;}
}
/* 页面底部留出虚浮条的安全距离 */
.dx-has-notice{padding-bottom:64px;}
/* 带底部 Tab 栏的页面：虚浮条要让开 Tab */
.dx-notice.with-tabbar{bottom:calc(62px + env(safe-area-inset-bottom));}
@media(max-width:640px){ .dx-notice.with-tabbar{bottom:calc(58px + env(safe-area-inset-bottom));} }

/* ---------- 统一底部 Tab 栏（窄屏一级导航；经络 / 舌相 / 象小蜜共用） ---------- */
.dx-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(42,74,54,.07);
  padding-bottom:env(safe-area-inset-bottom);
}
.dx-tabbar .in{display:flex;}
.dx-tabbar .tab{
  flex:1;background:none;border:none;cursor:pointer;text-align:center;
  font-family:var(--font-sans);font-size:11.5px;line-height:1.4;
  color:var(--muted);padding:8px 0 7px;
}
.dx-tabbar .tab .ti{display:block;font-size:19px;line-height:1.15;margin-bottom:1px;}
.dx-tabbar .tab.on{color:var(--brand);font-weight:600;}
@media(max-width:768px){
  .dx-tabbar{display:block;}
  .dx-has-tab{padding-bottom:62px;}
}

/* ---------- 通用按钮 ---------- */
.dx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--brand-2);color:#fff;border:none;cursor:pointer;
  border-radius:var(--radius-sm);padding:10px 20px;font-size:14.5px;font-weight:500;
  transition:.15s;box-shadow:var(--shadow);
}
.dx-btn:hover{background:var(--brand);}
.dx-btn.ghost{background:var(--panel);color:var(--brand-2);border:1px solid var(--brand-3);box-shadow:none;}
.dx-btn.ghost:hover{background:var(--brand-bg);}

/* ---------- 通用徽标 / 标签 ---------- */
.dx-pill{
  display:inline-block;border-radius:var(--radius-pill);
  padding:5px 13px;font-size:13px;line-height:1.5;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-2);
  cursor:pointer;transition:.15s;
}
.dx-pill:hover{border-color:var(--brand-3);color:var(--ink);}
.dx-pill.on{background:var(--brand-2);border-color:var(--brand-2);color:#fff;}
.dx-tag{
  display:inline-block;background:var(--gold-bg);color:var(--warn);
  border:1px solid var(--gold-line);border-radius:8px;
  padding:3px 10px;font-size:12.5px;line-height:1.5;
}
.dx-tag.green{background:var(--brand-bg);color:var(--brand);border-color:#CFE0D6;}

/* ---------- 统一页脚 ---------- */
.dx-foot{
  text-align:center;color:var(--faint);font-size:12px;
  padding:26px 16px 34px;line-height:1.8;
}
.dx-foot a{color:var(--faint);text-decoration:underline;}

/* ---------- 关注与联系：四个码（hover / 点击弹大图） ---------- */
.qr-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;}
.qr-wrap .hd{font-size:15px;color:var(--brand);font-family:var(--font-serif);margin-bottom:14px;}
.qr-wrap .ft{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.7;}
.qrs{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:6px 0 4px;}
.qr{position:relative;text-align:center;cursor:pointer;}
.qr .box{
  width:74px;height:74px;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:.2s;
}
.qr .box img{width:100%;height:100%;object-fit:contain;}
.qr:hover .box,.qr.on .box{transform:translateY(-4px);border-color:var(--brand-3);box-shadow:var(--shadow-lg);}
.qr .lb2{font-size:12px;color:var(--ink-2);margin-top:7px;white-space:nowrap;}
.qr .pop{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.92);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:0 14px 40px rgba(42,74,54,.22);opacity:0;pointer-events:none;transition:.18s;
  width:190px;z-index:120;
}
.qr .pop img{width:100%;border-radius:8px;}
.qr .pop .t{font-size:12.5px;color:var(--brand);margin-top:6px;text-align:center;font-weight:600;}
.qr .pop .h{font-size:11.5px;color:var(--muted);text-align:center;margin-top:2px;}
.qr .pop::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;}
.qr:hover .pop,.qr.on .pop{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto;}
@media(max-width:640px){ .qr .box{width:64px;height:64px;} .qr .pop{width:168px;} }
/* 首屏下方无遮挡时，弹层改为往下弹（顶部区域用） */
.qrs.pop-down .qr .pop{bottom:auto;top:calc(100% + 10px);}
.qrs.pop-down .qr .pop::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff;}