/* 古籍参阅卡片：全部颜色跟随首页设计变量（--bg --card --fg --mut --line --acc --accsoft），浅色/深色自动协调。
 * 语言与工具页一致：圆角 10px、小节标题 3px 主色短竖线、淡底圆角块、焦点 2px 主色描边。 */
#classicsCard{
  --cl-mut:color-mix(in srgb,var(--mut) 70%,var(--fg));
  --cl-ink:color-mix(in srgb,var(--acc) 82%,var(--fg));
  --cl-serif:"Yzt Title Serif","Songti SC","STSong","Noto Serif SC","SimSun",serif;
}
#classicsCard .classics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#classicsCard h2{margin:0;font-size:18px}
#classicsCard button{width:auto;min-height:44px;box-shadow:none;transform:none}
#classicsCard button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#classicsCard #moreClassics{background:transparent;border:0;color:var(--cl-mut);padding:0 2px;font-size:14px}
#classicsCard #moreClassics:hover{color:var(--acc);filter:none}

/* 书目按钮：胶囊感的圆角块，底色取页面底色（与输入框同一层级），选中态主色描边 + 淡主色底 */
.classics-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#classicsCard .classics-tabs button{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 5px;min-height:58px;font-size:15px;font-weight:500;line-height:1.35;transition:border-color .15s,background-color .15s}
#classicsCard .classics-tabs button:hover{filter:none;border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
#classicsCard .classics-tabs button[aria-expanded=true]{border-color:var(--acc);background:color-mix(in srgb,var(--accsoft) 55%,var(--card))}
.classics-tabs small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--cl-mut)}

/* 展开区 */
#classicsBody{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;font-size:15px;line-height:1.9;color:var(--fg)}
#classicsBody h3{margin:0 0 12px;font-family:"Yzt Title Serif","Noto Serif SC","Songti SC","STSong",serif;font-size:17px;font-weight:700;letter-spacing:.06em;color:var(--fg)}
#classicsBody h4{display:flex;align-items:center;gap:8px;margin:16px 0 6px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--fg)}
#classicsBody h4::before{content:"";flex:none;width:3px;height:14px;border-radius:2px;background:var(--acc)}
#classicsBody p{margin:8px 0;white-space:pre-line}
#classicsBody details{margin:12px 0}
#classicsBody summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--fg);list-style:none}
#classicsBody summary::-webkit-details-marker{display:none}
#classicsBody summary::before{content:"";flex:none;width:6px;height:6px;margin:0 4px 0 1px;border-right:1.6px solid var(--acc);border-bottom:1.6px solid var(--acc);transform:rotate(-45deg);transition:transform .15s}
#classicsBody details[open]>summary::before{transform:rotate(45deg)}
#classicsBody summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
#classicsBody blockquote{margin:6px 0 12px;padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--bg2) 55%,transparent);color:var(--fg);font-family:var(--cl-serif);white-space:pre-line}
#classicsBody .ref-source{font-size:12px;color:var(--cl-mut);overflow-wrap:anywhere}
#classicsBody button{background:var(--card);color:var(--cl-ink);border:1px solid var(--line);border-radius:99px;padding:7px 16px;font-size:14px;font-weight:500}
#classicsBody button:hover{filter:none;border-color:var(--acc);color:var(--acc)}
.classics-foot{margin:12px 0 0;font-size:12px;color:var(--cl-mut)}

/* 称骨 */
#classicsBody .bone-weight{margin:0 0 16px;font-size:18px;font-weight:500;color:var(--fg)}
#classicsBody .bone-verse{margin:0 0 16px;font-family:var(--cl-serif);font-size:17px;line-height:2;color:var(--fg)}
#classicsBody .bone-explanation{margin:0;font-size:15px;line-height:1.95;color:var(--cl-mut)}

/* 典籍目录 */
#classicsCard .classics-directory{display:grid;gap:8px;margin:12px 0}
#classicsCard .classics-directory button{text-align:left;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;font-weight:500}
#classicsCard .classics-directory button:hover{filter:none;border-color:var(--acc);color:var(--fg)}

@media(max-width:480px){#classicsCard .classics-tabs button{font-size:15px}#classicsCard{padding:16px}}