@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/Manrope-Variable-Latin.woff2") format("woff2");
}

:root {
    color-scheme: dark;
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0f0f0f;
    color: #f8fafc;
    font-synthesis: none;
    --page-gutter: clamp(1rem, 3vw, 2.5rem);
    --viewport-inline-size: 100dvw;
    --accent: #f04432;
    --accent-warm: #ff7a1a;
    --surface: #181818;
    --surface-raised: #212121;
    --muted: #aaa;
    --line: rgb(255 255 255 / 12%);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: #0f0f0f;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(4.8rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    overflow-x: hidden;
    background: #0f0f0f;
}

[hidden] {
    display: none !important;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0.18rem solid #ff9b52;
    outline-offset: 0.18rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    transform: translateY(-150%);
    border-radius: 0.65rem;
    background: #fff;
    color: #07090f;
    font-weight: 800;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    background: rgb(15 15 15 / 94%);
    backdrop-filter: blur(1.2rem);
}

.header-inner,
main,
footer {
    width: min(100%, 90rem);
    margin-inline: auto;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.75rem;
    gap: 0.55rem;
    padding: 0.3rem var(--page-gutter);
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.brand > span > span {
    color: var(--accent);
}

.header-icon-button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: transparent;
    color: #dce2ea;
    cursor: pointer;
}

.header-icon-button:hover,
.header-icon-button[aria-expanded="true"] {
    background: rgb(255 255 255 / 7%);
    color: #fff;
}

.header-icon-button svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desktop-navigation {
    display: none;
    align-items: center;
    gap: 1.4rem;
    margin-left: 1rem;
}

.desktop-navigation a {
    color: #aeb7c5;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

.desktop-navigation a:hover {
    color: #fff;
}

.account-controls {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.1rem;
    margin-left: auto;
}

.profile-menu-wrap {
    position: relative;
}

.account-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 5;
    display: grid;
    width: min(15rem, calc(100dvw - 2rem));
    gap: 0.18rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: rgb(24 24 24 / 98%);
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 48%);
}

.account-summary {
    padding: 0.65rem 0.7rem 0.5rem;
    overflow: hidden;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-action {
    min-height: 2.55rem;
    padding: 0.58rem 0.7rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #d5dbe4;
    font-size: 0.78rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.account-menu-action:hover,
.account-menu-action:focus-visible {
    background: #303030;
    color: #fff;
}

.account-menu-logout {
    color: #ff8d7c;
}

.navigation-drawer {
    position: fixed;
    z-index: 130;
    inset: 0 auto 0 0;
    display: flex;
    width: min(17.5rem, 86vw);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: max(1rem, env(safe-area-inset-top)) 0.85rem max(1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(-100%);
    border-right: 1px solid var(--line);
    background: #181818;
    box-shadow: 1.5rem 0 4rem rgb(0 0 0 / 55%);
    scrollbar-gutter: stable;
    transition: transform 180ms ease;
}

.navigation-drawer-open .navigation-drawer {
    transform: translateX(0);
}

.navigation-drawer-backdrop {
    position: fixed;
    z-index: 120;
    inset: 0;
    min-height: 100vh;
    visibility: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    opacity: 0;
    background: rgb(0 0 0 / 62%);
    cursor: default;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.navigation-drawer-open .navigation-drawer-backdrop {
    visibility: visible;
    opacity: 1;
}

body.navigation-drawer-open {
    overflow: hidden;
}

.navigation-drawer-header {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.3rem 0.75rem;
}

.navigation-drawer-header strong {
    font-size: 1.25rem;
    letter-spacing: -0.04em;
}

.drawer-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: #272727;
    color: #fff;
    font-size: 1.45rem;
    cursor: pointer;
}

.drawer-navigation {
    display: grid;
    gap: 0.2rem;
}

.drawer-navigation a {
    display: grid;
    min-height: 3rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    color: #eee;
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
}

.drawer-navigation a:hover,
.drawer-navigation a:focus-visible,
.drawer-navigation a.is-active {
    background: #272727;
    color: #fff;
}

.drawer-navigation a > span {
    color: #f1f1f1;
    font-size: 1.25rem;
    text-align: center;
}

.drawer-account {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
    padding: 1rem 0.3rem 0;
    border-top: 1px solid var(--line);
}

.drawer-account span {
    padding: 0.5rem;
    overflow: hidden;
    color: #aaa;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-account button {
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #eee;
    font-size: 0.95rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.drawer-account button:hover,
.drawer-account button:focus-visible {
    background: #272727;
}

.header-action,
.account-button,
.auth-form button {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #212121;
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}

.header-login,
.auth-form button:not(.account-button),
.account-button:not(.account-button-secondary) {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
}

.account-button:disabled,
.auth-form button:disabled,
.onboarding-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.account-button-secondary {
    background: #212121;
}

main {
    padding-bottom: 2rem;
}

.discovery {
    padding: 0.68rem var(--page-gutter) 0;
    scroll-margin-top: 5rem;
}

.search-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.58rem;
    padding: 0 0.78rem;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 999px;
    background: #212121;
    color: #778191;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.search-box svg,
.header-icon-button svg,
.mobile-nav-item svg,
.primary-action svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.primary-action svg,
.mobile-nav-item[href="#video-feed"] svg {
    fill: currentColor;
    stroke: none;
}

.search-box input {
    width: 100%;
    min-height: 2.6rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 0.84rem;
}

.search-box input::placeholder {
    color: #7f8998;
}

.search-box button {
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: #303030;
    color: #cbd5e1;
    cursor: pointer;
}

.advanced-search {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 0.48rem;
}

.search-load-more {
    min-height: 2.4rem;
    padding: 0.43rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #212121;
    color: #d6dbe3;
    font-size: 0.7rem;
    font-weight: 800;
    max-width: 10rem;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.5rem;
}

.search-results-grid .poster-card {
    width: 100%;
}

.search-load-more {
    display: block;
    margin: 1rem auto 0;
    cursor: pointer;
}

.search-load-more[hidden] {
    display: none;
}

.category-strip {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    margin: 0.5rem calc(var(--page-gutter) * -1) 0.65rem;
}

.category-tabs {
    display: flex;
    min-width: 0;
    gap: 0.7rem;
    margin: 0;
    padding: 0 var(--page-gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    contain: inline-size;
}

.category-scroll-control {
    display: none;
}

.category-tabs::-webkit-scrollbar,
.content-rail::-webkit-scrollbar,
.video-feed-list::-webkit-scrollbar {
    display: none;
}

.category-tab {
    appearance: none;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.category-tab.is-active {
    background: transparent;
    color: var(--accent-warm);
    box-shadow: none;
    text-decoration: none;
}

.hero-stage {
    position: relative;
    height: calc(clamp(10.7rem, 48vw, 12rem) + 1.35rem);
    margin-inline: calc(var(--page-gutter) * -1);
    overflow: hidden;
    isolation: isolate;
}

.hero-viewport {
    height: clamp(10.7rem, 48vw, 12rem);
    padding-inline: 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-y;
    scroll-padding-inline: 1.75rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    cursor: grab;
}

.hero-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.hero-viewport::-webkit-scrollbar {
    display: none;
}

.hero-track {
    display: flex;
    width: max-content;
    align-items: stretch;
    gap: 0.5rem;
}

.hero-slide {
    position: relative;
    display: flex;
    width: calc(100dvw - 3.5rem);
    height: clamp(10.7rem, 48vw, 12rem);
    flex: 0 0 calc(100dvw - 3.5rem);
    overflow: hidden;
    align-items: flex-end;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 0.85rem;
    background: linear-gradient(130deg, #282828, #121212 64%);
    box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 30%);
    scroll-snap-align: center;
    opacity: 0.58;
    transform: scale(0.955);
    transition: opacity 300ms ease, transform 300ms ease;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-slide[href] {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.hero-viewport.is-dragging .hero-slide {
    cursor: grabbing;
}

.hero-backdrop,
.hero-shade {
    position: absolute;
    inset: 0;
}

.hero-backdrop {
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(5 7 11 / 3%) 5%, rgb(5 7 11 / 16%) 34%, rgb(5 7 11 / 90%) 100%),
        linear-gradient(90deg, rgb(5 7 11 / 88%), rgb(5 7 11 / 25%) 76%, transparent 100%);
}

.hero-content {
    width: 100%;
    padding: 2.2rem 0.85rem 0.72rem;
}

.eyebrow {
    margin: 0;
    color: #ff735f;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero-slide h1 {
    display: -webkit-box;
    max-width: 16ch;
    margin: 0;
    overflow: hidden;
    font-size: clamp(1.22rem, 5.8vw, 1.7rem);
    line-height: 1;
    letter-spacing: -0.052em;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.42rem 0.64rem;
    border: 0;
    border-radius: 0.7rem;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.primary-action {
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    box-shadow: 0 0.6rem 1.5rem rgb(240 68 50 / 27%);
}

.secondary-action {
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(33 33 33 / 82%);
    backdrop-filter: blur(0.6rem);
}

.secondary-action:disabled {
    cursor: default;
    opacity: 0.55;
}

.secondary-action.is-saved {
    border-color: rgb(240 68 50 / 48%);
    background: rgb(111 29 25 / 78%);
    color: #ffd6d0;
}

.hero-carousel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 3;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.hero-carousel[hidden] {
    display: none;
}

.hero-carousel > button {
    display: none;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 50%;
    place-items: center;
    background: rgb(5 7 11 / 68%);
    color: #fff;
    cursor: pointer;
}

.hero-dots {
    display: flex;
    gap: 0.3rem;
}

.hero-dots button {
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 38%);
    cursor: pointer;
}

.hero-dots button.is-active {
    width: 0.95rem;
    background: var(--accent);
}

.content-section {
    padding: 1.05rem var(--page-gutter) 0;
    scroll-margin-top: 5rem;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1rem, 4.5vw, 1.7rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #fff;
}

.section-heading > p {
    max-width: 18rem;
    margin: 0;
    color: #768091;
    font-size: 0.72rem;
    text-align: right;
}

.section-link {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.4rem 0.2rem;
    border: 0;
    background: transparent;
    color: #ff7965;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.content-rail {
    display: flex;
    gap: 0.5rem;
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 0 var(--page-gutter) 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    contain: inline-size;
}

.poster-card {
    position: relative;
    flex: 0 0 clamp(5.7rem, 26vw, 7rem);
    width: clamp(5.7rem, 26vw, 7rem);
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    scroll-snap-align: start;
    background: transparent;
    box-shadow: none;
}

.poster-media {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 0.42rem;
    background: linear-gradient(145deg, #282828, #151515);
}

.poster-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.poster-open:focus-visible {
    outline: 3px solid #ff7a1a;
    outline-offset: -3px;
}

.poster-media img,
.poster-placeholder {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.poster-media img {
    transition: transform 220ms ease, opacity 220ms ease;
}

.poster-card:hover .poster-media img {
    transform: scale(1.035);
}

.poster-placeholder {
    display: block;
    background:
        linear-gradient(145deg, #282828, #151515);
    overflow: hidden;
}

.poster-copy {
    min-width: 0;
    padding: 0.42rem 0 0;
}

.poster-copy h3 {
    margin: 0;
    overflow: hidden;
    color: #f4f7fb;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-state {
    display: grid;
    flex: 1 0 min(100%, 34rem);
    min-height: 8.5rem;
    padding: 1.4rem;
    border: 1px dashed rgb(255 255 255 / 14%);
    border-radius: 1rem;
    align-content: center;
    background: #181818;
}

.empty-state-mark {
    color: var(--accent);
    font-size: 1.5rem;
}

.empty-state h3 {
    margin: 0.55rem 0 0;
    font-size: 1.05rem;
}

.empty-state p {
    max-width: 34rem;
    margin: 0.4rem 0 0;
    color: #7f8998;
    font-size: 0.8rem;
    line-height: 1.5;
}

.video-feed-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.video-feed-card {
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    box-shadow: none;
}

.video-feed-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #181818;
}

.video-feed-visual img,
.video-placeholder,
.video-feed-visual iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.video-feed-card[data-orientation="portrait"] .video-feed-visual,
.video-feed-card[data-orientation="portrait"] .video-feed-copy {
    width: min(100%, 22rem);
    margin-inline: auto;
}

.video-feed-card[data-orientation="portrait"] .video-feed-visual {
    aspect-ratio: 9 / 16;
}

.video-placeholder {
    display: grid;
    place-items: center;
    background: #212121;
    color: #777;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.video-kind {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.35rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.video-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 50%;
    place-items: center;
    background: rgb(6 8 13 / 74%);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    backdrop-filter: blur(0.5rem);
    cursor: pointer;
}

.video-feed-copy {
    padding: 0.7rem 0.15rem 0;
}

.video-feed-copy h3 {
    margin: 0;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-feed-copy p {
    display: -webkit-box;
    margin: 0.4rem 0 0;
    overflow: hidden;
    color: #aaa;
    font-size: 0.76rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.video-feed-copy .video-linked-title {
    color: #ff8272;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.video-caption-wrap {
    position: relative;
    margin-top: 0.55rem;
}

.video-caption {
    overflow: hidden;
    color: #c5c5c5;
    font-size: 0.78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.video-caption-wrap.is-collapsed .video-caption {
    max-height: 3.65rem;
}

.video-caption.is-plain {
    white-space: pre-line;
}

.video-caption strong {
    color: #f5f5f5;
}

.video-caption ul,
.video-caption ol {
    margin: 0.35rem 0;
    padding-left: 1.25rem;
}

.video-caption a {
    color: #ff8b7a;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.video-caption-toggle {
    min-height: 1.8rem;
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
}

.watch-button {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.6rem;
    border: 0;
    background: #272727;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.personal-list-groups {
    display: grid;
    gap: 1rem;
}

.personal-list-group {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #181818;
}

.personal-list-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.personal-list-group h3 {
    margin: 0;
    font-size: 1rem;
}

.personal-list-count {
    display: grid;
    min-width: 1.65rem;
    height: 1.65rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    place-items: center;
    background: #272727;
    color: #bac2ce;
    font-size: 0.68rem;
    font-weight: 850;
}

.personal-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.personal-list-card {
    display: grid;
    grid-template-columns: 4.8rem minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #0f0f0f;
}

.personal-list-card-watching {
    border-color: rgb(255 122 26 / 30%);
}

.personal-list-card-watched {
    border-color: rgb(74 222 128 / 22%);
}

.personal-list-card > img,
.personal-list-placeholder {
    width: 4.8rem;
    height: 100%;
    min-height: 7.2rem;
    object-fit: cover;
    background: linear-gradient(145deg, #282828, #151515);
}

.personal-list-placeholder {
    display: grid;
    place-items: center;
    color: #5f6978;
    font-size: 0.58rem;
    font-weight: 800;
}

.personal-list-copy {
    display: flex;
    min-width: 0;
    padding: 0.75rem;
    align-items: flex-start;
    flex-direction: column;
}

.personal-list-card-heading {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.personal-list-copy h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal-list-state {
    flex: 0 0 auto;
    padding: 0.2rem 0.38rem;
    border-radius: 999px;
    background: rgb(240 68 50 / 14%);
    color: #ff9d90;
    font-size: 0.55rem;
    font-weight: 850;
}

.personal-list-copy p {
    margin: 0.3rem 0 0;
    color: #ff8d7e;
    font-size: 0.7rem;
}

.personal-list-copy .personal-list-progress,
.personal-list-empty {
    color: #778191;
}

.personal-list-progress-bar {
    width: 100%;
    height: 0.28rem;
    margin-top: 0.55rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #272727;
}

.personal-list-progress-bar::-webkit-progress-bar {
    border-radius: 999px;
    background: #272727;
}

.personal-list-progress-bar::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-warm));
}

.personal-list-progress-bar::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-warm));
}

.personal-list-manage {
    min-height: 2rem;
    margin-top: auto;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 0.5rem;
    background: #212121;
    color: #dce1e8;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem var(--page-gutter);
    border-top: 1px solid var(--line);
    color: #626c7b;
    font-size: 0.72rem;
}

.footer-brand {
    color: #cbd5e1;
    font-weight: 800;
    text-decoration: none;
}

.mobile-navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: calc(4rem + env(safe-area-inset-bottom));
    padding: 0.25rem max(0.5rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.5rem, env(safe-area-inset-left));
    border-top: 1px solid rgb(255 255 255 / 9%);
    background: rgb(15 15 15 / 97%);
    box-shadow: 0 -1rem 2.5rem rgb(0 0 0 / 28%);
    backdrop-filter: blur(1.2rem);
    isolation: isolate;
    transform: translateZ(0);
}

.mobile-nav-item {
    display: flex;
    min-width: 0;
    min-height: 3.3rem;
    padding: 0.35rem 0.15rem;
    border: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.18rem;
    background: transparent;
    color: #707a8b;
    font-size: 0.62rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.mobile-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mobile-nav-item.is-active,
.mobile-nav-item:hover {
    color: #ff6f5d;
}

.auth-dialog,
.onboarding-dialog,
.user-list-dialog,
.title-detail-dialog {
    width: min(calc(100% - 1.5rem), 30rem);
    max-height: min(90vh, 46rem);
    padding: 1.35rem;
    overflow-y: auto;
    border: 1px solid #333a47;
    border-radius: 1.15rem;
    background: #181818;
    color: #f8fafc;
    box-shadow: 0 2rem 6rem rgb(0 0 0 / 65%);
}

.auth-dialog::backdrop,
.onboarding-dialog::backdrop,
.user-list-dialog::backdrop,
.title-detail-dialog::backdrop {
    background: rgb(2 4 8 / 82%);
    backdrop-filter: blur(0.35rem);
}

.title-detail-dialog {
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #0f0f0f;
}

.detail-loading {
    display: grid;
    min-height: 100%;
    place-items: center;
    color: #a8b0bd;
}

.detail-content {
    min-height: 100%;
}

.detail-hero {
    position: relative;
    min-height: 25rem;
    overflow: hidden;
    background: #181818;
}

.detail-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(15 15 15 / 20%), rgb(15 15 15 / 92%) 80%, #0f0f0f);
}

.detail-close {
    position: absolute;
    top: max(0.8rem, env(safe-area-inset-top));
    right: 0.8rem;
    z-index: 4;
    background: rgb(24 24 24 / 82%);
}

.detail-heading {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.detail-cover {
    width: 7rem;
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 0.65rem;
    object-fit: cover;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 55%);
}

.detail-heading-copy {
    min-width: 0;
}

.detail-heading h2 {
    margin: 0.3rem 0;
    font-size: clamp(1.65rem, 8vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.detail-metadata,
.detail-list-state,
.detail-review-heading p {
    margin: 0;
    color: #a2aab7;
    font-size: 0.78rem;
}

.detail-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.detail-genre {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 999px;
    background: rgb(24 24 24 / 68%);
    color: #e8ebf0;
    font-size: 0.65rem;
}

.detail-body {
    display: grid;
    gap: 1.6rem;
    padding: 1rem 1rem calc(6rem + env(safe-area-inset-bottom));
}

.detail-description {
    max-width: 52rem;
    margin: 0;
    color: #c1c7d0;
    line-height: 1.65;
}

.detail-actions,
.detail-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.detail-actions a,
.detail-actions button,
.detail-review-editor button {
    min-height: 2.85rem;
    padding: 0.7rem 1rem;
    border-radius: 0.7rem;
    color: #fff;
    text-decoration: none;
}

.detail-section {
    min-width: 0;
}

.detail-section > h3,
.detail-review-heading h3,
.detail-review-editor h3 {
    margin: 0 0 0.8rem;
    font-size: 1.15rem;
}

.detail-video-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.detail-video-card {
    position: relative;
    flex: 0 0 min(78vw, 20rem);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 0.85rem;
    background: #181818;
    color: #fff;
    scroll-snap-align: start;
    text-decoration: none;
}

.detail-video-card img,
.detail-video-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;
    object-fit: cover;
    background: linear-gradient(145deg, #282828, #181818);
}

.detail-video-card span {
    display: block;
    padding: 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.detail-related-rail {
    margin-inline: 0;
    padding-inline: 0;
}

.detail-review-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.detail-review-list {
    display: grid;
    gap: 0.65rem;
}

.detail-review-card,
.detail-review-editor {
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 0.85rem;
    background: #181818;
}

.detail-review-card header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.detail-review-card h4,
.detail-review-card p {
    margin: 0;
}

.detail-review-card time,
.detail-review-card .review-stars {
    color: #ff8d4d;
    font-size: 0.76rem;
}

.detail-review-card p {
    margin-top: 0.65rem;
    color: #b7bfca;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.detail-review-editor {
    margin-top: 1rem;
}

.detail-review-editor textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid #343c49;
    border-radius: 0.7rem;
    resize: vertical;
    background: #151515;
    color: #fff;
}

.detail-review-actions #detail-review-remove {
    margin-top: 0.75rem;
}

.auth-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.auth-dialog h2,
.onboarding-dialog h2,
.user-list-dialog h2 {
    margin: 0.3rem 0 0;
    font-size: 1.65rem;
    letter-spacing: -0.03em;
}

.dialog-close {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    place-items: center;
    background: #212121;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin: 1.35rem 0;
    padding: 0.3rem;
    border-radius: 0.75rem;
    background: #151515;
}

.auth-tabs button {
    min-height: 2.7rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #8993a2;
    font-weight: 750;
    cursor: pointer;
}

.auth-tabs button[aria-selected="true"] {
    background: #272727;
    color: #fff;
}

.auth-form {
    display: grid;
    gap: 0.65rem;
}

.auth-form label {
    margin-top: 0.4rem;
    color: #c8ced8;
    font-size: 0.82rem;
    font-weight: 750;
}

.auth-form input,
.auth-form select,
.onboarding-question textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #343c49;
    border-radius: 0.7rem;
    outline: none;
    background: #151515;
    color: #fff;
}

.auth-form input:focus,
.auth-form select:focus,
.onboarding-question textarea:focus {
    border-color: #ff7a1a;
    box-shadow: 0 0 0 3px rgb(255 122 26 / 16%);
}

.auth-form small {
    color: #727c8c;
    line-height: 1.45;
}

.auth-form button {
    margin-top: 0.75rem;
}

.auth-message {
    min-height: 1.4rem;
    margin: 0.9rem 0 0;
    color: #8f99a8;
    font-size: 0.85rem;
    line-height: 1.45;
}

.auth-message[data-error="true"] {
    color: #ff9a8c;
}

.user-list-description,
.onboarding-intro,
.onboarding-progress {
    color: #929cab;
    line-height: 1.5;
}

.onboarding-progress {
    margin: 1.35rem 0 0.7rem;
    color: #ff8d7e;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-question {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.onboarding-question legend {
    width: 100%;
    margin-bottom: 0.9rem;
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.3;
}

.onboarding-question textarea {
    resize: vertical;
}

.onboarding-options {
    display: grid;
    gap: 0.6rem;
}

.onboarding-option {
    display: flex;
    min-height: 3.15rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #343c49;
    border-radius: 0.75rem;
    background: #0f0f0f;
    color: #e2e8f0;
    cursor: pointer;
}

.onboarding-option:has(input:checked) {
    border-color: #ff7a1a;
    background: rgb(127 29 29 / 26%);
}

.onboarding-option input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
}

.onboarding-actions,
.user-list-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
}

.onboarding-actions #onboarding-next {
    grid-column: 1 / -1;
    grid-row: 1;
}

@media (min-width: 46rem) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .header-inner {
        min-height: 4.2rem;
    }

    .desktop-navigation {
        display: flex;
    }

    .mobile-navigation {
        display: none;
    }

    .discovery {
        padding-top: 1.05rem;
    }

    .search-box {
        width: min(100%, 37rem);
    }

    .advanced-search {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .search-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: 1.25rem 0.85rem;
    }

    .category-strip {
        grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
        gap: 0.45rem;
        margin-right: 0;
        margin-left: 0;
    }

    .category-tabs {
        padding-inline: 0;
        scrollbar-width: none;
    }

    .category-scroll-control {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        place-items: center;
        background: #212121;
        color: #fff;
        font-size: 1.35rem;
        cursor: pointer;
    }

    .hero-stage {
        width: var(--viewport-inline-size);
        height: calc(clamp(20rem, 25vw, 30rem) + 1.5rem);
        margin-right: calc(50% - (var(--viewport-inline-size) / 2));
        margin-left: calc(50% - (var(--viewport-inline-size) / 2));
    }

    .hero-viewport {
        height: clamp(20rem, 25vw, 30rem);
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    .hero-track {
        gap: 0;
    }

    .hero-slide {
        width: var(--viewport-inline-size);
        height: clamp(20rem, 25vw, 30rem);
        flex-basis: var(--viewport-inline-size);
        border: 0;
        border-radius: 0;
    }

    .hero-content {
        max-width: 90rem;
        margin-inline: auto;
        padding: 5rem clamp(2rem, 5vw, 4.5rem) 2.7rem;
    }

    .hero-slide h1 {
        display: block;
        max-width: 15ch;
        margin: 0;
        overflow: visible;
        font-size: clamp(2.4rem, 4.3vw, 3.6rem);
    }

    .primary-action,
    .secondary-action {
        min-height: 2.65rem;
        padding: 0.6rem 0.95rem;
        font-size: 0.8rem;
    }

    .hero-carousel > button {
        display: grid;
    }

    .content-section {
        padding-top: 2.15rem;
    }

    .poster-card {
        flex-basis: 10rem;
        width: 10rem;
    }

    .poster-copy h3 {
        font-size: 0.8rem;
    }

    .video-feed-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .title-detail-dialog {
        width: min(calc(100dvw - 2rem), 72rem);
        max-width: 72rem;
        height: min(92dvh, 58rem);
        max-height: 92dvh;
        margin: auto;
        border: 1px solid #333a47;
        border-radius: 1.2rem;
    }

    .detail-hero {
        min-height: 30rem;
    }

    .detail-heading,
    .detail-body {
        right: clamp(1.5rem, 4vw, 3rem);
        left: clamp(1.5rem, 4vw, 3rem);
    }

    .detail-heading {
        bottom: 2rem;
    }

    .detail-body {
        padding: 1.5rem clamp(1.5rem, 4vw, 3rem) 3rem;
    }

    .detail-cover {
        width: 10rem;
    }

    .personal-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onboarding-actions {
        display: flex;
        justify-content: flex-end;
    }

    .onboarding-actions #onboarding-next {
        grid-column: auto;
        grid-row: auto;
    }
}

/* v21 — detalhes, miniplayer, ações e conversa. */
body[data-view="title"] .site-header {
    display: none;
}

.detail-player-host,
.detail-player-shell {
    position: relative;
    width: 100%;
}

.detail-player-shell {
    background: #000;
    transition: transform 160ms ease;
    touch-action: pan-x;
}

.detail-player-gesture {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 4;
    width: 5rem;
    min-height: 2rem;
    display: grid;
    place-items: start center;
    padding-top: 0.45rem;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
}

.detail-player-gesture span {
    width: 2.4rem;
    height: 0.25rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 72%);
    box-shadow: 0 1px 5px #000;
}

.detail-player-minimize {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    z-index: 4;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 68%);
    color: #fff;
    font: 800 1.35rem/1 Manrope, sans-serif;
}

.detail-page-copy {
    padding-inline: 1rem;
}

.detail-page-copy h1 {
    font-size: clamp(1.3rem, 5.5vw, 2.25rem);
}

.detail-title-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.45rem, 3vw, 1.2rem);
    margin-top: 0.7rem;
}

.detail-title-actions button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.45rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #f7f7f8;
    font: inherit;
}

.detail-title-actions button:hover,
.detail-title-actions button:focus-visible {
    background: rgb(255 255 255 / 9%);
}

.detail-title-actions button.is-active,
.detail-title-actions button.is-saved,
.detail-title-actions button[aria-pressed="true"] {
    color: #ff5738;
}

.detail-title-actions svg,
.comment-composer > button svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
}

.detail-title-actions #detail-like {
    border-radius: 999px;
    padding-inline: 0.7rem;
}

.detail-synopsis {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    margin-top: 0.4rem;
}

.detail-synopsis #detail-description-toggle {
    justify-self: center;
    min-width: 4rem;
}

.comment-preview {
    min-height: 4.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0.8rem;
}

.comment-preview > span:last-child {
    align-self: end;
    padding-bottom: 0.18rem;
    color: #aaaab0;
    font-size: 1.65rem;
}

.comment-preview small {
    display: block;
    margin-top: 0.3rem;
}

.mini-player {
    position: fixed;
    right: 0.75rem;
    bottom: calc(4.7rem + env(safe-area-inset-bottom));
    z-index: 140;
    width: min(21rem, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 0.9rem;
    background: #111113;
    color: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 58%);
}

.mini-player[hidden] { display: none; }
.mini-player-stage { background: #000; }
.mini-player-stage .detail-player-gesture,
.mini-player-stage .detail-player-minimize,
.mini-player-stage .detail-player-external { display: none; }
.mini-player-stage .detail-player { max-width: none; border-radius: 0; }

.mini-player-restore {
    width: 100%;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    background: #171719;
    color: #fff;
    font: inherit;
    text-align: left;
}

.mini-player-restore span {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-player-restore small { color: #9d9da3; }
.mini-player-controls { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0.25rem 0.45rem; }
.mini-player-controls button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.2rem; }

.description-panel {
    width: 100%;
    max-width: none;
    max-height: min(80dvh, 46rem);
    margin: auto 0 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1.25rem 1.25rem 0 0;
    background: #111113;
    color: #fff;
}

.description-panel::backdrop { background: rgb(0 0 0 / 72%); }
.description-panel-shell { padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); overflow-y: auto; }
.description-panel-shell > header { display: flex; align-items: center; justify-content: space-between; }
.description-panel-shell h2 { margin: 0; }
.description-panel-shell > p { color: #d0d0d3; line-height: 1.65; white-space: pre-wrap; }
.description-panel .detail-information dl > div { grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1fr); }
.description-panel .detail-information dd { text-align: right; }

.comment-panel-shell {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.comment-panel-shell > header h2 { display: block; }
.comment-list { padding-top: 0.2rem; }
.comment-context-menu {
    position: absolute;
    top: 2.75rem;
    right: 0;
    z-index: 3;
    min-width: 7.5rem;
    padding: 0.3rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 0.65rem;
    background: #29292d;
    box-shadow: 0 0.6rem 1.5rem rgb(0 0 0 / 40%);
}
.comment-context-menu[hidden] { display: none; }
.comment-context-menu button { width: 100%; min-height: 2.5rem; border: 0; border-radius: 0.45rem; background: transparent; color: #ff8072; font: inherit; text-align: left; }
.comment-context-menu button:hover,
.comment-context-menu button:focus-visible { background: rgb(255 255 255 / 8%); }

.comment-composer {
    align-items: end;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

.comment-composer textarea {
    min-height: 2.75rem;
    max-height: 8rem;
    padding: 0.72rem 0.9rem;
    resize: none;
    overflow-y: auto;
    font-size: clamp(0.875rem, 4vw, 1rem);
    line-height: 1.3;
}

.comment-composer > button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
}

.comment-composer > button:disabled { opacity: 0.42; }

@media (min-width: 46rem) {
    body[data-view="title"] main { width: min(100%, 90rem); }
    .title-detail-page .detail-content { padding: 0 0 3rem; }
    .detail-player-shell { max-width: 60rem; margin: 0 auto; }
    .detail-player { max-width: none; }
    .detail-player-host { padding-top: 1rem; }
    .detail-player-shell,
    .detail-player { border-radius: 1rem; }
    .description-panel { width: min(32rem, 92vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: 1rem 0 0 1rem; }
    .mini-player { bottom: 1rem; }
}

@media (min-width: 68rem) {
    .advanced-search {
        grid-template-columns: minmax(18rem, 32rem);
    }

    .poster-card {
        flex-basis: 11rem;
        width: 11rem;
    }

    .content-rail {
        gap: 1rem;
    }

    .video-feed-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .personal-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 25rem) {
    .hero-content {
        padding-inline: 1rem;
    }

    .section-heading > p {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* v28 — feed vertical imersivo, restrito à rota Vídeos. */
:root {
    --app-viewport-height: 100dvh;
    --video-feed-navigation-height: calc(4rem + env(safe-area-inset-bottom));
    --video-feed-height: calc(var(--app-viewport-height) - var(--video-feed-navigation-height));
}

body[data-view="videos"] {
    height: var(--app-viewport-height);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

body[data-view="videos"] .site-header,
body[data-view="videos"] > footer {
    display: none;
}

body[data-view="videos"] main {
    width: 100%;
    height: var(--video-feed-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body[data-view="videos"] .video-feed {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
}

body[data-view="videos"] .video-feed-list {
    display: block;
    width: 100%;
    height: 100%;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

body[data-view="videos"] .video-feed-list::-webkit-scrollbar {
    display: none;
}

body[data-view="videos"] .video-feed-card {
    --video-description-sheet-height: min(58%, 32rem);
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    place-items: center;
    background: #000;
    box-shadow: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body[data-view="videos"] .video-feed-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    height: 4.75rem;
    background: linear-gradient(to top, rgb(0 0 0 / 48%) 0, rgb(0 0 0 / 18%) 48%, transparent 100%);
    content: "";
    pointer-events: none;
    transition: opacity 140ms ease;
}

body[data-view="videos"] .video-feed-visual {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 0;
    background: #000;
    transition: height 220ms ease;
}

body[data-view="videos"] .video-feed-card[data-orientation="portrait"] .video-feed-visual {
    width: max(100%, calc(var(--video-feed-height) * 0.5625));
    max-width: none;
    margin: 0;
}

body[data-view="videos"] .video-player-media,
body[data-view="videos"] .video-feed-visual > img,
body[data-view="videos"] .video-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

body[data-view="videos"] .video-player-media {
    z-index: 1;
    background: #000;
}

body[data-view="videos"] .video-feed-visual > img {
    z-index: 2;
    object-fit: contain;
    object-position: center;
    background: #000;
    transition: opacity 180ms ease;
}

body[data-view="videos"] .video-feed-card[data-orientation="portrait"] .video-feed-visual > img {
    object-fit: cover;
}

body[data-view="videos"] .video-feed-card.is-player-ready .video-feed-visual > img {
    opacity: 0;
    pointer-events: none;
}

body[data-view="videos"] .video-placeholder {
    z-index: 0;
    background:
        radial-gradient(circle at 50% 42%, rgb(255 255 255 / 8%), transparent 24%),
        linear-gradient(145deg, #1b1b1b, #090909 68%);
    color: transparent;
}

body[data-view="videos"] .video-placeholder::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.8rem;
    height: 2.8rem;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    content: "";
}

body[data-view="videos"] .video-gesture-layer {
    position: absolute;
    inset: 0 0 4rem;
    z-index: 3;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

body[data-view="videos"] .video-gesture-layer:focus-visible {
    outline: 0.18rem solid #ff9b52;
    outline-offset: -0.25rem;
}

body[data-view="videos"] .video-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    border: 0.18rem solid rgb(255 255 255 / 24%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: video-feed-spin 750ms linear infinite;
}

body[data-view="videos"] .video-feed-card.is-loading-player .video-loading-indicator {
    display: block;
}

@keyframes video-feed-spin {
    to { transform: rotate(1turn); }
}

body[data-view="videos"] .video-play {
    z-index: 6;
    width: 4rem;
    height: 4rem;
    border-color: rgb(255 255 255 / 35%);
    background: rgb(0 0 0 / 64%);
    font-size: 1.25rem;
}

body[data-view="videos"] .video-feed-controls {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    z-index: 7;
    display: flex;
    gap: 0.5rem;
}

body[data-view="videos"] .video-feed-controls button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 50%;
    place-items: center;
    background: rgb(0 0 0 / 58%);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    backdrop-filter: blur(0.55rem);
    cursor: pointer;
}

body[data-view="videos"] .video-feed-controls svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[data-view="videos"] .video-feed-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding: 3.25rem 0.5rem max(0.65rem, env(safe-area-inset-bottom));
    background: transparent;
    pointer-events: none;
    transition: opacity 140ms ease;
}

body[data-view="videos"] .video-description-open {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    pointer-events: auto;
    cursor: pointer;
}

body[data-view="videos"] .video-info-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: clamp(0.78rem, 2.8vw, 0.9rem);
    line-height: 1.35;
    text-shadow: none;
}

body[data-view="videos"] .video-info-heading > strong {
    font-weight: 800;
}

body[data-view="videos"] .video-info-preview {
    min-width: 0;
    overflow: hidden;
    color: #f0f0f0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-view="videos"] .video-info-more {
    color: #c9c9c9;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

body[data-view="videos"] .video-feed-list.has-description-open {
    overflow-y: hidden;
    scroll-snap-type: none;
}

body[data-view="videos"] .video-feed-card.is-description-open .video-feed-visual {
    height: calc(100% - var(--video-description-sheet-height));
}

body[data-view="videos"] .video-feed-card.is-description-open .video-feed-copy {
    opacity: 0;
    pointer-events: none;
}

body[data-view="videos"] .video-feed-card.is-description-open::after {
    opacity: 0;
}

body[data-view="videos"] .video-description-sheet {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 9;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(100%, 40rem);
    height: var(--video-description-sheet-height);
    overflow: hidden;
    transform: translate(-50%, 102%);
    border-radius: 1.4rem 1.4rem 0 0;
    background: #181c1f;
    color: #f7f7f7;
    box-shadow: 0 -1rem 3rem rgb(0 0 0 / 45%);
    transition: transform 220ms ease, visibility 0s linear 220ms;
    visibility: hidden;
}

body[data-view="videos"] .video-feed-card.is-description-open .video-description-sheet {
    transform: translate(-50%, 0);
    transition-delay: 0s;
    visibility: visible;
}

body[data-view="videos"] .video-description-handle {
    width: 2.5rem;
    height: 0.18rem;
    margin: 0.72rem auto 0.3rem;
    border-radius: 999px;
    background: #9ba1a5;
}

body[data-view="videos"] .video-description-header {
    display: flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 1rem 0.65rem;
    border-bottom: 1px solid rgb(255 255 255 / 9%);
}

body[data-view="videos"] .video-description-header strong {
    font-size: 1rem;
    font-weight: 800;
}

body[data-view="videos"] .video-description-close {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: #2a2f32;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

body[data-view="videos"] .video-description-body {
    min-height: 0;
    padding: 1rem max(1rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body[data-view="videos"] .video-description-sheet .video-caption {
    overflow: visible;
    color: #f2f2f2;
    font-size: clamp(0.86rem, 3.2vw, 0.98rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-shadow: none;
}

body[data-view="videos"] .video-description-sheet .video-caption ul,
body[data-view="videos"] .video-description-sheet .video-caption ol {
    margin: 0.55rem 0;
}

body[data-view="videos"] .video-description-sheet .video-caption a {
    color: #ff8b7a;
}

body[data-view="videos"] .empty-state {
    width: min(calc(100% - 2rem), 34rem);
    min-height: calc(100% - 2rem);
    margin: 1rem auto;
    scroll-snap-align: start;
}

@media (min-width: 46rem) {
    :root {
        --video-feed-navigation-height: 0px;
    }

    body[data-view="videos"] .video-feed-card[data-orientation="portrait"] .video-feed-visual {
        width: min(100%, calc(var(--video-feed-height) * 0.5625));
    }

    body[data-view="videos"] .video-feed-card[data-orientation="landscape"] .video-feed-visual {
        width: min(100%, 80rem);
    }

    body[data-view="videos"] .video-feed-copy {
        left: 50%;
        width: min(100%, 80rem);
        transform: translateX(-50%);
        padding-inline: 1.25rem;
    }

    body[data-view="videos"] .video-feed-card[data-orientation="portrait"] .video-feed-copy {
        width: min(100%, calc(var(--video-feed-height) * 0.5625));
    }

    body[data-view="videos"] .video-description-sheet {
        width: min(100%, 38rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-view="videos"] .video-loading-indicator { animation-duration: 1.5s; }
    body[data-view="videos"] .video-feed-list { scroll-behavior: auto; }
    body[data-view="videos"] .video-feed-visual,
    body[data-view="videos"] .video-feed-copy,
    body[data-view="videos"] .video-description-sheet { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-drawer,
    .navigation-drawer-backdrop {
        transition: none;
    }
}

/* Tela própria de detalhes e conversa por título. */
body[data-view="title"] .mobile-navigation,
body[data-view="title"] > footer {
    display: none;
}

.title-detail-page {
    min-height: calc(100dvh - 4rem);
    background: #090909;
    color: #fff;
}

.title-detail-page .detail-loading {
    min-height: 60dvh;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.detail-page-back {
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0.6rem var(--page-gutter);
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
}

.detail-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.detail-player iframe,
.detail-player video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.detail-player-fallback {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 2rem;
    color: #a8a8aa;
    text-align: center;
    background: radial-gradient(circle at center, #202020, #090909 70%);
}

.detail-player-error {
    position: absolute;
    inset: auto 1rem 1rem;
    margin: 0;
    color: #fff;
    text-align: center;
}

.detail-player-external {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 72%);
    color: #fff;
    font-size: 0.78rem;
    text-decoration: none;
}

.detail-page-copy,
.title-detail-page > .detail-content > .detail-section {
    padding-inline: var(--page-gutter);
}

.detail-page-copy {
    max-width: 72rem;
    margin: 0 auto;
    padding-top: 1.2rem;
}

.detail-page-copy h1 {
    margin: 0;
    font-size: clamp(1.7rem, 6vw, 3rem);
    line-height: 1.08;
}

.detail-synopsis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.detail-synopsis .detail-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #c7c7c9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.detail-synopsis .detail-description.is-expanded {
    display: block;
    overflow: visible;
}

#detail-description-toggle,
.comment-more {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ff6334;
    font: inherit;
    font-weight: 800;
}

.detail-information dl {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
}

.detail-information dl > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.35fr) 1fr;
    gap: 0.8rem;
}

.detail-information dt {
    color: #8e8e93;
}

.detail-information dd {
    margin: 0;
}

.age-badge {
    display: inline-grid;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 0.3rem;
    color: #fff;
    font-weight: 900;
}

.age-l { background: #16833c; }
.age-10 { background: #1685bd; }
.age-12 { background: #e6a51b; color: #14100a; }
.age-14 { background: #e77819; }
.age-16 { background: #c6292d; }
.age-18 { background: #090909; }
.age-unknown { background: #4c4c50; }

.detail-page-copy .detail-actions {
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
}

.detail-list-action {
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
}

.detail-list-action.is-saved {
    border-color: #ff6334;
    color: #ff6334;
}

.comment-preview {
    width: 100%;
    min-height: 5.5rem;
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 1rem;
    background: #171719;
    color: #fff;
    text-align: left;
}

.comment-preview span:first-child {
    display: grid;
    gap: 0.25rem;
}

.comment-preview small,
.comment-preview-text {
    overflow: hidden;
    color: #99999f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-detail-page > .detail-content > .detail-section {
    max-width: 72rem;
    margin: 2rem auto 0;
}

.comment-panel {
    width: 100%;
    max-width: none;
    height: min(82dvh, 52rem);
    max-height: none;
    margin: auto 0 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1.25rem 1.25rem 0 0;
    background: #111113;
    color: #fff;
}

.comment-panel::backdrop {
    background: rgb(0 0 0 / 72%);
}

.comment-panel-shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.comment-panel-shell > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--page-gutter) 0.55rem;
}

.comment-panel-shell > header h2 {
    display: inline;
    margin: 0 0.5rem 0 0;
}

.comment-panel-shell > header span {
    color: #8e8e93;
}

.comment-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem var(--page-gutter) 0.7rem;
    color: #aaaab0;
}

.comment-sort select {
    min-height: 2.4rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: #202023;
    color: #fff;
}

.comment-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--page-gutter) 1rem;
}

.comment-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 2rem 0.85rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.comment-avatar {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3b20, #9b1818);
    font-size: 0.76rem;
    font-weight: 900;
}

.comment-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
}

.comment-card header time,
.comment-card header small {
    color: #8e8e93;
    font-size: 0.75rem;
}

.comment-card header .comment-pinned { color: #ff6334; }
.comment-card header .comment-pending { color: #e6a51b; }

.comment-body {
    margin: 0.45rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-body.is-collapsed:not(.is-expanded) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.comment-actions button,
.comment-menu,
.comment-load-more {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: #aaaab0;
    font: inherit;
}

.comment-actions button.is-active { color: #ff4a33; }
.comment-menu { position: absolute; top: 0.7rem; right: 0; font-size: 1.3rem; }
.comment-replies { grid-column: 1 / -1; }
.comment-reply { margin-left: 0.7rem; padding-right: 1.5rem; }
.comment-empty { color: #8e8e93; text-align: center; padding: 2rem; }
.comment-load-more { margin: 0 auto; color: #ff6334; }

.comment-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.75rem var(--page-gutter) calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(255 255 255 / 10%);
    background: #111113;
}

.comment-composer textarea {
    min-height: 2.8rem;
    max-height: 8rem;
    resize: vertical;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1rem;
    background: #232326;
    color: #fff;
    font: inherit;
}

.comment-composer > button {
    min-width: 4.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    color: #fff;
    font-weight: 800;
}

.comment-reply-context,
.comment-composer p {
    grid-column: 1 / -1;
    margin: 0;
}

.comment-reply-context {
    display: flex;
    justify-content: space-between;
    color: #aaaab0;
}

.comment-reply-context button {
    border: 0;
    background: transparent;
    color: #fff;
}

.comment-composer p[data-error="true"] { color: #ff7b73; }

@media (min-width: 46rem) {
    .title-detail-page .detail-content {
        padding: 1rem var(--page-gutter) 3rem;
    }

    .detail-player {
        max-width: 60rem;
        margin: 0 auto;
        border-radius: 1rem;
    }

    .detail-page-back {
        display: block;
        max-width: 72rem;
        margin-inline: auto;
    }

    .comment-panel {
        width: min(32rem, 92vw);
        height: 100dvh;
        margin: 0 0 0 auto;
        border-radius: 1rem 0 0 1rem;
    }
}

/* Mantém as regras v21 acima das regras legadas de detalhe. */
.detail-page-copy h1 { font-size: clamp(1.3rem, 5.5vw, 2.25rem); }
.detail-synopsis { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; margin-top: 0.4rem; }
.detail-synopsis #detail-description-toggle { justify-self: center; min-width: 4rem; }
.comment-preview { grid-template-columns: minmax(0, 1fr) auto; margin-top: 0.8rem; }
.comment-panel-shell { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.comment-composer { align-items: end; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.comment-composer textarea { min-height: 2.75rem; max-height: 8rem; padding: 0.72rem 0.9rem; resize: none; overflow-y: auto; font-size: clamp(0.875rem, 4vw, 1rem); line-height: 1.3; }
.comment-composer > button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; }
@media (min-width: 46rem) {
    .title-detail-page .detail-content { padding: 0 0 3rem; }
    .detail-player-host { padding-top: 1rem; }
    .detail-player-shell { max-width: 60rem; margin: 0 auto; }
    .detail-player-shell,
    .detail-player { border-radius: 1rem; }
}

/* v22 — sinopse lateral e miniplayer compacto. */
.detail-synopsis {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
}

.detail-synopsis #detail-description-toggle {
    min-width: 3.4rem;
    justify-self: end;
}

.detail-player-minimize svg {
    width: 1.25rem;
    height: 1.25rem;
}

.detail-player-minimize svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.detail-player-minimize svg path {
    fill: currentColor;
}

.mini-player {
    right: 0.65rem;
    bottom: calc(4.65rem + env(safe-area-inset-bottom));
    width: min(13rem, calc(100vw - 1.3rem));
}

.mini-player-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    align-items: center;
    background: #171719;
}

.mini-player-restore {
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.45rem 0.25rem 0.45rem 0.65rem;
    background: transparent;
}

.mini-player-restore span {
    font-size: 0.88rem;
}

.mini-player-restore small {
    font-size: 0.68rem;
}

.mini-player-close {
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    border-radius: 50%;
    background: #29292d;
    color: #fff;
    font: 800 1.45rem/1 Manrope, sans-serif;
}

.mini-player-close:hover,
.mini-player-close:focus-visible {
    background: #38383d;
}

.mini-player-stage,
.mini-player-stage .detail-player {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.mini-player-stage .detail-player-error {
    inset: auto 0.35rem 0.35rem;
    font-size: 0.65rem;
    line-height: 1.2;
}

@media (min-width: 46rem) {
    .mini-player {
        right: 1rem;
        bottom: 1rem;
    }
}

/* v23 — ações responsivas e miniplayer arrastável. */
.detail-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.15rem;
    row-gap: 0.15rem;
}

.detail-heading-row h1 {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.detail-heading-row .detail-title-actions {
    flex: 0 0 auto;
    gap: 0;
    margin-top: 0;
}

.detail-heading-row .detail-title-actions button {
    min-width: 2.5rem;
    padding-inline: 0.35rem;
}

.detail-heading-row .detail-title-actions #detail-like {
    padding-inline: 0.35rem;
}

.detail-player-shell.is-dragging,
.mini-player.is-dragging {
    transition: none;
}

.mini-player {
    transform-origin: center;
    transition: left 160ms ease, top 160ms ease, transform 160ms ease;
    will-change: left, top, transform;
}

.mini-player-heading {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.mini-player.is-dragging .mini-player-heading {
    cursor: grabbing;
}

.mini-player-restore {
    touch-action: none;
}