/* =========================================================
   KoraShorts — Public stylesheet
   White/red DramaBox-style design for home + clip pages.
   Loaded AFTER assets/style.css on public pages only.
   ========================================================= */

:root {
  --primary: #ff2e8f;
  --primary-rgb: 255, 46, 143;
  --primary-dark: #d61e6f;
  --primary-light: #ffe3f1;
  --primary-soft: #ffd9ec;
  --primary-tint: #fff3f9;
  --primary-border: #ffb4d4;
  --primary-gradient: linear-gradient(135deg, #ff2e8f, #ff7ab6);
  --bg-page: #f6f7fb;
  --bg-surface: #ffffff;
  --bg-subtle: #f5f6f8;
  --border-color: #e8e9ee;
  --text-primary: #121214;
  --text-secondary: #5e6068;
  --text-muted: #8e9098;
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
body {
  font-family: var(--font-family) !important;
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  line-height: 1.45 !important;
  overflow-x: hidden !important;
}

html {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.main-content {
  flex: 1;
  padding: 16px 0 40px;
}

.page-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* =========================================================
   RESPONSIVE DISPLAY BREAKPOINTS
   ========================================================= */
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block !important; }
  .hero-desktop-grid.desktop-only { display: grid !important; }
  .footer-5col-grid.desktop-only { display: grid !important; }
  .main-nav.desktop-only { display: flex !important; }
  .search-box.desktop-only { display: flex !important; }
  .player-layout-grid.desktop-only { display: grid !important; }
  .section-related.desktop-only { display: block !important; }
  .desktop-episodes-grid.desktop-only { display: grid !important; }
  .desktop-episodes-grid.desktop-only.hidden,
  .desktop-ep-pages.hidden,
  .desktop-ep-page-grid.hidden { display: none !important; }

  /* The header search collapses behind this icon. search.js adds and removes
     .hidden, so with scripting off the box stays open and this button stays
     hidden — see the .hidden override at the end of this file. */
  .search-toggle.desktop-only { display: inline-flex !important; }
}

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-only-flex { display: flex !important; }
  .mobile-footer-inner.mobile-only { display: flex !important; }
  .mobile-nav-tabs.mobile-only { display: flex !important; }
  .mobile-carousel-dots.mobile-only { display: flex !important; }
  .hero-mobile-card.mobile-only { display: flex !important; }
  .mobile-player-section.mobile-only { display: block !important; }
  .mobile-meta-box.mobile-only { display: block !important; }
  .mobile-actions-row.mobile-only { display: flex !important; }
  .icon-action-btn.mobile-only { display: flex !important; }
  .mobile-episodes-row.mobile-only { display: flex !important; }
  .mobile-hero-container.mobile-only { display: flex !important; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);
}

.brand-mark svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  margin-left: 1px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--primary);
}

.lang-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.lang-dropdown svg {
  width: 14px;
  height: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}

.search-box input {
  width: 100%;
  height: 36px;
  background: #f4f5f7;
  border: none;
  border-radius: 999px;
  padding: 0 14px 0 36px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.search-box input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--primary);
}

.search-box input::placeholder {
  color: #9ea0a8;
}

/* Direct child only. The suggestions dropdown is appended INSIDE this form,
   so a descendant selector here also claims the icons on the rows inside it
   and rips them out of the row flow with this absolute positioning. */
.search-box > svg {
  position: absolute;
  left: 12px;
  /* Centre against the 36px input explicitly. Without this the icon relies on
     the flex static position of an absolutely-positioned child, which is not
     something to depend on for alignment. .search-box has no vertical padding,
     so 50% lands exactly on the input's centre line. */
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: #989aa2;
  fill: none;
  stroke-width: 2.2;
  pointer-events: none;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #484a52;
  transition: background-color 0.15s;
}

.icon-action-btn:hover {
  background: #f4f5f7;
  color: var(--primary);
}

.icon-action-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile Tabs Subnav */
.mobile-nav-tabs {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 4px 16px 8px;
  background: #ffffff;
  border-bottom: 1px solid #f2f3f5;
}

.mobile-nav-tabs .tabs-list {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.mobile-tab-item {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding-bottom: 6px;
  cursor: pointer;
}

.mobile-tab-item.active {
  font-weight: 800;
  color: var(--text-primary);
}

.mobile-tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--primary);
  border-radius: 999px;
}

/* =========================================================
   FOLLOW-US CHANNEL BAR

   Replaces the old full-bleed WhatsApp strip. A rounded gradient
   pill that opens a menu of channels, driven by follow_channels()
   so it only ever offers channels with a configured URL.
   ========================================================= */
.follow-wrap {
  /* One inset for the pill and its menu. The menu is absolutely positioned, so
     it cannot inherit this padding and has to repeat the value — holding it in
     a variable is what stops the two drifting apart when the margin is tuned. */
  --follow-inset: 8px;

  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 12px auto 0;
  padding: 0 var(--follow-inset);
  box-sizing: border-box;
}

