:root{--bg-main:#fff;--bg-sidebar:#f8fafc;--bg-card:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--accent-blue:#2563eb;--accent-purple:#7c3aed;--accent-glow:#2563eb1a;--border-color:#e2e8f0}html,body,#root{width:100%;height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;background-color:var(--bg-main)!important;color:var(--text-primary)!important}.app-container{background-color:var(--bg-main);width:100%;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);flex-direction:column;width:320px;transition:all .3s;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border-color);background:var(--bg-sidebar);padding:24px}.sidebar-title{color:var(--accent-blue);margin:0;font-size:1.2rem;font-weight:700}.nav-list{flex-direction:column;gap:8px;margin:0;padding:12px;list-style:none;display:flex}.nav-item{cursor:pointer;color:var(--text-secondary);border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-size:.95rem;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{background-color:var(--bg-card);color:var(--text-primary);transform:translate(4px)}.nav-item.active{background-color:var(--accent-glow);color:var(--accent-blue);border:1px solid #2563eb33}.content-area{scroll-behavior:smooth;background-color:var(--bg-main);flex:1;padding:40px;overflow-y:auto}.markdown-container{max-width:900px;margin:0 auto}.markdown-body{color:var(--text-primary);font-size:1.05rem}.markdown-body h1,.markdown-body h2,.markdown-body h3{color:var(--accent-blue);border-bottom:1px solid var(--border-color);margin-top:2em;padding-bottom:8px}.markdown-body h1{border:none;font-size:2.5rem}.markdown-body a{color:var(--accent-blue);text-decoration:none;transition:color .2s}.markdown-body a:hover{color:var(--accent-purple);text-decoration:underline}.markdown-body code{background-color:var(--bg-card);color:#ef4444;border-radius:4px;padding:2px 6px;font-family:Fira Code,monospace;font-size:.9em}.markdown-body pre{border:1px solid var(--border-color);border-radius:8px;padding:16px;overflow-x:auto;box-shadow:0 4px 10px #0000000d;background-color:#1e1e1e!important}.markdown-body pre code{color:#d4d4d4;background-color:#0000;padding:0}.markdown-body table{border-collapse:collapse;border-radius:8px;width:100%;margin:24px 0;overflow:hidden;box-shadow:0 2px 4px #0000000d}.markdown-body th{background-color:var(--bg-sidebar);text-align:left;border-bottom:2px solid var(--border-color);color:var(--text-primary);padding:12px}.markdown-body td{border-bottom:1px solid var(--border-color);padding:12px}.markdown-body tr:hover{background-color:var(--bg-card)}.markdown-body blockquote{border-left:4px solid var(--accent-blue);background-color:var(--bg-card);color:var(--text-secondary);border-radius:0 8px 8px 0;margin:0;padding:16px 20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s forwards fadeIn}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}