.drawer-toggle { position: fixed; left: 12px; top: 12px; width:48px; height:48px; border-radius:50%; background:#e0e0e0; color:#222; border:none; display:flex; align-items:center; justify-content:center; z-index:1002; box-shadow:0 2px 6px rgba(0,0,0,0.15); cursor:pointer; }
body.dark .drawer-toggle { background:#2a2a2a; color:#fff; border:1px solid #333; }
.left-avatar { font-weight:700; font-size:1.1em; }

.left-drawer { position: fixed; left: 0; top: 0; height: 100vh; width: 320px; background: #fff; color: #111; box-shadow: 2px 0 8px rgba(0,0,0,0.15); z-index:1003; transform: translateX(-120%); opacity:0; visibility:hidden; transition: transform .28s ease, opacity .2s ease; display:flex; flex-direction:column; padding:16px; }
body.dark .left-drawer { background:#111; color:#eee; box-shadow: 2px 0 12px rgba(0,0,0,0.6); }
.left-drawer.open { transform: translateX(0); opacity:1; visibility:visible; pointer-events:auto; }
.left-drawer:not(.open){ pointer-events:none; }
.drawer-header { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.drawer-avatar { width:56px; height:56px; border-radius:50%; background:#e0e0e0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2em; }
body.dark .drawer-avatar { background:#222; color:#fff; border:1px solid #333; }
.drawer-name { font-weight:700; }
.drawer-sub { font-size:0.9em; color:#666; }
body.dark .drawer-sub { color:#aaa; }
.drawer-nav { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.drawer-nav a { padding:10px; border-radius:6px; color:inherit; text-decoration:none; }
.drawer-nav a:hover { background: rgba(0,0,0,0.05); }
body.dark .drawer-nav a:hover { background: rgba(255,255,255,0.03); }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index:1001; opacity:0; transition: opacity .2s ease; }
.drawer-overlay.visible { opacity:1; }
@media(max-width:900px){ .left-drawer{ width:80%; } .left-drawer.open{ left:0; } }