/* Sticky tab bar, count, and tool buttons */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  /* Full-bleed so the bottom hairline runs edge to edge; content stays aligned with the column */
  margin: 20px calc(50% - 50vw) 0;
  padding: 12px calc(50vw - 50%);
  background: rgba(19, 11, 48, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd);
}
/* Covers the status-bar strip (safe area) with the same backdrop, so posters never scroll through unblurred.
   Extends upward too, for browsers whose top:0 sits below the status bar. */
.statusbar {
  position: fixed;
  left: 0;
  right: 0;
  top: -100px;
  height: calc(100px + env(safe-area-inset-top, 0px));
  z-index: 20;
  pointer-events: none;
  background: rgba(19, 11, 48, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.seg {
  display: flex;
  gap: 4px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  padding: 4px;
}
.seg button {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: var(--mut);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-control);
  padding: 10px 4px;
}
.seg button.on {
  background: var(--acc);
  color: var(--ink);
  font-weight: 700;
}
.tools {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.tools .mut {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
}
.chipbtn {
  color: var(--fg);
  font-size: 14px;
  background: var(--sec);
  box-shadow: inset 0 0 0 1px var(--bd);
  border-radius: var(--radius-control);
  padding: 9px 16px;
}
.chipbtn.act {
  box-shadow: inset 0 0 0 1px var(--acc);
  color: var(--accT);
}
.rfail {
  margin-top: 8px;
}