/**
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *  YouTube theme. Loaded after the site's own app.css, so everything the
 *  site draws on its own (forms, alerts, the upload page) takes on this look
 *  through the shared variables, and the theme's own parts have their own
 *  yt- classes.
 */

/* ============================================================ colours */

html[data-mode] {
    --yt-accent: var(--theme-accent, #ff0000);
    --yt-bg: #ffffff;
    --yt-bg2: #f2f2f2;
    --yt-bg3: #e5e5e5;
    --yt-text: #0f0f0f;
    --yt-text2: #606060;
    --yt-line: rgba(0, 0, 0, .1);
    --yt-hover: rgba(0, 0, 0, .05);
    --yt-blue: #065fd4;
    --yt-blue-soft: #def1ff;
    --yt-pop: #ffffff;
    --yt-field: #ffffff;
    --yt-field-line: #d3d3d3;
    --yt-field-btn: #f8f8f8;
    --yt-studio-bg: #f9f9f9;
    --yt-shadow: 0 4px 32px 0 rgba(0, 0, 0, .10);

    --yt-top: 56px;
    --yt-guide: 240px;
    --yt-mini: 72px;

    /* what the site's own stylesheet reads */
    --bg: var(--yt-bg);
    --bg-soft: var(--yt-bg2);
    --card: var(--yt-bg);
    --ink: var(--yt-text);
    --muted: var(--yt-text2);
    --line: var(--yt-line);
    --brand: var(--yt-blue);
    --radius: 12px;
    --topbar: var(--yt-top);
    --side: var(--yt-guide);
    --shadow: none;
}

html[data-mode="dark"] {
    --yt-bg: #0f0f0f;
    --yt-bg2: #272727;
    --yt-bg3: #3f3f3f;
    --yt-text: #f1f1f1;
    --yt-text2: #aaaaaa;
    --yt-line: rgba(255, 255, 255, .2);
    --yt-hover: rgba(255, 255, 255, .1);
    --yt-blue: #3ea6ff;
    --yt-blue-soft: #263850;
    --yt-pop: #282828;
    --yt-field: #121212;
    --yt-field-line: #303030;
    --yt-field-btn: #222222;
    --yt-studio-bg: #1f1f1f;
    --yt-shadow: none;
}

html[data-mode] body {
    background: var(--yt-bg);
    color: var(--yt-text);
    font-family: "Roboto", "Arial", "Hind Siliguri", sans-serif;
    font-size: 14px;
    line-height: 20px;
}

body a:hover { color: inherit; }
.yt-ico { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }
.yt-muted { color: var(--yt-text2); }

/* ========================================================= buttons */

.yt-icon-btn {
    width: 40px; height: 40px; flex: none; padding: 8px; border: 0; border-radius: 50%;
    background: transparent; color: var(--yt-text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.yt-icon-btn:hover { background: var(--yt-hover); color: var(--yt-text); }
.yt-icon-btn:active { background: var(--yt-bg3); }
.yt-icon-btn.sm { width: 36px; height: 36px; padding: 6px; }

.yt-pill, html[data-mode] .chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 16px; border: 0; border-radius: 18px;
    background: var(--yt-bg2); color: var(--yt-text); cursor: pointer;
    font: 500 14px/36px "Roboto", "Arial", sans-serif; white-space: nowrap; text-decoration: none;
}
.yt-pill:hover, html[data-mode] .chip:hover { background: var(--yt-bg3); color: var(--yt-text); border-color: transparent; }
.yt-pill .yt-ico { margin-left: -6px; }
html[data-mode] .chip svg { width: 20px; height: 20px; }
html[data-mode] .chip.on, .yt-pill.on { background: var(--yt-bg2); color: var(--yt-text); }
.yt-pill-round { width: 36px; padding: 0; }
.yt-pill-round .yt-ico { margin: 0; }
.yt-pill-blue, .yt-pill-blue:hover { background: var(--yt-blue); color: #fff; }
html[data-mode="dark"] .yt-pill-blue { color: #0f0f0f; }
.yt-pill-blue:hover { filter: brightness(1.08); }
.yt-pill-plain { background: transparent; }

html[data-mode] .btn {
    height: 36px; padding: 0 16px; border-radius: 18px; background: var(--yt-blue); color: #fff;
    font: 500 14px/36px "Roboto", "Arial", sans-serif; display: inline-flex; align-items: center; justify-content: center;
}
html[data-mode="dark"] .btn { color: #0f0f0f; }
html[data-mode] .btn.ghost { background: var(--yt-bg2); color: var(--yt-text); border: 0; }
html[data-mode] .btn.block { display: flex; width: 100%; }

.yt-sub-btn {
    height: 36px; padding: 0 16px; border: 0; border-radius: 18px; cursor: pointer;
    background: var(--yt-text); color: var(--yt-bg); font: 500 14px/36px "Roboto", "Arial", sans-serif;
    margin-left: 12px; white-space: nowrap;
}
.yt-sub-btn:hover { opacity: .88; }
.yt-sub-btn.on { background: var(--yt-bg2); color: var(--yt-text); }
.yt-sub-btn.on:hover { background: var(--yt-bg3); opacity: 1; }
.yt-bell-btn { background: var(--yt-bg2); width: 36px; height: 36px; padding: 6px; margin-left: -4px; }
.yt-bell-btn:hover { background: var(--yt-bg3); }
.yt-bell-btn[hidden] { display: none; }
/* the bell carries both pictures: ringing when on, struck through when off */
.yt-bell-btn .bell-on, .yt-bell-btn.on .bell-off { display: none; }
.yt-bell-btn.on .bell-on { display: block; }
.yt-bell-btn.on { background: var(--yt-text); color: var(--yt-bg); }
.yt-bell-btn.on:hover { background: var(--yt-text); opacity: .86; }
.yt-bell-btn.ring .bell-on { animation: yt-bell-ring .7s ease-in-out; transform-origin: 50% 12%; }
@keyframes yt-bell-ring {
    0% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); }
    45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(0); }
}

.yt-link-btn {
    background: none; border: 0; cursor: pointer; color: var(--yt-text);
    font: 500 12px/32px "Roboto", "Arial", sans-serif; height: 32px; padding: 0 12px; margin-left: -12px; border-radius: 16px;
}
.yt-link-btn:hover { background: var(--yt-bg2); }

/* ============================================================ topbar */

.yt-top {
    position: fixed; inset: 0 0 auto 0; height: var(--yt-top); z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 16px; background: var(--yt-bg);
}
.yt-top.is-studio { box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 -1px 0 rgba(0, 0, 0, .06) inset; }
html[data-mode="dark"] .yt-top.is-studio { box-shadow: 0 1px 0 var(--yt-line); }

.yt-start { display: flex; align-items: center; gap: 16px; flex: none; }
.yt-logo { display: flex; align-items: center; gap: 4px; height: 56px; padding-right: 14px; color: var(--yt-text); text-decoration: none; }
.yt-logo:hover { color: var(--yt-text); }
.yt-logo-mark { width: 30px; height: 21px; flex: none; }
.yt-logo-word { font: 700 19px/1 "Roboto", "Arial", sans-serif; letter-spacing: -1px; white-space: nowrap; }
.yt-logo-img { height: 24px; width: auto; }
.yt-logo-studio { font: 400 19px/1 "Roboto", "Arial", sans-serif; margin-left: 4px; letter-spacing: -.4px; }

.yt-center { flex: 0 1 732px; display: flex; align-items: center; margin: 0 40px; min-width: 0; }
.yt-search { flex: 1; display: flex; height: 40px; min-width: 0; margin-left: 32px; }
.yt-search.focus { margin-left: 0; }
.yt-search-box {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
    padding: 0 4px 0 16px; border: 1px solid var(--yt-field-line); border-right: 0;
    border-radius: 40px 0 0 40px; background: var(--yt-field);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.yt-search.focus .yt-search-box { border-color: #1c62b9; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.yt-search-lead { display: none; width: 20px; height: 20px; }
.yt-search.focus .yt-search-lead { display: block; }
.yt-search input {
    flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--yt-text);
    font: 400 16px/24px "Roboto", "Arial", sans-serif; padding: 0;
}
.yt-search input::placeholder { color: #888; }
.yt-search input::-webkit-search-cancel-button { display: none; }
.yt-search-clear {
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--yt-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.yt-search-clear:hover { background: var(--yt-hover); }
.yt-search-clear[hidden] { display: none; }
.yt-search-btn {
    width: 64px; height: 40px; flex: none; border: 1px solid var(--yt-field-line); border-radius: 0 40px 40px 0;
    background: var(--yt-field-btn); color: var(--yt-text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.yt-search-btn:hover { background: var(--yt-bg2); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.yt-mic { margin-left: 12px; background: var(--yt-bg2); }
.yt-mic:hover { background: var(--yt-bg3); }
.yt-mic[hidden] { display: none; }
.yt-mic.listening { background: #cc0000; color: #fff; animation: yt-pulse 1.2s infinite; }
@keyframes yt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(204, 0, 0, .5); } 50% { box-shadow: 0 0 0 10px rgba(204, 0, 0, 0); } }
.yt-search-back, .yt-search-open { display: none; }

.yt-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; min-width: 150px; }
.yt-create {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 10px; border-radius: 18px;
    background: var(--yt-bg2); color: var(--yt-text); font: 500 14px/36px "Roboto", "Arial", sans-serif; text-decoration: none;
}
.yt-create:hover { background: var(--yt-bg3); color: var(--yt-text); }
.yt-create { border: 0; cursor: pointer; }
.yt-create-menu .yt-pop { right: 0; top: 44px; min-width: 240px; }
.yt-pop.create-list small { display: block; font: 400 12px/16px "Roboto", "Arial", sans-serif; color: var(--yt-text2); }
.yt-pop svg.ico { width: 24px; height: 24px; fill: currentColor; flex: none; }
html[data-mode] .aio-loadbar { top: 0; }
html[data-mode] .myblog-row { background: var(--yt-bg2); border: 0; }

.yt-top .nbadge {
    top: 4px; right: 2px; background: #cc0000; border: 0; height: 16px; min-width: 16px;
    font: 400 11px/16px "Roboto", "Arial", sans-serif; border-radius: 8px; padding: 0 4px;
}
.yt-account { margin-left: 8px; }
.yt-account .avatar-btn { display: flex; }
.yt-account .avatar-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.yt-account .yt-icon-btn.avatar-btn { margin-right: -8px; }

.yt-signin {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px 0 11px;
    border: 1px solid var(--yt-line); border-radius: 18px; color: var(--yt-blue);
    font: 500 14px/34px "Roboto", "Arial", sans-serif; text-decoration: none; white-space: nowrap;
}
.yt-signin:hover { background: var(--yt-blue-soft); border-color: transparent; color: var(--yt-blue); }

/* ============================================================= popups */

.yt-pop, html[data-mode] .menu-list {
    background: var(--yt-pop); border: 0; border-radius: 12px; box-shadow: var(--yt-shadow);
    padding: 8px 0; min-width: 220px; z-index: 1100;
}
html[data-mode="dark"] .yt-pop, html[data-mode="dark"] .menu-list { box-shadow: 0 4px 32px rgba(0, 0, 0, .6); }
.yt-pop a, .yt-pop button, html[data-mode] .menu-list > a {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 40px; padding: 0 36px 0 16px;
    border: 0; border-radius: 0; background: none; color: var(--yt-text); text-align: left; cursor: pointer;
    font: 400 14px/20px "Roboto", "Arial", sans-serif; text-decoration: none;
}
.yt-pop a:hover, .yt-pop button:hover, html[data-mode] .menu-list > a:hover { background: var(--yt-hover); color: var(--yt-text); }
.yt-pop em { margin-left: auto; font-style: normal; color: var(--yt-text2); padding-left: 16px; }

.yt-account .yt-pop { width: 300px; right: 0; top: 44px; max-height: calc(100vh - 70px); overflow-y: auto; }
.yt-acc-head { display: flex; gap: 16px; padding: 16px 16px 12px; }
.yt-acc-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.yt-acc-head b { display: block; font: 400 16px/22px "Roboto", "Arial", sans-serif; }
.yt-acc-head span { display: block; color: var(--yt-text); }
.yt-pop .yt-acc-head a { display: inline; padding: 0; min-height: 0; color: var(--yt-blue); margin-top: 8px; }
.yt-pop .yt-acc-head a:hover { background: none; }
.yt-acc-sec { border-top: 1px solid var(--yt-line); padding: 8px 0; }
.yt-acc-sec:empty { display: none; }
.yt-acc-plugins > a { padding-left: 56px; }

.yt-card-menu .yt-pop { right: 0; top: 36px; min-width: 240px; }
.menu.up .yt-pop { top: auto; bottom: 36px; }

/* notifications */
.yt-top .nbox { width: 480px; top: 44px; right: -40px; padding: 0; }
.yt-top .nbox-head {
    display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px;
    font: 400 16px/22px "Roboto", "Arial", sans-serif; border-bottom: 1px solid var(--yt-line);
}
.yt-top .nbox-head .yt-icon-btn { padding: 6px; min-height: 0; width: 36px; }
.yt-top .nbox-list { max-height: calc(100vh - 200px); padding: 8px 0; }
.yt-top .nitem { padding: 16px 16px 16px 24px; min-height: 0; align-items: flex-start; gap: 16px; }
.yt-top .nitem .pfp { width: 48px; height: 48px; flex-basis: 48px; }
.yt-top .nitem .ntext { font-size: 14px; line-height: 20px; }
.yt-top .nitem .ago { color: var(--yt-text2); font-size: 12px; }
.yt-top .nitem .nthumb { width: 86px; flex-basis: 86px; border-radius: 4px; }
.yt-top .nitem.unseen::before { left: 8px; width: 4px; height: 4px; background: var(--yt-blue); }
.yt-top .nbox-all { justify-content: center; color: var(--yt-blue); font-weight: 500; border-top: 1px solid var(--yt-line); padding: 0; }

.yt-toast {
    position: fixed; left: 24px; bottom: 24px; z-index: 3000; max-width: calc(100vw - 48px);
    background: #0f0f0f; color: #fff; border-radius: 8px; padding: 14px 16px; font-size: 14px;
    transform: translateY(160%); transition: transform .25s ease; pointer-events: none;
}
html[data-mode="dark"] .yt-toast { background: #f1f1f1; color: #0f0f0f; }
.yt-toast.show { transform: none; }

/* ============================================================== guide */

.yt-guide {
    position: fixed; top: var(--yt-top); bottom: 0; left: 0; width: var(--yt-guide); z-index: 900;
    overflow-y: hidden; overflow-x: hidden; padding: 12px; background: var(--yt-bg);
    scrollbar-width: thin;
}
.yt-guide:hover { overflow-y: auto; }
.yt-guide-drawer-head { display: none; align-items: center; gap: 16px; height: 56px; margin: 0 -12px 0; padding: 0 16px; }

.yt-gi {
    display: flex; align-items: center; gap: 24px; height: 40px; padding: 0 12px; border-radius: 10px;
    color: var(--yt-text); font: 400 14px/20px "Roboto", "Arial", sans-serif; text-decoration: none;
    width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
}
.yt-gi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.yt-gi:hover { background: var(--yt-hover); color: var(--yt-text); }
.yt-gi.on { background: var(--yt-hover); font-weight: 500; }
html[data-mode="dark"] .yt-gi.on { background: var(--yt-bg2); }
.yt-gi-ch img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.yt-new-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--yt-blue); flex: none; }
.yt-more-hidden { display: none; }
.yt-guide-subs.show-all .yt-more-hidden { display: flex; }

.yt-guide-sep { border-top: 1px solid var(--yt-line); margin: 12px 0; }
.yt-guide-title {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 6px 12px 1px;
    font: 500 16px/22px "Roboto", "Arial", sans-serif; color: var(--yt-text); text-decoration: none; border-radius: 10px;
}
a.yt-guide-title:hover { background: var(--yt-hover); color: var(--yt-text); }
.yt-guide-title .yt-ico { width: 16px; height: 16px; }
.yt-guide-signin { padding: 4px 12px 8px 20px; }
.yt-guide-signin p { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
.yt-guide-foot { padding: 16px 12px; }
.yt-guide-foot .links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 12px; }
.yt-guide-foot .links a { color: var(--yt-text2); font: 500 13px/18px "Roboto", "Arial", sans-serif; text-decoration: none; }
.yt-guide-foot .links a:hover { color: var(--yt-text); }
.yt-guide-foot .credit { color: #909090; font-size: 12px; line-height: 18px; }
.yt-guide-foot .credit a { color: inherit; }

.yt-mini-guide {
    position: fixed; top: var(--yt-top); left: 0; bottom: 0; width: var(--yt-mini); z-index: 890;
    display: none; flex-direction: column; padding: 4px; background: var(--yt-bg);
}
.yt-mini-guide .yt-gi {
    flex-direction: column; justify-content: center; gap: 6px; height: 74px; padding: 16px 0 14px;
    font-size: 10px; line-height: 14px; text-align: center;
}
.yt-mini-guide .yt-gi span { flex: none; width: 100%; }
.yt-mini-guide .yt-gi.on { background: none; font-weight: 400; }
.yt-mini-guide .yt-gi:hover { background: var(--yt-hover); }

.yt-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1990; }

/* the page beside the guide */
html[data-mode] .page {
    margin-left: var(--yt-guide);
    padding: calc(var(--yt-top) + 24px) 24px 48px;
    min-height: 100vh;
}
body.no-sidebar .page { margin-left: 0; }

/* the guide folded to its mini form, on wide screens */
html[data-guide="mini"] .yt-guide:not(.is-drawer):not(.yt-studio-nav) { display: none; }
html[data-guide="mini"] .yt-mini-guide { display: flex; }
html[data-guide="mini"] body:not(.no-sidebar):not(.area-studio) .page { margin-left: var(--yt-mini); }

/* a guide that slides over the page: the watch page, and narrow screens */
.yt-guide.is-drawer {
    top: 0; z-index: 2000; transform: translateX(-100%); transition: transform .2s cubic-bezier(.4, 0, .2, 1);
    padding-top: 0; display: block;
}
.yt-guide.is-drawer .yt-guide-drawer-head { display: flex; }
body.yt-drawer-open .yt-guide.is-drawer { transform: none; }
body.yt-drawer-open .yt-scrim { display: block; }

@media (max-width: 1312px) {
    html[data-guide] .yt-guide:not(.yt-studio-nav) {
        display: block; top: 0; z-index: 2000; transform: translateX(-100%); padding-top: 0;
        transition: transform .2s cubic-bezier(.4, 0, .2, 1);
    }
    html[data-guide] .yt-guide:not(.yt-studio-nav) .yt-guide-drawer-head { display: flex; }
    body.yt-drawer-open .yt-guide { transform: none !important; }
    body.yt-drawer-open .yt-scrim { display: block; }
    html[data-guide] .yt-mini-guide { display: flex; }
    html[data-guide] body:not(.no-sidebar):not(.area-studio) .page { margin-left: var(--yt-mini); }
}

/* ================================================================ chips */

.yt-chipbar {
    position: sticky; top: var(--yt-top); z-index: 800; background: var(--yt-bg);
    margin: -24px -24px 0; padding: 12px 24px; display: flex; align-items: center;
}
.yt-chips { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; flex: 1; min-width: 0; }
.yt-chips::-webkit-scrollbar { display: none; }
.yt-chip {
    flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
    background: var(--yt-bg2); color: var(--yt-text); font: 500 14px/20px "Roboto", "Arial", sans-serif;
    white-space: nowrap; text-decoration: none; cursor: pointer;
}
.yt-chip:hover { background: var(--yt-bg3); color: var(--yt-text); }
.yt-chip.on, .yt-chip.on:hover { background: var(--yt-text); color: var(--yt-bg); }
.yt-chip-arrow {
    position: absolute; top: 8px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--yt-bg); color: var(--yt-text); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.yt-chip-arrow:hover { background: var(--yt-bg2); }
.yt-chip-arrow.left { left: 24px; box-shadow: 20px 0 20px 8px var(--yt-bg); }
.yt-chip-arrow.right { right: 24px; box-shadow: -20px 0 20px 8px var(--yt-bg); }
.yt-chip-arrow[hidden] { display: none; }

/* ============================================================== cards */

.yt-grid, html[data-mode] .vgrid {
    display: grid; gap: 40px 16px; margin-top: 24px;
    grid-template-columns: repeat(auto-fill, minmax(var(--yt-grid-min, 320px), 1fr));
}
.yt-grid-row > .yt-over { display: none; }

.yt-card { position: relative; min-width: 0; }
.yt-thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    background: var(--yt-bg2);
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: none; }
.yt-card:hover .yt-thumb img, .vcard:hover .vthumb img { transform: none; }
.yt-time {
    position: absolute; right: 8px; bottom: 8px; padding: 1px 4px; border-radius: 4px;
    background: rgba(0, 0, 0, .6); color: #fff; font: 500 12px/18px "Roboto", "Arial", sans-serif; letter-spacing: .3px;
}
.yt-watched { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .5); }
.yt-watched i { display: block; height: 100%; background: var(--yt-accent); }

.yt-card-body { display: flex; gap: 12px; padding: 12px 24px 0 0; position: relative; }
.yt-card-pfp { flex: none; }
.yt-card-pfp img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* a picture that has not loaded yet (or never will) still shows as a grey circle */
.yt-card-pfp img, .yt-gi-ch img, .yt-owner-pfp, .yt-c-pfp, .yt-res-ch img, .yt-chead-pfp,
.yt-account .avatar-btn img, .yt-acc-head img, .yt-studio-me img, .nitem .pfp { background: var(--yt-bg2); }
.yt-card-text { flex: 1; min-width: 0; }
.yt-card-text h3, .yt-compact h3, .yt-res h3 { margin: 0; font: inherit; }
.yt-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--yt-text); font: 500 16px/22px "Roboto", "Arial", sans-serif; text-decoration: none; margin-bottom: 4px;
}
.yt-card-title:hover { color: var(--yt-text); }
.yt-card-ch, .yt-card-meta {
    display: flex; align-items: center; color: var(--yt-text2); font: 400 14px/20px "Roboto", "Arial", sans-serif;
    text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.yt-card-ch:hover { color: var(--yt-text); }
.yt-card-meta i { font-style: normal; margin: 0 4px; }
.yt-verified { width: 14px; height: 14px; margin-left: 4px; fill: var(--yt-text2); flex: none; display: inline-block; vertical-align: -2px; }

.yt-card-menu { position: absolute; right: -12px; top: 6px; opacity: 0; }
.yt-card:hover .yt-card-menu, .yt-compact:hover .yt-card-menu, .yt-res:hover .yt-card-menu,
.yt-card-menu.open { opacity: 1; }
@media (hover: none) { .yt-card-menu { opacity: 1; } }

.yt-compact { position: relative; display: flex; gap: 8px; margin-bottom: 8px; padding-right: 24px; min-width: 0; }
.yt-compact[hidden] { display: none; }
.yt-compact .yt-thumb { width: 168px; flex: 0 0 168px; border-radius: 8px; }
.yt-compact-text { flex: 1; min-width: 0; }
.yt-compact .yt-card-title { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
.yt-compact .yt-card-ch, .yt-compact .yt-card-meta { font-size: 12px; line-height: 18px; }
.yt-compact .yt-card-menu { right: -8px; top: -4px; }

/* ============================================================ shelves */

.yt-shelf { margin-bottom: 8px; }
.yt-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 0; }
.yt-shelf-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 20px/28px "Roboto", "Arial", sans-serif; }
.yt-shelf-head h2 .yt-ico { color: var(--yt-accent); }
.yt-shelf + .yt-shelf-head, .yt-shelf + .yt-shelf { border-top: 1px solid var(--yt-line); padding-top: 8px; margin-top: 32px; }

.yt-empty { text-align: center; padding: 64px 16px; color: var(--yt-text2); }
.yt-empty .yt-ico { width: 120px; height: 120px; margin: 0 auto 16px; opacity: .35; }
.yt-empty p { font-size: 16px; line-height: 22px; margin: 0 0 16px; }
.yt-empty.sm { padding: 24px 8px; }
html[data-mode] .empty { border: 0; color: var(--yt-text2); font-size: 16px; }

/* ========================================================= watch page */

body.page-watch .page { padding: calc(var(--yt-top) + 24px) 24px 48px; }
/* A grid with the second column's width written down: the player has its
   final width from the first paint. As a flex row the first column took the
   whole page until the browser had read as far as the second one - the player
   was drawn huge and then shrank (1.11.0). */
.yt-watch { display: grid; grid-template-columns: minmax(0, 1fr) 402px; gap: 24px; max-width: 1754px; margin: 0 auto; align-items: start; }
.yt-primary { min-width: 0; }
.yt-secondary { min-width: 0; }

.yt-player, html[data-mode] .player { border-radius: 12px; overflow: hidden; background: #000; position: relative; }

/* theatre mode: the player across the whole width, the rest underneath */
body.aiop-cinema .yt-watch { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.aiop-cinema .yt-primary { max-width: none; }
body.aiop-cinema .yt-player, body.aiop-cinema .player { border-radius: 0; height: calc(100vh - var(--yt-top) - 24px); max-height: calc(100vh - var(--yt-top) - 24px); aspect-ratio: auto; }
body.aiop-cinema .yt-secondary { width: auto; }
body.aiop-cinema .yt-upnext { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 16px; }
body.aiop-cinema.page-watch .page { padding-left: 0; padding-right: 0; }
body.aiop-cinema .yt-primary > :not(.yt-player):not(.player), body.aiop-cinema .yt-secondary { margin-left: 24px; margin-right: 24px; }

/* the owner's notice and the playlist, in this look */
html[data-mode] .vnotice { border-radius: 12px; }
html[data-mode] .vqueue { background: var(--yt-bg2); border: 0; }
html[data-mode] .vqueue-head { border-bottom-color: var(--yt-line); }
html[data-mode] .vqueue-list li.now { background: var(--yt-bg3); }
html[data-mode] .autonext i { background: var(--yt-bg3); }
html[data-mode] .autonext input:checked + i { background: var(--yt-text); }
html[data-mode] .autonext input:checked + i::after { background: var(--yt-bg); }
html[data-mode] .plthumb { background: var(--yt-bg2); }
html[data-mode] .plgrid { margin-top: 24px; }
html[data-mode] .pltitle { color: var(--yt-text); text-decoration: none; }
html[data-mode] .plmore { color: var(--yt-text2); text-decoration: none; }
.yt-noplay { height: 100%; display: grid; place-items: center; color: #999; }

.yt-title { margin: 12px 0 0; font: 700 20px/28px "Roboto", "Arial", sans-serif; word-break: break-word; }

.yt-top-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.yt-owner { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: 12px; }
.yt-owner-text { overflow: hidden; }
.yt-owner-name { overflow: hidden; text-overflow: ellipsis; }
.yt-owner-pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.yt-owner-text { min-width: 0; margin-right: 12px; }
.yt-owner-name { display: flex; align-items: center; color: var(--yt-text); font: 500 16px/22px "Roboto", "Arial", sans-serif; text-decoration: none; white-space: nowrap; }
.yt-owner-subs { display: block; color: var(--yt-text2); font-size: 12px; line-height: 18px; white-space: nowrap; }
.yt-owner .yt-sub-btn { margin-left: 0; }
.yt-owner .yt-pill { margin-left: 4px; }

/* the buttons share the owner's line; the ones that do not fit go into the ⋯ menu (watch.js) */
.yt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 1 1 0; min-width: 150px; justify-content: flex-end; }
.yt-actions > * { flex: none; }
/* a short line: the buttons keep their icons and drop their words */
.yt-actions.fit-compact > [data-fit] span:last-child:not(:first-child) { display: none; }
.yt-actions.fit-compact > .yt-pill[data-fit], .yt-actions.fit-compact > [data-fit] > .yt-pill { padding: 0 11px; gap: 0; }

/* buttons moved into the ⋯ menu look like the rest of it */
.fit-slot:empty { display: none; }
.fit-slot { border-bottom: 1px solid var(--yt-line); padding-bottom: 8px; margin-bottom: 8px; }
.fit-slot > .yt-pill, html[data-mode] .fit-slot > .chip, .fit-slot .dl-menu > .yt-pill, html[data-mode] .fit-slot .dl-menu > .chip {
    display: flex; align-items: center; gap: 16px; width: 100%; height: auto; min-height: 40px; padding: 0 36px 0 16px;
    border: 0; border-radius: 0; background: none; color: var(--yt-text); text-align: left; justify-content: flex-start;
    font: 400 14px/20px "Roboto", "Arial", sans-serif;
}
.fit-slot > .yt-pill:hover, html[data-mode] .fit-slot > .chip:hover { background: var(--yt-hover); }
.fit-slot > .yt-pill.on, html[data-mode] .fit-slot > .chip.on { background: none; }
html[data-mode] .fit-slot .chip svg { width: 24px; height: 24px; }
.fit-slot .yt-ico, .fit-slot svg { width: 24px; height: 24px; }
.fit-slot .dl-menu { position: static; }
.fit-slot .dl-menu > button { pointer-events: none; }
.fit-slot .dl-menu .menu-list, html[data-mode] .fit-slot .dl-menu .menu-list {
    position: static; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; padding: 0 16px 6px 56px;
    background: none; box-shadow: none; border-radius: 0;
}
.fit-slot .dl-menu .menu-list > a, html[data-mode] .fit-slot .dl-menu .menu-list > a {
    width: auto; min-height: 28px; padding: 0 12px; border-radius: 14px; background: var(--yt-bg2); font-size: 13px;
}
.yt-seg { display: flex; align-items: center; height: 36px; border-radius: 18px; background: var(--yt-bg2); overflow: hidden; }
.yt-seg-btn {
    display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; background: none; cursor: pointer;
    color: var(--yt-text); font: 500 14px/36px "Roboto", "Arial", sans-serif; position: relative;
}
.yt-seg-btn:hover { background: var(--yt-bg3); }
.yt-seg-btn + .yt-seg-btn::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--yt-line);
}
.yt-seg-btn + .yt-seg-btn { padding: 0 14px; }
.yt-seg-btn.on { background: var(--yt-bg3); }
.yt-seg-btn.on .yt-ico { transform: scale(1.08); }
.yt-seg-btn .n:empty, .yt-seg-btn[data-react="-1"] .n { display: none; }
.yt-actions .chip { height: 36px; }
.yt-more-menu .yt-pop { right: 0; top: 42px; }

.yt-panel, html[data-mode] .panel {
    background: var(--yt-pop); border: 0; border-radius: 12px; box-shadow: var(--yt-shadow);
    padding: 16px 24px; margin-top: 12px;
}
html[data-mode="dark"] .yt-panel { background: var(--yt-bg2); }
.yt-panel h4 { margin: 0 0 12px; font: 400 16px/22px "Roboto", "Arial", sans-serif; }
.yt-share-links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.yt-share-links a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--yt-text); text-decoration: none; width: 64px; }
.yt-share-links i {
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    font: 700 20px/1 "Roboto", "Arial", sans-serif; font-style: normal;
}
.yt-share-row { display: flex; gap: 8px; align-items: center; border: 1px solid var(--yt-line); border-radius: 12px; padding: 8px 8px 8px 12px; background: var(--yt-bg); }
.yt-share-row input { flex: 1; min-width: 0; border: 0; background: none; color: var(--yt-text); font: inherit; outline: none; }
.yt-radio { display: flex; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; }
.yt-radio input { accent-color: var(--yt-blue); width: 18px; height: 18px; }
#reportPanel textarea {
    width: 100%; margin-top: 8px; border: 1px solid var(--yt-line); border-radius: 8px; padding: 10px 12px;
    background: var(--yt-bg); color: var(--yt-text); font: inherit; resize: vertical;
}
.yt-panel-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.yt-panel .said { color: #e5484d; font-size: 13px; margin-top: 8px; }
.yt-panel .newlist { display: flex; gap: 8px; }
.yt-panel .newlist input {
    flex: 1; min-width: 0; height: 36px; border: 0; border-bottom: 1px solid var(--yt-line); background: none; color: var(--yt-text);
    font: inherit; outline: none;
}

.yt-desc {
    background: var(--yt-bg2); border-radius: 12px; padding: 12px; margin-top: 12px;
    font-size: 14px; line-height: 20px; position: relative;
}
.yt-desc.can-grow:not(.open) { cursor: pointer; }
.yt-desc.can-grow:not(.open):hover { background: var(--yt-bg3); }
.yt-desc-meta { font-weight: 500; display: flex; flex-wrap: wrap; gap: 0 8px; }
.yt-desc-meta a { color: var(--yt-blue); text-decoration: none; font-weight: 500; }
.yt-desc-text { white-space: normal; word-wrap: break-word; }
.yt-desc-text a { color: var(--yt-blue); }
.yt-desc.can-grow:not(.open) .yt-desc-text { max-height: 60px; overflow: hidden; }
.yt-desc-toggle { display: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--yt-text); font: 500 14px/20px "Roboto", "Arial", sans-serif; }
.yt-desc.can-grow:not(.open) .yt-desc-toggle.more { display: inline-block; }
.yt-desc.open .yt-desc-toggle.less { display: inline-block; margin-top: 16px; }

