.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:72px;
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb, var(--bg-shell) 82%, var(--bg-elevated) 18%);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}

.topbar-left,
.topbar-right,
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}

.topbar-right{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.brand-logo{
  max-height:42px;
  width:auto;
}

.brand-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text-primary);
}

.brand-sub{
  font-size:.88rem;
  color:var(--text-soft);
}

.user-pill,
.action-btn,
.menu-toggle{
  min-height:42px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:color-mix(in srgb, var(--bg-elevated) 92%, var(--bg-muted) 8%);
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}

.user-pill,
.action-btn{
  padding:0 14px;
}

.user-role{
  font-size:.82rem;
  color:var(--text-soft);
}

.menu-toggle{
  justify-content:center;
  min-width:42px;
  padding:0 12px;
}

.theme-toggle .svg-icon{
  width:18px;
  height:18px;
}

.icon-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 720px){
  .topbar{
    padding:var(--space-4);
    align-items:flex-start;
    flex-direction:column;
  }

  .topbar-right{
    width:100%;
    justify-content:flex-start;
  }
}