.sf-page { min-height: 100vh; }
.sf-shell { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }

.hero-slider { margin: 26px auto 38px; }
.slider-container {
  position: relative;
  height: clamp(390px, 48vw, 570px);
  border-radius: 26px !important;
  overflow: hidden;
  background: #050809 !important;
  border: 1px solid rgba(50,244,207,.18) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.58) !important;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .7s ease, transform 1.1s ease, visibility .7s;
  background-position: center;
  background-size: cover;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,7,9,.98) 5%, rgba(4,7,9,.82) 42%, rgba(4,7,9,.18) 78%),
    linear-gradient(0deg, #07080b 0%, transparent 48%);
}
.slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }
.slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: 720px;
  padding: clamp(28px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.slide-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.latest-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 7px rgba(0,217,173,.12); }
.slide-badge { border-radius: 999px !important; padding: 6px 12px !important; font-size: 11px !important; }
.slide-title { font-size: clamp(30px, 4vw, 54px) !important; line-height: 1.18; margin-bottom: 14px !important; }
.slide-meta { display: flex; gap: 10px; flex-wrap: wrap; color: #d1d5db; font-size: 13px; margin-bottom: 14px; }
.slide-meta span { padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.slide-desc { max-width: 610px; color: #c7ccd3 !important; font-size: 14px !important; line-height: 1.85 !important; margin-bottom: 23px !important; }
.slide-actions { display: flex; align-items: center; gap: 11px; }
.slide-btn { border-radius: 12px !important; padding: 12px 24px !important; }
.slide-secondary { color: #fff; text-decoration: none; padding: 11px 18px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(5,8,9,.55); backdrop-filter: blur(8px); }
.slider-controls { position: absolute; inset-inline: 25px; bottom: 22px; z-index: 8; display: flex; align-items: center; justify-content: space-between; }
.slider-dots { position: static !important; display: flex; gap: 7px; }
.dot { width: 22px !important; height: 4px !important; border-radius: 99px !important; background: rgba(255,255,255,.25) !important; cursor: pointer; }
.dot.active { width: 48px !important; background: var(--sf-accent) !important; }
.slider-arrows { display: flex; gap: 8px; }
.slider-arrow { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; background: rgba(3,6,8,.65); cursor: pointer; font-size: 19px; backdrop-filter: blur(9px); }
.slider-arrow:hover { border-color: var(--sf-accent); color: var(--sf-accent-light); }

.catalog-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.catalog-heading small { display: block; color: var(--sf-accent); font-size: 12px; margin-bottom: 5px; }
.catalog-heading h1 { font-size: clamp(24px, 3vw, 34px); }
.catalog-heading p { color: var(--sf-muted); font-size: 13px; margin-top: 5px; }
.search-box { width: min(360px, 100%); border-radius: 14px !important; padding: 6px 14px !important; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 27px; }
.cat-btn { border-radius: 12px !important; padding: 9px 16px !important; }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; padding-bottom: 54px; }
.catalog-card { position: relative; overflow: hidden; text-decoration: none; color: inherit; border-radius: 18px; background: linear-gradient(180deg,#15191f,#0d1015); border: 1px solid rgba(255,255,255,.075); transition: .25s ease; }
.catalog-card:hover { transform: translateY(-7px); border-color: rgba(0,217,173,.55); box-shadow: 0 22px 55px rgba(0,0,0,.48); }
.catalog-poster { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #11161a; }
.catalog-poster::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(5,7,9,.92)); }
.catalog-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.catalog-card:hover img { transform: scale(1.055); }
.catalog-type { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 5px 9px; border-radius: 9px; background: rgba(0,174,145,.9); color: #fff; font-size: 10px; font-weight: 800; }
.catalog-rating { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 8px; border-radius: 9px; background: rgba(3,5,7,.82); color: #f5c451; font-size: 10px; font-weight: 800; }
.catalog-body { padding: 13px; }
.catalog-title { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 7px; }
.catalog-meta { display: flex; justify-content: space-between; gap: 7px; color: #88909c; font-size: 11px; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--sf-muted); border: 1px dashed var(--sf-line); border-radius: 20px; }

.series-hero { position: relative; min-height: 500px; display: flex; align-items: end; background-position: center; background-size: cover; }
.series-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07080b 4%,rgba(7,8,11,.83) 48%,rgba(7,8,11,.3)),linear-gradient(0deg,#07080b 1%,transparent 55%); }
.series-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 210px 1fr; gap: 34px; align-items: end; padding-block: 55px; }
.series-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 25px 65px rgba(0,0,0,.55); }
.series-info h1 { font-size: clamp(30px,4vw,50px); margin-bottom: 12px; }
.series-info p { max-width: 720px; color: #c6cbd2; line-height: 1.85; margin-top: 16px; }
.crumbs { color: #8e96a3; font-size: 12px; margin-bottom: 14px; }
.crumbs a { color: var(--sf-accent); text-decoration: none; }
.stat-row { display:flex; flex-wrap:wrap; gap:9px; }
.stat { padding: 6px 10px; border: 1px solid var(--sf-line); background: rgba(255,255,255,.05); border-radius: 10px; font-size: 12px; color: #d6d9de; }
.content-section { padding-block: 36px 60px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:20px; }
.section-heading h2 { border-right: 3px solid var(--sf-accent); padding-right: 11px; font-size: 22px; }
.season-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }
.season-card { text-decoration:none; color:inherit; background:#11151a; border:1px solid var(--sf-line); border-radius:18px; overflow:hidden; transition:.25s; }
.season-card:hover { transform:translateY(-5px); border-color:rgba(0,217,173,.55); }
.season-image { aspect-ratio:16/10; position:relative; overflow:hidden; background:#0d1115; }
.season-image img { width:100%; height:100%; object-fit:cover; }
.season-number { position:absolute; top:10px; right:10px; background:rgba(0,174,145,.92); color:#fff; border-radius:9px; padding:5px 9px; font-size:11px; font-weight:800; }
.season-body { padding:14px; }
.season-body h3 { font-size:15px; margin-bottom:5px; }
.season-body p { color:#89919d; font-size:12px; }
.episode-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.episode-card { text-decoration:none; color:inherit; background:#11151a; border:1px solid var(--sf-line); border-radius:17px; overflow:hidden; transition:.25s; }
.episode-card:hover { transform:translateY(-5px); border-color:rgba(0,217,173,.55); }
.episode-image { aspect-ratio:16/9; position:relative; overflow:hidden; background:#0d1115; }
.episode-image img { width:100%; height:100%; object-fit:cover; }
.episode-play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.12); }
.episode-play span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(0,217,173,.9); color:#06211c; font-size:18px; box-shadow:0 10px 30px rgba(0,217,173,.3); }
.episode-body { padding:13px; }
.episode-body h3 { font-size:14px; margin-bottom:6px; }
.episode-body p { color:#89919d; font-size:11px; }
.episode-player { background:#000; border:1px solid rgba(0,217,173,.24); border-radius:20px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 25px 70px rgba(0,0,0,.7); }
.episode-player iframe { width:100%; height:100%; border:0; }
.server-list { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 28px; }
.server-btn { border:1px solid var(--sf-line); background:#11161a; color:#dce1e5; padding:9px 14px; border-radius:11px; cursor:pointer; }
.server-btn.active,.server-btn:hover { background:rgba(0,217,173,.14); border-color:var(--sf-accent); color:var(--sf-accent-light); }

@media (max-width: 768px) {
  .sf-shell { width:min(100% - 22px,1240px); }
  .slider-container { height: 430px; border-radius: 20px !important; }
  .slide::before { background:linear-gradient(0deg,#07080b 4%,rgba(7,8,11,.78) 64%,rgba(7,8,11,.28)); }
  .slide-content { justify-content:flex-end; padding:24px 20px 68px; }
  .slide-title { font-size:28px !important; }
  .slide-desc { -webkit-line-clamp:2 !important; }
  .slide-secondary { display:none; }
  .slider-controls { inset-inline:18px; bottom:17px; }
  .catalog-toolbar { align-items:stretch; flex-direction:column; }
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .series-hero { min-height:620px; }
  .series-hero::before { background:linear-gradient(0deg,#07080b 5%,rgba(7,8,11,.87) 70%,rgba(7,8,11,.25)); }
  .series-hero-inner { grid-template-columns:120px 1fr; gap:17px; align-items:end; padding-bottom:35px; }
  .series-info h1 { font-size:25px; }
  .series-info p { grid-column:1/-1; font-size:13px; }
  .season-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .episode-grid { grid-template-columns:1fr; }
}