/* Final visual fixes — intentionally loaded after all legacy styles. */

.poster-card img.is-lazy-pending,

.mini-card img.is-lazy-pending {

  opacity: 0;

}



/* Premium badge in user search rows must not inherit the poster-image rules. */

#searchModalResults .user-search-card .user-search-card__avatar-shell > img.premium-crown {

  position: absolute !important;

  inset: -5px -5px auto auto !important;

  z-index: 8 !important;

  display: block !important;

  width: 22px !important;

  min-width: 22px !important;

  max-width: 22px !important;

  height: 22px !important;

  min-height: 22px !important;

  max-height: 22px !important;

  margin: 0 !important;

  padding: 3px !important;

  border: 2px solid #090b0c !important;

  border-radius: 50% !important;

  background: #17130a !important;

  box-shadow: none !important;

  opacity: 1 !important;

  object-fit: contain !important;

  transform: none !important;

  filter: none !important;

}



:root { color-scheme: dark; }



html, body, .site-shell, .home-page,

body.is-library .home-page, body.is-library #catalog {

  background: var(--bg-base) !important;

}

body.is-detail, body.is-detail #detailPage { background: var(--bg-base) !important; }

body.is-watch, body.is-watch #detailPage { background: var(--bg-base) !important; }



/* Keep one header geometry and appearance on every route. */

.topbar, body.is-detail .topbar, body.is-watch .topbar {

  min-height: 72px !important;

  height: 72px !important;

  padding: 0 clamp(22px, 3.4vw, 68px) !important;

  border-bottom: 1px solid rgba(255,255,255,.08) !important;

  background: #090a0d !important;

  grid-template-columns: minmax(230px,max-content) minmax(430px,1fr) minmax(340px,640px) max-content !important;

  column-gap: clamp(24px,2.2vw,44px) !important;

}

.topbar .logo, body.is-detail .topbar .logo { min-width: 230px !important; padding: 0 !important; }

.topbar .logo-mark { flex: 0 0 auto !important; }



/* Library pages begin directly below the header. */

body.is-library #catalogPage.catalog-section,

body.is-library #favoritesPage.library-section,

body.is-library #historyPage.library-section {

  width: min(100% - 72px, 1900px) !important;

  margin: 0 auto !important;

  padding-top: 32px !important;

  background: transparent !important;

}

#catalogPage > .page-heading,

#favoritesPage > .page-heading,

#historyPage > .page-heading { display: none !important; }

#profilePage.profile-page { padding-top: 0 !important; }



/* Neutral image loading surface. */

.poster-card, .catalog-card, .favorite-card,

.poster-card img, .catalog-card img, .favorite-card img,

.poster-fallback, .anime-poster, .history-card__poster,

.profile-favorite-card, .search-result-card img {

  background-color: var(--bg-surface) !important;

  background-image: linear-gradient(100deg,var(--bg-surface) 25%,#292c32 42%,var(--bg-surface) 60%) !important;

  background-size: 220% 100% !important;

  animation: neutral-poster-shimmer 1.35s linear infinite !important;

}

.poster-card img[src], .catalog-card img[src], .favorite-card img[src],

.profile-favorite-card img[src], .search-result-card img[src], .history-card__poster img[src] {

  animation: none !important;

  background-image: none !important;

}

/* The legacy reveal animation starts cards at opacity:0. The shimmer rule

   replaces that animation, therefore the cards must be revealed explicitly. */

.poster-card, .catalog-card, .favorite-card {

  opacity: 1 !important;

  animation: none !important;

}

.poster-fallback {

  color: #555961 !important;

  background: #15161a url("/fallback-poster.webp") center / cover no-repeat !important;

}

.poster-fallback::before { display: none !important; animation: none !important; }

.banner-fallback { object-fit: cover !important; object-position: center !important; }

.poster-fallback--terminal,

.banner-fallback--terminal { background: #15161a !important; }

@keyframes neutral-poster-shimmer { to { background-position: -220% 0; } }



/* Settings controls and uploads. */

.settings-clean-row select,

.settings-clean-row select option {

  color-scheme: dark !important;

  background: #17191e !important;

  color: #f4f4f5 !important;

}

.profile-file-button {

  position: relative;

  justify-self: end;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 190px;

  min-height: 44px;

  padding: 0 18px;

  overflow: hidden;

  border: 1px solid #343740;

  border-radius: 11px;

  background: #1c1e23;

  color: #fff;

  font-size: 13px;

  font-weight: 850;

  cursor: pointer;

}

.profile-file-button:hover { background: #292c32; border-color: #4a4d56; }

.profile-file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }



/* Search: visible close action and properly aligned user rows. */

#searchModal .search-modal__form {

  display: grid !important;

  grid-template-columns: 24px minmax(0,1fr) 42px !important;

  align-items: center !important;

  max-width: none !important;

}

#searchModal .search-modal__form button.search-form-close {

  display: grid !important;

  place-items: center !important;

  width: 36px !important;

  height: 36px !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 9px !important;

  background: transparent !important;

  color: #a6a9b0 !important;

  font-size: 25px !important;

  cursor: pointer !important;

}

#searchModal .search-modal__form button.search-form-close:hover { background: #292b31 !important; color: #fff !important; }

#searchModalResults .user-search-card {

  display: grid !important;

  grid-template-columns: 56px minmax(0,1fr) 24px !important;

  align-items: center !important;

  gap: 15px !important;

  min-height: 80px !important;

  padding: 12px 16px !important;

}

#searchModalResults .user-search-card .user-search-card__avatar {

  position: static !important;

  grid-column: 1 !important;

  grid-row: 1 !important;

  width: 56px !important;

  height: 56px !important;

  margin: 0 !important;

}

#searchModalResults .user-search-card > div { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }

#searchModalResults .user-search-card::after { grid-column: 3 !important; grid-row: 1 !important; }



/* Catalog load-more placement and styling. */

#catalogMore.load-more-episodes {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: max-content !important;

  min-width: 190px !important;

  min-height: 48px !important;

  margin: 34px auto 70px !important;

  padding: 0 24px !important;

  border: 1px solid #343740 !important;

  border-radius: 12px !important;

  background: #1b1d22 !important;

  color: #f6f6f7 !important;

  font-size: 14px !important;

  font-weight: 850 !important;

  cursor: pointer !important;

}

#catalogMore:hover { background: #292c32 !important; border-color: #4a4e57 !important; }

#catalogMore:disabled { opacity: .55 !important; cursor: default !important; }



@media (max-width: 1380px) {

  .topbar, body.is-detail .topbar, body.is-watch .topbar {

    grid-template-columns: max-content minmax(260px,1fr) max-content !important;

  }

}

@media (max-width: 760px) {

  .topbar, body.is-detail .topbar, body.is-watch .topbar { min-height:64px !important; height:64px !important; padding:0 14px !important; }

  body.is-library #catalogPage.catalog-section, body.is-library #favoritesPage.library-section, body.is-library #historyPage.library-section { width: min(100% - 24px,1900px) !important; padding-top:20px !important; }

  .profile-file-button { justify-self: start; }

}



/* Unified mobile UI. This final layer intentionally replaces the accumulated

   legacy phone layouts with one compact system shared by every route. */

@media (max-width: 820px) {

  :root { --mobile-gutter: 14px; --mobile-nav-h: 70px; }



  html, body { width: 100% !important; overflow-x: hidden !important; background: var(--bg-base) !important; }

  body { padding-bottom: calc(var(--mobile-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; }

  .site-shell, body.is-home .site-shell, body.is-library .site-shell, body.is-detail .site-shell, body.is-watch .site-shell {

    display: block !important; width: 100% !important; max-width: none !important; min-height: 100svh !important;

    overflow: clip !important; background: var(--bg-base) !important;

  }



  /* Header */

  .topbar, body.is-detail .topbar, body.is-watch .topbar {

    position: sticky !important; inset: 0 0 auto !important; z-index: 1000 !important;

    display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important;

    grid-template-rows: 52px 44px !important; gap: 4px 10px !important;

    width: 100% !important; height: 108px !important; min-height: 108px !important;

    padding: 6px var(--mobile-gutter) 8px !important; background: rgba(8,9,12,.96) !important;

    border-bottom: 1px solid rgba(255,255,255,.08) !important; backdrop-filter: blur(18px) !important;

  }

  .topbar .logo, body.is-detail .topbar .logo {

    grid-area: 1 / 1 !important; min-width: 0 !important; gap: 7px !important; padding: 0 !important;

    font-size: 19px !important;

  }

  .topbar .logo-mark { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }

  .logo-word { display: inline !important; }

  .header-nav { display: none !important; }

  .top-actions { grid-area: 1 / 3 !important; display: flex !important; justify-self: end !important; gap: 7px !important; }

  .notification-button, .profile-button {

    width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important;

    border: 1px solid rgba(255,255,255,.08) !important; border-radius: 50% !important; background: #15171c !important;

  }

  .profile-button span, #profileButtonName { display: none !important; }

  .profile-avatar { width: 32px !important; height: 32px !important; }

  .top-search {

    grid-area: 2 / 1 / 3 / 4 !important; width: 100% !important; max-width: none !important; height: 44px !important;

    display: grid !important; grid-template-columns: 42px minmax(0,1fr) !important; margin: 0 !important;

    border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; background: #15171c !important;

  }

  .top-search button { width: 42px !important; height: 42px !important; }

  .top-search input { height: 42px !important; min-width: 0 !important; padding: 0 12px 0 0 !important; font-size: 13px !important; }



  /* Bottom navigation */

  .sidebar { display: contents !important; }

  .sidebar > .nav:not(.nav--footer) {

    position: fixed !important; z-index: 1200 !important; left: 10px !important; right: 10px !important;

    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; display: grid !important;

    grid-template-columns: repeat(5,minmax(0,1fr)) !important; width: auto !important; height: var(--mobile-nav-h) !important;

    gap: 3px !important; padding: 6px !important; border: 1px solid rgba(255,255,255,.1) !important;

    border-radius: 20px !important; background: rgba(17,19,24,.96) !important; box-shadow: 0 18px 48px rgba(0,0,0,.5) !important;

    backdrop-filter: blur(18px) !important;

  }

  .sidebar > .nav:not(.nav--footer) a {

    display: grid !important; grid-template-rows: 26px 14px !important; place-items: center !important; gap: 2px !important;

    width: 100% !important; min-height: 56px !important; padding: 6px 1px !important; border: 0 !important;

    border-radius: 14px !important; background: transparent !important; color: #8f939c !important;

    font-size: 9px !important; line-height: 1 !important; text-align: center !important;

  }

  .sidebar > .nav:not(.nav--footer) a span { display: grid !important; width: 26px !important; height: 26px !important; place-items: center !important; font-size: 18px !important; }

  .sidebar > .nav:not(.nav--footer) a.is-active { color: #ff9367 !important; background: rgba(255,255,255,.07) !important; }

  .sidebar > .nav:not(.nav--footer) .nav-mobile-settings, .nav--footer, .bottom-nav { display: none !important; }



  /* Shared page rhythm */

  .home-page, body.is-home .home-page, body.is-library .home-page, .detail-page, body.is-detail .detail-page {

    width: 100% !important; max-width: none !important; margin: 0 !important;

    padding: 14px var(--mobile-gutter) calc(var(--mobile-nav-h) + 28px) !important; overflow: clip !important;

  }

  body.is-library #catalogPage.catalog-section, body.is-library #favoritesPage.library-section, body.is-library #historyPage.library-section,

  #profilePage.profile-page, #settingsPage.settings-section {

    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 0 34px !important;

  }

  .page-heading { display: none !important; }

  .section-head { margin: 0 0 14px !important; }

  .section-head h2 { font-size: clamp(25px,8vw,32px) !important; line-height: 1 !important; letter-spacing: -.035em !important; }



  /* Home */

  body.is-home #continueCard {

    width: calc(100% + (var(--mobile-gutter) * 2)) !important; margin: -14px calc(var(--mobile-gutter) * -1) 34px !important;

    border-radius: 0 !important; overflow: hidden !important;

  }

  body.is-home #continueWatch.hero-carousel.watch-progress {

    width: 100% !important; min-height: min(67svh,520px) !important; padding: 26px var(--mobile-gutter) !important;

    align-content: end !important; border: 0 !important; border-radius: 0 !important; background-position: center !important;

  }

  body.is-home .hero-carousel__copy { width: 100% !important; max-width: 100% !important; }

  body.is-home .hero-carousel.watch-progress h3 { max-width: 95% !important; font-size: clamp(35px,11vw,48px) !important; line-height: .96 !important; }

  body.is-home .poster-section { margin: 0 0 38px !important; padding: 0 !important; }

  body.is-home .poster-grid, #popularGrid, #recommendationsGrid, #ongoingGrid, #moviesGrid {

    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important;

    grid-auto-columns: minmax(142px,43vw) !important; gap: 12px !important; width: calc(100% + var(--mobile-gutter)) !important;

    margin-right: calc(var(--mobile-gutter) * -1) !important; padding: 0 var(--mobile-gutter) 8px 0 !important;

    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important;

  }

  body.is-home .poster-grid::-webkit-scrollbar { display: none !important; }

  body.is-home .poster-card { width: 100% !important; min-width: 0 !important; aspect-ratio: 2/3 !important; scroll-snap-align: start !important; border-radius: 14px !important; }

  .poster-card strong { font-size: 13px !important; line-height: 1.18 !important; }

  .card-heart { top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; }



  /* Catalog, favorites, history */

  .catalog-toolbar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; margin: 0 0 22px !important; }

  .catalog-toolbar label { min-width: 0 !important; font-size: 11px !important; }

  .catalog-toolbar label:last-child { grid-column: 1/-1 !important; }

  .catalog-toolbar select { width: 100% !important; min-width: 0 !important; height: 46px !important; padding: 0 11px !important; border-radius: 11px !important; font-size: 12px !important; }

  .catalog-grid, .library-grid, .results { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 11px !important; }

  .catalog-grid .poster-card, .library-grid .poster-card, .results .poster-card { width: 100% !important; min-width: 0 !important; border-radius: 14px !important; }

  #catalogMore.load-more-episodes { min-width: 164px !important; min-height: 44px !important; margin: 24px auto 36px !important; border-radius: 11px !important; }

  body.is-library #historyGrid.history-list { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px 11px !important; width: 100% !important; }

  body.is-library .history-card { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; }

  body.is-library .history-card__poster { width: 100% !important; height: auto !important; aspect-ratio: 16/10 !important; border-radius: 13px !important; }

  body.is-library .history-card__body { display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important; padding: 9px 2px 0 !important; }

  body.is-library .history-card__body strong { font-size: 13px !important; }



  /* Profile */

  .profile-hero { min-height: 300px !important; border-radius: 17px !important; }

  .profile-hero__fade { background: linear-gradient(0deg,rgba(5,6,8,.92),rgba(5,6,8,.08) 70%) !important; }

  .profile-hero__identity { left: 18px !important; right: 18px !important; bottom: 20px !important; max-width: none !important; flex-direction: row !important; align-items: flex-end !important; gap: 13px !important; }

  .profile-hero__avatar { width: 82px !important; height: 82px !important; flex-basis: 82px !important; border-width: 3px !important; }

  .profile-hero__identity h1 { font-size: clamp(28px,9vw,38px) !important; }

  .profile-hero__identity p { margin-top: 5px !important; font-size: 13px !important; }

  .profile-edit-button { top: 14px !important; right: 14px !important; bottom: auto !important; min-width: 0 !important; min-height: 40px !important; padding: 0 13px !important; font-size: 12px !important; }

  .profile-member-since { margin-top: 12px !important; }

  .profile-overview { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 22px !important; }

  .profile-statistics-card, .profile-friends-card { min-height: 0 !important; padding: 19px !important; border-radius: 16px !important; }

  .profile-statline strong { font-size: 22px !important; }

  .profile-friends-list { max-height: 220px !important; }

  .profile-content-section { margin-top: 32px !important; }

  .profile-section-head h2 { font-size: 25px !important; }

  .profile-favorites-rail { display: flex !important; gap: 11px !important; overflow-x: auto !important; padding-bottom: 8px !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; }

  .profile-favorite-card { flex: 0 0 43vw !important; max-width: 180px !important; scroll-snap-align: start !important; border-radius: 13px !important; }

  .profile-activity > div { flex-direction: column !important; gap: 7px !important; padding: 14px 0 !important; }



  /* Settings */

  .settings-title { margin-bottom: 20px !important; }

  .settings-title h1 { font-size: 38px !important; }

  .settings-preview { min-height: 160px !important; padding: 18px !important; border-radius: 16px !important; }

  .settings-preview__avatar { width: 72px !important; height: 72px !important; }

  .settings-stack { margin-top: 24px !important; }

  .settings-clean-section { padding: 26px 0 !important; }

  .settings-clean-row { grid-template-columns: 1fr !important; gap: 11px !important; min-height: 0 !important; padding: 15px 0 !important; }

  .settings-clean-row select, .settings-clean-row input[type="text"] { width: 100% !important; background: #17191e !important; color: #fff !important; }

  .settings-clean-row input[type="checkbox"] { justify-self: start !important; }

  .profile-file-button { justify-self: stretch !important; width: 100% !important; min-width: 0 !important; }

  .settings-save-row { align-items: stretch !important; flex-direction: column !important; }

  .settings-save-button { width: 100% !important; }



  /* Anime detail */

  body.is-detail:not(.is-watch) #detailPage { padding: 0 var(--mobile-gutter) calc(var(--mobile-nav-h) + 28px) !important; }

  body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { width: 100% !important; max-width: none !important; }

  body.is-detail:not(.is-watch) #detailPage .detail-banner { height: 132px !important; margin: 0 0 22px !important; border-radius: 0 0 12px 12px !important; }

  body.is-detail:not(.is-watch) #detailPage .anime-detail-main { grid-template-columns: 104px minmax(0,1fr) !important; gap: 15px !important; }

  body.is-detail:not(.is-watch) #detailPage .poster-column { max-width: 104px !important; }

  body.is-detail:not(.is-watch) #detailPage .anime-info { padding-top: 0 !important; }

  body.is-detail:not(.is-watch) #detailPage .title-line h1 { font-size: clamp(25px,8vw,35px) !important; line-height: .98 !important; }

  body.is-detail:not(.is-watch) #detailPage .subtitle { margin: 7px 0 10px !important; font-size: 11px !important; }

  body.is-detail:not(.is-watch) #detailPage .chips { gap: 5px !important; margin-bottom: 11px !important; }

  body.is-detail:not(.is-watch) #detailPage .chips span { min-height: 24px !important; padding: 0 7px !important; font-size: 10px !important; }

  body.is-detail:not(.is-watch) #detailPage .description { font-size: 12px !important; line-height: 1.5 !important; }

  body.is-detail:not(.is-watch) #detailPage .poster-actions { grid-column: 1/-1 !important; gap: 8px !important; margin-top: 14px !important; }

  body.is-detail:not(.is-watch) #detailPage .poster-actions button { min-height: 40px !important; padding: 0 13px !important; font-size: 12px !important; }

  .detail-episodes { margin-top: 34px !important; }

  .detail-episodes button { min-height: 42px !important; border-radius: 9px !important; font-size: 11px !important; }

  .detail-extra { margin-top: 34px !important; }



  /* Watch */

  body.is-watch .detail-page { padding: 12px var(--mobile-gutter) calc(var(--mobile-nav-h) + 24px) !important; }

  .watch-player-page { width: 100% !important; padding: 0 !important; }

  .ah-player { width: 100% !important; max-width: none !important; aspect-ratio: 16/9 !important; border-radius: 10px !important; }

  .ah-player__top { gap: 2px !important; padding: 7px !important; overflow-x: auto !important; scrollbar-width: none !important; }

  .ah-player-select > button { min-height: 32px !important; max-width: 108px !important; padding: 4px 7px !important; }

  .ah-player-select span { font-size: 10px !important; }

  .ah-player-select__menu { max-height: min(54svh,330px) !important; }

  .ah-player__center { width: 52px !important; height: 52px !important; }

  .ah-player__center svg { width: 28px !important; height: 31px !important; }

  .ah-player__controls { padding: 26px 8px 6px !important; }

  .ah-player__row { gap: 2px !important; }

  .ah-player__icon, .ah-player-quality > button { min-width: 32px !important; height: 32px !important; padding: 0 6px !important; }

  .ah-player__time { font-size: 11px !important; }

  .ah-player__volume { display: none !important; }

  .ah-episode-rail-wrap { grid-template-columns: minmax(0,1fr) !important; width: 100% !important; margin-top: 11px !important; }

  .ah-episode-arrow { display: none !important; }

  .ah-episode-card { min-width: 92px !important; min-height: 44px !important; padding: 0 13px !important; font-size: 11px !important; }



  /* Search */

  .search-modal { padding: 0 !important; align-items: stretch !important; }

  .search-modal__panel { width: 100% !important; min-height: 100svh !important; max-height: 100svh !important; padding: 18px var(--mobile-gutter) !important; border: 0 !important; border-radius: 0 !important; background: #08090c !important; }

  .search-modal__head h2 { font-size: 27px !important; }

  #searchModal .search-modal__form { grid-template-columns: 22px minmax(0,1fr) 38px !important; height: 54px !important; }

  #searchModal .search-modal__form input { height: 52px !important; font-size: 13px !important; }

  .search-kind-tabs { gap: 5px !important; }

  .search-kind-tabs button { min-height: 42px !important; font-size: 12px !important; }

  #searchModalResults .user-search-card { grid-template-columns: 48px minmax(0,1fr) 20px !important; min-height: 70px !important; padding: 10px !important; }

  #searchModalResults .user-search-card .user-search-card__avatar { width: 48px !important; height: 48px !important; }

}



@media (max-width: 390px) {

  :root { --mobile-gutter: 11px; }

  .logo-word { font-size: 18px !important; }

  body.is-home .poster-grid, #popularGrid, #recommendationsGrid, #ongoingGrid, #moviesGrid { grid-auto-columns: 44vw !important; }

  .catalog-grid, .library-grid, .results { gap: 9px !important; }

  .profile-edit-button span { display: none !important; }

  body.is-detail:not(.is-watch) #detailPage .anime-detail-main { grid-template-columns: 92px minmax(0,1fr) !important; gap: 12px !important; }

  body.is-detail:not(.is-watch) #detailPage .poster-column { max-width: 92px !important; }

  .ah-player-quality > button { font-size: 10px !important; }

}



.bottom-nav .bottom-nav-icon {

  display: block;

  width: 22px;

  height: 22px;

  object-fit: contain;

}



/* Compact mobile search results: keep the title below the poster's top edge. */

@media (max-width: 820px) {

  #searchModalResults .search-result-card {

    min-height: 132px !important;

    height: 132px !important;

    padding: 38px 12px 12px 108px !important;

    justify-content: flex-start !important;

  }



  #searchModalResults .search-result-title {

    align-self: auto !important;

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.22 !important;

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;

    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;

  }



  #searchModalResults .search-result-meta {

    margin-top: 12px !important;

    font-size: 11px !important;

  }

}



/* Reference-style mobile header: one row with an anchored popup menu. */

.mobile-menu-button { display: none; }

@media (max-width: 820px) {

  body { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }

  .topbar, body.is-detail .topbar, body.is-watch .topbar {

    display: grid !important; grid-template-columns: minmax(0,1fr) 42px 42px auto !important;

    grid-template-rows: 52px !important; gap: 7px !important; width: 100% !important;

    height: 64px !important; min-height: 64px !important; padding: 6px 12px !important; background: var(--bg-base) !important;

  }

  .topbar .logo, body.is-detail .topbar .logo { grid-area: 1/1 !important; align-self: center !important; min-width: 0 !important; color: #a8abb2 !important; }

  .topbar .logo-mark { display: none !important; }

  .topbar .logo-word { display: block !important; overflow: hidden !important; font-size: 21px !important; font-weight: 500 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  .mobile-menu-button {

    grid-area: 1/2 !important; display: grid !important; width: 42px !important; height: 42px !important; place-items: center !important;

    align-self: center !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important;

    background: #17191e !important; color: #eceef2 !important; cursor: pointer !important;

  }

  .mobile-menu-button svg { width: 23px !important; height: 23px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; }

  body.mobile-menu-open .mobile-menu-button { color: #ff9367 !important; background: #22242a !important; }

  .top-search {

    grid-area: 1/3 !important; align-self: center !important; display: grid !important; width: 42px !important; max-width: 42px !important;

    height: 42px !important; grid-template-columns: 42px !important; overflow: hidden !important; border: 0 !important;

    border-radius: 13px !important; background: #17191e !important;

  }

  .top-search button { width: 42px !important; height: 42px !important; }

  .top-search input { display: none !important; }

  .top-actions { grid-area: 1/4 !important; align-self: center !important; display: flex !important; gap: 7px !important; }

  .notification-button, .profile-button { width: 42px !important; min-width: 42px !important; height: 42px !important; border: 0 !important; border-radius: 13px !important; background: #17191e !important; }

  .profile-button { border-radius: 50% !important; background: transparent !important; }

  .profile-avatar { width: 42px !important; height: 42px !important; }

  .sidebar > .nav:not(.nav--footer) {

    position: fixed !important; z-index: 1300 !important; top: 72px !important; right: 12px !important; bottom: auto !important; left: auto !important;

    display: grid !important; grid-template-columns: 1fr !important; width: min(276px,calc(100vw - 24px)) !important; height: auto !important;

    gap: 3px !important; padding: 12px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important;

    background: rgba(15,16,21,.98) !important; box-shadow: 0 22px 60px rgba(0,0,0,.62) !important;

    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) scale(.98) !important;

    transform-origin: top right !important; transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;

  }

  body.mobile-menu-open .sidebar > .nav:not(.nav--footer) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; }

  .sidebar > .nav:not(.nav--footer) a {

    display: grid !important; grid-template-columns: 34px minmax(0,1fr) !important; grid-template-rows: 1fr !important;

    justify-items: start !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 48px !important;

    padding: 0 11px !important; border-radius: 11px !important; color: #d2d4d9 !important; font-size: 15px !important; text-align: left !important;

  }

  .sidebar > .nav:not(.nav--footer) a span { display: grid !important; width: 30px !important; height: 30px !important; place-items: center !important; color: #f0f1f3 !important; font-size: 18px !important; }

  .sidebar > .nav:not(.nav--footer) a .mobile-nav-icon img {

    display: block !important;

    width: 24px !important;

    height: 24px !important;

    object-fit: contain !important;

  }

  .sidebar > .nav:not(.nav--footer) a .mobile-nav-icon--premium img { width: 22px !important; height: 22px !important; }

  .sidebar > .nav:not(.nav--footer) a.is-active, .sidebar > .nav:not(.nav--footer) a:hover { color: #fff !important; background: #24262c !important; }

  .home-page, body.is-home .home-page, body.is-library .home-page, .detail-page, body.is-detail .detail-page { padding-bottom: 34px !important; }

}



@media (max-width: 390px) {

  .topbar, body.is-detail .topbar, body.is-watch .topbar { grid-template-columns: minmax(0,1fr) 40px 40px auto !important; gap: 5px !important; padding-inline: 10px !important; }

  .mobile-menu-button, .top-search, .top-search button, .notification-button, .profile-button { width: 40px !important; min-width: 40px !important; height: 40px !important; }

  .profile-avatar { width: 40px !important; height: 40px !important; }

  .topbar .logo-word { font-size: 19px !important; }

}



/* Mobile final pass: touch-first behavior and route-safe spacing. */

@media (max-width: 820px) {

  /* Exact centering for the compact header search icon. */

  .top-search button {

    position: relative !important;

    display: grid !important;

    place-items: center !important;

    padding: 0 !important;

  }

  .top-search button::before {

    position: absolute !important;

    inset: 0 !important;

    width: 19px !important;

    height: 19px !important;

    margin: auto !important;

    transform: none !important;

  }



  /* Mobile headings are clean text without the desktop star marker. */

  .section-head h2::before,

  .section-head h2::after,

  .poster-section .section-head h2::before,

  .poster-section .section-head h2::after {

    content: none !important;

    display: none !important;

  }

  .section-head h2 { gap: 0 !important; }



  /* Touch screens must never enter the legacy desktop hover state. */

  .poster-card:hover,

  .catalog-grid .poster-card:hover,

  .poster-grid .poster-card:hover,

  .library-grid .poster-card:hover,

  .results .poster-card:hover,

  .favorite-card:hover,

  .mini-card:hover {

    border-color: transparent !important;

    background: #08090c !important;

    box-shadow: none !important;

    filter: none !important;

    transform: none !important;

  }

  .poster-card:hover > img,

  .catalog-grid .poster-card:hover > img,

  .poster-grid .poster-card:hover > img,

  .library-grid .poster-card:hover > img,

  .results .poster-card:hover > img,

  .favorite-card:hover img {

    filter: saturate(1.08) contrast(1.03) !important;

    transform: none !important;

  }

  .poster-card:hover::after,

  .catalog-grid .poster-card:hover::after,

  .poster-grid .poster-card:hover::after,

  .results .poster-card:hover::after {

    background: linear-gradient(180deg, rgba(3,5,8,0) 38%, rgba(3,5,8,.16) 62%, rgba(3,5,8,.82) 100%) !important;

  }

  .poster-card__overlay,

  .poster-card__play,

  .card-favorite { display: none !important; }



  /* Favorites: three swipeable lanes. Hold a card, then drag it to a lane. */

  body.is-library #favoritesGrid.favorites-board {

    display: grid !important;

    grid-template-columns: repeat(3, calc(100vw - 38px)) !important;

    gap: 12px !important;

    width: calc(100% + var(--mobile-gutter)) !important;

    margin-right: calc(var(--mobile-gutter) * -1) !important;

    padding: 0 var(--mobile-gutter) 14px 0 !important;

    overflow-x: auto !important;

    overflow-y: visible !important;

    scroll-snap-type: x mandatory !important;

    scrollbar-width: none !important;

    touch-action: pan-x pan-y !important;

  }

  body.is-library #favoritesGrid.favorites-board::-webkit-scrollbar { display: none !important; }

  body.is-library #favoritesGrid .favorite-column {

    min-width: 0 !important;

    min-height: 320px !important;

    padding: 0 2px 22px !important;

    border-right: 0 !important;

    scroll-snap-align: start !important;

  }

  body.is-library #favoritesGrid .favorite-column__drop {

    min-height: 250px !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 16px 10px !important;

  }

  body.is-library #favoritesGrid .favorite-remove {

    display: grid !important;

    width: 30px !important;

    height: 30px !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    background: rgba(7,8,10,.86) !important;

    color: #fff !important;

  }

  body.is-library #favoritesGrid .favorite-card { touch-action: pan-y !important; }

  body.is-library #favoritesGrid .favorite-card.is-touch-dragging { opacity: .3 !important; }

  body.favorite-touch-drag-active { overflow: hidden !important; touch-action: none !important; }

  .favorite-touch-ghost {

    position: fixed !important;

    z-index: 3000 !important;

    top: 0 !important;

    left: 0 !important;

    width: 126px !important;

    margin: 0 !important;

    opacity: .92 !important;

    pointer-events: none !important;

    transform-origin: top left !important;

    filter: drop-shadow(0 18px 32px rgba(0,0,0,.62)) !important;

  }

  .favorite-touch-ghost .favorite-remove { display: none !important; }



  /* Detail: poster-first mobile composition; desktop banner is intentionally absent. */

  body.is-detail:not(.is-watch) #detailPage.detail-page {

    width: 100% !important;

    padding: 20px 18px 42px !important;

    overflow: visible !important;

  }

  body.is-detail:not(.is-watch) #detailPage .anime-detail-layout {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-banner {

    display: none !important;

  }

  body.is-detail:not(.is-watch) #detailPage .anime-detail-main {

    display: grid !important;

    grid-template-columns: minmax(0,1fr) !important;

    gap: 24px !important;

    width: 100% !important;

  }

  body.is-detail:not(.is-watch) #detailPage .poster-column {

    width: min(70vw, 250px) !important;

    max-width: 250px !important;

    margin: 0 auto !important;

  }

  body.is-detail:not(.is-watch) #detailPage .anime-poster {

    width: 100% !important;

    border-radius: 13px !important;

  }

  body.is-detail:not(.is-watch) #detailPage .anime-info {

    width: 100% !important;

    padding: 0 !important;

    align-items: flex-start !important;

    text-align: left !important;

  }

  body.is-detail:not(.is-watch) #detailPage .title-line h1,

  body.is-detail:not(.is-watch) #detailPage .anime-info h1 {

    font-size: clamp(29px, 9vw, 40px) !important;

    line-height: 1 !important;

    text-align: left !important;

  }

  body.is-detail:not(.is-watch) #detailPage .description {

    width: 100% !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

  }

  body.is-detail:not(.is-watch) #detailPage .poster-actions {

    width: 100% !important;

    grid-column: auto !important;

    flex-wrap: wrap !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-episodes,

  body.is-detail:not(.is-watch) #detailPage .detail-extra { width: 100% !important; }



  /* Watch: safe gutters and menus that may extend beyond the video frame. */

  body.is-watch #detailPage.detail-page {

    width: 100% !important;

    padding: 18px 14px 38px !important;

    overflow: visible !important;

  }

  body.is-watch .watch-player-page {

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    overflow: visible !important;

  }

  body.is-watch .ah-player {

    width: 100% !important;

    max-width: 100% !important;

    overflow: visible !important;

  }

  body.is-watch .ah-player__video,

  body.is-watch .ah-player__upscale,

  body.is-watch .ah-player__embed,

  body.is-watch .ah-player__backdrop {

    border-radius: inherit !important;

  }

  body.is-watch .ah-player__top {

    display: grid !important;

    grid-template-columns: repeat(4,minmax(0,1fr)) !important;

    gap: 2px !important;

    overflow: visible !important;

    padding: 6px !important;

  }

  body.is-watch .ah-player-select { min-width: 0 !important; }

  body.is-watch .ah-player-select > button {

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 31px !important;

    gap: 3px !important;

    padding: 4px 5px !important;

  }

  body.is-watch .ah-player-select span { font-size: 9px !important; }

  body.is-watch .ah-player-select b { flex: 0 0 auto !important; font-size: 10px !important; }

  body.is-watch .ah-player-select__menu {

    z-index: 80 !important;

    min-width: min(210px, calc(100vw - 40px)) !important;

    max-height: 128px !important;

    overflow-y: auto !important;

  }

  body.is-watch .ah-player-select:nth-child(n+3) .ah-player-select__menu {

    right: 0 !important;

    left: auto !important;

  }

  body.is-watch .ah-player-select__menu button { min-height: 38px !important; font-size: 11px !important; }

}



@media (max-width: 390px) {

  body.is-detail:not(.is-watch) #detailPage.detail-page { padding-inline: 15px !important; }

  body.is-watch #detailPage.detail-page { padding-inline: 11px !important; }

  body.is-library #favoritesGrid.favorites-board { grid-template-columns: repeat(3, calc(100vw - 30px)) !important; }

}



/* Mobile polish 2: overlay player menus, corrected search glyph and compact profile/history. */

@media (max-width: 820px) {

  /* Draw the magnifier ourselves for optical rather than box centering. */

  .top-search button::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 21px !important;

    height: 21px !important;

    margin: auto !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: #a9abb2 !important;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15.4 15.4 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15.4 15.4 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;

    transform: translateX(-1px) !important;

    box-sizing: border-box !important;

  }

  .top-search button::after {

    content: none !important;

    display: none !important;

  }



  /* Each selector opens one full-width floating sheet over the video. */

  body.is-watch .ah-player__top {

    inset: 0 !important;

    z-index: 40 !important;

    isolation: isolate !important;

    align-content: start !important;

    grid-auto-rows: max-content !important;

    pointer-events: none !important;

  }

  body.is-watch .ah-player-select {

    position: static !important;

    pointer-events: auto !important;

  }

  body.is-watch .ah-player-select__menu {

    position: absolute !important;

    z-index: 120 !important;

    top: 42px !important;

    right: 8px !important;

    left: 8px !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    max-height: calc(100% - 52px) !important;

    padding: 7px !important;

    overflow-y: auto !important;

    border-radius: 12px !important;

    background: rgba(12,13,16,.98) !important;

    box-shadow: 0 16px 44px rgba(0,0,0,.72) !important;

    backdrop-filter: blur(16px) !important;

  }

  body.is-watch .ah-player-select:nth-child(n+3) .ah-player-select__menu {

    right: 8px !important;

    left: 8px !important;

  }

  body.is-watch .ah-player-select__menu button {

    min-height: 40px !important;

    padding: 8px 10px !important;

  }



  /* One readable history entry per row. */

  html body.is-library #historyPage #historyGrid.history-list {

    display: grid !important;

    grid-template-columns: 100% !important;

    gap: 14px !important;

    width: 100% !important;

  }

  body.is-library #historyGrid .continue-history-card,

  body.is-library #historyGrid .history-card {

    width: 100% !important;

    min-width: 0 !important;

  }

  body.is-library #historyGrid .continue-history-cover,

  body.is-library #historyGrid .history-card__poster {

    width: 100% !important;

    aspect-ratio: 16/7 !important;

  }



  /* Profile hero stays a banner, and the add action shares one line with its title. */

  #profilePage .profile-hero {

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    aspect-ratio: 16/7 !important;

    border-radius: 15px !important;

  }

  #profilePage .profile-section-head {

    display: grid !important;

    grid-template-columns: minmax(0,1fr) auto !important;

    align-items: center !important;

    gap: 10px !important;

  }

  #profilePage .profile-section-head > div { min-width: 0 !important; }

  #profilePage .profile-section-head h2 {

    max-width: none !important;

    font-size: clamp(21px,6.7vw,27px) !important;

    line-height: 1 !important;

    white-space: nowrap !important;

  }

  #profilePage .profile-add-favorite {

    min-width: 108px !important;

    min-height: 42px !important;

    padding: 0 12px !important;

    font-size: 12px !important;

    white-space: nowrap !important;

  }

}



/* Mobile search: one icon source and deterministic optical centering. */



/* Full-bleed public profile banner with an avatar straddling its lower edge. */

body.is-library #profilePage.profile-page:not([hidden]) {

  width: 100vw !important;

  max-width: none !important;

  margin: 0 0 0 calc(50% - 50vw) !important;

  padding: 0 0 100px !important;

}



/* The profile hero starts directly under the shared header. */

body.is-library.is-profile .home-page {

  padding-top: 0 !important;

}



/* Keep the desktop banner footprint visible while its image is being fetched. */

@media (min-width: 821px) {

  body.is-detail:not(.is-watch) #detailPage .detail-banner.is-loading {

    display: block !important;

    background: linear-gradient(100deg, #15171c 24%, #252830 42%, #15171c 62%) !important;

    background-size: 220% 100% !important;

    animation: detail-banner-shimmer 1.25s linear infinite !important;

  }

}

body.is-detail:not(.is-watch) #detailPage .detail-banner.is-loading img {

  opacity: 0 !important;

}

body.is-detail:not(.is-watch) #detailPage .detail-banner img {

  transition: opacity 180ms ease;

}

@keyframes detail-banner-shimmer {

  from { background-position: 100% 0; }

  to { background-position: -100% 0; }

}

body.is-library #profilePage .profile-hero {

  width: 100% !important;

  min-height: 540px !important;

  overflow: visible !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: #08090b !important;

}

body.is-library #profilePage .profile-hero__banner,

body.is-library #profilePage .profile-hero__fade {

  inset: 0 0 auto !important;

  height: 320px !important;

  border-radius: 0 !important;

}

body.is-library #profilePage .profile-hero__identity {

  left: max(28px, calc((100vw - 1540px) / 2)) !important;

  right: max(28px, calc((100vw - 1540px) / 2)) !important;

  top: 250px !important;

  bottom: auto !important;

  max-width: none !important;

  flex-direction: row !important;

  align-items: flex-start !important;

  gap: 14px !important;

}

body.is-library #profilePage .profile-hero__boundary { width: 140px !important; flex: 0 0 140px !important; }

body.is-library #profilePage .profile-hero__details { padding-top: 16px !important; }

body.is-library #profilePage .profile-hero__avatar {

  width: 140px !important;

  height: 140px !important;

  flex-basis: 140px !important;

  border: 5px solid #08090b !important;

}

body.is-library #profilePage .profile-hero__identity h1 {

  font-size: clamp(32px, 4vw, 54px) !important;

}

body.is-library #profilePage .profile-edit-button {

  right: max(28px, calc((100vw - 1540px) / 2)) !important;

  bottom: 58px !important;

}

body.is-library #profilePage .profile-hero__actions {

  top: 24px !important;

  right: max(28px, calc((100vw - 1540px) / 2)) !important;

  bottom: auto !important;

  height: auto !important;

  align-items: flex-start !important;

}

body.is-library #profilePage .profile-hero__actions button { height: 40px !important; align-self: flex-start !important; }

body.is-library #profilePage > :not(.profile-hero) {

  width: min(100% - 96px, 1540px) !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



body.is-detail:not(.is-watch) #detailPage .detail-episodes__unavailable {

  display: grid;

  gap: 8px;

  width: 100%;

  padding: 28px 30px;

  border: 1px solid rgba(255, 255, 255, .08);

  border-radius: 16px;

  background: #15171b;

}

body.is-detail:not(.is-watch) #detailPage .detail-episodes__unavailable strong {

  color: #f5f5f6;

  font-size: clamp(19px, 2vw, 25px);

  font-weight: 900;

}

body.is-detail:not(.is-watch) #detailPage .detail-episodes__unavailable p {

  margin: 0;

  color: rgba(255, 255, 255, .56);

  font-size: 14px;

  line-height: 1.5;

}

#openWatchPage:disabled {

  cursor: default;

  opacity: .58;

}



@media (max-width: 760px) {

  body.is-detail:not(.is-watch) #detailPage .detail-episodes__unavailable {

    padding: 21px 19px;

    border-radius: 13px;

  }

}



/* Registration avatar roulette. */

.avatar-roulette {

  position: relative;

  display: grid;

  gap: 9px;

  margin: 6px 0 4px;

  padding: 12px 0 10px;

  overflow: hidden;

  border: 1px solid #2d3038;

  border-radius: 15px;

  background: #111318;

}

.avatar-roulette[hidden] { display: none !important; }

.avatar-roulette > p { margin: 0 14px; color: #c9cbd1; font-size: 12px; font-weight: 800; }

.avatar-roulette__viewport {

  width: 100%;

  overflow: hidden;

  scroll-behavior: smooth;

  mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);

}

.avatar-roulette__track { display: flex; gap: 10px; width: max-content; padding: 4px calc(50% - 35px); }

.avatar-roulette__track img {

  width: 70px;

  height: 70px;

  flex: 0 0 70px;

  border: 3px solid transparent;

  border-radius: 50%;

  object-fit: cover;

  opacity: .58;

  transform: scale(.9);

  transition: transform .22s ease, opacity .22s ease, border-color .22s ease;

}

.avatar-roulette__track img.is-selected { opacity: 1; transform: scale(1); border-color: #ff986f; }

.avatar-roulette__marker { position: absolute; left: 50%; bottom: 5px; width: 0; height: 0; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #ff986f; }

.avatar-roulette.is-spinning .avatar-roulette__track img { filter: saturate(.9); }



@media (max-width: 820px) {



  body.is-library #profilePage .profile-hero {

    min-height: 600px !important;

    aspect-ratio: auto !important;

  }



  body.is-library #profilePage .profile-hero__banner,

  body.is-library #profilePage .profile-hero__fade {

    height: 245px !important;

  }



  body.is-library #profilePage .profile-hero__identity {

    left: 18px !important;

    right: 18px !important;

    top: 190px !important;

    bottom: auto !important;



    display: grid !important;

    grid-template-columns: 110px minmax(0, 1fr) !important;

    grid-template-rows: 110px auto !important;



    column-gap: 16px !important;

    row-gap: 8px !important;



    align-items: center !important;

  }



  /* Аватар */

  body.is-library #profilePage .profile-hero__boundary {

    grid-column: 1 !important;

    grid-row: 1 !important;



    width: 110px !important;

    height: 110px !important;

    flex-basis: auto !important;

  }



  body.is-library #profilePage .profile-avatar-shell {

    position: relative !important;

    display: block !important;



    width: 110px !important;

    height: 110px !important;

  }



  body.is-library #profilePage .profile-hero__avatar {

    width: 110px !important;

    height: 110px !important;

    flex-basis: 110px !important;

  }



  /*

   * Делаем ник и статус отдельными

   * элементами мобильной grid-сетки.

   */

  body.is-library #profilePage .profile-hero__details {

    display: contents !important;

  }



  /* Ник под аватаркой */

  body.is-library #profilePage .profile-handle {

    grid-column: 1 !important;

    grid-row: 2 !important;



    margin: 0 !important;



    font-size: 13px !important;

    line-height: 1.2 !important;



    white-space: nowrap !important;

  }



  /* Старая корона около ника на мобиле не нужна */

  body.is-library #profilePage .profile-handle .premium-crown {

    display: none !important;

  }



  /* Статус сразу справа от аватарки */

  body.is-library #profilePage .profile-rank {

    grid-column: 2 !important;

    grid-row: 1 !important;



    align-self: center !important;

    justify-self: start !important;



    margin: 0 !important;

  }



  /* Premium-корона — сверху справа на аватарке */

  body.is-library #profilePage .profile-avatar-premium:not([hidden]) {

    display: flex !important;



    top: -3px !important;

    right: -3px !important;



    width: 31px !important;

    height: 31px !important;

  }



  /* Онлайн — снизу справа */

  body.is-library #profilePage .profile-avatar-presence {

    right: 3px !important;

    bottom: 3px !important;

  }



  body.is-library #profilePage .profile-edit-button {

    top: auto !important;

    right: 18px !important;

    bottom: 26px !important;

  }



  body.is-library #profilePage .profile-hero__actions {

    top: 14px !important;

    right: 14px !important;

    bottom: auto !important;

    height: auto !important;

  }



  body.is-library #profilePage .profile-hero__actions button {

    height: 36px !important;

  }



  body.is-library #profilePage > :not(.profile-hero) {

    width: calc(100% - 36px) !important;

  }

  .top-search,

  .top-search:hover,

  .top-search:focus-within {

    position: relative !important;

    display: block !important;

    padding: 0 !important;

    overflow: hidden !important;

  }



  .top-search button,

  .top-search:hover button,

  .top-search:focus-within button {

    position: absolute !important;

    inset: 0 !important;

    display: grid !important;

    place-items: center !important;

    width: 100% !important;

    height: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    transform: none !important;

  }



  .top-search button::before,

  .top-search button::after {

    content: none !important;

    display: none !important;

    -webkit-mask: none !important;

    mask: none !important;

  }



  .top-search button > svg {

    position: static !important;

    inset: auto !important;

    display: block !important;

    visibility: visible !important;

    flex: none !important;

    width: 20px !important;

    height: 20px !important;

    margin: 0 !important;

    overflow: visible !important;

    color: #a9abb2 !important;

    fill: none !important;

    stroke: currentColor !important;

    stroke-width: 2 !important;

    transform: translate(-1px, -1px) !important;

    transform-origin: center !important;

  }

}



@media (max-width: 360px) {

  #profilePage .profile-section-head h2 { font-size: 20px !important; }

  #profilePage .profile-add-favorite { min-width: 100px !important; padding-inline: 9px !important; font-size: 11px !important; }

}



/* Mobile header route lock: detail/watch must use the same single-row header. */

@media (max-width: 820px) {

  html:not([data-theme="light"]) body.is-detail .topbar,

  html:not([data-theme="light"]) body.is-watch .topbar,

  html body.is-detail .topbar,

  html body.is-watch .topbar {

    display: grid !important;

    grid-template-columns: minmax(0,1fr) 42px 42px auto !important;

    grid-template-rows: 52px !important;

    gap: 7px !important;

    width: 100% !important;

    height: 64px !important;

    min-height: 64px !important;

    padding: 6px 12px !important;

    align-items: center !important;

  }



}



@media (max-width: 390px) {

  html:not([data-theme="light"]) body.is-detail .topbar,

  html:not([data-theme="light"]) body.is-watch .topbar,

  html body.is-detail .topbar,

  html body.is-watch .topbar {

    grid-template-columns: minmax(0,1fr) 40px 40px auto !important;

    gap: 5px !important;

    padding-inline: 10px !important;

  }

}

body.is-detail:not(.is-watch) #detailPage .chips span[hidden] {

  display: none !important;

}



/* Per-title history removal: hover on desktop, always visible on touch screens. */

body.is-library #historyGrid .continue-history-card {

  position: relative !important;

}



body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 6;

  display: grid;

  place-items: center;

  width: 34px;

  height: 34px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 50%;

  background: rgba(8, 9, 11, .82);

  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);

  color: #fff;

  font: 700 25px/1 Arial, sans-serif;

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  transform: scale(.9);

  transition: opacity .16s ease, transform .16s ease, background-color .16s ease;

}



body.is-library :is(#historyGrid, #profileFavoritesRail) :is(.continue-history-card, .profile-favorite-card):hover .history-remove,

body.is-library :is(#historyGrid, #profileFavoritesRail) :is(.continue-history-card, .profile-favorite-card):focus-within .history-remove,

body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove:focus-visible {

  opacity: 1;

  pointer-events: auto;

  transform: scale(1);

}



body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove:hover,

body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove:focus-visible {

  background: rgba(207, 55, 55, .94);

  outline: none;

}



body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove.is-error {

  background: rgba(207, 55, 55, .94);

}



@media (hover: none), (pointer: coarse), (max-width: 760px) {

  body.is-library :is(#historyGrid, #profileFavoritesRail) .history-remove {

    top: 8px;

    right: 8px;

    width: 32px;

    height: 32px;

    opacity: 1;

    pointer-events: auto;

    transform: none;

  }

}



body.is-detail:not(.is-watch) #detailPage .detail-season-switcher {

  display: inline-flex;

  align-items: center;

  width: fit-content;

  margin-top: 14px;

  padding: 0;

  border: 0;

  background: transparent;

  font-size: 14px;

  font-weight: 700;

}



body.is-detail:not(.is-watch) #detailPage .detail-season-switcher[hidden] {

  display: none !important;

}



body.is-detail:not(.is-watch) #detailPage .detail-season-switcher select {

  min-width: 150px;

  padding: 7px 34px 7px 10px;

  border: 0;

  border-radius: 10px;

  background: #292a30;

  color: #fff;

  font: inherit;

  cursor: pointer;

  outline: none;

}



body.is-detail:not(.is-watch) #detailPage .detail-season-switcher select:focus-visible {

  box-shadow: 0 0 0 2px #ff9567;

}



body.is-detail:not(.is-watch) #detailPage .detail-season-switcher option {

  background: #1b1c20;

  color: #fff;

}



@media (max-width: 760px) {

  body.is-detail:not(.is-watch) #detailPage .detail-season-switcher {

    width: fit-content;

    box-sizing: border-box;

  }



  body.is-detail:not(.is-watch) #detailPage .detail-season-switcher select {

    min-width: 150px;

    max-width: min(70vw, 280px);

  }

}



/* Compact desktop navigation: Random and Premium are icon actions. */

.top-actions {

  display: flex !important;

  align-items: center !important;

  justify-self: end !important;

  gap: 5px !important;

}



.header-icon-action {

  display: grid;

  place-items: center;

  width: 40px;

  min-width: 40px;

  height: 40px;

  padding: 0;

  border: 0;

  border-radius: 10px;

  background: transparent;

  color: #c7c9ce;

  text-decoration: none;

  transition: color .2s ease, background .2s ease, opacity .2s ease;

}

.header-icon-action:hover,

.header-icon-action:focus-visible {

  background: rgba(255,255,255,.055);

  color: #fff;

  outline: none;

}

.header-icon-action svg {

  width: 20px;

  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.header-premium-action img { width: 23px; height: 23px; object-fit: contain; }

.header-premium-action:hover img { filter: brightness(1.12); }



@media (min-width: 1181px) {

  .topbar, body.is-detail .topbar, body.is-watch .topbar {

    grid-template-columns: minmax(205px,max-content) minmax(390px,1fr) minmax(240px,360px) max-content !important;

    column-gap: clamp(16px,1.65vw,30px) !important;

  }

  .topbar .logo, body.is-detail .topbar .logo { min-width: 205px !important; }

  .header-nav {

    display: flex !important;

    min-width: 0 !important;

    gap: clamp(14px,1.4vw,27px) !important;

  }

  .header-nav a { white-space: nowrap; }

  .top-search,

  .top-search:hover,

  .top-search:focus-within {

    width: min(26vw,360px) !important;

    min-width: 240px !important;

    justify-self: end !important;

  }

}



@media (min-width: 821px) and (max-width: 1180px) {

  .topbar, body.is-detail .topbar, body.is-watch .topbar {

    grid-template-columns: max-content minmax(260px,1fr) max-content !important;

  }

  .header-nav { display: none !important; }

  .top-search { width: min(44vw,440px) !important; justify-self: end !important; }

}



@media (max-width: 820px) {

  .header-icon-action {

    width: 38px !important;

    min-width: 38px !important;

    height: 38px !important;

    border-radius: 50% !important;

  }

}



@media (max-width: 520px) {

  .header-icon-action { display: none !important; }

}



/* Premium: matte hero, soft contour glow and typography instead of cards. */

.premium-page {

  padding: clamp(48px,6vw,88px) clamp(24px,5vw,84px) 96px !important;

  background: #070707 !important;

}

.premium-hero { max-width: 920px !important; margin-bottom: clamp(68px,8vw,112px) !important; }

.premium-hero__crown {

  position: relative;

  isolation: isolate;

  width: 154px !important;

  height: 154px !important;

  margin-bottom: 28px !important;

  border: 1px solid rgba(218,178,82,.58) !important;

  border-radius: 42px !important;

  background: #0c0c0b !important;

  box-shadow: 0 0 28px rgba(211,169,67,.12), inset 0 0 24px rgba(211,169,67,.035) !important;

  animation: premium-contour-glow 6.5s ease-in-out infinite;

}

.premium-hero__crown::after {

  content: "";

  position: absolute;

  inset: 8px;

  z-index: -1;

  border: 1px solid rgba(226,188,91,.14);

  border-radius: 34px;

  pointer-events: none;

}

.premium-hero__crown img { width: 96px !important; height: 96px !important; }

.premium-hero h1 {

  max-width: 880px;

  margin: 16px auto 22px !important;

  font-size: clamp(50px,6vw,88px) !important;

  line-height: .94 !important;

}

.premium-hero__lead {

  max-width: 590px !important;

  margin-bottom: 30px !important;

  color: #9b9b97 !important;

  font-size: 16px !important;

  line-height: 1.5 !important;

}

.premium-buy-button,

.premium-trial-button {

  min-height: 48px !important;

  border-radius: 11px !important;

  box-shadow: none !important;

  transform: none !important;

}

.premium-buy-button:hover { background: #e8c66e !important; }

.premium-current-status { margin-bottom: 0 !important; }



@keyframes premium-contour-glow {

  0%,100% { border-color: rgba(218,178,82,.42); box-shadow: 0 0 22px rgba(211,169,67,.09), inset 0 0 22px rgba(211,169,67,.025); }

  50% { border-color: rgba(235,199,106,.76); box-shadow: 0 0 42px rgba(211,169,67,.18), inset 0 0 30px rgba(211,169,67,.055); }

}



.premium-benefits {

  width: min(860px,100%);

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 0;

}

.premium-benefits article {

  min-width: 0;

  display: grid;

  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);

  align-items: baseline;

  column-gap: clamp(48px, 7vw, 110px);

  padding: 24px 0;

  border-top: 1px solid rgba(218,178,82,.24);

  background: transparent;

  text-align: left;

}

.premium-benefits article:last-child { border-bottom: 1px solid rgba(218,178,82,.24); }

.premium-benefits h2 {

  margin: 0;

  color: #f4f3ef;

  font-size: clamp(24px,2.2vw,32px);

  line-height: .98;

  letter-spacing: -.05em;

}

.premium-benefits p {

  max-width: none;

  margin: 0;

  color: #858580;

  font-size: 14px;

  line-height: 1.5;

}

.premium-plan {

  width: min(1320px,100%) !important;

  margin: 78px auto 0 !important;

  padding: 34px 0 0 !important;

  border: 0 !important;

  border-top: 1px solid rgba(255,255,255,.1) !important;

  border-radius: 0 !important;

  background: transparent !important;

}

.premium-plan > img { width: 48px !important; height: 48px !important; opacity: .9; }

.premium-plan h2 { font-size: 26px !important; }

.premium-plan button { min-height: 46px; border-radius: 10px; }



@media (max-width: 900px) {

  .premium-page { padding-top: 40px !important; }

  .premium-hero__crown { width: 132px !important; height: 132px !important; border-radius: 36px !important; }

  .premium-hero__crown img { width: 82px !important; height: 82px !important; }

  .premium-hero h1 { font-size: clamp(45px,12vw,66px) !important; }

}



@media (max-width: 600px) {

  .premium-hero__actions { display: grid !important; grid-template-columns: 1fr !important; }

  .premium-buy-button, .premium-trial-button { width: 100%; justify-content: center; }

  .premium-benefits article { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }

  .premium-benefits p { grid-column: 1; }

  .premium-plan { margin-top: 56px !important; }

}



/* Three-second entry mark: the muted silhouette is progressively filled by the real logo. */

.brand-intro {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-content: center;

  justify-items: center;

  gap: 18px;

  background: #050506;

  opacity: 0;

  transition: opacity .28s ease;

}

.brand-intro.is-running { opacity: 1; }

/* If app.js cannot start, release the pre-rendered cover instead of trapping the page. */
.brand-intro.is-prerendered { animation: brand-intro-failsafe 12s linear forwards; }

@keyframes brand-intro-failsafe {
  0%, 92% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

.brand-intro.is-leaving { opacity: 0; pointer-events: none; }

.brand-intro__mark { position: relative; width: 118px; aspect-ratio: 1; }

.brand-intro__outline,

.brand-intro__fill,

.brand-intro__fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.brand-intro__outline { filter: grayscale(1) brightness(.62); opacity: .32; }

.brand-intro__fill { overflow: hidden; clip-path: inset(100% 0 0); animation: brand-logo-fill 2.35s .28s cubic-bezier(.45,0,.2,1) forwards; }

.brand-intro__name { color: #f5f4f2; font-size: 22px; font-weight: 900; letter-spacing: -.04em; opacity: 0; animation: brand-name-in .55s 1.85s ease forwards; }

.brand-intro__bubble { position: absolute; bottom: 12px; width: 7px; height: 7px; border-radius: 50%; background: #ff966d; opacity: 0; }

.brand-intro__bubble--one { left: 29%; animation: brand-bubble 1.45s .55s ease-out forwards; }

.brand-intro__bubble--two { right: 26%; animation: brand-bubble 1.25s 1.05s ease-out forwards; }

@keyframes brand-logo-fill { to { clip-path: inset(0 0 0); } }

@keyframes brand-name-in { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(8px); } }

@keyframes brand-bubble { 0% { opacity: 0; transform: translateY(0) scale(.7); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-76px) scale(1.2); } }

.header-random-action[data-loading="1"] svg { animation: randomizer-working .7s linear infinite; }

@keyframes randomizer-working { to { transform: rotate(180deg); } }



@media (prefers-reduced-motion: reduce) {

  .premium-hero__crown { animation: none !important; }

  .brand-intro { display: none; }

}



/* Mobile title page: one calm centered axis from poster to actions. */

.ah-player-source,

.ah-player-telegram {

  min-height: 36px !important;

  font-size: 11.5px !important;

}

.ah-player-source { flex-basis: 88px !important; }

.ah-player-telegram { gap: 7px !important; padding-inline: 14px !important; }

.ah-player-telegram svg { width: 17px !important; height: 17px !important; }



@media (max-width: 760px) {

  body.is-detail:not(.is-watch) #detailPage .anime-info {

    align-items: center !important;

    text-align: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .title-line {

    width: 100% !important;

    justify-content: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .title-line h1,

  body.is-detail:not(.is-watch) #detailPage .anime-info h1,

  body.is-detail:not(.is-watch) #detailPage .description,

  body.is-detail:not(.is-watch) #detailPage .meta-list,

  body.is-detail:not(.is-watch) #detailPage #profileVotes {

    text-align: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .chips,

  body.is-detail:not(.is-watch) #detailPage .poster-actions {

    justify-content: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-season-switcher {

    display: block !important;

    width: min(70vw, 250px) !important;

    max-width: 250px !important;

    margin: 14px auto 0 !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-season-switcher[hidden] {

    display: none !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-season-switcher select {

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 52px !important;

    border: 1px solid rgba(255,255,255,.1) !important;

    background: #050506 !important;

    color: #f5f5f5 !important;

  }

  body.is-detail:not(.is-watch) #detailPage article.anime-info p.description {

    text-align: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-episodes__head {

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    text-align: center !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-episodes__head span {

    padding-bottom: 0 !important;

  }

  body.is-detail:not(.is-watch) #detailPage .detail-episodes__list,

  body.is-detail:not(.is-watch) #detailPage .detail-episode-arc,

  body.is-detail:not(.is-watch) #detailPage .detail-episode-arc__grid {

    text-align: center !important;

  }



  .ah-player-sourcebar {

    gap: 5px !important;

    margin-bottom: 7px !important;

  }

  .ah-player-source,

  .ah-player-telegram {

    min-height: 30px !important;

    border-radius: 6px !important;

    font-size: 9.5px !important;

    line-height: 1.1 !important;

  }

  .ah-player-source { flex-basis: 66px !important; }

  .ah-player-telegram {

    gap: 5px !important;

    padding-inline: 8px !important;

    white-space: nowrap !important;

  }

  .ah-player-telegram svg { width: 14px !important; height: 14px !important; }

}



/* Final mobile profile geometry; intentionally last so older responsive rules cannot override it. */

@media (max-width: 820px) {

  body.is-library #profilePage .profile-hero {

    min-height: 385px !important;

  }

  body.is-library #profilePage .profile-hero__identity {

    grid-template-columns: 110px minmax(0, 1fr) !important;

    column-gap: 8px !important;

  }

  body.is-library #profilePage .profile-handle {

    width: 110px !important;

    justify-self: center !important;

    text-align: center !important;

  }

  body.is-library #profilePage .profile-rank {

    margin-left: 0 !important;

    transform: translateX(-2px) !important;

  }

  body.is-library #profilePage .profile-rank span {

    margin-left: 0 !important;

  }

  body.is-library #profilePage .profile-overview {

    margin-top: 10px !important;

  }

  body.is-library #profilePage .profile-friends-card {

    order: -1 !important;

  }

}



/* Desktop navigation rail */

html body.is-home #catalog #continueCard #continueWatch.hero-welcome {

  position: relative !important;

  display: flex !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  overflow: hidden !important;

  border: 0 !important;

}

html body.is-home #catalog #continueCard #continueWatch.hero-welcome > .hero-carousel__video-shell,

html body.is-home #catalog #continueCard #continueWatch.hero-welcome > .hero-welcome-shade {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: none !important;

  pointer-events: none !important;

  z-index: 0 !important;

}

html body.is-home #catalog #continueCard #continueWatch.hero-welcome > .hero-welcome-shade {

  display: block !important;

  z-index: 1 !important;

  background: linear-gradient(to top, var(--bg-base) 0%, rgba(5,6,7,.92) 12%, rgba(5,6,7,.3) 40%, transparent 75%), linear-gradient(to right, rgba(5,6,7,.8), rgba(5,6,7,.12) 80%) !important;

}

html body.is-home #catalog #continueCard #continueWatch.hero-welcome > .hero-welcome-copy {

  position: relative !important;

  z-index: 2 !important;

  flex: 0 1 660px !important;

  margin: 0 !important;

}

html body.is-home main.site-shell .home-page #continueCard.continue-card:has(.hero-welcome) {

  width: var(--home-hero-width, 100%) !important;

  max-width: none !important;

  position: relative !important;

  left: 50% !important;

  margin: 0 0 52px !important;

  transform: translateX(-50%) !important;

}

html body.is-home #continueWatch.hero-welcome {

  width: 100% !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: var(--bg-base) !important;

  cursor: default;

}

html body.is-home #continueWatch.hero-welcome::after {

  content: "" !important;

  display: block !important;

  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  pointer-events: none;

  background: linear-gradient(0deg, var(--bg-base) 0%, rgba(5,6,7,.85) 10%, transparent 55%), linear-gradient(90deg, rgba(5,6,8,.8), rgba(5,6,8,.25) 55%, rgba(5,6,8,.1)) !important;

}

html body.is-home #continueWatch.hero-welcome .hero-welcome-copy { position: relative !important; z-index: 2 !important; max-width: 660px !important; }

html body.is-home #continueWatch.hero-welcome h3 { font-size: clamp(30px, 3.7vw, 54px) !important; line-height: 1.04 !important; }

html body.is-home #continueWatch.hero-welcome .hero-carousel__description { max-width: 550px; color: #dedee3 !important; -webkit-line-clamp: unset !important; }

html body.is-home #continueWatch .hero-premium {

  display: inline-flex; align-items: center; justify-content: center; gap: 9px;

  padding: 13px 20px; border: 1px solid #ffa66e55; border-radius: 10px;

  background: var(--accent-default); color: #19100a; font: inherit; font-weight: 750; cursor: pointer;

}

html body.is-home #continueWatch .hero-premium:hover { background: #ffba8c; }

html body.is-home #continueWatch .hero-premium:focus-visible { outline: 2px solid white; outline-offset: 3px; }

.desktop-rail { display: none; }

@media (min-width: 1001px) {

  html body { box-sizing: border-box; padding-left: 80px !important; padding-right: 0 !important; }

  html body .desktop-rail {

    position: fixed;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    inset: 0 auto 0 0;

    width: 80px;

    padding: 88px 10px 20px;

    box-sizing: border-box;

    z-index: 110;

    background: #090a0d;

    border-right: 1px solid #ffffff0d;

  }

  .desktop-rail > a {

    position: relative;

    display: grid;

    place-items: center;

    width: 56px;

    height: 52px;

    flex: 0 0 52px;

    border-radius: 14px;

    color: #8d9099;

    text-decoration: none;

    transition: color .15s, background .15s;

  }

  .desktop-rail svg { width: 24px; height: 24px; }

  .desktop-rail > a:hover { color: #fff; background: #ffffff08; }

  .desktop-rail > a.is-active { color: var(--accent-default); background: #ffa66e12; }

  .desktop-rail > a.is-active::after {

    content: ''; position: absolute; left: -12px; top: 17px;

    width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent-default);

  }

  .desktop-rail > a:focus-visible { outline: 2px solid var(--accent-default); outline-offset: 2px; }

  .rail-tooltip {

    position: absolute; left: calc(100% + 14px); top: 50%;

    transform: translateY(-50%); padding: 9px 13px;

    border: 1px solid #ffffff0d; border-radius: 9px;

    background: var(--bg-elevated); color: #fff; font-size: 13px; font-weight: 650;

    white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0;

    transition: opacity .15s;

  }

  .desktop-rail > a:hover .rail-tooltip,

  .desktop-rail > a:focus-visible .rail-tooltip { visibility: visible; opacity: 1; }

  html body:not(.is-mobile) main.site-shell .topbar {

    grid-template-columns: minmax(210px, 1fr) minmax(280px, 640px) minmax(150px, 1fr) !important;

  }

  html body:not(.is-mobile) .topbar .top-search { grid-column: 2 !important; width: 100% !important; }

  html body:not(.is-mobile) .topbar .top-actions { grid-column: 3 !important; justify-self: end; }

  html body.is-home main.site-shell .home-page #continueCard.continue-card {

    width: 100% !important;

    max-width: none !important;

    left: 50% !important;

    margin: 0 0 58px !important;

    transform: translateX(-50%) !important;

  }

  html body.is-home main.site-shell .home-page #continueWatch.hero-carousel.watch-progress {

    width: 100% !important;

  }

}



/* Wide display headings, compact reading and interface type. */

:root {

  --font-reading: "Manrope", "Segoe UI", sans-serif;

  --font-heading: "Bricolage Grotesque", "Manrope", sans-serif;

}

html body { font-family: var(--font-reading) !important; font-weight: 400; }

html body button, html body input, html body textarea, html body select {

  font-family: var(--font-reading) !important;

}

html body .section-head h2,

html body .page-heading h1,

html body .library-hero h1,

html body #homeContinueTitle,

html body .home-telegram h2,

html body.is-home #continueWatch.hero-welcome h3 {

  font-family: var(--font-heading) !important;

  font-weight: 700 !important;

  letter-spacing: -.035em !important;

  line-height: 1.2 !important;

}

html body.is-home .home-section-title { font-size: clamp(23px, 2.25vw, 36px) !important; }

html body.is-home #homeContinueTitle { font-size: clamp(17px, 1.5vw, 21px) !important; }

html body.is-home #continueWatch.hero-welcome h3 { font-size: clamp(27px, 3.3vw, 48px) !important; font-weight: 800 !important; }

html body .home-telegram h2 { font-size: clamp(23px, 2.4vw, 36px) !important; }

html body .poster-card strong,

html body .continue-history-title { font-family: var(--font-reading) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }

html body.is-home #continueWatch .hero-carousel__description,

html body .home-telegram p { font-family: var(--font-reading) !important; font-weight: 400 !important; line-height: 1.6 !important; }



/* Hero calls to action */

html body.is-home #continueWatch.hero-welcome .hero-carousel__actions button {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding: 13px 23px !important;

  border-radius: 18px !important;

  font-weight: 750;

  cursor: pointer;

  transform-origin: center;

  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;

}

html body.is-home #continueWatch.hero-welcome .hero-premium {

  background: #fff !important;

  border: 1px solid #fff !important;

  color: #121214 !important;

}

html body.is-home #continueWatch.hero-welcome .hero-learn-more {

  background: transparent !important;

  border: 1px solid #ffffff60 !important;

  color: #fff !important;

}

html body.is-home #continueWatch.hero-welcome .hero-learn-more:hover {

  background: #ffffff0d !important;

  border-color: #ffffffaa !important;

}

html body.is-home #continueWatch.hero-welcome .hero-carousel__actions button:focus-visible {

  outline: 2px solid white; outline-offset: 4px;

}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  html body.is-home #continueWatch.hero-welcome .hero-carousel__actions button:hover {

    animation: hero-button-jelly .65s both;

  }

}

@keyframes hero-button-jelly {

  0% { transform: scale(1); }

  30% { transform: scale(1.045, .965); }

  52% { transform: scale(.985, 1.035); }

  72% { transform: scale(1.015, .99); }

  100% { transform: scale(1); }

}



/* Larger home typography and community ranking. */

html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome {

  height: auto !important; min-height: clamp(470px, 39vw, 620px) !important;

  padding: clamp(46px, 5vw, 76px) clamp(28px, 4.5vw, 72px) !important;

}

html body.is-home #catalog #continueCard #continueWatch.hero-welcome > .hero-welcome-copy {

  flex-basis: 920px !important; width: min(920px, 100%) !important; max-width: 920px !important;

}

html body.is-home #catalog #continueCard #continueWatch.hero-welcome h3 {

  font-size: clamp(34px, 4.65vw, 74px) !important; line-height: 1.12 !important;

  max-width: 100% !important; -webkit-line-clamp: unset !important;

}

html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__description {

  font-size: clamp(17px, 1.55vw, 23px) !important; max-width: 760px !important; margin-top: 20px !important;

}

html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__actions { margin-top: 26px !important; flex-wrap: wrap; }

html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__actions button { font-size: 18px !important; padding: 16px 25px !important; }

html body.is-home #continueWatch .hero-premium-icon { width: 25px; height: 25px; object-fit: contain; }

html body.is-home:not(.is-library) .home-section-title { font-size: clamp(25px, 2.7vw, 43px) !important; text-transform: uppercase; }

html body.is-home:not(.is-library) #homeContinueTitle { font-size: clamp(22px, 2.1vw, 32px) !important; text-transform: uppercase; }

html body.is-home .home-heading-icon { stroke-width: 1 !important; }

html body.is-home:not(.is-library) .poster-grid .poster-card strong { font-size: 18px !important; line-height: 1.25 !important; }

html body.is-home:not(.is-library) .poster-grid .poster-card small,

html body.is-home:not(.is-library) .poster-grid .badge { font-size: 14px !important; }

html body.is-home #homeContinueGrid .continue-history-title, html body.is-library #profileHistoryRailV33 .continue-history-title { font-size: 17px !important; }

html body.is-home #homeContinueGrid .continue-history-footer, html body.is-library #profileHistoryRailV33 .continue-history-footer { font-size: 13px !important; }

html body.is-home .home-continue-all { font-size: 15px !important; }

html body.is-home .home-telegram h2 { font-size: clamp(27px, 2.8vw, 44px) !important; }

html body.is-home .home-telegram p { font-size: clamp(17px, 1.5vw, 22px) !important; }

html body.is-home .home-telegram-tags span { font-size: 15px !important; }

html body.is-home .home-telegram > a { font-size: 19px !important; }

.home-leaderboard .leaderboard-description { color: #9699a2; font-size: 18px; margin: 12px 0 22px; }

.leaderboard-filter { display: inline-block; margin-bottom: 26px; }

.leaderboard-filter > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#leaderboardMetric { background: #15161a; color: #eee; border: 1px solid #ffffff12; border-radius: 13px; padding: 13px 18px; font-size: 17px; cursor: pointer; }

#leaderboardMetric option:disabled { color: #777; }

#leaderboardGrid { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 12px; user-select: none; }

#leaderboardGrid::-webkit-scrollbar { display: none; }

#leaderboardGrid .leaderboard-card {

  position: relative; isolation: isolate; display: flex; align-items: center; gap: 15px;

  flex: 0 0 320px; min-width: 0; padding: 22px 20px; overflow: hidden;

  border: 1px solid #ffffff09; border-radius: 20px; background: #101c30;

  text-decoration: none; color: #f5f5f7; transition: border-color .2s;

}

#leaderboardGrid .leaderboard-card:hover { border-color: #ffffff35; }

#leaderboardGrid .leaderboard-card:focus-visible { outline: 2px solid var(--accent-default); outline-offset: 2px; }

#leaderboardGrid img { pointer-events: none; -webkit-user-drag: none; }

#leaderboardGrid .leaderboard-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; z-index: -1; }

.leaderboard-place { font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: #777a83; }

[data-place="1"] .leaderboard-place { color: #ffd45a; }

[data-place="2"] .leaderboard-place { color: #d4dae3; }

[data-place="3"] .leaderboard-place { color: #d99860; }

.leaderboard-avatar { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border-radius: 50%; }

.leaderboard-info { display: grid; gap: 6px; min-width: 0; }

.leaderboard-info strong { font-size: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.leaderboard-info span { color: #babcc4; font-size: 17px; }

.leaderboard-avatar-shell { width: 64px; height: 64px; flex: 0 0 64px; }

@media (max-width: 760px) {

  html body.is-home #catalog #continueCard #continueWatch.hero-welcome h3 { font-size: clamp(27px, 6.8vw, 44px) !important; }

  html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__description { font-size: 17px !important; }

  html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__actions button { font-size: 16px !important; padding: 14px 18px !important; }

  #leaderboardGrid .leaderboard-card { flex-basis: 280px; padding: 18px 16px; }

  .home-leaderboard .leaderboard-description { font-size: 16px; }

}



/* One display typeface for all home section headings. */

html body.is-home:not(.is-library) #catalog h2,

html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome h3 {

  font-family: var(--font-heading) !important;

  font-weight: 800 !important;

  font-style: normal !important;

  letter-spacing: -.035em !important;

}



/* Compact home section titles; keep the hero scale. */

html body.is-home:not(.is-library) #catalog > .poster-section:not(.home-leaderboard) .home-section-title {

  font-size: clamp(16px, 1.35vw, 22px) !important;

  gap: 9px !important;

}

html body.is-home:not(.is-library) #catalog > .poster-section:not(.home-leaderboard) .home-heading-icon {

  width: 23px !important;

  height: 23px !important;

  flex-basis: 23px !important;

}

html body.is-home:not(.is-library) #catalog #homeContinueTitle {

  font-size: clamp(13px, 1.05vw, 17px) !important;

}



/* Home-only blocks must not leak into SPA library routes. */

html body #catalog > [data-home-only][hidden],

html body.is-library #catalog > [data-home-only],

html body:not(.is-home) #catalog > [data-home-only] { display: none !important; }

html body.is-home #catalog .home-app-promo {

  background: linear-gradient(115deg, #c8b8f5, #a88ce4) !important;

  color: #24183c !important;

}

html body.is-home #catalog .home-app-promo h2,

html body.is-home #catalog .home-app-promo p { color: #24183c !important; }

html body.is-home #catalog .home-app-promo .home-telegram-tags span { background: #ffffff38; color: #39284f; }

html body.is-home #catalog .home-app-promo > a { background: #fff; color: #624493; }

html body #downloadPage[hidden] { display: none !important; }

html body #downloadPage:not([hidden]) {

  display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

  gap: clamp(30px, 6vw, 90px); width: calc(100% - 88px); max-width: 1380px;

  margin: 60px auto; padding: 0 0 48px; color: #f3f2f7;

}

.app-download-intro { display: flex; flex-direction: column; align-items: flex-start; }

.app-download-logo { width: 76px; height: 76px; object-fit: contain; margin-bottom: 24px; }

.app-download-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #c5acf6; }

html body #downloadPage h1 { font-family: var(--font-heading); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.15; margin: 20px 0; }

.app-download-intro > p { color: #b4b1bf; font-size: 19px; line-height: 1.6; max-width: 560px; }

.app-download-button { display: inline-flex; align-items: center; gap: 25px; margin-top: 24px; padding: 17px 25px; border-radius: 17px; background: #c4acf2; color: #251936; text-decoration: none; font-size: 18px; font-weight: 800; transition: background .2s; }

.app-download-button:hover { background: #d4c0fa; }

.app-download-button:focus-visible { outline: 2px solid white; outline-offset: 4px; }

.app-download-meta { margin-top: 14px; color: #96919f; font-size: 14px; }

.app-install { align-self: center; padding: clamp(24px, 3vw, 42px); border: 1px solid #c5acf622; border-radius: 24px; background: #14111c; }

.app-install h2 { font-family: var(--font-heading); font-size: 23px; margin: 0 0 24px; }

.app-install ol { padding-left: 22px; }

.app-install li { padding-left: 8px; margin: 0 0 22px; }

.app-install li::marker { color: #c5acf6; font-weight: 800; }

.app-install strong { font-size: 18px; }

.app-install p { color: #b4b1bf; line-height: 1.6; }

.app-install a { color: #c5acf6; text-decoration: none; }

.app-download-note { border-top: 1px solid #ffffff12; padding-top: 18px; font-size: 14px; }

@media (max-width: 800px) {

  html body #downloadPage:not([hidden]) { grid-template-columns: 1fr; width: calc(100% - 28px); margin: 32px auto; }

}



/* History: image with inset progress, captions outside the image. */

html body #catalog #historyGrid .continue-history-card,

html body #catalog #homeContinueGrid .continue-history-card,

html body #profilePage #profileHistoryRailV33 .continue-history-card {

  display: block !important;

  color: #fff !important;

  height: auto !important;

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  overflow: visible !important;

  box-shadow: none !important;

}

html body #catalog #historyGrid .continue-history-cover,

html body #catalog #homeContinueGrid .continue-history-cover,

html body #profilePage #profileHistoryRailV33 .continue-history-cover {

  position: relative !important;

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 16 / 9 !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  background: #000 !important;

}

html body #catalog #historyGrid .continue-history-cover::before,

html body #catalog #homeContinueGrid .continue-history-cover::before,

html body #catalog #historyGrid .continue-history-footer::after,

html body #catalog #homeContinueGrid .continue-history-footer::after,

html body #profilePage #profileHistoryRailV33 .continue-history-cover::before,

html body #profilePage #profileHistoryRailV33 .continue-history-footer::after { content: none !important; display: none !important; }

html body #catalog #historyGrid .continue-history-cover > img,

html body #catalog #homeContinueGrid .continue-history-cover > img,

html body #profilePage #profileHistoryRailV33 .continue-history-cover > img {

  display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important;

}

html body #catalog #historyGrid .history-cover-progress,

html body #catalog #homeContinueGrid .history-cover-progress,

html body #profilePage #profileHistoryRailV33 .history-cover-progress {

  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px;

  background: linear-gradient(to right, #fff var(--history-progress, 0%), var(--history-track-color, #ffffff20) var(--history-progress, 0%));

  pointer-events: none;

}

#historyGrid { --history-track-color: rgba(255,255,255,.34); }

html body #catalog #historyGrid .continue-history-title,

html body #catalog #homeContinueGrid .continue-history-title,

html body #profilePage #profileHistoryRailV33 .continue-history-title {

  position: static !important;

  display: block !important;

  width: 100% !important;

  margin: 10px 0 0 !important;

  padding: 0 !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  text-shadow: none !important;

  transform: none !important;

}

html body #catalog #historyGrid .continue-history-footer,

html body #catalog #homeContinueGrid .continue-history-footer,

html body #profilePage #profileHistoryRailV33 .continue-history-footer {

  background: transparent !important;

  min-height: 0 !important;

  padding: 5px 0 0 !important;

  margin: 0 !important;

}



/* Episode duration on the cover and a clearer progress track. */

html body #catalog #historyGrid .continue-history-cover > img,

html body #catalog #homeContinueGrid .continue-history-cover > img,

html body #profilePage #profileHistoryRailV33 .continue-history-cover > img {

  filter: brightness(.75) !important;

}

html body #catalog #historyGrid .history-cover-progress,

html body #catalog #homeContinueGrid .history-cover-progress,

html body #profilePage #profileHistoryRailV33 .history-cover-progress { height: 5px !important; }

html body #catalog #historyGrid .history-duration-badge,

html body #catalog #homeContinueGrid .history-duration-badge,

html body #profilePage #profileHistoryRailV33 .history-duration-badge {

  position: absolute !important; right: 8px; bottom: 11px; z-index: 4;

  padding: 3px 7px; border-radius: 7px; background: rgba(0,0,0,.75);

  color: #fff; font-size: 13px; font-weight: 800; line-height: 1.2;

  font-variant-numeric: tabular-nums; pointer-events: none;

}

html body #catalog #historyGrid .continue-history-footer,

html body #catalog #homeContinueGrid .continue-history-footer,

html body #profilePage #profileHistoryRailV33 .continue-history-footer { grid-template-columns: minmax(0, 1fr) !important; }



/* Keep history artwork dark in both resting and hover states. */

html body #catalog #historyGrid .continue-history-card .continue-history-cover > img,

html body #catalog #homeContinueGrid .continue-history-card .continue-history-cover > img,

html body #catalog #historyGrid .continue-history-card:hover .continue-history-cover > img,

html body #catalog #homeContinueGrid .continue-history-card:hover .continue-history-cover > img,

html body #profilePage #profileHistoryRailV33 .continue-history-card .continue-history-cover > img,

html body #profilePage #profileHistoryRailV33 .continue-history-card:hover .continue-history-cover > img {

  filter: brightness(.55) !important;

}

html body #catalog #historyGrid .continue-history-card,

html body #catalog #homeContinueGrid .continue-history-card,

html body #profilePage #profileHistoryRailV33 .continue-history-card {

  transform: translateY(0) !important;

  transition: transform .22s ease !important;

}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  html body #catalog #historyGrid .continue-history-card:hover,

  html body #catalog #homeContinueGrid .continue-history-card:hover,

  html body #profilePage #profileHistoryRailV33 .continue-history-card:hover { transform: translateY(-4px) !important; }

}

html body #catalog #homeContinueGrid, html body #profilePage #profileHistoryRailV33 { padding-top: 7px !important; }



html body.is-home #catalog .home-premium-promo { background: linear-gradient(115deg, #ecd18d, #d2a74c) !important; }

html body.is-home #catalog .home-premium-promo h2,

html body.is-home #catalog .home-premium-promo p { color: #29200e !important; }

html body.is-home #catalog .home-premium-promo .home-telegram-tags span { color: #4e3a13; background: #ffffff30; }

html body.is-home #catalog .home-premium-promo > a { color: #6c5019; }

html body.is-home #catalog .home-premium-promo > a img { width: 25px; height: 25px; object-fit: contain; }

html body.is-home #catalog .home-referral-promo { background: linear-gradient(115deg, #99dfd7, #5cbcad) !important; }

html body.is-home #catalog .home-referral-promo h2,

html body.is-home #catalog .home-referral-promo p { color: #10352f !important; }

html body.is-home #catalog .home-referral-promo .home-telegram-tags span { color: #214f45; background: #ffffff30; }

html body.is-home #catalog .home-referral-promo > a { color: #256c5f; }



/* Catalog paging controls and five-column desktop grid. */

html body #catalog #catalogPage .catalog-toolbar {

  display: grid !important;

  grid-template-columns: 44px repeat(5, minmax(0, 1fr)) 44px !important;

  align-items: end !important;

  gap: 12px !important;

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 0 12px !important;

}

html body #catalog #catalogPage .catalog-toolbar label {

  min-width: 0 !important; width: auto !important; grid-column: auto !important;

  font-size: 12px !important; display: grid; gap: 7px;

}

html body #catalog #catalogPage .catalog-toolbar select {

  min-width: 0 !important; width: 100% !important; max-width: 100% !important;

  height: 44px !important; padding: 0 34px 0 12px !important;

  font-size: 14px !important; text-overflow: ellipsis;

}

html body #catalog #catalogPage .catalog-page-arrow {

  display: grid !important; place-items: center;

  width: 44px !important; height: 44px !important;

  padding: 0 !important; border: 1px solid #ffffff20; border-radius: 13px;

  background: #17171b; color: #f5f5f7; font-size: 24px;

  cursor: pointer; transition: background .18s, transform .18s;

}

html body #catalog #catalogPage .catalog-page-arrow:not(:disabled):hover { background: var(--bg-hover); transform: none !important; }

html body #catalog #catalogPage .catalog-page-arrow:disabled { opacity: .3; cursor: default; }

html body #catalog #catalogPage .catalog-page-arrow:focus-visible { outline: 2px solid var(--accent-default); outline-offset: 3px; }

#catalogPageStatus { color: var(--text-tertiary); font-size: 13px; margin: 0 0 20px; min-height: 20px; }

#catalogPageStatus button { background: transparent; border: 0; color: var(--accent-default); cursor: pointer; font: inherit; }

html body #catalog #catalogPage #catalogGrid {

  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  gap: 24px 20px !important; width: 100% !important;

}

html body #catalog #catalogPage #catalogGrid > .poster-card { width: 100% !important; min-width: 0 !important; }

@media (max-width: 1000px) {

  html body #catalog #catalogPage #catalogGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  html body #catalog #catalogPage .catalog-toolbar { gap: 8px !important; }

  html body #catalog #catalogPage .catalog-toolbar select { font-size: 12px !important; }

}

@media (max-width: 680px) {

  html body #catalog #catalogPage .catalog-toolbar { grid-template-columns: 38px repeat(2, minmax(0, 1fr)) 38px !important; }

  html body #catalog #catalogPage #catalogPrev { grid-column: 1 !important; grid-row: 1 / 4; align-self: center; }

  html body #catalog #catalogPage #catalogNext { grid-column: 4 !important; grid-row: 1 / 4; align-self: center; }

  html body #catalog #catalogPage .catalog-toolbar label { grid-column: auto !important; }

  html body #catalog #catalogPage .catalog-toolbar label:last-of-type { grid-column: 2 / 4 !important; }

  html body #catalog #catalogPage .catalog-page-arrow { width: 38px !important; }

  html body #catalog #catalogPage #catalogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; }

}



/* Shared promo logos, calm filters and the personal library. */

html body.is-home #catalog .home-telegram {

  display: grid !important; grid-template-columns: 100px minmax(0, 1fr) auto !important;

  align-items: center; gap: 28px !important;

}

html body.is-home #catalog .home-telegram .home-promo-logo { width: 100px; height: 100px; display: grid; place-items: center; color: #65458e; }

html body.is-home #catalog .home-telegram .home-promo-logo :is(img,svg) { width: 100%; height: 100%; object-fit: contain; }

html body #catalog #catalogPage .catalog-toolbar select { transition: background-color .18s, border-color .18s !important; }

html body #catalog #catalogPage .catalog-toolbar select:hover { background-color: var(--bg-hover) !important; border-color: #ffffff30 !important; transform: none !important; box-shadow: none !important; }

html body #catalog #catalogPage .catalog-page-arrow:hover { transform: none !important; animation: none !important; }

html body :is(#librarySections, #profileLibraryTabsV37) { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; padding: 6px; border-bottom: 1px solid #ffffff12; }

html body :is(#librarySections, #profileLibraryTabsV37) button { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background .18s, color .18s; }

html body :is(#librarySections, #profileLibraryTabsV37) button:hover { background: transparent; color: #fff; transform: none; }

html body :is(#librarySections, #profileLibraryTabsV37) button.is-active { background: transparent; color: var(--accent-default); }

html body :is(#librarySections, #profileLibraryTabsV37) button span { font-size: 12px; opacity: .65; }

html body #favoritesGrid.library-collection { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 24px 20px !important; }

html body #favoritesGrid.library-collection .favorite-card { position: relative; width: 100%; min-width: 0; background: transparent; border: 0; }

html body #favoritesGrid.library-collection .favorite-card__cover { aspect-ratio: 2 / 3; height: auto; border-radius: 16px; overflow: hidden; }

html body #favoritesGrid.library-collection .favorite-card__cover img { width: 100%; height: 100%; object-fit: cover; }

html body #favoritesGrid.library-collection .favorite-card__body { padding: 12px 0; }

html body .poster-card .card-heart, html body .favorite-card .favorite-menu { position: absolute; top: 10px; right: 10px; z-index: 12; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff18; border-radius: 11px; background: #111114e8; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }

html body .poster-card .card-heart:hover, html body .favorite-card .favorite-menu:hover { background: var(--bg-hover); transform: none !important; }

html body .library-menu { position: fixed; inset: auto; margin: 0; z-index: 100000; width: 240px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 7px; border: 1px solid #ffffff20; border-radius: 17px; background: var(--bg-surface); color: #eee; box-shadow: 0 16px 48px #0007; }

html body .library-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; border-radius: 11px; background: transparent; color: #c9c9d0; text-align: left; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s; }

html body .library-menu button:is(:hover,:focus-visible), html body .library-menu button.is-selected { background: #2a2a2e; color: #fff; outline: none; transform: none; }

html body .library-menu button.is-danger { color: #ff777e; }

.library-menu-error { font-size: 12px; color: #ff9299; margin: 8px; }

@media(max-width:1000px) {

 html body.is-home #catalog .home-telegram { grid-template-columns: 72px minmax(0,1fr) !important; gap: 20px !important; }

 html body.is-home #catalog .home-telegram .home-promo-logo { width: 72px; height: 72px; }

 html body.is-home #catalog .home-telegram > a { grid-column: 2; justify-self: start; }

 html body #favoritesGrid.library-collection { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }

}

@media(max-width:600px) {

 html body.is-home #catalog .home-telegram { grid-template-columns: 42px minmax(0,1fr) auto !important; gap: 9px !important; padding: 14px 12px !important; align-items:center !important; }

 html body.is-home #catalog .home-telegram .home-promo-logo { width: 42px !important; height: 42px !important; align-self:center !important; }

 html body.is-home #catalog .home-telegram h2 { font-size: 15px !important; line-height:1.12 !important; margin:0 0 4px !important; }

 html body.is-home #catalog .home-telegram p { font-size: 11px !important; line-height:1.35 !important; margin:0 !important; }

 html body.is-home #catalog .home-telegram > a { grid-column:auto !important; justify-self:end !important; font-size:11px !important; line-height:1.15 !important; padding:9px 10px !important; min-width:84px !important; max-width:96px !important; }

 html body.is-home #catalog .home-telegram > a span { font-size:14px !important; }

 html body #favoritesGrid.library-collection { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px 12px !important; }

 html body :is(#librarySections, #profileLibraryTabsV37) button { padding: 10px; font-size: 13px; }

}

/* Equal outer heights, including select minimums. */

html body #catalog #catalogPage .catalog-toolbar { --catalog-control-height: 48px; }

html body #catalog #catalogPage .catalog-toolbar select,

html body #catalog #catalogPage .catalog-toolbar .catalog-page-arrow {

  box-sizing: border-box !important;

  height: var(--catalog-control-height) !important;

  min-height: var(--catalog-control-height) !important;

  max-height: var(--catalog-control-height) !important;

}

html body :is(#librarySections, #profileLibraryTabsV37) { gap: 10px; padding: 6px 0 14px; }

html body :is(#librarySections, #profileLibraryTabsV37) button {

  --section-color: var(--accent-default); --section-bg: #ffa66e18;

  font-family: "Bricolage Grotesque", "Manrope", sans-serif !important;

  font-size: clamp(15px, 1.15vw, 19px) !important;

  font-weight: 750 !important; line-height: 1.4;

  padding: 16px 20px; gap: 12px; min-height: 58px;

  color: #9899a3; white-space: nowrap;

}

html body :is(#librarySections, #profileLibraryTabsV37) button[data-section="watching"], html body .library-menu button[data-section="watching"], html body .card-library-button[data-section="watching"] { --section-color: var(--status-success); --section-bg: #50db8e18; }

html body :is(#librarySections, #profileLibraryTabsV37) button[data-section="want"], html body .library-menu button[data-section="want"], html body .card-library-button[data-section="want"] { --section-color: var(--status-info); --section-bg: #69b7ff18; }

html body :is(#librarySections, #profileLibraryTabsV37) button[data-section="watched"], html body .library-menu button[data-section="watched"], html body .card-library-button[data-section="watched"] { --section-color: #b69aff; --section-bg: #b69aff18; }

html body :is(#librarySections, #profileLibraryTabsV37) button[data-section="paused"], html body .library-menu button[data-section="paused"], html body .card-library-button[data-section="paused"] { --section-color: #edc263; --section-bg: #edc26318; }

html body :is(#librarySections, #profileLibraryTabsV37) button[data-section="dropped"], html body .library-menu button[data-section="dropped"], html body .card-library-button[data-section="dropped"] { --section-color: var(--status-danger); --section-bg: #f47e8818; }

html body :is(#librarySections, #profileLibraryTabsV37) button.is-active { color: var(--section-color); background: transparent; }

html body :is(#librarySections, #profileLibraryTabsV37) button:not(.is-active):is(:hover,:focus-visible) { color: #fff !important; transform: none !important; }

html body :is(#librarySections, #profileLibraryTabsV37) button.is-active:hover { background: transparent; }

html body :is(#librarySections, #profileLibraryTabsV37) button svg { width: 23px; height: 23px; flex-shrink: 0; }

html body :is(#librarySections, #profileLibraryTabsV37) button span { font: inherit; font-size: 13px; opacity: .7; }

/* Keep home-only promos hidden when their grid display is overridden. */

html body #catalog .home-telegram[hidden] { display: none !important; }

@media (max-width: 680px) {

 html body :is(#librarySections, #profileLibraryTabsV37) { gap: 6px; }

 html body :is(#librarySections, #profileLibraryTabsV37) button { padding: 13px 14px; gap: 8px; min-height: 50px; font-size: 14px !important; }

 html body :is(#librarySections, #profileLibraryTabsV37) button svg { width: 20px; height: 20px; }

}

/* Additional controls retain the existing horizontal catalog layout. */

html body #catalog #catalogPage .catalog-extra-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px 16px; margin: 12px 0 24px; align-items: end; }

html body #catalog #catalogPage .catalog-extra-filters label { display: grid; gap: 7px; color: #9697a1; font-size: 12px; min-width: 0; }

html body #catalog #catalogPage .catalog-extra-filters :is(select,input[type="search"]) { box-sizing: border-box; width:100%; min-width:0; height:48px; padding:0 14px; border:1px solid #ffffff20; border-radius:13px; background:#17171b; color:#eee; font:inherit; font-size:14px; transition:background .18s; }

html body #catalog #catalogPage .catalog-extra-filters :is(select,input[type="search"]):hover { background:var(--bg-hover); transform:none; }

html body #catalog #catalogPage .catalog-extra-filters :disabled { opacity:.4; cursor:not-allowed; }

.catalog-extra-filters small { font-size:11px; color:var(--text-tertiary); }

html body #catalog #catalogPage .catalog-country-disabled { display:flex; align-items:center; gap:8px; opacity:.5; }

#catalogResetFilters { justify-self:start; padding:10px 14px; background:#17171b; color:#aaa; border:1px solid #ffffff20; border-radius:12px; cursor:pointer; }

#catalogResetFilters:hover { color:#fff; transform:none; }

html body #catalog #catalogPage .catalog-range { grid-column:span 2; padding:14px 0; color:var(--text-secondary); font-size:14px; }

.catalog-range > div:first-child { display:flex; justify-content:space-between; gap:12px; }

.catalog-range output { color:var(--accent-default); font-variant-numeric:tabular-nums; }

.catalog-range-track { position:relative; height:28px; margin-top:12px; }

.catalog-range-track::before { content:""; position:absolute; top:12px; height:5px; left:0; right:0; border-radius:9px; background:linear-gradient(to right,#303034 var(--range-start),var(--accent-default) var(--range-start),var(--accent-default) var(--range-end),#303034 var(--range-end)); }

html body #catalog #catalogPage .catalog-range-track input { position:absolute; inset:0; width:100%; height:28px; padding:0; margin:0; border:0; background:transparent; box-shadow:none; appearance:none; pointer-events:none; }

.catalog-range-track input::-webkit-slider-thumb { appearance:none; pointer-events:auto; width:17px; height:17px; background:#fff; border:2px solid var(--accent-default); border-radius:50%; cursor:ew-resize; }

.catalog-range-track input::-moz-range-thumb { pointer-events:auto; width:14px; height:14px; background:#fff; border:2px solid var(--accent-default); border-radius:50%; cursor:ew-resize; }

#catalogFilterNotice { grid-column:1/-1; margin:0; font-size:12px; color:#a0a0aa; }

#catalogFilterNotice:empty { display:none; }

@media(max-width:800px) { html body #catalog #catalogPage .catalog-extra-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Two equal ranges directly beneath the main toolbar. */

html body #catalog #catalogPage .catalog-extra-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 28px; }

html body #catalog #catalogPage .catalog-extra-filters .catalog-range { grid-column: auto; min-width: 0; }

html body #catalog #catalogPage .catalog-range-track input { background: transparent !important; box-shadow: none !important; }

#catalogResetFilters { grid-column: 1 / -1; }

@media(max-width:500px) { html body #catalog #catalogPage .catalog-extra-filters { column-gap:16px; } .catalog-range > div:first-child { flex-wrap:wrap; } }

/* Compact range values and plain white handles. */

html body #catalog #catalogPage .catalog-range output {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 4px 9px; border-radius: 8px; white-space: nowrap;

  background: #ffa66e14; border: 1px solid #ffa66e30;

  color: #ffb68a; font-size: 12px; line-height: 1.25;

}

html body #catalog #catalogPage .catalog-range[data-range="score"] output {

  background: #18181b; border-color: #ffffff12; color: #b8b8c2;

}

html body #catalog #catalogPage .catalog-range[data-range="score"] output::before { content: "★"; color: var(--rating-star); }

html body #catalog #catalogPage .catalog-range-track,

html body #catalog #catalogPage .catalog-range-track input:is(:hover,:focus,:active) {

  background: transparent !important; box-shadow: none !important;

}

html body #catalog #catalogPage .catalog-range-track input::-webkit-slider-runnable-track {

  background: transparent; border: 0; box-shadow: none;

}

html body #catalog #catalogPage .catalog-range-track input::-moz-range-track,

html body #catalog #catalogPage .catalog-range-track input::-moz-range-progress {

  background: transparent; border: 0; box-shadow: none;

}

html body #catalog #catalogPage .catalog-range-track input::-webkit-slider-thumb {

  width: 17px; height: 17px; background: #fff; border: 0; box-shadow: none;

}

html body #catalog #catalogPage .catalog-range-track input::-moz-range-thumb {

  width: 17px; height: 17px; background: #fff; border: 0; box-shadow: none;

}



/* Shared library icons/colors; existing menu hover backgrounds remain intact. */

html body .library-menu .library-menu-label { display: inline-flex; align-items: center; gap: 10px; }

html body .library-menu .library-menu-label svg { width: 20px; height: 20px; flex-shrink: 0; }

html body .library-menu button[data-section]:not(:hover):not(:focus-visible):not(.is-danger) { color: var(--section-color); }

html body .poster-card.anime-card-refresh { position:relative; isolation:isolate; overflow:hidden; }

html body .poster-card.anime-card-refresh::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.92) 100%) !important; }

html body .poster-card.anime-card-refresh .anime-card-rating { position:absolute; top:10px; left:10px; z-index:13; display:inline-flex; gap:5px; align-items:center; padding:4px 9px; background:#08090bee; border-radius:20px; color:#fff; font-size:13px; font-weight:800; line-height:1.2; }

html body .poster-card.anime-card-refresh .anime-card-rating > span { color:var(--rating-star); }

html body .poster-card.anime-card-refresh .anime-card-caption { position:absolute; bottom:15px; left:13px; right:13px; z-index:3; display:grid; gap:6px; pointer-events:none; }

html body .poster-card.anime-card-refresh .anime-card-caption strong { position:static !important; margin:0 !important; padding:0 !important; color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25 !important; }

html body .poster-card.anime-card-refresh .anime-card-caption small { position:static !important; margin:0 !important; padding:0 !important; color:var(--accent-default) !important; font-size:13px !important; font-weight:700; }

html body .poster-card .card-heart, html body .favorite-card .favorite-menu { width:26px !important; height:32px !important; border-radius:10px !important; font-size:23px !important; }

.catalog-filter-actions { display:flex; justify-content:flex-end; margin:0 0 12px; }

html body .leaderboard-controls { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }

html body .leaderboard-controls .leaderboard-filter { width:190px !important; max-width:calc(50% - 6px); margin:0 !important; }

html body .leaderboard-controls select { width:100% !important; min-width:0 !important; height:48px; background:#15161a; color:#eee; border:1px solid #ffffff12; border-radius:13px; padding:10px 14px; font-size:15px !important; }

html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { position:relative; isolation:isolate; padding-top:85px !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-banner { position:absolute !important; top:0; left:0; right:0; width:100% !important; height:470px !important; margin:0 !important; z-index:-1; border-radius:0 !important; overflow:hidden; pointer-events:none; mask-image:linear-gradient(#000,transparent); }

html body.is-detail:not(.is-watch) #detailPage .detail-banner img { width:100%; height:100%; object-fit:cover; filter:blur(18px) brightness(.45); transform:scale(1.08); }

html body.is-detail:not(.is-watch) #detailPage .anime-detail-main { position:relative; z-index:1; }

html body.is-home #catalog .home-telegram:not([hidden]) { grid-template-columns:140px minmax(0,1fr) auto !important; background:linear-gradient(115deg,#269cc4,#1686af) !important; }

html body.is-home #catalog .home-telegram .home-promo-logo { width:140px !important; height:140px !important; }

html body.is-home #catalog .home-app-promo:not([hidden]) { background:linear-gradient(115deg,#b49bdc,#9780c2) !important; }

html body.is-home #catalog .home-premium-promo:not([hidden]) { background:linear-gradient(115deg,#d3b875,#b68c39) !important; }

html body.is-home #catalog .home-referral-promo:not([hidden]) { background:linear-gradient(115deg,#7bc4bc,#459f91) !important; }

@media(max-width:900px) { html body.is-home #catalog .home-telegram:not([hidden]) { grid-template-columns:90px minmax(0,1fr) !important; } html body.is-home #catalog .home-telegram .home-promo-logo { width:90px !important; height:90px !important; } }

@media(max-width:600px) { html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { padding-top:45px !important; } html body.is-home #catalog .home-telegram:not([hidden]) { grid-template-columns:64px minmax(0,1fr) !important; } html body.is-home #catalog .home-telegram .home-promo-logo { width:64px !important; height:64px !important; } }



/* The library uses the same poster presentation. */

html body .favorite-card__cover::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.92) 100%) !important; }

html body .favorite-card__cover .anime-card-rating { position:absolute; top:10px; left:10px; z-index:13; display:inline-flex; gap:5px; align-items:center; padding:4px 9px; background:#08090bee; border-radius:20px; color:#fff; font-size:13px; font-weight:800; line-height:1.2; }

html body .favorite-card__cover .anime-card-rating > span { color:var(--rating-star); }

html body .favorite-card__cover .anime-card-caption { position:absolute; bottom:15px; left:13px; right:13px; z-index:3; display:grid; gap:6px; pointer-events:none; }

html body .favorite-card__cover .anime-card-caption strong { position:static !important; margin:0 !important; padding:0 !important; color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25 !important; }

html body .favorite-card__cover .anime-card-caption small { position:static !important; margin:0 !important; padding:0 !important; color:var(--accent-default) !important; font-size:13px !important; font-weight:700; }



html body .favorite-card__cover { position:relative; isolation:isolate; }



/* Full-width detail backdrop and poster calls to action. */

html body.is-detail:not(.is-watch) #detailPage { position:relative; isolation:isolate; }

html body.is-detail:not(.is-watch) #detailPage > .detail-banner {

  display:block !important; inset:0 0 auto !important; width:100% !important;

  height:580px !important; max-height:none !important; z-index:0;

  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.85) 45%,transparent 100%);

}

html body.is-detail:not(.is-watch) #detailPage > .detail-banner img { filter:blur(6px) brightness(.55) !important; transform:scale(1.025); }

html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { z-index:1; }

html body.is-watch #detailPage > .detail-banner { display:none !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions {

  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; gap:10px !important; margin:20px 0 0 !important;

}

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button {

  display:inline-flex !important; align-items:center; justify-content:center; width:100% !important;

  min-width:0 !important; min-height:48px !important; height:auto !important; padding:13px 14px !important;

  border-radius:18px !important; border:1px solid #ffffff60 !important; background:transparent !important; color:#fff !important;

  font-weight:750 !important; font-size:14px !important; line-height:1.3; cursor:pointer;

  transform-origin:center; transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;

}

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage { background:#fff !important; color:#121214 !important; border-color:#fff !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button:not(:disabled):hover { background:#ffffff0d !important; border-color:#ffffffaa !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage:not(:disabled):hover { background:#f0f0f0 !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button:disabled { opacity:.45; cursor:not-allowed; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {

  html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button:not(:disabled):hover { animation:detail-button-jelly .65s both !important; }

}



html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage { grid-column:1 / -1; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions :is(#favoriteButton,#watchTogetherButton) {

  padding:12px 7px !important; font-size:12px !important; white-space:normal; text-align:center;

}



/* Animate the independent scale property: legacy button rules lock transform. */

@keyframes detail-button-jelly {

  0% { scale:1; }

  30% { scale:1.045 .965; }

  52% { scale:.985 1.035; }

  72% { scale:1.015 .99; }

  100% { scale:1; }

}



html body.is-detail #detailPage #profileDescription { display:block !important; -webkit-line-clamp:unset !important; max-height:none !important; overflow:visible !important; }

html body.is-detail #detailPage .description-toggle {

  display:inline-flex; align-items:center; align-self:flex-start; gap:8px; margin:0 0 24px; padding:0;

  background:transparent !important; border:0 !important; box-shadow:none !important;

  color:#99999f; font:inherit; font-size:15px; font-weight:750; cursor:pointer; transition:color .2s ease;

}

html body.is-detail #detailPage .description-toggle[hidden] { display:none !important; }

html body.is-detail #detailPage .description-toggle:hover { color:#fff; }

html body.is-detail #detailPage .description-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .2s ease; }

html body.is-detail #detailPage .description-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }



/* Match catalog titles to the home cards. */

html body #catalog #catalogPage .poster-card.anime-card-refresh .anime-card-caption strong { font-size:18px !important; line-height:1.25 !important; }

html body :is(#librarySections, #profileLibraryTabsV37) button.is-active:is(:hover,:focus-visible) { color:var(--section-color) !important; background:transparent !important; }

/* Plain metadata, separated by fine vertical rules. */

html body.is-detail:not(.is-watch) #detailPage .chips { column-gap:0 !important; row-gap:10px !important; }

html body.is-detail:not(.is-watch) #detailPage .chips > span:not([hidden]) {

  min-height:0 !important; height:auto !important; padding:0 12px !important;

  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;

  line-height:1.15 !important;

}

html body.is-detail:not(.is-watch) #detailPage .chips > span:not([hidden]) ~ span:not([hidden]) { border-left:1px solid #ffffff38 !important; }

html body.is-detail:not(.is-watch) #detailPage .chips > span:not([hidden]):not(:has(~ span)) { padding-right:0 !important; }

html body.is-detail:not(.is-watch) #detailPage .chips > span:not([hidden]):nth-child(1 of :not([hidden])) { padding-left:0 !important; }



html body.is-detail:not(.is-watch) #detailPage .chips > span,

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button {

  font-family:var(--font-heading) !important; font-weight:800 !important; text-transform:uppercase !important;

}

html body.is-detail:not(.is-watch) #detailPage #profileScoreChip { color:#fff !important; gap:5px; }

html body.is-detail:not(.is-watch) #detailPage #profileScoreChip .detail-rating-star { color:var(--rating-star) !important; font-style:normal; }



html body.is-detail:not(.is-watch) #detailPage .chips > span:not([hidden]) { font-size:clamp(13px,1.2vw,18px) !important; color:#fff !important; line-height:1.4 !important; }



html body #detailPage .detail-characters { width:100%; min-width:0; margin:12px 0 28px; }

html body #detailPage .detail-characters[hidden] { display:none !important; }

html body #detailPage .detail-characters header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }

html body #detailPage .detail-characters h2 { margin:0; color:#fff; font:700 22px/1.3 var(--font-reading); }

.detail-characters-nav { display:flex; gap:8px; }

html body #detailPage .detail-characters-nav button { width:32px; height:32px; border:1px solid #ffffff20; border-radius:50%; background:transparent; color:#aaa; font-size:24px; cursor:pointer; }

html body #detailPage .detail-characters-nav button:hover { background:#ffffff10; color:#fff; }

.detail-characters-list { display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#35353b transparent; padding:0 0 12px; }

html body #detailPage .detail-character { flex:0 0 120px; width:120px; margin:0; text-align:center; }

.detail-character-portrait { width:120px; height:120px; border-radius:50%; overflow:hidden; background:#191b22; }

html body #detailPage .detail-character-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }

html body #detailPage .detail-character figcaption { display:grid; gap:4px; margin-top:10px; }

html body #detailPage .detail-character strong { font:600 14px/1.4 var(--font-reading); color:#eee; }

html body #detailPage .detail-character figcaption span { font:400 12px/1.4 var(--font-reading); color:var(--text-tertiary); }

@media(max-width:600px) { html body #detailPage .detail-character { flex-basis:96px; width:96px; } .detail-character-portrait { width:96px; height:96px; } .detail-characters-list { gap:14px; } }



html body #detailPage .detail-facts { margin-top:24px; padding:18px 15px; border:1px solid #ffffff12; border-radius:10px; background:#090a0b60; }

html body #detailPage .detail-facts[hidden] { display:none !important; }

html body #detailPage .detail-facts dl { display:block; margin:0; }

html body #detailPage .detail-facts dt { margin:18px 0 6px; font:700 10px/1.5 var(--font-heading); letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); }

html body #detailPage .detail-facts dt:first-child { margin-top:0; }

html body #detailPage .detail-facts dd { margin:0; font:500 12px/1.6 var(--font-reading); color:var(--text-secondary); overflow-wrap:anywhere; }

/* Similar titles use the shared catalog cards and viewport-based catalog sizing,

   so the narrower detail column scrolls instead of shrinking the posters. */

html body #detailPage #detailSimilarList {

  --similar-card-width: calc((min(1900px, 100vw - 80px - clamp(28px, 3.5vw, 54px) * 2 - 72px) - 80px) / 5);

  display:flex !important; gap:20px !important; width:100% !important;

  padding:4px 0 16px !important; margin:0 !important;

  overflow-x:auto !important; overflow-y:hidden !important;

}

html body #detailPage #detailSimilarList > .poster-card {

  flex:0 0 var(--similar-card-width) !important;

  width:var(--similar-card-width) !important; min-width:0 !important;

  height:auto !important; aspect-ratio:2 / 3 !important;

}

html body #detailPage #detailSimilarList .anime-card-caption strong {

  font-size:18px !important; line-height:1.25 !important;

}

@media(max-width:1000px) {

  html body #detailPage #detailSimilarList {

    --similar-card-width:calc((100vw - clamp(28px, 3.5vw, 54px) * 2 - 72px - 40px) / 3);

  }

}

@media(max-width:820px) {

  html body #detailPage #detailSimilarList { --similar-card-width:calc((100vw - 28px - 40px) / 3); }

}

@media(max-width:680px) {

  html body #detailPage #detailSimilarList { --similar-card-width:calc((100vw - 28px - 12px) / 2); gap:12px !important; }

}





/* Detail page: franchise chronology + full-width similar titles. */

html body #detailPage .detail-chronology{width:100%;min-width:0;margin:28px 0 34px}

html body #detailPage .detail-chronology[hidden]{display:none!important}

html body #detailPage .detail-chronology header{margin:0 0 14px}

html body #detailPage .detail-chronology h2{margin:0;color:#fff;font:700 22px/1.3 var(--font-reading)}

html body #detailPage .detail-chronology-list{display:grid;gap:10px}

html body #detailPage .detail-chronology-item{appearance:none;width:100%;display:grid;grid-template-columns:58px minmax(0,1fr) 24px;align-items:center;gap:14px;min-height:82px;padding:8px 12px 8px 8px;border:1px solid #ffffff12;border-radius:12px;background:#090a0bd9;color:#fff;text-align:left;cursor:pointer;transition:.2s ease}

html body #detailPage .detail-chronology-item:hover{border-color:#ffffff2f;background:#111216e8;transform:translateY(-1px)}

html body #detailPage .detail-chronology-item.is-current{border-color:#ff936c66;background:linear-gradient(90deg,#ff936c12,#090a0bd9 34%)}

html body #detailPage .detail-chronology-poster{width:58px;height:66px;overflow:hidden;border-radius:8px;background:#17181c}

html body #detailPage .detail-chronology-poster img{width:100%;height:100%;display:block;object-fit:cover}

html body #detailPage .detail-chronology-copy{min-width:0;display:grid;gap:3px}

html body #detailPage .detail-chronology-copy small{color:#ff9b73;font:700 10px/1.25 var(--font-heading);letter-spacing:.045em;text-transform:uppercase}

html body #detailPage .detail-chronology-copy strong{color:#f4f4f5;font:650 14px/1.35 var(--font-reading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html body #detailPage .detail-chronology-copy>span{color:#81838c;font:500 11px/1.35 var(--font-reading)}

html body #detailPage .detail-chronology-arrow{color:#6f7179;font-size:27px;text-align:right}



html body #detailPage .detail-chronology-toggle{width:100%;min-height:38px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff10;border-radius:10px;background:#ffffff08;color:#c6c7cc;cursor:pointer;font:700 11px/1 var(--font-heading);letter-spacing:.035em;text-transform:uppercase}

html body #detailPage .detail-chronology-toggle:hover{color:#fff;background:#ffffff0d;border-color:#ffffff1d}

html body #detailPage .detail-chronology-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease}

html body #detailPage .detail-chronology-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

html body #detailPage .detail-similar-wide{box-sizing:border-box;width:100%;max-width:none;margin:42px 0 12px;padding:0;position:relative;z-index:1}

html body #detailPage .detail-similar-wide #detailSimilarList{--similar-card-width:calc((100% - 80px)/5)}

@media(max-width:1000px){html body #detailPage .detail-similar-wide #detailSimilarList{--similar-card-width:calc((100% - 40px)/3)}}

@media(max-width:680px){html body #detailPage .detail-chronology{margin-top:22px}html body #detailPage .detail-chronology-item{grid-template-columns:52px minmax(0,1fr) 18px;gap:11px;min-height:76px;padding:7px 10px 7px 7px}html body #detailPage .detail-chronology-poster{width:52px;height:62px}html body #detailPage .detail-similar-wide{margin-top:30px;padding:0 14px}html body #detailPage .detail-similar-wide #detailSimilarList{--similar-card-width:calc((100% - 12px)/2)}}



/* Topbar navigation tooltips — match the left rail. */

html body:not(.is-mobile) .topbar .top-actions > [data-top-tooltip] { position:relative; }

html body:not(.is-mobile) .topbar .top-actions > [data-top-tooltip]::after {

  content:attr(data-top-tooltip); position:absolute; left:50%; top:calc(100% + 12px); z-index:120;

  transform:translate(-50%,-4px); padding:9px 13px; border:1px solid #ffffff0d; border-radius:9px;

  background:var(--bg-elevated); color:#fff; font:650 13px/1.2 var(--font-reading); white-space:nowrap;

  pointer-events:none; visibility:hidden; opacity:0; box-shadow:0 8px 24px #00000035;

  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;

}

html body:not(.is-mobile) .topbar .top-actions > [data-top-tooltip]:hover::after,

html body:not(.is-mobile) .topbar .top-actions > [data-top-tooltip]:focus-visible::after {

  visibility:visible; opacity:1; transform:translate(-50%,0); transition-delay:.35s,.35s,0s;

}





/* Promo refresh: arrows, brand logos, dark premium/referral. */

html body.is-home #catalog .home-telegram > a { gap:10px !important; }

html body.is-home #catalog .home-telegram > a > span[aria-hidden="true"] { font-size:22px; line-height:1; font-weight:700; }

html body.is-home #catalog .home-telegram > a :is(svg,img) { display:none !important; }

html body.is-home #catalog .home-telegram .home-promo-logo--telegram { color:#2AABEE !important; }

html body.is-home #catalog .home-telegram .home-promo-logo--android { color:#3DDC84 !important; }

html body.is-home #catalog .home-premium-promo:not([hidden]) { background:linear-gradient(115deg,#11100d 0%,#211b10 55%,#6f5525 100%) !important; }

html body.is-home #catalog .home-premium-promo h2 { color:#f6ebcf !important; }

html body.is-home #catalog .home-premium-promo p { color:#c9b98f !important; }

html body.is-home #catalog .home-premium-promo > a { background:#f8f5ed !important; color:#72561e !important; }

html body.is-home #catalog .home-referral-promo:not([hidden]) { background:linear-gradient(115deg,#0c1110 0%,#11231f 55%,#286f64 100%) !important; }

html body.is-home #catalog .home-referral-promo h2 { color:#e5f7f3 !important; }

html body.is-home #catalog .home-referral-promo p { color:#a9cbc4 !important; }

html body.is-home #catalog .home-referral-promo > a { background:#f6fbfa !important; color:#256c5f !important; }





/* compact library top and expanded desktop rail */

body.is-library #catalogPage.catalog-section,

body.is-library #favoritesPage.library-section,

body.is-library #historyPage.library-section { padding-top: 8px !important; }

@media (min-width: 1001px) {

  .desktop-rail > :is(a,button.desktop-rail-button) { position:relative;display:grid;place-items:center;width:56px;height:52px;flex:0 0 52px;padding:0;border:0;border-radius:14px;background:transparent;color:#8d9099;text-decoration:none;cursor:pointer;transition:color .15s,background .15s; }

  .desktop-rail > :is(a,button.desktop-rail-button):hover { color:#fff;background:#ffffff08; }

  .desktop-rail > :is(a,button.desktop-rail-button):focus-visible { outline:2px solid var(--accent-default);outline-offset:2px; }

  .desktop-rail > :is(a,button.desktop-rail-button):hover .rail-tooltip,.desktop-rail > :is(a,button.desktop-rail-button):focus-visible .rail-tooltip { visibility:visible;opacity:1; }

  .desktop-rail-divider { width:32px;height:1px;flex:0 0 1px;margin:8px 0 2px;background:#ffffff12; }

}



/* promo boxes: dark Android, clean Telegram logo, neutral CTA hover */

html body.is-home #catalog .home-app-promo:not([hidden]) { background:linear-gradient(115deg,#0c100e 0%,#11231a 58%,#2c8f5a 100%) !important; }

html body.is-home #catalog .home-app-promo h2 { color:#e8fff1 !important; }

html body.is-home #catalog .home-app-promo p { color:#b7d8c3 !important; }

html body.is-home #catalog .home-app-promo > a { background:#f4f7f5 !important;color:#245f42 !important; }

html body.is-home #catalog .home-promo-logo--android { color:#3DDC84 !important; }

html body.is-home #catalog .home-promo-logo--telegram svg { overflow:visible; }

html body.is-home #catalog .home-telegram > a { transition:background-color .16s ease,color .16s ease,border-color .16s ease !important;transform:none !important;box-shadow:none !important; }

html body.is-home #catalog .home-telegram > a:hover { background:#e7e7ea !important;color:#222329 !important;transform:none !important;box-shadow:none !important;filter:none !important; }



/* 2026-09-12 typography + compact library + leaderboard polish */

:root {

  --font-reading: "Manrope", "Segoe UI", sans-serif;

  --font-heading: "Bricolage Grotesque", "Manrope", sans-serif;

}

@media (min-width: 821px) {

  body.is-library .home-page:has(#catalogPage:not([hidden])),

  body.is-library .home-page:has(#favoritesPage:not([hidden])),

  body.is-library .home-page:has(#historyPage:not([hidden])) {

    padding-top: 6px !important;

  }

  body.is-library #catalogPage.catalog-section,

  body.is-library #favoritesPage.library-section,

  body.is-library #historyPage.library-section {

    padding-top: 2px !important;

  }

}

html body.is-home #leaderboardGrid .leaderboard-banner {

  opacity: .34 !important;

  filter: brightness(.78) saturate(.92) !important;

}

html body {

  font-family: var(--font-reading) !important;

}

html body h1,

html body h2,

html body h3,

html body h4,

html body h5,

html body h6,

html body .poster-card strong,

html body .catalog-card strong,

html body .favorite-card strong,

html body .continue-history-title,

html body .search-result-title,

html body .history-card__body strong,

html body #profileTitle,

html body .detail-chronology-copy strong {

  font-family: var(--font-heading) !important;

  font-weight: 800 !important;

  letter-spacing: -.025em !important;

}

html body button,

html body input[type="button"],

html body input[type="submit"],

html body input[type="reset"],

html body .home-telegram > a,

html body .app-download-button,

html body .profile-file-button {

  font-family: var(--font-heading) !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  letter-spacing: -.015em !important;

}

html body p,

html body small,

html body label,

html body input,

html body textarea,

html body select,

html body .description,

html body .hero-carousel__description,

html body .leaderboard-description {

  font-family: var(--font-reading) !important;

}





/* 2026-09-12 button sizing and casing corrections */

html body button,

html body input[type="button"],

html body input[type="submit"],

html body input[type="reset"] {

  font-size: 13px !important;

}

html body.is-home #continueWatch.hero-welcome .hero-carousel__actions button { font-size: 15px !important; }

html body .home-telegram > a { font-size: 15px !important; }

html body .app-download-button { font-size: 14px !important; }



/* Anime titles keep their natural casing. */

html body .poster-card strong,

html body .catalog-card strong,

html body .favorite-card strong,

html body .continue-history-title,

html body .search-result-title,

html body .history-card__body strong,

html body #profileTitle,

html body .detail-chronology-copy strong {

  text-transform: none !important;

}



/* Promo boxes keep normal title/button casing. */

html body .home-telegram h2,

html body .home-telegram > a {

  text-transform: none !important;

}



/* Catalog reset button: restore its original utility typography. */

html body #catalogResetFilters {

  font-family: var(--font-reading) !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  text-transform: none !important;

  letter-spacing: normal !important;

}



/* 2026-09-12 UI casing, spacing and card tooltip corrections */

@media (min-width:821px){body.is-library .home-page:has(#favoritesPage:not([hidden])),body.is-library .home-page:has(#historyPage:not([hidden])){padding-top:24px!important}}

html body .ah-select-popup .ah-select-option,html body :is(#librarySections, #profileLibraryTabsV37) button,html body .library-menu button{text-transform:none!important;letter-spacing:normal!important}

html body.is-home #continueWatch.hero-welcome h3{text-shadow:none!important;filter:none!important;-webkit-text-stroke:0!important;background:none!important;-webkit-text-fill-color:currentColor!important}

html body .poster-card .card-heart{overflow:visible!important}

html body .poster-card .card-heart::after{content:"Добавить в список";position:absolute;top:calc(100% + 8px);right:0;z-index:80;padding:8px 11px;border:1px solid #ffffff0d;border-radius:9px;background:var(--bg-elevated);color:#fff;font:650 12px/1.2 var(--font-reading);text-transform:none;letter-spacing:normal;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;box-shadow:0 8px 24px #00000035;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}

html body .poster-card .card-heart:hover::after,html body .poster-card .card-heart:focus-visible::after{visibility:visible;opacity:1;transform:translateY(0);transition-delay:.35s,.35s,0s}



/* Footer: Figma Animehub, frame 7:4485 (1820 × 476). */

html body .site-footer { --font-heading:"Unbounded", "Manrope", sans-serif; box-sizing:border-box; width:100%; padding:36px clamp(14px,3vw,40px) 26px; background:var(--bg-base); }

html body .site-footer__panel { box-sizing:border-box; width:100%; max-width:1820px; min-height:476px; margin:0 auto; padding:64px 24px 60px; display:flex; flex-direction:column; align-items:center; background:var(--bg-surface); border:0; border-radius:40px; text-align:center; }

html body .site-footer a { text-decoration:none; }

html body .site-footer__wordmark { color:#fff; font:900 44px/1.2 var(--font-heading); letter-spacing:-.045em; }

html body .site-footer__nav { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 40px; margin-top:28px; color:#f4f4f5; font:400 24px/1.3 var(--font-heading); }

html body .site-footer__nav a { color:inherit; }

html body .site-footer__legal { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin-top:24px; color:var(--text-tertiary); font:400 14px/1.3 var(--font-heading); }

html body .site-footer__social-icons { display:flex; gap:24px; margin-top:24px; }

html body .site-footer__social-icons > * { display:grid; place-items:center; box-sizing:border-box; width:44px; height:44px; border-radius:50%; background:var(--bg-elevated); color:#fff; }

html body .site-footer__social-icons svg { width:24px; height:24px; fill:currentColor; }

html body .site-footer__android { display:flex; align-items:center; gap:14px; min-height:48px; box-sizing:border-box; margin-top:24px; padding:7px 18px; border:0; border-radius:8px; background:#191a1d; color:#f5f5f5; font:400 18px/1.3 var(--font-heading); }

html body .site-footer__android svg { width:30px; height:34px; color:#a4ce62; }

html body .site-footer__copyright { margin:34px 0 0; color:var(--text-tertiary); font:400 14px/1.2 var(--font-heading); }

html body .site-footer a { transition:color .18s ease,background-color .18s ease; }

html body .site-footer__nav a:hover { color:var(--accent-default); }

html body .site-footer__social-icons a:hover, html body .site-footer__android:hover { background:var(--bg-hover); }

html body .site-footer a:focus-visible { outline:2px solid var(--accent-default); outline-offset:5px; }

@media(max-width:760px) {

  html body .site-footer { padding:24px 14px; }

  html body .site-footer__panel { min-height:0; padding:40px 18px; border-radius:26px; }

  html body .site-footer__wordmark { font-size:32px; }

  html body .site-footer__nav { font-size:16px; gap:14px 22px; margin-top:24px; }

  html body .site-footer__legal { flex-direction:column; font-size:11px; line-height:1.5; }

  html body .site-footer__copyright { font-size:11px; line-height:1.5; }

  html body .site-footer__android { font-size:15px; }

}



/* 2026-09-12 premium plans redesign */

html body #premiumPage.premium-page{padding:42px clamp(22px,4vw,64px) 90px!important;background:radial-gradient(circle at 50% 0,#2b2110 0,#0b0a08 30%,#070707 62%)!important}

html body #premiumPage .premium-hero--plans{max-width:1460px;margin:0 auto 52px;text-align:center}

html body #premiumPage .premium-hero__crown{width:82px;height:82px;margin:0 auto 12px;border-radius:24px;box-shadow:0 16px 48px #dcae4224}

html body #premiumPage .premium-hero__crown img{width:54px;height:54px}

html body #premiumPage .premium-kicker{margin:0 0 30px!important;color:#d8b65e;font:800 13px/1.2 var(--font-heading)!important;letter-spacing:.16em!important;text-transform:none!important}

html body #premiumPage .premium-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}

html body #premiumPage .premium-plan-card{position:relative;min-height:360px;padding:30px;border:1px solid #2b2924;border-radius:22px;background:linear-gradient(180deg,#151515 0%,#0e0e0f 100%);box-shadow:0 18px 55px #0008;overflow:hidden}

html body #premiumPage .premium-plan-card--best{border-color:#8f7338;background:radial-gradient(circle at 50% -10%,#7a612c70 0,transparent 42%),linear-gradient(180deg,#181714,#0e0e0f)}

html body #premiumPage .premium-plan-badge{position:absolute;top:18px;right:18px;padding:7px 11px;border-radius:9px;background:#d7b458;color:#111;font:800 11px/1 var(--font-heading);text-transform:none}

html body #premiumPage .premium-plan-card h2{margin:0 0 16px;font-size:22px!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.02em!important}

html body #premiumPage .premium-plan-price{display:flex;align-items:flex-end;gap:9px;margin:0 0 8px;color:#fff}

html body #premiumPage .premium-plan-price strong{font:800 clamp(42px,3.2vw,58px)/.95 var(--font-heading);letter-spacing:-.05em}

html body #premiumPage .premium-plan-price span{font-size:22px;line-height:1.2;padding-bottom:5px}

html body #premiumPage .premium-plan-card>p{margin:0 0 24px!important;color:#8f8f92;font-size:14px}

html body #premiumPage .premium-plan-card>button{width:100%;min-height:48px;border:1px solid #343436;border-radius:12px;background:#262628;color:#fff;font-size:13px!important;font-weight:800!important;cursor:pointer;transition:background .16s,border-color .16s,color .16s}

html body #premiumPage .premium-plan-card>button:hover{background:#efefef;border-color:#efefef;color:#111;transform:none!important}

html body #premiumPage .premium-plan-card ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #ffffff0c;display:grid;gap:11px;color:#9a9a9e;font-size:13px}

html body #premiumPage .premium-plan-card li::before{content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:9px;border:1px solid #666;border-radius:50%;color:#ddd;font-size:10px}

html body #premiumPage .premium-benefits{max-width:1460px;margin:0 auto}

@media(max-width:1100px){html body #premiumPage .premium-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:640px){html body #premiumPage.premium-page{padding:28px 14px 90px!important}html body #premiumPage .premium-plans{grid-template-columns:1fr}html body #premiumPage .premium-plan-card{min-height:0;padding:24px}}



/* AnimeHub shared color palette. Keep geometry and motion in component styles. */

:root {

  --bg-base:#0A0A0A;

  --bg-surface:#141414;

  --bg-elevated:#1C1C1C;

  --bg-hover:#262626;

  --border-default:#333333;

  --border-subtle:#222222;

  --text-primary:#FFFFFF;

  --text-secondary:#A3A3A3;

  --text-tertiary:#6A6A6A;

  --text-disabled:#404040;

  --accent-hover:#FFC199;

  --accent-default:#FFA66E;

  --accent-active:#E88A50;

  --accent-muted:rgba(255,166,110,.14);

  --accent-muted-border:rgba(255,166,110,.3);

  --status-success:#5FBF7A;

  --status-danger:#E5484D;

  --status-warning:#E8B93F;

  --status-info:#6E9FD8;

  --rating-star:#FFD166;

  --bg:var(--bg-base); --panel:var(--bg-surface);

  --panel-2:var(--bg-elevated); --panel-3:var(--bg-hover);

  --line:var(--border-default); --line-soft:var(--border-subtle);

  --text:var(--text-primary); --muted:var(--text-secondary);

  --orange:var(--accent-default); --orange-2:var(--accent-hover);

  --danger:var(--status-danger); --blue:var(--status-info);

}

html body, html body .site-shell, html body .home-page,

html body #catalog, html body #detailPage, html body .site-footer {

  background-color:var(--bg-base) !important; color:var(--text-primary);

}

html body .topbar, html body .sidebar, html body .site-footer__panel {

  background:var(--bg-surface) !important; border-color:var(--border-default) !important;

}

html body .poster-card, html body .favorite-card__cover,

html body .poster-card img, html body .site-footer__android {

  background-color:var(--bg-surface) !important;

}

html body .search-modal__panel, html body dialog, html body .library-menu,

html body .ah-select-popup, html body .ah-player-select__menu,

html body .poster-card .card-heart::after {

  background:var(--bg-elevated) !important; border-color:var(--border-default) !important;

}

html body input:not([type=range]):not([type=checkbox]):not([type=radio]),

html body textarea, html body select:not([multiple]):not([size]) {

  background-color:var(--bg-surface) !important;

  color:var(--text-primary) !important; border-color:var(--border-default) !important;

}

html body .ah-select-popup .ah-select-option:hover,

html body .library-menu button:hover,

html body #catalog #catalogPage .catalog-toolbar select:hover,

html body .poster-card:hover { background-color:var(--bg-hover) !important; }

html body .ah-select-popup .ah-select-option[aria-selected=true] {

  background-color:var(--accent-muted) !important; border-color:var(--accent-muted-border) !important;

}

html body .sidebar .nav a.is-active { color:var(--accent-default) !important; background:var(--accent-muted) !important; }

html body .sidebar .nav a:hover, html body .site-footer__nav a:hover { color:var(--accent-hover) !important; }

html body #profileDescription, html body .detail-facts dd,

html body .site-footer__legal, html body .episode-comment-form__editor footer { color:var(--text-secondary) !important; }

html body .site-footer__copyright, html body .detail-facts dt,

html body .detail-character figcaption span, html body .continue-history-footer,

html body #catalogPageStatus, html body .episode-comment time { color:var(--text-tertiary) !important; }

html body .anime-card-caption strong, html body .site-footer__wordmark { color:var(--text-primary) !important; }

html body .anime-card-rating, html body .anime-card-rating > span,

html body.is-detail:not(.is-watch) #detailPage #profileScoreChip,

html body.is-detail:not(.is-watch) #detailPage #profileScoreChip .detail-rating-star { color:var(--rating-star) !important; }

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage {

  background:#fff !important; border-color:#fff !important; color:var(--bg-base) !important;

}

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage:not(:disabled):hover {

  background:#f0f0f0 !important; border-color:#f0f0f0 !important;

}

html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions #openWatchPage:not(:disabled):active {

  background:#e6e6e6 !important; border-color:#e6e6e6 !important;

}

html body #ahPlayerProgress, html body .continue-history-progress > span { background:var(--accent-default) !important; }

html body .danger-link, html body .is-danger, html body .library-menu-error { color:var(--status-danger) !important; }

html body .status-ongoing { color:var(--status-success) !important; }

html body .status-warning { color:var(--status-warning) !important; }

html body .status-paused { color:var(--status-info) !important; }

html body button:disabled, html body select:disabled, html body [aria-disabled=true] { color:var(--text-disabled) !important; }

html body :is(#librarySections, #profileLibraryTabsV37) { border-color:var(--border-subtle); }



/* Route-specific legacy themes must not override the shared base or rail. */

html:root body[class] { background:var(--bg-base) !important; }

html:root body[class] .desktop-rail,

html:root body[class] .sidebar,

html:root body[class] .sidebar > .nav { background-color:var(--bg-surface) !important; border-color:var(--border-default) !important; }

html:root body[class] .desktop-rail > :is(a,button).is-active { color:var(--accent-default) !important; background:var(--accent-muted) !important; }

html:root body[class] .desktop-rail > :is(a,button):hover { color:var(--accent-hover) !important; background:var(--bg-hover) !important; }



/* Compact hero controls and footer; keep the existing motion and layout. */

html body.is-home #catalog #continueWatch.hero-welcome .hero-carousel__actions button { font-size:14px !important; }

html body .site-footer__panel { min-height:0; padding:32px 24px; }

html body .site-footer__wordmark { font-size:36px; }

html body .site-footer__nav { margin-top:18px; font-size:20px; }

html body .site-footer__legal, html body .site-footer__social-icons, html body .site-footer__android { margin-top:16px; }

html body .site-footer__copyright { margin-top:20px; }

html body .site-footer__nav > *, html body .site-footer__legal > *,

html body .site-footer__social-icons > *, html body .site-footer__copyright span {

  transition:color .18s ease,background-color .18s ease;

}

html body .site-footer__wordmark:hover,

html body .site-footer__nav > :hover,

html body .site-footer__legal > :hover,

html body .site-footer__copyright span:hover { color:var(--accent-hover) !important; }

html body .site-footer__social-icons > :hover,

html body .site-footer__android:hover { background-color:var(--bg-hover) !important; }

html body :is(#historyGrid, #profileFavoritesRail) .history-remove,

html body #homeContinueGrid .history-remove,

html body #profileHistoryRailV33 .history-remove { font-size:21px !important; line-height:1 !important; }

@media(max-width:760px) {

  html body .site-footer__panel { padding:28px 18px; }

  html body .site-footer__wordmark { font-size:30px; }

  html body .site-footer__nav { font-size:16px; }

}



/* Shared glass badges over anime posters. */

html body .poster-card.anime-card-refresh button.card-heart,

html body .favorite-card button.favorite-menu.card-heart,

html body .poster-card.anime-card-refresh .anime-card-rating,

html body .favorite-card__cover .anime-card-rating {

  background:rgba(20,20,20,.48) !important;

  border:1px solid rgba(255,255,255,.2) !important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 8px rgba(0,0,0,.15) !important;

  backdrop-filter:blur(12px) saturate(140%) !important;

  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;

}

html body #catalog #catalogPage .catalog-toolbar {

  grid-template-columns:repeat(5,minmax(0,1fr)) !important;

}

html body #catalog #catalogPage .catalog-pagination {

  display:flex; align-items:center; justify-content:center; gap:16px;

  width:100%; margin:4px 0 24px;

}

html body #catalog #catalogPage .catalog-pagination--bottom { margin:28px 0 0; }

html body #catalog #catalogPage .catalog-pagination .catalog-page-status {

  margin:0; min-height:0; color:var(--text-primary) !important;

  font-size:16px; font-weight:400; line-height:1.4; text-align:center;

}

html body #catalog #catalogPage .catalog-pagination .catalog-page-status button {

  border:0; background:transparent; color:var(--accent-default); cursor:pointer;

}

html body #catalog #catalogPage .catalog-pagination .catalog-page-arrow {

  flex:0 0 36px; width:36px !important; height:36px !important;

  min-height:36px; border-radius:11px; box-sizing:border-box;

}

@media(max-width:680px) {

  html body #catalog #catalogPage .catalog-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  html body #catalog #catalogPage .catalog-toolbar label:last-of-type { grid-column:1 / -1 !important; }

  html body #catalog #catalogPage .catalog-pagination { gap:12px; }

}



/* Favorites use the shared catalog card, without the legacy split cover. */

html body #favoritesGrid.library-collection > .poster-card {

  width:100% !important; min-width:0 !important;

}



/* Library action: folder-plus until saved, then the selected section icon. */

html:root body .poster-card.anime-card-refresh > button.card-heart.card-library-button {

  width:34px !important; height:34px !important; border-radius:50% !important;

  color:var(--section-color,var(--text-primary)) !important;

  background:rgba(20,20,20,.48) !important;

  border:1px solid rgba(255,255,255,.22) !important;

  box-shadow:inset 0 1px 0 #ffffff14 !important;

  transform:none !important; animation:none !important;

  transition:background-color .18s ease,border-color .18s ease !important;

}

html:root body .poster-card.anime-card-refresh > button.card-heart.card-library-button[data-section]:not([data-section=""]) {

  background:color-mix(in srgb,var(--section-color) 22%,rgba(20,20,20,.7)) !important;

  border-color:color-mix(in srgb,var(--section-color) 50%,transparent) !important;

}

html:root body .poster-card.anime-card-refresh > button.card-heart.card-library-button[data-section=""]:hover {

  background:rgba(60,60,60,.72) !important;

  border-color:rgba(255,255,255,.4) !important;

}

html body .card-library-button svg { width:19px; height:19px; display:block; pointer-events:none; }

html body .poster-card .card-library-button::after { content:attr(aria-label); }



/* One hover treatment for poster cards in the catalog, home and library. */

@media (hover:hover) and (pointer:fine) {

  html body .poster-card.anime-card-refresh > img {

    transition:transform .16s ease-out !important;

  }

  html body .poster-card.anime-card-refresh:hover {

    transform:none !important; filter:none !important; box-shadow:none !important;

    background-color:var(--bg-hover) !important;

  }

  html body .poster-card.anime-card-refresh:hover > img {

    transform:scale(1.035) !important;

  }

  html body .poster-card.anime-card-refresh:hover::after {

    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.92) 100%) !important;

  }

}

html body #favoritesGrid .poster-card.anime-card-refresh .anime-card-caption strong,

html body #profileLibraryRailV37 .poster-card.anime-card-refresh .anime-card-caption strong {

  font-size:18px !important; line-height:1.25 !important;

}

html:root body .poster-card.anime-card-refresh > button.card-heart.card-library-button[data-section]:not([data-section=""]),

html:root body .poster-card.anime-card-refresh > button.card-heart.card-library-button[data-section]:not([data-section=""]):hover {

  color:var(--section-color) !important;

  background:color-mix(in srgb,var(--section-color) 22%,rgba(20,20,20,.7)) !important;

  border-color:color-mix(in srgb,var(--section-color) 50%,transparent) !important;

  box-shadow:inset 0 1px 0 #ffffff14 !important;

  transform:none !important; scale:1 !important; filter:none !important; animation:none !important;

}

html body .poster-card .card-library-button[data-section]:not([data-section=""])::after {

  content:none !important; display:none !important;

}



/* 2026-09-13 desktop rail refresh */

@media (min-width:1001px) {

  html body .desktop-rail { gap:8px; }

  html body .desktop-rail > :is(a,button.desktop-rail-button) {

    width:56px; height:52px; flex:0 0 52px; border-radius:14px;

    color:#777b84; background:transparent !important;

    transition:background-color .16s ease,color .16s ease,transform .16s ease;

  }

  html body .desktop-rail > :is(a,button.desktop-rail-button) svg { width:23px;height:23px; }

  html body .desktop-rail > :is(a,button.desktop-rail-button):hover { color:#fff !important; background:#ffffff0a !important; }

  html body .desktop-rail > a.is-active,

  html:root body[class] .desktop-rail > a.is-active { color:var(--accent-default) !important; background:var(--accent-muted) !important; }

  html body .desktop-rail > a.is-active:hover { color:var(--accent-default) !important; background:var(--accent-muted) !important; }

  .desktop-rail-section-gap { position:relative;width:34px;height:34px;flex:0 0 34px; }

  .desktop-rail-section-gap::after { content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#ffffff14; }

  .desktop-rail > a.is-active::after { left:-12px;top:15px;height:22px;width:3px; }

}



/* 2026-09-13 compact desktop rail */

@media (min-width:1001px){

  html body .desktop-rail{gap:4px!important;}

  html body .desktop-rail>:is(a,button.desktop-rail-button){width:50px!important;height:46px!important;flex-basis:46px!important;border-radius:12px!important;}

  html body .desktop-rail svg{width:20px!important;height:20px!important;}

  html:root body[class] .desktop-rail>:is(a,button):hover{color:#fff!important;background:#ffffff0a!important;}

  html body .desktop-rail-section-gap{height:20px!important;flex:0 0 20px!important;}

  html body .desktop-rail>:is(a,button).is-active{color:var(--accent-default)!important;background:var(--accent-muted)!important;}

}



/* 2026-09-13 header logo aligned over rail */

@media (min-width:1001px){

  html body:not(.is-mobile) main.site-shell .topbar{overflow:visible!important;}

  html body:not(.is-mobile) main.site-shell .topbar>.logo{position:relative!important;left:-80px!important;justify-self:start!important;}

}



/* 2026-09-13 keep header logo above the rail */

@media (min-width:1001px){

  html body:not(.is-mobile) main.site-shell .topbar{z-index:130!important;}

  html body:not(.is-mobile) main.site-shell .topbar>.logo{z-index:131!important;}

}



/* 2026-09-13 Senku-like desktop header composition */

@media (min-width:1001px){

  html body:not(.is-mobile) main.site-shell .topbar{

    height:64px!important;min-height:64px!important;padding:0 20px!important;

    grid-template-columns:300px minmax(420px,600px) 1fr!important;column-gap:18px!important;

    background:#090a0c!important;border-bottom:1px solid #ffffff0d!important;

  }

  html body:not(.is-mobile) main.site-shell .topbar>.logo{

    left:-54px!important;min-width:0!important;gap:10px!important;font-size:24px!important;font-weight:900!important;

  }

  html body:not(.is-mobile) main.site-shell .topbar>.logo .logo-mark{width:42px!important;height:42px!important;flex-basis:42px!important;}

  html body:not(.is-mobile) main.site-shell .top-actions{gap:10px!important;padding-right:2px!important;}

  html body:not(.is-mobile) main.site-shell .header-random-action{display:none!important;}

  html body:not(.is-mobile) main.site-shell .header-premium-action{width:auto!important;min-width:118px!important;height:42px!important;padding:0 16px!important;border-radius:14px!important;background:#17181b!important;gap:8px!important;}

  html body:not(.is-mobile) main.site-shell .header-premium-action::after{content:"Premium";font-weight:800;font-size:14px;color:#fff;}

  html body:not(.is-mobile) main.site-shell .header-premium-action img{width:19px!important;height:19px!important;}

  html body:not(.is-mobile) main.site-shell .notification-button{width:42px!important;min-width:42px!important;height:42px!important;border:0!important;border-radius:14px!important;background:#17181b!important;}

  html body:not(.is-mobile) main.site-shell .profile-button{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;border-radius:50%!important;background:transparent!important;}

  html body:not(.is-mobile) main.site-shell .profile-avatar{width:42px!important;height:42px!important;}

}





/* 2026-09-13 profile rail-safe layout + stable active rail */

@media (min-width:1001px){

  html body.is-library #profilePage.profile-page:not([hidden]){width:100%!important;max-width:none!important;margin:0!important;padding:0 0 100px!important;overflow-x:clip!important;box-sizing:border-box!important;}

  html body.is-library #profilePage .profile-hero{width:100%!important;max-width:none!important;box-sizing:border-box!important;}

  html body.is-library #profilePage .profile-hero__identity{left:clamp(32px,3vw,52px)!important;right:clamp(32px,3vw,52px)!important;}

  html body.is-library #profilePage .profile-hero__actions,html body.is-library #profilePage .profile-edit-button{right:clamp(32px,3vw,52px)!important;}

  html body.is-library #profilePage>:not(.profile-hero){width:min(calc(100% - 64px),1450px)!important;max-width:1450px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;}

  html body.is-library #profilePage .profile-overview{grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr)!important;gap:16px!important;}

  html body.is-library #profilePage .profile-description p{max-width:100%!important;}

  html:root body[class] .desktop-rail>a.is-active:hover{color:var(--accent-default)!important;background:var(--accent-muted)!important;transform:none!important;}

  html:root body[class] .desktop-rail>a.is-active:hover .rail-tooltip{visibility:hidden!important;opacity:0!important;}

}

@media (min-width:1001px) and (max-width:1180px){

  html body.is-library #profilePage .profile-overview{grid-template-columns:1fr!important;}

  html body.is-library #profilePage .profile-favorites-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important;}

}



/* Figma search: independent surfaces avoid legacy modal/card layout rules. */

html body.search-is-open { overflow:hidden !important; }

html body #searchModal.search-redesign {

  position:fixed !important; inset:0 !important; z-index:12000 !important;

  display:flex !important; align-items:flex-start !important; justify-content:center !important;

  padding:clamp(90px,15vh,160px) 24px 24px !important;

  background:rgba(0,0,0,.64) !important;

  backdrop-filter:blur(9px) !important; -webkit-backdrop-filter:blur(9px) !important;

  overflow:auto !important;

}

html body #searchModal.search-redesign[hidden] { display:none !important; }

html body #searchModal .search-dialog { position:relative; width:min(640px,100%); transition:width .28s cubic-bezier(.22,.8,.25,1); }

html body #searchModal.settings-open .search-dialog { width:min(890px,100%); }

html body #searchModal .search-main {

  position:relative; z-index:2; width:100%; min-height:154px; padding:16px;

  background:#141414; border-radius:28px; box-sizing:border-box;

  transition:width .28s cubic-bezier(.22,.8,.25,1);

}

html body #searchModal.settings-open .search-main { width:calc(100% - 240px); }

html body #searchModal .search-bar {

  display:flex !important; align-items:center !important; gap:12px; width:100%;

  height:52px !important; margin:0 !important; padding:7px 9px 7px 17px !important;

  border:0 !important; border-radius:22px !important; background:#1c1c1c !important; box-sizing:border-box;

}

html body #searchModal .search-bar > svg { width:18px; height:18px; flex:none; color:#a3a3a3; }

html body #searchModal .search-bar #modalSearchInput {

  flex:1; min-width:0; width:100%; height:100% !important; padding:0 !important; margin:0 !important;

  background:transparent !important; border:0 !important; outline:none !important; box-shadow:none !important;

  color:#fff !important; font:500 12px/1.4 'Unbounded',sans-serif !important;

}

html body #searchModal #modalSearchInput::placeholder { color:#6a6a6a; opacity:1; }

html body #searchModal #searchSettingsToggle {

  display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:8px;

  border:0; border-radius:11px; background:#262626; color:white; cursor:pointer;

  transition:background .15s ease; transform:none !important;

}

html body #searchModal #searchSettingsToggle:hover,

html body #searchModal #searchSettingsToggle[aria-expanded=true] { background:var(--accent-default); }

html body #searchModal #searchSettingsToggle svg { width:21px; height:21px; }

html body #searchModal #searchResultsCount { text-align:center; color:#6a6a6a !important; font:500 12px/1.5 'Unbounded',sans-serif; margin:28px 8px 18px; }

html body #searchModal #searchResultsCount:empty { display:none; }

html body #searchModal #searchModalResults {

  display:flex !important; flex-direction:column; gap:9px !important;

  width:100% !important; max-height:min(440px,55vh); overflow:auto; margin-top:14px; padding:0 7px 0 0 !important;

  scrollbar-width:thin; scrollbar-color:#a3a3a3 #262626;

}

html body #searchModal #searchModalResults:empty { display:none !important; }

html body #searchModal #searchModalResults .search-row {

  position:relative !important; display:flex !important; align-items:center !important; gap:12px;

  flex:none; width:100% !important; min-height:76px !important; height:auto !important;

  padding:8px !important; margin:0 !important; border:0 !important; border-radius:18px !important;

  background:#262626 !important; box-shadow:none !important; cursor:pointer; box-sizing:border-box;

  transition:background .15s ease !important; transform:none !important;

}

html body #searchModal #searchModalResults .search-row:hover { background:#383838 !important; }

html body #searchModal #searchModalResults .search-row::after,

html body #searchModal #searchModalResults .search-row::before { content:none !important; }

html body #searchModal #searchModalResults .search-row > img,

html body #searchModal #searchModalResults .search-row > .poster-fallback {

  position:static !important; inset:auto !important; flex:0 0 42px; width:42px !important; height:60px !important;

  border-radius:9px !important; object-fit:cover !important; opacity:1 !important; transform:none !important; filter:none !important;

}

html body #searchModal #searchModalResults .search-row-info { position:static !important; min-width:0; flex:1; display:grid; gap:6px; }

html body #searchModal .search-row-info strong { font:600 12px/1.5 'Unbounded',sans-serif !important; color:white; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

html body #searchModal .search-row-info > span { font:500 11px/1.5 'Manrope',sans-serif; color:#a3a3a3; }

html body #searchModal .search-row-info b { display:inline-block; margin-left:8px; padding:1px 5px; border-radius:4px; color:var(--rating-star); background:#873f40; font-size:10px; }

html body #searchModal .search-bookmark { position:static !important; width:30px; height:30px; padding:5px; margin:0 5px; border:0; border-radius:7px; background:transparent; color:#a3a3a3; flex:none; cursor:pointer; transform:none !important; transition:background .15s,color .15s; }

html body #searchModal .search-bookmark svg { width:20px; height:20px; }

html body #searchModal .search-bookmark:hover { color:#fff; background:#494949; }

html body #searchModal .search-bookmark.is-saved { color:var(--accent-default); background:var(--accent-muted); }

html body #searchModal .search-settings {

  position:absolute; top:0; right:0; z-index:1; width:260px; height:100%; max-height:calc(100svh - 190px);

  border-radius:0 28px 28px 0; padding:20px 15px 20px 32px; box-sizing:border-box;

  background:#0a0a0a; opacity:0; transform:translateX(-90px); visibility:hidden;

  transition:transform .28s cubic-bezier(.22,.8,.25,1),opacity .2s,visibility .28s;

}

html body #searchModal.settings-open .search-settings { opacity:1; transform:translateX(0); visibility:visible; }

html body #searchModal.settings-open .search-main { min-height:430px; }

html body #searchModal #searchFiltersForm { height:100%; overflow:auto; padding-right:7px; scrollbar-width:thin; scrollbar-color:#a3a3a3 #262626; }

html body #searchModal .search-settings h2 { margin:0 0 10px; color:white; font:800 21px/1.2 'Unbounded',sans-serif; }

html body #searchModal .search-settings fieldset { padding:0; margin:0 0 13px; border:0; min-width:0; }

html body #searchModal .search-settings legend { color:#a3a3a3; padding:0; margin-bottom:6px; font:650 12px/1.4 'Unbounded',sans-serif; }

html body #searchModal .search-settings label { display:flex !important; align-items:center; gap:6px; padding:6px; margin-bottom:5px; border-radius:6px; background:#141414; color:#fff; cursor:pointer; font:500 9px/1.4 'Unbounded',sans-serif; }

html body #searchModal .search-settings label:hover { background:#262626; }

html body #searchModal .search-settings input { appearance:auto !important; width:12px !important; height:12px !important; min-width:12px; padding:0 !important; margin:0 !important; accent-color:var(--accent-default); }

html body #searchModal .search-filter-note { color:#6a6a6a; font:500 9px/1.5 'Manrope',sans-serif; }

html body #searchModal .search-filter-reset { width:100%; padding:8px 4px; border:0; border-radius:7px; background:var(--accent-default); color:#0a0a0a; font:650 10px/1.4 'Unbounded',sans-serif; cursor:pointer; }

html body #searchModal .search-filter-reset:hover { background:var(--accent-hover); }

html body #searchModal .search-dismiss { position:absolute; right:0; top:-35px; padding:0; width:28px; height:28px; background:transparent; border:0; color:#a3a3a3; font:24px/1 sans-serif; cursor:pointer; }

html body #searchModal .search-dismiss:hover { color:white; }

html body #searchModal button:focus-visible,html body #searchModal .search-row:focus-visible { outline:2px solid var(--accent-default); outline-offset:2px; }

@media(max-width:700px) {

 html body #searchModal.search-redesign { padding:80px 12px 20px !important; }

 html body #searchModal .search-main,html body #searchModal.settings-open .search-main { width:100%; min-height:154px; }

 html body #searchModal .search-settings { position:relative; width:100%; height:0; max-height:0; padding:0 18px; border-radius:0 0 24px 24px; transform:translateY(-40px); overflow:hidden; }

 html body #searchModal.settings-open .search-settings { height:300px; max-height:300px; padding:30px 18px 16px; margin-top:-18px; transform:translateY(0); }

 html body #searchModal #searchModalResults { max-height:38vh; }

 html body #searchModal .search-bar #modalSearchInput { font-size:10px !important; }

}

@media(prefers-reduced-motion:reduce) {

 html body #searchModal *,html body #searchModal *::before,html body #searchModal *::after { transition:none !important; }

}

html body #searchModal #searchModalResults .search-row {

  flex-direction:row !important; justify-content:flex-start !important;

  grid-template-columns:none !important; grid-template-rows:none !important;

}

html body #searchModal #searchModalResults .search-row > * { align-self:center !important; }



/* The empty search is only an input, matching its header entry point. */

html body #searchModal .search-main:has(#searchModalResults:empty):has(#searchResultsCount:empty) {

  min-height:0; padding:0; background:transparent;

}

html body #searchModal.settings-open .search-main:has(#searchModalResults:empty):has(#searchResultsCount:empty) { min-height:430px; }

html body .topbar #searchForm {

  display:flex !important; align-items:center !important; gap:12px !important;

  height:52px !important; min-height:52px !important; padding:7px 9px 7px 17px !important;

  border:0 !important; border-radius:22px !important; background:#1c1c1c !important; box-shadow:none !important;

  box-sizing:border-box;

}

html body .topbar #searchForm > button[type=submit] { position:static !important; flex:0 0 18px; width:18px !important; height:18px !important; padding:0 !important; border:0 !important; background:transparent !important; color:#a3a3a3 !important; }

html body .topbar #searchForm > button[type=submit] svg { width:18px; height:18px; }

html body .topbar #searchForm #searchInput {

  flex:1; min-width:0; width:100% !important; height:100% !important; padding:0 !important;

  border:0 !important; background:transparent !important; box-shadow:none !important;

  color:#fff !important; font:500 12px/1.4 'Unbounded',sans-serif !important;

}

html body .topbar #searchForm #searchInput::placeholder { color:#6a6a6a; opacity:1; }

html body .topbar #searchForm #headerSearchSettings {

  position:static !important; display:grid !important; place-items:center;

  flex:0 0 36px; width:36px !important; height:36px !important; padding:8px !important;

  background:#262626 !important; color:white !important; border:0 !important; border-radius:11px !important;

  transform:none !important; cursor:pointer; transition:background .15s ease;

}

html body .topbar #searchForm #headerSearchSettings:hover { background:var(--accent-default) !important; }

html body .topbar #searchForm #headerSearchSettings svg { width:21px; height:21px; }

@media(max-width:700px) {

  html body #searchModal.settings-open .search-main:has(#searchModalResults:empty):has(#searchResultsCount:empty) { min-height:0; }

}

html body #searchModal #searchModalResults .search-row {

  aspect-ratio:auto !important; max-height:none !important;

}



/* 2026-09-14 rail: Senku-like lower group */

@media (min-width:1001px){

  html body .desktop-rail-bottom-gap{

    position:relative!important;

    width:34px!important;

    height:20px!important;

    flex:0 0 20px!important;

    margin-top:auto!important;

  }

  html body .desktop-rail-bottom-gap::after{

    content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#ffffff14;

  }

}



/* 2026-09-14 mobile promo compact horizontal */

@media (max-width:600px){

  html body.is-home #catalog .home-telegram:not([hidden]){

    display:grid!important;

    grid-template-columns:42px minmax(0,1fr)!important;

    grid-template-areas:"icon copy" "button button"!important;

    gap:10px 12px!important;

    align-items:center!important;

    padding:14px!important;

  }

  html body.is-home #catalog .home-telegram>.home-promo-logo{

    grid-area:icon!important;width:42px!important;height:42px!important;align-self:center!important;

  }

  html body.is-home #catalog .home-telegram>div:not(.home-promo-logo){

    grid-area:copy!important;align-self:center!important;min-width:0!important;

  }

  html body.is-home #catalog .home-telegram h2{

    margin:0!important;font-size:15px!important;line-height:1.15!important;text-align:left!important;

  }

  html body.is-home #catalog .home-telegram p{display:none!important;}

  html body.is-home #catalog .home-telegram>a{

    grid-area:button!important;width:100%!important;max-width:none!important;min-width:0!important;

    justify-self:stretch!important;justify-content:center!important;padding:11px 14px!important;

    font-size:12px!important;line-height:1!important;white-space:nowrap!important;text-align:center!important;

  }

  html body.is-home #catalog .home-telegram>a span{white-space:nowrap!important;}

}



/* Compact fixed header spanning the viewport. */

html:root body[class] main.site-shell > header.topbar {

  position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;

  width:100% !important; max-width:none !important; margin:0 !important;

  height:60px !important; min-height:60px !important; padding:8px 16px !important;

  display:grid !important; grid-template-columns:auto minmax(220px,1fr) auto !important;

  grid-template-rows:44px !important; gap:18px !important; align-items:center !important;

  background:var(--bg-base) !important; border:0 !important;

  box-shadow:none !important; backdrop-filter:none !important; z-index:1000 !important; box-sizing:border-box;

}

html:root body[class] main.site-shell { padding-top:60px !important; }

html:root body[class] main.site-shell > header.topbar > .logo {

  position:relative !important; left:0 !important; margin:0 !important; padding:0 !important;

  min-width:0 !important; gap:7px !important; font-size:21px !important; grid-area:1 / 1 !important;

}

html:root body[class] main.site-shell > header.topbar .logo-mark { width:34px !important; height:34px !important; flex-basis:34px !important; }

html:root body[class] main.site-shell > header.topbar #searchForm {

  grid-area:1 / 2 !important; justify-self:stretch !important; width:100% !important; max-width:none !important;

  height:40px !important; min-height:40px !important; padding:5px 6px 5px 13px !important; border-radius:15px !important; margin:0 !important;

}

html:root body[class] main.site-shell > header.topbar #headerSearchSettings { width:30px !important; height:30px !important; flex-basis:30px !important; padding:6px !important; border-radius:9px !important; }

html:root body[class] main.site-shell > header.topbar .top-actions { grid-area:1 / 3 !important; display:flex !important; align-items:center !important; gap:8px !important; padding:0 !important; margin:0 !important; }

html:root body[class] main.site-shell > header.topbar .top-actions > :is(a,button) { height:34px !important; min-height:34px !important; }

html:root body[class] main.site-shell > header.topbar :is(.notification-button,.profile-button) { width:34px !important; min-width:34px !important; padding:0 !important; }

html:root body[class] main.site-shell > header.topbar .profile-avatar { width:34px !important; height:34px !important; }

html:root body[class] main.site-shell > header.topbar .header-premium-action { min-width:0 !important; padding:0 10px !important; border-radius:10px !important; }

html:root body[class] main.site-shell > header.topbar .header-premium-action::after { font-size:12px !important; }

html:root body[class] .desktop-rail,

html:root body[class] .sidebar,

html:root body[class] .sidebar > .nav { background:var(--bg-base) !important; }

@media(min-width:1001px) {

 html:root body[class] .desktop-rail { top:60px !important; height:calc(100dvh - 60px) !important; padding-top:14px !important; box-sizing:border-box; }

}

@media(max-width:700px) {

 html:root body[class] main.site-shell > header.topbar { height:98px !important; min-height:98px !important; padding:6px 10px !important; grid-template-columns:auto 1fr auto !important; grid-template-rows:36px 40px !important; gap:8px !important; }

 html:root body[class] main.site-shell { padding-top:98px !important; }

 html:root body[class] main.site-shell > header.topbar #searchForm { grid-area:2 / 1 / 3 / -1 !important; }

 html:root body[class] main.site-shell > header.topbar .logo { font-size:18px !important; }

 html:root body[class] main.site-shell > header.topbar .mobile-menu-button { grid-area:1 / 2 !important; justify-self:start; }

}

/* The fixed header no longer occupies the shell's first grid row. */

html:root body[class] main.site-shell {

  grid-template-rows:0 minmax(0,1fr) auto !important;

  background:var(--bg-base) !important;

}

html:root body[class] main.site-shell > .site-footer { grid-row:3 !important; }

@media(min-width:701px) and (max-width:1000px) {

 html:root body[class] main.site-shell > header.topbar > .mobile-menu-button { display:none !important; }

}



/* Centered header search and a lightly blurred, anchored popover. */

@media(min-width:701px) {

 html:root body[class] main.site-shell > header.topbar {

   grid-template-columns:minmax(0,1fr) minmax(220px,min(640px,calc(100vw - 400px))) minmax(0,1fr) !important;

 }

 html:root body[class] main.site-shell > header.topbar .top-actions { justify-self:end !important; }

}

html body #searchModal.search-redesign {

  padding:0 !important; background:rgba(0,0,0,.28) !important;

  backdrop-filter:blur(2px) !important; -webkit-backdrop-filter:blur(2px) !important;

}

html body #searchModal.search-redesign .search-dialog,

html body #searchModal.search-redesign.settings-open .search-dialog {

  position:absolute; top:var(--search-popover-top,70px); left:var(--search-popover-left,12px);

  width:var(--search-popover-width,640px); max-width:calc(100% - 24px);

}

html body #searchModal.search-redesign .search-main,

html body #searchModal.search-redesign .search-main:has(#searchModalResults:empty):has(#searchResultsCount:empty) {

  padding:16px; min-height:154px; background:#141414;

}

html body #searchModal.search-redesign.settings-open .search-main { min-height:430px; }

html body #searchModal.search-redesign .search-dismiss { display:none; }

html body #searchModal.search-redesign #searchModalResults { max-height:min(440px,calc(100dvh - var(--search-popover-top,70px) - 110px)); }

@media(max-width:700px) {

 html body #searchModal.search-redesign.settings-open .search-main { min-height:154px; }

}



/* Mobile library sections form a single vertical list. */

@media (max-width:680px) {

  html body :is(#librarySections, #profileLibraryTabsV37) {

    flex-direction:column;

    align-items:stretch;

    flex-wrap:nowrap;

    gap:0;

  }

  html body :is(#librarySections, #profileLibraryTabsV37) button {

    width:100%;

    justify-content:flex-start;

  }

  html body :is(#librarySections, #profileLibraryTabsV37) button span { margin-left:auto; }

}



/* Compact header controls, aligned with the navigation rail. */

@media (min-width:701px) {

  html:root body[class] main.site-shell > header.topbar {

    padding-inline:23px !important;

    grid-template-columns:minmax(0,1fr) minmax(180px,min(540px,calc(100vw - 540px))) minmax(0,1fr) !important;

  }

}

html:root body[class] main.site-shell > header.topbar #searchForm #searchInput {

  font-family:var(--font-heading) !important;

  font-weight:800 !important;

}

html:root body[class] main.site-shell > header.topbar #searchForm #searchInput::placeholder { font-weight:800 !important; }

html:root body[class] main.site-shell > header.topbar .header-premium-action {

  display:flex !important; width:auto !important; gap:8px !important;

  padding-inline:12px !important; background:var(--bg-elevated) !important;

  color:var(--text-primary) !important; text-decoration:none;

}

html:root body[class] main.site-shell > header.topbar .header-premium-action::after { content:none !important; display:none !important; }

html:root body[class] main.site-shell > header.topbar .header-premium-label {

  font:800 13px/1.2 var(--font-heading) !important; white-space:nowrap;

}

html:root body[class] main.site-shell > header.topbar .header-premium-action:hover { background:var(--bg-hover) !important; }

html:root body[class] main.site-shell > header.topbar .notification-button {

  background:transparent !important; color:#777b84 !important; border:0 !important;

  border-radius:12px !important; box-shadow:none !important;

  transition:background-color .16s ease,color .16s ease;

}

html:root body[class] main.site-shell > header.topbar .notification-button > span { background:transparent !important; }

html:root body[class] main.site-shell > header.topbar .notification-button svg { width:20px !important; height:20px !important; fill:currentColor !important; stroke:none !important; }

html:root body[class] main.site-shell > header.topbar .notification-button:hover { color:#fff !important; background:#ffffff0a !important; }

@media (max-width:700px) {

  html:root body[class] main.site-shell > header.topbar .header-premium-label { font-size:10px !important; }

  html:root body[class] main.site-shell > header.topbar .header-premium-action { padding-inline:8px !important; gap:5px !important; }

}



/* Larger brand lockup and matching fixed-header offsets. */

html:root body[class] main.site-shell > header.topbar {

  height:76px !important; min-height:76px !important;

  grid-template-rows:56px !important; padding-block:10px !important;

  padding-inline:16px !important;

}

html:root body[class] main.site-shell > header.topbar > .logo { gap:10px !important; }

html:root body[class] main.site-shell > header.topbar .logo-mark {

  width:48px !important; height:48px !important; flex-basis:48px !important;

}

html:root body[class] main.site-shell > header.topbar .logo-word {

  color:#fff !important; font-family:"Unbounded","Inter",sans-serif !important;

  font-size:22px !important; font-weight:900 !important; letter-spacing:0 !important;

  line-height:1 !important; white-space:nowrap !important; text-decoration:none !important;

  transition:color .16s ease;

}

html:root body[class] main.site-shell { padding-top:76px !important; }

@media(min-width:701px) {

  html:root body[class] main.site-shell > header.topbar {

    grid-template-columns:minmax(0,1fr) minmax(120px,min(540px,calc(100vw - 640px))) minmax(0,1fr) !important;

  }

}

@media(min-width:1001px) {

  html:root body[class] .desktop-rail { top:76px !important; height:calc(100dvh - 76px) !important; }

}

@media(max-width:700px) {

  html:root body[class] main.site-shell > header.topbar {

    height:112px !important; min-height:112px !important;

    grid-template-rows:48px 40px !important; padding:8px 10px !important;

  }

  html:root body[class] main.site-shell { padding-top:112px !important; }

  html:root body[class] main.site-shell > header.topbar .logo-mark { display:block !important; }

  html:root body[class] main.site-shell > header.topbar .logo-word { display:none !important; }

}



/* Taller header action surfaces and avatar. */

html:root body[class] main.site-shell > header.topbar .top-actions > :is(.header-premium-action,.notification-button) {

  height:42px !important; min-height:42px !important;

  background:var(--bg-elevated) !important;

  border:1px solid var(--border-subtle) !important;

  border-radius:14px !important; box-sizing:border-box;

}

html:root body[class] main.site-shell > header.topbar .top-actions > .notification-button {

  width:42px !important; min-width:42px !important;

}

html:root body[class] main.site-shell > header.topbar .top-actions > :is(.header-premium-action,.notification-button):hover {

  background:var(--bg-hover) !important;

}

html:root body[class] main.site-shell > header.topbar .top-actions > .profile-button,

html:root body[class] main.site-shell > header.topbar .profile-avatar {

  width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important;

  border-radius:50% !important; object-fit:cover;

}



/* Equal hero CTAs and compact mobile home/catalog. */

html body.is-home #catalog #continueCard #continueWatch.hero-welcome .hero-carousel__actions button {

  width:auto !important; min-width:0 !important; height:54px !important;

  min-height:54px !important; padding:12px 25px !important; box-sizing:border-box; white-space:nowrap !important;

}

@media(max-width:700px) {

  html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome {

    min-height:320px !important; height:auto !important; padding:28px 18px !important;

  }

  html body.is-home #catalog #continueCard #continueWatch.hero-welcome h3 {

    font-size:clamp(23px,6.6vw,34px) !important; margin:0 !important;

  }

  html body.is-home #catalog #continueCard #continueWatch.hero-welcome .hero-carousel__description {

    font-size:14px !important; line-height:1.55 !important; margin:18px 0 0 !important;

  }

  html body.is-home #catalog #continueCard #continueWatch.hero-welcome .hero-carousel__actions {

    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:8px !important; width:100% !important; margin-top:20px !important;

  }

  html body.is-home #catalog #continueCard #continueWatch.hero-welcome .hero-carousel__actions button {

    width:100% !important; height:44px !important; min-height:44px !important;

    font-size:10px !important; gap:5px !important; padding:8px 5px !important; border-radius:14px !important;

    white-space:nowrap !important;

  }

  html body.is-home #catalog #continueWatch.hero-welcome .hero-premium-icon { width:16px !important; height:16px !important; }

  html body #catalog #catalogPage .catalog-extra-filters { grid-template-columns:minmax(0,1fr) !important; gap:10px !important; }

  html body #catalog #catalogPage .catalog-range > div:first-child { flex-wrap:nowrap; align-items:center; }

  html body.is-home #catalog .home-telegram:not([hidden]) {

    display:grid !important; grid-template-columns:36px minmax(0,1fr) !important;

    grid-template-areas:"icon copy" "icon button" !important;

    padding:16px !important; gap:10px 12px !important; border-radius:20px !important; min-height:0 !important;

  }

  html body.is-home #catalog .home-telegram .home-promo-logo {

    grid-area:icon !important; width:36px !important; height:36px !important; align-self:center !important;

  }

  html body.is-home #catalog .home-telegram > div:not(.home-promo-logo) { grid-area:copy !important; min-width:0 !important; }

  html body.is-home #catalog .home-telegram h2 { font-size:14px !important; line-height:1.3 !important; margin:0 !important; }

  html body.is-home #catalog .home-telegram p { display:none !important; }

  html body.is-home #catalog .home-telegram > a {

    grid-area:button !important; width:100% !important; min-width:0 !important;

    padding:9px 8px !important; font-size:11px !important; line-height:1.2 !important;

  }

}



/* Mobile promo reference: large mark, copy, full-width pill CTA. */

@media(max-width:700px) {

  html body.is-home #catalog .home-telegram:not([hidden]) {

    position:relative; overflow:hidden;

    grid-template-columns:64px minmax(0,1fr) !important;

    grid-template-areas:"icon copy" "button button" !important;

    gap:16px 12px !important; padding:18px 16px !important;

    border:1px solid #ffffff20 !important; border-radius:22px !important;

  }

  html body.is-home #catalog .home-telegram > .home-promo-logo {

    width:64px !important; height:72px !important; align-self:center !important;

    position:relative; z-index:1;

  }

  html body.is-home #catalog .home-telegram > div:not(.home-promo-logo) { position:relative; z-index:1; }

  html body.is-home #catalog .home-telegram h2 {

    font-size:clamp(15px,4vw,20px) !important; font-weight:800 !important;

    line-height:1.3 !important; text-align:left !important;

  }

  html body.is-home #catalog .home-telegram p {

    display:block !important; margin:8px 0 0 !important;

    font-size:12px !important; line-height:1.45 !important; font-weight:400 !important;

  }

  html body.is-home #catalog .home-telegram > a {

    position:relative; z-index:1; display:flex !important; align-items:center !important;

    justify-content:center !important; gap:8px !important; min-height:40px !important;

    padding:10px 12px !important; border-radius:999px !important;

    font-size:13px !important; font-weight:800 !important; box-sizing:border-box;

    white-space:normal !important;

  }

  html body.is-home #catalog .home-telegram:not(.home-app-promo):not(.home-premium-promo):not(.home-referral-promo):not([hidden]) {

    background:linear-gradient(120deg,#0aa4d3,#0083b5) !important;

  }

  html body.is-home #catalog .home-telegram:has(.home-promo-logo--telegram) p { color:#d3edf8 !important; }

  html body.is-home #catalog .home-telegram:has(.home-promo-logo--telegram) h2 { color:#fff !important; }

  html body.is-home #catalog .home-telegram:has(.home-promo-logo--telegram) > a { background:#fff !important; color:#078dbb !important; }

  html body.is-home #catalog .home-telegram:has(.home-promo-logo--telegram)::after {

    content:""; position:absolute; right:-8px; top:8px; width:72px; height:110px;

    opacity:.12; pointer-events:none;

    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cg fill='white'%3E%3Cpath d='M18 28 70 8 60 52 44 39 34 48 35 33 61 16 30 30Z'/%3E%3Cpath d='m2 82 52-20-10 44-16-13-10 9 1-15 26-17-31 14Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;

  }

}



/* 2026-09-15 final desktop/mobile polish */

@media (min-width:1001px){

  html body:not(.is-mobile) main.site-shell .topbar{height:60px!important;min-height:60px!important;}

  html body:not(.is-mobile) main.site-shell .profile-button{width:54px!important;min-width:54px!important;height:54px!important;min-height:54px!important;padding:1px!important;}

  html body:not(.is-mobile) main.site-shell .profile-avatar{width:52px!important;height:52px!important;min-width:52px!important;}

  html body.is-library #profilePage .profile-hero{width:calc(100vw - 85px)!important;max-width:none!important;margin-left:calc((100vw - 85px - 100%)/-2)!important;margin-right:0!important;}

}

html body:has(#premiumPage:not([hidden])){background:radial-gradient(circle at 50% 0,#2b2110 0,#0b0a08 30%,#070707 62%) fixed!important;}

html body #premiumPage.premium-page{background:transparent!important;width:100%!important;max-width:none!important;}

@media(max-width:1000px){

  html body:has(#premiumPage:not([hidden])){background:radial-gradient(circle at 50% 0,#2b2110 0,#0b0a08 34%,#070707 70%) fixed!important;background-size:100vw 100vh!important;}

  html body #premiumPage.premium-page{margin-left:0!important;margin-right:0!important;width:100%!important;}

  html body.is-library #profilePage .profile-hero{width:100vw!important;max-width:none!important;margin-left:calc((100vw - 100%)/-2)!important;margin-right:0!important;}

}

html body #profilePage .profile-hero__actions button,

html body #profilePage [class*="friend"],

html body #searchModal [class*="user"],

html body [class*="comment"] [class*="user"],

html body [class*="comment"] [class*="name"]{text-transform:none!important;}

html body #catalogPage .catalog-pagination .catalog-page-arrow:first-of-type:disabled{visibility:hidden!important;pointer-events:none!important;}



/* 2026-09-15 floating mobile bottom navigation */

.mobile-bottom-nav{display:none}

@media(max-width:820px){

  html body{padding-bottom:96px!important}

  html body .mobile-bottom-nav{position:fixed!important;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));z-index:14000;display:flex!important;align-items:flex-end;justify-content:space-around;gap:4px;padding:8px 9px calc(8px + env(safe-area-inset-bottom));border:1px solid #ffffff18;border-radius:22px;background:rgba(17,18,21,.68);box-shadow:0 14px 38px #0009,inset 0 1px #ffffff12;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}

  html body .mobile-bottom-nav>a{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:7px 2px 3px;border-radius:14px;color:#92959d;text-decoration:none;font:700 9px/1 var(--font-reading);white-space:nowrap;background:transparent!important}

  html body .mobile-bottom-nav>a>svg{width:20px;height:20px;display:block}

  html body .mobile-bottom-nav>a.is-active{color:var(--accent-default)!important}

  html body .mobile-bottom-nav>a:not(.mobile-bottom-nav__profile).is-active{background:color-mix(in srgb,var(--accent-default) 13%,transparent)!important}

  html body .mobile-bottom-nav__profile{transform:translateY(-10px);color:#fff!important}

  html body .mobile-bottom-nav__profile>i{display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:linear-gradient(180deg,#ffb07e,#ff9561);color:#17100c;box-shadow:0 8px 24px #ff95614a,inset 0 1px #ffffff55;font-style:normal}

  html body .mobile-bottom-nav__profile>i>svg{width:22px;height:22px}

  html body .mobile-bottom-nav__profile>span{margin-top:-1px}

}

@media(min-width:821px){html body .mobile-bottom-nav{display:none!important}}



/* 2026-09-15 mobile bottom nav: softer glass + raised profile contour */

@media (max-width:768px){

  html body .mobile-bottom-nav{

    background:rgba(18,18,20,.82)!important;

    backdrop-filter:blur(9px) saturate(115%)!important;

    -webkit-backdrop-filter:blur(9px) saturate(115%)!important;

    border:1.5px solid rgba(255,142,92,.72)!important;

    box-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;

    overflow:visible!important;

  }

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile{transform:translateY(-18px)!important;z-index:3!important;}

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>i{

    position:relative!important;width:58px!important;height:58px!important;border-radius:50%!important;

    display:grid!important;place-items:center!important;background:var(--accent-default)!important;color:#111!important;

    border:2px solid rgba(255,142,92,.95)!important;box-shadow:0 0 0 8px rgba(18,18,20,.96),0 8px 22px rgba(0,0,0,.36)!important;

  }

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>i svg{width:24px!important;height:24px!important;}

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>span{margin-top:2px!important;}

}



/* 2026-09-15 mobile bottom nav: inset glass with protruding profile */

@media (max-width:768px){

  html body .mobile-bottom-nav{

    min-height:58px!important;

    padding:8px 9px calc(7px + env(safe-area-inset-bottom))!important;

    align-items:center!important;

    background:rgba(18,18,20,.72)!important;

    backdrop-filter:blur(7px) saturate(110%)!important;

    -webkit-backdrop-filter:blur(7px) saturate(110%)!important;

    border:1px solid rgba(255,255,255,.10)!important;

    border-radius:20px!important;

    overflow:visible!important;

  }

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile{transform:none!important;align-self:stretch!important;padding-top:29px!important;z-index:4!important;}

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>i{position:absolute!important;left:50%!important;top:-25px!important;transform:translateX(-50%)!important;width:56px!important;height:56px!important;border:0!important;box-shadow:0 8px 22px rgba(0,0,0,.38)!important;}

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>span{margin-top:0!important;}

}



/* 2026-09-15 mobile bottom nav: lower glass, subtle profile bump */

@media (max-width:768px){

  html body .mobile-bottom-nav{

    bottom:max(8px,env(safe-area-inset-bottom))!important;

    padding-top:14px!important;

    border:1px solid rgba(255,255,255,.08)!important;

    background:rgba(18,18,20,.76)!important;

    backdrop-filter:blur(8px) saturate(110%)!important;

    -webkit-backdrop-filter:blur(8px) saturate(110%)!important;

    box-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;

  }

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile{transform:translateY(-8px)!important;z-index:3!important;}

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>i{

    width:56px!important;height:56px!important;

    border:0!important;

    box-shadow:0 0 0 5px rgba(18,18,20,.96),0 7px 20px rgba(0,0,0,.32)!important;

  }

  html body .mobile-bottom-nav>a.mobile-bottom-nav__profile>span{margin-top:0!important;}

}



/* 2026-09-15 detail title/meta sizing + status colors */

@media (min-width:821px){

  html body.is-detail #profileTitle{font-size:clamp(38px,3.2vw,54px)!important;line-height:1.02!important;}

  html body.is-detail .anime-info .chips{font-size:15px!important;gap:10px!important;}

  html body.is-detail .anime-info .chips>span{font-size:15px!important;}

}

html body #profileStatusChip.is-finished{color:#ff626c!important;}

html body #profileStatusChip.is-ongoing{color:#59d98a!important;}



/* detail meta hard override */

@media (min-width:821px){html body #detailPage #profileTitle{font-size:clamp(34px,2.7vw,46px)!important;line-height:1.02!important}html body #detailPage .anime-info .chips{gap:8px!important}html body #detailPage .anime-info .chips>span{font-size:13px!important;line-height:1.15!important}}



/* Catalogue, detail metadata and header refinements. */

@media (min-width:1001px) {

  html:root body[class] main.site-shell > header.topbar {

    height:72px !important; min-height:72px !important;

    grid-template-rows:52px !important; padding:10px 19px !important;

  }

  html:root body[class] main.site-shell { padding-top:72px !important; }

  html:root body[class] .desktop-rail { top:72px !important; height:calc(100dvh - 72px) !important; }

  html:root body[class] main.site-shell > header.topbar #searchForm {

    height:48px !important; min-height:48px !important;

  }

  html:root body[class] main.site-shell > header.topbar #searchInput,

  html:root body[class] main.site-shell > header.topbar #searchInput::placeholder {

    color:#d0d0d0 !important; opacity:1 !important;

    font:800 15px/1.2 var(--font-heading) !important;

  }

  html:root body[class] main.site-shell > header.topbar .top-actions > :is(.header-premium-action,.notification-button) {

    height:40px !important; min-height:40px !important;

  }

  html:root body[class] main.site-shell > header.topbar .top-actions > .notification-button {

    width:40px !important; min-width:40px !important;

  }

  html:root body[class] main.site-shell > header.topbar .profile-button,

  html:root body[class] main.site-shell > header.topbar .profile-avatar {

    width:46px !important; min-width:46px !important; height:46px !important; min-height:46px !important;

  }

}

html body #detailPage .anime-info .chips > span {

  font-size:12px !important; line-height:1.15 !important;

}

html body #detailPage #profileStatusChip.is-finished { color:var(--status-danger,#e5484d) !important; }

html body #detailPage #profileStatusChip.is-ongoing { color:var(--status-success,#5fbf7a) !important; }



/* ===== ANIMEHUB MOBILE HEADER/NAV CANONICAL — 2026-09-15 =====

   This is the single final mobile header/navigation source of truth.

   It intentionally overrides legacy mobile header/menu experiments above. */

@media (max-width: 760px) {

  :root {

    --animehub-mobile-header-h: 58px;

  }



  /* One row only: centered search + notification/profile on the right. */

  html:root body[class] main.site-shell > header.topbar,

  html:root body main.site-shell > header.topbar,

  html body main.site-shell > header.topbar,

  html body .site-shell > .topbar,

  html body.is-detail .topbar,

  html body.is-watch .topbar {

    position: sticky !important;

    inset: 0 0 auto !important;

    top: 0 !important;

    z-index: 1500 !important;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;

    grid-template-rows: var(--animehub-mobile-header-h) !important;

    align-items: center !important;

    gap: 4px !important;

    width: 100% !important;

    height: var(--animehub-mobile-header-h) !important;

    min-height: var(--animehub-mobile-header-h) !important;

    padding: 0 8px !important;

    margin: 0 !important;

    border: 0 !important;

    border-bottom: 0 !important;

    background: #090a0c !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

  }



  /* Legacy header elements must not occupy a grid slot. */

  html body .topbar > .logo,

  html body .topbar > #mobileMenuButton,

  html body .topbar > .mobile-menu-button,

  html body .topbar .header-premium-action,

  html body .topbar .header-random-action {

    display: none !important;

  }



  /* Real search form. No pill/background; text visually centered. */

  html body .topbar #searchForm,

  html body .topbar .top-search,

  html body .topbar #searchForm:hover,

  html body .topbar #searchForm:focus-within,

  html body .topbar .top-search:hover,

  html body .topbar .top-search:focus-within {

    position: static !important;

    grid-area: 1 / 1 !important;

    justify-self: stretch !important;

    align-self: center !important;

    display: grid !important;

    grid-template-columns: 30px minmax(0, 1fr) !important;

    align-items: center !important;

    width: 100% !important;

    max-width: none !important;

    height: 44px !important;

    min-height: 44px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    transform: none !important;

  }



  html body .topbar #searchForm::before,

  html body .topbar #searchForm::after,

  html body .topbar .top-search::before,

  html body .topbar .top-search::after {

    content: none !important;

    display: none !important;

  }



  html body .topbar #searchForm > button[type="submit"],

  html body .topbar .top-search > button[type="submit"] {

    position: static !important;

    display: grid !important;

    place-items: center !important;

    width: 30px !important;

    min-width: 30px !important;

    height: 44px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: rgba(255,255,255,.58) !important;

    box-shadow: none !important;

    pointer-events: none !important;

  }



  html body .topbar #searchForm > button[type="submit"]::before,

  html body .topbar #searchForm > button[type="submit"]::after,

  html body .topbar .top-search > button[type="submit"]::before,

  html body .topbar .top-search > button[type="submit"]::after {

    content: none !important;

    display: none !important;

  }



  html body .topbar #searchForm > button[type="submit"] svg,

  html body .topbar .top-search > button[type="submit"] svg {

    display: block !important;

    width: 18px !important;

    height: 18px !important;

    opacity: .82 !important;

  }



  html body .topbar #searchInput,

  html body .topbar .top-search input {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 44px !important;

    margin: 0 !important;

    padding: 0 4px 0 0 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #fff !important;

    font-size: 13px !important;

    font-weight: 750 !important;

    line-height: 44px !important;

    text-align: center !important;

  }



  html body .topbar #searchInput::placeholder,

  html body .topbar .top-search input::placeholder {

    color: rgba(255,255,255,.56) !important;

    font-weight: 750 !important;

    opacity: 1 !important;

  }



  html body .topbar #headerSearchSettings {

    display: none !important;

  }



  /* Right-side actions: notification + avatar only. */

  html body .topbar .top-actions {

    position: static !important;

    grid-area: 1 / 2 !important;

    align-self: center !important;

    justify-self: end !important;

    display: flex !important;

    align-items: center !important;

    gap: 2px !important;

    width: auto !important;

    height: 44px !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

  }



  html body .topbar .notification-button,

  html body .topbar .profile-button {

    display: grid !important;

    place-items: center !important;

    width: 38px !important;

    min-width: 38px !important;

    max-width: 38px !important;

    height: 38px !important;

    min-height: 38px !important;

    max-height: 38px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: transparent !important;

    box-shadow: none !important;

  }



  html body .topbar .notification-button > span {

    display: grid !important;

    place-items: center !important;

    width: 28px !important;

    height: 28px !important;

    background: transparent !important;

  }



  html body .topbar .notification-button svg {

    width: 19px !important;

    height: 19px !important;

  }



  html body .topbar .profile-avatar,

  html body .topbar .profile-button img {

    display: block !important;

    width: 34px !important;

    height: 34px !important;

    border-radius: 50% !important;

  }



  /* Bottom bar: Profile is replaced by the burger slot. */

  html body .desktop-rail {

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  }



  html body .desktop-rail > a[data-view="profile"] {

    display: none !important;

  }



  html body .desktop-rail > .mobile-nav-burger {

    display: grid !important;

    place-items: center !important;

    order: 3 !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 56px !important;

    min-height: 56px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 14px !important;

    background: transparent !important;

    color: #8f939c !important;

    box-shadow: none !important;

    appearance: none !important;

  }



  html body .desktop-rail > a[data-view="home"] { order: 1 !important; }

  html body .desktop-rail > a[data-view="catalog"] { order: 2 !important; }

  html body .desktop-rail > a[data-view="favorites"] { order: 4 !important; }

  html body .desktop-rail > a[data-random-anime] { order: 5 !important; }



  html body .desktop-rail > a[data-view="history"],

  html body .desktop-rail > a[data-view="premium"],

  html body .desktop-rail > a[data-view="referrals"],

  html body .desktop-rail > .desktop-rail-button,

  html body .desktop-rail > .desktop-rail-section-gap,

  html body .desktop-rail > .desktop-rail-bottom-gap {

    display: none !important;

  }



  html body .desktop-rail > .mobile-nav-burger .burger-lines {

    position: relative !important;

    display: block !important;

    width: 23px !important;

    height: 18px !important;

  }



  html body .desktop-rail > .mobile-nav-burger .burger-lines i {

    position: absolute !important;

    left: 0 !important;

    display: block !important;

    width: 23px !important;

    height: 2px !important;

    border-radius: 999px !important;

    background: currentColor !important;

    transform-origin: center !important;

    transition:

      top .22s ease,

      transform .3s cubic-bezier(.2,.85,.2,1),

      opacity .16s ease !important;

  }



  html body .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(1) { top: 1px !important; }

  html body .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(2) { top: 8px !important; }

  html body .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(3) { top: 15px !important; }



  html body.mobile-drawer-open .desktop-rail > .mobile-nav-burger {

    color: #ff9367 !important;

  }

  html body.mobile-drawer-open .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(1) {

    top: 8px !important;

    transform: rotate(45deg) !important;

  }

  html body.mobile-drawer-open .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(2) {

    opacity: 0 !important;

    transform: scaleX(.25) !important;

  }

  html body.mobile-drawer-open .desktop-rail > .mobile-nav-burger .burger-lines i:nth-child(3) {

    top: 8px !important;

    transform: rotate(-45deg) !important;

  }



  /* The new drawer owns site-wide navigation on mobile. Disable the legacy popup menu. */

  html body .sidebar > .nav:not(.nav--footer) {

    display: none !important;

  }

}



@media (max-width: 370px) {

  html:root body[class] main.site-shell > header.topbar,

  html body main.site-shell > header.topbar {

    padding-inline: 5px !important;

    gap: 0 !important;

  }



  html body .topbar .notification-button,

  html body .topbar .profile-button {

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

  }



  html body .topbar .profile-avatar,

  html body .topbar .profile-button img {

    width: 31px !important;

    height: 31px !important;

  }



  html body .topbar #searchInput,

  html body .topbar .top-search input {

    font-size: 12px !important;

  }

}



/* MOBILE_TOP_DROPDOWN_V41_BEGIN */

@media (max-width: 820px) {

  body.is-watch .ah-player {

    overflow: visible !important;

  }



  body.is-watch .ah-player__top {

    inset: 0 0 auto 0 !important;

    z-index: 40 !important;

    isolation: auto !important;

    align-content: normal !important;

    grid-auto-rows: auto !important;

    pointer-events: auto !important;

    overflow: visible !important;

  }



  body.is-watch .ah-player-select {

    position: relative !important;

    pointer-events: auto !important;

  }



  body.is-watch .ah-player-select__menu {

    position: absolute !important;

    z-index: 120 !important;

    top: calc(100% + 5px) !important;

    bottom: auto !important;

    left: 0 !important;

    right: auto !important;



    width: auto !important;

    min-width: min(205px, calc(100vw - 28px)) !important;

    max-width: min(285px, calc(100vw - 28px)) !important;

    max-height: min(230px, 44svh) !important;



    padding: 6px !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    border: 1px solid rgba(255, 255, 255, .10) !important;

    border-radius: 11px !important;

    background: rgba(12, 13, 16, .97) !important;

    box-shadow: 0 18px 55px rgba(0, 0, 0, .58) !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;



    scrollbar-color: rgba(255, 255, 255, .22) transparent;

    scrollbar-width: thin;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

  }



  body.is-watch .ah-player-select:nth-child(n+3) .ah-player-select__menu {

    left: auto !important;

    right: 0 !important;

  }



  body.is-watch .ah-player-select__menu button {

    min-height: 38px !important;

    padding: 9px 11px !important;

    font-size: 11px !important;

  }



  body.is-watch .ah-player .ah-player__skip {

    top: auto !important;

    left: auto !important;

    right: 10px !important;

    bottom: 70px !important;

    margin: 0 !important;

    transform: none !important;

    translate: none !important;

  }

}

/* MOBILE_TOP_DROPDOWN_V41_END */



/* PREMIUM_TRIAL_BUTTON_V1_BEGIN */

#premiumPage .premium-trial-row {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  margin: 26px auto 0;

  padding: 0 16px;

}

#premiumPage .premium-trial-button {

  appearance: none;

  min-height: 50px;

  padding: 0 26px;

  border: 1px solid #fff !important;

  border-radius: 18px !important;

  background: #fff !important;

  color: #121214 !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.28);

  font: 800 14px/1 "Bricolage Grotesque", "Manrope", sans-serif !important;

  letter-spacing: -.01em;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transform-origin: center;

  transition: box-shadow .25s ease, filter .25s ease;

}

#premiumPage .premium-trial-button[hidden] { display: none !important; }

#premiumPage .premium-trial-button:hover:not(:disabled) {

  filter: brightness(1.04);

  box-shadow: 0 13px 36px rgba(0,0,0,.34);

}

#premiumPage .premium-trial-button:focus-visible {

  outline: 2px solid #fff;

  outline-offset: 4px;

}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  #premiumPage .premium-trial-button:hover:not(:disabled) {

    animation: hero-button-jelly .65s both;

  }

}

@media (max-width: 700px) {

  #premiumPage .premium-trial-row { margin-top: 20px; padding: 0; }

  #premiumPage .premium-trial-button {

    width: min(100%, 340px);

    min-height: 48px;

    padding: 0 18px;

  }

}

/* PREMIUM_TRIAL_BUTTON_V1_END */



/* ANIMEHUB_NOTICE_TEMPLATE_V1_BEGIN */

.ah-notice-layer {

  position: fixed;

  inset: 0;

  z-index: 14000;

  display: grid;

  place-items: center;

  padding: 20px;

  background: rgba(0, 0, 0, .72);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

}



.ah-notice-layer[hidden] {

  display: none !important;

}



body.has-animehub-notice {

  overflow: hidden;

}



.ah-notice-card {

  position: relative;

  width: min(510px, calc(100vw - 32px));

  overflow: hidden;

  padding: 34px 28px 24px;

  border: 1px solid rgba(255, 255, 255, .13);

  border-radius: 24px;

  background:

    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .07), transparent 34%),

    linear-gradient(145deg, #151515 0%, #090909 72%);

  color: #fff;

  text-align: center;

  box-shadow: 0 32px 100px rgba(0, 0, 0, .64);

}



.ah-notice-card::after {

  content: "";

  position: absolute;

  inset: auto -20% -44% 20%;

  height: 60%;

  pointer-events: none;

  background: radial-gradient(circle, rgba(255, 255, 255, .055), transparent 68%);

}



.ah-notice-close {

  position: absolute;

  top: 14px;

  right: 14px;

  z-index: 2;

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, .08);

  border-radius: 50%;

  background: rgba(255, 255, 255, .07);

  color: #ddd;

  font: 800 25px/1 var(--font-reading);

  cursor: pointer;

}



.ah-notice-kicker {

  position: relative;

  z-index: 1;

  margin: 0 44px 10px;

  color: #ff9c73;

  font-family: var(--font-reading);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .04em;

}



.ah-notice-title {

  position: relative;

  z-index: 1;

  margin: 0;

  color: #fff;

  font-family: var(--font-heading);

  font-size: clamp(28px, 5vw, 38px);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -.045em;

}



.ah-notice-copy {

  position: relative;

  z-index: 1;

  max-width: 430px;

  margin: 15px auto 0;

  color: #a8a8aa;

  font-family: var(--font-reading);

  font-size: 15px;

  font-weight: 600;

  line-height: 1.48;

}



.ah-notice-actions {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 11px;

  margin-top: 26px;

}



.ah-notice-button {

  min-width: 0;

  min-height: 52px;

  padding: 0 18px;

  border-radius: 18px;

  font-family: var(--font-reading);

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;

  transform-origin: center;

}



.ah-notice-button--primary {

  border: 1px solid #fff;

  background: #fff;

  color: #121214;

}



.ah-notice-button--secondary {

  border: 1px solid rgba(255, 255, 255, .11);

  background: #202022;

  color: #fff;

}



.ah-notice-never {

  position: relative;

  z-index: 1;

  margin: 15px auto 0;

  padding: 5px 8px;

  border: 0;

  background: transparent;

  color: #79797d;

  font-family: var(--font-reading);

  font-size: 12px;

  font-weight: 750;

  cursor: pointer;

}



.ah-notice-never:hover {

  color: #b7b7b9;

}



@keyframes animehub-button-jelly {

  0% { scale: 1; }

  30% { scale: 1.045 .965; }

  52% { scale: .985 1.035; }

  72% { scale: 1.015 .99; }

  100% { scale: 1; }

}



@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  .ah-notice-button:hover,

  #premiumPage .premium-trial-button:hover:not(:disabled) {

    animation: animehub-button-jelly .65s both !important;

  }

}



#premiumPage .premium-trial-button {

  background: #fff !important;

  color: #121214 !important;

  border: 1px solid #fff !important;

  border-radius: 18px !important;

  transform-origin: center;

}



@media (max-width: 620px) {

  .ah-notice-card {

    padding: 31px 18px 21px;

    border-radius: 22px;

  }



  .ah-notice-title {

    font-size: 29px;

  }



  .ah-notice-copy {

    font-size: 13px;

  }



  .ah-notice-actions {

    grid-template-columns: 1fr;

  }



  .ah-notice-button {

    min-height: 49px;

  }

}

/* ANIMEHUB_NOTICE_TEMPLATE_V1_END */



/* NOTICE_PRIMARY_ONE_LINE_V1_BEGIN */

#animeHubNoticePrimary {

  white-space: nowrap !important;

  font-size: 13px !important;

  padding-left: 12px !important;

  padding-right: 12px !important;

}

/* NOTICE_PRIMARY_ONE_LINE_V1_END */



/* ANIMEHUB_NOTICE_COMPACT_V2_BEGIN */

.ah-notice-actions {

  grid-template-columns: minmax(0, 160px) minmax(0, 128px) !important;

  justify-content: center !important;

  gap: 10px !important;

  margin-top: 22px !important;

}



.ah-notice-button {

  min-height: 44px !important;

  padding: 0 14px !important;

  border-radius: 15px !important;

  font-size: 13px !important;

  white-space: nowrap !important;

}



@media (max-width: 620px) {

  .ah-notice-actions {

    grid-template-columns: minmax(0, 155px) minmax(0, 120px) !important;

    gap: 8px !important;

  }



  .ah-notice-button {

    min-height: 43px !important;

    padding: 0 12px !important;

    font-size: 12px !important;

  }

}

/* ANIMEHUB_NOTICE_COMPACT_V2_END */



/* ANIMEHUB_NOTICE_MOBILE_ALIGN_V3_BEGIN */

@media (max-width: 620px) {

  .ah-notice-actions {

    width: 100% !important;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

    align-items: center !important;

    justify-content: stretch !important;

    gap: 8px !important;

  }



  .ah-notice-button {

    width: 100% !important;

    min-width: 0 !important;

    height: 43px !important;

    min-height: 43px !important;

    padding: 0 10px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    line-height: 1 !important;

    white-space: nowrap !important;

  }



  #animeHubNoticePrimary,

  #animeHubNoticeSecondary {

    align-self: center !important;

    margin: 0 !important;

  }

}

/* ANIMEHUB_NOTICE_MOBILE_ALIGN_V3_END */



/* UI_POLISH_V4_BEGIN */



/* History + continue watching: peach played portion, old track stays untouched. */

html body #catalog #historyGrid .history-cover-progress,

html body #catalog #homeContinueGrid .history-cover-progress,

html body #profilePage #profileHistoryRailV33 .history-cover-progress {

  background:

    linear-gradient(

      to right,

      var(--orange, #ff9c73) var(--history-progress, 0%),

      var(--history-track-color, #ffffff20) var(--history-progress, 0%)

    ) !important;

}



/* Search overlay gently fades in; the actual search box floats into place. */

@keyframes animehub-search-overlay-in {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes animehub-search-panel-in {

  from {

    opacity: 0;

    transform: translateY(-18px) scale(.985);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



html body #searchModal.search-redesign:not([hidden]) {

  animation: animehub-search-overlay-in .22s ease-out both;

}



html body #searchModal.search-redesign:not([hidden]) .search-dialog {

  animation: animehub-search-panel-in .34s cubic-bezier(.22,.8,.25,1) both;

  transform-origin: top center;

}



@media (prefers-reduced-motion: reduce) {

  html body #searchModal.search-redesign:not([hidden]),

  html body #searchModal.search-redesign:not([hidden]) .search-dialog {

    animation: none !important;

  }

}



/* UI_POLISH_V4_END */



/* NOTIFICATIONS_DRAWER_V2_1_BEGIN */

html body .notifications-popover {

  position: fixed !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  left: auto !important;

  z-index: 16000 !important;

  width: clamp(540px, 42vw, 780px) !important;

  height: 100vh !important;

  height: 100dvh !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  border: 0 !important;

  border-left: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 0 !important;

  background: #090909 !important;

  color: #fff !important;

  box-shadow: -32px 0 90px rgba(0,0,0,.62) !important;

  transform-origin: right center;

}



html body .notifications-popover[hidden] {

  display: none !important;

}



html body .notifications-popover:not([hidden]) {

  animation: animehub-notifications-drawer-in .30s cubic-bezier(.22,.8,.25,1) both;

}



@keyframes animehub-notifications-drawer-in {

  from { opacity: 0; transform: translateX(36px); }

  to { opacity: 1; transform: translateX(0); }

}



html body.notifications-drawer-open::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 15990;

  background: rgba(0,0,0,.48);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

  pointer-events: none;

}



html body .notifications-popover > header {

  flex: 0 0 auto !important;

  min-height: 92px !important;

  margin: 0 !important;

  padding: 28px 28px 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 18px !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;

  background: #090909 !important;

}



html body .notifications-popover > header strong {

  color: #fff !important;

  font-family: var(--font-heading) !important;

  font-size: clamp(27px, 2.1vw, 36px) !important;

  text-transform: uppercase !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: -.035em !important;

}



html body #notificationsClose {

  flex: 0 0 40px !important;

  width: 40px !important;

  height: 40px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 50% !important;

  background: #171717 !important;

  color: #fff !important;

  font-size: 23px !important;

  line-height: 1 !important;

  cursor: pointer !important;

}



html body .notifications-list {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  padding: 18px 20px 30px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  overflow-y: auto !important;

  overscroll-behavior: contain;

  background: #090909 !important;

}



html body .notification-item {

  display: grid !important;

  grid-template-columns: 52px minmax(0,1fr) !important;

  gap: 14px !important;

  align-items: start !important;

  margin: 0 !important;

  padding: 16px !important;

  border: 1px solid rgba(255,255,255,.09) !important;

  border-radius: 18px !important;

  background: #111 !important;

  color: #fff !important;

  box-shadow: none !important;

}



html body .notification-item__avatar {

  width: 52px !important;

  height: 52px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  background: #1b1b1b !important;

}



html body .notification-item__body {

  min-width: 0 !important;

}



html body .notification-item__top {

  display: flex !important;

  align-items: baseline !important;

  justify-content: space-between !important;

  gap: 12px !important;

}



html body .notification-item__title {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #fff !important;

  font-family: var(--font-reading) !important;

  font-size: 14px !important;

  font-weight: 800 !important;

}



html body .notification-item__time {

  flex: 0 0 auto;

  color: #666 !important;

  font-family: var(--font-reading) !important;

  font-size: 10px !important;

  font-weight: 600 !important;

}



html body .notification-item__copy {

  margin: 5px 0 0 !important;

  color: #9a9a9d !important;

  font-family: var(--font-reading) !important;

  font-size: 12px !important;

  line-height: 1.45 !important;

}



html body .notification-actions {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin-top: 13px !important;

}



html body .notification-action {

  min-height: 38px !important;

  padding: 0 15px !important;

  border-radius: 13px !important;

  font-family: var(--font-reading) !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  cursor: pointer !important;

}



html body .notification-action--primary {

  border: 1px solid #fff !important;

  background: #fff !important;

  color: #0b0b0b !important;

}



html body .notification-action--secondary {

  border: 1px solid rgba(255,255,255,.12) !important;

  background: #1a1a1a !important;

  color: #fff !important;

}



html body .notification-action:disabled {

  opacity: .55 !important;

  cursor: wait !important;

}



html body .notification-item__state {

  width: max-content;

  margin-top: 12px;

  padding: 7px 10px;

  border: 1px solid rgba(255,255,255,.09);

  border-radius: 10px;

  background: #171717;

  color: #858589;

  font-family: var(--font-reading);

  font-size: 10px;

  font-weight: 700;

}



html body .notification-empty {

  margin: auto 0;

  padding: 44px 20px;

  text-align: center;

}



html body .notification-empty strong {

  display: block;

  color: #fff;

  font-family: var(--font-heading);

  font-size: 23px;

  font-weight: 800;

}



html body .notification-empty p {

  max-width: 300px;

  margin: 9px auto 0;

  color: #69696d;

  font-family: var(--font-reading);

  font-size: 12px;

  line-height: 1.5;

}



html body .notification-inline-error {

  padding: 11px 13px;

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 12px;

  background: #181818;

  color: #bdbdbf;

  font-size: 11px;

}



@media (hover:hover) and (prefers-reduced-motion:no-preference) {

  html body .notification-action:hover,

  html body #notificationsClose:hover {

    animation: animehub-button-jelly .55s both;

  }

}



@media (max-width: 700px) {

  html body .notifications-popover {

    width: 100vw !important;

  }



  html body .notifications-popover > header {

    min-height: 78px !important;

    padding: 20px 18px 17px !important;

  }



  html body .notifications-popover > header strong {

    font-size: 26px !important;

  }



  html body .notifications-list {

    padding: 12px 12px 24px !important;

  }



  html body .notification-item {

    grid-template-columns: 46px minmax(0,1fr) !important;

    gap: 11px !important;

    padding: 14px !important;

    border-radius: 16px !important;

  }



  html body .notification-item__avatar {

    width: 46px !important;

    height: 46px !important;

  }

}



@media (prefers-reduced-motion: reduce) {

  html body .notifications-popover:not([hidden]) {

    animation: none !important;

  }

}

/* NOTIFICATIONS_DRAWER_V2_1_END */



/* NOTIFICATIONS_PROFILE_LINK_V4_BEGIN */

html body .notifications-popover {

  position: fixed !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  left: auto !important;

  z-index: 16000 !important;

  width: clamp(540px, 42vw, 780px) !important;

  height: 100vh !important;

  height: 100dvh !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;

  border: 0 !important;

  border-left: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 0 !important;

  background: #090909 !important;

  color: #fff !important;

  box-shadow: -32px 0 90px rgba(0,0,0,.62) !important;

  transform-origin: right center;

}



html body .notifications-popover[hidden] {

  display: none !important;

}



html body .notifications-popover:not([hidden]) {

  animation: animehub-notifications-drawer-in .30s cubic-bezier(.22,.8,.25,1) both;

}



@keyframes animehub-notifications-drawer-in {

  from { opacity: 0; transform: translateX(36px); }

  to { opacity: 1; transform: translateX(0); }

}



html body.notifications-drawer-open::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 15990;

  background: rgba(0,0,0,.48);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

  pointer-events: none;

}



html body .notifications-popover > header {

  flex: 0 0 auto !important;

  min-height: 92px !important;

  margin: 0 !important;

  padding: 28px 28px 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 18px !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;

  background: #090909 !important;

}



html body .notifications-popover > header strong {

  color: #fff !important;

  font-family: var(--font-heading) !important;

  font-size: clamp(27px, 2.1vw, 36px) !important;

  text-transform: uppercase !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: -.035em !important;

}



html body #notificationsClose {

  flex: 0 0 40px !important;

  width: 40px !important;

  height: 40px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 50% !important;

  background: #171717 !important;

  color: #fff !important;

  font-size: 23px !important;

  line-height: 1 !important;

  cursor: pointer !important;

}



html body .notifications-list {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  padding: 18px 20px 30px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  overflow-y: auto !important;

  overscroll-behavior: contain;

  background: #090909 !important;

}



html body .notification-item {

  position: relative !important;

  isolation: isolate !important;

  overflow: hidden !important;

  display: grid !important;

  grid-template-columns: 52px minmax(0,1fr) !important;

  gap: 14px !important;

  align-items: start !important;

  margin: 0 !important;

  padding: 16px !important;

  border: 1px solid rgba(255,255,255,.09) !important;

  border-radius: 18px !important;

  background: #111 !important;

  color: #fff !important;

  box-shadow: none !important;

}



html body .notification-item__banner {

  position: absolute !important;

  inset: 0 !important;

  z-index: -1 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  opacity: .34 !important;

  filter: brightness(.72) saturate(.9) !important;

  pointer-events: none !important;

}



html body .notification-item.has-banner::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: linear-gradient(90deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.50) 58%, rgba(8,8,8,.66) 100%);

  pointer-events: none;

}



html body .notification-item__avatar,

html body .notification-item__body {

  position: relative !important;

  z-index: 1 !important;

}



html body .notification-item__avatar {

  width: 52px !important;

  height: 52px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  background: #1b1b1b !important;

}



html body .notification-item__body {

  min-width: 0 !important;

}



html body .notification-profile-link {

  cursor: pointer !important;

}



html body .notification-item__title.notification-profile-link:hover {

  opacity: .72;

}



html body .notification-profile-link:focus-visible {

  outline: 2px solid rgba(255,255,255,.78);

  outline-offset: 3px;

}



html body .notification-item__top {

  display: flex !important;

  align-items: baseline !important;

  justify-content: space-between !important;

  gap: 12px !important;

}



html body .notification-item__title {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #fff !important;

  font-family: var(--font-reading) !important;

  font-size: 14px !important;

  font-weight: 800 !important;

}



html body .notification-item__time {

  flex: 0 0 auto;

  color: #666 !important;

  font-family: var(--font-reading) !important;

  font-size: 10px !important;

  font-weight: 600 !important;

}



html body .notification-item__copy {

  margin: 5px 0 0 !important;

  color: #9a9a9d !important;

  font-family: var(--font-reading) !important;

  font-size: 12px !important;

  line-height: 1.45 !important;

}



html body .notification-actions {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin-top: 13px !important;

}



html body .notification-action {

  min-height: 38px !important;

  padding: 0 15px !important;

  border-radius: 13px !important;

  font-family: var(--font-reading) !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  cursor: pointer !important;

}



html body .notification-action--primary {

  border: 1px solid #fff !important;

  background: #fff !important;

  color: #0b0b0b !important;

}



html body .notification-action--secondary {

  border: 1px solid rgba(255,255,255,.12) !important;

  background: #1a1a1a !important;

  color: #fff !important;

}



html body .notification-action:disabled {

  opacity: .55 !important;

  cursor: wait !important;

}



html body .notification-item__state {

  width: max-content;

  margin-top: 12px;

  padding: 7px 10px;

  border: 1px solid rgba(255,255,255,.09);

  border-radius: 10px;

  background: #171717;

  color: #858589;

  font-family: var(--font-reading);

  font-size: 10px;

  font-weight: 700;

}



html body .notification-empty {

  margin: auto 0;

  padding: 44px 20px;

  text-align: center;

}



html body .notification-empty strong {

  display: block;

  color: #fff;

  font-family: var(--font-heading);

  font-size: 23px;

  font-weight: 800;

}



html body .notification-empty p {

  max-width: 300px;

  margin: 9px auto 0;

  color: #69696d;

  font-family: var(--font-reading);

  font-size: 12px;

  line-height: 1.5;

}



html body .notification-inline-error {

  padding: 11px 13px;

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 12px;

  background: #181818;

  color: #bdbdbf;

  font-size: 11px;

}



@media (hover:hover) and (prefers-reduced-motion:no-preference) {

  html body .notification-action:hover,

  html body #notificationsClose:hover {

    animation: animehub-button-jelly .55s both;

  }

}



@media (max-width: 700px) {

  html body .notifications-popover {

    width: 100vw !important;

  }



  html body .notifications-popover > header {

    min-height: 78px !important;

    padding: 20px 18px 17px !important;

  }



  html body .notifications-popover > header strong {

    font-size: 26px !important;

  }



  html body .notifications-list {

    padding: 12px 12px 24px !important;

  }



  html body .notification-item {

    grid-template-columns: 46px minmax(0,1fr) !important;

    gap: 11px !important;

    padding: 14px !important;

    border-radius: 16px !important;

  }



  html body .notification-item__avatar {

    width: 46px !important;

    height: 46px !important;

  }

}



@media (prefers-reduced-motion: reduce) {

  html body .notifications-popover:not([hidden]) {

    animation: none !important;

  }

}

/* NOTIFICATIONS_PROFILE_LINK_V4_END */



/* PROFILE_BANNER_REORG_V1_BEGIN */

@media (min-width: 1001px) {

  html body.is-library #profilePage.profile-page:not([hidden]) {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 0 100px !important;

    overflow-x: clip !important;

  }



  html body.is-library #profilePage .profile-hero {

    position: relative !important;

    width: min(calc(100% - 64px), 1450px) !important;

    max-width: 1450px !important;

    min-height: 560px !important;

    height: 560px !important;

    margin: 28px auto 0 !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.075) !important;

    border-radius: 26px !important;

    background: #080808 !important;

    box-shadow: 0 18px 54px rgba(0,0,0,.24) !important;

    box-sizing: border-box !important;

  }



  html body.is-library #profilePage .profile-hero__banner {

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    width: 100% !important;

    height: 420px !important;

    border-radius: 25px 25px 20px 20px !important;

    overflow: hidden !important;

    background-position: center !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

  }



  html body.is-library #profilePage .profile-hero__fade {

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    width: 100% !important;

    height: 420px !important;

    border-radius: 25px 25px 20px 20px !important;

    background:

      linear-gradient(

        to bottom,

        rgba(0,0,0,.02) 0%,

        rgba(0,0,0,.03) 60%,

        rgba(8,8,8,.30) 86%,

        rgba(8,8,8,.72) 100%

      ) !important;

    pointer-events: none !important;

  }



  html body.is-library #profilePage .profile-hero__identity {

    position: absolute !important;

    left: 30px !important;

    right: 330px !important;

    top: 350px !important;

    bottom: auto !important;

    z-index: 4 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 18px !important;

    max-width: none !important;

  }



  html body.is-library #profilePage .profile-hero__boundary {

    width: 150px !important;

    min-width: 150px !important;

    flex: 0 0 150px !important;

  }



  html body.is-library #profilePage .profile-avatar-shell {

    width: 150px !important;

    height: 150px !important;

  }



  html body.is-library #profilePage .profile-hero__avatar {

    width: 150px !important;

    height: 150px !important;

    min-width: 150px !important;

    flex-basis: 150px !important;

    border: 6px solid #080808 !important;

    border-radius: 50% !important;

    box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;

  }



  html body.is-library #profilePage .profile-hero__details {

    min-width: 0 !important;

    padding-top: 57px !important;

  }



  html body.is-library #profilePage .profile-handle {

    margin: 0 !important;

    color: #fff !important;

    font-size: clamp(28px, 2.7vw, 46px) !important;

    font-weight: 900 !important;

    line-height: .98 !important;

    letter-spacing: -.035em !important;

  }



  html body.is-library #profilePage .profile-rank {

    margin-top: 10px !important;

    margin-left: 0 !important;

    transform: none !important;

  }



  html body.is-library #profilePage .profile-rank span {

    margin-left: 0 !important;

  }



  html body.is-library #profilePage .profile-hero__actions {

    position: absolute !important;

    top: auto !important;

    right: 24px !important;

    bottom: 24px !important;

    z-index: 5 !important;

    height: auto !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

  }



  html body.is-library #profilePage .profile-hero__actions button {

    height: 42px !important;

    min-height: 42px !important;

    align-self: center !important;

  }



  html body.is-library #profilePage .profile-edit-button {

    position: absolute !important;

    top: auto !important;

    right: 24px !important;

    bottom: 24px !important;

    z-index: 5 !important;

    min-height: 42px !important;

  }



  html body.is-library #profilePage > :not(.profile-hero) {

    width: min(calc(100% - 64px), 1450px) !important;

    max-width: 1450px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

  }

}

/* PROFILE_BANNER_REORG_V1_END */



/* PROFILE_MEDIA_EDITOR_V1_BEGIN */

/* Saved profile crop/zoom. */

#publicProfileBanner {

  overflow: hidden !important;

}



#publicProfileBanner .profile-banner-media {

  position: absolute !important;

  inset: 0 !important;

  z-index: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  object-fit: cover !important;

  user-select: none !important;

  pointer-events: none !important;

  will-change: transform, object-position !important;

}



#profilePage .profile-avatar-shell {

  overflow: visible !important;

}



#profilePage .profile-avatar-crop {

  position: relative !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  border: 6px solid #080808 !important;

  border-radius: 50% !important;

  background: #0b0b0d !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;

}



#profilePage .profile-avatar-crop > .profile-hero__avatar {

  display: block !important;

  width: 100% !important;

  min-width: 100% !important;

  max-width: none !important;

  height: 100% !important;

  min-height: 100% !important;

  max-height: none !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  object-fit: cover !important;

  box-shadow: none !important;

  will-change: transform, object-position !important;

}



/* Existing desktop/mobile rules size the shell; the crop follows it. */

@media (max-width: 1000px) {

  #profilePage .profile-avatar-crop { border-width: 4px !important; }

}



.profile-media-actions {

  justify-self: end;

  display: inline-flex;

  align-items: center;

  justify-content: flex-end;

  gap: 9px;

  flex-wrap: wrap;

}



.profile-media-edit-current {

  min-height: 44px;

  padding: 0 15px;

  border: 1px solid #343740;

  border-radius: 11px;

  background: #111318;

  color: #d9d9dc;

  font-family: var(--font-reading, "Manrope", sans-serif);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

}

.profile-media-edit-current:hover { background: #24262c; color: #fff; }

.profile-media-edit-current:disabled { opacity: .36; cursor: default; }



.profile-media-editor {

  position: fixed;

  inset: 0;

  z-index: 22000;

  display: grid;

  place-items: center;

  padding: 22px;

  background: rgba(0,0,0,.70);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}

.profile-media-editor[hidden] { display: none !important; }



.profile-media-editor__dialog {

  width: min(760px, calc(100vw - 36px));

  max-height: min(860px, calc(100dvh - 36px));

  overflow: auto;

  padding: 20px;

  border: 1px solid rgba(255,255,255,.11);

  border-radius: 24px;

  background: #0b0b0d;

  color: #fff;

  box-shadow: 0 30px 100px rgba(0,0,0,.58);

}



.profile-media-editor__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;

}

.profile-media-editor__head p {

  margin: 0 0 5px;

  color: #ff9367;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .08em;

}

.profile-media-editor__head h2 {

  margin: 0;

  color: #fff;

  font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);

  font-size: clamp(25px, 3.1vw, 38px);

  font-weight: 800;

  line-height: 1;

}

.profile-media-editor__head > button {

  width: 42px;

  min-width: 42px;

  height: 42px;

  padding: 0;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  background: #171719;

  color: #fff;

  font-size: 23px;

  cursor: pointer;

}



.profile-media-editor__stage {

  position: relative;

  width: 100%;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);

  background:

    linear-gradient(45deg,#141416 25%,transparent 25%),

    linear-gradient(-45deg,#141416 25%,transparent 25%),

    linear-gradient(45deg,transparent 75%,#141416 75%),

    linear-gradient(-45deg,transparent 75%,#141416 75%), #0e0e10;

  background-size: 22px 22px;

  background-position: 0 0,0 11px,11px -11px,-11px 0;

  cursor: grab;

  touch-action: none;

}

.profile-media-editor__stage.is-banner {

  aspect-ratio: 3.45 / 1;

  border-radius: 18px;

}

.profile-media-editor__stage.is-avatar {

  width: min(420px, 80vw);

  aspect-ratio: 1;

  margin-inline: auto;

  border-radius: 50%;

}

.profile-media-editor__stage.is-dragging { cursor: grabbing; }

.profile-media-editor__stage > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  max-width: none;

  object-fit: cover;

  user-select: none;

  pointer-events: none;

  will-change: transform, object-position;

}

.profile-media-editor__guide {

  position: absolute;

  inset: 0;

  border: 1px solid rgba(255,255,255,.26);

  border-radius: inherit;

  pointer-events: none;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);

}



.profile-media-editor__controls {

  display: grid;

  gap: 10px;

  margin-top: 18px;

}

.profile-media-editor__controls label {

  display: grid;

  gap: 10px;

}

.profile-media-editor__controls label > span {

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #fff;

  font-size: 12px;

  font-weight: 800;

}

.profile-media-editor__controls output { color: #8d8d92; }

.profile-media-editor__controls input[type="range"] {

  width: 100%;

  accent-color: #fff;

}

.profile-media-editor__controls p {

  margin: 0;

  color: #77777d;

  font-size: 11px;

  line-height: 1.5;

}



.profile-media-editor__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-top: 20px;

}

.profile-media-editor__footer > div { display: flex; gap: 9px; }

.profile-media-editor__footer button {

  min-height: 42px;

  padding: 0 17px;

  border-radius: 13px;

  font-family: var(--font-reading, "Manrope", sans-serif);

  font-size: 12px;

  font-weight: 850;

  cursor: pointer;

}

.profile-media-editor__reset,

.profile-media-editor__cancel {

  border: 1px solid rgba(255,255,255,.12);

  background: #171719;

  color: #fff;

}

.profile-media-editor__apply {

  border: 1px solid #fff;

  background: #fff;

  color: #0b0b0d;

}



@media (hover:hover) and (prefers-reduced-motion:no-preference) {

  .profile-media-editor__footer button:hover,

  .profile-media-editor__head > button:hover,

  .profile-media-edit-current:hover {

    animation: animehub-button-jelly .55s both;

  }

}



@media (max-width: 700px) {

  .profile-media-actions { justify-self: start; width: 100%; justify-content: flex-start; }

  .profile-media-editor { padding: 10px; }

  .profile-media-editor__dialog {

    width: calc(100vw - 20px);

    max-height: calc(100dvh - 20px);

    padding: 15px;

    border-radius: 20px;

  }

  .profile-media-editor__stage.is-banner {

    aspect-ratio: 2.25 / 1;

    border-radius: 14px;

  }

  .profile-media-editor__stage.is-avatar { width: min(330px, 78vw); }

  .profile-media-editor__footer { align-items: stretch; flex-direction: column; }

  .profile-media-editor__footer > div { display: grid; grid-template-columns: 1fr 1fr; }

  .profile-media-editor__reset { width: 100%; }

}

/* PROFILE_MEDIA_EDITOR_V1_END */



/* PROFILE_INLINE_UI_POLISH_V2_BEGIN */

/* Profile owner buttons open the editor below the unchanged hero. */

body.profile-inline-settings #profilePage.profile-page:not([hidden]) {

  padding-bottom: 0 !important;

}



body.profile-inline-settings #profilePage > :not(.profile-hero) {

  display: none !important;

}



body.profile-inline-settings #settingsPage.is-inline-profile-settings {

  display: block !important;

  width: min(calc(100% - 64px), 1450px) !important;

  max-width: 1450px !important;

  margin: 26px auto 0 !important;

  padding: 0 0 90px !important;

  box-sizing: border-box !important;

}



body.profile-inline-settings #settingsPage.is-inline-profile-settings > .settings-title,

body.profile-inline-settings #settingsPage.is-inline-profile-settings > #settingsPreview {

  display: none !important;

}



body.profile-inline-settings #settingsPage.is-inline-profile-settings .settings-stack {

  margin-top: 0 !important;

}



/* Support both standalone /settings and inline profile mode. */

#settingsPage[data-settings-section="profile"] .settings-clean-section:not(#publicProfileSettings),

#settingsPage .settings-stack[data-settings-section="profile"] .settings-clean-section:not(#publicProfileSettings) {

  display: none !important;

}



#settingsPage[data-settings-section="settings"] #publicProfileSettings,

#settingsPage .settings-stack[data-settings-section="settings"] #publicProfileSettings {

  display: none !important;

}



/* Search: no navy slab behind the helper/result area. */

html body #searchModal .search-results-count,

html body #searchModal #searchModalResults.modal-results {

  background: transparent !important;

  background-color: transparent !important;

  box-shadow: none !important;

}



/* Leaderboard: banner is visible, with only a light readability dim. */

html body.is-home #leaderboardGrid .leaderboard-banner,

html body #leaderboardGrid .leaderboard-banner {

  opacity: .55 !important;

  filter: brightness(.96) saturate(.98) !important;

}



/* Keep only the actual avatar above the banner. Do NOT catch the crown image. */

html body #leaderboardGrid .leaderboard-avatar-shell {

  position: relative !important;

  z-index: 3 !important;

  opacity: 1 !important;

  filter: none !important;

  mix-blend-mode: normal !important;

}



html body #leaderboardGrid .leaderboard-avatar-shell > img.leaderboard-avatar {

  position: relative !important;

  z-index: 1 !important;

  opacity: 1 !important;

  filter: none !important;

  mix-blend-mode: normal !important;

}



/* Premium crown belongs at the avatar's top-right, not in normal document flow. */

html body #leaderboardGrid .leaderboard-avatar-shell > img.premium-crown {

  position: absolute !important;

  top: -5px !important;

  right: -5px !important;

  bottom: auto !important;

  left: auto !important;

  z-index: 4 !important;

  width: 22px !important;

  height: 22px !important;

  opacity: 1 !important;

  filter: none !important;

  transform: none !important;

}



/* Orange profile status/rank badge stays temporarily hidden. */

html body.is-library #profilePage .profile-rank,

html body #profilePage .profile-rank {

  display: none !important;

}



@media (max-width: 820px) {

  body.profile-inline-settings #settingsPage.is-inline-profile-settings {

    width: min(calc(100% - 24px), 1450px) !important;

    margin-top: 18px !important;

    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;

  }

}

/* PROFILE_INLINE_UI_POLISH_V2_END */



/* PROFILE_OWNER_BUTTONS_V1_BEGIN */

html body.is-library #profilePage .profile-hero__actions {

  position: absolute !important;

  top: auto !important;

  right: 24px !important;

  bottom: 24px !important;

  z-index: 7 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 10px !important;

  height: auto !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action {

  appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 9px !important;

  height: 44px !important;

  min-height: 44px !important;

  padding: 0 17px !important;

  border: 1px solid rgba(255,255,255,.12) !important;

  border-radius: 12px !important;

  background: rgba(24,24,26,.92) !important;

  color: #f5f5f5 !important;

  box-shadow: none !important;

  font: inherit !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: -.01em !important;

  text-transform: none !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  transform: translateZ(0) scale(1) !important;

  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action:hover {

  background: rgba(31,31,34,.98) !important;

  border-color: rgba(255,255,255,.22) !important;

  color: #fff !important;

  transform: translateZ(0) scale(1.025) !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action:active {

  transform: translateZ(0) scale(.985) !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action:focus-visible {

  outline: 2px solid rgba(255,255,255,.72) !important;

  outline-offset: 3px !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action__icon {

  display: block !important;

  width: 17px !important;

  height: 17px !important;

  flex: 0 0 17px !important;

  color: currentColor !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action--edit {

  min-width: 150px !important;

}



html body.is-library #profilePage .profile-hero__actions .profile-owner-action--settings {

  min-width: 132px !important;

}



@media (max-width: 820px) {

  html body.is-library #profilePage .profile-hero__actions {

    right: 14px !important;

    bottom: 14px !important;

    gap: 7px !important;

  }



  html body.is-library #profilePage .profile-hero__actions .profile-owner-action {

    height: 38px !important;

    min-height: 38px !important;

    padding: 0 11px !important;

    gap: 7px !important;

    border-radius: 10px !important;

    font-size: 11px !important;

  }



  html body.is-library #profilePage .profile-hero__actions .profile-owner-action__icon {

    width: 15px !important;

    height: 15px !important;

    flex-basis: 15px !important;

  }



  html body.is-library #profilePage .profile-hero__actions .profile-owner-action--edit,

  html body.is-library #profilePage .profile-hero__actions .profile-owner-action--settings {

    min-width: 0 !important;

  }

}

/* PROFILE_OWNER_BUTTONS_V1_END */



/* PROFILE_PAGE_BACKGROUND_V1_BEGIN */

#profilePage {

  position: relative !important;

  isolation: isolate !important;

}



#profilePage > .profile-page-background-layer {

  position: fixed !important;

  top: 60px !important;

  right: 0 !important;

  bottom: 0 !important;

  left: 85px !important;

  z-index: 0 !important;

  display: block !important;

  width: auto !important;

  max-width: none !important;

  margin: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  opacity: 0 !important;

  transition: opacity .28s ease !important;

}



#profilePage.has-profile-page-background > .profile-page-background-layer {

  opacity: 1 !important;

}



#profilePage > .profile-page-background-layer::before {

  content: "" !important;

  position: absolute !important;

  inset: -18px !important;

  background-image: var(--profile-page-background-image, none) !important;

  background-position: var(--profile-page-background-position, 50% 50%) !important;

  background-size: cover !important;

  background-repeat: no-repeat !important;

  transform-origin: var(--profile-page-background-position, 50% 50%) !important;

  transform: scale(calc(var(--profile-page-background-zoom, 1) * 1.035)) !important;

  filter: blur(8px) saturate(.96) !important;

  opacity: .96 !important;

  will-change: transform, filter !important;

}



#profilePage > .profile-page-background-layer::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: rgba(0,0,0,.12) !important;

}



#profilePage > :not(.profile-page-background-layer) {

  position: relative !important;

  z-index: 1 !important;

}



.profile-media-editor__stage.is-page-background {

  width: 100% !important;

  aspect-ratio: 16 / 9 !important;

  border-radius: 18px !important;

}



.profile-page-bg-setting .premium-crown {

  vertical-align: -3px !important;

}



@media (max-width: 1000px) {

  #profilePage > .profile-page-background-layer {

    top: 98px !important;

    left: 0 !important;

  }

}



@media (max-width: 700px) {

  .profile-media-editor__stage.is-page-background {

    aspect-ratio: 4 / 3 !important;

    border-radius: 14px !important;

  }

}

/* PROFILE_PAGE_BACKGROUND_V1_END */



/* PROFILE_GLASS_BACKGROUND_FIX_V2_BEGIN */



/* 1) Фон профиля — реально на весь viewport, а не внутри центрального контейнера. */

html body.is-library #profilePage.profile-page:not([hidden]) {

  position: relative !important;

  isolation: isolate !important;

  background: transparent !important;

}



html body.is-library #profilePage > .profile-page-background-layer {

  position: fixed !important;

  inset: 0 !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100dvh !important;

  min-width: 100vw !important;

  min-height: 100dvh !important;

  max-width: none !important;

  margin: 0 !important;

  border-radius: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  z-index: 0 !important;

}



html body.is-library #profilePage > .profile-page-background-layer::before {

  position: absolute !important;

  inset: -22px !important;

  width: auto !important;

  height: auto !important;

  transform: scale(calc(var(--profile-page-background-zoom, 1) * 1.025)) !important;

  filter: blur(7px) saturate(.98) !important;

  opacity: .98 !important;

}



html body.is-library #profilePage > .profile-page-background-layer::after {

  position: absolute !important;

  inset: 0 !important;

  background: rgba(0,0,0,.10) !important;

}



html body.is-library #profilePage > :not(.profile-page-background-layer) {

  position: relative !important;

  z-index: 1 !important;

}



/* 2) Hero: стекло начинается СТРОГО после баннера, сам баннер не накрывается. */

html body.is-library #profilePage .profile-hero {

  background: rgba(7,10,15,.16) !important;

  border-color: rgba(255,255,255,.11) !important;

  box-shadow: 0 20px 52px rgba(0,0,0,.18) !important;

}



@media (min-width: 1001px) {

  html body.is-library #profilePage .profile-hero::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    top: 420px !important;

    bottom: 0 !important;

    height: auto !important;

    z-index: 1 !important;

    pointer-events: none !important;

    border-top: 1px solid rgba(255,255,255,.075) !important;

    background:

      linear-gradient(

        180deg,

        rgba(18,22,30,.22) 0%,

        rgba(10,13,19,.34) 100%

      ) !important;

    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

    backdrop-filter: blur(22px) saturate(150%) !important;

  }

}



/* Убираем лишнее затемнение внизу самого баннера. */

html body.is-library #profilePage .profile-hero__fade {

  background:

    linear-gradient(

      to bottom,

      rgba(0,0,0,0) 0%,

      rgba(0,0,0,.01) 72%,

      rgba(4,6,9,.10) 90%,

      rgba(4,6,9,.18) 100%

    ) !important;

}



html body.is-library #profilePage .profile-hero__banner {

  z-index: 0 !important;

}



html body.is-library #profilePage .profile-hero__fade {

  z-index: 1 !important;

}



html body.is-library #profilePage .profile-hero__identity,

html body.is-library #profilePage .profile-hero__actions,

html body.is-library #profilePage .profile-edit-button {

  z-index: 3 !important;

}



/* 3) Описание/статистика и друзья — заметно более прозрачное стекло. */

html body.is-library #profilePage .profile-statistics-card,

html body.is-library #profilePage .profile-friends-card {

  background:

    linear-gradient(

      180deg,

      rgba(20,24,32,.29) 0%,

      rgba(10,13,19,.38) 100%

    ) !important;

  border: 1px solid rgba(255,255,255,.115) !important;

  box-shadow:

    0 18px 44px rgba(0,0,0,.15),

    inset 0 1px 0 rgba(255,255,255,.035) !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;

}



/* 4) Карточки друзей: фон-баннер читается лучше, сама карточка остаётся стеклянной. */

html body.is-library #profilePage .profile-friend-row {

  background: rgba(10,14,20,.24) !important;

  border-color: rgba(255,255,255,.10) !important;

  -webkit-backdrop-filter: blur(15px) saturate(145%) !important;

  backdrop-filter: blur(15px) saturate(145%) !important;

}



html body.is-library #profilePage .profile-friend-row__banner {

  opacity: .42 !important;

  filter: saturate(.96) brightness(.92) !important;

}



html body.is-library #profilePage .profile-friend-row__veil {

  background:

    linear-gradient(

      90deg,

      rgba(7,9,14,.64) 0%,

      rgba(7,9,14,.46) 46%,

      rgba(7,9,14,.30) 100%

    ) !important;

}



/* Footer не должен попадать внутрь размытого profile-layer. */

html body.is-library main.site-shell > footer,

html body.is-library .site-footer {

  position: relative !important;

  z-index: 4 !important;

}



/* Мобилка: стекло начинается после мобильного баннера (245px). */

@media (max-width: 1000px) {

  html body.is-library #profilePage .profile-hero::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    top: 245px !important;

    bottom: 0 !important;

    height: auto !important;

    z-index: 1 !important;

    pointer-events: none !important;

    border-top: 1px solid rgba(255,255,255,.07) !important;

    background:

      linear-gradient(

        180deg,

        rgba(18,22,30,.20) 0%,

        rgba(10,13,19,.34) 100%

      ) !important;

    -webkit-backdrop-filter: blur(19px) saturate(148%) !important;

    backdrop-filter: blur(19px) saturate(148%) !important;

  }



  html body.is-library #profilePage .profile-statistics-card,

  html body.is-library #profilePage .profile-friends-card {

    background:

      linear-gradient(

        180deg,

        rgba(20,24,32,.31) 0%,

        rgba(10,13,19,.40) 100%

      ) !important;

    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;

    backdrop-filter: blur(18px) saturate(145%) !important;

  }

}



/* PROFILE_GLASS_BACKGROUND_FIX_V2_END */



/* PROFILE_USERNAME_COLORS_V1_BEGIN */



/* Ник чуть ниже и буквально левее: больше не цепляет нижний край баннера. */

@media (min-width: 1001px) {

  html body.is-library #profilePage .profile-handle {

    transform: translate(-3px, 14px) !important;

  }

}



/* Premium username colors. Один цвет = статичный, два = мягкий перелив. */

html body.is-library #profilePage .profile-handle.has-profile-username-color {

  color: var(--profile-username-color-1, #fff) !important;

}



html body.is-library #profilePage .profile-handle.has-profile-username-gradient {

  color: transparent !important;

  -webkit-text-fill-color: transparent !important;

  background:

    linear-gradient(

      110deg,

      var(--profile-username-color-1, #ffffff) 0%,

      var(--profile-username-color-2, #ff9a72) 45%,

      var(--profile-username-color-1, #ffffff) 100%

    ) !important;

  background-size: 220% 100% !important;

  background-position: 0% 50% !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  animation: profileUsernameColorFlow 3.8s ease-in-out infinite !important;

}



@keyframes profileUsernameColorFlow {

  0%, 100% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

}



/* Редактор цветов в настройках. */

.profile-username-color-row {

  align-items: center !important;

}



.profile-username-color-controls {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 12px !important;

  flex-wrap: wrap !important;

}



.profile-username-color-mode {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  padding: 4px !important;

  border: 1px solid rgba(255,255,255,.08) !important;

  border-radius: 12px !important;

  background: rgba(255,255,255,.035) !important;

}



.profile-username-color-mode button {

  appearance: none !important;

  height: 34px !important;

  padding: 0 12px !important;

  border: 0 !important;

  border-radius: 9px !important;

  background: transparent !important;

  color: rgba(255,255,255,.58) !important;

  font: inherit !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  cursor: pointer !important;

  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;

}



.profile-username-color-mode button:hover {

  color: #fff !important;

  transform: scale(1.025) !important;

}



.profile-username-color-mode button.is-active {

  background: rgba(255,255,255,.11) !important;

  color: #fff !important;

}



.profile-username-color-swatches {

  display: inline-flex !important;

  align-items: center !important;

  gap: 9px !important;

}



.profile-color-swatch {

  position: relative !important;

  display: inline-grid !important;

  place-items: center !important;

  width: 38px !important;

  height: 38px !important;

  border-radius: 50% !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  background: rgba(255,255,255,.05) !important;

  overflow: hidden !important;

  cursor: pointer !important;

  box-shadow:

    0 7px 18px rgba(0,0,0,.18),

    inset 0 0 0 2px rgba(0,0,0,.18) !important;

  transition: transform .16s ease, border-color .16s ease !important;

}



.profile-color-swatch:hover {

  transform: scale(1.055) !important;

  border-color: rgba(255,255,255,.34) !important;

}



.profile-color-swatch input[type="color"] {

  position: absolute !important;

  inset: -7px !important;

  width: calc(100% + 14px) !important;

  height: calc(100% + 14px) !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 50% !important;

  background: transparent !important;

  cursor: pointer !important;

}



.profile-color-swatch input[type="color"]::-webkit-color-swatch-wrapper {

  padding: 0 !important;

}



.profile-color-swatch input[type="color"]::-webkit-color-swatch {

  border: 0 !important;

  border-radius: 50% !important;

}



.profile-color-swatch input[type="color"]::-moz-color-swatch {

  border: 0 !important;

  border-radius: 50% !important;

}



.profile-color-swatch[hidden] {

  display: none !important;

}



.profile-username-color-row[hidden] {

  display: none !important;

}



@media (max-width: 760px) {

  html body.is-library #profilePage .profile-handle {

    transform: translate(-2px, 7px) !important;

  }



  .profile-username-color-controls {

    width: 100% !important;

    justify-content: flex-start !important;

  }

}



/* PROFILE_USERNAME_COLORS_V1_END */



/* PROFILE_MOBILE_HERO_V1_BEGIN */

@media (max-width: 820px) {

  /* Mobile profile becomes a compact card, like desktop: clear outline + banner + glass footer. */

  html body.is-library #profilePage.profile-page:not([hidden]) .profile-hero {

    position: relative !important;

    width: calc(100% - 20px) !important;

    max-width: none !important;

    min-height: 310px !important;

    height: 310px !important;

    margin: 10px auto 0 !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.13) !important;

    border-radius: 19px !important;

    background: rgba(7,9,13,.16) !important;

    box-shadow:

      0 16px 38px rgba(0,0,0,.22),

      inset 0 1px 0 rgba(255,255,255,.035) !important;

    box-sizing: border-box !important;

  }



  /* Banner has its own crisp edge; no muddy overlay across the image. */

  html body.is-library #profilePage .profile-hero__banner {

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    width: 100% !important;

    height: 190px !important;

    overflow: hidden !important;

    border: 0 !important;

    border-bottom: 1px solid rgba(255,255,255,.13) !important;

    border-radius: 18px 18px 0 0 !important;

    background-position: center !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;

    z-index: 0 !important;

  }



  html body.is-library #profilePage .profile-hero__fade {

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    width: 100% !important;

    height: 190px !important;

    border-radius: 18px 18px 0 0 !important;

    background:

      linear-gradient(

        to bottom,

        rgba(0,0,0,.00) 0%,

        rgba(0,0,0,.015) 68%,

        rgba(6,8,12,.10) 100%

      ) !important;

    pointer-events: none !important;

    z-index: 1 !important;

  }



  /* Glass only below the banner. */

  html body.is-library #profilePage .profile-hero::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    top: 190px !important;

    bottom: 0 !important;

    height: auto !important;

    border: 0 !important;

    border-radius: 0 0 18px 18px !important;

    background:

      linear-gradient(

        180deg,

        rgba(18,22,30,.26) 0%,

        rgba(8,11,17,.36) 100%

      ) !important;

    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;

    backdrop-filter: blur(18px) saturate(145%) !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;

    pointer-events: none !important;

    z-index: 2 !important;

  }



  /* Avatar straddles the banner edge. */

  html body.is-library #profilePage .profile-hero__identity {

    position: absolute !important;

    left: 14px !important;

    right: 14px !important;

    top: 153px !important;

    bottom: auto !important;

    width: auto !important;

    max-width: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    gap: 5px !important;

    z-index: 5 !important;

  }



  html body.is-library #profilePage .profile-hero__boundary {

    width: 76px !important;

    min-width: 76px !important;

    height: 76px !important;

    flex: 0 0 76px !important;

    margin: 0 !important;

  }



  html body.is-library #profilePage .profile-avatar-shell,

  html body.is-library #profilePage .profile-hero__avatar {

    width: 76px !important;

    min-width: 76px !important;

    height: 76px !important;

  }



  html body.is-library #profilePage .profile-hero__avatar {

    border: 3px solid rgba(5,7,10,.96) !important;

    box-shadow:

      0 8px 22px rgba(0,0,0,.34),

      0 0 0 1px rgba(255,255,255,.07) !important;

  }



  html body.is-library #profilePage .profile-hero__details {

    width: 100% !important;

    min-width: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  html body.is-library #profilePage .profile-handle {

    width: auto !important;

    max-width: calc(100% - 4px) !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: translate(-2px, 0) !important;

    justify-self: auto !important;

    text-align: left !important;

    font-size: 18px !important;

    line-height: 1.05 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  /* Old orange rank/status stays out of the compact mobile hero. */

  html body.is-library #profilePage .profile-rank {

    display: none !important;

  }



  /* Owner buttons: one row, smaller, immediately below the banner. */

  html body.is-library #profilePage .profile-hero__actions {

    position: absolute !important;

    left: 101px !important;

    right: 12px !important;

    top: 199px !important;

    bottom: auto !important;

    width: auto !important;

    height: 34px !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 6px !important;

    z-index: 7 !important;

  }



  html body.is-library #profilePage .profile-hero__actions .profile-owner-action,

  html body.is-library #profilePage .profile-hero__actions button {

    flex: 0 1 auto !important;

    width: auto !important;

    min-width: 0 !important;

    height: 32px !important;

    min-height: 32px !important;

    padding: 0 8px !important;

    border-radius: 10px !important;

    gap: 5px !important;

    font-size: 9.5px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

  }



  html body.is-library #profilePage .profile-hero__actions svg {

    width: 13px !important;

    height: 13px !important;

    flex: 0 0 13px !important;

  }



  /* When looking at another user's profile, the friend action occupies the same clean row. */

  html body.is-library #profilePage .profile-edit-button.is-friend-action:not([hidden]) {

    position: absolute !important;

    left: 101px !important;

    right: 12px !important;

    top: 199px !important;

    bottom: auto !important;

    width: auto !important;

    min-width: 0 !important;

    min-height: 32px !important;

    height: 32px !important;

    padding: 0 10px !important;

    border-radius: 10px !important;

    font-size: 10px !important;

    z-index: 7 !important;

  }



  /* Content below the hero follows the same mobile side gutter. */

  html body.is-library #profilePage > :not(.profile-hero):not(.profile-page-background-layer) {

    width: calc(100% - 20px) !important;

    max-width: none !important;

    margin-left: auto !important;

    margin-right: auto !important;

  }



  html body.is-library #profilePage .profile-overview {

    margin-top: 12px !important;

  }

}



@media (max-width: 360px) {

  html body.is-library #profilePage .profile-hero__actions {

    left: 96px !important;

    gap: 4px !important;

  }



  html body.is-library #profilePage .profile-hero__actions .profile-owner-action,

  html body.is-library #profilePage .profile-hero__actions button {

    padding-inline: 6px !important;

    gap: 4px !important;

    font-size: 9px !important;

  }



  html body.is-library #profilePage .profile-hero__actions svg {

    width: 12px !important;

    height: 12px !important;

    flex-basis: 12px !important;

  }

}

/* PROFILE_MOBILE_HERO_V1_END */



/* PROFILE_PUBLIC_VIEW_FIX_V2_BEGIN */

/* hidden должен побеждать все display:flex из прошлых фиксов */

html body.is-library #profilePage .profile-hero__actions[hidden],

html body.is-library #profilePage .profile-edit-button[hidden] {

  display: none !important;

}



/* Если открыт чужой профиль — показываем только кнопку дружбы, а не owner-actions. */

html body.is-library #profilePage.is-viewing-foreign-profile .profile-hero__actions {

  display: none !important;

}



html body.is-library #profilePage.is-viewing-foreign-profile .profile-edit-button.is-friend-action:not([hidden]) {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  z-index: 8 !important;

}



/* На всякий случай убираем инлайн-настройки под чужим профилем. */

html body.profile-inline-settings:has(#profilePage.is-viewing-foreign-profile) #settingsPage.is-inline-profile-settings {

  display: none !important;

}



/* PREMIUM username effects:

   - 1 цвет: по нику гуляет белый блик туда-сюда

   - 2 цвета: живой анимированный перелив между двумя цветами */

html body .has-profile-username-color {

  position: relative !important;

  display: inline-block !important;

  background-repeat: no-repeat !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

}



html body .has-profile-username-color:not(.has-profile-username-gradient) {

  color: transparent !important;

  -webkit-text-fill-color: transparent !important;

  background-image: linear-gradient(

    110deg,

    var(--profile-username-color-1, #ffffff) 0%,

    var(--profile-username-color-1, #ffffff) 34%,

    rgba(255,255,255,.99) 50%,

    var(--profile-username-color-1, #ffffff) 66%,

    var(--profile-username-color-1, #ffffff) 100%

  ) !important;

  background-size: 220% 100% !important;

  background-position: 0% 50% !important;

  animation: profileUsernameSingleSheen 2.7s ease-in-out infinite !important;

  text-shadow: 0 0 12px color-mix(in srgb, var(--profile-username-color-1, #ffffff) 35%, transparent) !important;

}



html body .has-profile-username-gradient {

  color: transparent !important;

  -webkit-text-fill-color: transparent !important;

  background-image: linear-gradient(

    120deg,

    var(--profile-username-color-1, #ffffff) 0%,

    var(--profile-username-color-2, #ff9a72) 24%,

    var(--profile-username-color-1, #ffffff) 50%,

    var(--profile-username-color-2, #ff9a72) 76%,

    var(--profile-username-color-1, #ffffff) 100%

  ) !important;

  background-size: 240% 100% !important;

  background-position: 0% 50% !important;

  animation: profileUsernameGradientWave 3.8s ease-in-out infinite alternate !important;

  text-shadow:

    0 0 12px color-mix(in srgb, var(--profile-username-color-1, #ffffff) 28%, transparent),

    0 0 18px color-mix(in srgb, var(--profile-username-color-2, #ff9a72) 20%, transparent) !important;

}



@keyframes profileUsernameSingleSheen {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



@keyframes profileUsernameGradientWave {

  0% { background-position: 0% 50%; }

  100% { background-position: 100% 50%; }

}

/* PROFILE_PUBLIC_VIEW_FIX_V2_END */







/* PLATEGA_PAYMENT_VISUAL_FIX_V2_BEGIN */



/* Активные способы оплаты больше не выглядят disabled/серыми. */

#premiumPaymentSbp,

#premiumPaymentCrypto {

  opacity: 1 !important;

  filter: none !important;

  cursor: pointer !important;

  color: #fff !important;

  transition:

    transform .18s ease,

    border-color .18s ease,

    background .18s ease,

    box-shadow .18s ease !important;

}



#premiumPaymentSbp {

  background:

    radial-gradient(circle at 10% 50%, rgba(77, 205, 131, .16), transparent 34%),

    linear-gradient(105deg, rgba(29, 55, 48, .96), rgba(34, 38, 45, .97) 56%, rgba(39, 40, 47, .98)) !important;

  border-color: rgba(91, 214, 149, .32) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;

}



#premiumPaymentCrypto {

  background:

    radial-gradient(circle at 10% 50%, rgba(0, 147, 147, .18), transparent 34%),

    linear-gradient(105deg, rgba(22, 55, 53, .96), rgba(34, 38, 45, .97) 56%, rgba(39, 40, 47, .98)) !important;

  border-color: rgba(0, 177, 160, .32) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;

}



#premiumPaymentSbp:hover,

#premiumPaymentCrypto:hover {

  transform: translateY(-1px) scale(1.006) !important;

}



#premiumPaymentSbp:hover {

  border-color: rgba(102, 229, 163, .58) !important;

  background:

    radial-gradient(circle at 10% 50%, rgba(77, 205, 131, .23), transparent 38%),

    linear-gradient(105deg, rgba(31, 67, 55, .98), rgba(36, 41, 47, .98) 56%, rgba(42, 43, 50, .99)) !important;

}



#premiumPaymentCrypto:hover {

  border-color: rgba(35, 200, 184, .56) !important;

  background:

    radial-gradient(circle at 10% 50%, rgba(0, 165, 157, .25), transparent 38%),

    linear-gradient(105deg, rgba(22, 67, 62, .98), rgba(36, 41, 47, .98) 56%, rgba(42, 43, 50, .99)) !important;

}



#premiumPaymentSbp .premium-payment-method__price,

#premiumPaymentCrypto .premium-payment-method__price {

  color: rgba(255,255,255,.72) !important;

  opacity: 1 !important;

}



#premiumPaymentSbp .premium-payment-method__arrow,

#premiumPaymentCrypto .premium-payment-method__arrow {

  color: rgba(255,255,255,.82) !important;

  opacity: 1 !important;

}



#premiumPaymentSbp .premium-payment-method__icon--sbp {

  background: linear-gradient(135deg, #ffffff 0%, #f2fff8 100%) !important;

  color: #111317 !important;

  border: 1px solid rgba(102, 229, 163, .46) !important;

  box-shadow:

    0 0 0 1px rgba(255,255,255,.04),

    0 6px 18px rgba(34, 197, 94, .09) !important;

}



/* Tether: цельный символ ₮, без обрезанного SVG. */

#premiumPaymentCrypto .premium-payment-method__icon--tether {

  display: grid !important;

  place-items: center !important;

  overflow: visible !important;

  background: #009393 !important;

  color: #fff !important;

  border: 1px solid rgba(146, 219, 209, .38) !important;

  box-shadow:

    0 0 0 1px rgba(255,255,255,.04),

    0 6px 18px rgba(0,147,147,.13) !important;

}



#premiumPaymentCrypto .premium-payment-method__icon--tether svg {

  display: none !important;

}



#premiumPaymentCrypto .premium-payment-method__tether-mark {

  display: block !important;

  font-family: Arial, Helvetica, sans-serif !important;

  font-size: 27px !important;

  font-weight: 900 !important;

  line-height: 1 !important;

  letter-spacing: -1px !important;

  color: #fff !important;

  transform: translateY(0) !important;

  text-shadow: 0 1px 0 rgba(0,0,0,.08) !important;

}



#premiumPaymentSbp:not(:disabled),

#premiumPaymentCrypto:not(:disabled) {

  pointer-events: auto !important;

}



@media (max-width: 620px) {

  #premiumPaymentCrypto .premium-payment-method__tether-mark {

    font-size: 25px !important;

  }

}



/* PLATEGA_PAYMENT_VISUAL_FIX_V2_END */



/* PROFILE_USERNAME_GLASS_SHIMMER_V8_BEGIN */

/*

  Более "senku-like" premium ник:

  - без @ перед ником

  - шрифт чуть меньше и аккуратнее

  - не чистый сырой RGB, а приглушённый стеклянный tint

  - анимация почти непрерывная и не кричащая

*/



html body.is-library #profilePage .profile-handle.has-profile-username-color,

html body #settingsUsername.has-profile-username-color {

  display: inline-flex !important;

  align-items: center !important;

  gap: 0 !important;

  width: auto !important;

  max-width: max-content !important;

  background: none !important;

  background-image: none !important;

  background-color: transparent !important;

  animation: none !important;

  filter: none !important;

  text-shadow: none !important;

}



html body.is-library #profilePage .profile-handle .ah-username-glass,

html body #settingsUsername .ah-username-glass {

  position: relative !important;

  display: inline-block !important;

  width: auto !important;

  max-width: max-content !important;

  line-height: .96 !important;

  font-size: .84em !important;

  font-weight: 700 !important;

  letter-spacing: -.018em !important;

  color: var(--ah-username-fallback, #f4f7ff) !important;

  -webkit-text-fill-color: transparent !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  background-repeat: no-repeat !important;

  background-blend-mode: screen, normal !important;

  text-shadow: none !important;

  filter:

    drop-shadow(0 1px 0 rgba(255,255,255,.10))

    drop-shadow(0 2px 8px var(--ah-username-glow, rgba(255,255,255,.08))) !important;

  transform: translateZ(0) !important;

  will-change: background-position, filter !important;

}



html body.is-library #profilePage .profile-handle .ah-username-glass::after,

html body #settingsUsername .ah-username-glass::after {

  content: attr(data-text) !important;

  position: absolute !important;

  inset: 0 !important;

  pointer-events: none !important;

  color: transparent !important;

  -webkit-text-fill-color: transparent !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 68%) !important;

  opacity: .55 !important;

  mix-blend-mode: screen !important;

}



@media (max-width: 820px) {

  html body.is-library #profilePage .profile-handle .ah-username-glass,

  html body #settingsUsername .ah-username-glass {

    font-size: .80em !important;

    filter:

      drop-shadow(0 1px 0 rgba(255,255,255,.08))

      drop-shadow(0 2px 7px var(--ah-username-glow, rgba(255,255,255,.06))) !important;

  }

}

/* PROFILE_USERNAME_GLASS_SHIMMER_V8_END */







/* PROFILE_AUTOSAVE_UI_V1_BEGIN */

/* Визуально убираем лишние кнопки. В DOM они остаются, чтобы использовать уже рабочую логику сайта. */

#premiumProfileSave,

#profileAvatarEdit,

#profileBannerEdit,

#profilePageBackgroundEdit {

  display: none !important;

}

#publicProfileSettings .settings-save-row {

  min-height: 20px !important;

  justify-content: flex-start !important;

}

#premiumProfileHint {

  margin-left: 0 !important;

}

/* PROFILE_AUTOSAVE_UI_V1_END */



/* PROFILE_USERNAME_CANVAS_SHIMMER_V19_BEGIN */

html body.is-library #profilePage .profile-handle .ah-username-senku-window,

html body #settingsUsername .ah-username-senku-window {

  position: relative;

  display: inline-block;

  vertical-align: baseline;

  white-space: pre;

  padding: 0;

  margin: 0;

  border: 0;

  font: inherit;

  line-height: inherit;

  letter-spacing: inherit;

}



/* Цветной ник должен сохранять размер обычного ника. */
html body.is-library #profilePage .profile-handle .ah-username-senku-window {
  font-size: 1em;
}


html body.is-library #profilePage .profile-handle .ah-username-senku-base,

html body #settingsUsername .ah-username-senku-base {

  position: relative;

  z-index: 1;

  display: inline;

  padding: 0;

  margin: 0;

  font: inherit;

  line-height: inherit;

  letter-spacing: inherit;

  text-shadow: none !important;

  filter: none !important;

  box-shadow: none !important;

}



html body.is-library #profilePage .profile-handle .ah-username-senku-canvas,

html body #settingsUsername .ah-username-senku-canvas {

  position: absolute;

  z-index: 2;

  inset: 0 auto auto 0;

  display: block;

  pointer-events: none;

  user-select: none;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  filter: none !important;

  transform: none !important;

  opacity: .96;

}

/* PROFILE_USERNAME_CANVAS_SHIMMER_V19_END */



/* PROFILE_AVATAR_FRAME_V21_BEGIN */

#profilePage .profile-avatar-shell {

  position: relative !important;

  display: inline-block !important;

  width: 126px !important;

  height: 126px !important;

  min-width: 126px !important;

  min-height: 126px !important;

  max-width: 126px !important;

  max-height: 126px !important;

  flex: 0 0 126px !important;

  line-height: 0 !important;

  overflow: visible !important;

  isolation: isolate !important;

  vertical-align: top !important;

}



#profilePage .profile-avatar-crop {

  position: relative !important;

  z-index: 2 !important;

  display: block !important;

  width: 126px !important;

  height: 126px !important;

  min-width: 126px !important;

  min-height: 126px !important;

  max-width: 126px !important;

  max-height: 126px !important;

  box-sizing: border-box !important;

  padding: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;

  border: 6px solid #080808 !important;

  border-radius: 50% !important;

  background: #0b0b0d !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;

}



#profilePage .profile-avatar-crop > #publicProfileAvatar,

#profilePage .profile-avatar-crop > .profile-hero__avatar {

  position: relative !important;

  inset: auto !important;

  display: block !important;

  width: 100% !important;

  min-width: 100% !important;

  max-width: 100% !important;

  height: 100% !important;

  min-height: 100% !important;

  max-height: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  object-fit: cover !important;

  box-shadow: none !important;

  will-change: transform, object-position !important;

}



#profilePage .profile-avatar-shell::before,

#profilePage .profile-avatar-shell::after {

  content: "";

  position: absolute;

  pointer-events: none;

  border-radius: 50%;

  opacity: 0;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame::before {

  inset: -5px !important;

  z-index: 1 !important;

  padding: 3px !important;

  opacity: 1;

  background: var(--avatar-frame-color-1, #ff8457);

  -webkit-mask:

    linear-gradient(#000 0 0) content-box,

    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  will-change: transform, opacity;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame::after {

  inset: -7px !important;

  z-index: 0 !important;

  opacity: .20;

  border: 3px solid var(--avatar-frame-color-1, #ff8457);

  filter: blur(7px);

  will-change: opacity, transform;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame.is-avatar-frame-single::before {

  background: var(--avatar-frame-color-1, #ff8457);

  animation: avatarFrameSingleRing 2.8s ease-in-out infinite;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame.is-avatar-frame-single::after {

  border-color: var(--avatar-frame-color-1, #ff8457);

  animation: avatarFrameGlowBreath 2.8s ease-in-out infinite;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame.is-avatar-frame-dual::before {

  /*

    V29: без белого блика и без резких цветовых секторов.

    Основные цвета слегка приглушены, а весь переход идёт через oklab-mix

    только между выбранными пользователем цветами.

  */

  --avatar-frame-c1-soft:

    color-mix(in oklab, var(--avatar-frame-color-1, #ff8457) 92%, #111318 8%);

  --avatar-frame-c2-soft:

    color-mix(in oklab, var(--avatar-frame-color-2, #7c5cff) 92%, #111318 8%);



  background:

    conic-gradient(

      from 0deg,



      var(--avatar-frame-c1-soft) 0deg,

      color-mix(in oklab, var(--avatar-frame-c1-soft) 88%, var(--avatar-frame-c2-soft) 12%) 36deg,

      color-mix(in oklab, var(--avatar-frame-c1-soft) 74%, var(--avatar-frame-c2-soft) 26%) 72deg,

      color-mix(in oklab, var(--avatar-frame-c1-soft) 60%, var(--avatar-frame-c2-soft) 40%) 108deg,

      color-mix(in oklab, var(--avatar-frame-c1-soft) 50%, var(--avatar-frame-c2-soft) 50%) 144deg,

      color-mix(in oklab, var(--avatar-frame-c1-soft) 30%, var(--avatar-frame-c2-soft) 70%) 180deg,

      var(--avatar-frame-c2-soft) 216deg,



      color-mix(in oklab, var(--avatar-frame-c2-soft) 82%, var(--avatar-frame-c1-soft) 18%) 252deg,

      color-mix(in oklab, var(--avatar-frame-c2-soft) 64%, var(--avatar-frame-c1-soft) 36%) 288deg,

      color-mix(in oklab, var(--avatar-frame-c2-soft) 42%, var(--avatar-frame-c1-soft) 58%) 324deg,



      var(--avatar-frame-c1-soft) 360deg

    );



  animation: avatarFrameOrbit 5.0s linear infinite;

}



#profilePage .profile-avatar-shell.has-premium-avatar-frame.is-avatar-frame-dual::after {

  border-color: var(--avatar-frame-color-2, #7c5cff);

  animation: avatarFrameGlowBreath 2.5s ease-in-out infinite alternate;

}



@keyframes avatarFrameOrbit {

  to { transform: rotate(360deg); }

}



@keyframes avatarFrameSingleRing {

  0%, 100% { opacity: .90; }

  50% { opacity: 1; }

}



@keyframes avatarFrameGlowBreath {

  0%, 100% { opacity: .10; transform: scale(.99); }

  50% { opacity: .30; transform: scale(1.025); }

}



#settingsAvatar.has-avatar-frame-preview {

  outline: 3px solid var(--avatar-frame-color-1, #ff8457) !important;

  outline-offset: 2px !important;

  box-shadow:

    0 0 0 1px #080808,

    0 0 14px var(--avatar-frame-color-1, #ff8457) !important;

}



#settingsAvatar.has-avatar-frame-preview.is-avatar-frame-preview-dual {

  outline-color: var(--avatar-frame-color-2, #7c5cff) !important;

  box-shadow:

    0 0 0 1px #080808,

    -5px 0 13px var(--avatar-frame-color-1, #ff8457),

    5px 0 13px var(--avatar-frame-color-2, #7c5cff) !important;

}



#profileAvatarFrameRow {

  display: grid !important;

}



.profile-avatar-frame-controls {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 12px !important;

  flex-wrap: wrap !important;

}



#profileAvatarFrameRow.is-avatar-frame-locked {

  opacity: .62;

}



@media (max-width: 640px) {

  #profilePage .profile-avatar-shell,

  #profilePage .profile-avatar-crop {

    width: 94px !important;

    height: 94px !important;

    min-width: 94px !important;

    min-height: 94px !important;

    max-width: 94px !important;

    max-height: 94px !important;

  }



  #profilePage .profile-avatar-shell {

    flex-basis: 94px !important;

  }



  #profilePage .profile-avatar-crop {

    border-width: 4px !important;

  }



  .profile-avatar-frame-controls {

    width: 100% !important;

    justify-content: flex-start !important;

  }

}



@media (prefers-reduced-motion: reduce) {

  #profilePage .profile-avatar-shell.has-premium-avatar-frame::before,

  #profilePage .profile-avatar-shell.has-premium-avatar-frame::after {

    animation: none !important;

  }

}

/* PROFILE_AVATAR_FRAME_V21_END */



/* PROFILE_AVATAR_RING_INSIDE_V27_BEGIN */

/*

  Premium-обводка теперь лежит РОВНО на месте чёрной линии,

  а не снаружи аватара.

  Толщина чуть больше старой: 8px desktop / 6px mobile.

  Из-за этого видимая картинка становится немного меньше.

*/

#profilePage .profile-avatar-shell {

  --avatar-frame-thickness: 8px;

}



/* Чёрная линия остаётся под цветной рамкой как безопасная база. */

#profilePage .profile-avatar-shell.has-premium-avatar-frame .profile-avatar-crop {

  border-width: var(--avatar-frame-thickness) !important;

  border-color: #080808 !important;

}



/*

  Сам цветной animated ring занимает тот же круг, что и crop-border.

  Никакого внешнего цветного кольца.

*/

#profilePage .profile-avatar-shell.has-premium-avatar-frame::before {

  inset: 0 !important;

  z-index: 4 !important;

  padding: var(--avatar-frame-thickness) !important;

}



/*

  Glow остаётся очень мягким и идёт из самой линии,

  но не создаёт вторую отдельную рамку снаружи.

*/

#profilePage .profile-avatar-shell.has-premium-avatar-frame::after {

  inset: 1px !important;

  z-index: 1 !important;

  border-width: 4px !important;

  filter: blur(6px) !important;

  opacity: .16;

}



/* Crown / online dot должны быть выше animated ring. */

#profilePage .profile-avatar-premium {

  z-index: 7 !important;

}



#profilePage .profile-avatar-presence {

  z-index: 7 !important;

}



@media (max-width: 640px) {

  #profilePage .profile-avatar-shell {

    --avatar-frame-thickness: 6px;

  }

}

/* PROFILE_AVATAR_RING_INSIDE_V27_END */



/* PROFILE_BACKGROUND_FULLPAGE_V31_BEGIN */

/*

  The page background is a FULL PROFILE PAGE surface now, not a viewport-sized

  banner. It is a direct child of main.site-shell and reaches under the footer.

*/

html body main.site-shell {

  position: relative !important;

}



html body main.site-shell > #profilePageBackgroundLayer {

  position: absolute !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  left: 85px !important;



  z-index: 0 !important;

  display: block !important;



  width: auto !important;

  height: auto !important;

  max-width: none !important;

  max-height: none !important;



  margin: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;



  opacity: 0 !important;

  transition: opacity .28s ease !important;

}



html body main.site-shell > #profilePageBackgroundLayer.is-profile-background-active-v31 {

  opacity: 1 !important;

}



html body main.site-shell > #profilePageBackgroundLayer::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;



  background-image: var(--profile-page-background-image, none) !important;

  background-position:

    var(--profile-page-background-position, 50% 50%) !important;

  background-size: cover !important;

  background-repeat: no-repeat !important;



  transform-origin:

    var(--profile-page-background-position, 50% 50%) !important;

  transform:

    scale(calc(var(--profile-page-background-zoom, 1) * 1.035)) !important;



  filter: blur(8px) saturate(.96) !important;

  opacity: .96 !important;

  will-change: transform, filter !important;

}



html body main.site-shell > #profilePageBackgroundLayer::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: rgba(0,0,0,.12) !important;

}



/*

  Only when a profile background is active:

  - remove the opaque black footer WRAPPER;

  - keep .site-footer__panel itself intact and above the image.

*/

html body.has-profile-background-fullpage-v31 main.site-shell {

  background: transparent !important;

}



html body.has-profile-background-fullpage-v31 .site-footer {

  position: relative !important;

  z-index: 3 !important;

  background: transparent !important;

}



html body.has-profile-background-fullpage-v31 .site-footer__panel {

  position: relative !important;

  z-index: 4 !important;

}



/* Profile itself stays above the background. */

html body.is-library #profilePage {

  position: relative !important;

  z-index: 2 !important;

}



/*

  V30/V1 selectors targeted the layer only while it lived inside #profilePage.

  After V31 moves it to site-shell, those old rules no longer control it.

*/



/* Banner keeps its real horizontal geometry. */

.profile-media-editor__stage.is-banner {

  aspect-ratio: auto !important;

  max-width: 100% !important;

  max-height: 62dvh !important;

}



/*

  Full-page background editor is intentionally tall.

  Exact pixel width/height is set by JS from the stored real profile-page ratio.

*/

.profile-media-editor__stage.is-page-background {

  aspect-ratio: auto !important;

  max-width: min(100%, 760px) !important;

  max-height: 64dvh !important;

}



/* Mobile/tablet: no desktop rail offset. */

@media (max-width: 1000px) {

  html body main.site-shell > #profilePageBackgroundLayer {

    left: 0 !important;

  }

}

/* PROFILE_BACKGROUND_FULLPAGE_V31_END */



/* PROFILE_LAYOUT_REFINE_V33_BEGIN */

/* Profile custom background: full width, profile route only, upper area only. */

html body main.site-shell > #profilePageBackgroundLayer {

  left: 0 !important;

  right: 0 !important;

  bottom: auto !important;

  top: 78px !important;

  width: 100% !important;

  height: min(820px, calc(100vh - 78px)) !important;

  display: none !important;

  opacity: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

}



html body.is-profile-route-v33 main.site-shell > #profilePageBackgroundLayer {

  display: block !important;

  opacity: 1 !important;

  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.86) 82%, transparent 100%) !important;

  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.86) 82%, transparent 100%) !important;

}



html body:not(.is-profile-route-v33) main.site-shell > #profilePageBackgroundLayer {

  display: none !important;

  opacity: 0 !important;

}



html body.is-profile-route-v33 main.site-shell,

html body.is-profile-route-v33 .site-footer {

  background: #08090b !important;

}



@media (max-width: 1000px) {

  html body main.site-shell > #profilePageBackgroundLayer {

    top: 98px !important;

    height: min(760px, calc(100vh - 98px)) !important;

  }

}



/* Independent columns: history follows description height, not friends height. */

html body.is-library #profilePage #profileColumnsV33 {

  position: relative !important;

  z-index: 2 !important;

  display: grid !important;

  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr) !important;

  align-items: start !important;

  gap: 18px !important;

  width: min(calc(100% - 64px), 1450px) !important;

  max-width: 1450px !important;

  margin: 32px auto 0 !important;

  box-sizing: border-box !important;

}



html body.is-library #profilePage .ah-profile-column-v33 {

  display: flex !important;

  flex-direction: column !important;

  gap: 18px !important;

  min-width: 0 !important;

}



html body.is-library #profilePage .profile-overview[hidden],

html body.is-library #profilePage #profileSecondaryV32[hidden] {

  display: none !important;

}



/* Description: no heading, no divider, natural height. */

html body.is-library #profilePage .ah-profile-description-card-v33 {

  min-height: 0 !important;

  height: auto !important;

  padding: 26px 28px !important;

  border: 1px solid rgba(255,255,255,.115) !important;

  border-radius: 24px !important;

  background: linear-gradient(180deg, rgba(20,24,32,.29), rgba(10,13,19,.38)) !important;

  box-shadow: 0 18px 44px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.035) !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;

}



html body.is-library #profilePage .ah-profile-description-card-v33 .profile-description {

  min-height: 0 !important;

  height: auto !important;

  padding: 0 !important;

  margin: 0 !important;

  border: 0 !important;

  border-bottom: 0 !important;

}



html body.is-library #profilePage .ah-profile-description-card-v33 .profile-description::before,

html body.is-library #profilePage .ah-profile-description-card-v33 .profile-description::after {

  content: none !important;

  display: none !important;

}



html body.is-library #profilePage .ah-profile-description-card-v33 .profile-description > header {

  display: none !important;

}



html body.is-library #profilePage #publicProfileBio {

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 0 !important;

  color: #d9d2cb !important;

  font-family: "Unbounded", var(--font-heading), var(--font-reading), sans-serif !important;

  font-size: clamp(16px, 1.12vw, 19px) !important;

  font-weight: 540 !important;

  line-height: 1.62 !important;

  letter-spacing: .005em !important;

  white-space: pre-wrap !important;

  word-break: normal !important;

  overflow-wrap: normal !important;

  hyphens: none !important;

}



html body.is-library #profilePage #publicProfileBio.is-empty {

  color: rgba(255,255,255,.34) !important;

  font-size: 14px !important;

  font-weight: 750 !important;

  letter-spacing: .045em !important;

}



html body.is-library #profilePage .ah-profile-subcard-v33 {

  min-width: 0 !important;

  min-height: 0 !important;

  padding: 26px 28px !important;

  box-sizing: border-box !important;

  border: 1px solid rgba(255,255,255,.115) !important;

  border-radius: 24px !important;

  background: linear-gradient(180deg, rgba(20,24,32,.29), rgba(10,13,19,.38)) !important;

  box-shadow: 0 18px 44px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.035) !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;

}



html body.is-library #profilePage .ah-profile-subcard-head-v33 {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 12px !important;

  margin: 0 0 20px !important;

}



html body.is-library #profilePage .ah-profile-subcard-head-v33 h2 {

  margin: 0 !important;

  color: #fff !important;

  font-size: clamp(20px, 1.45vw, 26px) !important;

  font-weight: 900 !important;

  line-height: 1.1 !important;

}



/* History: wide like description, horizontal cards. */





































html body.is-library #profilePage .ah-profile-history-empty-v33 {

  display: grid !important;

  place-items: center !important;

  min-height: 170px !important;

  margin: 0 !important;

  padding: 20px !important;

  border: 1px dashed rgba(255,255,255,.10) !important;

  border-radius: 16px !important;

  color: rgba(255,255,255,.48) !important;

  font-size: 14px !important;

  text-align: center !important;

}



/* Statistics: narrow right column; values pinned at bottom. */

html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats {

  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 10px !important;

  margin: 0 !important;

}



html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

  gap: 14px !important;

  min-height: 118px !important;

  padding: 16px 18px !important;

  box-sizing: border-box !important;

  border: 1px solid rgba(255,255,255,.08) !important;

  border-radius: 18px !important;

  background: rgba(8,10,14,.32) !important;

}



html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats small {

  color: rgba(255,255,255,.58) !important;

  font-size: 12px !important;

  font-weight: 700 !important;

}



html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats strong {

  display: block !important;

  margin-top: auto !important;

  color: #fff !important;

  font-size: clamp(24px, 2.2vw, 34px) !important;

  font-weight: 950 !important;

  line-height: 1 !important;

}



@media (min-width: 821px) {

  html body.is-library #profilePage .profile-hero__details {

    margin-left: -18px !important;

  }

}



html body.is-library #profilePage #profileOwnerActions {

  bottom: auto !important;

  align-items: center !important;

}



@media (max-width: 900px) {

  html body.is-library #profilePage #profileColumnsV33 {

    grid-template-columns: 1fr !important;

    width: min(calc(100% - 28px), 1450px) !important;

  }



  

}



@media (max-width: 640px) {

  html body.is-library #profilePage .ah-profile-description-card-v33,

  html body.is-library #profilePage .ah-profile-subcard-v33 {

    padding: 20px 18px !important;

    border-radius: 20px !important;

  }

}

/* PROFILE_LAYOUT_REFINE_V33_END */



/* PROFILE_BACKGROUND_FULLHEIGHT_V34_BEGIN */

html body main.site-shell {

  position: relative !important;

}



html body

main.site-shell

> #profilePageBackgroundLayer {

  position: absolute !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: auto !important;

  min-height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  display: none !important;

  opacity: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  -webkit-mask-image: none !important;

  mask-image: none !important;

  transition: opacity .22s ease !important;

}



html body.is-profile-route-v33

main.site-shell

> #profilePageBackgroundLayer {

  display: block !important;

  opacity: 1 !important;

  -webkit-mask-image: none !important;

  mask-image: none !important;

}



html body:not(.is-profile-route-v33)

main.site-shell

> #profilePageBackgroundLayer {

  display: none !important;

  opacity: 0 !important;

}



html body

main.site-shell

> #profilePageBackgroundLayer::before {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;



  background-image:

    var(--profile-page-background-image, none) !important;



  background-position:

    var(--profile-page-background-position, 50% 50%) !important;



  background-size: cover !important;

  background-repeat: no-repeat !important;



  transform-origin:

    var(--profile-page-background-position, 50% 50%) !important;



  transform:

    scale(var(--profile-page-background-zoom, 1)) !important;



  filter: none !important;

  opacity: 1 !important;

  will-change: transform !important;

}



html body

main.site-shell

> #profilePageBackgroundLayer::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: rgba(0, 0, 0, .16) !important;

  pointer-events: none !important;

}



html body.is-profile-route-v33

main.site-shell {

  background: transparent !important;

}



html body.is-profile-route-v33

.site-footer {

  position: relative !important;

  z-index: 3 !important;

  background: transparent !important;

}



html body.is-profile-route-v33

.site-footer__panel {

  position: relative !important;

  z-index: 4 !important;

}



html body.is-library

#profilePage {

  position: relative !important;

  z-index: 2 !important;

}

/* PROFILE_BACKGROUND_FULLHEIGHT_V34_END */



/* Shared profile appearance: friends, rankings, search and discussions. */

/* Keep legacy text gradients off the canvas wrapper: only glyphs are painted. */

html body .has-profile-username-color:has(.ah-username-senku-window) {

  background: transparent !important;

  background-image: none !important;

  background-clip: border-box !important;

  -webkit-background-clip: border-box !important;

  -webkit-text-fill-color: currentColor !important;

  animation: none !important;

  box-shadow: none !important;

  text-shadow: none !important;

  filter: none !important;

}

html body .ah-username-senku-window,

html body .ah-username-senku-canvas {

  background: transparent !important;

  box-shadow: none !important;

}



/* A friend's banner fills the whole card, using the leaderboard treatment. */

html body.is-library #profilePage .profile-friend-row {

  position: relative !important;

  isolation: isolate !important;

  display: flex !important;

  align-items: center !important;

  gap: 15px !important;

  min-height: 110px !important;

  padding: 22px 20px !important;

  overflow: hidden !important;

  border: 1px solid #ffffff09 !important;

  border-radius: 20px !important;

  background: #101c30 !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}

html body.is-library #profilePage .profile-friend-row > .profile-friend-row__banner {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  flex: none !important;

  border-radius: 0 !important;

  object-fit: cover !important;

  opacity: .55 !important;

  filter: brightness(.96) saturate(.98) !important;

  z-index: -1 !important;

  pointer-events: none;

}

html body.is-library #profilePage .profile-friend-row > .profile-friend-row__banner[hidden],

html body.is-library #profilePage .profile-friend-row > .profile-friend-row__veil {

  display: none !important;

}

html body.is-library #profilePage .profile-friend-row__avatar {

  position: relative !important;

  flex: 0 0 64px !important;

  width: 64px !important;

  height: 64px !important;

  z-index: 3 !important;

}

html body.is-library #profilePage .profile-friend-row__avatar > img:first-child {

  width: 100% !important;

  height: 100% !important;

  border-radius: 50% !important;

  object-fit: cover !important;

}

html body.is-library #profilePage .profile-friend-row__info {

  position: relative;

  min-width: 0;

  gap: 6px !important;

}

html body.is-library #profilePage .profile-friend-row__info > strong {

  font-size: 20px !important;

}

html body.is-library #profilePage .profile-friend-row__status {

  color: #babcc4;

  font-size: 17px !important;

}

html body.is-library #profilePage .profile-friend-row__status.is-online {

  color: #5fd276 !important;

}

@media (max-width: 760px) {

  html body.is-library #profilePage .profile-friend-row {

    padding: 18px 16px !important;

    min-height: 102px !important;

  }

}





.ah-public-username-v35 .ah-username-senku-window {

  position: relative; display: inline-block; vertical-align: baseline;

  white-space: pre; font: inherit; line-height: inherit;

}

.ah-public-username-v35 .ah-username-senku-base {

  position: relative; z-index: 1; font: inherit; line-height: inherit;

}

.ah-public-username-v35 .ah-username-senku-canvas {

  position: absolute; z-index: 2; top: 0; left: 0;

  pointer-events: none; border: 0 !important; background: transparent !important;

}

html body .ah-public-avatar-frame-v35 {

  position: relative !important;

  box-sizing: border-box !important;

  padding: 4px !important;

  border: 0 !important;

  border-radius: 50% !important;

  background: transparent !important;

}

html body .ah-public-avatar-frame-v35 > img {

  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important; height: 100% !important;

  min-width: 0 !important; min-height: 0 !important; aspect-ratio: 1;

  border: 0 !important; border-radius: 50% !important; object-fit: cover !important;

  background: #202329 !important;

}

html body .ah-public-avatar-frame-v35::before {

  content: "";

  position: absolute; inset: 0; z-index: 4;

  box-sizing: border-box; border-radius: 50%; padding: 4px;

  pointer-events: none;

  --ah-frame-soft-1: color-mix(in oklab, var(--ah-frame-start) 92%, #111318 8%);

  --ah-frame-soft-2: color-mix(in oklab, var(--ah-frame-end) 92%, #111318 8%);

  background: conic-gradient(from 0deg, var(--ah-frame-soft-1),

    color-mix(in oklab, var(--ah-frame-soft-1) 50%, var(--ah-frame-soft-2) 50%) 144deg,

    var(--ah-frame-soft-2) 216deg, var(--ah-frame-soft-1) 360deg);

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

}

html body .ah-public-avatar-frame-v35.ah-avatar-frame-dual-v37::before {

  animation: avatarFrameOrbit 5s linear infinite;

}

html body .topbar #authOpen { background: transparent !important; }

html body .topbar #profileAvatar {

  background: #202329 !important;

  object-fit: cover !important;

  border-radius: 50% !important;

}

html body .topbar #authOpen.ah-public-avatar-frame-v35 {

  padding: 3px !important;

}

html body .topbar #authOpen.ah-public-avatar-frame-v35::before { padding: 3px; }

html body .topbar #authOpen.ah-public-avatar-frame-v35 > #profileAvatar {

  width: 100% !important; height: 100% !important;

}

html body.is-library #profilePage .profile-friend-row > .profile-friend-row__avatar {

  display: block !important;

  box-sizing: border-box !important;

  width: 64px !important; height: 64px !important;

  min-width: 64px !important; max-width: 64px !important;

  min-height: 64px !important; max-height: 64px !important;

  flex: 0 0 64px !important;

}

html body.is-library #profilePage .profile-friend-row__avatar > img:first-child {

  display: block !important; flex: none !important;

  width: 100% !important; height: 100% !important;

  min-width: 0 !important; min-height: 0 !important;

  max-width: 100% !important; max-height: 100% !important;

  aspect-ratio: 1; object-fit: cover !important;

  background: #202329 !important;

}

html body #publicProfileBanner .profile-banner-media[hidden],

html body #publicProfileBanner.is-default-banner .profile-banner-media {

  display: none !important;

}

html body.profile-inline-settings main.site-shell > #profilePageBackgroundLayer,

html body:has(#settingsPage:not([hidden])) main.site-shell > #profilePageBackgroundLayer {

  display: none !important; opacity: 0 !important;

}

html body #profilePage #profileHistoryRailV33 {

  scrollbar-width: none !important;

  -ms-overflow-style: none;

  cursor: grab;

  touch-action: pan-x pan-y;

}

html body #profilePage #profileHistoryRailV33::-webkit-scrollbar {

  display: none !important; width: 0 !important; height: 0 !important;

}

html body #profilePage #profileHistoryRailV33.is-rmb-dragging,

html body #profilePage #profileHistoryRailV33.is-rmb-dragging * {

  cursor: grabbing !important; user-select: none !important;

}

@media (prefers-reduced-motion: reduce) {

  html body .ah-public-avatar-frame-v35::before { animation: none !important; }

}



/* Profile library shares Favorites cards and the profile glass panels. */

html body #profilePage #profileLibraryTabsV37[hidden] { display: none; }

html body #profilePage #profileLibraryRailV37 {

  display: flex !important; gap: 16px; overflow-x: auto !important; overflow-y: hidden !important; min-width: 0;

  scrollbar-width: none; cursor: grab; padding: 2px 0 6px;

}

html body #profilePage #profileLibraryRailV37::-webkit-scrollbar { display: none; }

html body #profilePage #profileLibraryRailV37 > .poster-card {

  width: 190px !important; min-width: 190px !important; flex: 0 0 190px;

  aspect-ratio: 2 / 3; height: auto !important;

}

html body #profilePage #profileLibraryRailV37.is-rmb-dragging,

html body #profilePage #profileLibraryRailV37.is-rmb-dragging * {

  cursor: grabbing !important; user-select: none !important;

}

html body #profilePage #profileFavoritesSection { margin: 0 !important; }

html body #profilePage #profileFavoritesRail { min-width: 0; }

html body #profilePage #profileActivityCardV38 {

  width: 100%; margin: 0 !important; overflow-wrap: anywhere;

}

html body #profilePage #profileActivityCardV38 .profile-activity { min-width: 0; }

html body #profilePage #profileLibraryTabsV37 {

  justify-content: flex-start; gap: 4px; margin-bottom: 18px;

}

html body #profilePage #profileLibraryTabsV37 button {

  padding: 10px 9px; gap: 6px; min-height: 44px;

  font-size: 14px !important;

}

html body .site-shell > header.topbar > .top-actions > button#authOpen.ah-public-avatar-frame-v35 > img#profileAvatar {

  position: absolute !important; inset: 3px !important;

  width: calc(100% - 6px) !important; height: calc(100% - 6px) !important;

  min-width: 0 !important; min-height: 0 !important;

  max-width: none !important; max-height: none !important;

  margin: 0 !important; padding: 0 !important; transform: none !important;

}

html body #searchModalResults .user-search-card .user-search-card__avatar-shell {

  position: relative; display: block; width: 56px; height: 56px;

}

html body #searchModalResults .user-search-card .ah-public-avatar-frame-v35 > img.user-search-card__avatar {

  position: absolute !important; inset: 4px !important;

  width: calc(100% - 8px) !important; height: calc(100% - 8px) !important;

  min-width: 0 !important; min-height: 0 !important;

  max-width: none !important; max-height: none !important;

  margin: 0 !important; padding: 0 !important; transform: none !important;

}

@media (max-width: 680px) {

  html body #profilePage #profileLibraryRailV37 > .poster-card {

    width: 150px !important; min-width: 150px !important; flex-basis: 150px;

  }

}

/* Profile mobile layout: one explicit geometry, independent of desktop overrides. */

html body #profileActivityCardV38 time { color: #fff !important; opacity: 1 !important; }

@media (max-width: 820px) {

 html body.is-library #profilePage #profileHero { position:relative!important; height:320px!important; min-height:320px!important; padding:0!important; }

 html body.is-library #profilePage #publicProfileBanner { height:180px!important; min-height:180px!important; max-height:180px!important; }

 html body.is-library #profilePage #profileHero .profile-hero__identity { display:contents!important; }

 html body.is-library #profilePage #profileHero .profile-hero__boundary { position:absolute!important; left:16px!important; top:140px!important; right:auto!important; bottom:auto!important; width:88px!important; margin:0!important; padding:0!important; transform:none!important; }

 html body.is-library #profilePage #profileHero .profile-avatar-shell,

 html body.is-library #profilePage #profileHero .profile-avatar-crop { width:88px!important; height:88px!important; min-width:88px!important; min-height:88px!important; max-width:88px!important; max-height:88px!important; flex:0 0 88px!important; margin:0!important; transform:none!important; }

 html body.is-library #profilePage #profileHero .profile-avatar-shell { --avatar-frame-thickness:5px; }

 html body.is-library #profilePage #profileHero .profile-avatar-crop { border-width:5px!important; }

 html body.is-library #profilePage #profileHero .profile-hero__details { position:absolute!important; left:4px!important; top:239px!important; right:auto!important; bottom:auto!important; width:112px!important; max-width:112px!important; margin:0!important; padding:0!important; text-align:center!important; transform:none!important; }

 html body.is-library #profilePage #profileHero #publicProfileHandle { width:100%!important; margin:0!important; padding:0!important; font-size:16px!important; line-height:1.3!important; text-align:center!important; }

 html body.is-library #profilePage #profileHero #profileOwnerActions { position:absolute!important; left:auto!important; right:12px!important; width:calc(100% - 140px)!important; max-width:200px!important; display:flex; flex-direction:column!important; gap:8px!important; margin:0!important; padding:0!important; transform:none!important; }

 html body.is-library #profilePage #profileHero #profileOwnerActions[hidden] { display:none!important; }

 html body.is-library #profilePage #profileOwnerActions .profile-owner-action { width:100%!important; min-width:0!important; height:38px!important; min-height:38px!important; padding:8px!important; gap:6px!important; font-size:11px!important; }

 html body.is-library #profilePage #profileColumnsV33 { display:flex!important; flex-direction:column!important; gap:16px!important; }

 html body.is-library #profilePage #profileColumnLeftV33,

 html body.is-library #profilePage #profileColumnRightV33 { display:contents!important; }

 html body.is-library #profilePage .ah-profile-description-card-v33 { order:0!important; }

 html body.is-library #profilePage #profileStatsCardV33 { order:1!important; }

 html body.is-library #profilePage #profileHistoryCardV33 { order:2!important; }

 html body.is-library #profilePage #profileLibraryCardV37 { order:3!important; }

 html body.is-library #profilePage #profileFavoritesSection { order:4!important; }

 html body.is-library #profilePage .profile-friends-card { order:5!important; }

 html body.is-library #profilePage #profileActivityCardV38 { order:6!important; }

 html body.is-library #profilePage #profileColumnsV33 { align-items:stretch!important; }

 html body.is-library #profilePage #profileColumnsV33 .ah-profile-subcard-v33,

 html body.is-library #profilePage #profileColumnsV33 .ah-profile-description-card-v33,

 html body.is-library #profilePage #profileColumnsV33 .profile-friends-card { width:100%!important; max-width:100%!important; min-width:0!important; flex:none!important; }

 html body.is-library #profilePage #profileHero .profile-hero__boundary,

 html body.is-library #profilePage #profileHero .profile-hero__details { z-index:5!important; }

 html body.is-library #profilePage #profileHero .profile-hero__details { display:block!important; }

 html body.is-library #profilePage #profileHero #publicProfileHandle { display:flex!important; justify-content:center!important; transform:none!important; max-width:100%!important; }

 html body.is-library #profilePage #profileHero #publicProfileHandle .ah-username-senku-window { font-size:1em!important; }

 html body.is-library #profilePage #profileHero #profileOwnerActions { height:auto!important; }

 html body.is-library #profilePage #profileOwnerActions .profile-owner-action { flex:none!important; }

 html body #profilePage #profileHistoryRailV33 .continue-history-card { width: min(210px, 62vw)!important; min-width:min(210px,62vw)!important; max-width:min(210px,62vw)!important; flex:0 0 min(210px,62vw)!important; }

 html body #profilePage #profileLibraryTabsV37 { display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; overflow-x:auto!important; scrollbar-width:none!important; max-width:100%!important; }

 html body #profilePage #profileLibraryTabsV37::-webkit-scrollbar { display:none!important; }

 html body #profilePage #profileLibraryTabsV37 button { flex:0 0 auto!important; width:auto!important; white-space:nowrap!important; }

}

/* Unified glass actions and compact mobile owner controls. */

html body #profilePage #profileHero #profileOwnerActions .profile-owner-action,

html body #profilePage #profileAddFavorite {

 background:rgba(255,255,255,.13)!important;

 border:1px solid rgba(255,255,255,.15)!important;

 box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;

 backdrop-filter:blur(16px) saturate(130%)!important;

 -webkit-backdrop-filter:blur(16px) saturate(130%)!important;

 color:#fff!important; border-radius:12px!important;

 transition:background-color .18s,border-color .18s!important;

}

html body #profilePage #profileHero #profileOwnerActions .profile-owner-action:hover,

html body #profilePage #profileAddFavorite:hover {

 background:rgba(255,255,255,.22)!important; border-color:rgba(255,255,255,.25)!important;

}

html body #profilePage #profileAddFavorite {font-size:12px!important; text-transform:none!important; padding:9px 13px!important;}

html body #searchModal .profile-favorite-search-add {position:relative!important; font-size:26px!important; line-height:1!important;}

html body #searchModal .profile-favorite-search-add::after {

 content:attr(aria-label); position:absolute; right:0; bottom:calc(100% + 8px);

 width:max-content; max-width:220px; padding:8px 10px; border-radius:8px;

 background:#202126; color:#fff; font:600 12px/1.3 var(--font-reading);

 opacity:0; visibility:hidden; pointer-events:none; z-index:40;

}

html body #searchModal .profile-favorite-search-add:is(:hover,:focus-visible)::after {opacity:1;visibility:visible;}

@media(max-width:820px) {

 html body.is-library #profilePage #profileHero #profileOwnerActions {flex-direction:row!important; gap:4px!important; max-width:230px!important; align-items:center!important;}

 html body.is-library #profilePage #profileHero #profileOwnerActions .profile-owner-action {flex:1 1 auto!important; width:auto!important; min-width:0!important; height:30px!important; min-height:30px!important; padding:5px 4px!important; font-size:8.5px!important; gap:3px!important; border-radius:8px!important; white-space:nowrap!important;}

 html body.is-library #profilePage #profileHero #profileOwnerActions .profile-owner-action svg {width:10px!important;height:10px!important;flex:0 0 10px!important;}

 html body.is-library #profilePage #profileHero #publicProfileHandle .ah-username-senku-window {isolation:isolate;}

 html body.is-library #profilePage #profileHero #publicProfileHandle .ah-username-senku-canvas {display:block!important;z-index:3!important;opacity:.96;}

}



/* Media dialogs live at body level, independent of the settings scroll position. */

body.profile-media-editor-open { overflow:hidden!important; }

@media(max-width:820px) {

 body > #profileMediaEditor { position:fixed!important; inset:0!important; z-index:100000!important; padding:8px!important; }

 body > #profileMediaEditor .profile-media-editor__dialog { width:100%!important; max-width:560px!important; max-height:calc(100dvh - 16px)!important; box-sizing:border-box; overscroll-behavior:contain; }

 body > #profileMediaEditor .profile-media-editor__footer { position:sticky; bottom:-15px; background:#0b0b0d; padding:10px 0; z-index:2; }

 body > #profileMediaEditor .profile-media-editor__stage.is-avatar { width:min(68vw, 34dvh)!important; }

 body > #profileMediaEditor .profile-media-editor__stage { touch-action:none; }

}



/* PROFILE_MOBILE_FAVORITES_STRIP_V1_BEGIN */



#profileFavoritesSection .profile-section-note {

  display: none !important;

}



@media (max-width: 820px) {

  html body.is-library #profilePage .profile-hero::after {

    background: transparent !important;

    -webkit-backdrop-filter: none !important;

    backdrop-filter: none !important;

    box-shadow: none !important;

    border: 0 !important;

  }



  html body.is-library #profilePage .profile-hero__banner {

    border-bottom: 0 !important;

    box-shadow: none !important;

  }



  html body.is-library #profileFavoritesSection .profile-section-head {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    grid-template-rows: auto auto !important;

    align-items: start !important;

    justify-items: start !important;

    gap: 7px !important;

  }



  html body.is-library #profileFavoritesSection .profile-section-head > div {

    min-width: 0 !important;

    width: 100% !important;

  }



  html body.is-library #profileFavoritesSection .profile-add-favorite {

    position: static !important;

    grid-column: 1 !important;

    grid-row: 2 !important;

    justify-self: start !important;

    width: auto !important;

    min-width: 0 !important;

    min-height: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #aeb3bd !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: left !important;

  }



  html body.is-library #profileFavoritesSection .profile-add-favorite:hover,

  html body.is-library #profileFavoritesSection .profile-add-favorite:active {

    background: transparent !important;

    color: #ffffff !important;

    transform: none !important;

  }

}

/* PROFILE_MOBILE_FAVORITES_STRIP_V1_END */

/* PROFILE_MOBILE_SEAM_FIX_V2_BEGIN */
@media (max-width: 820px) {
  /*
    Полоска на стыке была не только от нижнего glass-слоя.
    Сам .profile-hero__fade всё ещё лежал поверх последних пикселей баннера.
    На мобиле полностью убираем его.
  */
  html body.is-library #profilePage .profile-hero__fade {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Старый нижний glass overlay тоже гарантированно выключен. */
  html body.is-library #profilePage .profile-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /*
    Баннер на 2px заходит в нижнюю часть hero.
    Это убирает даже тонкий шов из-за subpixel/anti-aliasing.
  */
  html body.is-library #profilePage .profile-hero__banner {
    height: 192px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}
/* PROFILE_MOBILE_SEAM_FIX_V2_END */

/* Rin Studio intro, scoped to the existing home hero. */
html body.is-home #catalog #continueCard #continueWatch.hero-rin-intro > .rin-hero {
 position:absolute!important; inset:0!important; display:block!important;
 width:100%!important; height:100%!important; min-width:0!important; max-width:none!important;
 margin:0!important; padding:0!important; transform:none!important; z-index:3!important;
 overflow:hidden; container-type:inline-size; color:#f6f1ea;
 background:radial-gradient(ellipse at center,#8a1c1c 0%,#571212 50%,#3e0c0c 75%,#240707 100%);
 text-align:left;
}
#continueWatch .rin-hero__velour {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.37}
#continueWatch .rin-hero__shade {position:absolute;inset:0;background:linear-gradient(to left,#000,rgba(0,0,0,.591) 38.229%,transparent 59.642%)}
#continueWatch .rin-hero__statue {position:absolute;left:29.8958%;top:0;width:64.1146%;height:100%;object-fit:fill}
#continueWatch .rin-hero__edge {position:absolute;top:0;bottom:0;left:86.2%;right:0;background:linear-gradient(to right,transparent,#000 57%,#000)}
#continueWatch .rin-hero__content {position:absolute;left:11.4583%;top:14.375%;z-index:1}
#continueWatch .rin-hero h2 {margin:0!important;font-family:"Playfair Display",serif!important;font-weight:700!important;font-size:5.8333cqw!important;line-height:1.1875!important;letter-spacing:normal!important;color:#f6f1ea!important;text-transform:none!important}
#continueWatch .rin-hero h2 span {display:block;animation:rin-reveal .9s both}
#continueWatch .rin-hero h2 span+span {animation-delay:.2s}
#continueWatch .rin-hero__sub {display:flex;align-items:center;gap:1.65cqw;margin:1.6cqw 0 0!important;font:italic 400 2.5cqw/1.2 "Cormorant Garamond",serif!important;color:#f6f1ea!important;animation:rin-reveal .9s .4s both}
#continueWatch .rin-hero__sub span {font-size:1.05cqw}
#continueWatch .rin-hero__cta {display:inline-flex;align-items:center;gap:.833cqw;margin-top:2.65cqw;padding:1.1458cqw 1.82cqw;border-radius:1.77cqw;background:#f6f1ea;color:#8a1c1c;text-decoration:none;font:400 2.0833cqw/1.079 "Playfair Display",serif;animation:rin-reveal .9s .6s both;transition:filter .2s}
#continueWatch .rin-hero__cta:hover {filter:brightness(1.08)}
#continueWatch .rin-hero__cta:focus-visible {outline:3px solid #fff;outline-offset:4px}
#continueWatch .rin-hero__cta img {width:2.0833cqw;height:2.0833cqw}
#continueWatch .rin-hero__credit {position:absolute;left:11.4583%;bottom:6.25%;display:flex;align-items:center;gap:1.3cqw;font:400 1.6667cqw/1.2 "Cormorant Garamond",serif;color:#f6f1ea}
#continueWatch .rin-hero__credit img {width:19.79cqw;height:1.25cqw}
#continueWatch .rin-hero__credit span:last-child {font:400 1.875cqw/1.2 "Bodoni Moda",serif}
@keyframes rin-reveal {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:700px) {
 #continueWatch .rin-hero__content {left:7%;top:24%}
 #continueWatch .rin-hero h2 {font-size:clamp(32px,8.8cqw,56px)!important}
 #continueWatch .rin-hero__sub {font-size:clamp(16px,4.5cqw,25px)!important;gap:3cqw;margin-top:5cqw!important}
 #continueWatch .rin-hero__sub span {font-size:2.5cqw}
 #continueWatch .rin-hero__cta {font-size:clamp(16px,4.4cqw,24px);margin-top:7cqw;padding:12px 20px;border-radius:20px}
 #continueWatch .rin-hero__cta img {width:20px;height:20px}
 #continueWatch .rin-hero__statue {left:auto;right:0;width:154%;opacity:.72;object-fit:cover;object-position:right}
 #continueWatch .rin-hero__credit {left:7%;font-size:14px;gap:10px}
 #continueWatch .rin-hero__credit span:last-child {font-size:16px}
 #continueWatch .rin-hero__credit img {width:15cqw;height:auto}
}
@media(prefers-reduced-motion:reduce) {#continueWatch .rin-hero * {animation:none!important;transition:none!important}}

/* The existing welcome copy remains in flow to keep identical video/intro height. */
html body.is-home #catalog #continueCard #continueWatch.hero-rin-intro > .hero-welcome-copy,
html body.is-home #catalog #continueCard #continueWatch.hero-rin-intro > .hero-carousel__video-shell,
html body.is-home #catalog #continueCard #continueWatch.hero-rin-intro > .hero-welcome-shade {visibility:hidden!important;pointer-events:none!important}
#continueWatch .rin-hero__bottom {position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--bg-base) 0%,var(--bg-base) 6%,rgba(10,10,10,.96) 16%,rgba(10,10,10,.72) 35%,rgba(10,10,10,.22) 62%,transparent 86%)}
#continueWatch .rin-hero__content,#continueWatch .rin-hero__credit {z-index:2}
#continueWatch .rin-hero__velour {animation:rin-grain 9s ease-in-out infinite}
#continueWatch .rin-hero__glow {position:absolute;right:6%;top:8%;width:46%;height:90%;z-index:0;background:radial-gradient(circle at 60% 35%,rgba(200,140,90,.28),transparent 62%);filter:blur(12px);pointer-events:none;animation:rin-glow 6s ease-in-out infinite}
#continueWatch .rin-hero__particles {position:absolute;inset:0;z-index:1;pointer-events:none;container-type:size}
#continueWatch .rin-hero__particle {position:absolute;bottom:-6px;border-radius:50%;background:#f3ece0;opacity:0;box-shadow:0 0 7px rgba(243,236,224,.3);animation-name:rin-particle-rise,rin-particle-twinkle;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;will-change:transform,opacity}
#continueWatch .rin-hero__statue {transform-origin:70% 60%;animation:rin-statue 8s ease-in-out infinite;transition:translate .3s ease-out;translate:var(--rin-x,0px) var(--rin-y,0px)}
#continueWatch .rin-hero__cta {position:relative;overflow:hidden}
#continueWatch .rin-hero__cta::after {content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(122,20,20,.18),transparent);pointer-events:none;animation:rin-sheen 3.6s ease-in-out infinite}
@keyframes rin-grain {0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.5;transform:scale(1.03)}}
@keyframes rin-glow {0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
@keyframes rin-statue {0%,100%{transform:translate(5px,3px) rotate(.35deg) scale(1.065)}50%{transform:translate(-17px,-9px) rotate(-.55deg) scale(1.08)}}
@keyframes rin-particle-rise {0%{transform:translate(0,0) scale(.6);opacity:0}8%{opacity:var(--rin-peak,.7)}22%{transform:translate(var(--rin-dx1),-20cqh) scale(1)}45%{transform:translate(var(--rin-dx2),-42cqh) scale(.85)}68%{transform:translate(var(--rin-dx3),-65cqh) scale(1.05)}88%{opacity:var(--rin-peak,.7)}100%{transform:translate(var(--rin-dx4),-105cqh) scale(.7);opacity:0}}
@keyframes rin-particle-twinkle {0%,100%{filter:blur(var(--rin-blur,0px)) brightness(1)}50%{filter:blur(var(--rin-blur,0px)) brightness(1.6)}}
@keyframes rin-sheen {0%{left:-60%}45%,100%{left:130%}}
#continueWatch .rin-hero h2 {font-size:4.8cqw!important}
html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-rin-intro .rin-hero h2 {font-family:"Playfair Display",Georgia,serif!important;font-weight:900!important;letter-spacing:-.01em!important}
@media(max-width:700px) {#continueWatch .rin-hero h2 {font-size:clamp(26px,7.5cqw,48px)!important}}
@media(prefers-reduced-motion:reduce) {
 #continueWatch .rin-hero *,#continueWatch .rin-hero *::after {animation:none!important;transition:none!important}
 #continueWatch .rin-hero__particles {display:none}
 #continueWatch .rin-hero__statue {translate:none!important;transform:none!important}
 #continueWatch .rin-hero__cta::after {display:none}
}
html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome.hero-rin-intro {height:clamp(390px,36vw,540px)!important;min-height:0!important;max-height:540px!important;padding:0!important}
@media(min-width:701px) {
 #continueWatch .rin-hero__content {top:8%}
 #continueWatch .rin-hero h2 {font-size:4.4cqw!important}
 #continueWatch .rin-hero__cta {margin-top:2cqw}
}
@media(max-width:700px) {
 html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome.hero-rin-intro {height:clamp(290px,55vw,390px)!important;min-height:0!important;max-height:390px!important}
 #continueWatch .rin-hero__content {top:15%}
 #continueWatch .rin-hero__sub {margin-top:3cqw!important}
 #continueWatch .rin-hero__cta {margin-top:3cqw}
}

/* Typography refinements: home hero, detail actions, profile favorites. */
html body.is-home:not(.is-library) #catalog #continueCard #continueWatch.hero-welcome h3 {font-weight:900!important;-webkit-text-stroke:1px currentColor!important}
html body.is-home #continueWatch.hero-welcome .hero-carousel__actions button {font-weight:900!important;-webkit-text-stroke:.5px currentColor!important}
html body.is-detail:not(.is-watch) #detailPage .detail-poster-actions button {font-weight:900!important;-webkit-text-stroke:.5px currentColor!important}
html body.is-library #profilePage #profileFavoritesSection .profile-section-head h2 {font-size:clamp(20px,1.45vw,26px)!important}

/* The level tag belongs to the avatar, not to the profile text row. */
#profilePage .profile-avatar-shell .profile-level-badge,
#leaderboardGrid .leaderboard-avatar-shell .profile-level-badge {
  position:absolute; left:50%; bottom:-7px; z-index:8;
  transform:translateX(-50%); display:grid; place-items:center;
  min-width:68px; height:25px; padding:0 9px;
  border-radius:8px; overflow:hidden;
  color:#fff; background:rgba(22,22,27,.76);
  box-shadow:0 5px 18px #0008;
  font:900 14px/1 var(--font-heading, sans-serif);
  letter-spacing:.015em; white-space:nowrap;
}
#profilePage .profile-level-badge::before,
#leaderboardGrid .profile-level-badge::before {
  content:""; position:absolute; left:50%; top:50%;
  width:150%; aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0 68%,#ffffff15 77%,#fff 84%,#ffffff15 91%,transparent 100%);
  animation:ah-level-border-turn 8s linear infinite;
}
#profilePage .profile-level-badge::after,
#leaderboardGrid .profile-level-badge::after {
  content:""; position:absolute; inset:1px; border-radius:7px;
  background:rgba(24,24,29,.86); backdrop-filter:blur(8px);
}
#profilePage .profile-level-badge > span,
#leaderboardGrid .profile-level-badge > span {position:relative;z-index:1}
@keyframes ah-level-border-turn {
  from {transform:translate(-50%,-50%) rotate(0deg)}
  to {transform:translate(-50%,-50%) rotate(360deg)}
}
@media(max-width:700px) {
  #profilePage .profile-avatar-shell .profile-level-badge,
  #leaderboardGrid .leaderboard-avatar-shell .profile-level-badge {
    min-width:57px; height:22px; bottom:-6px; padding:0 6px;
    border-radius:7px; font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #profilePage .profile-level-badge::before,
  #leaderboardGrid .profile-level-badge::before {animation:none}
}
#leaderboardGrid .leaderboard-avatar-shell .profile-level-badge {
  min-width:48px; height:20px; bottom:-5px; padding:0 6px;
  border-radius:7px; font-size:11px; font-weight:800;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px) saturate(1.35);
  box-shadow:0 3px 9px #0008, inset 0 1px rgba(255,255,255,.14);
}
#leaderboardGrid .profile-level-badge::after {
  border-radius:6px;
  background:rgba(23,24,29,.58);
}
#profilePage .profile-avatar-shell .profile-level-badge {
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px) saturate(1.35);
  box-shadow:0 3px 9px #0008, inset 0 1px rgba(255,255,255,.14);
}
#profilePage .profile-level-badge::after {
  background:rgba(23,24,29,.58);
}

/* Profile avatar is clickable, but it has no tooltip or hover treatment. */
html body .topbar #authOpen:hover {
  background:transparent !important;
  filter:none !important;
  transform:none !important;
  box-shadow:none !important;
}
html body #profilePage #profileAvatarPresence {
  display:none !important;
}

/* Profile background: show the uploaded pixels, not a CSS-blurred upscale. */
html body.is-profile-route-v33 main.site-shell > #profilePageBackgroundLayer::before {
  filter:none !important;
  opacity:1 !important;
  transform:scale(var(--profile-page-background-zoom, 1)) !important;
  will-change:transform !important;
}
@media(min-width:821px) {
  html body.is-library #profilePage.profile-page:not([hidden]) .profile-hero {
    margin-top:64px !important;
  }
}
@media(max-width:820px) {
  html body.is-library #profilePage.profile-page:not([hidden]) .profile-hero {
    margin-top:28px !important;
  }
}

/* Collectible profile statuses and the deliberately simple achievements page. */
#profilePage .profile-identity-line {
  display:flex; align-items:center; gap:10px; width:max-content; max-width:none;
}
#profilePage .profile-identity-line .profile-status-wrap { transform:translateY(12px); }
#profilePage .profile-identity-line #publicProfileHandle {
  flex:0 0 auto; width:auto !important; max-width:none !important;
}
#profilePage .profile-status-wrap[hidden] { display:none !important; }
#profilePage .profile-status-wrap { display:inline-flex; flex:0 0 auto; }
#profilePage .profile-status-chip,
.profile-status-preview {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:158px; height:61px; padding:0 16px;
  border:0; background:transparent; overflow:hidden;
  color:#fff; font:900 var(--status-desktop-font-size, 12px)/1.05 "Bricolage Grotesque",sans-serif;
  text-align:center; vertical-align:middle;
  font-family:"Bricolage Grotesque",sans-serif !important;
  font-weight:900 !important; line-height:1.05 !important;
  text-transform:none !important; letter-spacing:normal !important;
}
#profilePage .profile-status-chip:not(:disabled) { cursor:pointer; }
#profilePage .profile-status-chip img,
.profile-status-preview img {
  position:absolute; z-index:0; left:0; top:50%; width:100%; height:auto;
  transform:translateY(-50%); pointer-events:none;
}
#profilePage .profile-status-chip__text,
.profile-status-preview > span {
  position:absolute; z-index:1; left:50%; top:50%;
  transform:translate(-50%,calc(-50% + var(--status-label-offset, 0px)));
  display:flex; align-items:center; justify-content:center;
  width:calc(100% - 42px); max-width:132px; max-height:48%; overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  white-space:normal; overflow-wrap:anywhere;
}
#profilePage .profile-status-chip__arrow {
  position:absolute; z-index:2; right:10px; top:50%; transform:translateY(-56%);
  color:#fff; font:900 20px/1 sans-serif; text-shadow:0 1px 4px #000;
}
#profilePage .profile-status-chip__arrow[hidden] { display:none !important; }
.profile-status-menu[hidden] { display:none !important; }
.profile-status-menu {
  position:fixed; z-index:16000; width:220px; max-height:min(390px, 65vh);
  padding:8px; overflow-y:auto; border:1px solid rgba(255,255,255,.17);
  border-radius:16px; background:rgba(18,18,20,.94);
  box-shadow:0 18px 38px #0009; backdrop-filter:blur(18px);
}
.profile-status-menu__option {
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:66px; border:0; border-radius:10px;
  background:transparent; color:#ddd; cursor:pointer;
  font:700 11px/1.2 var(--font-heading,sans-serif);
}
.profile-status-menu__option:hover,.profile-status-menu__option.is-current { background:#ffffff18; }
.profile-status-menu__option .profile-status-preview { width:158px; height:61px; font-size:var(--status-desktop-font-size, 12px); }
.achievements-page {
  min-height:calc(100vh - 90px); padding:52px clamp(20px,4vw,74px) 100px;
  background:var(--bg-base); color:#fff;
  font-family:var(--font-reading,"Manrope",sans-serif);
}
.achievements-page[hidden] { display:none !important; }
.achievements-page__header h1 { margin:0; font-size:clamp(34px,4vw,56px); font-weight:950; }
.achievements-page__header p,.achievements-page__collection > p { color:#a9a9af; }
.achievements-page h2 { margin:0 0 18px; font-size:clamp(22px,2vw,30px); }
.achievements-page__rules,.achievements-page__collection { margin-top:46px; }
.achievements-page__rules-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; }
.achievements-page__rules-grid p {
  display:flex; flex-direction:column; gap:8px; margin:0; padding:19px;
  border:1px solid #29292c; border-radius:16px; background:#151517;
}
.achievements-page__rules-grid strong { font-size:25px; }
.achievements-page__rules-grid span { color:#aaaab0; font-size:13px; }
.achievements-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:15px; margin-top:23px; }
.achievements-status-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:15px; border:1px solid #2b2b30; border-radius:18px;
  background:rgba(255,255,255,.025); text-align:center;
}
.achievements-status-card:not(.is-owned) .profile-status-preview { filter:grayscale(.6); opacity:.7; }
.achievements-status-card .profile-status-preview { width:158px; height:61px; font-size:var(--status-desktop-font-size, 12px); }
.achievements-status-card .profile-status-preview > span { max-width:132px; }
.achievements-status-card p {
  margin:0; color:#fff;
  font:700 14px/1.4 var(--font-heading,"Bricolage Grotesque",sans-serif);
}
.achievements-status-progress {
  display:block; width:100%; max-width:210px; height:6px; margin-top:8px;
  overflow:hidden; border-radius:99px; background:rgba(255,255,255,.18);
}
.achievements-status-progress i {
  display:block; height:100%; border-radius:inherit;
  background:rgba(255,255,255,.82); transition:width .3s ease;
}
@media(max-width:820px) {
  html body.is-library #profilePage #profileHero .profile-identity-line {
    flex-direction:column; align-items:center; gap:3px;
    width:112px; max-width:112px;
  }
  #profilePage .profile-identity-line .profile-status-wrap { transform:none; }
  .profile-status-preview,
  .profile-status-menu__option .profile-status-preview,
  .achievements-status-card .profile-status-preview {
    width:124px; height:48px; font-size:var(--status-mobile-font-size, 10px);
  }
  .profile-status-preview[data-status-frame="fire"] > span {
    width:calc(100% - 16px); max-width:108px;
    white-space:nowrap; letter-spacing:-.025em;
    --status-label-offset:3px;
  }
  html body.is-library #profilePage #profileHero .profile-identity-line #publicProfileHandle {
    flex:0 0 auto; width:112px !important; max-width:112px !important;
  }
  #profilePage .profile-status-chip { width:124px; height:48px; padding:0 15px; font-size:var(--status-mobile-font-size, 10px); }
  #profilePage .profile-status-chip__text { max-width:132px; }
  #profilePage .profile-status-chip[data-status-frame="fire"] .profile-status-chip__text { width:calc(100% - 16px);max-width:108px;white-space:nowrap;letter-spacing:-.025em;--status-label-offset:3px; }
  #profilePage .profile-status-chip__arrow { right:7px; font-size:16px; }
  .achievements-page { padding:30px 17px 95px; }
}

/* Reuse friend-notification card/actions without its avatar column. */
/* Scroll the drawer rather than shrinking and clipping individual cards. */
html body .notifications-list { max-height:none !important; }
html body .notifications-list > .notification-item {
  flex:0 0 auto !important;
  height:auto !important;
  max-height:none !important;
}
html body .notification-item--status .profile-status-preview {
  flex:none;
}
html body .notification-item--status .profile-status-preview img {
  border-radius:0 !important;
  object-fit:contain !important;
}
html body .notification-item.notification-item--status { grid-template-columns:minmax(0,1fr) !important; }
html body .notification-item--status .notification-item__body { display:flex;flex-direction:column;align-items:flex-start;gap:8px; }
html body .notification-item--status .notification-item__copy { color:#fff;overflow-wrap:anywhere; }
html body .notification-item--status .notification-actions { width:100%; }

/* Badge typography must not inherit the profile's generic button/span styles. */
html body #profilePage #profileStatusCurrent,
html body .profile-status-preview {
  font-family:"Unbounded",sans-serif !important;
  font-weight:540 !important; letter-spacing:.005em !important;
}
html body #profilePage #profileStatusCurrent,
html body .profile-status-preview {
  box-sizing:border-box; padding:0 !important;
  font-size:var(--status-desktop-font-size,12px) !important;
  -webkit-text-size-adjust:none; text-size-adjust:none;
}
html body #profilePage #profileStatusCurrent .profile-status-chip__text,
html body .profile-status-preview > span {
  font:inherit !important; text-transform:none !important;
}
@media(max-width:820px) {
  html body #profilePage #profileStatusCurrent,
  html body .profile-status-preview {
    width:124px !important; height:48px !important;
    font-size:var(--status-mobile-font-size,10px) !important;
  }
  html body #profilePage #profileStatusCurrent[data-status-frame="divine"] .profile-status-chip__text,
  html body .profile-status-preview[data-status-frame="divine"] > span {
    width:calc(100% - 28px) !important;
    max-width:96px !important;
    max-height:none !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    --status-label-offset:1px;
  }
}

/* Mobile profile identity and a single owner menu; desktop layout stays unchanged. */
html body #profilePage #profileMobileSettings { display:none !important; }
html body > #profileMobileSettingsMenu { display:none !important; }
@media (max-width:820px) {
  html body.is-library #profilePage #profileHero { height:350px !important; min-height:350px !important; }
  html body.is-library #profilePage:has(#profileStatusWrap:not([hidden])) #profileHero { height:405px !important; min-height:405px !important; }
  html body.is-library #profilePage #profileHero .profile-hero__boundary {
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
  }
  html body.is-library #profilePage #profileHero .profile-hero__details {
    left:50% !important; right:auto !important; width:calc(100% - 28px) !important;
    max-width:none !important; transform:translateX(-50%) !important;
  }
  html body.is-library #profilePage #profileHero .profile-identity-line {
    width:100% !important; max-width:none !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
  }
  html body.is-library #profilePage #profileHero .profile-identity-line #publicProfileHandle {
    width:100% !important; max-width:100% !important; justify-content:center !important;
    text-align:center !important; overflow-wrap:anywhere;
  }
  html body.is-library #profilePage #profileHero #profileOwnerActions { display:none !important; }
  html body.is-library #profilePage #profileHero #profileMobileSettings:not([hidden]) {
    display:block !important; position:absolute; left:50%; top:285px;
    width:max-content; transform:translateX(-50%); z-index:12;
  }
  html body.is-library #profilePage:has(#profileStatusWrap:not([hidden])) #profileMobileSettings:not([hidden]) { top:325px; }
  #profilePage #profileMobileSettingsToggle {
    display:flex; align-items:center; justify-content:center; gap:9px;
    min-width:142px; min-height:36px; padding:8px 15px;
    border:1px solid rgba(255,255,255,.18); border-radius:10px;
    background:rgba(255,255,255,.13); color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(16px) saturate(130%);
    font:700 12px/1.2 var(--font-reading,"Manrope",sans-serif);
    cursor:pointer;
  }
  #profilePage #profileMobileSettingsToggle[aria-expanded="true"],
  #profilePage #profileMobileSettingsToggle:hover { background:rgba(255,255,255,.22); }
  #profilePage #profileMobileSettingsToggle svg { width:11px; height:11px; flex:0 0 11px; }
  #profilePage #profileMobileSettingsToggle span { font:inherit !important; }
  html body > #profileMobileSettingsMenu:not([hidden]) {
    display:block !important; position:fixed; z-index:16000; width:220px; padding:6px;
    border:1px solid rgba(255,255,255,.18); border-radius:13px;
    background:rgba(18,18,20,.96); box-shadow:0 16px 35px #0009;
    backdrop-filter:blur(18px);
  }
  html body > #profileMobileSettingsMenu button {
    display:block; width:100%; min-height:42px; padding:10px 12px;
    border:0; border-radius:8px; background:transparent; color:#fff;
    font:700 12px/1.3 var(--font-reading,"Manrope",sans-serif);
    text-align:left; cursor:pointer;
  }
  html body > #profileMobileSettingsMenu button:hover,
  html body > #profileMobileSettingsMenu button:focus-visible { background:rgba(255,255,255,.12); }
  html body.is-library #profilePage #profileMobileSettingsToggle {
    min-width:0 !important; min-height:0 !important; width:auto !important; height:30px !important;
    padding:6px 13px !important; gap:6px !important; border-radius:9px !important;
    font-family:var(--font-reading,"Manrope",sans-serif) !important;
    font-size:11px !important; font-weight:600 !important; line-height:1.2 !important;
    letter-spacing:normal !important; text-transform:none !important;
  }
}

/* One badge geometry and typography in profile, picker, notifications and achievements. */
html body #profilePage #profileStatusCurrent,
html body .profile-status-preview {
  font-family:"Unbounded",sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.005em !important;
  line-height:1.05 !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
html body #profilePage #profileStatusCurrent .profile-status-chip__text,
html body .profile-status-preview > span {
  box-sizing:border-box;
  width:calc(100% - 24px) !important;
  max-width:none !important;
  max-height:none !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  overflow:hidden !important;
  font:inherit !important;
  font-weight:500 !important;
  letter-spacing:.005em !important;
  line-height:1.05 !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
@media(max-width:820px) {
  html body #profilePage #profileStatusCurrent,
  html body .profile-status-preview {
    width:142px !important;
    height:55px !important;
  }
  html body #profilePage #profileStatusCurrent .profile-status-chip__text,
  html body .profile-status-preview > span {
    width:calc(100% - 18px) !important;
    max-width:none !important;
    letter-spacing:.005em !important;
  }
  html body #profilePage #profileStatusCurrent .profile-status-chip__arrow { right:2px; }
  html body #profilePage #profileStatusCurrent[data-status-frame="divine"] .profile-status-chip__text,
  html body .profile-status-preview[data-status-frame="divine"] > span {
    width:calc(100% - 18px) !important;
    max-width:none !important;
  }
}

/* Mobile profile: a standalone banner, without the glass card underneath. */
@media (max-width:820px) {
  html body.is-library #profilePage.profile-page:not([hidden]) #profileHero {
    height:360px !important;
    min-height:360px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap:not([hidden])) #profileHero {
    height:425px !important;
    min-height:425px !important;
  }
  html body.is-library #profilePage #profileHero::after,
  html body.is-library #profilePage #profileHero .profile-hero__fade {
    content:none !important;
    display:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  html body.is-library #profilePage #publicProfileBanner {
    border-radius:18px !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html body.is-library #profilePage #profileHero .profile-hero__boundary {
    top:136px !important;
    width:112px !important;
  }
  html body.is-library #profilePage #profileHero .profile-avatar-shell,
  html body.is-library #profilePage #profileHero .profile-avatar-crop {
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-width:112px !important;
    max-height:112px !important;
    flex:0 0 112px !important;
  }
  html body.is-library #profilePage #profileHero .profile-avatar-shell {
    --avatar-frame-thickness:6px;
  }
  html body.is-library #profilePage #profileHero .profile-avatar-crop {
    border-width:6px !important;
  }
  html body.is-library #profilePage #profileHero .profile-level-badge {
    min-width:72px !important;
    height:28px !important;
    bottom:-8px !important;
    padding:0 9px !important;
    font-size:14px !important;
  }
  html body.is-library #profilePage #profileHero .profile-hero__details {
    top:264px !important;
  }
  html body.is-library #profilePage #profileHero #publicProfileHandle {
    font-size:20px !important;
    line-height:1.25 !important;
  }
  html body.is-library #profilePage #profileHero #profileMobileSettings:not([hidden]) {
    top:314px !important;
  }
  html body.is-library #profilePage:has(#profileStatusWrap:not([hidden])) #profileHero #profileMobileSettings:not([hidden]) {
    top:373px !important;
  }
  html body.is-library #profilePage #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    left:50% !important;
    right:auto !important;
    top:314px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:calc(100% - 24px) !important;
    min-width:150px !important;
  }
  html body.is-library #profilePage:has(#profileStatusWrap:not([hidden])) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:373px !important;
  }
  html body.is-library #profilePage #profileHero .profile-edit-button.is-friend-action span {
    display:inline !important;
  }
}

/* Presence sits beside the collectible status; the same text is used for friends. */
#profilePage .profile-status-activity-line {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
#profilePage .profile-live-activity {
  display:block;
  max-width:340px;
  color:#a8abb0;
  font:500 14px/1.4 var(--font-reading,"Manrope",sans-serif);
  text-transform:none;
  letter-spacing:normal;
  overflow-wrap:anywhere;
}
#profilePage .profile-live-activity[hidden] { display:none; }
#profilePage .profile-live-activity.is-online { color:#5fd276; }
html body.is-library #profilePage .profile-friend-row__status {
  display:block;
  color:#a8abb0;
  font:500 13px/1.4 var(--font-reading,"Manrope",sans-serif) !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  text-transform:none;
  letter-spacing:normal;
}
html body.is-library #profilePage .profile-friend-row__status.is-online { color:#5fd276 !important; }
@media (min-width:821px) {
  #profilePage .profile-live-activity { transform:translateY(12px); }
}
@media (max-width:820px) {
  html body.is-library #profilePage #profileHero .profile-status-activity-line {
    display:flex;
    width:100%;
    min-height:55px;
    align-items:center;
    justify-content:center;
    gap:7px;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line:has(#profileStatusWrap:not([hidden])) {
    justify-content:flex-start;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line #profileStatusWrap:not([hidden]) {
    flex:0 0 142px;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
  }
  html body.is-library #profilePage #profileHero .profile-live-activity {
    flex:1 1 0;
    min-width:0;
    max-width:100%;
    font-size:11px;
    line-height:1.3;
    white-space:normal !important;
    overflow:visible !important;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line:has(#profileStatusWrap[hidden]) .profile-live-activity {
    flex:0 1 auto;
    text-align:center;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap:not([hidden])) #profileHero {
    height:480px !important;
    min-height:480px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero {
    height:425px !important;
    min-height:425px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap:not([hidden])) #profileHero #profileMobileSettings:not([hidden]),
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap:not([hidden])) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:438px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero #profileMobileSettings:not([hidden]),
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:380px !important;
  }
  html body.is-library #profilePage .profile-friend-row__status {
    font-size:11px !important;
  }
}

/* Desktop identity: slightly less left inset, activity aligned with the name. */
@media (min-width:821px) {
  html body.is-library #profilePage #profileHero .profile-hero__identity {
    left:16px !important;
    gap:8px !important;
  }
  html body.is-library #profilePage #profileHero .profile-live-activity {
    font-size:18px !important;
    transform:translateY(15px) !important;
  }
}

/* On phones, keep name, collectible status and presence on separate lines. */
@media (max-width:820px) {
  html body.is-library #profilePage #profileHero .profile-status-activity-line {
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:0 !important;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line:has(#profileStatusWrap:not([hidden])) {
    justify-content:center !important;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line #profileStatusWrap:not([hidden]) {
    flex:0 0 auto !important;
    height:55px !important;
  }
  html body.is-library #profilePage #profileHero .profile-live-activity {
    flex:none !important;
    width:100% !important;
    max-width:272px !important;
    text-align:center !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero {
    height:385px !important;
    min-height:385px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero #profileMobileSettings:not([hidden]),
html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:345px !important;
  }
}

/* Earned status collection: one ordered row at the bottom of the profile. */
html body.is-library #profilePage #profileHero .profile-earned-statuses {
  position:absolute;
  z-index:4;
  left:20px;
  right:20px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#ffffff44 transparent;
}
html body.is-library #profilePage #profileHero .profile-earned-statuses[hidden] { display:none !important; }
html body.is-library #profilePage #profileHero .profile-earned-statuses__option {
  position:relative;
  display:block;
  flex:0 0 auto;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
html body.is-library #profilePage #profileHero .profile-earned-statuses__option:focus-visible {
  outline:2px solid #c08dff;
  outline-offset:1px;
  border-radius:8px;
}
html body.is-library #profilePage #profileHero .profile-earned-statuses .profile-status-preview {
  width:158px;
  height:61px;
  min-width:158px;
  font-size:var(--status-desktop-font-size, 12px);
}
@media (min-width:821px) {
  html body.is-library #profilePage #profileHero #profileStatusWrap { display:none !important; }
  html body.is-library #profilePage #profileHero .profile-earned-statuses { left:4px; }
  html body.is-library #profilePage #profileHero .profile-identity-line,
  html body.is-library #profilePage #profileHero .profile-status-activity-line {
    align-items:baseline !important;
  }
  html body.is-library #profilePage #profileHero .profile-live-activity {
    transform:translateY(15px) !important;
  }
  html body.is-library #profilePage.is-viewing-foreign-profile #profileHero .profile-earned-statuses {
    right:245px;
  }
}
@media (max-width:820px) {
  html body.is-library #profilePage #profileHero .profile-earned-statuses {
    left:12px;
    right:12px;
    bottom:4px;
    gap:4px;
    cursor:grab;
    user-select:none;
  }
  html body.is-library #profilePage #profileHero .profile-earned-statuses.is-dragging,
  html body.is-library #profilePage #profileHero .profile-earned-statuses.is-dragging * { cursor:grabbing !important; }
  html body.is-library #profilePage #profileHero .profile-earned-statuses .profile-status-preview {
    width:142px !important;
    min-width:142px;
    height:55px !important;
    font-size:var(--status-mobile-font-size, 10px);
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:495px !important;
    min-height:495px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:455px !important;
    min-height:455px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:550px !important;
    min-height:550px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:495px !important;
    min-height:495px !important;
  }
}

html body.is-library #profilePage .profile-live-activity.is-online,
html body.is-library #profilePage .profile-friend-row__status.is-online {
  font-weight:700 !important;
}

/* Desktop only: align the level badge's bottom with the nickname's bottom. */
@media (min-width:821px) {
  html body.is-library #profilePage #profileHero .profile-hero__boundary {
    transform:translateY(-22px) !important;
  }
  html body.is-library #profilePage #profileHero .profile-hero__details {
    margin-left:-38px !important;
  }
}

/* Mobile: lift the edit action, earned badges, and the following profile cards together. */
@media (max-width:820px) {
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero {
    height:365px !important;
    min-height:365px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:435px !important;
    min-height:435px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero {
    height:405px !important;
    min-height:405px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height:475px !important;
    min-height:475px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero #profileMobileSettings:not([hidden]),
  html body.is-library #profilePage.profile-page:not([hidden]):has(#profileStatusWrap[hidden]):not(.has-live-watching) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:325px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero #profileMobileSettings:not([hidden]),
  html body.is-library #profilePage.profile-page:not([hidden]).has-live-watching:has(#profileStatusWrap[hidden]) #profileHero .profile-edit-button.is-friend-action:not([hidden]) {
    top:360px !important;
  }
}
/* PROFILE_STATS_GLASS_V1_BEGIN */
html body.is-library #profilePage #profileStatsCardV33 {
  background: rgba(9, 9, 27, .48) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
}
html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
}
html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span {
  min-width: 0 !important;
  min-height: 98px !important;
  gap: 10px !important;
  padding: 18px 12px 18px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span:nth-child(even) {
  padding-left: 20px !important;
  padding-right: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .10) !important;
}
html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span:not(:nth-last-child(-n+2)) {
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats strong {
  margin-top: auto !important;
  font-size: clamp(25px, 2.1vw, 34px) !important;
}
@media (min-width: 821px) {
  html body.is-library #profilePage #profileHero .profile-identity-line {
    max-width: calc(100vw - 320px) !important;
  }
  html body.is-library #profilePage #profileHero .profile-status-activity-line {
    flex: 1 1 auto;
    min-width: 0;
  }
}
html body.is-library #profilePage #profileHero .profile-live-activity {
  min-width: 0;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis;
}
@media (max-width: 820px) {
  html body.is-library #profilePage #profileHero .profile-live-activity {
    max-width: calc(100vw - 32px) !important;
  }
}
@media (max-width: 420px) {
  html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span {
    min-height: 90px !important;
  }
  html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats > span:nth-child(even) {
    padding-left: 14px !important;
  }
  html body.is-library #profilePage #profileStatsCardV33 #publicProfileStats small {
    font-size: 11px !important;
  }
}
/* PROFILE_STATS_GLASS_V1_END */
/* ACHIEVEMENTS_LEVEL_PROGRESS_V1_BEGIN */
.achievements-page__header .achievements-level-progress {
  width: min(100%, 620px);
  margin-top: 24px;
}
.achievements-level-progress__labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
}
.achievements-level-progress__labels strong {
  color: #fff;
  font: 800 16px/1.3 var(--font-reading, "Manrope", sans-serif);
}
.achievements-level-progress__labels span {
  color: #a9a9af;
  font: 650 12px/1.4 var(--font-reading, "Manrope", sans-serif);
}
.achievements-level-progress__track {
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .32);
}
.achievements-level-progress__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, .55);
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .achievements-level-progress__track > span { transition: none; }
}
/* ACHIEVEMENTS_LEVEL_PROGRESS_V1_END */

/* Profile wall: one glass card below favorite anime. */
html body.is-library #profilePage #profileCommentsSection[hidden] { display: none !important; }
html body.is-library #profilePage #profileCommentsSection {
  display: block;
  overflow: hidden;
  margin-top: 0 !important;
}
html body.is-library #profilePage .profile-comments__form {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}
html body.is-library #profilePage #profileCommentsInput {
  display: block;
  width: 100%;
  min-height: 96px;
  box-sizing: border-box;
  resize: none;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  color: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.5;
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html body.is-library #profilePage #profileCommentsInput::placeholder {
  color: rgba(255,255,255,.52);
}
html body.is-library #profilePage #profileCommentsInput:focus {
  border-color: rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.065) !important;
}
html body.is-library #profilePage .profile-comments__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
}
html body.is-library #profilePage #profileCommentsMessage {
  color: rgba(255,255,255,.68);
  font-size: 13px;
}
html body.is-library #profilePage #profileCommentsSubmit {
  min-width: 124px;
  min-height: 38px;
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #121215;
  font-size: 13px; font-weight: 800; line-height: 1;
  font-family: inherit;
  cursor: pointer;
  margin-left: auto;
}
html body.is-library #profilePage #profileCommentsSubmit:hover { background: #ebebee; }
html body.is-library #profilePage #profileCommentsSubmit:disabled { opacity: .55; cursor: wait; }
html body.is-library #profilePage .profile-comments__reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-left: 2px solid rgba(255,255,255,.7);
  color: rgba(255,255,255,.76);
  font-size: 13px;
}
html body.is-library #profilePage .profile-comments__reply[hidden] { display: none; }
html body.is-library #profilePage .profile-comments__reply button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
html body.is-library #profilePage .profile-comments__list {
  display: grid;
}
html body.is-library #profilePage .profile-comments__empty {
  margin: 0;
  padding: 10px 0 4px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}
html body.is-library #profilePage .profile-comment {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 13px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.105);
}
html body.is-library #profilePage .profile-comment:last-child { border-bottom: 0; }
html body.is-library #profilePage .profile-comment.is-reply {
  margin-left: 58px;
  padding-top: 11px;
  border-left: 1px solid rgba(255,255,255,.13);
  padding-left: 18px;
}
html body.is-library #profilePage .profile-comment__avatar {
  display: block;
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  cursor: pointer;
}
html body.is-library #profilePage .profile-comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html body.is-library #profilePage .profile-comment__content { min-width: 0; }
html body.is-library #profilePage .profile-comment__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
html body.is-library #profilePage .profile-comment__name {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 15px; font-weight: 800; line-height: 1.3;
  font-family: inherit;
  cursor: pointer;
}
html body.is-library #profilePage .profile-comment__meta time {
  color: rgba(255,255,255,.48);
  font-size: 12px;
}
html body.is-library #profilePage .profile-comment__body {
  margin: 7px 0 9px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.5;
}
html body.is-library #profilePage .profile-comment__actions { display: flex; gap: 14px; }
html body.is-library #profilePage .profile-comment__action {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,.58);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  font-family: inherit;
  cursor: pointer;
}
html body.is-library #profilePage .profile-comment__action:hover { color: #fff; }
html body.is-library #profilePage .profile-comment__delete:is(:hover, :focus-visible) { color: #ff6b6b !important; }
html body.is-library #profilePage .profile-comments__more {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
html body.is-library #profilePage .profile-comments__more[hidden] { display: none; }
@media (max-width: 820px) {
  html body.is-library #profilePage #profileCommentsSection { order: 5 !important; }
  html body.is-library #profilePage .profile-friends-card { order: 6 !important; }
  html body.is-library #profilePage #profileActivityCardV38 { order: 7 !important; }
  html body.is-library #profilePage .profile-comment.is-reply { margin-left: 15px; padding-left: 12px; }
}
/* PROFILE_CLEARER_GLASS_V2_BEGIN */
/* Keep profile cards transparent without blurring the background. */
html body.is-library #profilePage :is(
  .ah-profile-description-card-v33,
  .ah-profile-subcard-v33,
  .profile-friends-card,
  #profileStatsCardV33
) {
  background: linear-gradient(165deg, rgba(28,31,38,.16), rgba(8,10,15,.20)) !important;
  border-color: rgba(255,255,255,.17) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.is-library #profilePage .profile-friend-row {
  background: rgba(10,14,20,.12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.is-library #profilePage #profileCommentsInput {
  background: rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body.is-library #profilePage #profileCommentsInput:focus {
  background: rgba(255,255,255,.05) !important;
}

@media (min-width: 1001px) {
  html body.is-library #profilePage .profile-hero::after {
    background: linear-gradient(180deg, rgba(18,22,30,.12), rgba(10,13,19,.18)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* PROFILE_CLEARER_GLASS_V2_END */

/* Notifications without an avatar use the entire card width. */
html body .notification-item.notification-item--event {
  grid-template-columns: minmax(0, 1fr) !important;
}
html body .notification-item--event .notification-item__body {
  width: 100%;
}
html body .notification-item--event .notification-item__copy {
  overflow-wrap: anywhere;
}
html body .notification-item--event .notification-actions {
  flex-wrap: wrap !important;
}

/* Release countdown on the anime detail and watch pages. */
html body .release-countdown[hidden] { display: none !important; }
html body.is-detail .release-countdown:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  margin: 26px 0 30px;
  padding: clamp(22px, 3vw, 42px);
  border: 0 !important;
  border-radius: 22px;
  background: #fff !important;
  color: #090909 !important;
  text-align: left;
}
html body.is-detail .release-countdown__label,
html body.is-detail .release-countdown__time {
  display: block;
  color: #090909 !important;
  font-family: "Unbounded", var(--font-heading), sans-serif !important;
  text-transform: uppercase;
}
html body.is-detail .release-countdown__label {
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}
html body.is-detail .release-countdown__time {
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.045em;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
html body.is-detail .release-countdown__line {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
html body.is-watch #watchPlayerPage .release-countdown--watch:not([hidden]) {
  width: min(100%, 1120px, calc((100svh - 150px) * 16 / 9));
  margin: 0 auto 18px;
}
@media (max-width: 760px) {
  html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailReleaseCountdown {
    order: 5 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    text-align: left !important;
  }
  html body.is-detail .release-countdown:not([hidden]) {
    gap: 12px;
    padding: 22px 18px;
    border-radius: 16px;
  }
  html body.is-detail .release-countdown__time {
    font-size: clamp(20px, 6.5vw, 31px);
    line-height: 1.34;
  }
}

/* Keep the release timer aligned with the player and closer to the synopsis. */
html body.is-watch #watchPlayerPage > #watchReleaseCountdown:not([hidden]) {
  width: min(100%, 1120px) !important;
  max-width: none !important;
  margin: 0 auto 18px !important;
}
html body.is-detail:not(.is-watch) #detailPage .anime-info > #descriptionToggle {
  margin-bottom: 4px !important;
}
html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailReleaseCountdown:not([hidden]) {
  margin: 8px 0 22px !important;
}

/* The comment itself is the notification action. */
html body .notification-item--event .notification-comment-link {
  display: inline-block;
  width: fit-content;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9a9a9d !important;
  font-family: var(--font-reading) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease;
}
html body .notification-item--event .notification-comment-link:hover,
html body .notification-item--event .notification-comment-link:focus-visible {
  color: #fff !important;
}
html body .episode-comment.is-notification-target,
html body .profile-comment.is-notification-target {
  border-radius: 12px;
  outline: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.06);
  scroll-margin-top: 100px;
}

/* Friends without an action button do not need its reserved mobile row. */
@media (max-width: 820px) {
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile:has(#profileEditButton[hidden]) #profileHero {
    height: 330px !important;
    min-height: 330px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile:has(#profileEditButton[hidden]):has(#profileStatusWrap:not([hidden])) #profileHero {
    height: 400px !important;
    min-height: 400px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile:has(#profileEditButton[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height: 370px !important;
    min-height: 370px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile:has(#profileEditButton[hidden]):has(#profileStatusWrap:not([hidden])):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height: 430px !important;
    min-height: 430px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile.has-live-watching:has(#profileEditButton[hidden]) #profileHero {
    height: 350px !important;
    min-height: 350px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile.has-live-watching:has(#profileEditButton[hidden]):has(#profileStatusWrap:not([hidden])) #profileHero {
    height: 410px !important;
    min-height: 410px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile.has-live-watching:has(#profileEditButton[hidden]):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height: 400px !important;
    min-height: 400px !important;
  }
  html body.is-library #profilePage.profile-page:not([hidden]).is-viewing-foreign-profile.has-live-watching:has(#profileEditButton[hidden]):has(#profileStatusWrap:not([hidden])):has(#profileEarnedStatuses:not([hidden])) #profileHero {
    height: 450px !important;
    min-height: 450px !important;
  }
}

/* Compact actions below the anime poster. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions #openWatchPage {
  grid-column: 1 !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  overflow: visible;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action,
html body.is-detail:not(.is-watch) #detailPage .detail-action-row #watchTogetherButton.is-temporarily-unavailable {
  position: relative;
  display: grid !important;
  place-items: center;
  flex: 0 0 43px;
  width: 43px !important;
  min-width: 43px !important;
  height: 43px !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 50% !important;
  background: rgba(20,22,27,.78) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  filter: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action[hidden] {
  display: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action:hover,
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action:focus-visible {
  border-color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  transform: translateY(-2px) !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action.is-active {
  border-color: #ffa66c !important;
  color: #ffa66c !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row #watchTogetherButton {
  opacity: .6;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: min(220px, 75vw);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: #1a1b20;
  color: #fff;
  font: 700 11px/1.2 Manrope, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity .15s ease, transform .15s ease;
}
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action:hover::after,
html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 760px) {
  html body.is-detail:not(.is-watch) #detailPage .detail-action-row {
    gap: 8px;
  }
  html body.is-detail:not(.is-watch) #detailPage .detail-action-row .detail-action,
  html body.is-detail:not(.is-watch) #detailPage .detail-action-row #watchTogetherButton.is-temporarily-unavailable {
    flex-basis: 42px;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* Keep the main watch CTA first and the four circular actions below it. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  order: 0 !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  order: 1 !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action {
  display: grid !important;
  flex: 0 0 42px !important;
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton {
  display: grid !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[hidden] {
  display: none !important;
}

/* White action circles on anime details; reuse solid site icons except the library outline. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #watchTogetherButton.is-temporarily-unavailable {
  background: #fff !important;
  border-color: #fff !important;
  color: #0b0b0d !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.28) !important;
  cursor: pointer !important;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action:focus-visible,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #watchTogetherButton.is-temporarily-unavailable:hover {
  background: #ededed !important;
  border-color: #ededed !important;
  color: #0b0b0d !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action.is-active {
  color: #0b0b0d !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px #ff9b6b, 0 5px 14px rgba(0,0,0,.28) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action:focus-visible {
  outline: 2px solid #ff9b6b !important;
  outline-offset: 3px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action::after {
  top: calc(100% + 9px);
  bottom: auto;
}


/* Detail controls: centered library icon, readable tooltips, matching watch CTA. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,.28) !important;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage .watch-button__play {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:disabled .watch-button__play {
  display: none;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled):hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled):focus-visible {
  background: #ededed !important;
  border-color: #ededed !important;
  color: #0b0b0d !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled):active {
  transform: translateY(0) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton svg {
  display: block;
  margin: auto;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton:not(.is-active) svg {
  transform: translate(-.5px, -1px);
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action::after {
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* Bring the detail copy closer to the poster without changing the poster position. */
@media (min-width: 761px) {
  html body.is-detail:not(.is-watch) #detailPage .anime-detail-main {
    gap: clamp(24px, 2.4vw, 34px) !important;
  }
}

/* The legacy favorite/watch-together rule adds asymmetric padding despite the grid centering. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #watchTogetherButton {
  padding: 0 !important;
  place-items: center !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton svg {
  margin: 0 !important;
  transform: none !important;
}


/* Full-width shared-watch action and YouTube-style season voting. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 14px !important;
  background: rgba(22,23,28,.54) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .18s ease, transform .18s ease, border-color .18s ease !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton svg {
  display: block;
  flex: none;
  width: 21px;
  height: 21px;
  fill: #fff;
  stroke: none;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton:focus-visible {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.68) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row {
  grid-row: 3 !important;
  justify-content: space-between !important;
  gap: 4px !important;
  box-sizing: border-box;
  width: 100% !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] {
  background: #fff !important;
  color: #0b0b0d !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px #ff9b6b, 0 5px 14px rgba(0,0,0,.28) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action::after {
  font-weight: 500 !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-votes {
  display: flex;
  align-items: center;
  flex: 0 1 112px;
  box-sizing: border-box;
  width: 112px;
  min-width: 100px;
  height: 42px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: #fff;
  color: #0b0b0d;
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
  overflow: visible;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-width: 0;
  padding: 0 5px;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer;
  font: 600 11px/1 Manrope, sans-serif !important;
  transition: color .18s ease, background-color .18s ease !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage #animeLikeButton {
  flex: 1 1 auto;
  border-radius: 24px 0 0 24px;
}
html body.is-detail:not(.is-watch) #detailPage #animeDislikeButton {
  flex: 0 0 37px;
  border-radius: 0 24px 24px 0;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button svg {
  display: block;
  flex: none;
  width: 17px;
  height: 17px;
  fill: currentColor;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button:hover,
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button:focus-visible {
  background: #ededed !important;
  transform: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button.is-active {
  color: #dc6e38 !important;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button:disabled {
  opacity: .55;
  cursor: wait;
}
html body.is-detail:not(.is-watch) #detailPage .detail-votes__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 23px;
  background: #d3d3d3;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: #1a1b20;
  color: #fff;
  font: 500 11px/1.2 Manrope, sans-serif !important;
  text-transform: none !important;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity .15s ease, transform .15s ease;
}
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button:hover::after,
html body.is-detail:not(.is-watch) #detailPage .detail-vote-button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 761px) and (max-width: 1000px) {
  html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action {
    flex-basis: 33px !important;
    width: 33px !important;
    min-width: 33px !important;
    max-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
  }
  html body.is-detail:not(.is-watch) #detailPage .detail-votes {
    flex-basis: 78px;
    min-width: 78px;
    width: 78px;
    height: 33px;
  }
  html body.is-detail:not(.is-watch) #detailPage #animeDislikeButton { flex-basis: 28px; }
  html body.is-detail:not(.is-watch) #detailPage .detail-vote-button { padding-inline: 2px; font-size: 10px !important; }
  html body.is-detail:not(.is-watch) #detailPage .detail-vote-button svg { width: 14px; height: 14px; }
}


/* Override the older poster-button typography and 48px minimum on the vote halves. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button {
  color: #0b0b0d !important;
  height: 100% !important;
  min-height: 0 !important;
  font: 600 11px/1 Manrope, sans-serif !important;
  text-transform: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button.is-active {
  color: #dc6e38 !important;
}
@media (min-width: 761px) and (max-width: 1000px) {
  html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button {
    font-size: 10px !important;
  }
}


/* Return the primary actions to full-width rows, with a tighter vertical rhythm. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton {
  grid-column: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage {
  grid-row: 1 !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton {
  grid-row: 2 !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

/* Match the vote hover motion to the other icons, without jelly animation. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button {
  transition: background-color .18s ease, color .18s ease, transform .18s ease !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:focus-visible {
  transform: translateY(-2px) !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:active {
  transform: translateY(0) !important;
  animation: none !important;
}

/* Glass detail secondary actions close to the poster. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions {
  margin-top: 12px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row {
  justify-content: center !important;
  gap: 8px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action {
  flex: 0 0 36px !important;
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(22,23,28,.54) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action svg {
  width: 18px !important;
  height: 18px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action:focus-visible {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.68) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row button.detail-action.is-active,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] {
  background: rgba(22,23,28,.7) !important;
  border-color: rgba(255,255,255,.68) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #ff9b6b, 0 5px 14px rgba(0,0,0,.18) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes {
  flex: 0 0 108px;
  box-sizing: border-box;
  width: 108px;
  min-width: 108px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(22,23,28,.54);
  color: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button {
  color: #fff !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:focus-visible {
  background: rgba(255,255,255,.22) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button.is-active {
  color: #ff9b6b !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeDislikeButton {
  flex: 0 0 35px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes .detail-votes__divider {
  background: rgba(255,255,255,.3);
}

/* Keep the vote pill as one glass control with a single divider. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button {
  border: 0 !important;
  border-radius: 0 !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeLikeButton {
  border-radius: 24px 0 0 24px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeDislikeButton {
  border-radius: 0 24px 24px 0 !important;
}

/* Neutral active library action: keep its glass state without the orange ring. */
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton.is-active {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.68) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton:focus-visible {
  outline-color: #fff !important;
}


/* Detail-page spacing and hierarchy. Keep the watch page untouched. */
html body.is-detail:not(.is-watch) #detailPage .anime-info .chips #profileYearChip {
  color: var(--accent-default) !important;
}
html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailReleaseCountdown:not([hidden]) {
  gap: 12px;
  margin-top: 20px !important;
  margin-bottom: 18px !important;
  padding: clamp(20px, 2.2vw, 32px);
  background: rgba(255,255,255,.94) !important;
}
html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown .release-countdown__time {
  font-size: clamp(16px, 2.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -.04em;
}
html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown .release-countdown__line {
  white-space: nowrap;
}
html body.is-detail:not(.is-watch) #detailPage .detail-characters:not(.detail-similar) {
  margin-bottom: 8px;
}
html body.is-detail:not(.is-watch) #detailPage #detailCharactersList {
  padding-bottom: 2px;
}
html body.is-detail:not(.is-watch) #detailPage .detail-chronology {
  margin-top: 10px;
  margin-bottom: 18px;
}
html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide {
  margin-top: 20px;
}
html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList {
  --similar-card-width: clamp(145px, 10vw, 190px);
  gap: 14px !important;
}
html body.is-detail:not(.is-watch) #detailPage #detailSimilarList .anime-card-caption strong {
  font-size: 14px !important;
}
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:hover,
html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:focus-visible {
  transform: none !important;
}
@media (max-width: 760px) {
  html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailReleaseCountdown:not([hidden]) {
    margin-top: 18px !important;
    padding: 20px 16px;
  }
  html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown .release-countdown__time {
    font-size: clamp(14px, 4vw, 19px);
  }
  html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList {
    --similar-card-width: clamp(112px, 31vw, 150px);
    gap: 10px !important;
  }
}

/* Anime detail sections and browser downloads */
html body #detailPage .detail-section-tabs { display:flex;align-items:center;gap:18px;flex-wrap:nowrap;margin:24px 0 20px;white-space:nowrap;overflow-x:auto;scrollbar-width:none; }
html body #detailPage .detail-section-tabs::-webkit-scrollbar { display:none; }
html body #detailPage .detail-section-tabs button { appearance:none;border:0;background:none;padding:5px 0;color:#929296;font:500 clamp(12px,1vw,15px)/1.25 var(--font-reading,Arial,sans-serif);cursor:pointer;text-transform:none;transition:color .18s ease; }
html body #detailPage .detail-section-tabs button:hover,html body #detailPage .detail-section-tabs button:focus-visible,html body #detailPage .detail-section-tabs button[aria-current="page"] {color:#fff;}
html body #detailPage .detail-section-tabs>span {width:1px;height:17px;flex:none;background:#747478;opacity:.7;}
html body #detailPage[data-detail-section="comments"] #detailReleaseCountdown,html body #detailPage[data-detail-section="downloads"] #detailReleaseCountdown,html body #detailPage[data-detail-section="comments"] #detailCharacters,html body #detailPage[data-detail-section="downloads"] #detailCharacters,html body #detailPage[data-detail-section="comments"] #detailChronology,html body #detailPage[data-detail-section="downloads"] #detailChronology,html body #detailPage[data-detail-section="comments"] #detailSimilar,html body #detailPage[data-detail-section="downloads"] #detailSimilar,html body #detailPage[data-detail-section="comments"] .anime-info>.meta-list,html body #detailPage[data-detail-section="downloads"] .anime-info>.meta-list,html body #detailPage[data-detail-section="comments"] .anime-info>#profileVotes,html body #detailPage[data-detail-section="downloads"] .anime-info>#profileVotes,html body #detailPage[data-detail-section="comments"] #detailFacts,html body #detailPage[data-detail-section="downloads"] #detailFacts {display:none!important;}
html body #detailPage .detail-section-panel[hidden]{display:none!important;}
html body #detailPage #detailCommentsPanel .episode-comments{margin:0;width:100%;max-width:none;}
html body #detailPage .detail-downloads{border:0;border-radius:0;padding:0;background:none;box-shadow:none;}
html body #detailPage .detail-downloads__episodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,108px));gap:6px;width:100%;}
html body #detailPage .detail-download-episode{appearance:none;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-height:32px;padding:4px 8px;border:1px solid rgba(255,255,255,.38);border-radius:8px;background:rgba(22,23,28,.54);box-shadow:0 5px 14px rgba(0,0,0,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;text-align:center;font:800 13px/1.1 var(--font-heading,Arial,sans-serif);text-transform:none!important;transition:background-color .18s ease,transform .18s ease,border-color .18s ease;}
html body #detailPage .detail-download-episode strong{font:inherit;}
html body #detailPage .detail-download-episode small{font:600 10px/1.15 var(--font-reading,Arial,sans-serif);color:inherit;text-transform:none;opacity:.7;}
html body #detailPage .detail-download-episode progress{position:absolute;bottom:0;left:12px;width:calc(100% - 24px);height:3px;accent-color:#ff986c;}
html body #detailPage .detail-download-episode:not(:disabled):not([aria-pressed="true"]):hover,html body #detailPage .detail-download-episode:not(:disabled):not([aria-pressed="true"]):focus-visible{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.68);transform:translateY(-2px);}
html body #detailPage .detail-download-episode[aria-pressed="true"]{background:#fff;border-color:#fff;color:#111;}
html body #detailPage .detail-download-episode[aria-pressed="true"]:hover,html body #detailPage .detail-download-episode[aria-pressed="true"]:focus-visible{background:#ededed;border-color:#ededed;transform:translateY(-2px);}
html body #detailPage .detail-download-episode:disabled{cursor:default;opacity:.62;}
html body #detailPage .detail-download-episode:focus-visible{outline:2px solid #ff986c;outline-offset:2px;}
html body #detailPage .detail-downloads__actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
html body #detailPage .detail-downloads__actions button{box-sizing:border-box;min-height:31px;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;background:rgba(22,23,28,.62);padding:0 11px;cursor:pointer;font:600 11px/1.2 var(--font-reading,Arial,sans-serif);font-size:11px!important;font-weight:600!important;text-transform:none!important;transition:background-color .18s ease,transform .18s ease,border-color .18s ease;}
html body #detailPage .detail-downloads__actions #detailDownloadSelected{background:#fff;border-color:#fff;color:#111;}
html body #detailPage .detail-downloads__actions a{margin-left:auto;padding:5px 0;border:0;border-radius:0;background:none;color:#aaaeb5;text-decoration:none;white-space:nowrap;font:600 13px/1.3 var(--font-reading,Arial,sans-serif);text-transform:none!important;transition:color .18s ease,transform .18s ease;}
html body #detailPage .detail-downloads__actions a::after{content:" ↗";font-size:15px;}
html body #detailPage .detail-downloads__actions button:not(:disabled):hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.68);transform:none;}
html body #detailPage .detail-downloads__actions #detailDownloadSelected:not(:disabled):hover{background:#ededed;border-color:#ededed;}
html body #detailPage .detail-downloads__actions a:hover{color:#fff;transform:translateY(-2px);}
html body #detailPage .detail-downloads__actions button:disabled{opacity:.4;cursor:not-allowed;}
html body #detailPage .detail-downloads__status{font-size:13px;min-height:20px;color:#b9b9bd;margin:12px 0 0;}
.browser-downloads-page{max-width:1040px;margin:0 auto;padding:64px clamp(18px,4vw,48px) 110px;color:#fff;}
.browser-downloads-page[hidden]{display:none!important;}
.browser-downloads-page.is-empty{min-height:calc(100vh - 160px);box-sizing:border-box;display:grid;place-items:center;}
.browser-downloads-page h1{text-align:center;font:800 clamp(30px,4vw,52px)/1.08 var(--font-heading,Arial,sans-serif);margin:0 0 38px;}
.browser-downloads-page.is-empty h1{margin:0;}
.browser-downloads-group{margin:0 0 14px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(20,21,25,.72);overflow:hidden;}
.browser-downloads-group summary{list-style:none;position:relative;cursor:pointer;padding:20px 58px 20px 24px;}
.browser-downloads-group summary::-webkit-details-marker{display:none;}
.browser-downloads-group summary::after{content:"⌄";position:absolute;right:24px;top:50%;transform:translateY(-50%);color:#a9a9ad;font-size:24px;line-height:1;transition:transform .18s ease;}
.browser-downloads-group[open] summary::after{transform:translateY(-50%) rotate(180deg);}
.browser-downloads-group summary:hover{background:rgba(255,255,255,.06);}
.browser-downloads-group h2{font:750 clamp(17px,2vw,23px)/1.25 var(--font-heading,Arial,sans-serif);margin:0 0 8px;color:#fff;}
.browser-downloads-group summary p{font:500 14px/1.4 var(--font-reading,Arial,sans-serif);color:#acacb2;margin:0;}
.browser-downloads-group__episodes{border-top:1px solid rgba(255,255,255,.12);}
.browser-download-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;border-top:1px solid rgba(255,255,255,.08);}
.browser-download-card:first-child{border-top:0;}
.browser-download-card>div:last-child{display:flex;gap:8px;}
.browser-download-card strong{font:700 14px/1.2 var(--font-reading,Arial,sans-serif);}
.browser-download-card small{display:block;color:#99999f;margin-top:4px;font:500 12px/1.2 var(--font-reading,Arial,sans-serif);}
.browser-download-card button{border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;background:rgba(255,255,255,.07);padding:8px 12px;cursor:pointer;font:700 11px/1.2 var(--font-heading,Arial,sans-serif);transition:background-color .18s ease,transform .18s ease;}
.browser-download-card button:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
@media(max-width:680px){html body #detailPage .detail-section-tabs{gap:12px;margin-top:20px;}html body #detailPage .detail-section-tabs button{font-size:12px;}html body #detailPage .detail-downloads__episodes{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;}html body #detailPage .detail-download-episode{font-size:12px;min-height:32px;}html body #detailPage .detail-downloads__actions a{margin-left:0;}.browser-downloads-page:not(.is-empty){padding-top:106px;}.browser-downloads-page h1{margin-bottom:26px;}.browser-downloads-group summary{padding:18px 46px 18px 16px;}.browser-downloads-group summary::after{right:16px;}.browser-download-card{padding:12px 16px;}.browser-download-card button{padding:7px 9px;font-size:10px;}}

@media(max-width:480px){
  html body #detailPage .detail-section-tabs{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:space-between;
    gap:4px;
    margin-inline:0;
    overflow:visible;
  }
  html body #detailPage .detail-section-tabs button{
    flex:0 1 auto;
    min-width:0;
    padding:4px 0;
    font-size:10px!important;
    line-height:1.2;
    white-space:nowrap;
  }
  html body #detailPage .detail-section-tabs>span{
    flex:0 0 1px;
    height:12px;
  }
}

html body #detailPage:is([data-detail-section="comments"],[data-detail-section="downloads"]) .anime-info > :is(.title-line,.chips,#profileDescription,#descriptionToggle){
  display:none!important;
}

html body #detailPage .detail-section-tabs button{text-transform:none!important;}
html body #detailPage .detail-section-panel{align-self:stretch;width:100%;min-width:0;box-sizing:border-box;}

html body #detailPage #detailDownloadStop{background:transparent;color:#bbb;}
html body #detailPage #detailDownloadStop[hidden]{display:none!important;}
/* Download queue: each episode stays visible while it is waiting, loading or saved. */
.browser-downloads-page__heading{position:relative;min-height:58px;}
.browser-downloads-page__heading h1{margin-bottom:34px;}
.browser-downloads-page__heading #browserDownloadsStop{position:absolute;right:0;top:2px;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:10px 14px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:700 12px/1.2 var(--font-heading,Arial,sans-serif);transition:background .18s ease,transform .18s ease;}
.browser-downloads-page__heading #browserDownloadsStop:hover{background:rgba(255,255,255,.17);transform:translateY(-2px);}
.browser-downloads-page__heading #browserDownloadsStop[hidden]{display:none!important;}
.browser-downloads-page.is-empty .browser-downloads-page__heading{min-height:0;}
.browser-downloads-group__episodes{display:grid;gap:12px;padding:16px;border-top:1px solid rgba(255,255,255,.12);}
.browser-download-card,.browser-download-card:first-child{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;box-sizing:border-box;padding:13px 18px 18px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(10,11,14,.64);overflow:hidden;}
.browser-download-card[data-state="active"]{border-color:rgba(255,255,255,.3);background:rgba(28,29,33,.9);}
.browser-download-card[data-state="failed"] small{color:#ff9898;}
.browser-download-card__copy{min-width:0;flex:1;}
.browser-download-card__copy strong{display:block;font-size:15px;}
.browser-download-card__copy small{line-height:1.35;}
.browser-download-card__actions{display:flex;gap:8px;flex-shrink:0;}
.browser-download-card__progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.14);overflow:hidden;}
.browser-download-card__progress span{display:block;height:100%;background:#ff8f55;transition:width .25s ease;}
.browser-download-card[data-state="saved"] .browser-download-card__progress span{background:#fff;}
.browser-download-card[data-state="failed"] .browser-download-card__progress span{background:#f17171;}
.browser-download-card.is-indeterminate .browser-download-card__progress span{width:30%!important;animation:download-progress-indeterminate 1.25s ease-in-out infinite;}
@keyframes download-progress-indeterminate{from{transform:translateX(-120%)}to{transform:translateX(340%)}}
@media(max-width:680px){.browser-downloads-page__heading{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px;}.browser-downloads-page__heading h1{margin:0;}.browser-downloads-page__heading #browserDownloadsStop{position:static;}.browser-downloads-group__episodes{gap:10px;padding:12px;}.browser-download-card,.browser-download-card:first-child{min-height:62px;padding:12px 13px 16px;gap:8px;}.browser-download-card__copy strong{font-size:14px;}.browser-download-card__copy small{font-size:11px;}.browser-download-card__actions{gap:5px;}}
@media(prefers-reduced-motion:reduce){.browser-download-card.is-indeterminate .browser-download-card__progress span{animation:none;transform:none;}}
/* Pick a translation before creating the offline download queue. */
.detail-download-voice[hidden]{display:none!important;}
.detail-download-voice{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.detail-download-voice__dialog{width:min(100%,480px);max-height:min(680px,85vh);display:flex;flex-direction:column;box-sizing:border-box;padding:22px;border:1px solid rgba(255,255,255,.23);border-radius:18px;background:#121316;box-shadow:0 28px 80px rgba(0,0,0,.6);color:#fff;}
.detail-download-voice__dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;}
.detail-download-voice__dialog h2{margin:0 0 5px;font:800 clamp(21px,4vw,28px)/1.18 var(--font-heading,Arial,sans-serif);}
.detail-download-voice__dialog header p{margin:0;color:#a8a9af;font:500 13px/1.4 var(--font-reading,Arial,sans-serif);}
.detail-download-voice__dialog header button{flex:none;width:32px;height:32px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:400 23px/1 Arial,sans-serif;transition:background .18s ease;}
.detail-download-voice__dialog header button:hover{background:rgba(255,255,255,.2);}
.detail-download-voice__status{margin:0;color:#adb0b7;font:500 14px/1.4 var(--font-reading,Arial,sans-serif);}
.detail-download-voice__status:empty{display:none;}
.detail-download-voice__list{display:grid;gap:8px;overflow:auto;min-height:0;scrollbar-width:thin;}
.detail-download-voice__list button{width:100%;min-height:42px;padding:10px 15px;border:1px solid rgba(255,255,255,.27);border-radius:10px;background:rgba(255,255,255,.035);color:#fff;text-align:left;cursor:pointer;font:700 13px/1.3 var(--font-heading,Arial,sans-serif);transition:background .18s ease,border-color .18s ease;}
.detail-download-voice__list button:hover,.detail-download-voice__list button:focus-visible{background:#fff;border-color:#fff;color:#111;transform:none!important;}
@media(max-width:680px){.detail-download-voice{padding:14px;}.detail-download-voice__dialog{max-height:78vh;padding:18px;border-radius:15px;}.detail-download-voice__list button{min-height:44px;}}

/* Offline downloads: compact graphite episode choices and a catalog-style library. */
html body #detailPage .detail-download-episode{border:0;background:#292a2e;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .18s ease,color .18s ease;}
html body #detailPage .detail-download-episode:not(:disabled):not([aria-pressed="true"]):hover,html body #detailPage .detail-download-episode:not(:disabled):not([aria-pressed="true"]):focus-visible{border:0;background:#48494e;transform:none;}
html body #detailPage .detail-download-episode[aria-pressed="true"],html body #detailPage .detail-download-episode[aria-pressed="true"]:hover,html body #detailPage .detail-download-episode[aria-pressed="true"]:focus-visible{border:0;transform:none;}
html body #detailPage .detail-downloads__actions button{text-transform:none;}
.detail-download-voice.is-loading .detail-download-voice__dialog{min-height:92px;justify-content:center;}
.detail-download-voice.is-loading .detail-download-voice__dialog header,.detail-download-voice.is-loading .detail-download-voice__list{display:none;}
.detail-download-voice.is-loading .detail-download-voice__status{text-align:center;color:#fff;}
.detail-download-voice__list{gap:0;}
.detail-download-voice__list button,.detail-download-voice__list button:hover,.detail-download-voice__list button:focus-visible{min-height:0;width:100%;padding:11px 4px;border:0;border-radius:0;background:none;box-shadow:none;transform:none!important;text-align:left;font:500 15px/1.35 var(--font-reading,Arial,sans-serif);}
.detail-download-voice__list button{color:#a8a9af;border-bottom:1px solid rgba(255,255,255,.08);}
.detail-download-voice__list button:hover,.detail-download-voice__list button:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.24);text-decoration:underline;text-underline-offset:3px;}
.browser-downloads-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,190px));justify-content:center;gap:18px;}
html body .browser-downloads-catalog-card{position:relative;display:block;box-sizing:border-box;width:100%;min-width:0;aspect-ratio:2/3;padding:0;border:0;border-radius:14px;overflow:hidden;background:#242529;color:#fff;text-align:left;cursor:pointer;}
html body .browser-downloads-catalog-card>img{display:block;width:100%;height:100%;object-fit:cover;}
html body .browser-downloads-catalog-card .anime-card-rating{color:#fff;}
html body .browser-downloads-catalog-card .anime-card-caption{display:grid;}
.browser-downloads-detail-heading{display:flex;align-items:center;gap:18px;margin:0 0 22px;}
.browser-downloads-detail-heading>button{flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.26);border-radius:50%;background:#202125;color:#fff;font:600 24px/1 Arial,sans-serif;cursor:pointer;}
.browser-downloads-detail-heading>button:hover{background:#3b3c41;}
.browser-downloads-detail-heading h2{margin:0 0 4px;font:750 clamp(19px,2.4vw,27px)/1.2 var(--font-heading,Arial,sans-serif);}
.browser-downloads-detail-heading p{margin:0;color:#a8a9af;font:500 13px/1.35 var(--font-reading,Arial,sans-serif);}
.browser-downloads-detail-episodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.browser-download-card,.browser-download-card:first-child{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;min-height:95px;padding:11px 12px 14px;gap:8px;border:0;border-radius:8px;background:#292a2e;box-shadow:none;}
.browser-download-card[data-state="active"]{border:0;background:#292a2e;}
.browser-download-card__copy strong{font:800 14px/1.15 var(--font-heading,Arial,sans-serif);}
.browser-download-card__copy small{font-size:11px;overflow-wrap:anywhere;}
.browser-download-card__actions{justify-content:flex-start;flex-wrap:wrap;gap:6px;}
.browser-download-card__actions button{padding:5px 7px;border:0;border-radius:5px;background:#45464b;font:600 10px/1.1 var(--font-reading,Arial,sans-serif);transform:none;}
.browser-download-card__actions button:hover{background:#5b5c61;transform:none;}
.browser-download-card__progress{height:4px;background:#414247;}
.browser-download-card[data-state="saved"] .browser-download-card__progress span{background:#ff986c;}
@media(max-width:680px){.browser-downloads-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.browser-downloads-detail-episodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}.browser-download-card,.browser-download-card:first-child{min-height:96px;padding:9px 10px 13px;}.browser-download-card__actions button{font-size:10px;}}

.detail-download-voice__list button{text-transform:none!important;}
.browser-download-card__actions button{white-space:nowrap;padding:5px 5px;font-size:9px;}

.browser-downloads-catalog-entry{position:relative;min-width:0;}
.browser-downloads-catalog-manage{position:absolute;top:8px;right:8px;z-index:20;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(8,9,11,.9);color:#fff;font:700 23px/1 Arial,sans-serif;cursor:pointer;}
.browser-downloads-catalog-manage:hover,.browser-downloads-catalog-manage:focus-visible{background:#424349;}

/* Keep the offline player focused on playback. */
html body.is-offline-watch #watchPlayerPage #watchReleaseCountdown,
html body.is-offline-watch #watchPlayerPage #episodeComments{display:none!important;}
/* Downloaded episodes reuse the compact episode choice layout, with a watch timeline. */
html body .browser-downloads-detail-episodes{grid-template-columns:repeat(auto-fill,minmax(88px,108px));justify-content:start;gap:6px;}
html body .browser-download-card,html body .browser-download-card:first-child{position:relative;display:block;min-height:32px;padding:0;border:0;border-radius:8px;background:#292a2e;box-shadow:none;overflow:visible;transition:background-color .18s ease;}
html body .browser-download-card:hover,html body .browser-download-card:focus-within{background:#48494e;transform:none;}
html body .browser-download-card__watch{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:100%;min-height:32px;margin:0;padding:4px 17px 6px 5px;border:0;border-radius:8px;background:transparent;color:#fff;text-align:center;cursor:pointer;font:800 13px/1.1 var(--font-heading,Arial,sans-serif);}
html body .browser-download-card__watch:disabled{cursor:default;color:#fff;opacity:.8;}
html body .browser-download-card__watch strong{font:inherit;white-space:nowrap;}
html body .browser-download-card__watch small{font:500 10px/1.2 var(--font-reading,Arial,sans-serif);color:#c1c2c6;overflow-wrap:anywhere;}
html body .browser-download-card__watch small[hidden]{display:none!important;}
html body .browser-download-card__delete{position:absolute;z-index:2;top:2px;right:2px;display:grid;place-items:center;width:19px;height:19px;padding:2px;border:0;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .16s ease,background-color .16s ease;}
html body .browser-download-card__delete[hidden]{display:none!important;}
html body .browser-download-card:hover .browser-download-card__delete,html body .browser-download-card:focus-within .browser-download-card__delete{opacity:1;pointer-events:auto;}
html body .browser-download-card__delete:hover,html body .browser-download-card__delete:focus-visible{background:#b44343;transform:none;}
html body .browser-download-card__delete svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html body .browser-download-card__progress{left:0;right:0;bottom:0;height:3px;border-radius:0 0 8px 8px;pointer-events:none;}
@media(max-width:680px){html body .browser-downloads-detail-episodes{grid-template-columns:repeat(auto-fill,minmax(80px,108px));gap:6px;}html body .browser-download-card,html body .browser-download-card:first-child{min-height:32px;padding:0;}html body .browser-download-card__watch{font-size:12px;min-height:32px;}}
@media(hover:none){html body .browser-download-card__delete{opacity:1;pointer-events:auto;}}

/* Compact download progress tiles: keep long transfer states in accessible labels. */
html body .browser-downloads-detail-heading{justify-content:center;position:relative;max-width:520px;margin:0 auto 18px;text-align:center;}
html body .browser-downloads-detail-heading>button{position:absolute;left:0;top:50%;transform:translateY(-50%);}
html body .browser-downloads-detail-episodes{justify-content:center;align-items:start;}
html body .browser-download-card,html body .browser-download-card:first-child{min-height:36px;}
html body .browser-download-card__watch{min-height:36px;padding:5px 17px 7px 5px;}
html body .browser-download-card__watch[data-inert="true"]{cursor:default;opacity:1;color:#fff;}
html body .browser-download-card[data-state="queued"]{opacity:.72;}
html body .browser-download-card[data-state="active"]{background:#34353a;}
html body .browser-download-card[data-state="failed"] .browser-download-card__progress{background:#a94b4b;}
html body .browser-downloads-page__heading #browserDownloadsStop{text-transform:none;font:600 12px/1.2 var(--font-reading,Arial,sans-serif);padding:9px 12px;}
@media(max-width:680px){html body .browser-downloads-detail-heading{max-width:100%;padding-left:36px;padding-right:36px;}html body .browser-download-card,html body .browser-download-card:first-child,html body .browser-download-card__watch{min-height:36px;}}

html body .browser-downloads-detail-episodes{grid-template-columns:repeat(auto-fit,minmax(88px,108px));}
@media(max-width:680px){html body .browser-downloads-detail-episodes{grid-template-columns:repeat(auto-fit,minmax(80px,108px));}}

@media(max-width:680px){html body .browser-downloads-detail-episodes{grid-template-columns:repeat(auto-fit,minmax(80px,104px));}}

/* Download progress belongs to the episode choices on the anime page. */
html body #detailPage .detail-download-episode[data-state="active"],html body #detailPage .detail-download-episode[data-state="queued"]{opacity:1;}
html body #detailPage .detail-download-episode[data-state="active"]{background:#34353a;}
html body #detailPage .detail-download-episode__progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;border-radius:0 0 8px 8px;background:#414247;}
html body #detailPage .detail-download-episode__progress>span{display:block;height:100%;background:#ff986c;transition:width .25s ease;}
html body #detailPage .detail-download-episode__progress.is-indeterminate>span{width:30%!important;animation:download-progress-indeterminate 1.25s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){html body #detailPage .detail-download-episode__progress.is-indeterminate>span{animation:none;}}
html body #detailPage .detail-downloads__episodes{grid-template-columns:repeat(auto-fill,minmax(80px,96px));}
@media(max-width:680px){html body #detailPage .detail-downloads__episodes{grid-template-columns:repeat(auto-fill,minmax(74px,88px));}}
.download-completion-notices{position:fixed;z-index:12000;right:24px;bottom:24px;display:grid;gap:10px;max-width:min(420px,calc(100vw - 32px));}
.download-completion-notice{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(25,27,32,.97);box-shadow:0 18px 55px rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(12px);font:600 13px/1.4 var(--font-reading,Arial,sans-serif);}
.download-completion-notice span{min-width:0;overflow-wrap:anywhere;}
.download-completion-notice button{flex:none;padding:9px 12px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:#fff;color:#111;cursor:pointer;font:700 12px/1.2 var(--font-heading,Arial,sans-serif);}
.download-completion-notice button:hover,.download-completion-notice button:focus-visible{background:#e9e9e9;}
@media(max-width:680px){.download-completion-notices{left:16px;right:16px;bottom:86px;max-width:none;}.download-completion-notice{flex-wrap:wrap;}.download-completion-notice button{margin-left:auto;}}

/* Fill the episode tile itself while its download progresses. */
html body #detailPage .detail-download-episode{overflow:hidden;isolation:isolate;}
html body #detailPage .detail-download-episode strong{position:relative;z-index:1;}
html body #detailPage .detail-download-episode__progress{left:0;right:0;top:auto;bottom:0;height:4px;border-radius:0;background:rgba(255,255,255,.34);z-index:1;}
html body #detailPage .detail-download-episode__progress>span{height:100%;border-radius:0;background:#ff986c;}

/* Match the catalog width and card captions on the saved downloads page. */
html body .browser-downloads-page:not(.is-empty){box-sizing:border-box;width:min(100% - 24px,1900px);max-width:none;padding:64px 0 110px;}
html body .browser-downloads-page:not(.is-empty) h1{text-align:left;}
html body .browser-downloads-catalog{justify-content:start;}
html body .poster-card.browser-downloads-catalog-card .anime-card-caption{bottom:15px;left:13px;right:13px;gap:4px;}
html body .poster-card.browser-downloads-catalog-card .anime-card-caption strong{font-size:18px!important;line-height:1.25!important;}
@media(max-width:680px){html body .browser-downloads-page:not(.is-empty){padding-top:106px;}}

/* Saved downloads begin at the same content level as the library pages. */
html body .browser-downloads-page:not(.is-empty) .browser-downloads-page__heading{display:none;}
@media(min-width:681px){html body.is-library #catalog:has(#browserDownloadsPage:not([hidden])){padding-top:24px!important;}html body .browser-downloads-page:not(.is-empty){padding-top:24px;}}

/* The detail backdrop starts behind the floating mobile search pill. */
@media (max-width: 760px) {
  html:root body.is-detail:not(.is-watch) main.site-shell {
    padding-top: 0 !important;
  }
  html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout {
    padding-top: 100px !important;
  }
}

/* The description control belongs to the information tab only. */
html body.is-detail:not(.is-watch) #detailPage:is([data-detail-section="comments"],[data-detail-section="downloads"]) .anime-info > #descriptionToggle {
  display: none !important;
}