.follow-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #26a65b 0%, #1e9370 45%, #14808c 100%);
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 2.7vw, 15px);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 122, 106, 0.28);
  transition: filter 0.2s ease, transform 0.12s ease;
}

.follow-bar:hover { filter: brightness(1.06); }
.follow-bar:active { transform: scale(0.995); }

.follow-bubble {
  flex: none;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: #fff;
}
.follow-bubble svg { width: 100%; height: 100%; }

.follow-divider {
  flex: none;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
}

.follow-icons {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.follow-badge {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.follow-badge svg { width: 100%; height: 100%; border-radius: 50%; }

.follow-text {
  flex: 1 1 auto;
  min-width: 0;          /* lets the text shrink instead of pushing the chevron out */
  /* The whole point of the sizing above: the sentence stays on one line. */
  white-space: nowrap;
}

/* Brand colours pulled out of the sentence, as in the reference. */
.follow-name-whatsapp { color: #4ef07c; }
.follow-name-telegram { color: #59cfff; }

.follow-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: #fff;
  transition: transform 0.2s ease;
}
.follow-bar[aria-expanded='true'] .follow-chevron { transform: rotate(90deg); }

/* ---- the channel menu ---- */

.follow-menu {
  position: absolute;
  z-index: 320;
  left: var(--follow-inset);
  right: var(--follow-inset);
  top: calc(100% + 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(18, 18, 20, 0.18);
  overflow: hidden;
}

.follow-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}
.follow-menu-item:last-child { border-bottom: none; }
.follow-menu-item:hover { background: var(--bg-subtle); }

/* A colour cue so the two rows are distinguishable at a glance. */
.follow-menu-whatsapp .follow-menu-name { color: #128c4a; }
.follow-menu-telegram .follow-menu-name { color: #1c8fc4; }

.follow-menu-go {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
}

/* Without JS the menu stays open beneath the bar, so both links remain
   reachable rather than trapped behind a button nothing can toggle. */
.follow-menu[hidden] { display: none; }

@media (max-width: 600px) {
  .follow-bar { gap: 8px; padding: 10px 11px; border-radius: 14px; }
  .follow-bubble { width: 20px; height: 20px; }
  .follow-divider { height: 20px; }
  .follow-badge { width: 24px; height: 24px; }
  .follow-icons { gap: 5px; }
  .follow-chevron { width: 18px; height: 18px; }
}

/* Under ~460px the sentence cannot share the row with every ornament and still
   be legible — the fixed chrome alone is wider than the text needs. The generic
   speech bubble is the one element carrying no information: it is decorative
   (aria-hidden), and the two brand badges plus the colour-coded channel names
   already say what this bar is. Dropping it here is what buys the line. */
@media (max-width: 460px) {
  .follow-bubble,
  .follow-divider { display: none; }
}

/* Below 360px not even 10px type fits on one line, and nowrap would clip the
   sentence rather than shorten it. Wrapping is the better failure: two legible
   lines beat one truncated one. The threshold sits at 360 rather than the ~350
   the real font allows, so the wider fallback face rendered during Google
   Fonts' display=swap window does not wrap and then snap. */
@media (max-width: 359px) {
  .follow-text { white-space: normal; }
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */
.breadcrumbs-bar {
  padding: 12px 0 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.breadcrumbs-bar a {
  color: var(--text-secondary);
  transition: color 0.15s;
}

.breadcrumbs-bar a:hover {
  color: var(--primary);
}

.breadcrumbs-bar .sep {
  color: #b8bac2;
  font-size: 10px;
}

.breadcrumbs-bar .current {
  font-weight: 700;
  color: var(--text-primary);
}

/* =========================================================
   DESKTOP HERO (HOME)
   ========================================================= */
.hero-desktop-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.hero-main-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-main-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.hero-main-poster {
  width: 220px;
  aspect-ratio: 288 / 370;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #eef0f4;
  position: relative;
}

.hero-main-poster img,
.hero-main-poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
  min-width: 0;
}

.hero-main-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 6px;
}

.hero-main-ep-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.hero-main-synopsis {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.hero-tag-pill {
  align-self: flex-start;
  background: #f2f3f6;
  color: #60626a;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}

.hero-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-side-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  flex: 1;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-side-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.hero-side-poster {
  width: 95px;
  aspect-ratio: 134 / 175;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #eef0f4;
  position: relative;
}

.hero-side-poster img,
.hero-side-poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-side-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
  min-width: 0;
}

.hero-side-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 2px;
}

.hero-side-ep-count {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.hero-side-synopsis {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* MOBILE HERO */
.hero-mobile-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.hero-mobile-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.hero-mobile-track.dragging {
  transition: none;
}

.hero-mobile-slide {
  flex: 0 0 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.hero-mobile-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}

.hero-mobile-poster {
  width: 105px;
  aspect-ratio: 105 / 140;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #eef0f4;
  position: relative;
}

.hero-mobile-poster img,
.hero-mobile-poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-mobile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
  min-width: 0;
}

.hero-mobile-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 2px;
}

.hero-mobile-ep-count {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.hero-mobile-synopsis {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.mobile-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 8px 0 14px;
}

.dot {
  width: 5px;
  height: 5px;
  background: #d8d9de;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  width: 15px;
  height: 4px;
  background: var(--primary);
  border-radius: 999px;
}

/* =========================================================
   PROMO OFFER BANNER (hidden by default)
   ========================================================= */
.promo-banner {
  margin-bottom: 24px;
  background: linear-gradient(90deg, var(--primary-light) 0%, var(--primary-tint) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.promo-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gift-icon-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.gift-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.promo-subtitle {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
}

.promo-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
}

.btn-topup {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 7px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}

.btn-topup:hover {
  opacity: 0.92;
  transform: scale(1.03);
}

/* =========================================================
   SHELVES
   ========================================================= */
.shelf-section {
  margin-bottom: 28px;
}

.shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.shelf-head h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.shelf-head .more-link {
  font-size: 13px;
  font-weight: 600;
  color: #7a7c85;
  transition: color 0.15s;
}

.shelf-head .more-link:hover {
  color: var(--primary);
}

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.drama-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}

.poster-wrapper {
  width: 100%;
  aspect-ratio: 190 / 260;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #eef0f3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.drama-card:hover .poster-wrapper {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.poster-wrapper img,
.poster-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drama-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Placeholder poster (clips without thumbnails) */
.poster-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #eef0f4 0%, #e3e6ec 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  text-align: center;
}

.poster-placeholder .ph-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(var(--primary-rgb), 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.poster-placeholder .ph-mark svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  margin-left: 1px;
}

.poster-placeholder .ph-title {
  font-size: 12px;
  font-weight: 700;
  color: #5e6068;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.poster-placeholder .ph-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #a1a4ad;
}

/* =========================================================
   AD SLOTS
   ========================================================= */
.ad-slot {
  display: block;
  text-align: center;
  margin: 14px auto;
  max-width: 100%;
  overflow: hidden;
}
.ad-slot-header { margin: 12px auto 0; }
.ad-slot-footer { margin: 0 auto 18px; }
.ad-slot img,
.ad-slot iframe { max-width: 100%; }

/* =========================================================
   STATIC PAGES (/page/{slug})
   ========================================================= */
.static-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 0 48px;
}

.static-page h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 18px;
}

.static-page-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-primary);
}

.static-page-content h2 { font-size: 20px; font-weight: 700; margin: 1.6em 0 0.5em; }
.static-page-content h3 { font-size: 17px; font-weight: 700; margin: 1.4em 0 0.4em; }
.static-page-content p { margin: 0 0 1em; }
.static-page-content ul,
.static-page-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.static-page-content li { margin-bottom: 0.35em; }
.static-page-content a { color: var(--primary); text-decoration: underline; }
.static-page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.static-page-content blockquote {
  margin: 0 0 1em;
  padding: 0.5em 1em;
  border-left: 3px solid var(--primary);
  color: #7a7c85;
}

/* =========================================================
   CATEGORY PAGE
   ========================================================= */
.cat-page {
  padding-top: 26px;
}

.cat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.cat-head h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.cat-head .cat-count {
  font-size: 14px;
  font-weight: 600;
  color: #7a7c85;
}

.drama-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.35);
}

