:root {
    --ytm-bg: #030303;
    --ytm-raised: #1d1d1d;
    --ytm-bar: #212121;
    --ytm-hover: #2a2a2a;
    --ytm-text: #fff;
    --ytm-muted: #aaa;
    --ytm-red: #ff0033;
    --ytm-chip: #2a2a2a;
    --ytm-line: #3e3e3e;

    /* Transition timing for ultra-smooth iPhone feel */
    --ytm-transition-fast: 100ms;
    --ytm-transition-normal: 180ms;
    --ytm-transition-slow: 280ms;
    --ytm-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ytm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ytm-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ytm-ease-decel: cubic-bezier(0, 0, 0.2, 1);
    --ytm-ease-ios: cubic-bezier(0.28, 0.11, 0.32, 1);

    /* Safe-area tokens (PWA / notch) — pair with env() in fixed chrome */
    --ytm-safe-top: env(safe-area-inset-top, 0px);
    --ytm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ytm-safe-left: env(safe-area-inset-left, 0px);
    --ytm-safe-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body.ytm-page {
    height: 100%;
    background: var(--ytm-bg) !important;
    color: var(--ytm-text) !important;
    font-family: Roboto, "YouTube Sans", system-ui, sans-serif;
    overflow: hidden;
    color-scheme: dark;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Always dark — ignore site light theme on this page */
body.ytm-page,
body.ytm-page * {
    --mh-page-bg: #030303;
    --mh-page-text: #ffffff;
    --mh-page-muted: #aaaaaa;
    --mh-surface: #1d1d1d;
    --mh-border: rgba(255, 255, 255, 0.12);
    --mh-btn-text: #ffffff;
}

body.ytm-page main,
body.ytm-page .ytm-main,
body.ytm-page .ytm-layout,
body.ytm-page .ytm-view,
body.ytm-page .ytm-sec {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
}

body.ytm-page .ytm-rail {
    background: transparent !important;
    color: #fff !important;
    width: 246px !important;
}

body.ytm-page main.ytm-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 28px 96px !important;
}

body.ytm-page.mh-phone-mode main.ytm-main {
    padding: 4px 16px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

body.ytm-page .ytm-heading,
body.ytm-page .ytm-sec-title,
body.ytm-page .ytm-logo,
body.ytm-page .ytm-nav-btn,
body.ytm-page .ytm-account,
body.ytm-page .ytm-status,
body.ytm-page .ytm-row,
body.ytm-page .ytm-row-title,
body.ytm-page .ytm-card-title,
body.ytm-page .ytm-now-title,
body.ytm-page .ytm-queue-title,
body.ytm-page .ytm-phone-word,
body.ytm-page .ytm-phone-page,
body.ytm-page .ytm-tile-title,
body.ytm-page .ytm-tab,
body.ytm-page .ytm-suggest button {
    color: #fff !important;
}

body.ytm-page .ytm-status { color: #aaa !important; }
body.ytm-page .ytm-status.err { color: #ff8a80 !important; }
body.ytm-page .ytm-row-artist,
body.ytm-page .ytm-card-artist,
body.ytm-page .ytm-now-artist,
body.ytm-page .ytm-dur,
body.ytm-page .ytm-muted,
body.ytm-page .ytm-account.guest,
body.ytm-page .ytm-site-home-copy small {
    color: #aaa !important;
}

body.ytm-page .ytm-chip {
    background: #2a2a2a !important;
    color: #fff !important;
}
body.ytm-page .ytm-chip.on,
body.ytm-page .ytm-chip:hover {
    background: #fff !important;
    color: #111 !important;
}

body.ytm-page .ytm-nav-btn,
body.ytm-page .ytm-tab,
body.ytm-page .ytm-icon,
body.ytm-page .ytm-like,
body.ytm-page .ytm-now,
body.ytm-page .ytm-card,
body.ytm-page .ytm-row,
body.ytm-page .ytm-visual-hit,
body.ytm-page .ytm-sheet-top button {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.ytm-page .ytm-tile {
    background: #111 !important;
    color: #fff !important;
    border: 0 !important;
}

body.ytm-page .ytm-card {
    border: 0 !important;
    padding: 0 !important;
}

body.ytm-page .ytm-nav-btn.on,
body.ytm-page .ytm-nav-btn:hover {
    background: #2a2a2a !important;
}

body.ytm-page .ytm-search input {
    background: #1d1d1d !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 2px !important;
}

body.ytm-page .ytm-player {
    background: var(--ytm-bar) !important;
    color: #fff !important;
}

body.ytm-page .ytm-suggest {
    background: #1f1f1f !important;
    color: #fff !important;
}

body.ytm-page .ytm-sheet,
body.ytm-page .ytm-tabs {
    background: #030303 !important;
    color: #fff !important;
}

body.ytm-page .ytm-play.ytm-icon {
    background: transparent !important;
    color: #fff !important;
}

body.ytm-page .ytm-sheet-transport .ytm-play {
    background: #fff !important;
    color: #111 !important;
}

body.ytm-page .ytm-tab:not(.on) {
    color: #aaa !important;
}

body.ytm-page {
    padding-top: 52px;
    -webkit-font-smoothing: antialiased;
}

body.ytm-page.mh-phone-mode {
    padding-top: 46px !important;
}

body.ytm-page.mh-phone-mode main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.ytm-page.mh-phone-mode button,
body.ytm-page.mh-phone-mode input,
body.ytm-page.mh-phone-mode select {
    min-height: 0 !important;
    font-size: inherit !important;
}

body.ytm-page .ytm-heading,
body.ytm-page .ytm-logo,
body.ytm-page .ytm-row-title,
body.ytm-page .ytm-now-title,
body.ytm-page .ytm-queue-title,
body.ytm-page .ytm-sheet h2,
body.ytm-page .ytm-sec-title {
    font-weight: 700;
}

.ytm-layout {
    display: flex;
    height: calc(100dvh - 52px);
    min-height: 0;
}

body.mh-phone-mode .ytm-layout {
    height: calc(100dvh - 46px);
}

.ytm-rail {
    width: 246px;
    flex-shrink: 0;
    padding: 18px 8px 88px;
    overflow: auto;
}

body.mh-phone-mode .ytm-rail { display: none; }

.ytm-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 18px;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.ytm-logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ytm-red);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    font: 800 13px/1 Arial, "Helvetica Neue", sans-serif;
}

.ytm-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: transparent;
    color: var(--ytm-text);
    font: 500 15px/1 Roboto, sans-serif;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-out);
    -webkit-user-select: none;
    user-select: none;
}

.ytm-nav-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}
.ytm-nav-btn.on, .ytm-nav-btn:hover { background: var(--ytm-hover); }
.ytm-nav-btn:active {
    transform: scale(0.97);
}
.ytm-nav-btn:active svg {
    transform: scale(0.92);
}

a.ytm-nav-btn.ytm-site-home {
    margin-top: 10px;
    text-decoration: none;
    color: var(--ytm-muted);
    border: 1px solid #2e2e2e;
}

a.ytm-nav-btn.ytm-site-home:hover {
    color: #fff;
    background: var(--ytm-hover);
}

.ytm-site-home-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #171717;
    border: 1px solid #2a2a2a;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                border-color var(--ytm-transition-fast) var(--ytm-ease-out);
    will-change: transform;
}

.ytm-site-home-card:active {
    transform: scale(0.97);
    background: #222;
    border-color: #3a3a3a;
}

.ytm-site-home-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff0033, #ff5a36);
    display: grid;
    place-items: center;
    font: 800 15px/1 Arial, "Helvetica Neue", sans-serif;
    flex-shrink: 0;
}

.ytm-site-home-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ytm-site-home-copy strong {
    font-size: 1rem;
    font-weight: 600;
}

.ytm-site-home-copy small {
    color: var(--ytm-muted);
    font-size: 0.8rem;
}

.ytm-main {
    flex: 1;
    min-width: 0;
    overflow: auto;
    overflow-x: hidden;
    padding: 4px 28px 96px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

body.mh-phone-mode .ytm-main {
    padding: 4px 16px calc(140px + env(safe-area-inset-bottom, 0px));
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

.ytm-phone-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 10px;
}

body.mh-phone-mode .ytm-phone-head { display: flex; }

.ytm-phone-head h1 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ytm-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0 14px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(var(--ytm-bg) 72%, transparent);
}

