/* New songs bell (18 Oct 2026): calm look, black and grey, ONE green for the unread count. */
.ywb { position: relative; flex: none; }
.ywb-li { display: flex; align-items: center; }
.ywb--bar { margin-left: auto; margin-right: 8px; }
.ywb-btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 999px; background: #2c2c2c; color: #FFFFFF; cursor: pointer; }
.ywb-btn:hover { background: #3a3a3a; }
.ywb-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.ywb-count { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #1DB954; color: #060606; font: 700 15px/24px 'Atkinson Hyperlegible', system-ui, sans-serif; letter-spacing: 0; text-align: center; }
.ywb-count.hidden, .ywb-panel.hidden, .ywb-mark.hidden { display: none; }
.ywb-panel { position: absolute; right: 0; top: 56px; z-index: 140; width: 380px; max-width: calc(100vw - 32px); background: #141414; border: 1px solid #333; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.7); padding: 10px; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.ywb-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px 12px; }
.ywb-title { margin: 0; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #FFFFFF; letter-spacing: 0; text-transform: none; font-variant: normal; }
.ywb-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; font-size: 28px; line-height: 1; cursor: pointer; }
.ywb-x:focus-visible { outline: 3px solid #FFFFFF; }
.ywb-list { max-height: min(60vh, 520px); overflow-y: auto; }
.ywb-status { margin: 0; padding: 10px 12px 14px; font-size: 18px; line-height: 1.4; color: #B8B8B8; }
.ywb-row { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 10px 12px; min-height: 56px; cursor: pointer; color: #FFFFFF; font-family: inherit; }
.ywb-row:hover, .ywb-row:focus-visible { background: #262626; outline: 0; }
.ywb-row:focus-visible { box-shadow: inset 0 0 0 3px #FFFFFF; }
.ywb-t { display: block; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.ywb-s { display: block; font-size: 18px; color: #B8B8B8; margin-top: 2px; letter-spacing: 0; }
.ywb-mark { display: block; width: 100%; margin-top: 8px; min-height: 48px; border: 0; border-radius: 999px; background: #2c2c2c; color: #FFFFFF; font: 700 18px/1.2 'Atkinson Hyperlegible', system-ui, sans-serif; letter-spacing: 0; cursor: pointer; }
.ywb-mark:hover { background: #3a3a3a; }
.ywb-mark:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

@media (max-width: 767px) {
  .ywb-btn { width: 44px; height: 44px; }
  /* Phone: the list hangs under the header bar, full width with a 16 px gutter. */
  .ywb-panel { position: fixed; left: 16px; right: 16px; top: 68px; width: auto; max-width: none; }
}

/* Dopamine hit: green pill on each new track, hype line, soft pulse on the badge. */
.ywb-hype { margin: 0; padding: 2px 12px 8px; font-size: 18px; line-height: 1.4; color: #FFFFFF; font-weight: 700; }
.ywb-tag { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: #1DB954; color: #060606; font: 700 15px/22px 'Atkinson Hyperlegible', system-ui, sans-serif; letter-spacing: 0; }
.ywb-btn--new { background: #1f2a22; }
.ywb-btn--new .ywb-count { animation: ywb-pulse 2.2s ease-in-out infinite; }
@keyframes ywb-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29,185,84,.6); } 50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(29,185,84,0); } }
@media (prefers-reduced-motion: reduce) { .ywb-btn--new .ywb-count { animation: none; } }