html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: #FAFAFA; color: #4b5156; line-height: 1.6; }
.docs-layout { display: flex; padding-top: 85px; max-width: 1200px; margin: 0 auto; }
.docs-sidebar { width: 280px; padding: 2rem 1.5rem; border-right: 1px solid #e0e0e0; height: calc(100vh - 85px); position: sticky; top: 85px; overflow-y: auto; background-color: #f9f9f9; }
.docs-sidebar h2 { font-size: 1.1rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; color: #2c3e50; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
.docs-sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.docs-sidebar nav ul ul { padding-left: 15px; margin-top: 5px; }
.docs-sidebar nav li a { display: block; padding: 0.5rem 0; text-decoration: none; color: #4b5156; font-weight: 400; border-left: 3px solid transparent; padding-left: 10px; transition: all 0.2s ease-in-out; }
.docs-sidebar nav li a:hover { color: #eb796f; background-color: #f0f0f0; }
.docs-sidebar nav li a.active-section { color: #eb796f; font-weight: 600; border-left: 3px solid #eb796f; background-color: #ffebe9; }
.docs-content { flex-grow: 1; padding: 2rem 2.5rem; background-color: #ffffff; }
.docs-content section { margin-bottom: 3rem; }
.docs-content h1 { margin-top: 0; font-size: 2.2rem; color: #2c3e50; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.docs-content h2 { font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1.2rem; color: #2c3e50; padding-bottom: 0.3rem; border-bottom: 1px solid #e8e8e8; }
.docs-content h2:first-child { margin-top: 0; }
.docs-content h3 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; color: #34495e; }
.docs-content p { margin-bottom: 1rem; }
.docs-content a { color: #eb796f; text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }
.docs-content ul, .docs-content ol { padding-left: 25px; margin-bottom: 1rem; }
.docs-content li { margin-bottom: 0.6rem; }
.docs-content pre { background-color: #f9f9f9; border: 1px solid #e0e0e0; padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.9em; line-height: 1.5; }
.docs-content code { font-family: 'Courier New', Courier, monospace; background-color: #f1f1f1; padding: 0.2em 0.4em; border-radius: 3px; color: #b34e46; font-size: 0.9em; }
.docs-content pre code { background-color: transparent; padding: 0; color: inherit; }
.docs-content figure { margin: 2rem auto; text-align: center; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; display: block; max-width: 600px; width: 100%; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.docs-content figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.docs-content figcaption { margin-top: 1rem; font-size: 0.88em; color: #666; text-align: center; }
.docs-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.docs-content th, .docs-content td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid #e0e0e0; }
.docs-content thead th { background-color: #f9f9f9; font-weight: 700; color: #2c3e50; border-bottom: 2px solid #e0e0e0; }
.docs-content tbody tr:nth-child(even) { background-color: #f9f9f9; }
.docs-content tbody tr:last-child td { border-bottom: none; }

/* Dark mode */
.dark-mode .docs-sidebar { background-color: #3a4f64; border-right-color: #46627f; }
.dark-mode .docs-sidebar h2 { color: #ecf0f1; border-bottom-color: #46627f; }
.dark-mode .docs-sidebar nav li a { color: #bdc3c7; }
.dark-mode .docs-sidebar nav li a:hover { color: #ffffff; background-color: #2c3e50; }
.dark-mode .docs-sidebar nav li a.active-section { color: #ff9a92; border-left-color: #ff9a92; background-color: #3f5b78; }
.dark-mode .docs-content { background-color: #2c3e50; }
.dark-mode .docs-content h1, .dark-mode .docs-content h2, .dark-mode .docs-content h3 { color: #ffffff; border-color: #46627f; }
.dark-mode .docs-content a { color: #ff9a92; }
.dark-mode .docs-content pre { background-color: #3a4f64; border-color: #46627f; color: #f0f0f0; }
.dark-mode .docs-content code { background-color: #4a4a4a; color: #f39c12; }
.dark-mode .docs-content figure { border-color: #46627f; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.dark-mode .docs-content figcaption { color: #a0a0a0; }
.dark-mode .docs-content table { border-color: #46627f; }
.dark-mode .docs-content th, .dark-mode .docs-content td { border-color: #46627f; }
.dark-mode .docs-content thead th { background-color: #3a4f64; color: #ecf0f1; border-bottom-color: #52708f; }
.dark-mode .docs-content tbody tr:nth-child(even) { background-color: #35485a; }

/* Footer logo area */
.footer-logo-container { text-align: center; padding: 2rem 0; background-color: #f9f9f9; margin-top: 3rem; }
.footer-logo-container img { display: block; margin: 0 auto; max-width: 150px; height: auto; }
.dark-mode .footer-logo-container { background-color: #3a4f64; }
.dark-mode .footer-logo-container img { filter: invert(85%) hue-rotate(180deg) brightness(1.5); }

/* Responsive */
@media (max-width: 992px) { .docs-sidebar { width: 220px; } .docs-content { padding: 1.5rem; } .docs-content figure { max-width: 90%; } }
@media (max-width: 768px) { .docs-layout { flex-direction: column; padding-top: 75px; } .docs-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid #e0e0e0; padding: 1rem; } .dark-mode .docs-sidebar { border-bottom-color: #46627f; } .docs-content { padding: 1.5rem 1rem; } .docs-content figure { max-width: 100%; padding: 10px; } }