.topbar {
  height:var(--topbar-height);
  position:sticky;
  top:var(--space-0);
  z-index:var(--z-topbar);
  display:flex;
  align-items:center;
  gap:var(--space-6);
  padding:var(--space-0) var(--space-5);
  background:var(--surface);
  border-bottom:1px solid var(--border)
}
.brand-area {
  width:calc(var(--sidebar-width) - var(--space-5));
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-shrink:0
}
.brand {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:var(--text);
  font-size:var(--font-lg);
  font-weight:700;
  white-space:nowrap
}
.brand:hover {
  text-decoration:none
}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--primary);
  color:var(--on-primary);
  width:var(--control-height);
  height:var(--control-height);
  border-radius:var(--radius);
  font-size:var(--font-sm)
}
.brand-logo {
  width:var(--control-height);
  height:var(--control-height);
  object-fit:contain
}
.topbar-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--space-2)
}
.account {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding-left:var(--space-3);
  border-left:1px solid var(--border)
}
.avatar {
  display:grid;
  place-items:center;
  width:var(--control-height);
  height:var(--control-height);
  border-radius:var(--radius-round);
  background:var(--surface-alt);
  font-size:var(--font-xs);
  font-weight:700
}
.account-label {
  font-size:var(--font-sm)
}
.account-label small {
  display:block;
  color:var(--text-muted);
  font-size:var(--font-xs)
}
.search-trigger {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-muted);
  background:var(--surface-alt);
  min-width:280px;
  font-size:var(--font-sm)
}
kbd {
  margin-left:auto;
  font-size:var(--font-xs);
  font-family:inherit
}
.app-layout {
  display:flex;
  min-height:calc(100vh - var(--topbar-height))
}
.sidebar {
  position:fixed;
  top:var(--topbar-height);
  bottom:var(--space-0);
  left:var(--space-0);
  width:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  padding:var(--space-4) var(--space-3);
  overflow-y:auto;
  transition:width var(--transition);
  z-index:var(--z-sidebar)
}
.sidebar-workspace {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--font-xs);
  color:var(--sidebar-muted);
  padding:var(--space-2) var(--space-2) var(--space-4);
  white-space:nowrap
}
.workspace-dot {
  width:var(--space-2);
  height:var(--space-2);
  border-radius:var(--radius-round);
  background:var(--sidebar-muted)
}
.nav-section {
  margin-bottom:var(--space-5)
}
.nav-section-title {
  color:var(--sidebar-muted);
  font-size:var(--font-xs);
  font-weight:500;
  padding:var(--space-2)
}
.nav-list {
  display:grid;
  gap:var(--space-1)
}
.nav-list .nav-list {
  padding-left:var(--space-5);
  margin-top:var(--space-1)
}
.nav-link {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-2);
  border-radius:var(--radius);
  color:var(--sidebar-text);
  white-space:nowrap;
  border:0;
  background:transparent;
  width:100%;
  font-size:var(--font-base);
  text-align:left
}
.nav-link:hover,.nav-link[aria-current] {
  background:var(--sidebar-active);
  text-decoration:none
}
.nav-link[aria-current] {
  font-weight:600
}
.nav-link[aria-disabled] {
  opacity:.6
}
.nav-badge {
  margin-left:auto;
  font-size:var(--font-xs);
  color:var(--sidebar-muted)
}
.sidebar-footer {
  margin-top:auto;
  border-top:1px solid var(--sidebar-active);
  padding-top:var(--space-3)
}
.sidebar-caption {
  display:block;
  color:var(--sidebar-muted);
  font-size:var(--font-xs);
  padding:var(--space-3) var(--space-2)
}
.content-shell {
  margin-left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
  min-width:0;
  display:flex;
  flex-direction:column;
  transition:margin var(--transition)
}
.breadcrumbs {
  display:flex;
  gap:var(--space-2);
  align-items:center;
  padding:var(--space-4) var(--space-6) var(--space-2);
  font-size:var(--font-xs);
  color:var(--text-muted);
  flex-wrap:wrap
}
.breadcrumbs a {
  color:var(--text-muted)
}
main {
  padding:var(--space-3) var(--space-6) var(--space-6);
  width:100%;
  max-width:var(--content-max)
}
.app-footer {
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  font-size:var(--font-xs);
  color:var(--text-muted)
}
.is-compact .sidebar,html[data-sidebar="compact"] .sidebar {
  width:var(--sidebar-compact-width)
}
.is-compact .content-shell,html[data-sidebar="compact"] .content-shell {
  margin-left:var(--sidebar-compact-width);
  width:calc(100% - var(--sidebar-compact-width))
}
.is-compact .sidebar .nav-label,.is-compact .nav-badge,.is-compact .nav-section-title,html[data-sidebar="compact"] .sidebar .nav-label,html[data-sidebar="compact"] .nav-badge,html[data-sidebar="compact"] .nav-section-title {
  display:none
}
.is-compact .sidebar .nav-link,html[data-sidebar="compact"] .sidebar .nav-link {
  justify-content:center
}
.is-compact .nav-list .nav-list,html[data-sidebar="compact"] .nav-list .nav-list {
  padding-left:var(--space-0)
}
.topbar .drawer-toggle,.drawer-backdrop {
  display:none
}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  align-items:center;
  margin-bottom:var(--space-5)
}
.page-heading p {
  margin-top:var(--space-1);
  color:var(--text-muted);
  font-size:var(--font-sm)
}
.page-actions {
  display:flex;
  gap:var(--space-2)
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-5)
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--space-5)
}
.demo-grid,.workspace-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5)
}
.module-widget {
  margin-top:var(--space-5)
}
@media(max-width:1100px) {
  .brand-area {
    width:auto
  }
  .search-trigger {
    min-width:0;
    flex:1 1 auto
  }
  .search-trigger span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .search-trigger kbd {
    display:none
  }
  .topbar-actions {
    flex-shrink:0
  }
  .account-label {
    display:none
  }
  .dashboard-grid {
    grid-template-columns:1fr
  }
  .stat-grid {
    gap:var(--space-3)
  }
}
@media(max-width:1024px) {
  .drawer-toggle {
    display:inline-flex!important
  }
  .sidebar,.is-compact .sidebar,html[data-sidebar="compact"] .sidebar {
    width:var(--sidebar-width);
    transform:translateX(-100%);
    transition:transform var(--transition)
  }
  .drawer-open .sidebar {
    transform:translateX(0)
  }
  .content-shell,.is-compact .content-shell,html[data-sidebar="compact"] .content-shell {
    margin-left:0;
    width:100%
  }
  .drawer-backdrop {
    display:block;
    position:fixed;
    inset:var(--topbar-height) 0 0;
    background:var(--overlay);
    border:0;
    z-index:calc(var(--z-sidebar) - 1)
  }
  .is-compact .sidebar .nav-label,.is-compact .nav-badge,.is-compact .nav-section-title,html[data-sidebar="compact"] .sidebar .nav-label,html[data-sidebar="compact"] .nav-badge,html[data-sidebar="compact"] .nav-section-title {
    display:initial
  }
  .is-compact .sidebar .nav-link,html[data-sidebar="compact"] .sidebar .nav-link {
    justify-content:flex-start
  }
  .compact-toggle {
    display:none
  }
}
@media(max-width:640px) {
  .topbar {
    gap:var(--space-2);
    padding:var(--space-0) var(--space-3)
  }
  .brand-name {
    display:none
  }
  .search-trigger {
    min-width:0;
    padding:var(--space-2);
    margin-left:auto
  }
  .search-trigger span,.search-trigger kbd {
    display:none
  }
  .topbar-actions {
    margin-left:0;
    gap:var(--space-1)
  }
  .account {
    padding-left:var(--space-2)
  }
  main {
    padding:var(--space-3) var(--space-3) var(--space-5)
  }
  .breadcrumbs {
    padding:var(--space-3) var(--space-3) var(--space-2)
  }
  .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .demo-grid,.workspace-grid {
    grid-template-columns:1fr
  }
  .page-heading {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .app-footer {
    padding:var(--space-3);
    flex-wrap:wrap
  }
}

/* Registry-driven, single-open navigation groups. */
.nav-group-toggle { width:100%; cursor:pointer; font:inherit; text-align:left; border:0; }
.nav-chevron { margin-left:auto; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.nav-group-panel .nav-link { padding-left:var(--space-6); }
@media(min-width:1025px) {
  html[data-sidebar="compact"] .nav-group { position:relative; }
  html[data-sidebar="compact"] .nav-group-panel { position:absolute; left:100%; top:0; width:var(--sidebar-width); background:var(--sidebar-bg); border:1px solid var(--border); box-shadow:var(--shadow-md); z-index:var(--z-sidebar); }
  html[data-sidebar="compact"] .nav-group-panel .nav-label { display:inline; }
  html[data-sidebar="compact"] .nav-group-panel .nav-link { justify-content:flex-start; }
}