.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0,1fr); transition: grid-template-columns var(--transition); }
.app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 16px 13px; border-right: 1px solid var(--line-soft); background: rgba(20,23,25,.9); backdrop-filter: blur(18px); display: grid; grid-template-rows: auto 1fr auto; gap: 16px; z-index: 10; overflow: visible; }
.sidebar .brand { margin: 0; padding: 3px 3px 11px; min-width: 0; }
.sidebar .brand-mark { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; }
.brand-copy, .profile-copy, .nav-label, .sidebar-logout-text { transition: opacity var(--transition); }
.sidebar-toggle { position: absolute; top: 58px; right: -13px; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line); background: #252a2d; color: var(--muted); display: grid; place-items: center; padding: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 5px 16px rgba(0,0,0,.25); z-index: 12; }
.sidebar-toggle:hover { color: var(--text); background: #30363a; }
.nav { display: grid; align-content: start; gap: 5px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.nav-item { width: 100%; min-height: 40px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 10px; padding: 0 11px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; overflow: hidden; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.nav-item.active { color: var(--text); background: var(--accent-soft); border-color: rgba(185,101,50,.2); }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .65; flex: 0 0 auto; }
.sidebar-profile { border-top: 1px solid var(--line-soft); padding-top: 13px; display: grid; gap: 9px; min-width: 0; }
.profile-name { font-weight: 700; overflow-wrap: anywhere; }
.profile-email { font-size: .78rem; color: var(--muted-2); overflow-wrap: anywhere; }
.sidebar-logout-icon { display: none; }
.app-shell.sidebar-collapsed .brand { justify-content: center; }
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .profile-copy,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .sidebar-logout-text { display: none; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.app-shell.sidebar-collapsed .nav-dot { width: 9px; height: 9px; }
.app-shell.sidebar-collapsed .sidebar-profile { justify-items: center; }
.app-shell.sidebar-collapsed .sidebar-logout { width: 42px; padding: 0; }
.app-shell.sidebar-collapsed .sidebar-logout-icon { display: inline; font-size: 1rem; }
.main { min-width: 0; }
.topbar { min-height: 62px; padding: 0 clamp(15px, 2vw, 26px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-soft); background: rgba(25,28,30,.74); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 8; }
.page-title { font-size: clamp(.92rem, 1.1vw, 1rem); font-weight: 720; }
.mobile-menu { display: none; }
.content { padding: clamp(16px, 2.3vw, 28px); width: min(1380px, 100%); margin: 0 auto; }
.empty-state { padding: clamp(24px, 4vw, 34px); text-align: center; color: var(--muted); }