.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.brand { display: flex; align-items: center; gap: var(--space-3); min-height: 5rem; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); text-decoration: none; }
.brand-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: var(--radius-md); color: var(--color-on-primary); background: var(--color-primary); font-size: var(--text-sm); font-weight: 750; letter-spacing: -.03em; }
.brand-logo { display: block; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; object-fit: contain; border-radius: 50%; }
.brand-name { color: var(--color-text); font-size: var(--text-sm); font-weight: 750; }
.brand-caption { display: block; margin-top: .1rem; color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: 500; }
.sidebar-nav { flex: 1; padding: var(--space-5) var(--space-3); overflow-y: auto; }
.nav-section + .nav-section { margin-top: var(--space-5); }
.nav-label { display: block; padding: 0 var(--space-3) var(--space-2); color: var(--color-text-tertiary); font-size: .625rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.nav-list { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); }
.nav-link:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.nav-link.is-active { color: var(--brand-charcoal); background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.sidebar-footer { padding: var(--space-4) var(--space-3); border-top: 1px solid var(--color-border); }
.user-panel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.user-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--color-primary-hover); background: var(--color-primary-soft); font-size: var(--text-xs); font-weight: 750; }
.user-copy { display: grid; min-width: 0; gap: .125rem; line-height: 1.2; }
.user-name { overflow: hidden; color: var(--color-text); font-size: var(--text-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-role { color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: 1.2; }
.logout-form { margin: var(--space-2) 0 0; }
.logout-button { width: 100%; justify-content: flex-start; }
.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.content-wrap { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-7) var(--space-6); }
.mobile-header, .mobile-drawer, .mobile-overlay { display: none; }
.auth-layout { display: grid; min-height: 100vh; place-items: center; padding: var(--space-5); background: var(--color-bg); }
@media (max-width: 959px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; padding-top: 4rem; }
  .content-wrap { padding: var(--space-5) var(--space-4) var(--space-6); }
  .mobile-header { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; height: 4rem; align-items: center; justify-content: space-between; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
  .mobile-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); font-weight: 750; text-decoration: none; }
  .mobile-brand .brand-logo { width: 2.25rem; height: 2.25rem; }
  .menu-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); }
  .mobile-drawer { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: min(19rem, calc(100vw - 3.5rem)); flex-direction: column; border-right: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-md); transform: translateX(-105%); transition: transform var(--transition-fast); }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer .sidebar-nav { padding-top: var(--space-4); }
  .mobile-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(21, 31, 40, .28); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
  .mobile-overlay.is-visible { opacity: 1; pointer-events: auto; }
}
@media (max-width: 479px) { .content-wrap { padding-left: var(--space-3); padding-right: var(--space-3); } }