/* NetflixFamily viewer UI — dark, fast, responsive and dependency-free. */
:root { color-scheme: dark; --bg:#080808; --surface:#121212; --surface-2:#1a1a1a; --glass:rgba(18,18,20,.68); --line:rgba(255,255,255,.12); --text:#f5f5f7; --muted:#b4b4bc; --red:#e50914; --red-bright:#ff3340; --green:#46d369; --shadow:0 18px 45px rgba(0,0,0,.42); --radius:14px; --max:1440px; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::selection { background:var(--red); color:#fff; }
button, input, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
.site-header { position:sticky; z-index:30; top:0; display:flex; align-items:center; gap:32px; min-height:68px; padding:0 clamp(20px,4vw,64px); background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.6) 72%,transparent); transition:background .2s ease; }
.site-header::after { content:""; position:absolute; z-index:-1; inset:0; background:rgba(8,8,8,.84); opacity:0; backdrop-filter:blur(12px); }
.site-header:hover::after { opacity:1; }
.brand { color:var(--red); font-weight:950; font-size:1.32rem; letter-spacing:-1.1px; white-space:nowrap; }
.site-header nav { display:flex; gap:22px; align-items:center; font-size:.9rem; color:#d0d0d0; }
.site-header nav a { transition:color .2s; }
.site-header nav a:hover, .site-header nav a.active { color:#fff; font-weight:700; }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:14px; }
.search-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:1.75rem; line-height:1; }
.key-chip { max-width:150px; overflow:hidden; color:#f6f6f6; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.08); padding:6px 11px; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.key-chip:hover { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.15); }
.avatar, .profile-avatar { display:grid; place-items:center; flex:0 0 auto; background:linear-gradient(135deg,#ff5744,#9d0615); border:1px solid rgba(255,255,255,.35); font-weight:800; }
.avatar { width:31px; height:31px; border-radius:7px; font-size:.68rem; }
.announcement { width:min(var(--max),100%); margin:0 auto; padding:9px clamp(20px,4vw,64px); color:#e7e7e8; background:linear-gradient(90deg,rgba(229,9,20,.26),transparent); font-size:.78rem; }
.hero { position:relative; display:flex; align-items:flex-end; min-height:min(72vh,720px); margin-top:-68px; padding:150px clamp(20px,7vw,112px) 70px; overflow:hidden; isolation:isolate; background-image:linear-gradient(90deg,#080808 1%,rgba(8,8,8,.79) 29%,rgba(8,8,8,.15) 70%,rgba(8,8,8,.36)),linear-gradient(0deg,#080808,transparent 36%),var(--hero); background-position:center; background-size:cover; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(229,9,20,.13),transparent 42%); mix-blend-mode:screen; }
.hero-content { width:min(580px,100%); animation:reveal .72s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin:0 0 8px; color:#e1e1e4; font-size:.73rem; font-weight:750; letter-spacing:.17em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:14px; font-size:clamp(2rem,4.4vw,4.8rem); letter-spacing:-.055em; line-height:.98; }
h2 { margin:0; font-size:clamp(1.1rem,1.7vw,1.5rem); letter-spacing:-.025em; }
.hero-content > p:not(.eyebrow) { max-width:560px; color:#ececee; font-size:clamp(.91rem,1.3vw,1.05rem); text-shadow:0 1px 7px #000; }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:15px; color:#dedee0; font-size:.9rem; }
.match { color:var(--green); }
.age-rating { border:1px solid #aaa; padding:0 5px; font-size:.75rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; border:0; border-radius:7px; padding:0 18px; font-weight:800; transition:transform .18s, background .18s, opacity .18s; }
.button:hover { transform:translateY(-2px); }
.button-light { color:#101010; background:#fff; }
.button-light:hover { background:#e5e5e5; }
.button-glass { color:#fff; background:rgba(109,109,110,.58); backdrop-filter:blur(10px); }
.button-glass:hover { background:rgba(109,109,110,.8); }
.browse-main { position:relative; z-index:2; width:min(var(--max),100%); margin:-28px auto 0; padding:0 clamp(20px,4vw,64px) 70px; }
.rail { margin:0 0 34px; }
.rail-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.scroll-control { width:34px; height:34px; border:1px solid var(--line); border-radius:8px; color:#fff; background:rgba(255,255,255,.08); font-size:1.6rem; line-height:1; opacity:0; transition:opacity .2s,background .2s; }
.rail:hover .scroll-control { opacity:1; }
.scroll-control:hover { background:var(--red); }
.poster-row { display:flex; gap:10px; overflow-x:auto; overflow-y:visible; margin:-14px -4px; padding:14px 4px; scrollbar-width:none; scroll-snap-type:x proximity; }
.poster-row::-webkit-scrollbar { display:none; }
.poster-card { position:relative; flex:0 0 clamp(128px,12.4vw,188px); scroll-snap-align:start; transition:transform .27s cubic-bezier(.2,.8,.2,1), z-index 0s .27s; }
.poster-card:hover { z-index:5; transform:scale(1.09); transition-delay:.14s; }
.poster-card a { display:block; overflow:hidden; border-radius:8px; background:linear-gradient(145deg,#33222a,#151515); box-shadow:0 12px 25px rgba(0,0,0,.28); aspect-ratio:2/3; }
.poster-card img { width:100%; height:100%; object-fit:cover; transition:filter .25s,transform .35s; }
.poster-card:hover img { filter:brightness(.58); transform:scale(1.04); }
.image-failed { opacity:.18; }
.card-hover { position:absolute; right:7px; bottom:31px; left:7px; display:flex; align-items:center; gap:6px; color:#fff; opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s; }
.poster-card:hover .card-hover { opacity:1; transform:translateY(0); }
.card-hover span, .round-play { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(11,11,11,.72); font-size:.95rem; }
.round-play { border:0; background:#fff; color:#111; font-size:.7rem; }
.card-hover span:last-child { margin-left:auto; }
.card-caption { display:grid; gap:1px; padding:7px 2px 0; opacity:0; font-size:.75rem; transform:translateY(-4px); transition:opacity .2s,transform .2s; }
.poster-card:hover .card-caption { opacity:1; transform:translateY(0); }
.card-caption strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-caption span { color:var(--muted); }
.card-badge { position:absolute; z-index:2; top:7px; left:7px; border-radius:4px; background:var(--red); padding:2px 5px; font-size:.62rem; font-weight:800; box-shadow:0 3px 9px rgba(0,0,0,.36); }
.watch-progress { position:absolute; z-index:4; right:7px; bottom:8px; left:7px; height:3px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.45); }
.watch-progress i { display:block; height:100%; border-radius:inherit; background:var(--red); }
.top-row .poster-card { flex-basis:clamp(170px,17vw,250px); padding-left:32px; }
.top-row .poster-card .rank { position:absolute; z-index:3; bottom:-8px; left:0; color:#0a0a0a; font-size:6.5rem; font-style:italic; line-height:.78; -webkit-text-stroke:2px #bcbcbc; text-shadow:0 5px 16px #000; }
.top-row .poster-card a { position:relative; }
.site-footer { display:flex; justify-content:space-between; gap:20px; width:min(var(--max),100%); padding:40px clamp(20px,4vw,64px); border-top:1px solid var(--line); color:#8e8e94; font-size:.78rem; }
.site-footer div { display:flex; gap:18px; }
.site-footer a:hover { color:#fff; }
.page-content { width:min(var(--max),100%); min-height:calc(100vh - 68px); margin:0 auto; padding:58px clamp(20px,6vw,90px) 80px; }
.search-page h1, .category-page h1 { font-size:clamp(2.1rem,4vw,4rem); }
.search-box { display:flex; align-items:center; gap:10px; max-width:770px; margin:28px 0 18px; border:1px solid #555; border-radius:9px; background:#191919; padding:0 14px; transition:border .2s,box-shadow .2s; }
.search-box:focus-within { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.search-box span { font-size:1.8rem; }
.search-box input { width:100%; border:0; outline:0; background:transparent; padding:15px 0; color:#fff; font-size:1rem; }
.filters { display:flex; flex-wrap:wrap; gap:12px; }
.filters label { display:grid; gap:5px; color:var(--muted); font-size:.73rem; font-weight:700; }
select { min-width:150px; border:1px solid var(--line); border-radius:7px; outline:0; background:#222; padding:8px 10px; color:#fff; }
.result-count { margin:28px 0 14px; color:var(--muted); }
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:25px 13px; }
.results-grid .poster-card { min-width:0; }
.results-grid .poster-card:hover { z-index:3; }
.empty-state { grid-column:1/-1; border:1px dashed var(--line); border-radius:12px; padding:35px; color:var(--muted); text-align:center; }
.category-tabs { display:flex; gap:8px; overflow:auto; margin:26px 0 34px; padding-bottom:5px; scrollbar-width:none; }
.category-tabs a { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:#d7d7d7; font-size:.82rem; transition:all .18s; }
.category-tabs a:hover, .category-tabs a.active { border-color:var(--red); background:var(--red); color:#fff; }
.movie-page { width:min(1320px,100%); margin:0 auto; padding:0 clamp(20px,5vw,72px) 75px; }
.player-wrap { position:relative; width:100%; overflow:hidden; margin:28px auto 42px; border:1px solid var(--line); border-radius:12px; background:#000; box-shadow:var(--shadow); }
.player-wrap video { display:block; width:100%; max-height:72vh; background:#000; }
.player-overlay { position:absolute; right:14px; bottom:64px; display:flex; align-items:center; gap:10px; opacity:0; transition:opacity .25s; }
.player-wrap:hover .player-overlay { opacity:1; }
.skip-intro, .speed-control { border:1px solid rgba(255,255,255,.33); border-radius:6px; background:rgba(0,0,0,.7); padding:6px 10px; color:#fff; font-size:.75rem; backdrop-filter:blur(7px); }
.speed-control select { min-width:55px; border:0; background:transparent; padding:0 0 0 5px; font-size:.75rem; }
.movie-detail { display:grid; grid-template-columns:180px 1fr; gap:30px; max-width:930px; }
.detail-poster img { width:100%; border-radius:9px; box-shadow:var(--shadow); }
.detail-copy h1 { margin-bottom:9px; font-size:clamp(2.1rem,4vw,3.6rem); }
.description { max-width:760px; color:#e3e3e4; font-size:1rem; }
dl { display:grid; gap:8px; margin:20px 0 0; color:#d8d8db; }
dl div { display:grid; grid-template-columns:100px 1fr; gap:10px; }
dt { color:#8d8d95; } dd { margin:0; }
.episodes, .related { max-width:900px; margin-top:54px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--muted); }
.episode { display:grid; grid-template-columns:44px 1fr auto; width:100%; align-items:center; gap:10px; border:0; border-top:1px solid var(--line); background:transparent; padding:14px 8px; color:#eee; text-align:left; transition:background .18s; }
.episode:last-of-type { border-bottom:1px solid var(--line); }
.episode:hover, .episode.active { background:rgba(255,255,255,.08); }
.episode b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#aaa; background:#262626; font-size:.75rem; }
.episode span { display:grid; gap:1px; }
.episode small { color:#9d9da5; }
.episode i { color:#aaa; font-style:normal; }
.next-episode { margin-top:14px; }
.related .poster-row { margin-bottom:0; }
.profile-page { display:grid; gap:50px; }
.profile-hero { display:flex; align-items:center; gap:20px; padding:25px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(125deg,rgba(229,9,20,.2),rgba(255,255,255,.05)); box-shadow:var(--shadow); }
.profile-avatar { width:82px; height:82px; border-radius:50%; font-size:2rem; }
.profile-hero h1 { margin:0 0 8px; font-size:2.1rem; }
.profile-hero p:last-of-type { margin:0; color:#d7d7da; }
.profile-hero .button { margin-left:auto; }
.account-note { max-width:720px; border-left:3px solid var(--red); padding:0 0 0 18px; color:var(--muted); }
.access-page { display:grid; min-height:100vh; place-items:center; padding:24px; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.25)),url('https://image.tmdb.org/t/p/original/xJHokMbljvjADYdit5fK5VQsXEG.jpg') center/cover fixed; }
.access-page::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 10% 0,rgba(229,9,20,.32),transparent 35%),rgba(0,0,0,.28); pointer-events:none; }
.access-card { position:relative; width:min(460px,100%); border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(8,8,8,.78); padding:clamp(28px,5vw,50px); box-shadow:0 28px 70px rgba(0,0,0,.64); backdrop-filter:blur(16px); animation:reveal .55s ease both; }
.access-card .brand { display:inline-block; margin-bottom:42px; }
.access-label { margin-bottom:9px; color:#a7a7ad; font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.access-card h1 { font-size:2.2rem; }
.access-copy { color:#c2c2c7; }
.access-card form { margin-top:28px; }
.access-card label { display:block; margin-bottom:7px; color:#dddde0; font-size:.82rem; font-weight:700; }
.key-input { display:flex; gap:8px; }
.key-input input { min-width:0; flex:1; border:1px solid #555; border-radius:7px; outline:0; background:rgba(255,255,255,.07); padding:13px; color:#fff; letter-spacing:.08em; text-transform:uppercase; transition:border .2s,box-shadow .2s; }
.key-input input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(229,9,20,.2); }
.key-input button { border:0; border-radius:7px; background:var(--red); padding:0 16px; color:#fff; font-weight:800; transition:background .2s; }
.key-input button:hover { background:var(--red-bright); }
.form-message { min-height:21px; margin:9px 0 0; font-size:.82rem; }
.form-message.error { color:#ff7078; }.form-message.success { color:var(--green); }
.access-note { display:flex; gap:9px; align-items:flex-start; margin-top:28px; border-top:1px solid var(--line); padding-top:17px; color:#aaaab0; font-size:.74rem; }
.access-note span { color:var(--green); }.admin-link { display:inline-block; margin-top:22px; color:#aaaab0; font-size:.72rem; text-decoration:underline; text-underline-offset:3px; }
.not-found { display:grid; min-height:calc(100vh - 68px); place-items:center; padding:30px; text-align:center; background:radial-gradient(circle at 50%,rgba(229,9,20,.22),transparent 42%); }
.not-found h1 { margin:0; font-size:clamp(5rem,18vw,15rem); color:var(--red); line-height:.8; }.not-found p { color:var(--muted); }.not-found .button { margin-top:18px; }
.toast-holder { position:fixed; z-index:100; right:18px; bottom:18px; display:grid; gap:8px; width:min(360px,calc(100% - 36px)); }
.toast { border:1px solid var(--line); border-left:3px solid #fff; border-radius:8px; background:rgba(25,25,26,.94); padding:11px 14px; box-shadow:var(--shadow); animation:toast-in .25s ease both; backdrop-filter:blur(12px); }
.toast-info { border-left-color:#71b7ff; }.toast-success { border-left-color:var(--green); }.toast-error { border-left-color:var(--red); }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @keyframes toast-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@media (max-width:720px) { .site-header { gap:14px; min-height:60px; padding:0 16px; }.site-header nav { display:none; }.hero { min-height:560px; margin-top:-60px; padding:130px 20px 52px; background-image:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.68) 78%),linear-gradient(0deg,#080808,transparent 45%),var(--hero); }.browse-main { padding:0 16px 50px; }.poster-card { flex-basis:126px; }.poster-card:hover { transform:none; }.poster-card:hover .card-hover,.poster-card:hover .card-caption { opacity:0; }.scroll-control { display:none; }.site-footer { display:grid; padding:30px 20px; }.page-content { padding:38px 20px 60px; }.results-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 10px; }.movie-page { padding:0 16px 55px; }.player-wrap { margin:16px 0 27px; border-radius:6px; }.player-overlay { opacity:1; right:8px; bottom:48px; }.speed-control { display:none; }.movie-detail { grid-template-columns:105px 1fr; gap:16px; }.detail-copy h1 { font-size:2rem; }.detail-copy .meta { gap:6px; font-size:.77rem; }.description { font-size:.9rem; } dl div { grid-template-columns:75px 1fr; font-size:.83rem; }.profile-hero { align-items:flex-start; flex-wrap:wrap; padding:20px; }.profile-hero .button { width:100%; margin-left:0; }.profile-avatar { width:60px; height:60px; font-size:1.4rem; }.access-page { align-items:end; padding:14px; }.access-card { border-radius:15px; padding:30px 24px; }.access-card .brand { margin-bottom:28px; }.key-input { display:grid; }.key-input button { min-height:46px; }.top-row .poster-card { flex-basis:180px; } }