:root{
  --bg:#ffffff; --fg:#111111; --muted:#666; --card:#f6f6f6; --line:#e6e6e6; --accent:#2563eb;
  --radius:14px; --max:980px;
}
:root[data-theme="dark"]{
  --bg:#0b0f19; --fg:#e7e9ee; --muted:#a0a6b3; --card:#121829; --line:#243046; --accent:#60a5fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--fg)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:20px}
.nav{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 86%, transparent)}
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .nav{background:rgba(255,255,255,0.92)}
  :root[data-theme="dark"] .nav{background:rgba(11,15,25,0.92)}
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;backdrop-filter:saturate(180%) blur(10px)}
.brand{font-weight:800;color:var(--fg)}
.links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line); background:var(--card); color:var(--fg); padding:8px 10px; border-radius:10px; cursor:pointer}
.btn:active{transform:translateY(1px)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.grid{display:grid; gap:14px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid3{grid-template-columns:1fr} }
@media (max-width:760px){ .grid2{grid-template-columns:1fr} .links{gap:10px} }
small,.muted{color:var(--muted)}
h1{margin:12px 0 6px;font-size:34px;letter-spacing:-0.02em}
h2{margin:0 0 10px;font-size:22px}
h3{margin:0 0 8px;font-size:18px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
input,textarea,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:12px}
.kv{display:flex;gap:8px;flex-wrap:wrap}
.footer{padding:24px 20px;border-top:1px solid var(--line)}
code{background:color-mix(in srgb, var(--card) 60%, transparent); padding:2px 6px;border-radius:8px}
pre{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;overflow:auto}