.topbar{position:relative}
.user-badge{
  position:absolute;
  top:18px;
  right:20px;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.14);
  border-radius:20px;
  padding:6px 12px 6px 8px;
  cursor:pointer;
  flex-shrink:0;
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.user-badge-emoji{font-size:16px}
.user-badge:hover{background:rgba(255,255,255,0.22)}
.topbar .brand{padding-right:110px}

.user-picker-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,var(--cream) 0%,#f3ede0 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:24px;
}
.user-picker-box{
  width:100%;
  max-width:420px;
  background:var(--paper);
  border-radius:24px;
  padding:32px 24px;
  box-shadow:0 12px 40px rgba(43,58,103,0.18);
  text-align:center;
}
.user-picker-title{
  font-size:20px;
  font-weight:800;
  color:var(--indigo-deep);
  margin-bottom:24px;
}
.user-picker-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.user-picker-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:var(--cream);
  border:2px solid transparent;
  border-radius:18px;
  padding:22px 10px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, transform .1s;
}
.user-picker-btn:hover{border-color:var(--sakura);transform:translateY(-2px)}
.user-picker-btn:active{transform:scale(0.96)}
.user-picker-emoji{font-size:36px}
.user-picker-label{font-size:14px;font-weight:700;color:var(--ink)}
.user-picker-close{
  margin-top:20px;
  background:transparent;
  border:none;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  text-decoration:underline;
}