:root {
    color-scheme: dark;
    --cf-bg: #09090b;
    --cf-panel: #141417;
    --cf-border: #2c2c32;
    --cf-muted: #a5a5af;
    --cf-red: #e6323d;
    --cf-white: #f7f5f1;
    --bs-body-bg: var(--cf-bg);
    --bs-body-color: var(--cf-white);
    --bs-border-color: var(--cf-border);
    --bs-primary: var(--cf-red);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cf-bg); color: var(--cf-white); font-family: Inter, 'Segoe UI', system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ff7b82; outline-offset: 4px; }
[hidden] { display: none !important; }
.cf-icon { width: 21px; height: 21px; flex-shrink: 0; vertical-align: middle; }
.page-container { padding-inline: 4.5vw; }
.wordmark { font-family: Impact, 'Arial Narrow', sans-serif; font-weight: 900; font-size: 29px; letter-spacing: -1.1px; line-height: 1; color: var(--cf-white); white-space: nowrap; }
.wordmark span { color: var(--cf-red); }
.wordmark:hover { color: white; }
.small-wordmark { font-size: 22px; }
.eyebrow { display: block; color: #c6c4cb; font-size: 10px; font-weight: 650; letter-spacing: 2.3px; margin-bottom: 15px; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 3000; padding: 12px 20px; background: var(--cf-red); }
.skip-link:focus { top: 12px; }
.btn { border-radius: 6px; font-weight: 650; font-size: 14px; padding: 12px 23px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-brand { background: var(--cf-red); color: white; border: 1px solid var(--cf-red); }
.btn-brand:hover, .btn-brand:focus { background: #c82530; color: white; border-color: #c82530; }
.btn-light { color: #111; background: #f7f5f1; border-color: #f7f5f1; }
.btn-light:hover { background: #d6d4d2; color: #111; }
.btn-glass { background: #ffffff17; border: 1px solid #ffffff20; color: white; backdrop-filter: blur(10px); }
.btn-glass:hover { background: #ffffff27; border-color: #ffffff40; color: white; }
.btn-sm { font-size: 12px; padding: 7px 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; font-size: 13px; color: #e9e7e4; }
.text-link:hover { color: #ff727a; }
.text-link .cf-icon { width: 16px; height: 16px; }
.form-control, .form-select { background-color: #1d1d22; color: var(--cf-white); border-color: #3b3b43; border-radius: 6px; padding: 12px 14px; font-size: 14px; }
.form-control:focus, .form-select:focus { background-color: #202026; color: white; border-color: #e45b63; box-shadow: 0 0 0 3px #e6323d1a; }
.form-control::placeholder { color: #90909c; font-size: 13px; }
.form-label { color: #dad8df; font-size: 12px; font-weight: 550; margin-bottom: 8px; }
.form-check-input:checked { background-color: var(--cf-red); border-color: var(--cf-red); }
.alert { font-size: 13px; border-radius: 7px; }
.flash-stack { position: fixed; top: 92px; right: 4.5vw; max-width: 550px; z-index: 1200; }
.flash-stack:empty { display: none; }
.toast { color: white; background: #232329; border-color: #44444d; font-size: 13px; }
.toast-container { z-index: 1600; }
.toast .btn-close { filter: invert(1); }

/* Navegação */
.site-header { height: 82px; padding: 0 4.5vw; display: flex; align-items: center; gap: 36px; position: sticky; top: 0; z-index: 1000; background: linear-gradient(#09090bf5,#09090bd9); backdrop-filter: blur(18px); border-bottom: 1px solid #ffffff08; }
.desktop-nav { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.desktop-nav a { color: #b8b6bf; font-size: 13px; padding-block: 29px; position: relative; }
.desktop-nav a:hover, .desktop-nav a.active { color: white; }
.desktop-nav a.active { font-weight: 650; }
.desktop-nav a.active:after { content: ''; position: absolute; bottom: 16px; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--cf-red); }
.header-search { margin-left: auto; display: flex; align-items: center; position: relative; width: 255px; }
.header-search > .cf-icon { position: absolute; left: 12px; width: 17px; height: 17px; color: #aaa8b1; }
.header-search input { color: white; background: #ffffff06; border: 1px solid #ffffff14; border-radius: 5px; width: 100%; padding: 10px 34px; font-size: 11px; min-height: 39px; }
.header-search input:focus { border-color: #ffffff55; background: #17171d; outline-offset: 2px; }
.header-search input::placeholder { color: #aaa8b1; }
.header-search input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: 7px; border: 0; color: #ccc; background: none; padding: 3px; }
.search-clear .cf-icon { width: 15px; height: 15px; }
.profile-button { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #e6e4e9; font-size: 12px; padding: 0; }
.avatar { width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center; background: linear-gradient(145deg,#8e2530,#db4b56); border: 1px solid #ffb2b33b; border-radius: 7px; color: white; font-size: 15px; font-weight: 750; flex-shrink: 0; }
.profile-chevron { width: 12px; height: 12px; transform: rotate(90deg); color: #aaa; }
.dropdown-menu { --bs-dropdown-bg: #1a1a20; --bs-dropdown-border-color: #38383f; --bs-dropdown-link-hover-bg: #2a2a33; border-radius: 8px; padding: 9px; margin-top: 15px !important; min-width: 215px; box-shadow: 0 15px 40px #0008; }
.dropdown-item { border-radius: 5px; font-size: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; }
.dropdown-item .cf-icon { width: 17px; height: 17px; color: #bdbac7; }
.dropdown-header { color: #aaa7b4; font-size: 11px; padding: 7px 10px 10px; }
.bottom-nav { display: none; }
.site-footer { display: flex; align-items: center; gap: 28px; padding-block: 35px 45px; border-top: 1px solid #ffffff0a; margin-top: 45px; color: #87858e; font-size: 11px; }
.site-footer small { margin-left: auto; color: #686670; font-size: 10px; }

/* Cenário e destaque */
.cinema-hero { position: relative; min-height: 590px; height: min(70vh,760px); margin-top: -82px; overflow: hidden; background: #0d1521; }
.hero-background { position: absolute; inset: 0; background-image: var(--hero-image,url('img/cinema.png')); background-size: cover; background-position: center 42%; }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(90deg,#09090bf2 0%,#09090bd9 23%,#09090b55 56%,#09090b05 100%),linear-gradient(0deg,#09090b 0%,#09090b00 40%,#09090b12 80%); }
.hero-copy { position: relative; z-index: 1; width: min(650px,55%); padding: 160px 0 100px; margin-left: 4.5vw; }
.hero-copy .eyebrow { font-size: 10px; color: #e4e1e7; letter-spacing: 2.8px; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.live-dot { height: 5px; width: 5px; background: var(--cf-red); border-radius: 50%; }
.hero-copy h1 { font-size: clamp(38px,4vw,65px); font-weight: 800; line-height: 1.06; letter-spacing: -1.9px; margin: 0 0 20px; text-wrap: balance; }
.hero-metadata { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #ddd9e1; flex-wrap: wrap; }
.hero-metadata span + span:before { content: '·'; margin-right: 12px; color: #7e7a87; }
.hero-copy > p { margin-top: 20px; color: #bdbbc8; font-size: 14px; line-height: 1.85; max-width: 440px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.hero-actions .cf-icon { width: 19px; height: 19px; }
.hero-library { display: flex; flex-wrap: wrap; gap: 18px; color: #aaa5b3; font-size: 10px; margin-top: 32px; }
.hero-library span + span { border-left: 1px solid #ffffff26; padding-left: 18px; }
.hero-signature { position: absolute; bottom: 83px; right: 4.5vw; color: #eee9e775; font-size: 8px; letter-spacing: 3px; writing-mode: vertical-rl; }
.preparing-library { font-size: 13px; color: #c6c2ce; padding: 10px 0; }
.home-catalog { position: relative; z-index: 2; margin-top: -33px; }
.catalog-section { margin-bottom: 34px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 2px; }
.section-title > div:first-child { display: flex; align-items: center; gap: 12px; }
.section-title h2 { font-size: 20px; font-weight: 700; letter-spacing: -.4px; margin: 0; }
.section-count { color: #a6a1af; font-size: 10px; font-variant-numeric: tabular-nums; background: #ffffff08; border: 1px solid #ffffff0b; border-radius: 4px; padding: 1px 6px; }
.section-actions { display: flex; align-items: center; gap: 7px; }
.section-actions > a { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #a39dab; margin-right: 9px; }
.section-actions > a:hover { color: white; }
.section-actions a .cf-icon { width: 12px; height: 12px; }
.section-actions > button { color: #d5cfde; background: #ffffff03; border: 1px solid #ffffff15; border-radius: 50%; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; padding: 5px; }
.section-actions > button:hover { background: #ffffff14; }
.section-actions > button:disabled { opacity: .3; cursor: default; }
.section-actions button .cf-icon { width: 14px; height: 14px; }

/* Capas e coleções */
.media-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(145px,13vw,196px); gap: 17px; overflow-x: auto; overflow-y: hidden; padding: 15px 2px 18px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.media-rail::-webkit-scrollbar { display: none; }
.media-card { min-width: 0; scroll-snap-align: start; }
.poster-wrap { position: relative; border-radius: 7px; aspect-ratio: 2/3; background: #1d2029; transition: transform .2s,box-shadow .2s; }
.media-card:hover .poster-wrap, .media-card:focus-within .poster-wrap { transform: translateY(-5px); box-shadow: 0 14px 30px #0006; }
.poster-link { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; position: relative; isolation: isolate; }
.poster-link > img { width: 100%; height: 100%; object-fit: cover; }
.poster-placeholder { height: 100%; padding: 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: radial-gradient(ellipse at 85% 12%,hsl(var(--poster-hue) 45% 29% / .8),transparent 60%),linear-gradient(155deg,hsl(var(--poster-hue) 25% 19%),#0e111b); }
.poster-placeholder:before { content: ''; position: absolute; width: 160%; height: 65%; border: 1px solid #ffffff10; transform: rotate(-35deg); top: 25%; left: -30%; box-shadow: 0 20px 0 #ffffff03,0 40px 0 #ffffff03,0 60px 0 #ffffff03; }
.poster-mini-brand { font-size: 10px; font-weight: 800; color: #ffffffa6; letter-spacing: 2px; position: relative; }
.poster-art { display: flex; align-items: center; justify-content: center; flex: 1; position: relative; color: #ffffff17; }
.poster-art .cf-icon { width: 70px; height: 70px; stroke-width: .75; }
.poster-title { font-size: clamp(18px,1.6vw,26px); line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; font-weight: 750; color: #f8f4ed; position: relative; margin-bottom: 22px; }
.poster-placeholder small { position: absolute; bottom: 12px; font-size: 6px; letter-spacing: 1.5px; color: #ffffff66; }
.poster-shade { position: absolute; inset: 0; background: linear-gradient(0deg,#0008,transparent 35%); z-index: 1; }
.poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9); width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f8f5f0; color: #141216; opacity: 0; z-index: 2; transition: opacity .18s,transform .18s; box-shadow: 0 4px 15px #0005; }
.poster-play .cf-icon { width: 19px; height: 19px; margin-left: 2px; }
.media-card:hover .poster-play, .media-card:focus-within .poster-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.poster-type { position: absolute; z-index: 2; bottom: 10px; left: 11px; color: #e9e5eb; font-size: 8px; font-weight: 650; background: #08080b6b; border: 1px solid #ffffff22; border-radius: 3px; padding: 2px 5px; backdrop-filter: blur(7px); }
.favorite-button { position: absolute; z-index: 4; top: 9px; right: 9px; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; background: #111118b3; color: #eee8f0; border: 1px solid #ffffff38; border-radius: 50%; padding: 6px; backdrop-filter: blur(10px); }
.favorite-button .cf-icon { width: 16px; height: 16px; }
.favorite-button:hover { background: #29252f; border-color: #fff8; }
.favorite-button.saved, .favorite-button-detail.saved { color: #ff858e; }
.favorite-button.saved .cf-icon, .favorite-button-detail.saved .cf-icon { fill: currentColor; }
.favorite-button:disabled { opacity: .6; }
.card-caption { padding: 12px 2px 0; }
.card-caption > a { display: block; font-size: 12px; font-weight: 600; color: #e6e2e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-caption > a:hover { color: white; }
.card-caption > div { display: flex; flex-wrap: wrap; gap: 7px; font-size: 9px; color: #928c9d; margin-top: 5px; }
.card-caption > div span + span:before { content: '·'; margin-right: 7px; }
.landscape-rail { grid-auto-columns: clamp(235px,23vw,335px); }
.landscape-card .poster-wrap { aspect-ratio: 16/9; }
.landscape-card .poster-title { font-size: 20px; max-width: 80%; margin-bottom: 23px; }
.landscape-card .poster-art { position: absolute; right: 20px; top: 35px; }
.landscape-card .poster-art .cf-icon { width: 80px; height: 80px; }
.landscape-card .poster-placeholder { padding: 18px; justify-content: space-between; }
.landscape-card .poster-placeholder > small { display: none; }
.watch-progress { position: absolute; z-index: 3; bottom: 0; height: 3px; width: 100%; background: #ffffff30; }
.watch-progress > span { display: block; height: 100%; background: var(--cf-red); }
.welcome-library { display: flex; gap: 25px; align-items: center; border: 1px solid #ffffff10; border-radius: 10px; background: linear-gradient(110deg,#161419,#111217); padding: 32px; }
.welcome-icon { display: flex; align-items: center; justify-content: center; height: 65px; width: 65px; background: #e6323d0d; color: #e3838b; border: 1px solid #e6323d20; border-radius: 14px; flex-shrink: 0; }
.welcome-icon .cf-icon { width: 30px; height: 30px; }
.welcome-library .eyebrow { font-size: 8px; margin-bottom: 8px; }
.welcome-library h2 { font-size: 22px; font-weight: 650; letter-spacing: -.4px; }
.welcome-library p { color: #a09aa9; font-size: 12px; line-height: 1.8; margin: 0; max-width: 620px; }
.welcome-library .text-link { margin-left: auto; white-space: nowrap; font-size: 11px; }
.personal-strip { display: flex; justify-content: center; gap: 60px; padding-block: 25px 8px; color: #8e8896; font-size: 10px; }
.personal-strip > span { display: flex; align-items: center; gap: 8px; }
.personal-strip .cf-icon { width: 15px; height: 15px; color: #b5aab9; }
.page-heading { margin-bottom: 35px; position: relative; }
.page-heading h1 { font-size: 42px; font-weight: 750; letter-spacing: -1px; margin: 0 0 12px; }
.page-heading .eyebrow { font-size: 9px; margin-bottom: 14px; }
.page-heading p { font-size: 13px; color: #a49eac; margin: 0; }
.result-count { display: block; color: #7e7788; font-size: 11px; margin-top: 15px; }
.browse-page { padding-top: 55px; min-height: 70vh; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 30px 20px; }
.landscape-grid { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); }
.empty-state { text-align: center; padding: 75px 20px; border: 1px dashed #ffffff13; border-radius: 12px; background: #111114; }
.empty-state > .cf-icon { width: 38px; height: 38px; color: #8c7b91; margin-bottom: 25px; stroke-width: 1.1; }
.empty-state h2 { font-size: 22px; letter-spacing: -.3px; }
.empty-state p { color: #9991a1; font-size: 13px; margin: 14px 0 25px; }
.empty-state .btn { font-size: 12px; padding: 9px 17px; }
.instant-results { padding-top: 45px; min-height: 75vh; }
#search-status { font-size: 12px; color: #aaa; }

/* Autenticação */
.login-page { min-height: 100vh; background: #080c13; }
.login-backdrop { position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg,#070c15e8,#070c1599 45%,#070c1555),linear-gradient(0deg,#080b13,#080b1300 60%),url('img/cinema.png') center/cover; }
.login-header { padding: 38px 5vw; display: flex; align-items: center; justify-content: space-between; }
.login-header .wordmark { font-size: 34px; }
.login-header > span { color: #b2b1bc; font-size: 11px; letter-spacing: .4px; }
.login-layout { max-width: 1450px; margin: 60px auto 100px; padding-inline: 5vw; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8vw; align-items: center; }
.login-story .eyebrow { font-size: 9px; color: #c9b7bb; }
.login-story h1 { font-size: clamp(36px,4.2vw,65px); font-weight: 800; line-height: 1.13; letter-spacing: -2px; text-wrap: balance; }
.login-story h1 em { color: #e8bfc3; font-style: normal; }
.login-story > p { max-width: 400px; color: #b5b2c0; line-height: 1.9; font-size: 14px; margin-top: 25px; }
.login-features { display: flex; gap: 27px; flex-wrap: wrap; margin-top: 32px; color: #c9c1cd; font-size: 10px; }
.login-features span { display: flex; align-items: center; gap: 7px; }
.login-features .cf-icon { width: 17px; height: 17px; color: #ce9099; }
.login-card { width: 100%; max-width: 410px; justify-self: end; background: #10131de8; border: 1px solid #ffffff1c; border-radius: 13px; padding: 36px; box-shadow: 0 25px 80px #0005; backdrop-filter: blur(20px); }
.login-card-kicker { color: #da8e98; font-size: 8px; letter-spacing: 2px; font-weight: 600; margin-bottom: 14px; }
.login-card h2 { font-size: 25px; letter-spacing: -.7px; font-weight: 700; }
.login-card > p { color: #9e9aaa; font-size: 12px; margin-bottom: 28px; }
.login-card .form-control { background: #1a1e29; border-color: #373c49; font-size: 13px; }
.login-card .btn-brand { margin-top: 3px; }
.login-card > .login-help { margin: 25px 0; font-size: 10px; line-height: 1.8; max-width: 280px; }
.login-private { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 20px; border-top: 1px solid #ffffff0b; color: #7b788a; font-size: 9px; }
.login-private .cf-icon { width: 13px; height: 13px; }
.login-footer { display: flex; justify-content: space-between; padding: 0 5vw 25px; color: #777585; font-size: 10px; }

/* Episódios e leitor */
.detail-hero { min-height: 590px; height: auto; }
.detail-hero .hero-copy { padding-top: 125px; width: min(680px,60%); }
.detail-hero .hero-copy > p { max-width: 600px; max-height: 170px; overflow: auto; }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: #b4acbd; font-size: 12px; margin-bottom: 30px; }
.back-link:hover { color: white; }
.back-link .cf-icon { width: 16px; height: 16px; }
.episode-section { margin-top: -20px; position: relative; z-index: 2; }
.season-selector { display: flex; gap: 10px; align-items: center; color: #b8b1c1; font-size: 12px; }
.season-selector .form-select { width: 75px; padding: 8px 25px 8px 12px; font-size: 12px; }
.season-list { margin-top: 20px; }
.episode-row { display: flex; align-items: center; gap: 22px; padding: 22px 15px; border-top: 1px solid #ffffff0d; transition: background .15s; }
.episode-row:hover { background: #ffffff06; border-radius: 7px; }
.episode-number { color: #797180; font-size: 24px; font-weight: 550; width: 34px; flex-shrink: 0; }
.episode-thumb { width: 125px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-radius: 5px; flex-shrink: 0; background: linear-gradient(125deg,#322330,#131925); color: #e2cbd4; }
.episode-thumb .cf-icon { width: 23px; height: 23px; }
.episode-copy { min-width: 0; flex: 1; }
.episode-copy h3 { font-size: 14px; font-weight: 600; }
.episode-copy p { font-size: 12px; color: #9b91a4; margin: 0; }
.episode-duration { color: #bcb2c6; font-size: 11px; white-space: nowrap; }
.episode-duration .cf-icon { width: 16px; height: 16px; }
.episode-progress { height: 3px; max-width: 280px; background: #ffffff12; margin-top: 12px; }
.episode-progress > span { display: block; height: 100%; background: var(--cf-red); }
.watch-page { background: #060608; }
.watch-page .header-search { visibility: hidden; }
.player-page { padding-top: 35px; padding-bottom: 60px; max-width: 1700px; margin-inline: auto; }
.player-heading { display: flex; align-items: center; gap: 25px; margin-bottom: 25px; }
.player-heading .back-link { margin: 0; }
.player-heading h1 { font-size: 23px; font-weight: 650; letter-spacing: -.4px; margin: 0; }
.player-heading .eyebrow { font-size: 8px; margin-bottom: 7px; }
.player-heading p { color: #a396ac; font-size: 11px; margin: 7px 0 0; }
.format-tag { margin-left: auto; border: 1px solid #ffffff2b; color: #a699b0; border-radius: 4px; font-size: 9px; padding: 4px 7px; }
.video-shell { width: 100%; aspect-ratio: 16/9; background: black; border: 1px solid #ffffff12; border-radius: 10px; overflow: hidden; box-shadow: 0 15px 60px #0007; }
.video-shell video { width: 100%; height: 100%; display: block; background: black; }
.player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; color: #82758f; font-size: 11px; }
.player-toolbar a { font-size: 11px; }
.next-episode { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #18121c; border: 1px solid #402337; border-radius: 8px; padding: 22px; margin-top: 20px; }
.next-episode .eyebrow { font-size: 8px; margin-bottom: 10px; }
.next-episode h2 { font-size: 18px; margin: 0; }
.next-episode .btn { font-size: 12px; }
.player-overview { max-width: 850px; margin-top: 35px; }
.player-overview h2 { font-size: 18px; }
.player-overview p { color: #a59aad; line-height: 1.9; font-size: 13px; margin-top: 15px; }

/* Conta e administração */
.settings-page { padding-top: 55px; padding-bottom: 40px; min-height: 70vh; }
.settings-panel { background: var(--cf-panel); border: 1px solid #ffffff0e; border-radius: 10px; padding: 30px; height: 100%; }
.settings-panel h2 { font-size: 21px; font-weight: 650; letter-spacing: -.4px; margin-bottom: 22px; }
.settings-panel > p { color: #a59aaa; font-size: 12px; line-height: 1.9; }
.settings-panel .eyebrow { color: #c68b96; font-size: 8px; }
.panel-title { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 28px; }
.panel-title > .cf-icon { width: 27px; height: 27px; color: #d9acb3; margin-top: 4px; }
.panel-title h2 { margin-bottom: 8px; }
.panel-title p { color: #9c91a3; font-size: 12px; margin: 0; }
.root-path { font: 12px/1.7 ui-monospace,Consolas,monospace; color: #ded0df; padding: 13px 15px; border: 1px solid #37303d; border-radius: 5px; background: #0f0f14; overflow-wrap: anywhere; }
.muted-copy { color: #918595 !important; font-size: 11px !important; line-height: 1.9; margin-top: 14px; }
.library-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 30px 0; border-block: 1px solid #ffffff0a; padding-block: 24px; }
.library-stats > div { padding-left: 20px; border-left: 1px solid #ffffff10; }
.library-stats > div:first-child { padding-left: 0; border: 0; }
.library-stats strong { display: block; font-size: 30px; font-weight: 650; }
.library-stats span { display: block; color: #a196a7; font-size: 11px; margin-top: 5px; }
.scan-status { font-size: 12px; color: #afa2b7; margin-top: 20px; line-height: 1.8; }
.scan-status small { display: block; margin-top: 8px; color: #82768b; font-size: 10px; }
.scan-status.scan-failed { color: #f2a0a7; }
.folder-example { background: #0e0e13; border: 1px solid #ffffff08; padding: 18px; border-radius: 6px; font: 11px/1.8 ui-monospace,Consolas,monospace; color: #baafc7; margin-top: 22px; }
.users-list { margin-top: 15px; }
.user-row { display: flex; align-items: center; gap: 13px; padding-block: 18px; border-bottom: 1px solid #ffffff0a; }
.user-row > div { flex: 1; min-width: 0; }
.user-row strong { font-size: 13px; }
.user-row small { display: block; color: #998da1; font-size: 10px; margin-top: 5px; }
.account-you { color: #ad8390; font-size: 11px; padding-right: 5px; }
.account-page { max-width: 780px; }
.account-page .settings-panel { max-width: 540px; }
.error-page { min-height: 75vh; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 15px; }
.error-code { font-size: 90px; font-weight: 800; line-height: 1; color: #4b2632; margin-top: 30px; }
.error-page h1 { font-size: 32px; font-weight: 700; letter-spacing: -.8px; }
.error-page p { color: #ab9ab3; font-size: 14px; max-width: 580px; line-height: 1.8; }

@media (min-width:1800px) {
    .hero-copy { padding-top: 190px; }
    .media-rail { grid-auto-columns: 200px; gap: 21px; }
    .landscape-rail { grid-auto-columns: 340px; }
}
@media (max-width:1100px) {
    .site-header { gap: 24px; }
    .desktop-nav { gap: 20px; }
    .profile-name, .profile-chevron { display: none; }
    .wordmark { font-size: 25px; }
    .header-search { width: 205px; }
    .hero-copy { width: 58%; }
    .hero-copy h1 { font-size: 49px; }
    .login-layout { gap: 5vw; }
    .login-story h1 { font-size: 43px; }
    .login-card { padding: 28px; }
    .welcome-library { flex-wrap: wrap; }
    .welcome-library .text-link { margin-left: 90px; }
}
@media (max-width:800px) {
    .site-header { gap: 19px; }
    .desktop-nav { gap: 14px; }
    .desktop-nav a { font-size: 11px; }
    .header-search { width: 170px; }
    .header-search input { font-size: 10px; }
    .hero-copy { width: 65%; }
    .hero-copy h1 { font-size: 42px; }
    .hero-copy > p { font-size: 13px; }
    .hero-signature { display: none; }
    .login-story h1 { font-size: 38px; }
    .login-story > p { font-size: 12px; }
    .login-features { gap: 14px; font-size: 9px; }
    .login-layout { grid-template-columns: 1fr 1fr; gap: 30px; }
    .login-card { padding: 25px; }
    .login-card h2 { font-size: 22px; }
    .episode-thumb { width: 100px; }
}
@media (max-width:650px) {
    .page-container { padding-inline: 20px; }
    .site-header { padding: 17px 20px 12px; height: 111px; flex-wrap: wrap; gap: 12px; align-content: space-between; }
    .site-header .wordmark { font-size: 25px; }
    .desktop-nav { display: none; }
    .profile-menu { margin-left: auto; order: 2; }
    .avatar { width: 30px; height: 30px; font-size: 13px; }
    .header-search { order: 3; width: 100%; max-width: none; margin: 0; }
    .header-search input { padding-block: 7px; min-height: 32px; font-size: 11px; }
    .header-search > .cf-icon { height: 15px; width: 15px; }
    .flash-stack { top: 120px; left: 15px; right: 15px; max-width: none; }
    .btn { padding: 11px 18px; font-size: 12px; gap: 8px; }
    .btn .cf-icon { width: 17px; height: 17px; }
    .cinema-hero { margin-top: -111px; min-height: 620px; height: auto; }
    .hero-background { background-position: 65% top; }
    .hero-gradient { background: linear-gradient(0deg,#09090b 0%,#09090bcd 25%,#09090b60 65%,#09090b20 100%),linear-gradient(90deg,#09090b99,transparent); }
    .hero-copy { width: auto; margin: 0; padding: 260px 20px 90px; }
    .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 14px; }
    .hero-copy h1 { font-size: 41px; letter-spacing: -1.2px; max-width: 350px; margin-bottom: 16px; }
    .hero-metadata { font-size: 10px; gap: 8px; }
    .hero-metadata span + span:before { margin-right: 8px; }
    .hero-copy > p { font-size: 12px; line-height: 1.85; max-width: 360px; margin-top: 16px; }
    .hero-actions { gap: 10px; margin-top: 22px; }
    .hero-library { font-size: 9px; gap: 12px; margin-top: 25px; }
    .hero-library span + span { padding-left: 12px; }
    .home-catalog { margin-top: -30px; }
    .section-title h2 { font-size: 17px; }
    .section-title > div:first-child { gap: 8px; }
    .section-count { font-size: 8px; padding: 1px 5px; }
    .section-actions > button { display: none; }
    .section-actions > a { font-size: 9px; margin: 0; }
    .media-rail { grid-auto-columns: 145px; gap: 12px; padding-block: 12px 16px; }
    .landscape-rail { grid-auto-columns: 245px; }
    .catalog-section { margin-bottom: 27px; }
    .poster-placeholder { padding: 13px; }
    .poster-title { font-size: 21px; }
    .poster-placeholder small { font-size: 5px; letter-spacing: 1px; }
    .poster-mini-brand { font-size: 9px; }
    .favorite-button { width: 34px; height: 34px; top: 7px; right: 7px; }
    .favorite-button .cf-icon { width: 16px; height: 16px; }
    .card-caption { padding-top: 9px; }
    .card-caption > a { font-size: 11px; }
    .card-caption > div { font-size: 8px; gap: 5px; }
    .card-caption > div span + span:before { margin-right: 5px; }
    .welcome-library { display: block; padding: 24px; }
    .welcome-icon { width: 45px; height: 45px; margin-bottom: 18px; }
    .welcome-icon .cf-icon { width: 24px; height: 24px; }
    .welcome-library h2 { font-size: 21px; line-height: 1.3; }
    .welcome-library p { font-size: 11px; }
    .welcome-library .text-link { margin: 18px 0 0; }
    .personal-strip { flex-direction: column; gap: 16px; padding: 30px 5px 0; align-items: center; font-size: 10px; }
    .site-footer { display: grid; gap: 16px; padding-block: 27px 100px; margin-top: 35px; font-size: 10px; }
    .site-footer small { margin: 0; font-size: 9px; }
    .bottom-nav { position: fixed; inset: auto 0 0; display: flex; justify-content: space-around; padding: 10px 6px max(10px,env(safe-area-inset-bottom)); background: #0e0e12f5; backdrop-filter: blur(15px); z-index: 1100; border-top: 1px solid #ffffff0d; }
    .bottom-nav a { color: #918a9a; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 25%; font-size: 8px; padding: 4px; }
    .bottom-nav a.active { color: #fff; }
    .bottom-nav a.active .cf-icon { color: #f36b76; }
    .bottom-nav .cf-icon { width: 20px; height: 20px; }
    .browse-page, .settings-page { padding-top: 35px; }
    .page-heading { margin-bottom: 27px; }
    .page-heading h1 { font-size: 32px; letter-spacing: -.8px; }
    .page-heading p { font-size: 12px; line-height: 1.8; }
    .page-heading .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
    .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 14px; }
    .landscape-grid { grid-template-columns: 1fr; }
    .empty-state { padding: 45px 18px; }
    .empty-state h2 { font-size: 20px; }
    .empty-state p { font-size: 12px; line-height: 1.8; }
    .instant-results { padding-top: 30px; padding-bottom: 100px; }
    .login-header { padding: 25px 23px; }
    .login-header .wordmark { font-size: 29px; }
    .login-header > span { display: none; }
    .login-backdrop { background-position: 65% top; background-image: linear-gradient(0deg,#080b13 5%,#080b13a8 65%,#080b1370),url('img/cinema.png'); }
    .login-layout { display: flex; flex-direction: column; padding: 0 23px; gap: 28px; margin: 30px auto 45px; }
    .login-story { width: 100%; }
    .login-story .eyebrow { font-size: 7px; letter-spacing: 1.8px; }
    .login-story h1 { font-size: 35px; letter-spacing: -1.2px; }
    .login-story > p { font-size: 11px; line-height: 1.85; margin: 15px 0 0; max-width: 330px; }
    .login-features { display: none; }
    .login-card { max-width: none; padding: 27px 24px; border-radius: 10px; }
    .login-card h2 { font-size: 23px; }
    .login-card > p { font-size: 11px; margin-bottom: 23px; }
    .login-footer { display: flex; flex-direction: column; gap: 8px; padding: 0 23px 25px; font-size: 9px; }
    .detail-hero { min-height: 620px; }
    .detail-hero .hero-copy { padding: 210px 20px 75px; width: auto; }
    .detail-hero .back-link { margin-bottom: 20px; }
    .detail-hero .hero-copy > p { max-height: 130px; }
    .episode-section { margin-top: -20px; }
    .episode-row { gap: 12px; padding: 20px 0; }
    .episode-number { width: 21px; font-size: 18px; }
    .episode-thumb { width: 70px; }
    .episode-copy h3 { font-size: 12px; }
    .episode-copy p { font-size: 10px; max-height: 34px; overflow: hidden; }
    .episode-duration { font-size: 9px; max-width: 45px; white-space: normal; text-align: right; }
    .season-selector { font-size: 10px; gap: 6px; }
    .season-selector .form-select { width: 63px; font-size: 11px; }
    .watch-page .site-header { height: 65px; padding-block: 14px; }
    .watch-page .header-search { display: none; }
    .player-page { padding-top: 24px; padding-bottom: 35px; }
    .player-heading { gap: 15px; flex-wrap: wrap; }
    .player-heading > div { flex: 1; min-width: 0; }
    .player-heading h1 { font-size: 17px; }
    .player-heading .eyebrow { font-size: 7px; }
    .player-heading .back-link { font-size: 10px; }
    .format-tag { font-size: 8px; }
    .video-shell { border-radius: 5px; }
    .player-toolbar { flex-direction: column; align-items: flex-start; gap: 13px; font-size: 10px; }
    .player-toolbar a { font-size: 10px; }
    .next-episode { flex-direction: column; align-items: flex-start; padding: 18px; }
    .next-episode h2 { font-size: 15px; }
    .player-overview h2 { font-size: 16px; }
    .player-overview p { font-size: 12px; }
    .settings-panel { padding: 23px; }
    .settings-panel h2 { font-size: 19px; }
    .root-path { font-size: 11px; }
    .library-stats strong { font-size: 25px; }
    .library-stats span { font-size: 10px; }
    .user-row { flex-wrap: wrap; }
    .user-row > div { min-width: 130px; }
    .user-row .btn { font-size: 10px; padding: 7px; }
    .error-code { font-size: 70px; }
    .error-page h1 { font-size: 26px; }
    .toast-container { bottom: 75px !important; max-width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.catalog-pagination { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:40px; color:var(--cf-muted); font-size:12px; }
.catalog-pagination .btn { padding:9px 15px; font-size:12px; }

.metadata-list{display:grid;gap:18px}.metadata-entry{display:flex;gap:24px;align-items:flex-start}.metadata-cover{width:110px;aspect-ratio:2/3;flex-shrink:0;background:#202026;border-radius:9px;overflow:hidden;display:grid;place-items:center;color:#85858e}.metadata-cover img{width:100%;height:100%;object-fit:cover}.metadata-copy{min-width:0;flex:1}.metadata-copy h2{font-size:1.25rem;margin:.5rem 0}.metadata-copy p{overflow-wrap:anywhere}.metadata-match{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:15px 0}.metadata-match input{max-width:170px}.metadata-copy summary{color:#bdbdc8;cursor:pointer}@media(max-width:600px){.metadata-entry{gap:14px;padding:18px}.metadata-cover{width:78px}.metadata-copy .eyebrow{font-size:.62rem}.metadata-copy h2{font-size:1rem}.metadata-copy p{font-size:.85rem}.metadata-match{display:grid}.metadata-match input{max-width:100%}}