/* App shell */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: var(--space-4) var(--space-3); gap: var(--space-4); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px; color: var(--sidebar-text-strong); }
.brand:hover { text-decoration: none; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand .brand-name { font-family: var(--font-display); font-weight: 650; font-size: var(--text-md); letter-spacing: -0.01em; }
.brand .brand-sub { font-size: var(--text-xs); color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; padding: 3px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { margin-top: var(--space-3); padding: 0 12px 6px; font-size: var(--text-xs); font-weight: 600; color: var(--sidebar-text); opacity: 0.75; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 550; font-size: var(--text-sm); text-decoration: none; min-height: 42px; }
.nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-text-strong); }
.nav a .count { margin-left: auto; font-size: var(--text-xs); background: var(--brand-gold); color: #3b2a00; padding: 1px 8px; border-radius: var(--radius-pill); font-weight: 700; }
.sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--sidebar-border); font-size: var(--text-xs); color: var(--sidebar-text); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar .crumb { font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.01em; }
.topbar .menu-toggle { display: none; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: transparent; display: inline-grid; place-items: center; color: var(--text); }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .pip { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--bad-text); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
:root[data-theme="dark"] .icon-btn .pip { background: #f07a8b; color: #1a0b0f; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); }
.user-chip:hover { background: var(--surface-2); }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-chip .who b { font-size: var(--text-sm); font-weight: 600; }
.user-chip .who span { font-size: var(--text-xs); color: var(--text-muted); }

.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-6); flex: 1; }
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head .titles { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: var(--text-2xl); }
.page-head p { margin-top: 6px; color: var(--text-muted); max-width: 70ch; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 10px; }

.grid { display: grid; gap: var(--space-4); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.section-gap { margin-top: var(--space-5); }

.scrim-nav { display: none; }

@media (max-width: 1080px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.split { grid-template-columns: 1fr; }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 120; inset: 0 auto 0 0; width: min(290px, 86vw); transform: translateX(-102%); transition: transform var(--dur) var(--ease); }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim-nav { display: block; position: fixed; inset: 0; z-index: 110; background: var(--scrim); }
  .topbar { padding: 0 var(--space-4); }
  .topbar .menu-toggle { display: inline-grid; }
  .user-chip .who { display: none; }
  .user-chip { padding: 4px; }
  .content { padding: var(--space-4); }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1080px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }