:root{
  --bg:#f4f6f8;
  --panel:#fff;
  --text:#20252b;
  --muted:#68727d;
  --line:#dfe4ea;
  --soft:#eaf1f7
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
  line-height:1.7
}
header{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line)
}
.wrap,main{max-width:1280px;margin:auto}
.wrap{padding:15px 20px}
.title{display:flex;gap:14px;align-items:center}
h1{margin:0;font-size:25px}
.status{font-size:12px;color:var(--muted)}
.toolbar,.searchbar,.toc{display:flex;gap:8px;flex-wrap:wrap}
.toolbar,.searchbar{margin-top:10px}
button{
  border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:7px 11px;cursor:pointer;font-size:14px
}
button:hover{background:var(--soft)}
#search{
  flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:15px
}
.toc{margin:20px 0;padding:0 20px}
.toc button{background:#fff}
.category{margin:0 20px 30px;scroll-margin-top:125px}
.cathead{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px
}
.cathead h2{font-size:20px;margin:0}
.catbuttons{display:flex;gap:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)
}
.cardhead{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 15px;cursor:pointer
}
.cardtitle{font-weight:700}
.cardbody{padding:0 15px 15px;border-top:1px solid #eef1f4}
.cardbody h3,.cardbody h4{line-height:1.4;margin:14px 0 6px}
.cardbody p{margin:11px 0}
.cardbody ul,.cardbody ol{margin:10px 0 10px 22px;padding:0}
.cardbody li{margin:4px 0}
.cardbody blockquote{
  margin:12px 0;padding:8px 12px;border-left:3px solid var(--line);
  color:var(--muted);background:#fafbfc
}
.cardbody code{background:#f0f2f4;padding:1px 4px;border-radius:4px}
.cardbody pre{
  overflow:auto;background:#f0f2f4;padding:12px;border-radius:8px
}
.cardbody table{border-collapse:collapse;width:100%;margin:12px 0}
.cardbody th,.cardbody td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.cardbody a{color:inherit}
.collapsed .cardbody,.catcollapsed .cards{display:none}
.toggle{min-width:25px;text-align:center;color:var(--muted);font-size:20px}
.card:not(.collapsed) .card-toggle:before{content:"−"}
.card.collapsed .card-toggle:before{content:"＋"}
.category:not(.catcollapsed) .cat-toggle:before{content:"−"}
.category.catcollapsed .cat-toggle:before{content:"＋"}
mark.search-hit{background:#fff0a8}
.empty{display:none;text-align:center;color:var(--muted);padding:35px}
.top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%}
.meta-tags{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 0}
.tag{
  display:inline-block;padding:2px 7px;border-radius:999px;
  background:#f0f2f4;color:var(--muted);font-size:12px
}
.error{
  margin:20px;padding:18px;border:1px solid #e0b4b4;background:#fff8f8;border-radius:10px
}
@media(max-width:700px){
  .wrap,main{padding-left:12px;padding-right:12px}
  .category{margin-left:0;margin-right:0}
  .toc{padding:0}
  .cards{grid-template-columns:1fr}
}
@media print{
  header,.toc,.top,.catbuttons,.status{display:none!important}
  main{max-width:none}
  .cards{display:block}
  .card{box-shadow:none;margin-bottom:10px;break-inside:avoid}
  .cardbody,.catcollapsed .cards{display:block!important}
}