/* ============================================================
   MedWiki-Rheum 组件层 medwiki.css
   依赖 themes.css 的token。全部组件只消费token，不写死颜色。
   排版规范：CJK行高1.75；flex/grid+gap；移动端优先适配。
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
[id]{scroll-margin-top:76px;}
::selection{background:var(--accent-bright); color:var(--accent-deep);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  font-family:-apple-system,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.75; font-size:15px;
}

/* ---------- 三色斜纹带（品牌母题） ---------- */
.band{
  max-width:1200px; margin:0 auto;
  height:14px;
  background:repeating-linear-gradient(135deg,
    var(--stripe-1) 0 16px, transparent 16px 25px,
    var(--stripe-2) 25px 41px, transparent 41px 50px,
    var(--stripe-3) 50px 66px, transparent 66px 75px);
}
.band.thin{height:7px; opacity:.9;}
.band.fine{
  height:7px;
  background:repeating-linear-gradient(135deg,
    var(--stripe-1) 0 8px, transparent 8px 13px,
    var(--stripe-2) 13px 21px, transparent 21px 26px,
    var(--stripe-3) 26px 34px, transparent 34px 39px);
}

/* ---------- 吸顶导航 ---------- */
.mnav{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(135deg, var(--nav-a) 0%, var(--nav-b) 72%);
  border-bottom:4px solid var(--nav-edge);
  box-shadow:0 2px 10px rgba(var(--shadow),.28);
  font-size:13.5px;
}
.mnav-in{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  width:100%; max-width:1200px; margin:0 auto; padding:9px 20px;
}
.mnav::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    transparent 0 26px, rgba(var(--hl),.18) 26px 34px,
    transparent 34px 60px, rgba(255,255,255,.10) 60px 68px);
}
.mnav a{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; font-weight:700; border-radius:999px; padding:4px 14px;
  white-space:nowrap;
}
.mnav a.home{background:var(--home-bg); color:var(--home-ink); box-shadow:0 2px 6px rgba(0,0,0,.18);}
.mnav a.mlink{color:var(--nav-ink); border:1.5px solid var(--nav-pill-border);}
.mnav a.mlink:hover{border-color:var(--nav-brand); color:var(--nav-brand);}
.mnav .brand{margin-left:auto; position:relative; z-index:1; color:var(--nav-brand); font-weight:800; letter-spacing:.14em; font-size:12px;}

/* ---------- Hero（四环素封面 × KD文头融合） ---------- */
.mhero{
  position:relative; overflow:hidden; color:var(--hero-ink);
  background:linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 58%, var(--hero-c) 100%);
  padding:24px 40px 20px;
}
.mhero::before{
  content:''; position:absolute; right:-34px; top:-34px; width:280px; height:280px;
  background:repeating-linear-gradient(45deg, transparent 0 15px, rgba(255,255,255,.22) 15px 21px);
  pointer-events:none;
}
.mhero::after{
  content:''; position:absolute; left:-26px; bottom:-52px; width:230px; height:230px;
  background:repeating-linear-gradient(45deg, transparent 0 17px, rgba(var(--hl),.30) 17px 24px);
  pointer-events:none;
}
.mhero .inner{max-width:1200px; margin:0 auto; position:relative; z-index:1;}
.mhero .kicker{
  display:inline-block; font-size:12.5px; letter-spacing:.4em; font-weight:600;
  color:var(--kicker-ink); border:1px solid var(--kicker-border);
  padding:4px 14px 3px; margin-bottom:10px; border-radius:2px;
}
.mhero h1{font-size:30px; line-height:1.35; font-weight:800; letter-spacing:.01em;}
.mhero h1 .en{display:block; font-size:15px; font-weight:600; color:var(--hero-ink-2); margin-top:6px; letter-spacing:.08em;}
.mhero .lede{font-size:14.5px; color:var(--hero-ink-2); margin-top:6px; max-width:62em; opacity:.92;}





