:root{
  --bg:#0a0a0f; --bg2:#111118; --card:#16161f; --card2:#1c1c27;
  --fg:#e8e8ef; --fg2:#a0a0b4; --fg3:#6e6e85;
  --pri:#8b7cf6; --pri2:#c86dd7; --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --bd:#26263a; --bd2:#33334a; --code:#0d0d14;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --rad:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 顶栏 ── */
.top{position:sticky;top:0;z-index:50;height:58px;display:flex;align-items:center;gap:16px;
  padding:0 22px;background:rgba(10,10,15,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.top .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--fg)}
.top .logo .dot{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--pri),var(--pri2));
  display:grid;place-items:center;font-size:12px;color:#fff}
.top .ver{font:11px/1 var(--mono);color:var(--fg3);border:1px solid var(--bd2);padding:3px 7px;border-radius:20px}
.top .sp{flex:1}
.top .live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg2)}
.top .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.top a.toplink{font-size:13px;color:var(--fg2)}

/* ── 布局 ── */
.wrap{display:grid;grid-template-columns:236px 1fr;max-width:1180px;margin:0 auto;gap:0}
.side{border-right:1px solid var(--bd);padding:26px 0 60px;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto}
.side h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin:0 0 10px;padding:0 22px}
.side .grp{margin-bottom:24px}
.side a{display:block;padding:6px 22px;font-size:13.5px;color:var(--fg2);border-left:2px solid transparent}
.side a:hover{color:var(--fg);background:var(--bg2);text-decoration:none}
.side a.on{color:var(--pri);border-left-color:var(--pri);background:linear-gradient(90deg,rgba(139,124,246,.1),transparent)}
.main{padding:36px 40px 100px;min-width:0}

/* ── 排版 ── */
h1{font-size:30px;line-height:1.3;margin:0 0 10px;letter-spacing:-.02em}
h2{font-size:20px;margin:44px 0 14px;padding-top:14px;border-top:1px solid var(--bd);letter-spacing:-.01em}
h2:first-of-type{border-top:none;padding-top:0;margin-top:26px}
h3{font-size:16px;margin:26px 0 10px;color:var(--fg)}
p{margin:12px 0;color:var(--fg2)}
ul,ol{margin:12px 0;padding-left:22px;color:var(--fg2)}
li{margin:6px 0}
code{font-family:var(--mono);font-size:.88em;background:var(--code);border:1px solid var(--bd);
  padding:1.5px 6px;border-radius:5px;color:#c9c9f5}
pre{background:var(--code);border:1px solid var(--bd);border-radius:var(--rad);padding:15px 17px;
  overflow-x:auto;margin:14px 0;position:relative}
pre code{background:none;border:none;padding:0;color:#d6d6ef;font-size:13px;line-height:1.65}
.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.tbl th,.tbl td{border:1px solid var(--bd);padding:9px 12px;text-align:left;vertical-align:top}
.tbl th{background:var(--card2);color:var(--fg);font-weight:600;white-space:nowrap}
.tbl td{color:var(--fg2)}
.tbl td code{white-space:nowrap}
.badge{display:inline-block;font:10.5px/1 var(--mono);padding:4px 8px;border-radius:5px;font-weight:600;
  letter-spacing:.03em;vertical-align:middle}
.b-get{background:rgba(74,222,128,.13);color:var(--ok);border:1px solid rgba(74,222,128,.3)}
.b-post{background:rgba(139,124,246,.14);color:var(--pri);border:1px solid rgba(139,124,246,.35)}
.b-warn{background:rgba(251,191,36,.13);color:var(--warn);border:1px solid rgba(251,191,36,.3)}
.b-err{background:rgba(248,113,113,.13);color:var(--err);border:1px solid rgba(248,113,113,.3)}
.note{border-left:3px solid var(--pri);background:rgba(139,124,246,.06);padding:13px 17px;
  border-radius:0 var(--rad) var(--rad) 0;margin:18px 0}
.note.warn{border-left-color:var(--warn);background:rgba(251,191,36,.06)}
.note.err{border-left-color:var(--err);background:rgba(248,113,113,.06)}
.note.ok{border-left-color:var(--ok);background:rgba(74,222,128,.06)}
.note p{margin:6px 0;color:var(--fg2)}
.note strong{color:var(--fg)}
.lead{font-size:16px;color:var(--fg2);margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px;margin:20px 0}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rad);padding:16px 18px}
.card h5{margin:0 0 7px;font-size:14.5px;color:var(--fg)}
.card p{margin:0;font-size:13.5px}
.card .m{font:10.5px/1 var(--mono);color:var(--fg3);display:block;margin-bottom:9px}
.copy{position:absolute;top:8px;right:9px;background:var(--card2);border:1px solid var(--bd2);color:var(--fg3);
  font:11px var(--mono);padding:3px 9px;border-radius:5px;cursor:pointer;opacity:0;transition:.15s}
pre:hover .copy{opacity:1}
.copy:hover{color:var(--pri);border-color:var(--pri)}
.foot{margin-top:60px;padding-top:22px;border-top:1px solid var(--bd);color:var(--fg3);font-size:12.5px}
.kbd{font:11px/1 var(--mono);background:var(--card2);border:1px solid var(--bd2);border-bottom-width:2px;
  padding:2px 6px;border-radius:4px;color:var(--fg2)}
@media(max-width:860px){
  .wrap{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--bd);
    display:flex;gap:6px;overflow-x:auto;padding:12px 14px}
  .side .grp{margin:0;display:flex;gap:4px}
  .side h4{display:none}
  .side a{border-left:none;border-radius:6px;white-space:nowrap;padding:6px 12px}
  .side a.on{border-left:none}
  .main{padding:26px 20px 70px}
  h1{font-size:25px}
}