/* =========================================================
   DRAMA DETAIL PAGE (drama.php)
   ========================================================= */
.drama-detail-desktop-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  margin-bottom: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.drama-desktop-poster {
  width: 200px;
  aspect-ratio: 190 / 260;
  border-radius: 8px;
  overflow: hidden;
  background: #eef0f3;
  flex-shrink: 0;
}

.drama-desktop-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drama-desktop-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.drama-desktop-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 4px;
}

.drama-desktop-ep-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.drama-desktop-synopsis {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.tags-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.tag-pill {
  background: #f2f3f6;
  color: #5b5e68;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.tag-pill:hover {
  background: #e8e9ee;
  color: var(--text-primary);
}

.desktop-actions-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

.btn-play-now-main {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  transition: transform 0.15s, opacity 0.15s;
  text-decoration: none;
}

.btn-play-now-main:hover {
  transform: scale(1.03);
  opacity: 0.95;
}

.btn-play-now-main svg {
  width: 14px;
  height: 14px;
  fill: #ffffff;
}

.desktop-share-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.share-icons-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.mobile-hero-poster {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 190 / 260;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin: 8px 0 14px;
  background: #eef0f3;
}

.mobile-hero-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-hero-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mobile-hero-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.mobile-hero-rating svg {
  width: 13px;
  height: 13px;
  fill: #9c9ea8;
}

.mobile-action-bar-hero {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.mobile-square-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-square-action-btn svg {
  width: 18px;
  height: 18px;
}

.btn-play-now-mobile {
  flex: 1;
  height: 44px;
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  text-decoration: none;
}

.btn-play-now-mobile svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

.mobile-intro-section {
  margin-bottom: 20px;
  text-align: left;
}

.mobile-section-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mobile-intro-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}

.section-episodes {
  margin-bottom: 28px;
}

.section-episodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-episodes-head h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.section-episodes-head .ep-count-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.desktop-episodes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.ep-card-desktop {
  background: #f5f6f8;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  min-height: 64px;
}

.ep-card-desktop:hover {
  transform: translateY(-2px);
  border-color: #d8d9de;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.ep-card-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #ebeef2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-card-thumb-empty svg {
  width: 16px;
  height: 16px;
  color: #a0a2aa;
}

.ep-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ep-card-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.ep-card-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 3px;
}

.mobile-episodes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.mobile-episodes-row::-webkit-scrollbar {
  display: none;
}

.ep-card-desktop.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.ep-card-desktop.active .ep-card-num {
  color: var(--primary);
  font-weight: 800;
}

.ep-card-desktop.view-more-card {
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #6a6c76;
  cursor: pointer;
}

.ep-card-desktop.view-more-card:hover {
  color: var(--primary);
}

.ep-card-desktop.view-more-card svg {
  width: 14px;
  height: 14px;
  fill: none;
  flex-shrink: 0;
}

.desktop-ep-pages {
  margin-top: 14px;
}

.desktop-ep-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.desktop-ep-tab-btn {
  border: none;
  background: #5d6069;
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-ep-tab-btn:hover {
  background: #4a4c54;
}

.desktop-ep-tab-btn.active {
  background: var(--primary);
  color: #ffffff;
}

.desktop-ep-page-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.section-recommended {
  margin-bottom: 36px;
}

.section-recommended h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* =========================================================
   DESKTOP PLAYER + SIDEBAR (CLIP PAGE)
   ========================================================= */
.player-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 28px;
}

.player-main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.theater-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theater-player-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.drama-detail-meta {
  padding: 16px 0 6px;
}

.drama-page-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 6px;
}

.views-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.star-svg {
  width: 14px;
  height: 14px;
  fill: #9c9ea8;
  flex-shrink: 0;
}

.drama-synopsis-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.genre-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f2f3f6;
  color: #555762;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.pill-tag:hover {
  background: #e8e9ee;
  color: var(--text-primary);
}

.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-circle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #ffffff;
  transition: transform 0.15s;
}

.share-circle-btn:hover {
  transform: scale(1.1);
}

.share-fb { background: #1877f2; }
.share-x { background: #000000; }
.share-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.share-link { background: #6c757d; }

.share-circle-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Right Sidebar: Episode Selector */
.sidebar-episodes-panel {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: fit-content;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.episodes-panel-header {
  background: #2b2b2f;
  color: #ffffff;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
}

.episodes-panel-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 4px;
  font-size: 12.5px;
  border-bottom: 1px solid #f0f1f4;
}

.tab-range {
  cursor: pointer;
  font-weight: 600;
  color: #7b7d87;
  transition: color 0.15s;
}

.tab-range.active {
  color: var(--primary);
  font-weight: 700;
}

.episodes-grid-5col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 12px 14px;
  max-height: 440px;
  overflow-y: auto;
}

.ep-btn-desktop {
  position: relative;
  height: 34px;
  background: #ffffff;
  border: 1px solid #e2e4ea;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-btn-desktop:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ep-btn-desktop.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 800;
}

/* Related Episodes (Desktop) */
.section-related {
  margin-bottom: 32px;
}

.section-heading-dt {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.related-episodes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.rel-ep-card {
  background: #f8f9fa;
  border: 1px solid #eeeff2;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s;
  cursor: pointer;
}

.rel-ep-card:hover {
  transform: translateY(-2px);
  border-color: #d8d9de;
}

.rel-ep-thumb {
  position: relative;
  width: 58px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  flex-shrink: 0;
}

.rel-ep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rel-ep-thumb .thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #2b2b2f, #1a1a1d);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.rel-ep-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rel-ep-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.rel-ep-num {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =========================================================
   MOBILE PLAYER (CLIP PAGE)
   ========================================================= */
.mobile-player-section {
  width: 100%;
  position: relative;
  background: #000000;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.mobile-video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-video-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.mobile-meta-box {
  padding: 2px 0 10px;
}

.mobile-drama-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.mobile-views-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mobile-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.mobile-action-btn {
  flex: 1;
  height: 38px;
  background: #f4f5f8;
  border: 1px solid #e8e9ee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
}

.mobile-action-btn:hover {
  background: #eef0f5;
}

.mobile-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mobile Episodes Strip */
.mobile-episodes-strip-box {
  margin-bottom: 16px;
}

.mobile-episodes-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mobile-episodes-strip-head h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.mobile-episodes-strip-head .total-link {
  font-size: 12.5px;
  font-weight: 600;
  color: #8e9098;
}

.mobile-episodes-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.mobile-episodes-pills-row::-webkit-scrollbar {
  display: none;
}

.mobile-ep-pill {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  background: #f4f5f8;
  border: 1px solid #e8e9ee;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}

.mobile-ep-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 800;
}

.mobile-ep-pill.more {
  background: #ffffff;
  color: var(--primary);
  border-color: var(--primary);
}

/* Mobile Synopsis */
.mobile-synopsis-box {
  margin-bottom: 18px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.mobile-synopsis-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.mobile-synopsis-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-more-toggle {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

/* =========================================================
   EPISODE BOTTOM SHEET (MOBILE)
   ========================================================= */
.ep-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.ep-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.ep-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 410;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(18, 18, 20, 0.22);
  transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
}

.ep-sheet.open {
  transform: translateY(0);
}

.ep-sheet-handle {
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: var(--border-color);
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.ep-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 12px;
  border-bottom: 1px solid #f0f1f4;
}

.ep-sheet-header h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.ep-sheet-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
}

.ep-sheet-close:hover {
  background: #f4f5f7;
  color: var(--text-primary);
}

.ep-sheet-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f1f4;
}

.ep-sheet-tab {
  padding: 6px 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-sheet-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.ep-sheet-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 16px 20px;
}

.ep-sheet-num {
  position: relative;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-sheet-num:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ep-sheet-num.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 800;
}

/* =========================================================
   RECOMMENDED (CLIP PAGE)
   ========================================================= */
.section-recommended {
  margin-bottom: 36px;
}

.rec-shelf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.rec-drama-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}

.rec-poster-box {
  width: 100%;
  aspect-ratio: 190 / 260;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #eef0f3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.rec-drama-card:hover .rec-poster-box {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.rec-poster-box img,
.rec-poster-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rec-drama-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.rec-tag-pill {
  display: inline-block;
  align-self: flex-start;
  background: #f2f3f6;
  color: #7b7d87;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 4px;
}

/* =========================================================
   COMMENTS
   ========================================================= */
.section-comments {
  margin-bottom: 36px;
  padding-top: 4px;
}

.comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.comments-head h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.comments-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.comment-form {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.comment-name-input {
  width: 100%;
  height: 40px;
  background: #f4f5f7;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
}

.comment-name-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--primary);
}

.comment-name-input::placeholder {
  color: #9ea0a8;
}

.comment-textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  background: #f4f5f7;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
}

