.docs-list-section{padding:var(--space-8)0;); } .docs-layout { display: flex; gap: var(--space-8); margin: 0 auto; padding: var(--space-8) 0; } .docs-menu-toggle { display: none; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; font-size: 1.25rem; line-height: 1; margin-right: var(--space-4); transition: background-color var(--transition-fast); } .docs-sidebar { flex: 0 0 250px; position: sticky; top: var(--space-8); align-self: flex-start; height: calc(100vh - var(--space-16)); overflow-y: auto; padding-right: var(--space-4); border-right: 1px solid var(--border-color); } .docs-sidebar h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-color); } .docs-sidebar nav ul { list-style: none; padding-left: 0; } .docs-sidebar nav ul ul { padding-left: var(--space-4); margin-top: var(--space-2); } .docs-sidebar nav li { margin-bottom: var(--space-2); } .docs-sidebar nav a { display: block; color: var(--text-secondary); text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); font-size: 0.875rem; } .docs-sidebar nav a:hover { color: var(--text-primary); background-color: var(--hover-bg); } .docs-sidebar nav li.active > a { color: var(--accent-primary); font-weight: 600; background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent); } .docs-content { flex: 1; min-width: 0; color: var(--text-secondary); line-height: 1.8; font-size: 1.125rem; } .docs-content-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid var(--border-color); } .docs-content-header h1 { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } .docs-app-icon { width: 60px; height: 60px; font-size: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); color: var(--accent-primary); border: 1px solid var(--border-color); } .docs-content h1, .docs-content h2, .docs-content h3, .docs-content h4 { color: var(--text-primary); text-wrap: balance; scroll-margin-top: var(--space-8); } .docs-content h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid var(--border-color); } .docs-content h2 { font-size: 1.875rem; font-weight: 700; margin: var(--space-12) 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color); } .docs-content h3 { font-size: 1.5rem; font-weight: 600; margin: var(--space-8) 0 var(--space-4); } .docs-content p { margin-bottom: var(--space-6); } .docs-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; opacity: 0; transition: opacity var(--transition-normal); } .docs-overlay.show { display: block; opacity: 1; } .detail-header { position: static; } @media (max-width: 992px) { .docs-menu-toggle { display: inline-flex}.docs-sidebar{position:fixed;top:0;left:0;height:100%;width:280px;background-color:var(--bg-secondary);z-index:101;transform:translateX(-100%);transition:transform var(--transition-normal);padding:var(--space-8)var(--space-6);border-right:1px solid var(--border-color)}.docs-sidebar.show{transform:translateX(0)}}@media(max-width:768px){.docs-layout{padding:var(--space-4)}.detail-header{position:sticky;left:0;right:0;top:0;z-index:1}}.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-6)}.doc-card{display:flex;flex-direction:column;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--space-6);text-decoration:none;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.doc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-primary)}.doc-card-icon{font-size:2rem;color:var(--accent-primary);margin-bottom:var(--space-4);width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:color-mix(in srgb,var(--accent-primary) 15%,transparent);transition:all var(--transition-normal)}.doc-card-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-3)}.doc-card-description{color:var(--text-secondary);font-size:.9rem;line-height:1.6;flex-grow:1;margin-bottom:var(--space-4)}.doc-card-footer{font-size:.875rem;font-weight:500;color:var(--accent-primary)}.docs-search-section{padding:var(--space-8)}.page-header{padding-bottom:0}.search-wrapper{position:relative;display:flex;align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-8)}.search-wrapper i{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:1.25rem;pointer-events:none}#docsSearchInput{width:100%;padding:var(--space-4)var(--space-4)var(--space-4)var(--space-12);font-size:1rem;background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-fast)}#docsSearchInput:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 25%,transparent)}.no-results-message{text-align:center;padding:var(--space-12)0;color:var(--text-muted);font-size:1.125rem}