#screen-catalog, #screen-series { overflow:hidden; }
.catalog-header, .detail-header { height:92px; display:flex; align-items:center; gap:25px; }
.catalog-header > div:nth-child(2) { min-width:310px; }
.catalog-header h1 { margin:4px 0 0; font-size:38px; }
.search-box { margin-left:auto; width:570px; height:62px; display:flex; align-items:center; gap:13px; padding:0 19px; border-radius:18px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.08); }
.search-box:focus-within { border-color:var(--green); box-shadow:0 0 0 4px rgba(29,216,97,.15); }
.search-box span { font-size:28px; color:var(--muted); }
.search-box input { width:100%; height:100%; border:0; background:transparent; font-size:20px; }
.category-strip { min-height:78px; display:flex; align-items:center; gap:14px; overflow-x:auto; overflow-y:hidden; padding:8px 5px 12px; scrollbar-width:none; }
.category-strip::-webkit-scrollbar { display:none; }
.category-btn { flex:0 0 auto; height:52px; padding:0 23px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line); color:#cbd8d1; font-size:16px; font-weight:700; transition:.15s ease; }
.category-btn.active { color:#06120b; background:var(--green); border-color:var(--green); }
.catalog-meta { height:36px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:14px; }
.catalog-grid { height:calc(100% - 218px); overflow-y:auto; padding:8px 10px 90px 5px; display:grid; grid-template-columns:repeat(7,1fr); gap:24px 19px; align-content:start; scrollbar-width:none; }
.catalog-grid::-webkit-scrollbar { display:none; }
.media-card { position:relative; min-width:0; padding:0; border-radius:20px; background:transparent; text-align:left; transition:.14s ease; }
.poster-wrap { position:relative; height:290px; overflow:hidden; border-radius:18px; background:linear-gradient(145deg,#183027,#101b17); border:1px solid rgba(255,255,255,.07); box-shadow:0 16px 38px rgba(0,0,0,.25); }
.media-card.live .poster-wrap { height:155px; }
.poster-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.poster-fallback { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:#b7c9bf; background:radial-gradient(circle at 25% 10%,rgba(29,216,97,.18),transparent 48%),linear-gradient(145deg,#152920,#0d1713); }
.poster-fallback b { font-size:26px; }
.poster-fallback span { max-height:58px; overflow:hidden; font-size:14px; line-height:1.35; }
.live-badge, .rating-badge { position:absolute; left:10px; top:10px; padding:7px 10px; border-radius:9px; background:rgba(4,10,7,.82); backdrop-filter:blur(6px); font-size:12px; font-weight:800; }
.live-badge { color:#a8ffc4; }
.media-card-copy { padding:13px 5px 0; }
.media-card-copy h3 { margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; }
.media-card-copy p { margin:7px 0 0; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }
.media-card:focus .poster-wrap, .media-card.is-focused .poster-wrap { border-color:var(--green); box-shadow:0 0 0 5px var(--green),0 0 36px rgba(29,216,97,.4); }
.media-card:focus, .media-card.is-focused { box-shadow:none !important; transform:scale(1.045); }
.empty-state { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); text-align:center; }
.empty-state > div { font-size:72px; color:var(--green); }
.empty-state h2 { margin:12px 0 5px; font-size:31px; }
.empty-state p { margin:0; color:var(--muted); font-size:18px; }
.catalog-loading { position:absolute; left:50%; bottom:45px; transform:translateX(-50%); }
.detail-header { position:absolute; z-index:4; left:70px; right:70px; top:45px; }
.series-hero { height:430px; margin:-54px -70px 0; padding:125px 70px 42px; background:linear-gradient(90deg,rgba(7,16,12,.98) 0%,rgba(7,16,12,.85) 48%,rgba(7,16,12,.16) 100%),linear-gradient(0deg,var(--bg),transparent 42%); background-size:cover; background-position:center; }
.series-hero-inner { max-width:950px; display:flex; gap:30px; align-items:flex-end; }
.series-cover { width:190px; height:270px; flex:0 0 auto; overflow:hidden; border-radius:20px; background:#14251d; box-shadow:var(--shadow); }
.series-cover img { width:100%; height:100%; object-fit:cover; }
.series-info h1 { margin:0 0 14px; font-size:46px; }
.series-info p { max-width:800px; max-height:92px; overflow:hidden; margin:0; color:#c6d4cd; font-size:17px; line-height:1.55; }
.detail-tags { display:flex; gap:12px; margin-top:18px; }
.detail-tag { padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.09); font-size:13px; }
.series-content { height:calc(100% - 370px); overflow:hidden; padding-top:6px; }
.section-title { height:48px; display:flex; align-items:center; justify-content:space-between; }
.section-title h2 { margin:0; font-size:25px; }
.section-title span { color:var(--muted); }
.episode-list { height:calc(100% - 150px); overflow-y:auto; padding:7px 8px 70px 3px; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; align-content:start; scrollbar-width:none; }
.episode-card { min-height:120px; display:flex; gap:18px; padding:14px; text-align:left; border-radius:18px; background:rgba(255,255,255,.065); border:1px solid var(--line); transition:.14s ease; }
.episode-number { width:74px; min-width:74px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(29,216,97,.1); color:var(--green); font-size:25px; font-weight:900; }
.episode-copy h3 { margin:6px 0 9px; font-size:17px; }
.episode-copy p { max-height:46px; overflow:hidden; margin:0; color:var(--muted); line-height:1.4; font-size:13px; }
@media (max-width:1600px) { .catalog-grid { grid-template-columns:repeat(6,1fr); } }
@media (max-width:1400px) {
 .catalog-grid { grid-template-columns:repeat(6,1fr); gap:19px 15px; }
 .search-box { width:430px; }
 .series-hero { margin:-38px -48px 0; padding-left:48px; padding-right:48px; }
 .detail-header { left:48px; right:48px; top:30px; }
}

.image-fallback-hidden { display:none; }