/* ==========================================================================
   VIBE UI - new design for the "main" theme
   Layout, collapsible sidebar, video cards, typography, dark + light palettes.
   Loaded after all theme styles by app/functions/functions.darkskin.php.
   <html> classes:  vd-dark (dark palette)  vs-js  vs-open (menu expanded)
                    vs-drawer-open (menu as drawer on phones / video page)
   ========================================================================== */

/* ---------------------------------------------------------------- palette */
:root {
    --hdr: 64px;
    --sb-mini: 76px;
    --sb-open: 240px;
    --radius: 14px;
    --radius-sm: 10px;
    --font: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

    --bg: #f6f6f8;
    --bg-2: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f0f4;
    --surface-3: #e5e5eb;
    --border: rgba(15, 15, 30, .09);
    --text: #111118;
    --text-2: #585866;
    --text-3: #8a8a96;
    --accent: #ff2d55;
    --accent-2: #ff6a3d;
    --grad: linear-gradient(135deg, #ff2d55 0%, #ff6a3d 100%);
    --link: #2563eb;
    --shadow: 0 10px 30px rgba(20, 20, 40, .10);
    --glass: rgba(255, 255, 255, .86);
}
html.vd-dark {
    --bg: #0b0b0f;
    --bg-2: #101016;
    --surface: #15151c;
    --surface-2: #1d1d26;
    --surface-3: #282833;
    --border: rgba(255, 255, 255, .08);
    --text: #f4f4f7;
    --text-2: #a9a9b6;
    --text-3: #6f6f7c;
    --link: #7fa8ff;
    --shadow: 0 12px 34px rgba(0, 0, 0, .55);
    --glass: rgba(11, 11, 15, .82);
    color-scheme: dark;
}

/* ---------------------------------------------------------------- base & type */
html, body { background: var(--bg) !important; color: var(--text) !important; }
body, button, input, select, textarea, .btn, .sidebar-nav a, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; line-height: 1.5; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, h6 { color: var(--text) !important; letter-spacing: -.02em; }
a { color: var(--text); transition: color .15s ease; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
.text-muted, .help-block { color: var(--text-2) !important; }
hr { border-color: var(--border) !important; }
::selection { background: var(--accent); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- header */
.fixed-top {
    height: var(--hdr) !important;
    background: var(--glass) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.logo-wrapper, .user-quick, #show-sidebar { height: var(--hdr) !important; line-height: var(--hdr) !important; }
a#show-sidebar, #show-sidebar {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px !important; line-height: 44px !important; margin: 10px 8px 0 14px;
    padding: 0 !important; border-radius: 50%; transition: background .15s;
}
#show-sidebar:hover { background: var(--surface-2); }
#show-sidebar i { color: var(--text) !important; padding: 0 !important; font-size: 24px !important; }
a.logo, .logo, .logo a, .logo span { color: var(--text) !important; font-weight: 800 !important; letter-spacing: -.04em; font-size: 22px; }
.logo img { max-height: 34px; width: auto; }
.top-link, a.top-link, .top-link i, .top-info > a > i { color: var(--text) !important; }
.top-link:hover, .top-link:hover i { color: var(--accent) !important; }
a.top-link:before, .aaa > a:before { background-color: var(--surface-2) !important; }
.top-link svg { width: 20px; height: 20px; }
.user-quick .uav img { width: 34px !important; height: 34px !important; border-radius: 50%; margin: 0 !important; box-shadow: 0 0 0 2px var(--surface-3); }
#uplBtn, .btn-upload-now {
    background: var(--grad) !important; color: #fff !important; border-radius: 22px !important;
    width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(255, 45, 85, .35);
}
#uplBtn i { color: #fff !important; }

/* search */
.searchWidget .form-control, .searchWidget input {
    background: var(--surface-2) !important;
    border: 1px solid transparent !important;
    color: var(--text) !important;
    border-radius: 24px !important;
    height: 42px !important;
    padding-left: 18px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}
.searchWidget .form-control:focus { background: var(--bg-2) !important; border-color: var(--link) !important; }
.searchWidget .search-button { border: 0 !important; height: 42px !important; border-radius: 0 24px 24px 0 !important; overflow: hidden; }
.searchWidget .search-button button { background: transparent !important; color: var(--text-2) !important; line-height: 42px !important; }
#suggest-results ul { background: var(--surface) !important; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
#suggest-results ul li { border-color: var(--border) !important; }
#suggest-results ul li a { color: var(--text) !important; }
#suggest-results ul li a:hover { background: var(--surface-2) !important; }

/* ---------------------------------------------------------------- page layout */
html.vs-js #wrapper { transition: margin-left .22s ease; }
@media (min-width: 1024px) {
    html.vs-js body:not(.body-video):not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #wrapper {
        margin-left: var(--sb-mini) !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 28px !important;
    }
    html.vs-js.vs-open body:not(.body-video):not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #wrapper {
        margin-left: var(--sb-open) !important;
    }
}

/* ---------------------------------------------------------------- sidebar */
html.vs-js #sidebar {
    position: fixed !important;
    top: var(--hdr) !important;
    bottom: 0; left: 0;
    padding: 8px 6px 0 !important;
    background: var(--bg) !important;
    border-right: 1px solid transparent;
    box-shadow: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    color: var(--text) !important;
    transition: width .22s ease, transform .25s ease;
}
html.vs-js #sidebar .sidescroll { overflow: visible !important; height: auto !important; }
html.vs-js #sidebar .sidebar-nav { width: 100% !important; margin: 0 0 6px !important; padding: 0 0 6px; border-bottom: 1px solid var(--border); }
html.vs-js #sidebar .sidebar-nav:last-of-type { border-bottom: 0; }
html.vs-js #sidebar .sidebar-nav ul { margin: 0; padding: 0; }
html.vs-js #sidebar .sidebar-nav li { margin: 1px 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-sm); font-size: 14px !important; background: transparent !important; }
html.vs-js #sidebar .sidebar-nav li:hover { background: var(--surface-2) !important; }
html.vs-js #sidebar .sidebar-nav li.active { background: var(--surface-2) !important; }
html.vs-js #sidebar .sidebar-nav li.active > a, html.vs-js #sidebar .sidebar-nav li.active i { color: var(--text) !important; font-weight: 600; }
html.vs-js #sidebar .sidebar-nav li.active i { color: var(--accent) !important; }
html.vs-js #sidebar .sidebar-nav a {
    display: flex !important; align-items: center; gap: 18px;
    height: 42px; padding: 0 12px !important;
    color: var(--text) !important; font-size: 14px !important; font-weight: 500 !important;
    line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.vs-js #sidebar .sidebar-nav a i, html.vs-js #sidebar .sidebar-nav .iconed i { font-size: 22px !important; width: 24px; text-align: center; color: var(--text-2) !important; flex: 0 0 24px; margin: 0 !important; }
html.vs-js #sidebar .sidebar-nav .iconed { display: inline-flex; flex: 0 0 24px; width: 24px; margin: 0 !important; }
html.vs-js #sidebar .sidebar-nav li.mm-upload a { color: var(--accent) !important; }
html.vs-js #sidebar .sidebar-nav li.mm-upload i { color: var(--accent) !important; }
html.vs-js #sidebar .li-heading, html.vs-js #sidebar .user-profile-link-side { margin: 8px 6px !important; padding: 0 !important; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3) !important; background: none !important; }
html.vs-js #sidebar .user-profile-link-side a { background: var(--surface-2) !important; color: var(--text) !important; border-radius: var(--radius-sm); padding: 8px 12px !important; font-size: 14px; text-transform: none; letter-spacing: 0; }
html.vs-js #sidebar .sidebar-nav .dropdown-menu { position: static !important; float: none !important; box-shadow: none !important; background: var(--surface) !important; border-radius: var(--radius-sm) !important; margin: 4px 0 !important; }

/* desktop: icons only (default) */
@media (min-width: 1024px) {
    html.vs-js body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar {
        display: block !important;
        width: var(--sb-mini) !important;
        transform: none !important;
    }
    html.vs-js.vs-open body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar {
        width: var(--sb-open) !important;
        padding: 8px 12px 0 !important;
    }
    /* mini: only the main menu, as big icons with a small label */
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .sidebar-nav:not(.main-menu),
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .sidebar-specials,
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .li-heading,
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .load-cats,
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .blc[style],
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .sidescroll > :not(.sidebar-nav):not(.sidebar-specials) {
        display: none !important;
    }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu { border-bottom: 0; }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu a {
        flex-direction: column; justify-content: center; gap: 6px;
        height: 72px; padding: 0 2px !important;
        font-size: 10px !important; font-weight: 500 !important; text-align: center; white-space: nowrap;
    }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu a i { font-size: 24px !important; }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu .mm-label {
        display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;
    }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu li.active { background: transparent !important; }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar .main-menu li:hover { background: var(--surface-2) !important; }
}

/* drawer: phones, tablets and the video / picture / chat pages */
html.vs-js .vs-backdrop { position: fixed; top: var(--hdr); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); z-index: 1029; opacity: 0; pointer-events: none; transition: opacity .2s; }
html.vs-js.vs-drawer-open .vs-backdrop { opacity: 1; pointer-events: auto; }
@media (max-width: 1023px) {
    html.vs-js #sidebar { width: 260px !important; transform: translateX(-102%); display: block !important; background: var(--bg-2) !important; box-shadow: var(--shadow) !important; padding: 8px 12px 0 !important; }
    html.vs-js:not(.vs-drawer-open) #sidebar.hide { display: none !important; }
    html.vs-js.vs-drawer-open #sidebar { transform: none; }
    html.vs-js #wrapper { margin-left: auto !important; width: auto !important; }
}
@media (min-width: 1024px) {
    html.vs-js body.body-image #sidebar, html.vs-js body.body-conversation #sidebar, html.vs-js body.vs-menu-drawer #sidebar {
        width: 260px !important; transform: translateX(-102%); background: var(--bg-2) !important; box-shadow: var(--shadow) !important; padding: 8px 12px 0 !important;
    }
    html.vs-js:not(.vs-drawer-open) body.body-image #sidebar.hide,
    html.vs-js:not(.vs-drawer-open) body.body-conversation #sidebar.hide,
    html.vs-js:not(.vs-drawer-open) body.vs-menu-drawer #sidebar.hide { display: none !important; }
    html.vs-js.vs-drawer-open body.body-image #sidebar, html.vs-js.vs-drawer-open body.body-conversation #sidebar, html.vs-js.vs-drawer-open body.vs-menu-drawer #sidebar { display: block !important; transform: none; }
    /* a page that asks for the menu as a drawer (e.g. the Movies module): the content uses the whole width */
    html.vs-js body.vs-menu-drawer #wrapper { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; }
}

/* ---------------------------------------------------------------- section headings */
.loop-heading, h1.loop-heading, .p-home .loop-heading {
    display: flex !important; align-items: center; gap: 12px;
    margin: 30px 0 16px !important; padding: 0 !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important;
    text-transform: none !important; letter-spacing: -.02em;
    color: var(--text) !important; border: 0 !important; background: none !important;
}
.loop-heading > span { display: inline-flex; align-items: center; color: var(--text) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.loop-heading > span:before { content: ""; display: inline-block; width: 4px; height: 20px; border-radius: 3px; background: var(--grad); margin-right: 12px; }
.loop-heading a, a.home-seeall {
    margin-left: auto; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0;
    color: var(--text) !important; background: var(--surface-2); padding: 7px 14px; border-radius: 20px; text-transform: none;
    transition: background .15s;
}
.loop-heading a:hover, a.home-seeall:hover { background: var(--surface-3); color: var(--text) !important; }

/* ---------------------------------------------------------------- video card grid */
html body .vgrid:not(.hide) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 30px 18px;
    margin: 0 0 12px !important;
    text-align: left !important;
    width: 100% !important;
}
html body .vgrid:after { display: none !important; }
html body .vgrid > :not(.video) { grid-column: 1 / -1; }
html body .vgrid > .video {
    float: none !important; width: auto !important; min-width: 0;
    margin: 0 !important; padding: 0 !important;
    aspect-ratio: auto !important; height: auto !important;
    background: transparent !important; border: 0 !important;
}
html body .vgrid .video-thumb {
    position: relative !important; display: block !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    aspect-ratio: 16 / 9; border-radius: var(--radius) !important;
    overflow: hidden; background: var(--surface-2) !important;
    transition: border-radius .2s ease, box-shadow .2s ease;
}
html body .vgrid .video:hover .video-thumb { box-shadow: var(--shadow); }
html body .vgrid .video-thumb .clip-link,
html body .vgrid .video-thumb .clip { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; display: block; }
/* the "tiny thumbnail on first load": the image now always fills the 16:9 box */
html body .vgrid .video-thumb img {
    position: absolute !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
html body .vgrid .video:hover .video-thumb img { transform: scale(1.035); }
html body .vgrid .video-thumb .vertical-align, html body .vgrid .video-thumb .overlay { display: none !important; }
html body .vgrid .video-thumb .timer {
    position: absolute; right: 8px; bottom: 8px; z-index: 3;
    background: rgba(0, 0, 0, .78) !important; color: #fff !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important;
    padding: 4px 6px !important; border-radius: 6px; letter-spacing: .02em;
}
html body .vgrid .video-thumb .laterit {
    position: absolute; top: 8px; right: 8px; z-index: 4; opacity: 0; transition: opacity .15s;
    background: rgba(0, 0, 0, .7); border-radius: 8px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; color: #fff !important;
}
html body .vgrid .video:hover .laterit { opacity: 1; }
html body .vgrid .video-thumb .laterit i { font-size: 20px !important; width: auto; height: auto; }
html body .vgrid .video-data { height: auto !important; padding: 12px 2px 0 !important; overflow: visible !important; }
html body .vgrid .video h4, html body .vgrid .video-title {
    margin: 0 0 6px !important; padding: 0 !important; max-height: none !important; height: auto !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 15px !important; line-height: 1.38 !important;
}
html body .vgrid .video h4 a, html body .vgrid .video-title a {
    font-family: var(--font) !important; font-size: 15px !important; font-weight: 600 !important;
    color: var(--text) !important; padding: 0 !important; height: auto !important; letter-spacing: -.01em;
}
html body .vgrid .video h4 a:hover { color: var(--accent) !important; }
html body .vgrid .video ul.stats { display: flex; flex-wrap: wrap; align-items: center; margin: 0 !important; padding: 0 !important; }
html body .vgrid .video ul.stats > li {
    display: inline-flex !important; align-items: center; width: auto !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--text-2) !important;
}
html body .vgrid .video ul.stats > li + li:not(.uploaderlink):before { content: "\2022"; margin: 0 6px; color: var(--text-3); }
html body .vgrid .video ul.stats > li.uploaderlink { flex: 0 0 100%; margin-bottom: 1px !important; }
html body .vgrid .video ul.stats > li.uploaderlink + li:before { display: none; }
html body .vgrid .video .uploaderlink a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2) !important; font-weight: 500 !important; opacity: 1 !important; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; }
html body .vgrid .video .uploaderlink a:hover { color: var(--text) !important; }
html body .vgrid .video .vg-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
html body .vgrid .vSeen { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); z-index: 3; }
html body .vgrid .vSeen:after { display: none; }
@media (max-width: 600px) {
    html body .vgrid:not(.hide) { grid-template-columns: 1fr; gap: 22px; }
    html body .vgrid .video-thumb { border-radius: 12px !important; }
}

/* hover preview layer */
.vp-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: #000; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.vp-layer.is-on { opacity: 1; }
.vp-layer video, .vp-layer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; }
.vp-layer iframe { transform: scale(1.02); }
.vp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); z-index: 3; }
.vp-bar.go { width: 100%; transition: width 8s linear; }
.vp-playing .timer { opacity: 0; }

/* ---------------------------------------------------------------- homepage blocks */
#home-content .loop-content { border: 0 !important; }
.home-user-block {
    margin: 34px 0 10px; padding: 18px 18px 8px;
    border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
    position: relative; overflow: hidden;
}
.home-user-block:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.home-user-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.home-user-head .hu-link { display: flex; align-items: center; gap: 12px; color: var(--text) !important; min-width: 0; }
.home-user-head img, .hu-noav { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; }
.hu-noav { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 18px; text-transform: uppercase; }
.hu-txt { display: flex; flex-direction: column; min-width: 0; }
.hu-txt small { font-size: 12px; color: var(--text-2) !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.hu-txt strong { font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-user-head .home-seeall { margin-left: auto; }
.home-user-block .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
p.empty-content { background: var(--surface) !important; border: 1px dashed var(--border) !important; color: var(--text-2) !important; border-radius: var(--radius); padding: 24px !important; text-align: center; }
.homeLoader { display: none; }

/* skeletons */
.vpreload > span, .prelist > span, .prelist-right > span, .prelist-left > span {
    background: var(--surface-2) !important;
    background-image: linear-gradient(90deg, var(--surface-2) 8%, var(--surface-3) 18%, var(--surface-2) 33%) !important;
    background-size: 800px 104px !important; border-radius: 8px;
}

/* ---------------------------------------------------------------- shorts shelf */
.shorts-shelf .loop-heading > span:before { background: var(--grad); }
.short-card .short-thumb { border-radius: 14px !important; box-shadow: none; transition: box-shadow .2s; }
.short-card:hover .short-thumb { box-shadow: var(--shadow); }
.short-card .short-title { color: var(--text); font-size: 14px; font-weight: 600; }
.short-card .short-views { color: var(--text-2); opacity: 1; }
.short-card .short-badge { background: var(--grad) !important; font-weight: 700; letter-spacing: .02em; }

/* ---------------------------------------------------------------- boxes & panels */
.isBoxed, .oboxed.isBoxed, .panel, .widget, .well, .p-profile .widget-header, .p-profile .widget-footer,
.page-aside, .page-aside .page-aside-inner, .page-aside-switch, .chat-box, .app-message-chats, .app-message-input, .emoji-holder,
.list-header, .blog-image, .alertable, .p-image .playlistvibe, .black-slider, .vTrends, .cats, .img-inner {
    background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important;
}
.isBoxed, .panel, .widget, .well { border-radius: var(--radius) !important; box-shadow: none !important; border: 1px solid var(--border) !important; }
.panel-heading, .panel-footer, .panel-body { background: transparent !important; border-color: var(--border) !important; }
.BoxedFooter, .item-in-list, .img-owner, .playlist-head, .red-nav, .red-nav li, .p-manager h1, .user-container, .app-message-chats .conv-user-header,
.body-channels #ChannelResults .video, #media-info, .user-media-actions, a#revealDesc, a#revealRelated { border-color: var(--border) !important; }
.red-nav li a { color: var(--text-2) !important; }
.red-nav li.active a, .red-nav li a:hover { color: var(--text) !important; }

/* ---------------------------------------------------------------- forms */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"],
textarea, select, .minict_wrapper, .tagsinput, .emoj, .emoj.form-control, .emoj .emoj-editor, .withtags {
    background-color: var(--bg-2) !important; border: 1px solid var(--border) !important;
    color: var(--text) !important; box-shadow: none !important; border-radius: var(--radius-sm) !important;
}
.form-control { min-height: 42px; }
.form-control:focus, textarea:focus, input:focus, select:focus { border-color: var(--link) !important; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--text-3) !important; }
.input-group-addon { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; }
.control-label, label { color: var(--text) !important; font-weight: 600; }
select option { background: var(--surface); color: var(--text); }
.minict_wrapper ul, .minict_wrapper ul li, .minict_wrapper ul li.minict_empty, .minict_wrapper ul li.disabled { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.minict_wrapper ul li:hover, .minict_wrapper ul li.selected, .minict_wrapper ul li.highlighted { background: var(--surface-2) !important; color: var(--text) !important; }
.minict_wrapper ul li.minict_group { background: var(--surface-2) !important; color: var(--text-2) !important; }
.minict_wrapper:after, .minict_wrapper .minict_reset { color: var(--text-2) !important; }
.tagsinput span.tag { background: var(--surface-2) !important; color: var(--text) !important; border: 0 !important; border-radius: 14px !important; }
#dropzoned, .dropzoned { border: 2px dashed var(--surface-3) !important; background: var(--surface) !important; border-radius: 20px !important; padding: 30px !important; transition: border-color .2s; }
#dropzoned:hover { border-color: var(--accent) !important; }
.uploading { background-color: var(--surface-2) !important; border-radius: 10px; overflow: hidden; }
.uploading .upload-bar { background: var(--grad) !important; }
.ckbx-switch label:before, .ckbx-switch input[type="checkbox"]:checked + label:before { background: var(--surface-3) !important; }
.shorts-upload-box { border: 1px solid var(--border) !important; background: var(--surface) !important; border-radius: var(--radius) !important; padding: 14px 16px !important; }

/* share / upload tabs */
.share-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; width: fit-content; max-width: 100%; margin: 6px 0 18px; }
.share-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 13px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.share-tab i { font-size: 20px; }
.share-tab:hover { background: var(--surface-2); color: var(--text) !important; }
.share-tab.is-active { background: var(--grad); color: #fff !important; box-shadow: 0 6px 18px rgba(255, 45, 85, .3); }
.share-tab.is-active i { color: #fff; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 18px; transition: background .15s, transform .1s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
.btn-default, .btn-default:focus, .button, .btn-outline.btn-default { background: var(--surface-2) !important; border: 1px solid transparent !important; color: var(--text) !important; }
.btn-default:hover, .button:hover, .btn-outline.btn-default:hover, .btn-default.active { background: var(--surface-3) !important; color: var(--text) !important; }
.btn-primary, .btn-primary:focus { background: var(--grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(255, 45, 85, .28); }
.btn-primary:hover, .btn-primary:active { filter: brightness(1.08); color: #fff !important; }
.btn-primary[disabled] { opacity: .5; box-shadow: none; }
.btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-success { background: #16a34a !important; border-color: #16a34a !important; }

/* ---------------------------------------------------------------- menus, modals, tabs, tables, alerts */
.dropdown-menu, .popover, .emoj .emoj-picker, .dropdown-menu.textcomplete-dropdown[data-strategy="emoj"], .emoj .emoj-picker .emoj-scroll-area .emoj-category-title {
    background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow) !important;
}
.dropdown-menu { border-radius: var(--radius) !important; padding: 6px !important; overflow: hidden; }
.dropdown-menu > .drop-head, .dropdown-menu > .drop-footer { background: transparent !important; border-color: var(--border) !important; }
.dropdown-menu > li > a, .dropdown-menu li a { color: var(--text) !important; border: 0 !important; border-radius: 8px; padding: 8px 12px !important; letter-spacing: 0 !important; font-weight: 500; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--surface-2) !important; color: var(--text) !important; }
.dropdown-menu .divider { background: var(--border) !important; margin: 6px 0 !important; }
.emoj .emoj-picker .emoj-filters { background: var(--surface-2) !important; }
.emoj .emoj-picker .emoj-filters .emoj-filter.active, .emoj .emoj-picker .emoj-scroll-area .emojibtn:hover { background: var(--surface-3) !important; }
.modal-content { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; box-shadow: var(--shadow) !important; }
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-backdrop.in { opacity: .7 !important; }
.close { color: var(--text) !important; text-shadow: none !important; opacity: .6; }
.nav-tabs { border-color: var(--border) !important; }
.nav-tabs > li > a { color: var(--text-2) !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; font-weight: 600; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li > a:hover { color: var(--text) !important; border-bottom-color: var(--accent) !important; background: transparent !important; }
.p-dashboard #DashSidebar .nav-tabs-vertical .nav-tabs, .p-manager #DashSidebar .nav-tabs-vertical .nav-tabs { border-color: var(--border) !important; background: var(--surface) !important; border-radius: var(--radius); }
.table, .table > thead > tr > th, .table > tbody > tr > td { border-color: var(--border) !important; color: var(--text) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2) !important; }
.list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.app-message-list .list-group .list-group-item:hover, .app-message-list .list-group .list-group-item.active { background: var(--surface-2) !important; }
.pagination > li > a, .pagination > li > span { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; }
.tooltip-inner { background: var(--text) !important; color: var(--bg) !important; border-radius: 6px; font-weight: 500; }
.badge, .label-default { background: var(--surface-3) !important; color: var(--text) !important; }
.msg-info, .msg-win, .msg-warning, .alert { border-radius: var(--radius) !important; border: 1px solid var(--border) !important; padding: 14px 16px !important; }
.msg-info, .alert-info { background: rgba(37, 99, 235, .12) !important; color: var(--text) !important; }
.msg-win, .alert-success { background: rgba(22, 163, 74, .14) !important; color: var(--text) !important; }
.msg-warning, .alert-warning, .alert-danger { background: rgba(220, 38, 38, .13) !important; color: var(--text) !important; }
#toast-container > div { border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; opacity: 1 !important; }

/* ---------------------------------------------------------------- video page */
body.body-video.isdevice.noheader #video-content, .video-holder.gofullscreen { background: #000 !important; }
.video-holder, #video-content .video-player { border-radius: 16px; overflow: hidden; }
.video-under h1, #media-info h1 { color: var(--text) !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.02em; }
.user-media-actions a, .user-media-actions a i, .like-views, .statistics > li > span, .cctotal { color: var(--text) !important; }
.likes-bar, .achip, .likes-holder, .vibe-interactions .aaa > a { background: var(--surface-2) !important; border: 0 !important; color: var(--text) !important; border-radius: 22px !important; }
.likes-bar .likes-success { background: var(--text) !important; }
.likes-danger { background-color: var(--text-3) !important; }
.isLiked i, i.isActive { color: var(--accent) !important; }
.user-box h3, .user-box h3 a, .user-box-txt a { color: var(--text) !important; font-weight: 700; }
.user-box-numbers, .user-box-txt p { color: var(--text-2) !important; }
.video-description, #media-description { background: var(--surface-2) !important; color: var(--text) !important; border-radius: var(--radius) !important; padding: 14px 16px; line-height: 1.6; }
#media-description a { color: var(--link) !important; }
.thetags a { display: inline-block; background: var(--surface-2); color: var(--link) !important; border-radius: 14px; padding: 3px 11px; margin: 0 4px 6px 0; font-size: 13px; }
.share-body li a { color: var(--text) !important; }
.video-under-right, .rur, .related, .video-related, .related-with-list { background: transparent !important; border-color: transparent !important; }
.video-related > ul > li, .video-related > ul > li:first-child { border-color: transparent !important; }
.video-related li, .video-related .item-post { border-radius: 12px; transition: background .15s; }
.video-related li:hover { background: var(--surface) !important; }
.video-related .data .title a, .video-related li a, .video-player-sidebar .data .title a { color: var(--text) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.35 !important; }
.video-related .usermeta, .video-related .usermeta a, .video-related .usermeta p, .video-player-sidebar .data .usermeta a { color: var(--text-2) !important; font-size: 12px !important; }
.video-related .thumb, .video-related .clip, .video-related .thumb img { border-radius: 10px !important; overflow: hidden; }
.video-related .thumb { position: relative; }
.PlayUP { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; }
.video-player-sidebar, .player-in-list, .playlistvibe { background: var(--surface) !important; border-radius: var(--radius); }
.video-player-sidebar li.playingNow, .video-player-sidebar li:hover, .playlist-page-videos li:hover { background: var(--surface-2) !important; }
.playlist-page-videos ol li { border-color: var(--border) !important; }
.vside-title .material-icons { color: var(--accent) !important; }
.vside-title a:not(.vside-owner) { background: var(--surface-2); padding: 5px 12px; border-radius: 16px; color: var(--text) !important; font-size: 12px; }

/* comments */
.comments li .name, .comments li .name a { color: var(--text) !important; font-weight: 600; }
.comments li .message .body { color: var(--text) !important; line-height: 1.55; }
.comments .msg-footer a, .comments .msg-footer i, .reply .addEmComment { color: var(--text-2) !important; }
.comments img.avatar { border: 0 !important; border-radius: 50%; }
li.indanger { background: rgba(220, 38, 38, .1) !important; }

/* profile / channels */
.p-profile .profile-user, .profile-hero .cute h1 { color: var(--text) !important; }
.user-timeline .user-timeline-time, .user-timeline:before { background-color: var(--surface-3) !important; color: var(--text) !important; }
.user-timeline .user-timeline-icon:after, .user-timeline .t-item:before { background: var(--bg) !important; }
.user-small-list img, .cats img { border-color: var(--border) !important; }
#ChannelResults .video-inner { background: var(--surface) !important; border-radius: var(--radius); }

/* ---------------------------------------------------------------- misc + footer */
.video-thumb .timer, .thumb .timer { background: rgba(0, 0, 0, .78) !important; color: #fff !important; border-radius: 6px; }
.backtotop { background: var(--surface-2) !important; border-radius: 50%; }
.backtotop i { color: var(--text) !important; }
.infinite-scroll-error { background: var(--surface) !important; color: var(--text-2) !important; border-radius: var(--radius); }
.loadspinner:after, .cp-spinner, .cp-flip { background: var(--accent) !important; }
#footer, #footer .footer-holder, .footer-holder, .footer-inner { background: var(--bg) !important; border-top: 1px solid var(--border) !important; color: var(--text-2) !important; }
#footer a { color: var(--text-2) !important; }
#footer a:hover { color: var(--text) !important; }

/* ==========================================================================
   Update 4
   ========================================================================== */

/* ---------- light / dark switch icon (shows the mode you can switch TO) */
.vibe-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin: 0 6px !important; transition: background .15s; }
.vibe-theme-toggle:hover { background: var(--surface-2); }
.vibe-theme-toggle .vt-ico { width: 19px; height: 19px; }
html.vd-dark .vibe-theme-toggle .vt-moon, html:not(.vd-dark) .vibe-theme-toggle .vt-sun { display: none; }

/* ---------- homepage uses the full width (old theme limited it to 1640px) */
#home-content, .p-home #home-content, .page.p-home { max-width: none !important; width: 100% !important; float: none; }
#home-content.main-holder { padding-left: 0 !important; padding-right: 0 !important; }
html.vs-js .page { width: 100%; }

/* ---------- upload pages: Shorts gets the same centred box as Video / Music / Picture */
.page.p-addshort { max-width: 900px; margin: 25px auto; }
.page.p-addvideo, .page.p-share, .page.p-addmusic, .page.p-addimage, .page.p-addshort { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }

/* ---------- grid extras used by profile lists */
html body .vgrid > br, html body .vgrid .clearfix { display: none !important; }
html body .vgrid .video-inner { background: transparent !important; padding: 0 !important; border: 0 !important; }
html body .vgrid .video-data p.small { display: none !important; }
html body .vgrid .video-thumb .heartit { display: none !important; }
html body .vgrid .vSeen { font-size: 0 !important; color: transparent !important; }

/* ---------- profile / channel page */
.page.p-profile { max-width: 1400px !important; margin: 24px auto 40px !important; width: 100%; }
#profile-body { margin: 0 !important; }
#profile-body #playlist-content.isBoxed {
    position: relative; overflow: hidden;
    border-radius: 22px !important; padding: 0 !important; margin: 0 0 18px !important;
    background: var(--surface) !important; border: 1px solid var(--border) !important;
}
#profile-body #playlist-content.isBoxed:before { content: ""; display: block; height: 120px; background: var(--grad); opacity: .9; }
#profile-body .playlist-listing-head { display: flex !important; align-items: flex-end; gap: 24px; padding: 0 28px 24px !important; margin-top: -64px !important; flex-wrap: wrap; }
#profile-body .playlist-listing-media-left { flex: 0 0 auto; float: none !important; width: auto !important; margin: 0 !important; }
#profile-body .playlist-listing-image { width: 132px !important; height: 132px !important; border-radius: 50% !important; object-fit: cover; border: 5px solid var(--surface) !important; box-shadow: var(--shadow); background: var(--surface-2); }
#profile-body .playlist-listing-media-body { flex: 1 1 320px; min-width: 0; float: none !important; width: auto !important; padding: 0 !important; }
#profile-body .playlist-listing-media-body > p { color: var(--text-2) !important; margin: 0 0 2px !important; font-weight: 500; }
#profile-body h1.playlist-listing-title { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; margin: 0 0 8px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--text) !important; }
#profile-body h1.playlist-listing-title .pull-right { float: none !important; margin-left: auto !important; display: flex; align-items: center; gap: 10px; }
#profile-body h1.playlist-listing-title .pull-right a { margin: 0 !important; }
#profile-body .playlist-listing-description { color: var(--text-2) !important; font-size: 14px; max-width: 760px; margin-bottom: 12px; }
#profile-body .playlist-listing-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
#profile-body .playlist-listing-btns > a, #profile-body .playlist-listing-btns > span, #profile-body .playlist-listing-btns > div {
    display: inline-flex !important; align-items: center; gap: 6px; float: none !important; margin: 0 !important;
    background: var(--surface-2); color: var(--text) !important; border-radius: 20px; padding: 6px 12px !important; font-size: 13px; font-weight: 600;
}
#profile-body .playlist-listing-btns i { font-size: 18px !important; color: var(--text-2) !important; margin: 0 !important; }
#profile-body .playlist-listing-btns .playlist-listing-play { background: var(--grad) !important; color: #fff !important; }
#profile-body .playlist-listing-btns .playlist-listing-play i { color: #fff !important; }
#profile-body .profile-content { background: transparent !important; }
#profile-body .profile-hero { min-height: 0 !important; height: auto !important; padding: 0 !important; background: none !important; }
#profile-body .profile-social a { color: var(--text-2) !important; margin-left: 10px; }
#profile-nav.red-nav { border: 0 !important; margin: 4px 0 14px !important; background: transparent !important; }
#profile-nav.red-nav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
#profile-nav.red-nav li { float: none !important; border: 0 !important; margin: 0 !important; background: transparent !important; }
#profile-nav.red-nav li a { display: block; padding: 12px 16px !important; font-weight: 600; font-size: 14px; color: var(--text-2) !important; border-bottom: 2px solid transparent; }
#profile-nav.red-nav li.active a { color: var(--text) !important; border-bottom-color: var(--accent); }
#profile-nav.red-nav li a:hover { color: var(--text) !important; }
#profile-body .panel { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#profile-body .loop-heading .btn { margin-left: auto; float: none !important; }
#profile-body #videolist-content.usered { width: 100%; }
@media (max-width: 700px) {
    #profile-body .playlist-listing-head { padding: 0 16px 18px !important; gap: 14px; }
    #profile-body .playlist-listing-image { width: 96px !important; height: 96px !important; }
    #profile-body h1.playlist-listing-title { font-size: 22px !important; }
}

/* ---------- dashboard / media studio */
.page.p-dashboard, .page.p-manager { max-width: 1400px; margin: 20px auto 40px !important; }
#theHolder { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; }
#theHolder > #DashSidebar, #theHolder > #DashContent { float: none !important; width: 100% !important; max-width: 100%; padding: 0; }
#DashSidebar.tab-pane, #DashContent.tab-pane { display: block !important; }
.dash-nav-wrap { background: var(--surface) !important; border: 1px solid var(--border); border-radius: 20px; padding: 18px 18px 12px !important; }
.dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-me { display: flex; align-items: center; gap: 12px; color: var(--text) !important; min-width: 0; }
.dash-me img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.dash-me span { display: flex; flex-direction: column; min-width: 0; }
.dash-me small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2) !important; font-weight: 600; }
.dash-me strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-upload { margin-left: auto; display: inline-flex !important; align-items: center; gap: 6px; }
.dash-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.dash-tab i { font-size: 19px; }
.dash-tab:hover { background: var(--surface-2); color: var(--text) !important; }
.dash-tab.is-active { background: var(--surface-2); color: var(--text) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.dash-tab.is-active i { color: var(--accent); }
#DashContent.isBoxed { border-radius: 20px !important; padding: 22px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; }
#DashContent > .row, #DashContent .odet { margin: 0 !important; }
#DashContent h2, #DashContent h1 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em; margin: 22px 0 12px !important; }
#DashContent h2:first-child { margin-top: 0 !important; }
#DashContent .msg-content { border-radius: 14px !important; margin-bottom: 14px; }
#DashContent .table > tbody > tr > td, #DashContent .table > thead > tr > th { vertical-align: middle !important; padding: 12px 10px !important; }
#DashContent .table img { border-radius: 8px; }
#DashContent .list-header { border-radius: 12px; padding: 10px 12px !important; }

/* carousel rows (dashboard "watch again", homepage carousels) */
.owl-carousel .video { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; }
.owl-carousel .video-thumb { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; border-radius: 12px !important; overflow: hidden; background: var(--surface-2) !important; }
.owl-carousel .video-thumb .clip-link, .owl-carousel .video-thumb .clip { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; }
.owl-carousel .video-thumb img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover; }
.owl-carousel .video-thumb .overlay, .owl-carousel .video-thumb .vertical-align { display: none !important; }
.owl-carousel .video-data { height: auto !important; padding: 10px 2px 0 !important; }
.owl-carousel .video h4, .owl-carousel .video-title { margin: 0 0 4px !important; max-height: none !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.owl-carousel .video h4 a { font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; }
.owl-carousel .video ul.stats { margin: 0 !important; padding: 0 !important; }
.owl-carousel .video ul.stats > li { font-size: 12px !important; color: var(--text-2) !important; font-weight: 400 !important; }
.owl-carousel .video .uploaderlink a { color: var(--text-2) !important; font-size: 12px !important; }
.owl-theme .owl-nav [class*="owl-"], .owl-nav button { background: var(--surface-2) !important; color: var(--text) !important; border-radius: 50% !important; }
.owl-theme .owl-dots .owl-dot span { background: var(--surface-3) !important; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--accent) !important; }

/* ==========================================================================
   Update 5
   ========================================================================== */

/* ---------- sidebar: no slimScroll rail/bar; icons-only menu has no scrollbar at all */
html.vs-js #sidebar .slimScrollDiv { height: auto !important; overflow: visible !important; width: auto !important; }
html.vs-js #sidebar .slimScrollBar, html.vs-js #sidebar .slimScrollRail { display: none !important; }
html.vs-js #sidebar { scrollbar-width: thin; }
html.vs-js #sidebar::-webkit-scrollbar { width: 6px; }
@media (min-width: 1024px) {
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar {
        overflow: hidden !important;
        scrollbar-width: none;
    }
    html.vs-js:not(.vs-open) body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar::-webkit-scrollbar { display: none; width: 0; }
    /* expanded menu: scrollbar only while hovering it */
    html.vs-js.vs-open body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar { scrollbar-color: transparent transparent; }
    html.vs-js.vs-open body:not(.body-image):not(.body-conversation):not(.vs-menu-drawer) #sidebar:hover { scrollbar-color: var(--surface-3) transparent; }
}

/* ---------- bigger video cards on the homepage and lists (about 5 per row on a 1920px screen) */
html body .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 34px 20px; }
.home-user-block .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
html body .vgrid .video h4 a, html body .vgrid .video-title a { font-size: 16px !important; }
html body .vgrid .video h4, html body .vgrid .video-title { font-size: 16px !important; }
@media (max-width: 700px) { html body .vgrid:not(.hide) { grid-template-columns: 1fr; } }

/* ---------- Shorts shelf: slightly bigger cards */
.short-card { width: 205px !important; }
.shorts-row { gap: 16px !important; }
@media (max-width: 600px) { .short-card { width: 44vw !important; } }

/* ---------- premium channel blocks on the homepage */
.home-user-block.is-premium:before { background: linear-gradient(135deg, #f5c542 0%, #ff9f1a 100%); }
.hu-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, #f5c542 0%, #ff9f1a 100%); color: #1a1200; vertical-align: middle; }

/* ==========================================================================
   Update 6
   ========================================================================== */

/* ---------- "already watched" marker: thin bar at the BOTTOM of the thumbnail
   (the theme placed it at the top, which looked like a red line across the picture) */
html body .vgrid .vSeen, .owl-carousel .vSeen, .vside-list .vSeen {
    position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; min-width: 0 !important; height: 3px !important;
    background: var(--accent) !important; opacity: .9 !important;
    font-size: 0 !important; color: transparent !important; z-index: 3; border-radius: 0 !important;
}
html body .vgrid .vSeen:after, .owl-carousel .vSeen:after, .video-related .vSeen:after { display: none !important; content: none !important; }
.video-related .vSeen {
    position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: 3px !important; background: var(--accent) !important; font-size: 0 !important;
}

/* ---------- login / forgot password / search panels (Bootstrap made them white) */
.modal-sidebar, .modal-dialog.modal-sidebar {
    background: var(--surface) !important; color: var(--text) !important;
    border-left: 1px solid var(--border); box-shadow: -20px 0 60px rgba(0, 0, 0, .35) !important;
}
.modal-sidebar .modal-content { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.modal-sidebar .modal-title { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--text) !important; }
.modal-sidebar .fs300, .modal-sidebar .odet { color: var(--text-2) !important; }
.modal-sidebar .panel, .modal-sidebar .panel-transparent { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.modal-sidebar button.close { color: var(--text) !important; font-size: 30px; opacity: .7; }
.modal-sidebar a:not(.btn) { color: var(--link) !important; }
.modal-sidebar .modal-footer .btn-default { background: var(--surface-2) !important; }
.modal-sidebar .social-facebook, .modal-sidebar .social-google-plus { border-radius: 22px !important; }
/* material inputs: filled boxes with a label above, instead of the white underline style */
.form-material .form-control {
    background-image: none !important; background-color: var(--bg-2) !important;
    border: 1px solid var(--border) !important; border-radius: 12px !important;
    height: 46px !important; padding: 12px 14px !important; color: var(--text) !important;
}
.form-material .form-control:focus { border-color: var(--link) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important; }
.form-material.floating { margin-top: 26px !important; }
.form-material.floating .floating-label, .form-material .floating-label {
    position: absolute; top: -22px !important; left: 4px !important;
    font-size: 13px !important; font-weight: 600; color: var(--text-2) !important;
    transform: none !important; -webkit-transform: none !important;
}
.checkbox-custom label { color: var(--text) !important; }
.checkbox-custom label::before { background: var(--bg-2) !important; border-color: var(--surface-3) !important; }
.modal-backdrop { background: #000 !important; }

/* ---------- update 7: hover preview also on Shorts cards and side lists */
.vs-thumb, .vl-thumb, .short-card .short-thumb { position: relative !important; overflow: hidden; }
.short-card .vp-layer, .vs-thumb .vp-layer, .vl-thumb .vp-layer { border-radius: inherit; }
.vp-playing .short-badge, .vp-playing .vl-time { opacity: 0; }

/* ---------- /login and /register: a centred card instead of the full page */
.page.p-login, .page.p-register { max-width: 480px !important; width: 100% !important; margin: 40px auto 60px !important; float: none !important; }
.p-login #default-content, .p-register #default-content {
    float: none !important; width: 100% !important;
    background: var(--surface) !important; border: 1px solid var(--border);
    border-radius: 22px; padding: 30px 28px 24px !important; box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.p-login #default-content:before, .p-register #default-content:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.p-login #default-content h1, .p-login #default-content h2, .p-register #default-content h2 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 0 6px !important; }
.p-login .odet, .p-register .odet { margin: 0 0 12px !important; color: var(--text-2) !important; }
.p-register #default-content .panel, .p-register #default-content .panel-body { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.p-register #default-content .col-md-6.col-md-offset-3 { width: 100% !important; margin: 0 !important; float: none !important; padding: 0 !important; }
.p-login .form-signin .row[style] { padding: 10px 0 !important; }
.p-login #default-content .row, .p-register #default-content .row { margin-left: 0 !important; margin-right: 0 !important; }
.p-login #default-content .btn-block, .p-register #default-content .btn-block { height: 46px; font-size: 15px; }

/* ==========================================================================
   Update 8 - video page: title, actions, channel, description, tags
   ========================================================================== */
.video-under .oboxed.odet { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.video-under .vibe-interactions { margin: 0 !important; }
.video-under .user-media-actions { display: flex !important; flex-direction: column; gap: 12px; padding: 16px 0 4px !important; border: 0 !important; float: none !important; width: 100% !important; }
.video-under .like-views { float: none !important; width: 100% !important; padding: 0 !important; }
.video-under .like-views h1 { margin: 0 !important; font-size: 22px !important; line-height: 1.3 !important; font-weight: 800 !important; letter-spacing: -.02em; }
.video-under .user-media-actions > br { display: none; }

/* action buttons: one row of pills */
.video-under .interaction-icons { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.video-under .interaction-icons .aaa { float: none !important; display: inline-flex !important; margin: 0 !important; padding: 0 !important; border: 0 !important; position: relative; }
.video-under .interaction-icons .aaa > a {
    display: inline-flex !important; align-items: center; gap: 7px;
    height: 40px; padding: 0 16px !important; margin: 0 !important;
    background: var(--surface-2) !important; color: var(--text) !important;
    border-radius: 22px !important; border: 0 !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
    transition: background .15s, transform .1s;
}
.video-under .interaction-icons .aaa > a:hover { background: var(--surface-3) !important; }
.video-under .interaction-icons .aaa > a:active { transform: scale(.96); }
.video-under .interaction-icons .aaa > a i { font-size: 20px !important; margin: 0 !important; color: inherit !important; }
.video-under .interaction-icons .aaa > a span { display: inline !important; margin: 0 !important; color: inherit !important; }
.video-under .interaction-icons .aaa > a:before { display: none !important; }
/* like | dislike joined in one pill */
.video-under .likes-bar { display: inline-flex !important; align-items: center; float: none !important; background: var(--surface-2) !important; border-radius: 22px !important; overflow: hidden; padding: 0 !important; margin: 0 !important; width: auto !important; }
.video-under .likes-bar .aaa > a { border-radius: 0 !important; background: transparent !important; }
.video-under .likes-bar .aaa > a:hover { background: var(--surface-3) !important; }
.video-under .likes-bar .aaa + .aaa > a { border-left: 1px solid var(--border) !important; }
.video-under .likes-bar .isLiked, .video-under .likes-bar .isLiked i { color: var(--accent) !important; }
.video-under .like-box { display: none !important; }
#social-sharer { background: var(--surface-2) !important; }

/* channel row */
.vd-channel { display: flex !important; align-items: center; gap: 14px; margin: 14px 0 14px !important; padding: 0 !important; border: 0 !important; width: 100%; }
.vd-av { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px transparent; transition: box-shadow .2s; }
.vd-av:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.vd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-ch-txt { display: flex; flex-direction: column; min-width: 0; }
.vd-ch-name { color: var(--text) !important; font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-ch-name:hover { color: var(--accent) !important; }
.vd-ch-name img, .vd-ch-name i { vertical-align: -3px; }
.vd-ch-subs { font-size: 13px; color: var(--text-2); }
.vd-sub { margin-left: 18px; }
.vd-sub .btn-subscribing { margin: 0 !important; }
.vd-sub .subscriber {
    display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 20px !important;
    border-radius: 22px !important; border: 0 !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.vd-sub .subscriber.social-google-plus { background: var(--text) !important; color: var(--bg) !important; }
.vd-sub .subscriber.social-google-plus:hover { filter: brightness(.9); }
.vd-sub .subscriber.btn-default { background: var(--surface-2) !important; color: var(--text) !important; }
.vd-sub .subscriber i { font-size: 16px; }
.vd-sub .separator, .vd-sub .kcounter { display: none !important; }

/* description card */
.vd-desc {
    background: var(--surface-2) !important; border: 0 !important; border-radius: 14px !important;
    padding: 14px 16px 12px !important; margin: 0 0 18px !important; transition: background .15s;
}
.vd-desc:hover { background: var(--surface-3) !important; }
.vd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.vd-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.vd-stats i { font-size: 18px; color: var(--text-2); }
.vd-stat-cats { flex-wrap: wrap; gap: 6px !important; }
a.vd-chip {
    display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 14px;
    background: var(--bg-2); color: var(--text) !important; font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--border); transition: border-color .15s, color .15s;
}
a.vd-chip:hover { border-color: var(--accent); color: var(--accent) !important; }
.vd-desc #media-info { margin: 0 !important; padding: 0 !important; }
.vd-desc #media-description { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 14px; line-height: 1.65; color: var(--text) !important; white-space: normal; }
.vd-desc #media-description a { color: var(--link) !important; }
.vd-desc a.readmore { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--text) !important; }
.vd-desc a.readmore i { font-size: 18px; }
.vd-tags-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--border); }
.vd-lbl { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-2); padding-top: 4px; }
.vd-lbl i { font-size: 17px; }
.vd-tags-row .thetags { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-tags-row .thetags a.vd-tag {
    display: inline-block; margin: 0 !important; padding: 4px 11px !important; border-radius: 14px !important;
    background: rgba(59, 130, 246, .12) !important; color: var(--link) !important; font-size: 13px !important; font-weight: 600;
    transition: background .15s;
}
.vd-tags-row .thetags a.vd-tag:hover { background: rgba(59, 130, 246, .22) !important; }
@media (max-width: 600px) {
    .video-under .like-views h1 { font-size: 18px !important; }
    .vd-sub { margin-left: auto; }
    .video-under .interaction-icons .aaa > a { height: 36px; padding: 0 12px !important; }
}

/* ---------- "More from {user}" + Shorts in the sidebar: same hover background as Recommended */
.vside-list li { border-radius: 12px; transition: background .15s; }
.vside-list li:hover { background: var(--surface) !important; }
.vside-list a { padding: 6px !important; border-radius: 12px; }
.vside-short { padding: 4px; margin: -4px; border-radius: 12px; transition: background .15s; }
.vside-short:hover { background: var(--surface) !important; }

/* ---------- upload drop zone is clickable */
#dropzoned, .dropzoned { cursor: pointer; }
#dropzoned:hover, .dropzoned:hover { background: var(--surface-2) !important; }

/* ==========================================================================
   Update 9 - video page: channel and buttons on ONE line (like YouTube)
   ========================================================================== */
.video-under .vd-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 16px; width: 100%;
}
.video-under .vd-bar .vd-channel { margin: 0 !important; width: auto !important; flex: 0 1 auto; min-width: 0; }
.video-under .vd-bar .interaction-icons { width: auto !important; flex: 0 1 auto; justify-content: flex-end; }
.video-under .vd-bar .vd-sub { margin-left: 12px; }
.video-under .user-media-actions { gap: 14px; padding-bottom: 14px !important; }
@media (max-width: 900px) {
    .video-under .vd-bar { flex-direction: column; align-items: stretch; }
    .video-under .vd-bar .interaction-icons { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px !important; }
    .video-under .vd-bar .vd-sub { margin-left: auto; }
}

/* ---------- comments: same look as the rest of the page */
.ocoms { background: transparent !important; border: 0 !important; padding: 8px 0 0 !important; }
.ocoms .cctotal { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--text) !important; text-transform: none !important; margin: 4px 0 16px !important; }
.ocoms textarea.addEmComment, .ocoms .emoj, .ocoms .emoj .emoj-editor {
    background: transparent !important; color: var(--text) !important;
}
.ocoms .emoj { border: 0 !important; border-bottom: 1px solid var(--surface-3) !important; border-radius: 0 !important; box-shadow: none !important; }
.ocoms .emoj.focused { border-bottom-color: var(--text) !important; }
.ocoms .emoj .emoj-editor { font-size: 14px; padding: 8px 40px 8px 2px !important; min-height: 38px; }
.ocoms .emoj .emoj-editor:empty:before { color: var(--text-3) !important; }
.ocoms .btn, .ocoms button[type=submit] { border-radius: 20px !important; }
.comments li .message .body { font-size: 14px; line-height: 1.55; }
.comments .msg-footer { display: flex; gap: 14px; padding: 0 !important; margin: 4px 0 0 !important; }
.comments .msg-footer > li { list-style: none; float: none !important; margin: 0 !important; }
.comments .msg-footer a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.comments .msg-footer a:hover { color: var(--text) !important; }
.comments .msg-footer i { font-size: 16px !important; }

/* ==========================================================================
   Update 10 - Live streaming + dashboard carousel spacing
   ========================================================================== */
/* dashboard / carousels: space between the videos */
.owl-carousel .owl-item { padding: 0 8px; box-sizing: border-box; }
.owl-carousel .owl-stage-outer { margin: 0 -8px; }

/* red dot + pulse */
.live-dot { position: absolute; top: 6px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #ff1f3d; box-shadow: 0 0 0 2px var(--bg); animation: livePulse 1.6s infinite; }
.live-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff1f3d; margin-right: 10px; animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 31, 61, .6); } 70% { box-shadow: 0 0 0 9px rgba(255, 31, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 31, 61, 0); } }
.shorts-shelf ~ .live-shelf .loop-heading > span:before, .live-shelf .loop-heading > span:before, #live-page .loop-heading > span:before { display: none; }
html.vs-js #sidebar .sidebar-nav .iconed { position: relative; }
.live-top-link { position: relative; }
.live-top-link .live-dot { top: 8px; right: 6px; }

/* upload button menu */
.upl-drop { display: inline-block; position: relative; vertical-align: middle; }
.upl-menu { min-width: 230px; margin-top: 8px !important; }
.upl-menu li a { display: flex !important; align-items: center; gap: 12px; }
.upl-menu li a i { font-size: 20px; color: var(--text-2); }
.upl-menu li.upl-live a, .upl-menu li.upl-live a i { color: #ff1f3d !important; font-weight: 700; }

/* live cards (homepage shelf, /live/, sidebar) */
.live-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px 18px; margin-bottom: 10px; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px 18px; margin-bottom: 20px; }
.live-card { display: block; color: var(--text) !important; min-width: 0; }
.live-card .lc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 2px rgba(255, 31, 61, .0); transition: box-shadow .2s; }
.live-card:hover .lc-thumb { box-shadow: 0 0 0 3px #ff1f3d; }
.live-card .lc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-badge { position: absolute; top: 10px; left: 10px; background: #ff1f3d; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; z-index: 3; }
.live-card .lc-meta { display: flex; gap: 10px; padding-top: 10px; align-items: flex-start; }
.live-card .lc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 36px; }
.live-card .lc-txt { display: flex; flex-direction: column; min-width: 0; }
.live-card .lc-title { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-card .lc-owner { font-size: 13px; color: var(--text-2); }

/* watch page */
.live-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; padding-top: 12px; }
.live-player { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.live-player video { width: 100%; height: 100%; display: block; background: #000; }
.live-player .live-badge { display: none; }
.live-player.is-live .live-badge { display: inline-block; }
.live-offline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff; background: radial-gradient(circle at center, rgba(40, 40, 50, .92), rgba(0, 0, 0, .96)); padding: 20px; }
.live-offline i { font-size: 56px; opacity: .8; }
.live-offline strong { font-size: 20px; }
.live-offline span { opacity: .75; font-size: 14px; }
.live-player.is-live .live-offline { display: none; }
.live-side .vside-title { display: flex; align-items: center; }
.live-side-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .live-layout { grid-template-columns: 1fr; } }

/* live studio */
#live-studio { padding-top: 16px; }
.ls-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ls-head h1 { margin: 0 !important; font-size: 26px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 10px; }
.ls-head h1 i { color: #ff1f3d; font-size: 30px; }
.ls-state { padding: 6px 14px; border-radius: 20px; background: var(--surface-2); font-weight: 700; font-size: 13px; color: var(--text-2) !important; }
.ls-state.is-live { background: rgba(255, 31, 61, .14); color: #ff1f3d !important; display: inline-flex; align-items: center; }
.ls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.ls-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.ls-card h3 { margin: 0 0 12px !important; font-size: 18px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 8px; }
.ls-step { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ls-lbl { display: block; margin: 12px 0 6px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--text-2) !important; }
.ls-lbl small { font-weight: 500; color: var(--text-3); }
.ls-copy { display: flex; gap: 6px; }
.ls-copy input { flex: 1; min-width: 0; height: 42px; font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 13px !important; padding: 0 12px !important; }
.ls-copy .btn { height: 42px; padding: 0 14px !important; }
.ls-regen { margin-top: 10px; display: inline-flex !important; align-items: center; gap: 6px; }
.ls-regen i { font-size: 18px; }
.ls-check { display: flex !important; align-items: center; gap: 8px; margin: 14px 0 !important; font-weight: 500 !important; }
.ls-tips { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.5; }
.ls-tips strong { display: block; margin-bottom: 4px; }
.ls-card .btn-primary { margin-top: 6px; }
.ls-card textarea.form-control { min-height: 100px; }

/* ==========================================================================
   Update 11 - live page layout + player states
   ========================================================================== */
#live-page { max-width: 1800px; margin: 0 auto !important; padding: 18px 0 40px !important; float: none !important; }
#live-page .live-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; padding-top: 0; }
#live-page .live-main { min-width: 0; }
.live-player { box-shadow: var(--shadow); }
.live-player .video-js, .live-player video { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; padding: 0 !important; background: #000; }
.live-player .vjs-poster { background-size: cover; }
.live-player .vjs-big-play-button { display: none !important; }
/* states: offline / connecting / playing / error (only one overlay at a time) */
.live-state { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; padding: 24px; background: radial-gradient(circle at center, rgba(30, 30, 40, .88), rgba(0, 0, 0, .95)); }
.live-state i { font-size: 54px; opacity: .85; }
.live-state strong { font-size: 19px; font-weight: 800; }
.live-state span { opacity: .75; font-size: 14px; max-width: 520px; }
.live-state .btn { margin-top: 6px; }
.live-player.state-offline .live-offline, .live-player.state-connecting .live-connecting, .live-player.state-error .live-error { display: flex; }
.live-player.state-connecting .live-connecting { background: rgba(0, 0, 0, .55); }
.live-player .live-offline { display: none; }
.live-player.state-offline .live-offline { display: flex; }
.live-admin-hint { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); opacity: 1 !important; font-size: 13px !important; }
.live-admin-hint a { color: #9cc3ff !important; }
.live-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #ff1f3d; animation: liveSpin .9s linear infinite; }
@keyframes liveSpin { to { transform: rotate(360deg); } }
.live-topbar { position: absolute; top: 12px; left: 12px; z-index: 6; display: none; align-items: center; gap: 8px; pointer-events: none; }
.live-player.state-playing .live-topbar, .live-player.state-connecting .live-topbar { display: flex; }
.live-topbar .lc-badge { position: static; display: inline-block !important; }
.live-timer { background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.live-timer:empty { display: none; }
/* under the player */
#live-page .live-under .user-media-actions { padding-top: 16px !important; }
#live-page .live-under .vd-desc { margin-top: 4px !important; }
#live-page .ocoms { margin-top: 18px !important; }
#live-page .live-side .vside-title { margin-top: 0; }
#live-page .live-side-list .live-card .lc-thumb { border-radius: 12px; }
@media (max-width: 1200px) { #live-page .live-layout { grid-template-columns: 1fr; } }
.ls-limit { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.5; margin: 12px 0; }
.ls-limit i { color: var(--accent); font-size: 20px; }
.ls-left { font-size: 15px; }
.ls-left strong { font-variant-numeric: tabular-nums; color: #ff1f3d; }

/* ---------- mini player (bottom right, continues the video on other pages) */
.vibe-mini {
    position: fixed; right: 20px; bottom: 20px; z-index: 2000;
    width: 380px; max-width: calc(100vw - 24px); aspect-ratio: 16 / 9;
    background: #000; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .25s ease, transform .25s ease;
}
.vibe-mini.is-on { opacity: 1; transform: none; }
.vibe-mini .vm-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.vibe-mini iframe.vm-media { pointer-events: none; }
.vibe-mini .vm-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.vibe-mini .vm-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: 4px; padding: 24px 8px 8px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff;
    opacity: 0; transition: opacity .2s;
}
.vibe-mini:hover .vm-bar { opacity: 1; }
.vibe-mini .vm-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.vibe-mini .vm-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vibe-mini .vm-btn:hover { background: rgba(255, 255, 255, .3); }
.vibe-mini .vm-btn i { font-size: 18px; }
.vibe-mini .vm-close { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .2s; z-index: 4; }
.vibe-mini:hover .vm-close { opacity: 1; }
@media (max-width: 600px) { .vibe-mini { width: 60vw; right: 10px; bottom: 10px; } .vibe-mini .vm-bar, .vibe-mini .vm-close { opacity: 1; } }

/* ---------- live player: "click to unmute" + big play button */
.live-unmute {
    position: absolute; left: 14px; bottom: 56px; z-index: 7; display: none; align-items: center; gap: 8px;
    border: 0; border-radius: 22px; padding: 9px 16px; background: rgba(255, 255, 255, .95); color: #111;
    font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    animation: liveNudge 2.4s ease-in-out infinite;
}
.live-unmute i { font-size: 20px; }
.live-unmute:hover { background: #fff; }
@keyframes liveNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.live-player.state-paused .live-paused { display: flex; background: rgba(0, 0, 0, .35); }
.live-bigplay {
    width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
    background: #ff1f3d; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(255, 31, 61, .45); transition: transform .15s;
}
.live-bigplay:hover { transform: scale(1.06); }
.live-bigplay i { font-size: 52px !important; opacity: 1 !important; }
.live-player.state-paused .live-topbar { display: flex; }

/* ==========================================================================
   Update 12 - live chat, LIVE button, quality badge
   ========================================================================== */
.live-player.state-playing .vjs-poster { display: none !important; }
.live-quality { background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.live-quality:empty { display: none; }
/* "LIVE" button: back to real time (red = you are live, grey = you are behind) */
.live-edge {
    position: absolute; right: 12px; top: 12px; z-index: 7; display: none; align-items: center; gap: 6px;
    border: 0; border-radius: 16px; padding: 5px 11px; background: rgba(0, 0, 0, .65); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .05em; cursor: pointer;
}
.live-edge span { width: 8px; height: 8px; border-radius: 50%; background: #ff1f3d; }
.live-edge.is-behind span { background: #9a9aa5; }
.live-edge.is-behind { background: rgba(255, 255, 255, .92); color: #111; }
.live-edge.is-behind:after { content: "  \2192"; }
.live-player.state-playing .live-edge, .live-player.state-paused .live-edge { display: inline-flex; }

/* chat panel (live page) + chat replay (saved live video page) */
.live-chat {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; margin-bottom: 20px;
}
#live-page .live-chat { height: calc(100vh - 150px); max-height: 760px; min-height: 420px; position: sticky; top: calc(var(--hdr) + 14px); }
.live-chat.is-replay { height: 420px; margin-bottom: 18px; }
.lchat-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 15px; }
.lchat-head i { font-size: 20px; color: var(--accent); }
.lchat-head small { margin-left: auto; color: var(--text-2); font-weight: 600; }
.lchat-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
.lchat-empty { margin: auto; color: var(--text-3); font-size: 13px; text-align: center; padding: 20px; }
.lchat-msg { position: relative; display: flex; gap: 9px; align-items: flex-start; padding: 5px 6px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.lchat-msg:hover { background: var(--surface-2); }
.lchat-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px; margin-top: 1px; }
.lchat-noav { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text); font-weight: 800; font-size: 12px; text-transform: uppercase; }
.lchat-body { min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.lchat-name { font-weight: 700; color: var(--text-2); margin-right: 6px; }
.lchat-msg.is-owner .lchat-name { background: #ff1f3d; color: #fff; padding: 0 6px; border-radius: 6px; }
.lchat-msg.is-mod:not(.is-owner) .lchat-name { color: #3b82f6; }
.lchat-text { color: var(--text); }
.lchat-del { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; display: none; }
.lchat-msg:hover .lchat-del { display: block; }
.lchat-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.lchat-me { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lchat-form input { flex: 1; min-width: 0; height: 40px !important; border-radius: 20px !important; padding: 0 14px !important; font-size: 14px !important; }
.lchat-form input:disabled { opacity: .6; }
.lchat-form button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 40px; }
.lchat-note { padding: 0 14px 8px; font-size: 12px; color: #ff6b6b; }
.lchat-note:empty { display: none; }
.lchat-login { padding: 12px; border-top: 1px solid var(--border); }
@media (max-width: 1200px) { #live-page .live-chat { position: static; height: 460px; } }
.live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ==========================================================================
   Update 13 - live page header: title, channel, likes, stats
   ========================================================================== */
.live-under { padding: 16px 0 0; }
.lv-title { margin: 0 0 14px !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -.02em; color: var(--text) !important; }
.lv-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.lv-bar .vd-channel { margin: 0 !important; width: auto !important; }
.lv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-votes { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 22px; overflow: hidden; }
.lv-vote, .lv-pill {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
    border: 0; background: transparent; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s;
}
.lv-vote i, .lv-pill i { font-size: 20px; }
.lv-vote:hover { background: var(--surface-3); }
.lv-vote + .lv-vote { border-left: 1px solid var(--border); }
.lv-vote.is-on { color: var(--accent); }
.lv-vote:active, .lv-pill:active { transform: scale(.96); }
.lv-pill { background: var(--surface-2); border-radius: 22px; }
.lv-pill:hover { background: var(--surface-3); }
.lv-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 14px 0 0; padding: 12px 16px; background: var(--surface-2); border-radius: 14px; font-size: 14px; color: var(--text-2); }
.lv-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.lv-stats b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-stats i { font-size: 18px; }
.lv-watch { color: #ff1f3d !important; font-weight: 700; }
.lv-watch b { color: #ff1f3d !important; }
.lv-watch .live-pulse { margin-right: 2px; width: 9px; height: 9px; }
.lv-watch.is-off { color: var(--text-3) !important; }
.lv-watch.is-off b { color: var(--text-3) !important; }
.lv-watch.is-off .live-pulse { background: var(--text-3); animation: none; }
.lv-desc { margin-top: 12px !important; }
@media (max-width: 700px) { .lv-title { font-size: 18px !important; } .lv-bar { flex-direction: column; align-items: stretch; } }

/* ==========================================================================
   Update 15 - "Filter by category" list in the left menu (video / music / picture lists)
   each row = round picture + name on ONE line, subcategories indented under it
   ========================================================================== */
html.vs-js #sidebar .cats { border-bottom: 0 !important; background: transparent !important; }
html.vs-js #sidebar .cats .li-heading { display: block !important; margin: 14px 6px 6px !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3) !important; }
html.vs-js #sidebar .cats ul { list-style: none; margin: 0 !important; padding: 0 !important; }
html.vs-js #sidebar .cats li {
    display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 12px;
    margin: 1px 0 !important; padding: 0 10px !important; border-radius: 10px; background: transparent !important;
}
html.vs-js #sidebar .cats li:hover { background: var(--surface-2) !important; }
html.vs-js #sidebar .cats li li:hover { background: var(--surface-3) !important; }
html.vs-js #sidebar .cats li > a.cats-img {
    display: inline-flex !important; flex: 0 0 26px; width: 26px; height: 26px !important;
    padding: 0 !important; margin: 0 !important; gap: 0 !important; border-radius: 50%; overflow: hidden;
}
html.vs-js #sidebar .cats li > a.cats-img img {
    width: 26px !important; height: 26px !important; border-radius: 50%; object-fit: cover; margin: 0 !important; border: 0 !important;
}
html.vs-js #sidebar .cats li > a.cats-link {
    display: block !important; flex: 1 1 0; min-width: 0; height: auto !important;
    padding: 9px 0 !important; margin: 0 !important; gap: 0 !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text) !important;
}
html.vs-js #sidebar .cats li > a.cats-link:hover { color: var(--accent) !important; }
/* subcategories: full width under the parent, indented */
html.vs-js #sidebar .cats li > ul { flex: 0 0 100%; margin: 0 0 4px !important; padding: 0 0 0 14px !important; border-left: 2px solid var(--surface-3); }
html.vs-js #sidebar .cats li > ul li { padding: 0 8px !important; }
html.vs-js #sidebar .cats li > ul a.cats-img, html.vs-js #sidebar .cats li > ul a.cats-img img { width: 22px !important; height: 22px !important; flex-basis: 22px; }
html.vs-js #sidebar .cats li > ul a.cats-link { font-size: 13px !important; padding: 7px 0 !important; }
/* the "Browse" dropdown above the list */
html.vs-js #sidebar .sidebar-specials { margin-bottom: 4px; }
html.vs-js #sidebar .sidebar-specials .dropdown-menu li a { height: 38px; }
/* live player: plain <video> now (native controls) */
.live-player video.live-video { object-fit: contain; }

/* ---------- Live Studio: own picture for the live */
.ls-cover { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ls-cover-prev { flex: 0 0 180px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.ls-cover-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-cover-prev span i { font-size: 36px; color: var(--text-3); }
.ls-cover-opts { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.ls-radio { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; font-size: 14px !important; cursor: pointer; }
.ls-radio input[disabled] + * , .ls-radio input[disabled] { opacity: .5; }
.ls-file { font-size: 13px; color: var(--text-2); }
.ls-remove { color: #ff6b6b !important; font-size: 13px !important; }

/* ==========================================================================
   Update 17 - live cards like the video cards, vibejs live player
   ========================================================================== */
.live-vcard .video-thumb .lc-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: livePulse 1.6s infinite; }
.live-vcard .video-thumb .lc-watch { display: inline-flex !important; align-items: center; gap: 4px; }
.live-vcard .video-thumb .lc-watch i { font-size: 14px !important; }
.live-vcard .video-thumb { box-shadow: 0 0 0 0 rgba(255, 31, 61, 0); transition: box-shadow .2s; }
.live-vcard:hover .video-thumb { box-shadow: 0 0 0 3px #ff1f3d !important; }
html body .vgrid .video ul.stats > li.lc-now { color: #ff1f3d !important; font-weight: 700 !important; }
html body .vgrid .video ul.stats > li.lc-now .live-pulse { width: 7px; height: 7px; margin-right: 6px; }
html body .vgrid .video ul.stats > li.lc-now:before { display: none; }
html body .vgrid .video ul.stats > li.lc-now + li:before { content: "\2022"; margin: 0 6px; color: var(--text-3); }
.live-side-list.vgrid:not(.hide) { grid-template-columns: 1fr !important; gap: 18px !important; }
/* vibejs skin on the live player */
.live-player .video-js { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.live-player .video-js .vjs-tech { object-fit: contain; }
.live-player .video-js .vjs-control-bar { z-index: 6; }
.live-player .vjs-live-stream .vjs-progress-control, .live-player .vjs-live-stream .vjs-remaining-time, .live-player .vjs-live-stream .vjs-duration { visibility: hidden; }
.live-player.state-offline .video-js .vjs-control-bar, .live-player.state-connecting .video-js .vjs-control-bar { display: none; }

/* ==========================================================================
   Update 18.1 - Live Studio button (owner, live page + account menu)
   ========================================================================== */
.lv-studio-btn {
    display: inline-flex !important; align-items: center; gap: 7px; height: 40px; padding: 0 18px; margin-left: 12px;
    border-radius: 22px; background: var(--grad); color: #fff !important; font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(255, 45, 85, .28); transition: filter .15s;
}
.lv-studio-btn:hover { filter: brightness(1.08); color: #fff !important; }
.lv-studio-btn i { font-size: 19px; }
.menu-live-studio a, .menu-live-studio a i { color: #ff1f3d !important; }

/* ---------- Shorts shelf: exactly ONE row that fills the width (no scrollbar, no empty space).
   As many Shorts as fit are shown, each one stretches a little to close the gap. */
@media (min-width: 768px) {
    .shorts-shelf .shorts-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        grid-template-rows: auto;
        grid-auto-rows: 0;
        row-gap: 0 !important; column-gap: 16px !important;
        overflow: hidden !important; padding-bottom: 0 !important;
    }
    .shorts-shelf .short-card { width: auto !important; min-width: 0; }
}

/* ==========================================================================
   Update 19 - live gifts
   ========================================================================== */
.lchat-giftbtn { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%; background: rgba(245, 197, 66, .18); color: #f5b400; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, background .15s; }
.lchat-giftbtn:hover { background: rgba(245, 197, 66, .3); transform: scale(1.06); }
.lchat-giftbtn i { font-size: 22px; }
.lchat-gifts { border-top: 1px solid var(--border); padding: 12px; background: var(--surface); }
.lchat-gifts[hidden] { display: none !important; }
.lg-head { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 10px; }
.lg-head i { color: #f5b400; font-size: 20px; }
.lg-close { margin-left: auto; border: 0; background: none; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 10px; }
.lg-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 2px solid transparent; border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s, transform .1s; }
.lg-item:hover { transform: translateY(-2px); }
.lg-item.is-on { border-color: #f5b400; background: rgba(245, 197, 66, .12); }
.lg-name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; }
.lg-price { font-size: 12px; color: var(--text-2); font-weight: 600; }
.lg-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lg-custom input { flex: 1; height: 38px !important; }
.lg-custom span { font-weight: 700; color: var(--text-2); }
#lg-msg { width: 100%; height: 38px !important; margin-bottom: 8px; }
.lg-note { font-size: 12px; color: var(--text-3); margin-top: 8px; text-align: center; }
/* a gift in the chat */
.lchat-msg.lchat-gift {
    display: block; margin: 6px 0; padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 197, 66, .22), rgba(255, 106, 61, .18));
    border: 1px solid rgba(245, 197, 66, .45);
}
.lchat-gift .lg-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; }
.lchat-gift .lchat-av { width: 24px; height: 24px; flex: 0 0 24px; }
.lchat-gift .lg-who { color: var(--text); }
.lchat-gift .lg-sent { color: var(--text-2); }
.lchat-gift .lg-what { color: #f5b400; }
.lchat-gift .lg-amt { margin-left: auto; background: #f5b400; color: #1a1200; font-weight: 800; font-size: 12px; padding: 2px 9px; border-radius: 10px; }
.lchat-gift .lg-text { margin-top: 5px; font-size: 13.5px; color: var(--text); word-wrap: break-word; }
/* Live Studio: gifts received */
.ls-gifts-card { margin-top: 18px; }
.ls-gift-totals { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ls-gift-totals > div { flex: 1; min-width: 160px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.ls-gift-totals small { display: block; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ls-gift-totals strong { font-size: 20px; font-weight: 800; color: #f5b400; }
.ls-gift-totals em { font-size: 12px; color: var(--text-3); font-style: normal; }
.ls-gift-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.ls-gift-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.ls-gift-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ls-gift-body { flex: 1; min-width: 0; font-size: 14px; }
.ls-gift-msg { margin: 3px 0; color: var(--text); }
.ls-gift-amt { font-weight: 800; color: #f5b400; white-space: nowrap; }

/* ==========================================================================
   Update 20 - Dashboard > Earnings
   ========================================================================== */
.earn-page { display: flex; flex-direction: column; gap: 18px; }
.earn-head h2 { margin: 0 0 4px !important; display: flex; align-items: center; gap: 8px; }
.earn-head h2 i { color: #16a34a; font-size: 28px; }
.earn-sub { color: var(--text-2); font-size: 14px; }
.earn-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; background: var(--surface-2); border-radius: 18px; }
.earn-empty i { font-size: 48px; color: #f5b400; }
.earn-empty strong { font-size: 18px; }
.earn-empty span { color: var(--text-2); }
.earn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.earn-card { padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.earn-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.earn-card strong { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.earn-card.earn-main { grid-column: span 2; background: linear-gradient(135deg, rgba(22, 163, 74, .2), rgba(22, 163, 74, .06)); border-color: rgba(22, 163, 74, .4); }
.earn-card.earn-main strong { font-size: 32px; color: #16a34a; }
.earn-neg { color: #dc2626 !important; }
.earn-box { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.earn-box h3 { margin: 0 0 14px !important; font-size: 17px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 8px; }
.earn-box h3 i { color: var(--accent); }
.earn-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.earn-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px !important; flex: 1; min-width: 220px; margin: 0 !important; }
.earn-amount { display: flex; gap: 6px; }
.earn-amount input { flex: 1; }
.earn-amount select { width: auto; }
.earn-form .btn { height: 42px; }
.earn-note { margin: 10px 0 0 !important; font-size: 13px; }
.earn-table-wrap { overflow-x: auto; }
.earn-table { margin: 0 !important; font-size: 14px; }
.earn-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2) !important; white-space: nowrap; }
.earn-table td { vertical-align: middle !important; }
.earn-from { display: flex; align-items: center; gap: 10px; }
.earn-from img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.earn-from span { display: flex; flex-direction: column; }
.earn-from small { color: var(--text-2); font-style: italic; }
.earn-st { font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 10px; }
.earn-st.is-paid { background: rgba(22, 163, 74, .15); color: #16a34a; }
.earn-st.is-wait { background: rgba(217, 119, 6, .15); color: #d97706; }
.earn-st.is-rej { background: rgba(220, 38, 38, .15); color: #dc2626; }
@media (max-width: 600px) { .earn-card.earn-main { grid-column: span 1; } }

/* ==========================================================================
   Update 21 - dashboard tabs wrap (the last ones were cut off), chat emoji
   ========================================================================== */
.dash-nav { flex-wrap: wrap; overflow: visible !important; row-gap: 6px; }
.dash-tab { flex: 0 0 auto; }
@media (max-width: 700px) { .dash-nav { flex-wrap: nowrap; overflow-x: auto !important; scrollbar-width: thin; } .dash-nav::-webkit-scrollbar { display: block; height: 4px; } }
/* emoji (same EmojiOne images as the site comments) */
.lchat-text img.emojione, .lg-text img.emojione, .lchat-text img.oneemoji { width: 20px; height: 20px; vertical-align: -5px; margin: 0 1px; }

/* ==========================================================================
   Update 22 - emoji picker (comments AND live chat), same look everywhere
   The theme's plugin uses "emoj-" class names (custom EmojiOneArea build).
   ========================================================================== */
/* the button inside the field: a clean smiley instead of the old sprite */
.emoj .emoj-button {
    opacity: 1 !important; width: 32px !important; height: 32px !important; top: 50% !important; right: 6px !important;
    margin-top: -16px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center;
    transition: background .15s !important;
}
.emoj .emoj-button:hover { background: var(--surface-3); }
.emoj .emoj-button > div { display: none !important; }
.emoj .emoj-button:before { content: "\E813"; font-family: "Material Icons"; font-size: 22px; line-height: 1; color: var(--text-2); -webkit-font-feature-settings: "liga"; }
.emoj .emoj-button.active:before { content: "\E5CD"; color: var(--accent); }
.emoj .emoj-editor { padding-right: 44px !important; }
.emoj .emoj-editor .emojioneemoji, .emoj .emoj-editor [class*="emojione-"], img.oneemoji { width: 20px !important; height: 20px !important; vertical-align: -4px !important; }
/* the picker window */
.emoj .emoj-picker {
    background: var(--surface) !important; border: 1px solid var(--border);
    border-radius: 16px !important; box-shadow: var(--shadow) !important; overflow: hidden;
}
.emoj .emoj-picker .emoj-wrapper:after { display: none !important; }
.emoj .emoj-picker .emoj-filters { background: var(--surface-2) !important; display: flex; align-items: center; padding: 0 6px !important; gap: 2px; }
.emoj .emoj-picker .emoj-filters .emoj-filter {
    float: none !important; width: 34px !important; height: 34px !important; padding: 5px !important;
    border-radius: 10px; opacity: .55; filter: grayscale(1) !important; -webkit-filter: grayscale(1) !important;
    transition: opacity .15s, background .15s;
}
.emoj .emoj-picker .emoj-filters .emoj-filter:hover { opacity: 1; filter: none !important; -webkit-filter: none !important; }
.emoj .emoj-picker .emoj-filters .emoj-filter.active { background: var(--surface) !important; opacity: 1; filter: none !important; -webkit-filter: none !important; box-shadow: inset 0 -2px 0 var(--accent); }
.emoj .emoj-picker .emoj-filters .emoj-filter > img, .emoj .emoj-picker .emoj-filters .emoj-filter > i { width: 24px !important; height: 24px !important; margin: 0 !important; }
.emoj .emoj-picker .emoj-scroll-area { background: var(--surface) !important; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.emoj .emoj-picker .emoj-scroll-area::-webkit-scrollbar { width: 6px; }
.emoj .emoj-picker .emoj-scroll-area::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 0; }
.emoj .emoj-picker .emoj-scroll-area .emoj-category-title {
    background: var(--surface) !important; color: var(--text-3) !important; font-family: var(--font) !important;
    font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .08em; padding: 10px 10px 4px !important;
}
.emoj .emoj-picker .emoj-scroll-area .emojibtn { border-radius: 8px !important; padding: 4px !important; margin: 1px !important; transition: background .12s, transform .12s; }
.emoj .emoj-picker .emoj-scroll-area .emojibtn:hover { background: var(--surface-2) !important; transform: scale(1.12); }
.emoj .emoj-picker .emoj-scroll-area .emojibtn img, .emoj .emoj-picker .emoj-scroll-area .emojibtn i { width: 26px !important; height: 26px !important; }
.emoj .emoj-picker .emoj-search-panel input { background: var(--bg-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }
.emoj .emoj-picker .emoj-tones .btn-tone { border-radius: 50%; }
/* autocomplete list while typing :smile */
.dropdown-menu.textcomplete-dropdown[data-strategy="emoj"] { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.dropdown-menu.textcomplete-dropdown[data-strategy="emoj"] li a, .dropdown-menu.textcomplete-dropdown[data-strategy="emoj"] li { color: var(--text) !important; }
.dropdown-menu.textcomplete-dropdown[data-strategy="emoj"] li.active, .dropdown-menu.textcomplete-dropdown[data-strategy="emoj"] li:hover { background: var(--surface-2) !important; }

/* ---------- live chat field with the emoji editor */
#live-page .live-chat { overflow: visible !important; }
#live-page .live-chat .lchat-head { border-radius: 16px 16px 0 0; }
.lchat-form { position: relative; }
.lchat-form .emoj {
    flex: 1; min-width: 0; min-height: 40px !important; margin: 0 !important;
    border-radius: 20px !important; background: var(--bg-2) !important; border: 1px solid var(--border) !important;
}
.lchat-form .emoj.focused { border-color: var(--link) !important; }
.lchat-form .emoj .emoj-editor {
    min-height: 38px !important; max-height: 84px !important; padding: 9px 44px 7px 14px !important;
    font-size: 14px !important; line-height: 1.45 !important; color: var(--text) !important; white-space: normal;
}
.lchat-form .emoj .emoj-editor:empty:before { color: var(--text-3) !important; }
.lchat-form .emoj.emoj-disable { opacity: .55; }
/* picker opens ABOVE the field, aligned to the right edge of the chat */
.lchat-form .emoj .emoj-picker { top: auto !important; bottom: 46px !important; margin-top: 0 !important; right: -52px !important; z-index: 1200 !important; }
@media (max-width: 480px) { .lchat-form .emoj .emoj-picker { right: -40px !important; transform: scale(.92); transform-origin: bottom right; } }

/* ==========================================================================
   Update 25 - Media Studio: all tabs on one row
   ========================================================================== */
.page.p-dashboard, .page.p-manager { max-width: 1680px !important; }
@media (min-width: 1100px) {
    .dash-nav { flex-wrap: nowrap !important; justify-content: space-between; gap: 2px; overflow: visible !important; }
    .dash-tab { flex: 1 1 auto; justify-content: center; padding: 9px 10px; gap: 6px; font-size: 13.5px; min-width: 0; }
    .dash-tab i { font-size: 18px; }
    .dash-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1100px) and (max-width: 1450px) {
    /* medium screens: icon + a slightly smaller label */
    .dash-tab { padding: 8px 6px; font-size: 12.5px; gap: 4px; }
    .dash-tab i { font-size: 17px; }
}

/* ---------- Live Studio: picture chooser */
.ls-pick { position: relative; overflow: hidden; display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; cursor: pointer; margin: 2px 0 !important; }
.ls-pick i { font-size: 18px; }
.ls-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 100px; }
.ls-radio input { cursor: pointer; }

/* ==========================================================================
   Update 27 - activity feed, live thumbnail chooser, upload menu
   ========================================================================== */
/* Dashboard > Activity */
.act-head { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px !important; border: 0 !important; }
.act-head .panel-title { display: flex; align-items: center; gap: 8px; font-size: 22px !important; font-weight: 800 !important; }
.act-head .panel-title i { color: var(--accent); }
.act-sub { color: var(--text-2); font-size: 14px; }
.act-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; margin-bottom: 14px; border-radius: 20px; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.act-count b { font-size: 16px; color: var(--text); }
.act-feed { display: flex; flex-direction: column; gap: 10px; }
.act-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: background .15s, transform .15s; }
.act-item:hover { background: var(--surface-2); }
.act-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.act-icon i { font-size: 21px; }
.act-icon.is-love { background: #ef4444; } .act-icon.is-like { background: #f97316; } .act-icon.is-comment { background: #3b82f6; }
.act-icon.is-share { background: #14b8a6; } .act-icon.is-sub { background: #8b5cf6; } .act-icon.is-upload { background: #22c55e; }
.act-icon.is-watch { background: #64748b; } .act-icon.is-photo { background: #ec4899; } .act-icon.is-star { background: #eab308; } .act-icon.is-other { background: var(--surface-3); }
.act-avatars { display: flex; flex: 0 0 auto; padding-top: 4px; }
.act-avatars img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -10px; background: var(--surface-2); }
.act-avatars img:first-child { margin-left: 0; }
.act-body { flex: 1; min-width: 0; }
.act-text { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.act-text > a { font-weight: 700; color: var(--text) !important; }
.act-what { color: var(--text-2); }
.act-what a { color: var(--text) !important; font-weight: 600; }
.act-media { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--text); overflow: hidden; }
.act-media img { max-width: 160px; border-radius: 8px; }
.act-media a { color: var(--link) !important; }
.act-time { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.act-time i { font-size: 14px; }
.act-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; text-align: center; background: var(--surface-2); border-radius: 18px; }
.act-empty i { font-size: 48px; color: var(--text-3); }
.act-empty strong { font-size: 17px; }
.act-empty span { color: var(--text-2); }
@media (max-width: 600px) { .act-avatars { display: none; } }

/* Live Studio: thumbnail chooser (saved instantly) */
.ls-thumb { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.ls-thumb.is-busy { opacity: .6; pointer-events: none; }
.ls-thumb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ls-opt:hover { border-color: var(--surface-3); }
.ls-opt.is-on { border-color: var(--accent); background: rgba(255, 45, 85, .08); }
.ls-opt-prev { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.ls-opt-prev img { width: 100%; height: 100%; object-fit: cover; }
.ls-opt-prev i { font-size: 34px; color: var(--text-3); }
.ls-opt-auto { background: linear-gradient(135deg, #1f1f2e, #3a1422); }
.ls-opt-auto i { color: #ff1f3d; }
.ls-opt-txt { display: flex; flex-direction: column; }
.ls-opt-txt b { font-size: 14px; }
.ls-opt-txt small { font-size: 12px; color: var(--text-2); }
.ls-opt-check { position: absolute; top: 14px; right: 14px; font-size: 22px; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; background: #fff; border-radius: 50%; }
.ls-opt.is-on .ls-opt-check { opacity: 1; transform: none; }
.ls-thumb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-remove-btn { display: inline-flex !important; align-items: center; gap: 5px; }
.ls-remove-btn i { font-size: 17px; }
.ls-thumb-msg { font-size: 12.5px; color: var(--text-2); }
.ls-thumb-msg.is-ok { color: #16a34a; font-weight: 600; }
.ls-thumb-msg.is-err { color: #dc2626; font-weight: 600; }

/* Upload menu (header) */
.upl-menu { min-width: 270px !important; padding: 8px !important; }
.upl-menu li a { display: flex !important; align-items: center; gap: 14px; padding: 10px 12px !important; border-radius: 10px; }
.upl-menu li a > i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 21px !important; }
.upl-menu .um-txt { display: flex; flex-direction: column; line-height: 1.25; }
.upl-menu .um-txt b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.upl-menu .um-txt small { font-size: 12px; color: var(--text-2); font-weight: 400; }
.upl-menu li.upl-live a > i { background: #ff1f3d; color: #fff !important; }
.upl-menu li.upl-live .um-txt b { color: #ff1f3d; }

/* ---------- /activity (public feed) */
.act-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 900px; margin: 24px auto 16px; padding: 0 15px; }
.act-page-head h1 { margin: 0 0 4px !important; font-size: 26px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 10px; }
.act-page-head h1 i { color: var(--accent); font-size: 28px; }
.act-tabs { display: flex; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.act-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 12px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; }
.act-tab i { font-size: 19px; }
.act-tab:hover { background: var(--surface-2); color: var(--text) !important; }
.act-tab.is-active { background: var(--grad); color: #fff !important; }
.act-page { float: none !important; max-width: 900px; margin: 0 auto 40px; }
.act-page .pagination { margin-top: 18px; }
a.act-avatars { display: flex; }

/* ---------- /activity: same width and box as Dashboard > Activity */
.act-page-head { max-width: 1400px !important; }
.act-page {
    max-width: 1400px !important; width: 100%;
    background: var(--surface) !important; border: 1px solid var(--border);
    border-radius: 20px; padding: 22px !important;
}
.act-page .act-item { background: var(--bg-2); }
.act-page .act-item:hover { background: var(--surface-2); }
@media (max-width: 700px) { .act-page { padding: 12px !important; border-radius: 14px; } }

/* ==========================================================================
   Update 28 - Premium page, free month banner, account menu
   ========================================================================== */
/* discreet banner at the top of the homepage */
.prem-banner {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 10px 14px 10px 16px;
    border-radius: 14px; background: linear-gradient(90deg, rgba(245, 180, 0, .16), rgba(255, 45, 85, .10));
    border: 1px solid rgba(245, 180, 0, .35); font-size: 14px; color: var(--text); animation: pbIn .4s ease;
}
@keyframes pbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.prem-banner .pb-ico { font-size: 22px; line-height: 1; }
.prem-banner .pb-txt { flex: 1; min-width: 0; line-height: 1.4; color: var(--text-2); }
.prem-banner .pb-txt b { color: var(--text); }
.prem-banner .pb-btn { flex: 0 0 auto; padding: 7px 16px; border-radius: 20px; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; font-weight: 800; font-size: 13px; white-space: nowrap; }
.prem-banner .pb-btn:hover { filter: brightness(1.06); }
.prem-banner .pb-close { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-3) !important; font-size: 20px; }
.prem-banner .pb-close:hover { background: var(--surface-2); color: var(--text) !important; }
@media (max-width: 600px) { .prem-banner { flex-wrap: wrap; } .prem-banner .pb-txt { flex-basis: calc(100% - 70px); } }

/* account menu */
.menu-premium a { display: flex !important; align-items: center; gap: 10px; }
.menu-premium a i { color: #f5b400 !important; }
.menu-premium .mp-txt { display: flex; flex-direction: column; line-height: 1.2; }
.menu-premium .mp-txt b { font-weight: 700; }
.menu-premium .mp-txt small { font-size: 11.5px; color: var(--text-2); }
.menu-premium.is-premium .mp-txt b { color: #f5b400; }

/* Premium page */
.p-payment #default-content { float: none !important; }
.pr-wrap { max-width: 1100px; margin: 24px auto 50px; padding: 0 12px; }
.pr-hero { text-align: center; padding: 34px 20px 26px; border-radius: 24px; margin-bottom: 22px;
    background: radial-gradient(circle at 50% 0%, rgba(245, 180, 0, .25), transparent 60%), var(--surface); border: 1px solid var(--border); }
.pr-crown { font-size: 46px; line-height: 1; display: inline-block; margin-bottom: 6px; filter: drop-shadow(0 6px 14px rgba(245, 180, 0, .45)); }
.pr-hero h1 { margin: 0 0 6px !important; font-size: 32px !important; font-weight: 900 !important; letter-spacing: -.02em;
    background: linear-gradient(90deg, #f5b400, #ff8a00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-hero p { margin: 0 !important; color: var(--text-2); font-size: 16px; }
.pr-h2 { display: flex; align-items: center; gap: 8px; margin: 30px 0 14px !important; font-size: 20px !important; font-weight: 800 !important; }
.pr-h2 i { color: #f5b400; }
.pr-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pr-benefit { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.pr-b-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(245, 180, 0, .15); color: #f5b400; }
.pr-b-ico i { font-size: 22px; }
.pr-benefit b { display: block; font-size: 15px; margin-bottom: 2px; }
.pr-benefit span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.pr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pr-plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 18px 18px; margin: 0; border-radius: 20px; background: var(--surface); border: 2px solid var(--border); transition: transform .15s, border-color .15s, box-shadow .15s; }
.pr-plan:hover { transform: translateY(-3px); border-color: var(--surface-3); box-shadow: var(--shadow); }
.pr-plan.is-best { border-color: #f5b400; background: linear-gradient(180deg, rgba(245, 180, 0, .12), var(--surface) 55%); }
.pr-plan.is-popular { border-color: rgba(255, 45, 85, .55); }
.pr-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 12px; background: #f5b400; color: #1a1200; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pr-tag.is-pop { background: var(--grad); color: #fff; }
.pr-plan-name { font-size: 15px; font-weight: 700; color: var(--text-2); }
.pr-plan-price b { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.pr-plan-per { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.pr-plan-btn { width: 100%; height: 44px; border-radius: 22px !important; font-weight: 800 !important; }
.pr-plan.is-best .pr-plan-btn { background: linear-gradient(135deg, #f5b400, #ff8a00) !important; border: 0 !important; color: #1a1200 !important; }
.pr-plan-note { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.pr-plan-note i { font-size: 14px; }
.pr-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px !important; color: var(--text-3); font-size: 13px; }
.pr-secure i { font-size: 16px; color: #16a34a; }
.pr-login { text-align: center; margin-top: 22px; }
.pr-note { display: flex; align-items: center; gap: 8px; max-width: 1100px; margin: 18px auto 0; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.pr-note.is-ok { background: rgba(22, 163, 74, .14); color: #16a34a; font-weight: 600; }
.pr-note i { font-size: 20px; }
/* status page */
.pr-status { padding: 24px; border-radius: 24px; background: radial-gradient(circle at 0% 0%, rgba(245, 180, 0, .22), transparent 55%), var(--surface); border: 1px solid rgba(245, 180, 0, .4); }
.pr-status-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pr-status-top h1 { margin: 0 0 2px !important; font-size: 26px !important; font-weight: 900 !important; color: #f5b400 !important; }
.pr-status-top p { margin: 0 !important; color: var(--text-2); }
.pr-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pr-status-grid > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pr-status-grid small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-3); margin-bottom: 4px; }
.pr-status-grid b { font-size: 18px; font-weight: 800; }
.pr-progress { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin: 16px 0 10px; }
.pr-progress span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f5b400, #ff8a00); }
.pr-status-hint { margin: 0 !important; font-size: 13px; color: var(--text-2); }
.pr-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.pr-table { margin: 0 !important; font-size: 14px; }
.pr-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2) !important; }
.pr-chip { display: inline-block; padding: 2px 10px; border-radius: 10px; background: rgba(59, 130, 246, .15); color: #3b82f6; font-size: 12px; font-weight: 700; }
.pr-chip.is-trial { background: rgba(245, 180, 0, .18); color: #d99a00; }

/* ---------- /premium: all benefits on one row (column count = number of benefits) */
.pr-wrap { max-width: 1300px; }
@media (min-width: 1000px) {
    .pr-benefits { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) !important; }
    .pr-benefit { flex-direction: column; gap: 10px; }
}

/* ---------- Media Studio > My lives */
.mylives-studio { display: inline-flex !important; align-items: center; gap: 6px; margin-left: 12px; vertical-align: middle; border-radius: 20px !important; background: var(--grad) !important; border: 0 !important; font-size: 13px !important; }
.mylives-studio i { font-size: 18px; }
.mylives-sub { margin: 4px 0 0 !important; }

/* ==========================================================================
   Update 30 - option buttons (SAFE / NSFW, Public / Followers ...) show the choice
   ========================================================================== */
.btn-group[data-toggle="buttons"] { display: inline-flex; gap: 0; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.btn-group[data-toggle="buttons"] > .btn {
    position: relative; display: inline-flex !important; align-items: center; gap: 6px;
    margin: 0 !important; padding: 8px 16px !important; border: 0 !important; border-radius: 10px !important;
    background: transparent !important; color: var(--text-2) !important; box-shadow: none !important;
    font-weight: 700 !important; font-size: 13px !important; letter-spacing: .02em; transition: background .15s, color .15s;
}
.btn-group[data-toggle="buttons"] > .btn:hover { color: var(--text) !important; background: var(--surface-3) !important; }
.btn-group[data-toggle="buttons"] > .btn.active {
    background: var(--grad) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(255, 45, 85, .3) !important;
}
/* the old check icon font is not loaded: use a material check instead */
.btn-group[data-toggle="buttons"] > .btn .icon.icon-check { display: none !important; }
.btn-group[data-toggle="buttons"] > .btn:before {
    content: "\E836"; font-family: "Material Icons"; font-size: 17px; line-height: 1; opacity: .55;
    -webkit-font-feature-settings: "liga";
}
.btn-group[data-toggle="buttons"] > .btn.active:before { content: "\E86C"; opacity: 1; }
.btn-group[data-toggle="buttons"] > .btn input[type=radio], .btn-group[data-toggle="buttons"] > .btn input[type=checkbox] {
    position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; opacity: 0;
}

/* ---------- free month offer: time left (banner) + gift card on /premium */
.prem-banner .pb-left { font-style: normal; font-size: 12px; font-weight: 700; color: #d99a00; margin-left: 4px; white-space: nowrap; }
.pr-gift {
    display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 20px 22px;
    border-radius: 22px; border: 2px dashed rgba(245, 180, 0, .65);
    background: linear-gradient(120deg, rgba(245, 180, 0, .20), rgba(255, 45, 85, .12));
    animation: pbIn .45s ease;
}
.pr-gift-ico { font-size: 50px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(245, 180, 0, .5)); animation: giftBounce 2.4s ease-in-out infinite; }
@keyframes giftBounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
.pr-gift-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-gift-txt b { font-size: 19px; font-weight: 900; color: var(--text); }
.pr-gift-txt span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.pr-gift-left { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #d99a00; font-weight: 600; }
.pr-gift-left i { font-size: 16px; }
.pr-gift-btn {
    flex: 0 0 auto; padding: 13px 24px; border-radius: 26px; font-weight: 900; font-size: 15px; white-space: nowrap;
    background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; box-shadow: 0 10px 24px rgba(245, 150, 0, .35);
    transition: transform .15s, filter .15s;
}
.pr-gift-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
@media (max-width: 700px) { .pr-gift { flex-direction: column; text-align: center; } .pr-gift-left { justify-content: center; } }

/* ---------- Premium-only videos: upload option, Media Studio, profile tab */
.btn-group[data-toggle="buttons"] > .btn.btn-premium-opt { color: #d99a00 !important; }
.btn-group[data-toggle="buttons"] > .btn.btn-premium-opt.active {
    background: linear-gradient(135deg, #f5b400, #ff8a00) !important; color: #1a1200 !important; box-shadow: 0 4px 12px rgba(245, 150, 0, .35) !important;
}
.mprem-star, .tp-star { color: #f5b400; }
.tab-premium a { color: #d99a00 !important; }
.tab-premium.active a, .tab-premium a:hover { color: #f5b400 !important; }
.prof-prem-note { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 14px 18px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(245, 180, 0, .18), rgba(255, 138, 0, .08)); border: 1px solid rgba(245, 180, 0, .4); }
.prof-prem-note .ppn-star { font-size: 30px; color: #f5b400; line-height: 1; }
.prof-prem-note div { flex: 1; display: flex; flex-direction: column; }
.prof-prem-note b { font-size: 16px; }
.prof-prem-note span { font-size: 13.5px; color: var(--text-2); }
.prof-prem-note .ppn-btn { padding: 9px 18px; border-radius: 20px; font-weight: 800; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; white-space: nowrap; }

/* ---------- profile: Shorts tab + Shorts row */
.prof-shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 14px; padding: 6px 0 10px; }
.prof-shorts-grid .short-card { width: auto !important; }
.prof-shorts-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; color: var(--text-2); }
.tab-shorts a i { color: var(--accent); }
.prof-shorts-row { margin-bottom: 10px; }
.prof-shorts-row .loop-heading { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Shorts rows: never giant cards when there are only a few Shorts
   (auto-fit stretched 1-2 cards over the whole width; auto-fill keeps the normal size,
   with many Shorts the row is still filled exactly) */
@media (min-width: 768px) {
    .shorts-shelf .shorts-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
}
.shorts-shelf .short-card, .prof-shorts-grid .short-card { max-width: 260px; }
.prof-shorts-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 210px)) !important; }
/* profile page row: normal card size, at most one row */
.prof-shorts-row .shorts-row {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 210px)) !important;
    grid-auto-rows: 0; grid-template-rows: auto; row-gap: 0 !important; column-gap: 14px !important;
    overflow: hidden !important;
}
@media (max-width: 767px) {
    .prof-shorts-row .shorts-row { display: flex !important; overflow-x: auto !important; grid-auto-rows: auto; }
    .prof-shorts-row .short-card { flex: 0 0 150px; }
}

/* ---------- profile: Premium videos row */
.prof-prem-row .loop-heading { display: flex; align-items: center; justify-content: space-between; }
.prof-prem-row .loop-heading .tp-star { font-size: 20px; margin-right: 2px; }
.prof-prem-row .video-thumb { box-shadow: inset 0 0 0 2px rgba(245, 180, 0, .0); }
.prof-prem-row .video:hover .video-thumb { box-shadow: 0 0 0 2px #f5b400; }
.prof-prem-hint { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px !important; padding: 6px 12px; border-radius: 12px;
    background: rgba(245, 180, 0, .12); color: var(--text-2); font-size: 13px; }
.prof-prem-hint a { color: #d99a00 !important; font-weight: 700; }

/* ---------- upload page (Video and Shorts): Audience groups side by side on ONE line again
   (SAFE / NSFW   Public / Followers / Premium) - the buttons keep their look */
#formVid .inline { display: inline-block; vertical-align: middle; margin: 0 10px 8px 0 !important; }
#formVid .inline.mleft20 { margin-left: 0 !important; }
#formVid .btn-group[data-toggle="buttons"] { flex-wrap: nowrap; white-space: nowrap; }

/* ---------- upload video: the Audience column was too narrow (half of the form) for
   SAFE / NSFW + Public / Followers / Premium on one line -> wider column, slightly
   tighter buttons (same look) */
#formVid .btn-group[data-toggle="buttons"] > .btn { padding: 8px 12px !important; }
@media (min-width: 992px) {
    #formVid [class*="col-md-6"]:has(> .inline > .btn-group[data-toggle="buttons"]) { width: 58.3333% !important; margin-left: 0 !important; }
}
@media (min-width: 992px) {
    #formVid .vd-audience.col-md-6 { width: 58.3333% !important; margin-left: 0 !important; }
}
#formVid .vd-audience { white-space: nowrap; }
#formVid .vd-audience .control-label { white-space: normal; }

/* ---------- upload video: Topic and Audience on the same line (same top, same bottom) */
@media (min-width: 992px) {
    #formVid .vd-topic-row { display: flex; align-items: flex-end; flex-wrap: nowrap; }
    #formVid .vd-topic-row > [class*="col-"] { float: none; }
    #formVid .vd-topic .control-group { margin: 10px 0 8px !important; }
    #formVid .vd-topic .control-label,
    #formVid .vd-audience .control-label { display: block; margin: 0 0 6px !important; padding: 0 !important; font-size: 13px; font-weight: 700; line-height: 1.3; }
    #formVid .vd-audience { margin-top: 10px !important; padding-top: 0 !important; }
    #formVid .vd-audience .inline { margin-bottom: 8px !important; }
    /* the category field as high as the button groups */
    #formVid .vd-topic .minict_wrapper, #formVid .vd-topic select.form-control, #formVid .vd-topic .select { min-height: 46px; }
}
/* more room for the whole upload video page (was 900px) */
.page.p-addvideo { max-width: 1100px !important; }

/* ---------- upload video: pixel alignment of Topic + Audience
   (the select was ~38px high, the button groups ~46px and pushed down by the inline spacing) */
@media (min-width: 992px) {
    #formVid .vd-topic-row { align-items: flex-start; }
    /* Audience: label on its own line, the two groups side by side right under it */
    #formVid .vd-audience { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 10px; white-space: normal; }
    #formVid .vd-audience > .control-label { flex: 0 0 100%; }
    #formVid .vd-audience > .inline { margin: 0 !important; vertical-align: top; line-height: 1; }
    #formVid .vd-audience .btn-group[data-toggle="buttons"] { height: 46px; box-sizing: border-box; align-items: center; }
    /* the Topic field exactly as high as the button groups */
    #formVid .vd-topic select,
    #formVid .vd-topic .minict_wrapper,
    #formVid .vd-topic .form-control,
    #formVid .vd-topic .controls > input[type=text] { height: 46px !important; min-height: 46px !important; box-sizing: border-box; }
    #formVid .vd-topic .minict_wrapper { display: flex; align-items: center; }
    #formVid .vd-topic .minict_wrapper input { height: 44px !important; line-height: 44px !important; }
    #formVid .vd-topic .control-group { margin: 10px 0 8px !important; }
    #formVid .vd-audience { margin-top: 10px !important; }
}

/* ==========================================================================
   Update 33 - live audience (Everyone / Subscribers / Premium)
   ========================================================================== */
/* Live Studio selector: small and tidy */
.ls-aud { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); transition: opacity .2s; }
.ls-aud.is-busy { opacity: .6; pointer-events: none; }
.ls-aud-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.ls-aud-lbl i { font-size: 17px; }
.ls-aud-opts { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.ls-aud-opt { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.ls-aud-opt i { font-size: 16px; }
.ls-aud-opt:hover { background: var(--surface-3); color: var(--text); }
.ls-aud-opt.is-on { background: var(--grad); color: #fff; }
.ls-aud-opt.is-prem { color: #d99a00; }
.ls-aud-opt.is-prem.is-on { background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; }
.ls-aud-msg { font-size: 12px; color: var(--text-2); }
/* locked player for viewers without access */
.live-locked { display: flex; align-items: center; justify-content: center; }
.live-locked .ll-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) brightness(.45); transform: scale(1.05); }
.live-lock { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; padding: 26px; text-align: center; color: #fff;
    background: rgba(10, 10, 15, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; backdrop-filter: blur(6px); }
.ll-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); font-size: 30px; }
.ll-ico i { font-size: 30px; }
.ll-ico.is-prem { background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; }
.live-lock strong { font-size: 19px; font-weight: 800; }
.live-lock > span { font-size: 14px; opacity: .8; }
.ll-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ll-prem-btn { padding: 11px 22px; border-radius: 24px; font-weight: 900; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; }
.lchat-locked { text-align: center; font-size: 13px; color: var(--text-2); }
/* small badge on the live card */
.live-vcard .lc-aud { position: absolute; top: 8px; left: 68px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; }
.live-vcard .lc-aud i { font-size: 14px; }
.live-vcard .lc-aud.is-prem { background: #f5b400; color: #1a1200; font-weight: 900; }

/* ==========================================================================
   Update 34 - homepage rows from followed channels
   ========================================================================== */
.home-user-head .hu-txt small .hu-ic { font-size: 14px; vertical-align: -2px; margin-right: 2px; }
.home-user-block.is-follow .hu-txt small { color: var(--accent); font-weight: 700; }
.home-user-block.is-rec .hu-txt small { color: #3b82f6; font-weight: 700; }
.home-user-block.is-live-follow {
    padding: 14px 16px 6px; margin: 14px 0 18px; border-radius: 20px;
    background: linear-gradient(120deg, rgba(255, 31, 61, .14), rgba(255, 31, 61, .03)); border: 1px solid rgba(255, 31, 61, .35);
}
.home-user-block.is-live-follow .hu-txt small { color: #ff1f3d; font-weight: 800; display: inline-flex; align-items: center; }
.home-user-block.is-live-follow .hu-txt small .live-pulse { width: 8px; height: 8px; margin-right: 7px; }
.home-user-block.is-live-follow .hu-watch { background: #ff1f3d !important; color: #fff !important; border-color: #ff1f3d !important; }

/* ==========================================================================
   Update 35 - phone fixes: user avatar in the top bar, like / dislike on the video page
   ========================================================================== */
@media (max-width: 660px) {
    /* the theme hid the avatar (a#openusr) under 660px - show it again, a bit smaller */
    .user-quick a#openusr { display: inline-flex !important; width: auto !important; min-width: 30px; align-items: center; }
    .user-quick a#openusr.no-user { display: none !important; }
    .user-quick a#openusr img { width: 30px !important; height: 30px !important; }
    .user-express { padding-left: 6px !important; }
    .user-quick { gap: 2px; }
    .user-quick > a.top-link { padding-left: 6px !important; padding-right: 6px !important; }
    .top-header .logo img { max-height: 30px; }
}

@media (max-width: 700px) {
    /* video page: the buttons may use a second line instead of being cut off */
    .video-under .vd-bar .interaction-icons { flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; }
    .video-under .likes-bar { display: inline-flex !important; flex: 0 0 auto; }
    .video-under .interaction-icons .aaa > a { height: 36px; padding: 0 12px !important; font-size: 13px !important; gap: 5px; }
    .video-under .interaction-icons .aaa > a i { font-size: 19px !important; }
    /* Share / Add to / Report: icon only (like / dislike keep their numbers) */
    .video-under .interaction-icons > .aaa > a span { display: none !important; }
    .video-under .interaction-icons > .aaa > a { padding: 0 11px !important; }
    .video-under .vd-bar .vd-channel { width: 100% !important; }
    .video-under .vd-bar .vd-sub { margin-left: auto; }
    .video-under .vd-sub .subscriber { height: 36px; padding: 0 14px !important; font-size: 13px !important; }
}
@media (max-width: 700px) {
    .video-under .likes-bar .aaa > a span { display: inline !important; }
    .video-under .likes-bar .aaa > a { padding: 0 12px !important; }
}

/* ==========================================================================
   Update 36 - welcome / creators page, live rewards
   ========================================================================== */
#creators-page { max-width: 1400px; margin: 0 auto !important; padding: 20px 0 50px !important; float: none !important; }
.cr-hero { text-align: center; padding: 30px 20px 24px; margin-bottom: 22px; border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 45, 85, .18), transparent 60%), var(--surface); border: 1px solid var(--border); }
.cr-wave { font-size: 44px; line-height: 1; display: inline-block; animation: giftBounce 2.6s ease-in-out infinite; }
.cr-hero h1 { margin: 8px 0 6px !important; font-size: 30px !important; font-weight: 900 !important; letter-spacing: -.02em; }
.cr-hero p { margin: 0 auto !important; max-width: 640px; color: var(--text-2); font-size: 15.5px; }
.cr-hero-actions { margin-top: 14px; }
.cr-skip { border-radius: 20px !important; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cr-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; }
.cr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cr-top { display: flex; gap: 12px; align-items: center; }
.cr-av { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--surface-2); }
.cr-av img { width: 100%; height: 100%; object-fit: cover; }
.cr-who { display: flex; flex-direction: column; min-width: 0; }
.cr-name { font-size: 16.5px; font-weight: 800; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-prem { display: inline-block; width: fit-content; margin: 2px 0; padding: 1px 8px; border-radius: 8px; background: rgba(245, 180, 0, .18); color: #d99a00; font-size: 11px; font-weight: 800; }
.cr-meta { font-size: 12.5px; color: var(--text-2); }
.cr-bio { margin: 0 !important; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.cr-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cr-thumbs a { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.cr-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.cr-thumbs a:hover img { transform: scale(1.06); }
.cr-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.cr-actions .vd-sub { margin-left: 0 !important; }
.cr-visit { font-size: 13px; font-weight: 700; color: var(--text-2) !important; }
.cr-visit:hover { color: var(--text) !important; }
.cr-more-wrap, .cr-done { text-align: center; margin: 22px 0 6px; }
.cr-more, .cr-done .btn { border-radius: 22px !important; padding: 10px 26px !important; font-weight: 700 !important; }
.cr-premium { margin-top: 34px; padding: 22px; border-radius: 24px; border: 1px solid rgba(245, 180, 0, .4);
    background: radial-gradient(circle at 0% 0%, rgba(245, 180, 0, .18), transparent 55%), var(--surface); }
.cr-prem-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-prem-head > div { flex: 1; min-width: 220px; }
.cr-prem-head h2 { margin: 0 0 2px !important; font-size: 21px !important; font-weight: 900 !important; }
.cr-prem-head p { margin: 0 !important; color: var(--text-2); }
.cr-prem-btn { padding: 11px 22px; border-radius: 24px; font-weight: 900; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; white-space: nowrap; }
.cr-prem-trial { margin: -4px 0 14px !important; font-weight: 700; color: #d99a00; }
/* live rewards */
.lv-reward { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.lv-reward i { font-size: 19px; }
.lv-reward.is-ok { background: rgba(22, 163, 74, .12); color: #16a34a; }
.lv-reward.is-warn { background: rgba(217, 119, 6, .12); color: #d97706; }
.earn-pos { color: #16a34a !important; }
.rw-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rw-rules > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.rw-rules b { font-size: 19px; font-weight: 900; color: #16a34a; }
.rw-rules span { font-size: 12.5px; color: var(--text-2); }

/* ---------- live rewards: premium rate */
.rw-rules > div.is-mine { box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .55); }
.rw-rules > div.rw-prem b { color: #f5b400; }
.rw-rules > div.rw-prem.is-mine { box-shadow: inset 0 0 0 2px rgba(245, 180, 0, .6); }

/* ==========================================================================
   Update 37 - features pack 1: mobile nav, subscriptions, notifications, continue watching
   ========================================================================== */
/* bottom navigation (phones only) */
.mbnav, .mbsheet { display: none; }
@media (max-width: 768px) {
    .mbnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); border-top: 1px solid var(--border);
        align-items: center; justify-content: space-around;
    }
    .mbn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%;
        color: var(--text-2) !important; font-size: 10.5px; font-weight: 600; background: none; border: 0; }
    .mbn i { font-size: 24px; }
    .mbn img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
    .mbn.is-on { color: var(--text) !important; }
    .mbn.is-on img { box-shadow: 0 0 0 2px var(--text); }
    .mbn-plus { flex: 0 0 auto; }
    .mbn-plus i { width: 44px; height: 32px; border-radius: 12px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
    .mbn-dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: #ff1f3d; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
    .vibe-mini { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
    .mbsheet { display: block; position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 1499; pointer-events: none; }
    .mbsheet-in { margin: 0 10px 10px; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
        transform: translateY(20px); opacity: 0; transition: transform .2s, opacity .2s; }
    .mbsheet.is-open { pointer-events: auto; }
    .mbsheet.is-open .mbsheet-in { transform: none; opacity: 1; }
    .mbsheet a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; color: var(--text) !important; font-weight: 600; font-size: 15px; }
    .mbsheet a:active { background: var(--surface-2); }
    .mbsheet a i { font-size: 22px; color: var(--text-2); }
    .mbsheet a.is-live, .mbsheet a.is-live i { color: #ff1f3d; }
}
/* subscriptions page */
#subs-page, #notif-page { max-width: 1600px; margin: 0 auto !important; float: none !important; padding: 18px 0 40px !important; }
.subs-chans { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; margin-bottom: 6px; scrollbar-width: thin; }
.subs-chan { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-2) !important; font-size: 12px; text-align: center; }
.subs-chan img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; transition: box-shadow .15s; }
.subs-chan:hover img { box-shadow: 0 0 0 3px var(--accent); }
/* notifications */
.nt-item { color: var(--text) !important; }
.nt-item.is-new { box-shadow: inset 3px 0 0 var(--accent); background: rgba(255, 45, 85, .06) !important; }
.nt-thumb { flex: 0 0 120px; width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
@media (max-width: 600px) { .nt-thumb { flex-basis: 84px; width: 84px; } }
/* continue watching: progress under the thumbnail + resume message */
.video-thumb .wprog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .35); z-index: 4; }
.video-thumb .wprog span { display: block; height: 100%; background: #ff1f3d; }
.resume-toast { position: absolute; left: 14px; bottom: 58px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px;
    background: rgba(10, 10, 15, .85); color: #fff; font-size: 13px; font-weight: 700; animation: pbIn .3s ease; }
.resume-toast button { border: 0; border-radius: 8px; padding: 5px 10px; background: rgba(255, 255, 255, .15); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; }
.resume-toast button:hover { background: rgba(255, 255, 255, .28); }

/* ==========================================================================
   Update 38 - features pack 2
   ========================================================================== */
/* Up next inside the player */
.upnext { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); animation: pbIn .3s ease; }
.un-in { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; padding: 18px; text-align: center; color: #fff; }
.un-in small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.un-in img { width: 260px; max-width: 70vw; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.un-in b { font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.un-ring { position: relative; width: 44px; height: 44px; }
.un-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.un-ring circle { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 3; }
.un-ring circle.un-p { stroke: #ff1f3d; stroke-dasharray: 100.5; stroke-dashoffset: 0; animation: unRing 5s linear forwards; }
@keyframes unRing { to { stroke-dashoffset: 100.5; } }
.un-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.un-btns { display: flex; gap: 10px; }
.un-btns button, .un-btns a { padding: 9px 18px; border-radius: 20px; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; }
.un-cancel { background: rgba(255, 255, 255, .15); color: #fff; }
.un-play { background: #fff; color: #111 !important; }
/* search suggestions */
.sug-box { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2000; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.sug-box.is-open { display: block; }
.sug-it { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text) !important; font-size: 14px; }
.sug-it:hover, .sug-it.is-sel { background: var(--surface-2); }
.sug-it img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: 0 0 64px; }
.sug-channel img { width: 36px; height: 36px; flex-basis: 36px; border-radius: 50%; margin: 0 14px 0 14px; }
.sug-it span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-it small { font-size: 11px; color: var(--text-3); text-transform: uppercase; font-weight: 700; }
.sug-search i { color: var(--text-2); width: 64px; text-align: center; }
/* search filter chips */
.sf-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 16px; }
.sf-group { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chip { padding: 6px 13px; border-radius: 16px; background: var(--surface-2); color: var(--text-2) !important; font-size: 13px; font-weight: 700; }
.sf-chip:hover { color: var(--text) !important; background: var(--surface-3); }
.sf-chip.is-on { background: var(--text); color: var(--bg) !important; }
/* chapters + hashtags */
a.ts-link { color: var(--link) !important; font-weight: 700; }
a.ht-link { color: var(--link) !important; }
.share-at em { font-style: normal; font-variant-numeric: tabular-nums; }
/* hashtag page */
#hashtag-page { max-width: 1600px; margin: 0 auto !important; float: none !important; padding: 18px 0 40px !important; }
.ht-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ht-hash { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 34px; font-weight: 900; }
.ht-head h1 { margin: 0 !important; font-size: 28px !important; font-weight: 900 !important; }
.ht-head span { color: var(--text-2); }

/* ==========================================================================
   Update 39 - features pack 3: stats, scheduling, scheduled lives, comments
   ========================================================================== */
/* stats */
.st-page { display: flex; flex-direction: column; gap: 18px; }
.st-chart { width: 100%; height: 210px; display: block; }
.st-chart .st-axis { stroke: var(--border); stroke-width: 1; }
.st-chart .st-lbl { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.st-chart rect:hover { opacity: .75; }
.st-top { display: flex; flex-direction: column; gap: 6px; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--text) !important; }
.st-row:hover { background: var(--surface-2); }
.st-n { width: 22px; text-align: center; font-weight: 900; color: var(--text-3); }
.st-row img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.st-t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-v { text-align: right; white-space: nowrap; }
.st-v small { display: block; color: var(--text-3); font-size: 11.5px; }
/* upload: schedule publishing */
.vd-schedule { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.vd-schedule .ls-check { margin: 0 !important; }
.vd-schedule .ls-check i { font-size: 18px; color: var(--text-2); }
.vd-sched-box { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 320px; }
/* scheduled lives */
.ls-sched { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ls-sched-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-sched-row input { flex: 1; min-width: 180px; height: 38px !important; }
.lv-sched { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.lv-sched-when { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.lv-sched-when b { color: #fff; }
.lv-remind { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 0; border-radius: 22px; background: #fff; color: #111; font-weight: 800; cursor: pointer; }
.lv-remind.is-on { background: rgba(255, 255, 255, .18); color: #fff; }
.lv-sched small { opacity: .7; }
.lv-upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; }
.lv-up { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text) !important; }
.lv-up:hover { border-color: var(--accent); }
.lv-up img { width: 110px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.lv-up-txt { display: flex; flex-direction: column; min-width: 0; }
.lv-up-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-up-txt small { color: var(--text-2); font-size: 12px; }
/* comments: sort, pinned, creator heart */
.cm-sort { display: flex; align-items: center; gap: 12px; margin: -6px 0 14px; font-size: 13px; }
.cm-sort i { font-size: 18px; color: var(--text-2); }
.cm-sort a { color: var(--text-2) !important; font-weight: 700; padding: 4px 10px; border-radius: 14px; }
.cm-sort a.is-on { background: var(--surface-2); color: var(--text) !important; }
.comments li.is-pinned > .message { background: rgba(255, 45, 85, .05); border-radius: 12px; }
.cm-pinned { display: flex; align-items: center; gap: 4px; margin: 0 0 4px 60px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.cm-pinned i { font-size: 15px; transform: rotate(45deg); }
.cm-heart-badge { display: inline-flex !important; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.cm-heart-badge span { color: #ff1f3d; }
.cm-tools { display: inline-flex !important; gap: 10px; }
.cm-tools a { display: inline-flex; align-items: center; gap: 4px; }
.cm-tools a i { font-size: 15px !important; }
.cm-tools a.is-on, .cm-tools a.is-on span { color: #ff1f3d !important; }

/* ---------- theater mode (like YouTube): ONLY the player gets the whole width;
   under it the details (left) and the recommendations (right) stay as usual */
@media (min-width: 992px) {
    html.vd-theater .vd-player-col { width: 100% !important; float: none !important; clear: both; }
    html.vd-theater .vd-player-col #video-content { background: #000; border-radius: 18px; }
    html.vd-theater .vd-player-col .video-player {
        float: none !important; width: 100% !important; margin: 0 auto !important;
        max-width: calc((100vh - 160px) * 16 / 9);
    }
}

/* ---------- video page actions: Like|Dislike · Share · Add To · ⋯ (Report, Share at, Theater) */
.video-under .vd-bar { row-gap: 12px; }
.video-under .interaction-icons { gap: 8px !important; }
.video-under .vd-more { position: relative; }
.video-under .vd-more .vd-more-btn { width: 40px; padding: 0 !important; justify-content: center; }
.vd-more-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; padding: 6px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.vd-more.is-open .vd-more-menu { display: block; }
.vd-more-menu a.vd-mi, .vd-more-menu .vd-mi {
    display: flex !important; align-items: center; gap: 12px; width: 100%; height: auto !important; padding: 10px 12px !important;
    border-radius: 10px !important; background: transparent !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap;
}
.vd-more-menu a.vd-mi:hover { background: var(--surface-2) !important; }
.vd-more-menu .vd-mi i { font-size: 20px !important; color: var(--text-2) !important; }
.vd-more-menu .vd-mi span { display: inline !important; }
html.vd-theater .vd-more-menu .theater-btn i { color: var(--accent) !important; }
@media (max-width: 700px) { .vd-more-menu { right: auto; left: 0; } }

/* ---------- channel bell next to "Subscribed" */
.vd-bell { position: relative; display: inline-flex; margin-left: 6px; }
.vd-bell[hidden] { display: none !important; }
.vd-bell-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text) !important; }
.vd-bell-btn:hover { background: var(--surface-3); }
.vd-bell-btn i { font-size: 21px; }
.vd-bell-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 260px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.vd-bell.is-open .vd-bell-menu { display: block; }
.vb-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text) !important; }
.vb-opt:hover { background: var(--surface-2); }
.vb-opt i { font-size: 21px; color: var(--text-2); }
.vb-opt span { display: flex; flex-direction: column; line-height: 1.25; }
.vb-opt b { font-size: 14px; }
.vb-opt small { font-size: 12px; color: var(--text-2); }
.vb-opt.is-on { background: rgba(255, 45, 85, .08); }
.vb-opt.is-on i, .vb-opt.is-on b { color: var(--accent); }

/* ---------- homepage "Because you watched" */
.hu-watchrow .hu-vthumb { width: 72px; height: 40px; object-fit: cover; border-radius: 8px; }
.home-user-block.is-watch .hu-txt small { color: #8b5cf6; font-weight: 700; }

/* ==========================================================================
   Update 41
   ========================================================================== */
/* red notification number on the bell */
a#notifs .badge, #notifs .badge, .top-link .badge-primary { background: #ff1f3d !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 0 0 2px var(--bg); }
/* Media Studio: scheduled videos */
.sched-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 10px; border-radius: 12px; background: rgba(59, 130, 246, .15); color: #3b82f6; font-size: 12px; font-weight: 700; }
.sched-badge i { font-size: 15px; }

/* ---------- video cards: channel · 👁 views · time on ONE line */
html body .vgrid .video ul.stats { flex-wrap: nowrap !important; gap: 0; min-width: 0; }
html body .vgrid .video ul.stats > li.uploaderlink { flex: 0 1 auto !important; min-width: 0; margin: 0 !important; overflow: hidden; }
html body .vgrid .video ul.stats > li.uploaderlink a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .vgrid .video ul.stats > li.uploaderlink + li:before { display: inline !important; content: "\2022"; margin: 0 7px; color: var(--text-3); }
html body .vgrid .video ul.stats > li.vs-views, html body .vgrid .video ul.stats > li.vs-time { flex: 0 0 auto; white-space: nowrap; }
html body .vgrid .video ul.stats > li.vs-views { display: inline-flex; align-items: center; gap: 3px; }
html body .vgrid .video ul.stats > li.vs-views i { font-size: 15px; opacity: .8; }
/* live cards keep their own two lines */
html body .vgrid .live-vcard ul.stats { flex-wrap: wrap !important; }
html body .vgrid .live-vcard ul.stats > li.uploaderlink { flex: 0 0 100% !important; }
html body .vgrid .live-vcard ul.stats > li.uploaderlink + li:before { display: none !important; }

/* ---------- sidebar "Show more" */
.side-hidden { display: none !important; }
.side-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin: 8px 0 18px; padding: 9px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.side-more:hover { background: var(--surface-2); }
.side-more i { font-size: 20px; }

/* ---------- phone: the buttons under the video as one tidy scrollable row (no big separate circles) */
@media (max-width: 700px) {
    .video-under .vd-bar .interaction-icons {
        flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible; justify-content: flex-start !important;
        gap: 6px !important; padding: 2px 0 6px !important; margin: 0 -2px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .video-under .vd-bar .interaction-icons::-webkit-scrollbar { display: none; }
    .video-under .interaction-icons > .aaa { flex: 0 0 auto; }
    .video-under .interaction-icons .aaa > a { height: 34px !important; padding: 0 12px !important; border-radius: 17px !important; font-size: 13px !important; gap: 5px !important; }
    .video-under .interaction-icons .aaa > a i { font-size: 18px !important; }
    /* Share / Add To keep a short label (not just a round icon) */
    .video-under .interaction-icons > .aaa > a span { display: inline !important; }
    .video-under .interaction-icons > .vd-more > a.vd-more-btn { width: 34px; padding: 0 !important; }
    .video-under .likes-bar .aaa > a { padding: 0 11px !important; }
    .vd-more-menu { position: fixed; left: 10px !important; right: 10px !important; top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .video-under .vd-bar .vd-channel { flex-wrap: nowrap; gap: 10px; }
    .video-under .vd-bar .vd-ch-name { font-size: 15px; }
}
.vb-opt.vb-unsub { border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; margin-top: 4px; }
.vb-opt.vb-unsub i, .vb-opt.vb-unsub b { color: #dc2626; }
/* upcoming live card */
.live-vcard.is-upcoming .lc-up { background: #3b82f6 !important; display: inline-flex; align-items: center; gap: 4px; }
.live-vcard.is-upcoming .lc-up i { font-size: 14px; }
.live-vcard.is-upcoming .lc-when { background: rgba(0, 0, 0, .75) !important; }
html body .vgrid .video ul.stats > li.lc-up-now { color: #3b82f6 !important; display: inline-flex; align-items: center; gap: 4px; }
.live-vcard.is-upcoming:hover .video-thumb { box-shadow: 0 0 0 3px #3b82f6 !important; }

/* ---------- raid: moving the viewers to another live */
.raid-ov { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .75); backdrop-filter: blur(4px); animation: pbIn .3s ease; }
.raid-in { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; padding: 28px; text-align: center; color: #fff; background: var(--surface, #16161d); border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); }
.raid-in > i { font-size: 44px; color: #8b5cf6; }
.raid-in b { font-size: 18px; line-height: 1.35; color: var(--text, #fff); }
.raid-n { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #8b5cf6; font-size: 24px; font-weight: 900; }
.raid-in div { display: flex; gap: 10px; }
.raid-go { padding: 10px 20px; border-radius: 22px; background: #8b5cf6; color: #fff !important; font-weight: 800; }
.raid-stay { padding: 10px 20px; border-radius: 22px; border: 0; background: rgba(255, 255, 255, .12); color: var(--text, #fff); font-weight: 700; cursor: pointer; }
.ls-raid .ls-aud-lbl i { color: #8b5cf6; }
.ls-raid select { flex: 1; min-width: 180px; height: 38px !important; }
/* Earnings: how to cash out */
.earn-steps { list-style: none; counter-reset: es; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.earn-steps li { counter-increment: es; position: relative; padding: 14px 14px 14px 52px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; }
.earn-steps li:before { content: counter(es); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.earn-steps b { font-size: 14.5px; }
.earn-steps span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
/* PWA install bar */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 2500; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: pbIn .3s ease; }
.pwa-install i { font-size: 24px; color: var(--accent); }
.pwa-install span { flex: 1; font-weight: 700; font-size: 14px; }
.pwa-install .pwa-yes { border: 0; border-radius: 18px; padding: 8px 16px; background: var(--grad); color: #fff; font-weight: 800; }
.pwa-install .pwa-no { border: 0; background: none; color: var(--text-2); font-size: 22px; padding: 0 6px; }
@media (min-width: 769px) { .pwa-install { left: auto; right: 20px; bottom: 20px; width: 340px; } }

/* ==========================================================================
   Update 42
   ========================================================================== */
/* ---------- Subscribe / Subscribed: nicer buttons (video page, live page, creators ...) */
html body .btn-subscribing a.subscriber {
    display: inline-flex !important; align-items: center; gap: 6px; height: 40px; padding: 0 18px !important;
    border: 0 !important; border-radius: 20px !important; font-size: 14px !important; font-weight: 800 !important;
    letter-spacing: .01em; text-transform: none !important; line-height: 1 !important; white-space: nowrap;
    transition: transform .15s, box-shadow .15s, background .15s;
}
html body .btn-subscribing a.subscriber.social-google-plus {
    background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(255, 45, 85, .32) !important;
}
html body .btn-subscribing a.subscriber.social-google-plus:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 45, 85, .42) !important; }
html body .btn-subscribing a.subscriber.social-google-plus:before { content: "\E7FE"; font-family: "Material Icons"; font-size: 18px; font-weight: 400; -webkit-font-feature-settings: "liga"; }
html body .btn-subscribing a.subscriber.btn-default { background: var(--surface-2) !important; color: var(--text) !important; box-shadow: none !important; }
html body .btn-subscribing a.subscriber.btn-default:hover { background: var(--surface-3) !important; }
html body .btn-subscribing a.subscriber.btn-default:before { content: "\E876"; font-family: "Material Icons"; font-size: 18px; font-weight: 400; -webkit-font-feature-settings: "liga"; }
html body .btn-subscribing a.subscriber .icon { display: none !important; }

/* ---------- phone: Like | Dislike · Share · Add To · ⋯ as tidy pills (icon + number side by side) */
@media (max-width: 767px) {
    /* Bootstrap turns .visible-xs into display:block - that put every number UNDER its icon */
    html body .video-under .interaction-icons .aaa > a > span,
    html body .video-under .interaction-icons .aaa > a > span.visible-xs,
    html body .video-under .likes-bar .aaa > a > span { display: inline !important; }
    html body .video-under .interaction-icons .aaa > a {
        display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center;
        height: 36px !important; min-width: 36px; padding: 0 13px !important; margin: 0 !important; gap: 6px !important;
        border: 0 !important; border-radius: 18px !important; background: var(--surface-2) !important; color: var(--text) !important;
        font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important;
    }
    html body .video-under .interaction-icons .aaa > a i { font-size: 18px !important; line-height: 1 !important; margin: 0 !important; }
    /* like + dislike = one pill with a thin divider */
    html body .video-under .likes-bar { display: inline-flex !important; align-items: center; border-radius: 18px; background: var(--surface-2); overflow: hidden; }
    html body .video-under .likes-bar .aaa { margin: 0 !important; }
    html body .video-under .likes-bar .aaa > a { background: transparent !important; border-radius: 0 !important; }
    html body .video-under .likes-bar .aaa + .aaa { border-left: 1px solid var(--border); }
    html body .video-under .likes-bar .aaa > a.done-like, html body .video-under .likes-bar .aaa > a.active { color: var(--accent) !important; }
    html body .video-under .interaction-icons > .vd-more > a.vd-more-btn { width: 36px; padding: 0 !important; background: var(--surface-2) !important; }
    html body .video-under .interaction-icons > .aaa:before, html body .video-under .interaction-icons > .aaa:after { display: none !important; }
    html body .btn-subscribing a.subscriber { height: 36px; padding: 0 14px !important; font-size: 13px !important; }
}

/* ---------- video page sidebar: same fonts in "More from" and "Recommended", tidy details */
.rur .vside-list .vl-title, .rur .video-related .data .title, .rur .video-related .data .title a {
    font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important;
    letter-spacing: 0 !important; color: var(--text) !important;
}
.rur .video-related .data .title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rur .rel-meta { display: flex !important; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 12.5px !important; color: var(--text-2) !important; }
.rur .rel-meta .rel-by { display: inline-flex !important; align-items: center; gap: 6px; color: var(--text-2) !important; font-weight: 600; min-width: 0; }
.rur .rel-meta .rel-by span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rur .rel-meta .rel-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 18px; }
.rur .rel-stats, .rur .vside-list .vl-views { display: inline-flex !important; align-items: center; gap: 3px; font-size: 12.5px !important; color: var(--text-2) !important; opacity: 1 !important; }
.rur .rel-stats i, .rur .vside-list .vl-views i, .vside-short .vs-views i { font-size: 14px; opacity: .8; }
.rur .rel-stats em, .rur .vside-list .vl-views em { font-style: normal; margin: 0 2px; color: var(--text-3); }
.vside-short .vs-views { display: inline-flex !important; align-items: center; gap: 3px; }
/* Shorts in the sidebar: a bit bigger (3 visible, the rest scroll sideways) */
.rur .vside-shorts-row { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3) !important; grid-template-columns: none !important;
    gap: 8px !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rur .vside-shorts-row::-webkit-scrollbar { display: none; }
.rur .vside-short .vs-title { font-size: 12.5px !important; font-weight: 600 !important; }
/* "No more videos" */
.side-more.is-done { opacity: .6; cursor: default; }

/* ---------- homepage: "Recommended for you" rows */
.hu-recico { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 92, 246, .15); color: #8b5cf6; flex: 0 0 40px; }
.hu-recico i { font-size: 22px; }
.hu-watchrow .hu-link { cursor: default; }

/* ==========================================================================
   Update 42.1 - sidebar details on phones (the avatar took the whole width), small premium star
   ========================================================================== */
html body .rur .video-related .rel-meta img.rel-av,
html body .rur .video-related .data .rel-meta img.rel-av,
html body .rur .rel-meta .rel-av {
    width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; max-height: 18px !important;
    flex: 0 0 18px !important; border-radius: 50% !important; object-fit: cover !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
}
/* letter avatars (no picture) keep the same small size */
html body .rur .rel-meta .rel-av[data-vav], html body .rur .rel-meta canvas { width: 18px !important; height: 18px !important; }
html body .rur .rel-meta .rel-by { flex-direction: row !important; flex-wrap: nowrap !important; max-width: 100%; }
/* premium star / group badge: next to the name, text size */
html body .rur .rel-meta .rel-badge { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 2px; line-height: 1; }
html body .rur .rel-meta .rel-badge img, html body .rur .rel-meta .rel-badge svg { width: auto !important; height: 13px !important; max-height: 13px !important; max-width: 40px !important; }
html body .rur .rel-meta .rel-badge i, html body .rur .rel-meta .rel-badge .material-icons, html body .rur .rel-meta .rel-badge span { font-size: 13px !important; line-height: 1 !important; }
/* phones: the whole related card a bit tighter */
@media (max-width: 767px) {
    html body .rur .video-related li .inner { display: flex !important; gap: 10px; align-items: flex-start; }
    html body .rur .video-related li .thumb { flex: 0 0 44%; max-width: 44%; }
    html body .rur .video-related li .data { flex: 1; min-width: 0; padding: 0 !important; }
    html body .rur .video-related .data .title a { font-size: 14px !important; }
    html body .rur .rel-meta { font-size: 12px !important; }
}

/* ==========================================================================
   Update 42.2 - phones: the theme copies the recommendations to .related-mobi (under the
   video) and deletes the right column (.rur) - the same look must apply there too
   ========================================================================== */
html body .related-mobi .rel-meta img.rel-av, html body .related-mobi .video-related .rel-meta img.rel-av, html body .related-mobi .rel-meta .rel-av {
    width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; max-height: 18px !important;
    flex: 0 0 18px !important; float: none !important; border-radius: 50% !important; object-fit: cover !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
}
html body .related-mobi .rel-meta { display: flex !important; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 12px !important; color: var(--text-2) !important; }
html body .related-mobi .rel-meta .rel-by { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; color: var(--text-2) !important; font-weight: 600; min-width: 0; max-width: 100%; }
html body .related-mobi .rel-meta .rel-by span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .related-mobi .rel-meta .rel-badge { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 2px; line-height: 1; }
html body .related-mobi .rel-meta .rel-badge img, html body .related-mobi .rel-meta .rel-badge svg { width: auto !important; height: 13px !important; max-height: 13px !important; max-width: 40px !important; float: none !important; }
html body .related-mobi .rel-meta .rel-badge i, html body .related-mobi .rel-meta .rel-badge .material-icons { font-size: 13px !important; }
html body .related-mobi .rel-stats { display: inline-flex !important; align-items: center; gap: 3px; font-size: 12px !important; color: var(--text-2) !important; }
html body .related-mobi .rel-stats i { font-size: 14px; opacity: .8; }
html body .related-mobi .rel-stats em { font-style: normal; margin: 0 2px; color: var(--text-3); }
html body .related-mobi .video-related .data .title, html body .related-mobi .video-related .data .title a {
    font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--text) !important;
}
html body .related-mobi .video-related .data .title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* compact card: thumbnail left, text right */
html body .related-mobi .video-related li .inner { display: flex !important; gap: 10px; align-items: flex-start; }
html body .related-mobi .video-related li .thumb { flex: 0 0 44%; max-width: 44%; width: 44% !important; height: auto !important; aspect-ratio: 16 / 9; float: none !important; }
html body .related-mobi .video-related li .thumb img { width: 100% !important; height: 100% !important; object-fit: cover; float: none !important; }
html body .related-mobi .video-related li .data { flex: 1; min-width: 0; padding: 0 !important; float: none !important; }
html body .related-mobi #revealRelated { display: none !important; }
/* Shorts and "More from" moved into the phone box */
.vside-mobi { margin-bottom: 8px; }
.vside-mobi .vside-shorts-row { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3) !important; grid-template-columns: none !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; }
.vside-mobi .vside-shorts-row::-webkit-scrollbar { display: none; }
.vside-mobi .vl-thumb { flex: 0 0 44%; height: auto; aspect-ratio: 16 / 9; }
.vside-mobi .vl-title { font-size: 14px !important; font-weight: 600 !important; }
.vside-mobi .vl-views { display: inline-flex !important; align-items: center; gap: 3px; font-size: 12px !important; color: var(--text-2) !important; opacity: 1 !important; }
.vside-mobi .vl-views i, .vside-mobi .vs-views i { font-size: 14px; }
.vside-mobi .vl-views em { font-style: normal; margin: 0 2px; }

/* ==========================================================================
   Update 43 - phones: the action row rebuilt from zero, related cards inside the screen,
   smaller group / premium badges
   ========================================================================== */
/* ---------- group / premium badge set in Admin (e.g. the premium tick): text size everywhere */
html body .vgrid .video ul.stats li.uploaderlink img:not(.vg-av),
html body .vgrid .video ul.stats li.uploaderlink svg,
html body .vd-ch-name img, html body .vd-ch-name svg,
html body .home-user-head .hu-txt img:not(.hu-vthumb), html body .cr-name + img {
    width: auto !important; height: 14px !important; max-height: 14px !important; max-width: 36px !important;
    border-radius: 0 !important; margin: 0 0 0 3px !important; vertical-align: -2px !important; display: inline-block !important; flex: 0 0 auto !important;
}
html body .vgrid .video ul.stats li.uploaderlink i:not(.material-icons), html body .vd-ch-name i:not(.material-icons) { font-size: 13px !important; }

/* ---------- related cards on phones: the theme gives the text a fixed 188px left margin
   (made for a floated 180px thumbnail) - it pushed the details off the screen */
@media (max-width: 989px) {
    html body .related-mobi .video-related .data, html body .rur .video-related .data { margin-left: 0 !important; }
    html body .related-mobi .video-related li, html body .rur .video-related li { margin-left: 0 !important; width: auto !important; max-width: 100%; }
    html body .related-mobi .video-related ul, html body .related-mobi .video-related { padding-left: 0 !important; margin-left: 0 !important; }
    html body .related-mobi .video-related li .inner { width: 100%; }
    html body .related-mobi .video-related li .thumb img, html body .related-mobi .video-related li:hover img { border: 0 !important; }
    html body .related-mobi .PlayUP { padding: 0 2px 8px !important; }
}

/* ---------- phones: channel row + action row, rebuilt */
@media (max-width: 767px) {
    html body .video-under .vd-bar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; }
    /* channel: avatar · name / subscribers · Subscribe (right) · bell */
    html body .video-under .vd-bar .vd-channel { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; }
    html body .video-under .vd-bar .vd-av { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
    html body .video-under .vd-bar .vd-ch-txt { flex: 1 1 auto !important; min-width: 0 !important; }
    html body .video-under .vd-bar .vd-ch-name { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px !important; }
    html body .video-under .vd-bar .vd-ch-subs { font-size: 12px !important; }
    html body .video-under .vd-bar .vd-sub { flex: 0 0 auto !important; margin: 0 0 0 auto !important; }
    html body .video-under .vd-bar .vd-bell { flex: 0 0 auto !important; margin: 0 !important; }
    html body .video-under .vd-bar .vd-bell-btn { width: 36px !important; height: 36px !important; }

    /* the row of buttons */
    html body .video-under .vd-bar .interaction-icons {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important;
        gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 0 2px !important; border: 0 !important; min-height: 0 !important;
        overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    html body .video-under .vd-bar .interaction-icons::-webkit-scrollbar { display: none; }
    html body .video-under .vd-bar .interaction-icons > *,
    html body .video-under .vd-bar .interaction-icons .aaa,
    html body .video-under .vd-bar .likes-bar,
    html body .video-under .vd-bar .likes-bar .aaa { flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
    /* Like | Dislike = one pill */
    html body .video-under .vd-bar .likes-bar {
        display: inline-flex !important; align-items: center !important; height: 36px !important; padding: 0 !important; border: 0 !important;
        border-radius: 18px !important; background: var(--surface-2) !important; overflow: hidden !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa:first-child:after, html body .video-under .vd-bar .likes-bar .aaa:after { display: none !important; content: none !important; }
    html body .video-under .vd-bar .likes-bar .aaa + .aaa { border-left: 1px solid var(--border) !important; }
    html body .video-under .vd-bar .like-box, html body .video-under .vd-bar .like-progress { display: none !important; }
    /* every button */
    html body .video-under .vd-bar .interaction-icons .aaa > a {
        display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
        height: 36px !important; min-width: 36px !important; padding: 0 14px !important; margin: 0 !important; gap: 6px !important;
        border: 0 !important; border-radius: 18px !important; background: var(--surface-2) !important; color: var(--text) !important;
        font-size: 13.5px !important; font-weight: 700 !important; line-height: 1 !important; text-align: left !important; box-shadow: none !important; white-space: nowrap !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa > a { background: transparent !important; border-radius: 0 !important; padding: 0 14px !important; }
    html body .video-under .vd-bar .interaction-icons .aaa > a:before { display: none !important; content: none !important; }
    html body .video-under .vd-bar .interaction-icons .aaa > a i {
        font-size: 20px !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; color: inherit !important;
    }
    html body .video-under .vd-bar .interaction-icons .aaa > a span,
    html body .video-under .vd-bar .interaction-icons .aaa > a span.visible-xs,
    html body .video-under .vd-bar .likes-bar span {
        display: inline !important; line-height: 1 !important; font-weight: 700 !important; font-size: 13.5px !important; margin: 0 !important; color: inherit !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa > a.isLiked { color: var(--accent) !important; }
    html body .video-under .vd-bar .interaction-icons > .vd-more > a.vd-more-btn { width: 36px !important; padding: 0 !important; }
    html body .video-under .vd-bar .interaction-icons .dropdown-menu { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ==========================================================================
   Update 43.1
   ========================================================================== */
/* ---------- group badges set in Admin > User groups (".grcreative"): the Premium one is an
   icon font (<i class="material-icons">), the Admin / Verified ones are SVG - all small now */
html body .grcreative { display: inline-flex !important; align-items: center; vertical-align: -2px; line-height: 1 !important; margin-left: 3px; }
html body .grcreative svg, html body .grcreative img { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; }
html body .grcreative i, html body .grcreative .material-icons { font-size: 14px !important; width: 14px !important; height: 14px !important; line-height: 14px !important; margin: 0 !important; }
/* a little bigger next to the channel name on the video page and in profile headers */
html body .vd-ch-name .grcreative svg, html body .vd-ch-name .grcreative img { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; }
html body .vd-ch-name .grcreative i, html body .vd-ch-name .grcreative .material-icons { font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 16px !important; }

/* ---------- theater mode: ambient light behind the player */
.vd-ambient { display: none; }
@media (min-width: 992px) {
    html.vd-theater .vd-player-col { position: relative; }
    html.vd-theater .vd-player-col #video-content { position: relative; z-index: 1; }
    html.vd-theater .vd-ambient {
        display: block; position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none;
        background-size: cover; background-position: center; border-radius: 30px;
        filter: blur(70px) saturate(1.5) brightness(1.05); opacity: .6; transform: scale(1.06);
        transition: opacity .6s ease;
    }
    html.vd-theater .vd-ambient.has-frame { background-image: none !important; }
    html:not(.vd-dark) .vd-ambient, html.vd-light .vd-ambient { opacity: .35; }
    html.vd-theater .vd-player-col #video-content { background: transparent; }
}

/* ---------- app (PWA): + menu entry, check box (?pwa-check) */
.mbsheet a.mb-install, .mbsheet a.mb-install i { color: var(--accent) !important; }
.pwa-check { position: fixed; left: 10px; right: 10px; top: 10px; z-index: 5000; max-height: 80vh; overflow: auto; padding: 14px 16px; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13.5px; }
.pwa-check ul { list-style: none; margin: 8px 0; padding: 0; }
.pwa-check li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.pwa-check li.ok { color: #16a34a; }
.pwa-check li.bad { color: #dc2626; }
.pwa-check small { display: block; color: var(--text-2); word-break: break-all; }
.pwa-check button { border: 0; border-radius: 14px; padding: 7px 16px; background: var(--surface-2); color: var(--text); font-weight: 700; }
@media (min-width: 769px) { .pwa-check { left: auto; width: 420px; } }

/* ==========================================================================
   Update 44 - same look at every screen size, ⋮ card menu, "For you", lives starting soon
   ========================================================================== */
/* ---------- columns follow the screen width (cards keep about the same size everywhere) */
@media (min-width: 701px) {
    html body .vgrid:not(.hide), html body .home-user-block .vgrid:not(.hide), html body .live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
    html body .vgrid:not(.hide), html body .home-user-block .vgrid:not(.hide), html body .live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1500px) {
    html body .vgrid:not(.hide), html body .home-user-block .vgrid:not(.hide), html body .live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1900px) {
    html body .vgrid:not(.hide), html body .home-user-block .vgrid:not(.hide), html body .live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 2400px) {
    html body .vgrid:not(.hide), html body .home-user-block .vgrid:not(.hide), html body .live-user-block .vgrid:not(.hide) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
/* lists that must stay one column */
html body .live-side-list.vgrid:not(.hide) { grid-template-columns: 1fr !important; }
/* homepage rows: only complete lines */
html body #home-content .vgrid > .video.row-trim { display: none !important; }

/* ---------- ⋮ on video cards */
.vgrid .video { position: relative; }
.vc-more {
    position: absolute; right: -4px; bottom: 34px; z-index: 5; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-2); cursor: pointer;
    opacity: 0; transition: opacity .15s, background .15s;
}
.vgrid .video:hover .vc-more, .vc-more:focus { opacity: 1; }
.vc-more:hover { background: var(--surface-2); color: var(--text); }
.vc-more i { font-size: 22px; }
@media (hover: none) { .vc-more { opacity: .85; } }
.vgrid .video .video-data { padding-right: 26px; }
.vc-menu {
    display: none; position: fixed; z-index: 4000; min-width: 250px; padding: 6px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.vc-menu.is-open { display: block; }
.vc-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text) !important; font-size: 14px; font-weight: 600; }
.vc-menu a:hover { background: var(--surface-2); }
.vc-menu a i { font-size: 20px; color: var(--text-2); }
.vc-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--border); }
/* removed card -> small note with Undo */
.vgrid .video.vc-gone > *:not(.vc-note) { visibility: hidden; }
.vc-note { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 16px; text-align: center; border-radius: 14px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.vc-note button { border: 1px solid var(--border); border-radius: 18px; padding: 6px 16px; background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; }

/* ---------- "For you" */
.fy-feed { margin-top: 26px; }
.fy-head i { color: var(--accent); vertical-align: -4px; margin-right: 4px; }
.fy-feed .vgrid + .vgrid { margin-top: 30px; }
.fy-feed .fy-shorts { margin: 26px 0; }
.fy-sentinel { display: flex; justify-content: center; padding: 26px 0 40px; }
.fy-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: fySpin .8s linear infinite; }
@keyframes fySpin { to { transform: rotate(360deg); } }
.fy-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0 50px; color: var(--text-2); }
.fy-end[hidden] { display: none; }
.fy-end span { font-size: 38px; }
.fy-end b { color: var(--text); font-size: 17px; }

/* ---------- lives starting soon */
.soon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 10px 0 22px; }
.soon-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(59, 130, 246, .35);
    background: linear-gradient(120deg, rgba(59, 130, 246, .14), rgba(59, 130, 246, .03)); }
.soon-av { position: relative; flex: 0 0 48px; width: 48px; height: 48px; }
.soon-av img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.soon-dot { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px var(--bg); animation: livePulse 1.6s infinite; }
.soon-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soon-txt small { display: inline-flex; align-items: center; gap: 4px; color: #3b82f6; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.soon-txt small i { font-size: 15px; }
.soon-txt a { color: var(--text) !important; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-count { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--text); }
.soon-count.is-now { color: #ff1f3d; }
.soon-remind { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border: 0; border-radius: 18px; background: #3b82f6; color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }
.soon-remind.is-on { background: var(--surface-2); color: var(--text); }
.soon-remind i { font-size: 18px; }

/* ==========================================================================
   Update 45 - rising creators, streak & badges, Top
   ========================================================================== */
/* ---------- streak line (homepage) */
.streak-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; padding: 10px 12px 10px 14px; border-radius: 14px;
    background: linear-gradient(120deg, rgba(249, 115, 22, .16), rgba(249, 115, 22, .03)); border: 1px solid rgba(249, 115, 22, .35); }
.sb-fire { font-size: 24px; animation: giftBounce 2.4s ease-in-out infinite; }
.sb-txt { flex: 1; min-width: 0; font-size: 14px; color: var(--text-2); }
.sb-txt b { color: var(--text); }
.sb-link { font-weight: 800; font-size: 13px; color: #f97316 !important; white-space: nowrap; }
.sb-x { border: 0; background: none; color: var(--text-2); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }

/* ---------- rising creators / top creators */
.rising-row { margin: 8px 0 24px; }
.rising-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.rising-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; border-radius: 18px;
    background: var(--surface); border: 1px solid var(--border); text-align: center; color: var(--text) !important; transition: transform .15s, border-color .15s; }
.rising-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.rc-av img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(34, 197, 94, .55); }
.rc-name { font-weight: 800; font-size: 14.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text) !important; }
.rc-grow { font-size: 12.5px; font-weight: 700; color: #16a34a; }
.rc-sub { margin-top: 4px; }
.rc-sub a.subscriber { height: 32px !important; padding: 0 14px !important; font-size: 12.5px !important; }
.rc-rank { position: absolute; top: 8px; left: 10px; font-weight: 900; font-size: 15px; color: var(--text-2); }

/* ---------- Top (homepage row + /top/) */
.top-home { margin: 8px 0 24px; }
.top-home .loop-heading { display: flex; align-items: center; justify-content: space-between; }
.top-home-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1300px) { .top-home-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .top-home-list .top-item:nth-child(n+4) { display: none; } }
@media (max-width: 700px) { .top-home-list { grid-template-columns: 1fr; } .top-home-list .top-item:nth-child(n+4) { display: flex; } }
.top-item { position: relative; display: flex; flex-direction: column; gap: 8px; color: var(--text) !important; }
.top-home-list .top-item .ti-rank { position: absolute; z-index: 2; left: -4px; top: -10px; font-size: 44px; font-weight: 900; line-height: 1; color: var(--text);
    text-shadow: 0 0 0 transparent, 2px 2px 0 var(--bg), -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg); }
.ti-rank em { font-style: normal; }
.ti-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.ti-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.top-item:hover .ti-thumb img { transform: scale(1.04); }
.ti-thumb .timer { position: absolute; right: 6px; bottom: 6px; }
.ti-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-txt b { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ti-txt small { font-size: 12.5px; color: var(--text-2); }
.ti-n { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.ti-n i { font-size: 14px; }
/* /top/ page: ranked list */
#top-page { max-width: 1400px; margin: 0 auto !important; float: none !important; padding: 18px 0 40px !important; }
.tp-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.tp-cup { font-size: 50px; line-height: 1; }
.tp-hero h1 { margin: 0 !important; font-size: 28px !important; font-weight: 900 !important; }
.tp-hero span { color: var(--text-2); }
.top-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.top-list .top-item { flex-direction: row; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.top-list .top-item.is-podium { border-color: rgba(245, 180, 0, .45); background: linear-gradient(120deg, rgba(245, 180, 0, .08), var(--surface)); }
.top-list .ti-rank { flex: 0 0 44px; text-align: center; font-size: 22px; font-weight: 900; color: var(--text-2); }
.top-list .ti-rank em { font-size: 34px; }
.top-list .ti-thumb { flex: 0 0 200px; }
@media (max-width: 600px) { .top-list .ti-thumb { flex-basis: 120px; } .top-list .ti-rank { flex-basis: 30px; } }
.tp-creators { margin-bottom: 26px; }

/* ---------- profile: badges */
.bd-page { padding: 6px 0 30px; }
.bd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.bd-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.bd-stats span { font-size: 28px; }
.bd-stats b { font-size: 24px; font-weight: 900; }
.bd-stats small { color: var(--text-2); font-size: 12.5px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bd-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border-radius: 18px; text-align: center;
    background: var(--surface); border: 1px solid var(--border); filter: grayscale(1); opacity: .5; }
.bd-card.is-got { filter: none; opacity: 1; border-color: rgba(245, 180, 0, .5); background: linear-gradient(160deg, rgba(245, 180, 0, .12), var(--surface)); }
.bd-ico { font-size: 38px; line-height: 1.1; }
.bd-card b { font-size: 14px; }
.bd-card small { font-size: 12px; color: var(--text-2); }

/* ==========================================================================
   Update 45.1
   ========================================================================== */
/* ---------- the same up to 990px: "desktop version" on phones and tablets (the old theme's rules go up to 990px) */
@media (max-width: 990px) {
    html body .video-under .vd-bar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; }
    /* channel: avatar · name / subscribers · Subscribe (right) · bell */
    html body .video-under .vd-bar .vd-channel { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; }
    html body .video-under .vd-bar .vd-av { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
    html body .video-under .vd-bar .vd-ch-txt { flex: 1 1 auto !important; min-width: 0 !important; }
    html body .video-under .vd-bar .vd-ch-name { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px !important; }
    html body .video-under .vd-bar .vd-ch-subs { font-size: 12px !important; }
    html body .video-under .vd-bar .vd-sub { flex: 0 0 auto !important; margin: 0 0 0 auto !important; }
    html body .video-under .vd-bar .vd-bell { flex: 0 0 auto !important; margin: 0 !important; }
    html body .video-under .vd-bar .vd-bell-btn { width: 36px !important; height: 36px !important; }

    /* the row of buttons */
    html body .video-under .vd-bar .interaction-icons {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important;
        gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 0 2px !important; border: 0 !important; min-height: 0 !important;
        overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    html body .video-under .vd-bar .interaction-icons::-webkit-scrollbar { display: none; }
    html body .video-under .vd-bar .interaction-icons > *,
    html body .video-under .vd-bar .interaction-icons .aaa,
    html body .video-under .vd-bar .likes-bar,
    html body .video-under .vd-bar .likes-bar .aaa { flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
    /* Like | Dislike = one pill */
    html body .video-under .vd-bar .likes-bar {
        display: inline-flex !important; align-items: center !important; height: 36px !important; padding: 0 !important; border: 0 !important;
        border-radius: 18px !important; background: var(--surface-2) !important; overflow: hidden !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa:first-child:after, html body .video-under .vd-bar .likes-bar .aaa:after { display: none !important; content: none !important; }
    html body .video-under .vd-bar .likes-bar .aaa + .aaa { border-left: 1px solid var(--border) !important; }
    html body .video-under .vd-bar .like-box, html body .video-under .vd-bar .like-progress { display: none !important; }
    /* every button */
    html body .video-under .vd-bar .interaction-icons .aaa > a {
        display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
        height: 36px !important; min-width: 36px !important; padding: 0 14px !important; margin: 0 !important; gap: 6px !important;
        border: 0 !important; border-radius: 18px !important; background: var(--surface-2) !important; color: var(--text) !important;
        font-size: 13.5px !important; font-weight: 700 !important; line-height: 1 !important; text-align: left !important; box-shadow: none !important; white-space: nowrap !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa > a { background: transparent !important; border-radius: 0 !important; padding: 0 14px !important; }
    html body .video-under .vd-bar .interaction-icons .aaa > a:before { display: none !important; content: none !important; }
    html body .video-under .vd-bar .interaction-icons .aaa > a i {
        font-size: 20px !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; color: inherit !important;
    }
    html body .video-under .vd-bar .interaction-icons .aaa > a span,
    html body .video-under .vd-bar .interaction-icons .aaa > a span.visible-xs,
    html body .video-under .vd-bar .likes-bar span {
        display: inline !important; line-height: 1 !important; font-weight: 700 !important; font-size: 13.5px !important; margin: 0 !important; color: inherit !important;
    }
    html body .video-under .vd-bar .likes-bar .aaa > a.isLiked { color: var(--accent) !important; }
    html body .video-under .vd-bar .interaction-icons > .vd-more > a.vd-more-btn { width: 36px !important; padding: 0 !important; }
    html body .video-under .vd-bar .interaction-icons .dropdown-menu { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- phones: only the essentials in the top bar (menu, logo, search, bell, avatar) */
@media (max-width: 768px) {
    html body .header-right .user-quick > a.top-link,
    html body .header-right .top-separator,
    html body .header-right .upl-drop,
    html body #uploadNow,
    html body .top-header .vibe-theme-toggle { display: none !important; }
    html body .top-header #show-search, html body .top-header #notifs, html body .top-header #openusr { display: inline-flex !important; }
    html body .top-header .logo img { max-height: 28px; }
    /* nothing wider than the screen (a wider page made the fixed bottom menu slide away) */
    html, body { overflow-x: clip !important; max-width: 100vw; }
    .mbnav { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; }
    .mbsheet a.mb-theme i { color: var(--text-2); }
}

/* ---------- "More for you" (end of the homepage) */
.fy-feed { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); }
.fy-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fy-head .fy-ico { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; flex: 0 0 42px; }
.fy-head .fy-ico i { font-size: 22px; }
.fy-head b { display: block; font-size: 19px; font-weight: 900; color: var(--text); }
.fy-head small { font-size: 13px; color: var(--text-2); }
.fy-more-wrap { display: flex; justify-content: center; padding: 24px 0 40px; }
.fy-more-wrap[hidden] { display: none; }
.fy-more { display: inline-flex; align-items: center; gap: 6px; padding: 11px 30px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); font-weight: 800; font-size: 14.5px; cursor: pointer; }
.fy-more:hover { background: var(--surface-2); }
.fy-more:disabled { opacity: .6; cursor: wait; }
.fy-more i { font-size: 22px; }
/* /top/ creators: the rank does not cover the avatar */
.tp-creators .rising-card { padding-top: 28px; }
.rc-av { display: inline-block; }
.rc-av img { display: block; }


/* ==========================================================================
   Update 45.2 - app intro, new "Top of the week" on the homepage
   ========================================================================== */
/* ---------- app intro (installed app) */
.app-intro { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #0b0b0f; transition: opacity .55s ease, transform .55s ease; }
.app-intro.is-out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.ai-glow { position: absolute; width: 140vmax; height: 140vmax; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 45, 85, .0), rgba(255, 45, 85, .35), rgba(255, 138, 0, .25), rgba(139, 92, 246, .25), rgba(255, 45, 85, .0));
    filter: blur(60px); animation: aiSpin 3s linear infinite; opacity: .8; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ai-logo { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(255, 45, 85, .55)); animation: aiPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.ai-play { width: 0; height: 0; border-left: 70px solid #ff2d55; border-top: 42px solid transparent; border-bottom: 42px solid transparent; animation: aiPop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes aiPop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
.ai-name { display: flex; align-items: baseline; gap: 8px; color: #fff; animation: aiUp .6s .25s ease both; }
.ai-name b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(90deg, #ff2d55, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-name span { font-size: 22px; font-weight: 700; color: #f1f1f5; }
@keyframes aiUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ai-bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; animation: aiUp .5s .4s ease both; }
.ai-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff2d55, #ff8a00); animation: aiLoad 1.3s .45s ease forwards; }
@keyframes aiLoad { to { width: 100%; } }

/* ---------- "Top of the week" (homepage) */
.tw { margin: 10px 0 28px; padding: 18px; border-radius: 24px; border: 1px solid rgba(245, 180, 0, .35);
    background: radial-gradient(circle at 0% 0%, rgba(245, 180, 0, .14), transparent 45%), var(--surface); }
.tw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tw-cup { font-size: 34px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(245, 180, 0, .45)); }
.tw-htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tw-htxt b { font-size: 21px; font-weight: 900; color: var(--text); }
.tw-htxt small { font-size: 12.5px; color: var(--text-2); }
.tw-all { display: inline-flex; align-items: center; padding: 8px 8px 8px 14px; border-radius: 20px; background: var(--surface-2); color: var(--text) !important; font-weight: 800; font-size: 13px; white-space: nowrap; }
.tw-all:hover { background: var(--surface-3); }
.tw-all i { font-size: 20px; }
.tw-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .tw-body { grid-template-columns: 1fr; } }
/* #1 */
.tw-first { display: flex; flex-direction: column; gap: 10px; color: var(--text) !important; }
.tw-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(245, 180, 0, .6); }
.tw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tw-first:hover .tw-thumb img { transform: scale(1.04); }
.tw-medal { position: absolute; left: 10px; top: 10px; padding: 5px 12px; border-radius: 16px; background: rgba(0, 0, 0, .7); color: #fff; font-weight: 900; font-size: 15px; backdrop-filter: blur(4px); }
.tw-thumb .timer, .tw-sthumb .timer { position: absolute; right: 8px; bottom: 8px; }
.tw-info { display: flex; flex-direction: column; gap: 6px; }
.tw-title { font-size: 18px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-ch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text-2); }
.tw-ch .tw-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.tw-stats { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--text-2); flex-wrap: wrap; }
.tw-stats i { font-size: 17px; }
.tw-stats b { color: var(--text); font-weight: 900; }
/* trend */
.tw-trend { font-style: normal; font-weight: 800; font-size: 11.5px; padding: 2px 7px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.tw-trend.is-up { background: rgba(22, 163, 74, .15); color: #16a34a; }
.tw-trend.is-down { background: rgba(220, 38, 38, .13); color: #dc2626; }
.tw-trend.is-new { background: rgba(59, 130, 246, .15); color: #3b82f6; }
/* #2 - #5 */
.tw-list { display: flex; flex-direction: column; gap: 8px; }
.tw-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--text) !important; transition: background .15s; }
.tw-row:hover { background: var(--surface-2); }
.tw-rank { flex: 0 0 34px; text-align: center; font-size: 22px; font-weight: 900; color: var(--text-2); }
.tw-sthumb { position: relative; flex: 0 0 150px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.tw-sthumb img { width: 100%; height: 100%; object-fit: cover; }
.tw-rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tw-rtxt b { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-rtxt small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.tw-rtxt small .tw-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.tw-bar { display: block; height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.tw-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f5b400, #ff8a00); }
@media (max-width: 600px) { .tw { padding: 14px; } .tw-sthumb { flex-basis: 110px; } .tw-rank { flex-basis: 26px; font-size: 18px; } .tw-htxt b { font-size: 18px; } }

/* ---------- phones: top bar = ☰ logo ........ 🔍 🔔 avatar (update 45.3) */
@media (max-width: 768px) {
    html body .top-header { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; justify-content: space-between !important; }
    html body .top-header .logo-wrapper { flex: 1 1 auto !important; display: flex !important; align-items: center !important; min-width: 0 !important; width: auto !important; }
    html body .top-header .header-center { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
    html body .top-header .header-right { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
    html body .top-header .header-right:empty, html body .top-header .header-right .user-quick:empty { display: none !important; }
    /* search, bell, avatar pushed to the right */
    html body .top-header .user-express { margin-left: auto !important; padding: 0 4px 0 0 !important; flex: 0 0 auto !important; }
    html body .top-header .user-express .user-quick { display: flex !important; align-items: center !important; gap: 2px !important; height: auto !important; }
    html body .top-header .user-express #show-search { order: 1; }
    html body .top-header .user-express #notifs { order: 2; }
    html body .top-header .user-express #openusr { order: 3; margin-left: 4px !important; }
    html body .top-header .user-express .user-quick > a.top-link { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; }
    html body .top-header .user-express .user-quick > a.top-link i { font-size: 24px !important; }
    html body .top-header .user-express .user-quick > .dropdown-menu { left: auto !important; right: 0 !important; }
    html body .top-header .logo { margin-left: 2px !important; }
}

/* ---------- bell: small round red counter on the corner (update 45.4) */
html body a#notifs { position: relative !important; overflow: visible !important; }
html body a#notifs .badge {
    position: absolute !important; top: 3px !important; right: 1px !important; left: auto !important; bottom: auto !important;
    min-width: 17px !important; height: 17px !important; padding: 0 4px !important; margin: 0 !important;
    border-radius: 9px !important; font-size: 10.5px !important; font-weight: 800 !important; line-height: 17px !important;
    text-align: center !important; display: inline-block !important; transform: none !important;
    background: #ff1f3d !important; color: #fff !important; box-shadow: 0 0 0 2px var(--bg) !important; pointer-events: none;
}
@media (max-width: 768px) {
    html body a#notifs .badge { top: 5px !important; right: 3px !important; min-width: 16px !important; height: 16px !important; line-height: 16px !important; font-size: 10px !important; padding: 0 3px !important; }
}

/* ==========================================================================
   Update 46 - push notifications
   ========================================================================== */
.push-card { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border);
    background: linear-gradient(120deg, rgba(255, 45, 85, .1), rgba(255, 45, 85, .02)), var(--surface); }
.push-card.is-on { border-color: rgba(22, 163, 74, .4); background: linear-gradient(120deg, rgba(22, 163, 74, .1), rgba(22, 163, 74, .02)), var(--surface); }
.pc-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; }
.push-card.is-on .pc-ico { background: #16a34a; }
.pc-ico i { font-size: 24px; }
.pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-txt b { font-size: 15.5px; }
.pc-txt small { font-size: 13px; color: var(--text-2); }
.pc-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.pc-opts label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); margin: 0; cursor: pointer; }
.pc-btn { flex: 0 0 auto; padding: 10px 20px; border: 0; border-radius: 22px; background: var(--grad); color: #fff; font-weight: 800; cursor: pointer; }
.pc-btn.is-on { background: var(--surface-2); color: var(--text); }
.pc-btn:disabled { opacity: .6; }
@media (max-width: 600px) { .push-card { flex-wrap: wrap; } .pc-btn { width: 100%; } }
.mbsheet a.mb-push i { color: var(--accent); }

/* ==========================================================================
   Update 47 - weekly recap, invite friends
   ========================================================================== */
.recap { position: relative; margin: 8px 0 22px; padding: 18px; border-radius: 22px; border: 1px solid rgba(139, 92, 246, .35);
    background: radial-gradient(circle at 100% 0%, rgba(139, 92, 246, .18), transparent 50%), radial-gradient(circle at 0% 100%, rgba(255, 45, 85, .12), transparent 45%), var(--surface); }
.rc-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: var(--text-2); font-size: 24px; cursor: pointer; }
.rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rc-ico { font-size: 34px; }
.rc-head b { display: block; font-size: 20px; font-weight: 900; }
.rc-head small { color: var(--text-2); }
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rc-stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.rc-stats span { font-size: 22px; }
.rc-stats b { font-size: 20px; font-weight: 900; text-align: center; }
.rc-stats small { color: var(--text-2); font-size: 12px; }
.rc-fav { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--text) !important; }
.rc-fav img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.rc-creator { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(22, 163, 74, .08); font-size: 13.5px; }
.rc-creator .rc-link { font-weight: 800; margin-left: 6px; }
.rc-missed b { display: block; margin: 12px 0 8px; }
.rc-mlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .rc-mlist { grid-template-columns: 1fr; } }
.rc-mlist a { display: flex; flex-direction: column; gap: 6px; color: var(--text) !important; font-size: 13px; font-weight: 600; }
.rc-mlist img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.rc-badges { margin-top: 12px; font-size: 13.5px; }
.rc-badges span { display: inline-block; margin: 2px 4px; padding: 3px 10px; border-radius: 12px; background: rgba(245, 180, 0, .15); font-weight: 700; }
/* invite page */
#invite-page { max-width: 900px; margin: 0 auto !important; float: none !important; padding: 20px 0 40px !important; }
.inv-hero { text-align: center; padding: 28px 20px; border-radius: 24px; margin-bottom: 16px; border: 1px solid rgba(245, 180, 0, .35);
    background: radial-gradient(circle at 50% 0%, rgba(245, 180, 0, .18), transparent 60%), var(--surface); }
.inv-gift { font-size: 54px; display: inline-block; animation: giftBounce 2.4s ease-in-out infinite; }
.inv-hero h1 { font-size: 26px !important; font-weight: 900 !important; margin: 8px 0 !important; }
.inv-hero p { color: var(--text-2); max-width: 560px; margin: 0 auto 16px !important; }
.inv-link { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; flex-wrap: wrap; }
.inv-link input { flex: 1; min-width: 200px; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 600; }
.inv-copy, .inv-share { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--grad); color: #fff; font-weight: 800; cursor: pointer; }
.inv-share { background: var(--surface-2); color: var(--text); }
.inv-apps { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inv-apps a { padding: 7px 14px; border-radius: 16px; background: var(--surface-2); color: var(--text) !important; font-weight: 700; font-size: 13px; }
.inv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.inv-steps > div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.inv-steps b { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; }
.inv-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.inv-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.inv-row b { flex: 1; min-width: 0; }
.inv-row small { color: var(--text-2); }
.inv-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.inv-st.is-ok { background: rgba(22, 163, 74, .15); color: #16a34a; }

/* ==========================================================================
   Update 48 - moments (most replayed + reactions), live polls
   ========================================================================== */
/* "Most replayed" wave over the progress bar (shown when the bar is hovered) */
.vjs-progress-holder { position: relative; }
.vibe-heat { position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; margin-bottom: 4px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.video-js .vjs-progress-control:hover .vibe-heat, .video-js.vjs-user-active .vjs-progress-control:hover .vibe-heat { opacity: 1; }
.vibe-heat svg { width: 100%; height: 100%; display: block; }
.vibe-heat path { fill: rgba(255, 255, 255, .28); }
.vh-peak { position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); pointer-events: auto; white-space: nowrap;
    padding: 3px 9px; border-radius: 10px; background: rgba(0, 0, 0, .75); color: #fff !important; font-size: 11px; font-weight: 800; }
.vh-peak:hover { background: #ff1f3d; }
/* reactions row under the player */
.vmo-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.vmo-r { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .15s, background .15s; }
.vmo-r:hover { background: var(--surface-3); transform: translateY(-1px); }
.vmo-r span { font-size: 18px; line-height: 1; }
.vmo-r em { font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--text-2); }
.vmo-r.is-pop { transform: scale(1.18); }
.vmo-r.is-wait { opacity: .5; }
.vmo-hide { margin-left: auto; height: 34px; width: 34px; border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer; font-size: 16px; }
/* floating reactions over the video */
.vmo-fly { position: absolute; bottom: 60px; z-index: 25; font-size: 30px; pointer-events: none; animation: vmoUp 3s ease-out forwards; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
@keyframes vmoUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { transform: translateY(-220px) translateX(-24px) scale(.9); opacity: 0; } }
/* live polls */
.lchat-head { display: flex; align-items: center; gap: 6px; }
.lpoll-new { margin-left: auto; padding: 5px 12px; border: 0; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.lpoll-form { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.lpoll-form input, .lpoll-form select { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13.5px; }
.lpoll-frow { display: flex; gap: 6px; }
.lpoll-frow select { flex: 1; }
.lpoll-cancel, .lpoll-start { padding: 0 14px; height: 36px; border: 0; border-radius: 18px; font-weight: 800; cursor: pointer; }
.lpoll-cancel { background: var(--surface); color: var(--text); }
.lpoll-start { background: var(--grad); color: #fff; }
.lpoll-err { color: #dc2626; }
.lpoll { margin: 8px; padding: 12px; border-radius: 14px; border: 1px solid rgba(139, 92, 246, .45); background: linear-gradient(160deg, rgba(139, 92, 246, .14), var(--surface)); }
.lpoll[hidden] { display: none; }
.lpoll.is-closed { border-color: rgba(245, 180, 0, .5); background: linear-gradient(160deg, rgba(245, 180, 0, .12), var(--surface)); }
.lp-q { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; font-size: 14px; }
.lp-opts { display: flex; flex-direction: column; gap: 6px; }
.lp-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 700; text-align: left; overflow: hidden; cursor: pointer; }
.lp-opt:disabled { cursor: default; }
.lp-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(139, 92, 246, .22); transition: width .4s ease; }
.lp-opt .lp-t { position: relative; flex: 1; }
.lp-opt .lp-p { position: relative; font-weight: 900; }
.lp-opt.is-mine { border-color: #8b5cf6; }
.lp-opt.is-mine .lp-t:after { content: " \2713"; color: #8b5cf6; }
.lp-opt.is-win { border-color: #f5b400; }
.lp-opt.is-win i { background: rgba(245, 180, 0, .3); }
.lp-opt.is-win .lp-t:before { content: "\1F3C6  "; }
.lp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.lp-foot .lp-left { font-weight: 800; }
.lp-end { margin-left: auto; padding: 4px 10px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 12px; cursor: pointer; }

/* ==========================================================================
   Update 49 - language switch RO / EN
   ========================================================================== */
.lang-sw { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.lang-sw > i { font-size: 18px; color: var(--text-2); margin: 0 4px 0 6px; }
.lang-sw a { padding: 4px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--text-2) !important; }
.lang-sw a.is-on { background: var(--text); color: var(--bg) !important; }
html.vs-js #sidebar .lang-li { padding: 10px 12px !important; }
html.vs-js.vs-collapsed #sidebar .lang-li .lang-sw a:not(.is-on) { display: none; }
.mbsheet .lang-sw.in-sheet { margin: 4px 10px 8px; }

/* ==========================================================================
   Update 51 - premieres
   ========================================================================== */
.prem-room { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 18px; background: #000 center / cover no-repeat; }
.prem-room .pr-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .85)); backdrop-filter: blur(6px); }
.prem-room .pr-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; color: #fff; }
.pr-badge { padding: 5px 14px; border-radius: 16px; background: linear-gradient(135deg, #8b5cf6, #ff2d55); font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.pr-title { font-size: 20px; font-weight: 800; max-width: 680px; line-height: 1.3; }
.pr-starts { font-size: 13px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.pr-count { font-size: 46px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.pr-when { font-size: 14px; font-weight: 700; opacity: .9; }
.prem-room small { font-size: 12.5px; opacity: .75; max-width: 420px; }
@media (max-width: 600px) { .pr-count { font-size: 32px; } .pr-title { font-size: 16px; } }
/* premiere chat under the player */
.prem-chat { margin: 12px 0; border-radius: 16px; border: 1px solid rgba(139, 92, 246, .4); background: var(--surface); overflow: hidden; }
.prem-chat.is-done:not(.is-replay) { display: none; }
.prem-chat.is-replay .pc-rep { background: rgba(139, 92, 246, .16); color: #8b5cf6; }
.prem-chat.is-replay .pc-hint { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--text-2); }
.prem-chat.is-replay .pc-list { height: 220px; }
.pc-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px; }
.pc-live { padding: 2px 10px; border-radius: 12px; background: rgba(255, 31, 61, .15); color: #ff1f3d; font-size: 12px; }
.pc-jump { margin-left: auto; padding: 5px 12px; border: 0; border-radius: 14px; background: #ff1f3d; color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.pc-jump[hidden] { display: none; }
.pc-list { height: 240px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.pc-empty { margin: auto; color: var(--text-2); }
.pc-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.pc-msg img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 24px; }
.pc-msg a { font-weight: 800; color: var(--text-2) !important; }
.pc-msg em { font-style: normal; color: var(--text); word-break: break-word; }
.pc-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.pc-form input { flex: 1; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.pc-form button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--grad); color: #fff; cursor: pointer; }
.pc-login { padding: 10px; text-align: center; border-top: 1px solid var(--border); }
.vd-prem-lbl { margin-top: 8px !important; font-weight: 700; }

/* ==========================================================================
   Update 52 - Super Thanks
   ========================================================================== */
.video-under .vd-thanks .thanks-btn i { color: #ff2d55; }
.thanks-pop { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.thanks-pop[hidden] { display: none; }
.tp-card { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tp-x { position: absolute; right: 12px; top: 8px; border: 0; background: none; color: var(--text-2); font-size: 24px; cursor: pointer; }
.tp-title { font-size: 19px; font-weight: 900; }
.tp-card small { color: var(--text-2); font-size: 13px; }
.tp-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-a { padding: 9px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); color: var(--text); font-weight: 800; cursor: pointer; }
.tp-a.is-on { background: var(--grad); color: #fff; border-color: transparent; }
.tp-custom, .tp-msg { height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.tp-send { height: 44px; border: 0; border-radius: 22px; background: #ffc439; color: #111; font-weight: 900; cursor: pointer; }
.tp-err { color: #dc2626 !important; }
.thanks-ok { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: rgba(22, 163, 74, .12); color: #16a34a; font-weight: 700; }
.thanks-list { margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 45, 85, .3); background: linear-gradient(120deg, rgba(255, 45, 85, .07), transparent); }
.thanks-list > b { display: block; margin-bottom: 8px; }
.tl-row { display: flex; gap: 10px; padding: 6px 0; }
.tl-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; }
.tl-row a { font-weight: 800; color: var(--text) !important; }
.tl-amt { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 10px; background: #ff2d55; color: #fff; font-size: 12px; font-weight: 900; }
.tl-row p { margin: 2px 0 0 !important; font-size: 13.5px; color: var(--text-2); }

/* ==========================================================================
   Update 53 - channel membership
   ========================================================================== */
.mb-join { display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-left: 6px; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(245, 180, 0, .6); color: #d99a00 !important; font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.mb-join:hover { background: rgba(245, 180, 0, .12); }
.mb-chip { display: inline-flex; align-items: center; height: 30px; margin-left: 6px; padding: 0 12px; border-radius: 15px; background: rgba(245, 180, 0, .16); color: #d99a00; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.mb-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(245, 180, 0, .18); color: #d99a00; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.mb-wall .vpre { color: #d99a00; }
.mb-set .mb-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.mb-set .mb-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); margin: 0; flex: 1; min-width: 160px; }
.mb-set .mb-row input { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.btn-group[data-toggle="buttons"] > .btn.btn-members-opt { color: #d99a00 !important; }
.btn-group[data-toggle="buttons"] > .btn.btn-members-opt.active { background: linear-gradient(135deg, #f5b400, #ff8a00) !important; color: #1a1200 !important; }
@media (max-width: 767px) { .mb-join { height: 32px; padding: 0 10px; font-size: 12.5px; } }

/* ==========================================================================
   Update 54
   ========================================================================== */
/* language switch: small, next to the search box (computer); on phones only in the + menu */
.lang-sw a.is-on { background: var(--accent) !important; color: #fff !important; }
.lang-sw.in-head { flex: 0 0 auto; margin: 0 10px 0 6px; padding: 3px; height: 32px; align-self: center; vertical-align: middle; background: var(--surface-2); border: 1px solid var(--border); }
.lang-sw.in-head > i { display: none; }
.lang-sw.in-head a { padding: 3px 8px; font-size: 11.5px; line-height: 20px; }
@media (max-width: 768px) { .lang-sw.in-head { display: none !important; } }
/* left menu: the "Money" part */
#sidebar .mm-sep { margin-top: 8px; padding: 10px 16px 4px !important; border-top: 1px solid var(--border); }
#sidebar .mm-sep-t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
html.vs-js.vs-collapsed #sidebar .mm-sep-t { font-size: 0; }
html.vs-js.vs-collapsed #sidebar .mm-sep { padding: 4px 0 !important; margin: 4px 14px 0; }
/* live chat: the poll form really closed until the streamer opens it */
.lpoll-form[hidden] { display: none !important; }
/* "Top of the week" on the homepage: smaller, tidier (#1 is no longer a huge picture) */
.tw { padding: 14px 16px; }
.tw-head { margin-bottom: 12px; }
.tw-cup { font-size: 28px; }
.tw-htxt b { font-size: 18px; }
.tw-body { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.tw-first { max-width: 360px; }
.tw-first .tw-title { font-size: 15.5px; }
.tw-medal { font-size: 13px; padding: 3px 10px; }
.tw-sthumb { flex-basis: 120px; }
.tw-row { padding: 6px; }
.tw-rtxt b { font-size: 13.5px; }
@media (max-width: 900px) { .tw-body { grid-template-columns: 1fr; } .tw-first { max-width: none; } }
/* ⋮ on the videos in the right column of the video page */
.vc-li { position: relative; }
.vc-more.vc-more-side { right: -6px; bottom: auto; top: 2px; opacity: 0; }
.vc-li:hover .vc-more-side { opacity: 1; }
@media (hover: none) { .vc-more.vc-more-side { opacity: .85; } }
.vc-li.vc-gone > *:not(.vc-note) { visibility: hidden; }
/* reactions hidden: only the button to show them again */
.vmo-bar.is-hidden .vmo-r { display: none; }
.vmo-bar.is-hidden .vmo-hide { margin-left: 0; width: auto; padding: 0 12px; border-radius: 17px; }

/* ---------- upcoming premieres (homepage, subscriptions, profile) - update 54.1 */
.prem-row { margin: 8px 0 22px; }
.prem-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prem-card { display: flex; flex-direction: column; gap: 8px; color: var(--text) !important; }
.pcd-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(139, 92, 246, .55); }
.pcd-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: transform .25s, filter .25s; }
.prem-card:hover .pcd-thumb img { transform: scale(1.04); filter: brightness(.9); }
.pcd-badge { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: 12px; background: linear-gradient(135deg, #8b5cf6, #ff2d55); color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .04em; }
.pcd-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border-radius: 16px; background: rgba(0, 0, 0, .65); color: #fff !important; font-size: 15px !important; font-weight: 900; white-space: nowrap; }
.pcd-txt { display: flex; flex-direction: column; gap: 2px; }
.pcd-txt b { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcd-txt small { color: var(--text-2); font-size: 12.5px; }
/* language switch: right after the search box (left edge of the right part), icons stay on the right */
.top-header .header-right > .lang-sw.in-head { margin: 0 auto 0 12px; }

/* ==========================================================================
   Update 55
   ========================================================================== */
/* left menu closed: no "Money" word, just the line */
@media (min-width: 769px) {
    html:not(.vs-open) #sidebar .mm-sep-t { display: none !important; }
    html:not(.vs-open) #sidebar .mm-sep { padding: 4px 0 !important; margin: 6px 14px 0 !important; }
}
/* live chat: avatar · coloured name · message, easy to read */
.lchat-msg { display: flex; gap: 8px; align-items: flex-start; }
.lchat-body { display: block; min-width: 0; line-height: 1.45; }
.lchat-body .lchat-name { display: inline; margin-right: 6px; font-weight: 800; color: #6ea8ff; }
.lchat-body .lchat-name:after { content: "\00B7"; margin-left: 6px; color: var(--text-3); font-weight: 400; }
.lchat-msg.is-owner .lchat-name { color: #ff4d6d; }
.lchat-msg.is-mod .lchat-name { color: #22c55e; }
.lchat-body .lchat-text { display: inline; color: var(--text); word-break: break-word; }
/* ⋮ on cards: always top right of the title area */
.vgrid .video .video-data { position: relative; }
.vgrid .video .video-data > .vc-more { top: -4px; right: -8px; bottom: auto; }
/* mini player: Up next */
.mini-next { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px; color: #fff; background: rgba(0, 0, 0, .75) center / cover no-repeat; border-radius: inherit; }
.mini-next:before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35)); border-radius: inherit; }
.mini-next > * { position: relative; }
.mini-next small { font-size: 11px; font-weight: 800; text-transform: uppercase; opacity: .8; }
.mini-next b { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-btns { display: flex; gap: 6px; }
.mn-btns button, .mn-btns a { padding: 5px 12px; border-radius: 14px; border: 0; font-size: 12px; font-weight: 800; cursor: pointer; }
.mn-cancel { background: rgba(255, 255, 255, .18); color: #fff; }
.mn-play { background: #fff; color: #111 !important; }
.mn-n { position: absolute !important; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ff1f3d; font-weight: 900; }
/* membership window */
.mb-pop .tp-card { text-align: left; }
.mbp-star { font-size: 36px; color: #f5b400; line-height: 1; }
.mbp-price { font-size: 15px; color: var(--text-2); }
.mbp-price b { font-size: 26px; color: var(--text); font-weight: 900; }
.mbp-list { margin: 4px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.mb-pop .tp-send { background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; }
/* "What's new" counter + Earnings button */
.top-link.top-act { position: relative; }
.act-badge { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff1f3d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.top-link.top-earn i { color: #16a34a; }
/* raid: find a live */
.ls-raid-find { height: 38px !important; margin-bottom: 4px; }
.ls-raid select[size] { height: auto !important; min-height: 76px; }

/* ==========================================================================
   Update 55.1
   ========================================================================== */
/* homepage cards: the title leaves room for the ⋮ */
.vgrid .video .video-data { padding-right: 28px; }
.vgrid .video .video-data > .vc-more { z-index: 6; }
/* push button: green when on */
.pc-btn.is-on { background: #16a34a !important; color: #fff !important; }
.pc-btn.is-on:hover { background: #dc2626 !important; }
/* Earnings: "Saved" clearly visible */
.mb-msg.is-ok { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 12px; background: rgba(22, 163, 74, .15); color: #16a34a !important; font-weight: 800; }
.mb-msg.is-err { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 12px; background: rgba(220, 38, 38, .12); color: #dc2626 !important; font-weight: 700; }
#mb-save.is-saved { background: #16a34a !important; border-color: #16a34a !important; }
/* ⋮ on a list item without a text block (fallback) - update 55.3 */
.vc-li { position: relative; }
.vc-li > .vc-more { position: absolute; top: 4px; right: 4px; bottom: auto; opacity: 0; z-index: 6; }
.vc-li:hover > .vc-more { opacity: 1; }
@media (hover: none) { .vc-li > .vc-more { opacity: .75; } }

/* ⋮ in the right column (update 55.4): on the corner of the whole row, over nothing important,
   only on mouse over - the text block of the videos is exactly as the theme made it */
.vc-li > .vc-more { top: 2px; right: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.vc-li > .vc-more i { font-size: 20px; }


/* ==========================================================================
   Update 56 - preview frames on the progress bar
   ========================================================================== */
.video-js .vjs-progress-control { position: relative; }
.vibe-sb { position: absolute; bottom: calc(100% + 16px); left: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 4px;
    transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .12s; }
.vibe-sb.is-on { opacity: 1; }
.vibe-sb .sb-img { border: 2px solid #fff; border-radius: 8px; background-color: #000; background-repeat: no-repeat; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.vibe-sb .sb-t { padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* the player's own small time bubble is not needed under the preview */
html.has-sb .video-js .vjs-progress-control:hover .vjs-mouse-display { opacity: 0 !important; }

/* ==========================================================================
   Update 57 - conversion progress (owner, Media Studio)
   ========================================================================== */
.conv-st { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 220px; margin: 6px 0 2px; }
.conv-st[hidden] { display: none; }
.cs-bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-3, rgba(127, 127, 127, .25)); overflow: hidden; }
.cs-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff2d55, #ff8a00); transition: width .8s ease; }
.conv-st.is-wait .cs-bar i, .conv-st.is-queue .cs-bar i { background: repeating-linear-gradient(45deg, rgba(127, 127, 127, .45) 0 8px, rgba(127, 127, 127, .2) 8px 16px); animation: csMove 1s linear infinite; background-size: 22px 22px; }
@keyframes csMove { to { background-position: 22px 0; } }
.cs-t { font-size: 12px; font-weight: 700; color: var(--text-2); }
.conv-st.is-run .cs-t { color: var(--text); }
.conv-st.is-done .cs-t { color: #16a34a; }

/* ==========================================================================
   Update 58
   ========================================================================== */
/* Up next inside the player: fitted on phones (and in full screen) */
.video-js .upnext { z-index: 60; }
@media (max-width: 768px) {
    .upnext .un-in { transform: scale(.82); }
    .upnext .un-in img { max-width: 150px !important; }
    .upnext .un-in b { font-size: 13px !important; max-width: 240px; }
}
.video-js.vjs-fullscreen .upnext .un-in, :fullscreen .upnext .un-in { transform: scale(1.15); }
/* the player's right-click / long-press menu ("Share on" + a phpvibe.com link): gone,
   the Share button under the video does that */
.video-js .vjs-context-menu, .vjs-context-menu { display: none !important; }
/* channel bell on phones: a panel from the bottom, never outside the screen */
@media (max-width: 600px) {
    .vd-bell-menu {
        position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; min-width: 0 !important; width: auto !important;
        z-index: 3000 !important; box-shadow: 0 -6px 30px rgba(0, 0, 0, .35) !important;
    }
}
/* phones: the 3 icons on the right of the top bar on one line (search, bell, avatar) */
@media (max-width: 768px) {
    html body .top-header .user-express .user-quick { align-items: center !important; height: 56px !important; }
    html body .top-header .user-express .user-quick > a.top-link {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        height: 40px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle !important; position: relative;
    }
    html body .top-header .user-express .user-quick > a.top-link i { margin: 0 !important; line-height: 1 !important; }
    html body .top-header #openusr img { width: 30px !important; height: 30px !important; margin: 0 !important; display: block !important; border-radius: 50%; object-fit: cover; }
}
/* the "Day N in a row" bar on the homepage: a small pill, not a whole row */
.streak-bar { display: inline-flex !important; width: auto !important; max-width: 100%; gap: 6px !important; margin: 2px 0 12px !important;
    padding: 4px 6px 4px 10px !important; border-radius: 16px !important; font-size: 12.5px !important; line-height: 1.3; }
.streak-bar .sb-fire { font-size: 15px !important; }
.streak-bar .sb-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px !important; }
.streak-bar .sb-txt b { font-size: 12.5px !important; }
.streak-bar button { width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 22px !important; }

/* ==========================================================================
   Update 59 (stage 2: phones and player)
   ========================================================================== */
/* 3. the app intro: starts like the phone's start screen (logo in the middle), then the effect */
.ai-mark { position: relative; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }
.ai-mark .ai-logo, .ai-mark .ai-play { position: relative; z-index: 2; animation: aiBreath 1.1s ease-in-out .15s both; }
.ai-mark .ai-logo { width: 112px; height: 112px; }
@keyframes aiBreath { 0% { transform: scale(1); } 45% { transform: scale(1.12); filter: drop-shadow(0 0 28px rgba(255, 45, 85, .9)); } 100% { transform: scale(1); } }
.ai-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 45, 85, .65); opacity: 0; animation: aiWave 1.6s ease-out .25s infinite; }
.ai-wave.w2 { animation-delay: .65s; border-color: rgba(255, 138, 0, .55); }
.ai-wave.w3 { animation-delay: 1.05s; border-color: rgba(139, 92, 246, .5); }
@keyframes aiWave { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.ai-name { position: relative; display: flex; overflow: hidden; font-size: 30px; font-weight: 900; letter-spacing: -.01em; color: #f1f1f5; animation: none; }
.ai-name span { display: inline-block; opacity: 0; transform: translateY(70%); animation: aiLetter .45s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.ai-name span.ai-b { background: linear-gradient(90deg, #ff2d55, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes aiLetter { to { opacity: 1; transform: none; } }
.ai-name:after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: aiSweep 1s ease-in-out 1.35s forwards; }
@keyframes aiSweep { to { left: 130%; } }
.ai-bar { animation-delay: .9s !important; }
.ai-bar i { animation-delay: 1s !important; animation-duration: 1.2s !important; }
/* 25 / 32: the "+10 s" / "-5 s" bubble on the player */
.vg-seek { position: absolute; top: 0; bottom: 0; width: 38%; z-index: 45; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.vg-seek.left { left: 0; border-radius: 0 50% 50% 0; background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .18), transparent 70%); }
.vg-seek.right { right: 0; border-radius: 50% 0 0 50%; background: radial-gradient(circle at 70% 50%, rgba(255, 255, 255, .18), transparent 70%); }
.vg-seek span { padding: 6px 14px; border-radius: 18px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 900; font-size: 15px; }
.vg-seek.is-on { opacity: 1; }
#video-content .video-js { touch-action: manipulation; }
/* 27: phone turned sideways while playing = the whole screen (also where the browser refuses real full screen) */
html.vd-rotfull #video-content { position: fixed !important; inset: 0 !important; z-index: 5000 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: #000 !important; }
html.vd-rotfull #video-content .video-player, html.vd-rotfull #video-content .video-js { width: 100% !important; height: 100% !important; max-height: none !important; padding: 0 !important; }
html.vd-rotfull .mbnav, html.vd-rotfull .fixed-top, html.vd-rotfull .vibe-mini { display: none !important; }
html.vd-rotfull, html.vd-rotfull body { overflow: hidden !important; }
/* 30: Shorts on phones - the comments panel covers the bottom menu (the writing box was under it) */
@media (max-width: 768px) {
    /* closed = really out of the screen (with "top: 56px" + 70vh it stayed half visible at the bottom and the X could not hide it) */
    .shorts-panel { z-index: 3600 !important; top: auto !important; bottom: 0 !important; height: 72vh !important; max-height: calc(100dvh - 56px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(calc(100% + 60px)) !important; visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s !important; }
    .shorts-panel.is-open { transform: none !important; visibility: visible; transition: transform .25s ease !important; }
    .shorts-panel .sp-form { position: sticky; bottom: 0; background: #181818; }
}
/* 36: premiere chat replay on phones: closed, a button opens it */
.pc-toggle { display: none; }
@media (max-width: 768px) {
    .prem-chat.is-replay .pc-toggle { display: inline-flex; margin-left: auto; padding: 5px 12px; border: 0; border-radius: 14px; background: #8b5cf6; color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; }
    .prem-chat.is-replay .pc-hint { display: none; }
    .prem-chat.is-replay:not(.is-open) .pc-list { display: none; }
    .prem-chat.is-replay:not(.is-open) .pc-head { border-bottom: 0; }
}
/* the old intro rules (word spans, 8px gap) must not touch the letter-by-letter name */
.app-intro .ai-name { gap: 0 !important; align-items: center; }
.app-intro .ai-name span { font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; }
.app-intro .ai-name span:not(.ai-b) { color: #f1f1f5; }

/* ==========================================================================
   Update 60 (stage 3: new features)
   ========================================================================== */
/* shared heading of the new homepage rows */
.rs-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.rs-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--surface-2); }
.rs-head b { display: block; font-size: 19px; font-weight: 900; color: var(--text); }
.rs-head small { font-size: 12.5px; color: var(--text-2); }
/* 23. Rising creators */
.rising-v2 { margin: 6px 0 24px; }
.rising-v2 .rising-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.rising-v2 .rising-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px 14px; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-align: center; transition: transform .2s, box-shadow .2s; }
.rising-v2 .rising-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.rising-v2 .rc-banner { display: block; width: calc(100% + 24px); height: 54px; margin: 0 -12px; background: linear-gradient(120deg, #ff2d55, #ff8a00 55%, #8b5cf6); opacity: .85; }
.rising-v2 .rc-rank { position: absolute; left: 10px; top: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; font-weight: 900; }
.rising-v2 .rc-av { margin-top: -38px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #ff2d55, #ff8a00, #8b5cf6); }
.rising-v2 .rc-av img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); display: block; }
.rising-v2 .rc-name { font-weight: 800; font-size: 14.5px; color: var(--text) !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rising-v2 .rc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rising-v2 .rc-chips em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.rising-v2 .rc-chips em.rc-up { background: rgba(22, 163, 74, .15); color: #16a34a; }
.rising-v2 .rc-sub .btn { padding: 5px 14px !important; font-size: 12.5px !important; border-radius: 16px !important; }
/* 19. automatic mixes */
.apl-row { margin: 6px 0 26px; }
.apl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.apl-card { position: relative; display: flex; flex-direction: column; gap: 8px; color: var(--text) !important; padding-top: 8px; }
.apl-stack { position: absolute; top: 0; left: 8%; right: 8%; height: 14px; border-radius: 12px 12px 0 0; background: var(--surface-3, rgba(127, 127, 127, .3)); transition: transform .25s; }
.apl-mos { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.apl-mos img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.apl-mos.n1 img { grid-column: 1 / 3; grid-row: 1 / 3; }
.apl-mos.n2 img, .apl-mos.n3 img:first-child { grid-row: 1 / 3; }
.apl-card:hover .apl-mos img { transform: scale(1.06); }
.apl-card:hover .apl-stack { transform: translateY(-4px); }
.apl-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 800; opacity: 0; transition: opacity .2s; }
.apl-card:hover .apl-play { opacity: 1; }
.apl-n { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 800; }
.apl-n i, .apl-play i { font-size: 17px; }
.apl-txt b { display: block; font-size: 14.5px; font-weight: 800; }
.apl-txt small { font-size: 12.5px; color: var(--text-2); }
/* 29. homepage Shorts: title + icons on the picture */
.short-card.sc-ov .short-thumb { position: relative; }
.short-card.sc-ov .sc-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 5px; padding: 30px 9px 9px; background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .35) 70%, transparent); color: #fff; }
.short-card.sc-ov .sc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.3; word-break: break-word; max-width: 100%; }
.short-card.sc-ov .sc-icons { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 11.5px; font-weight: 800; }
.short-card.sc-ov .sc-icons i { font-size: 14px; opacity: .9; }
.short-card.sc-ov .sc-icons i:not(:first-child) { margin-left: 5px; }
.short-card.sc-ov .sc-share { margin-left: auto !important; }
/* 8. Cast */
.top-link.top-cast i { font-size: 22px; }
.vibe-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 6000; max-width: calc(100% - 32px); transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 14px; background: #1f1f26; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s, transform .25s; }
.vibe-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* 21. the notifications card: as wide as the list under it */
.push-card { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   Update 61 (stage 4, part 1)
   ========================================================================== */
/* live chat: 🛡 moderator / ★ member of this channel */
.lchat-badge { display: inline-block; margin-right: 4px; font-size: 12px; vertical-align: 1px; }
.lchat-badge.lb-mod { filter: drop-shadow(0 0 2px rgba(34, 197, 94, .6)); }
.lchat-badge.lb-mem { color: #f5b400; }
.lchat-msg.is-member .lchat-name { color: #f5b400; }
/* Live Studio: moderators */
.ls-mod-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-mod { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 18px; background: var(--surface-2); font-weight: 700; font-size: 13px; }
.ls-mod img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ls-mod-del { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 17px; line-height: 22px; cursor: pointer; }
.ls-mod-del:hover { background: rgba(220, 38, 38, .15); color: #dc2626; }

/* ==========================================================================
   Update 62 (stage 4, part 2): ads side by side, gifted memberships
   ========================================================================== */
/* 35. player ad side by side: the video small on the left, the ad on the right */
.ad-sbs-host { position: relative !important; background: #000; }
html.ad-sbs-on .ad-sbs-host .video-js .vjs-tech, html.ad-sbs-on .ad-sbs-host .video-js .vjs-poster { width: 38% !important; left: 1% !important; height: 60% !important; top: 20% !important; border-radius: 10px; object-fit: contain; }
html.ad-sbs-on .ad-sbs-host .screenAd:not(.hide) {
    position: absolute !important; left: 40% !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important;
    display: flex !important; align-items: center; justify-content: center; z-index: 50; background: #0d0d12 !important; border-left: 1px solid rgba(255, 255, 255, .08);
}
html.ad-sbs-on .ad-sbs-host .screenAd .innerAd { position: relative !important; max-width: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 12px 12px; }
html.ad-sbs-on .ad-sbs-host .screenAd .innerAd img, html.ad-sbs-on .ad-sbs-host .screenAd .innerAd iframe, html.ad-sbs-on .ad-sbs-host .screenAd .innerAd video { max-width: 100% !important; max-height: 70% !important; }
.screenAd .ad-lbl { position: absolute; left: 10px; top: 8px; z-index: 3; padding: 2px 8px; border-radius: 6px; background: #f5b400; color: #111; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.screenAd .ad-cnt { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 7px 12px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 13px; font-weight: 700; }
.screenAd .bigadclose { position: absolute !important; right: 10px; bottom: 10px; z-index: 3; padding: 8px 14px !important; border-radius: 6px; background: rgba(0, 0, 0, .8) !important; color: #fff !important; font-weight: 800; border: 1px solid rgba(255, 255, 255, .25); }
@media (max-width: 600px) {
    html.ad-sbs-on .ad-sbs-host .video-js .vjs-tech { width: 34% !important; }
    html.ad-sbs-on .ad-sbs-host .screenAd:not(.hide) { left: 36% !important; }
}
/* 31. gifted memberships */
.gm-open { margin-left: auto; padding: 5px 12px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; font-weight: 900; font-size: 12.5px; cursor: pointer; }
.gm-open + .lpoll-new { margin-left: 6px; }
.gm-tabs { display: flex; gap: 6px; }
.gm-tab { flex: 1; height: 38px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-2); color: var(--text); font-weight: 800; cursor: pointer; }
.gm-tab.is-on { background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; border-color: transparent; }
.gm-d { display: flex; gap: 8px; }
.gm-d .gm-who { flex: 1; min-width: 0; }
.gm-d .gm-mo { width: 80px; }
.gm-d[hidden], .gm-r[hidden] { display: none !important; }
.gm-how { display: block; margin-top: 6px; }
.gm-total { font-weight: 900; font-size: 16px; }
.gm-pop .tp-send { background: #ffc439; }

/* ==========================================================================
   Update 62.1
   ========================================================================== */
/* Rising creators with few channels: wide horizontal cards sharing the whole row */
.rising-v2 .rising-list.is-few { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.rising-v2 .rising-list.is-few .rising-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; text-align: left;
    background: linear-gradient(120deg, rgba(255, 45, 85, .12), rgba(139, 92, 246, .08) 60%, transparent), var(--surface); }
.rising-v2 .rising-list.is-few .rc-banner { display: none; }
.rising-v2 .rising-list.is-few .rc-rank { position: static; order: -2; flex: 0 0 auto; background: linear-gradient(135deg, #ff2d55, #ff8a00); font-size: 13px; padding: 4px 9px; }
.rising-v2 .rising-list.is-few .rc-av { margin-top: 0; flex: 0 0 auto; }
.rising-v2 .rising-list.is-few .rc-av img { width: 64px; height: 64px; }
.rising-v2 .rising-list.is-few .rc-name { flex: 1 1 auto; min-width: 0; font-size: 16px; display: block; }
.rising-v2 .rising-list.is-few .rc-chips { justify-content: flex-start; flex: 1 1 100%; order: 3; display: none; }
.rising-v2 .rising-list.is-few .rising-card { flex-wrap: wrap; }
.rising-v2 .rising-list.is-few .rc-name + .rc-chips { display: flex; }
.rising-v2 .rising-list.is-few .rc-sub { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 900px) { .rising-v2 .rising-list.is-few { grid-template-columns: 1fr; } }
.rising-v2 .rising-list.is-few .rc-chips { padding-left: 120px; margin-top: -4px; }

/* ==========================================================================
   Update 62.2 - the player bar on phones
   ========================================================================== */
@media (max-width: 768px) {
    /* the red bar: above the buttons, the whole width, thicker, easy to grab */
    #video-content .video-js .vjs-control-bar { padding-top: 0; }
    #video-content .video-js .vjs-progress-control {
        position: absolute !important; left: 0 !important; right: 0 !important; bottom: 100% !important; top: auto !important;
        width: auto !important; min-width: 0 !important; height: 26px !important; display: flex !important; align-items: flex-end !important; padding: 0 !important;
    }
    #video-content .video-js .vjs-progress-control .vjs-progress-holder { margin: 0 12px 6px !important; height: 5px !important; flex: 1 1 auto; }
    #video-content .video-js .vjs-progress-control:active .vjs-progress-holder, #video-content .video-js .vjs-progress-control:hover .vjs-progress-holder { height: 7px !important; }
    #video-content .video-js .vjs-play-progress:before { font-size: 15px !important; top: -5px !important; }
    /* the time "12:23 / 15:39": together, compact */
    #video-content .video-js .vjs-current-time, #video-content .video-js .vjs-time-divider, #video-content .video-js .vjs-duration {
        display: flex !important; align-items: center; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 12.5px !important; line-height: 1 !important;
    }
    #video-content .video-js .vjs-current-time { padding-left: 4px !important; }
    #video-content .video-js .vjs-time-divider { padding: 0 3px !important; }
    #video-content .video-js .vjs-time-divider div { min-width: 0 !important; }
    #video-content .video-js .vjs-remaining-time { display: none !important; }
    /* phones use their own volume buttons */
    #video-content .video-js .vjs-volume-panel { display: none !important; }
    #video-content .video-js .vjs-control-bar .vjs-control { min-width: 0; }
    #video-content .video-js .vjs-control-bar .vjs-button { width: 2.6em !important; }
}

/* ==========================================================================
   Update 62.3 - mixes on the whole width
   ========================================================================== */
.apl-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
.apl-txt { display: flex; flex-direction: column; gap: 3px; }
.apl-go { display: none; font-style: normal; }
/* few mixes: wide cards sharing the row - the mosaic on the left, the text on the right */
.apl-list.is-few { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) !important; }
.apl-list.is-few .apl-card { flex-direction: row; align-items: center; gap: 16px; padding: 12px; border-radius: 18px;
    background: linear-gradient(120deg, rgba(139, 92, 246, .14), rgba(255, 45, 85, .08) 60%, transparent), var(--surface); border: 1px solid var(--border); }
.apl-list.is-few .apl-stack { display: none; }
.apl-list.is-few .apl-mos { flex: 0 0 46%; }
.apl-list.is-few .apl-txt b { font-size: 16.5px; }
.apl-list.is-few .apl-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 6px 12px; border-radius: 16px; background: var(--text); color: var(--bg); font-weight: 800; font-size: 12.5px; align-self: flex-start; }
.apl-list.is-few .apl-go i { font-size: 17px; }
@media (max-width: 900px) { .apl-list.is-few { grid-template-columns: 1fr !important; } }
@media (max-width: 480px) { .apl-list.is-few .apl-card { flex-direction: column; align-items: stretch; } .apl-list.is-few .apl-mos { flex-basis: auto; } }

/* ==========================================================================
   Update 63.1 - phones: no mixes and no rising creators on the homepage
   ========================================================================== */
@media (max-width: 768px) {
    .apl-row, .rising-row { display: none !important; }
}
/* guests: the comment box opens the login */
#addDisable { cursor: pointer; }
/* comments, not logged in: a message (no writing box) - update 63.3 */
li.addcm.cm-guest { list-style: none; margin: 0 0 16px !important; padding: 0 !important; }
.cm-guest-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--border); color: var(--text-2); font-size: 14px; }
.cm-guest-box > i { font-size: 22px; color: var(--text-3); }
.cm-guest-box > span { flex: 1 1 auto; min-width: 160px; font-weight: 600; }
.cm-guest-btn { padding: 7px 16px; border-radius: 18px; background: var(--accent); color: #fff !important; font-weight: 800; font-size: 13px; }
.cm-guest-link { padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--text) !important; }
/* comments, not logged in: just the text (no background, no buttons); a click opens the login - update 63.5 */
.cm-guest-text { display: inline-block; padding: 8px 0 14px; color: var(--text-2) !important; font-size: 14.5px; font-weight: 600; cursor: pointer; background: none !important; }
.cm-guest-text:hover { color: var(--text) !important; text-decoration: underline; }
/* one cast button only (the one in the top bar): Chrome's own cast button on the player is hidden - update 63.6 */
video::-internal-media-controls-overlay-cast-button { display: none !important; }
#addDisable { cursor: pointer; }

/* ==========================================================================
   Update 63.9 - phones: the player bar on ONE row, compact
   ▶  12:23 / 15:39  ━━━━━●━━━━  quality  full screen
   (replaces the "red bar above the buttons" layout of 62.2)
   ========================================================================== */
@media (max-width: 768px) {
    #video-content .video-js .vjs-control-bar { display: flex !important; align-items: center !important; height: 38px !important; padding: 0 4px !important; gap: 0 !important; }
    #video-content .video-js .vjs-control-bar > * { order: 6; }
    #video-content .video-js .vjs-play-control { order: 1; }
    #video-content .video-js .vjs-current-time { order: 2; }
    #video-content .video-js .vjs-time-divider { order: 3; }
    #video-content .video-js .vjs-duration { order: 4; }
    /* the bar: back in the row, in the middle, taking all the free space */
    #video-content .video-js .vjs-progress-control {
        order: 5; position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
        flex: 1 1 auto !important; width: auto !important; min-width: 50px !important; height: 100% !important;
        display: flex !important; align-items: center !important; padding: 0 8px !important;
    }
    #video-content .video-js .vjs-progress-control .vjs-progress-holder { margin: 0 !important; height: 4px !important; flex: 1 1 auto; }
    #video-content .video-js .vjs-progress-control:active .vjs-progress-holder { height: 6px !important; }
    #video-content .video-js .vjs-play-progress:before { font-size: 13px !important; top: -4.5px !important; }
    /* small buttons */
    #video-content .video-js .vjs-control-bar .vjs-button { width: 32px !important; min-width: 32px !important; height: 38px !important; padding: 0 !important; }
    #video-content .video-js .vjs-control-bar .vjs-button > .vjs-icon-placeholder:before,
    #video-content .video-js .vjs-control-bar .vjs-button:before { font-size: 20px !important; line-height: 38px !important; }
    /* the time: small, together */
    #video-content .video-js .vjs-current-time, #video-content .video-js .vjs-duration, #video-content .video-js .vjs-time-divider {
        display: flex !important; align-items: center !important; height: 38px !important; width: auto !important; min-width: 0 !important;
        padding: 0 !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1 !important;
    }
    #video-content .video-js .vjs-time-divider { padding: 0 2px !important; }
    #video-content .video-js .vjs-time-divider div, #video-content .video-js .vjs-current-time-display, #video-content .video-js .vjs-duration-display { min-width: 0 !important; }
    #video-content .video-js .vjs-remaining-time, #video-content .video-js .vjs-volume-panel, #video-content .video-js .vjs-custom-control-spacer { display: none !important; }
    /* the quality menu button: as small as the others */
    #video-content .video-js .vjs-resolution-button, #video-content .video-js .vjs-quality-selector, #video-content .video-js .vjs-menu-button { width: 32px !important; min-width: 32px !important; }
    #video-content .video-js .vjs-resolution-button .vjs-resolution-button-label { font-size: 10px !important; line-height: 38px !important; }
}

/* ==========================================================================
   Update 64 - casting: "Up next on the TV" on the phone
   ========================================================================== */
.tv-next { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 6000; max-width: 460px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #1f1f26; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.tvn-ico { font-size: 22px; }
.tvn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tvn-t small { font-size: 11px; font-weight: 800; text-transform: uppercase; opacity: .7; }
.tvn-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvn-n { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ff1f3d; font-weight: 900; }
.tvn-x { padding: 6px 10px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .15); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; }

/* ==========================================================================
   Update 64.1 - the Premium box on a Premium video
   ========================================================================== */
.prem-wall { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 16px; background: #000 center / cover no-repeat; }
.prem-wall .pw-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .9)); backdrop-filter: blur(8px); }
.prem-wall .pw-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; text-align: center; color: #fff; }
.pw-lock { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200; box-shadow: 0 8px 26px rgba(245, 180, 0, .45); }
.pw-title { font-size: 20px; font-weight: 900; }
.pw-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 13px; opacity: .9; }
.pw-price { font-size: 14px; opacity: .9; }
.pw-price b { font-size: 18px; color: #f5b400; }
.pw-btn { margin-top: 4px; padding: 10px 26px; border-radius: 22px; background: linear-gradient(135deg, #f5b400, #ff8a00); color: #1a1200 !important; font-weight: 900; font-size: 15px; }
.pw-login { font-size: 12.5px; color: rgba(255, 255, 255, .8) !important; text-decoration: underline; }
@media (max-width: 600px) { .pw-title { font-size: 16px; } .pw-perks { display: none; } .pw-lock { width: 44px; height: 44px; font-size: 22px; } }
/* comments, not logged in: looks like the comment box, cannot be written in - update 64.1 */
li.addcm.cm-guest { display: flex !important; align-items: center; gap: 12px; list-style: none; padding: 0 !important; margin: 0 0 18px !important; }
li.addcm.cm-guest > img.avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; margin: 0 !important; position: static !important; }
.cm-guest-box2 { flex: 1; min-width: 0; display: block; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2) !important; font-size: 14px; cursor: pointer; text-decoration: none !important; }
.cm-guest-box2:hover { border-color: var(--accent); color: var(--text) !important; }
/* Earnings: live rewards, 10 at a time - update 64.1 */
.earn-table tr.rw-hide { display: none; }
.rw-more { margin-top: 10px; border-radius: 18px !important; font-weight: 700; }

/* ==========================================================================
   Update 66 (stage B) - video ad side by side
   ========================================================================== */
.video-js.vad-on .vjs-tech, .video-js.vad-on .vjs-poster { width: 40% !important; left: 1% !important; height: 62% !important; top: 19% !important; border-radius: 10px; object-fit: contain; transition: all .35s ease; }
.video-js.vad-on .vjs-control-bar { width: 42% !important; right: auto !important; }
.vad-box { position: absolute; left: 42%; right: 0; top: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; background: #0d0d12; border-left: 1px solid rgba(255, 255, 255, .08); animation: vadIn .35s ease; }
@keyframes vadIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.vad-lbl { position: absolute; left: 10px; top: 8px; z-index: 3; padding: 2px 8px; border-radius: 6px; background: #f5b400; color: #111; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.vad-video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.vad-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0, 0, 0, .85); }
.vad-title { flex: 1; min-width: 0; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vad-visit { padding: 5px 12px; border-radius: 14px; background: #fff; color: #111 !important; font-weight: 800; font-size: 12px; white-space: nowrap; }
.vad-skip { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 800; font-size: 12px; white-space: nowrap; cursor: pointer; }
.vad-skip:disabled { opacity: .75; cursor: default; }
.vad-sound { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 4; padding: 8px 16px; border: 0; border-radius: 18px; background: rgba(0, 0, 0, .75); color: #fff; font-weight: 800; cursor: pointer; }
.vad-sound[hidden] { display: none; }
@media (max-width: 600px) {
    .video-js.vad-on .vjs-tech { width: 34% !important; }
    .vad-box { left: 36%; }
    .vad-title { display: none; }
}

/* ==========================================================================
   Update 67 (stage C) - "Show your support" sheet in the live chat, membership window with video
   ========================================================================== */
.live-side, .lchat { position: relative; }
.lchat-giftbtn .sp-dollar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; font-weight: 900; line-height: 1; }
.sp-sheet { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 60; max-height: 78%; overflow-y: auto; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 -10px 34px rgba(0, 0, 0, .4); animation: spUp .25s ease; }
@keyframes spUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 8px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.sp-head b { font-size: 16px; font-weight: 800; }
.sp-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--text-2); cursor: pointer; }
.sp-row-t { padding: 4px 16px 8px; font-weight: 800; font-size: 14px; }
.sp-stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; padding: 0 12px 10px; }
.sp-stk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .15s, border-color .15s; }
.sp-stk:hover { transform: translateY(-2px); border-color: #f5b400; }
.sp-emo { font-size: 34px; line-height: 1.1; }
.sp-stk small { font-size: 11px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stk b { font-size: 12.5px; font-weight: 900; color: #16a34a; }
.sp-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.sp-opt:hover { background: var(--surface-2); }
.sp-oi { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--surface-2); }
.sp-opt > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sp-opt b { font-size: 14.5px; }
.sp-opt small { font-size: 12px; color: var(--text-2); }
.sp-opt i { color: var(--text-2); }
/* membership window: the promo video on top */
.mbp-card { max-width: 520px !important; }
.mbp-video { margin: -6px -6px 6px; border-radius: 14px; overflow: hidden; background: #000; }
.mbp-video[hidden] { display: none; }
.mbp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }

/* ==========================================================================
   Update 68 (stage D) - pay on the site (card in a centered window)
   ========================================================================== */
.pay-card { max-width: 440px !important; }
.pay-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.pay-what { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pay-amt { font-size: 19px; font-weight: 900; white-space: nowrap; }
.pay-btns { min-height: 120px; padding: 6px 0; background: #fff; border-radius: 12px; }
.pay-wait { display: block; text-align: center; padding: 40px 0; color: #888; font-size: 22px; }
.pay-note { color: var(--text-2) !important; text-align: center; }
.pay-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 10px; font-size: 44px; text-align: center; }
.pay-done b { font-size: 17px; }

/* ==========================================================================
   Update 69 - membership window like YouTube
   ========================================================================== */
.ytm-pop .ytm-card { max-width: 580px !important; width: 100%; padding: 0 !important; gap: 0 !important; overflow: hidden; background: #212121 !important; color: #f1f1f1; border: 0 !important; border-radius: 14px !important; }
.ytm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; }
.ytm-head .tp-title { font-size: 16px !important; font-weight: 600 !important; color: #fff; }
.ytm-head .tp-x { position: static !important; color: #fff !important; font-size: 26px !important; }
.ytm-scroll { max-height: min(78vh, 680px); overflow-y: auto; }
.ytm-video { margin: 0 20px; border-radius: 10px; overflow: hidden; background: #000; border-top: 3px solid #ff8a00; }
.ytm-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.ytm-banner { aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #ff2d55, #ff8a00 55%, #8b5cf6); }
.ytm-av img { width: 84px; height: 84px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); object-fit: cover; }
.ytm-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; margin-top: 12px; }
.ytm-tiers { border-right: 1px solid rgba(255, 255, 255, .1); }
.ytm-tier { padding: 12px 14px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ytm-tier.is-on { background: rgba(255, 255, 255, .1); }
.ytm-tname { display: block; font-size: 14.5px; font-weight: 700; color: #fff; }
.ytm-tprice { color: #aaa !important; font-size: 12.5px !important; }
.ytm-info { display: flex; flex-direction: column; gap: 6px; padding: 4px 20px 20px; }
.ytm-promo { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; }
.ytm-promo i { font-size: 22px; color: #aaa; }
.ytm-price { margin-top: 6px; font-size: 14px; color: #ddd; }
.ytm-price b { font-size: 16px; color: #fff; }
.ytm-pnote, .ytm-legal { color: #aaa !important; font-size: 12px !important; line-height: 1.4; }
.ytm-join { align-self: flex-start; margin: 6px 0 4px; padding: 9px 18px !important; height: auto !important; border: 0 !important; border-radius: 18px !important; background: #3ea6ff !important; color: #0f0f0f !important; font-weight: 600 !important; font-size: 14px !important; }
.ytm-join:hover { background: #65b8ff !important; }
.ytm-perks-t { margin-top: 12px; font-size: 16px; font-weight: 700; color: #fff; }
.ytm-perks { margin: 4px 0 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px !important; color: #ddd; }
.ytm-pop .tp-err { color: #ff6b6b !important; }
@media (max-width: 600px) {
    .ytm-body { grid-template-columns: 1fr; }
    .ytm-tiers { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .ytm-video { margin: 0 12px; }
    .ytm-info { padding: 4px 14px 18px; }
}

/* ==========================================================================
   Update 69.1 - video ad side by side: both small, side by side, a skip pill bottom right
   ========================================================================== */
.video-js.vad-on { background: #050507 !important; }
/* the video: small, on the left (16:9 inside the 16:9 player: width % = height %) */
.video-js.vad-on .vjs-tech, .video-js.vad-on .vjs-poster { width: 45% !important; height: 45% !important; left: 3% !important; top: 27.5% !important; border-radius: 10px; object-fit: cover; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.video-js.vad-on .vjs-control-bar { width: auto !important; right: 0 !important; }
/* the ad: the same size, on the right */
.vad-box { left: 52% !important; right: auto !important; width: 45% !important; top: 27.5% !important; bottom: auto !important; height: 45% !important;
    border: 0 !important; border-radius: 10px; overflow: hidden; background: #000 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.vad-box .vad-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vad-box .vad-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); }
.vad-box .vad-title { font-size: 11.5px; }
.vad-box .vad-visit { padding: 3px 9px; font-size: 11px; }
.vad-box .vad-lbl { font-size: 10px; padding: 1px 6px; top: 6px; left: 6px; }
/* the pill bottom right: "Ad ends in 5 ⏭" / "Skip ad ⏭" (like YouTube) */
.vad-box .vad-skip { position: absolute; right: 6px; bottom: 34px; z-index: 5; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 6px 5px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 18px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); }
.vad-box .vad-skip i { font-size: 18px; }
.vad-box .vad-skip:hover:not(:disabled) { background: rgba(0, 0, 0, .92); border-color: #fff; }
@media (max-width: 600px) {
    .video-js.vad-on .vjs-tech { width: 46% !important; height: 46% !important; left: 2% !important; top: 27% !important; }
    .vad-box { left: 52% !important; width: 46% !important; height: 46% !important; top: 27% !important; }
    .vad-box .vad-visit, .vad-box .vad-title { display: none; }
    .vad-box .vad-skip { bottom: 6px; font-size: 10.5px; }
}

/* ==========================================================================
   Update 69.4 - the icon menu on the video page too, WITHOUT changing its layout:
   the theme keeps the video page at max 1707px, centred; it only moves away from the
   menu when the free space on the left is narrower than the menu
   ========================================================================== */
@media (min-width: 1024px) {
    html.vs-js body.body-video #sidebar, html.vs-js body.body-video #sidebar.hide { display: block !important; visibility: visible !important; }
    html.vs-js body.body-video #wrapper {
        max-width: 1707px;
        margin-right: auto !important;
        margin-left: max(calc(var(--sb-mini) + 8px), calc((100vw - 1707px) / 2)) !important;
    }
    html.vs-js.vs-open body.body-video #wrapper {
        margin-left: max(calc(var(--sb-open) + 8px), calc((100vw - 1707px) / 2)) !important;
    }
}


/* ==========================================================================
   Update 69.5 - "Playing on the TV" over the player (it had no style: it was hidden behind the video)
   ========================================================================== */
.video-js .tv-on { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(circle at 50% 45%, rgba(20, 20, 30, .82), rgba(0, 0, 0, .94)); color: #fff; text-align: center; padding: 16px; }
.video-js .tv-on .tvo-ico { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 20px rgba(62, 166, 255, .45)); animation: tvoPulse 2.4s ease-in-out infinite; }
@keyframes tvoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.video-js .tv-on b { font-size: 17px; font-weight: 800; }
.video-js .tv-on button { margin-top: 4px; padding: 9px 20px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.video-js .tv-on button:hover { background: #ff1f3d; border-color: #ff1f3d; }
@media (max-width: 600px) { .video-js .tv-on .tvo-ico { font-size: 40px; } .video-js .tv-on b { font-size: 15px; } }

/* ==========================================================================
   Update 70 - "Playing on <TV>" like YouTube; member chip with the end date
   ========================================================================== */
.video-js .tv-on.tv-yt { background: #000; bottom: 3em; gap: 12px; }
.video-js .tv-on.tv-yt .tvo-bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(2px) brightness(.32); transform: scale(1.04); }
.video-js .tv-on.tv-yt > *:not(.tvo-bg) { position: relative; }
.video-js .tv-on.tv-yt .tvo-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); }
.video-js .tv-on.tv-yt .tvo-ic i { font-size: 36px; color: #fff; }
.video-js .tv-on.tv-yt b { font-size: 18px; font-weight: 500; letter-spacing: .01em; }
.video-js .tv-on.tv-yt button { padding: 7px 16px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .15); font-weight: 600; font-size: 13px; }
.video-js .tv-on.tv-yt button:hover { background: rgba(255, 255, 255, .28); border: 0; }
.mb-chip small { margin-left: 4px; font-weight: 600; opacity: .8; }

/* ==========================================================================
   Update 70 - live player: fills the player, no stats top-left, "● LIVE · 1:23:45", red seek bar, new play
   ========================================================================== */
/* the top-left bar (LIVE / timer / 1080p · kbps): gone */
#live-player .live-topbar { display: none !important; }
/* the video fills the whole player (it was drawn at the default small size of the player) */
#live-player .video-js { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding-top: 0 !important; }
#live-player .video-js .vjs-tech { width: 100% !important; height: 100% !important; object-fit: contain; background: #000; }
#live-player .video-js.vjs-fullscreen, #live-player .video-js.vjs-fullscreen .vjs-tech { width: 100vw !important; height: 100vh !important; }
/* "0:51 /": a live has no total - the theme's time boxes are hidden, ours shows the time since the start */
#live-player .vjs-current-time, #live-player .vjs-time-divider, #live-player .vjs-duration, #live-player .vjs-remaining-time { display: none !important; }
#live-player .lv-elapsed { width: auto !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 8px !important; font-size: 12.5px; font-weight: 800; color: #fff; cursor: pointer; white-space: nowrap; }
#live-player .lv-elapsed i { width: 8px; height: 8px; border-radius: 50%; background: #ff1f3d; box-shadow: 0 0 0 0 rgba(255, 31, 61, .6); animation: lvDot 1.6s infinite; }
@keyframes lvDot { 0% { box-shadow: 0 0 0 0 rgba(255, 31, 61, .6); } 70% { box-shadow: 0 0 0 7px rgba(255, 31, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 31, 61, 0); } }
#live-player .lv-elapsed.is-behind i { background: #9aa0a6; animation: none; }
#live-player .lv-elapsed.is-behind b { color: #ddd; }
/* the red seek bar (going back inside what the server keeps) */
#live-player .lv-seek { display: none !important; flex: 1 1 auto; align-items: center; padding: 0 10px !important; min-width: 60px; }
#live-player .lv-seek.is-on { display: flex !important; }
#live-player .lv-seek input { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; cursor: pointer;
    background: linear-gradient(to right, #ff1f3d 0, #ff1f3d var(--p, 100%), rgba(255, 255, 255, .3) var(--p, 100%)); }
#live-player .lv-seek input:hover { height: 6px; }
#live-player .lv-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #ff1f3d; border: 0; }
#live-player .lv-seek input::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #ff1f3d; border: 0; }
/* the new play: a big red circle with pulsing rings, "● LIVE" and "Watch the live" */
#live-player .live-paused { background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .75)); gap: 14px; }
#live-player .live-bigplay { position: relative; width: 92px !important; height: 92px !important; border: 0 !important; border-radius: 50% !important;
    background: linear-gradient(145deg, #ff3b5c, #d90429) !important; color: #fff !important; box-shadow: 0 12px 40px rgba(217, 4, 41, .55); transition: transform .2s ease; }
#live-player .live-bigplay:hover { transform: scale(1.07); }
#live-player .live-bigplay i { font-size: 54px !important; margin-left: 4px; }
#live-player .live-bigplay::before, #live-player .live-bigplay::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 59, 92, .55); animation: lvRing 2s ease-out infinite; }
#live-player .live-bigplay::after { animation-delay: 1s; }
@keyframes lvRing { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
#live-player .live-paused strong { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 18px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; font-weight: 800; }
#live-player .live-paused strong::before { content: 'LIVE'; padding: 2px 7px; border-radius: 5px; background: #ff1f3d; font-size: 11px; letter-spacing: .04em; }
/* the live chat box locked (who may write: chosen by the creator) */
#lchat-input.lchat-locked { opacity: .7; cursor: not-allowed; font-size: 12.5px; }
.ls-chatwho { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.ls-chatwho label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }

/* ==========================================================================
   Update 71 - live: volume not covered; pinned message; owner name menu; moderator search
   ========================================================================== */
#live-player .vjs-control-bar { display: flex !important; align-items: center; }
#live-player .vjs-volume-panel { flex: 0 0 auto !important; position: relative; z-index: 2; }
#live-player .lv-elapsed, #live-player .lv-seek { position: relative; z-index: 1; }
/* pinned message on top of the chat */
.lchat-pinned { display: flex; align-items: flex-start; gap: 8px; margin: 0 8px 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid #f5b400; font-size: 13px; }
.lchat-pinned .lp-ico { font-size: 14px; }
.lchat-pinned .lp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lchat-pinned .lp-name { font-size: 12px; color: var(--text-2); }
.lchat-pinned .lp-x { border: 0; background: none; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.lchat-pinbtn { border: 0; background: none; font-size: 12px; opacity: 0; cursor: pointer; padding: 0 4px; }
.lchat-msg:hover .lchat-pinbtn { opacity: .75; }
.lchat-pinbtn:hover { opacity: 1 !important; }
/* owner: a click on a name -> moderator menu */
.lchat-name.is-click { cursor: pointer; }
.lchat-name.is-click:hover { text-decoration: underline; }
.lchat-msg { position: relative; }
.lchat-namemenu { position: absolute; left: 30px; top: 100%; z-index: 30; display: flex; flex-direction: column; gap: 6px; min-width: 180px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.lchat-namemenu b { font-size: 13px; }
.lchat-namemenu button { padding: 7px 10px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 12.5px; text-align: left; cursor: pointer; }
.lchat-namemenu button:hover { background: rgba(34, 197, 94, .18); }
/* Live Studio: moderator search among the subscribers */
.ls-mod-find { position: relative; flex: 1; }
.ls-mod-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.ls-mod-sug[hidden] { display: none; }
.ls-sug { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font-weight: 700; text-align: left; cursor: pointer; }
.ls-sug:hover:not(:disabled) { background: var(--surface-2); }
.ls-sug img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ls-sug small { margin-left: auto; font-weight: 600; color: var(--text-2); }
.ls-sug:disabled { opacity: .6; cursor: default; }
.ls-sug-none { padding: 8px; color: var(--text-2); font-size: 13px; }

/* ==========================================================================
   Update 72 - the weekly card small and tidy (clear thumbnails); chat moderation menu
   ========================================================================== */
.recap { padding: 12px 16px !important; margin: 6px 0 16px !important; border-radius: 16px !important; }
.recap .rc-head b { font-size: 15px; }
.recap .rc-stats { gap: 8px !important; }
.recap .rc-stats > * { padding: 8px 10px !important; }
/* "You missed from your subscriptions": small cards side by side, the picture small = sharp */
.rc-missed b { margin: 10px 0 6px !important; font-size: 13.5px; }
.rc-mlist { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 8px !important; }
.rc-mlist a { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 12.5px !important; }
.rc-mlist a:hover { background: rgba(255, 255, 255, .08); }
.rc-mlist img { width: 120px !important; flex: 0 0 120px; border-radius: 8px !important; }
.rc-mlist span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .rc-mlist { grid-template-columns: 1fr !important; } .rc-mlist img { width: 104px !important; flex-basis: 104px; } }
/* the chat moderation menu */
.lchat-namemenu { min-width: 200px; max-height: 300px; overflow-y: auto; }
.lchat-namemenu .nm-ban:hover { background: rgba(220, 38, 38, .18) !important; }
.lchat-namemenu .nm-mute:hover { background: rgba(245, 180, 0, .18) !important; }

/* ==========================================================================
   Update 73 (stage 2) - phones: player controls like the YouTube app
   ========================================================================== */
@media (pointer: coarse) {
    #video-content .ytc-host .ytc { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(0, 0, 0, .38); opacity: 1; transition: opacity .25s ease; }
    /* hidden while playing and nobody touches the screen (the player's own "inactive" state) */
    #video-content .ytc-host.vjs-user-inactive.vjs-playing .ytc, #video-content .ytc-host.vjs-has-started:not(.vjs-user-active):not(.vjs-paused) .ytc { opacity: 0; }
    #video-content .ytc-host.vjs-user-inactive.vjs-playing .ytc *, #video-content .ytc-host:not(.vjs-has-started) .ytc-mid .ytc-prev, #video-content .ytc-host:not(.vjs-has-started) .ytc-mid .ytc-next { pointer-events: none !important; }
    .ytc-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 34px; }
    .ytc-b { pointer-events: auto; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
    .ytc-prev, .ytc-next { width: 46px; height: 46px; }
    .ytc-prev i, .ytc-next i { font-size: 30px; }
    .ytc-play { width: 64px; height: 64px; }
    .ytc-play i { font-size: 44px; }
    .ytc-time { position: absolute; left: 12px; bottom: 34px; padding: 3px 8px; border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12.5px; font-weight: 700; }
    .ytc-fs { pointer-events: auto; position: absolute; right: 8px; bottom: 26px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
    .ytc-fs i { font-size: 28px; }
    /* the player's own bar: only the red bar, the whole width (the rest is in the overlay above) */
    #video-content .ytc-host .vjs-control-bar { background: transparent !important; height: 24px !important; z-index: 5; }
    #video-content .ytc-host .vjs-control-bar > *:not(.vjs-progress-control) { display: none !important; }
    #video-content .ytc-host .vjs-control-bar .vjs-progress-control { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 24px !important; display: flex !important; align-items: center; }
    #video-content .ytc-host .vjs-control-bar .vjs-progress-holder { margin: 0 10px !important; height: 3px !important; }
    #video-content .ytc-host .vjs-big-play-button { display: none !important; }
    /* hidden overlay = the red bar stays thin, without the dot (like the app) */
    #video-content .ytc-host.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 1 !important; visibility: visible !important; transform: none !important; }
    #video-content .ytc-host.vjs-user-inactive.vjs-playing .vjs-play-progress:before { display: none; }
    /* full screen: swipe up = suggestions */
    .ytc-sugg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 14px 0 18px; background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .75)); transform: translateY(105%); transition: transform .3s ease; }
    .ytc-sugg.is-on { transform: none; }
    .ytc-sg-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; color: #fff; }
    .ytc-sg-head b { font-size: 16px; }
    .ytc-sg-x { border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; }
    .ytc-sg-row { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .ytc-sg { flex: 0 0 min(42vw, 280px); scroll-snap-align: start; color: #fff !important; text-decoration: none !important; }
    .ytc-sg-im { display: block; aspect-ratio: 16 / 9; border-radius: 10px; background: #222 center / cover no-repeat; }
    .ytc-sg-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13px; font-weight: 600; }
}

/* ==========================================================================
   Update 74 (stage 3) - the live page and player like YouTube (same structure, new look)
   ========================================================================== */
.live-layout { grid-template-columns: minmax(0, 1fr) 400px !important; gap: 24px !important; max-width: 1800px; margin: 0 auto; }
.live-player { border-radius: 12px !important; }
/* the chat: as high as the screen allows, fixed while scrolling, YouTube look */
@media (min-width: 1025px) {
    .live-side { position: sticky; top: 76px; }
    .live-side .live-chat { height: calc(100vh - 100px); max-height: 820px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
    .live-side .lchat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
.live-chat .lchat-head { padding: 12px 16px !important; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--border); }
.live-chat .lchat-msg { padding: 4px 16px !important; font-size: 13.5px; line-height: 1.45; }
.live-chat .lchat-msg .lchat-name { color: var(--text-2); font-weight: 600; margin-right: 6px; }
.live-chat .lchat-form { padding: 10px 12px !important; border-top: 1px solid var(--border); }
.live-chat #lchat-input { border-radius: 20px !important; padding: 9px 14px !important; background: var(--surface-2) !important; border: 1px solid transparent !important; }
.live-chat #lchat-input:focus { border-color: var(--border) !important; }
/* under the player: title, channel row, the grey box like the YouTube description */
.live-under .lv-title { font-size: 20px !important; font-weight: 800 !important; margin: 12px 0 10px !important; line-height: 1.3; }
.live-under .lv-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; }
.live-under .lv-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.live-under .lv-stats i { font-size: 17px; opacity: .8; }
/* the player controls like YouTube: the red bar above the buttons, the whole width */
#live-player .vjs-control-bar { height: 48px !important; padding: 0 8px !important; background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)) !important; }
#live-player .vjs-control-bar .vjs-button > .vjs-icon-placeholder:before { font-size: 26px !important; line-height: 48px !important; }
#live-player .lv-seek.is-on { position: absolute !important; left: 12px; right: 12px; top: -8px; height: 14px; padding: 0 !important; }
#live-player .lv-seek input { height: 3px; }
#live-player .vjs-control-bar:hover .lv-seek input { height: 5px; }
#live-player .lv-elapsed { font-size: 13.5px !important; }
#live-player .lv-elapsed b { letter-spacing: .02em; }
#live-player .lv-elapsed:not(.is-behind) b { color: #fff; }
/* "tap for sound": a pill top left, like YouTube */
#live-player .live-unmute { top: 14px !important; left: 14px !important; right: auto !important; bottom: auto !important; transform: none !important; padding: 8px 14px !important; border: 0 !important; border-radius: 20px !important;
    background: rgba(255, 255, 255, .92) !important; color: #111 !important; font-weight: 800 !important; font-size: 13px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#live-player .live-unmute i { color: #111 !important; }
@media (max-width: 1024px) { .live-layout { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Update 74.2 - live: the red bar over the WHOLE player width; the page like YouTube
   ========================================================================== */
/* the player gives every control a fixed width (4em) - the bar must not have it */
#live-player .vjs-control-bar .lv-seek.is-on { width: auto !important; min-width: 0 !important; left: 12px !important; right: 12px !important; flex: none !important; }
#live-player .vjs-control-bar .lv-seek.is-on input { width: 100% !important; }
/* like YouTube: the chat is exactly as high as the player (set by the script), the list under it */
@media (min-width: 1025px) {
    .live-side { position: static !important; }
    .live-side .live-chat { max-height: none !important; margin-bottom: 16px; }
    .live-layout { align-items: start; }
}

/* ==========================================================================
   Update 74.3 - live player: 6 buttons bottom right, like YouTube
   ========================================================================== */
#live-player .vjs-control-bar .lv-right { margin-left: auto; display: flex; align-items: center; gap: 2px; position: relative; flex: 0 0 auto; }
#live-player .lv-rb { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; opacity: .92; }
#live-player .lv-rb:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
#live-player .lv-rb i { font-size: 25px; }
#live-player .lv-rb.is-off { opacity: .45; }
#live-player .lv-rb.is-on i { color: #ff1f3d; }
#live-player .lv-right .vjs-fullscreen-control { width: 44px !important; flex: 0 0 44px; }
/* the quality menu, above the button */
#live-player .lv-qmenu { position: absolute; right: 90px; bottom: 52px; z-index: 30; min-width: 130px; padding: 6px; border-radius: 12px; background: rgba(28, 28, 28, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
#live-player .lv-qmenu button { padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; text-align: left; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#live-player .lv-qmenu button:hover { background: rgba(255, 255, 255, .1); }
#live-player .lv-qmenu button.is-on::after { content: ' \2713'; color: #ff1f3d; }
/* chat hidden: the player alone, the whole width */
html.lv-nochat .live-side .live-chat { display: none !important; }
html.lv-nochat .live-layout { grid-template-columns: minmax(0, 1fr) 360px !important; }
/* theater: the player big, the whole width, the chat under it */
html.lv-theater .live-layout { grid-template-columns: 1fr !important; max-width: none; }
html.lv-theater .live-player { max-height: calc(100vh - 140px); aspect-ratio: auto; height: calc(100vh - 140px); border-radius: 0 !important; }
html.lv-theater .live-side .live-chat { height: 520px !important; }
@media (max-width: 600px) {
    #live-player .lv-rb { width: 38px; height: 38px; }
    #live-player .lv-rb i { font-size: 22px; }
    #live-player .lv-rb-th, #live-player .lv-rb-chat { display: none; }
}

/* ==========================================================================
   Update 74.4 - live page: recommendations under the chat, like YouTube
   ========================================================================== */
.lrec-title { margin: 6px 0 10px !important; font-size: 16px; font-weight: 800; }
.lrec-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.lrec { display: flex; gap: 10px; color: var(--text) !important; text-decoration: none !important; border-radius: 10px; }
.lrec:hover .lrec-tx b { color: var(--text); text-decoration: underline; }
.lrec-im { position: relative; flex: 0 0 168px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.lrec-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrec-im em { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; }
.lrec-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lrec-tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.lrec-tx small { font-size: 12px; color: var(--text-2); }
@media (max-width: 1024px) { .lrec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 600px) { .lrec-im { flex-basis: 150px; } }

/* ==========================================================================
   Update 74.5 - the gift panel and the "$" sheet small again, at the bottom of the chat
   (74.2 made the right column non-relative, they were placed against the whole page)
   ========================================================================== */
.live-side .live-chat { position: relative !important; }
.live-chat .sp-sheet { max-height: 78% !important; }

/* ==========================================================================
   Update 74.7 - live: full screen button in line, chat keeps its content, Shorts + "More videos";
   homepage: "Your week" small and new
   ========================================================================== */
/* the theme's full screen button: the same size as our 5 buttons */
#live-player .lv-right .vjs-fullscreen-control { position: static !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; border-radius: 50%; }
#live-player .lv-right .vjs-fullscreen-control .vjs-icon-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#live-player .lv-right .vjs-fullscreen-control .vjs-icon-placeholder:before { position: static !important; font-size: 27px !important; line-height: 44px !important; width: auto !important; height: auto !important; }
/* the chat box keeps all of its content (the recommendations start under it) */
@media (min-width: 1025px) {
    .live-side .live-chat { display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box; margin-bottom: 18px !important; }
    .live-side .live-chat > * { flex: 0 0 auto; }
    .live-side .live-chat .lchat-list { flex: 1 1 auto !important; min-height: 0 !important; }
}
/* Shorts row + 6 videos + "More videos" */
.lrec-sico { color: #ff1f3d; font-size: 13px; }
.lrec-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.lrec-sh { display: flex; flex-direction: column; gap: 3px; color: var(--text) !important; text-decoration: none !important; }
.lrec-sh-im { aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.lrec-sh-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrec-sh b { font-size: 12.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lrec-sh small { font-size: 11.5px; color: var(--text-2); }
.lrec.lrec-hide { display: none !important; }
.lrec-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 38px; margin: 2px 0 20px; border: 1px solid var(--border); border-radius: 19px; background: transparent; color: #3ea6ff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.lrec-more:hover { background: rgba(62, 166, 255, .1); }
/* homepage: "Your week" - small, tidy, new */
.recap { padding: 12px 14px !important; margin: 4px 0 14px !important; border-radius: 16px !important; border: 1px solid rgba(139, 92, 246, .3) !important;
    background: linear-gradient(120deg, rgba(139, 92, 246, .12), rgba(255, 45, 85, .06) 55%, transparent), var(--surface) !important; }
.recap .rc-head { display: flex; align-items: center; gap: 8px; margin: 0 28px 8px 0 !important; }
.recap .rc-head .rc-ico { font-size: 18px !important; width: auto !important; height: auto !important; background: none !important; }
.recap .rc-head b { font-size: 14.5px !important; }
.recap .rc-head small { font-size: 11.5px !important; margin-left: 6px; }
.recap .rc-head > div { display: flex; align-items: baseline; flex-wrap: wrap; }
.recap .rc-x { top: 8px !important; right: 10px !important; width: 26px !important; height: 26px !important; font-size: 18px !important; }
.recap .rc-stats { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin: 0 0 6px !important; }
.recap .rc-stats > * { display: inline-flex !important; align-items: baseline; gap: 5px; padding: 5px 11px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .06) !important; font-size: 12px !important; min-width: 0 !important; }
.recap .rc-stats > * b, .recap .rc-stats > * strong { font-size: 13.5px !important; }
.recap .rc-fav, .recap .rc-creator, .recap .rc-badges { display: inline-flex; align-items: center; gap: 6px; margin: 2px 8px 2px 0 !important; font-size: 12.5px !important; }
.recap .rc-fav img { width: 22px !important; height: 22px !important; }
.recap .rc-missed b { display: block; margin: 8px 0 6px !important; font-size: 12.5px !important; }
.recap .rc-mlist { display: flex !important; gap: 8px !important; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.recap .rc-mlist a { flex: 0 0 230px; scroll-snap-align: start; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; padding: 5px !important; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 12px !important; }
.recap .rc-mlist img { width: 96px !important; flex: 0 0 96px; border-radius: 7px !important; }

/* ==========================================================================
   Update 74.8 - "Your week": on the whole length, in 3 columns, low
   [ 4 stats 2x2 ] [ favourite / my channel / badges ] [ you missed ... ]
   ========================================================================== */
@media (min-width: 1101px) {
    .recap { display: grid !important; grid-template-columns: auto minmax(240px, 1fr) minmax(320px, 1.3fr); column-gap: 22px; row-gap: 6px; align-items: start; }
    .recap > .rc-x { position: absolute !important; }
    .recap > .rc-head { grid-column: 1 / -1; grid-row: 1; }
    .recap > .rc-stats { grid-column: 1; grid-row: 2 / span 3; display: grid !important; grid-template-columns: repeat(2, minmax(118px, auto)); gap: 6px !important; margin: 0 !important; }
    .recap > .rc-fav { grid-column: 2; grid-row: 2; }
    .recap > .rc-creator { grid-column: 2; grid-row: 3; }
    .recap > .rc-badges { grid-column: 2; grid-row: 4; }
    .recap > .rc-missed { grid-column: 3; grid-row: 2 / span 3; min-width: 0; }
    .recap > .rc-missed > b { margin-top: 0 !important; }
    .recap .rc-mlist a { flex-basis: 220px !important; }
}
/* a stat = one small line: icon, value, label */
.recap .rc-stats > div { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
    padding: 6px 12px 6px 8px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .06) !important; }
.recap .rc-stats > div > span { grid-row: 1 / span 2; font-size: 18px; line-height: 1; }
.recap .rc-stats > div > b { font-size: 14px !important; line-height: 1.15; white-space: nowrap; }
.recap .rc-stats > div > small { font-size: 11px !important; color: var(--text-2); line-height: 1.15; white-space: nowrap; }
/* the middle column: one tidy line each */
.recap .rc-fav, .recap .rc-creator, .recap .rc-badges { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 !important; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 12.5px !important; line-height: 1.4; }
.recap .rc-creator { background: rgba(255, 255, 255, .04) !important; }
.recap .rc-badges > * { padding: 2px 8px !important; font-size: 11.5px !important; }

/* ==========================================================================
   Update 74.9 - live page: 3 Shorts with room, a title like on the video page
   ========================================================================== */
.live-side .lrec-head { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.live-side .lrec-head b { flex: 1; font-size: 16px; font-weight: 800; }
.live-side .lrec-head a { padding: 5px 12px; border-radius: 16px; background: var(--surface-2); color: var(--text) !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.live-side .lrec-head a:hover { background: var(--border); }
.live-side .lrec-sico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ff1f3d; font-size: 9px; color: #ff1f3d; }
.live-side .lrec-shorts { gap: 10px; margin-bottom: 8px; }
.live-side .lrec-shorts + .lrec-title, .live-side .lrec-title { margin-top: 20px !important; }
.live-side .live-chat + .lrec-head, .live-side .live-chat ~ .lrec-head:first-of-type { margin-top: 24px; }

/* ==========================================================================
   Update 75 - under the live player like YouTube: the description box (left) + "Live chat" box (right)
   ========================================================================== */
.lv-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lv-box { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; min-width: 0; }
.lv-box-desc .lv-stats { display: flex !important; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px !important; padding: 0 !important; background: none !important; font-weight: 700; }
.lv-box-desc .lv-desc { margin: 0 !important; padding: 0 !important; background: none !important; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.lv-box-desc .lv-desc.lv-clamp:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-more { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--text); font-weight: 800; font-size: 13.5px; cursor: pointer; }
.lv-box-chat > b { display: block; margin-bottom: 6px; font-size: 14px; }
.lvb-row { display: flex; align-items: center; gap: 12px; }
.lvb-row i { font-size: 24px; color: var(--text-2); }
.lvb-row span { flex: 1; min-width: 0; line-height: 1.45; }
.lvb-toggle { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 18px; background: var(--border); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lvb-toggle:hover { background: var(--text-2); color: var(--bg); }
@media (max-width: 900px) { .lv-boxes { grid-template-columns: 1fr; } .lv-box-chat { display: none; } }

/* ==========================================================================
   Update 75.1 - live: the chat level with the player and NOT over the Shorts
   An old rule had "top: 72px" (for a sticky chat); with position: relative (74.5) it moved the
   whole chat 72 px down - lower than the player and over the Shorts under it.
   ========================================================================== */
@media (min-width: 1025px) {
    #live-page .live-side .live-chat, .live-side .live-chat { top: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; }
    #live-page .live-side { padding-top: 0 !important; margin-top: 0 !important; }
}

/* ==========================================================================
   Update 76
   ========================================================================== */
/* --- phones, YouTube app: in full screen the actions row under the red bar, CC + settings top right;
       the red bar hides with the controls (it stayed on the screen all the time) */
@media (pointer: coarse) {
    #video-content .ytc-host .ytc-top, #video-content .ytc-host .ytc-bottom { display: none; }
    #video-content .ytc-host.vjs-fullscreen .ytc-top, html.vd-rotfull #video-content .ytc-host .ytc-top { display: flex; position: absolute; top: 12px; right: 14px; gap: 14px; pointer-events: auto; }
    #video-content .ytc-host.vjs-fullscreen .ytc-bottom, html.vd-rotfull #video-content .ytc-host .ytc-bottom { display: flex; position: absolute; left: 16px; right: 16px; bottom: 12px; align-items: center; pointer-events: auto; }
    #video-content .ytc-ic { width: 42px; height: 42px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
    #video-content .ytc-ic i { font-size: 28px; }
    #video-content .ytc-ic.is-on i { color: #3ea6ff; }
    #video-content .ytc-acts { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 26px; background: rgba(0, 0, 0, .5); }
    #video-content .ytc-a { width: 46px; height: 42px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
    #video-content .ytc-a i { font-size: 26px; }
    #video-content .ytc-a.is-on i { color: #3ea6ff; }
    #video-content .ytc-more { display: none !important; }
    /* full screen: the red bar goes up, above the actions row; the time above it on the left, the exit button on the right */
    #video-content .ytc-host.vjs-fullscreen .vjs-control-bar, html.vd-rotfull #video-content .ytc-host .vjs-control-bar { bottom: 66px !important; }
    #video-content .ytc-host.vjs-fullscreen .ytc-time, html.vd-rotfull #video-content .ytc-host .ytc-time { bottom: 96px; left: 18px; font-size: 14px; }
    #video-content .ytc-host.vjs-fullscreen .ytc-fs, html.vd-rotfull #video-content .ytc-host .ytc-fs { bottom: 92px; right: 14px; }
    #video-content .ytc-qm { position: absolute; top: 58px; right: 14px; z-index: 9; display: flex; flex-direction: column; min-width: 130px; padding: 6px; border-radius: 12px; background: rgba(28, 28, 28, .96); pointer-events: auto; }
    #video-content .ytc-qm button { padding: 9px 12px; border: 0; background: transparent; color: #fff; text-align: left; font-weight: 600; }
    #video-content .ytc-qm button.is-on::after { content: ' \2713'; color: #3ea6ff; }
    /* the red bar hides together with the controls (it stayed all the time) */
    #video-content .ytc-host.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 0 !important; visibility: hidden !important; transition: opacity .25s ease, visibility .25s; }
}

/* --- video page: "33 views · 1 week ago" on ONE line again (each piece of text wrapped on its own) */
.rur .rel-stats { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rur .rel-stats i { vertical-align: -3px; margin-right: 3px; }
.rur .rel-meta .rel-by { max-width: 100%; }

/* --- homepage: "Mixes for you" - a cover like YouTube (one big picture + the mix side panel), not 4 glued pictures */
.apl-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 18px !important; }
.apl-list.is-few { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
.apl-list .apl-card, .apl-list.is-few .apl-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.apl-card .apl-stack { display: block !important; position: absolute; left: 8%; right: 8%; top: -6px; height: 12px; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .14); }
.apl-card .apl-mos { position: relative; flex: none !important; display: block !important; aspect-ratio: 16 / 9; border-radius: 12px !important; overflow: hidden; margin-top: 6px; }
.apl-card .apl-mos img { display: none !important; }
.apl-card .apl-mos img:first-child { display: block !important; position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform .3s ease; }
.apl-card:hover .apl-mos img:first-child { transform: scale(1.04); }
/* the side panel: "▶ Mix" + the number of videos, like YouTube */
.apl-card .apl-n { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 34%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0 !important; border-radius: 0 !important; background: rgba(10, 10, 14, .78) !important; backdrop-filter: blur(6px); color: #fff; font-size: 15px !important; font-weight: 800; }
.apl-card .apl-n i { font-size: 26px !important; }
.apl-card .apl-play { opacity: 0; transition: opacity .2s; }
.apl-card:hover .apl-play { opacity: 1; }
.apl-card .apl-txt { padding: 0 2px; }
.apl-card .apl-txt b { font-size: 14.5px; font-weight: 800; }
.apl-card .apl-txt small { font-size: 12.5px; color: var(--text-2); }
.apl-card .apl-go { display: none !important; }

/* --- homepage: the streak card + "Your week" side by side, the same height */
.xv-hero { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 6px 0 18px; }
.xv-hero.is-solo { grid-template-columns: minmax(0, 420px); }
.xv-hero .streak-bar { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center; gap: 8px !important; width: auto !important; margin: 0 !important;
    padding: 16px 18px !important; border-radius: 18px !important; position: relative;
    background: radial-gradient(circle at 15% 20%, rgba(255, 138, 0, .28), transparent 60%), linear-gradient(140deg, rgba(255, 45, 85, .18), rgba(255, 138, 0, .08)), var(--surface) !important;
    border: 1px solid rgba(255, 138, 0, .35) !important; }
.xv-hero .streak-bar .sb-fire { width: 52px; height: 52px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; font-size: 28px !important;
    background: rgba(255, 138, 0, .18); box-shadow: 0 0 0 6px rgba(255, 138, 0, .08), 0 8px 26px rgba(255, 90, 0, .35); }
.xv-hero .streak-bar .sb-txt { font-size: 13px !important; line-height: 1.4; color: var(--text-2); white-space: normal !important; }
.xv-hero .streak-bar .sb-txt b { display: block; font-size: 19px !important; font-weight: 900; color: var(--text); letter-spacing: -.01em; }
.xv-hero .streak-bar .sb-link { margin-top: 2px; padding: 6px 14px !important; border-radius: 16px !important; background: linear-gradient(135deg, #ff8a00, #ff2d55) !important; color: #fff !important; font-weight: 800 !important; font-size: 12.5px !important; }
.xv-hero .streak-bar .sb-x { position: absolute; top: 8px; right: 10px; }
.xv-hero .recap { margin: 0 !important; border-radius: 18px !important; }
@media (max-width: 1100px) { .xv-hero { grid-template-columns: 1fr; } .xv-hero .streak-bar { flex-direction: row !important; align-items: center !important; } }

/* --- Premium page: the history as tidy cards */
.pr-hist { display: flex; flex-direction: column; gap: 8px; }
.pr-hrow { display: grid; grid-template-columns: minmax(170px, auto) 1fr auto auto; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.pr-hrow .pr-chip { justify-self: start; padding: 5px 12px; border-radius: 14px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.pr-chip.is-invite { background: rgba(139, 92, 246, .18); color: #a78bfa; }
.pr-chip.is-trial { background: rgba(34, 197, 94, .16); color: #22c55e; }
.pr-chip.is-card { background: rgba(62, 166, 255, .16); color: #3ea6ff; }
.pr-chip.is-pp { background: rgba(255, 196, 57, .18); color: #e0a800; }
.pr-hdates { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.pr-hdates i { font-size: 16px; color: var(--text-2); }
.pr-hdur { padding: 4px 10px; border-radius: 12px; background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.pr-hpaid { font-size: 14.5px; white-space: nowrap; }
@media (max-width: 700px) { .pr-hrow { grid-template-columns: 1fr auto; } .pr-hdates { grid-column: 1 / -1; order: 3; } }

/* --- the xVibe Romania logo */
.logo .xlogo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .xlogo-ic { width: 38px; height: 38px; flex: 0 0 38px; filter: drop-shadow(0 4px 12px rgba(255, 45, 85, .35)); }
.logo .xlogo-tx { display: flex; flex-direction: column; line-height: 1; }
.logo .xlogo-tx b { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--text); }
.logo .xlogo-tx b span { background: linear-gradient(135deg, #ff2d55, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .xlogo-tx small { margin-top: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .32em; color: var(--text-2); }
.logo .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) { .logo .xlogo-tx { display: none; } .logo .xlogo-ic { width: 34px; height: 34px; } }

/* ==========================================================================
   Update 76.1
   ========================================================================== */
/* phones: SVG icons (the theme's icon font has no glyph for some of them) */
#video-content .ytc svg { width: 26px; height: 26px; display: block; }
#video-content .ytc-prev svg, #video-content .ytc-next svg { width: 28px; height: 28px; }
#video-content .ytc-fs svg { width: 28px; height: 28px; }
#video-content .ytc-a svg { width: 25px; height: 25px; }
#video-content .ytc-a.is-on svg, #video-content .ytc-ic.is-on svg { color: #3ea6ff; }
#video-content .ytc-a, #video-content .ytc-ic, #video-content .ytc-b, #video-content .ytc-fs { color: #fff; }
/* the settings menu: sections, stays open, scrolls if long */
@media (pointer: coarse) {
    #video-content .ytc-host.ytc-menu-open .ytc { opacity: 1 !important; }
    #video-content .ytc-host.ytc-menu-open .ytc * { pointer-events: auto; }
    #video-content .ytc-host.ytc-menu-open .vjs-control-bar { opacity: 1 !important; visibility: visible !important; }
    #video-content .ytc-qm { top: 56px !important; right: 12px !important; max-height: calc(100% - 120px); overflow-y: auto; min-width: 190px; padding: 6px 4px !important; border-radius: 14px !important; background: rgba(22, 22, 26, .97) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); -webkit-overflow-scrolling: touch; }
    #video-content .ytc-qh { padding: 10px 14px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9aa0a6; }
    #video-content .ytc-qh:not(:first-child) { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; }
    #video-content .ytc-qm button { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px !important; border-radius: 8px; font-size: 14.5px !important; }
    #video-content .ytc-qm button.is-on { color: #3ea6ff; font-weight: 800 !important; }
    #video-content .ytc-qm button.is-on::after { content: '\2713' !important; margin-left: 12px; }
}
/* video page, "More from ...": one tidy line - views · 3 days ago */
.rur .vside-list .vl-views, .vside-list .vl-views { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vside-list .vl-views i { vertical-align: -3px; margin-right: 3px; font-size: 14px; }
.vside-list .vl-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the logo: centred with the other buttons of the bar + coming in on page load like them */
.logo-wrapper .logo { display: inline-flex !important; align-items: center; height: 100%; vertical-align: middle; }
.logo-wrapper { display: flex !important; align-items: center; }
.logo .xlogo { animation: xlogoIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.logo .xlogo-ic { animation: xlogoPop .8s cubic-bezier(.2, .8, .2, 1.2) .1s both; }
.logo .xlogo-tx { animation: xlogoTx .6s ease .25s both; }
@keyframes xlogoIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes xlogoPop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes xlogoTx { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* homepage mixes: ONE row that fills the whole width (no empty space on the right), the rest by sliding sideways */
.apl-row .apl-list, .apl-row .apl-list.is-few { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 4 * 18px) / 5); overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 0 6px; scrollbar-width: thin; }
.apl-row .apl-list .apl-card { scroll-snap-align: start; }
@media (max-width: 1500px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
@media (max-width: 1100px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 700px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: 72%; } }

/* ==========================================================================
   Update 77 - computer: the video player like YouTube
   ========================================================================== */
@media (pointer: fine) {
    #video-content .ydt-host .vjs-control-bar { display: flex !important; align-items: center; height: 52px !important; padding: 0 12px !important; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)) !important; }
    /* the red bar: above the buttons, the whole width, thicker on hover, a red dot */
    #video-content .ydt-host .vjs-progress-control { position: absolute !important; left: 12px !important; right: 12px !important; top: -10px !important; width: auto !important; height: 18px !important; min-width: 0 !important; display: flex !important; align-items: center; }
    #video-content .ydt-host .vjs-progress-holder { margin: 0 !important; height: 3px !important; transition: height .12s ease; }
    #video-content .ydt-host .vjs-progress-control:hover .vjs-progress-holder { height: 5px !important; }
    #video-content .ydt-host .vjs-play-progress { background: #f00 !important; }
    #video-content .ydt-host .vjs-play-progress:before { color: #f00 !important; font-size: 13px !important; top: -5px !important; transform: scale(0); transition: transform .12s ease; }
    #video-content .ydt-host .vjs-progress-control:hover .vjs-play-progress:before { transform: scale(1); }
    #video-content .ydt-host .vjs-load-progress { background: rgba(255, 255, 255, .4) !important; }
    #video-content .ydt-host .vjs-control-bar .vjs-button > .vjs-icon-placeholder:before { font-size: 27px !important; line-height: 52px !important; }
    #video-content .ydt-host .vjs-control-bar .vjs-button { width: 46px !important; height: 52px !important; }
    /* left: next + the time pill */
    #video-content .ydt-b { width: 46px; height: 46px; flex: 0 0 auto; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; position: relative; }
    #video-content .ydt-b svg { width: 26px; height: 26px; }
    #video-content .ydt-b:hover { background: rgba(255, 255, 255, .1); }
    #video-content .ydt-time { display: inline-flex; align-items: center; height: 34px; margin-left: 6px; padding: 0 12px; border-radius: 17px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
    #video-content .ydt-time > * { display: inline-flex !important; width: auto !important; min-width: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 13.5px !important; }
    #video-content .ydt-time .vjs-time-divider { padding: 0 4px !important; }
    #video-content .ydt-host .vjs-remaining-time, #video-content .ydt-host .vjs-resolution-button, #video-content .ydt-host .vjs-quality-selector, #video-content .ydt-host .vjs-playback-rate,
    #video-content .ydt-host .vjs-subs-caps-button, #video-content .ydt-host .vjs-subtitles-button, #video-content .ydt-host .vjs-captions-button, #video-content .ydt-host .vjs-descriptions-button { display: none !important; }
    /* right */
    #video-content .ydt-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
    #video-content .ydt-right .vjs-fullscreen-control { position: static !important; }
    #video-content .ydt-cc.is-on svg { color: #fff; }
    #video-content .ydt-cc.is-on::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 9px; height: 3px; border-radius: 2px; background: #f00; }
    #video-content .ydt-hd { position: absolute; top: 9px; right: 6px; padding: 0 3px; border-radius: 3px; background: #f00; color: #fff; font-style: normal; font-size: 8.5px; font-weight: 900; line-height: 12px; }
    #video-content .ydt-th.is-on svg { transform: scaleX(1.15); }
    /* the autoplay switch */
    #video-content .ydt-ap { width: 52px; }
    #video-content .ydt-sw { position: relative; display: inline-block; width: 36px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .3); }
    #video-content .ydt-sw i { position: absolute; top: -3px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #717171; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: left .15s ease, background .15s; }
    #video-content .ydt-ap.is-on .ydt-sw i { left: 18px; background: #fff; }
    #video-content .ydt-ap.is-on .ydt-sw i::after { content: ''; position: absolute; left: 7px; top: 5px; border-left: 7px solid #000; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
    /* the settings panel (like YouTube) */
    #video-content .ydt-panel { position: absolute; right: 12px; bottom: 62px; z-index: 40; width: 300px; max-height: calc(100% - 80px); overflow-y: auto; padding: 8px 0; border-radius: 12px; background: rgba(28, 28, 28, .92); backdrop-filter: blur(8px); color: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); }
    #video-content .ydt-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 14px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 14px; text-align: left; cursor: pointer; }
    #video-content .ydt-row:hover, #video-content .ydt-opt:hover, #video-content .ydt-back:hover { background: rgba(255, 255, 255, .1); }
    #video-content .ydt-ri svg { width: 24px; height: 24px; display: block; }
    #video-content .ydt-rl { flex: 1; font-weight: 500; }
    #video-content .ydt-rv { color: #ddd; font-size: 13px; }
    #video-content .ydt-chev { font-style: normal; font-size: 22px; line-height: 1; color: #ddd; }
    #video-content .ydt-back { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; margin-bottom: 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); background: transparent; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
    #video-content .ydt-opt { display: block; width: 100%; height: 40px; padding: 0 14px 0 46px; border: 0; background: transparent; color: #fff; font-size: 14px; text-align: left; cursor: pointer; position: relative; }
    #video-content .ydt-opt.is-on::before { content: '\2713'; position: absolute; left: 18px; font-weight: 900; }
    #video-content .ydt-host.ydt-menu-open .vjs-control-bar { opacity: 1 !important; visibility: visible !important; }
    /* full screen: the title on top, quick actions bottom right (only while the mouse moves, like the bar) */
    #video-content .ydt-ftitle, #video-content .ydt-fqa { display: none; }
    #video-content .ydt-host.vjs-fullscreen .ydt-ftitle { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 6; padding: 18px 22px 40px; background: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent); color: #fff; font-size: 18px; font-weight: 600; pointer-events: none; transition: opacity .25s; }
    #video-content .ydt-host.vjs-fullscreen .ydt-fqa { display: flex; position: absolute; right: 18px; bottom: 66px; z-index: 6; gap: 6px; transition: opacity .25s; }
    #video-content .ydt-fqa .ydt-qa { background: rgba(0, 0, 0, .35); }
    #video-content .ydt-fqa .ydt-qa.is-on svg { color: #3ea6ff; }
    #video-content .ydt-host.vjs-fullscreen.vjs-user-inactive.vjs-playing .ydt-ftitle, #video-content .ydt-host.vjs-fullscreen.vjs-user-inactive.vjs-playing .ydt-fqa { opacity: 0; pointer-events: none; }
    #video-content .ydt-host.vjs-fullscreen .vjs-control-bar { height: 58px !important; }
}

/* ==========================================================================
   Update 77.1 - phones: the settings menu in levels (like YouTube): rows -> a list with "‹ back"
   ========================================================================== */
@media (pointer: coarse) {
    #video-content .ytc-qm { min-width: 240px !important; padding: 6px 0 !important; }
    #video-content .ytc-row { display: flex !important; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 16px !important; border: 0; background: transparent; color: #fff; text-align: left; }
    #video-content .ytc-row:active, #video-content .ytc-opt:active, #video-content .ytc-back:active { background: rgba(255, 255, 255, .1); }
    #video-content .ytc-rl { flex: 1; font-size: 15px; font-weight: 600; }
    #video-content .ytc-rv { font-size: 13.5px; color: #bbb; }
    #video-content .ytc-chev { font-style: normal; font-size: 24px; line-height: 1; color: #bbb; }
    #video-content .ytc-back { display: flex !important; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 16px !important; margin-bottom: 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #fff; font-size: 16px; font-weight: 700; text-align: left; }
    #video-content .ytc-opt { display: block !important; width: 100%; height: 46px; padding: 0 16px 0 46px !important; border: 0; background: transparent; color: #fff; font-size: 15px; text-align: left; position: relative; }
    #video-content .ytc-opt.is-on { color: #3ea6ff; font-weight: 800; }
    #video-content .ytc-opt.is-on::before { content: '\2713'; position: absolute; left: 18px; }
    #video-content .ytc-qm .ytc-qh { display: none; }
}

/* ==========================================================================
   Update 77.2 - computer: every button on the right opened full screen (bug)
   The full screen button had "position: static": its icon layer (absolute, 100% x 100%) then covered the
   WHOLE bar, so a click on settings / CC / theater was a click on full screen. It is a box of its own again.
   ========================================================================== */
@media (pointer: fine) {
    #video-content .ydt-right .vjs-fullscreen-control { position: relative !important; width: 46px !important; height: 52px !important; flex: 0 0 46px !important; padding: 0 !important; overflow: hidden; }
    #video-content .ydt-right .vjs-fullscreen-control .vjs-icon-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    #video-content .ydt-right .vjs-fullscreen-control .vjs-icon-placeholder:before { position: static !important; width: auto !important; height: auto !important; font-size: 27px !important; line-height: 1 !important; }
    #video-content .ydt-host .vjs-control-bar > .vjs-button, #video-content .ydt-host .vjs-control-bar > .vjs-control { position: relative; }
    #video-content .ydt-right .ydt-b { position: relative; z-index: 1; }
}
/* the subtitle size (settings) */
.video-js .vjs-text-track-display .vjs-text-track-cue > div, .video-js .vjs-text-track-display div div { font-size: var(--sub-size, 100%) !important; }
.video-js[data-subsize] .vjs-text-track-display .vjs-text-track-cue { font-size: calc(1.4em * var(--sub-size-n, 1)); }

/* ==========================================================================
   Update 77.3
   ========================================================================== */
/* computer: the time without a black box, in line with the icons, never cut ("13:" -> "13:20") */
@media (pointer: fine) {
    #video-content .ydt-time { background: transparent !important; height: 52px !important; padding: 0 8px !important; margin-left: 2px !important; align-self: stretch; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; overflow: visible !important; }
    #video-content .ydt-time > *, #video-content .ydt-time .vjs-current-time-display, #video-content .ydt-time .vjs-duration-display { display: inline-flex !important; align-items: center; height: auto !important; line-height: 1 !important; overflow: visible !important; width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; font-size: 13.5px !important; font-weight: 600; }
    #video-content .ydt-time .vjs-control-text { display: none !important; }
}
/* phone: like / dislike clearly coloured when pressed */
@media (pointer: coarse) {
    #video-content .ytc-a { border-radius: 50%; transition: background .2s, color .2s; }
    #video-content .ytc-like.is-on { background: rgba(62, 166, 255, .22); }
    #video-content .ytc-like.is-on svg { color: #3ea6ff !important; }
    #video-content .ytc-dis.is-on { background: rgba(255, 90, 118, .22); }
    #video-content .ytc-dis.is-on svg { color: #ff5a76 !important; }
    #video-content .ytc-pop svg { animation: ytcPop .35s ease; }
    @keyframes ytcPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
}

/* ==========================================================================
   Update 77.5 - subtitles: always above the player overlays (phone / computer)
   ========================================================================== */
.video-js .vjs-text-track-display { z-index: 6 !important; pointer-events: none; display: block !important; }
.video-js .vjs-text-track-display .vjs-text-track-cue > div { background: rgba(0, 0, 0, .72) !important; border-radius: 4px; padding: 2px 8px; }

/* ==========================================================================
   Update 77.6
   ========================================================================== */
/* phones: settings (and CC) on the player also outside full screen - they come and go with a tap */
@media (pointer: coarse) {
    #video-content .ytc-host .ytc-top { display: flex !important; position: absolute; top: 8px; right: 10px; gap: 8px; pointer-events: auto; }
    #video-content .ytc-host:not(.vjs-fullscreen) .ytc-top .ytc-ic { width: 38px; height: 38px; }
    #video-content .ytc-host:not(.vjs-fullscreen) .ytc-top svg { width: 23px; height: 23px; }
    #video-content .ytc-row.ytc-go { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 4px; }
}
@media (pointer: fine) { #video-content .ydt-panel .ydt-row .ydt-ri:empty { width: 24px; } }
/* homepage "Mixes for you": NEW small design - one row of compact cards (picture + text side by side),
   filling the whole width; the rest by sliding sideways */
.apl-row .apl-list, .apl-row .apl-list.is-few { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 3 * 12px) / 4) !important; gap: 12px !important; overflow-x: auto; padding: 4px 0 8px !important; scroll-snap-type: x mandatory; }
.apl-row .apl-list .apl-card, .apl-row .apl-list.is-few .apl-card { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 8px !important;
    border-radius: 14px !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; scroll-snap-align: start; transition: border-color .2s, transform .2s; }
.apl-row .apl-card:hover { border-color: rgba(139, 92, 246, .55) !important; transform: translateY(-2px); }
.apl-row .apl-card .apl-stack { display: none !important; }
.apl-row .apl-card .apl-mos { flex: 0 0 116px !important; width: 116px; margin: 0 !important; border-radius: 9px !important; aspect-ratio: 16 / 9; }
.apl-row .apl-card .apl-n { width: 42% !important; font-size: 12px !important; gap: 0 !important; }
.apl-row .apl-card .apl-n i { font-size: 17px !important; }
.apl-row .apl-card .apl-play { display: none !important; }
.apl-row .apl-card .apl-txt { min-width: 0; padding: 0 !important; gap: 2px !important; }
.apl-row .apl-card .apl-txt b { font-size: 13.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apl-row .apl-card .apl-txt small { font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1300px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: calc((100% - 2 * 12px) / 3) !important; } }
@media (max-width: 900px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: calc((100% - 12px) / 2) !important; } }
@media (max-width: 600px) { .apl-row .apl-list, .apl-row .apl-list.is-few { grid-auto-columns: 84% !important; } }

/* ==========================================================================
   Update 78
   ========================================================================== */
/* --- phones, full screen like the YouTube app: ⌄ + title + @channel (top left); autoplay, cast, CC, settings (top right) */
@media (pointer: coarse) {
    #video-content .ytc-fhead { display: none; }
    #video-content .ytc-host.vjs-fullscreen .ytc-fhead, html.vd-rotfull #video-content .ytc-host .ytc-fhead { display: flex; align-items: flex-start; gap: 10px; position: absolute; top: 12px; left: 12px; right: 260px; pointer-events: auto; }
    #video-content .ytc-down { width: 42px; height: 42px; flex: 0 0 42px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
    #video-content .ytc-down svg { width: 32px !important; height: 32px !important; }
    #video-content .ytc-fht { min-width: 0; display: flex; flex-direction: column; color: #fff; padding-top: 4px; }
    #video-content .ytc-fht b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
    #video-content .ytc-fht small { font-size: 13px; opacity: .85; }
    /* the top right buttons: autoplay + cast only in full screen */
    #video-content .ytc-host:not(.vjs-fullscreen) .ytc-top .ytc-ap, #video-content .ytc-host:not(.vjs-fullscreen) .ytc-top .ytc-cast { display: none !important; }
    html.vd-rotfull #video-content .ytc-host .ytc-top .ytc-ap, html.vd-rotfull #video-content .ytc-host .ytc-top .ytc-cast { display: flex !important; }
    #video-content .ytc-ap { width: 56px !important; }
    #video-content .ytc-ap .ydt-sw { position: relative; display: inline-block; width: 38px; height: 15px; border-radius: 8px; background: rgba(255, 255, 255, .3); }
    #video-content .ytc-ap .ydt-sw i { position: absolute; top: -4px; left: -2px; width: 23px; height: 23px; border-radius: 50%; background: #9aa0a6; transition: left .15s, background .15s; }
    #video-content .ytc-ap.is-on .ydt-sw i { left: 17px; background: #fff; }
    #video-content .ytc-ap.is-on .ydt-sw i::after { content: ''; position: absolute; left: 9px; top: 6px; border-left: 7px solid #000; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
    #video-content .ytc-acts { gap: 2px !important; }
    #video-content .ytc-acts .ytc-a { width: 48px; }
    /* --- the settings sheet: in the middle, on top of everything, a dark backdrop */
    #video-content .ytc-qm-bg { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
    #video-content .ytc-qm { position: absolute !important; z-index: 31 !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%);
        width: min(560px, 88%) !important; max-height: 86% !important; padding: 6px 0 10px !important; border-radius: 18px !important; background: #212121 !important; overflow-y: auto; pointer-events: auto !important; }
    #video-content .ytc-grab { display: block; width: 44px; height: 4px; margin: 6px auto 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
    #video-content .ytc-qm .ytc-row { height: 56px !important; gap: 16px !important; padding: 0 22px !important; }
    #video-content .ytc-qm .ytc-ri svg { width: 26px !important; height: 26px !important; display: block; color: #fff; }
    #video-content .ytc-qm .ytc-rl { font-size: 16px !important; font-weight: 500 !important; }
    #video-content .ytc-qm .ytc-rv { font-size: 14.5px !important; color: #bbb !important; }
    #video-content .ytc-qm .ytc-row.is-off { opacity: .45; }
    #video-content .ytc-qm .ytc-back { padding: 0 22px !important; }
    #video-content .ytc-qm .ytc-opt { padding-left: 58px !important; height: 50px !important; }
    #video-content .ytc-qm .ytc-opt.is-on::before { left: 26px !important; }
    #video-content .ytc-host.ytc-menu-open .ytc { opacity: 1 !important; }
}
/* --- live in full screen: the chat on the right, ✕ = the video on the whole screen */
.video-js .live-chat.lv-fs-chat { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(380px, 36%) !important; height: auto !important; max-height: none !important;
    z-index: 20; margin: 0 !important; border-radius: 0 !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1) !important; background: rgba(15, 15, 18, .94) !important; color: #fff; display: flex !important; flex-direction: column; }
.video-js .live-chat.lv-fs-chat .lchat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.video-js .live-chat.lv-fs-chat .lchat-head { padding-right: 50px !important; font-size: 18px !important; }
.lv-fs-x { position: absolute; top: 8px; right: 10px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lv-fs-x:hover { background: rgba(255, 255, 255, .18); }
.video-js.lv-fs-nochat .live-chat.lv-fs-chat { display: none !important; }
.video-js:has(.lv-fs-chat):not(.lv-fs-nochat) .vjs-tech { width: calc(100% - min(380px, 36%)) !important; }
.video-js:has(.lv-fs-chat):not(.lv-fs-nochat) .vjs-control-bar { right: min(380px, 36%) !important; width: auto !important; }
/* --- computer: no site logo on the player, no old quality button (quality is in ⚙ settings now) */
@media (pointer: fine) {
    #video-content .ydt-host .vjs-brand, #video-content .ydt-host .vjs-brand-container { display: none !important; }
    #video-content .ydt-host .vjs-control-bar > .vjs-menu-button:not(.vjs-volume-menu-button) { display: none !important; }
}

/* ==========================================================================
   Update 78.1 - live on a phone: full screen when turned, the chat beside the video (not over / out of the screen)
   ========================================================================== */
/* turned sideways before the real full screen (it needs a tap): the player covers the screen anyway */
html.lv-rotfull #live-player { position: fixed !important; inset: 0 !important; z-index: 9990 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; background: #000; aspect-ratio: auto !important; }
html.lv-rotfull body { overflow: hidden; }
/* the full screen box itself: exactly the screen */
#live-player .video-js.vjs-fullscreen { width: 100vw !important; height: 100vh !important; position: fixed !important; inset: 0 !important; overflow: hidden !important; }
/* the chat in full screen: at most 40 % of the width on phones, smaller text, the video in the rest */
@media (pointer: coarse), (max-width: 1024px) {
    .video-js .live-chat.lv-fs-chat { width: min(320px, 40vw) !important; font-size: 12.5px; }
    .video-js .live-chat.lv-fs-chat .lchat-head { padding: 8px 46px 8px 12px !important; font-size: 15px !important; }
    .video-js .live-chat.lv-fs-chat .lchat-msg { padding: 3px 10px !important; font-size: 12.5px !important; }
    .video-js .live-chat.lv-fs-chat .lchat-form { padding: 6px 8px !important; }
    .video-js .live-chat.lv-fs-chat #lchat-input { padding: 7px 10px !important; font-size: 13px !important; }
    .video-js:has(.lv-fs-chat):not(.lv-fs-nochat) .vjs-tech { width: calc(100% - min(320px, 40vw)) !important; }
    .video-js:has(.lv-fs-chat):not(.lv-fs-nochat) .vjs-control-bar { right: min(320px, 40vw) !important; }
    .lv-fs-x { top: 4px; right: 6px; width: 34px; height: 34px; font-size: 22px; }
}
.video-js .live-chat.lv-fs-chat * { max-width: 100%; }
.video-js .live-chat.lv-fs-chat .lchat-list { overflow-x: hidden; }

/* ==========================================================================
   Update 79 - live on a phone: the controls like the YouTube app (like the videos)
   ========================================================================== */
@media (pointer: coarse) {
    #live-player .lyc { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: rgba(0, 0, 0, .32); opacity: 1; transition: opacity .25s; }
    #live-player .lyc-host.vjs-user-inactive.vjs-playing:not(.lyc-menu-open) .lyc { opacity: 0; }
    #live-player .lyc-host.vjs-user-inactive.vjs-playing:not(.lyc-menu-open) .lyc * { pointer-events: none !important; }
    #live-player .lyc svg { width: 26px; height: 26px; display: block; }
    #live-player .lyc-b, #live-player .lyc-a, #live-player .lyc-play { pointer-events: auto; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
    #live-player .lyc-b { width: 42px; height: 42px; }
    /* top: ⌄ + title + @channel only in full screen; cast + ⚙ always */
    #live-player .lyc-head { display: none; position: absolute; top: 10px; left: 10px; right: 120px; align-items: flex-start; gap: 8px; pointer-events: auto; }
    #live-player .lyc-host.vjs-fullscreen .lyc-head, html.lv-rotfull #live-player .lyc-head { display: flex; }
    #live-player .lyc-down svg { width: 32px; height: 32px; }
    #live-player .lyc-ht { min-width: 0; display: flex; flex-direction: column; color: #fff; padding-top: 4px; }
    #live-player .lyc-ht b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
    #live-player .lyc-ht small { font-size: 12.5px; opacity: .85; }
    #live-player .lyc-top { position: absolute; top: 8px; right: 10px; display: flex; gap: 6px; pointer-events: auto; }
    #live-player .lyc-host:has(.lv-fs-chat):not(.lv-fs-nochat) .lyc-top { right: calc(min(320px, 40vw) + 10px); }
    /* the big ⏯ in the middle */
    #live-player .lyc-play { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, .45); }
    #live-player .lyc-play svg { width: 40px; height: 40px; }
    #live-player .lyc-host:has(.lv-fs-chat):not(.lv-fs-nochat) .lyc-play { left: calc((100% - min(320px, 40vw)) / 2); }
    /* bottom: 👍 👎 💬 ↗ - in full screen, above the bar */
    #live-player .lyc-bottom { display: none; position: absolute; left: 14px; bottom: 62px; pointer-events: auto; }
    #live-player .lyc-host.vjs-fullscreen .lyc-bottom, html.lv-rotfull #live-player .lyc-bottom { display: flex; }
    #live-player .lyc-acts { display: flex; gap: 2px; padding: 4px 8px; border-radius: 26px; background: rgba(0, 0, 0, .5); }
    #live-player .lyc-a { width: 48px; height: 42px; border-radius: 50%; transition: background .2s; }
    #live-player .lyc-like.is-on { background: rgba(62, 166, 255, .22); } #live-player .lyc-like.is-on svg { color: #3ea6ff; }
    #live-player .lyc-dis.is-on { background: rgba(255, 90, 118, .22); } #live-player .lyc-dis.is-on svg { color: #ff5a76; }
    /* the old big play of the page / the right buttons of the computer bar: not needed here */
    #live-player .lyc-host .vjs-big-play-button { display: none !important; }
    #live-player .lyc-host .lv-right .lv-rb-chat, #live-player .lyc-host .lv-right .lv-rb-th, #live-player .lyc-host .lv-right .lv-rb-q, #live-player .lyc-host .lv-right .lv-rb-cast { display: none !important; }
    /* ⚙: a sheet in the middle, on top */
    #live-player .lyc-qm-bg { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
    #live-player .lyc-qm { position: absolute; z-index: 31; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 86%); max-height: 86%; overflow-y: auto; padding: 6px 0 10px; border-radius: 18px; background: #212121; color: #fff; }
    #live-player .lyc-grab { display: block; width: 44px; height: 4px; margin: 6px auto 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
    #live-player .lyc-qh { padding: 8px 22px 6px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9aa0a6; }
    #live-player .lyc-opt { display: block; width: 100%; height: 50px; padding: 0 22px 0 58px; border: 0; background: transparent; color: #fff; font-size: 15.5px; text-align: left; position: relative; }
    #live-player .lyc-opt.is-on { color: #3ea6ff; font-weight: 800; }
    #live-player .lyc-opt.is-on::before { content: '\2713'; position: absolute; left: 26px; }
}

/* ==========================================================================
   Update 80 - the live on pause
   ========================================================================== */
.lv-pause-ov { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff;
    background: radial-gradient(circle at 50% 45%, rgba(40, 20, 60, .88), rgba(0, 0, 0, .95)); }
.lv-pause-ov .lpo-ic { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .04); animation: lpoPulse 2.2s ease-in-out infinite; }
@keyframes lpoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.lv-pause-ov b { font-size: 22px; font-weight: 900; }
.lv-pause-ov small { font-size: 15px; font-weight: 700; color: #f5b400; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .lv-pause-ov .lpo-ic { width: 58px; height: 58px; font-size: 28px; } .lv-pause-ov b { font-size: 17px; } }
.ls-pause { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ls-pause .btn { border-radius: 18px !important; font-weight: 700; }
.ls-pause .ls-resume { display: none; }
.ls-pause.is-on .ls-resume { display: inline-block; }
.ls-pause-st { font-weight: 800; color: #f5b400; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Update 80.1 - live full screen: the chat exactly as high as the video, the writing box always visible
   (the message list had a fixed minimum height from the base style: the box went under the screen)
   ========================================================================== */
.video-js .live-chat.lv-fs-chat { box-sizing: border-box !important; overflow: hidden !important; height: 100% !important; max-height: 100% !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.video-js .live-chat.lv-fs-chat > * { flex: 0 0 auto !important; }
.video-js .live-chat.lv-fs-chat .lchat-list { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; }
.video-js .live-chat.lv-fs-chat .lchat-form { position: relative !important; bottom: auto !important; margin: 0 !important; flex: 0 0 auto !important; background: rgba(15, 15, 18, .98); border-top: 1px solid rgba(255, 255, 255, .1); }
.video-js .live-chat.lv-fs-chat .lchat-empty { font-size: 15px !important; }
.video-js .live-chat.lv-fs-chat .lchat-gifts, .video-js .live-chat.lv-fs-chat .sp-sheet { max-height: 70% !important; }
/* the video beside it: the same height, centred in its part */
.video-js:has(.lv-fs-chat):not(.lv-fs-nochat) .vjs-tech { height: 100% !important; top: 0 !important; object-fit: contain; }

/* Update 80.2 - the pause screen: fully opaque (nothing of the stream shows behind it) */
.lv-pause-ov { background: radial-gradient(circle at 50% 45%, #241433, #08080b 70%) !important; }

/* Update 80.3 - the pause screen with the picture uploaded in Live Studio: the picture on the whole player, the text at the bottom */
.lv-pause-ov.has-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; justify-content: flex-end !important; padding-bottom: 9%; }
.lv-pause-ov.has-img .lpo-ic { background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); }
.lv-pause-ov.has-img b, .lv-pause-ov.has-img small { text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

/* ==========================================================================
   Update 80.4
   ========================================================================== */
/* the pause screen: the text in the middle (also over the picture) */
.lv-pause-ov.has-img { justify-content: center !important; padding-bottom: 0 !important; background-blend-mode: normal; }
/* live in full screen: the chat panel works whatever element is in full screen (on some phones it is not
   the player itself, so the rules "inside the player" did not apply: the box stayed under the screen) */
:fullscreen .live-chat.lv-fs-chat, :-webkit-full-screen .live-chat.lv-fs-chat, .live-chat.lv-fs-chat {
    position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(340px, 40vw) !important; height: 100% !important; max-height: 100% !important; z-index: 40 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important;
    margin: 0 !important; border-radius: 0 !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1) !important;
    background: rgba(15, 15, 18, .96) !important; color: #fff; padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.live-chat.lv-fs-chat > * { flex: 0 0 auto !important; }
.live-chat.lv-fs-chat .lchat-list { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; }
.live-chat.lv-fs-chat .lchat-form { position: relative !important; display: flex !important; flex: 0 0 auto !important; margin: 0 !important; background: rgba(15, 15, 18, .98) !important; }
:fullscreen:has(> .live-chat.lv-fs-chat) { position: relative; width: 100vw !important; height: 100vh !important; overflow: hidden !important; background: #000; }
.lv-fs-nochat .live-chat.lv-fs-chat { display: none !important; }
:fullscreen:has(> .live-chat.lv-fs-chat):not(.lv-fs-nochat) .vjs-tech, :fullscreen:has(> .live-chat.lv-fs-chat):not(.lv-fs-nochat) > video { width: calc(100% - min(340px, 40vw)) !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: contain; }
:fullscreen:has(> .live-chat.lv-fs-chat):not(.lv-fs-nochat) .vjs-control-bar { right: min(340px, 40vw) !important; width: auto !important; }
/* phones: subscribed -> the membership button in place of "✓ Subscribed"; not subscribed -> next to "Subscribe" */
@media (max-width: 700px) {
    .vd-channel:has(.mb-join):has(.vd-sub a.subscriber.btn-default) .vd-sub { display: none !important; }
    .vd-channel .mb-join, .vd-channel .mb-chip { display: inline-flex !important; white-space: nowrap; }
}

/* ==========================================================================
   Update 81 - live on a phone held upright: the chat under the player (like YouTube) / a "Live chat" card
   ========================================================================== */
@media (max-width: 700px) and (orientation: portrait) {
    /* closed: the chat is not in the page, the card opens it */
    html.lv-mchat:not(.lv-mchat-open) .live-side .live-chat:not(.lv-fs-chat) { display: none !important; }
    /* open: right under the player, on the rest of the screen */
    html.lv-mchat-open body { overflow: hidden !important; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 60 !important;
        height: auto !important; max-height: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important; border: 0 !important; background: var(--bg, #0f0f12) !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); transition: transform .2s ease;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) > * { flex: 0 0 auto !important; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-list { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; }
    html.lv-mchat-open .lv-mchat-card { display: none !important; }
    html.lv-mchat-open .vibe-bnav, html.lv-mchat-open .mobile-bottom-nav, html.lv-mchat-open #bottom-nav { display: none !important; }
}
.lv-mchat-grab { display: none; }
html.lv-mchat-open .live-chat .lv-mchat-grab { display: flex; justify-content: center; padding: 8px 0 2px; touch-action: none; }
.lv-mchat-grab span { width: 40px; height: 4px; border-radius: 2px; background: rgba(127, 127, 127, .55); }
html.lv-mchat-open .live-chat .lchat-head { touch-action: none; }
/* the "Live chat" card (chat closed) */
.lv-mchat-card { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
    html.lv-mchat .lv-mchat-card { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 12px 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--surface-2); color: var(--text); text-align: left; }
    html.lv-mchat .lv-mchat-card b { font-size: 16px; font-weight: 700; }
    html.lv-mchat .lv-mchat-card span { display: block; padding: 10px 14px; border-radius: 20px; background: var(--surface); color: var(--text-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.lv-mchat .lv-box-chat { display: none !important; }
}
/* turned sideways before the real full screen: the chat beside the video inside the player */
#live-player:has(> .live-chat.lv-fs-chat):not(.lv-fs-nochat) .vjs-tech { width: calc(100% - min(340px, 40vw)) !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: contain; }
#live-player:has(> .live-chat.lv-fs-chat):not(.lv-fs-nochat) .vjs-control-bar { right: min(340px, 40vw) !important; width: auto !important; }
#live-player:has(> .live-chat.lv-fs-chat) .video-js { width: 100% !important; height: 100% !important; }
#live-player.lv-fs-nochat > .live-chat.lv-fs-chat { display: none !important; }

/* ==========================================================================
   Update 81.1 - the writing box of the live chat is pinned to the bottom of the chat
   (full screen + the chat under the player on phones): it does not depend on any height
   calculation any more; the messages stop above it
   ========================================================================== */
/* only phones (touch screens): on the computer the full screen chat stays exactly as it was */
@media (pointer: coarse) {
    .live-chat.lv-fs-chat .lchat-form,
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-form {
        position: absolute !important; left: 0 !important; right: 0 !important; bottom: env(safe-area-inset-bottom, 0px) !important; top: auto !important;
        z-index: 6 !important; margin: 0 !important; padding: 8px 10px !important; display: flex !important; align-items: center; gap: 6px;
        background: rgba(15, 15, 18, .98) !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-form { background: var(--bg, #0f0f12) !important; border-top-color: var(--border) !important; }
    .live-chat.lv-fs-chat .lchat-list, html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-list { padding-bottom: 70px !important; }
    .live-chat.lv-fs-chat .lchat-note, html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-note { position: absolute !important; left: 10px; right: 10px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 7; }
    .live-chat.lv-fs-chat .lchat-gifts, html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-gifts { position: absolute !important; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 8; max-height: 60% !important; overflow-y: auto; }
    .live-chat.lv-fs-chat .sp-sheet, html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .sp-sheet { bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; z-index: 9; }
}
/* phone upright, chat open: nothing else moves */
@media (max-width: 700px) and (orientation: portrait) {
    html.lv-mchat-open, html.lv-mchat-open body { overflow: hidden !important; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-list { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-form, html.lv-mchat-open .live-side .live-chat:not(.lv-fs-chat) .lchat-form * { touch-action: manipulation; }
    html.lv-mchat-open #live-player { touch-action: manipulation; }
}

/* ==========================================================================
   Update 82
   ========================================================================== */
/* (6) the ⋮ of the video page lists stay on their row (they floated over the player when scrolling) */
.vside-list li, .video-related li.item-post, .rur li, .related-mobi li { position: relative !important; }
/* (9) ⋮ always visible, a new look: a small round button at the top right of each row */
.vc-more.vc-more-side { position: absolute !important; top: 2px !important; right: 0 !important; left: auto !important; bottom: auto !important; z-index: 3;
    width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; opacity: 1 !important; visibility: visible !important;
    display: flex !important; align-items: center; justify-content: center; background: transparent !important; color: var(--text-2) !important; transition: background .15s, color .15s; cursor: pointer; }
.vc-more.vc-more-side i { font-size: 20px !important; }
.vc-more.vc-more-side:hover, .vc-more.vc-more-side:focus { background: var(--surface-2) !important; color: var(--text) !important; }
.vside-list li .vl-data, .video-related li.item-post .rel-meta { padding-right: 30px !important; }
/* (5) the logo on phones: the icon + a small "xVibe" (no "ROMANIA"), neatly aligned */
@media (max-width: 600px) {
    .logo .xlogo { gap: 6px !important; }
    .logo .xlogo-tx { display: flex !important; }
    .logo .xlogo-tx b { font-size: 18px !important; }
    .logo .xlogo-tx small { display: none !important; }
    .logo .xlogo-ic { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
}
/* (2) phones: a "Studio" icon on top instead of the avatar; the avatar at the bottom opens the account menu */
.mb-dash { display: none; }
@media (max-width: 700px) {
    html.mb-acc-swap #openusr { display: none !important; }
    html.mb-acc-swap .mb-dash { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text); }
}
.mbacc { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.mbacc.is-on { opacity: 1; pointer-events: auto; }
.mbacc-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 6px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; background: var(--surface); transform: translateY(100%); transition: transform .25s ease; }
.mbacc.is-on .mbacc-in { transform: none; }
.mbacc-grab { display: block; width: 42px; height: 4px; margin: 6px auto 8px; border-radius: 2px; background: var(--border); }
.mbacc-list { display: block !important; position: static !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; list-style: none; }
.mbacc-list > li > a { display: flex !important; align-items: center; gap: 12px; padding: 12px 20px !important; color: var(--text) !important; font-size: 15px; }
.mbacc-list > li > a i { font-size: 22px; }
/* (10) the subtitle settings: text colour + background */
.video-js .vjs-text-track-display .vjs-text-track-cue > div { color: var(--sub-color, #fff) !important; background: var(--sub-bg, rgba(0, 0, 0, .72)) !important; }

/* ==========================================================================
   Update 82.1 - phones: the writing box of the live chat always on the screen
   ========================================================================== */
@media (pointer: coarse) {
    /* full screen (phone turned): the chat takes its height from the VISIBLE screen (dvh = without the
       bars of the browser / the phone), not from the element it is in (taller than the screen on some phones) */
    .live-chat.lv-fs-chat {
        position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important;
        height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; }
    /* phone upright: the chat stops above the bottom tab bar (its bottom is set by the script) */
}

/* ==========================================================================
   Update 82.2 - the ⋮ of the video page lists: their own column on the right of every row
   (they covered the title), bolder, with a design
   ========================================================================== */
.vside-list li, .video-related li.item-post, .rur li.item-post { padding-right: 40px !important; box-sizing: border-box; }
.vc-more.vc-more-side { top: 50% !important; right: 2px !important; transform: translateY(-50%); width: 34px !important; height: 34px !important;
    border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.vc-more.vc-more-side i { font-size: 22px !important; font-weight: 700; }
.vc-more.vc-more-side:hover, .vc-more.vc-more-side:focus { background: var(--accent, #ff2d55) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-50%) scale(1.06); }
.vside-list li .vl-data, .video-related li.item-post .rel-meta { padding-right: 0 !important; }

/* ==========================================================================
   Update 83
   ========================================================================== */
/* phones: live full screen = the wrapper (player + chat side by side, 100% high each) */
.lv-fswrap { position: fixed; inset: 0; z-index: 9995; display: flex; flex-direction: row; width: 100vw; height: 100vh; height: 100dvh; background: #000; overflow: hidden; }
.lv-fswrap:fullscreen, .lv-fswrap:-webkit-full-screen { width: 100% !important; height: 100% !important; }
html.lv-fswrap-on body { overflow: hidden !important; }
html .lv-fswrap #live-player { position: relative !important; inset: auto !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 100% !important;
    max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; z-index: auto !important; }
html .lv-fswrap #live-player .video-js { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding-top: 0 !important; }
html .lv-fswrap #live-player .vjs-tech { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: contain; }
html .lv-fswrap #live-player .vjs-control-bar { right: 0 !important; width: auto !important; }
html .lv-fswrap .live-chat.lv-wchat { position: relative !important; inset: auto !important; transform: none !important; flex: 0 0 min(340px, 40%) !important; width: auto !important;
    height: 100% !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;
    border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 0 !important; background: #0f0f12 !important; color: #fff; box-shadow: none !important; }
html .lv-fswrap .live-chat.lv-wchat > * { flex: 0 0 auto !important; }
html .lv-fswrap .live-chat.lv-wchat .lchat-list { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; padding-bottom: 6px !important; }
html .lv-fswrap .live-chat.lv-wchat .lchat-form { position: static !important; display: flex !important; flex: 0 0 auto !important; margin: 0 !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: #0f0f12 !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; }
html .lv-fswrap .live-chat.lv-wchat .lchat-head { padding: 8px 46px 8px 12px !important; font-size: 15px !important; }
html .lv-fswrap .live-chat.lv-wchat .lchat-msg { font-size: 12.5px !important; padding: 3px 10px !important; }
html .lv-fswrap .live-chat.lv-wchat .lv-mchat-grab { display: none !important; }
html .lv-fswrap.no-chat .live-chat.lv-wchat { display: none !important; }
html .lv-fswrap .live-chat.lv-wchat .lchat-gifts, html .lv-fswrap .live-chat.lv-wchat .sp-sheet { position: absolute !important; left: 0; right: 0; bottom: 56px !important; max-height: 70% !important; overflow-y: auto; z-index: 8; }
/* the phone overlay of the player in the wrapper: the title + the bottom buttons like in full screen */
html.lv-fswrap-on #live-player .lyc-head, html.lv-fswrap-on #live-player .lyc-bottom { display: flex !important; }
html.lv-fswrap-on #live-player .lyc-top, html.lv-fswrap-on #live-player .lyc-play { right: auto; }
html.lv-fswrap-on #live-player .lyc-top { right: 10px !important; }
html.lv-fswrap-on #live-player .lyc-play { left: 50% !important; }
/* phones: the top avatar became the Studio icon */
@media (max-width: 700px) { html.mb-acc-swap #openusr.mb-studio { display: inline-flex !important; align-items: center; justify-content: center; color: var(--text); } html.mb-acc-swap #openusr.mb-studio svg { width: 24px; height: 24px; } html.mb-acc-swap .mb-dash { display: none !important; } }
/* the ⋮ of the video page lists: a bit more to the right and higher */
.vc-more.vc-more-side { top: 28% !important; right: -6px !important; }

/* ==========================================================================
   Update 83.1
   ========================================================================== */
/* ⋮ of the side lists: no red circle on hover any more - a quiet hover */
.vc-more.vc-more-side:hover, .vc-more.vc-more-side:focus { background: var(--surface-3, rgba(127, 127, 127, .22)) !important; border-color: var(--border) !important; color: var(--text) !important; transform: translateY(-50%) !important; }
/* phones: no number on the Studio icon (the theme puts the messages / notifications count into the avatar button) */
html.mb-acc-swap #openusr.mb-studio .badge, html.mb-acc-swap #openusr.mb-studio span, html.mb-acc-swap #openusr.mb-studio em, html.mb-acc-swap #openusr.mb-studio b { display: none !important; }
html.mb-acc-swap #openusr.mb-studio::before, html.mb-acc-swap #openusr.mb-studio::after { content: none !important; display: none !important; }

/* Update 83.2 - the ⋮ of the side lists: NO hover effect at all (they stay exactly as they are) */
.vc-more.vc-more-side:hover, .vc-more.vc-more-side:focus, .vc-more.vc-more-side:active { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; transform: translateY(-50%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important; }

/* ==========================================================================
   Update 83.3
   ========================================================================== */
/* the ⋮ of the side lists: NO circle at all - only the icon (no border, background or shadow, also on hover) */
.vc-more.vc-more-side, .vc-more.vc-more-side:hover, .vc-more.vc-more-side:focus, .vc-more.vc-more-side:active {
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--text) !important; }
.vc-more.vc-more-side i { font-size: 24px !important; }
/* phones: the autoplay message on the player */
#video-content .ytc-tip { position: absolute; left: 50%; top: 22%; z-index: 12; transform: translateX(-50%); padding: 8px 16px; border-radius: 18px; background: rgba(0, 0, 0, .78); color: #fff;
    font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
#video-content .ytc-tip.is-on { opacity: 1; }

/* ==========================================================================
   Update 83.4
   ========================================================================== */
/* phones: the autoplay switch - clear ON / OFF colours (like YouTube) */
@media (pointer: coarse) {
    #video-content .ytc-ap .ydt-sw { width: 40px !important; height: 16px !important; border-radius: 8px !important; background: rgba(255, 255, 255, .35) !important; transition: background .2s; }
    #video-content .ytc-ap .ydt-sw i { top: -4px !important; left: -2px !important; width: 24px !important; height: 24px !important; background: #9aa0a6 !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); transition: left .2s ease, background .2s; }
    #video-content .ytc-ap.is-on .ydt-sw { background: #ff1f3d !important; }
    #video-content .ytc-ap.is-on .ydt-sw i { left: 18px !important; background: #fff !important; }
    #video-content .ytc-ap.is-on .ydt-sw i::after { content: '' !important; position: absolute; left: 9px; top: 6.5px; border-left: 7px solid #ff1f3d; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
    #video-content .ytc-ap:not(.is-on) .ydt-sw i::after { content: none !important; }
    /* the button itself always clickable in full screen */
    #video-content .ytc-host .ytc-top .ytc-ap { pointer-events: auto !important; }
}
/* phones: the bottom tab bar does not slide away while the live chat is open under the player */
html.lv-mchat-open #mbnav { transform: none !important; }

/* ==========================================================================
   Update 85
   ========================================================================== */
/* the streak on the homepage: a small discreet label (it was a big card) - 🔥 Day 9 in a row */
html body .streak-bar, html body .xv-hero .streak-bar { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; height: 36px !important;
    margin: 4px 0 12px !important; padding: 0 6px 0 4px !important; border-radius: 18px !important; border: 1px solid rgba(255, 120, 40, .35) !important;
    background: linear-gradient(90deg, rgba(255, 90, 40, .14), rgba(255, 170, 40, .06)) !important; box-shadow: none !important; flex: 0 0 auto !important; grid-column: auto !important; }
html body .streak-bar .sb-fire, html body .xv-hero .streak-bar .sb-fire { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 16px !important; line-height: 28px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center;
    background: rgba(255, 110, 40, .2) !important; box-shadow: none !important; animation: none !important; margin: 0 !important; }
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { display: inline-flex !important; align-items: baseline; gap: 6px; font-size: 13px !important; line-height: 1 !important; color: var(--text-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .streak-bar .sb-txt b, html body .xv-hero .streak-bar .sb-txt b { font-size: 13.5px !important; font-weight: 800 !important; color: var(--text) !important; }
html body .streak-bar .sb-link, html body .xv-hero .streak-bar .sb-link { display: none !important; }
html body .streak-bar .sb-x, html body .xv-hero .streak-bar .sb-x { width: 24px !important; height: 24px !important; min-width: 24px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--text-2) !important; font-size: 16px !important; line-height: 24px !important; position: static !important; }
html body .streak-bar .sb-x:hover, html body .xv-hero .streak-bar .sb-x:hover { background: var(--surface-2) !important; }
@media (max-width: 700px) {
    /* phones: only "🔥 Day 9 in a row" */
    html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { font-size: 0 !important; }
    html body .streak-bar .sb-txt b, html body .xv-hero .streak-bar .sb-txt b { font-size: 13px !important; }
}
/* the hero box: the small streak label on top, "Your week" on the whole width under it (not two equal cards) */
html body .xv-hero { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; grid-template-columns: none !important; }
html body .xv-hero > .recap { width: 100% !important; }
html body .xv-hero .streak-bar .sb-txt b { display: inline !important; }
html body .xv-hero .streak-bar .sb-x { position: static !important; }
/* phones: no cursor circle (the theme's effect that follows the clicks) */
@media (pointer: coarse), (max-width: 700px) {
    .cursor-inner, .cursor-outer { display: none !important; }
}

/* ==========================================================================
   Update 87 - Studio: the menu in groups (a short row of tabs, each group a dropdown - like YouTube Studio)
   ========================================================================== */
.dash-nav.dash-groups { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; overflow: visible !important; justify-content: flex-start !important; padding-bottom: 2px; }
.dash-grp { position: relative; flex: 0 0 auto; }
.dash-grp-h { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px 9px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dash-grp-h i { font-size: 20px; transition: transform .2s; }
.dash-grp-h:hover { background: var(--surface-2); color: var(--text); }
.dash-grp.is-cur > .dash-grp-h { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent, #ff2d55); }
.dash-grp.is-drop > .dash-grp-h i { transform: rotate(180deg); }
.dash-grp-b { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(0, 0, 0, .35); }
.dash-grp.is-drop > .dash-grp-b { display: flex; flex-direction: column; gap: 2px; }
.dash-grp-b .dash-tab { display: flex !important; width: 100%; padding: 10px 12px !important; border-radius: 10px !important; justify-content: flex-start; }
.dash-groups > .dash-tab { flex: 0 0 auto; }
@media (max-width: 700px) {
    .dash-nav.dash-groups { gap: 4px !important; }
    .dash-grp-h { padding: 8px 10px 8px 12px; font-size: 13px; }
    .dash-grp-b { position: fixed; left: 12px !important; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; z-index: 9000; }
}

/* ==========================================================================
   Update 87 - Studio: Retention, Traffic sources, Supporters, Security (2FA)
   ========================================================================== */
.cs-page { max-width: 980px; }
.cs-h { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.cs-h4 { margin: 22px 0 10px; font-size: 16px; font-weight: 800; }
.cs-sub { margin: 0 0 16px; color: var(--text-2); font-size: 14px; }
.cs-empty { padding: 28px 18px; border-radius: 16px; background: var(--surface-2); color: var(--text-2); text-align: center; }
.cs-filter select { width: 100%; max-width: 520px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; }
.cs-periods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cs-periods a { padding: 7px 14px; border-radius: 18px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.cs-periods a.is-on { background: var(--text); color: var(--bg); }
.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cs-card { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); }
.cs-card small { display: block; color: var(--text-2); font-size: 12.5px; }
.cs-card b { display: block; margin-top: 4px; font-size: 24px; font-weight: 900; }
.cs-box { padding: 12px; border-radius: 16px; background: var(--surface-2); }
.cs-chart { width: 100%; height: 240px; display: block; }
.cs-chart .cs-grid { stroke: var(--border); stroke-width: 1; }
.cs-chart .cs-ax { fill: var(--text-2); font-size: 11px; }
.cs-chart .cs-area { fill: rgba(255, 45, 85, .16); }
.cs-chart .cs-line { fill: none; stroke: #ff2d55; stroke-width: 2.5; stroke-linejoin: round; }
.cs-table { display: flex; flex-direction: column; gap: 4px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1.4fr) 64px auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; }
a.cs-row:hover { background: var(--surface-3, rgba(127, 127, 127, .2)); }
.cs-row .cs-t { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); text-decoration: none; }
.cs-row .cs-ic { font-size: 16px; }
.cs-row .cs-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.cs-row .cs-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff2d55, #ff8a00); }
.cs-row b { text-align: right; font-weight: 800; }
.cs-row small { color: var(--text-2); font-size: 12px; text-align: right; }
.cs-row.cs-sup { grid-template-columns: 44px minmax(0, 2fr) auto auto; }
.cs-row.cs-sup img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.cs-rank { font-weight: 900; color: var(--text-2); }
.cs-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.cs-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px; background: var(--surface-2); color: var(--text); text-decoration: none; text-align: center; }
.cs-pod-1 { background: linear-gradient(160deg, rgba(255, 196, 0, .22), var(--surface-2)); }
.cs-pod-2 { background: linear-gradient(160deg, rgba(200, 200, 210, .22), var(--surface-2)); }
.cs-pod-3 { background: linear-gradient(160deg, rgba(205, 127, 50, .22), var(--surface-2)); }
.cs-pod img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.cs-pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pod span { font-weight: 800; color: var(--text-2); font-size: 13px; }
.cs-medal { font-size: 26px; line-height: 1; }
@media (max-width: 600px) {
    .cs-row { grid-template-columns: minmax(0, 1fr) 70px 48px; }
    .cs-row small { display: none; }
    .cs-row.cs-sup { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .cs-podium { gap: 6px; } .cs-pod img { width: 44px; height: 44px; }
}
/* Security (2FA) */
.tfa-box { padding: 18px; border-radius: 18px; background: var(--surface-2); }
.tfa-state { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.tfa-steps { margin: 0 0 14px; padding-left: 20px; color: var(--text-2); line-height: 1.6; }
.tfa-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 16px; }
#tfa-qr { padding: 10px; border-radius: 12px; background: #fff; width: 180px; height: 180px; }
.tfa-key { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tfa-key small { color: var(--text-2); }
.tfa-key code { padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.tfa-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tfa-form input { width: 170px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; letter-spacing: .2em; text-align: center; }
.tfa-ok, .tfa-err { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.tfa-ok { background: rgba(46, 204, 113, .14); color: #2ecc71; }
.tfa-err { background: rgba(255, 45, 85, .14); color: #ff6b81; }
.tfa-codes { margin-bottom: 14px; padding: 16px; border-radius: 16px; border: 2px dashed #ff8a00; background: rgba(255, 138, 0, .08); }
.tfa-codes p { margin: 6px 0 10px; color: var(--text-2); font-size: 13px; }
.tfa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tfa-grid code { padding: 8px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; text-align: center; letter-spacing: .08em; }


/* ==========================================================================
   Update 88 - phones: the bottom tab bar hidden on the video and live pages (like YouTube);
   the live page lock lets the pull-to-refresh gesture through
   ========================================================================== */
@media (max-width: 768px) {
    html.mb-watch #mbnav, html.mb-watch .mbnav, body:has(#video-content) #mbnav, body:has(#live-player) #mbnav { display: none !important; }
    html.mb-watch body, body:has(#video-content), body:has(#live-player) { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}

/* Update 88.1 - the streak label: the text with its natural width (a "flex: 1" of the old big card made it 0 wide - only the flame showed) */
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { flex: 0 1 auto !important; min-width: auto !important; width: auto !important; overflow: visible !important; }
@media (max-width: 700px) { html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { overflow: hidden !important; } }

/* ==========================================================================
   Update 88.2
   ========================================================================== */
/* computer player: the full screen button stays in the bar (after our group) - same look as before */
@media (pointer: fine) {
    #video-content .ydt-host .vjs-control-bar > .vjs-fullscreen-control { position: relative !important; flex: 0 0 46px !important; width: 46px !important; height: 52px !important; order: 99; }
    #video-content .ydt-host .vjs-control-bar > .ydt-right { order: 98; }
}
/* the streak label: only "🔥 Day 9 in a row" inside the frame (the rest of the sentence is the tooltip) */
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { font-size: 0 !important; overflow: hidden !important; }
html body .streak-bar .sb-txt b, html body .xv-hero .streak-bar .sb-txt b { font-size: 13.5px !important; white-space: nowrap; }
html body .streak-bar, html body .xv-hero .streak-bar { padding: 0 6px 0 4px !important; overflow: hidden !important; }

/* ==========================================================================
   Update 88.3
   ========================================================================== */
/* the streak label: the whole text shown normally INSIDE the frame (no hidden text, no hover effect);
   too long for one line (phones) -> a second line inside the frame, the frame grows */
html body .streak-bar, html body .xv-hero .streak-bar { display: inline-flex !important; align-items: center !important; height: auto !important; min-height: 36px !important;
    max-width: 100% !important; padding: 5px 8px 5px 5px !important; overflow: visible !important; box-sizing: border-box; }
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { display: block !important; flex: 0 1 auto !important; min-width: 0 !important; width: auto !important;
    font-size: 13px !important; line-height: 1.35 !important; color: var(--text-2) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html body .streak-bar .sb-txt b, html body .xv-hero .streak-bar .sb-txt b { display: inline !important; font-size: 13.5px !important; font-weight: 800 !important; color: var(--text) !important; white-space: nowrap; }
html body .streak-bar .sb-fire, html body .xv-hero .streak-bar .sb-fire { flex: 0 0 28px !important; }
html body .streak-bar .sb-x, html body .xv-hero .streak-bar .sb-x { flex: 0 0 24px !important; }
/* live on phones: cast + ⚙ moved a bit to the left - the LIVE (real time) button of the top right corner was over them */
@media (pointer: coarse) {
    #live-player .lyc-top { right: 96px !important; }
    html.lv-fswrap-on #live-player .lyc-top { right: 96px !important; }
}

/* ==========================================================================
   Update 89
   ========================================================================== */
/* 1. the channel page: the tabs (Channel, Collections, Videos, Shorts, Badges, Premium ...) closer together, all on ONE line
   (slides sideways if they do not fit) */
html body #profile-nav ul { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 2px !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 !important; padding: 0 !important; }
html body #profile-nav ul::-webkit-scrollbar { display: none; }
html body #profile-nav ul li { flex: 0 0 auto !important; float: none !important; margin: 0 !important; width: auto !important; }
html body #profile-nav ul li a { display: inline-flex !important; align-items: center; gap: 4px; padding: 10px 12px !important; margin: 0 !important; white-space: nowrap !important; }

/* Update 89.1 - the streak label: a smaller frame */
html body .streak-bar, html body .xv-hero .streak-bar { min-height: 28px !important; padding: 3px 6px 3px 3px !important; gap: 6px !important; border-radius: 14px !important; margin: 2px 0 10px !important; }
html body .streak-bar .sb-fire, html body .xv-hero .streak-bar .sb-fire { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; font-size: 13px !important; line-height: 22px !important; }
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { font-size: 12px !important; line-height: 1.3 !important; }
html body .streak-bar .sb-txt b, html body .xv-hero .streak-bar .sb-txt b { font-size: 12.5px !important; }
html body .streak-bar .sb-x, html body .xv-hero .streak-bar .sb-x { width: 20px !important; height: 20px !important; min-width: 20px !important; flex: 0 0 20px !important; font-size: 14px !important; line-height: 20px !important; }

/* ==========================================================================
   Update 89.2 - video page side lists: ⋮ always visible (every row), only the line
   "views · days ago" may use the free room on the right (nothing else moves)
   ========================================================================== */
.vside-list .vc-more, .video-related .vc-more, .rur .vc-more, .related-mobi .vc-more { opacity: 1 !important; visibility: visible !important; }
.rur li.item-post .rel-stats, .video-related li.item-post .rel-stats { margin-right: -36px !important; max-width: calc(100% + 36px) !important; }
.vside-list li .vl-views { margin-right: -36px !important; max-width: calc(100% + 36px) !important; }

/* Update 89.3 - the streak label: the frame just a little bigger than the text */
html body .streak-bar, html body .xv-hero .streak-bar { width: fit-content !important; max-width: 100% !important; min-height: 0 !important; height: auto !important;
    padding: 3px 8px !important; gap: 5px !important; border-radius: 12px !important; line-height: 1.2 !important; }
html body .streak-bar .sb-fire, html body .xv-hero .streak-bar .sb-fire { width: auto !important; height: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
    background: none !important; font-size: 14px !important; line-height: 1 !important; }
html body .streak-bar .sb-txt, html body .xv-hero .streak-bar .sb-txt { line-height: 1.25 !important; }
html body .streak-bar .sb-x, html body .xv-hero .streak-bar .sb-x { width: 16px !important; height: 16px !important; min-width: 16px !important; flex: 0 0 16px !important; font-size: 13px !important; line-height: 16px !important; }

/* ==========================================================================
   Update 91 - Upload settings, Create channel, Privacy and data
   ========================================================================== */
.acc-page .tfa-box { margin-bottom: 14px; }
.acc-form { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.acc-form label { margin: 8px 0 0; font-weight: 700; font-size: 14px; }
.acc-form input[type=text], .acc-form input[type=password], .acc-form select, .acc-form textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; box-sizing: border-box; }
.acc-form textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.acc-form input[type=file] { padding: 8px 0; color: var(--text-2); }
.acc-form .btn { align-self: flex-start; margin-top: 8px; border-radius: 18px !important; font-weight: 700; }
.acc-hint { color: var(--text-2); font-size: 12.5px; }
.acc-danger { border: 1px solid rgba(255, 45, 85, .35); }
.updef-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(139, 92, 246, .12); color: var(--text); font-size: 13.5px; }
.updef-note a { font-weight: 700; }
.cc-steps { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cc-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 20px; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 13.5px; }
.cc-steps b { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--text); font-size: 12px; }
.cc-steps .is-on { color: var(--text); } .cc-steps .is-on b { background: #ff2d55; color: #fff; }
.cc-steps .is-done b { background: #2ecc71; color: #fff; }
.cc-prev img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.cc-cover img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }
.cc-next { margin-top: 14px; border-radius: 18px !important; font-weight: 800; }
.mb-create a { color: #ff2d55 !important; font-weight: 800; }

/* ==========================================================================
   Update 91.1
   ========================================================================== */
/* video page, Recommended: the duration of the video back in the bottom right corner of the PICTURE
   (it went up to the top right on some browsers): the picture link is a positioned block as big as the picture */
.video-related .thumb > a.clip-link, .rur .thumb > a.clip-link { display: block !important; position: relative !important; }
.video-related .thumb .clip, .rur .thumb .clip { display: block !important; }
.video-related .thumb .clip img, .rur .thumb .clip img { display: block !important; }
.video-related .thumb .timer, .rur .thumb .timer { position: absolute !important; top: auto !important; left: auto !important; right: 6px !important; bottom: 6px !important;
    min-width: 0 !important; padding: 1px 6px !important; line-height: 16px !important; font-size: 11.5px !important; font-weight: 700; opacity: 1 !important; border-radius: 5px !important; z-index: 2; }
/* the box to delete the subtitle (edit video) */
.sub-del { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 10px; font-weight: 700; color: #ff6b81; cursor: pointer; }

/* Update 91.2 - the video page: ⋮ always visible on EVERY row / card (the Recommended can be video cards,
   which showed ⋮ only on hover like on the homepage) */
body:has(#video-content) .vc-more, html.mb-watch .vc-more { opacity: 1 !important; visibility: visible !important; }

/* Update 91.4 - the channel cover: a banner on top of the channel page (like YouTube) */
#profile-body .ch-banner { width: 100%; aspect-ratio: 6.2 / 1; max-height: 240px; min-height: 90px; margin: 0 0 14px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
#profile-body .ch-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { #profile-body .ch-banner { aspect-ratio: 4 / 1; border-radius: 12px; margin-bottom: 10px; } }

/* ==========================================================================
   Update 92 - "Create channel": one page, a live preview of the channel
   ========================================================================== */
.cc2 { max-width: 1040px; }
.cc2-head h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; }
.cc2-head p { margin: 0 0 18px; color: var(--text-2); font-size: 15px; }
.cc2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.cc2-lbl { display: block; margin: 14px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.cc2-lbl em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .7; }
.cc2-prev .cc2-lbl { margin-top: 0; }
.cc2-card { border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.cc2-banner { aspect-ratio: 6.2 / 1; background: linear-gradient(120deg, #ff2d55, #8b5cf6 55%, #3ea6ff) center / cover no-repeat; }
.cc2-id { display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px; }
.cc2-av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-top: -40px; border: 4px solid var(--surface-2); background: var(--surface); }
.cc2-id b { display: block; font-size: 19px; font-weight: 900; line-height: 1.2; word-break: break-word; }
.cc2-id small { color: var(--text-2); font-size: 13px; }
.cc2-tabs { display: flex; gap: 18px; padding: 0 16px; border-top: 1px solid var(--border); }
.cc2-tabs span { padding: 10px 0; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.cc2-tabs .is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.cc2-perks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cc2-perks li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.cc2-perks b { color: var(--text); }
.cc2-fields { padding: 4px 22px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.cc2-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 120px; border: 2px dashed var(--border); border-radius: 14px;
    background: var(--surface-2) center / cover no-repeat; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; overflow: hidden; }
.cc2-drop:hover, .cc2-drop.is-over { border-color: #ff2d55; }
.cc2-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc2-drop span { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; }
.cc2-drop small { color: var(--text-2); font-size: 12px; }
.cc2-drop.has-file span { background: rgba(0, 0, 0, .55); color: #fff; }
.cc2-drop.has-file small { color: #ddd; }
.cc2-avrow { display: flex; align-items: center; gap: 14px; }
.cc2-avrow small { color: var(--text-2); font-size: 12.5px; }
.cc2-avpick { position: relative; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; cursor: pointer; }
.cc2-avpick img { width: 100%; height: 100%; object-fit: cover; }
.cc2-avpick i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 24px; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.cc2-avpick:hover i { opacity: 1; }
.cc2-avpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc2-namebox { position: relative; }
.cc2-namebox input { width: 100%; box-sizing: border-box; padding: 12px 64px 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 16px; font-weight: 700; }
.cc2-namebox span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 12px; }
.cc2-hint { display: block; margin-top: 6px; color: var(--text-2); font-size: 12.5px; }
.cc2-err { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(255, 45, 85, .13); color: #ff6b81; font-weight: 700; font-size: 13px; }
.cc2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 20px; border: 0; border-radius: 24px; background: var(--surface-2); color: var(--text) !important; font-size: 15px; font-weight: 800; text-decoration: none !important; cursor: pointer; }
.cc2-btn.is-main { background: linear-gradient(90deg, #ff2d55, #ff5a3c); color: #fff !important; box-shadow: 0 6px 18px rgba(255, 45, 85, .35); }
.cc2-go { width: 100%; margin-top: 18px; padding: 14px; font-size: 16px; }
.cc2-go[disabled] { opacity: .75; cursor: wait; }
.cc2-done { max-width: 620px; text-align: center; }
.cc2-done .cc2-card { text-align: left; margin-bottom: 18px; }
.cc2-done h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; }
.cc2-done p { color: var(--text-2); margin: 0 0 16px; }
.cc2-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 860px) { .cc2-grid { grid-template-columns: 1fr; } .cc2-fields { padding: 4px 16px 18px; } .cc2-head h2 { font-size: 22px; } }

/* ==========================================================================
   Update 93 - older browsers without aspect-ratio (TV browsers: Tizen / webOS, old Safari):
   the thumbnail boxes had height 0 (their content is absolute) -> no thumbnails. The classic
   padding-top box gives them their 16:9 (9:16, banner...) height there. Newer browsers are not touched.
   ========================================================================== */
@supports not (aspect-ratio: 1 / 1) {
html body .vgrid .video-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
html body .vgrid .video-thumb::after { content: ""; display: table; clear: both; }
.owl-carousel .video-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.owl-carousel .video-thumb::after { content: ""; display: table; clear: both; }
.live-card .lc-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.live-card .lc-thumb::after { content: ""; display: table; clear: both; }
.ls-cover-prev::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.ls-cover-prev::after { content: ""; display: table; clear: both; }
.ls-opt-prev::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.ls-opt-prev::after { content: ""; display: table; clear: both; }
.cr-thumbs a::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.cr-thumbs a::after { content: ""; display: table; clear: both; }
.nt-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.nt-thumb::after { content: ""; display: table; clear: both; }
html body .related-mobi .video-related li .thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
html body .related-mobi .video-related li .thumb::after { content: ""; display: table; clear: both; }
.vside-mobi .vl-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.vside-mobi .vl-thumb::after { content: ""; display: table; clear: both; }
.ti-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.ti-thumb::after { content: ""; display: table; clear: both; }
.tw-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.tw-thumb::after { content: ""; display: table; clear: both; }
.tw-sthumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.tw-sthumb::after { content: ""; display: table; clear: both; }
.prem-room::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.prem-room::after { content: ""; display: table; clear: both; }
.pcd-thumb::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.pcd-thumb::after { content: ""; display: table; clear: both; }
.apl-mos::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.apl-mos::after { content: ""; display: table; clear: both; }
.prem-wall::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.prem-wall::after { content: ""; display: table; clear: both; }
.ytm-banner::before { content: ""; float: left; width: 0; padding-top: 43.75%; }
.ytm-banner::after { content: ""; display: table; clear: both; }
.lrec-im::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.lrec-im::after { content: ""; display: table; clear: both; }
.lrec-sh-im::before { content: ""; float: left; width: 0; padding-top: 177.7778%; }
.lrec-sh-im::after { content: ""; display: table; clear: both; }
.apl-card .apl-mos::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.apl-card .apl-mos::after { content: ""; display: table; clear: both; }
.apl-row .apl-card .apl-mos::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.apl-row .apl-card .apl-mos::after { content: ""; display: table; clear: both; }
#profile-body .ch-banner::before { content: ""; float: left; width: 0; padding-top: 16.129%; }
#profile-body .ch-banner::after { content: ""; display: table; clear: both; }
.cc2-banner::before { content: ""; float: left; width: 0; padding-top: 16.129%; }
.cc2-banner::after { content: ""; display: table; clear: both; }
@media (pointer: coarse) {
.ytc-sg-im::before { content: ""; float: left; width: 0; padding-top: 56.25%; }
.ytc-sg-im::after { content: ""; display: table; clear: both; }
}
@media (max-width: 700px) {
#profile-body .ch-banner::before { content: ""; float: left; width: 0; padding-top: 25.0%; }
#profile-body .ch-banner::after { content: ""; display: table; clear: both; }
}
}
/* the sound buttons: only the icon (no "tap for sound" text) */
#live-player .live-unmute { width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; justify-content: center; gap: 0; font-size: 0 !important; }
#live-player .live-unmute i { font-size: 24px !important; }
.vad-sound { width: 54px; height: 54px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.vad-sound[hidden] { display: none; }
.vad-sound svg { width: 26px; height: 26px; }

/* channel page tabs (Channel, Collections, Videos ... Following): tighter, and on a computer they wrap to a second line
   instead of the last ones being cut off; on a phone they stay one swipeable row, a bit tighter */
html body #profile-nav ul li a { padding: 9px 11px !important; font-size: 13.5px !important; gap: 3px; }
@media (min-width: 701px) { html body #profile-nav ul { flex-wrap: wrap !important; overflow: visible !important; row-gap: 2px !important; } }
@media (max-width: 700px) { html body #profile-nav ul li a { padding: 9px 9px !important; font-size: 13px !important; } }
/* the volume (arrow up / down) in the middle of the player */
.vg-seek.mid { left: 31%; right: 31%; width: auto; background: none; }

/* phones: no "Top of the week" and no "Mixes" on the homepage (the computer keeps them) */
@media (max-width: 700px) {
    body.body-home .hm-sec.hm-tm, body.body-home .hm-sec:has(> .tw), body.body-home .tw, body.body-home .apl-row { display: none !important; }
}
/* phones (update 187): the top bar keeps only search, the bell and the account - no light/dark switch, no Cast
   (it is in the player) and no Media Studio icon (the account is in the bottom bar); computers stay as they are */
@media (max-width: 768px) {
    html body .top-header .user-express .user-quick > a.top-link.vibe-theme-toggle,
    html body .top-header .user-express .user-quick > a.top-link.top-cast,
    html body .top-header .user-express .user-quick > a#openusr.mb-studio { display: none !important; }
}
/* Premium plans: the price before the discount and the saving (plans set in Modules > Premium settings) */

.pr-save { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(47, 191, 113, .15); color: #2fbf71; font-weight: 800; font-size: 12px; }
.pr-plan-per s { color: var(--text-2, #999); margin-right: 4px; }
/* Premium page with the Wallet module: paid from the balance */
.pr-wl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px; border-radius: 14px; background: rgba(47, 191, 113, .1); border: 1px solid rgba(47, 191, 113, .35); font-size: 14.5px; }
.pr-wl-bar b { font-size: 16px; } .pr-wl-bar a { font-weight: 800; color: #2fbf71 !important; }
.pr-wl-ok, .pr-wl-warn { padding: 12px 16px; border-radius: 12px; margin: 0 0 12px; font-weight: 700; }
.pr-wl-ok { background: rgba(47, 191, 113, .14); border: 1px solid rgba(47, 191, 113, .4); } .pr-wl-warn { background: rgba(245, 165, 36, .12); border: 1px solid rgba(245, 165, 36, .45); }
/* "Most replayed" (update 203): like YouTube - a soft white wave above the bar, also while dragging / touching the bar (phones) */
.vibe-heat.is-on, .video-js.vjs-scrubbing .vibe-heat { opacity: 1; }
.vibe-heat path { fill: rgba(255, 255, 255, .32); }
.vibe-heat { height: 40px; }

/* ==========================================================================
   MEDIA STUDIO 2 - the menu on the left (computer) / a compact bar with the tabs in one row (phone),
   the channel card, the creator Overview (.sh). Only the Studio pages (#theHolder.ms-holder).
   ========================================================================== */
#theHolder.ms-holder { display: block; margin: 0 !important; }
#theHolder.ms-holder > #DashContent, #theHolder.ms-holder > .ms-side { box-sizing: border-box; }
.ms-side { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.ms-chan { position: relative; padding: 0 16px 16px; }
.ms-chan-cover { height: 74px; margin: 0 -16px; background: var(--grad) center / cover no-repeat; position: relative; }
.ms-chan-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .35)); }
.ms-chan-me { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -32px; position: relative; z-index: 1; text-decoration: none !important; color: var(--text) !important; min-width: 0; }
.ms-chan-me img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); background: var(--surface-2); flex: none; }
.ms-chan-me > span { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.ms-chan-me small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (min-width: 992px) { .ms-chan-me small { position: absolute; right: 0; top: 40px; padding: 3px 9px; border-radius: 20px; background: rgba(255, 45, 85, .12); font-size: 10px; } }
.ms-chan-me strong { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-chan-me em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.ms-cta { display: flex; gap: 8px; margin-top: 14px; }
.ms-btn { box-sizing: border-box; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none !important; background: var(--surface-2); color: var(--text) !important; border: 1px solid var(--border); transition: filter .15s, transform .15s; white-space: nowrap; }
.ms-btn i { font-size: 20px; }
.ms-btn:hover { filter: brightness(1.08); }
.ms-btn:active { transform: scale(.98); }
.ms-btn.is-primary { background: var(--grad); color: #fff !important; border-color: transparent; box-shadow: 0 6px 18px rgba(255, 45, 85, .28); }
.ms-btn.is-live i { color: #ef4444; }
.ms-nav { padding: 6px 10px 12px; border-top: 1px solid var(--border); }
.ms-grp { padding: 6px 0 2px; }
.ms-grp + .ms-grp { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.ms-grp-h { padding: 4px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.ms-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; position: relative; transition: background .15s, color .15s; }
.ms-link i { font-size: 21px; color: var(--text-3); transition: color .15s; }
.ms-link:hover { background: var(--surface-2); color: var(--text) !important; }
.ms-link:hover i { color: var(--text); }
.ms-link.is-active { background: rgba(255, 45, 85, .1); color: var(--text) !important; }
.ms-link.is-active i { color: var(--accent); }
.ms-link.is-active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.ms-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-holder #myTabs, #myTabs { display: none !important; } /* the old Dashboard / Menu switch of the Studio on phones: the menu is always shown now */

/* computer: the menu on the left, sticky; the page next to it */
@media (min-width: 992px) {
    #theHolder.ms-holder { display: grid !important; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }
    #theHolder.ms-holder::before, #theHolder.ms-holder::after { display: none !important; content: none !important; }
    .ms-holder > .ms-side { position: sticky; top: calc(var(--hdr, 64px) + 14px); max-height: calc(100vh - var(--hdr, 64px) - 28px); overflow-y: auto; scrollbar-width: thin; }
    .ms-holder > #DashContent { min-width: 0; width: auto !important; box-sizing: border-box; }
}
/* phone / tablet: a compact bar - the channel on one row, the tabs on one row you swipe */
@media (max-width: 991px) {
    .ms-side { border-radius: 16px; margin-bottom: 12px; }
    .ms-chan { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
    .ms-chan-cover { display: none; }
    .ms-chan-me { margin: 0; flex-direction: row; align-items: center; flex: 1 1 auto; gap: 10px; }
    .ms-chan-me img { width: 42px; height: 42px; border-width: 0; }
    .ms-chan-me small { font-size: 10px; }
    .ms-chan-me strong { font-size: 15px; }
    .ms-chan-me em { font-size: 12px; }
    .ms-cta { margin: 0; flex: none; gap: 6px; }
    .ms-cta .ms-btn { flex: none; height: 38px; padding: 0 12px; border-radius: 19px; }
    .ms-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .ms-nav::-webkit-scrollbar { display: none; }
    .ms-grp, .ms-grp + .ms-grp { display: contents; }
    .ms-grp-h { display: none; }
    .ms-grp + .ms-grp > .ms-link:first-child { margin-left: 8px; }
    .ms-grp + .ms-grp > .ms-link:first-child::after { content: ""; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 1px; background: var(--border); }
    .ms-link { flex: none; gap: 7px; padding: 8px 13px; border-radius: 20px; font-size: 13.5px; background: var(--surface-2); scroll-snap-align: center; }
    .ms-link i { font-size: 18px; }
    .ms-link.is-active { background: var(--text); color: var(--bg-2, #fff) !important; }
    .ms-link.is-active i { color: var(--accent); }
    .ms-link.is-active::before { display: none; }
}
@media (max-width: 520px) {
    .ms-cta .ms-btn span { display: none; }
    .ms-cta .ms-btn { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}

/* ---------------------------------------------------------------- the creator Overview */
.sh { display: flex; flex-direction: column; gap: 18px; }
.sh-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#DashContent .sh-hello h1 { margin: 0 0 4px !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.03em; }
.sh-hello p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.sh-chan-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text) !important; font-weight: 700; font-size: 13.5px; text-decoration: none !important; }
.sh-chan-link i { font-size: 18px; color: var(--accent); }
.sh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sh-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none !important; color: var(--text) !important; overflow: hidden; min-width: 0; }
.sh-kpi > i { position: absolute; right: 12px; top: 12px; font-size: 22px; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255, 45, 85, .12); color: var(--accent); }
.sh-kpi.is-subs > i { background: rgba(59, 130, 246, .14); color: #3b82f6; }
.sh-kpi.is-total > i { background: rgba(168, 85, 247, .14); color: #a855f7; }
.sh-kpi.is-money > i, .sh-kpi.is-likes > i { background: rgba(34, 197, 94, .14); color: #16a34a; }
.sh-kpi small { font-size: 12px; font-weight: 700; color: var(--text-2); padding-right: 44px; }
.sh-kpi strong { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-kpi.is-money strong { color: #16a34a; }
.sh-d { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.sh-d.is-up { color: #16a34a; }
.sh-d.is-down { color: #ef4444; }
a.sh-kpi:hover { border-color: rgba(34, 197, 94, .45); }
.sh-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sh-acts a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text) !important; font-weight: 700; font-size: 13.5px; text-decoration: none !important; text-align: center; transition: transform .15s, border-color .15s; }
.sh-acts a i { font-size: 26px; color: var(--accent); }
.sh-acts a.is-live i { color: #ef4444; }
.sh-acts a:hover { transform: translateY(-2px); border-color: rgba(255, 45, 85, .4); }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sh-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sh-card { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.sh-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#DashContent .sh-card-h h2 { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 6px; }
.sh-card-h h2 i { color: #f59e0b; font-size: 20px; }
.sh-card-h a { font-size: 13px; font-weight: 700; color: var(--accent) !important; text-decoration: none !important; white-space: nowrap; }
.sh-card .st-chart { height: 190px; }
.sh-top { display: flex; flex-direction: column; gap: 4px; }
.sh-top-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-decoration: none !important; color: var(--text) !important; }
.sh-top-row:hover { background: var(--surface-2); }
.sh-top-row > b { width: 18px; text-align: center; font-size: 15px; color: var(--text-3); flex: none; }
.sh-top-row img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; flex: none; background: var(--surface-2); }
.sh-top-t { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.3; display: flex; flex-direction: column; gap: 3px; }
.sh-top-t small { font-weight: 600; font-size: 12px; color: var(--text-3); }
.sh-top-n { flex: none; text-align: right; display: flex; flex-direction: column; }
.sh-top-n strong { font-size: 16px; font-weight: 800; }
.sh-top-n small { font-size: 11.5px; color: var(--text-3); }
.sh-coms { display: flex; flex-direction: column; gap: 2px; }
.sh-com { display: flex; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none !important; color: var(--text) !important; }
.sh-com:hover { background: var(--surface-2); }
.sh-com img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.sh-com > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.sh-com b { font-weight: 800; display: inline; }
.sh-com em { font-style: normal; color: var(--text-3); font-size: 12px; }
.sh-com q { quotes: none; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.sh-com small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-last-img { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.sh-last-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sh-last-img:hover img { transform: scale(1.04); }
.sh-last-img em { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
#DashContent .sh-last h3 { margin: 12px 0 10px !important; font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.35; }
.sh-last h3 a { color: var(--text) !important; text-decoration: none !important; }
.sh-last-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sh-last-st span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); }
.sh-last-st i { font-size: 18px; color: var(--text-3); }
.sh-last-st b { font-size: 17px; font-weight: 800; }
.sh-last-st small { font-size: 11.5px; color: var(--text-3); }
.sh-last-vs { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.sh-last-vs.is-up { background: rgba(34, 197, 94, .12); color: #16a34a; }
.sh-last-vs.is-down { background: var(--surface-2); color: var(--text-2); }
.sh-last-date { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }
.sh-money { background: linear-gradient(160deg, rgba(34, 197, 94, .12), var(--surface) 55%); }
.sh-money-big small { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.sh-money-big strong { font-size: 34px; font-weight: 800; color: #16a34a; letter-spacing: -.03em; }
.sh-money-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.sh-money-row b { color: var(--text); }
.sh-money-btn { width: 100%; margin-top: 10px; }
.sh-tip { background: linear-gradient(160deg, rgba(245, 158, 11, .12), var(--surface) 60%); }
.sh-tip p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.sh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 10px; color: var(--text-2); }
.sh-empty i { font-size: 40px; color: var(--text-3); }
.sh-empty p { margin: 0 0 6px; }
.sh-empty .ms-btn { flex: none; }
.sh-empty.is-small { padding: 12px 6px; }
@media (max-width: 1200px) { .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .sh-grid { grid-template-columns: minmax(0, 1fr); }
    #DashContent.isBoxed:has(.sh) { padding: 14px !important; }
}
@media (max-width: 600px) {
    #DashContent .sh-hello h1 { font-size: 21px !important; }
    .sh-chan-link { display: none; }
    .sh-kpi { padding: 13px 12px 12px; border-radius: 16px; }
    .sh-kpi > i { width: 32px; height: 32px; font-size: 19px; right: 10px; top: 10px; }
    .sh-kpi strong { font-size: 23px; }
    .sh-kpi small { padding-right: 36px; font-size: 11.5px; }
    .sh-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sh-acts a { padding: 12px 6px; font-size: 12px; border-radius: 14px; }
    .sh-acts a i { font-size: 23px; }
    .sh-card { padding: 14px; border-radius: 16px; }
    .sh-top-row img { width: 88px; }
    .sh-top-row { gap: 9px; padding: 6px 4px; }
    .sh-top-row > b { display: none; }
}
/* phone: the latest video and the money first, then the charts and the lists */
@media (max-width: 991px) {
    .sh-grid { display: flex; flex-direction: column; }
    .sh-col, .sh-col.is-side { display: contents; }
    .sh-grid .sh-last { order: 1; } .sh-grid .sh-money { order: 2; } .sh-grid .sh-chart-card { order: 3; }
    .sh-grid .sh-top-card { order: 4; } .sh-grid .sh-com-card { order: 5; } .sh-grid .sh-tip { order: 6; }
}
.sh-prem { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 11px; border-radius: 20px; background: rgba(245, 158, 11, .14); color: #d97706 !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; }
.sh-prem i { font-size: 16px; }

/* ==========================================================================
   PROFILE / CHANNEL PAGE 2 - the header: cover, avatar, name + badges, numbers, bio, facts, buttons;
   the tabs as pills. (#profile-body.pf2-body)
   ========================================================================== */
#profile-body.pf2-body #playlist-content.isBoxed:before { display: none !important; content: none !important; }
.pf2 { position: relative; }
.pf2-cover { position: relative; height: 210px; background: var(--grad) center / cover no-repeat; }
.pf2:not(.has-cover) .pf2-cover { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 106, 61, .95), rgba(255, 45, 85, .85) 45%, rgba(124, 58, 237, .85) 100%); }
.pf2-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35)); pointer-events: none; }
.pf2-cover-edit { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; background: rgba(0, 0, 0, .55); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; backdrop-filter: blur(6px); }
.pf2-cover-edit i { font-size: 18px; }
.pf2-main { display: flex; align-items: flex-start; gap: 22px; padding: 0 28px 22px; margin-top: -58px; position: relative; z-index: 1; }
.pf2-av { position: relative; flex: none; }
.pf2-av img { display: block; width: 148px; height: 148px; border-radius: 50%; object-fit: cover; border: 5px solid var(--surface); background: var(--surface-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.pf2-av.is-live img { border-color: #ef4444; box-shadow: 0 0 0 4px var(--surface), 0 10px 30px rgba(239, 68, 68, .35); }
.pf2-live { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 2px 10px; border-radius: 6px; background: #ef4444; color: #fff !important; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-decoration: none !important; border: 3px solid var(--surface); animation: pf2pulse 1.8s infinite; }
@keyframes pf2pulse { 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .25); } }
.pf2-info { flex: 1 1 auto; min-width: 0; padding-top: 72px; }
#profile-body .pf2-name { margin: 0 0 6px !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.15; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text); }
.pf2-name a { color: var(--text) !important; }
.pf2-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; }
.pf2-badge.is-prem { background: rgba(245, 158, 11, .16); color: #d97706; }
.pf2-badge.is-creator { background: rgba(255, 45, 85, .12); color: var(--accent); }
.pf2-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.pf2-meta span + span::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.pf2-meta b { color: var(--text); font-weight: 800; }
#profile-body .pf2-bio { margin: 0 0 10px !important; font-size: 14.5px; line-height: 1.55; color: var(--text) !important; max-width: 820px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
#profile-body .pf2-bio.is-open { -webkit-line-clamp: unset; display: block; }
#profile-body .pf2-bio:empty { display: none; }
.pf2-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.pf2-facts span { display: inline-flex; align-items: center; gap: 5px; }
.pf2-facts i { font-size: 17px; color: var(--text-3); }
.pf2-soc { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text) !important; font-weight: 700; font-size: 12.5px; text-decoration: none !important; }
.pf2-soc:hover { border-color: var(--accent); }
.pf2-acts { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 74px; }
.pf2-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; box-sizing: border-box; }
.pf2-btn i { font-size: 19px; }
.pf2-btn:hover { filter: brightness(1.08); }
.pf2-btn.is-main { background: var(--text); color: var(--bg-2, #fff) !important; border-color: transparent; }
.pf2-btn.is-icon { width: 40px; padding: 0; justify-content: center; }
.pf2-acts .btn-subscribing { margin: 0 !important; float: none !important; }
.pf2-acts .btn-subscribing .btn { display: inline-flex !important; align-items: center; gap: 8px; height: 40px; padding: 0 18px !important; border-radius: 20px !important; font-weight: 800 !important; font-size: 14px !important; border: 0 !important; margin: 0 !important; }
.pf2-acts .btn-subscribing .btn.social-google-plus { background: var(--text) !important; color: var(--bg-2, #fff) !important; }
.pf2-acts .btn-subscribing .btn.btn-default { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.pf2-acts .btn-subscribing .separator { width: 1px; height: 16px; background: currentColor; opacity: .3; margin: 0; display: inline-block; }
.pf2-acts .btn-subscribing .kcounter { font-weight: 700; opacity: .85; background: none !important; padding: 0 !important; color: inherit !important; }
/* the tabs: pills in one row */
#profile-body.pf2-body #profile-nav.red-nav { margin: 0 !important; padding: 0 22px; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
#profile-body.pf2-body #profile-nav ul { border: 0 !important; gap: 6px !important; padding: 10px 0 !important; }
#profile-body.pf2-body #profile-nav ul li a { padding: 8px 15px !important; border-radius: 20px !important; border: 0 !important; background: transparent; font-weight: 700 !important; font-size: 14px !important; color: var(--text-2) !important; }
#profile-body.pf2-body #profile-nav ul li a:hover { background: var(--surface-2); color: var(--text) !important; }
#profile-body.pf2-body #profile-nav ul li.active a { background: var(--text) !important; color: var(--bg-2, #fff) !important; }
@media (max-width: 991px) {
    .pf2-main { flex-wrap: wrap; padding: 0 18px 18px; gap: 14px 18px; }
    .pf2-acts { width: 100%; justify-content: flex-start; padding-top: 0; }
}
@media (max-width: 640px) {
    .pf2-cover { height: 118px; }
    .pf2-main { flex-direction: column; align-items: center; text-align: center; margin-top: -52px; padding: 0 14px 16px; gap: 10px; }
    .pf2-info { padding-top: 0; }
    .pf2-av img { width: 104px; height: 104px; border-width: 4px; }
    #profile-body .pf2-name { font-size: 23px !important; justify-content: center; }
    .pf2-meta, .pf2-facts { justify-content: center; font-size: 13px; }
    #profile-body .pf2-bio { margin-left: auto !important; margin-right: auto !important; font-size: 14px; }
    .pf2-acts { justify-content: center; }
    .pf2-acts .btn-subscribing, .pf2-acts .pf2-btn:not(.is-icon) { flex: 1 1 auto; }
    .pf2-acts .btn-subscribing .btn { width: 100%; justify-content: center; }
    .pf2-btn { justify-content: center; }
    .pf2-cover-edit span { display: none; }
    .pf2-cover-edit { padding: 7px; }
    #profile-body.pf2-body #profile-nav.red-nav { padding: 0 10px; }
}
.pf2-name a.editable-click, .pf2-bio a.editable-click { text-decoration: none !important; border-bottom: 1px dashed var(--border) !important; color: inherit !important; }
.pf2-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px 34px; margin: 10px auto; max-width: 520px; }
.pf2-empty > i { font-size: 46px; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--accent); margin-bottom: 6px; }
.pf2-empty h3 { margin: 0 !important; font-size: 19px !important; font-weight: 800 !important; color: var(--text); }
.pf2-empty p { margin: 0 0 10px; color: var(--text-2); font-size: 14px; }
@media (max-width: 640px) {
    .pf2-acts { flex-wrap: nowrap; width: 100%; }
    .pf2-acts .pf2-btn.is-msg { flex: none; width: 40px; padding: 0; }
    .pf2-acts .pf2-btn.is-msg span { display: none; }
    .pf2-acts .pf2-btn.is-icon { flex: none; }
}
.pf2-acts .btn-subscribing .btn { box-sizing: border-box; max-width: 100%; }
@media (max-width: 640px) { .pf2-acts .btn-subscribing { flex: 1 1 0 !important; min-width: 0; } .pf2-acts .btn-subscribing .btn { width: 100%; overflow: hidden; } }

/* ==========================================================================
   PROFILE / CHANNEL PAGE 3 - a new page: a big cover with the name on it, the numbers in a strip, the tabs,
   the channel home in cards (newest video big, popular, Shorts, Premium, recent, collections) + "About" on the right
   ========================================================================== */
#profile-body.pf3 { margin: 0 !important; display: block; }
#profile-body.pf3 > .pf3-hero, #profile-body.pf3 .pf3-content { float: none; width: auto; }
.pf3-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); margin-bottom: 14px; }
.pf3-cover { position: relative; height: 260px; background: var(--grad) center / cover no-repeat; }
.pf3-hero:not(.has-cover) .pf3-cover { background: radial-gradient(110% 160% at 0% 0%, #ff6a3d 0%, #ff2d55 40%, #7c3aed 100%); }
.pf3-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .78) 100%); pointer-events: none; }
.pf3-cover-edit { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; background: rgba(0, 0, 0, .5); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; backdrop-filter: blur(6px); }
.pf3-cover-edit i { font-size: 18px; }
.pf3-bar { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 20px; padding: 0 28px; margin-top: -96px; }
.pf3-av { position: relative; flex: none; }
.pf3-av img { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid var(--surface); background: var(--surface-2); box-shadow: 0 12px 34px rgba(0, 0, 0, .35); }
.pf3-av.is-live img { border-color: #ef4444; }
.pf3-live { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 2px 10px; border-radius: 6px; background: #ef4444; color: #fff !important; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-decoration: none !important; border: 3px solid var(--surface); }
.pf3-id { flex: 1 1 auto; min-width: 0; padding-bottom: 54px; color: #fff; }
#profile-body .pf3-name { margin: 0 0 6px !important; font-size: 36px !important; font-weight: 800 !important; letter-spacing: -.035em; line-height: 1.1; color: #fff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf3-name a { color: #fff !important; text-decoration: none !important; }
.pf3-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #111; font-size: 14px; font-weight: 900; text-shadow: none; }
.pf3-handle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.pf3-badge { padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 800; text-shadow: none; }
.pf3-badge.is-prem { background: rgba(245, 158, 11, .92); color: #1a1205; }
.pf3-badge.is-creator { background: rgba(255, 255, 255, .92); color: #111; }
.pf3-since::before { content: "·"; margin-right: 8px; opacity: .7; }
.pf3-acts { flex: none; display: flex; align-items: center; gap: 8px; padding-bottom: 50px; }
.pf3-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 21px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; backdrop-filter: blur(8px); }
.pf3-btn i { font-size: 19px; }
.pf3-btn:hover { background: rgba(255, 255, 255, .26); }
.pf3-btn.is-main { background: #fff; color: #111 !important; border-color: transparent; }
.pf3-btn.is-icon { width: 42px; padding: 0; }
.pf3-acts .btn-subscribing { margin: 0 !important; float: none !important; }
.pf3-acts .btn-subscribing .btn { box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 8px; height: 42px; padding: 0 20px !important; border-radius: 21px !important; font-weight: 800 !important; font-size: 14px !important; border: 0 !important; margin: 0 !important; max-width: 100%; }
.pf3-acts .btn-subscribing .btn.social-google-plus { background: #fff !important; color: #111 !important; }
.pf3-acts .btn-subscribing .btn.btn-default { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
.pf3-acts .btn-subscribing .separator { width: 1px; height: 16px; background: currentColor; opacity: .3; margin: 0; display: inline-block; }
.pf3-acts .btn-subscribing .kcounter { font-weight: 700; opacity: .8; background: none !important; padding: 0 !important; color: inherit !important; }
.pf3-stats { display: flex; gap: 0; padding: 14px 28px 16px 198px; border-top: 1px solid var(--border); margin-top: -36px; position: relative; z-index: 1; background: var(--surface); }
.pf3-stats > div { display: flex; flex-direction: column; padding: 0 22px; border-left: 1px solid var(--border); }
.pf3-stats > div:first-child { padding-left: 0; border-left: 0; }
.pf3-stats b { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.pf3-stats small { font-size: 12.5px; color: var(--text-2); }
/* the tabs */
#profile-body.pf3 #profile-nav.red-nav { position: sticky; top: var(--hdr, 64px); z-index: 20; margin: 0 0 16px !important; padding: 6px; border: 1px solid var(--border) !important; border-radius: 16px; background: var(--glass, var(--surface)) !important; backdrop-filter: blur(10px); }
#profile-body.pf3 #profile-nav ul { border: 0 !important; gap: 4px !important; padding: 0 !important; }
#profile-body.pf3 #profile-nav ul li a { padding: 9px 16px !important; border-radius: 12px !important; border: 0 !important; background: transparent; font-weight: 700 !important; font-size: 14px !important; color: var(--text-2) !important; text-decoration: none !important; }
#profile-body.pf3 #profile-nav ul li a:hover { background: var(--surface-2); color: var(--text) !important; }
#profile-body.pf3 #profile-nav ul li.active a { background: var(--text) !important; color: var(--bg-2, #fff) !important; }
/* the page: the videos + "About" */
.pf3-layout { display: block; }
.pf3-layout.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pf3-main { min-width: 0; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.pf3-main > .full { display: flex; flex-direction: column; gap: 18px; }
.pf3-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--hdr, 64px) + 76px); }
.pf3-card { box-sizing: border-box; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pf3-about h3, .pf3-badges h3 { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 800 !important; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.pf3-badges h3 small { font-size: 12.5px; color: var(--text-3); font-weight: 700; }
.pf3-bio { font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.pf3-bio a.editable-click { color: var(--text) !important; text-decoration: none !important; border-bottom: 1px dashed var(--border); }
.pf3-muted { color: var(--text-3); }
.pf3-facts { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.pf3-facts li { display: flex; align-items: center; gap: 9px; }
.pf3-facts i { font-size: 19px; color: var(--text-3); }
.pf3-facts li.is-prem { color: #d97706; font-weight: 700; } .pf3-facts li.is-prem span { width: 19px; text-align: center; }
.pf3-links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pf3-link { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none !important; color: var(--text) !important; }
.pf3-link b { font-size: 13.5px; } .pf3-link small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf3-link:hover { border-color: var(--accent); }
.pf3-badge-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 26px; }
.pf3-badge-row span { width: 46px; height: 46px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.pf3-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent) !important; text-decoration: none !important; }
/* the channel home */
.pf3-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px; }
.pf3-feat-img { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.pf3-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.pf3-feat-img:hover img { transform: scale(1.04); }
.pf3-feat-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .15); opacity: 0; transition: opacity .2s; }
.pf3-feat-play i { width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; }
.pf3-feat-img:hover .pf3-feat-play { opacity: 1; }
.pf3-feat-img em, .pf3-v-img em { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .8); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
.pf3-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
#profile-body .pf3-feat-txt h2 { margin: 0 0 8px !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.25; letter-spacing: -.02em; }
.pf3-feat-txt h2 a { color: var(--text) !important; text-decoration: none !important; }
.pf3-feat-txt p { margin: 0 0 16px; color: var(--text-2); font-size: 14px; }
.pf3-feat-txt .pf3-btn.is-main, .pf3-empty .pf3-btn.is-main { background: var(--text); color: var(--bg-2, #fff) !important; backdrop-filter: none; }
.pf3-sec { min-width: 0; }
.pf3-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
#profile-body .pf3-sec-h h2 { margin: 0 !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; color: var(--text); }
.pf3-sec-h h2 i { font-size: 22px; color: var(--accent); }
.pf3-sec-h a { font-size: 13.5px; font-weight: 700; color: var(--accent) !important; text-decoration: none !important; white-space: nowrap; }
.pf3-star { color: #f59e0b; }
.pf3-prem-hint { margin: -4px 0 12px; font-size: 13px; color: var(--text-2); }
.pf3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 14px; }
.pf3-v, .pf3-pl { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--text) !important; min-width: 0; }
.pf3-v-img, .pf3-pl-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pf3-v-img img, .pf3-pl-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pf3-v:hover .pf3-v-img img, .pf3-pl:hover .pf3-pl-img img { transform: scale(1.05); }
.pf3-v-star { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: #f59e0b; color: #1a1205; font-style: normal; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.pf3-v-t { font-weight: 700; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf3-v-m { font-size: 12.5px; color: var(--text-3); }
.pf3-pl-img em { position: absolute; right: 0; top: 0; bottom: 0; width: 38%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(0, 0, 0, .7); color: #fff; font-style: normal; font-weight: 800; font-size: 15px; }
.pf3-pl-img em i { font-size: 24px; }
.pf3-shorts { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pf3-short { position: relative; flex: 0 0 170px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #111; scroll-snap-align: start; text-decoration: none !important; }
.pf3-short img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pf3-short:hover img { transform: scale(1.05); }
.pf3-short > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.pf3-short b { font-size: 13px; line-height: 1.3; } .pf3-short small { font-size: 11.5px; opacity: .8; }
.pf3-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px 34px; }
.pf3-empty > i { font-size: 46px; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--accent); margin-bottom: 6px; }
.pf3-empty h3 { margin: 0 !important; font-size: 19px !important; font-weight: 800 !important; color: var(--text); }
.pf3-empty p { margin: 0 0 10px; color: var(--text-2); font-size: 14px; }
/* the old tabs (videos, collections ...) keep their own lists, inside a card */
.pf3-layout:not(.has-aside) .pf3-main > .full { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; display: block; }
@media (max-width: 1100px) { .pf3-layout.has-aside { grid-template-columns: minmax(0, 1fr) 280px; } .pf3-stats { padding-left: 28px; margin-top: 0; } }
@media (max-width: 991px) {
    .pf3-layout.has-aside { display: flex; flex-direction: column; }
    .pf3-aside { position: static; width: 100%; }
    .pf3-feat { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pf3-bar { flex-wrap: wrap; }
    .pf3-acts { padding-bottom: 14px; width: 100%; }
    .pf3-id { padding-bottom: 14px; }
}
@media (max-width: 640px) {
    .pf3-hero { border-radius: 18px; }
    .pf3-cover { height: 150px; }
    .pf3-bar { flex-direction: column; align-items: center; text-align: center; margin-top: -58px; padding: 0 14px; gap: 8px; }
    .pf3-av img { width: 108px; height: 108px; border-width: 4px; }
    .pf3-id { color: var(--text); padding-bottom: 4px; }
    #profile-body .pf3-name { font-size: 24px !important; color: var(--text) !important; text-shadow: none; justify-content: center; }
    .pf3-name a { color: var(--text) !important; }
    .pf3-check { background: var(--text); color: var(--bg-2, #fff); width: 20px; height: 20px; font-size: 12px; }
    .pf3-handle { color: var(--text-2); text-shadow: none; justify-content: center; font-size: 13px; }
    .pf3-badge.is-creator { background: rgba(255, 45, 85, .12); color: var(--accent); }
    .pf3-acts { justify-content: center; padding-bottom: 14px; flex-wrap: nowrap; }
    .pf3-btn { background: var(--surface-2); border-color: var(--border); color: var(--text) !important; backdrop-filter: none; }
    .pf3-btn.is-main { background: var(--text); color: var(--bg-2, #fff) !important; }
    .pf3-acts .btn-subscribing { flex: 1 1 0; min-width: 0; }
    .pf3-acts .btn-subscribing .btn { width: 100%; justify-content: center; overflow: hidden; }
    .pf3-acts .btn-subscribing .btn.social-google-plus { background: var(--text) !important; color: var(--bg-2, #fff) !important; }
    .pf3-acts .btn-subscribing .btn.btn-default { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
    .pf3-acts .pf3-btn:not(.is-icon):not(.is-msg) { flex: 1 1 0; }
    .pf3-btn.is-msg { width: 42px; padding: 0; flex: none; } .pf3-btn.is-msg span { display: none; }
    .pf3-stats { padding: 12px 8px; justify-content: space-around; text-align: center; }
    .pf3-stats > div { padding: 0 6px; align-items: center; flex: 1 1 0; }
    .pf3-stats b { font-size: 17px; } .pf3-stats small { font-size: 11.5px; }
    #profile-body.pf3 #profile-nav.red-nav { top: var(--hdr, 56px); border-radius: 14px; }
    .pf3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .pf3-v-t { font-size: 13.5px; }
    .pf3-short { flex-basis: 132px; }
    #profile-body .pf3-sec-h h2 { font-size: 17px !important; }
    .pf3-card { padding: 14px; border-radius: 18px; }
    .pf3-cover-edit span { display: none; } .pf3-cover-edit { padding: 7px; }
}
@media (max-width: 400px) { .pf3-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .pf3-grid.is-row { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
    .pf3-grid.is-row::-webkit-scrollbar { display: none; }
    .pf3-grid.is-row > * { flex: 0 0 68%; scroll-snap-align: start; }
    .pf3-since::before { display: none; }
    .pf3-since { flex-basis: 100%; }
}
.pf3-acts > .pf3-btn.is-msg:only-child { width: auto; padding: 0 18px; } .pf3-acts > .pf3-btn.is-msg:only-child span { display: inline; }
/* the old theme styles (phpvibe.css) of the profile, undone on the new page */
#profile-body.pf3 .profile-content { margin: 0 !important; padding: 0 !important; }
#profile-body.pf3 .red-nav { width: auto !important; justify-content: flex-start !important; text-transform: none !important; }
#profile-body.pf3 .red-nav li { padding: 0 !important; border: 0 !important; margin: 0 !important; display: block !important; }
#profile-body.pf3 .red-nav a { border: 0 !important; }
#profile-body.pf3 h1, #profile-body.pf3 h2, #profile-body.pf3 h3 { text-transform: none; }
#profile-body.pf3 .pf3-hero img, #profile-body.pf3 .pf3-card img { max-width: none; }

/* ==========================================================================
   Update 237 - the video page: the player a bit bigger on a computer (the page 1840px instead of 1707px,
   the player up to 1400px instead of 1280px, the list on the right 400px). Phones / tablets: as before.
   Theater mode: the black band of the player goes from the menu to the right edge of the screen
   (the width is set by vibe-ui.js), the picture in the middle, as tall as the screen allows.
   ========================================================================== */
/* update 238 - a bit bigger again: the page up to 2000px with smaller side gaps, the list on the right 400-480px
   (22% of the screen), the player takes the rest (up to 1560px). Below 1494px: as before. */
/* update 241 - big / wide screens (2560, 3440x1440...): the page grows with the screen. The player is as big as the
   height of the screen allows (its 16:9 picture always fits the screen), the list on the right 400-520px, the page =
   the two together (never narrower than before: 1707px). Smaller screens: the same as before, nothing goes out. */
@media screen and (min-height: 630px) and (min-width: 1494px) {
    body.body-video { --vd-r: clamp(400px, 22vw, 520px); --vd-w: max(1707px, calc((100vh - 110px) * 16 / 9 + var(--vd-r) + 40px)); }
    .body-video #wrapper { max-width: var(--vd-w); padding-left: 12px !important; padding-right: 12px !important; }
    .p-video .video-under-right { width: var(--vd-r) !important; max-width: var(--vd-r); }
    .p-video .video-under, .p-video .video-holder .col-md-8 { width: calc(100% - var(--vd-r) - 14px); max-width: none; }
    html.vs-js body.body-video #wrapper { max-width: var(--vd-w); margin-left: max(calc(var(--sb-mini) + 8px), calc((100vw - var(--vd-w)) / 2)) !important; }
    html.vs-js.vs-open body.body-video #wrapper { margin-left: max(calc(var(--sb-open) + 8px), calc((100vw - var(--vd-w)) / 2)) !important; }
}
@media (min-width: 992px) {
    html.vd-theater .vd-player-col #video-content.vd-th-full { border-radius: 0 !important; background: #000 !important; }
    html.vd-theater .vd-player-col #video-content.vd-th-full .video-player { max-width: calc((100vh - 140px) * 16 / 9); border-radius: 0 !important; }
    html.vd-theater .video-holder { overflow: visible !important; border-radius: 0 !important; }
    /* update 240 - cinema mode: the band stays black, a white light comes out of the player to the left and the right */
    html.vd-theater .vd-player-col .vd-ambient.is-full { display: none !important; }
    html.vd-theater .vd-player-col #video-content.vd-th-full {
        background: radial-gradient(ellipse 62% 75% at 50% 50%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 45%, rgba(0, 0, 0, 0) 72%), #000 !important;
        overflow: hidden; /* the light stays inside the band */
    }
    html.vd-theater .vd-player-col #video-content.vd-th-full .video-player {
        position: relative; z-index: 1;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), -40px 0 90px -10px rgba(255, 255, 255, .22), 40px 0 90px -10px rgba(255, 255, 255, .22), 0 0 160px 30px rgba(255, 255, 255, .07) !important;
    }    /* what was under the player (reactions, premiere chat) now on top of the column under it */
    html.vd-theater .vd-th-under { margin: 0 0 6px; }
}
/* Update 237 - the recent searches under the search box */
.sug-box.is-hist { padding: 6px 6px 8px; max-height: min(70vh, 640px); overflow-y: auto; }
.sh-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; }
.sh-head b { font-size: 13px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.sh-clear { border: 0; background: none; color: var(--accent, #3ea6ff); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.sh-clear:hover { background: var(--surface-2); }
.sug-it.sh-it { gap: 8px; padding: 4px 6px 4px 10px; }
.sh-it .sh-q { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text) !important; text-decoration: none !important; padding: 6px 0; }
.sh-it .sh-q i { font-size: 20px; color: var(--text-3); flex: 0 0 auto; }
.sh-it .sh-q span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sh-it .sh-v { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 72px; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: var(--surface-2); color: var(--text-3) !important; box-shadow: 0 0 0 1px var(--border); }
.sh-it .sh-v img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; flex: none; aspect-ratio: auto; }
.sh-it .sh-v:hover { box-shadow: 0 0 0 2px var(--accent, #3ea6ff); }
.sh-it .sh-x { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; opacity: .55; }
.sh-it:hover .sh-x { opacity: 1; }
.sh-it .sh-x:hover { background: var(--surface-3); color: var(--text); }
@media (max-width: 700px) { .sh-it .sh-v { width: 60px; } .sh-it .sh-x { opacity: 1; } }

/* ==========================================================================
   Update 242 - the video cards like the big video sites:
   HOMEPAGE (grid): the picture with rounded corners, the duration in a dark pill (bottom right); under it the round
   picture of the channel on the LEFT, next to it the title (bold, up to 2 lines), the channel, "views • when";
   the ⋮ on the right of the title (always visible).
   VIDEO PAGE (right column): a big picture on the left (about 42%), the title bold on 2 lines, the channel,
   "views • when", the ⋮ top right; no small avatar. Phones: the same idea, smaller.
   ========================================================================== */
html body .vgrid:not(.hide) { column-gap: 18px !important; row-gap: 30px !important; }
html body .vgrid .video .video-thumb, html body .vgrid .video .video-thumb img { border-radius: 14px !important; }
html body .vgrid .video-thumb .timer { right: 8px; bottom: 8px; padding: 4px 7px !important; border-radius: 6px !important; font-size: 12.5px !important; font-weight: 700 !important; background: rgba(0, 0, 0, .72) !important; }
html body .vgrid .video .video-data { position: relative !important; display: block !important; padding: 12px 30px 0 0 !important; min-height: 46px; }
html body .vgrid .video .video-data:has(.vg-av) { padding-left: 46px !important; }
html body .vgrid .video .video-data ul.stats, html body .vgrid .video .video-data ul.stats > li, html body .vgrid .video .video-data .uploaderlink a { position: static !important; }
html body .vgrid .video .video-data .vg-av { position: absolute !important; left: 0; top: 12px; width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; }
html body .vgrid .video .video-data h4.video-title, html body .vgrid .video .video-data h4 { margin: 0 0 4px !important; padding: 0 !important; }
html body .vgrid .video .video-data h4 a {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;
    font-size: 15px !important; font-weight: 700 !important; line-height: 1.38 !important; letter-spacing: -.005em; color: var(--text) !important;
}
html body .vgrid .video ul.stats { display: block !important; }
html body .vgrid .video ul.stats > li { display: inline !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--text-2) !important; }
html body .vgrid .video ul.stats > li.uploaderlink { display: block !important; margin: 0 0 1px !important; }
html body .vgrid .video ul.stats > li.uploaderlink a { display: inline !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text-2) !important; }
html body .vgrid .video ul.stats > li.uploaderlink a:hover { color: var(--text) !important; }
html body .vgrid .video ul.stats > li.vs-views i { display: none !important; }
html body .vgrid .video ul.stats > li.vs-time:before { content: "\2022"; margin: 0 5px; color: var(--text-3); }
html body .vgrid .video ul.stats > li.vs-views + li.vs-time:before { display: inline !important; }
html body .vgrid .video .video-data > .vc-more { top: 8px !important; right: -6px !important; bottom: auto !important; opacity: 1 !important; color: var(--text-2); }
html body .vgrid .video .video-data > .vc-more:hover { color: var(--text); }

/* the right column of the video page */
@media (min-width: 992px) {
    html body .rur .video-related li, html body .rur .vside-list li { padding: 0 34px 0 0 !important; margin: 0 0 14px !important; background: transparent !important; border-radius: 0 !important; }
    html body .rur .video-related li:hover { background: transparent !important; }
    html body .rur .video-related li .inner { display: flex !important; gap: 14px !important; align-items: flex-start !important; }
    html body .rur .video-related li .thumb { flex: 0 0 43% !important; max-width: 43% !important; width: 43% !important; aspect-ratio: 16 / 9; height: auto !important; border-radius: 12px !important; overflow: hidden; margin: 0 !important; float: none !important; }
    html body .rur .video-related li .thumb a.clip-link, html body .rur .video-related li .thumb .clip { display: block !important; width: 100%; height: 100%; }
    html body .rur .video-related li .thumb img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 12px !important; }
    html body .rur .video-related .thumb .timer { right: 6px !important; bottom: 6px !important; padding: 3px 6px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(0, 0, 0, .72) !important; }
    html body .rur .video-related li .data { flex: 1; min-width: 0; padding: 2px 0 0 !important; margin: 0 !important; }
    html body .rur .video-related .data .title, html body .rur .video-related .data .title a {
        display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;
        font-size: 15px !important; font-weight: 700 !important; line-height: 1.38 !important; color: var(--text) !important; margin: 0 0 6px !important;
    }
    html body .rur .rel-meta { display: block !important; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; }
    html body .rur .rel-meta .rel-av, html body .rur .rel-meta canvas { display: none !important; }
    html body .rur .rel-meta .rel-by { display: flex !important; gap: 4px; font-size: 13px !important; font-weight: 500 !important; color: var(--text-2) !important; }
    html body .rur .rel-stats { display: block !important; font-size: 13px !important; color: var(--text-2) !important; margin: 1px 0 0 !important; }
    html body .rur .rel-stats i { display: none !important; }
    html body .rur .rel-stats em { margin: 0 3px !important; color: var(--text-2) !important; }
    html body .rur li.item-post .rel-stats { margin-right: 0 !important; max-width: 100% !important; }
    html body .rur li > .vc-more, html body .rur li .vc-more-side { position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; opacity: 1 !important; }
    /* "More from ..." (same look) */
    html body .rur .vside-list li a { display: flex !important; gap: 14px !important; align-items: flex-start; }
    html body .rur .vside-list .vl-thumb { flex: 0 0 43% !important; width: 43% !important; max-width: 43% !important; aspect-ratio: 16 / 9; border-radius: 12px !important; overflow: hidden; position: relative; }
    html body .rur .vside-list .vl-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; }
    html body .rur .vside-list .vl-time { right: 6px !important; bottom: 6px !important; padding: 3px 6px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(0, 0, 0, .72) !important; }
    html body .rur .vside-list .vl-title { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px !important; font-weight: 700 !important; line-height: 1.38 !important; color: var(--text) !important; margin: 2px 0 6px !important; }
    html body .rur .vside-list .vl-views { font-size: 13px !important; color: var(--text-2) !important; }
    html body .rur .vside-list .vl-views i { display: none !important; }
}
html body .vgrid .video ul.stats > li.vs-views:before { display: none !important; content: none !important; }
@media (min-width: 992px) {
    html body .rur .video-related ul, html body .rur .vside-list { padding: 0 !important; margin: 0 !important; list-style: none; }
    html body .rur .rel-stats { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    html body .rur .vside-list .vl-time { position: absolute !important; display: block !important; color: #fff !important; line-height: 1 !important; z-index: 2; }
    html body .rur .vside-list .vl-data { flex: 1; min-width: 0; display: block; }
    html body .rur .vside-list li { position: relative !important; }
}
@media (min-width: 992px) { html body .rur .related.video-related { padding-left: 0 !important; padding-right: 0 !important; } }

/* Update 243 - closer to the reference: smaller, lighter text; bigger pictures on big screens; the ⋮ of the right
   column always visible and whole (it was pushed half up by an old rule -> only 2 dots showed) */
html body .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 18vw, 540px), 1fr)) !important; }
@media (max-width: 700px) { html body .vgrid:not(.hide) { grid-template-columns: 1fr !important; } }
html body .vgrid .video .video-data { padding-top: 10px !important; }
html body .vgrid .video .video-data .vg-av { top: 10px; width: 32px !important; height: 32px !important; }
html body .vgrid .video .video-data:has(.vg-av) { padding-left: 44px !important; }
html body .vgrid .video .video-data h4 a { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
html body .vgrid .video ul.stats > li, html body .vgrid .video ul.stats > li.uploaderlink a { font-size: 12.5px !important; }
html body .rur .vc-more, html body .rur li .vc-more, html body .rur .vc-more.vc-more-side, html body .related-mobi .vc-more.vc-more-side {
    opacity: 1 !important; visibility: visible !important; transform: none !important; top: 0 !important; right: 0 !important; width: 32px !important; height: 32px !important; overflow: visible !important; }
html body .rur .vc-more.vc-more-side:hover, html body .rur .vc-more.vc-more-side:focus { transform: none !important; }
@media screen and (min-height: 630px) and (min-width: 1494px) {
    body.body-video { --vd-r: clamp(400px, 24vw, 620px); }
}
@media (min-width: 992px) {
    html body .rur .video-related li .thumb, html body .rur .vside-list .vl-thumb { flex: 0 0 46% !important; max-width: 46% !important; width: 46% !important; }
    html body .rur .video-related .data .title, html body .rur .video-related .data .title a, html body .rur .vside-list .vl-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
    html body .rur .rel-meta, html body .rur .rel-meta .rel-by, html body .rur .rel-stats, html body .rur .vside-list .vl-views { font-size: 12.5px !important; }
}

/* Update 244 - "More from ..." exactly like "Recommended" (the old Shorts style gave its picture a fixed 94px height:
   it came out stretched); the ⋮ of the right column comes with the page (no waiting for the mouse) and stays visible;
   the "Premium channel" row of the homepage: the same cards and the same width as the other rows */
.vc-li > .vc-more.vc-more-side, .rur .vc-li > .vc-more { opacity: 1 !important; visibility: visible !important; }
@media (min-width: 992px) {
    html body .rur .vside-list .vl-thumb { height: auto !important; flex: 0 0 46% !important; }
    html body .rur .vside-list li a { gap: 14px !important; }
    html body .rur .vside-list .vl-by { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 1px; }
    html body .rur .vside-list .vl-views em { font-style: normal; margin: 0 3px; }
    html body .rur .vside-block .vside-title, html body .rur .vside-rec { font-size: 16px !important; font-weight: 700 !important; }
}
/* (update 245: the Premium channel keeps its box with the background, only its cards are like the others) */
html body .home-user-block .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 18vw, 540px), 1fr)) !important; }
@media (max-width: 700px) { html body .home-user-block .vgrid:not(.hide) { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Update 246 - every card thumbnail is the same 16:9 box, aligned on the row. Pictures with black
   bars baked in (letterbox / pillarbox) are zoomed by vibe-ui.js (--lb, --lbx, --lby) so the real
   image fills the box like the others; the hover zoom keeps working on top of it.
   ========================================================================== */
html body .vgrid .video .video-thumb { aspect-ratio: 16 / 9; height: auto !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
html body .vgrid .video .video-thumb img { object-fit: cover !important; object-position: center !important; margin: 0 !important; }
html body .vgrid .video .video-thumb img.lb-fix,
html body .owl-carousel .video-thumb img.lb-fix,
html body .vside-list .vl-thumb img.lb-fix,
html body .video-related .thumb img.lb-fix { transform: translate(var(--lbx, 0), var(--lby, 0)) scale(var(--lb, 1)); transform-origin: center center; }
html body .vgrid .video:hover .video-thumb img.lb-fix { transform: translate(var(--lbx, 0), var(--lby, 0)) scale(calc(var(--lb, 1) * 1.035)); }
html body .vgrid .video { align-self: start; }

/* ==========================================================================
   Update 247 - the logos of the parts (Admin: each part has its own logo): "xVibe <em>Romania</em>"
   (the words after the brand lighter) and a picture uploaded instead of the drawn logo.
   ========================================================================== */
.logo .xlogo-tx b em { font-style: normal; font-weight: 700; letter-spacing: -.01em; opacity: .92; }
.logo .xlogo-pic img { display: block; max-height: 42px; width: auto; max-width: 220px; object-fit: contain; }
@media (max-width: 600px) { .logo .xlogo-pic img { max-height: 32px; max-width: 150px; } }

/* ==========================================================================
   Update 247 - the Shorts row of the homepage: fewer, bigger cards (they grow with the screen,
   always ONE full row, never wider than the page), the title + "370 mii vizualizări" written like
   the video cards (no small icons).
   ========================================================================== */
@media (min-width: 768px) {
    html body .shorts-shelf .shorts-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 12.2vw, 360px), 1fr)) !important;
        grid-template-rows: auto; grid-auto-rows: 0;
        column-gap: clamp(12px, .9vw, 22px) !important; row-gap: 0 !important;
        overflow: hidden !important; width: 100%; max-width: 100%; box-sizing: border-box;
    }
    html body .shorts-shelf .short-card { width: auto !important; max-width: none !important; min-width: 0; }
}
/* phones: 2 x 2 cards that fit the screen exactly (no card cut at the edge, nothing out of the page) */
@media (max-width: 767px) {
    html body .shorts-shelf .shorts-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto; grid-auto-rows: 0;
        gap: 10px !important; row-gap: 12px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; width: 100%; max-width: 100%; }
    html body .shorts-shelf .shorts-row > .short-card:nth-child(n+5) { display: none !important; }
    html body .shorts-shelf .short-card { width: auto !important; max-width: none !important; min-width: 0; flex: none; }
}
/* big phones / small tablets in portrait: 3 side by side, one row */
@media (min-width: 520px) and (max-width: 767px) {
    html body .shorts-shelf .shorts-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto; }
    html body .shorts-shelf .shorts-row > .short-card:nth-child(n+4) { display: none !important; }
}
html body .shorts-shelf .short-card .short-thumb { border-radius: clamp(12px, .8vw, 18px) !important; }
html body .short-card.sc-ov .sc-info { gap: 4px; padding: 48px clamp(10px, .7vw, 16px) clamp(10px, .7vw, 15px); background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); }
html body .short-card.sc-ov .sc-title { font-size: clamp(14px, calc(9px + .38vw), 19px); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
html body .short-card.sc-ov .sc-views { display: block; font-size: clamp(12px, calc(8px + .3vw), 16px); font-weight: 500; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .shorts-shelf .short-card .short-badge { font-size: clamp(11px, calc(7px + .25vw), 14px) !important; }
/* the cards without the overlay (setting off): the same font as the video cards */
html body .shorts-shelf .short-card .short-title { font-size: clamp(14px, calc(9px + .38vw), 19px); font-weight: 600; line-height: 1.3; margin-top: 8px; }
html body .shorts-shelf .short-card .short-views { font-size: clamp(12.5px, calc(8px + .3vw), 16px); color: var(--text-2); }

/* ==========================================================================
   Update 248 - the Shorts of the homepage a little smaller (one more per row, on every screen)
   ========================================================================== */
@media (min-width: 768px) {
    html body .shorts-shelf .shorts-row { grid-template-columns: repeat(auto-fill, minmax(clamp(185px, 10.6vw, 320px), 1fr)) !important; }
}
html body .short-card.sc-ov .sc-title { font-size: clamp(13.5px, calc(8.5px + .34vw), 18px); }
html body .short-card.sc-ov .sc-views { font-size: clamp(12px, calc(7.5px + .28vw), 15px); }
@media (max-width: 519px) { html body .shorts-shelf .shorts-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 520px) and (max-width: 767px) {
    html body .shorts-shelf .shorts-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    html body .shorts-shelf .shorts-row > .short-card:nth-child(4) { display: block !important; }
}

/* ==========================================================================
   Update 252 - the Shorts of the homepage and their text a bit smaller again
   ========================================================================== */
@media (min-width: 768px) {
    html body .shorts-shelf .shorts-row { grid-template-columns: repeat(auto-fill, minmax(clamp(165px, 9.4vw, 285px), 1fr)) !important; }
}
html body .short-card.sc-ov .sc-info { padding: 40px clamp(9px, .6vw, 14px) clamp(9px, .6vw, 13px); gap: 3px; }
html body .short-card.sc-ov .sc-title { font-size: clamp(12.5px, calc(8px + .28vw), 16px); line-height: 1.28; }
html body .short-card.sc-ov .sc-views { font-size: clamp(11px, calc(7px + .23vw), 13.5px); }
html body .shorts-shelf .short-card .short-badge { font-size: clamp(10px, calc(6.5px + .2vw), 12.5px) !important; }
html body .shorts-shelf .short-card .short-title { font-size: clamp(12.5px, calc(8px + .28vw), 16px); }
html body .shorts-shelf .short-card .short-views { font-size: clamp(11.5px, calc(7px + .23vw), 14px); }

/* ==========================================================================
   Update 256 - phones / small tablets: the Shorts of the homepage on ONE row that scrolls left / right
   (swipe), instead of 2 x 2. The row scrolls inside the page (the page itself never moves sideways);
   a piece of the next card shows that there is more. Snaps on each card.
   ========================================================================== */
@media (max-width: 767px) {
    html body .shorts-shelf .shorts-row {
        display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
        gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        scrollbar-width: none; padding: 0 0 4px !important; margin: 0 !important; width: 100%; max-width: 100%;
    }
    html body .shorts-shelf .shorts-row::-webkit-scrollbar { display: none; }
    html body .shorts-shelf .shorts-row > .short-card,
    html body .shorts-shelf .shorts-row > .short-card:nth-child(n+4),
    html body .shorts-shelf .shorts-row > .short-card:nth-child(n+5) {
        display: block !important; flex: 0 0 41% !important; width: 41% !important; max-width: 200px !important; min-width: 0;
        scroll-snap-align: start;
    }
}
@media (min-width: 520px) and (max-width: 767px) {
    html body .shorts-shelf .shorts-row > .short-card,
    html body .shorts-shelf .shorts-row > .short-card:nth-child(n+4) { flex-basis: 28% !important; width: 28% !important; }
}