* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#07080b; color:#fff; font-family:Arial,Helvetica,sans-serif; }
body { width:1920px; height:1080px; }
button, input { font-family:inherit; }
button { cursor:pointer; }
#av-player { position:fixed; left:0; top:0; width:1920px; height:1080px; z-index:1; display:none; }
#app { position:relative; z-index:10; width:1920px; height:1080px; display:flex; background:radial-gradient(circle at 82% 0%,rgba(125,18,32,.16),transparent 34%),#07080b; }

#sidebar { width:265px; height:1080px; padding:34px 22px 22px; background:#050609; border-right:1px solid #20222a; position:relative; }
.brand { display:flex; align-items:center; height:58px; margin:0 8px 22px; }
.brand-large { margin:0 0 18px; }
.brand-mark { width:43px; height:43px; border:8px solid #ed2438; border-radius:12px; transform:skew(-8deg); position:relative; display:inline-block; }
.brand-mark span { position:absolute; left:10px; top:6px; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid #ed2438; transform:skew(8deg); }
.brand-name { margin-left:13px; font-size:27px; font-weight:800; letter-spacing:-1px; }
#nav { margin-top:24px; }
.nav-item { width:100%; height:62px; margin-bottom:8px; border:2px solid transparent; border-radius:14px; background:transparent; color:#b7b9c0; text-align:left; font-size:20px; display:flex; align-items:center; padding:0 18px; }
.nav-item.active { background:rgba(164,24,39,.28); color:#fff; }
.nav-item:focus { outline:none; border-color:#ff3345; background:rgba(164,24,39,.42); box-shadow:0 0 28px rgba(255,40,58,.26); transform:none; }
.nav-icon { width:27px; height:27px; margin-right:17px; position:relative; flex:0 0 27px; color:currentColor; }
.icon-home:before { content:""; position:absolute; left:4px; top:9px; width:17px; height:14px; border:3px solid currentColor; border-top:none; border-radius:2px; }
.icon-home:after { content:""; position:absolute; left:5px; top:2px; width:15px; height:15px; border-left:3px solid currentColor; border-top:3px solid currentColor; transform:rotate(45deg); }
.icon-movies:before { content:""; position:absolute; left:7px; top:5px; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:15px solid currentColor; }
.icon-series:before { content:""; position:absolute; left:2px; top:4px; width:21px; height:18px; border:3px solid currentColor; border-radius:3px; }
.icon-series:after { content:""; position:absolute; left:7px; top:9px; width:3px; height:3px; background:currentColor; box-shadow:6px 0 currentColor,12px 0 currentColor,0 6px currentColor,6px 6px currentColor,12px 6px currentColor; }
.icon-search:before { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border:3px solid currentColor; border-radius:50%; }
.icon-search:after { content:""; position:absolute; width:10px; height:3px; background:currentColor; left:16px; top:18px; transform:rotate(45deg); border-radius:2px; }
.icon-settings:before { content:""; position:absolute; left:5px; top:5px; width:13px; height:13px; border:5px solid currentColor; border-radius:50%; }
.icon-settings:after { content:""; position:absolute; left:11px; top:0; width:5px; height:27px; background:currentColor; box-shadow:0 0 0 0 currentColor; transform:rotate(45deg); opacity:.9; }
.sidebar-footer { position:absolute; left:30px; right:24px; bottom:28px; color:#7d808a; display:flex; align-items:center; font-size:14px; }
.status-dot { width:10px; height:10px; border-radius:50%; margin-right:10px; background:#d5a21b; box-shadow:0 0 12px currentColor; }
.status-dot.ok { background:#31c46c; }
.status-dot.bad { background:#e32636; }

#content { width:1655px; height:1080px; position:relative; overflow:hidden; }
#topbar { height:120px; padding:30px 48px 16px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.eyebrow { font-size:14px; letter-spacing:3px; color:#ed3041; font-weight:800; text-transform:uppercase; }
#topbar h1 { font-size:40px; margin:3px 0 0; }
.version { padding:9px 14px; border:1px solid rgba(255,255,255,.12); border-radius:20px; color:#858893; font-size:15px; }
.page { display:none; height:960px; }
.active-page { display:block; }
.page-scroll { overflow-y:auto; overflow-x:hidden; padding-bottom:70px; scrollbar-width:none; }
.page-scroll::-webkit-scrollbar { display:none; }

.hero { height:410px; margin:0 30px 8px; border-radius:23px; overflow:hidden; position:relative; background:linear-gradient(125deg,#15171e,#090a0d); }
.hero-backdrop { position:absolute; inset:0; background-position:center 34%; background-size:cover; opacity:.86; transition:background-image .18s ease; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,7,10,.99) 0%,rgba(6,7,10,.79) 33%,rgba(6,7,10,.14) 68%,rgba(6,7,10,.22) 100%),linear-gradient(0deg,rgba(6,7,10,.60),transparent 50%); }
.hero-copy { position:absolute; left:54px; bottom:44px; width:760px; }
.hero-meta { color:#ff4a57; font-size:17px; font-weight:800; letter-spacing:1px; }
.hero h2 { margin:10px 0 12px; font-size:54px; line-height:1.02; }
.hero p { margin:0; color:#c2c4cb; font-size:20px; line-height:1.43; max-height:86px; overflow:hidden; }
.home-rows { padding-top:6px; }
.home-row-section { padding:24px 0 0 40px; }
.row-heading { height:38px; padding-right:46px; display:flex; align-items:center; justify-content:space-between; }
.row-heading h3 { margin:0; font-size:25px; }
.row-heading .row-note { color:#757984; font-size:14px; }
.media-row { min-height:300px; padding:12px 46px 22px 4px; display:flex; overflow-x:auto; overflow-y:hidden; align-items:flex-start; scrollbar-width:none; }
.media-row::-webkit-scrollbar { display:none; }

.movie-card, .series-card { flex:0 0 174px; width:174px; margin-right:20px; background:transparent; border:3px solid transparent; border-radius:15px; padding:0; color:#fff; text-align:left; transform-origin:center; transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease; position:relative; }
.movie-card:focus, .series-card:focus { outline:none; border-color:#ff3345; transform:scale(1.065); box-shadow:0 0 0 2px rgba(255,51,69,.18),0 0 28px rgba(255,40,58,.42); z-index:3; }
.poster { width:168px; height:240px; border-radius:12px; background:linear-gradient(145deg,#232630,#111319); background-size:cover; background-position:center; position:relative; overflow:hidden; }
.card-title { margin:9px 2px 0; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { margin:4px 2px 0; color:#858894; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.resume-progress { position:absolute; left:7px; right:7px; bottom:7px; height:5px; background:rgba(0,0,0,.62); border-radius:4px; overflow:hidden; }
.resume-progress-fill { height:100%; background:#ed3041; border-radius:4px; }
.continue-badge { position:absolute; left:8px; top:8px; padding:6px 9px; border-radius:10px; background:rgba(8,9,13,.83); color:#fff; font-size:12px; font-weight:800; }

.browse-heading { margin:4px 42px 24px; padding:26px 30px; min-height:140px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:linear-gradient(120deg,#11131a,#0b0c11); display:flex; justify-content:space-between; align-items:flex-end; }
.browse-kicker { color:#ff3b4a; font-size:13px; font-weight:800; letter-spacing:2.4px; }
.browse-heading h2, .search-panel h2, .settings-card h2 { margin:7px 0 5px; font-size:42px; }
.browse-heading p, .settings-card p { margin:0; color:#9295a0; font-size:17px; }
.browse-count { color:#777b86; font-size:15px; }

.page-counter-bar { margin:2px 46px 10px; display:flex; justify-content:flex-end; min-height:22px; }
.poster-grid.compact-top { padding-top:0; }
.poster-grid { padding:0 42px 30px; display:flex; flex-wrap:wrap; align-items:flex-start; }
.poster-grid .movie-card, .poster-grid .series-card { margin:0 18px 26px 0; }
.load-more { display:block; width:270px; height:62px; margin:0 auto 50px; border:2px solid #343741; border-radius:13px; background:#171920; color:#fff; font-size:19px; font-weight:800; }
.load-more:focus { border-color:#ff3345; background:#20232c; box-shadow:0 0 28px rgba(255,40,58,.30); }

.search-panel { margin:4px 42px 24px; padding:30px 32px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:#101219; }
.search-line { display:flex; align-items:center; margin-top:18px; }
.search-line input { width:950px; height:64px; border:2px solid #343741; border-radius:12px; background:#0a0c10; color:#fff; font-size:24px; padding:0 20px; }
.search-line input:focus { outline:none; border-color:#ff3345; box-shadow:0 0 22px rgba(255,40,58,.24); }
.search-line button { margin-left:16px; min-width:180px; }
.search-status { margin:0 44px 8px; min-height:24px; color:#8d909a; font-size:16px; }
.search-section { padding:14px 0 0 40px; }
.settings-page.active-page { display:flex; align-items:flex-start; justify-content:center; }
.settings-card { width:760px; margin-top:100px; padding:42px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:#11131a; }
.settings-button { width:260px; margin-top:28px; }

.loading-card { flex:0 0 174px; width:174px; height:240px; margin-right:20px; border-radius:12px; background:linear-gradient(110deg,#14161c 30%,#20232b 45%,#14161c 60%); background-size:280% 100%; animation:loading 1.5s infinite; }
@keyframes loading { 0%{background-position:100% 0}100%{background-position:-100% 0} }
.empty-row { padding:22px 24px; color:#878b96; font-size:17px; border:1px solid #282b33; border-radius:13px; min-width:500px; }

.overlay { position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:50; }
.hidden { display:none !important; }
.login-overlay { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 15%,rgba(190,27,39,.18),transparent 38%),#08090c; }
.login-panel { width:590px; padding:52px 56px 48px; border:1px solid rgba(255,255,255,.12); border-radius:25px; background:rgba(17,19,25,.97); box-shadow:0 35px 120px rgba(0,0,0,.55); }
.login-panel h2 { margin:8px 0 5px; font-size:38px; }
.login-panel p { color:#9295a0; font-size:17px; margin:0 0 30px; }
.login-panel label { display:block; color:#aaaeba; font-size:15px; margin:17px 0 8px; }
.login-panel input { width:100%; height:64px; border:2px solid #343741; border-radius:12px; background:#0d0f14; color:white; padding:0 18px; font-size:23px; }
.login-panel input:focus { outline:none; border-color:#ff3b4a; box-shadow:0 0 20px rgba(255,46,62,.25); }
.primary-button, .secondary-button, .back-button { border:2px solid transparent; border-radius:12px; height:62px; padding:0 28px; color:white; font-size:21px; font-weight:700; }
.primary-button { background:linear-gradient(180deg,#ef3041,#bd1221); }
.secondary-button { background:#242730; }
.login-panel .primary-button, .login-panel .secondary-button { width:100%; margin-top:18px; }
button:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16),0 0 26px rgba(255,44,60,.32); }

.detail-overlay { background:#090a0d; }
.detail-backdrop { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.70; }
.detail-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,5,8,.99) 0%,rgba(4,5,8,.88) 42%,rgba(4,5,8,.34) 72%,rgba(4,5,8,.58)),linear-gradient(0deg,rgba(4,5,8,.88),transparent 55%); }
.detail-content { position:absolute; left:105px; top:78px; width:830px; }
.back-button { height:54px; background:rgba(24,26,33,.88); color:#dddfe5; margin-bottom:92px; }
.detail-meta { color:#ff4a57; font-size:18px; font-weight:800; letter-spacing:1px; }
.detail-content h2 { font-size:64px; line-height:1.03; margin:12px 0 18px; }
.detail-content p { max-width:780px; max-height:174px; overflow:hidden; color:#c3c5cc; font-size:22px; line-height:1.55; }
.detail-actions { margin-top:30px; display:flex; align-items:center; }
.play-button { min-width:190px; font-size:24px; }
.resume-button { min-width:190px; margin-left:14px; }
.source-hint { margin-top:18px; color:#7f828c; font-size:15px; }

.series-overlay { z-index:45; background:#08090d; }
.series-backdrop { position:absolute; inset:0; background-size:cover; background-position:center 25%; opacity:.52; }
.series-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,9,.76),rgba(5,6,9,.96) 54%,#07080b 82%),linear-gradient(90deg,rgba(5,6,9,.95),rgba(5,6,9,.32)); }
.series-content { position:absolute; inset:0; padding:60px 72px 40px; overflow:hidden; }
.series-content .back-button { margin-bottom:34px; }
.series-content h2 { margin:8px 0 10px; font-size:54px; }
.series-content > p { width:930px; max-height:82px; overflow:hidden; margin:0; color:#c2c5cc; font-size:19px; line-height:1.45; }
.series-section-title { margin-top:26px; font-size:20px; font-weight:800; }
.season-row { display:flex; overflow-x:auto; margin-top:12px; padding:4px 4px 10px; scrollbar-width:none; }
.season-row::-webkit-scrollbar, .episode-row::-webkit-scrollbar { display:none; }
.season-chip { flex:0 0 auto; min-width:128px; height:50px; margin-right:12px; padding:0 18px; border:2px solid #31343d; border-radius:12px; background:#15171d; color:#c8cad0; font-size:17px; font-weight:800; }
.season-chip.selected { background:#8d1827; border-color:#d72a3b; color:#fff; }
.season-chip:focus { border-color:#ff4050; box-shadow:0 0 22px rgba(255,44,60,.28); }
.episode-row { display:flex; overflow-x:auto; margin-top:12px; padding:8px 8px 20px 4px; min-height:300px; scrollbar-width:none; }
.episode-card { flex:0 0 320px; width:320px; margin-right:18px; padding:0; border:3px solid transparent; border-radius:15px; background:transparent; color:#fff; text-align:left; }
.episode-card:focus { outline:none; border-color:#ff3345; box-shadow:0 0 28px rgba(255,40,58,.38); transform:scale(1.035); }
.episode-image { width:314px; height:176px; border-radius:11px; background:#1a1c22 center/cover no-repeat; position:relative; overflow:hidden; }
.episode-code { margin:10px 4px 0; color:#ff4a57; font-size:13px; font-weight:800; letter-spacing:1px; }
.episode-title { margin:5px 4px 0; font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.episode-plot { margin:4px 4px 0; color:#8e919b; font-size:13px; line-height:1.25; height:33px; overflow:hidden; }

.source-picker-overlay { background:rgba(4,5,8,.94); display:flex; align-items:center; justify-content:center; z-index:60; }
.source-picker-panel { width:1280px; max-height:900px; padding:38px 42px 34px; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:#0d0f14; box-shadow:0 35px 120px rgba(0,0,0,.62); }
.source-picker-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.source-picker-eyebrow { color:#ff3b4a; font-size:14px; font-weight:800; letter-spacing:2.6px; }
.source-picker-header h2 { margin:6px 0 4px; font-size:38px; }
.source-picker-header p { margin:0; color:#8e919b; font-size:17px; }
.source-picker-back { margin:0; min-width:140px; }
.source-list { max-height:690px; overflow-y:auto; padding:4px 14px 12px 4px; }
.source-item { width:100%; min-height:92px; margin-bottom:12px; padding:15px 20px; border:2px solid #292c35; border-radius:14px; background:#15171d; color:#fff; text-align:left; display:flex; align-items:center; }
.source-item:focus { outline:none; border-color:#ff3345; background:#1c1e25; box-shadow:0 0 28px rgba(255,40,58,.32); transform:scale(1.012); }
.source-quality { flex:0 0 115px; font-size:25px; font-weight:900; color:#fff; }
.source-body { flex:1 1 auto; min-width:0; padding-right:18px; }
.source-title { font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.source-meta { margin-top:6px; font-size:15px; color:#9295a0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.source-badge { flex:0 0 auto; min-width:116px; padding:8px 11px; border-radius:20px; border:1px solid rgba(255,255,255,.14); text-align:center; color:#aeb1bb; font-size:13px; font-weight:800; }
.source-badge.cached { color:#63e694; border-color:rgba(67,210,119,.38); background:rgba(42,176,93,.10); }
.source-empty { padding:34px; border:1px solid #2d3038; border-radius:14px; color:#a7aab2; font-size:19px; line-height:1.5; }

.player-ui { position:fixed; inset:0; z-index:80; pointer-events:none; color:white; background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 20%,transparent 70%,rgba(0,0,0,.80)); transition:opacity .2s ease; }
.player-status { position:absolute; top:50px; left:60px; padding:15px 22px; background:rgba(0,0,0,.62); border-radius:10px; font-size:19px; }
.player-bottom { position:absolute; left:65px; right:65px; bottom:48px; }
.player-title { font-size:30px; font-weight:800; margin-bottom:13px; }
.player-progress { height:7px; border-radius:6px; background:rgba(255,255,255,.20); overflow:hidden; }
.player-progress-fill { width:0; height:100%; background:#ed3041; border-radius:6px; }
.player-time { margin-top:8px; color:#c5c7ce; font-size:15px; }
.player-control-row { margin-top:8px; display:flex; align-items:center; justify-content:space-between; }
.player-controls { color:#b7bac2; font-size:18px; }
.player-gear-button { pointer-events:auto; width:54px; height:46px; margin-left:22px; border:2px solid rgba(255,255,255,.28); border-radius:13px; background:rgba(20,22,28,.92); color:#fff; font-size:27px; line-height:1; text-align:center; box-shadow:0 0 0 rgba(0,0,0,0); }
.player-gear-button.active { border-color:#ff3345; background:#25171b; box-shadow:0 0 24px rgba(255,40,58,.32); }
.subtitle-overlay { position:fixed; left:9%; right:9%; bottom:118px; z-index:92; text-align:center; color:#fff; font-size:36px; font-weight:700; line-height:1.32; letter-spacing:.01em; white-space:pre-line; pointer-events:none; text-shadow:0 2px 4px #000,0 0 8px #000,0 0 14px #000; font-family:Arial,"Noto Sans Arabic","Segoe UI",sans-serif; }
.subtitle-overlay[dir="rtl"] { direction:rtl; unicode-bidi:plaintext; font-size:38px; line-height:1.42; }
.subtitle-menu:not(.hidden) ~ .player-bottom, .player-settings-menu:not(.hidden) ~ .player-bottom { opacity:.35; }
.player-active #app, .player-active #detailOverlay, .player-active #seriesOverlay, .player-active #sourcePickerOverlay { visibility:hidden; }

.toast { position:fixed; z-index:120; left:50%; bottom:60px; transform:translateX(-50%); max-width:1000px; padding:18px 28px; border-radius:12px; background:rgba(22,24,30,.97); border:1px solid rgba(255,255,255,.15); color:white; font-size:19px; box-shadow:0 15px 50px rgba(0,0,0,.4); }
.button-play-icon { display:inline-block; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid currentColor; margin-right:12px; vertical-align:-1px; }
.button-back-icon { display:inline-block; width:13px; height:13px; border-left:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(45deg); margin-right:12px; vertical-align:-1px; }
.catalog-error { flex:0 0 720px; min-height:150px; margin-top:12px; padding:26px 30px; border:2px solid #3b3e48; border-radius:16px; background:#111319; color:#fff; text-align:left; }
.catalog-error:focus { outline:none; border-color:#ff3b4a; box-shadow:0 0 26px rgba(255,44,60,.35); }
.catalog-error-title { display:block; font-size:25px; font-weight:800; margin-bottom:10px; }
.catalog-error-detail { display:block; color:#a8abb4; font-size:16px; line-height:1.45; }

/* v0.2.3 grouped Movies browse */
.movies-grouped { padding:0 0 48px; }
.movie-group-heading { margin:18px 46px 4px; padding:20px 0 10px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; justify-content:space-between; }
.movie-group-heading h2 { margin:0; font-size:30px; letter-spacing:-.4px; }
.movie-group-heading span { color:#777b86; font-size:14px; }
.movie-browse-row-section { padding:18px 0 0 40px; }
.movie-browse-row-section .row-heading { padding-right:46px; }
.movie-browse-row { min-height:295px; }

.series-grouped { padding:0 0 50px; }
.series-group-heading { margin:18px 46px 4px; padding:20px 0 10px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; justify-content:space-between; }
.series-group-heading h2 { margin:0; font-size:30px; letter-spacing:-.4px; }
.series-group-heading span { color:#777b86; font-size:14px; }
.series-browse-row-section { padding:18px 0 0 40px; }
.series-browse-row-section .row-heading { padding-right:46px; }
.series-browse-row { min-height:295px; }

/* v0.2.5 See All rows */
.row-heading-actions { display:flex; align-items:center; }
.row-heading-actions .row-note { margin-right:18px; }
.see-all-button { height:38px; min-width:104px; padding:0 16px; border:2px solid #30333c; border-radius:11px; background:#15171d; color:#d9dbe1; font-size:14px; font-weight:800; }
.see-all-button:focus { outline:none; border-color:#ff3345; background:#24171b; box-shadow:0 0 22px rgba(255,40,58,.28); }
.see-all-overlay { z-index:40; background:#07080b; }
.see-all-shell { width:100%; height:100%; padding:42px 54px 34px; background:radial-gradient(circle at 82% 0%,rgba(125,18,32,.13),transparent 34%),#07080b; }
.see-all-header { height:112px; display:flex; align-items:flex-start; justify-content:space-between; }
.see-all-header h2 { margin:7px 0 4px; font-size:42px; }
.see-all-header p { margin:0; color:#858893; font-size:16px; }
.see-all-back { margin:4px 0 0; min-width:138px; }
.see-all-grid { height:880px; overflow-y:auto; padding:8px 10px 60px 4px; display:flex; flex-wrap:wrap; align-content:flex-start; scrollbar-width:none; }
.see-all-grid::-webkit-scrollbar { display:none; }
.see-all-grid .movie-card, .see-all-grid .series-card { margin:0 20px 28px 0; }


/* v0.2.7 Samsung AVPlay subtitle preferences + playback menu */
.settings-page { padding-bottom:60px; }
.settings-page .settings-card { margin-top:36px; }
.subtitle-settings-card { margin-top:70px !important; }
.account-settings-card { margin-top:24px !important; }
.subtitle-preference-grid { display:flex; flex-wrap:wrap; margin:20px 0 4px; }
.subtitle-pref-button { width:330px; margin:0 14px 14px 0; text-align:left; }
.settings-help { margin-top:16px !important; color:#777b86 !important; font-size:15px !important; line-height:1.45; }

.subtitle-menu { position:absolute; right:65px; bottom:205px; width:500px; max-height:640px; padding:22px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(11,12,16,.96); box-shadow:0 20px 70px rgba(0,0,0,.60); pointer-events:none; }
.subtitle-menu-title { font-size:28px; font-weight:900; margin-bottom:14px; }
.subtitle-menu-list { max-height:420px; overflow-y:auto; overflow-x:hidden; }
.subtitle-menu-item { min-height:58px; padding:10px 14px; margin-bottom:7px; border:2px solid transparent; border-radius:10px; display:flex; align-items:center; justify-content:space-between; background:#171920; }
.subtitle-menu-item span { font-size:18px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:12px; }
.subtitle-menu-item small { color:#858995; font-size:13px; flex:0 0 auto; }
.subtitle-menu-item.active { border-color:#ff3345; background:#21161a; box-shadow:0 0 24px rgba(255,40,58,.25); }
.subtitle-menu-item.selected span:after { content:'  ✓'; color:#63e694; }
.subtitle-menu-empty { padding:18px 12px; color:#989ca7; line-height:1.45; font-size:16px; }
.subtitle-sync-row { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:13px 14px; border-top:1px solid rgba(255,255,255,.10); color:#b8bbc4; font-size:16px; }
.subtitle-sync-row strong { color:#fff; font-size:18px; }
.subtitle-menu-help { margin-top:9px; color:#777b86; font-size:13px; text-align:center; }
.subtitle-menu-status { margin:12px 0 0; padding:14px 16px; border-top:1px solid #242730; color:#8f939d; font-size:15px; line-height:1.4; }

/* v0.3.2 playback gear/settings menu */
.player-settings-menu { position:absolute; right:65px; bottom:195px; width:430px; padding:22px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(11,12,16,.97); box-shadow:0 20px 70px rgba(0,0,0,.60); pointer-events:auto; }
.player-settings-title { font-size:28px; font-weight:900; margin-bottom:14px; }
.player-settings-item { min-height:64px; padding:10px 14px; border:2px solid transparent; border-radius:10px; display:flex; align-items:center; justify-content:space-between; background:#171920; color:#fff; }
.player-settings-item span { font-size:19px; font-weight:800; }
.player-settings-item small { color:#a3a6b0; font-size:14px; }
.player-settings-item.active { border-color:#ff3345; background:#21161a; box-shadow:0 0 24px rgba(255,40,58,.25); }
.player-settings-help { margin-top:12px; color:#777b86; font-size:13px; text-align:center; }

/* StreamGate unified web shell */
html, body { width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
body { width:100%; height:100%; }
#app { width:100%; height:100%; min-height:100vh; }
#sidebar { flex:0 0 265px; height:100vh; }
#content { width:auto; flex:1 1 auto; height:100vh; min-width:0; }
.page { height:calc(100vh - 120px); }
.web-player { position:fixed; inset:0; width:100vw; height:100vh; object-fit:contain; background:#000; z-index:2; display:none; }
.web-player.active { display:block; }
#av-player { display:none !important; }
.nav-link-item { text-decoration:none; }
.icon-admin:before { content:""; position:absolute; left:3px; top:5px; width:20px; height:17px; border:3px solid currentColor; border-radius:3px; }
.icon-admin:after { content:""; position:absolute; left:8px; top:1px; width:10px; height:6px; border:3px solid currentColor; border-bottom:0; border-radius:3px 3px 0 0; }
.nav-item:hover, .movie-card:hover, .series-card:hover, .see-all-button:hover, .source-item:hover, .primary-button:hover, .secondary-button:hover, .back-button:hover, .load-more:hover { border-color:#ff3345; box-shadow:0 0 24px rgba(255,40,58,.24); }
.movie-card:hover, .series-card:hover { transform:scale(1.045); z-index:3; }
.web-player-buttons { pointer-events:auto; display:flex; align-items:center; gap:10px; }
.web-player-buttons button { width:52px; height:46px; min-height:46px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:11px; background:rgba(20,22,28,.90); color:#fff; font-weight:800; }
.web-player-buttons button:hover, .web-player-buttons button:focus { outline:none; border-color:#ff3345; background:#25171b; box-shadow:0 0 18px rgba(255,40,58,.28); }
.control-icon { display:block; font-size:25px; line-height:1; font-family:Arial,Helvetica,sans-serif; }
.player-back-button { position:absolute; top:28px; left:30px; z-index:6; width:52px; height:52px; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(12,13,17,.82); color:#fff; font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .16s ease,transform .16s ease,border-color .16s ease,background .16s ease; }
.player-ui.controls-visible .player-back-button { opacity:1; transform:translateY(0); pointer-events:auto; }
.player-back-button:hover,.player-back-button:focus { outline:none; border-color:#ff3345; background:#25171b; box-shadow:0 0 18px rgba(255,40,58,.28); }
.player-settings-menu, .subtitle-menu { pointer-events:auto; }
.player-active #app, .player-active #detailOverlay, .player-active #seriesOverlay, .player-active #sourcePickerOverlay, .player-active #seeAllOverlay { visibility:hidden; }
.player-active #playerUI, .player-active #subtitleOverlay { visibility:visible; }

@media (max-width: 1500px) {
  #sidebar { flex-basis:220px; padding-left:16px; padding-right:16px; }
  .brand-name { font-size:23px; }
  .nav-item { font-size:17px; height:55px; padding:0 13px; }
  #topbar { height:105px; padding:23px 32px 12px; }
  #topbar h1 { font-size:34px; }
  .page { height:calc(100vh - 105px); }
  .hero { height:360px; margin-left:22px; margin-right:22px; }
  .hero-copy { left:42px; bottom:34px; width:min(680px,58vw); }
  .hero h2 { font-size:46px; }
  .hero p { font-size:18px; }
  .home-row-section, .movie-browse-row-section, .series-browse-row-section { padding-left:28px; }
  .movie-card, .series-card { flex-basis:158px; width:158px; margin-right:16px; }
  .poster { width:152px; height:217px; }
  .media-row { min-height:275px; }
}

@media (max-width: 980px) {
  #app { display:block; overflow:auto; }
  #sidebar { position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; height:74px; z-index:45; padding:7px 10px; border-right:0; border-top:1px solid #20222a; display:flex; align-items:center; background:rgba(5,6,9,.97); }
  #sidebar .brand, .sidebar-footer { display:none; }
  #nav { margin:0; width:100%; display:flex; justify-content:space-around; align-items:center; }
  .nav-item { width:auto; min-width:60px; height:58px; margin:0 2px; padding:5px 9px; border-radius:12px; flex-direction:column; justify-content:center; font-size:10px; text-align:center; }
  .nav-icon { width:22px; height:22px; flex-basis:22px; margin:0 0 3px; transform:scale(.78); }
  #content { width:100%; height:calc(100vh - 74px); padding-bottom:0; }
  #topbar { height:84px; padding:18px 18px 8px; }
  #topbar h1 { font-size:28px; }
  .eyebrow { font-size:11px; }
  .version { font-size:11px; padding:6px 9px; }
  .page { height:calc(100vh - 158px); }
  .hero { height:310px; margin:0 12px 8px; border-radius:16px; }
  .hero-copy { left:24px; right:24px; bottom:24px; width:auto; }
  .hero h2 { font-size:36px; }
  .hero p { font-size:15px; max-height:66px; }
  .home-row-section, .movie-browse-row-section, .series-browse-row-section, .search-section { padding-left:15px; }
  .row-heading { padding-right:16px; }
  .row-heading h3 { font-size:21px; }
  .media-row { padding-right:16px; min-height:250px; }
  .movie-card, .series-card { flex-basis:142px; width:142px; margin-right:13px; }
  .poster { width:136px; height:194px; }
  .card-title { font-size:13px; }
  .card-meta { font-size:11px; }
  .movie-group-heading, .series-group-heading { margin-left:18px; margin-right:18px; }
  .browse-heading, .search-panel { margin-left:14px; margin-right:14px; padding:22px; }
  .search-line { align-items:stretch; }
  .search-line input { width:auto; flex:1; min-width:0; height:56px; font-size:18px; }
  .search-line button { min-width:120px; }
  .settings-page.active-page { display:block; overflow:auto; padding:0 14px 90px; }
  .settings-card { width:100%; margin-top:18px !important; padding:24px; }
  .subtitle-pref-button { width:calc(50% - 10px); }
  .detail-content, .series-content { left:30px; right:30px; width:auto; }
  .detail-content h2, .series-content h2 { font-size:42px; }
  .source-picker-panel { left:4%; right:4%; top:5%; bottom:5%; width:auto; max-width:none; }
  .see-all-shell { padding:24px 18px 95px; }
  .see-all-grid { height:calc(100vh - 215px); }
}

@media (max-width: 620px) {
  .nav-item { padding:4px 5px; min-width:48px; }
  #legacyAdminLink span:last-child { display:none; }
  .hero { height:270px; }
  .hero h2 { font-size:30px; }
  .movie-card, .series-card { flex-basis:126px; width:126px; }
  .poster { width:120px; height:171px; }
  .media-row { min-height:226px; }
  .row-heading-actions .row-note { display:none; }
  .see-all-button { min-width:82px; padding:0 10px; }
  .search-line { display:block; }
  .search-line button { margin:10px 0 0; width:100%; }
  .subtitle-pref-button { width:100%; margin-right:0; }
  .player-bottom { left:18px; right:18px; bottom:22px; }
  .player-title { font-size:22px; }
  .web-player-buttons span { display:none; }
  .player-settings-menu, .subtitle-menu { right:14px; left:14px; width:auto; bottom:150px; }
  .subtitle-overlay { left:5%; right:5%; bottom:100px; font-size:26px; }
}


/* v0.1.1 browser fullscreen */
:fullscreen .web-player,
:-webkit-full-screen .web-player { width:100vw; height:100vh; }
:fullscreen .player-ui,
:-webkit-full-screen .player-ui { width:100vw; height:100vh; }
#playerFullscreenButton { min-width:132px; }
@media (max-width:720px) {
  #playerFullscreenButton { min-width:48px; padding-left:10px; padding-right:10px; }
}
\n\n/* WEB v0.1.3 player layout cleanup */\n.player-control-row { justify-content:center; }\n.web-player-buttons { justify-content:center; }\n.player-gear-button { margin-left:0; width:52px; height:46px; min-height:46px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:11px; background:rgba(20,22,28,.90); color:#fff; font-size:25px; }\n.player-gear-button:hover,.player-gear-button:focus,.player-gear-button.active { outline:none; border-color:#ff3345; background:#25171b; box-shadow:0 0 18px rgba(255,40,58,.28); }\n.player-fullscreen-button { position:absolute; top:28px; right:30px; z-index:6; width:52px; height:52px; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(12,13,17,.82); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .16s ease,transform .16s ease,border-color .16s ease,background .16s ease; }\n.player-ui.controls-visible .player-fullscreen-button { opacity:1; transform:translateY(0); pointer-events:auto; }\n.player-fullscreen-button:hover,.player-fullscreen-button:focus { outline:none; border-color:#ff3345; background:#25171b; box-shadow:0 0 18px rgba(255,40,58,.28); }\n#playerFullscreenButton { min-width:0; padding:0; }\n.subtitle-menu { right:50%; transform:translateX(50%); bottom:150px; width:min(560px,calc(100vw - 40px)); }\n.subtitle-section-title { margin:2px 0 10px; color:#a7aab3; font-size:14px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; }\n.player-settings-menu { display:none !important; }\n.subtitle-menu:not(.hidden) ~ .player-bottom { opacity:.28; }\n@media (max-width:720px) {\n  .player-fullscreen-button { top:16px; right:16px; width:46px; height:46px; }\n  .subtitle-menu { left:14px; right:14px; transform:none; width:auto; bottom:125px; }\n}\n\n.subtitle-menu-item { cursor:pointer; }\n.subtitle-menu-item:hover { border-color:#ff3345; background:#21161a; }\n.subtitle-sync-controls { display:flex; align-items:center; gap:10px; }\n.subtitle-sync-controls button { width:36px; height:32px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:#171920; color:#fff; font-size:21px; line-height:1; cursor:pointer; }\n.subtitle-sync-controls button:hover,.subtitle-sync-controls button:focus { outline:none; border-color:#ff3345; background:#25171b; }\n