.nav-play-links { display: flex; align-items: center; gap: clamp(9px, 2vw, 30px); }
.x1-notifications { position: relative; }
.x1-bell, .x1-popup-close {
  display: grid;
  place-items: center;
  border: 1px solid #2b3950;
  border-radius: 7px;
  background: #121b29;
  color: #d3e2f8;
  cursor: pointer;
}
.x1-bell { position: relative; width: 36px; height: 36px; padding: 0; }
.x1-bell:hover, .x1-popup-close:hover { background: #21324c; color: #fff; }
.x1-badge {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: #ff8e4e;
  color: #1d120d;
  font: 800 10px/17px var(--body, sans-serif);
  text-align: center;
}
.x1-inbox, .x1-popup {
  width: min(340px, calc(100vw - 24px));
  border: 1px solid #304565;
  border-radius: 10px;
  background: #111a28;
  color: #eef2f8;
  box-shadow: 0 14px 35px #0008;
}
.x1-inbox { position: absolute; top: calc(100% + 12px); right: 0; z-index: 15; }
.x1-inbox h2 { padding: 14px 16px; border-bottom: 1px solid #28384d; font-size: 14px; font-weight: 800; }
#x1-inbox-list { max-height: min(380px, 60vh); overflow: auto; }
.x1-invite, .x1-empty { padding: 12px 16px; }
.x1-invite + .x1-invite { border-top: 1px solid #28384d; }
.x1-invite p, .x1-popup p { margin: 0 0 10px; color: #c3d2e9; overflow-wrap: anywhere; }
.x1-invite p span, .x1-popup p span { color: #ffae7f; }
.x1-empty { color: #a5b6cf; }
.x1-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.x1-popup { position: fixed; z-index: 70; right: 20px; bottom: 20px; padding: 14px; font-size: 13px; }
.x1-popup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.x1-popup-close { width: 27px; height: 27px; font-size: 18px; }
@media (max-width: 680px) {
  .x1-inbox { position: fixed; top: 67px; right: 12px; }
  .x1-popup { right: 12px; bottom: 12px; }
  .x1-bell { width: 29px; height: 29px; }
  .nav-play-links { gap: 8px; }
}