.comment-textarea:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--primary);
}

.comment-textarea::placeholder {
  color: #9ea0a8;
}

.comment-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.btn-post-comment {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
  transition: opacity 0.15s, transform 0.15s;
}

.btn-post-comment:hover {
  opacity: 0.92;
  transform: scale(1.03);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02);
}

.comment-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.comment-time {
  font-size: 11.5px;
  color: var(--text-muted);
}

.comment-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.comments-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 28px 16px;
  background: #f9fafb;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}

.comments-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.btn-load-more-comments {
  background: #ffffff;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 9px 24px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s, opacity 0.15s;
}

.btn-load-more-comments:hover {
  background: var(--primary-light);
  transform: scale(1.03);
}

.btn-load-more-comments:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* =========================================================
   FLASH / EMPTY FALLBACKS
   ========================================================= */
.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}

.flash-success {
  background: #e9f9ef;
  color: #1f7a44;
  border: 1px solid #bfe8cd;
}

.flash-error {
  background: var(--primary-soft);
  color: #c1274b;
  border: 1px solid var(--primary-border);
}

.empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 28px 16px;
  background: #f9fafb;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #fcfcfd;
  border-top: 1px solid var(--border-color);
  padding: 36px 0 28px;
  margin-top: auto;
}

.footer-5col-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr 1.2fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 12.5px;
  color: #6a6c76;
  transition: color 0.15s;
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-col p {
  font-size: 12.5px;
  color: #6a6c76;
  line-height: 1.5;
}

.footer-copyright {
  text-align: center;
  font-size: 12px;
  color: #989aa4;
  padding-top: 20px;
  border-top: 1px solid #f0f1f4;
}

.mobile-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.mobile-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.mobile-social-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
}

.mobile-footer-links-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  margin: 8px 0;
}

.mobile-footer-col h5 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mobile-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-footer-col a {
  font-size: 12px;
  color: #6a6c76;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: rgba(18, 18, 20, 0.92);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 300;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================= */
@media (max-width: 1280px) {
  .hero-main-poster {
    width: 185px;
  }
  .hero-main-title {
    font-size: clamp(17px, 1.6vw, 20px);
  }
}

@media (max-width: 1100px) {
  .shelf-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .related-episodes-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .rec-shelf-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .desktop-episodes-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .desktop-ep-page-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1024px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 0;
    gap: 10px;
  }
  .header-left {
    gap: 16px;
  }
  .main-nav {
    gap: 16px;
  }
  .search-box {
    width: 180px;
  }

  .hero-desktop-grid {
    grid-template-columns: 1fr;
  }
  .hero-main-poster {
    width: clamp(150px, 22vw, 210px);
  }
  .hero-side-stack {
    flex-direction: row;
    align-items: stretch;
  }
  .hero-side-card {
    flex: 1;
    min-width: 0;
  }

  .shelf-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-5col-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .player-layout-grid {
    grid-template-columns: 1fr;
  }
  .related-episodes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .rec-shelf-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .desktop-episodes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .desktop-ep-page-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .drama-detail-desktop-card {
    grid-template-columns: 170px 1fr;
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .main-nav,
  .lang-dropdown,
  .search-box {
    display: none;
  }

  .mobile-nav-tabs {
    display: flex;
  }

  .shelf-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
  }

  .drama-title {
    font-size: 11.5px;
    margin-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
  }

  .shelf-head h2 {
    font-size: 15.5px;
  }

  .shelf-head .more-link {
    font-size: 12px;
  }

  .promo-banner {
    padding: 8px 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }

  .promo-left {
    flex-wrap: wrap;
  }

  .gift-icon-wrap {
    width: 36px;
    height: 36px;
  }

  .icon-action-btn {
    width: 36px;
    height: 36px;
  }

  .promo-subtitle {
    font-size: 11px;
  }

  .promo-title {
    font-size: 14px;
  }

  .btn-topup {
    padding: 5px 14px;
    font-size: 12px;
  }

  .site-footer {
    padding: 24px 0 20px;
  }

  .rec-shelf-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
  }

  .rec-drama-title {
    font-size: 11.5px;
    margin-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
  }

  .mobile-action-btn {
    height: 40px;
    font-size: 12.5px;
  }

  .mobile-ep-pill {
    height: 38px;
    padding: 0 14px;
  }

  .section-heading-dt {
    font-size: 15.5px;
  }
}

@media (max-width: 480px) {
  .site-container {
    padding: 0 12px;
  }
  .drama-title {
    font-size: 11px;
  }
  .header-inner {
    height: 54px;
  }
  .hero-side-poster {
    width: 80px;
  }
  .promo-banner {
    padding: 10px 12px;
  }
  .btn-topup {
    padding: 6px 16px;
  }
  .rec-drama-title {
    font-size: 11px;
  }
  .mobile-actions-row {
    gap: 8px;
  }
  .mobile-action-btn {
    height: 38px;
    font-size: 12px;
  }
  .mobile-synopsis-box {
    padding: 10px 12px;
  }
  .ep-sheet-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
  .comments-head h2 {
    font-size: 15.5px;
  }
  .comment-form {
    padding: 12px;
  }
  .comment-form-actions .btn-post-comment {
    width: 100%;
    padding: 11px 22px;
  }
  .comments-loadmore-wrap {
    margin-top: 12px;
  }
  .btn-load-more-comments {
    width: 100%;
    padding: 11px 22px;
  }
  .comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .comment-text {
    font-size: 12.5px;
  }
}
/* =========================================================
   IN-PLAYER ADS (pre-roll / mid-roll / pause / overlay)
   Layered over the native <video> inside .theater-player-box
   and .mobile-video-box, both of which are position: relative.
   ========================================================= */
.player-ad-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  background: #000;
}
.player-ad-layer.is-visible { display: flex; }

.player-ad-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 8px;
  text-align: center;
}
.player-ad-body img,
.player-ad-body iframe { max-width: 100%; height: auto; }

/* IMA paints the VAST ad into its own container. */
.player-ad-ima {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.player-ad-ima > * { pointer-events: auto; }

.player-ad-bar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #e8e9ee;
  font-size: 13px;
}

.player-ad-label {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 3px;
  background: #ffcf00;
  color: #171717;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.player-ad-note {
  flex: 1;
  min-width: 0;
  color: #b9bcc6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-ad-skip {
  flex-shrink: 0;
  display: none;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.player-ad-skip.is-ready { display: inline-block; }
.player-ad-skip:hover { background: rgba(255, 255, 255, 0.2); }

/* Bottom strip shown during playback — never covers the controls. */
.player-ad-banner {
  position: absolute;
  left: 50%;
  bottom: 46px;
  z-index: 5;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  max-width: 94%;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
}
.player-ad-banner.is-visible { display: flex; }
.player-ad-banner-body { min-width: 0; overflow: hidden; }
.player-ad-banner-body img,
.player-ad-banner-body iframe { max-width: 100%; height: auto; display: block; }

.player-ad-banner-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.player-ad-banner-close:hover { background: rgba(255, 255, 255, 0.35); }

@media (max-width: 767px) {
  .player-ad-bar { padding: 6px 8px; font-size: 12px; gap: 7px; }
  .player-ad-skip { padding: 6px 11px; font-size: 12px; }
  .player-ad-banner { bottom: 40px; padding: 5px 6px; }
}

/* ==========================================================================
   SITE SEARCH
   The header .search-box is now a <form>; it keeps its existing flex/relative
   rules, so this only adds the suggestions dropdown, the mobile panel and the
   episode-match line on result cards.
   ========================================================================== */

.search-box {
  margin: 0;                /* forms carry a default margin in some browsers */
}

.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(18, 18, 20, 0.14);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}

