body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: #f8f9fa; }
.wrapper { display: flex; width: 100%; align-items: stretch; }
#sidebar { min-width: 250px; max-width: 250px; background: #212529; color: #fff; min-height: 100vh; transition: all 0.3s; }
#sidebar .sidebar-header { padding: 20px; background: #1a1e21; }
#sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #47748b; }
#sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; color: #cfd8dc; text-decoration: none; transition: all 0.3s; }
#sidebar ul li a:hover, #sidebar ul li.active > a { color: #fff; background: #0d6efd; border-left: 4px solid #fff; }
#sidebar ul li a i { margin-right: 10px; width: 20px; text-align: center; }
#content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; }
.navbar-top { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.08); margin-bottom: 2rem; padding: 0.5rem 1rem; border-radius: 0.5rem; }
@media (max-width: 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } }