.ai-video-page #navbar,
.ai-video-page #navbar a,
.ai-video-page #navbar button,
.ai-video-page #navbar input,
.ai-video-page .nav-categories,
.ai-video-page .nav-categories a,
.ai-video-page .nav-categories button {
  font-family: "Mirages Custom", Merriweather, "Open Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
}

.ai-video-page #body > .container {
  width: 100%;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.ai-video-page #body > .archive-title {
  display: none;
}

.ai-video-page #body > .container > .row {
  display: block;
  margin-right: 0;
  margin-left: 0;
}

.ai-theme-content {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  padding-top: 78px;
}

/* AI page bodies use the narrower, centered desktop layout from the design. */
.ai-theme-content > .dx-container {
  max-width: 1140px;
}

/* Independent card/detail and tag links, without nested anchors. */
.ai-theme-content .drama-card { position: relative; }
.ai-theme-content .drama-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ai-theme-content .drama-card__link:focus-visible { outline: 2px solid var(--dx-primary-color); outline-offset: -2px; }
.ai-theme-content a.drama-card__tag { position: relative; z-index: 2; text-decoration: none; }
.ai-theme-content a.drama-card__tag:hover, .ai-theme-content a.drama-card__tag:focus-visible { border-color: var(--dx-primary-color); color: var(--dx-primary-color); }
/* Cards keep one row of complete labels; details retain the full label list. */
.ai-theme-content .drama-card__tags { flex-wrap: nowrap; height: 24px; overflow: hidden; }
.ai-theme-content .drama-card__tag { white-space: nowrap; }
.ai-theme-content .drama-card__ellipsis { flex: none; white-space: nowrap; }
.ai-theme-content .drama-card__tags > [hidden] { display: none; }
.ai-theme-content .drama-info__tags { flex-wrap: wrap; height: auto; overflow: visible; }
.ai-theme-content .drama-info__tag { box-sizing: border-box; max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .ai-theme-content .drama-card__tags { height: 18px; }
}
/* Share one episode/update badge skin across desktop and H5 card layouts. */
.ai-theme-content .drama-card__eps {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 4px 8px;
  border: .5px solid #fff;
  border-radius: 6px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}

.ai-play-page .play-crumb { margin-bottom: 24px; }
.ai-theme-content .dx-section-head__title { min-width: 0; }
.ai-theme-content .dx-section-head__more {
  width: auto;
  min-width: 96px;
  flex-shrink: 0;
  padding-right: 10px;
  padding-left: 10px;
  white-space: nowrap;
}
.ai-theme-content .dx-section-head__more > span { flex-shrink: 0; white-space: nowrap; }

