/* 雷电模拟器 帮助中心 · 第二版（浅色简洁知识库风）
   白/浅灰底 · 左侧分类侧边栏 · 科技蓝点缀 #2563eb · MiSans */
:root{
  --bg:#ffffff; --bg2:#f7f9fc; --bg3:#eef2f8;
  --line:#e2e7ef; --line2:#d3dae5;
  --fg:#1f2733; --fg2:#5b6675; --fg3:#9aa4b2;
  --acc:#2563eb; --acc2:#1d4ed8; --acc-dim:rgba(37,99,235,.08);
  --maxw:1180px; --shadow:0 1px 3px rgba(24,39,75,.06),0 4px 16px rgba(24,39,75,.05);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--bg2); color:var(--fg);
  font-family:MiSans,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.75; font-size:15.5px;
}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img,svg{max-width:100%;display:block;}
mark{background:#fde68a;color:#7c2d12;border-radius:2px;padding:0 2px;}

/* ===== 顶栏 ===== */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;color:var(--fg);}
.brand svg{width:28px;height:28px;flex:none;}
.brand b{font-size:17px;}
.brand b em{color:var(--acc);font-style:normal;}
.brand span{font-size:12px;color:var(--fg3);font-weight:400;padding-left:10px;margin-left:2px;border-left:1px solid var(--line2);}
.nav .links{margin-left:auto;display:flex;gap:4px;align-items:center;}
.nav .links a{font-size:13.5px;color:var(--fg2);padding:7px 13px;border-radius:8px;transition:all .15s;}
.nav .links a:hover{color:var(--acc);background:var(--acc-dim);}
.nav .links a.on{color:#fff;background:var(--acc);font-weight:600;}
.nav .links a.ghost{border:1px solid var(--line2);}
.nav .links a.ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent;}

/* ===== Hero（搜索区）===== */
.hero{background:linear-gradient(180deg,#eff4ff 0%,var(--bg2) 100%);border-bottom:1px solid var(--line);}
.hero .in{max-width:var(--maxw);margin:0 auto;padding:44px 24px 34px;}
.hero h1{font-size:28px;letter-spacing:.3px;margin-bottom:10px;color:#111827;}
.hero .lead{color:var(--fg2);font-size:14.5px;max-width:720px;}
.search{margin-top:22px;display:flex;max-width:660px;background:#fff;border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s;}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-dim);}
.search input{flex:1;background:transparent;border:0;outline:0;color:var(--fg);font-size:14.5px;padding:14px 16px;font-family:inherit;}
.search input::placeholder{color:var(--fg3);}
.search button{border:0;background:var(--acc);color:#fff;font-weight:600;font-size:14.5px;padding:0 28px;cursor:pointer;font-family:inherit;transition:background .15s;}
.search button:hover{background:var(--acc2);}
.hot{margin-top:15px;font-size:13px;color:var(--fg3);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;}
.hot a{color:var(--fg2);padding:3px 10px;background:#fff;border:1px solid var(--line);border-radius:999px;transition:all .15s;}
.hot a:hover{color:var(--acc);border-color:var(--acc);}

/* ===== 主体：侧边栏 + 列表 ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 24px 60px;display:grid;grid-template-columns:232px 1fr;gap:28px;align-items:start;}
.side{position:sticky;top:80px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);}
.side .side-t{font-size:12px;color:var(--fg3);font-weight:600;padding:6px 10px 8px;letter-spacing:.5px;}
.cats{display:flex;flex-direction:column;gap:2px;}
.cat{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--fg2);border-radius:9px;padding:9px 12px;cursor:pointer;transition:all .14s;user-select:none;}
.cat:hover{background:var(--bg3);color:var(--fg);}
.cat.on{background:var(--acc);color:#fff;font-weight:600;}
.cat.on .c-n{background:rgba(255,255,255,.25);color:#fff;}
.cat .c-n{font-size:11.5px;color:var(--fg3);background:var(--bg3);border-radius:999px;padding:1px 8px;min-width:20px;text-align:center;}

.main{min-width:0;}
.count{font-size:13px;color:var(--fg3);margin-bottom:14px;}
.list{display:flex;flex-direction:column;gap:12px;}
.item{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.item:hover{border-color:var(--acc);box-shadow:var(--shadow);transform:translateY(-1px);}
.item .q{font-size:15.5px;font-weight:600;color:#111827;margin-bottom:7px;line-height:1.5;}
.item .a{font-size:13.5px;color:var(--fg2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.item .m{margin-top:12px;font-size:12px;color:var(--fg3);display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.item .tag{color:var(--acc);background:var(--acc-dim);border-radius:5px;padding:2px 8px;font-size:11.5px;margin-right:4px;font-weight:500;}
.item .m .sp{opacity:.5;}
.empty{text-align:center;color:var(--fg3);padding:60px 0;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:14px;}

/* ===== 分页 ===== */
.pager{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;}
.pager button{min-width:38px;height:38px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--fg2);cursor:pointer;font-size:13.5px;font-family:inherit;transition:all .15s;}
.pager button:hover:not(:disabled){border-color:var(--acc);color:var(--acc);}
.pager button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;}
.pager button:disabled{opacity:.45;cursor:not-allowed;}
.pager .pg{color:var(--fg3);padding:0 4px;}
.pager .jump{font-size:13px;color:var(--fg3);margin-left:8px;display:flex;align-items:center;gap:6px;}
.pager .jump input{width:56px;height:36px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--fg);text-align:center;font-family:inherit;font-size:13.5px;}

/* ===== 页脚 ===== */
.foot{border-top:1px solid var(--line);background:#fff;}
.foot .in{max-width:var(--maxw);margin:0 auto;padding:30px 24px 44px;color:var(--fg3);font-size:12.5px;line-height:1.9;}
.foot .t{color:var(--fg);font-weight:700;font-size:14px;margin-bottom:8px;}
.foot a{color:var(--fg2);border-bottom:1px solid var(--line2);}
.foot a:hover{color:var(--acc);border-color:var(--acc);}
.foot .beian{margin-top:10px;color:var(--fg3);font-size:11.5px;}

/* ===== 响应式 ===== */
@media (max-width:880px){
  .wrap{grid-template-columns:1fr;gap:16px;}
  .side{position:static;}
  .cats{flex-direction:row;flex-wrap:wrap;}
  .cat{flex:0 0 auto;}
  .cat .c-n{display:none;}
}
@media (max-width:640px){
  .hero h1{font-size:23px;} .hero .in{padding:32px 16px 24px;}
  .nav .links a{padding:6px 9px;font-size:12.5px;}
  .brand span{display:none;}
  .wrap{padding:18px 14px 44px;}
}