/* ---------- Hero 双栏（左标题 / 右Skills面板） ---------- */
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:24px; align-items:center;}
.hpanel{
  position:relative; z-index:1;
  background:var(--pill-bg); border:1px solid var(--pill-border); border-radius:14px;
  padding:10px 10px 6px;
}
.hpanel .ph{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:800; color:var(--pill-ink);
  padding:0 6px 7px; border-bottom:1px dashed var(--pill-border); margin-bottom:5px;
}
.hpanel .ph b{color:var(--pill-label); letter-spacing:.06em;}
.hpanel .ph .cnt{font-weight:600; opacity:.85;}
.hpanel .ph a{margin-left:auto; font-size:11px; font-weight:700; color:var(--pill-label); text-decoration:none; border-bottom:1px dotted var(--pill-label);}
.hpanel .rows{display:grid; grid-template-columns:1fr 1fr; gap:5px 9px;}
.hpanel a.row{
  position:relative; min-width:0;
  display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:8px;
  text-decoration:none; color:var(--pill-ink);
  box-shadow:inset 3px 0 0 rgba(255,255,255,0);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hpanel a.row:hover{background:var(--wash); box-shadow:inset 3px 0 0 var(--accent-bright); transform:translateX(2px);}
.hpanel a.row .mono{
  flex:none; width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--wash); color:var(--accent-bright); font-size:10px; font-weight:800;
  transition:background .18s ease, color .18s ease;
}
.hpanel a.row:hover .mono{background:var(--accent-bright); color:#fff;}
.hpanel a.row .bd{flex:1; min-width:0; display:flex; flex-direction:column;}
.hpanel a.row .nm{font-weight:700; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hpanel a.row .sub{font-size:9.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hpanel a.row .sub .score{color:var(--accent-bright); font-weight:800; opacity:1;}
.hpanel a.row.rec{background:var(--wash); box-shadow:inset 3px 0 0 var(--accent-bright);}
.hpanel a.row.rec:hover{transform:translateX(2px);}
.hpanel a.row.rec .mono{background:var(--accent-bright); color:var(--accent-deep);}
.hpanel .chip-rec{flex:none; font-size:8.5px; font-weight:800; color:var(--accent-deep); background:var(--accent-bright); border-radius:3px; padding:0 4px; line-height:1.5; margin-left:4px;}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:24px;}
}

/* ---------- 站内搜索（hero） ---------- */
.searchbox{position:relative; max-width:560px; margin-top:12px;}
.searchbox input{
  width:100%; padding:10px 14px; font-size:14px; font-family:inherit;
  color:var(--ink); background:#fff; border:2px solid transparent; border-radius:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.20); outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.searchbox input::placeholder{color:#9AA7B4;}
.searchbox input:focus{border-color:var(--accent-bright); box-shadow:0 8px 26px rgba(0,0,0,.26);}
.s-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:80;
  background:#fff; border:1px solid var(--border); border-radius:11px; overflow:hidden;
  box-shadow:0 16px 38px rgba(0,0,0,.18); max-height:330px; overflow-y:auto;
}
.s-results .sr{display:flex; align-items:center; gap:10px; padding:8px 13px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); transition:background .12s;}
.s-results .sr:last-child{border-bottom:none;}
.s-results .sr:hover, .s-results .sr.sel{background:var(--accent-soft);}
.s-results .sr .t{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.s-results .sr .cat{margin-left:auto; flex:none; font-size:10px; color:var(--ink-faint);}
.s-results .none{padding:11px 13px; font-size:12px; color:var(--ink-faint);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.chip{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700;
  color:#FFFFFF; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px; padding:5px 14px; text-decoration:none;
  transition:border-color .15s, color .15s, background .15s, transform .15s;
}
.chip:hover{border-color:var(--accent-bright); color:var(--accent-bright); background:rgba(255,255,255,.24); transform:translateY(-1px);}

/* ---------- 区块与章节标题 ---------- */
.msection{max-width:1200px; margin:0 auto; padding:40px 20px 10px;}
.msec-title{
  font-size:21px; font-weight:800; color:var(--accent-ink);
  margin-bottom:20px; line-height:1.4;
}
.msec-title::before{content:'/// '; color:var(--mark); letter-spacing:.06em;}
.msec-title::after{
  content:''; display:block; width:128px; height:4px; margin-top:8px; border-radius:2px;
  background:linear-gradient(90deg, var(--mark) 0 44px, var(--accent) 44px 128px);
}
.msec-title .sub{font-size:13px; font-weight:600; color:var(--ink-faint); margin-left:10px; letter-spacing:.05em;}

/* ---------- 覆盖卡（顶条白卡） ---------- */
.cov-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.cov{
  position:relative; overflow:hidden; display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 16px 13px; box-shadow:0 2px 10px rgba(var(--shadow),.07);
  transition:transform .18s, box-shadow .18s;
}
.cov:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(var(--shadow),.14);}
.cov::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent) 0 34%, var(--accent-bright) 34% 67%, var(--stripe-2) 67%);
}
.cov .name{font-weight:800; font-size:15px; color:var(--accent-ink);}
.cov .cs{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.cov .bar{height:6px; background:var(--bg); border-radius:3px; margin-top:9px; overflow:hidden;}
.cov .bar i{display:block; height:100%; border-radius:3px;}
.cov .pct{font-size:13px; font-weight:800; margin-top:5px;}

/* ---------- 快速入口卡网格 ---------- */
.cat-label{
  font-size:14.5px; font-weight:800; color:var(--accent);
  margin:22px 0 10px; display:flex; align-items:center; gap:8px;
}
.cat-label::before{content:''; width:8px; height:8px; background:var(--mark); transform:rotate(45deg); flex:none;}
.cat-label .cnt{font-size:12px; color:var(--ink-faint); font-weight:600;}
.qa-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px;}
.qa{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:11px 13px; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.qa:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 5px 14px rgba(var(--shadow),.13);}
.qa .name{font-weight:700; font-size:13.5px; line-height:1.5;}
.qa .desc{font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:2px;}
/* 药物分类色（语义税码，随内容不随主题） */
.qa.c-bio {border-top:4px solid var(--cat-bio); background:var(--cat-bio-bg);}
.qa.c-sml {border-top:4px solid var(--cat-sml); background:var(--cat-sml-bg);}
.qa.c-dmard{border-top:4px solid var(--cat-dmard); background:var(--cat-dmard-bg);}
.qa.c-ster{border-top:4px solid var(--cat-ster); background:var(--cat-ster-bg);}
.qa.c-nsaid{border-top:4px solid var(--cat-nsaid); background:var(--cat-nsaid-bg);}
.legend .sw i.s-bio{background:var(--cat-bio);}
.legend .sw i.s-sml{background:var(--cat-sml);}
.legend .sw i.s-dmard{background:var(--cat-dmard);}
.legend .sw i.s-ster{background:var(--cat-ster);}
.legend .sw i.s-nsaid{background:var(--cat-nsaid);}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:12px; color:var(--ink-soft);}
.legend .sw{display:inline-flex; align-items:center; gap:5px;}
.legend .sw i{width:16px; height:4px; border-radius:2px; display:inline-block;}