body.mh-phone-mode .ytm-top { display: none; }
body.mh-phone-mode.search-on .ytm-top {
    display: flex;
    padding-top: 4px;
}
body.mh-phone-mode.search-on .ytm-phone-head { display: none; }

.ytm-search {
    position: relative;
    flex: 1;
    max-width: 640px;
    margin: 0 auto;
}

.ytm-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 22px;
    height: 22px;
    fill: var(--ytm-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ytm-search input {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: var(--ytm-raised);
    color: #fff;
    font: 400 16px/1 Roboto, sans-serif;
    padding: 0 18px 0 48px;
    outline: none;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                box-shadow var(--ytm-transition-fast) var(--ytm-ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.ytm-search input:focus {
    background: #252525;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.ytm-search input::placeholder { color: #8b8b8b; }

.ytm-account {
    color: var(--ytm-muted);
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ytm-account .ytm-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: border-color var(--ytm-transition-fast) var(--ytm-ease-out);
}

.ytm-account:hover .ytm-avatar-img {
    border-color: rgba(255, 255, 255, 0.4);
}

.ytm-account.saved { color: #9ae6b4; }
.ytm-account.guest:hover { color: #fff; }

.ytm-suggest {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #1f1f1f;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    z-index: 20;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out),
                transform var(--ytm-transition-normal) var(--ytm-ease-out);
}

.ytm-suggest.on {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ytm-suggest button {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    padding: 12px 16px;
    font: 400 15px/1.2 Roboto, sans-serif;
    cursor: pointer;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out);
    -webkit-user-select: none;
    user-select: none;
}

.ytm-suggest button:hover { background: #2a2a2a; }
.ytm-suggest button:active { background: #333; }

.ytm-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.ytm-chips::-webkit-scrollbar { display: none; }

.ytm-chips .ytm-chip {
    scroll-snap-align: start;
}

.ytm-chip {
    flex-shrink: 0;
    border: 0;
    background: var(--ytm-chip);
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font: 500 14px/1 Roboto, sans-serif;
    cursor: pointer;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                color var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}

.ytm-chip.on, .ytm-chip:hover { background: #fff; color: #111; }
.ytm-chip:active {
    transform: scale(0.94);
}

.ytm-view { display: none; }
.ytm-view.on { display: block; }

.ytm-sec {
    margin-bottom: 22px;
}

.ytm-sec-title, .ytm-heading, .ytm-queue-title {
    font-size: 1.25rem;
    margin: 4px 0 12px;
}

.ytm-status {
    color: var(--ytm-muted);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.ytm-status.err { color: #ff8a80; }

.ytm-cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.ytm-cards .ytm-card {
    scroll-snap-align: start;
}

.ytm-cards.ytm-rec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    overflow: visible;
    padding-bottom: 4px;
}

.ytm-cards.ytm-rec-grid .ytm-card {
    flex: none;
    width: auto;
    max-width: none;
}

body.mh-phone-mode .ytm-cards.ytm-rec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ytm-cards::-webkit-scrollbar { display: none; }

.ytm-card {
    flex: 0 0 148px;
    width: 148px;
    max-width: 148px;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                opacity var(--ytm-transition-normal) var(--ytm-ease-out);
    will-change: transform;
}

.ytm-card:active {
    transform: scale(0.96);
}

.ytm-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: #111;
    display: block;
    transition: transform var(--ytm-transition-normal) var(--ytm-ease-out),
                box-shadow var(--ytm-transition-normal) var(--ytm-ease-out);
}

body:not(.mh-phone-mode) .ytm-card {
    flex-basis: 180px;
    width: 180px;
    max-width: 180px;
}

.ytm-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    margin-top: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
}

.ytm-card-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--ytm-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

.ytm-list { display: flex; flex-direction: column; }

body:not(.mh-phone-mode) .ytm-list.quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.ytm-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
    will-change: transform, background;
}

.ytm-row:hover, .ytm-row.on { background: var(--ytm-hover); }
.ytm-row:active {
    transform: scale(0.985);
    background: var(--ytm-hover);
}
.ytm-row.on .ytm-row-title { color: var(--ytm-red); }

.ytm-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: #111;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-out);
}

.ytm-row:active .ytm-thumb {
    transform: scale(0.94);
}

.ytm-row-meta { min-width: 0; }
.ytm-row-title, .ytm-row-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ytm-row-title { font-size: 0.95rem; }
.ytm-row-artist { color: var(--ytm-muted); font-size: 0.8rem; margin-top: 2px; }
.ytm-dur { color: var(--ytm-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.ytm-row-preload {
    display: block;
    margin-top: 5px;
}

.ytm-preload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.ytm-preload.ready::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.2);
}

.ytm-preload-track {
    flex: 1;
    min-width: 56px;
    max-width: 110px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.ytm-preload-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--ytm-red, #ff0033);
    transition: width 0.2s ease;
}

.ytm-preload-pct {
    color: var(--ytm-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.2em;
}

.ytm-preload.loading .ytm-preload-track {
    position: relative;
}

.ytm-bg-hint,
#ytm-bg-hint,
#ytm-bg-hint.on,
body.ytm-page #ytm-bg-hint,
body.ytm-page #ytm-bg-hint.on {
    display: none !important;
}

.ytm-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--ytm-bar);
    border-top: 1px solid #000;
    transition: transform var(--ytm-transition-normal) var(--ytm-ease-ios),
                opacity var(--ytm-transition-normal) var(--ytm-ease-out);
    will-change: transform;
    contain: layout style;
}

body:not(.mh-phone-mode) .ytm-player > .ytm-progress { display: none; }

.ytm-now-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ytm-now-row .ytm-now { flex: 1; min-width: 0; }

body.mh-phone-mode .ytm-player {
    left: 8px;
    right: 8px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    border-radius: 8px;
    border: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.ytm-progress {
    height: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

body.mh-phone-mode .ytm-player > .ytm-progress { height: 8px; }

.ytm-progress-track {
    width: 100%;
    height: 3px;
    background: #505050;
    border-radius: 2px;
    overflow: hidden;
    transition: height var(--ytm-transition-fast) var(--ytm-ease-out);
}

.ytm-player:hover .ytm-progress-track { height: 5px; }

.ytm-progress-fill {
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: inherit;
    transition: width 0.15s linear;
    will-change: width;
}

.ytm-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr) minmax(160px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 12px 8px;
    min-height: 64px;
}

body.mh-phone-mode .ytm-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 8px 8px;
}

.ytm-now {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

.ytm-now:active {
    transform: scale(0.98);
}

.ytm-art-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

.ytm-now:active .ytm-art-wrap {
    transform: scale(0.94);
}

body:not(.mh-phone-mode) .ytm-art-wrap {
    width: 56px;
    height: 56px;
}

.ytm-art-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.ytm-embed-host {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    background: #000;
    pointer-events: none;
    opacity: 0;
}

.ytm-embed-host.on {
    opacity: 1;
    pointer-events: none;
}

.ytm-embed-host iframe,
.ytm-embed-host video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
    pointer-events: none;
}

.ytm-visual-hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    color: #fff;
}

.ytm-visual-cue {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
    will-change: transform, opacity;
}

.ytm-visual-cue.on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ytm-visual-cue svg {
    width: 38px;
    height: 38px;
    fill: #fff;
}

.ytm-sheet-visual {
    position: relative;
    width: 100%;
    max-width: 920px;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.ytm-sheet-visual.has-video .ytm-sheet-art {
    opacity: 0;
}

.ytm-sheet-visual .ytm-sheet-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    transition: opacity 0.22s ease;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

.ytm-engine { display: none !important; }

#ytm-audio,
#ytm-audio-next {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    opacity: 0.01;
    pointer-events: none;
}

.ytm-engine.on {
    opacity: 1;
    pointer-events: auto;
}

body.mh-phone-mode .ytm-engine {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    width: 240px;
    height: 135px;
}

#ytm-player,
#ytm-player iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

.ytm-now-meta { min-width: 0; }
.ytm-now-title, .ytm-now-artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ytm-now-title { font-size: 0.92rem; font-weight: 500; }
.ytm-now-artist { font-size: 0.78rem; color: var(--ytm-muted); margin-top: 2px; }

.ytm-like {
    border: 0;
    background: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                color var(--ytm-transition-normal) var(--ytm-ease-out);
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}

.ytm-like svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    transition: transform var(--ytm-transition-normal) var(--ytm-ease-spring);
}
.ytm-like:active {
    transform: scale(0.85);
}
.ytm-like:active svg {
    transform: scale(1.15);
}
.ytm-like.on { color: var(--ytm-red); }
.ytm-like.on svg {
    animation: ytm-like-pop 0.35s var(--ytm-ease-spring);
}

.ytm-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ytm-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.mh-phone-mode .ytm-controls { display: none; }
body.mh-phone-mode .ytm-extra { display: none; }
body.mh-phone-mode .ytm-desk-only { display: none !important; }

.ytm-phone-play {
    display: none !important;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}
body.mh-phone-mode .ytm-phone-play {
    display: grid !important;
}
.ytm-phone-play:active {
    transform: scale(0.85);
}

.ytm-icon {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                opacity var(--ytm-transition-fast) var(--ytm-ease-out);
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}

.ytm-icon:hover { background: rgba(255,255,255,0.08); }
.ytm-icon:active {
    transform: scale(0.88);
    background: rgba(255,255,255,0.12);
}
.ytm-icon:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ytm-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

.ytm-play svg { width: 28px; height: 28px; }
.ytm-play:active svg {
    animation: ytm-play-pulse 0.2s var(--ytm-ease-spring);
}

.ytm-scrub {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 560px);
    color: var(--ytm-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

body.mh-phone-mode .ytm-scrub { display: none; }

.ytm-scrub .ytm-progress { flex: 1; display: flex; }

.ytm-extra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--ytm-muted);
}

.ytm-share {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ytm-muted);
    transition: color var(--ytm-transition-fast) var(--ytm-ease-out),
                background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

.ytm-share:hover {
    color: #fff;
    background: var(--ytm-hover);
}

.ytm-share:active {
    transform: scale(0.9);
}

.ytm-share svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ytm-tabs {
    display: none;
}

body.mh-phone-mode .ytm-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 4px 8px env(safe-area-inset-bottom, 0px);
    background: #030303;
    border-top: 1px solid #1a1a1a;
}

