:root { --bg:#fff; --side:#1a1a2e; --text:#24292f; --muted:#6b7280; --accent:#4f8ff7; --border:#e5e7eb; --code:#f3f4f6; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--text); display:flex; min-height:100vh; }
aside { width:250px; background:var(--side); color:#c8d8e8; flex-shrink:0; padding:24px 0; }
aside .logo { font-size:18px; font-weight:600; color:#fff; padding:0 22px 18px; letter-spacing:.4px; }
aside .logo span { color:var(--accent); }
aside .logo small { display:block; font-size:11px; color:#7090b0; font-weight:400; margin-top:2px; }
aside nav a { display:block; color:#9ab0c8; text-decoration:none; font-size:14px; padding:8px 22px; }
aside nav a:hover { color:#fff; background:#232342; }
aside nav a.active { color:#fff; background:#2a2a4e; border-left:3px solid var(--accent); padding-left:19px; }
aside .back { margin-top:26px; padding:14px 22px; border-top:1px solid #2a2a4e; }
aside .back a { color:#7090b0; font-size:13px; text-decoration:none; }
main { flex:1; max-width:860px; padding:44px 56px; }
h1 { font-size:28px; margin-bottom:8px; }
h2 { font-size:20px; margin:34px 0 12px; padding-top:8px; }
h3 { font-size:16px; margin:22px 0 8px; }
p, li { font-size:15px; line-height:1.65; color:#374151; }
p { margin-bottom:12px; }
ul, ol { margin:0 0 14px 24px; }
li { margin-bottom:6px; }
code { background:var(--code); padding:2px 6px; border-radius:4px; font-size:13px; font-family:ui-monospace,monospace; }
pre { background:#12121f; color:#9fe8b8; padding:16px 20px; border-radius:10px; font-size:13px; overflow-x:auto; margin:12px 0 18px; font-family:ui-monospace,monospace; line-height:1.5; }
.note { background:#eff6ff; border-left:3px solid var(--accent); padding:12px 16px; border-radius:0 8px 8px 0; font-size:14px; margin:14px 0; color:#1e3a5f; }
.warn { background:#fffbeb; border-left:3px solid #d97706; padding:12px 16px; border-radius:0 8px 8px 0; font-size:14px; margin:14px 0; color:#78350f; }
table { border-collapse:collapse; margin:12px 0 18px; font-size:14px; width:100%; }
th, td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
th { background:#f9fafb; font-weight:500; }
.muted { color:var(--muted); font-size:14px; }
@media (max-width:760px){ body{flex-direction:column} aside{width:100%} main{padding:28px 20px} }

.crumbs { font-size:13px; color:var(--muted); margin:0 0 14px; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.crumbs span { margin:0 6px; opacity:.6; }