/* ============================================================
   中药方剂背诵卡 —— 版式沿用 xbxxsy.cn 门户：
   宣纸米色底 + 宋体正文 + 楷体标题 + 朱红点缀
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --paper:#f7f5f0; --paper2:#fffdf9; --ink:#24211c; --ink2:#4a443b;
  --ink3:#6d6459;  --mute:#8a8177;   --line:#e0d8cc; --line2:#ece5da;
  --zhu:#8c3a24;   --zhu2:#a4482c;   --dan:#c9b28b;
  --kai:"Kaiti SC","KaiTi","STKaiti","Songti SC",serif;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);line-height:1.78;
  font-family:"Songti SC","SimSun","Noto Serif CJK SC",Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 14% -8%,rgba(201,178,139,.16),transparent 64%),
    radial-gradient(820px 500px at 88% 2%,rgba(140,58,36,.05),transparent 62%);
}
a{color:var(--zhu);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1180px,94vw);margin:0 auto}
h1,h2,h3{font-weight:700;line-height:1.4;margin:0}

/* ---------- 顶栏 ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:62px;padding:.4rem 0}
.brand{display:flex;align-items:center;gap:.66rem;color:var(--ink)}
.brand .mark{width:34px;height:34px;flex:none;border-radius:3px;display:grid;place-items:center;
  background:var(--zhu);color:#fdf7f2;font-family:var(--kai);font-size:19px;
  box-shadow:1px 1px 0 rgba(140,58,36,.28)}
.brand .nm{font-family:var(--kai);font-size:1.06rem;letter-spacing:.05em;line-height:1.25}
.brand small{display:block;font-family:inherit;font-weight:400;font-size:.7rem;
  color:var(--mute);letter-spacing:.1em}
nav.top-nav{display:flex;gap:1.15rem;font-size:.92rem;flex-wrap:wrap}
nav.top-nav a{color:var(--ink3)}

/* ---------- 首屏 ---------- */
.hero{padding:2.4rem 0 1.2rem;border-bottom:1px solid var(--line2)}
.hero h1{font-family:var(--kai);font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.04em}
.hero .lead{margin:.8rem 0 0;max-width:62ch;color:var(--ink2);font-size:.97rem}
.hero .lead b{color:var(--zhu)}
.stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1.4rem}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:"Times New Roman",Georgia,serif;font-size:1.6rem;color:var(--zhu);line-height:1.2}
.stats span{font-size:.8rem;color:var(--mute);letter-spacing:.04em}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:1.1rem 0 .9rem;position:sticky;top:62px;background:var(--paper);
  z-index:20;border-bottom:1px solid var(--line2)}
.tabs{display:flex;gap:.4rem}
.tab{font-family:inherit;font-size:.95rem;padding:.42rem 1.05rem;border:1px solid var(--line);
  background:var(--paper2);color:var(--ink2);border-radius:2px;cursor:pointer;transition:.15s}
