:root {
  --bg: #07080d;
  --bg2: #10141d;
  --card: #141a27;
  --card-hi: #1a2133;
  --text: #edf1f9;
  --muted: #939cb4;
  --accent: #e50914;
  --accent2: #46d369;
  --gold: #f3c969;
  --line: rgba(255, 255, 255, 0.07);
  --line-hi: rgba(255, 255, 255, 0.14);
  --glass: rgba(15, 19, 29, 0.72);
  --grad-accent: linear-gradient(135deg, #ff2b3a 0%, #c40812 100%);
  --grad-gold: linear-gradient(135deg, #ffe6a8 0%, #eeb63a 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  --sh-1: 0 4px 14px rgba(0, 0, 0, 0.35);
  --sh-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --sh-3: 0 34px 90px rgba(0, 0, 0, 0.68);
  --glow-accent: 0 0 0 1px rgba(229, 9, 20, 0.35), 0 10px 34px rgba(229, 9, 20, 0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius: 14px;
  --radius-lg: 20px;
  --row-gap: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  letter-spacing: 0.005em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Layered ambient light so the canvas never reads as flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(229, 9, 20, 0.14), transparent 62%),
    radial-gradient(1000px 640px at 102% -6%, rgba(64, 110, 255, 0.13), transparent 58%),
    radial-gradient(900px 720px at 50% 118%, rgba(243, 201, 105, 0.06), transparent 62%);
}

::selection { background: rgba(229, 9, 20, 0.45); color: #fff; }

h1, h2, h3, h4, .brand, .adm-h1 { letter-spacing: -0.02em; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(8, 10, 15, 0.74);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
/* Gradient hairline under the glass bar. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 9, 20, 0.55) 22%, rgba(110, 168, 255, 0.35) 65%, transparent);
  pointer-events: none;
}

.brand {
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 25%, #aeb9d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.brand span {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.search-wrap { flex: 1; max-width: 480px; }

#searchInput {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939cb4' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20.5 20.5 16.7 16.7'/></svg>") no-repeat 15px center,
    rgba(255, 255, 255, 0.045);
  color: var(--text);
  outline: none;
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s;
}
#searchInput::placeholder { color: #7c859e; }
#searchInput:focus {
  border-color: rgba(229, 9, 20, 0.65);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Topbar Desktop Navigation ---------- */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px;
}
.tnav-link {
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
  border: 1px solid transparent;
}
.tnav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.tnav-link.active {
  color: #ffffff;
  background: rgba(229, 9, 20, 0.16);
  border-color: rgba(229, 9, 20, 0.38);
}
.tnav-link.tnav-vip {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
  font-weight: 700;
}
.tnav-link.tnav-vip:hover {
  color: #fef08a;
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}
@media (max-width: 960px) {
  .topbar-nav { display: none; }
}

/* ---------- Admin Panel Isolation ---------- */
body.in-admin header.topbar,
body.in-admin .topbar {
  display: none !important;
}
body.in-admin #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#providerSelect {
  display: none !important;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: var(--grad-surface), var(--bg2);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  max-width: 200px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.is-admin:not(.in-admin) #providerSelect {
  display: inline-block !important;
}
#providerSelect:hover { border-color: rgba(255, 255, 255, 0.22); }
#providerSelect:focus { border-color: rgba(229, 9, 20, 0.6); box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12); }

/* ---------- Header genres menu ---------- */
.genres-wrap { position: relative; flex-shrink: 0; }

.genres-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: var(--grad-surface), var(--bg2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.genres-btn:hover, .genres-btn[aria-expanded="true"] {
  border-color: rgba(229, 9, 20, 0.55);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.genres-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 80;
  width: min(560px, 80vw);
  max-height: min(430px, 70vh);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(22, 27, 40, 0.97), rgba(13, 17, 26, 0.97));
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  box-shadow: var(--sh-3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px;
  animation: fadeIn 0.18s var(--ease);
}

.genres-loading {
  color: var(--muted);
  font-size: 0.86rem;
  padding: 10px 6px;
}

.genres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.genre-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  color: #dbe1ee;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.genre-item:hover {
  border-color: rgba(229, 9, 20, 0.5);
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.18), rgba(229, 9, 20, 0.06));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


.genre-cnt {
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(110, 168, 255, 0.14);
  border: 1px solid rgba(110, 168, 255, 0.4);
  color: #8ab8ff;
  font-size: 0.7rem;
  font-weight: 800;
}

main { padding: 24px 26px 40px; }

/* ---------- Home rows ---------- */
.row-section { margin-bottom: 38px; }
.row-title {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 15px;
  color: #f4f6fb;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 15px;
}
.row-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background: var(--grad-accent);
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.7);
}


/* Row header: title + See all */
.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.row-head .row-title { margin-bottom: 0 !important; }
.row-seeall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c7d0e4;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.row-seeall:hover {
  background: rgba(229, 9, 20, 0.18);
  border-color: rgba(229, 9, 20, 0.55);
  color: #fff;
}

/* Exactly 8 cards visible per row (desktop); fewer on smaller screens. */
.row-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 7 * var(--row-gap)) / 8);
  gap: var(--row-gap);
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #39445f transparent;
  scroll-behavior: smooth;
}
.row-scroll .card { scroll-snap-align: start; }

@media (max-width: 1279px) {
  .row-scroll { grid-auto-columns: calc((100% - 5 * var(--row-gap)) / 6); }
}
@media (max-width: 1023px) {
  .row-scroll { grid-auto-columns: calc((100% - 3 * var(--row-gap)) / 4); }
}
@media (max-width: 767px) {
  .row-scroll { grid-auto-columns: calc((100% - 2 * var(--row-gap)) / 3.25); scrollbar-width: none; }
}
@media (max-width: 479px) {
  .row-scroll { grid-auto-columns: calc((100% - 10px) / 2.35); gap: 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .row-scroll::-webkit-scrollbar { display: none; }
}

.row-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
}
.row-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: #7aa2ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.card {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #19202f 0%, rgba(18, 23, 36, 0) 100%), var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.32);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.22s;
}
.card:hover {
  transform: translateY(-7px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(229, 9, 20, 0.28),
    0 0 34px rgba(229, 9, 20, 0.16);
  z-index: 2;
}
.card:active { transform: scale(0.96); transition-duration: 0.1s; }

.card .card-img-wrap {
  position: relative;
  overflow: hidden;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%232a354b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='m9 8 6 4-6 4Z'/></svg>") no-repeat center center, linear-gradient(135deg, #181e2b, #10141f);
}
/* Fade + hairline revealed on hover so posters feel lit from below. */
.card .card-img-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(6, 8, 13, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.card:hover .card-img-wrap::after { opacity: 1; }

.card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #1c2233;
  transition: transform 0.55s var(--ease), filter 0.35s var(--ease);
}
.card:hover img { transform: scale(1.07); filter: saturate(1.12) contrast(1.03); }

.card .card-title {
  padding: 10px 11px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.34;
  color: #e9edf6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color 0.2s;
}
.card:hover .card-title { color: #fff; }


/* Unified search cards */
.card-img-wrap { position: relative; }
.card-year { color: var(--muted); font-weight: 500; }
.card-q {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(6, 9, 14, 0.78);
  backdrop-filter: blur(6px);
  color: var(--accent2);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid rgba(70, 211, 105, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.03em;
}
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(110, 168, 255, 0.14);
  border: 1px solid rgba(110, 168, 255, 0.42);
  color: #8ab8ff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.5;
  backdrop-filter: blur(6px);
}
.card-img-wrap .src-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.season-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(6, 9, 14, 0.78);
  backdrop-filter: blur(6px);
  color: #ffd166;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 196, 80, 0.45);
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.lang-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(6, 9, 14, 0.78);
  backdrop-filter: blur(6px);
  color: #d9b0ff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid rgba(177, 124, 255, 0.45);
  white-space: nowrap;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.card-provs {
  padding: 0 11px 11px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #767f99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-src { color: #8ab8ff; font-weight: 700; }
.prov-sep { margin: 0 5px; color: #4b5470; }
.search-note {
  color: var(--muted);
  font-size: 0.84rem;
  margin: -6px 0 16px;
}
.search-note b { color: #d0d7e6; }
.prov-pill {
  flex-shrink: 0;
  background: rgba(110, 168, 255, 0.12);
  border: 1px solid rgba(110, 168, 255, 0.4);
  color: #8ab8ff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
}

/* Search / genre results: exactly 8 cards per row on desktop. */
.grid-search {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--row-gap);
}
@media (max-width: 1279px) {
  .grid-search { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .grid-search { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .grid-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.genre-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.genre-chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; white-space: nowrap; padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-hi);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.chip:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
  transform: translateY(-2px);
}
.chip.active {
  border-color: transparent;
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.4);
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: -6px -6px 28px;
  min-height: 380px;
  border: 1px solid var(--line-hi);
  background: #10141d;
  isolation: isolate;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Soft accent glows filling the right side of the hero. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(460px 280px at 12% 85%, rgba(229, 9, 20, 0.18), transparent 70%);


  /* subtle accent ambient */
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right 25%;
  filter: brightness(0.85) contrast(1.08);
  transform: scale(1);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-slide.active {
  opacity: 0.92;
  animation: heroKen 14s ease-in-out infinite alternate;
}
@keyframes heroKen {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.04) translateX(-1%); }
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 9, 14, 0.96) 0%, rgba(7, 9, 14, 0.82) 32%, rgba(7, 9, 14, 0.28) 65%, rgba(7, 9, 14, 0.08) 100%),
    linear-gradient(0deg, rgba(7, 9, 14, 0.95) 0%, rgba(7, 9, 14, 0.15) 35%, transparent 60%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  min-height: 380px;
  padding: 36px 40px 40px;
}

.hero-poster-wrap {
  flex-shrink: 0;
  perspective: 700px;
}

.hero-poster {
  width: 172px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 60px rgba(229, 9, 20, 0.3);
  background: #1c2233;
  transform: rotateY(-6deg);
  transition: transform 0.35s var(--ease), opacity 0.4s, box-shadow 0.35s;
  opacity: 1;
  animation: posterFloat 6s ease-in-out infinite alternate;
}
@keyframes posterFloat {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}
.hero-poster:hover {
  transform: rotateY(0deg) translateY(-4px);
  box-shadow:
    0 34px 76px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 72px rgba(229, 9, 20, 0.42);
  animation-play-state: paused;
}
.hero-poster.loading { opacity: 0; }

.hero-info {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  padding-bottom: 4px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.hero-badges .hero-tag:first-child {
  background: var(--grad-accent);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5);
}

.hero-tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cdd5e6;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-tag.q {
  background: rgba(70,211,105,0.14);
  border-color: rgba(70,211,105,0.4);
  color: var(--accent2);
}
.hero-tag.s {
  background: rgba(110,168,255,0.14);
  border-color: rgba(110,168,255,0.4);
  color: #8ab8ff;
}

.hero-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #ffffff 30%, #c9d2e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-fade { animation: heroFade 0.45s ease; }
@keyframes heroFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 4px;
  color: #9aa4bb;
  font-size: 0.93rem;
  font-weight: 600;
}
.hero-meta b { color: #cfd6e6; font-weight: 700; }
.hero-sep { color: #6d7893; margin: 0 4px; }

.hero-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-watch {
  position: relative;
  overflow: hidden;
  background: var(--grad-accent);
  color: #fff;
  border: none;
  font-size: 1.04rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  padding: 15px 32px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(229, 9, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}
.hero-watch::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
}
.hero-watch:hover::after { left: 130%; }
.hero-watch:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 18px 42px rgba(229, 9, 20, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero-watch:active { transform: translateY(0); }

.hero-dots {
  position: absolute;
  bottom: 18px;
  right: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(6, 8, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease, background 0.3s ease;
}
.hero-dot.active {
  width: 46px;
  background: rgba(255,255,255,0.22);
}
.hero-dot.active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left;
  animation: heroDotFill 6s linear forwards;
}
@keyframes heroDotFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-in { animation: heroIn 0.5s ease; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.load-more {
  display: block;
  margin: 8px auto 34px;
  padding: 12px 34px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--grad-surface), var(--bg2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--sh-1);
  transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s;
}
.load-more:hover {
  border-color: rgba(229, 9, 20, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.load-more:active { transform: translateY(0); }

/* ---------- Section page (See all) ---------- */
.section-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-page-head .row-title { margin-bottom: 0 !important; }
.sect-back {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c7d0e4;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sect-back:hover {
  background: rgba(229, 9, 20, 0.18);
  border-color: rgba(229, 9, 20, 0.55);
  color: #fff;
}
.section-page .grid-search { margin-bottom: 6px; }

.empty-msg { color: var(--muted); padding: 44px 0; text-align: center; }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(6, 8, 13, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-right-color: rgba(229, 9, 20, 0.55);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 26px rgba(229, 9, 20, 0.35);
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { color: var(--muted); font-size: 0.95rem; letter-spacing: 0.02em; }

/* ---------- Modal (player) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 7, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s var(--ease);
}

.modal {
  background: linear-gradient(180deg, rgba(21, 26, 39, 0.97), rgba(11, 14, 22, 0.98));
  border-radius: 18px;
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--line-hi);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.25s var(--ease), border-color 0.2s;
}
.modal-close:hover {
  background: rgba(229, 9, 20, 0.85);
  border-color: transparent;
  transform: rotate(90deg);
}

.player-modal { max-width: 960px; }
.player-wrap { padding: 20px 22px 22px; }
.player-video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
}
.player-video-box .art-video-player { width: 100%; height: 100%; }
/* Fullscreen element ke mobile-র aspect/margin niye khelte hobe na */
.player-video-box:fullscreen,
.player-video-box:-webkit-full-screen,
.art-video-player:fullscreen,
.art-video-player:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
/* Portrait video (reels/shorts) 16/9 box-e beshir vag black thake */
.player-video-box.is-portrait { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; max-height: 78vh; }
.art-seek { padding: 0 12px !important; gap: 2px; }
.art-seek .art-seek-num { font-size: 0.68rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.art-seek:active { transform: scale(0.88); }
@media (max-width: 560px) {
  .art-seek { padding: 0 7px !important; }
  .art-video-player .art-controls .art-controls-center { padding: 0 2px !important; }
  .art-video-player .art-controls .art-control-time { font-size: 0.72rem !important; }
}
/* ArtPlayer load na hole native <video> control er upor ei ±10s dekhano hoy.
   ArtPlayer mount howar somoy #playerBox er innerHTML muche fele, tai ei bar
   ta box er baire — stage-er upor overlay kore. */
.player-stage { position: relative; }
.nseek-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  display: none;
  justify-content: center;
  gap: 22px;
  z-index: 5;
  pointer-events: none;
}
.player-stage.is-native .nseek-bar { display: flex; }
.nseek {
  pointer-events: auto;
  background: rgba(8, 10, 16, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.nseek:active { transform: scale(0.94); }
.srv-btn.dead { opacity: 0.42; }
.srv-btn.dead .srv-name { text-decoration: line-through; }
.nx-card {
  position: absolute;
  right: 16px;
  bottom: 74px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 250px;
  max-width: min(340px, 70%);
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-hi);
  background: var(--glass);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-2);
}
.nx-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
}
.nx-title { font-size: 0.94rem; font-weight: 700; line-height: 1.3; }
.nx-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.nx-count {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.nx-now, .nx-cancel {
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease);
}
.nx-now { background: var(--grad-accent); border-color: transparent; }
.nx-now:hover, .nx-cancel:hover { transform: translateY(-1px); border-color: var(--line-hi); }
#videoPlayer {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 4px;
  flex-wrap: wrap;
}
.player-title { font-weight: 700; font-size: 1.04rem; min-width: 0; flex: 1; letter-spacing: -0.01em; }
.player-bar-actions { display: flex; gap: 8px; }
.player-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(70, 211, 105, 0.45);
  background: rgba(70, 211, 105, 0.12);
  color: var(--accent2);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.player-dl-btn:hover {
  background: rgba(70, 211, 105, 0.24);
  border-color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(70, 211, 105, 0.22);
}
.server-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 14px 0 9px;
}

/* ---------- Download picker modal ---------- */
.dl-modal { max-width: 560px; }
.dl-head { padding: 22px 56px 4px 24px; }
.dl-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.dl-sub { color: var(--accent2); font-size: 0.84rem; font-weight: 600; margin-top: 6px; }
.dl-modal .server-list { padding: 14px 24px 24px; }
.dl-modal .srv-btn {
  width: 100%;
  justify-content: space-between;
  padding: 13px 18px;
  border-radius: 12px;
}
.dl-modal .srv-btn:hover {
  border-color: rgba(70, 211, 105, 0.65);
  background: rgba(70, 211, 105, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.server-list { display: flex; flex-wrap: wrap; gap: 9px; }
.srv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd3e4;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.srv-btn:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  transform: translateY(-2px);
}
.srv-btn.active {
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.32), rgba(229, 9, 20, 0.14));
  border-color: rgba(229, 9, 20, 0.8);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.3);
}
.srv-q {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #a8b6d6;
}
.srv-btn.active .srv-q { background: rgba(255, 255, 255, 0.2); color: #fff; }
.srv-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.srv-sub {
  max-width: 330px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srv-btn.active .srv-sub { color: rgba(255, 255, 255, 0.75); }
.srv-btn.dead .srv-sub { text-decoration: none; }
@media (max-width: 720px) {
  .srv-sub { max-width: 200px; }
}

.error-box {
  background: linear-gradient(135deg, rgba(92, 31, 42, 0.55), rgba(42, 18, 24, 0.7));
  border: 1px solid rgba(255, 77, 94, 0.4);
  color: #ff9dab;
  padding: 13px 17px;
  border-radius: 12px;
  margin: 12px 26px 22px;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Detail page: hero ---------- */
.detail-view { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dv-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: -6px -6px 0;
  min-height: 380px;
  border: 1px solid var(--line-hi);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.dv-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  filter: blur(26px) saturate(1.25);
  transform: scale(1.08);
  opacity: 0.55;
}

.dv-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 13, 0.96) 0%, rgba(7, 8, 13, 0.84) 45%, rgba(7, 8, 13, 0.55) 100%),
    linear-gradient(0deg, rgba(7, 8, 13, 1) 0%, rgba(7, 8, 13, 0) 45%);
}

.dv-hero-inner {
  position: relative;
  padding: 22px 36px 36px;
}

.dv-back {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.dv-back:hover {
  border-color: rgba(229, 9, 20, 0.65);
  background: rgba(229, 9, 20, 0.22);
  transform: translateX(-3px);
}

.dv-content {
  display: flex;
  gap: 34px;
  align-items: flex-end;
}

.dv-poster-wrap {
  flex-shrink: 0;
  perspective: 600px;
}
.dv-poster {
  width: 225px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 28px 66px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 54px rgba(229, 9, 20, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1c2233;
  transform: rotateY(-4deg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.dv-poster:hover {
  transform: rotateY(0deg) translateY(-4px);
  box-shadow:
    0 34px 78px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 64px rgba(229, 9, 20, 0.28);
}

.dv-info { flex: 1; min-width: 0; padding-bottom: 6px; }

.dv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge.type { background: var(--grad-accent); color: #fff; box-shadow: 0 6px 18px rgba(229, 9, 20, 0.4); }
.badge.unified { background: rgba(110, 168, 255, 0.16); color: #6ea8ff; border: 1px solid rgba(110, 168, 255, 0.45); }
.badge.rating { background: rgba(70, 211, 105, 0.16); color: var(--accent2); border: 1px solid rgba(70, 211, 105, 0.4); }
.badge.imdb { background: rgba(245, 197, 66, 0.16); color: #f5c542; border: 1px solid rgba(245, 197, 66, 0.42); }
.badge.tag { background: rgba(255, 255, 255, 0.08); color: #cbd3e4; border: 1px solid rgba(255, 255, 255, 0.14); font-weight: 500; text-transform: none; letter-spacing: 0.01em; }

.dv-title {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 30%, #c4cee2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
}

.dv-sub {
  color: var(--accent2);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 14px;
  min-height: 1.2em;
}

.dv-synopsis {
  color: #b3bcd0;
  line-height: 1.65;
  font-size: 0.97rem;
  max-width: 760px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.dv-synopsis.collapsed { -webkit-line-clamp: 3; }

.dv-syn-toggle {
  background: none;
  border: none;
  color: #6ea8ff;
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 14px;
  transition: color 0.2s;
}
.dv-syn-toggle:hover { color: #9cc4ff; text-decoration: underline; }

.dv-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn-play {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #d9e0ee);
  color: #0b0e13;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}
.btn-play:hover {
  transform: translateY(-3px);
  filter: brightness(1.03);
  box-shadow: 0 18px 44px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-play:active { transform: translateY(0); }
.btn-play.red {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 12px 32px rgba(229, 9, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-play.red:hover { box-shadow: 0 18px 46px rgba(229, 9, 20, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* ---------- Detail page: links / episodes ---------- */
.dv-main { padding: 32px 6px 44px; }

.dv-section-title {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 28px 0 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.dv-section-title::before {
  content: "";
  width: 5px;
  height: 22px;
  background: var(--grad-accent);
  border-radius: 3px;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.7);
}

.link-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), rgba(17, 21, 32, 0.8);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px 19px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.22s, transform 0.22s var(--ease), box-shadow 0.22s;
}
.link-block:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.link-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.link-block-head h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #e6ebf5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-badge {
  flex-shrink: 0;
  background: rgba(70, 211, 105, 0.14);
  border: 1px solid rgba(70, 211, 105, 0.45);
  color: var(--accent2);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 9px; }

.btn {
  padding: 10px 19px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn:hover {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.btn.primary {
  background: var(--grad-accent);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn.primary:hover { box-shadow: 0 14px 32px rgba(229, 9, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* ---- File card list (watch options directLinks) ---- */
.file-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(13, 17, 26, 0.85);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.24s var(--ease), box-shadow 0.24s;
  position: relative;
  overflow: hidden;
}
.file-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.24s;
}
.file-card:hover {
  border-color: rgba(229, 9, 20, 0.55);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.16);
}
.file-card:hover::before { opacity: 1; }
.fc-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(229, 9, 20, 0.16);
  border: 1px solid rgba(229, 9, 20, 0.32);
  color: var(--accent);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
}
.file-card:hover .fc-icon {
  background: rgba(229, 9, 20, 0.3);
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.35);
}
.fc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fc-name {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: #d4daf0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.fc-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}
.fc-ext {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6b7a99;
  background: rgba(107,122,153,0.12);
  border: 1px solid rgba(107,122,153,0.25);
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.fc-quality {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent2);
  background: rgba(70,211,105,0.1);
  border: 1px solid rgba(70,211,105,0.3);
  padding: 2px 8px;
  border-radius: 4px;
}
.fc-arrow {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: #3a4562;
  transition: color 0.18s, transform 0.18s;
}
.file-card:hover .fc-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Episodes grid */
.season-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.season-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 19px;
  border-radius: 11px;
  border: 1px solid var(--line-hi);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.season-tab:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
  transform: translateY(-2px);
}
.season-tab.active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(229, 9, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.season-tab.active .q-badge {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.season-tab.combo-tab {
  border-color: rgba(251,191,36,0.45);
  color: #fbbf24;
}
.season-tab.combo-tab:hover { border-color: #fbbf24; color: #fcd34d; }
.season-tab.combo-tab.active {
  background: rgba(251,191,36,0.16);
  border-color: #fbbf24;
  color: #fcd34d;
}
.season-tab.combo-tab .season-epcount {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.4);
}
.season-tab.combo-tab.active .season-epcount {
  color: #fcd34d;
  border-color: rgba(251,191,36,0.6);
  background: rgba(251,191,36,0.12);
}

.btn-row.big { gap: 10px; }
.btn.big { padding: 12px 26px; font-size: 0.95rem; }

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.ep-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(16, 20, 31, 0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.18s, transform 0.22s var(--ease), background 0.18s, box-shadow 0.22s;
  overflow: hidden;
}
.ep-card:hover {
  border-color: rgba(229, 9, 20, 0.55);
  background: linear-gradient(180deg, rgba(229, 9, 20, 0.1), rgba(229, 9, 20, 0.02)), rgba(18, 23, 35, 0.95);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

.ep-thumb {
  position: relative;
  width: 74px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0d111a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #4a5570;
  background: linear-gradient(135deg, #131826, #0d111a);
}
.ep-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  z-index: 2;
}
.ep-src-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(110,168,255,0.85);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  z-index: 2;
}
.ep-provs {
  font-size: 0.72rem;
  color: #8ab8ff;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.src-picker-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.player-error {
  width: 100%;
  font-size: 0.95rem;
  color: #ff9aa6;
  padding: 8px 0;
  margin-bottom: 6px;
}
.srv-btn.unified-auto {
  background: rgba(110,168,255,0.14);
  border-color: rgba(110,168,255,0.5);
  color: #8ab8ff;
}
.srv-btn.unified-auto:hover { background: rgba(110,168,255,0.24); }
.ep-thumb .ep-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.ep-card:hover .ep-thumb .ep-play { opacity: 1; }

.ep-body { min-width: 0; }
.ep-title {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #dfe4f0;
}
.ep-desc {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-cta { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 1rem; flex-shrink: 0; }

.dv-empty { color: var(--muted); text-align: center; padding: 30px 0; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .search-wrap { order: 3; max-width: 100%; width: 100%; }
  .hero, .hero-inner { min-height: 300px; }
  .hero-inner { padding: 22px 18px 30px; gap: 16px; }
  .hero-poster { width: 106px; }
  .hero-dots { bottom: 12px; right: 14px; }
  .hero-actions { margin-top: 14px; }
  .dv-content { flex-direction: column; align-items: center; text-align: center; }
  .dv-poster { width: 170px; transform: none; }
  .dv-badges, .dv-actions { justify-content: center; }
  .dv-hero-inner { padding: 16px 16px 26px; }
  .ep-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .hero-poster-wrap { display: none; }
  .hero, .hero-inner { min-height: 250px; }
  .hero-inner { padding: 20px 16px 30px; }
}

/* ---------- Admin ---------- */
.admin-view { animation: fadeIn 0.2s ease; }

.adm-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  align-items: start;
}

.adm-side {
  position: sticky;
  top: 86px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 380px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.adm-logo { font-size: 1.15rem; font-weight: 900; padding: 0 8px; letter-spacing: -0.02em; }
.adm-logo span { color: var(--accent); }

.adm-nav { display: flex; flex-direction: column; gap: 4px; }
.adm-nav button {
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.94rem;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.18s, color 0.18s, transform 0.2s var(--ease);
}
.adm-nav button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); transform: translateX(2px); }
.adm-nav button.active {
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.24), rgba(229, 9, 20, 0.08));
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.35);
}
.adm-nav-section {
  padding: 14px 14px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  user-select: none;
}
.adm-nav-section-18 { color: #e5161e; opacity: 0.9; }


.adm-side-foot { margin-top: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 8px; }
.adm-side-foot a { color: var(--muted); text-decoration: none; font-size: 0.86rem; }
.adm-side-foot a:hover { color: var(--text); }

.adm-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: #151b29; border: 1px solid #232b3d; border-radius: 10px;
  margin: 0 2px;
}
.adm-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.adm-user-info { min-width: 0; }
.adm-user-info b { display: block; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user-info small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 130px; }

.adm-logout {
  background: transparent; border: 1px solid #3a2530; color: #ff8f9d;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 0.84rem; width: 100%;
}
.adm-logout:hover { background: rgba(229,9,20,0.12); border-color: var(--accent); }

.adm-inline-form { display: flex; gap: 10px; margin-top: 12px; }
.adm-inline-form input {
  flex: 1; max-width: 320px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid #2a3245; background: #0e1219; color: var(--text);
}
.adm-form-sm { display: grid; gap: 8px; max-width: 380px; margin-top: 10px; }
.adm-form-sm label { font-size: 0.86rem; color: var(--muted); }
.adm-form-sm input {
  padding: 9px 12px; border-radius: 8px; border: 1px solid #2a3245;
  background: #0e1219; color: var(--text);
}
.adm-form-sm .adm-btn { margin-top: 6px; justify-self: start; }

/* ---------- Auth screens ---------- */
.auth-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 20px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.9);
  border: 1px solid var(--line-hi); border-radius: 20px;
  padding: 34px 32px;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.auth-logo {
  font-size: 1.45rem; font-weight: 900; margin-bottom: 18px; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 25%, #aeb9d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-logo span {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-card h2 { font-size: 1.25rem; margin-bottom: 6px; letter-spacing: -0.02em; }
.auth-hint { color: var(--muted); font-size: 0.86rem; margin-bottom: 20px; }
.auth-card form { display: grid; gap: 8px; }
.auth-card label { font-size: 0.82rem; color: var(--muted); margin-top: 6px; font-weight: 600; letter-spacing: 0.01em; }
.auth-card input {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.28); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-card input:focus {
  border-color: rgba(229, 9, 20, 0.65);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.14);
}
.auth-btn {
  margin-top: 18px; padding: 13px; border: none; border-radius: 11px;
  background: var(--grad-accent); color: #fff; font-size: 0.98rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 26px rgba(229, 9, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}
.auth-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(229, 9, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.32); }

.adm-main { min-width: 0; }
.adm-h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 16px; }
.adm-h1row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-count { color: var(--muted); font-size: 1rem; font-weight: 500; }
.adm-actions { display: flex; gap: 10px; }
.adm-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }

/* ---------- Admin: genres report ---------- */
.gen-table {
  background: rgba(15, 19, 29, 0.8);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.gen-head, .gen-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) 90px minmax(200px, 2fr) 70px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
}
.gen-head {
  background: #161b28;
  border-bottom: 1px solid #232b3d;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.gen-row { border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.gen-row:last-child { border-bottom: none; }
.gen-row:hover { background: rgba(255, 255, 255, 0.04); }
.gen-row.shared .gen-c-title b { color: #fff; }
.gen-c-list { display: flex; flex-wrap: wrap; gap: 5px; }
.gen-c-act { text-align: right; }
.gen-count {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 10px;
  background: #1d2433;
  border: 1px solid #2f3950;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
}
.gen-count.multi {
  background: rgba(70, 211, 105, 0.14);
  border-color: rgba(70, 211, 105, 0.45);
  color: var(--accent2);
}
@media (max-width: 720px) {
  .gen-head { display: none; }
  .gen-row { grid-template-columns: 1fr; gap: 6px; }
  .gen-c-act { text-align: left; }
}
.adm-hint.inline { margin: 0; align-self: center; }
.adm-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.adm-toolbar select {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #2a3245;
  background: var(--bg2);
  color: var(--text);
  max-width: 280px;
}

.adm-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}
.adm-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(229, 9, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.adm-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.adm-btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.adm-btn.ghost:hover { border-color: rgba(229, 9, 20, 0.5); background: rgba(229, 9, 20, 0.12); box-shadow: none; }
.adm-btn.danger { background: linear-gradient(135deg, #7a2433, #5c1f2a); box-shadow: 0 8px 20px rgba(92, 31, 42, 0.4); }
.adm-btn.danger:hover { background: linear-gradient(135deg, #93293d, #6d2331); }

.adm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.adm-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), rgba(17, 21, 32, 0.85);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
.adm-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.adm-card-num {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, #b6c1d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adm-card-num span { font-size: 1rem; color: var(--muted); font-weight: 500; }
.adm-card-label { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

.adm-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.8);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 19px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.adm-panel h3 { font-size: 1rem; margin-bottom: 6px; }
.adm-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #1c2230;
  font-size: 0.92rem;
}
.adm-row:last-child { border-bottom: none; }
.adm-row span { color: var(--muted); }
.adm-link { color: #6ea8ff; text-decoration: none; }
.adm-link:hover { text-decoration: underline; }
.mono { font-family: Consolas, monospace; font-size: 0.82rem; }
.ok-text { color: var(--accent2); }
.warn-text { color: #f5c542; }

.adm-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 19, 29, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.adm-tr {
  display: grid;
  grid-template-columns: 70px 46px 1fr 70px 90px 40px 60px 80px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #1a2030;
  font-size: 0.9rem;
}
.adm-tr:last-child { border-bottom: none; }
.adm-tr:hover { background: #151b29; }
.adm-tr.is-off { opacity: 0.45; }

/* Per-table column layouts — the 8-col default above is for the providers
   registry; every other table sets its own track count to match its cells. */
.adm-tr.lib-row    { grid-template-columns: 1fr 120px 40px; }
.adm-tr.pay-row    { grid-template-columns: 1fr 110px 100px 170px; }
.adm-tr.pkg-row    { grid-template-columns: 1fr 110px 90px 52px 40px; }
.adm-tr.coupon-row { grid-template-columns: 1fr 80px 70px 120px 52px 90px; }
.adm-tr.uh-row     { grid-template-columns: 1fr 60px 60px 70px 90px 1.2fr; }
.adm-tr.sync-row   { grid-template-columns: 1fr 80px 70px 1.2fr; }
.adm-tr.tp-post    { grid-template-columns: 1fr auto; }
.adm-tr.cnc-row    { grid-template-columns: 1fr 140px 56px; }

/* Single-cell empty-state rows ("No payments yet", "No packages yet", …) must
   span the full grid so the text isn't trapped in the first narrow track. */
.adm-tr > .adm-td:only-child { grid-column: 1 / -1; }

/* Billing settings: pair up short number fields into two columns. */
.adm-panel .adm-field-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* Collapsible sections (telegram message texts). */
.adm-details {
  margin: 12px 0;
  border: 1px solid #2f3950;
  border-radius: 10px;
  background: #171d2a;
}
.adm-details > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #cdd8ef;
  user-select: none;
}
.adm-details[open] > summary { border-bottom: 1px solid #2f3950; }
.adm-details .adm-field { margin: 12px 14px; }
.adm-details textarea { margin-bottom: 6px; }
@media (max-width: 720px) {
  .adm-panel .adm-field-grid2 { grid-template-columns: 1fr; }
}
.adm-td.icon img, .adm-td.icon .noicon {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: #202839; font-weight: 800; color: #9fb0d0;
}
.adm-td.name b { display: block; font-size: 0.9rem; }
.adm-td.name small { color: var(--muted); }
.adm-td .arr {
  background: #1d2433; border: 1px solid #2f3950; color: var(--text);
  width: 24px; height: 22px; border-radius: 5px; cursor: pointer; font-size: 0.62rem;
}
.adm-td .arr:disabled { opacity: 0.3; cursor: not-allowed; }
.adm-td.order { display: flex; gap: 4px; }
.type-pill {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 10px;
  background: #202839; color: #9fb0d0; text-transform: capitalize;
}
.type-pill.global { color: #7ec8ff; }
.type-pill.anime { color: #d79bff; }
.type-pill.india { color: #ffc36b; }
.type-pill.english { color: #8dffb0; }
.type-pill.stremio { color: #ff9d5c; }

/* Stremio sources table (admin) */
.adm-tr.st-row { grid-template-columns: 46px 1fr 64px 92px 52px 74px 56px; }
.st-url {
  flex: 1; min-width: 240px;
  background: #1d2433; border: 1px solid #2f3950; color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 0.88rem;
}
.st-url:focus { outline: none; border-color: var(--accent); }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { display: none; }
.switch span {
  position: absolute; inset: 0; background: #2a3245; border-radius: 20px; cursor: pointer; transition: 0.2s;
}
.switch span::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.switch input:checked + span { background: var(--accent2); }
.switch input:checked + span::before { transform: translateX(18px); }

.adm-form { display: grid; gap: 14px; max-width: 640px; }
.adm-field {
  background: var(--bg2); border: 1px solid #232b3d; border-radius: 12px; padding: 14px 16px;
}
.adm-field label { font-weight: 600; font-size: 0.94rem; display: block; margin-bottom: 4px; }
.adm-field label small { color: var(--muted); font-weight: 400; margin-left: 8px; }
.fdesc { color: var(--muted); font-size: 0.82rem; margin-bottom: 10px; }
.adm-field input[type="text"], .adm-field input[type="number"], .adm-field select {
  width: 100%;
  padding: 9px 12px; border-radius: 8px; border: 1px solid #2a3245;
  background: #0e1219; color: var(--text);
}
.ms-box { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ms-item { font-size: 0.9rem; color: #c8d0e0; display: flex; gap: 6px; align-items: center; }

.adm-btn.tiny { padding: 4px 10px; font-size: 0.75rem; border-radius: 6px; }

/* ---------- Site settings (admin) + public banner ---------- */
.adm-switch {
  width: auto !important; height: auto !important;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px; color: #d7dce8; font-weight: 600; position: relative;
}
.adm-panel textarea {
  width: 100%;
  padding: 9px 12px; border-radius: 8px; border: 1px solid #2a3245;
  background: #0e1219; color: var(--text);
  font: inherit; resize: vertical; margin-bottom: 10px;
}
.adm-panel input[type="text"] {
  width: 100%;
  padding: 9px 12px; border-radius: 8px; border: 1px solid #2a3245;
  background: #0e1219; color: var(--text); margin-bottom: 10px;
}
.adm-panel h3 { margin-top: 0; }
.adm-panel .adm-field { max-width: 520px; background: transparent; border: 0; padding: 0 0 10px; }
.adm-colorwrap { display: inline-flex; align-items: center; gap: 10px; }
.adm-colorwrap input[type="color"] {
  width: 46px; height: 30px; padding: 0; border: 1px solid #2a3245;
  border-radius: 6px; background: #0e1219; cursor: pointer;
}
.adm-keywrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-keywrap code {
  background: #0e1219; border: 1px solid #2a3245; border-radius: 8px;
  padding: 8px 12px; font-size: 0.85rem; word-break: break-all;
}

.site-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  position: relative;
  padding: 9px 44px 9px 14px;
  background: color-mix(in srgb, var(--accent) 16%, #0b0e15);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: #ffe3e5;
  font-size: 0.86rem;
  text-align: center;
}
.site-banner-link { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.site-banner-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #ffb3b7; font-size: 1.25rem; line-height: 1;
  cursor: pointer; padding: 2px 6px;
}
.site-banner-x:hover { color: #fff; }

/* ---------- Watch table ---------- */
.watch-table {
  border: 1px solid #232b3d;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
  margin-top: 12px;
}
.wt-head, .wt-row {
  display: grid;
  grid-template-columns: 84px 96px 1fr 100px minmax(0, 1.6fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.wt-head {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 1px solid #1c2230;
  background: #12161f;
}
.wt-head .wt-right { text-align: right; }
.wt-row { border-bottom: 1px solid #1a2030; font-size: 0.92rem; }
.wt-row:last-child { border-bottom: none; }
.wt-row:hover { background: #151b29; }
.wt-q { font-weight: 800; font-size: 0.95rem; }
.live-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent2);
  background: rgba(70, 211, 105, 0.12);
  border: 1px solid rgba(70, 211, 105, 0.35);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.wt-lang { color: #c8d0e0; }
.wt-size { color: #c8d0e0; font-variant-numeric: tabular-nums; }
.wt-file { min-width: 0; }
.wt-fname {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 500;
  color: #c5ceea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.wt-prov {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #5a6880;
  background: rgba(90,104,128,0.1);
  border: 1px solid rgba(90,104,128,0.2);
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wt-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.wt-play {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(229, 9, 20, 0.4);
  background: rgba(229, 9, 20, 0.14);
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.wt-play:hover {
  background: rgba(229, 9, 20, 0.3);
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.35);
  transform: translateY(-2px);
}
.wt-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease);
}
.wt-dl:hover { border-color: rgba(229, 9, 20, 0.55); background: rgba(229, 9, 20, 0.12); transform: translateY(-2px); }
@media (max-width: 760px) {
  .wt-head { display: none; }
  .wt-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "q status" "lang size" "file file" "act act";
    gap: 6px 12px;
  }
  .wt-q { grid-area: q; }
  .wt-status { grid-area: status; }
  .wt-lang { grid-area: lang; }
  .wt-size { grid-area: size; }
  .wt-file { grid-area: file; }
  .wt-actions { grid-area: act; justify-content: flex-start; }
}

/* ---------- Watch & Stream (tabbed, grouped) ---------- */
.wtv {
  margin-top: 14px; background: rgba(13,17,26,0.72); border: 1px solid #202a3d;
  border-radius: 14px; padding: 14px; backdrop-filter: blur(6px);
}
.wtv-warn {
  display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; line-height: 1.5;
  background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.35);
  color: #f5e7c4; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.wtv-warn b { color: #fbbf24; }
.wtv-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.wtv-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 10px; border: 1px solid #2a3245; background: #10151f;
  color: var(--muted); font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: all 0.15s ease;
}
.wtv-tab:hover { border-color: #3a4560; color: var(--text); }
.wtv-tab.active { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.55); color: #4ade80; }
.wtv-count {
  background: #e50914; color: #fff; font-size: 0.74rem; font-weight: 800;
  border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.wtv-tab.active .wtv-count { background: #22c55e; }
.wtv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wtv-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid #2a3245;
  background: #10151f; color: var(--muted); font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.wtv-chip:hover { border-color: #3a4560; color: var(--text); }
.wtv-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.wtv-group {
  display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.12em; color: var(--muted); margin: 16px 0 8px;
}
.wtv-group::after { content: ""; flex: 1; height: 1px; background: #1e2636; }
.wtv-gcount {
  background: #1a2233; border: 1px solid #2a3245; color: var(--muted);
  font-size: 0.7rem; border-radius: 999px; padding: 0 8px;
}
.wtv-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 12px; border: 1px solid #1c2434; border-radius: 12px;
  background: #0f141e; margin-bottom: 8px; transition: border-color 0.15s ease;
}
.wtv-row:hover { border-color: #2e3a52; background: #121826; }
.wtv-badges { display: flex; gap: 6px; flex-wrap: wrap; max-width: 210px; }
.wtv-q, .wtv-lang, .wtv-fmt {
  font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 6px;
  white-space: nowrap; letter-spacing: 0.03em;
}
.wtv-q { background: rgba(34,197,94,0.16); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.wtv-lang { background: rgba(148,163,184,0.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.wtv-fmt { background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); }
.wtv-file { min-width: 0; }
.wtv-fname {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wtv-prov { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.wtv-act { display: flex; gap: 8px; align-items: center; }
.wtv-stream, .wtv-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 17px;
  border-radius: 11px; font-weight: 800; font-size: 0.86rem; cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent; transition: all 0.2s var(--ease); white-space: nowrap;
}
.wtv-stream {
  background: linear-gradient(135deg, #3ddb77, #1f9d4d);
  color: #05200f;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wtv-stream:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.wtv-dl { background: rgba(255, 255, 255, 0.05); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.14); }
.wtv-dl:hover { border-color: rgba(229, 9, 20, 0.6); color: #fff; background: rgba(229, 9, 20, 0.14); transform: translateY(-2px); }
@media (max-width: 760px) {
  .wtv-row { grid-template-columns: 1fr; gap: 8px; }
  .wtv-badges { max-width: none; }
  .wtv-act { justify-content: flex-start; }
}

/* ---------- Native Movie Files Layout (No Clunky Boxes) ---------- */
.movie-files-container {
  margin-top: 24px;
  width: 100%;
}

.movie-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.movie-files-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.movie-files-title {
  font-size: 1.28rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.movie-files-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--accent);
  border-radius: 4px;
}

.movie-files-status {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.movie-files-warning {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.movie-files-warning .warn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  flex-shrink: 0;
}

/* File list container: completely open, flows down the page without inner scroll */
.movie-files-list,
.dl-prog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.dl-prog {
  margin-top: 16px;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.dl-prog-head {
  display: none !important;
}

/* Loader */
.dl-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  justify-content: flex-start;
}

.dl-spinner {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dlSpin 0.7s linear infinite;
}

@keyframes dlSpin {
  to { transform: rotate(360deg); }
}

.dl-loading-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dl-loading-main {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.dl-loading-sub {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Individual File Card: compact & modern dark frosted glass card */
.dl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(18, 24, 38, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 0;
  animation: dlRowIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.18s var(--ease);
}

.dl-row:hover {
  background: rgba(26, 34, 52, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.45);
}

@keyframes dlRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.dl-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}

.dl-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dl-name {
  font-size: 0.84rem;
  font-weight: 500;
  color: #f1f5f9;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.dl-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.dl-q {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.dl-type {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(99, 102, 241, 0.13);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  white-space: nowrap;
}

.dl-stream-only {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  white-space: nowrap;
  letter-spacing: 0.4px;
}

.dl-retry-wrap {
  display: flex;
  justify-content: center;
  padding: 12px;
}

.dl-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  transition: all 0.15s ease;
}

.dl-retry:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
}

.dl-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.dl-stream, .dl-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}

.dl-stream {
  border-color: transparent;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}

.dl-stream:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(34, 197, 94, 0.42);
}

.dl-go {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.dl-go:hover {
  border-color: transparent;
  color: #fff;
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

@media (max-width: 768px) {
  .movie-files-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dl-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 10px;
  }
  .dl-meta {
    width: 100%;
  }
  .dl-name {
    font-size: 0.82rem;
  }
  .dl-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
  }
  .dl-stream, .dl-go {
    flex: 1;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.74rem;
  }
  .ep-files {
    padding: 8px 8px 8px 16px;
  }
  .ep-files::before {
    left: 8px;
  }
}

/* ---------- Series: season count + episode meta ---------- */
.season-epcount {
  font-size: 0.7rem; font-weight: 800; color: var(--muted);
  background: #161d2c; border: 1px solid #2a3245; border-radius: 999px; padding: 1px 8px;
}
.season-tab.active .season-epcount { color: #cbd5e1; border-color: #3a4560; }
.ep-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ep-q {
  font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 6px;
  background: rgba(34,197,94,0.14); color: #4ade80; border: 1px solid rgba(34,197,94,0.35);
}
.ep-provs-chip {
  font-size: 0.72rem; color: var(--muted); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Series: Distinct Episode Header vs Nested Child Files ---------- */
.ep-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

/* Parent Episode Card */
.ep-item {
  background: #141926;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.18s var(--ease);
}
.ep-item:hover {
  background: #161d2b;
  border-color: rgba(255, 255, 255, 0.15);
}
.ep-item.open {
  border-color: rgba(229, 9, 20, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* Compact, distinct Episode Header */
.ep-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 14px; /* Sleek compact height */
  cursor: pointer;
  color: #fff;
  font: inherit;
  transition: background 0.15s ease;
}
.ep-head:hover {
  background: rgba(255, 255, 255, 0.03);
}
.ep-item.open .ep-head {
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Vibrant Episode Indicator Pill */
.ep-num-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.35));
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.ep-head-info { flex: 1; min-width: 0; }
.ep-head-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-head-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.ep-head-meta .ep-q {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  flex-shrink: 0;
}
.ep-head-meta .ep-provs-chip {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  color: var(--muted);
}
.ep-src-count {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 5px;
}
.ep-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ep-item.open .ep-chevron {
  transform: rotate(180deg);
  color: var(--accent);
  background: rgba(229, 9, 20, 0.15);
}

/* Nested Child Files Container */
.ep-files {
  background: #0a0e17; /* Darker recessed background */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 12px 10px 22px; /* Indented for visual hierarchy */
  position: relative;
}
.ep-files::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.45), rgba(99, 102, 241, 0.08));
  border-radius: 2px;
}

/* Child file cards inside episodes: sleek, compact, visually nested */
.ep-files .dl-row {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(99, 102, 241, 0.4);
  border-radius: 7px;
  padding: 6px 11px;
  margin-bottom: 5px;
  gap: 8px;
}
.ep-files .dl-row:last-child {
  margin-bottom: 0;
}
.ep-files .dl-row:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: #6366f1;
  transform: translateX(2px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.ep-files .dl-num {
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
}
.ep-files .dl-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: #e2e8f0;
}
.ep-files .dl-stream,
.ep-files .dl-go {
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 6px;
}
.ep-file {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 52px; border-bottom: 1px solid #1a2130;
}
.ep-file:last-child { border-bottom: 0; }
.ep-file-info { flex: 1; min-width: 0; }
.ep-file-name {
  font-size: 0.85rem; color: #dfe4f0; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-file-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.ep-file-prov { font-size: 0.72rem; color: #8ab8ff; font-weight: 600; }
.ep-file-size { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.ep-file-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ep-file-stream, .ep-file-dl {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
  border-radius: 10px; font-weight: 800; font-size: 0.8rem; cursor: pointer;
  font-family: inherit;
  border: 1px solid; transition: all 0.2s var(--ease); white-space: nowrap;
}
.ep-file-stream {
  border-color: transparent;
  background: linear-gradient(135deg, #3ddb77, #1f9d4d);
  color: #05200f;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ep-file-stream:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34, 197, 94, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ep-file-dl {
  border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #cbd5e1;
}
.ep-file-dl:hover { border-color: rgba(229, 9, 20, 0.6); color: #fff; background: rgba(229, 9, 20, 0.14); transform: translateY(-2px); }
@media (max-width: 640px) {
  .ep-file { flex-wrap: wrap; padding-left: 14px; }
  .ep-file-info { flex-basis: 100%; }
  .ep-file-actions { margin-left: auto; }
  .ep-file-stream, .ep-file-dl { padding: 6px 10px; font-size: 0.74rem; }
}
.ep-dl {
  align-self: center; flex: 0 0 auto; padding: 8px 11px; border-radius: 9px;
  background: #10151f; border: 1px solid #2e3a52; color: #cbd5e1;
  font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease;
}
.ep-dl:hover { border-color: var(--accent); color: #fff; }

/* ---------- Provider tester ---------- */
.tp-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.tp-row { display: grid; gap: 4px; flex: 1; min-width: 220px; }
.tp-row.narrow { flex: 0 0 130px; min-width: 130px; }
.tp-row label { font-size: 0.82rem; color: var(--muted); }
.tp-row label small { opacity: 0.7; font-weight: 400; }
.tp-row input, .tp-row select {
  padding: 9px 12px; border-radius: 8px; border: 1px solid #2a3245;
  background: #0e1219; color: var(--text); font-size: 0.9rem; outline: none; width: 100%;
}
.tp-row input:focus, .tp-row select:focus { border-color: var(--accent); }

.chain-head { margin-bottom: 12px; }
.chain-head h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.chain-meta { color: var(--muted); font-size: 0.88rem; }
.chain-steps { display: grid; gap: 6px; }
.chain-step {
  border: 1px solid #232b3d; border-radius: 10px; overflow: hidden; background: #12161f;
}
.chain-step.ok { border-left: 3px solid var(--accent2); }
.chain-step.fail { border-left: 3px solid #ff4d5e; }
.chain-step-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  font-size: 0.9rem; flex-wrap: wrap;
}
.chain-step-head:hover { background: #161b28; }
.chain-step-head b { min-width: 110px; }
.step-ok { color: var(--accent2); font-weight: 800; }
.step-fail { color: #ff4d5e; font-weight: 800; }
.step-ms { color: var(--muted); font-family: Consolas, monospace; font-size: 0.8rem; min-width: 54px; text-align: right; }
.step-sum { color: #b8c4dd; flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-caret { color: var(--muted); }
.step-body { margin: 0; border-radius: 0; border: none; border-top: 1px solid #1c2230; max-height: 300px; overflow: auto; }
.step-pill {
  font-size: 0.75rem; font-weight: 800; padding: 3px 12px; border-radius: 10px; letter-spacing: 0.5px;
}
.step-pill.pass { background: rgba(70, 211, 105, 0.15); color: var(--accent2); }
.step-pill.fail { background: rgba(255, 77, 94, 0.15); color: #ff4d5e; }
.tp-post:hover { background: #151b29; }

.adm-code {
  background: #0d111a; border: 1px solid #232b3d; border-radius: 8px;
  padding: 12px 14px; margin-top: 12px; font-size: 0.8rem; color: #9fb0d0;
  max-height: 260px; overflow: auto; white-space: pre-wrap;
}
.adm-loading { color: var(--muted); padding: 30px 0; text-align: center; }

.adm-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px);
  background: linear-gradient(180deg, rgba(28, 36, 54, 0.96), rgba(16, 20, 31, 0.96));
  border: 1px solid var(--line-hi); color: var(--text);
  padding: 12px 24px; border-radius: 12px; font-size: 0.92rem; font-weight: 600;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0; transition: 0.28s var(--ease); z-index: 400; pointer-events: none;
}
.adm-toast.show { opacity: 1; transform: translate(-50%, 0); }
.adm-toast.ok { border-color: rgba(70, 211, 105, 0.55); box-shadow: var(--sh-2), 0 0 26px rgba(70, 211, 105, 0.18); }
.adm-toast.err { border-color: rgba(229, 9, 20, 0.6); color: #ff9dab; box-shadow: var(--sh-2), 0 0 26px rgba(229, 9, 20, 0.2); }

@media (max-width: 860px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-side { position: static; min-height: 0; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; }
  .adm-tr { grid-template-columns: 56px 40px 1fr 54px 50px; }
  .adm-td.type, .adm-td.settings { display: none; }
  .adm-tr.st-row { grid-template-columns: 40px 1fr 50px 68px 50px; }
  .st-row .st-opt { display: none; }
}

/* ---------- Header auth ---------- */
.auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.hdr-btn {
  padding: 10px 19px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, transform 0.2s var(--ease), box-shadow 0.2s;
  white-space: nowrap;
}
.hdr-btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}
.hdr-btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.hdr-btn.solid {
  background: var(--grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hdr-btn.solid:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(229, 9, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.32); }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease);
}
.user-chip:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}
.user-chip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff5a3c);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}
.user-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.user-chip-admin {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(229,9,20,0.2);
  color: #ff7a86;
  border: 1px solid rgba(229,9,20,0.4);
}
.user-chip-caret { color: var(--muted); font-size: 0.7rem; }

.user-chip-prof-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.user-chip-prof-tag.is-18 {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.um-switch-section {
  padding: 8px 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.um-switch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  padding: 0 4px;
}
.um-manage-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.um-manage-link:hover { text-decoration: underline; }
.um-switch-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.um-pchip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.16s var(--ease);
}
.um-pchip:hover {
  background: rgba(255, 255, 255, 0.06);
}
.um-pchip.active {
  background: rgba(229, 9, 20, 0.14);
  border-color: rgba(229, 9, 20, 0.3);
  font-weight: 700;
}
.um-pchip-av {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: hsl(var(--h, 210) 55% 42%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}
.um-pchip-av.add {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
}
.um-pchip-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.um-pchip-18 {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: #ff5252;
  color: #fff;
}
.um-pchip-check {
  color: var(--accent2);
  font-weight: 800;
  font-size: 0.82rem;
}
.um-pchip.add-pchip {
  color: var(--muted);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
}
.um-pchip.add-pchip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.user-menu {
  position: fixed;
  z-index: 300;
  min-width: 240px;
  background: linear-gradient(180deg, rgba(22, 27, 40, 0.97), rgba(13, 17, 26, 0.97));
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--sh-3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeIn 0.18s var(--ease);
}
.user-menu-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #1c2230;
  margin-bottom: 6px;
}
.user-menu-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff5a3c);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-menu-head b { display: block; font-size: 0.95rem; }
.user-menu-head small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-pill {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.role-pill.admin { background: rgba(229,9,20,0.18); color: #ff7a86; border: 1px solid rgba(229,9,20,0.4); }
.role-pill.user { background: rgba(70,211,105,0.14); color: var(--accent2); border: 1px solid rgba(70,211,105,0.4); }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.16s, transform 0.2s var(--ease), color 0.16s;
}
.user-menu-item:hover { background: rgba(255, 255, 255, 0.07); transform: translateX(2px); }
.user-menu-item.danger { color: #ff9aa6; }
.user-menu-item.danger:hover { background: rgba(229, 9, 20, 0.16); }

/* ---------- Auth modal ---------- */
.auth-modal { max-width: 420px; }
.auth-modal-inner { padding: 30px 28px 28px; }
.auth-modal .auth-logo { margin-bottom: 16px; }

.auth-tabs {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.auth-tab.active {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.auth-tab:not(.active):hover { color: var(--text); }

.auth-form { display: grid; gap: 6px; }
.auth-form label { font-size: 0.82rem; color: var(--muted); margin-top: 8px; font-weight: 600; }
.auth-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-form input:focus {
  border-color: rgba(229, 9, 20, 0.65);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.14);
}
.auth-form .auth-btn { margin-top: 14px; }
.auth-form .auth-hint { margin: 12px 0 0; }

@media (max-width: 720px) {
  .user-chip-name { display: none; }
  .user-chip-admin { display: none; }
  .hdr-btn { padding: 8px 12px; font-size: 0.82rem; }
}

/* ---------- 18+ providers (admin) ---------- */
@media (min-width: 861px) {
  .adm-td.type { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
}
.type-pill.adult {
  border: none; cursor: pointer; text-transform: none; font-family: inherit;
  color: #6b7280; background: #1a2130;
}
.type-pill.adult.on {
  color: #ff9d5c; background: rgba(255, 120, 60, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 60, 0.5);
}
.type-pill.user { color: #7ec8ff; }
.type-pill.admin { color: #d79bff; }

/* ---------- Users table (admin) ---------- */
.users-table .adm-tr { grid-template-columns: 1fr 84px 78px 64px 100px 88px auto; gap: 8px; }
.users-table .adm-tr.head {
  background: #111624; color: var(--muted);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.users-table .adm-tr.head:hover { background: #111624; }
.users-table .adm-td.u-name b { display: block; font-size: 0.9rem; }
.users-table .adm-td.u-name small { color: var(--muted); }
.users-table .adm-td.u-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.type-pill.premium { color: #ffd166; background: rgba(255, 209, 102, 0.12); }
.adm-always { color: var(--accent2); font-size: 0.8rem; }
@media (max-width: 860px) {
  .users-table .adm-tr { grid-template-columns: 1fr 74px 60px 84px; }
  .users-table .u-created, .users-table .u-plan, .users-table .u-actions { display: none; }
}

/* ---------- Dashboard: visits chart + activity + upstream health ---------- */
.chart-bars { display: flex; gap: 4px; align-items: flex-end; height: 76px; padding: 6px 2px 0; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.chart-bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--accent), #ff5a3c); border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-col span { font-size: 0.62rem; color: var(--muted); }
.activity-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.activity-row { font-size: 0.82rem; padding: 4px 6px; border-radius: 6px; color: var(--muted); }
.activity-row b { color: var(--text); }
.activity-time { display: inline-block; min-width: 84px; margin-right: 6px; color: var(--muted); }
.uh-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}
.uh-badge.ok { color: var(--accent2); background: rgba(70,211,105,0.14); }
.uh-badge.flaky { color: #ffd166; background: rgba(255,209,102,0.14); }
.uh-badge.down { color: #ff8f9d; background: rgba(229,9,20,0.16); }
.uh-badge.idle { color: var(--muted); background: #1a2130; }
.adm-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; color: var(--muted); cursor: pointer; }

/* ---------- Ads (public injection) ---------- */
.ad-slot { width: 100%; margin: 10px 0 4px; }
.ad-image { border-radius: 10px; overflow: hidden; max-height: 140px; display: block; }
.ad-image img { width: 100%; height: 140px; object-fit: cover; display: block; }
.ad-html { font-size: 0.9rem; }

/* ---------- Premium page (site) ---------- */
.premium-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255, 230, 168, 0.14), rgba(238, 182, 58, 0.08));
  color: var(--gold); font-weight: 700; font-size: 0.86rem; text-decoration: none;
  padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(243, 201, 105, 0.4);
  white-space: nowrap; transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.premium-btn:hover {
  background: linear-gradient(135deg, rgba(255, 230, 168, 0.24), rgba(238, 182, 58, 0.14));
  border-color: rgba(243, 201, 105, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(238, 182, 58, 0.22);
}
/* =========================================================
   Profile Page (/profile)
   ========================================================= */
.profile-page {
  padding: 24px 16px 80px;
  max-width: 1040px;
  margin: 0 auto;
}

/* Hero Header Card */
.profile-hero-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)), rgba(15, 19, 29, 0.9);
  border: 1px solid var(--line-hi);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-hero-card.guest-state {
  text-align: center;
  padding: 48px 24px;
}
.profile-avatar.guest-av {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  font-size: 2.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-hi);
}
.profile-guest-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

.profile-hero-top {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-avatar {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e50914, #8b0000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(229, 9, 20, 0.35);
  flex-shrink: 0;
}

.profile-avatar.vip-glow {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.45);
}

.crown-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.profile-hero-meta {
  flex: 1;
  min-width: 220px;
}

.profile-user-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.profile-user-name {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.profile-user-email {
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-hero-cta {
  margin-left: auto;
}

.hdr-btn.vip-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a0f00;
  font-weight: 800;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.hdr-btn.vip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.5);
  color: #000;
}
.hdr-btn.vip-btn.pulse {
  animation: vipPulse 2.4s infinite ease-in-out;
}
@keyframes vipPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 28px rgba(245, 158, 11, 0.65); transform: translateY(-1px); }
}

.vip-pill {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-weight: 700;
}
.free-pill {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.admin-pill {
  background: rgba(229, 9, 20, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(229, 9, 20, 0.35);
}

/* Stats Row */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-stat-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pstat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
}
.pstat-lbl {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Navigation Tabs */
.profile-nav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 22px;
  scrollbar-width: none;
}
.profile-nav-tabs::-webkit-scrollbar { display: none; }

.ptab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.ptab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.ptab-btn.active {
  color: #ffffff;
  background: rgba(229, 9, 20, 0.2);
  border-color: rgba(229, 9, 20, 0.45);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.2);
}

.profile-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.profile-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.profile-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-panel .panel-header h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.vip-summary-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}
.vip-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.vip-sum-row .label { color: var(--muted); }

.coupon-inline-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.coupon-inline-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.coupon-inline-form input:focus {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}
.coupon-result-msg {
  margin-top: 10px;
  font-size: 0.88rem;
}

.adult-action-wrap { margin-top: 12px; }
.adult-status-active { color: var(--accent2); font-weight: 600; font-size: 0.92rem; }
.adult-status-pending { color: #f59e0b; font-size: 0.9rem; }
.active-profile-pill {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.88rem;
}

.prof-quick-switcher {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.prof-qswitch-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.prof-qswitch-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.prof-qswitch-card.active {
  border-color: rgba(229, 9, 20, 0.5);
  background: rgba(229, 9, 20, 0.1);
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.16);
}
.prof-qswitch-av {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: hsl(var(--h, 210) 55% 42%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
}
.prof-qswitch-18 {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  background: #ff5252;
  color: #fff;
}
.prof-qswitch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.prof-qswitch-name {
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-qswitch-sub {
  font-size: 0.76rem;
  color: var(--muted);
}
.prof-active-badge {
  font-size: 0.75rem;
  padding: 4px 8px;
}
.panel-header-actions {
  display: flex;
  gap: 8px;
}

/* Watchlist & History Media Cards */
.profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.prof-media-card {
  background: rgba(18, 24, 38, 0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.prof-media-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}
.prof-card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  background-size: cover;
  background-position: center;
  background-color: #0c0f17;
}
.prof-type-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}
.prof-progress-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
}
.prof-progress-fill {
  height: 100%;
  background: var(--accent);
}
.prof-card-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.prof-card-title {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}
.prof-card-sub {
  font-size: 0.76rem;
  color: var(--muted);
}
.prof-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

/* Pay Table */
.profile-pay-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}
.profile-pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.profile-pay-table th {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.profile-pay-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.profile-pay-table code {
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.prof-settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.prof-settings-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
  color: var(--muted);
}
.prof-settings-form input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.prof-settings-form input:focus {
  border-color: rgba(229, 9, 20, 0.6);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.14);
}
.danger-panel {
  border-color: rgba(229, 9, 20, 0.35);
}


/* =========================================================
   Redesigned Premium / VIP Page (/premium)
   ========================================================= */
.premium-page-v2 {
  padding: 24px 16px 80px;
  max-width: 1060px;
  margin: 0 auto;
}

/* VIP Hero */
.prem-hero {
  text-align: center;
  padding: 36px 20px 28px;
  max-width: 760px;
  margin: 0 auto 32px;
}
.prem-hero-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.32);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.prem-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 40%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prem-hero-sub {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 18px;
}
.prem-user-strip {
  font-size: 0.9rem;
  color: var(--muted);
}
.prem-login-hint a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* 4-Card Perks Grid */
.prem-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.prem-feature-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  align-items: flex-start;
}
.pfeat-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.pfeat-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pfeat-info b {
  font-size: 0.92rem;
  color: #ffffff;
}
.pfeat-info span {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Section Headings */
.prem-section-heading {
  text-align: center;
  margin-bottom: 22px;
}
.prem-section-heading h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.prem-section-heading p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
.prem-section-heading.compact {
  text-align: left;
  margin-bottom: 16px;
}

/* Pricing Cards */
.prem-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.prem-plan-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(17, 21, 32, 0.9);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.prem-plan-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
.prem-plan-card.highlight {
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 18px 45px rgba(245, 158, 11, 0.15);
}
.prem-plan-card.highlight:hover {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.6), 0 24px 55px rgba(245, 158, 11, 0.25);
}

.prem-floating-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a0f00;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

.prem-plan-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #ffffff;
}
.prem-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.prem-cur {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fbbf24;
}
.prem-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
}
.prem-duration {
  font-size: 0.84rem;
  color: var(--muted);
}

.prem-plan-features {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  color: #cbd5e1;
}
.prem-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prem-plan-features .check {
  color: var(--accent2);
  font-weight: 800;
}

.prem-select-btn {
  margin-top: auto;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s var(--ease);
}
.prem-select-btn.solid {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a0f00;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
}
.prem-select-btn.solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.45);
}
.prem-select-btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.prem-select-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Banking Panels */
.prem-banking-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.9);
  border: 1px solid var(--line-hi);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
}

.prem-gateway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.prem-gateway {
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prem-gateway:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.prem-gateway.bkash {
  background: linear-gradient(135deg, rgba(226, 19, 110, 0.18), rgba(226, 19, 110, 0.06));
  border-color: rgba(226, 19, 110, 0.35);
}
.prem-gateway.bkash .pg-badge { color: #ff3388; }
.prem-gateway.nagad {
  background: linear-gradient(135deg, rgba(247, 148, 29, 0.18), rgba(247, 148, 29, 0.06));
  border-color: rgba(247, 148, 29, 0.35);
}
.prem-gateway.nagad .pg-badge { color: #f7941d; }
.prem-gateway.rocket {
  background: linear-gradient(135deg, rgba(140, 52, 148, 0.18), rgba(140, 52, 148, 0.06));
  border-color: rgba(140, 52, 148, 0.35);
}
.prem-gateway.rocket .pg-badge { color: #c055cf; }
.prem-gateway.upay {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.18), rgba(0, 102, 204, 0.06));
  border-color: rgba(0, 102, 204, 0.35);
}
.prem-gateway.upay .pg-badge { color: #38bdf8; }

.pg-badge { font-weight: 800; font-size: 1rem; }
.pg-type { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pg-num {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pg-num code {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.pg-copy-icon {
  font-size: 0.74rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--muted);
}
.prem-gateway:hover .pg-copy-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.prem-instructions-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--text);
}

/* Submission Card */
.prem-submit-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.12);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
}
.selected-pkg-pill {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.prem-trx-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  max-width: 520px;
}
.prem-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prem-input-group label {
  font-size: 0.84rem;
  color: var(--muted);
}
.prem-input-group input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
}
.prem-input-group input:focus {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}
.full-width { width: 100%; }

/* Coupon & TG */
.prem-coupon-box, .prem-history-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(15, 19, 29, 0.85);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
}
.prem-tg-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.prem-login-req-box {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}
.prem-login-req-box a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ---------- Profile picker (site) ---------- */
.profile-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(3, 4, 8, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.profile-modal[hidden], .profile-form[hidden] { display: none !important; }
.profile-sheet { width: 100%; max-width: 640px; text-align: center; }
.profile-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 26px; letter-spacing: -0.03em; }
.profile-list {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: center; margin-bottom: 26px;
}
.profile-card { position: relative; width: 110px; cursor: pointer; text-align: center; }
.profile-avatar {
  width: 110px; height: 110px; border-radius: 16px;
  background: linear-gradient(145deg, hsl(var(--h, 210) 45% 32%), hsl(var(--h, 210) 55% 18%));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.92);
  border: 3px solid transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: 0.25s var(--ease);
}
.profile-card:hover .profile-avatar {
  border-color: var(--accent);
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 34px rgba(229, 9, 20, 0.35);
}
.profile-card.active .profile-avatar { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5); }
.profile-card-name { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.profile-card.active .profile-card-name { color: var(--text); font-weight: 700; }
.profile-18 {
  position: absolute; top: -7px; right: -7px;
  background: #ff6a3d; color: #fff;
  font-size: 0.66rem; font-weight: 800; padding: 2px 7px; border-radius: 8px;
}
.profile-card-tools { display: flex; gap: 6px; justify-content: center; margin-top: 7px; }
.profile-tool {
  background: #1d2433; border: 1px solid #2f3950; color: var(--text);
  width: 32px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.profile-tool:hover { border-color: var(--accent); }
.profile-tool.danger:hover { border-color: rgba(229, 9, 20, 0.6); color: #ff9aa6; }
.profile-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.profile-action-btn {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text);
  padding: 11px 20px; border-radius: 11px; cursor: pointer; font-size: 0.9rem; font-family: inherit; font-weight: 600;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease), color 0.18s;
}
.profile-action-btn:hover { border-color: rgba(229, 9, 20, 0.6); color: #fff; background: rgba(229, 9, 20, 0.14); transform: translateY(-2px); }
.profile-action-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.profile-form {
  display: grid; gap: 10px; margin: 0 auto 24px; max-width: 360px; text-align: left;
}
.profile-form > input {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.3); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.profile-form > input:focus { border-color: rgba(229, 9, 20, 0.65); box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.14); }
.profile-adult {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.88rem; color: var(--muted); cursor: pointer;
}
.profile-adult input { width: 16px; height: 16px; accent-color: var(--accent); }
.profile-form-actions { display: flex; gap: 10px; }
.um-profile-line { display: block; color: var(--muted); margin-top: 4px; }

/* My List + Continue watching */
.cw-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.cw-fill { height: 100%; background: var(--accent); border-radius: 0 2px 2px 0; }
.personal-card .lang-badge { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 9, 13, 0.72);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.18s, background 0.18s, transform 0.18s, border-color 0.18s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.personal-card:hover .cw-remove,
.cw-remove:focus-visible { opacity: 1; }
.cw-remove:hover {
  background: rgba(229, 9, 20, 0.92);
  border-color: transparent;
  transform: scale(1.1);
}
.cw-remove:disabled { opacity: 0.5; cursor: default; }
@media (hover: none) {
  .cw-remove { opacity: 1; }
}
.btn-ghost.active { border-color: var(--accent); color: var(--accent); }
.type-pill.pending { color: #ffb35c; background: rgba(255, 179, 92, 0.12); }

/* Admin: 18+ access requests */
.uh-panel .uh-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.uh-panel .uh-row:first-of-type { border-top: none; }
.uh-panel .uh-row small { display: block; color: var(--muted); }
.uh-panel .uh-row .adm-hint { flex: 1; }
.uh-btns { display: flex; gap: 8px; }

/* =========================================================
   Premium polish layer — cross-cutting finishing touches
   ========================================================= */

/* Slim, glowing scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a4661, #242d42);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4b5a7d, #2d3851);
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* Consistent keyboard focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(229, 9, 20, 0.75);
  outline-offset: 2px;
}

/* Every interactive element shares one motion language */
button, a, select { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* Frosted surfaces for grouped controls */
.wtv {
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(12, 16, 25, 0.78);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wtv-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.22s var(--ease);
}
.wtv-row:hover { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }
.wtv-tab, .wtv-chip { font-family: inherit; transition: all 0.2s var(--ease); }
.wtv-tab:hover, .wtv-chip:hover { transform: translateY(-2px); }
.wtv-tab.active { box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2); }
.wtv-chip.active { box-shadow: 0 8px 20px rgba(229, 9, 20, 0.35); }

/* Episode accordion rows handled above */

/* Announcement banner */
.site-banner {
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.22), rgba(229, 9, 20, 0.1), rgba(110, 168, 255, 0.14));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Admin form fields */
.adm-field input[type="text"],
.adm-field input[type="number"],
.adm-field select,
.adm-panel textarea,
.adm-panel input[type="text"],
.adm-toolbar select,
.adm-inline-form input,
.adm-form-sm input,
.tp-row input,
.tp-row select,
.st-url {
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.adm-field input[type="text"]:focus,
.adm-field input[type="number"]:focus,
.adm-field select:focus,
.adm-panel textarea:focus,
.adm-panel input[type="text"]:focus,
.adm-toolbar select:focus,
.tp-row input:focus,
.tp-row select:focus,
.st-url:focus {
  border-color: rgba(229, 9, 20, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
  outline: none;
}

/* Toggle switch gets a soft glow when on */
.switch span { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.switch input:checked + span { box-shadow: 0 0 16px rgba(70, 211, 105, 0.45), inset 0 1px 3px rgba(0, 0, 0, 0.25); }

/* Code / mono blocks */
.adm-code, .adm-keywrap code, .premium-num code {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

/* =========================================================
   CINEMATIC MOBILE EXPERIENCE & MODERN UI OVERHAUL
   ========================================================= */

.genres-menu {
  position: fixed;
  z-index: 280;
}

/* ---------- Mobile Bottom Navigation Bar ---------- */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(9, 12, 19, 0.94);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.6);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px env(safe-area-inset-bottom, 0px);
}

.mnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: #8b96ad;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 12px;
  transition: color 0.2s, transform 0.15s;
  flex: 1;
  max-width: 80px;
}
.mnav-item:active { transform: scale(0.92); }
.mnav-icon {
  width: 21px;
  height: 21px;
  stroke: #8b96ad;
  stroke-width: 2.1;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s;
}
.mnav-item.active {
  color: #fff;
  font-weight: 700;
}
.mnav-item.active .mnav-icon {
  stroke: var(--accent);
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 2px 8px rgba(229, 9, 20, 0.5));
}
#mnavPremium.active .mnav-icon {
  stroke: var(--gold);
  filter: drop-shadow(0 2px 8px rgba(243, 201, 105, 0.5));
}

@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
}

/* ---------- Mobile Adaptations (< 769px) ---------- */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  main {
    padding: 14px 14px 44px !important;
  }

  /* Sticky Topbar 2-Row Layout */
  .topbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "brand provider auth"
      "search search search" !important;
    gap: 10px 10px !important;
    padding: 10px 14px !important;
  }
  .brand {
    grid-area: brand;
    font-size: 1.25rem !important;
    align-self: center;
  }
  body:not(.is-admin) #providerSelect {
    display: none !important;
  }
  body.is-admin:not(.in-admin) #providerSelect {
    grid-area: provider;
    display: inline-block !important;
    max-width: 135px !important;
    padding: 7px 11px !important;
    font-size: 0.8rem !important;
    margin-left: auto;
    border-radius: 999px !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  .genres-wrap { display: contents !important; }
  .genres-btn { display: none !important; }
  .premium-btn { display: none !important; }
  .auth-area {
    grid-area: auth;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }
  .user-chip {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .user-chip-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }
  .hdr-btn {
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 999px !important;
  }
  .search-wrap {
    grid-area: search;
    width: 100% !important;
    max-width: 100% !important;
    order: unset !important;
  }
  #searchInput {
    height: 42px !important;
    font-size: 0.9rem !important;
    padding: 10px 16px 10px 42px !important;
  }

  /* Mobile Genres Sheet Pop-up */
  .genres-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 65vh !important;
    border-radius: 20px !important;
    z-index: 250 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-hi) !important;
    animation: sheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  @keyframes sheetUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Horizontal swipeable Genre Chips */
  .genre-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 2px 2px 8px !important;
    margin-bottom: 20px !important;
    gap: 8px !important;
  }

  /* Home Hero on Mobile */
  .hero {
    margin: -4px -4px 22px !important;
    border-radius: 16px !important;
    min-height: 280px !important;
  }
  .hero-inner {
    min-height: 280px !important;
    padding: 20px 16px 24px !important;
    gap: 14px !important;
  }
  .hero-poster {
    width: 106px !important;
    border-radius: 12px !important;
  }
  .hero-title {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
    line-height: 1.18 !important;
  }
  .hero-synopsis {
    font-size: 0.84rem !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 12px !important;
  }
  .hero-watch {
    padding: 12px 24px !important;
    font-size: 0.94rem !important;
    border-radius: 10px !important;
  }
  .hero-dots {
    bottom: 12px !important;
    right: 12px !important;
    padding: 6px 10px !important;
  }

  /* Carousel Cards on Mobile */
  .row-section { margin-bottom: 28px !important; }
  .row-title { font-size: 1.08rem !important; margin-bottom: 12px !important; }
  .card .card-title {
    padding: 8px 9px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
  }

  /* Detail View on Mobile */
  .detail-view { padding-bottom: 34px !important; }
  .dv-hero-inner { padding: 14px 14px 24px !important; }
  /* Poster বাঁয়ে, টেক্সট ডানে — center করা stack-এ অর্ধেক screen ফাঁকা থাকে */
  .dv-content {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .dv-poster-wrap { flex: 0 0 108px !important; }
  .dv-poster {
    width: 108px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(229, 9, 20, 0.25) !important;
    transform: none !important;
  }
  .dv-info { flex: 1 1 auto !important; min-width: 0 !important; }
  .dv-badges { justify-content: flex-start !important; gap: 6px !important; }
  .dv-title {
    font-size: clamp(1.06rem, 4.6vw, 1.4rem) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    margin-bottom: 6px !important;
  }
  .dv-sub {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  .dv-synopsis {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
  .dv-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  .btn-play, .btn-ghost {
    flex: none !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .season-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
  }
  .season-tabs::-webkit-scrollbar { display: none; }
  .season-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
  }
  .ep-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .ep-card {
    padding: 10px 12px !important;
    border-radius: 11px !important;
  }
  .ep-thumb {
    width: 64px !important;
    height: 44px !important;
  }

  /* Video Player Modal on Mobile */
  .player-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .player-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-wrap {
    padding: 0 14px 14px !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }
  /* Video টা screen-এর ধারে ধারে বসে — ভেতরে ফাঁকা রাখলে mobile-এ খুব ছোট লাগে */
  .player-stage {
    width: calc(100% + 28px);
    margin: 0 -14px;
  }
  .player-video-box {
    max-height: none;
    border-radius: 0;
  }
  .player-video-box.is-portrait {
    aspect-ratio: 3 / 4;
    max-width: none;
    max-height: none;
    margin-inline: 0;
  }
  .player-bar { padding-top: 12px; }
  .modal-backdrop:not(.player-backdrop) {
    padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-end !important;
  }
  .modal:not(.player-modal) {
    border-radius: 18px !important;
    max-height: 82vh !important;
  }
}

/* ছোট ফোন (≤479px): grid + row cards ৩ কলামে বসে */
@media (max-width: 479px) {
  .grid-search { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .card .card-title { font-size: 0.72rem !important; padding: 7px 7px 8px !important; }
  .card-provs { font-size: 0.6rem !important; padding: 0 7px 8px !important; }
  .card-q, .card-img-wrap .src-badge, .lang-badge, .season-badge { font-size: 0.56rem !important; padding: 2px 6px !important; }
  .row-scroll { grid-auto-columns: calc((100% - 18px) / 3); gap: 9px; }
  .row-head { gap: 8px; }
  .row-seeall { padding: 5px 10px !important; font-size: 0.7rem !important; }
  .dv-poster-wrap { flex-basis: 96px !important; }
  .dv-poster { width: 96px !important; }
}

/* Soften reduced-motion so the UI stays comfortable */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.dl-size {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  white-space: nowrap;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ep-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.ep-files-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ep-files-count {
  font-size: 0.72rem;
  color: #4ade80;
  font-weight: 700;
}

/* ---------------- App tab (mobile distribution) ---------------- */
.app-mani .adm-tr { grid-template-columns: 40px minmax(140px, 1fr) 84px minmax(120px, 1fr) 84px 52px; gap: 8px; }
.app-mani .adm-tr.head {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.app-mani .adm-tr.head:hover { background: transparent; }
.app-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.app-pill.on { color: #8dffb0; background: rgba(141, 255, 176, 0.12); }
.app-pill.off { color: #ff8d8d; background: rgba(255, 141, 141, 0.12); }
.app-pill.warn { color: #ffc36b; background: rgba(255, 195, 107, 0.12); }
.adm-panel input[type="file"] { font-size: 0.8rem; color: var(--muted); }
.adm-panel .chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.adm-panel .chk.danger { color: #ff8d8d; }
.adm-panel .chk input { accent-color: #7c9eff; }
.adm-panel .chk.danger input { accent-color: #ff6b6b; }
@media (max-width: 900px) {
  .app-mani .adm-tr { grid-template-columns: 32px 1fr 76px 52px; }
  .app-mani .adm-td.tags, .app-mani .adm-td.code { display: none; }
  .app-mani .adm-tr.head .adm-td.tags, .app-mani .adm-tr.head .adm-td.code { display: none; }
}

/* =========================================================
   ADMIN PANEL v2 — app shell, shared tokens, responsive tables
   ========================================================= */

/* ----- Isolation from the public site chrome ----- */
body.in-admin {
  overflow: hidden !important;
  padding-bottom: 0 !important;
  background: var(--bg);
}
body.in-admin .site-banner,
body.in-admin .mobile-nav,
body.in-admin #loader,
body.in-admin .user-menu,
body.in-admin .genres-menu {
  display: none !important;
}
body.in-admin #main {
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
}
body.in-admin .admin-view { height: 100%; }
body.in-admin::before {
  background:
    radial-gradient(900px 520px at 8% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(820px 560px at 100% 0%, rgba(64, 110, 255, 0.1), transparent 58%),
    radial-gradient(700px 600px at 60% 120%, rgba(243, 201, 105, 0.05), transparent 60%);
}

/* ----- Shell ----- */
.adm-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.adm-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  align-items: stretch;
}
.adm-scrim { display: none; }

.adm-side {
  position: relative;
  top: auto;
  flex: 0 0 264px;
  width: 264px;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 16px 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%),
    rgba(9, 12, 19, 0.82);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02), 18px 0 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  scrollbar-width: thin;
}
.adm-side-head {
  position: relative;
  padding: 2px 8px 18px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.adm-logo {
  display: flex;
  align-items: baseline;
  padding: 0;
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}
.adm-logo span {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adm-side-tag {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #66708a;
}
.adm-side-close { display: none; }

/* ----- Sidebar nav ----- */
.adm-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -8px;
  padding: 0 8px 4px;
  scrollbar-width: thin;
}
.adm-nav-section {
  padding: 16px 12px 6px;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #66708a;
  opacity: 1;
}
.adm-nav-section:first-child { padding-top: 2px; }
.adm-nav-section-18 { color: #ff6b76; opacity: 1; }
.adm-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #97a1b8;
  font-family: inherit;
  font-size: 0.865rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.adm-nav button:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  transform: none;
}
.adm-nav button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255, 255, 255, 0.03));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.18);
}
.adm-nav button.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.adm-nav-ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.8; }
.adm-nav button.active .adm-nav-ico { opacity: 1; color: var(--accent); }
.adm-nav button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Sidebar footer ----- */
.adm-side-foot {
  margin-top: auto;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-user {
  margin: 0;
  padding: 9px 10px;
  gap: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}
.adm-user-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
  background: var(--grad-accent);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 16px rgba(229, 9, 20, 0.28);
}
.adm-user-info b { font-size: 0.84rem; color: #fff; }
.adm-user-info small { font-size: 0.7rem; max-width: 150px; }
.adm-logout {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 107, 118, 0.24);
  background: rgba(229, 9, 20, 0.07);
  color: #ff9aa2;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.adm-logout:hover {
  background: rgba(229, 9, 20, 0.14);
  border-color: rgba(255, 107, 118, 0.5);
  color: #fff;
}
.adm-side-foot .adm-backlink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 9px;
  color: #7f89a0;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.16s, background 0.16s;
}
.adm-side-foot .adm-backlink:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }

/* ----- Mobile top bar (hidden on desktop) ----- */
.adm-mobilebar { display: none; }

/* ----- Main scroll region ----- */
.adm-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px clamp(26px, 3.4vw, 56px) 60px;
  scrollbar-width: thin;
}

/* ----- Page headers ----- */
.adm-h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: clamp(1.42rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8faff;
}
.adm-h1row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.adm-h1row .adm-h1 { margin-bottom: 0; }
.adm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  color: #9aa4bb;
  letter-spacing: 0;
}
.adm-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.adm-hint { color: #8b95ab; font-size: 0.83rem; line-height: 1.6; margin-bottom: 16px; }
.adm-hint b { color: #c6cfdf; font-weight: 600; }

/* ----- Metric cards ----- */
.adm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.adm-card {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%),
    rgba(15, 19, 29, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
.adm-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--grad-accent);
  opacity: 0.7;
}
.adm-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.adm-card-num {
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff, #aab7d2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adm-card-num span { font-size: 0.95rem; font-weight: 500; color: #8490a9; -webkit-text-fill-color: #8490a9; }
.adm-card-label { margin-top: 6px; color: #8b95ab; font-size: 0.78rem; font-weight: 600; }

/* ----- Panels ----- */
.adm-panel {
  position: relative;
  padding: 20px 22px;
  margin-bottom: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%),
    rgba(13, 17, 26, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.adm-panel-title,
.adm-panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #eef2fb;
}
.adm-panel-title::before {
  content: "";
  flex: 0 0 3px;
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: var(--grad-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.adm-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.9rem;
  gap: 16px;
}
.adm-row span { color: #8b95ab; }
.adm-row b { font-weight: 600; }

/* ----- Buttons ----- */
.adm-btn {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.adm-btn.ghost {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-hi);
  color: #d9e0ee;
}
.adm-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
}
.adm-btn.tiny { padding: 5px 10px; font-size: 0.72rem; border-radius: 7px; }
.adm-btn:disabled { opacity: 0.38; }

/* ----- Toolbars & form controls ----- */
.adm-toolbar { gap: 9px; margin-bottom: 16px; align-items: center; }
.adm-toolbar input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.adm-toolbar select {
  flex: 1 1 170px;
  min-width: 120px;
  width: auto;
  margin-bottom: 0;
}
.adm-panel .adm-toolbar input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.adm-panel .adm-toolbar select {
  width: auto;
  margin-bottom: 0;
}
.adm-toolbar input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.adm-toolbar select,
.adm-field input[type="text"],
.adm-field input[type="number"],
.adm-field input[type="password"],
.adm-field select,
.adm-panel input[type="text"],
.adm-panel input[type="number"],
.adm-panel input[type="password"],
.adm-panel input[type="date"],
.adm-panel input[type="url"],
.adm-panel textarea,
.adm-inline-form input,
.adm-form-sm input,
.tp-row input,
.tp-row select,
.st-url {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 10px 12px;
  outline: none;
  color-scheme: dark;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.adm-toolbar input:not([type="checkbox"]):not([type="color"]):not([type="file"]):focus,
.adm-toolbar select:focus,
.adm-field input:focus,
.adm-field select:focus,
.adm-panel input:focus,
.adm-panel textarea:focus,
.adm-inline-form input:focus,
.adm-form-sm input:focus,
.tp-row input:focus,
.tp-row select:focus,
.st-url:focus {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  background: rgba(0, 0, 0, 0.38);
  outline: none;
}
.adm-panel input::placeholder,
.adm-toolbar input::placeholder,
.tp-row input::placeholder,
.st-url::placeholder { color: #5d6880; }
.adm-toolbar .adm-switch { flex: 0 0 auto; margin-bottom: 0; }
.adm-toolbar .adm-btn { flex: 0 0 auto; }

/* Toggle switches */
.switch span {
  background: #2a3245;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch input:checked + span {
  background: var(--accent2);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(70, 211, 105, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* The label-wrapper variant keeps the track pinned to the left so the text
   never stretches the track (the old absolute inset:0 bug). */
.adm-switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  min-height: 28px;
  padding: 0 0 0 58px !important;
  margin-bottom: 12px;
  gap: 0 !important;
  color: #d7dce8;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.adm-switch > span {
  position: absolute !important;
  inset: auto !important;
  left: 0 !important;
  top: 50% !important;
  width: 48px !important;
  height: 28px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px;
}
.adm-switch > span::before { width: 22px; height: 22px; left: 2px; top: 2px; }
.adm-switch input:checked + span::before { transform: translateX(20px); }

/* ----- Tables ----- */
.adm-table {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(12, 16, 24, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.adm-tr {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.87rem;
  color: #dbe2f0;
  transition: background 0.15s;
}
.adm-tr:last-child { border-bottom: none; }
.adm-tr:hover { background: rgba(255, 255, 255, 0.035); }
.adm-tr.is-off { opacity: 0.5; }
.adm-tr.head,
.users-table .adm-tr.head,
.app-mani .adm-tr.head {
  background: rgba(255, 255, 255, 0.028);
  color: #7c879f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.adm-tr.head:hover { background: rgba(255, 255, 255, 0.028); }
.adm-td.name { min-width: 0; }
.adm-td.name b { display: block; font-size: 0.88rem; font-weight: 600; color: #f2f5fc; }
.adm-td.name small {
  display: block;
  margin-top: 3px;
  color: #7e889f;
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-td.icon img,
.adm-td.icon .noicon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
}
.adm-td .arr {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-hi);
  color: #c3cbdd;
  font-size: 0.6rem;
  cursor: pointer;
}
.adm-td .arr:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
.adm-tr > .adm-td:only-child { grid-column: 1 / -1; padding: 6px 0; color: #8b95ab; }

/* Column layouts (rows *and* headers) */
.providers-table .adm-tr { grid-template-columns: 64px 40px minmax(160px, 1fr) 74px 128px 36px 56px 84px; }
.st-table .adm-tr,
.st-table .adm-tr.head { grid-template-columns: 46px minmax(160px, 1fr) 64px 92px 52px 74px 56px; }
.cnc-table .adm-tr,
.cnc-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 140px 56px; }
.uh-table .adm-tr,
.uh-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 56px 64px 56px 92px minmax(120px, 1.2fr); }
.sync-table .adm-tr,
.sync-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 80px 70px minmax(140px, 1.2fr); }
.lib-table .adm-tr,
.lib-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 120px 40px; }
.pkg-table .adm-tr,
.pkg-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 110px 90px 52px 40px; }
.coupon-table .adm-tr,
.coupon-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 80px 70px 120px 52px 90px; }
.pay-table .adm-tr,
.pay-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 110px 100px 170px; }
.ad-table .adm-tr,
.ad-table .adm-tr.head { grid-template-columns: minmax(0, 1fr) 52px 40px; }

/* Pills */
.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #97a3bd;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ----- Genres report ----- */
.gen-table {
  border-radius: 16px;
  background: rgba(12, 16, 24, 0.62);
}
.gen-head {
  background: rgba(255, 255, 255, 0.028);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}
.gen-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.gen-row:hover { background: rgba(255, 255, 255, 0.035); }

/* ----- Dashboard extras ----- */
.chart-bars { height: 84px; gap: 6px; }
.chart-bar {
  background: linear-gradient(180deg, #ff5a3c, var(--accent));
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.22);
}
.activity-row { padding: 6px 8px; border-radius: 8px; }
.activity-row:hover { background: rgba(255, 255, 255, 0.04); }

/* ----- Empty / loading / error ----- */
#adminView .error-box { margin: 8px 0 18px; }
.adm-loading { padding: 48px 0; font-size: 0.88rem; }
.adm-code { border-radius: 10px; }

/* ----- Auth screens ----- */
body.in-admin .auth-wrap { min-height: 100dvh; padding: 28px 18px; }
.auth-card {
  position: relative;
  max-width: 420px;
  padding: 36px 34px 32px;
  border-radius: 22px;
  border: 1px solid var(--line-hi);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 40%),
    rgba(12, 16, 25, 0.9);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.auth-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  opacity: 0.85;
}
.auth-logo { font-size: 1.5rem; }

/* ----- Toast ----- */
.adm-toast {
  bottom: 28px;
  z-index: 600;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(18, 23, 34, 0.95);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--sh-2);
}

/* ----- Focus visibility ----- */
.adm-btn:focus-visible,
.adm-nav button:focus-visible,
.adm-burger:focus-visible,
.adm-side-close:focus-visible,
.adm-mobile-exit:focus-visible,
.adm-logout:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 2px;
}

/* =========================================================
   ADMIN — responsive (drawer ≤980px, card tables ≤720px)
   ========================================================= */
@media (max-width: 1180px) and (min-width: 981px) {
  .adm-side { flex-basis: 238px; width: 238px; padding-left: 13px; padding-right: 13px; }
  .adm-nav button { padding: 10px; font-size: 0.84rem; }
  .adm-nav button.active::before { left: -12px; }
}

@media (max-width: 980px) {
  .adm-mobilebar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 60px;
    height: 60px;
    padding: 0 12px 0 10px;
    background: rgba(9, 12, 19, 0.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    z-index: 70;
    position: relative;
  }
  .adm-mobilebar .adm-logo { font-size: 1.08rem; }
  .adm-burger {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-hi);
    border-radius: 10px;
    cursor: pointer;
  }
  .adm-burger span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #dfe5f2;
    transition: transform 0.22s var(--ease), opacity 0.16s;
  }
  body.adm-drawer-open .adm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.adm-drawer-open .adm-burger span:nth-child(2) { opacity: 0; }
  body.adm-drawer-open .adm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .adm-mobile-tab {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    font-size: 0.7rem;
    font-weight: 700;
    color: #c8d1e4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
  }
  .adm-mobile-exit {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line-hi);
    color: #a9b3c9;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.16s, color 0.16s;
  }
  .adm-mobile-exit:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

  .adm-layout { display: flex; position: relative; }
  .adm-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: min(300px, 86vw);
    flex-basis: auto;
    height: 100dvh;
    padding-top: max(20px, env(safe-area-inset-top));
    border-right: 1px solid var(--line-hi);
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.65);
    transform: translateX(-102%);
    transition: transform 0.32s var(--ease);
  }
  body.adm-drawer-open .adm-side { transform: none; }
  .adm-side-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.05);
    color: #c3cbdd;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
  }
  .adm-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(3, 5, 10, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  body.adm-drawer-open .adm-scrim { opacity: 1; pointer-events: auto; }
  .adm-main { padding: 20px 16px calc(32px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 720px) {
  .adm-main { padding: 16px 13px calc(28px + env(safe-area-inset-bottom)) !important; }
  .adm-h1row { align-items: flex-start; }
  .adm-actions { width: 100%; }
  .adm-actions .adm-btn { flex: 1 1 auto; justify-content: center; text-align: center; }

  .adm-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adm-card { padding: 16px 14px; border-radius: 14px; }
  .adm-card-num { font-size: 1.6rem; }
  .adm-card-label { font-size: 0.72rem; }

  .adm-panel { padding: 16px; border-radius: 14px; }
  .adm-toolbar { gap: 8px; }
  .adm-toolbar input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
  .adm-toolbar select { flex: 1 1 100%; min-width: 0; max-width: none !important; }
  .adm-toolbar .adm-btn { flex: 1 1 auto; justify-content: center; }
  .adm-toolbar .adm-switch { flex: 1 1 100%; }
  .adm-toolbar .adm-hint.inline { flex: 1 1 100%; margin: 2px 0 0; }

  .adm-table {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .adm-tr { padding: 10px 12px; gap: 8px; }
  .adm-tr.head { padding: 9px 12px; }

  .uh-table .adm-tr { min-width: 680px; }
  .sync-table .adm-tr { min-width: 540px; }
  .cnc-table .adm-tr { min-width: 420px; }

  /* Billing tables become cards */
  .pkg-table,
  .coupon-table,
  .pay-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pkg-table .adm-tr.head,
  .coupon-table .adm-tr.head,
  .pay-table .adm-tr.head { display: none; }
  .pkg-table .adm-tr,
  .coupon-table .adm-tr,
  .pay-table .adm-tr {
    gap: 8px 10px;
    min-width: 0;
    padding: 12px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 19, 29, 0.55);
  }
  .pkg-table .adm-tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name toggle del"
      "price price duration";
  }
  .pkg-table .adm-td.price { grid-area: price; color: #c6cfdf; }
  .pkg-table .adm-td.duration { grid-area: duration; justify-self: end; color: #8b95ab; }
  .pkg-table .adm-td.toggle { grid-area: toggle; }
  .pkg-table .adm-td.del { grid-area: del; }
  .coupon-table .adm-tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name toggle del"
      "duration used expires";
  }
  .coupon-table .adm-td.duration { grid-area: duration; color: #8b95ab; font-size: 0.76rem; }
  .coupon-table .adm-td.used { grid-area: used; justify-self: center; color: #8b95ab; font-size: 0.76rem; }
  .coupon-table .adm-td.expires { grid-area: expires; justify-self: end; color: #8b95ab; font-size: 0.76rem; }
  .coupon-table .adm-td.toggle { grid-area: toggle; }
  .coupon-table .adm-td.del { grid-area: del; }
  .pay-table .adm-tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "amount amount"
      "test test";
  }
  .pay-table .adm-td.amount { grid-area: amount; color: #c6cfdf; }
  .pay-table .adm-td.status { grid-area: status; justify-self: end; }
  .pay-table .adm-td.test { grid-area: test; display: flex; gap: 6px; }
  .pay-table .adm-td.test .adm-btn { flex: 1 1 auto; justify-content: center; }

  /* Library + Stremio become cards */
  .lib-table,
  .st-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .lib-table .adm-tr.head,
  .st-table .adm-tr.head { display: none; }
  .lib-table .adm-tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name del"
      "ver del";
    gap: 6px 10px;
    min-width: 0;
    padding: 12px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 19, 29, 0.55);
  }
  .lib-table .adm-td.name { grid-area: name; min-width: 0; }
  .lib-table .adm-td.ver { grid-area: ver; color: #7e889f; font-size: 0.72rem; }
  .lib-table .adm-td.del { grid-area: del; align-self: center; }
  .st-table .adm-tr {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "icon name toggle del"
      "type type test test";
    gap: 8px 10px;
    min-width: 0;
    padding: 12px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 19, 29, 0.55);
  }
  .st-table .adm-td.icon { grid-area: icon; align-self: start; }
  .st-table .adm-td.name { grid-area: name; min-width: 0; }
  .st-table .adm-td.type { grid-area: type; display: block; }
  .st-table .adm-td.toggle { grid-area: toggle; }
  .st-table .adm-td.test { grid-area: test; justify-self: end; }
  .st-table .adm-td.del { grid-area: del; }
  .st-table .adm-td.ver { display: none; }

  /* Providers / 18+ sources become cards */
  .providers-table,
  .users-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .providers-table .adm-tr.head,
  .users-table .adm-tr.head { display: none; }
  .providers-table .adm-tr {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name toggle"
      "order type test";
    gap: 10px 12px;
    padding: 12px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
      rgba(15, 19, 29, 0.55);
  }
  .providers-table .adm-tr:last-child { margin-bottom: 0; }
  .providers-table .adm-tr:hover { background: rgba(18, 23, 34, 0.7); }
  .providers-table .adm-td.icon { grid-area: icon; }
  .providers-table .adm-td.name { grid-area: name; min-width: 0; }
  .providers-table .adm-td.order { grid-area: order; }
  .providers-table .adm-td.type { grid-area: type; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .providers-table .adm-td.toggle { grid-area: toggle; justify-self: end; }
  .providers-table .adm-td.test { grid-area: test; justify-self: end; align-self: center; }
  .providers-table .adm-td.ver,
  .providers-table .adm-td.settings { display: none; }

  /* Users become cards (actions always visible) */
  .users-table .adm-tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name role"
      "name adult"
      "plan created"
      "actions actions";
    gap: 8px 12px;
    padding: 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 19, 29, 0.55);
  }
  .users-table .adm-td.u-name { grid-area: name; align-self: center; }
  .users-table .adm-td.u-role { grid-area: role; justify-self: end; }
  .users-table .adm-td.u-adult { grid-area: adult; justify-self: end; display: flex; align-items: center; gap: 6px; }
  .users-table .adm-td.u-plan { grid-area: plan; display: block; }
  .users-table .adm-td.u-created { grid-area: created; display: block; justify-self: end; color: #7e889f; font-size: 0.76rem; }
  .users-table .adm-td.u-prof { display: none; }
  .users-table .adm-td.u-actions {
    grid-area: actions;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .users-table .adm-td.u-actions .adm-btn { flex: 1 1 auto; justify-content: center; }

  .gen-head { display: none; }
  .gen-row { grid-template-columns: 1fr; gap: 6px; }
  .gen-c-act { text-align: left; }

  .adm-field-grid2, .adm-panel .adm-field-grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-mani .adm-tr { grid-template-columns: 32px minmax(0, 1fr) 76px 52px; }
}

@media (max-width: 560px) {
  .adm-mobile-tab { max-width: 34vw; font-size: 0.66rem; }
  .adm-mobilebar { gap: 9px; }
  .adm-mobilebar .adm-logo { font-size: 1rem; }
  .adm-h1 { font-size: 1.34rem; }
  .adm-panel { padding: 14px; }
  .adm-cards { gap: 8px; }
  .auth-card { padding: 28px 22px 26px; }
}