*{box-sizing:border-box}
:root{
  --bg:#f4f9ff; --card:#ffffff; --muted:#5b667a; --text:#0f172a;
  --accent:#2b84ff; --accent-soft:#e6f0ff; --border:#d6e4ff;
  --chip:#eef5ff; --chip-text:#2b5278; --mark-bg:#fff2a8
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.site-header{position:sticky;top:0;z-index:20;background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;font-size:20px;color:#0b2447}
.main-nav a{color:#1e3a8a;margin-right:12px;padding:6px 10px;border-radius:10px}
.main-nav a.active,.main-nav a:hover{background:var(--accent-soft)}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:10px 14px;border-radius:12px}
.btn:hover{opacity:.95;text-decoration:none}
.site-content{min-height:60vh}
.site-footer{border-top:1px solid var(--border);background:#fff;margin-top:24px}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px} .grid-cols{grid-template-columns:280px 1fr}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(30,64,175,.05)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{background:var(--chip);border:1px solid var(--border);color:var(--chip-text);padding:4px 8px;border-radius:999px;font-size:12px}
.kb-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px dashed var(--border)} .kb-item:last-child{border-bottom:none}
.kb-title{font-weight:700} .kb-desc{color:var(--muted);margin-top:4px}
.search{position:relative}
.search input{width:100%;padding:14px 40px 14px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text)}
.search .x{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#64748b}
.sidebar .topic{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;color:#1e293b}
.sidebar .topic.active,.sidebar .topic:hover{background:var(--accent-soft)}
.badge{background:var(--chip);padding:0 8px;border-radius:8px;border:1px solid var(--border);color:#1d4ed8;font-size:12px}
.kb-open{white-space:nowrap}
.section-list{display:flex;flex-direction:column;gap:8px}
.section-btn{background:var(--chip);border:1px solid var(--border);color:#1e293b;border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer}
.section-btn .badge{margin-left:6px} .section-btn.active{border-color:#93c5fd;background:#fff}
.qa{padding:14px 16px;border:1px solid var(--border);background:#fff;border-radius:14px;margin-bottom:12px}
.qa h3{margin:0 0 6px 0;font-size:18px}
.qa p{margin:0;color:#0f172a}
.header-row{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px}
.counter{color:#334155;font-size:14px} .small{font-size:12px}
mark{background:var(--mark-bg);padding:0 2px;border-radius:4px}