/* The header presence service remains active; its display moves into the feed. */
body.csdrop-live-widget-active header.premium-header .online-pill { display: none !important; }
section.drop-ribbon[data-csdrop-live-widget="v1"] {
  grid-template-columns: 78px 38px minmax(0, 1fr) !important;
  gap: 5px !important;
}
section.drop-ribbon[data-csdrop-live-widget="v1"] .drop-ribbon-head.cs-lw-online {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 78px !important; height: 86px; gap: 4px; padding: 7px 3px;
  background: #16271f; border-radius: 6px; color: #f2f7f5;
}
/* Preserve the intentionally green status indicator under the blue accent transformer. */
.cs-lw-signal { width: 25px; height: 25px; flex: none; color: color(srgb .313725 .870588 .521568) !important; animation: cs-lw-online-pulse 1.8s ease-in-out infinite; }
.cs-lw-online-unknown .cs-lw-signal { animation: none; opacity: .45; }
.cs-lw-number { font-size: 15px; font-weight: 850; line-height: 1.05; white-space: nowrap; }
.cs-lw-online-label { color: #8da5a0; font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.cs-lw-tabs { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; height: 86px; }
.cs-lw-tabs > .cs-lw-tab {
  display: grid; place-items: center; min-width: 0; width: 100%; height: 100%; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: #1b1f2b; color: #7b8498;
  cursor: pointer; transition: color .16s, background .16s, border-color .16s;
}
.cs-lw-tab svg { width: 17px; height: 17px; }
.cs-lw-tab:hover { background: #26323d; color: #b5d8eb; }
.cs-lw-tab.cs-lw-recent.is-active { background: #173444; border-color: #29536a; color: #77cff9; }
.cs-lw-tab.cs-lw-top.is-active { background: #392d1d; border-color: #645035; color: #f4cd85; }
.cs-lw-tab:focus-visible { outline: 2px solid #77cff9; outline-offset: 1px; }
.drop-ribbon[data-csdrop-live-widget="v1"] .drop-ribbon-track { overflow-anchor: none; }
.drop-ribbon[data-csdrop-live-widget="v1"] .drop-card { backface-visibility: hidden; }
.cs-lw-price { position: absolute; z-index: 3; top: 3px; right: 3px; max-width: calc(100% - 6px); padding: 2px 3px; border-radius: 3px; background: #171c23e8; color: #f4d49c; font-size: 8px; font-weight: 850; line-height: 1.15; white-space: nowrap; }
@keyframes cs-lw-online-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (max-width: 600px) {
  section.drop-ribbon[data-csdrop-live-widget="v1"] { grid-template-columns: 62px 32px minmax(0, 1fr) !important; gap: 4px !important; }
  section.drop-ribbon[data-csdrop-live-widget="v1"] .drop-ribbon-head.cs-lw-online { width: 62px !important; height: 76px; gap: 3px; padding: 4px 2px; }
  .cs-lw-tabs { height: 76px; }
  .cs-lw-signal { width: 23px; height: 23px; }
  .cs-lw-number { font-size: 14px; }
  .cs-lw-online-label { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-lw-signal { animation: none !important; }
  .cs-lw-tabs > .cs-lw-tab { transition: none !important; }
}

/* A local wrapper anchors the control beside the first card on every viewport. */
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area {
  position: relative;
  min-width: 0;
  height: 86px;
}
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > .drop-ribbon-track {
  height: 100%;
}
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > button.pause-toggle.cs-lw-pause {
  position: absolute !important;
  left: 4px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 20;
  display: grid !important;
  place-items: center;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #0d1723eb !important;
  color: #c6dce9 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transition: opacity .16s ease !important;
}
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-pause svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
/* Root focus and old touch flags must not make the control stick on screen. */
@media (hover: hover) and (pointer: fine) {
  .drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area:hover > button.pause-toggle.cs-lw-pause {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area.cs-lw-pause-hint > button.pause-toggle.cs-lw-pause,
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > button.pause-toggle.cs-lw-pause[aria-pressed="true"],
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > button.pause-toggle.cs-lw-pause:focus-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > button.pause-toggle.cs-lw-pause:focus-visible {
  outline: 2px solid #77cff9;
  outline-offset: 1px;
}
@media (max-width: 600px) {
  .drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .drop-ribbon[data-csdrop-live-widget="v1"] .cs-lw-feed-area > button.pause-toggle.cs-lw-pause { transition: none !important; }
}