/* =============================================================
   TOPBAR
   ============================================================= */
#topbar {
  /* Real-Flow-Flex-Item (kein position:fixed mehr) — klebt durch das
     body { display:flex; flex-direction:column } automatisch oben am
     Viewport. Macht die Topbar immun gegen iOS-PWA-Quirks von
     position:fixed.                                                       */
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: max(env(safe-area-inset-top), 14px) 18px 14px;
}
.topbar-row { display: flex; align-items: center; gap: var(--s-3); }
.topbar-logo {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.05em;
  color: var(--primary);
  flex-shrink: 0;
}
.topbar-xp {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-1);
}
.xp-track {
  height: 6px; border-radius: 0 4px 4px 0; background: var(--border); overflow: hidden;
  position: relative;
}
.xp-fill {
  height: 100%; background: var(--primary);
  transition: width 700ms var(--ease);
  position: relative;
}
.xp-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: var(--xp); border-radius: 0 4px 4px 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--xp) 60%, transparent);
}
.xp-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); color: var(--muted); letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}
.streak-pill {
  display: flex; align-items: center; gap: var(--s-1);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 5px 10px; flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}