.yt-comments { margin-top: 24px; }
.yt-comments-head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.yt-comments-head h2 { margin: 0; font: 700 20px/28px "Roboto", "Arial", sans-serif; }
.yt-sortby { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.yt-comments-off { margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--yt-line); text-align: center; color: var(--yt-text2); }

.yt-cform { display: flex; gap: 16px; margin-bottom: 32px; }
.yt-cform .grow { flex: 1; min-width: 0; }
.yt-cform textarea {
    width: 100%; min-height: 21px; resize: none; overflow: hidden; border: 0; border-bottom: 1px solid var(--yt-line);
    background: none; color: var(--yt-text); padding: 0 0 4px; font: 400 14px/20px "Roboto", "Arial", sans-serif; outline: none;
}
.yt-cform textarea:focus { border-bottom: 2px solid var(--yt-text); padding-bottom: 3px; }
.yt-cform-foot { display: none; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; margin-top: 8px; }
.yt-cform.active .yt-cform-foot { display: flex; }
.yt-cform-guest { align-items: center; }
.yt-cform-guest a { flex: 1; border-bottom: 1px solid var(--yt-line); padding-bottom: 4px; color: var(--yt-text2); text-decoration: none; }
.yt-reply-form { margin: 8px 0 16px; gap: 12px; }
.yt-reply-form[hidden] { display: none; }

