.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px 20px; background: var(--sb-bg); color: var(--sb-ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.sidebar__brand { display: flex; gap: 11px; align-items: center; padding: 2px 10px 30px; color: var(--ink); }
.sidebar__brand strong { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1; color: var(--accent); letter-spacing: -.01em; }
.sidebar__brand strong .brand-by { font-family: var(--sans); font-size: 12px; font-weight: 500; font-style: italic; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.sidebar__brand small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sidebar__logo, .brand-mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent); }
.sidebar__logo svg, .brand-mark svg { width: 100%; height: 100%; display: block; }
.sidebar__nav { flex: 1; }
.nav-label, .eyebrow { color: var(--muted); font-size: .69rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { color: var(--accent); }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; }
.sidebar .nav-label { color: var(--muted); padding: 0 10px; }
.nav-label--spaced { margin-top: 28px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; transition: color var(--tr), background var(--tr), transform var(--tr); }
.nav-item:hover { color: var(--accent); background: var(--surface-2); transform: translateX(2px); }
.nav-item--active { background: var(--accent-2); color: var(--accent); font-weight: 700; }
.nav-item__icon { color: var(--accent); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.user-card__avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 50%; background: var(--avatar); color: white; font-weight: 800; }
.user-card__identity { min-width: 0; flex: 1; }
.user-card__identity strong, .user-card__identity a { display: block; overflow: hidden; text-overflow: ellipsis; }
.user-card__identity a { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.main { min-width: 0; }
.topbar { min-height: 104px; padding: 22px 38px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
.topbar h1 { margin: 0; font-size: 2rem; }
.topbar .eyebrow { margin-bottom: 4px; }
.topbar .btn { margin-left: auto; }
.page { padding: 32px 38px 56px; max-width: 1450px; }
.menu-toggle, .sidebar-overlay { display: none; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 14% 12%, var(--terracotta-soft), transparent 32%), radial-gradient(circle at 88% 82%, var(--petrole-soft), transparent 30%), var(--bg); }
.auth-panel { width: min(440px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-lg); }
.auth-panel .brand-mark { margin-bottom: 24px; }
.auth-panel h1 { margin-bottom: 10px; font-size: 2.35rem; }
.auth-intro, .auth-note { color: var(--muted); }
.auth-note { margin: 24px 0 0; font-size: .82rem; text-align: center; }
@media (max-width: 1024px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 270px; transition: transform var(--tr); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-overlay { position: fixed; inset: 0; background: rgba(15,26,43,.42); z-index: 10; }
    body.sidebar-open .sidebar-overlay { display: block; }
    .menu-toggle { display: grid; }
    .topbar { padding: 16px; }
    .page { padding: 18px 14px 40px; }
}