.ytm-tab {
    flex: 1;
    border: 0;
    background: none;
    color: #aaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: 500 11px/1 Roboto, sans-serif;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

.ytm-tab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}
.ytm-tab.on { color: #fff; }
.ytm-tab:active {
    transform: scale(0.9);
}
.ytm-tab:active svg {
    transform: scale(0.85);
}

.ytm-sheet {
    position: fixed;
    inset: 0;
    z-index: 6800;
    background: #030303 !important;
    color: #fff !important;
    display: none;
    flex-direction: column;
    padding: 8px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    will-change: transform, opacity;
    contain: layout style;
}

.ytm-sheet.on {
    display: flex;
    animation: ytm-sheet-up 0.32s var(--ytm-ease-ios) forwards;
}

.ytm-sheet-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

.ytm-sheet-top button {
    background: none;
    border: 0;
    color: #fff;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.ytm-sheet-top button svg { width: 28px; height: 28px; fill: currentColor; }

.ytm-sheet-art {
    width: min(100%, 360px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    margin: 12px auto 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    transition: transform var(--ytm-transition-slow) var(--ytm-ease-out),
                opacity var(--ytm-transition-normal) var(--ytm-ease-out);
    will-change: transform, opacity;
}

.ytm-sheet h2 {
    font-size: 1.35rem;
    text-align: left;
    color: #fff !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ytm-sheet p {
    color: var(--ytm-muted) !important;
    margin-top: 4px;
}

.ytm-sheet-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ytm-sheet-meta div { min-width: 0; flex: 1; }

.ytm-sheet .ytm-scrub {
    display: flex;
    width: 100%;
    margin: 22px 0 8px;
}

.ytm-sheet-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
}

.ytm-sheet-transport .ytm-play {
    width: 64px;
    height: 64px;
    background: #fff;
    color: #111;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                box-shadow var(--ytm-transition-normal) var(--ytm-ease-out);
}

.ytm-sheet-transport .ytm-play:active {
    transform: scale(0.92);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
}

.ytm-sheet-transport .ytm-play svg { width: 34px; height: 34px; }

.ytm-sheet-transport .ytm-icon:active {
    transform: scale(0.85);
}

.ytm-sheet-queue {
    margin-top: 8px;
    overflow: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

.ytm-home-queue { display: none; }

body.ytm-page body.ytm-page {
    padding-top: 0 !important;
}

body.ytm-page .ytm-layout,
body.ytm-page.mh-phone-mode .ytm-layout {
    height: 100dvh;
}

/* iOS Home Screen web app: clear the status bar (time / battery). */
html.ytm-ios body.ytm-page body.ytm-page.mh-phone-mode main.ytm-main {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

html.ytm-ios body.ytm-page.mh-phone-mode .ytm-phone-head {
    padding-top: 2px;
}

body.ytm-page #mh-navbar,
body.ytm-page .mh-site-version,
body.ytm-page footer {
    display: none !important;
}

.ytm-phone-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ytm-phone-word {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.ytm-phone-page { display: none; font-size: 1.45rem; }

body.mh-phone-mode.ytm-home .ytm-phone-page { display: none; }
body.mh-phone-mode:not(.ytm-home) .ytm-phone-brand { display: none; }
body.mh-phone-mode:not(.ytm-home) .ytm-phone-page { display: block; }

.ytm-account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1aa3a8;
    color: #fff !important;
    display: grid;
    place-items: center;
    text-decoration: none;
    font: 700 0.92rem/1 Roboto, sans-serif;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

.ytm-account-avatar:active {
    transform: scale(0.88);
}

.ytm-account-avatar .ytm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ytm-account-avatar .ytm-signin-text {
    font: 700 0.65rem/1 Roboto, sans-serif;
    white-space: nowrap;
}

.ytm-account-avatar.saved {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.ytm-account-avatar.saved:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.ytm-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
    will-change: transform;
}

.ytm-tile:active {
    transform: scale(0.96);
}

.ytm-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ytm-transition-slow) var(--ytm-ease-out);
}

.ytm-tile:active img {
    transform: scale(1.04);
}

.ytm-tile-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 8px 8px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

body.mh-phone-mode .ytm-phone-head {
    padding: 4px 2px 8px;
}

body.mh-phone-mode .ytm-phone-head .ytm-logo-mark {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

body.mh-phone-mode .ytm-chip {
    border-radius: 999px;
    padding: 8px 16px;
    background: #272727 !important;
}

body.mh-phone-mode .ytm-chips {
    padding: 2px 0 14px;
    gap: 10px;
}

body.mh-phone-mode .ytm-sec-title,
body.mh-phone-mode .ytm-heading {
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    margin: 2px 0 12px;
}

body.mh-phone-mode .ytm-cards.ytm-speed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    overflow: visible;
    padding-bottom: 2px;
}

.ytm-bg-hint { display: none !important; }

body.mh-phone-mode main.ytm-main {
    padding: 2px 12px calc(132px + env(safe-area-inset-bottom, 0px)) !important;
}

body.mh-phone-mode .ytm-player {
    left: 8px;
    right: 8px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    border-radius: 10px;
    background: #1f1f1f;
}

body.mh-phone-mode .ytm-art-wrap {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

body.mh-phone-mode.ytm-now-open .ytm-player {
    display: none;
}

.ytm-sheet-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 28px;
}

.ytm-sheet-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ytm-sheet-side {
    width: 360px;
    max-width: 42%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ytm-sheet-from {
    color: #aaa;
    font-size: 0.82rem;
    margin: 4px 0 10px;
}

.ytm-sheet-from strong {
    color: #fff;
    font-weight: 700;
}

body:not(.mh-phone-mode) .ytm-sheet {
    inset: 126px 0 72px 246px;
    z-index: 40;
    padding: 8px 28px 12px 8px;
    background: #030303 !important;
}

body.ytm-now-open .ytm-top {
    display: none !important;
}

body.ytm-now-open:not(.mh-phone-mode) .ytm-main {
    overflow: hidden;
}

body.ytm-now-open:not(.mh-phone-mode) .ytm-sheet {
    top: 52px;
    right: 0;
    bottom: 0;
    left: 246px;
}

html.ytm-app-shell body.ytm-now-open:not(.mh-phone-mode) .ytm-sheet {
    top: 0;
}

body.mh-phone-mode.ytm-now-open .ytm-sheet {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

html.ytm-app-shell body:not(.mh-phone-mode) .ytm-sheet {
    top: 74px;
}

body:not(.mh-phone-mode) .ytm-sheet-top {
    display: none;
}

body:not(.mh-phone-mode) .ytm-sheet-phone-ui {
    display: none;
}

body:not(.mh-phone-mode) .ytm-sheet-art {
    width: 100%;
    height: 100%;
}

body.mh-phone-mode .ytm-sheet {
    inset: 0 0 calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 75;
    padding: 4px 18px 16px;
}

body.mh-phone-mode .ytm-sheet-body {
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

body.mh-phone-mode .ytm-sheet-stage {
    flex-shrink: 0;
}

body.mh-phone-mode .ytm-sheet-side {
    width: 100%;
    max-width: none;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

body.mh-phone-mode .ytm-sheet-phone-ui {
    width: 100%;
}

body.mh-phone-mode .ytm-sheet-visual {
    width: min(100%, 360px);
    aspect-ratio: 16 / 9;
    margin: 8px auto 18px;
}

body.mh-phone-mode .ytm-sheet-art {
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
}

body.mh-phone-mode .ytm-sheet-phone-ui .ytm-scrub {
    display: flex;
    width: 100%;
}

body:not(.mh-phone-mode) .ytm-search input {
    height: 44px;
    border-radius: 24px;
    background: #1d1d1d !important;
}

body:not(.mh-phone-mode) .ytm-rail {
    padding-top: 14px;
}

body:not(.mh-phone-mode) .ytm-nav-btn {
    border-radius: 12px;
}

/* ==========================================================================
   Monty Music — UI polish (YTM dark). Scoped body.ytm-page + phone first.
   ========================================================================== */

@keyframes ytm-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes ytm-like-pop {
    0% { transform: scale(1); }
    25% { transform: scale(1.35); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes ytm-play-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes ytm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ytm-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ytm-sheet-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ytm-row-in {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ytm-card-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ytm-buffer-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes ytm-marquee-scroll {
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(min(0px, calc(-100% + 100cqw))); }
}

@keyframes ytm-eq-bounce {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
}

/* 21 — App shell overscroll lock on root scrollers */
body.ytm-page {
    background: var(--ytm-bg);
    overscroll-behavior-y: none;
}

body.ytm-page body.ytm-page {
    overscroll-behavior-y: none;
}

body.ytm-page body.ytm-page.mh-phone-mode .ytm-main {
    overscroll-behavior-y: contain;
}

/* 10 — Body lock while now-playing sheet open */
body.ytm-page body.ytm-page.ytm-now-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.ytm-page body.ytm-page.mh-phone-mode.ytm-now-open .ytm-main {
    overflow: hidden;
}

/* 2 — Focus-visible rings (keyboard / a11y; not mouse :focus) */
body.ytm-page .ytm-icon:focus-visible,
body.ytm-page .ytm-like:focus-visible,
body.ytm-page .ytm-tab:focus-visible,
body.ytm-page .ytm-chip:focus-visible,
body.ytm-page .ytm-row:focus-visible,
body.ytm-page .ytm-card:focus-visible,
body.ytm-page .ytm-nav-btn:focus-visible,
body.ytm-page .ytm-now:focus-visible,
body.ytm-page .ytm-phone-play:focus-visible,
body.ytm-page .ytm-sheet-top button:focus-visible,
body.ytm-page .ytm-suggest button:focus-visible,
body.ytm-page .ytm-visual-hit:focus-visible,
body.ytm-page a.ytm-account:focus-visible,
body.ytm-page a.ytm-site-home-card:focus-visible {
    outline: 2px solid var(--ytm-red);
    outline-offset: 2px;
}

body.ytm-page .ytm-search input:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 0;
}

/* 17 — Faster taps, fewer double-tap zoom artifacts */
body.ytm-page .ytm-icon,
body.ytm-page .ytm-like,
body.ytm-page .ytm-tab,
body.ytm-page .ytm-chip,
body.ytm-page .ytm-row,
body.ytm-page .ytm-card,
body.ytm-page .ytm-nav-btn,
body.ytm-page .ytm-now,
body.ytm-page .ytm-phone-play,
body.ytm-page .ytm-sheet-top button,
body.ytm-page .ytm-progress,
body.ytm-page .ytm-visual-hit {
    touch-action: manipulation;
}

/* 3 — Buffering pulse on progress + optional dot */
body.ytm-page body.ytm-buffering .ytm-progress-fill {
    animation: ytm-buffer-pulse 1.1s ease-in-out infinite;
}

body.ytm-page body.ytm-buffering .ytm-art-wrap::after,
body.ytm-page body.ytm-buffering .ytm-sheet-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    animation: ytm-buffer-pulse 1.1s ease-in-out infinite;
    z-index: 3;
    border-radius: inherit;
}

.ytm-buffering-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ytm-red);
    flex-shrink: 0;
    animation: ytm-buffer-pulse 1.1s ease-in-out infinite;
}

/* 4 — Offline banner */
#ytm-offline-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 10px 16px;
    padding-top: calc(10px + var(--ytm-safe-top));
    padding-left: calc(16px + var(--ytm-safe-left));
    padding-right: calc(16px + var(--ytm-safe-right));
    background: #1a1a1a;
    color: #fff;
    font: 500 0.82rem/1.35 Roboto, sans-serif;
    text-align: center;
    border-bottom: 1px solid #2e2e2e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

#ytm-offline-banner:not([hidden]),
body.ytm-page #ytm-offline-banner.show,
body.ytm-page #ytm-offline-banner.on {
    display: block;
}

body.ytm-page.mh-phone-mode.ytm-offline-visible {
    padding-top: calc(46px + 40px + var(--ytm-safe-top));
}

/* 5 — Toast above mini + tabs */
#ytm-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    bottom: calc(56px + 72px + var(--ytm-safe-bottom));
    z-index: 90;
    max-width: min(92vw, 360px);
    padding: 10px 16px;
    border-radius: 8px;
    background: #2a2a2a;
    color: #fff;
    font: 500 0.85rem/1.35 Roboto, sans-serif;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.ytm-page body:not(.mh-phone-mode) #ytm-toast {
    bottom: calc(24px + var(--ytm-safe-bottom));
}

#ytm-toast:not([hidden]),
#ytm-toast.show,
#ytm-toast.on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* 6 — Skeleton loaders */
.ytm-skel {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2a2a2a 45%,
        #1a1a1a 90%
    );
    background-size: 200% 100%;
    animation: ytm-shimmer 1.35s ease-in-out infinite;
    border-radius: 6px;
}

.ytm-skel-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    padding: 8px;
}

.ytm-skel-row .ytm-skel:first-child {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.ytm-skel-row .ytm-skel:nth-child(2) {
    height: 14px;
    width: 72%;
}

.ytm-skel-row .ytm-skel:nth-child(3) {
    height: 12px;
    width: 32px;
    justify-self: end;
}

.ytm-skel-card {
    flex: 0 0 148px;
    width: 148px;
}

.ytm-skel-card .ytm-skel:first-child {
    aspect-ratio: 1;
    width: 100%;
}

.ytm-skel-card .ytm-skel:nth-child(2) {
    height: 12px;
    width: 90%;
    margin-top: 8px;
}

.ytm-skel-card .ytm-skel:nth-child(3) {
    height: 10px;
    width: 60%;
    margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .ytm-skel {
        animation: none;
        background: #222;
    }
}

/* 7 — Larger scrub hit area + visible thumb (mini + sheet) */
.ytm-progress {
    position: relative;
    padding: 8px 0;
    margin: -8px 0;
}

.ytm-progress-track {
    position: relative;
}

.ytm-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%) scale(0);
    transition: transform 0.12s ease;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.ytm-player:hover .ytm-progress-thumb,
.ytm-sheet .ytm-progress:hover .ytm-progress-thumb,
.ytm-progress:focus-within .ytm-progress-thumb,
body.ytm-page.mh-phone-mode .ytm-player .ytm-progress-thumb {
    transform: translateY(-50%) scale(1);
}

body.ytm-page.mh-phone-mode .ytm-player > .ytm-progress {
    height: 14px;
    padding: 4px 0;
}

body.ytm-page.mh-phone-mode .ytm-player > .ytm-progress .ytm-progress-track {
    height: 4px;
}

body.ytm-page.mh-phone-mode .ytm-player > .ytm-progress .ytm-progress-thumb {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    transform: translateY(-50%) scale(1);
}

/* 8 — Title marquee when long */
.ytm-now-title.ytm-marquee,
.ytm-sheet-meta h2.ytm-marquee {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
    container-type: inline-size;
}

.ytm-now-title.ytm-marquee > span,
.ytm-sheet-meta h2.ytm-marquee > span {
    display: inline-block;
    animation: ytm-marquee-scroll 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ytm-now-title.ytm-marquee,
    .ytm-sheet-meta h2.ytm-marquee {
        text-overflow: ellipsis;
    }

    .ytm-now-title.ytm-marquee > span,
    .ytm-sheet-meta h2.ytm-marquee > span {
        animation: none;
        transform: none;
    }
}

/* 9 — Sheet swipe transform */
.ytm-sheet {
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

body.mh-phone-mode .ytm-sheet.on {
    transform: translateY(0);
}

body:not(.mh-phone-mode) .ytm-sheet {
    transform: none;
    transition: opacity 0.18s ease;
}

.ytm-sheet.dragging {
    transition: none;
}

/* 11 — Chip row edge fades */
body.ytm-page.mh-phone-mode .ytm-chips {
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%
    );
}

/* 12 — Playing row indicator */
.ytm-row.on {
    position: relative;
    padding-left: 12px;
}

.ytm-row.on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 28px;
    margin-top: -14px;
    border-radius: 2px;
    background: var(--ytm-red);
}