.yt-c-pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.yt-c-pfp.sm { width: 24px; height: 24px; }
.yt-comment { display: flex; gap: 16px; margin-bottom: 16px; }
.yt-c-main { flex: 1; min-width: 0; }
.yt-c-head { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; margin-bottom: 2px; flex-wrap: wrap; }
.yt-c-head > span { color: var(--yt-text2); }
.yt-c-name { color: var(--yt-text); font-weight: 500; font-size: 13px; text-decoration: none; }
.yt-c-name.is-owner { background: var(--yt-text2); color: var(--yt-bg); padding: 0 6px; border-radius: 12px; }
.yt-pinned { background: var(--yt-bg2); color: var(--yt-text2) !important; padding: 0 6px; border-radius: 4px; }
.yt-c-body { font-size: 14px; line-height: 20px; word-wrap: break-word; }
.yt-c-body a { color: var(--yt-blue); }
.yt-c-tools { margin-top: 2px; }
.yt-replies-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; margin-left: -16px; border: 0;
    border-radius: 18px; background: none; color: var(--yt-blue); font: 500 14px/36px "Roboto", "Arial", sans-serif; cursor: pointer;
}
.yt-replies-btn:hover { background: var(--yt-blue-soft); }
.yt-replies-btn.open .yt-ico { transform: rotate(180deg); }
.yt-replies { margin-top: 8px; }
.yt-replies[hidden] { display: none; }

