.drawer-root{position:fixed;inset:0;z-index:1000}.drawer-overlay{position:absolute;inset:0;background:var(--color-drawer-overlay)}.drawer{position:absolute;top:0;right:0;bottom:0;width:min(var(--width-drawer),100vw);display:flex;flex-direction:column;background:var(--color-surface);box-shadow:var(--shadow-drawer);animation:drawer-in var(--duration-fast) var(--ease-out)}.drawer:focus{outline:none}.drawer__head{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--color-border)}.drawer__head-text{display:flex;flex-direction:column;gap:2px}.drawer__title{font-size:16px;font-weight:700;line-height:20px;color:var(--color-text)}.drawer__subtitle{font-size:12px;line-height:16px;color:var(--color-text-subtle)}.btn.drawer__close{margin-left:auto;width:30px;height:30px;padding:0;border-radius:var(--radius-8);background:var(--color-surface-2);color:var(--color-text-muted);font-size:16px}.drawer__toolbar{padding:12px 20px;border-bottom:1px solid var(--color-divider)}.drawer__body{flex:1 1;overflow-y:auto;padding:4px 0 16px}@keyframes drawer-in{0%{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}@media (prefers-reduced-motion:reduce){.drawer{animation:none}}