.ib-bf-slot { height: 54px; }
.ib-bf-bar {
  --ib-bf-height: 54px;
  position: fixed;
  top: 0;
  z-index: 950;
  width: 100%;
  height: var(--ib-bf-height);
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(100deg, #101014, #242129 50%, #111015);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  font-family: Arial, Helvetica, sans-serif;
}
.ib-bf-slot + .ib-public-header { top: 54px; }
.ib-bf-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(1200px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}
.ib-bf-bar__identity { display: flex; flex-direction: column; align-items: center; justify-self: center; min-width: 0; line-height: 1; }
.ib-bf-bar__badge { display: inline-block; padding: 2px 5px; color: #181313; background: #ffd422; border-radius: 0; font-size: 10px; font-weight: 900; white-space: nowrap; }
.ib-bf-bar__title { margin-top: 3px; color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .025em; white-space: nowrap; }
.ib-bf-bar__title span:last-child { color: #ffd422; }
.ib-bf-bar__clock { display: flex; align-items: center; justify-content: center; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ib-bf-bar__pair { display: flex; align-items: center; gap: 2px; }
.ib-bf-bar__colon { color: #ffd422; font-size: 16px; font-weight: 800; }
.ib-bf-bar__digit { display: inline-grid; place-items: center; width: 21px; height: 27px; overflow: hidden; border-radius: 3px; background: linear-gradient(#3b3940 49%, #202026 50%); border: 1px solid #555159; box-sizing: border-box; perspective: 90px; }
.ib-bf-bar__digit-face { display: block; font-size: 18px; font-weight: 800; line-height: 1; transform-origin: center; }
.ib-bf-bar__digit.is-flipping .ib-bf-bar__digit-face { animation: ib-bf-flip .52s ease-in-out; }
@keyframes ib-bf-flip { 0% { transform: rotateX(-90deg); opacity: .35; } 55% { transform: rotateX(12deg); opacity: 1; } 100% { transform: rotateX(0); } }
.ib-bf-bar__action { display: flex; justify-content: center; min-width: 0; }
.ib-bf-bar__button, .ib-bf-bar__button:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 33px; margin: 0; padding: 0 11px; border: 0; border-radius: 5px;
  color: #fff; background: linear-gradient(110deg, #f03591, #8b35d5); box-shadow: none;
  font: 700 12px Arial, Helvetica, sans-serif; text-decoration: none; text-transform: none;
  white-space: nowrap; cursor: pointer;
}
.ib-bf-bar__button i { color: #fff; font-size: 12px; }
.ib-bf-bar__button:hover { filter: brightness(1.12); color: #fff; }
.ib-bf-bar__button:focus-visible { outline: 2px solid #ffd422; outline-offset: 2px; }
@media (max-width: 600px) {
  .ib-bf-slot { height: 48px; }
  .ib-bf-bar { --ib-bf-height: 48px; }
  .ib-bf-slot + .ib-public-header { top: 48px; }
  .ib-bf-bar__inner { gap: 4px; padding: 0 4px; }
  .ib-bf-bar__title { font-size: 11px; letter-spacing: 0; }
  .ib-bf-bar__badge { font-size: 8px; padding: 1px 3px; }
  .ib-bf-bar__clock { gap: 1px; }
  .ib-bf-bar__pair { gap: 1px; }
  .ib-bf-bar__digit { width: 15px; height: 22px; }
  .ib-bf-bar__digit-face { font-size: 14px; }
  .ib-bf-bar__colon { font-size: 13px; }
  .ib-bf-bar__button, .ib-bf-bar__button:visited { min-height: 29px; padding: 0 5px; gap: 3px; font-size: 9px; }
  .ib-bf-bar__button i { font-size: 10px; }
}
@media (max-width: 340px) {
  .ib-bf-bar__inner { gap: 2px; padding: 0 2px; }
  .ib-bf-bar__title { font-size: 10px; }
  .ib-bf-bar__digit { width: 13px; height: 21px; }
  .ib-bf-bar__digit-face { font-size: 13px; }
  .ib-bf-bar__button, .ib-bf-bar__button:visited { padding: 0 4px; gap: 2px; font-size: 8px; }
  .ib-bf-bar__button i { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ib-bf-bar__digit.is-flipping .ib-bf-bar__digit-face { animation: none; } }