.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.search-suggest-item:last-of-type {
  border-bottom: none;
}

.search-suggest-item:hover,
.search-suggest-item.is-active {
  background: var(--primary-light);
}

.search-suggest-item img {
  width: 34px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
  flex: none;
  background: var(--bg-subtle);
}

.search-suggest-text {
  min-width: 0;             /* lets the ellipsis actually engage inside flex */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-suggest-text strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-text small {
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-all,
.search-suggest-empty {
  display: block;
  padding: 10px 12px;
  font-size: 12.5px;
  text-align: center;
}

.search-suggest-all {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
}

.search-suggest-all:hover,
.search-suggest-all.is-active {
  background: var(--primary-light);
}

.search-suggest-empty {
  color: var(--text-secondary);
}

/* ── recent searches ──
   The visitor's own terms, read from localStorage and drawn into the same
   dropdown as the live suggestions. They reuse .search-suggest-item so the two
   lists read as one control; only the leading icon differs from a result row,
   standing in for the poster thumbnail at a much smaller size. */
.search-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.search-suggest-clear {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--primary);
}

.search-suggest-clear:hover {
  text-decoration: underline;
}

.search-suggest-recent svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0 9px;            /* centres the term over the 34px poster column */
  color: var(--text-secondary);
}

/* The "↳ Episode 7: Blackout" line under a result card whose hit came from an
   episode title rather than the drama's own title. */
.drama-match {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile search panel, revealed by the header search button. */
.mobile-search {
  position: relative;
  display: flex;
  align-items: center;
  /* Vertical padding kept symmetric on purpose: the icon below is centred with
     top:50%, which resolves against this padding box. The old 10px/4px split
     pushed the icon 3px above the input's centre. */
  padding: 8px 16px;
}

/* Direct child only — same reason as .search-box > svg above. */
.mobile-search > svg {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: #989aa2;
  fill: none;
  pointer-events: none;
}

.mobile-search input {
  width: 100%;
  height: 38px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0 14px 0 38px;
  font-family: inherit;
  font-size: 16px;          /* iOS zooms the page when a focused input is <16px */
  color: var(--text-primary);
  outline: none;
}

.mobile-search input:focus {
  background: var(--bg-surface);
  border-color: var(--primary);
}

.mobile-search .search-suggest {
  left: 16px;
  right: 16px;
  top: calc(100% + 2px);
}

/* ==========================================================================
   .hidden MUST BEAT THE BREAKPOINT DISPLAY RULES

   The responsive helpers near the top declare `.mobile-only { display: block
   !important }` and `.desktop-only { display: block !important }`. Those are
   single-class selectors with !important, exactly like `.hidden` — so at equal
   specificity the later rule won, and .hidden silently lost to whichever
   breakpoint helper an element also carried. The `hidden` attribute fared no
   better: its UA default is normal weight and !important outranks it.

   The episode grids hit this and were patched one selector at a time
   (.desktop-ep-pages.hidden, and friends). This generalises that fix: two
   classes beats one, and being last in the file settles any remaining tie.
   ========================================================================== */

.mobile-only.hidden,
.desktop-only.hidden,
.mobile-only[hidden],
.desktop-only[hidden] {
  display: none !important;
}

/* ==========================================================================
   REQUEST SHORTS
   ========================================================================== */

/* The "Request More" entry on each episode range strip. Each one matches the
   tabs beside it, but carries its own class on purpose: the strips' click
   handlers select by the tab class and hide every grid whose data-*-page does
   not match the clicked element, so sharing their class would blank the
   episode list. Separate class, separate selector, no handler. */

/* Desktop sidebar strip — plain text tabs. */
.tab-range-request {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.tab-range-request:hover {
  text-decoration: underline;
}

/* Mobile bottom sheet — pill tabs. */
.ep-sheet-tab-request {
  padding: 6px 16px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.ep-sheet-tab-request:hover {
  background: var(--primary);
  color: #ffffff;
}

/* Desktop expanded catalog — solid buttons. */
.desktop-ep-tab-request {
  background: var(--primary);
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.desktop-ep-tab-request:hover {
  filter: brightness(1.08);
}

/* ---- the request page itself ---- */

.request-intro {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 22px;
}

.request-form {
  display: flex;
  flex-direction: column;
}

.request-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.request-label + .request-input,
.request-label + .request-textarea {
  margin-bottom: 18px;
}

.request-optional {
  font-weight: 500;
  color: var(--text-secondary);
}

.request-input {
  width: 100%;
  height: 42px;
  background: #f4f5f7;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.request-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: #f4f5f7;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.request-input:focus,
.request-textarea:focus {
  border-color: var(--primary);
}

.request-actions {
  display: flex;
  justify-content: flex-start;
}

/* Honeypot. Moved off-screen rather than display:none, which some bots skip.
   It is aria-hidden and tabindex="-1" in the markup, so keyboard and screen
   reader users never reach it either. */
.request-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- "Choose how we notify you" ---- */

.request-notify {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 16px 4px;
  margin: 4px 0 20px;
  background: var(--bg-subtle);
}

.request-notify legend {
  padding: 0 6px;
  margin-bottom: 2px;
}

.request-notify-hint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.request-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13.5px;
  cursor: pointer;
}

.request-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex: none;
  cursor: pointer;
}

.request-notify-field {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.request-notify-field .request-notify-hint {
  margin: 8px 0 0;
}

/* ---- the Telegram connect step ---- */

.request-connect {
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 18px 18px 14px;
  margin-bottom: 22px;
  background: var(--primary-light);
}

.request-connect h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.request-connect p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.request-connect-btn {
  display: inline-block;
  background: var(--primary);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 999px;
}

.request-connect-btn:hover {
  filter: brightness(1.08);
}

.request-connect-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 12px 0 0 !important;
}

/* =========================================================
   BROWSE PAGE — categories, then newest releases
   ========================================================= */

.browse-page {
  padding: 16px 0 40px;
}

.browse-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--primary-light);
  padding: 20px 18px;
  margin-bottom: 18px;
}

.browse-hero h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

.browse-hero p {
  margin: 6px 0 0;
  max-width: 46ch;          /* keeps the line length readable on desktop */
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The oversized play mark bleeding off the corner, as in the reference. */
.browse-hero-mark {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 120px;
  height: 120px;
  opacity: 0.13;
  pointer-events: none;
}
.browse-hero-mark svg {
  width: 100%;
  height: 100%;
  fill: var(--primary);
}

/* ---- category tiles ---- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cat-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;             /* lets long names ellipsize instead of stretching */
  padding: 12px;
  /* No border: the card carries its own tint inline, and a grey outline around
     a pastel reads as a mistake. Depth comes from the hover shadow instead. */
  border: 0;
  border-radius: 12px;
  background: var(--bg-surface);   /* replaced inline by the category's colour */
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cat-tile:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
  box-shadow: 0 6px 16px rgba(18, 18, 20, 0.12);
}

.cat-tile-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  /* White badge on the tinted card, so the darker icon keeps its contrast
     regardless of how light or saturated the card colour is. */
  background: #fff;
  font-size: 19px;
  line-height: 1;
}