/* ---------- 特色深度卡（首页精选） ---------- */
.feature{
  display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 4px 18px rgba(var(--shadow),.10); margin-top:4px;
}
.feature::before{
  content:''; position:absolute; top:0; left:0; right:0; height:7px;
  background:repeating-linear-gradient(135deg,
    var(--stripe-1) 0 8px, transparent 8px 13px,
    var(--stripe-2) 13px 21px, transparent 21px 26px,
    var(--stripe-3) 26px 34px, transparent 34px 39px);
}
@media (prefers-reduced-motion: no-preference){
  .feature::before{animation:stripeFlow 5s linear infinite;}
}
@keyframes stripeFlow{to{background-position:55px 0;}}
.feature .fbody{display:flex; gap:18px; padding:18px 20px 16px; align-items:flex-start; flex-wrap:wrap;}
.feature .fmain{flex:1 1 340px;}
.feature .ftag{
  display:inline-block; font-size:11px; letter-spacing:.22em; font-weight:800;
  color:var(--accent-deep); background:var(--accent-soft); border-radius:3px; padding:2px 9px; margin-bottom:8px;
}
.feature .ftitle{font-size:17.5px; font-weight:800; color:var(--accent-ink); line-height:1.55;}
.feature .fdesc{font-size:13.5px; color:var(--ink-soft); margin-top:7px; line-height:1.7;}
.feature .fmeta{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; font-size:11.5px; color:var(--ink-faint);}
.feature .fmeta span{border:1px solid var(--border); border-radius:999px; padding:2px 10px;}
.feature .go{
  flex:none; align-self:center; font-weight:800; font-size:13.5px; text-decoration:none;
  color:var(--go-ink); background:linear-gradient(135deg, var(--nav-a), var(--nav-b));
  border-bottom:3px solid var(--nav-edge); border-radius:6px; padding:9px 18px;
  transition:transform .18s ease, filter .18s ease;
}
.feature .go:hover{filter:brightness(1.12);}
.feature:hover .go{transform:translateX(4px);}
.feature .ftitle{transition:color .18s ease;}
.feature:hover .ftitle{color:var(--accent-deep);}
.feature{transition:transform .2s ease, box-shadow .2s ease;}
.feature:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(var(--shadow),.18);}
.feature .ftag{transition:background .18s ease, color .18s ease;}
.feature:hover .ftag{background:var(--accent-bright); color:var(--accent-deep);}
@media (prefers-reduced-motion: no-preference){
  .feature:hover::before{animation-duration:1.8s;}
}