.yt-up-chips { margin-bottom: 12px; }
.yt-upnext { display: flex; flex-direction: column; }
.yt-secondary .aio-ad { margin-bottom: 12px; }

@media (max-width: 1016px) {
    .yt-watch { grid-template-columns: minmax(0, 1fr); }
    .yt-secondary { width: 100%; }
    .yt-secondary .yt-compact .yt-thumb { width: 240px; flex-basis: 240px; }
}

/* ============================================================ channel */

.yt-channel { max-width: 1284px; margin: 0 auto; }
/* no min-height here: beside an aspect-ratio it becomes a minimum WIDTH (88 x 6.2 = 546px), which made a phone page wider than the phone */
.yt-banner { width: 100%; max-width: 100%; aspect-ratio: 6.2 / 1; max-height: 340px; border-radius: 16px; overflow: hidden; background: var(--yt-bg2); }
.yt-owner-name .mbadge, .yt-chead h1 .mbadge { margin-left: 8px; }
.yt-chead h1 .mbadge { font-size: 13px; line-height: 20px; padding: 1px 9px; }
@media (max-width: 640px) { .yt-banner { border-radius: 0; aspect-ratio: 4.2 / 1; } }
@media (max-width: 400px) { .yt-banner { aspect-ratio: 3.8 / 1; } }
.yt-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-chead { display: flex; align-items: center; gap: 24px; padding: 16px 0 0; }
.yt-chead-pfp { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex: none; }
.yt-chead-text { min-width: 0; }
.yt-chead h1 { display: flex; align-items: center; gap: 4px; margin: 0; font: 700 36px/50px "Roboto", "Arial", sans-serif; word-break: break-word; }
.yt-chead h1 .yt-verified { width: 20px; height: 20px; margin-left: 8px; }
.yt-chead-meta { color: var(--yt-text2); display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.yt-chead-meta b { color: var(--yt-text); font-weight: 500; }
.yt-chead-meta i { font-style: normal; margin: 0 4px; }
.yt-chead-about { display: block; margin-top: 8px; color: var(--yt-text2); text-decoration: none; max-width: 640px; }
.yt-chead-about b { color: var(--yt-text); font-weight: 500; }
.yt-chead-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.yt-chead-btns .yt-sub-btn { margin-left: 0; }

.yt-ctabs, html[data-mode] .tabs {
    display: flex; gap: 24px; height: 48px; border-bottom: 1px solid var(--yt-line); margin: 8px 0 0; overflow-x: auto; scrollbar-width: none;
}
.yt-ctabs a, html[data-mode] .tabs a {
    display: flex; align-items: center; height: 48px; padding: 0; border-bottom: 2px solid transparent;
    color: var(--yt-text2); font: 500 16px/22px "Roboto", "Arial", sans-serif; text-decoration: none; white-space: nowrap;
}
.yt-ctabs a:hover, html[data-mode] .tabs a:hover { color: var(--yt-text); border-bottom-color: var(--yt-text2); }
.yt-ctabs a.on, html[data-mode] .tabs a.active { color: var(--yt-text); border-bottom-color: var(--yt-text); }

.yt-feature { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--yt-line); }
.yt-feature .yt-thumb { width: 424px; flex: none; }
.yt-feature-text { min-width: 0; max-width: 640px; }
.yt-feature-text h2 { margin: 0 0 8px; font: 400 18px/26px "Roboto", "Arial", sans-serif; }
.yt-feature-text h2 a { color: var(--yt-text); text-decoration: none; }
.yt-feature-text .yt-card-meta { font-size: 12px; }
.yt-feature-text p { color: var(--yt-text2); margin: 12px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.yt-about { max-width: 820px; padding: 24px 0; }
.yt-about h2 { margin: 0 0 16px; font: 700 20px/28px "Roboto", "Arial", sans-serif; }
.yt-about h3 { margin: 32px 0 8px; font: 700 18px/26px "Roboto", "Arial", sans-serif; }
.yt-about-text { font-size: 14px; line-height: 20px; }
.yt-about-list { list-style: none; margin: 0; padding: 0; }
.yt-about-list li { display: flex; align-items: center; gap: 16px; padding: 8px 0; }

/* ============================================================= search */

.yt-results { max-width: 1096px; margin: 0 auto; }
.yt-results-head { color: var(--yt-text2); padding: 4px 0 8px; border-bottom: 1px solid var(--yt-line); }
.yt-results-head b { color: var(--yt-text); font-weight: 500; }
.yt-res { position: relative; display: flex; gap: 16px; margin-top: 16px; padding-right: 32px; }
.yt-res .yt-thumb { flex: 0 1 500px; min-width: 240px; max-width: 500px; width: 40%; }
.yt-res-text { flex: 1; min-width: 0; }
.yt-res-title { color: var(--yt-text); font: 400 18px/26px "Roboto", "Arial", sans-serif; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-res .yt-card-meta { font-size: 12px; line-height: 18px; }
.yt-res-ch { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--yt-text2); font-size: 12px; text-decoration: none; }
.yt-res-ch img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.yt-res-desc { margin: 0; color: var(--yt-text2); font-size: 12px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-res .yt-card-menu { right: 0; top: 0; }
.yt-res-channel { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--yt-line); }
.yt-res-ch-pfp { flex: 0 1 500px; width: 40%; min-width: 240px; max-width: 500px; display: flex; justify-content: center; }
.yt-res-ch-pfp img { width: 136px; height: 136px; border-radius: 50%; object-fit: cover; }
.yt-res-ch-text { flex: 1; min-width: 0; }
.yt-res-ch-text .yt-res-title { display: flex; align-items: center; }
.yt-res-ch-text p { margin: 8px 0 0; color: var(--yt-text2); font-size: 12px; }

/* ========================================================== studio area */

body.area-studio { background: var(--yt-studio-bg); }
body.area-studio .yt-top { background: var(--yt-bg); }
.yt-studio-nav { width: 255px; padding: 0 12px 12px; background: var(--yt-bg); border-right: 1px solid var(--yt-line); }
.yt-studio-me { text-align: center; padding: 24px 0 16px; }
.yt-studio-me img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; }
.yt-studio-me .t { font: 500 15px/24px "Roboto", "Arial", sans-serif; }
.yt-studio-me .n { color: var(--yt-text2); font-size: 13px; }
.yt-studio-nav .yt-gi { height: 48px; border-radius: 0; margin: 0 -12px; width: calc(100% + 24px); padding: 0 24px; font-size: 15px; }
.yt-studio-nav .yt-gi.on { background: var(--yt-bg2); color: var(--yt-accent); font-weight: 500; }
.yt-studio-nav .yt-gi.on .yt-ico { fill: var(--yt-accent); }
body.area-studio .page { margin-left: 255px; padding: calc(var(--yt-top) + 24px) 32px 48px; }

