:root{--sidebar-width: 240px;--sidebar-bg: #1e293b;--sidebar-text: #f1f5f9;--sidebar-hover: #334155;--primary: #6366f1}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif}.btn-toggle{position:fixed;top:16px;left:16px;background:var(--primary);color:#fff;border:none;padding:10px;border-radius:8px;cursor:pointer;z-index:1100;transition:background .3s ease,transform .2s ease}.btn-toggle:hover{background:#4f46e5;transform:scale(1.05)}.sidebar{position:fixed;top:0;left:-100%;height:100%;width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--sidebar-text);transition:left .4s ease;box-shadow:2px 0 10px #0006;z-index:1000;display:flex;flex-direction:column;padding-top:70px}.sidebar.open{left:0}.nav-menu{display:flex;flex-direction:column;gap:12px;padding:0 16px}.nav-item{padding:12px 14px;text-decoration:none;color:var(--sidebar-text);font-size:1.05rem;font-weight:500;border-radius:6px;transition:background .3s ease,transform .2s ease}.nav-item:hover{background:var(--sidebar-hover);transform:translate(4px)}@media (min-width: 768px){.btn-toggle{display:none}.sidebar{left:0;width:var(--sidebar-width)}}