/* ---------- Skills 展示卡 ---------- */
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;}
.skill{
  position:relative; overflow:hidden; display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:18px 16px 13px; box-shadow:0 2px 10px rgba(var(--shadow),.07);
  transition:transform .18s, box-shadow .18s;
}
.skill:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(var(--shadow),.14);}
.skill::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(135deg,
    var(--stripe-1) 0 7px, transparent 7px 11px,
    var(--stripe-2) 11px 18px, transparent 18px 23px,
    var(--stripe-3) 23px 30px, transparent 30px 35px);
}
.skill .nm{font-weight:800; font-size:15px; color:var(--accent-ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.skill .nm .tag{font-size:11px; font-weight:700; color:var(--accent-deep); background:var(--accent-soft); border-radius:3px; padding:1px 7px;}
.skill .nm .pay{font-size:10.5px; font-weight:800; color:var(--yellow); background:var(--yellow-bg); border-radius:3px; padding:1px 7px; border:1px solid var(--yellow);}
.skill .ds{font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin-top:7px;}
.skill .go{display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--link); border-bottom:1px dotted var(--accent);}

/* ---------- 时间线 ---------- */
.timeline{position:relative; padding-left:26px;}
.timeline::before{content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--accent-soft);}
.tl-item{
  position:relative; margin-bottom:13px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 1px 5px rgba(var(--shadow),.05);
}
.tl-item::before{
  content:''; position:absolute; left:-24px; top:16px; width:10px; height:10px; border-radius:50%;
  background:var(--mark); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--accent-soft);
}
.tl-date{display:inline-block; font-size:11.5px; font-weight:800; color:var(--accent-deep); background:var(--accent-soft); border-radius:3px; padding:1px 8px; margin-bottom:6px;}
.tl-text{font-size:13.5px; line-height:1.75;}
.tl-text + .tl-text{margin-top:6px;}
.tl-text a{color:var(--link); text-decoration:none; border-bottom:1px dotted var(--accent);}
.tl-text b{color:var(--accent-ink);}

