
/* 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}
.tube-app-ad{height:100%;min-height:inherit;position:relative;background:#0c2844;border-radius:12px;overflow:hidden;text-align:start;color:#fff}
.tube-app-ad>.app-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;min-height:inherit;color:#fff;text-decoration:none;background:linear-gradient(110deg,#153452,#126878)}
.tube-app-ad>.app-card[hidden]{display:none}.tube-app-ad strong{font:750 clamp(18px,2.2vw,25px)/1.3 Heebo,sans-serif;display:block}
.tube-app-ad p{margin:6px 0;font:400 13px/1.5 Heebo,sans-serif}.tube-app-ad .app-cta{background:white;color:#17334d;border-radius:25px;padding:9px 14px;white-space:nowrap;font:700 12px Heebo,sans-serif}
.tube-app-ad .app-tx{flex:1;min-width:0}.tube-app-ad .app-stores{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.tube-app-ad .app-cta{text-decoration:none;text-align:center;transition:filter .15s}.tube-app-ad .app-cta:hover{filter:brightness(.94)}.tube-app-ad .app-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tube-app-ad[data-os=ios] .st-play,.tube-app-ad[data-os=android] .st-ios{display:none}
.tube-app-ad .app-mark{width:48px;height:48px;flex-shrink:0}.tube-app-ad .app-mark img{width:100%;height:100%;object-fit:contain}
.adslot:has(.tube-app-ad){border:0;padding:0;background:transparent}.adslot .tube-app-ad{margin-top:20px}
@media(max-width:639px){.tube-app-ad>.app-card{flex-direction:column;text-align:center;justify-content:center;gap:10px}.tube-app-ad .app-tx{flex:none}.tube-app-ad .app-stores{flex-direction:row;flex-wrap:wrap;justify-content:center}.pw-ad .tube-app-ad>.app-card{flex-direction:row;text-align:start}.pw-ad .tube-app-ad .app-tx{flex:1}.pw-ad .app-mark{display:none}.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}}