.cat-tile-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-tile-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-tile-count {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.cat-tile-go {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.browse-latest {
  margin-top: 28px;
}

@media (min-width: 700px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .browse-hero { padding: 26px 24px; }
  .browse-hero h1 { font-size: 26px; }
}

@media (min-width: 1000px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .browse-hero-mark { width: 160px; height: 160px; }
}

/* An admin-chosen icon renders as an image inside the tile; the emoji fallback
   keeps the same box, so the two never shift the layout relative to each other. */
.cat-tile-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Links inside rich (HTML) movie descriptions. The homepage hero is absent on
   purpose: it renders plain text, because its card is itself a link. */
.drama-desktop-synopsis a,
.drama-synopsis-text a,
.mobile-synopsis-text a,
.mobile-intro-text a {
  color: var(--primary);
  text-decoration: underline;
}
.drama-desktop-synopsis a:hover,
.drama-synopsis-text a:hover,
.mobile-synopsis-text a:hover,
.mobile-intro-text a:hover { opacity: 0.85; }

/* Block markup inside rich descriptions. style.css resets every margin and
   padding to 0, so without these, paragraphs run together and list bullets sit
   outside the text. Spacing goes BETWEEN blocks only, never above the first,
   so a description still starts flush with the heading above it. */
:is(.drama-desktop-synopsis, .drama-synopsis-text, .mobile-synopsis-text, .mobile-intro-text)
  :is(p, div, ul, ol, blockquote, h2, h3, h4) + :is(p, div, ul, ol, blockquote, h2, h3, h4) {
  margin-top: 0.75em;
}
:is(.drama-desktop-synopsis, .drama-synopsis-text, .mobile-synopsis-text, .mobile-intro-text)
  :is(ul, ol) { padding-left: 1.25em; }
:is(.drama-desktop-synopsis, .drama-synopsis-text, .mobile-synopsis-text, .mobile-intro-text)
  li + li { margin-top: 0.25em; }
:is(.drama-desktop-synopsis, .drama-synopsis-text, .mobile-synopsis-text, .mobile-intro-text)
  blockquote { border-left: 3px solid var(--border-color); padding-left: 0.75em; }
/* Headings stay at body scale: inside a synopsis they mark a section, they are
   not page headings. */
:is(.drama-desktop-synopsis, .drama-synopsis-text, .mobile-synopsis-text, .mobile-intro-text)
  :is(h2, h3, h4) { font-size: 1em; font-weight: 700; color: var(--text-primary); }