/* ---------- 统计卡 ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px;}
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:15px 10px 12px; text-align:center; box-shadow:0 2px 8px rgba(var(--shadow),.06);
  transition:transform .18s, box-shadow .18s;
}
.stat:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(var(--shadow),.12);}
.stat .num{
  font-size:26px; font-weight:800; color:var(--accent-deep); line-height:1.2;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  background:linear-gradient(0deg, var(--accent-bright), var(--accent-bright)) left bottom / 100% 3px no-repeat;
  padding-bottom:4px;
}
.stat .lab{font-size:12px; color:var(--ink-soft); margin-top:6px;}

/* ---------- 免责声明 ---------- */
.disc{
  background:var(--surface-2,#EAF1F8); border:1px solid var(--border); border-radius:12px;
  padding:16px 20px; font-size:13.5px; color:var(--ink); line-height:1.95;
}
.disc b{color:var(--accent-ink); letter-spacing:.14em; margin-right:10px; font-weight:800;}

/* ---------- 页脚 ---------- */
.mfoot{margin-top:44px;}
.mfoot .inner{
  max-width:1200px; margin:0 auto; padding:20px; text-align:center;
  font-size:12.5px; color:var(--ink-soft); line-height:1.9;
}
.mfoot .flinks{
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  margin:4px 0 14px; font-size:12.5px;
}
.mfoot .flinks a{color:var(--link); text-decoration:none; border-bottom:1px dotted var(--accent); font-weight:600;}
.mfoot .flinks a:hover{color:var(--accent-deep); border-bottom-style:solid;}
.mfoot .word{
  display:inline-block; font-size:13.5px; font-weight:800; letter-spacing:.28em;
  color:var(--word-ink); background:linear-gradient(135deg, var(--nav-a), var(--nav-b));
  border-bottom:3px solid var(--nav-edge); border-radius:4px; padding:7px 22px 6px; margin-bottom:12px;
}

/* ---------- 主题切换器 ---------- */
.theme-dots{
  position:fixed; right:14px; bottom:14px; z-index:1200;
  display:flex; align-items:center; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:4px; box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.theme-dots .lbl{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink-faint); padding:0 6px 0 9px;}
.theme-dots button{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid transparent; background:transparent; border-radius:999px;
  padding:4px 11px; font-size:11.5px; font-weight:700; color:var(--ink-soft);
  cursor:pointer; font-family:inherit; line-height:1.4;
}
.theme-dots button:hover{border-color:var(--border); color:var(--ink);}
.theme-dots button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.theme-dots .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.theme-dots .dot.glm{background:linear-gradient(135deg,#1B4F8A 50%,#E8A33D 50%);}
.theme-dots .dot.honey{background:linear-gradient(135deg,#FFA69E 50%,#F2C94C 50%);}
.theme-dots .dot.teal{background:linear-gradient(135deg,#20A39E 50%,#8ED0CD 50%);}

/* ---------- 入场动效（尊重 reduced-motion） ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
  .rv.on{opacity:1; transform:none;}
}

/* ---------- 打印 ---------- */
@media print{
  .mnav,.theme-dots{display:none!important;}
  .mhero{background:var(--hero-a)!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .qa:hover,.cov:hover,.stat:hover{transform:none; box-shadow:none;}
}

/* ---------- 移动端 ---------- */
@media (max-width:680px){
  body{font-size:14px;}
  .mhero{padding:34px 22px 30px;}
  .mhero h1{font-size:23px;}
  .msection{padding:26px 16px 6px;}
  .qa-grid{grid-template-columns:1fr 1fr;}
  .cov-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr 1fr;}
  .feature .go{align-self:flex-start;}
  .mnav-in{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .mnav-in::-webkit-scrollbar{display:none;}
  .mnav .brand{display:none;}
  .mhero::before{width:170px; height:170px;}
  .hpanel{padding:10px 10px 6px;}
  .mhero::after{width:140px; height:140px;}
}