html[data-guide="mini"] .yt-studio-nav { width: var(--yt-mini); padding: 0 0 12px; }
html[data-guide="mini"] .yt-studio-nav .yt-gi { margin: 0; width: 100%; justify-content: center; padding: 0; }
html[data-guide="mini"] .yt-studio-nav .yt-gi span,
html[data-guide="mini"] .yt-studio-me .t,
html[data-guide="mini"] .yt-studio-me .n { display: none; }
html[data-guide="mini"] .yt-studio-me img { width: 32px; height: 32px; margin-bottom: 0; }
html[data-guide="mini"] body.area-studio .page { margin-left: var(--yt-mini); }

@media (max-width: 1312px) {
    .yt-studio-nav { top: 0; z-index: 2000; transform: translateX(-100%); transition: transform .2s; width: 255px !important; }
    .yt-studio-nav .yt-guide-drawer-head { display: flex; }
    html[data-guide] body.area-studio .page { margin-left: 0; }
    html[data-guide="mini"] .yt-studio-nav .yt-gi span,
    html[data-guide="mini"] .yt-studio-me .t,
    html[data-guide="mini"] .yt-studio-me .n { display: block; }
    html[data-guide="mini"] .yt-studio-nav .yt-gi { justify-content: flex-start; padding: 0 24px; margin: 0 -12px; width: calc(100% + 24px); }
    html[data-guide="mini"] .yt-studio-me img { width: 112px; height: 112px; margin-bottom: 16px; }
}

