:root {
    --primary: #6c5ce7;
    --primary-dark: #4f3fb8;
    --primary-light: #ede9fe;
    --bg: #fafbff;
    --panel: #fff;
    --border: #e5e7eb;
    --text: #1f2937;
    --muted: #6b7280;
    --code-bg: #f3f4f6;
    --code-text: #c0392b;
    --sidebar-bg: #ffffff;
    --sidebar-bg-2: #f8f9fc;
    --sidebar-text: #1f2937;
    --sidebar-muted: #6b7280;
    --sidebar-border: #e5e7eb;
    --sidebar-hover: #f4f2fb;
    --sidebar-active-bg: #ede9fe;
    --sidebar-active-text: #4c1d95;
    --sidebar-accent: #6c5ce7;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
html, body { overflow-x: hidden; max-width: 100%; }
.layout { min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-border); padding: 24px 0; overflow-y: auto; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 10; box-shadow: 1px 0 0 var(--sidebar-border); scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.sidebar-brand { padding: 0 20px 20px; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sidebar-brand img { width: 36px; height: 36px; border-radius: 8px; }
.sidebar-brand .title { font-weight: 700; color: #15131D; font-size: 16px; }
.sidebar-brand .sub { font-size: 12px; color: var(--sidebar-muted); margin-top: 2px; }
.sidebar-brand a { color: inherit; text-decoration: none; }
.toc-group { margin: 0 0 20px; }
.toc-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: #0f172a; padding: 16px 20px 10px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.toc-group-title::before { content: ""; width: 4px; height: 16px; background: var(--sidebar-accent); border-radius: 2px; flex: 0 0 auto; }
.toc-group ul { list-style: none; margin: 0; padding: 0; }
.toc-group li a { display: flex; align-items: center; gap: 10px; padding: 8px 20px 8px 24px; font-size: 14px; color: var(--sidebar-text); border-left: 3px solid transparent; transition: all 0.15s; }
.toc-group li a::before { content: "›"; color: #cbd5e1; font-size: 16px; font-weight: 700; line-height: 1; }
.toc-group li a:hover { background: var(--sidebar-hover); color: var(--sidebar-active-text); text-decoration: none; }
.toc-group li a:hover::before { color: var(--sidebar-accent); }
.toc-group li a.active { background: var(--sidebar-active-bg); border-left-color: var(--sidebar-accent); font-weight: 600; color: var(--sidebar-active-text); }
.toc-group li a.active::before { color: var(--sidebar-accent); content: "•"; }
.toc-group li.sub a { padding-left: 44px; font-size: 13px; color: var(--sidebar-muted); }
.toc-group li.sub a::before { content: "—"; color: #cbd5e1; font-size: 13px; }
.toc-group li.sub a:hover { color: var(--sidebar-active-text); background: var(--sidebar-hover); }
.btn-back { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 20px 16px; padding: 10px 14px; background: var(--sidebar-accent); border: 1px solid var(--sidebar-accent); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s; box-shadow: 0 1px 2px rgba(108, 92, 231, 0.2); }
.btn-back:hover { background: #5849c2; color: #fff; text-decoration: none; transform: translateX(-2px); box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); }
.btn-back svg { width: 16px; height: 16px; }
.btn-pdf { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 20px 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--sidebar-border); color: var(--sidebar-accent); border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.btn-pdf:hover { background: var(--sidebar-accent); color: #fff; text-decoration: none; border-color: var(--sidebar-accent); box-shadow: 0 4px 12px rgba(108, 92, 231, 0.25); }
.btn-pdf svg { width: 16px; height: 16px; }
.search-wrap { padding: 0 20px 20px; }
.search-wrap input { width: 100%; padding: 10px 12px; border: 1px solid var(--sidebar-border); background: #fff; border-radius: 8px; font-size: 14px; outline: none; color: var(--sidebar-text); transition: border-color .15s, box-shadow .15s; }
.search-wrap input::placeholder { color: var(--sidebar-muted); }
.search-wrap input:focus { border-color: var(--sidebar-accent); box-shadow: 0 0 0 3px rgba(108,92,231,0.15); }
.search-results { margin-top: 8px; max-height: 320px; overflow-y: auto; background: var(--panel); border-radius: 8px; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid var(--sidebar-border); }
.search-results.active { display: block; }
.search-results .result { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); text-decoration: none; }
.search-results .result:last-child { border-bottom: 0; }
.search-results .result:hover { background: var(--sidebar-hover); text-decoration: none; }
.search-results .result-title { font-weight: 600; color: var(--primary-dark); }
.search-results .result-snip { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sidebar-footer { padding: 16px 20px; font-size: 12px; color: var(--sidebar-muted); text-align: center; border-top: 1px solid var(--sidebar-border); margin-top: 12px; }
.sidebar-footer a { color: var(--sidebar-accent); }
.content { padding: 32px 40px; margin-left: 280px; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
.content > p, .content > ul, .content > ol, .content > blockquote, .content > h1, .content > h2, .content > h3, .content > table { max-width: 1100px; margin-left: auto; margin-right: auto; }
.content pre.code-block { max-width: 100%; }
.content table.md-tab { table-layout: fixed; }
.content h1 { font-size: 34px; line-height: 1.2; margin: 0 0 24px; color: var(--text); }
.content h2 { font-size: 26px; line-height: 1.3; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.content h3 { font-size: 19px; margin: 24px 0 12px; color: var(--text); }
.content p { margin: 0 0 14px; }
.content ul, .content ol { margin: 0 0 14px; padding-left: 28px; }
.content li { margin-bottom: 4px; }
.content code { background: var(--code-bg); color: var(--code-text); padding: 1px 5px; border-radius: 3px; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 13px; }
.content pre.code-block { background: #1e1e2e; color: #cdd6f4; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 0 0 16px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; line-height: 1.5; }
.content pre.code-block code { background: transparent; color: inherit; padding: 0; }
.content blockquote { margin: 0 0 16px; padding: 12px 16px; background: #fff8e1; border-left: 4px solid #f39c12; border-radius: 0 6px 6px 0; }
.content blockquote p { margin: 0; }
.content table.md-tab { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14px; }
.content table.md-tab th, .content table.md-tab td { border: 1px solid var(--border); padding: 8px 12px; }
.content table.md-tab th { background: var(--bg); font-weight: 600; }
.content table.md-tab tr:nth-child(2n) td { background: #fafafa; }
.content figure.fig { width: fit-content; max-width: 100%; margin: 16px auto; padding: 0; }
.content figure.fig img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.content figure.fig figcaption { text-align: center; margin-top: 6px; font-size: 13px; color: var(--muted); font-style: italic; }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.menu-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 20; background: var(--primary); color: #fff; border: 0; border-radius: 8px; width: 44px; height: 44px; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(108,92,231,0.3); }
@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
    .sidebar.open { transform: translateX(0); }
    .content { margin-left: 0; padding: 64px 18px 24px; }
    .content h1 { font-size: 26px; }
    .content h2 { font-size: 21px; }
}