.workspace-navigation { display: flex; align-items: center; gap: 16px; }
.navigation-menu-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid var(--on-brand-border); border-radius: 50%; background: #092b5b; color: #fff; cursor: pointer; box-shadow: 0 2px 5px rgb(0 0 0 / 35%); }
.navigation-menu-button img { width: 22px; height: 22px; }
.navigation-menu-button:hover { border-color: rgb(50 169 245 / 55%); background: rgb(255 255 255 / 8%); }
.navigation-menu-button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.home-drawer:not([open]) { display: none; }
.home-drawer[open] { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; margin: 0; width: var(--drawer-width, 284px); max-width: none; max-height: none; height: 100vh; padding: 16px 18px 20px; overflow: hidden; border: 0; border-right: 1px solid var(--on-brand-border); border-radius: 0; background: linear-gradient(180deg, var(--sidebar-start) 0%, var(--brand-secondary) 52%, var(--sidebar-end) 100%); color: #fff; font-size: 14px; box-shadow: 0 18px 48px rgb(15 39 71 / 10%); animation: drawer-enter 180ms ease-out; }
.home-drawer::backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: blur(2px); }
.drawer-brand { flex-shrink: 0; padding-bottom: 16px; border-bottom: 2px solid #fff; margin-bottom: 16px; }
.drawer-brand img { display: block; width: 100%; max-width: 228px; height: auto; }
.drawer-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 4px; overflow: auto; }
.drawer-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 10px 12px; border: 1px solid var(--on-brand-border); border-radius: 16px; color: rgb(255 255 255 / 78%); text-decoration: none; }
.drawer-item img { width: 2ch; height: 20px; font-size: 20px; }
.drawer-item:hover, .drawer-item:focus-visible { color: #fff; border-color: rgb(50 169 245 / 55%); background: rgb(255 255 255 / 8%); }
.drawer-item.is-active { color: #fff; border-color: rgb(50 169 245 / 75%); background: linear-gradient(135deg, rgb(50 169 245 / 24%), rgb(37 99 235 / 18%)); box-shadow: inset 3px 0 0 var(--brand-accent); }
.drawer-resize-handle { position: absolute; inset: 0 0 0 auto; width: 8px; cursor: ew-resize; touch-action: none; }
.drawer-resize-handle:hover, .drawer-resize-handle:focus-visible { border-right: 3px solid var(--brand-accent); outline: none; }
@keyframes drawer-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .home-drawer[open] { animation: none; } }