/* MoviMoon Studio — visual refresh, v1
   Presentation-only layer. Application logic, routes, API, content and ad slots stay untouched. */
:root {
  color-scheme: dark;
  --cv-navy: #080c12;
  --cv-navy-2: #0d141d;
  --cv-navy-3: #121c27;
  --cv-navy-4: #192633;
  --cv-navy-5: #223342;
  --cv-navy-6: #2d4051;
  --cv-teal: #62dec4;
  --cv-teal-dim: rgba(98, 222, 196, .13);
  --cv-teal-glow: 0 0 28px rgba(98, 222, 196, .22);
  --cv-violet: #b29bff;
  --cv-violet-dim: rgba(178, 155, 255, .14);
  --cv-violet-glow: 0 0 28px rgba(178, 155, 255, .22);
  --cv-pink: #ff8cab;
  --cv-pink-dim: rgba(255, 140, 171, .13);
  --cv-gold: #ffd27a;
  --cv-gold-dim: rgba(255, 210, 122, .14);
  --cv-green: #7ee0a8;
  --cv-red: #ff7b83;
  --cv-orange: #ffad75;
  --text-1: #f5f7fb;
  --text-2: #c6d0dc;
  --text-3: #a0adbd;
  --text-4: #78889b;
  --b-1: rgba(215, 230, 244, .08);
  --b-2: rgba(215, 230, 244, .13);
  --b-3: rgba(215, 230, 244, .22);
  --b-focus: rgba(98, 222, 196, .8);
  --grad-primary: linear-gradient(135deg, #55d8bd 0%, #679dea 100%);
  --grad-primary-r: linear-gradient(135deg, #679dea 0%, #55d8bd 100%);
  --grad-card: linear-gradient(180deg, transparent 36%, rgba(8, 12, 18, .96) 100%);
  --grad-sidebar: linear-gradient(180deg, #101923 0%, #0b1119 100%);
  --grad-hero: linear-gradient(90deg, rgba(8, 12, 18, .97) 0%, rgba(8, 12, 18, .76) 47%, rgba(8, 12, 18, .12) 100%);
  --r-xs: 5px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --sh-sm: 0 4px 14px rgba(0, 0, 0, .2);
  --sh-md: 0 12px 32px rgba(0, 0, 0, .28);
  --sh-lg: 0 22px 54px rgba(0, 0, 0, .38);
  --sh-xl: 0 30px 80px rgba(0, 0, 0, .48);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 76% -12%, rgba(49, 113, 133, .14), transparent 31rem),
    radial-gradient(ellipse at 4% 32%, rgba(79, 91, 145, .08), transparent 36rem),
    var(--cv-navy);
  color: var(--text-1);
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: .2em; }
:focus-visible {
  outline: 3px solid var(--cv-teal) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(8, 12, 18, .92) !important;
}
::selection { background: rgba(98, 222, 196, .3); color: #fff; }

/* Shell / navigation */
.cv-sidebar {
  background: var(--grad-sidebar);
  border-right: 1px solid rgba(198, 215, 232, .1);
  box-shadow: 12px 0 36px rgba(0, 0, 0, .12);
}
.sidebar-logo { min-height: 76px; padding-inline: 18px; border-bottom-color: var(--b-1); }
.sidebar-logo-icon, .footer-logo-icon {
  background: linear-gradient(145deg, #53d7bd, #527ee4);
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(69, 179, 166, .2);
}
.sidebar-logo-text, .footer-logo-text {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-1);
  letter-spacing: -.045em;
}
.sidebar-nav { padding: 16px 10px; }
.nav-section-label { color: #8d9bae; font-size: 10px; letter-spacing: .13em; padding: 19px 12px 8px; }
.nav-item {
  min-height: 44px;
  margin: 2px 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 11px;
  color: #b4c0ce;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item::before { display: none; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .055); transform: translateX(2px); }
.nav-item.active { color: #eafff9; background: linear-gradient(100deg, rgba(98, 222, 196, .18), rgba(98, 222, 196, .055)); box-shadow: inset 2px 0 #62dec4; }
.nav-item.active .nav-item-icon { color: var(--cv-teal); }
.nav-item-icon { width: 32px; height: 32px; }
.nav-badge { background: rgba(98, 222, 196, .16); color: #9bf0dd; }
.sidebar-genre-chip { color: #b9c5d2; background: #182432; border-color: rgba(215, 230, 244, .12); padding: 6px 10px; }
.sidebar-footer { border-top-color: var(--b-1); padding: 16px 18px; }
.sidebar-avatar { background: linear-gradient(145deg, #53d7bd, #527ee4); }

.cv-header {
  background: rgba(9, 14, 21, .9);
  border-bottom-color: rgba(198, 215, 232, .11);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  backdrop-filter: blur(22px) saturate(135%);
}
.header-page-title { font-size: 17px; letter-spacing: -.025em; }
.header-breadcrumb { color: #b3c0ce; }
.header-breadcrumb-sep { color: #8190a2; }
.header-filter-tabs, .view-toggle { background: rgba(255, 255, 255, .045); border-color: var(--b-2); }
.hft-btn { min-height: 40px; padding-inline: 16px; color: #b6c3d1; }
.hft-btn.active { background: var(--grad-primary); color: #081512; box-shadow: 0 5px 16px rgba(83, 196, 177, .2); }
.header-action-btn, .mob-sidebar-toggle {
  width: 44px; height: 44px; color: #d1dbe6; background: rgba(255, 255, 255, .045);
  border-color: var(--b-2); border-radius: 13px;
}
.header-action-btn:hover, .mob-sidebar-toggle:hover { color: #fff; background: rgba(255, 255, 255, .09); border-color: var(--b-3); }
.search-input-wrap { background: rgba(255, 255, 255, .055); border-color: var(--b-2); min-height: 44px; }
.search-input-wrap:focus-within { border-color: var(--cv-teal); box-shadow: 0 0 0 3px rgba(98, 222, 196, .14); }
.search-input { color: var(--text-1); }
.search-input::placeholder, .mob-search-input::placeholder { color: #a1afbe; }
.search-icon { color: #b2c0cf; }
.search-results-dropdown { background: #111b26; border-color: var(--b-2); border-radius: 16px; }
.srd-header-label { color: #a9b6c5; }
.srd-meta, .srd-empty, .srd-recent-tag { color: #b3bfcd; }
.srd-recent-tag { background: #1b2937; }
.srd-close { color: #c2cdda; }

/* Cinematic spotlight */
.spotlight-section {
  height: clamp(560px, 76svh, 760px);
  min-height: 520px;
  max-height: 760px;
  background: #080c12;
  isolation: isolate;
}
.spotlight-slide::before {
  background: linear-gradient(90deg, rgba(8, 12, 18, .96) 0%, rgba(8, 12, 18, .82) 34%, rgba(8, 12, 18, .38) 68%, rgba(8, 12, 18, .08) 100%);
}
.spotlight-slide::after { background: linear-gradient(0deg, #080c12 0%, rgba(8, 12, 18, .42) 19%, transparent 64%); }
.spotlight-content { bottom: clamp(82px, 12vh, 118px); max-width: 740px; padding-inline: clamp(28px, 5vw, 76px); }
.spotlight-category { padding: 7px 12px; margin-bottom: 17px; color: #a6f5e2; background: rgba(37, 125, 111, .24); border-color: rgba(98, 222, 196, .28); letter-spacing: .12em; }
.spotlight-category-dot { background: var(--cv-teal); box-shadow: none; }
.spotlight-title { max-width: 680px; font-size: clamp(2.65rem, 5.25vw, 4.7rem); letter-spacing: -.055em; line-height: .99; text-wrap: balance; }
.spotlight-meta { gap: 12px; margin-bottom: 15px; }
.spotlight-meta-item { color: #d2dbe5; font-size: 13px; }
.spotlight-quality { color: #d2c5ff; background: rgba(120, 92, 196, .2); border-color: rgba(178, 155, 255, .26); }
.spotlight-desc { max-width: 560px; margin-bottom: 24px; color: #d2dbe5; line-height: 1.72; }
.btn-spotlight-play { min-height: 50px; padding: 7px 22px 7px 8px; color: #07130f; background: linear-gradient(135deg, #6de3c8, #73b5e8); box-shadow: 0 8px 25px rgba(65, 189, 164, .22); }
.btn-spotlight-play i { width: 34px; height: 34px; color: #08130f; background: rgba(255, 255, 255, .4); }
.btn-spotlight-play:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(65, 189, 164, .3); }
.btn-spotlight-info, .btn-spotlight-wl, .spotlight-arrow { background: rgba(9, 15, 22, .58); border-color: rgba(233, 241, 248, .3); color: #f1f5f8; }
.btn-spotlight-info { min-height: 50px; }
.btn-spotlight-wl { min-width: 50px; min-height: 50px; }
.spotlight-controls { left: clamp(28px, 5vw, 76px); bottom: 22px; gap: 10px; }
.spotlight-arrow { min-width: 44px; min-height: 44px; }
.spotlight-dot { position: relative; display: grid; place-items: center; width: 32px; height: 44px; background: transparent; }
.spotlight-dot::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .55); transition: width .2s ease, background .2s ease; }
.spotlight-dot.active { width: 36px; background: transparent; box-shadow: none; }
.spotlight-dot.active::before { width: 26px; height: 5px; background: var(--cv-teal); box-shadow: 0 0 14px rgba(98, 222, 196, .28); }
.spotlight-thumb { border-radius: 10px; border-color: rgba(233, 241, 248, .22); }
.spotlight-thumb.active { border-color: var(--cv-teal); box-shadow: 0 0 0 2px rgba(98, 222, 196, .15); }
.spotlight-progress { height: 2px; background: rgba(255, 255, 255, .12); }
.spotlight-progress-bar { background: linear-gradient(90deg, #62dec4, #7ca9ef); }

/* Home sections, editorial hierarchy and catalogue */
.cv-container { max-width: 1480px; padding-inline: clamp(18px, 3vw, 42px); }
#page-home > .cv-container { padding-top: 10px; }
.trending-ribbon { min-height: 54px; margin: 10px 0 26px; background: rgba(255, 255, 255, .035); border-color: var(--b-1); border-radius: 14px; }
.tr-label { color: #14110a; background: linear-gradient(110deg, #ffd27a, #ffa47b); letter-spacing: .1em; }
.tr-item { border-right-color: var(--b-1); }
.tr-item-num { color: #96a5b6; }
.tr-item-title { color: #f1f4f7; }
.tr-item-rating { color: #ffdc91; }
.section-wrapper { padding: 30px 0 9px; }
.section-header { margin-bottom: 17px; }
.section-title-group { gap: 12px; }
.section-icon { width: 40px; height: 40px; border-radius: 13px; color: #83ead4; background: rgba(98, 222, 196, .11); border-color: rgba(98, 222, 196, .17); }
.section-icon.violet { color: #c3b3ff; }
.section-icon.pink { color: #ffacc2; }
.section-icon.gold { color: #ffdc91; }
.section-title { font-size: clamp(18px, 2vw, 22px); letter-spacing: -.035em; }
.section-subtitle { color: #aab7c5; font-size: 12px; }
.section-view-all { min-height: 42px; padding: 8px 13px; color: #9cf0dc; border-color: rgba(98, 222, 196, .23); }
.section-view-all:hover { color: #e8fff8; background: rgba(98, 222, 196, .1); border-color: rgba(98, 222, 196, .46); }
.cv-hscroll { gap: 15px; padding: 2px 2px 14px; scroll-snap-type: x proximity; }
.cv-hscroll > * { scroll-snap-align: start; }
.poster-grid { gap: 18px; }
.poster-card, .landscape-card { border: 1px solid rgba(212, 227, 240, .09); background: #111a24; border-radius: 15px; box-shadow: 0 5px 18px rgba(0, 0, 0, .12); }
.poster-card:hover { transform: translateY(-4px); border-color: rgba(98, 222, 196, .32); box-shadow: 0 18px 36px rgba(0, 0, 0, .32); }
.poster-card-img { transition: transform .45s cubic-bezier(.2, .7, .25, 1); }
.poster-card:hover .poster-card-img { transform: scale(1.045); }
.poster-card-grad { opacity: .24; }
.poster-card:hover .poster-card-grad { opacity: .82; }
.poster-card-top { top: 9px; left: 9px; right: 9px; }
.pc-badge { border-radius: 6px; letter-spacing: .04em; }
.pc-badge-quality { background: rgba(84, 67, 151, .92); color: #fff; }
.pc-badge-new { background: #7fe6cb; color: #07130f; }
.pc-badge-top { background: #ffda89; color: #201805; }
.pc-rating { background: rgba(7, 11, 16, .84); color: #ffdc91; border-color: rgba(255, 210, 122, .25); }
.pc-play-btn { background: linear-gradient(145deg, #68dec3, #78a9ee); color: #07130f; box-shadow: 0 8px 24px rgba(65, 189, 164, .25); }
.pc-wl-btn { opacity: 1; width: 38px; height: 38px; top: auto; bottom: 10px; right: 10px; background: rgba(8, 12, 18, .78); border-color: rgba(255, 255, 255, .36); font-size: 13px; }
.pc-wl-btn:hover { color: #fff; background: #c54e75; border-color: #c54e75; }
.pc-wl-btn.in-list { color: #ffc0d2; border-color: #ff8cab; background: rgba(131, 36, 69, .78); }
.poster-card-info { padding: 12px 12px 13px; }
.pc-title { color: #f4f6f9; font-size: 13px; }
.pc-meta { color: #b4c0cd; font-size: 11px; }
.pc-meta-dot { color: #8190a2; }
.pc-genre { color: #c2ccd7; background: #1b2936; }
.cv-hscroll .poster-card { width: 170px; }
.landscape-card { border-radius: 16px; }
.landscape-card:hover { transform: translateY(-3px); border-color: rgba(98, 222, 196, .24); box-shadow: var(--sh-md); }
.lc-overlay { background: linear-gradient(0deg, rgba(8, 12, 18, .95), rgba(8, 12, 18, .08) 74%, transparent); }
.lc-play { background: linear-gradient(145deg, #68dec3, #78a9ee); color: #07130f; }
.lc-meta, .compact-card-meta { color: #b5c1cf; }
.compact-card { background: rgba(255, 255, 255, .035); border-color: var(--b-1); border-radius: 14px; }
.compact-card:hover { background: rgba(255, 255, 255, .065); border-color: var(--b-2); transform: translateX(2px); }
.compact-card-num { color: #8f9eae; }
.compact-card:nth-child(-n+3) .compact-card-num, .compact-card-rating { color: #ffdc91; }

.genre-chips-wrap { gap: 8px; }
.genre-chip { min-height: 40px; padding: 8px 15px; background: rgba(255, 255, 255, .035); border-color: var(--b-2); color: #c0cbd7; }
.genre-chip:hover { color: #fff; border-color: var(--b-3); background: rgba(255, 255, 255, .08); }
.genre-chip.active { color: #081512; background: linear-gradient(115deg, #69dfc4, #85d5e6); box-shadow: 0 5px 16px rgba(65, 189, 164, .18); }
.stats-bar { gap: 13px; margin: 25px 0; }
.stat-card { padding: 18px 19px; background: rgba(255, 255, 255, .035); border-color: var(--b-1); border-radius: 15px; }
.stat-card:hover { border-color: var(--b-2); background: rgba(255, 255, 255, .055); }
.stat-card::before { opacity: .5; }
.stat-icon { border-radius: 13px; color: #80e9d2; }
.stat-card:nth-child(2) .stat-icon { color: #c4b6ff; }
.stat-card:nth-child(3) .stat-icon { color: #ffb5cd; }
.stat-card:nth-child(4) .stat-icon { color: #ffdc91; }
.stat-value { color: #f5f7fb; }
.stat-label { color: #b2becc; }

/* Browse / filtering / lists */
.page-inner { padding-bottom: 72px; }
.filter-bar { gap: 10px; padding: 13px 15px; background: rgba(255, 255, 255, .035); border-color: var(--b-2); border-radius: 16px; }
.filter-label { color: #bdc8d4; }
.filter-select { min-height: 44px; color: #e0e6ec; background-color: #15212c; border-color: var(--b-2); border-radius: 11px; }
.filter-select:hover, .filter-select:focus { color: #fff; border-color: var(--cv-teal); }
.filter-select-icon { color: #bdc8d4; }
.filter-results-info { color: #bac5d0; }
.filter-results-count { color: #8cebd5; }
.vt-btn { width: 40px; height: 40px; color: #c0cbd6; }
.vt-btn.active { color: #09150f; background: linear-gradient(125deg, #69dfc4, #85d5e6); }
.active-filter-tag { color: #b4f5e5; background: rgba(98, 222, 196, .13); border-color: rgba(98, 222, 196, .28); }
.poster-grid.list-view .poster-card { border-radius: 13px; }
.lv-btn { min-height: 40px; }
.lv-btn-play { background: var(--grad-primary); color: #07130f; }
.lv-btn-info { color: #e1e7ed; border-color: var(--b-3); }
.skel-poster { background: #17222e; }
.skel-poster::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent); }
.empty-state-icon { color: #a9b7c5; }
.empty-state-title { color: #e0e6ed; }
.empty-state-sub { color: #b0bdcb; }
.btn-load-more { min-height: 48px; color: #e0e7ed; background: rgba(255,255,255,.045); border-color: var(--b-2); }
.btn-load-more:hover { color: #e8fff8; background: rgba(98,222,196,.09); border-color: var(--cv-teal); }

/* Dialogs, players, watchlist and information pages */
.detail-dialog, .qv-modal, .fv-modal, .fv-player-modal {
  color: var(--text-1); background: #111a25; border-color: var(--b-2); box-shadow: var(--sh-xl);
}
.detail-dialog { border-radius: 22px; }
.detail-dialog::backdrop, .qv-modal::backdrop, .fv-modal::backdrop, .fv-player-modal::backdrop { background: rgba(1, 5, 10, .84); backdrop-filter: blur(9px); }
.dialog-meta span, .detail-tab, .dialog-content p, .detail-tab-panel { color: #c4ced9; }
.detail-tab.active { color: #f5f7fb; border-bottom-color: var(--cv-teal); }
.filter-chip, .provider-chip, .cast-list li { color: #d4dde6; border-color: var(--b-2); }
.trailer-card, .comments-panel { background: rgba(255,255,255,.035); border-color: var(--b-2); }
.fv-player-modal-header { background: #121d28; }
.fv-player-modal-notice { color: #c3f5e9; background: rgba(98,222,196,.08); border-color: rgba(98,222,196,.2); }
.fv-player-modal-close { width: 40px; height: 40px; color: #fff; }
.player-wrap, .ltv-player-wrap { border-color: var(--b-2); border-radius: 17px; }
.player-frame { border: 1px solid var(--b-1); border-radius: 15px; }
.player-placeholder { color: #c7d2dd; }
.player-caption { color: #a9b6c5; }
.server-tab, .ltv-stab { min-height: 42px; color: #d2dbe4; background: #182430; border-color: var(--b-2); }
.server-tab.active { color: #b4f5e5; background: rgba(98,222,196,.13); border-color: rgba(98,222,196,.44); }
.ep-select { min-height: 44px; color: #e5ebf0; background-color: #182430; border-color: var(--b-2); }
.btn-ep-go { min-height: 44px; color: #07130f; background: var(--grad-primary); }
.wl-count { color: #b4f5e5; background: rgba(98,222,196,.13); border-color: rgba(98,222,196,.24); }
.wl-empty { padding: 72px 20px; }
.wl-empty-icon { color: #89e8d3; -webkit-text-fill-color: currentColor; animation: none; }
.wl-empty-title { color: #f2f5f8; }
.wl-empty-sub { color: #b4c0cc; }
.btn-wl-discover { min-height: 48px; color: #07130f; background: var(--grad-primary); }
.toast { background: #17222e; border-color: var(--b-2); color: #f5f7fb; }
.toast-msg { color: #f5f7fb; }
#cv-progress-bar { background: linear-gradient(90deg, #62dec4, #779de8); }
.mm-info-card { background: #121c27; border-color: var(--b-2); box-shadow: var(--sh-md); }
.mm-info-card p { color: #c8d2dd; }
.mm-info-card .mm-muted { color: #a7b4c2; }
.mm-info-card a { color: #8bead5; text-decoration: underline; }
.mm-info-card h2, .mm-info-card strong { color: #f5f7fb; }
.mm-contact-box { background: rgba(98,222,196,.07); border-color: rgba(98,222,196,.23); }
.mm-contact-form { background: rgba(255,255,255,.025); border-color: var(--b-2); }
.mm-contact-form label { color: #e2e8ee; }
.mm-contact-form input, .mm-contact-form textarea { background: #0d151e; border-color: var(--b-2); color: #f5f7fb; }
.mm-contact-form input::placeholder, .mm-contact-form textarea::placeholder { color: #9eacbb; }
.mm-contact-submit { min-height: 48px; color: #07130f; background: var(--grad-primary); }
.mm-form-note { color: #a9b6c5 !important; }

/* Live TV keeps existing player, channel data, guide filters and ad placement. */
.cv-page .mm-tv-heading h1 { color: #f5f7fb; }
.cv-page .mm-tv-heading p, .cv-page .mm-tv-guide-head p { color: #b5c1cd; }
.cv-page .mm-tv-count { color: #d6dfe7; background: #14202b; border-color: var(--b-2); }
.cv-page .mm-tv-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 20px; }
.cv-page .mm-tv-screen, .cv-page .mm-tv-guide { border-color: var(--b-2); border-radius: 18px; }
.cv-page .mm-tv-guide { background: #111b26; }
.cv-page .mm-tv-guide-head { border-bottom-color: var(--b-2); }
.cv-page .mm-tv-search, .cv-page .mm-tv-filters select { background: #0d151e; border-color: var(--b-2); color: #e6edf3; }
.cv-page .mm-tv-search input { color: #f5f7fb; }
.cv-page .mm-tv-filters label span, .cv-page .mm-tv-guide-meta { color: #aab7c5; }
.cv-page .mm-tv-now-playing { background: #121d28; border-color: var(--b-2); }
.cv-page .mm-tv-now-copy p, .cv-page .mm-tv-quality, .cv-page .mm-tv-tip { color: #b0bdca; }
.cv-page .mm-tv-channel-list, .cv-page .mm-tv-channel-card { border-color: var(--b-1); }

/* Footer and mobile navigation */
.cv-footer { background: #0c131c; border-top-color: var(--b-2); }
.footer-desc, .footer-link, .footer-copy { color: #aebbc9; }
.footer-col-title { color: #f2f5f8; }
.footer-legal a { color: #a9b6c4; }
.footer-link:hover, .footer-legal a:hover { color: #8bead5; }
.mobile-bottom-bar { background: rgba(13, 20, 29, .97); border-top-color: var(--b-2); padding-bottom: env(safe-area-inset-bottom); height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom)); }
.mbb-btn { min-height: 52px; color: #b1bdca; }
.mbb-btn.active { color: #8cebd5; }
#toast-container { padding-bottom: env(safe-area-inset-bottom); }

/* Blog listing / article pages use the same refreshed visual language. */
body:has(.blog-shell), body:has(.wrap) {
  background:
    radial-gradient(ellipse at 82% -12%, rgba(49, 113, 133, .14), transparent 32rem),
    #080c12;
  color: #f5f7fb;
}
.blog-header { background: rgba(9,14,21,.94); border-bottom-color: rgba(215,230,244,.12); }
.blog-header-inner, .blog-wrap, .blog-footer-inner, .blog-footer-bottom { max-width: 1260px; }
.blog-brand { color: #f5f7fb; letter-spacing: -.04em; }
.blog-brand img { border-radius: 12px; }
.blog-nav a { min-height: 40px; color: #bdc8d4; }
.blog-nav a:hover, .blog-nav a.active { color: #e9fff9; background: rgba(98,222,196,.12); }
.blog-main-link { min-height: 42px; color: #07130f; background: linear-gradient(135deg,#69dfc4,#85d5e6); box-shadow: 0 7px 18px rgba(65,189,164,.18); }
.blog-wrap { padding-top: 34px; }
.blog-hero { border-radius: 24px; border-color: rgba(215,230,244,.13); background: linear-gradient(120deg,rgba(61,125,128,.2),rgba(57,73,111,.2) 58%,rgba(122,83,118,.14)); box-shadow: var(--sh-md); }
.blog-hero:after { background: rgba(98,222,196,.1); }
.blog-kicker, .blog-seeall { color: #8cebd5; }
.blog-hero p, .blog-section-sub { color: #b7c3cf; }
.blog-section-title { color: #f5f7fb; letter-spacing: -.035em; }
.blog-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.blog-card { background: linear-gradient(160deg,#14202b,#101720); border-color: rgba(215,230,244,.11); border-radius: 16px; }
.blog-card:hover { border-color: rgba(98,222,196,.42); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
.blog-card-title { color: #f2f5f8; font-size: 13px; }
.blog-card-meta { color: #b3bfcc; font-size: 11px; }
.blog-empty { color: #c0cbd6; border-color: rgba(215,230,244,.2); }
.blog-ad { border-radius: 14px; }
.blog-footer { background: #0c131c; border-top-color: var(--b-2); }
.blog-footer p, .blog-footer-col a { color: #b1bdca; }
.blog-footer-col h3 { color: #f4f6f9; }
.blog-footer-bottom { color: #9eacbb; }
.blog-breadcrumb { color: #aab7c5; }
.blog-breadcrumb a { color: #c3ced9; }
.blog-breadcrumb a:hover { color: #8cebd5; }

/* Editorial post pages */
body:has(.wrap) { min-height: 100vh; padding: 24px 18px; }
.wrap { max-width: 980px !important; padding: 0 !important; }
.wrap article > div[style]:not([id]) {
  max-width: 980px !important;
  border: 1px solid rgba(215,230,244,.13) !important;
  border-radius: 24px !important;
  background: #101923 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35) !important;
}
.wrap article .v163-cover {
  height: 390px !important; min-height: 390px !important;
  border-radius: 23px 23px 0 0 !important;
  background-position: center 28% !important;
}
.wrap article .v163-cover-img { object-position: center 28% !important; }
.wrap article .v163-grad {
  background: linear-gradient(0deg,#101923 0%,rgba(16,25,35,.82) 17%,rgba(16,25,35,.16) 66%,rgba(8,12,18,.18) 100%),linear-gradient(90deg,rgba(8,12,18,.46),transparent 75%) !important;
}
.wrap article .v163-topbar { padding: 19px 22px !important; }
.wrap article .v163-info-row { margin-top: -76px !important; padding: 0 30px !important; gap: 22px !important; }
.wrap article .v163-poster { width: 154px !important; height: 231px !important; border-radius: 15px !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 16px 36px rgba(0,0,0,.42) !important; }
.wrap article .v163-title-col { padding-top: 80px !important; }
.wrap article .v163-title { color: #f5f7fb !important; font-size: clamp(24px,4vw,38px) !important; letter-spacing: -.04em !important; line-height: 1.12 !important; }
.wrap article h2 { color: #f5f7fb !important; letter-spacing: -.025em !important; }
.wrap article p, .wrap article li { color: #c6d0db !important; }
.wrap article strong { color: #f5f7fb !important; }
.wrap article a { text-underline-offset: 3px; }
.wrap article a[href*="/movie/"], .wrap article a[href*="/tv/"] { filter: saturate(.9); }
.wrap article iframe { border-radius: 15px !important; }

/* Reflow at tablet / phone widths. */
@media (max-width: 1200px) {
  .cv-container { padding-inline: 24px; }
  .blog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .spotlight-section { height: clamp(520px, 70svh, 680px); }
  .spotlight-content { max-width: 680px; }
  .cv-hscroll .poster-card { width: 160px; }
}
@media (max-width: 768px) {
  :root { --header-h: 58px; --bottom-bar-h: 62px; }
  .cv-header { padding-inline: 14px; }
  .header-title-area { gap: 10px; }
  .header-page-title { font-size: 15px; }
  .header-breadcrumb { font-size: 11px; }
  .header-actions { gap: 7px; }
  .header-action-btn { width: 42px; height: 42px; }
  .search-input-wrap { width: 42px; height: 42px; padding: 8px 12px; }
  .search-input-wrap:focus-within { width: min(230px, 58vw); }
  .cv-container { padding-inline: 18px; }
  .spotlight-section { height: 66svh; min-height: 430px; max-height: 600px; }
  .spotlight-slide::before { background: linear-gradient(90deg,rgba(8,12,18,.82),rgba(8,12,18,.25)),linear-gradient(0deg,rgba(8,12,18,.98) 0%,rgba(8,12,18,.56) 42%,rgba(8,12,18,.08) 100%); }
  .spotlight-content { left: 0; right: 0; bottom: 78px; max-width: none; padding: 0 20px; }
  .spotlight-category { margin-bottom: 12px; font-size: 10px; }
  .spotlight-title { max-width: 610px; font-size: clamp(30px,7.8vw,44px); line-height: 1.02; }
  .spotlight-meta { gap: 9px; margin-bottom: 11px; }
  .spotlight-meta-item { font-size: 11px; }
  .spotlight-desc { max-width: 520px; margin-bottom: 15px; font-size: 13px; line-height: 1.55; -webkit-line-clamp: 3; }
  .spotlight-actions { gap: 8px; }
  .btn-spotlight-play, .btn-spotlight-info { min-height: 46px; font-size: 13px; }
  .btn-spotlight-info { padding-inline: 15px; }
  .btn-spotlight-wl { min-width: 46px; min-height: 46px; width: 46px; height: 46px; }
  .spotlight-controls { left: 18px; bottom: 12px; gap: 5px; }
  .spotlight-arrow { min-width: 42px; min-height: 42px; }
  .spotlight-thumbstrip { display: none; }
  .section-wrapper { padding-top: 25px; }
  .section-title { font-size: 18px; }
  .section-subtitle { font-size: 11px; }
  .section-header { gap: 8px; }
  .section-view-all { min-height: 40px; padding-inline: 10px; font-size: 12px; white-space: nowrap; }
  .stats-bar { gap: 9px; }
  .stat-card { padding: 14px; }
  .stat-icon { width: 40px; height: 40px; }
  .poster-grid { grid-template-columns: repeat(auto-fill,minmax(138px,1fr)); gap: 12px; }
  .cv-hscroll .poster-card { width: 148px; }
  .filter-bar { gap: 8px; padding: 11px; }
  .filter-select { min-width: 110px; }
  .cv-page .mm-tv-layout { grid-template-columns: minmax(0,1fr); }
  .cv-page .mm-tv-guide { height: auto; min-height: 420px; max-height: none; }
  .cv-page .mm-tv-heading { align-items: flex-start; flex-direction: column; }
  .cv-page .mm-tv-count { white-space: normal; }
  .footer-grid { gap: 22px; }
  .blog-header-inner { padding: 11px 16px; }
  .blog-wrap { padding: 22px 16px 38px; }
  .blog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  body:has(.wrap) { padding: 14px 10px; }
  .wrap article .v163-cover { height: 300px !important; min-height: 300px !important; }
  .wrap article .v163-info-row { margin-top: -56px !important; gap: 15px !important; padding-inline: 20px !important; }
  .wrap article .v163-poster { width: 116px !important; height: 174px !important; }
  .wrap article .v163-title-col { padding-top: 58px !important; }
}
@media (max-width: 540px) {
  .header-breadcrumb { display: none; }
  .header-actions .header-action-btn:first-of-type { display: none; }
  .cv-container { padding-inline: 15px; }
  .spotlight-section { height: 68svh; min-height: 420px; max-height: 560px; }
  .spotlight-content { bottom: 78px; padding-inline: 16px; }
  .spotlight-title { font-size: clamp(28px,8vw,38px); }
  .spotlight-desc { -webkit-line-clamp: 2; font-size: 12px; }
  .spotlight-controls { left: 13px; }
  .section-icon { width: 36px; height: 36px; }
  .section-view-all { padding-inline: 8px; font-size: 11px; }
  .stats-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-card { gap: 10px; padding: 12px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 10px; }
  .poster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cv-hscroll .poster-card { width: 138px; }
  .pc-title { font-size: 12px; }
  .pc-meta { font-size: 10px; }
  .genre-chips-wrap { gap: 6px; }
  .genre-chip { min-height: 38px; padding: 7px 12px; font-size: 12px; }
  .filter-select { min-width: 0; max-width: calc(50vw - 34px); padding-inline: 11px 28px; font-size: 12px; }
  .filter-bar { border-radius: 13px; }
  .view-toggle { margin-left: 0; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 10px; }
  #toast-container { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .blog-hero { padding: 26px 22px; border-radius: 19px; }
  .blog-section-head { align-items: flex-start; }
  .blog-footer-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding-inline: 16px; }
  body:has(.wrap) { padding: 8px; }
  .wrap article > div[style]:not([id]) { border-radius: 18px !important; }
  .wrap article .v163-cover { height: 240px !important; min-height: 240px !important; border-radius: 17px 17px 0 0 !important; }
  .wrap article .v163-info-row { margin-top: -44px !important; gap: 12px !important; padding-inline: 15px !important; }
  .wrap article .v163-poster { width: 88px !important; height: 132px !important; border-radius: 11px !important; }
  .wrap article .v163-title-col { padding-top: 47px !important; }
  .wrap article .v163-title { font-size: 21px !important; }
  .wrap article > div[style]:not([id]) > div[style*="padding:20px"] { padding: 16px !important; }
}
@media (max-width: 360px) {
  .spotlight-title { font-size: 27px; }
  .btn-spotlight-play { padding-right: 14px; }
  .btn-spotlight-info { padding-inline: 11px; }
  .cv-hscroll .poster-card { width: 128px; }
  .pc-wl-btn { width: 36px; height: 36px; }
  .blog-wrap { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.mm-skip-link {
  position: fixed; z-index: 20000; top: 10px; left: 10px;
  transform: translateY(-160%); padding: 12px 16px;
  border-radius: 10px; color: #07130f; background: #8cebd5;
  font-weight: 800; box-shadow: var(--sh-md);
}
.mm-skip-link:focus { transform: translateY(0); }

/* Clear, polished fallback state when the upstream catalogue key is not configured. */
#api-key-banner {
  width: min(calc(100% - 56px), 980px) !important;
  min-height: 300px;
  margin: clamp(34px, 8vh, 76px) auto 20px !important;
  padding: clamp(38px, 6vw, 64px) 28px !important;
  border: 1px solid rgba(98, 222, 196, .22) !important;
  border-radius: 24px !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(98,222,196,.12), transparent 58%), linear-gradient(145deg,#121d28,#0d151f) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.28);
}
#api-key-banner > div:first-child { font-size: 42px !important; filter: saturate(.9); }
#api-key-banner > div:nth-child(2) {
  color: #f5f7fb !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -.035em;
}
#api-key-banner > div:nth-child(3) { color: #c6d0dc !important; }
#api-key-banner code { color: #cbbcff !important; background: #1b2634 !important; }
@media (max-width: 540px) {
  #api-key-banner { width: calc(100% - 30px) !important; min-height: 270px; padding: 34px 18px !important; }
}