.ytm-row.on .ytm-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    margin-right: 6px;
    vertical-align: middle;
}

.ytm-row.on .ytm-eq span {
    display: block;
    width: 2px;
    height: 100%;
    background: var(--ytm-red);
    border-radius: 1px;
    transform-origin: bottom;
    animation: ytm-eq-bounce 0.9s ease-in-out infinite;
}

.ytm-row.on .ytm-eq span:nth-child(2) { animation-delay: 0.15s; }
.ytm-row.on .ytm-eq span:nth-child(3) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .ytm-row.on .ytm-eq span {
        animation: none;
        transform: scaleY(0.65);
    }
}

/* 13 — Empty states */
.ytm-empty {
    padding: 32px 16px 40px;
    text-align: center;
    color: var(--ytm-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ytm-empty strong {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* 14 — Desktop card hover play overlay */
body:not(.mh-phone-mode) .ytm-card {
    position: relative;
}

body:not(.mh-phone-mode) .ytm-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

body:not(.mh-phone-mode) .ytm-card:hover::after,
body:not(.mh-phone-mode) .ytm-card:focus-visible::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
}

/* 15 — Reduced motion: tabs + sheet */
@media (prefers-reduced-motion: reduce) {
    .ytm-tab,
    .ytm-sheet,
    #ytm-toast {
        transition: none;
    }

    body.ytm-page body.ytm-buffering .ytm-progress-fill,
    .ytm-buffering-dot {
        animation: none;
        opacity: 0.85;
    }
}

/* 16 — Phone 44px min tap targets */
body.ytm-page.mh-phone-mode .ytm-icon,
body.ytm-page.mh-phone-mode .ytm-tab,
body.ytm-page.mh-phone-mode .ytm-like,
body.ytm-page.mh-phone-mode .ytm-phone-play,
body.ytm-page.mh-phone-mode .ytm-sheet-top button {
    min-width: 44px;
    min-height: 44px;
}

body.ytm-page.mh-phone-mode .ytm-tab {
    padding: 4px 0;
}

/* 19 — Live region / status spacing */
.ytm-live,
[aria-live="polite"],
[aria-live="assertive"] {
    margin: 0;
}

body.ytm-page.mh-phone-mode .ytm-status {
    margin: 8px 0 12px;
    min-height: 1.25em;
}

body.ytm-page .ytm-status + .ytm-list,
body.ytm-page .ytm-status + .ytm-cards {
    margin-top: 4px;
}

/* 20 — Library / explore empty spacing */
body.ytm-page.mh-phone-mode #ytm-view-library .ytm-empty,
body.ytm-page.mh-phone-mode #ytm-view-explore .ytm-empty,
body.ytm-page.mh-phone-mode .ytm-view-library .ytm-empty,
body.ytm-page.mh-phone-mode .ytm-view-explore .ytm-empty {
    padding-top: 48px;
    padding-bottom: 56px;
}

/* 22 — Background-play hint removed (never show on open) */
body.ytm-page #ytm-bg-hint,
body.ytm-page #ytm-bg-hint.on {
    display: none !important;
}

