@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #030b18;
  --panel: #07172b;
  --panel2: #0b203a;
  --line: #183b61;
  --blue: #1597ff;
  --blue2: #46b9ff;
  --text: #f4f8ff;
  --muted: #9eb2cc;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse at 50% -20%, #12345a 0%, #061426 43%, #020813 100%);
  font-family: Inter, Arial, sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
.topbar {
  min-height: 88px; padding: 16px 3.2%; display: flex; align-items: center; gap: 30px;
  background: rgba(2, 9, 20, .92); border-bottom: 1px solid rgba(56, 132, 205, .22);
  position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); text-decoration: none; white-space: nowrap; font-size: clamp(18px, 2vw, 30px); font-weight: 800; letter-spacing: -.7px; }
.brand b { color: var(--blue2); }
.brand-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: linear-gradient(135deg, #20b9ff, #0875ef); box-shadow: 0 0 24px #098bff40; font-size: 20px; }
.main-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-item { background: transparent; border: 1px solid transparent; padding: 12px 16px; border-radius: 13px; color: #b9c9de; cursor: pointer; white-space: nowrap; }
.nav-item span { margin-left: 5px; }
.nav-item.active, .nav-item:focus-visible { background: #087ef0; color: white; outline: 2px solid #5ac8ff; outline-offset: 2px; }
.search-wrap { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-width: 210px; width: min(27vw, 370px); height: 50px; border: 1px solid #244e79; background: #0a1a30; border-radius: 28px; color: #c5d7ed; }
.search-wrap span { font-size: 26px; line-height: 1; }
.search-wrap input { width: 100%; min-width: 0; color: white; background: transparent; border: 0; outline: 0; }
.search-wrap:focus-within { border-color: var(--blue2); box-shadow: 0 0 0 3px #1597ff25; }
.page { padding: 28px 3.2% 38px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { margin: 0 0 5px; color: #65bfff; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
h1 { margin: 0; font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.8px; }
.movie-count { color: var(--muted); font-size: 13px; }
.movies_box { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 22px 17px; align-items: stretch; }
.tv_lnk { color: inherit; text-decoration: none; min-width: 0; border-radius: 12px; outline: none; }
.movies_card { height: 100%; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #102743, #061326); border: 1px solid #173b60; border-radius: 11px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.movies_card img { display: block; width: 100%; aspect-ratio: 2 / 2.75; object-fit: cover; background: #10233a; }
.movie-info { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 7px; padding: 11px 10px; }
.movie-info h3 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; }
.hd-badge { flex-shrink: 0; padding: 3px 4px; border: 1px solid #7693b6; border-radius: 4px; color: #d6e9ff; font-size: 9px; }
.tv_lnk:focus .movies_card, .tv_lnk:focus-visible .movies_card, .tv_lnk:hover .movies_card {
  transform: translateY(-3px) scale(1.025); border-color: #28baff;
  box-shadow: 0 0 0 2px #12aaff, 0 0 28px #008cff55;
}
.empty-state { padding: 45px 10px; text-align: center; color: var(--muted); }
.tip { margin: 25px 0 0; text-align: center; color: #748ca8; font-size: 12px; }
.player-overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: 14px; padding: 22px 3.2%; background: rgba(1, 6, 14, .98); }
.player-overlay[hidden] { display: none !important; }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.now-playing { display: flex; align-items: center; gap: 12px; min-width: 0; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #1da1ff; box-shadow: 0 0 15px #1da1ff; }
.now-playing small { color: #6cbfff; letter-spacing: 1.8px; font-size: 10px; }
.now-playing h2 { margin: 4px 0 0; font-size: clamp(17px, 2vw, 25px); overflow-wrap: anywhere; }
.close-btn { display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-radius: 12px; background: #0b1a2d; border: 1px solid #40678f; font-weight: 600; cursor: pointer; white-space: nowrap; }
.video-stage { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; background: #000; border: 1px solid #183754; border-radius: 10px; overflow: hidden; }
#mainTvPlayer { width: 100%; height: 100%; max-height: calc(100vh - 240px); object-fit: contain; background: #000; outline: none; }
.player-message { position: absolute; inset: auto 15px 15px; padding: 13px 16px; color: white; background: #8d2222e8; border-radius: 8px; font-size: 14px; }
.player-bottom { padding: 0 5px 4px; }
.progress-row { display: flex; align-items: center; gap: 13px; color: #bed0e6; font-size: 12px; font-variant-numeric: tabular-nums; }
.seekbar, .volume-bar { accent-color: var(--blue); cursor: pointer; }
.seekbar { width: 100%; }
.control-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); margin-top: 12px; }
.control-btn { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: transparent; border: 1px solid transparent; border-radius: 10px; font-size: 27px; cursor: pointer; }
.control-btn small { font-size: 10px; }
.play-btn { width: 58px; height: 58px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #25b7ff, #0875ef); box-shadow: 0 0 24px #078fff50; font-size: 25px; cursor: pointer; }
.volume-control { display: flex; align-items: center; gap: 9px; margin-left: 12px; }
.volume-bar { width: clamp(75px, 15vw, 180px); }
.controls-spacer { flex: 1; }
.player-help { margin: 8px 0 0; color: #7188a4; font-size: 11px; text-align: center; }
.focusable:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #59c9ff; outline-offset: 3px; }
@media (min-width: 1500px) { .movies_box { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 12px; }
  .main-nav { order: 3; margin-left: 0; }
  .search-wrap { margin-left: auto; width: min(45vw, 340px); }
  .movies_box { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px 12px; }
}
@media (max-width: 520px) {
  .topbar { padding: 13px 4%; }
  .brand { font-size: 18px; }
  .brand-icon { width: 35px; height: 35px; }
  .search-wrap { order: 4; width: 100%; }
  .main-nav { width: 100%; justify-content: space-between; }
  .nav-item { padding: 9px 11px; }
  .page { padding: 22px 4%; }
  .movies_box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movies_card { min-height: 0; }
  .player-overlay { padding: 12px; gap: 9px; }
  .close-btn { padding: 9px 11px; }
  .close-btn span { display: none; }
  .control-row { gap: 7px; }
  .volume-control { margin-left: 0; }
  .volume-bar { width: 65px; }
  #mainTvPlayer { max-height: calc(100vh - 250px); }
}