/* Keep the desktop episode picker beside the synopsis; preserve the H5 stack. */
@media (min-width: 769px) {
  .ai-theme-content .drama-info { gap: 24px; }
  .ai-theme-content .drama-info__body { flex: 1 1 0; }
  .ai-theme-content .drama-info__episodes {
    flex: 0 1 40%;
    min-width: 240px;
    margin: 0;
    padding: 0 0 0 24px;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: transparent;
  }
  .drama-info__episodes .episode-section__header { flex-wrap: wrap; margin-bottom: 16px; }
  .drama-info__episodes .episode-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .drama-info__episodes .episode-groups { gap: 8px; margin-bottom: 16px; }
  .drama-info__episodes .episode-groups__btn { padding: 7px 12px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ai-theme-content .drama-info { padding: 22px; gap: 16px; }
  .ai-theme-content .drama-info__cover { width: 125px; }
  .ai-theme-content .drama-info__title { font-size: 24px; }
  .ai-theme-content .drama-info__episodes { flex-basis: 36%; min-width: 210px; padding-left: 16px; }
}
.ai-play-page .ai-player-loading { z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: calc(100% - 40px); padding: 16px 20px; border-radius: 10px; background: rgba(0,0,0,.7); color: #ddd; text-align: center; }
.ai-play-page .play-cmt-text { white-space: pre-wrap; }
/* Shared back-to-top controls must not intercept clicks on player sheets. */
.ai-video-page.is-ai-player-panel-open #backtop,
.ai-video-page.is-ai-player-panel-open .dx-backtop { visibility: hidden; pointer-events: none; }
.ai-video-page .ai-toast { z-index: 10002; }
/* Opening the intro panel must reveal the whole synopsis in one action. */
.ai-play-page .play-ep-intro__desc { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-line; }
/* The shared stylesheet draws a second, non-interactive jump "button". */
.ai-theme-content .dx-pager .pager-goto::before,
.ai-theme-content .dx-pager .pager-goto-btn::after { content: none; display: none; }
.ai-theme-content .dx-pager .pager-goto-btn { font-size: 13px; }
.ai-theme-content .dx-page-header__sort.ai-list-sort {
  display: block;
  max-width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  background: #343232;
  color: #ddd;
  color-scheme: dark;
}
@media (max-width: 768px) {
  .ai-theme-content .dx-pager .pager-goto-btn { font-size: 12px; }
  .ai-theme-content .dx-pager .pager-goto { margin-left: 0; }
  .ai-theme-content .dx-page-header:has(+.list-count) .dx-page-header__row { display: flex; }
  .ai-theme-content .dx-page-header:has(+.list-count) .dx-page-header__desc { display: none; }
  .ai-theme-content .dx-page-header__row:has(.ai-list-sort) { flex-wrap: wrap; gap: 10px; }
  .ai-theme-content .ai-list-sort { font-size: 12px; }
}
.ai-player-loading::before { content: ''; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: ai-player-spin .8s linear infinite; }
.ai-player-loading.is-error::before { display: none; }
.ai-player-loading [data-ai-player-retry] { padding: 7px 16px; border: 0; border-radius: 20px; background: #2d85ff; color: #fff; cursor: pointer; }
.ai-player-loading [hidden] { display: none; }
.play-player.is-loading .play-player__placeholder,
.play-player.is-error .play-player__placeholder { display: none; }
@keyframes ai-player-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .ai-play-page .play-crumb { margin-bottom: 16px; }
  .ai-theme-content .dx-section-head__more { min-width: 76px; padding: 0 6px; }
  .ai-theme-content .drama-info__episodes { grid-column: 1 / -1; grid-row: 7; width: auto; margin: 16px 0 0; }
}


.ai-filter {
  margin: 0 0 34px;
  padding: 40px 34px 34px;
  border-radius: 12px;
  background: #343232;
  scroll-margin-top: 96px;
}
.ai-filter__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.ai-filter__head h2 { margin: 0; color: #fff; font-size: 18px; font-weight: 600; line-height: 27px; }
.ai-filter__reset { flex-shrink: 0; color: var(--dx-primary-color); font-size: 14px; text-decoration: none; }
.ai-filter__reset span { display: inline-block; font-size: 25px; line-height: 20px; vertical-align: -2px; }
.ai-filter__row { display: flex; align-items: flex-start; gap: 22px; margin-top: 20px; }
.ai-filter__head + .ai-filter__row { margin-top: 0; }
.ai-filter__label { flex: 0 0 56px; padding-top: 5px; color: #bdbdbd; font-size: 14px; line-height: 19px; text-align: center; }
.ai-filter__options { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: 14px 12px; }
.ai-filter__option { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; max-width: 100%; padding: 4px 13px; border-radius: 5px; background: #424242; color: #bdbdbd; font-size: 14px; line-height: 21px; text-decoration: none; overflow-wrap: anywhere; }
.ai-filter__option:hover, .ai-filter__option.is-active { background: var(--dx-primary-color); color: #fff; text-decoration: none; }
.ai-filter__option:focus-visible, .ai-filter__reset:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ai-filter__count { color: #999; font-size: 13px; }
#ai-recommended { scroll-margin-top: 96px; }
.ai-home-pager { margin-top: 28px; }
@media (max-width: 768px) {
  .ai-filter { padding: 22px 14px; margin-bottom: 28px; scroll-margin-top: 136px; }
  .ai-filter__head { margin-bottom: 24px; }
  .ai-filter__head h2 { font-size: 16px; line-height: 24px; }
  .ai-filter__row { gap: 10px; margin-top: 16px; }
  .ai-filter__label { flex-basis: 42px; font-size: 12px; }
  .ai-filter__options { gap: 10px 8px; }
  .ai-filter__option { padding: 4px 10px; font-size: 12px; line-height: 20px; }
  #ai-recommended { scroll-margin-top: 136px; }
}

.ai-mobile-account {
  display: none;
}

/* The logout confirmation must sit above the mobile drawer (z-index: 10000). */
.ai-video-page .ai-logout-dialog {
  z-index: 10001;
}

@media (max-width: 768px) {
  .ai-theme-content {
    padding-top: 122px;
  }

  .ai-mobile-account {
    display: block;
    margin: 34px 0 18px;
  }

  .ai-mobile-account__main {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    height: 54px;
    padding: 0 16.5px;
    gap: 15.5px;
    border-radius: 4px;
    background: #343232;
    color: #eee;
    text-decoration: none;
  }

  .ai-user-page .user-profile__avatar {
    box-sizing: border-box;
    display: block;
    width: 55px;
    height: 55px;
    min-width: 55px;
    max-width: 55px;
    min-height: 55px;
    max-height: 55px;
    flex: 0 0 55px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
  }

  .ai-mobile-account .ai-mobile-account__avatar {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
  }

  .ai-mobile-account.is-logged .ai-mobile-account__main {
    height: 30px;
    padding: 0 0 0 1px;
    gap: 9px;
    border-radius: 0;
    background: transparent;
  }

  .ai-mobile-account.is-logged .ai-mobile-account__avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .ai-mobile-account .ai-mobile-account__arrow {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-left: auto;
    object-fit: contain;
  }

  .ai-mobile-account__info {
    display: flex;
    min-width: 0;
    flex: 1;
  }

  .ai-mobile-account__info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-mobile-account__info strong {
    font-size: 14px;
    font-weight: 400;
  }

  .ai-mobile-account.is-logged strong {
    font-weight: 500;
  }

  .ai-video-page #navigation #nav-box {
    box-sizing: border-box;
    width: 269px;
    max-width: calc(100vw - 56px);
    padding: 10px 12.5px 18px;
    background: #222;
  }

  .ai-video-page #navigation .nav-icon {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ai-video-page #navigation .site-name {
    display: flex;
    align-items: center;
    height: 28px;
  }

  .ai-video-page #navigation .ai-drawer-logo {
    width: auto;
    height: 28px;
    object-fit: contain;
  }

  .ai-video-page #navigation .ai-drawer-slogan {
    margin: 6px 0 0 8.5px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }

  .ai-video-page #navigation .nav-icon-close,
  .ai-video-page #navigation .nav-search-bar {
    display: none;
  }

  .ai-video-page #navigation .nav-home-btn,
  .ai-video-page #navigation .nav-section-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 54px;
    margin: 0 0 8px;
    padding: 0 16.5px;
    border-radius: 4px;
    background: #343232;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
  }

  .ai-video-page #navigation .nav-home-btn img,
  .ai-video-page #navigation .ai-drawer-icon,
  .ai-video-page #navigation .nav-section-header::before {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-right: 15.5px;
    object-fit: contain;
  }

  .ai-video-page #navigation .nav-section-header:has(.ai-drawer-icon)::before {
    display: none;
  }

  .ai-video-page #navigation .ai-drawer-caret {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-left: 15.5px;
    transform: rotate(180deg);
  }

  .ai-video-page #navigation .collapsed .ai-drawer-caret {
    transform: none;
  }

  .ai-video-page #navigation .nav-section-header::before {
    content: '';
    background: url('../images/h5/drawer/play.svg') center / contain no-repeat;
  }

  .ai-video-page #navigation .nav-section-header i {
    margin-left: 15.5px;
    font-size: 12px;
  }

  .ai-video-page #navigation .nav-section {
    margin: 0 0 8px;
  }

  .ai-video-page #navigation .ai-drawer-logout {
    width: 100%;
    border: 0;
    cursor: pointer;
  }

  .ai-video-page #navigation .nav-section-header {
    margin-bottom: 0;
  }

  .ai-video-page #navigation .nav-grid-item {
    background: #343232;
    font-size: 14px;
  }
}