/* 23 — Sheet handle bar (swipe affordance) */
body.ytm-page.mh-phone-mode .ytm-sheet-top {
    position: relative;
    padding-top: 14px;
    min-height: 48px;
}

body.ytm-page.mh-phone-mode .ytm-sheet-top::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #4a4a4a;
    pointer-events: none;
}

/* 24 — Art fallback gray placeholder */
.ytm-thumb,
.ytm-card img,
.ytm-tile img,
.ytm-art-wrap,
.ytm-sheet-art,
.ytm-art-fallback {
    background-color: #2a2a2a;
}

.ytm-art-fallback[src=""],
.ytm-art-fallback:not([src]) {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* 25 — Phone spacing rhythm (8 / 12 / 16 / 24) */
body.ytm-page.mh-phone-mode .ytm-sec {
    margin-bottom: 24px;
}

body.ytm-page.mh-phone-mode .ytm-sec-title,
body.ytm-page.mh-phone-mode .ytm-heading {
    margin-bottom: 12px;
}

body.ytm-page.mh-phone-mode .ytm-chips {
    margin-bottom: 8px;
}

body.ytm-page.mh-phone-mode .ytm-list .ytm-row {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.ytm-page.mh-phone-mode .ytm-cards {
    gap: 12px;
}

body.ytm-page.mh-phone-mode .ytm-sheet-phone-ui .ytm-scrub {
    margin-top: 16px;
    margin-bottom: 12px;
}

body.ytm-page.mh-phone-mode .ytm-sheet-transport {
    margin-top: 12px;
    margin-bottom: 16px;
}

/* ==========================================================================
   iPhone 14 Ultra-Smooth Polish — Touch, Animations, Performance
   ========================================================================== */

/* 26 — GPU acceleration hints for animated elements */
body.ytm-page .ytm-card,
body.ytm-page .ytm-row,
body.ytm-page .ytm-chip,
body.ytm-page .ytm-icon,
body.ytm-page .ytm-like,
body.ytm-page .ytm-tab,
body.ytm-page .ytm-tile,
body.ytm-page .ytm-now,
body.ytm-page .ytm-sheet,
body.ytm-page .ytm-player {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 27 — Contain paint for performance */
body.ytm-page .ytm-list {
    contain: layout style;
}

body.ytm-page .ytm-cards {
    contain: layout;
}

body.ytm-page .ytm-row {
    contain: layout style;
}

/* 28 — Smooth text rendering */
body.ytm-page.mh-phone-mode {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 29 — ProMotion-optimized smooth transitions for 120Hz */
@supports (animation-timing-function: linear(0, 1)) {
    html.ytm-ios .ytm-sheet {
        transition-timing-function: linear(
            0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
            0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%,
            1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001
        );
    }
}

/* 30 — Disable hover effects on touch devices for cleaner feel */
@media (hover: none) and (pointer: coarse) {
    .ytm-nav-btn:hover,
    .ytm-chip:hover,
    .ytm-row:hover,
    .ytm-icon:hover,
    .ytm-suggest button:hover {
        background: inherit;
    }
    
    .ytm-chip.on:hover {
        background: #fff;
    }
    
    .ytm-nav-btn.on:hover {
        background: var(--ytm-hover);
    }
}

/* 31 — Prevent text selection on UI elements */
body.ytm-page .ytm-bar,
body.ytm-page .ytm-tabs,
body.ytm-page .ytm-sheet-transport,
body.ytm-page .ytm-sheet-top,
body.ytm-page .ytm-chips,
body.ytm-page .ytm-nav-btn,
body.ytm-page .ytm-phone-head {
    -webkit-user-select: none;
    user-select: none;
}

/* 32 — Better touch targets on phone */
body.ytm-page.mh-phone-mode .ytm-row {
    min-height: 56px;
}

body.ytm-page.mh-phone-mode .ytm-chip {
    min-height: 36px;
    min-width: 44px;
}

/* 33 — Smooth image loading */
body.ytm-page .ytm-card img,
body.ytm-page .ytm-thumb,
body.ytm-page .ytm-tile img,
body.ytm-page .ytm-sheet-art,
body.ytm-page .ytm-art-fallback {
    image-rendering: -webkit-optimize-contrast;
}

/* 34 — Row list stagger animation */
body.ytm-page .ytm-list .ytm-row {
    animation: ytm-row-in 0.25s var(--ytm-ease-out) backwards;
}

body.ytm-page .ytm-list .ytm-row:nth-child(1) { animation-delay: 0ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(2) { animation-delay: 30ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(3) { animation-delay: 60ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(4) { animation-delay: 90ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(5) { animation-delay: 120ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(6) { animation-delay: 150ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(7) { animation-delay: 180ms; }
body.ytm-page .ytm-list .ytm-row:nth-child(8) { animation-delay: 210ms; }

/* 35 — Card grid stagger animation */
body.ytm-page .ytm-cards .ytm-card {
    animation: ytm-card-in 0.2s var(--ytm-ease-out) backwards;
}

body.ytm-page .ytm-cards .ytm-card:nth-child(1) { animation-delay: 0ms; }
body.ytm-page .ytm-cards .ytm-card:nth-child(2) { animation-delay: 40ms; }
body.ytm-page .ytm-cards .ytm-card:nth-child(3) { animation-delay: 80ms; }
body.ytm-page .ytm-cards .ytm-card:nth-child(4) { animation-delay: 120ms; }
body.ytm-page .ytm-cards .ytm-card:nth-child(5) { animation-delay: 160ms; }
body.ytm-page .ytm-cards .ytm-card:nth-child(6) { animation-delay: 200ms; }

/* 36 — Smooth sheet handle press feedback */
body.ytm-page.mh-phone-mode .ytm-sheet-top::before {
    transition: background var(--ytm-transition-fast) var(--ytm-ease-out),
                transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

body.ytm-page.mh-phone-mode .ytm-sheet-top:active::before {
    background: #666;
    transform: translateX(-50%) scaleX(1.15);
}

/* 37 — Share button states */
body.ytm-page .ytm-share.copied {
    color: var(--ytm-red);
}

body.ytm-page .ytm-share.copied svg {
    animation: ytm-like-pop 0.35s var(--ytm-ease-spring);
}

/* 38 — Progress thumb active state */
body.ytm-page .ytm-progress:active .ytm-progress-thumb {
    transform: translateY(-50%) scale(1.25);
}

/* 39 — Sheet visual subtle shadow */
body.ytm-page .ytm-sheet-visual {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: box-shadow var(--ytm-transition-slow) var(--ytm-ease-out);
}

/* 40 — Empty state fade in */
body.ytm-page .ytm-empty {
    animation: ytm-fade-in 0.3s var(--ytm-ease-out);
}

/* 41 — Status text subtle animation */
body.ytm-page .ytm-status {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 42 — Toast smooth animation refinement */
body.ytm-page #ytm-toast {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out),
                transform var(--ytm-transition-normal) var(--ytm-ease-spring);
}

body.ytm-page #ytm-toast.on {
    animation: ytm-scale-in 0.2s var(--ytm-ease-spring);
}

/* 43 — Offline banner slide down */
body.ytm-page #ytm-offline-banner {
    transition: transform var(--ytm-transition-slow) var(--ytm-ease-ios),
                opacity var(--ytm-transition-normal) var(--ytm-ease-out);
    transform: translateY(-100%);
}

body.ytm-page #ytm-offline-banner.on,
body.ytm-page #ytm-offline-banner.show {
    transform: translateY(0);
}

/* 44 — Preload progress bar smooth fill */
body.ytm-page .ytm-preload-fill {
    transition: width 0.3s var(--ytm-ease-out);
}

/* 45 — Preload ready indicator pulse */
body.ytm-page .ytm-preload.ready::before {
    animation: ytm-ready-pulse 2s ease-in-out infinite;
}

@keyframes ytm-ready-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.2); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.1); }
}

/* 46 — Logo mark subtle hover */
body.ytm-page .ytm-logo-mark {
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
}

body.ytm-page .ytm-phone-brand:active .ytm-logo-mark {
    transform: scale(0.9) rotate(-5deg);
}

/* 47 — Section title smooth appearance */
body.ytm-page .ytm-sec-title,
body.ytm-page .ytm-heading {
    animation: ytm-fade-in 0.25s var(--ytm-ease-out);
}

/* 48 — Search icon subtle animation on focus */
body.ytm-page .ytm-search svg {
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                fill var(--ytm-transition-fast) var(--ytm-ease-out);
}

body.ytm-page .ytm-search:focus-within svg {
    transform: translateY(-50%) scale(1.08);
    fill: #fff;
}

/* 49 — Better press feedback on visual hit button */
body.ytm-page .ytm-visual-hit {
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

body.ytm-page .ytm-visual-hit:active {
    opacity: 0.7;
}

/* 50 — Sheet close button feedback */
body.ytm-page .ytm-sheet-top button {
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring),
                background var(--ytm-transition-fast) var(--ytm-ease-out);
    border-radius: 50%;
}

body.ytm-page .ytm-sheet-top button:active {
    transform: scale(0.85);
    background: rgba(255, 255, 255, 0.1);
}

/* 51 — Phone header smooth transition */
body.ytm-page .ytm-phone-head {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 52 — View transitions */
body.ytm-page .ytm-view {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

body.ytm-page .ytm-view.on {
    animation: ytm-fade-in 0.2s var(--ytm-ease-out);
}

/* 53 — Duration text tabular nums for no layout shift */
body.ytm-page .ytm-dur,
body.ytm-page .ytm-time-cur,
body.ytm-page .ytm-time-dur,
body.ytm-page .ytm-sheet-cur,
body.ytm-page .ytm-sheet-dur,
body.ytm-page #ytm-time-cur,
body.ytm-page #ytm-time-dur,
body.ytm-page #ytm-sheet-cur,
body.ytm-page #ytm-sheet-dur {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 54 — Smooth rail scroll */
body.ytm-page .ytm-rail {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* 55 — Sheet side panel scroll */
body.ytm-page .ytm-sheet-side {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* 56 — iOS rubber band prevention where not wanted */
body.ytm-page.mh-phone-mode.ytm-now-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* 57 — Card image loading placeholder */
body.ytm-page .ytm-card img[src=""],
body.ytm-page .ytm-card img:not([src]) {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}

/* 58 — Scrub time display smooth */
body.ytm-page .ytm-scrub span {
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out);
    min-width: 3.2em;
    text-align: center;
}

/* 59 — Queue row playing indicator glow */
body.ytm-page .ytm-row.on::before {
    box-shadow: 0 0 8px rgba(255, 0, 51, 0.4);
}

/* 60 — Better skeleton shimmer timing */
body.ytm-page .ytm-skel {
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}

/* 61 — Section margins smooth */
body.ytm-page .ytm-sec {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 62 — Art crossfade hint */
body.ytm-page .ytm-art-fallback {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 63 — Mini player phone mode shadow */
body.ytm-page.mh-phone-mode .ytm-player {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

/* 64 — Touch action for faster taps */
body.ytm-page button,
body.ytm-page a,
body.ytm-page [role="button"] {
    touch-action: manipulation;
}

/* 65 — Prevent zoom on input double tap */
body.ytm-page input[type="search"],
body.ytm-page input[type="text"] {
    font-size: 16px;
    touch-action: manipulation;
}

/* 66 — Better focus states for keyboard a11y */
body.ytm-page *:focus {
    outline: none;
}

body.ytm-page *:focus-visible {
    outline: 2px solid var(--ytm-red);
    outline-offset: 2px;
}

/* 67 — Smooth hiding of elements */
body.ytm-page [hidden] {
    display: none !important;
    opacity: 0;
}

/* 68 — Progress track hover grow on phone */
body.ytm-page.mh-phone-mode .ytm-progress:active .ytm-progress-track {
    height: 6px;
}

/* 69 — Sheet art shadow on hover/focus */
body.ytm-page .ytm-sheet-visual:hover,
body.ytm-page .ytm-sheet-visual:focus-within {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* 70 — Account link smooth states */
body.ytm-page .ytm-account {
    transition: color var(--ytm-transition-fast) var(--ytm-ease-out),
                opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

body.ytm-page .ytm-account:active {
    opacity: 0.7;
}

/* 71 — Nav button icon subtle bounce */
body.ytm-page .ytm-nav-btn.on svg {
    animation: ytm-nav-bounce 0.3s var(--ytm-ease-spring);
}

@keyframes ytm-nav-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* 72 — Tab icon active bounce */
body.ytm-page .ytm-tab.on svg {
    animation: ytm-tab-pop 0.25s var(--ytm-ease-spring);
}

@keyframes ytm-tab-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 73 — Phone brand press state */
body.ytm-page .ytm-phone-brand {
    transition: transform var(--ytm-transition-fast) var(--ytm-ease-spring);
    cursor: pointer;
}

body.ytm-page .ytm-phone-brand:active {
    transform: scale(0.96);
}

/* 74 — Tile title gradient smooth */
body.ytm-page .ytm-tile-title {
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

/* 75 — Better sheet-from text animation (use forwards to prevent flashing on updates) */
body.ytm-page .ytm-sheet-from {
    animation: ytm-fade-in 0.3s var(--ytm-ease-out) forwards;
}

/* 76 — Queue title animation (use forwards to prevent flashing on updates) */
body.ytm-page .ytm-queue-title {
    animation: ytm-fade-in 0.25s var(--ytm-ease-out) forwards;
}

/* 77 — Smoother card hover scale on desktop */
@media (hover: hover) and (pointer: fine) {
    body.ytm-page .ytm-card:hover img {
        transform: scale(1.03);
    }
    
    body.ytm-page .ytm-tile:hover img {
        transform: scale(1.05);
    }
}

/* 78 — Sheet scrub larger hit area on phone */
body.ytm-page.mh-phone-mode .ytm-sheet .ytm-progress {
    padding: 12px 0;
    margin: -12px 0;
}

/* 79 — Better loading state for lists */
body.ytm-page .ytm-list:empty::before {
    content: "";
    display: block;
    height: 56px;
}

/* 80 — Smooth chip row scroll momentum */
body.ytm-page .ytm-chips {
    scroll-padding-inline: 12px;
}

/* 81 — Better card row scroll momentum */
body.ytm-page .ytm-cards {
    scroll-padding-inline: 16px;
}

/* 82 — Sheet meta text truncation */
body.ytm-page .ytm-sheet h2 {
    transition: color var(--ytm-transition-fast) var(--ytm-ease-out);
}

/* 83 — Sheet artist text opacity animation (use forwards to prevent flashing on updates) */
body.ytm-page .ytm-sheet p {
    animation: ytm-fade-in 0.25s var(--ytm-ease-out) forwards;
}

/* 84 — Rail nav smooth scroll */
body.ytm-page .ytm-rail {
    -webkit-overflow-scrolling: touch;
}

/* 85 — Better phone toggle tap area */
body.ytm-page.mh-phone-mode .ytm-phone-play {
    min-width: 48px;
    min-height: 48px;
}

/* 86 — Buffering dot smooth animation */
body.ytm-page .ytm-buffering-dot {
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

/* 87 — Sheet transport button spacing on small screens */
@media (max-width: 375px) {
    body.ytm-page .ytm-sheet-transport {
        gap: 14px;
    }
    
    body.ytm-page .ytm-sheet-transport .ytm-play {
        width: 58px;
        height: 58px;
    }
}

/* 88 — Preload indicator subtle appearance */
body.ytm-page .ytm-row-preload {
    animation: ytm-fade-in 0.2s var(--ytm-ease-out);
}

/* 89 — Better embed host transitions */
body.ytm-page .ytm-embed-host {
    transition: opacity var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 90 — Smooth like button color change */
body.ytm-page .ytm-like svg path {
    transition: d var(--ytm-transition-normal) var(--ytm-ease-out);
}

/* 91 — Better disabled button states */
body.ytm-page .ytm-icon:disabled {
    transform: none;
    transition: opacity var(--ytm-transition-fast) var(--ytm-ease-out);
}

/* 92 — Sheet side title animation (use forwards to prevent flashing on updates) */
body.ytm-page .ytm-sheet-side .ytm-queue-title {
    animation: ytm-fade-in 0.3s var(--ytm-ease-out) forwards;
}

/* 93 — Smooth width changes */
body.ytm-page .ytm-progress-fill {
    will-change: width;
}

/* 94 — Safe area inset for home indicator */
body.ytm-page.mh-phone-mode .ytm-tabs {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* 95 — Better EQ animation timing */
body.ytm-page .ytm-row.on .ytm-eq span {
    animation-timing-function: var(--ytm-ease-smooth);
}

/* 96 — iOS standalone mode fixes */
html.ytm-ios body.ytm-page.mh-phone-mode {
    padding-top: env(safe-area-inset-top, 0px);
}

/* 97 — Smooth view section appearance */
body.ytm-page .ytm-sec:not([hidden]) {
    animation: ytm-fade-in 0.2s var(--ytm-ease-out);
}

/* 98 — Better focus ring on progress */
body.ytm-page .ytm-progress:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
    border-radius: 4px;
}

/* 99 — Smooth sheet close transition hint */
body.ytm-page .ytm-sheet.closing {
    animation: ytm-sheet-down 0.25s var(--ytm-ease-ios) forwards;
}

@keyframes ytm-sheet-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* 100 — Final reduced motion override for accessibility */
@media (prefers-reduced-motion: reduce) {
    body.ytm-page *,
    body.ytm-page *::before,
    body.ytm-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    body.ytm-page .ytm-sheet {
        animation: none;
    }
    
    body.ytm-page .ytm-sheet.on {
        transform: translateY(0);
        opacity: 1;
    }
    
    body.ytm-page .ytm-list .ytm-row,
    body.ytm-page .ytm-cards .ytm-card {
        animation: none;
        opacity: 1;
    }
}

/* 101 — Song loading progress bar */
.ytm-load-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
    overflow: hidden;
}

.ytm-load-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ytm-red), #ff6666);
    width: 0%;
    transition: width 0.15s ease-out;
    will-change: width;
}

.ytm-load-bar-text {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--ytm-muted);
    white-space: nowrap;
    background: var(--ytm-bar);
    padding: 2px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.ytm-load-bar.show-text .ytm-load-bar-text {
    opacity: 1;
}

/* Indeterminate loading animation when we don't know progress */
@keyframes ytm-load-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.ytm-load-bar.indeterminate .ytm-load-bar-fill {
    width: 50%;
    animation: ytm-load-indeterminate 1.2s ease-in-out infinite;
}

/* Phone mode - larger touch area */
body.mh-phone-mode .ytm-load-bar {
    height: 4px;
}

body.mh-phone-mode .ytm-load-bar-text {
    top: 8px;
    font-size: 12px;
}

/* ==========================================================================
   102 — AirPlay / Bluetooth / Remote Device Connection Styles
   ========================================================================== */

/* Remote device connection indicator */
body.ytm-page.ytm-remote-connected .ytm-now-meta::after {
    content: "🎧";
    font-size: 0.75rem;
    margin-left: 6px;
    opacity: 0.7;
}

body.ytm-page.ytm-remote-airplay .ytm-now-meta::after {
    content: "📺";
}

/* AirPlay available indicator */
body.ytm-page.ytm-airplay-available .ytm-art-wrap::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 22h12l-6-6-6 6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.6;
    z-index: 5;
    pointer-events: none;
}

/* AirPlay Logo Styles (for when no video) */
.ytm-airplay-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #111 0%, #000 100%);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ytm-airplay-logo.on {
    opacity: 1;
}

.ytm-airplay-logo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: ytm-airplay-pulse 3s ease-in-out infinite;
}

.ytm-airplay-logo-icon {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(255, 0, 51, 0.3);
}

.ytm-airplay-logo-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    opacity: 0.8;
}

@keyframes ytm-airplay-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

/* Remote playback optimizations */
body.ytm-page.ytm-remote-connected .ytm-visual-cue {
    display: none;
}

body.ytm-page.ytm-remote-connected .ytm-progress-thumb {
    transform: translateY(-50%) scale(1.2);
}

/* 103 — Hide YouTube embed UI completely */
.ytm-embed-host {
    overflow: hidden;
}

.ytm-embed-host iframe {
    /* Scale up to crop out YouTube UI elements */
    transform: scale(1.15);
    transform-origin: center center;
    /* Hide iframe content completely before embed is ready - prevents YouTube branding flash */
    clip-path: inset(50%);
}

/* Only show video content when embed host is visible */
.ytm-embed-host.on iframe {
    clip-path: inset(8% 5% 8% 5%);
}

/* Make sheet visual overflow hidden to clip YouTube UI */
.ytm-sheet-visual {
    overflow: hidden;
}

/* 104 — Better external audio output states */
body.ytm-page.ytm-remote-connected .ytm-player {
    border-top-color: rgba(255, 0, 51, 0.3);
}

body.ytm-page.ytm-remote-connected .ytm-sheet-transport .ytm-play {
    box-shadow: 0 4px 20px rgba(255, 0, 51, 0.25);
}

/* Remote connection status toast style */
.ytm-remote-toast {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ytm-remote-toast svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* 105 — Reduced motion for remote devices (battery optimization) */
body.ytm-page.ytm-remote-connected .ytm-card,
body.ytm-page.ytm-remote-connected .ytm-row,
body.ytm-page.ytm-remote-connected .ytm-chip {
    animation: none;
}

/* 106 — Mini art wrap for AirPlay shows logo icon */
body.ytm-page.ytm-remote-airplay .ytm-art-wrap .ytm-airplay-logo {
    border-radius: 6px;
}

body.ytm-page.ytm-remote-airplay .ytm-art-wrap .ytm-airplay-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

body.ytm-page.ytm-remote-airplay .ytm-art-wrap .ytm-airplay-logo-text {
    display: none;
}

/* 107 — Control Centre / Lock Screen optimized states */
body.ytm-page.ytm-remote-connected .ytm-sheet-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 2;
}

/* 108 — Mini AirPlay logo in art wrap */
.ytm-mini-airplay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
}

.ytm-mini-airplay .ytm-airplay-logo-inner {
    gap: 0;
}

.ytm-mini-airplay .ytm-airplay-logo-icon {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    box-shadow: none;
}

.ytm-mini-airplay .ytm-airplay-logo-text {
    display: none;
}

/* Only show mini airplay logo when connected and no video playing */
body.ytm-page:not(.ytm-remote-airplay) .ytm-mini-airplay {
    display: none;
}

/* 109 — External device type indicators in metadata */
body.ytm-page.ytm-remote-bluetooth .ytm-now-meta::after {
    content: "🎧";
}

body.ytm-page.ytm-remote-airplay .ytm-now-meta::after {
    content: "📺";
}

/* 110 — Sheet visual AirPlay logo positioning */
.ytm-sheet-visual .ytm-airplay-logo {
    border-radius: 8px;
}

/* 111 — Video styling */
.ytm-embed-host video {
    object-fit: cover;
}

/* 112 — Smooth transitions for remote connection state changes */
body.ytm-page .ytm-now-meta::after {
    transition: opacity 0.3s ease;
    opacity: 0;
}

body.ytm-page.ytm-remote-connected .ytm-now-meta::after {
    opacity: 0.7;
}

/* 113 — AirPlay logo animation variants */
@keyframes ytm-airplay-glow {
    0%, 100% { box-shadow: 0 8px 32px rgba(255, 0, 51, 0.3); }
    50% { box-shadow: 0 8px 48px rgba(255, 0, 51, 0.5); }
}

body.ytm-page.ytm-remote-airplay .ytm-airplay-logo.on .ytm-airplay-logo-icon {
    animation: ytm-airplay-glow 3s ease-in-out infinite;
}

/* ==========================================================================
   114 — Expandable Up Next Queue (Phone Mode)
   ========================================================================== */

/* Queue header - tap to expand/collapse */
.ytm-queue-header {
    cursor: pointer;
    padding: 8px 0;
    -webkit-user-select: none;
    user-select: none;
    transition: padding var(--ytm-transition-normal) var(--ytm-ease-ios);
}

.ytm-queue-header .ytm-sheet-from {
    transition: font-size var(--ytm-transition-normal) var(--ytm-ease-ios),
                opacity var(--ytm-transition-normal) var(--ytm-ease-ios);
}

.ytm-queue-header .ytm-queue-title {
    transition: font-size var(--ytm-transition-normal) var(--ytm-ease-ios),
                margin var(--ytm-transition-normal) var(--ytm-ease-ios);
}

/* Phone mode: initial state - show only 1 song */
body.mh-phone-mode .ytm-sheet-side {
    --queue-expand: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, transparent 0%, #030303 20px, #030303 100%);
    border-radius: 16px 16px 0 0;
    transition: max-height 0.35s var(--ytm-ease-ios),
                background 0.25s ease;
    z-index: 10;
}

/* Collapsed state - show only 1 song (approx 80px for header + 70px for 1 row) */
body.mh-phone-mode .ytm-sheet-side:not(.expanded) {
    max-height: 150px;
    background: linear-gradient(to bottom, rgba(3,3,3,0.85) 0%, #030303 30px, #030303 100%);
}

/* Expanded state - fill most of the screen */
body.mh-phone-mode .ytm-sheet-side.expanded {
    max-height: calc(100% - 60px);
    background: #030303;
}

/* Queue scroll area */
body.mh-phone-mode .ytm-sheet-queue {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    min-height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Collapsed: only show 1 row, hide overflow */
body.mh-phone-mode .ytm-sheet-side:not(.expanded) .ytm-sheet-queue {
    max-height: 70px;
    overflow: hidden;
}

/* When queue is expanded, squeeze controls to top */
body.mh-phone-mode.ytm-queue-expanded .ytm-sheet-stage {
    transform: translateY(calc(-100% + 60px));
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

body.mh-phone-mode.ytm-queue-expanded .ytm-sheet-body {
    flex-direction: column;
}

body.mh-phone-mode.ytm-queue-expanded .ytm-sheet-side {
    position: relative;
    max-height: none;
    flex: 1;
}

/* Compact header when expanded */
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-queue-header {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #030303;
    position: sticky;
    top: 0;
    z-index: 5;
}

body.mh-phone-mode .ytm-sheet-side.expanded .ytm-queue-header .ytm-sheet-from {
    font-size: 0.72rem;
    opacity: 0.7;
}

body.mh-phone-mode .ytm-sheet-side.expanded .ytm-queue-header .ytm-queue-title {
    font-size: 1rem;
    margin: 2px 0 4px;
}

/* Expand indicator on header */
.ytm-queue-header::after {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    transition: background 0.2s ease;
}

body.mh-phone-mode .ytm-sheet-side.expanded .ytm-queue-header::after {
    background: rgba(255,255,255,0.4);
}

/* Smooth transition for stage */
body.mh-phone-mode .ytm-sheet-stage {
    transition: transform 0.35s var(--ytm-ease-ios),
                opacity 0.25s ease;
}

/* 115 — Queue row animations on expand */
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row {
    animation: ytm-queue-row-appear 0.2s var(--ytm-ease-out) backwards;
}

body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row:nth-child(1) { animation-delay: 0ms; }
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row:nth-child(2) { animation-delay: 20ms; }
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row:nth-child(3) { animation-delay: 40ms; }
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row:nth-child(4) { animation-delay: 60ms; }
body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row:nth-child(5) { animation-delay: 80ms; }

@keyframes ytm-queue-row-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 116 — Desktop: unchanged behavior (side panel) */
body:not(.mh-phone-mode) .ytm-sheet-side {
    position: static;
    max-height: none;
    background: transparent;
}

body:not(.mh-phone-mode) .ytm-queue-header::after {
    display: none;
}

/* 117 — Song count indicator */
.ytm-queue-count {
    color: var(--ytm-muted);
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: 6px;
}

/* 118 — Pull indicator animation */
@keyframes ytm-pull-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

body.mh-phone-mode .ytm-sheet-side:not(.expanded) .ytm-queue-header::after {
    animation: ytm-pull-bounce 2s ease-in-out infinite;
}

/* 119 — Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    body.mh-phone-mode .ytm-sheet-side,
    body.mh-phone-mode .ytm-sheet-stage,
    .ytm-queue-header,
    .ytm-queue-header .ytm-sheet-from,
    .ytm-queue-header .ytm-queue-title {
        transition: none;
    }
    
    body.mh-phone-mode .ytm-sheet-side.expanded .ytm-sheet-queue .ytm-row {
        animation: none;
    }
    
    body.mh-phone-mode .ytm-sheet-side:not(.expanded) .ytm-queue-header::after {
        animation: none;
    }
}