* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       font-size: 14px; color: #172b4d; background: #fff; display: flex; height: 100vh; overflow: hidden; }
/* Sidebar */
#sidebar { width: 280px; min-width: 220px; background: #f4f5f7; border-right: 1px solid #dfe1e6;
            overflow-y: auto; padding: 16px 0; flex-shrink: 0; }
#sidebar h1 { font-size: 13px; font-weight: 600; color: #6b778c; padding: 0 16px 8px;
               text-transform: uppercase; letter-spacing: .05em; }
#sidebar input { width: calc(100% - 24px); margin: 0 12px 12px; padding: 6px 10px;
                  border: 1px solid #dfe1e6; border-radius: 4px; font-size: 13px; }
.nav-tree ul { list-style: none; }
.nav-tree li { position: relative; }
.nav-tree a { display: block; padding: 4px 16px; color: #172b4d; text-decoration: none;
               font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tree a:hover { background: #e4e5e7; color: #0052cc; }
.nav-tree a.active { background: #dae8fc; color: #0052cc; font-weight: 600; }
.nav-tree .children { padding-left: 16px; display: none; }
.nav-tree .children.open { display: block; }
.nav-tree .toggle { cursor: pointer; padding: 4px 4px 4px 16px; color: #6b778c; font-size: 10px;
                     position: absolute; left: 0; top: 0; user-select: none; }
.nav-tree .nav-section { font-size: 11px; font-weight: 700; color: #6b778c; padding: 8px 16px 4px;
                           text-transform: uppercase; letter-spacing: .06em; list-style: none; }
.nav-tree .group-label { display: block; padding: 4px 16px; font-size: 13px; font-weight: 600;
                           color: #344563; cursor: pointer; }
/* Content */
#main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
#breadcrumb { padding: 10px 24px; font-size: 12px; color: #6b778c; border-bottom: 1px solid #f0f0f0;
               background: #fafbfc; flex-shrink: 0; }
#breadcrumb a { color: #0052cc; text-decoration: none; }
#content { padding: 24px 40px; max-width: 1100px; width: 100%; }
#content h1 { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: #172b4d; }
#content h2 { font-size: 20px; font-weight: 600; margin: 24px 0 12px; }
#content h3 { font-size: 17px; font-weight: 600; margin: 20px 0 10px; }
#content h4, #content h5, #content h6 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
#content p { margin-bottom: 12px; line-height: 1.7; }
#content ul, #content ol { margin: 0 0 12px 24px; line-height: 1.7; }
#content li { margin-bottom: 4px; }
#content table { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 13px; }
#content th, #content td { border: 1px solid #dfe1e6; padding: 8px 12px; text-align: left; vertical-align: top; }
#content th { background: #f4f5f7; font-weight: 600; }
#content tr:nth-child(even) td { background: #fafbfc; }
#content pre { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px;
                overflow-x: auto; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
#content code { background: #f4f5f7; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
#content pre code { background: none; padding: 0; }
#content img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
#content a { color: #0052cc; text-decoration: none; }
#content a:hover { text-decoration: underline; }
#content details { margin: 8px 0; padding: 8px 12px; background: #f4f5f7; border-radius: 4px; }
#content summary { cursor: pointer; font-weight: 600; }
#content .task-list { list-style: none; margin-left: 0; }
#content .task-list li { display: flex; align-items: flex-start; gap: 8px; }
#content blockquote { border-left: 4px solid #dfe1e6; padding: 8px 16px; color: #6b778c; margin: 8px 0; }
mark { background: #fffae6; }