.tab:hover{border-color:var(--dan)}
.tab.active{background:var(--zhu);border-color:var(--zhu);color:#fdf7f2}
.searchbox{position:relative;flex:1;min-width:220px;max-width:420px}
.searchbox input{width:100%;padding:.46rem 2rem .46rem .8rem;border:1px solid var(--line);
  background:var(--paper2);font-family:inherit;font-size:.92rem;color:var(--ink);border-radius:2px}
.searchbox input:focus{outline:none;border-color:var(--dan);
  box-shadow:0 0 0 2px rgba(201,178,139,.22)}
#qClear{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--mute);font-size:1.1rem;cursor:pointer;padding:.1rem .35rem}

/* ---------- 布局 ---------- */
.layout{display:grid;grid-template-columns:212px 1fr;gap:2rem;padding:1.4rem 0 2.4rem;
  align-items:start}
.side{position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto;padding-right:.3rem}
.side-h{font-family:var(--kai);font-size:.95rem;color:var(--ink2);padding-bottom:.4rem;
  border-bottom:1px solid var(--line);margin-bottom:.5rem;letter-spacing:.08em}
.side-h span{color:var(--mute);font-size:.78rem;font-family:inherit}
.chapters{display:flex;flex-direction:column;gap:.1rem}
.chapters button{text-align:left;font-family:inherit;font-size:.88rem;padding:.34rem .5rem;
  border:0;background:transparent;color:var(--ink2);cursor:pointer;border-radius:2px;
  display:flex;justify-content:space-between;gap:.5rem;line-height:1.5}
.chapters button:hover{background:var(--line2)}
.chapters button.on{background:rgba(140,58,36,.08);color:var(--zhu);font-weight:700}
.chapters button i{font-style:normal;color:var(--mute);font-size:.76rem;
  font-family:"Times New Roman",serif}
.crumbs{font-size:.84rem;color:var(--mute);margin-bottom:.7rem;letter-spacing:.03em}

/* ---------- 卡片 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.85rem}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:3px;padding:.8rem .9rem;
  cursor:pointer;transition:.16s;position:relative;overflow:hidden}
.card:hover{border-color:var(--dan);box-shadow:0 2px 10px rgba(140,58,36,.08);transform:translateY(-1px)}
.card h3{font-family:var(--kai);font-size:1.12rem;letter-spacing:.05em}
.card .cs{font-size:.73rem;color:var(--mute);margin-top:.1rem;letter-spacing:.02em}
.card .gx{font-size:.88rem;color:var(--ink2);margin-top:.45rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .gx.none{color:var(--mute);font-style:normal}
.card .tag{position:absolute;top:.55rem;right:.6rem;font-size:.66rem;color:var(--mute);
  border:1px solid var(--line);padding:0 .28rem;border-radius:2px;letter-spacing:.05em}
.more{text-align:center;padding:1.4rem 0}
.btn{font-family:inherit;font-size:.92rem;padding:.44rem 1.3rem;border:1px solid var(--zhu);
  background:var(--zhu);color:#fdf7f2;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--zhu2)}
.btn.ghost{background:transparent;color:var(--zhu)}
.empty{text-align:center;color:var(--mute);padding:3rem 0;font-size:.92rem}

/* ---------- 抽测 ---------- */
.quiz{background:var(--paper2);border:1px solid var(--line);border-radius:3px;padding:1.4rem 1.5rem}
.qhead{display:flex;justify-content:space-between;font-size:.84rem;color:var(--mute);
  border-bottom:1px solid var(--line2);padding-bottom:.6rem;margin-bottom:1.1rem}
.qstem{font-size:1.05rem;line-height:1.9}
.qstem b{font-family:var(--kai);font-size:1.5rem;color:var(--zhu);letter-spacing:.08em}
.qopts{display:grid;gap:.55rem;margin:1.1rem 0 .4rem}
.qopt{text-align:left;font-family:inherit;font-size:.94rem;padding:.6rem .8rem;
  border:1px solid var(--line);background:var(--paper);border-radius:2px;cursor:pointer;
  color:var(--ink2);transition:.12s;line-height:1.65}
.qopt:hover{border-color:var(--dan)}
.qopt.right{border-color:#5a7d52;background:#f0f5ee;color:#2f4a2a}
.qopt.wrong{border-color:#a4482c;background:#fbf0ec;color:#7a2f1c}
.qopt:disabled{cursor:default}
.qfeed{font-size:.9rem;color:var(--ink2);min-height:1.4rem;padding-top:.4rem}
.qfoot{display:flex;gap:.7rem;padding-top:.9rem}

/* ---------- 说明与页脚 ---------- */
.about{padding:2.2rem 0 1.4rem;border-top:1px solid var(--line2)}
.about h2{font-family:var(--kai);font-size:1.28rem;letter-spacing:.06em}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.cards3 div{background:var(--paper2);border:1px solid var(--line);border-radius:3px;padding:1rem 1.1rem}
.cards3 h3{font-family:var(--kai);font-size:1rem;color:var(--zhu)}
.cards3 p{margin:.45rem 0 0;font-size:.88rem;color:var(--ink2)}
.note{font-size:.8rem;color:var(--mute);margin-top:1.1rem;line-height:1.9}

.foot{border-top:1px solid var(--line);margin-top:1.6rem;padding:1.4rem 0 2rem;font-size:.84rem;
  color:var(--ink3)}
.foot p{margin:.25rem 0}
.foot .mute{color:var(--mute);font-size:.78rem}

/* ---------- 详情弹层 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.modal-mask{position:absolute;inset:0;background:rgba(36,33,28,.34);backdrop-filter:blur(2px)}
.modal-box{position:relative;background:var(--paper2);border:1px solid var(--line);
  border-radius:4px;width:min(720px,96vw);max-height:86vh;overflow:auto;padding:1.6rem 1.8rem 1.8rem;
  box-shadow:0 12px 40px rgba(36,33,28,.18)}
.modal-x{position:absolute;right:.7rem;top:.5rem;border:0;background:transparent;
  font-size:1.4rem;color:var(--mute);cursor:pointer;line-height:1}
#modalBody h2{font-family:var(--kai);font-size:1.5rem;letter-spacing:.06em}
#modalBody .sub{font-size:.8rem;color:var(--mute);margin:.2rem 0 1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line2)}
#modalBody dl{margin:0}
#modalBody dt{font-family:var(--kai);color:var(--zhu);font-size:.92rem;margin-top:1rem;
  letter-spacing:.08em}
#modalBody dd{margin:.25rem 0 0;font-size:.92rem;color:var(--ink2);line-height:1.85}
#modalBody .acts{margin-top:1.3rem;display:flex;gap:.6rem;flex-wrap:wrap}

@media (max-width:820px){
  .layout{grid-template-columns:1fr;gap:1rem}
  .side{position:static;max-height:none;display:flex;flex-direction:column}
  .chapters{flex-direction:row;flex-wrap:wrap}
  .chapters button{border:1px solid var(--line);background:var(--paper2)}
  .toolbar{top:0;position:static}
  .stats{gap:1.5rem}
}