.yt-studio { max-width: 1400px; }
.yt-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yt-studio-head h1 { margin: 0; font: 500 24px/32px "Roboto", "Arial", sans-serif; }
.yt-studio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.yt-scard { background: var(--yt-bg); border: 1px solid var(--yt-line); border-radius: 8px; padding: 16px; }
.yt-scard span { color: var(--yt-text2); font-size: 13px; }
.yt-scard b { display: block; font: 500 24px/32px "Roboto", "Arial", sans-serif; margin-top: 6px; }

.yt-table-wrap { overflow-x: auto; background: var(--yt-bg); border: 1px solid var(--yt-line); border-top: 0; }
.yt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.yt-table th {
    text-align: left; color: var(--yt-text2); font: 500 12px/16px "Roboto", "Arial", sans-serif;
    padding: 12px; border-bottom: 1px solid var(--yt-line); white-space: nowrap;
}
.yt-table td { padding: 12px; border-bottom: 1px solid var(--yt-line); vertical-align: top; }
.yt-table tr:hover td { background: var(--yt-hover); }
.yt-table .num { text-align: right; }
.yt-t-video { display: flex; gap: 16px; min-width: 380px; }
.yt-t-thumb { position: relative; width: 120px; flex: none; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--yt-bg2); display: block; }
.yt-t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-t-thumb .yt-time { right: 4px; bottom: 4px; font-size: 11px; line-height: 14px; }
.yt-t-text { min-width: 0; flex: 1; }
.yt-t-title { color: var(--yt-text); font-weight: 500; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.yt-t-desc { color: var(--yt-text2); font-size: 12px; line-height: 16px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-t-tools { display: flex; gap: 4px; margin-top: 4px; visibility: hidden; }
.yt-table tr:hover .yt-t-tools { visibility: visible; }
.yt-t-tools a, .yt-t-tools button {
    width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
    background: none; color: var(--yt-text2); cursor: pointer;
}
.yt-t-tools a:hover, .yt-t-tools button:hover { color: var(--yt-text); background: var(--yt-bg2); }
.yt-t-sub { color: var(--yt-text2); font-size: 12px; margin-top: 2px; }
.yt-status { color: var(--c, var(--yt-text)); font-weight: 500; }
.yt-likebar { width: 80px; height: 2px; background: var(--yt-line); margin: 6px 0 0 auto; }
.yt-likebar i { display: block; height: 100%; background: var(--yt-text2); }
@media (hover: none) { .yt-t-tools { visibility: visible; } }

/* ======================================== the site's own pages, restyled */

html[data-mode] h1.page-title { font: 700 28px/36px "Roboto", "Arial", sans-serif; margin: 8px 0 16px; }
html[data-mode] .form-card {
    background: var(--yt-bg); border: 1px solid var(--yt-line); border-radius: 12px; box-shadow: none;
}
body.area-studio .form-card { margin: 0 0 24px; max-width: 980px; border-radius: 8px; }
body.area-studio .form-card.wide { max-width: 980px; }
html[data-mode] .field label { color: var(--yt-text2); font-size: 12px; font-weight: 500; }
html[data-mode] .field input, html[data-mode] .field select, html[data-mode] .field textarea {
    background: var(--yt-bg); border: 1px solid var(--yt-line); border-radius: 4px; color: var(--yt-text);
    font: 400 15px/22px "Roboto", "Arial", sans-serif; padding: 10px 12px;
}
html[data-mode] .field input:focus, html[data-mode] .field select:focus, html[data-mode] .field textarea:focus {
    border-color: var(--yt-blue); box-shadow: 0 0 0 1px var(--yt-blue);
}

/* signing in and joining: a card like Google's own */
body.page-login .form-card, body.page-register .form-card {
    max-width: 448px; margin: 40px auto; padding: 48px 40px 36px; border-radius: 28px; text-align: left;
}
body.page-login .form-card h1, body.page-register .form-card h1 { font: 400 24px/32px "Roboto", "Arial", sans-serif; }

html[data-mode] .pager a, html[data-mode] .pager span {
    border: 0; background: var(--yt-bg2); border-radius: 18px; height: 36px; min-width: 36px; font-weight: 500;
}
html[data-mode] .pager a:hover { background: var(--yt-bg3); color: var(--yt-text); }
html[data-mode] .pager .here { background: var(--yt-text); color: var(--yt-bg); }

html[data-mode] .alert { border-radius: 12px; }
html[data-mode] .nlist { border-radius: 12px; }
html[data-mode] .nitem:hover { background: var(--yt-hover); }

/* ============================================================= phones */

@media (max-width: 1100px) {
    .yt-center { margin: 0 16px; }
    .yt-create span { display: none; }
    .yt-create { padding: 0; width: 40px; justify-content: center; background: none; }
    .yt-create:hover { background: var(--yt-hover); }
}

@media (max-width: 791px) {
    html[data-mode] .page, body.page-watch .page { padding: calc(var(--yt-top) + 12px) 12px 72px; }
    html[data-guide] body:not(.no-sidebar):not(.area-studio) .page { margin-left: 0; }
    .yt-chipbar { margin: -12px -12px 0; padding: 12px; }
    .yt-chip-arrow { display: none !important; }

    /* the mini guide becomes the bar along the bottom, as on a phone app */
    html[data-guide] .yt-mini-guide {
        display: flex; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 48px;
        flex-direction: row; padding: 0; border-top: 1px solid var(--yt-line);
    }
    .yt-mini-guide .yt-gi { flex: 1; height: 48px; padding: 4px 0; gap: 2px; border-radius: 0; }
    body.no-sidebar .page { padding-bottom: 24px; }

    .yt-feature { flex-direction: column; }
    .yt-feature .yt-thumb { width: 100%; }
    .yt-chead { flex-direction: column; align-items: flex-start; gap: 12px; }
    .yt-chead-pfp { width: 72px; height: 72px; }
    .yt-chead h1 { font-size: 24px; line-height: 32px; }

    .yt-res, .yt-res-channel { flex-direction: column; padding-right: 0; gap: 8px; }
    .yt-res .yt-thumb, .yt-res-ch-pfp { width: 100%; max-width: none; min-width: 0; flex: none; }
    .yt-res-ch-pfp { justify-content: flex-start; }
    .yt-res-ch-pfp img { width: 72px; height: 72px; }
    .yt-res .yt-card-menu { top: auto; bottom: 0; }

    .yt-top .nbox { position: fixed; left: 8px; right: 8px; width: auto; top: 52px; }
}

@media (max-width: 656px) {
    .yt-top { padding: 0 8px 0 12px; }
    .yt-start { gap: 4px; }
    .yt-start > .yt-icon-btn { display: none; }
    .yt-center { display: none; }
    .yt-search-open { display: inline-flex; }
    .yt-end { min-width: 0; gap: 2px; }
    .yt-signin span { display: none; }
    .yt-signin { padding: 0 6px; border: 0; }

    body.yt-search-mode .yt-start, body.yt-search-mode .yt-end { display: none; }
    body.yt-search-mode .yt-center { display: flex; flex: 1; margin: 0; }
    body.yt-search-mode .yt-search-back { display: inline-flex; margin-right: 4px; }
    body.yt-search-mode .yt-search { margin-left: 0; }

    .yt-grid, html[data-mode] .vgrid { grid-template-columns: 1fr; gap: 24px; }
    .yt-grid .yt-thumb, html[data-mode] .vgrid .yt-thumb { border-radius: 0; margin: 0 -12px; }
    .yt-grid .yt-card-body, html[data-mode] .vgrid .yt-card-body { padding-top: 12px; }

    body.page-watch .page { padding-top: var(--yt-top); padding-left: 0; padding-right: 0; }
    body.page-watch .yt-player { border-radius: 0; }
    .yt-primary > :not(.yt-player):not(.player) { margin-left: 12px; margin-right: 12px; }
    .yt-secondary { padding: 0 12px; }
    .yt-title { font-size: 18px; line-height: 26px; }
    /* one column that is exactly the screen wide: the owner line shortens its
       name, the buttons scroll sideways as they do in the app */
    .yt-top-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .yt-owner, .yt-actions { min-width: 0; max-width: 100%; }
    .yt-owner-text { flex: 1; }
    .yt-owner-name { overflow: visible; text-overflow: clip; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px; }
    /* the buttons that do not fit go into the ⋯ menu (watch.js) rather than off the edge */
    .yt-actions { flex: none; flex-wrap: nowrap; overflow: visible; justify-content: flex-start; }
    .yt-actions > * { flex: none; }
    /* the ⋯ menu opens as a sheet at the foot of the screen */
    .yt-more-menu .yt-pop, .yt-more-menu.up .yt-pop { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; min-width: 0; max-height: 70vh; overflow: auto; z-index: 2500; }
    .yt-secondary .yt-compact .yt-thumb { width: 168px; flex-basis: 168px; }

    .yt-studio-cards { grid-template-columns: repeat(2, 1fr); }
    body.page-login .form-card, body.page-register .form-card { border: 0; padding: 24px 8px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------------
   The pieces the site now draws for every theme - comments, the share panel,
   the embed builder - wearing YouTube's clothes.
   --------------------------------------------------------------------------- */

.comments { margin-top: 24px; }
.comments-head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.comments-head h3 { margin: 0; font: 700 20px/28px "Roboto", "Arial", sans-serif; }
.csort a { color: var(--yt-text2); font: 500 14px/20px "Roboto", "Arial", sans-serif; text-decoration: none; }
.csort a.on { color: var(--yt-text); }

.comments .cform { display: flex; gap: 16px; margin-bottom: 32px; }
.comments .cform .pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.comments .cform .pfp.sm { width: 24px; height: 24px; flex-basis: 24px; }
.comments .cform textarea {
    width: 100%; border: 0; border-bottom: 1px solid var(--yt-line); background: none;
    color: var(--yt-text); font: 400 14px/20px "Roboto", "Arial", sans-serif; padding: 4px 0; resize: none; outline: none;
}
.comments .cform textarea:focus { border-bottom: 2px solid var(--yt-text); padding-bottom: 3px; }
.comments .cform-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.comments .comment { display: flex; gap: 16px; margin-bottom: 16px; }
.comments .comment .pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.comments .comment.is-reply .pfp { width: 24px; height: 24px; flex-basis: 24px; }
.comments .chead { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; margin-bottom: 2px; flex-wrap: wrap; }
.comments .chead > span { color: var(--yt-text2); }
.comments .cname { color: var(--yt-text); font-weight: 500; font-size: 13px; text-decoration: none; }
.comments .cname.is-owner { background: var(--yt-text2); color: var(--yt-bg); padding: 0 6px; border-radius: 12px; }
.comments .cpin { color: var(--yt-text2); font-size: 12px; }
.comments .cbody { font-size: 14px; line-height: 20px; word-wrap: break-word; }
.comments .cbody a { color: var(--yt-blue); }
.comments .ctool { color: var(--yt-text2); font: 500 12px/1 "Roboto", "Arial", sans-serif; border-radius: 18px; padding: 6px 10px; }
.comments .ctool:hover { background: var(--yt-bg3); color: var(--yt-text); }
.comments .ctool.on { color: var(--yt-text); }
.comments .replies-btn {
    color: var(--yt-blue); font: 500 14px/20px "Roboto", "Arial", sans-serif;
    padding: 8px 12px; border-radius: 18px; background: none;
}
.comments .replies-btn:hover { background: var(--yt-blue-soft); }

.emoji-pop { background: var(--yt-pop); border: 0; box-shadow: var(--yt-shadow); border-radius: 12px; }
html[data-mode="dark"] .emoji-pop { background: var(--yt-bg2); }

/* the panels under the player */
.share-panel .share-round .sr i { width: 38px; height: 38px; font-size: 14px; }
.share-panel .share-round .sr { width: 56px; font-size: 11px; }
.share-panel .share-round .sr.sr-embed i { background: var(--yt-bg3); color: var(--yt-text); border: 0; }
.share-row { border: 1px solid var(--yt-line); border-radius: 12px; padding: 6px 6px 6px 12px; background: var(--yt-bg); }
.share-row input { border: 0; background: none; color: var(--yt-text); }
.embed-preview { border-radius: 12px; }
.chapter:hover { background: var(--yt-bg3); }
.chapter .t { color: var(--yt-blue); }
.dl-menu .menu-list { background: var(--yt-pop); box-shadow: var(--yt-shadow); border: 0; border-radius: 12px; }
html[data-mode="dark"] .dl-menu .menu-list { background: var(--yt-bg2); }
.dl-menu .menu-list a { color: var(--yt-text); font: 400 14px/20px "Roboto", "Arial", sans-serif; }
.dl-menu .menu-list a:hover { background: var(--yt-bg3); }

/* the blog and channel posts, in this theme's colours */
.bcard { background: var(--yt-bg2); border: 0; border-radius: 12px; }
.pcard, .post-form { background: var(--yt-bg2); border: 0; border-radius: 12px; }
.article-body { font: 400 16px/26px "Roboto", "Arial", sans-serif; }
.chiprow .chip { background: var(--yt-bg3); border: 0; border-radius: 8px; font: 500 14px/20px "Roboto", "Arial", sans-serif; }
.chiprow .chip.on { background: var(--yt-text); color: var(--yt-bg); }

/* the footer under every page, and the toasts, in the theme's colours */
.sfoot { border-top-color: var(--yt-line); color: var(--yt-text2); padding-left: 24px; padding-right: 24px; }
.sfoot-line { border-top-color: var(--yt-line); }
.sfoot-links a { color: var(--yt-text2); }
.sfoot-links a:hover { color: var(--yt-text); }
.sfoot-dev a { color: var(--yt-blue); }
.aio-toast { background: var(--yt-pop); border-color: var(--yt-line); color: var(--yt-text); }
html[data-mode="dark"] .aio-toast { background: var(--yt-bg2); }
.aio-toast-body span { color: var(--yt-text2); }
.yt-logo-img.yt-logo-dark { display: none; }
html[data-mode="dark"] .yt-logo-img.yt-logo-dark { display: block; }
html[data-mode="dark"] .yt-logo-img.yt-logo-light { display: none; }
.contact-box { background: var(--yt-bg2); border-color: var(--yt-line); }
.contact-msg { background: var(--yt-bg2); border-color: var(--yt-line); }

/* round 11: the credit under the guide and at the foot */
.yt-guide-foot .credit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.yt-guide-foot .credit .fkbd-credit img { height: 16px; }
html[data-mode] .sfoot-line { justify-content: center; }


/* round 11: the suggestions under the search pill, and the results' sort chips */
.yt-search.has-suggest { position: relative; }
.yt-search .aio-suggest { top: 44px; left: 0; right: 0; border: 0; box-shadow: var(--yt-shadow); background: var(--yt-pop); color: var(--yt-text); border-radius: 12px; padding: 12px 0 8px; }
html[data-mode="dark"] .yt-search .aio-suggest { background: var(--yt-bg2); box-shadow: 0 4px 32px rgba(0, 0, 0, .6); }
.yt-search .aio-suggest-item { padding: 6px 16px; font: 400 16px/24px "Roboto", "Arial", sans-serif; }
.yt-search .aio-suggest-item .t b { font-weight: 700; }
.yt-search .aio-suggest-item:hover, .yt-search .aio-suggest-item.on { background: var(--yt-hover); }
.yt-search .aio-suggest-item svg { color: var(--yt-text); }
.yt-search .aio-suggest-x { color: var(--yt-blue); }
.yt-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.yt-chips-inline { display: flex; gap: 8px; }
html[data-mode] .aio-more-btn { background: var(--yt-bg2); color: var(--yt-text); border: 0; font: 500 14px/36px "Roboto", "Arial", sans-serif; padding: 0 16px; border-radius: 18px; }
html[data-mode] .aio-more-spin { border-color: var(--yt-bg3); border-top-color: var(--yt-text); }


/* round 11: the badge's words stay white on the grey head of a comment */
.comments .chead > span.mbadge, html[data-mode] .mbadge { color: #fff !important; }


/* ---------------------------------------- round 12: the Studio pieces */

.yt-studio .st-card, .yt-studio .st-table-wrap, .yt-studio .st-panel, .yt-studio .st-comment, .yt-studio .st-empty { background: var(--yt-bg); border-color: var(--yt-line); }
.yt-studio .st-tabs { border-bottom-color: var(--yt-line); }
.yt-studio .st-tabs a { font: 500 14px/20px "Roboto", "Arial", sans-serif; color: var(--yt-text2); padding: 14px 18px; }
.yt-studio .st-tabs a.on { color: var(--yt-text); border-bottom-color: var(--yt-text); }
.yt-studio .st-search, .yt-studio .st-filter select, .yt-studio .st-apply, .yt-studio .st-tfoot select, .yt-studio .st-mini, .yt-studio .st-days { background: var(--yt-bg); border-color: var(--yt-line); color: var(--yt-text); }
.yt-studio .st-table th { border-bottom-color: var(--yt-line); color: var(--yt-text2); text-transform: none; letter-spacing: 0; font: 500 12px/16px "Roboto", "Arial", sans-serif; }
.yt-studio .st-table td { border-bottom-color: var(--yt-line); }
.yt-studio .st-table tbody tr:hover td { background: var(--yt-hover); }
.yt-studio .st-title { color: var(--yt-text); font-weight: 500; }
.yt-studio .st-desc, .yt-studio .st-sub, .yt-studio .st-lead { color: var(--yt-text2); }
.yt-studio .st-pop { background: var(--yt-pop); border: 0; box-shadow: var(--yt-shadow); }
.yt-studio .st-pop > a, .yt-studio .st-pop > button { color: var(--yt-text); }
.yt-studio .st-pop > a:hover, .yt-studio .st-pop > button:hover, .yt-studio .st-tools > a:hover, .yt-studio .st-tools > button:hover, .yt-studio .st-menu > button:hover, .yt-studio .st-pg:hover { background: var(--yt-bg2); }
.yt-studio .st-modal-box { background: var(--yt-pop); }
.yt-studio .st-f input, .yt-studio .st-f textarea { background: var(--yt-bg); border-color: var(--yt-line); color: var(--yt-text); }
.yt-studio .st-bulk { background: var(--yt-text); color: var(--yt-bg); }
.yt-studio .st-days a.on { background: var(--yt-text); color: var(--yt-bg); }
.yt-studio .st-chart rect { fill: var(--yt-accent, #065fd4); }

/* ------------------------------------------------ round 13: labels */

/* "Studio" and any word like it sits small under the logo, never beside it */
.yt-top.is-studio .yt-logo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-right: 8px; }
.yt-top.is-studio .yt-logo-studio { font: 600 10px/1 "Roboto", "Arial", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--yt-text2); }
.yt-top.is-studio .yt-logo-img { height: 22px; }

/* a promoted video's card */
.yt-promo { display: inline-block; padding: 0 5px; border-radius: 3px; background: var(--yt-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 15px; }

/* the missing video, in the theme's colours */
.watch-missing { max-width: 1284px; margin: 0 auto; }
.watch-missing-title { font: 500 20px/28px "Roboto", "Arial", sans-serif; margin: 16px 0 4px; }
.watch-missing-sub { font: 500 16px/22px "Roboto", "Arial", sans-serif; color: var(--yt-text2); margin: 20px 0 12px; }
.watch-missing .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* the Studio's own request pages and promotion */
.yt-studio .st-req-card, body.area-studio .st-req-card, body.area-studio .st-req-form, body.area-studio .st-req-rules ul { background: var(--yt-bg); border-color: var(--yt-line); }
body.area-studio .st-req-form textarea, body.area-studio .st-req-form input[type="text"] { background: var(--yt-bg2); border-color: var(--yt-line); color: var(--yt-text); }
body.area-studio .pm-estimate { background: var(--yt-bg2); border-color: var(--yt-line); }
body.area-studio .pm-bar { background: var(--yt-line); }
body.area-studio .pm-bar i { background: var(--yt-accent); }

@media (max-width: 656px) {
    /* the owner row: the name keeps its room, the buttons drop under it */
    .yt-owner { flex-wrap: wrap; row-gap: 10px; }
    .yt-owner-text { flex: 1 1 140px; }
    .yt-owner .yt-pill, .yt-owner .yt-sub-btn, .yt-owner .yt-bell-btn { flex: none; }
    body { overflow-x: hidden; }
    .yt-banner img { max-width: 100%; }
    .yt-ctabs { padding: 0 4px; }
}@media (max-width: 656px) {
    /* the watch page has no side padding on a phone; the "video unavailable" page brings its own */
    body.page-watch .watch-missing { padding: 0 12px; }
    body.page-watch .watch-missing-player { margin: 0 -12px; border-radius: 0; }
}

/* ---------------------------------------------------------- 1.9.0 (round 14) */
/* the account menu carries the whole side menu, grouped, and scrolls on a short screen */
.yt-account .yt-pop { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overscroll-behavior: contain; }
.yt-acc-group { border-top: 1px solid var(--yt-line); }
.yt-acc-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer;
    padding: 10px 16px 4px; font: 500 12px/16px "Roboto", "Arial", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--yt-text2); user-select: none; }
.yt-acc-group > summary::-webkit-details-marker { display: none; }
.yt-acc-group > summary .yt-ico { width: 18px; height: 18px; transition: transform .15s; fill: currentColor; }
.yt-acc-group:not([open]) > summary { padding-bottom: 10px; }
.yt-acc-group:not([open]) > summary .yt-ico { transform: rotate(-90deg); }
.yt-acc-group > .yt-acc-sec { border-top: 0; padding-top: 2px; }
.yt-pop .yt-acc-group a .yt-ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.yt-pop .yt-acc-group a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 656px) {
    /* on a phone the menu is a sheet from the top right that fits the screen */
    .yt-account .yt-pop { position: fixed; top: 56px; right: 8px; left: auto; width: min(320px, calc(100vw - 16px)); }
}

/* --- 1.11.0: sizes kept for members --- */
.qnudge { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 204, 0, .14); border: 1px solid rgba(255, 204, 0, .5); font-size: 14px; }
.qnudge svg { width: 20px; height: 20px; flex: none; fill: #b98900; }
.qnudge span { flex: 1; min-width: 0; }
.qnudge a { flex: none; padding: 6px 14px; border-radius: 16px; background: #111; color: #fff !important; font-weight: 600; font-size: 13px; text-decoration: none; }
.vblocked.vlocked svg { fill: #ffcc00; }

/* 1.15.0: the language picker (top bar, footer, side menu) */
.lang-pick { display: inline-flex; align-items: center; margin: 0; }
.lang-pick label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: inherit; margin: 0; }
.lang-pick svg { flex: none; opacity: .8; }
.lang-pick select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--yt-line, rgba(128,128,128,.3)); color: inherit; border-radius: 18px; padding: 5px 12px; font: inherit; font-size: 13px; width: auto; min-width: 0; cursor: pointer; }
.lang-pick select option { color: #0f0f0f; background: #fff; }
.lang-pick.in-topbar { margin: 0 4px; }
.lang-pick.in-side { padding: 0 0 10px; }
@media (max-width: 656px) { .lang-pick.in-topbar select { max-width: 84px; padding: 4px 8px; } .lang-pick.in-topbar svg { display: none; } }