/* Tube membership and account panels. */
.tube-club-invite{text-align:center;padding:24px;max-width:480px;margin:auto}
.tube-club-invite>.i{width:52px;height:52px;color:#e52335}
.tube-club-invite h3{font-size:24px;line-height:1.4;margin:18px 0 10px}
.tube-club-invite p{line-height:1.8;margin:12px 0}
.tube-club-invite button{margin:12px auto;display:flex;justify-content:center}
.tb-sub>.i{display:block;flex-shrink:0;width:21px;height:21px;transform-origin:50% 15%}
.tb-sub>.chv{width:16px;height:16px;margin-inline-start:-2px}
.r2-pop.lv-pop .r2-menu{width:310px}
@keyframes tube-bell-ring{0%,75%,100%{transform:rotate(0)}80%,90%{transform:rotate(15deg)}85%,95%{transform:rotate(-15deg)}}
@keyframes tube-sub-glow{0%,100%{box-shadow:0 0 0 0 rgba(229,35,53,0)}50%{box-shadow:0 0 0 5px rgba(229,35,53,.13)}}
@media(prefers-reduced-motion:no-preference){
 .tb-sub[aria-pressed="false"]>.i{animation:tube-bell-ring 5s ease-in-out 3}
 .tb-sub[aria-pressed="false"]{animation:tube-sub-glow 3s ease-in-out 3}
 .card .thumb img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
 .card:hover .thumb img{transform:scale(1.035)}
 .tube-sub-row,.tube-notif{animation:tube-enter .35s ease both}
 .tb-sub,.pw-pill,.tab{transition:transform .2s,background-color .2s,box-shadow .2s}
 .tb-sub:active,.pw-pill:active{transform:scale(.96)}
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:tube-leave .16s ease both}
 ::view-transition-new(root){animation:tube-enter .25s ease both}
}
@keyframes tube-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tube-leave{to{opacity:0;transform:translateY(-5px)}}
#tube-bell{position:relative}.tube-badge{position:absolute;top:0;inset-inline-end:0;background:#d91d35;color:#fff;border-radius:20px;min-width:17px;font:700 11px Heebo,sans-serif}
.tube-has-new{position:relative}.tube-has-new:after{content:'';display:block;position:absolute;inset-inline-end:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#d91d35}
.tube-members{max-width:1000px;margin:auto;padding-block:24px}
.tube-sub-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px;padding:20px 0;border-bottom:1px solid var(--line,#ddd)}
.tube-sub-row>a{font-size:19px;font-weight:700;flex:1}
.tube-sub-row select{font:inherit;padding:8px;border-radius:10px;background:var(--paper,#fff);color:var(--ink,#222)}
.tube-pref-form{display:grid;gap:18px;padding:20px;max-width:560px;margin:auto;line-height:1.8}
.tube-pref-form label{display:flex;align-items:center;gap:12px}.tube-pref-form input{width:20px;height:20px;accent-color:#d91d35}
.tube-notif{display:grid;gap:8px;padding:18px;border-bottom:1px solid var(--line,#ddd)}
.tube-notif.unread{border-inline-start:3px solid #d91d35;background:rgba(229,35,53,.05)}
.tube-notif time,.tube-notif small{font-size:12px;opacity:.7}.tube-notif a{font-size:17px;line-height:1.6}
@media(max-width:639px){.tube-sub-row{align-items:flex-start;flex-direction:column}}
/* The bell panel on a phone fills the screen outside its popover box, so it carries the surface itself. */
@media(max-width:639px){.r2-pop .np{background:var(--up);z-index:1}}