:root {
  --bg: #081120;
  --bg-deep: #050b16;
  --panel: #131f33;
  --panel-2: #1a2a44;
  --glass: rgba(19, 31, 51, 0.66);
  --text: #e8eef9;
  --muted: #93a5c3;
  --primary: #21d4c2;
  --accent: #2f8bff;
  --danger: #ef4444;
  --border: #2a3d5f;
}

body {
  background:
    radial-gradient(920px 500px at 0% -20%, rgba(47, 139, 255, 0.23) 0%, transparent 55%),
    radial-gradient(820px 520px at 100% 0%, rgba(33, 212, 194, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: "Segoe UI", "Noto Sans", sans-serif;
  letter-spacing: 0.01em;
}

.sidebar {
  width: 260px;
  min-height: 100vh;
  background: linear-gradient(190deg, #0b1629 0%, #081425 45%, #0a1930 100%);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.sidebar .nav-link {
  color: #c8d7ee;
  border-radius: 8px;
  margin: 2px 0;
  transition: all .18s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(33, 212, 194, 0.28), rgba(47, 139, 255, 0.2));
}

.tv-mode .sidebar .nav-link:focus,
.tv-mode .sidebar .nav-link:focus-visible,
.tv-mode .channel-card:focus,
.tv-mode .channel-card:focus-visible,
.tv-mode .movie-card:focus,
.tv-mode .movie-card:focus-visible,
.tv-mode .page-link:focus,
.tv-mode .page-link:focus-visible,
.tv-mode .btn:focus,
.tv-mode .btn:focus-visible,
.tv-mode .search-item:focus,
.tv-mode .search-item:focus-visible,
.tv-mode .fav-btn:focus,
.tv-mode .fav-btn-sm:focus,
.tv-mode .fav-btn:focus-visible,
.tv-mode .fav-btn-sm:focus-visible {
  outline: 3px solid rgba(33, 212, 194, 0.92) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(47, 139, 255, 0.24);
}

#page-content {
  min-height: 100vh;
}

.navbar {
  backdrop-filter: blur(8px);
  background: rgba(10, 20, 35, 0.72) !important;
}

.sidebar-brand {
  border-bottom: 1px solid rgba(120, 144, 180, 0.2);
}

.card {
  background: linear-gradient(165deg, rgba(24, 38, 60, 0.92) 0%, rgba(13, 23, 39, 0.95) 100%);
  border: 1px solid rgba(104, 131, 170, 0.26) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  border-radius: 14px;
}

.dashboard-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
}

.channel-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.channel-card,
.movie-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.channel-card:hover,
.movie-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.tv-mode .channel-card,
.tv-mode .movie-card,
.tv-mode .nav-link,
.tv-mode .page-link,
.tv-mode .btn,
.tv-mode .search-item {
  transition: transform .14s ease, outline-color .14s ease, box-shadow .14s ease;
}

.tv-mode .channel-card:focus,
.tv-mode .movie-card:focus {
  transform: scale(1.03);
  border-color: var(--primary) !important;
}

.channel-name {
  max-width: 100%;
}

.movie-thumb {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  width: 100%;
}

.movie-thumb-placeholder {
  aspect-ratio: 2 / 3;
}

.movie-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(47, 139, 255, 0.25), rgba(0, 0, 0, 0.55));
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .18s ease;
}
.movie-poster {
  position: relative;
}
.movie-poster:hover .movie-overlay {
  opacity: 1;
}

.fav-btn,
.fav-btn-sm {
  background: rgba(5, 8, 14, 0.58);
  border: 1px solid rgba(211, 223, 240, 0.16);
}

.search-dropdown {
  position: absolute;
  top: 56px;
  left: 300px;
  right: 24px;
  z-index: 1050;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(8, 15, 28, 0.95);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

.search-item {
  display: block;
  color: #e5e7eb;
  padding: .55rem .75rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(88, 110, 147, 0.3);
}
.search-item:hover { background: rgba(47, 139, 255, 0.16); }

.player-wrap {
  background: #000;
  min-height: 360px;
  border-radius: 14px;
  overflow: hidden;
}

.player-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 8, 18, 0.2) 0%, rgba(2, 8, 18, 0.66) 100%);
  z-index: 2;
}

.player-overlay.d-none {
  display: none !important;
}

.blink {
  animation: blink 1s infinite;
}

.install-step {
  background: rgba(16, 25, 40, 0.62);
}

.table > :not(caption) > * > * {
  border-color: rgba(106, 129, 166, 0.28);
}

.btn-primary,
.btn-info,
.btn-warning,
.btn-success,
.btn-danger,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success {
  border-radius: 10px;
}

.form-control,
.form-select,
.input-group-text {
  border-radius: 10px !important;
}

.list-group-item {
  border-color: rgba(112, 135, 170, 0.22) !important;
}

.pagination .page-link {
  border-radius: 9px;
  margin: 0 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    z-index: 1200;
    transition: left .18s ease;
  }
  .sidebar.show {
    left: 0;
  }
  .search-dropdown {
    left: 14px;
    right: 14px;
    top: 56px;
  }

  .card {
    border-radius: 12px;
  }
}

@media (max-width: 767.98px) {
  main {
    padding: 1rem !important;
  }

  .navbar {
    padding-left: .8rem !important;
    padding-right: .8rem !important;
  }

  .player-wrap {
    min-height: 220px;
  }
}