/* 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, html body #watchPlayerPage .ah-episode-tile__preview > .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, html body #watchPlayerPage .ah-episode-tile__preview > .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:block !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 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, html body #watchPlayerPage .ah-episode-tile__preview > .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%; } } @media (max-width: 620px) { } /* 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; } :is(#profilePage, #premiumPage) .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; } :is(#profilePage, #premiumPage) .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; } :is(#profilePage, #premiumPage) .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; } :is(#profilePage, #premiumPage) .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; } :is(#profilePage, #premiumPage) .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; } :is(#profilePage, #premiumPage) .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) { :is(#profilePage, #premiumPage) .profile-avatar-shell.has-premium-avatar-frame::before, :is(#profilePage, #premiumPage) .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; } /* Чёрная линия остаётся под цветной рамкой как безопасная база. */ :is(#profilePage, #premiumPage) .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. Никакого внешнего цветного кольца. */ :is(#profilePage, #premiumPage) .profile-avatar-shell.has-premium-avatar-frame::before { inset: 0 !important; z-index: 4 !important; padding: var(--avatar-frame-thickness) !important; } /* Glow остаётся очень мягким и идёт из самой линии, но не создаёт вторую отдельную рамку снаружи. */ :is(#profilePage, #premiumPage) .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 #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; } /* Anime detail proportions and one unified glass metadata surface. */ @media (min-width: 761px) { html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { padding-top: 92px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-detail-main { grid-template-columns: clamp(280px, 21.5vw, 320px) minmax(0, 1fr) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-column { width: 100% !important; max-width: none !important; } } html body.is-detail:not(.is-watch) #detailPage > .detail-banner img { filter: blur(6px) brightness(.46) !important; } html body.is-detail:not(.is-watch) #detailPage #profileTitle { color: #fff !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: clamp(44px, 3.5vw, 70px) !important; font-weight: 900 !important; line-height: 1.06 !important; letter-spacing: .025em !important; text-transform: uppercase !important; overflow-wrap: anywhere !important; text-wrap: balance; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription { margin-top: 16px !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: clamp(11px, .86vw, 13px) !important; font-weight: 500 !important; line-height: 1.7 !important; letter-spacing: .005em !important; text-transform: none !important; transition: color .18s ease; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription.is-height-animating { overflow: hidden !important; } @media (hover: hover) and (pointer: fine) { html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription:hover { color: #fff !important; } } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription.is-expanded:focus-visible { color: #fff !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription::before { content: ""; display: block; width: var(--detail-fire-width, min(330px, 55%)); max-width: 100%; height: 2px; margin-bottom: 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,112,42,.3), #ff7e37 28%, #ffc170 48%, #ff6b27 68%, #ff9a4a 82%, transparent 100%); background-size: 220% 100%; box-shadow: 0 0 9px rgba(255,112,42,.48), 0 0 20px rgba(255,92,32,.17); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); mask-image: linear-gradient(90deg, #000 0 80%, transparent 100%); animation: detail-fire-glint 4.5s ease-in-out infinite alternate; } @keyframes detail-fire-glint { from { background-position: 0 50%; opacity: .72; } to { background-position: 100% 50%; opacity: 1; } } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription::before { animation: none; } } html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailRatingRow { display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px 18px; max-width: 100%; margin: 28px 0 12px; } html body.is-detail:not(.is-watch) #detailPage #detailShikimoriRating { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 13px; border-radius: 999px; background: #f7f7f7; color: #151515; font-family: Manrope, sans-serif; white-space: nowrap; align-self: center; } html body.is-detail:not(.is-watch) #detailPage #detailShikimoriRating[hidden] { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .detail-shikimori-rating__logo { display: block; width: 25px; height: 25px; flex: none; object-fit: contain; } html body.is-detail:not(.is-watch) #detailPage #detailShikimoriScore { font-size: 17px; font-weight: 900; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating { display: flex; align-items: center; gap: 2px; max-width: 100%; transform: translateY(-1px); } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button { display: inline-grid; place-items: center; width: clamp(38px, 3vw, 52px) !important; height: clamp(38px, 3vw, 52px) !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #f7f7f5 !important; line-height: 1 !important; cursor: pointer; position: relative; overflow: visible !important; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button svg { display: block; width: 100%; height: 100%; overflow: visible; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button path { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button .detail-star-base { fill: #f7f7f5; stroke: #f7f7f5; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button .detail-star-fill { fill: #d9b762; stroke: #d9b762; clip-path: inset(0 calc(100% - var(--detail-star-fill, 0%)) 0 0); transition: clip-path .14s ease-out; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button.is-highlighted .detail-star-fill { transition-delay: calc(var(--star-index) * 25ms); } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button.is-committing svg { animation: detail-star-hop .36s cubic-bezier(.2,.75,.3,1) both; animation-delay: calc(var(--star-index) * 18ms); } @keyframes detail-star-hop { 0%, 100% { transform: translateY(0) scale(1); } 42% { transform: translateY(-3px) scale(1.08); } 72% { transform: translateY(1px) scale(.98); } } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button::after { content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: 0; background: radial-gradient(circle, #f4d789 0 2px, transparent 2.5px) 15% 17% / 6px 6px no-repeat, radial-gradient(circle, #d9b762 0 1.5px, transparent 2px) 82% 19% / 5px 5px no-repeat, radial-gradient(circle, #f4d789 0 1.7px, transparent 2px) 6% 60% / 5px 5px no-repeat, radial-gradient(circle, #d9b762 0 2px, transparent 2.5px) 92% 67% / 6px 6px no-repeat, radial-gradient(circle, #f4d789 0 1.5px, transparent 2px) 28% 92% / 5px 5px no-repeat, radial-gradient(circle, #d9b762 0 1.5px, transparent 2px) 73% 91% / 5px 5px no-repeat; transform: scale(.55); } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button.is-committing::after { animation: detail-star-splash .46s ease-out both; animation-delay: calc(var(--star-index) * 18ms + 70ms); } @keyframes detail-star-splash { 0% { opacity: 0; transform: scale(.55); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button .detail-star-fill { transition: none; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button.is-committing svg, html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button.is-committing::after { animation: none; } } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button:focus-visible { outline: 2px solid #ff9d4d; outline-offset: 2px; border-radius: 4px; } html body.is-detail:not(.is-watch) #detailPage:is([data-detail-section="comments"],[data-detail-section="downloads"]) .anime-info > #detailRatingRow { display: none !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 { height: 52px !important; min-height: 52px !important; font-size: 15px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { position: relative; isolation: isolate; display: flex !important; flex-wrap: wrap !important; align-items: center !important; width: max-content !important; max-width: 100% !important; min-height: 42px; margin: 16px 0 17px !important; padding: 5px 9px !important; column-gap: 4px !important; row-gap: 2px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.27) !important; border-radius: 999px !important; background: linear-gradient(155deg, rgba(255,255,255,.13) 0%, rgba(27,31,40,.67) 26%, rgba(12,15,22,.76) 76%, rgba(255,255,255,.08) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06), 0 9px 28px rgba(0,0,0,.22) !important; -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips::before { content: ""; position: absolute; inset: 1px 8px auto; height: 45%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); pointer-events: none; z-index: -1; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span:not([hidden]) { position: relative; flex: 0 0 auto; min-height: 30px !important; height: auto !important; padding: 5px 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.94) !important; font-family: Manrope, var(--font-reading, Arial), sans-serif !important; font-size: clamp(13px, .96vw, 16px) !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: nowrap; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span:not([hidden]) ~ span:not([hidden]) { border-left: 0 !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips #profileStatusChip.is-ongoing { color: var(--status-success, #5fbf7a) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips #profileStatusChip.is-finished { color: var(--status-danger, #e5484d) !important; } 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 #profileScoreChip { color: #fff !important; text-shadow: 0 0 12px rgba(255,194,105,.18); } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips #profileScoreChip .detail-rating-star { color: var(--rating-star) !important; } @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout { padding-top: 104px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-column { width: min(90vw, 304px) !important; max-width: 304px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription { order: 2 !important; margin: 14px auto 0 !important; font-size: 11px !important; line-height: 1.65 !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #descriptionToggle { order: 3 !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailRatingRow { order: 4 !important; justify-content: center; width: 100%; margin: 26px auto 12px; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { order: 5 !important; } html body.is-detail:not(.is-watch) #detailPage #profileTitle { font-size: clamp(30px, 8.5vw, 42px) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { justify-content: center !important; margin: 14px auto 17px !important; padding: 6px 8px !important; border-radius: 24px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span:not([hidden]) { display: inline-flex !important; padding: 5px 7px !important; font-size: 12px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span:nth-child(n+5):not([hidden]) { display: inline-flex !important; } } @media (max-width: 600px) { html body.is-detail:not(.is-watch) #detailPage #detailShikimoriRating { min-height: 50px; padding: 6px 10px; } html body.is-detail:not(.is-watch) #detailPage .detail-shikimori-rating__logo { width: 23px; height: 23px; } html body.is-detail:not(.is-watch) #detailPage #detailShikimoriScore { font-size: 15px; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating { display: grid; grid-template-columns: repeat(5, 36px); gap: 0 2px; } html body.is-detail:not(.is-watch) #detailPage #detailPersonalRating button { width: 36px !important; height: 36px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription::before { width: var(--detail-fire-width, min(250px, 70%)); margin: 0 auto 13px; } } /* Detail metadata: keep the status and age as two compact standalone marks. */ html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { min-height: 0 !important; padding: 0 !important; column-gap: 10px !important; row-gap: 10px !important; overflow: visible !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-detail:not(.is-watch) #detailPage .anime-info > .chips::before { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > :is(#profileYearChip, #profileScoreChip) { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip { --detail-status-bg: #d5dae4; --detail-status-ink: #37404d; --detail-status-icon: #566272; display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; min-height: 52px !important; padding: 8px 18px 8px 15px !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 999px !important; background: var(--detail-status-bg) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 20px rgba(0,0,0,.18) !important; color: var(--detail-status-ink) !important; font-family: "Unbounded", sans-serif !important; font-size: clamp(13px, 1.05vw, 16px) !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: .025em; text-shadow: 0 1px 0 rgba(255,255,255,.24); text-transform: uppercase; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip::before { content: "i"; display: grid; place-items: center; width: 24px; height: 27px; flex: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--detail-status-icon); font-family: Arial, sans-serif; font-size: 23px; font-weight: 900; line-height: 1; text-shadow: none; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-ongoing { --detail-status-bg: #b9e8cd; --detail-status-ink: #078e49; --detail-status-icon: #0f9f57; color: var(--detail-status-ink) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-ongoing::before { content: ""; background: var(--detail-status-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.7c0-1.2 1.3-1.9 2.3-1.3l10 6.3c1 .6 1 2 0 2.6l-10 6.3C8.3 20.2 7 19.5 7 18.3V5.7Z' fill='black'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.7c0-1.2 1.3-1.9 2.3-1.3l10 6.3c1 .6 1 2 0 2.6l-10 6.3C8.3 20.2 7 19.5 7 18.3V5.7Z' fill='black'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-finished { --detail-status-bg: #efbdc7; --detail-status-ink: #d62950; --detail-status-icon: #e33d5d; color: var(--detail-status-ink) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-finished::before { content: ""; background: var(--detail-status-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4.5 12.4 4.8 4.7L19.5 6.8' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4.5 12.4 4.8 4.7L19.5 6.8' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-announced { --detail-status-bg: #a9d2ef; --detail-status-ink: #0d75d4; --detail-status-icon: #137ee3; color: var(--detail-status-ink) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-announced::before { content: ""; background: var(--detail-status-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5a2 2 0 0 1 2-2h5l9-4v15l-9-4H5a2 2 0 0 1-2-2v-3ZM7 15.5 9 21h3l-2-5.5' fill='black'/%3E%3Cpath d='M21 9v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5a2 2 0 0 1 2-2h5l9-4v15l-9-4H5a2 2 0 0 1-2-2v-3ZM7 15.5 9 21h3l-2-5.5' fill='black'/%3E%3Cpath d='M21 9v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-paused { --detail-status-bg: #efc5a5; --detail-status-ink: #ca5b1d; --detail-status-icon: #dd7432; color: var(--detail-status-ink) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-paused::before { content: "Ⅱ"; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-cancelled { --detail-status-bg: #eeb8c4; --detail-status-ink: #cf244b; --detail-status-icon: #dc3457; color: var(--detail-status-ink) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip.is-cancelled::before { content: "×"; font-size: 20px; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 62px !important; min-width: 62px !important; height: 62px !important; min-height: 62px !important; box-sizing: border-box; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 50% !important; background: radial-gradient(circle at 30% 22%, #394150, #1b202a 55%, #10131a) !important; box-shadow: 0 7px 20px rgba(0,0,0,.24) !important; color: #fff !important; font-size: 21px !important; font-weight: 900 !important; text-decoration: none !important; transform-origin: center; } @media (hover: hover) and (pointer: fine) { html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip:hover { animation: detail-age-hop .34s cubic-bezier(.22,.72,.28,1) both; } } @keyframes detail-age-hop { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(-3px) scale(1.13); } 68% { transform: translateY(1px) scale(.97); } 100% { transform: translateY(0) scale(1.04); } } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip:hover { animation: none; } } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip > .age-chip__label { position: relative; z-index: 3; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: -.055em; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.55); } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip::before { content: ""; position: absolute; z-index: 2; inset: 0; border: 3px solid #f0445a; border-radius: 50%; pointer-events: none; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 72px; height: 4px; border-radius: 999px; background: #f0445a; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; } /* Keep the poster sharp while its edge blends into the dark detail background. */ html body.is-detail #detailPage #profilePoster { position: relative; isolation: isolate; border: 0 !important; } html body.is-detail #detailPage #profilePoster::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: rgba(6,8,11,.24); box-shadow: inset 0 0 18px 4px rgba(6,8,11,.35); -webkit-mask-image: radial-gradient(ellipse farthest-side at center, transparent 88%, #000 100%); mask-image: radial-gradient(ellipse farthest-side at center, transparent 88%, #000 100%); pointer-events: none; } /* The facts card is intentionally omitted from the detail layout. */ html body.is-detail:not(.is-watch) #detailPage #detailFacts { display: none !important; } @media (min-width: 761px) { html body.is-detail:not(.is-watch) .site-shell { overflow: visible !important; } html body.is-detail:not(.is-watch) #detailPage { min-height: calc(100vh + 190px); } html body.is-detail:not(.is-watch) #detailPage .anime-detail-main { min-height: calc(100vh + 98px) !important; align-items: start !important; } html body.is-detail:not(.is-watch) #detailPage .poster-column { position: sticky !important; top: 90px !important; align-self: start !important; translate: none !important; } } /* Keep Premium frame colors without competing with video decoding. */ html body .topbar .ah-public-avatar-frame-v35::before, html body.is-watch #episodeComments .ah-public-avatar-frame-v35::before { animation: none !important; } /* Detail page: remove the section switcher and give the next-episode card a peach surface. */ html body.is-detail:not(.is-watch) #detailPage #detailSectionTabs { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailReleaseCountdown:not([hidden]) { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg, #ffb589 0%, var(--accent-default, #ffa66e) 48%, #e97c56 100%) !important; color: #fff !important; box-shadow: 0 12px 30px rgba(70, 28, 18, .25), inset 0 1px 0 rgba(255, 255, 255, .4); transform: perspective(1100px) rotateX(var(--countdown-tilt-x, 0deg)) rotateY(var(--countdown-tilt-y, 0deg)); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .2s ease-out; } html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown:not([hidden])::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--countdown-glow-x, 50%) var(--countdown-glow-y, 50%), rgba(255,255,255,.24), transparent 53%); pointer-events: none; } html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown :is(.release-countdown__label, .release-countdown__time) { position: relative; color: #fff !important; text-shadow: 0 2px 5px rgba(99, 40, 23, .24); } @media (hover: hover) and (pointer: fine) { html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown:not([hidden]):hover { transform: perspective(1100px) translateY(-4px) rotateX(var(--countdown-tilt-x, 0deg)) rotateY(var(--countdown-tilt-y, 0deg)); box-shadow: 0 20px 38px rgba(70, 28, 18, .34), inset 0 1px 0 rgba(255, 255, 255, .48); } } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #detailReleaseCountdown:not([hidden]) { transform: none !important; transition: none !important; } } /* Anime chronology uses the compact playlist pattern. */ html body.is-detail #detailPage #detailChronology { box-sizing: border-box; width: min(100%, 900px); margin: 22px 0 32px; overflow: visible; border: 0; border-radius: 0; background: transparent; } html body.is-detail #detailPage #detailChronology header { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 0 0 14px; border: 0; background: transparent; } html body.is-detail #detailPage #detailChronology h2 { color: #aeb0b5; font: 900 clamp(26px, 2.35vw, 34px)/1.2 "Unbounded", var(--font-heading), sans-serif; letter-spacing: .035em; text-transform: uppercase; } html body.is-detail #detailPage .detail-chronology-summary { color: #aaa; font: 500 13px/1.3 var(--font-reading, Arial, sans-serif); } html body.is-detail #detailPage #detailChronologyList { display: block; max-height: none; overflow: visible; padding: 0; } html body.is-detail #detailPage .detail-chronology-item { box-sizing: border-box; display: grid; grid-template-columns: 58px 160px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 118px; padding: 12px 16px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; transform: none; text-decoration: none; transition: background-color .15s ease; } html body.is-detail #detailPage .detail-chronology-item:hover { border: 0; background: #303030; transform: none; } html body.is-detail #detailPage .detail-chronology-item.is-current { border: 0; background: rgba(255,166,110,.2); box-shadow: inset 3px 0 var(--accent-default, #ffa66e); } html body.is-detail #detailPage .detail-chronology-item.is-current:hover { background: rgba(255,166,110,.28); } html body.is-detail #detailPage .detail-chronology-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } html body.is-detail #detailPage .detail-chronology-index { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: linear-gradient(145deg, #2d2d31, #151517); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.22); color: #d5d5d8; font: 900 28px/1 "Unbounded", var(--font-heading), sans-serif; letter-spacing: -.08em; } html body.is-detail #detailPage .detail-chronology-item.is-current .detail-chronology-index { border-color: rgba(255,166,110,.68); background: linear-gradient(145deg, #a6654a, #4b302a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 14px rgba(83,36,20,.33); } html body.is-detail #detailPage .detail-chronology-poster { width: 160px; height: 90px; border-radius: 8px; } html body.is-detail #detailPage .detail-chronology-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } html body.is-detail #detailPage .detail-chronology-copy .detail-chronology-kind { color: #aeb0b5 !important; font: 800 11px/1.25 "Unbounded", var(--font-heading), sans-serif !important; letter-spacing: .06em; text-transform: uppercase !important; } html body.is-detail #detailPage .detail-chronology-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #f5f5f5; font: 750 19px/1.3 var(--font-reading, Arial, sans-serif) !important; letter-spacing: 0 !important; white-space: normal; } html body.is-detail #detailPage .detail-chronology-copy > span { color: #aaa; font-size: 13px; } html body.is-detail #detailPage #detailChronologyToggle[hidden] { display: none !important; } html body.is-detail #detailPage #detailChronologyToggle:not([hidden]) { width: auto; min-height: 42px; margin: 14px 0 0 0; padding: 0 20px; border: 0; border-radius: 999px; background: #282828; color: #fff; font: 650 13px/1 var(--font-reading, Arial, sans-serif); letter-spacing: 0; text-transform: none !important; transition: background-color .15s ease; } html body.is-detail #detailPage #detailChronologyToggle:hover { background: #393939; } html body.is-detail #detailPage #detailChronologyToggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 680px) { html body.is-detail #detailPage #detailChronology { width: 100%; margin-top: 18px; } html body.is-detail #detailPage #detailChronology header { padding: 0 0 12px; } html body.is-detail #detailPage #detailChronology h2 { font-size: 25px; } html body.is-detail #detailPage .detail-chronology-item { grid-template-columns: 44px 112px minmax(0, 1fr); gap: 9px; min-height: 88px; padding: 8px 6px; } html body.is-detail #detailPage .detail-chronology-index { width: 42px; height: 42px; border-radius: 12px; font-size: 21px; } html body.is-detail #detailPage .detail-chronology-poster { width: 112px; height: 63px; } html body.is-detail #detailPage .detail-chronology-copy { gap: 3px; } html body.is-detail #detailPage .detail-chronology-copy .detail-chronology-kind { font-size: 9px !important; } html body.is-detail #detailPage .detail-chronology-copy strong { font-size: 15px !important; } html body.is-detail #detailPage .detail-chronology-copy > span { font-size: 10px; } html body.is-detail #detailPage #detailChronologyToggle:not([hidden]) { margin-left: 0; } } /* Detail chronology and related titles share the same compact display typography. */ html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle) { color: #c6c7cb; font: 900 clamp(21px, 1.9vw, 27px)/1.25 "Unbounded", var(--font-heading), sans-serif; letter-spacing: .025em; text-transform: uppercase; } html body.is-detail #detailPage .detail-chronology-copy strong { color: #f5f5f5; font: 850 clamp(19px, 1.7vw, 24px)/1.25 "Unbounded", var(--font-heading), sans-serif !important; letter-spacing: -.025em !important; text-transform: uppercase !important; } html body.is-detail #detailPage .detail-chronology-index, html body.is-detail #detailPage .detail-chronology-item.is-current .detail-chronology-index { border: 0; border-radius: 0; background: transparent; box-shadow: none; } html body.is-detail #detailPage .detail-chronology-item.is-current .detail-chronology-index { color: #ffaf83; text-shadow: 0 0 7px rgba(255, 166, 110, .8), 0 0 20px rgba(255, 143, 88, .55); } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#openWatchPage, #watchTogetherButton) { font-family: "Unbounded", var(--font-heading), sans-serif !important; font-weight: 850 !important; letter-spacing: -.025em; text-transform: uppercase; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailCommentsPanel:not([hidden]) { box-sizing: border-box; width: min(100%, 900px); margin: 14px auto 36px; } html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailSimilar:not([hidden]) { box-sizing: border-box; width: min(100%, 900px); min-width: 0; margin: 26px 0 36px; padding: 0; } @media (max-width: 680px) { html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle) { font-size: 20px; } html body.is-detail #detailPage .detail-chronology-copy strong { font-size: 15px !important; -webkit-line-clamp: 3; } } /* The chronology labels use the saved text1 typography at a quieter scale. */ html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle).text1 { color: #c5c6ca; font-family: "Unbounded", sans-serif !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: .025em !important; text-transform: uppercase !important; } html body.is-detail #detailPage .detail-chronology-copy strong.text1 { font-family: "Unbounded", sans-serif !important; font-size: 20px !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: .025em !important; text-transform: uppercase !important; } html body.is-detail #detailPage .detail-chronology-item.is-current { box-shadow: none; } html body.is-detail #detailPage .detail-chronology-item.is-current .detail-chronology-index { text-shadow: 0 0 4px rgba(255, 166, 110, .56), 0 0 10px rgba(255, 143, 88, .28); } html body.is-detail:not(.is-watch) #detailPage .anime-detail-layout > #detailCommentsPanel:not([hidden]) { box-sizing: border-box; width: min(100%, 1500px); max-width: none; margin: 36px auto 48px; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form__editor { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } @media (max-width: 680px) { html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle).text1 { font-size: 14px !important; } html body.is-detail #detailPage .detail-chronology-copy strong.text1 { font-size: 14px !important; } } @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailSimilar { order: 7 !important; } } html body.is-detail #detailPage .detail-chronology-copy strong.text1 { font-size: 19px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip { width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 52px !important; font-size: 18px !important; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(160px, 11.4vw, 205px); gap: 10px !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .detail-similar-flow-arrow { display: flex; flex: 0 0 42px; align-self: stretch; align-items: center; justify-content: center; color: #ffad82; pointer-events: none; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .detail-similar-flow-arrow svg { display: block; width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 680px) { html body.is-detail #detailPage .detail-chronology-copy strong.text1 { font-size: 13px !important; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(124px, 34vw, 165px); gap: 7px !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .detail-similar-flow-arrow { flex-basis: 30px; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .detail-similar-flow-arrow svg { width: 28px; height: 28px; stroke-width: 7; } } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating button { width: clamp(38px, 3.8vw, 58px) !important; height: clamp(38px, 3.8vw, 58px) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #detailShikimoriRating:not([hidden]) { box-sizing: border-box; height: 52px; min-height: 52px; margin: 0; align-self: center; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(180px, calc(50% - 165px), 340px); gap: 10px !important; padding-bottom: 0 !important; scrollbar-width: none; -ms-overflow-style: none; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList::-webkit-scrollbar { display: none; width: 0; height: 0; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList .anime-card-caption strong { font-size: 17px !important; line-height: 1.2 !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList .anime-card-caption { right: 8px; bottom: 8px; left: 8px; } html:root body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .poster-card.anime-card-refresh > button.card-heart.card-library-button { width: 38px !important; height: 38px !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList .card-library-button svg { width: 22px; height: 22px; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow { position: relative; isolation: isolate; display: flex; flex: 0 0 150px; align-self: stretch; align-items: center; justify-content: center; width: 150px; min-width: 150px; padding: 0; border: 0; background: transparent; color: #d9dce0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { position: relative; z-index: 1; width: 144px; height: 70px; overflow: visible; fill: none; stroke: none; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .48)); transform: perspective(550px) rotateX(var(--similar-arrow-tilt-x, 0deg)) rotateY(var(--similar-arrow-tilt-y, 0deg)); transform-style: preserve-3d; transition: transform .2s ease-out, filter .2s ease-out; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow:hover svg, html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow:focus-visible svg { transform: perspective(550px) translateY(-4px) rotateX(var(--similar-arrow-tilt-x, 0deg)) rotateY(var(--similar-arrow-tilt-y, 0deg)); filter: drop-shadow(0 14px 15px rgba(0, 0, 0, .6)) brightness(1.08); } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow:focus-visible { outline: none; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow:focus-visible svg { outline: 2px solid #e5e7e9; outline-offset: 3px; border-radius: 14px; } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { transform: none !important; transition: none !important; } } @media (min-width: 681px) and (max-width: 1000px) { html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(170px, calc(50% - 125px), 300px); } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow { flex-basis: 110px; width: 110px; min-width: 110px; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: 106px; height: 52px; } } @media (max-width: 680px) { html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating { grid-template-columns: repeat(5, 42px); } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating button { width: 42px !important; height: 42px !important; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(165px, 48vw, 205px); gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow { flex-basis: 86px; width: 86px; min-width: 86px; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: 82px; height: 41px; } } html body.is-detail #detailPage #detailChronologyToggle:not([hidden]) { display: grid; place-items: center; box-sizing: border-box; width: 44px; min-width: 44px; height: 36px; min-height: 36px; margin: 8px 0 0 23px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #d5d5d8; } html body.is-detail #detailPage #detailChronologyToggle:not([hidden]):hover { background: transparent !important; } html body.is-detail #detailPage #detailChronologyToggle svg { width: 32px; height: 24px; stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; transform: translateY(0) rotate(var(--chronology-arrow-rotation, 0deg)); transition: transform .18s ease-out; } html body.is-detail #detailPage #detailChronologyToggle[aria-expanded="true"] { --chronology-arrow-rotation: 180deg; } html body.is-detail #detailPage #detailChronologyToggle:hover svg { transform: translateY(4px) rotate(var(--chronology-arrow-rotation, 0deg)); } html body.is-detail #detailPage #detailChronology { margin-bottom: 16px; } html body.is-detail:not(.is-watch) #detailPage #detailSimilar.detail-similar-wide { margin-top: 10px; } @media (max-width: 680px) { html body.is-detail #detailPage #detailChronologyToggle:not([hidden]) { margin-left: 6px; } } /* Keep the description, rating and metadata compact on anime detail pages. */ html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailRatingRow { margin: 14px 0 2px !important; } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating button { width: clamp(36px, 3.15vw, 48px) !important; height: clamp(36px, 3.15vw, 48px) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { margin: 15px 0 14px !important; column-gap: 8px !important; row-gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip { min-height: 44px !important; padding: 6px 13px 6px 11px !important; gap: 7px !important; font-size: clamp(11px, .92vw, 14px) !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip::before { width: 21px; height: 23px; font-size: 20px; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #detailShikimoriRating:not([hidden]) { height: 44px; min-height: 44px; padding: 5px 10px; gap: 6px; } html body.is-detail:not(.is-watch) #detailPage .detail-shikimori-rating__logo { width: 21px; height: 21px; } html body.is-detail:not(.is-watch) #detailPage #detailShikimoriScore { font-size: 15px; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; font-size: 16px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip::after { width: 62px; } @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailRatingRow { margin: 12px auto 2px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { margin: 13px auto 14px !important; } } @media (max-width: 680px) { html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating { grid-template-columns: repeat(5, 36px); gap: 0 2px; } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating button { width: 36px !important; height: 36px !important; } } /* A soft peach episode pill sits between the status and Shikimori score. */ html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileSeriesChip:not([hidden]) { position: relative; isolation: isolate; display: inline-flex !important; box-sizing: border-box; align-items: center; justify-content: center; gap: 2px; height: 44px !important; min-height: 44px !important; padding: 6px 9px !important; overflow: hidden; border: 1px solid rgba(255, 231, 213, .44) !important; border-radius: 18px !important; background: linear-gradient(145deg, #f0d2bd, #e8b59c 76%, #dfa78f) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 16px rgba(0, 0, 0, .16) !important; color: #3c2522 !important; font-family: "Unbounded", sans-serif !important; font-size: 14px !important; white-space: nowrap; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip > span { display: inline; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; line-height: 1 !important; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip svg { width: 19px; height: 19px; margin-right: 3px; flex: none; fill: none; stroke: #3c2522; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip svg .detail-episode-count__play { fill: #3c2522; stroke: none; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip strong { font-family: "Unbounded", sans-serif !important; font-size: 12px; font-weight: 800; line-height: 1; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip .detail-episode-count__slash { font-family: "Unbounded", sans-serif !important; color: #3c2522 !important; font-size: 12px; font-weight: 800; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip .detail-episode-count__label { margin-left: 0; font-family: "Unbounded", sans-serif !important; color: #3c2522 !important; font-size: 10px; font-weight: 800; letter-spacing: .015em; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip, html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #detailShikimoriRating:not([hidden]) { border-radius: 18px !important; } @media (max-width: 600px) { html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { column-gap: 6px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip { padding: 6px 10px 6px 9px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileSeriesChip:not([hidden]) { padding: 6px 7px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #detailShikimoriRating:not([hidden]) { padding: 5px 8px; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip .detail-episode-count__label { display: none; } } /* Detail-page comments: compact heading and a single-line composer. */ html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel > .episode-comments > header { gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsTitle { color: #c5c6ca !important; font-family: "Unbounded", sans-serif !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: .025em !important; text-transform: uppercase !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsCount { width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #c5c6ca !important; font-family: "Unbounded", sans-serif !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.15 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form { min-height: 0 !important; padding: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { box-sizing: border-box !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 96px !important; padding: 12px 16px !important; resize: none !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor footer { position: static !important; inset: auto !important; display: flex !important; flex: none !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentHint { display: none !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle { opacity: 1 !important; transform: none !important; pointer-events: auto !important; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle svg { display: block !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle .episode-comment-spoiler-label { display: none !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-submit { display: inline-flex !important; flex: none !important; width: auto !important; min-width: 118px !important; height: 40px !important; margin: 0 !important; padding: 0 14px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comments-list { border-top: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comments-list > .episode-comment { border-top: 0 !important; border-bottom: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-replies, html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment.is-reply { border-top: 0 !important; border-bottom: 0 !important; } @media (max-width: 620px) { html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsTitle, html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsCount { font-size: 12px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor { gap: 6px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor footer { gap: 6px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle { flex-basis: 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-submit { min-width: 0 !important; height: 36px !important; padding: 0 10px !important; font-size: 10px !important; } } @media (max-width: 360px) { html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { padding-inline: 10px !important; font-size: 12px !important; } } /* Match composer controls to the input and ease the poster CTA typography. */ html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle { flex-basis: 48px !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-submit { height: 48px !important; min-height: 48px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#openWatchPage, #watchTogetherButton) { box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; padding-block: 0 !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .035em !important; -webkit-text-stroke: 0 !important; } @media (max-width: 620px) { html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; } } /* Let longer comments expand the editor before internal scrolling begins. */ html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor { align-items: flex-end !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { field-sizing: content !important; height: auto !important; min-height: 48px !important; max-height: 260px !important; overflow-y: auto !important; scrollbar-width: none; -ms-overflow-style: none; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Match the three poster tools to the action pills below the player. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #favoriteButton, #episodeAlertButton) { display: inline-flex !important; flex: 0 0 44px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.065) !important; box-shadow: none !important; color: rgba(255,255,255,.92) !important; opacity: 1 !important; transform: none !important; -webkit-text-stroke: 0 !important; text-transform: none !important; -webkit-backdrop-filter: blur(12px) saturate(115%) !important; backdrop-filter: blur(12px) saturate(115%) !important; transition: background-color .16s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton { order: 1; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton { order: 2; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton { order: 3; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { order: 4; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[hidden] { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #favoriteButton, #episodeAlertButton) svg { display: block !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; fill: currentColor !important; stroke: none !important; transform: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #favoriteButton, #episodeAlertButton):is(:hover, :focus-visible) { border: 0 !important; outline: 0 !important; background: rgba(255,255,255,.105) !important; box-shadow: none !important; color: rgba(255,255,255,.92) !important; transform: none !important; animation: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #favoriteButton, #episodeAlertButton):active { background: rgba(255,255,255,.135) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton.is-active, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] { border: 0 !important; background: rgba(255,255,255,.065) !important; box-shadow: none !important; color: rgba(255,255,255,.92) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #favoriteButton.is-active svg, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] svg { color: #ff9b6b !important; fill: #ff9b6b !important; } /* Use the same quiet vote pill as the controls below the player. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { flex: 0 0 119px !important; width: 119px !important; min-width: 119px !important; max-width: 119px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; box-shadow: none !important; overflow: hidden !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes button.detail-vote-button { height: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; transform: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes button.detail-vote-button:is(:hover, :focus-visible) { background: rgba(255,255,255,.22) !important; transform: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .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-action-row .detail-votes .detail-votes__divider { background: rgba(255,255,255,.14) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes button.detail-vote-button::after { content: none !important; display: none !important; } /* Without an alert action, the remaining tools occupy the poster width. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) { flex-wrap: nowrap !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) :is(#shareButton, #favoriteButton) { flex: 1 1 0 !important; width: auto !important; min-width: 44px !important; max-width: none !important; } @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { flex-basis: 108px !important; width: 108px !important; min-width: 108px !important; max-width: 108px !important; height: 36px !important; min-height: 36px !important; } } /* Full-width library button, followed by share, alert and votes in one row. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { grid-column: 1 / -1 !important; grid-row: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 14px !important; background: rgba(255,255,255,.065) !important; color: #fff !important; box-shadow: none !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .015em !important; text-transform: uppercase !important; -webkit-text-stroke: 0 !important; cursor: pointer !important; backdrop-filter: blur(12px) saturate(115%) !important; transition: background-color .16s ease, border-color .16s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton:is(:hover, :focus-visible) { background: rgba(255,255,255,.105) !important; border-color: rgba(255,255,255,.4) !important; transform: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton svg { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; fill: currentColor !important; stroke: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton.is-active svg { color: #ff9b6b !important; fill: #ff9b6b !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row { grid-row: 4 !important; flex-wrap: nowrap !important; justify-content: stretch !important; width: 100% !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) #shareButton { flex: 1 1 0 !important; gap: 9px !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 10px !important; font: 700 12px/1 Manrope, sans-serif !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton span { display: inline !important; color: inherit !important; white-space: nowrap !important; text-transform: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton::after { content: none !important; display: none !important; } /* The smaller poster controls follow the shared-watch button's matte finish. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { border: 1px solid rgba(255,255,255,.38) !important; border-radius: 12px !important; background: rgba(22,23,28,.54) !important; color: #fff !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton:is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton):is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes:is(:hover, :focus-within) { border-color: rgba(255,255,255,.68) !important; background: rgba(255,255,255,.22) !important; color: #fff !important; transform: translateY(-2px) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { border-radius: 13px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row { align-items: center !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton { order: 1 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; gap: 7px !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton span { font: inherit !important; text-transform: inherit !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { order: 2 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes button.detail-vote-button:is(:hover, :focus-visible) { background: rgba(255,255,255,.10) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton { order: 3 !important; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] { border-color: rgba(255,255,255,.38) !important; background: rgba(22,23,28,.54) !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 #episodeAlertButton[aria-pressed="true"]:is(:hover, :focus-visible) { border-color: rgba(255,255,255,.68) !important; background: rgba(255,255,255,.22) !important; } @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { font-size: 10.5px !important; } } /* Poster controls: two compact rows beneath the primary watch button. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage { grid-column: 1 / -1 !important; grid-row: 1 !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { grid-row: 2 !important; grid-column: auto !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; color: #fff !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton { grid-column: 1 !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { grid-column: 2 !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton svg, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton.is-active svg, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton svg { color: #fff !important; fill: currentColor !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row { grid-column: 1 / -1 !important; grid-row: 3 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; gap: 10px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton:not([hidden])) #shareButton { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { grid-column: 2 !important; grid-row: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; backdrop-filter: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes__divider { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeLikeButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeDislikeButton { flex: none !important; width: 100% !important; min-width: 0 !important; height: 42px !important; border: 1px solid rgba(255,255,255,.38) !important; border-radius: 12px !important; background: rgba(22,23,28,.54) !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; color: #fff !important; transition: transform .18s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#openWatchPage, #watchTogetherButton, #favoriteButton, #shareButton), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button { transition: transform .18s ease !important; animation: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#openWatchPage, #watchTogetherButton, #favoriteButton, #shareButton):is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:is(:hover, :focus-visible) { transform: translateY(-2px) !important; animation: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:is(:hover, :focus-visible) { background: #ff9569 !important; border-color: #ff9569 !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#watchTogetherButton, #favoriteButton, #shareButton):is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:is(:hover, :focus-visible) { background: rgba(22,23,28,.54) !important; border-color: rgba(255,255,255,.38) !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-votes button.detail-vote-button:is(:hover, :focus-visible) svg, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button.is-active svg { color: #ff9b6b !important; fill: currentColor !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton:is(:hover, :focus-visible) { border-color: rgba(255,255,255,.38) !important; background: rgba(22,23,28,.54) !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; transform: none !important; animation: none !important; transition: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton::after { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton:not([aria-pressed="true"]) svg { color: #fff !important; fill: currentColor !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"] svg { color: #ff9b6b !important; fill: currentColor !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled):is(:hover, :focus-visible) { background: #ff9569 !important; border-color: #ff9569 !important; color: #fff !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage .watch-button__play { color: #fff !important; fill: currentColor !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #openWatchPage:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-2px) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes:is(:hover, :focus-within) { border: 0 !important; background: none !important; box-shadow: none !important; 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: #fff !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 8px !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; white-space: nowrap !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[hidden] { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton span { display: inline !important; color: #fff !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"]:is(:hover, :focus-visible) { border-color: rgba(255,255,255,.38) !important; background: rgba(22,23,28,.54) !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; transform: none !important; } /* Refine the poster actions without changing their SVGs or button finish. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton { gap: 6px !important; padding-inline: 7px !important; font-size: 9.5px !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { gap: 6px !important; padding-inline: 7px !important; font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#watchTogetherButton, #favoriteButton) span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton) { gap: 8px !important; font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .015em !important; text-transform: uppercase !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton) svg { flex: 0 0 21px !important; width: 21px !important; height: 21px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton:is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton:is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"]:is(:hover, :focus-visible) { background: rgba(22,23,28,.54) !important; border-color: rgba(255,255,255,.38) !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; transform: translateY(-2px) !important; animation: none !important; transition: transform .18s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton { transition: transform .18s ease !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button { gap: 4px !important; font: 600 11px/1 Manrope, sans-serif !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button svg { flex: none !important; width: 17px !important; height: 17px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeLikeButton:is(:hover, :focus-visible) #animeLikeCount, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeLikeButton.is-active #animeLikeCount { color: #ff9b6b !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileSeriesChip.is-finished .detail-episode-count__slash, html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileSeriesChip.is-finished #detailEpisodesTotal { display: none !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip, html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > span.age-chip:hover { animation: none !important; transform: none !important; transition: none !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton { gap: 4px !important; padding-inline: 4px !important; font-size: 10px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #watchTogetherButton svg { width: 16px !important; height: 16px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions #favoriteButton { gap: 4px !important; padding-inline: 4px !important; font-size: 10px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton { font-family: "Unbounded", var(--font-heading), sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .015em !important; text-transform: uppercase !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) #shareButton { font: 800 10px/1 "Unbounded", var(--font-heading), sans-serif !important; letter-spacing: .015em !important; text-transform: uppercase !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) #shareButton:is(:hover, :focus-visible) { border: 1px solid rgba(255,255,255,.38) !important; background: rgba(22,23,28,.54) !important; transform: translateY(-2px) !important; } /* Compact secondary poster controls; the primary watch button keeps its size. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions { gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#watchTogetherButton, #favoriteButton) { width: 100% !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; justify-self: center !important; border-radius: 16px !important; font-size: 9.5px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions :is(#watchTogetherButton, #favoriteButton) svg { width: 15px !important; height: 15px !important; flex-basis: 15px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row { gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton) { width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; justify-self: center !important; border-radius: 15px !important; gap: 6px !important; font-size: 9px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) #shareButton { font-size: 9px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton span { font-size: 9px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row :is(#shareButton, #episodeAlertButton) svg { width: 17px !important; height: 17px !important; flex-basis: 17px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row .detail-votes { width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; justify-self: center !important; gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button { height: 34px !important; min-height: 34px !important; max-height: 34px !important; border-radius: 15px !important; font-size: 10px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button svg { width: 15px !important; height: 15px !important; } /* Two smaller posters and two longer metal arrows fit across the recommendations rail. */ html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(165px, 22%, 300px); --similar-arrow-width: calc((100% - var(--similar-card-width) - var(--similar-card-width) - 30px) / 2); overflow-anchor: none; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow { flex: 0 0 var(--similar-arrow-width); width: var(--similar-arrow-width); min-width: var(--similar-arrow-width); } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: min(calc(100% - 28px), 320px); height: auto; aspect-ratio: 198 / 94; } @media (max-width: 680px) { html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(140px, 36vw, 185px); --similar-arrow-width: clamp(92px, 25vw, 125px); } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: calc(100% - 12px); } } /* The poster stays within the content beside it; comments follow immediately after. */ @media (min-width: 761px) { html body.is-detail:not(.is-watch) #detailPage .anime-detail-main { min-height: 0 !important; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide:not([hidden]) { margin-bottom: 0 !important; } } /* Recommendations tilt toward the pointer, slightly more than their arrows. */ html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .poster-card.anime-card-refresh { transform: perspective(760px) rotateX(var(--similar-card-tilt-x, 0deg)) rotateY(var(--similar-card-tilt-y, 0deg)); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .2s ease-out; will-change: transform; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .poster-card.anime-card-refresh:hover { transform: perspective(760px) translateY(-3px) rotateX(var(--similar-card-tilt-x, 0deg)) rotateY(var(--similar-card-tilt-y, 0deg)); } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .poster-card.anime-card-refresh, html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > .poster-card.anime-card-refresh:hover { transform: none; transition: none; } } /* Match the composer controls and wrap long posted comments without horizontal overflow. */ html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { border-radius: 14px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form #episodeCommentSpoilerToggle { border-radius: 14px !important; } html body #detailPage #detailCommentsPanel .episode-comment__content, html body.is-watch .episode-comment__content { min-width: 0; } html body #detailPage #detailCommentsPanel .episode-comment__body p, html body.is-watch .episode-comment__body p { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* Match the share button to the room button's column, including completed titles. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #shareButton, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row:has(#episodeAlertButton[hidden]) #shareButton { width: 100% !important; justify-self: stretch !important; } /* The notification pill keeps its outline while lifting on hover. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton:is(:hover, :focus-visible), html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row #episodeAlertButton[aria-pressed="true"]:is(:hover, :focus-visible) { border: 1px solid rgba(255,255,255,.48) !important; background: rgba(22,23,28,.54) !important; transform: translateY(-2px) !important; } /* The main poster follows the pointer without blurring its artwork. */ html body.is-detail:not(.is-watch) #detailPage #profilePoster { transform: perspective(950px) rotateX(var(--detail-poster-tilt-x, 0deg)) rotateY(var(--detail-poster-tilt-y, 0deg)); transform-style: preserve-3d; transform-origin: center; transition: transform .22s ease-out, box-shadow .22s ease-out; will-change: transform; } html body.is-detail:not(.is-watch) #detailPage #profilePoster:hover { transform: perspective(950px) translateY(-2px) rotateX(var(--detail-poster-tilt-x, 0deg)) rotateY(var(--detail-poster-tilt-y, 0deg)); } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #profilePoster, html body.is-detail:not(.is-watch) #detailPage #profilePoster:hover { transform: none; transition: none; } } /* Keep poster size while fitting three recommendations and three arrows. */ @media (min-width: 1101px) { html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-arrow-width: calc((100% - var(--similar-card-width) - var(--similar-card-width) - var(--similar-card-width) - 50px) / 3); } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: min(calc(100% - 12px), 320px); } } /* Restore a clear break between metadata and chronology on desktop. */ html body.is-detail #detailPage .anime-info > #detailChronology { margin-top: 22px !important; } html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle).text1 { font-size: 16px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsTitle, html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsCount { font-size: 12px !important; } /* Only the mobile poster contracts as it leaves the viewport. */ @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage #profilePoster { opacity: var(--detail-poster-scroll-opacity, 1); transform: perspective(950px) rotateX(var(--detail-poster-tilt-x, 0deg)) rotateY(var(--detail-poster-tilt-y, 0deg)) scale(var(--detail-poster-scroll-scale, 1)); transform-origin: center top; transition: transform .16s ease-out, opacity .16s ease-out, box-shadow .22s ease-out; } html body.is-detail:not(.is-watch) #detailPage #profilePoster:hover { transform: perspective(950px) translateY(-2px) rotateX(var(--detail-poster-tilt-x, 0deg)) rotateY(var(--detail-poster-tilt-y, 0deg)) scale(var(--detail-poster-scroll-scale, 1)); } html body.is-detail:not(.is-watch) #detailPage #profilePoster.is-scroll-hidden { pointer-events: none; } } @media (max-width: 760px) { /* Carry the hero art behind the mobile title and fade it at both sides. */ html body.is-detail:not(.is-watch) #detailPage > .detail-banner { height: min(1120px, 145vh) !important; mask-image: radial-gradient(ellipse 58% 88% at 50% 27%, #000 42%, rgba(0,0,0,.82) 62%, transparent 94%) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-column { overflow-anchor: none; } /* The separator between title and description tapers at both ends. */ html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription::before { background: linear-gradient(90deg, transparent, #ff7e37 22%, #ffc170 50%, #ff7e37 78%, transparent) !important; background-size: 100% 100% !important; clip-path: polygon(0 50%, 18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) !important; animation: none !important; } html body.is-detail #detailPage :is(#detailChronologyTitle, #detailSimilarTitle).text1 { font-size: 16px !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips > #profileStatusChip { font-size: 13px !important; } html body.is-detail #detailPage .detail-chronology-copy .detail-chronology-kind { font-size: 10.5px !important; } html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip strong, html body.is-detail:not(.is-watch) #detailPage #profileSeriesChip .detail-episode-count__label { font-size: 12px !important; line-height: 1 !important; } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating { display: grid !important; grid-template-columns: repeat(10, minmax(0, 1fr)) !important; justify-content: stretch; width: 100%; gap: 2px !important; } html body.is-detail:not(.is-watch) #detailPage #detailRatingRow #detailPersonalRating button { flex: none !important; width: 100% !important; height: auto !important; aspect-ratio: 1; } html body.is-detail:not(.is-watch) #detailPage .detail-similar-wide #detailSimilarList { --similar-card-width: clamp(90px, 27vw, 140px); --similar-arrow-width: calc((100% - var(--similar-card-width) - var(--similar-card-width) - 24px) / 2); gap: 8px !important; } html body.is-detail:not(.is-watch) #detailPage #detailSimilarList > button.detail-similar-flow-arrow svg { width: calc(100% - 8px); } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsTitle, html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel #episodeCommentsCount { font-size: 13px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor { box-sizing: border-box !important; width: 100% !important; gap: 6px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; padding-right: 20px !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor footer { flex: 0 0 auto !important; max-width: calc(100% - 80px) !important; } } @media (prefers-reduced-motion: reduce) { html body.is-detail:not(.is-watch) #detailPage #profilePoster { opacity: 1 !important; } } /* Mobile detail spacing and a comment field that ends before its controls. */ @media (max-width: 760px) { html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailRatingRow { margin: 26px auto 0 !important; } html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { margin: 26px auto 48px !important; } html body.is-detail #detailPage .anime-info > #detailChronology { margin-top: 0 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form { border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: end !important; column-gap: 6px !important; width: 100% !important; min-width: 0 !important; background: transparent !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor textarea { grid-column: 1 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; padding: 12px 16px !important; border: 1px solid rgba(255,255,255,.055) !important; border-radius: 14px !important; background: #242426 !important; } html body.is-detail:not(.is-watch) #detailPage #detailCommentsPanel .episode-comment-form .episode-comment-form__editor footer { grid-column: 2 !important; position: static !important; width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } } /* Poster controls match the watch view's tighter spacing. */ html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions { gap: 6px !important; margin-top: 7px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-action-row, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes { gap: 6px !important; } /* The watch view uses the same poster controls and comment composer as the detail view. */ html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .poster-actions.detail-poster-actions #openWatchPage { height: 44px !important; min-height: 44px !important; max-height: 44px !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:is(:hover, :focus-visible) { border-color: rgba(255,255,255,.38) !important; background: rgba(22,23,28,.54) !important; box-shadow: 0 5px 14px rgba(0,0,0,.18) !important; color: #fff !important; transform: translateY(-2px) !important; } html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes button.detail-vote-button:is(:hover, :focus-visible) svg, html body.is-detail:not(.is-watch) #detailPage .poster-actions.detail-poster-actions .detail-votes #animeLikeButton:is(:hover, :focus-visible) #animeLikeCount { color: #fff !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage > #episodeComments { box-sizing: border-box; width: min(100%, 1500px) !important; max-width: 1500px !important; margin: 36px auto 48px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsTitle, html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsCount { font-size: 12px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form { border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor { align-items: flex-end !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor textarea { field-sizing: content !important; height: auto !important; min-height: 48px !important; max-height: 260px !important; overflow-y: auto !important; scrollbar-width: none; -ms-overflow-style: none; border-radius: 14px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor textarea::-webkit-scrollbar { display: none; width: 0; height: 0; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentSpoilerToggle { flex-basis: 48px !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; border-radius: 14px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-submit { height: 48px !important; min-height: 48px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeComments .episode-comment__body p, html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeComments .episode-comment__spoiler-body p { min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 760px) { html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsTitle, html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsCount { font-size: 13px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: end !important; column-gap: 6px !important; width: 100% !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor textarea { grid-column: 1 !important; box-sizing: border-box !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; padding: 12px 16px !important; border: 1px solid rgba(255,255,255,.055) !important; background: #242426 !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor footer { grid-column: 2 !important; position: static !important; width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } } @media (max-width: 620px) { html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsTitle, html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentsCount { font-size: 12px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage #episodeCommentSpoilerToggle { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; } html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-submit { min-width: 0 !important; padding: 0 10px !important; font-size: 10px !important; } } @media (max-width: 360px) { html body.is-watch:not(.is-together) #detailPage #watchPlayerPage .episode-comment-form__editor textarea { padding-inline: 10px !important; font-size: 12px !important; } } /* Shared Premium badge: a code-drawn, three-point crown. */ html body .premium-code-badge { position: relative; overflow: visible !important; } html body .premium-code-badge::after { content: "ДОСТУПНО С ПРЕМИУМ"; position: absolute; z-index: 100; left: 50%; bottom: calc(100% + 6px); padding: 5px 8px; border-radius: 7px; background: #fff; color: #17171b !important; -webkit-text-fill-color: #17171b !important; font: 900 10px/1.15 "Unbounded", sans-serif !important; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none !important; transform: translateX(-50%); translate: 0 6px; transition: opacity .2s ease, translate .2s ease; } html body .premium-code-badge:is(:hover,:focus-visible)::after { opacity: 1; translate: 0 0; } html body .premium-code-badge { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 34px !important; min-width: 34px !important; height: 20px !important; min-height: 20px !important; padding: 1px 5px !important; border: 0 !important; border-radius: 999px !important; background: #ff946f !important; color: #fff !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; filter: none !important; text-decoration: none !important; vertical-align: middle; cursor: pointer; pointer-events: inherit !important; transition: background-color .16s ease, color .16s ease; } html body .premium-code-badge:is(:hover,:focus-visible) { background: #fff !important; color: #ff946f !important; } html body .premium-code-badge:focus-visible { outline: 2px solid #ff946f; outline-offset: 3px; } html body .premium-code-badge svg, html body #animeHubPlayer .premium-code-badge svg { display: block !important; flex: none !important; width: 22px !important; height: 16px !important; padding: 0 !important; color: inherit !important; fill: currentColor !important; stroke: none !important; pointer-events: none !important; } html body .premium-code-badge svg path, html body #animeHubPlayer .premium-code-badge svg path { fill: currentColor !important; stroke: none !important; pointer-events: none !important; } html body #animeHubPlayer .ah-player-premium-badge { margin-left: auto !important; } html body.is-watch #animeHubPlayer .ah-player-premium-badge + .ah-player-upscale-badge.up-badge.up-44 { margin-left: 0 !important; } @media(max-width:820px) { html body #animeHubPlayer .ah-player-premium-badge { width: 29px !important; min-width: 29px !important; height: 16px !important; min-height: 16px !important; padding: 1px 4px !important; } html body #animeHubPlayer .ah-player-premium-badge svg { width: 18px !important; height: 13px !important; } } /* Keep the badge gap compact, and override the quality row's white icon rule. */ html body.is-watch #detailPage #animeHubPlayer :is(#ahPlayerQualityMenu, #ahPlayerQualityOptions) > button:has(> .premium-code-badge) { column-gap: 4px !important; } html body .premium-code-badge:is(:hover,:focus-visible) svg, html body .premium-code-badge:is(:hover,:focus-visible) svg path, html body.is-watch #detailPage #animeHubPlayer .premium-code-badge:is(:hover,:focus-visible) svg, html body.is-watch #detailPage #animeHubPlayer .premium-code-badge:is(:hover,:focus-visible) svg path { color: #ff946f !important; fill: #ff946f !important; } html body.is-watch #detailPage #animeHubPlayer :is(#ahPlayerQualityMenu, #ahPlayerQualityOptions) > button > .premium-code-badge + .ah-player-upscale-badge.up-badge.up-44 { margin-left: 0 !important; margin-right: 0 !important; } /* The first quality row has no space above it inside the scrollable list. */ html body.is-watch #detailPage #animeHubPlayer :is(#ahPlayerQualityMenu, #ahPlayerQualityOptions) > button:first-child .premium-code-badge::after { bottom: auto; top: calc(100% + 6px); translate: 0 -6px; } html body.is-watch #detailPage #animeHubPlayer :is(#ahPlayerQualityMenu, #ahPlayerQualityOptions) > button:first-child .premium-code-badge:is(:hover,:focus-visible)::after { translate: 0 0; } /* PREMIUM_UNIVERSE_20261102: scoped presentation, existing purchase flow. */ html body #premiumPage.premium-page--universe { --premium-peach:#ff956f; --premium-surface:#19191b; --premium-muted:#a6a5ab; width:100%!important;max-width:1460px!important;margin:0 auto!important; padding:48px clamp(18px,4vw,56px) 100px!important;background:transparent!important; color:#fff;font-family:Manrope,sans-serif;box-sizing:border-box; } html body #premiumPage .text1 {font-family:"Unbounded",sans-serif!important;font-weight:900!important;letter-spacing:.025em!important;text-transform:uppercase!important;} html body #premiumPage .premium-universe-heading {text-align:center;padding:0 0 56px;} html body #premiumPage .premium-universe-eyebrow {display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 24px;} html body #premiumPage .premium-universe-eyebrow>.text1 {font-size:10px!important;color:#d0ced3;letter-spacing:.13em!important;} html body #premiumPage .premium-universe-heading h1 {max-width:1080px;margin:0 auto!important;font-size:clamp(28px,3.15vw,48px)!important;line-height:1.2!important;color:#fff!important;letter-spacing:-.025em!important;} html body #premiumPage .premium-universe-heading h1>span {color:var(--premium-peach);} html body #premiumPage .premium-universe-lead {margin:24px auto 28px!important;color:var(--premium-muted);font-size:15px!important;line-height:1.75!important;max-width:700px;} html body #premiumPage .premium-universe-highlights {display:flex;justify-content:center;flex-wrap:wrap;gap:8px;overflow:visible;} html body #premiumPage .premium-universe-highlights>a {position:relative;display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;border-radius:999px;background:#242426;color:#fff;text-decoration:none;transition:background .18s,color .18s;} html body #premiumPage .premium-universe-highlights>a>.text1 {font-size:9px!important;color:inherit;} html body #premiumPage .premium-universe-highlights>a:is(:hover,:focus-visible) {background:#fff;color:#f48661;} html body #premiumPage .premium-hover-hint {position:absolute;z-index:15;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,6px);padding:6px 9px;border-radius:7px;background:#fff;color:#17171b;font:900 9px/1.3 "Unbounded",sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;} html body #premiumPage .premium-universe-highlights>a:is(:hover,:focus-visible) .premium-hover-hint {opacity:1;visibility:visible;transform:translate(-50%,0);} html body #premiumPage .premium-hero--plans {max-width:none!important;margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:left!important;} html body #premiumPage .premium-section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 24px;} html body #premiumPage .premium-section-kicker {display:block;color:var(--premium-muted);font-size:8px!important;line-height:1.5;letter-spacing:.1em!important;margin-bottom:10px;} html body #premiumPage .premium-section-heading h2 {margin:0!important;font-size:clamp(18px,1.9vw,26px)!important;line-height:1.3!important;color:#fff!important;} html body #premiumPage .premium-section-heading>p {margin:0!important;color:var(--premium-muted);font-size:12px!important;line-height:1.6;text-align:right;} html body #premiumPage .premium-plans {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;} html body #premiumPage .premium-plan-card {display:flex!important;flex-direction:column;position:relative;min-height:0!important;padding:25px 22px 24px!important;border:1px solid #ffffff09!important;border-radius:24px!important;background:var(--premium-surface)!important;box-shadow:none!important;overflow:visible!important;transition:background .2s,border-color .2s,transform .2s;} html body #premiumPage .premium-plan-card--best {background:#29211f!important;border-color:#ff956f70!important;} html body #premiumPage .premium-plan-kicker {display:block;min-height:20px;margin:0 0 12px;color:#aaa5a3;font-size:7px!important;line-height:1.45;letter-spacing:.06em!important;} html body #premiumPage .premium-plan-card--best .premium-plan-kicker {color:#f5bba5;padding-right:50px;} html body #premiumPage .premium-plan-badge {top:18px!important;right:16px!important;padding:6px 8px!important;border-radius:999px!important;background:var(--premium-peach)!important;color:#fff!important;font-size:7px!important;line-height:1!important;border:0!important;} html body #premiumPage .premium-plan-card h2 {margin:0 0 7px!important;font-size:21px!important;line-height:1.3!important;letter-spacing:0!important;color:#fff!important;} html body #premiumPage .premium-plan-card>p {margin:0 0 24px!important;color:#b0acb0!important;font-size:11px!important;line-height:1.5;} html body #premiumPage .premium-plan-price {display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important;min-height:106px;margin:0 0 14px!important;} html body #premiumPage .premium-plan-price>div {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;order:2;} html body #premiumPage .premium-plan-price>div:nth-child(2) {order:1;margin-bottom:4px;} html body #premiumPage .premium-plan-price strong {font:700 12px/1.4 Manrope,sans-serif!important;letter-spacing:0!important;color:#b0acb0!important;white-space:nowrap;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {font:900 clamp(25px,2.35vw,36px)/1.15 "Unbounded",sans-serif!important;letter-spacing:-.04em!important;color:#fff!important;} html body #premiumPage .premium-old-price {font:500 13px/1.4 Manrope,sans-serif!important;color:#8d8588!important;white-space:nowrap;} html body #premiumPage .premium-plan-price .premium-plan-rub {margin:0!important;} html body #premiumPage .premium-plan-meta {display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:42px;margin:0 0 16px;font-size:11px;color:#b8b3b3;} html body #premiumPage [data-plan-saving] {padding:5px 7px;background:#ff956f1a;border-radius:999px;font:800 8px/1.2 "Unbounded",sans-serif;color:#ffb495;} html body #premiumPage [data-plan-saving][hidden] {display:none!important;} html body #premiumPage .premium-plan-card ul {display:grid!important;gap:10px!important;margin:22px 0 0!important;padding:18px 0 0!important;border-top:1px solid #ffffff0d!important;list-style:none!important;color:#c3bec2!important;font-size:11px!important;line-height:1.5!important;} html body #premiumPage .premium-plan-card li::before {content:none!important;display:none!important;} html body #premiumPage .premium-purchase-note {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:24px 0 0;color:var(--premium-muted);} html body #premiumPage .premium-purchase-note>span {padding:6px 9px;border-radius:999px;background:#1a1a1c;font:800 8px/1.2 "Unbounded",sans-serif;color:#c6c2c7;} html body #premiumPage .premium-purchase-note>p {width:100%;margin:2px 0 0;text-align:center;font-size:11px;line-height:1.6;} html body #premiumPage .premium-trial-row {display:flex!important;justify-content:center;margin:22px 0 0!important;} html body #premiumPage .premium-trial-row:has(button[hidden]) {display:none!important;} html body #premiumPage .premium-trial-button {padding:14px 22px!important;min-height:44px!important;border:1px solid #ffffff29!important;border-radius:999px!important;background:transparent!important;color:#eee!important;font-size:9px!important;cursor:pointer;transition:background .18s,color .18s;} html body #premiumPage .premium-trial-button:is(:hover,:focus-visible) {background:#fff!important;color:#17171b!important;} html body #premiumPage .premium-current-status {margin:22px auto 0!important;text-align:center;color:var(--premium-peach);font-size:12px;line-height:1.6;} html body #premiumPage .premium-current-status:empty {display:none!important;} html body #premiumPage .premium-benefits {max-width:none!important;margin:64px 0 0!important;padding:0!important;display:block!important;background:none!important;} html body #premiumPage .premium-benefit-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} html body #premiumPage .premium-benefits article.premium-benefit-card {display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;grid-template-columns:none!important;gap:0!important;min-height:235px;padding:28px!important;border:0!important;border-radius:24px!important;background:#19191b!important;transition:background .2s;} html body #premiumPage .premium-benefits article.premium-benefit-card:hover {background:#222224!important;} html body #premiumPage .premium-benefit-card:first-child,html body #premiumPage .premium-benefit-card:last-child {grid-column:span 2;} html body #premiumPage .premium-benefit-tags {display:flex;gap:6px;margin-bottom:18px;} html body #premiumPage .premium-benefit-tags>span {background:var(--premium-peach);color:#fff;padding:5px 9px;border-radius:999px;font-size:10px!important;} html body #premiumPage .premium-benefit-index {color:#9e999f;font-size:8px!important;margin-bottom:22px;} html body #premiumPage .premium-benefit-card h3 {margin:0 0 16px!important;color:#fff!important;font-size:clamp(19px,1.8vw,27px)!important;line-height:1.25!important;letter-spacing:0!important;} html body #premiumPage .premium-benefit-card p {grid-column:auto!important;max-width:520px;margin:0!important;color:#b6b0b8!important;font-size:13px!important;line-height:1.75!important;} html body #premiumPage .premium-benefit-card small {margin-top:14px;color:#8b858f;font-size:10px;line-height:1.6;} html body #premiumPage .premium-questions {margin:58px 0 0;max-width:100%;} html body #premiumPage .premium-questions>h2 {margin:0 0 22px;font-size:22px!important;} html body #premiumPage .premium-questions details {margin:0 0 8px;padding:0 22px;background:#19191b;border-radius:18px;} html body #premiumPage .premium-questions summary {padding:21px 0;cursor:pointer;font-size:10px!important;line-height:1.5;list-style:none;transition:color .18s;} html body #premiumPage .premium-questions summary::-webkit-details-marker {display:none;} html body #premiumPage .premium-questions summary::after {content:"+";float:right;margin-left:14px;color:var(--premium-peach);font:500 18px/1 Manrope,sans-serif;} html body #premiumPage .premium-questions details[open] summary::after {content:"−";} html body #premiumPage .premium-questions summary:is(:hover,:focus-visible) {color:var(--premium-peach);} html body #premiumPage .premium-questions details>p {margin:0;padding:0 0 22px;max-width:900px;font-size:13px;line-height:1.8;color:#b6b0b8;} html body #premiumPage :is(a,button,summary):focus-visible {outline:2px solid var(--premium-peach);outline-offset:4px;} @media(max-width:1160px){ html body #premiumPage .premium-plans {grid-template-columns:repeat(2,minmax(0,1fr))!important;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {font-size:34px!important;} html body #premiumPage .premium-benefit-grid {grid-template-columns:repeat(2,minmax(0,1fr));} html body #premiumPage .premium-benefit-card:first-child,html body #premiumPage .premium-benefit-card:last-child {grid-column:auto;} } @media(max-width:640px){ html body #premiumPage.premium-page--universe {padding:30px 16px 100px!important;} html body #premiumPage .premium-universe-heading {padding-bottom:40px;} html body #premiumPage .premium-universe-heading h1 {font-size:clamp(25px,6.2vw,36px)!important;line-height:1.25!important;} html body #premiumPage .premium-desktop-break {display:none;} html body #premiumPage .premium-universe-eyebrow {margin-bottom:20px;} html body #premiumPage .premium-universe-lead {margin:18px auto 22px!important;font-size:12px!important;line-height:1.8!important;} html body #premiumPage .premium-universe-lead br {display:none;} html body #premiumPage .premium-universe-highlights {gap:6px;} html body #premiumPage .premium-universe-highlights>a {padding:10px 11px;} html body #premiumPage .premium-universe-highlights>a>.text1 {font-size:7px!important;} html body #premiumPage .premium-hover-hint {max-width:230px;white-space:normal;width:max-content;text-align:center;font-size:8px;} html body #premiumPage .premium-section-heading {align-items:flex-start;gap:12px;margin-bottom:18px;} html body #premiumPage .premium-section-heading>p {display:none;} html body #premiumPage .premium-section-heading h2 {font-size:19px!important;} html body #premiumPage .premium-section-kicker {font-size:7px!important;max-width:260px;} html body #premiumPage .premium-plans {grid-template-columns:1fr!important;gap:12px!important;} html body #premiumPage .premium-plan-card {padding:24px!important;border-radius:22px!important;} html body #premiumPage .premium-plan-card h2 {font-size:23px!important;} html body #premiumPage .premium-plan-kicker {font-size:8px!important;} html body #premiumPage .premium-plan-price {min-height:100px;} html body #premiumPage .premium-plan-card ul {font-size:12px!important;} html body #premiumPage .premium-benefits {margin-top:44px!important;} html body #premiumPage .premium-benefit-grid {grid-template-columns:1fr;gap:12px;} html body #premiumPage .premium-benefits article.premium-benefit-card {min-height:0;padding:26px!important;} html body #premiumPage .premium-benefit-card h3 {font-size:23px!important;} html body #premiumPage .premium-questions {margin-top:40px;} html body #premiumPage .premium-questions>h2 {font-size:20px!important;} html body #premiumPage .premium-questions summary {font-size:9px!important;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {transition:none!important;animation:none!important;scroll-behavior:auto!important;}} /* PREMIUM_UNIVERSE_20261102_END */ /* PREMIUM_UNIVERSE_LIGHT_AND_MOTION: same layout, brighter surfaces and feedback. */ html body #premiumPage.premium-page--universe {--premium-peach:#ff9d78;--premium-surface:#222124;--premium-muted:#b8b2bb;} html body #premiumPage .premium-universe-heading h1>span {color:#ffb08e;text-shadow:0 0 34px #ff956f35;} html body #premiumPage .premium-universe-eyebrow>.text1 {color:#f0dcce;} html body #premiumPage .premium-universe-lead {color:#c3bdc7;} html body #premiumPage .premium-universe-highlights>a {background:#302a2a;color:#ffe8dc;box-shadow:inset 0 0 0 1px #ffb08e25;transition:background .22s,color .22s,transform .22s,box-shadow .22s;} html body #premiumPage .premium-universe-highlights>a:is(:hover,:focus-visible) {background:#fff;color:#e97f56;transform:translateY(-3px);box-shadow:0 6px 20px #ff956f20;} html body #premiumPage .premium-section-kicker {color:#d0b3a7;} html body #premiumPage .premium-plan-card {border-color:#ffffff12!important;box-shadow:0 12px 32px #00000018!important;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;} html body #premiumPage .premium-plan-card--best {background:#3a2925!important;border-color:#ffad85!important;box-shadow:0 12px 38px #ff956f18!important;} html body #premiumPage .premium-plan-kicker {color:#c5b8b6;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {color:#fff4ee!important;} html body #premiumPage .premium-plan-card--best .premium-plan-price>div:nth-child(2) strong {color:#ffc0a1!important;} html body #premiumPage [data-plan-saving] {background:#ff956f28;color:#ffc5a9;} html body #premiumPage .premium-purchase-note>span {background:#282427;color:#ddd1d1;} html body #premiumPage .premium-trial-button {border-color:#ffad8570!important;color:#ffd0b8!important;transition:background .2s,color .2s,transform .2s,box-shadow .2s;} html body #premiumPage .premium-trial-button:is(:hover,:focus-visible) {transform:translateY(-2px);box-shadow:0 8px 26px #ff956f20;} html body #premiumPage .premium-benefits article.premium-benefit-card {background:#232124!important;transition:background .25s,transform .25s,box-shadow .25s;} html body #premiumPage .premium-benefits article.premium-benefit-card:first-child {background:#2f2625!important;} html body #premiumPage .premium-benefits article.premium-benefit-card:hover {background:#32282a!important;transform:translateY(-4px);box-shadow:inset 0 0 0 1px #ffad8540;} html body #premiumPage .premium-benefit-index {color:#d1b7ae;} html body #premiumPage .premium-benefit-card p {color:#c5bec7!important;} html body #premiumPage .premium-benefit-card small {color:#aaa0ab;} html body #premiumPage .premium-questions details {background:#222124;transition:background .22s;} html body #premiumPage .premium-questions details:is(:hover,[open]) {background:#30282a;} html body #premiumPage .premium-questions details[open]>p {animation:premium-answer-enter .28s ease both;} html body #premiumPage:not([hidden]) .premium-universe-eyebrow {animation:premium-universe-enter .55s ease both;} html body #premiumPage:not([hidden]) .premium-universe-heading h1 {animation:premium-universe-enter .65s .06s cubic-bezier(.2,.75,.25,1) both;} html body #premiumPage:not([hidden]) .premium-universe-lead {animation:premium-universe-enter .65s .12s ease both;} html body #premiumPage:not([hidden]) .premium-universe-highlights>a {animation:premium-universe-enter .5s .18s ease both;} html body #premiumPage:not([hidden]) .premium-universe-highlights>a:nth-child(2) {animation-delay:.23s;} html body #premiumPage:not([hidden]) .premium-universe-highlights>a:nth-child(3) {animation-delay:.28s;} html body #premiumPage:not([hidden]) .premium-universe-highlights>a:nth-child(4) {animation-delay:.33s;} html body #premiumPage:not([hidden]) .premium-plans>.premium-plan-card {animation:premium-universe-enter .65s .22s cubic-bezier(.2,.75,.25,1) both;} html body #premiumPage:not([hidden]) .premium-plans>.premium-plan-card:nth-child(2) {animation-delay:.29s;} html body #premiumPage:not([hidden]) .premium-plans>.premium-plan-card:nth-child(3) {animation-delay:.36s;} html body #premiumPage:not([hidden]) .premium-plans>.premium-plan-card:nth-child(4) {animation-delay:.43s;} @keyframes premium-universe-enter {from{opacity:0;translate:0 16px;}to{opacity:1;translate:0 0;}} @keyframes premium-answer-enter {from{opacity:0;translate:0 -5px;}to{opacity:1;translate:0 0;}} @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* PREMIUM_UNIVERSE_LIGHT_AND_MOTION_END */ /* PREMIUM_ILLUSTRATED_20261102: three plans and the supplied mascot artwork. */ html body #premiumPage .premium-universe-heading {padding:12px 0 48px;} html body #premiumPage .premium-plans { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important; align-items:end!important;max-width:1240px;margin:0 auto;padding-top:8px; } html body #premiumPage .premium-plan-card { --plan-accent:#99bde0;--plan-glow:#567ca54a;--plan-base:#18202d; --plan-backdrop:radial-gradient(ellipse at 0 0,var(--plan-glow),transparent 65%),linear-gradient(155deg,var(--plan-base),#121216); min-width:0;min-height:460px!important;padding:34px 28px 28px!important; background:var(--plan-backdrop)!important; border:1px solid #a7c7e329!important;border-radius:26px!important; box-shadow:inset 0 1px 0 #ffffff08,0 16px 44px #0003!important; isolation:isolate;overflow:hidden!important; } html body #premiumPage .premium-plan-card::after { content:"";position:absolute;z-index:-1;pointer-events:none;width:260px;height:260px; border:1px solid #ffffff08;border-radius:50%;right:-130px;top:-110px; box-shadow:0 0 0 28px #ffffff03,0 0 0 56px #ffffff03; } html body #premiumPage .premium-plan-card--quarter { --plan-accent:#ffc09f;--plan-glow:#d57e5b60;--plan-base:#392631; min-height:550px!important;border-color:#ffad858c!important; box-shadow:inset 0 1px 0 #ffd2bc30,0 18px 55px #ff956f14!important; } html body #premiumPage .premium-plan-card--year { --plan-accent:#f4b4d0;--plan-glow:#bc477354;--plan-base:#2b192a; --plan-backdrop:radial-gradient(ellipse at 100% 0,var(--plan-glow),transparent 65%),linear-gradient(155deg,var(--plan-base),#15121a); min-height:500px!important;border-color:#f3a1c33d!important; } html body #premiumPage .premium-plan-card[hidden] {display:none!important;} html body #premiumPage .premium-plan-card h2 {font-size:clamp(22px,2.2vw,30px)!important;font-weight:900!important;} html body #premiumPage .premium-plan-card>p {letter-spacing:0!important;font-size:12px!important;margin-bottom:28px!important;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {font-size:clamp(30px,3vw,44px)!important;} html body #premiumPage .premium-plan-meta {font-size:12px;gap:10px;margin-bottom:12px;} html body #premiumPage .premium-plan-card ul { order:4;gap:12px!important;margin:8px 0 28px!important;padding-top:20px!important; color:#d6cfd7!important;font-size:12px!important;border-color:#ffffff15!important; } html body #premiumPage .premium-benefits {max-width:1240px!important;margin:86px auto 0!important;} html body #premiumPage .premium-section-heading {justify-content:center;text-align:center;margin-bottom:32px;} html body #premiumPage .premium-section-heading h2 {font-size:clamp(22px,2.5vw,34px)!important;} html body #premiumPage .premium-section-heading h2 span {color:#ffb08e;} html body #premiumPage .premium-feature-stories {display:grid;gap:22px;} html body #premiumPage .premium-benefits article.premium-feature-story { display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important; align-items:stretch!important;gap:0!important;min-width:0;min-height:370px; padding:14px!important;border:1px solid #ffffff0c!important;border-radius:28px!important; background:#171619!important;overflow:hidden;box-shadow:none; transition:border-color .25s,transform .25s; } html body #premiumPage .premium-benefits article.premium-feature-story:hover {border-color:#ffad8540!important;transform:translateY(-3px);} html body #premiumPage .premium-feature-copy {align-self:center;min-width:0;padding:28px clamp(20px,3vw,42px);} html body #premiumPage .premium-feature-number {display:block;color:#d5a38e;font-size:9px!important;line-height:1.5;margin-bottom:18px;} html body #premiumPage .premium-feature-copy h3 {margin:0 0 22px!important;color:#fff!important;font-size:clamp(20px,2vw,29px)!important;line-height:1.35!important;letter-spacing:0!important;} html body #premiumPage .premium-feature-copy p {grid-column:auto!important;margin:0 0 16px!important;max-width:560px;color:#c8c2cc!important;font-size:14px!important;line-height:1.8!important;} html body #premiumPage .premium-feature-copy p:last-child {margin-bottom:0!important;} html body #premiumPage .premium-feature-copy strong {color:#fff;font-weight:800;} html body #premiumPage .premium-feature-copy small {display:block;max-width:530px;color:#96909c;font-size:11px;line-height:1.7;} html body #premiumPage .premium-feature-art {min-width:0;position:relative;min-height:360px;overflow:hidden;background:#000;border-radius:20px;} html body #premiumPage .premium-feature-art img {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s cubic-bezier(.2,.7,.3,1);} html body #premiumPage .premium-feature-story:hover .premium-feature-art img {transform:scale(1.035);} html body #premiumPage .premium-benefits article.premium-feature-story--offline {grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important;} html body #premiumPage .premium-feature-story--offline .premium-feature-art {grid-column:1;grid-row:1;} html body #premiumPage .premium-feature-story--offline .premium-feature-copy {grid-column:2;grid-row:1;} html body #premiumPage .premium-questions {max-width:1240px;margin:64px auto 0;} @media(max-width:1050px) and (min-width:761px){ html body #premiumPage .premium-plans {gap:12px!important;} html body #premiumPage .premium-plan-card {padding:28px 18px 22px!important;} html body #premiumPage .premium-plan-card h2 {font-size:21px!important;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {font-size:30px!important;} html body #premiumPage .premium-feature-copy {padding:22px;} } @media(max-width:760px){ html body #premiumPage .premium-universe-heading {padding:0 0 32px;} html body #premiumPage .premium-universe-heading h1 {font-size:clamp(24px,5.5vw,38px)!important;} html body #premiumPage .premium-desktop-break {display:none;} html body #premiumPage .premium-plans {grid-template-columns:1fr!important;gap:16px!important;padding:0;max-width:500px;} html body #premiumPage .premium-plan-card {min-height:0!important;padding:28px!important;} html body #premiumPage .premium-plan-price {min-height:100px;} html body #premiumPage .premium-benefits {margin-top:52px!important;} html body #premiumPage .premium-section-heading {margin-bottom:24px;} html body #premiumPage .premium-feature-stories {gap:16px;} html body #premiumPage .premium-benefits article.premium-feature-story {grid-template-columns:1fr!important;padding:10px!important;min-height:0;border-radius:24px!important;} html body #premiumPage .premium-feature-copy {grid-column:1!important;grid-row:1!important;padding:22px 16px 26px;} html body #premiumPage .premium-feature-copy h3 {font-size:23px!important;margin-bottom:18px!important;} html body #premiumPage .premium-feature-copy p {font-size:13px!important;} html body #premiumPage .premium-feature-art {grid-column:1!important;grid-row:2!important;min-height:0;height:300px;max-height:85vw;border-radius:17px;} html body #premiumPage .premium-feature-art img {object-fit:contain;} html body #premiumPage .premium-questions {margin-top:42px;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* PREMIUM_ILLUSTRATED_20261102_END */ /* PREMIUM_EXPERIENCE_V1: live model comparison and editable UI infographics. */ html body #premiumPage .premium-plans-scene {position:relative;max-width:1240px;margin:48px auto 0;isolation:isolate;} html body #premiumPage .premium-plans-scene .premium-plans {position:relative;z-index:1;} html body #premiumPage .premium-experience {margin-top:82px!important;} html body #premiumPage .premium-experience>article { display:block!important;margin:0 0 32px!important;padding:30px!important; border:1px solid #ffffff0d!important;border-radius:28px!important;background:#151416!important; min-width:0;overflow:visible!important;box-shadow:none!important; } html body #premiumPage .premium-experience-copy {max-width:740px;margin:4px 0 28px;} html body #premiumPage .premium-experience-copy h3 {font-size:clamp(23px,2.5vw,36px)!important;line-height:1.25!important;letter-spacing:0!important;margin:0 0 18px!important;color:#fff!important;} html body #premiumPage .premium-experience-copy>p {font:400 14px/1.8 Manrope,sans-serif!important;letter-spacing:0!important;color:#c8c2cc!important;margin:0!important;max-width:640px;} html body #premiumPage .premium-comparison {position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#000;} html body #premiumPage .premium-comparison>img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;} html body #premiumPage .premium-comparison>img[hidden] {display:none!important;} html body #premiumPage .premium-comparison__result {clip-path:inset(0 0 0 var(--comparison-split));} html body #premiumPage .premium-comparison__source {position:absolute;top:16px;left:16px;padding:12px 14px;background:#0009;backdrop-filter:blur(12px);border-radius:999px;font-size:9px!important;line-height:1.4;color:#fff;} html body #premiumPage .premium-demo-controls {position:absolute;z-index:6;right:16px;top:16px;display:flex;gap:8px;} html body #premiumPage .premium-demo-menu {position:relative;} html body #premiumPage .premium-demo-menu>summary {list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:999px;background:#0009;backdrop-filter:blur(12px);color:#fff;font-size:10px!important;line-height:1.4;cursor:pointer;transition:background .2s;} html body #premiumPage .premium-demo-menu>summary::-webkit-details-marker {display:none;} html body #premiumPage .premium-demo-menu>summary:hover {background:#000c;} html body #premiumPage .premium-demo-chevron {width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);} html body #premiumPage .premium-demo-menu[open] .premium-demo-chevron {transform:rotate(225deg) translate(-2px,-1px);} html body #premiumPage .premium-demo-menu__panel {position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:4px;min-width:205px;padding:10px;background:#000a;backdrop-filter:blur(16px);border-radius:22px;box-shadow:0 10px 28px #0004;} html body #premiumPage .premium-demo-menu__panel>button {border:0;border-radius:999px;padding:15px 18px;text-align:left;font-size:11px!important;line-height:1.4;color:#fff;background:transparent;cursor:pointer;} html body #premiumPage .premium-demo-menu__panel>button:hover {background:#ffffff20;} html body #premiumPage .premium-demo-menu__panel>button.is-active {background:#ff9d78;color:#fff;} html body #premiumPage .premium-demo-power {width:268px;padding:22px;gap:18px;box-sizing:border-box;} html body #premiumPage .premium-demo-power>label {font-size:9px!important;color:#c9c2ca;} html body #premiumPage .premium-demo-power>output {font-size:14px!important;color:#fff;} html body #premiumPage .premium-demo-power>input {--demo-power:0%;width:100%;height:6px;margin:12px 0;appearance:none;border:0;border-radius:999px;background:linear-gradient(to right,#ff9d78 0 var(--demo-power),#ffffff45 var(--demo-power) 100%);cursor:pointer;accent-color:#ff9d78;} html body #premiumPage .premium-demo-power>input::-webkit-slider-thumb {appearance:none;width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0004;} html body #premiumPage .premium-demo-power>input::-moz-range-thumb {width:22px;height:22px;border:0;border-radius:50%;background:#fff;} html body #premiumPage .premium-demo-power__marks {display:flex;justify-content:space-between;gap:8px;font:600 10px/1.5 Manrope,sans-serif;color:#c9c2ca;} html body #premiumPage .premium-comparison__divider {position:absolute;z-index:4;left:var(--comparison-split);top:0;bottom:0;width:44px;transform:translateX(-50%);cursor:ew-resize;touch-action:none;outline-offset:-5px;} html body #premiumPage .premium-comparison__divider::before {content:"";position:absolute;inset:0 auto 0 21px;width:2px;background:#fff;box-shadow:0 0 8px #0005;} html body #premiumPage .premium-comparison__divider>span {position:absolute;left:0;top:50%;width:44px;height:44px;transform:translateY(-50%);display:grid;place-items:center;box-sizing:border-box;border:2px solid #fff;border-radius:50%;background:#ff9d78;color:#fff;font:800 22px/1 Manrope,sans-serif;box-shadow:0 3px 14px #0005;transition:scale .2s;} html body #premiumPage .premium-comparison__divider:is(:hover,.is-dragging)>span {scale:1.1;} html body #premiumPage .premium-demo-status {position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);box-sizing:border-box;padding:10px 16px;border-radius:16px;background:#000b;color:#fff;text-align:center;font:600 12px/1.6 Manrope,sans-serif;pointer-events:none;} html body #premiumPage .premium-demo-status[hidden],html body #premiumPage .premium-demo-retry[hidden] {display:none!important;} html body #premiumPage .premium-demo-retry {position:absolute;z-index:7;bottom:85px;left:50%;transform:translateX(-50%);padding:12px 18px;border:0;border-radius:999px;background:#ff9d78;color:#fff;font-size:10px!important;cursor:pointer;} html body #premiumPage .premium-demo-retry:hover {background:#fff;color:#ef8b68;} html body #premiumPage .premium-comparison-caption {display:flex;justify-content:space-between;gap:16px;margin:14px 2px 0;font:500 11px/1.7 Manrope,sans-serif;color:#a9a1ae;} html body #premiumPage .premium-offline-infographic {display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:18px;} html body #premiumPage .premium-offline-art {display:block;width:100%;height:auto;border-radius:22px;} html body #premiumPage .premium-offline-flow {display:grid;gap:12px;padding:12px 0;} html body #premiumPage .premium-offline-tile {display:grid;gap:12px;padding:24px;border:1px solid #ffffff10;border-radius:22px;background:#222023;transition:transform .25s,border-color .25s;} html body #premiumPage .premium-offline-tile:hover {transform:translateX(-5px);border-color:#ff9d7860;} html body #premiumPage .premium-offline-tile--voice {margin-left:24px;} html body #premiumPage .premium-offline-tile--ai {margin-left:48px;} html body #premiumPage .premium-infographic-step {font-size:8px!important;color:#d6a28d;letter-spacing:.08em!important;} html body #premiumPage .premium-offline-tile>strong {font-size:13px!important;color:#fff;line-height:1.6;} html body #premiumPage .premium-offline-tile>p {margin:0!important;font:400 12px/1.8 Manrope,sans-serif!important;letter-spacing:0!important;color:#bab2c0!important;} html body #premiumPage .premium-offline-episodes {display:flex;gap:8px;} html body #premiumPage .premium-offline-episodes>button {width:44px;height:38px;border:0;border-radius:12px;background:#ffffff0d;color:#fff;font-size:12px!important;cursor:pointer;transition:background .2s;} html body #premiumPage .premium-offline-episodes>button:hover {background:#ffffff25;} html body #premiumPage .premium-offline-episodes>button.is-active {background:#ff9d78;} html body #premiumPage .premium-offline-voice {display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:260px;padding:10px 14px;border-radius:999px;background:#0005;font-size:10px!important;} html body #premiumPage .premium-offline-voice>span {padding:5px 8px;border-radius:999px;background:#ff9d78;font-size:8px;} html body #premiumPage .premium-offline-resolution {display:flex;align-items:center;gap:16px;font-size:16px!important;color:#ffb392;} html body #premiumPage .premium-offline-resolution>span:first-child {color:#bbb3be;} html body #premiumPage .premium-experience-note {margin:22px 0 0!important;max-width:850px;font:400 11px/1.8 Manrope,sans-serif!important;letter-spacing:0!important;color:#9f97a7!important;} html body #premiumPage .premium-profile-story {overflow:hidden!important;} html body #premiumPage .premium-profile-showcase {margin:12px auto 0;max-width:980px;} html body #premiumPage .premium-profile-deck {position:relative;height:340px;perspective:1000px;isolation:isolate;} html body #premiumPage .premium-profile-example {position:absolute!important;top:24px;left:50%;width:360px;max-width:70%;padding:0!important;display:block!important;overflow:hidden!important;box-sizing:border-box;border-radius:22px!important;border:1px solid #ffffff20!important;background:#252128!important;box-shadow:0 20px 40px #0007!important;transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .4s;} html body #premiumPage .premium-profile-example.is-center {z-index:3;transform:translateX(-50%) rotate(-3deg);opacity:1;} html body #premiumPage .premium-profile-example.is-before {z-index:1;transform:translateX(-112%) translateY(28px) rotate(-14deg) scale(.9);opacity:.72;} html body #premiumPage .premium-profile-example.is-after {z-index:2;transform:translateX(12%) translateY(28px) rotate(12deg) scale(.9);opacity:.82;} html body #premiumPage .premium-profile-example__banner {width:100%;height:140px;object-fit:cover;display:block;} html body #premiumPage .premium-profile-example__identity {display:flex;align-items:center;gap:14px;padding:0 22px;margin-top:-24px;position:relative;} html body #premiumPage .premium-profile-example__identity>img {width:64px;height:64px;border-radius:50%;object-fit:cover;border:4px solid #252128;background:#252128;} html body #premiumPage .premium-profile-example__identity>div {display:grid;gap:8px;padding-top:24px;min-width:0;} html body #premiumPage .premium-profile-example__identity strong {font-size:13px!important;line-height:1.5;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body #premiumPage .premium-profile-example__identity span {font:700 8px/1.4 Manrope,sans-serif;letter-spacing:.08em;color:#e0af9c;} html body #premiumPage .premium-profile-example__details {display:flex;gap:18px;padding:22px;font:800 8px/1.5 Manrope,sans-serif;color:#aaa1b1;} html body #premiumPage .premium-profile-example__details>span:first-child {color:#ffaf8e;} html body #premiumPage .premium-profile-parts {display:flex;justify-content:center;flex-wrap:wrap;gap:8px;position:relative;z-index:4;} html body #premiumPage .premium-profile-parts>span {font-size:9px!important;padding:12px 16px;border:1px solid #ffb08e25;border-radius:999px;background:#342827;color:#ffd6c3;} html body #premiumPage .premium-profile-controls {display:flex;align-items:center;justify-content:center;gap:20px;margin:22px 0 0;} html body #premiumPage .premium-profile-controls>button {width:42px;height:42px;border:0;border-radius:50%;background:#ff9d78;color:#fff;font:700 20px/1 Manrope,sans-serif;cursor:pointer;transition:background .2s,color .2s;} html body #premiumPage .premium-profile-controls>button:hover {background:#fff;color:#ec8967;} html body #premiumPage .premium-profile-controls>span {color:#bbb1c3;font-size:10px!important;} @keyframes premium-mascot-float {0%,100%{translate:0 0;}50%{translate:0 -6px;}} @media(max-width:900px){ html body #premiumPage .premium-offline-infographic {grid-template-columns:1fr 1fr;gap:12px;} html body #premiumPage .premium-offline-tile {padding:18px;} html body #premiumPage .premium-offline-tile--voice,html body #premiumPage .premium-offline-tile--ai {margin-left:0;} html body #premiumPage .premium-profile-deck {height:320px;} } @media(max-width:760px){ html body #premiumPage .premium-plans-scene {margin-top:70px;} html body #premiumPage .premium-experience>article {padding:18px!important;margin-bottom:20px!important;border-radius:24px!important;} html body #premiumPage .premium-experience-copy {margin:4px 0 22px;} html body #premiumPage .premium-experience-copy h3 {font-size:25px!important;} html body #premiumPage .premium-experience-copy>p {font-size:13px!important;} html body #premiumPage .premium-comparison {border-radius:14px;} html body #premiumPage .premium-comparison__source {left:8px;top:8px;padding:8px;font-size:6px!important;} html body #premiumPage .premium-demo-controls {top:8px;right:8px;gap:4px;} html body #premiumPage .premium-demo-menu>summary {padding:8px;gap:6px;font-size:7px!important;} html body #premiumPage .premium-demo-chevron {width:5px;height:5px;border-width:1.5px;} html body #premiumPage .premium-demo-menu__panel {min-width:145px;padding:6px;border-radius:16px;} html body #premiumPage .premium-demo-menu__panel>button {padding:10px 12px;font-size:9px!important;} html body #premiumPage .premium-demo-menu--power .premium-demo-menu__panel {width:225px;padding:16px;gap:14px;} html body #premiumPage .premium-demo-power>label {font-size:8px!important;} html body #premiumPage .premium-demo-power>output {font-size:11px!important;} html body #premiumPage .premium-demo-power__marks {font-size:9px;} html body #premiumPage .premium-demo-status {bottom:8px;padding:6px 10px;font-size:9px;line-height:1.5;max-width:calc(100% - 16px);border-radius:10px;} html body #premiumPage .premium-demo-retry {bottom:62px;padding:9px 13px;font-size:8px!important;} html body #premiumPage .premium-comparison-caption {flex-direction:column;gap:3px;font-size:10px;} html body #premiumPage .premium-offline-infographic {grid-template-columns:1fr;} html body #premiumPage .premium-offline-art {border-radius:16px;} html body #premiumPage .premium-offline-flow {grid-template-columns:1fr;gap:10px;padding:0;} html body #premiumPage .premium-offline-tile {border-radius:18px;padding:20px;} html body #premiumPage .premium-profile-deck {height:275px;} html body #premiumPage .premium-profile-example {max-width:82%;width:300px;} html body #premiumPage .premium-profile-example__banner {height:110px;} html body #premiumPage .premium-profile-example.is-before {transform:translateX(-82%) translateY(16px) rotate(-14deg) scale(.86);} html body #premiumPage .premium-profile-example.is-after {transform:translateX(-18%) translateY(16px) rotate(12deg) scale(.86);} html body #premiumPage .premium-profile-example__identity {padding:0 14px;gap:9px;} html body #premiumPage .premium-profile-example__identity>img {width:52px;height:52px;} html body #premiumPage .premium-profile-example__identity strong {font-size:10px!important;} html body #premiumPage .premium-profile-example__details {padding:18px 14px;gap:12px;font-size:7px;} html body #premiumPage .premium-profile-parts {gap:6px;} html body #premiumPage .premium-profile-parts>span {padding:9px 11px;font-size:7px!important;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* PREMIUM_EXPERIENCE_V1_END */ /* PREMIUM_FLAT_V2: open sections, player controls and a full-height comparison. */ html body #premiumPage.premium-page--universe {max-width:1800px!important;} html body #premiumPage .premium-benefits.premium-experience {max-width:none!important;} html body #premiumPage .premium-experience>article {padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0 0 100px!important;} html body #premiumPage .premium-experience-copy {max-width:820px;margin:0 auto 36px;text-align:center;} html body #premiumPage .premium-experience-copy>p {max-width:770px;margin:0 auto!important;} html body #premiumPage .premium-experience-copy h3 {font-size:clamp(26px,3vw,42px)!important;} html body #premiumPage .premium-comparison {width:100%;aspect-ratio:1280/500;border-radius:24px;overflow:visible;touch-action:pan-y;cursor:ew-resize;} html body #premiumPage .premium-comparison>img {object-fit:cover;object-position:center;border-radius:inherit;user-select:none;-webkit-user-drag:none;} html body #premiumPage .premium-comparison__divider {width:24px;} html body #premiumPage .premium-comparison__divider::before {left:11px;width:2px;} html body #premiumPage .premium-demo-menu {cursor:auto;} html body #premiumPage .premium-menu-trigger {list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:999px;background:rgba(0,0,0,.36);backdrop-filter:blur(12px);color:#fff;font-size:10px!important;line-height:1.4;cursor:pointer;transition:background .2s;} html body #premiumPage .premium-menu-trigger:hover {background:#0009;} html body #premiumPage .premium-demo-menu__panel {display:grid!important;background:rgba(0,0,0,.36);border:0;border-radius:22px;padding:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.97);transform-origin:top right;transition:opacity 220ms ease,transform 260ms cubic-bezier(.22,.68,.25,1),visibility 0s linear 260ms;} html body #premiumPage .premium-demo-menu.is-open>.premium-demo-menu__panel {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s;} html body #premiumPage .premium-demo-menu.is-open .premium-demo-chevron {transform:rotate(225deg) translate(-2px,-1px);} html body #premiumPage .premium-demo-menu--power .premium-demo-menu__panel {width:auto;min-width:205px;padding:10px;gap:4px;} html body #premiumPage .premium-offline-icons {display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 24px;} html body #premiumPage .premium-offline-icons>img,html body #premiumPage .premium-offline-wifi {width:52px;height:52px;display:grid;place-items:center;border-radius:14px;} html body #premiumPage .premium-offline-wifi {background:#ff9569;color:#fff;} html body #premiumPage .premium-offline-wifi svg {width:30px;height:30px;} html body #premiumPage .premium-offline-scene {position:relative;isolation:isolate;max-width:1030px;height:440px;margin:0 auto;} html body #premiumPage .premium-offline-select {position:absolute;z-index:3;width:235px;transform:rotate(-7deg);} html body #premiumPage .premium-offline-select--episodes {left:6%;top:5px;} html body #premiumPage .premium-offline-select--voice {left:auto;right:5%;top:90px;width:290px;transform:rotate(7deg);} html body #premiumPage .premium-offline-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:12px 18px;background:rgba(0,0,0,.36);border:0;border-radius:999px;color:#fff;font-size:14px!important;cursor:pointer;} html body #premiumPage .premium-offline-trigger:hover {background:#ffffff15;} html body #premiumPage .premium-offline-trigger .ah-chevron {border:solid currentColor;border-width:0 2px 2px 0;width:8px;height:8px;display:block;transform:rotate(45deg);} html body #premiumPage .premium-offline-select.is-open .premium-offline-trigger .ah-chevron {transform:rotate(225deg);} html body #premiumPage .premium-offline-select>.ah-player-select__menu {position:absolute;top:calc(100% + 8px);left:0;min-width:100%;width:100%;box-sizing:border-box;max-height:none;padding:10px;border:0;border-radius:22px;background:rgba(0,0,0,.36);backdrop-filter:blur(12px);box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px);transition:opacity .22s,transform .26s,visibility 0s .26s;} html body #premiumPage .premium-offline-select.is-open>.ah-player-select__menu {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button {display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:12px 16px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:12px!important;line-height:1.5;cursor:pointer;text-align:left;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button:hover {background:#ffffff20;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button.is-active {background:#ff9569;color:#fff;} html body #premiumPage .premium-offline-select .ah-player-voice-badge {font-style:normal;font-size:8px;line-height:1.4;padding:5px 8px;border-radius:999px;background:#ff9569;color:#fff;} html body #premiumPage .premium-offline-skip {position:absolute!important;z-index:4;top:44px;left:38%;right:auto!important;bottom:auto!important;padding:12px 18px;border:0;border-radius:999px;background:rgba(0,0,0,.36);color:#fff;font-size:12px!important;opacity:1;visibility:visible;pointer-events:auto;transform:rotate(-4deg);cursor:pointer;} html body #premiumPage .premium-offline-skip:hover {background:#fff;color:#151515;} html body #premiumPage .premium-offline-skip--ending {left:41%;top:134px;transform:rotate(5deg);} html body #premiumPage .premium-offline-quality {position:absolute;z-index:2;left:38%;top:292px;display:flex;align-items:center;gap:12px;padding:20px 24px;border-radius:24px;background:rgba(0,0,0,.36);color:#fff;font-size:16px!important;transform:rotate(-5deg);} html body #premiumPage .premium-offline-quality .ah-player-upscale-badge {padding:6px 10px;border-radius:999px;background:#ff9569;color:#fff;font-size:9px!important;} html body #premiumPage .premium-offline-ambient {position:absolute;z-index:-1;inset:45% 15% 0;border-radius:50%;background:#ff956920;filter:blur(65px);pointer-events:none;} html body #premiumPage .premium-profile-showcase {margin-top:24px;padding:18px 0;overflow:clip;} html body #premiumPage .premium-profile-deck {height:320px;} html body #premiumPage .premium-profile-example {padding-bottom:22px!important;cursor:pointer;} html body #premiumPage .premium-profile-example__identity>div {padding-top:24px;display:block;} html body #premiumPage .premium-profile-example__identity strong {display:inline-block;color:var(--profile-demo-color,#ffb392)!important;background:linear-gradient(105deg,var(--profile-demo-color,#ffb392) 8%,#fff 28%,var(--profile-demo-color,#ffb392) 43%,#e6c1ff 66%,var(--profile-demo-color,#ffb392) 90%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:premium-profile-nick-shine 4s linear infinite;} html body #premiumPage .premium-profile-example__identity>img {border:3px solid var(--profile-demo-frame,#ff9569);box-shadow:0 0 0 3px #252128,0 0 15px color-mix(in srgb,var(--profile-demo-frame,#ff9569) 28%,transparent);} @keyframes premium-profile-nick-shine {from{background-position:120% 0;}to{background-position:-120% 0;}} @media(max-width:900px){ html body #premiumPage .premium-offline-scene {height:470px;} html body #premiumPage .premium-offline-select--episodes {left:2%;width:200px;} html body #premiumPage .premium-offline-select--voice {right:1%;width:240px;top:138px;} html body #premiumPage .premium-offline-skip {left:42%;top:15px;} html body #premiumPage .premium-offline-skip--ending {left:46%;top:82px;} html body #premiumPage .premium-offline-quality {left:30%;top:370px;font-size:14px!important;} } @media(max-width:760px){ html body #premiumPage .premium-experience>article {padding:0!important;margin-bottom:66px!important;border-radius:0!important;} html body #premiumPage .premium-experience-copy {margin-bottom:26px;} html body #premiumPage .premium-experience-copy h3 {font-size:26px!important;} html body #premiumPage .premium-comparison {border-radius:14px;aspect-ratio:1280/500;} html body #premiumPage .premium-menu-trigger {padding:8px;gap:6px;font-size:7px!important;} html body #premiumPage .premium-demo-menu__panel {min-width:150px;padding:6px;} html body #premiumPage .premium-demo-menu--power .premium-demo-menu__panel {width:auto;min-width:150px;padding:6px;gap:4px;} html body #premiumPage .premium-offline-icons>img,html body #premiumPage .premium-offline-wifi {width:44px;height:44px;border-radius:12px;} html body #premiumPage .premium-offline-wifi svg {width:26px;height:26px;} html body #premiumPage .premium-offline-scene {height:515px;} html body #premiumPage .premium-offline-select--episodes {left:3%;top:0;width:148px;transform:rotate(-6deg);} html body #premiumPage .premium-offline-select--voice {right:3%;top:242px;width:195px;transform:rotate(5deg);} html body #premiumPage .premium-offline-trigger {min-height:38px;padding:10px 14px;font-size:10px!important;} html body #premiumPage .premium-offline-select>.ah-player-select__menu {padding:6px;border-radius:17px;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button {min-height:34px;padding:9px 12px;font-size:9px!important;} html body #premiumPage .premium-offline-skip {top:48px;left:auto;right:0!important;max-width:48%;padding:12px;font-size:9px!important;} html body #premiumPage .premium-offline-skip--ending {top:126px;left:auto;right:0!important;} html body #premiumPage .premium-offline-quality {left:2%;top:440px;padding:16px;gap:8px;font-size:12px!important;} html body #premiumPage .premium-offline-quality .ah-player-upscale-badge {font-size:7px!important;} html body #premiumPage .premium-profile-deck {height:255px;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* PREMIUM_FLAT_V2_END */ /* PREMIUM_POLISH_V3: compact plans, readable copy and balanced UI examples. */ html body #premiumPage .text1 {text-transform:none!important;} html body #premiumPage :is(h1,h2,h3).text1 {text-transform:uppercase!important;} html body #premiumPage .premium-experience-copy>p {font-weight:750!important;color:#d6d1d8!important;} html body #premiumPage .premium-questions details>p {font-weight:650;} html body #premiumPage .premium-benefits.premium-experience {width:100%!important;max-width:none!important;} html body #premiumPage .premium-comparison {width:calc(100% - 32px)!important;margin:0 auto;} html body #premiumPage .premium-offline-wifi {position:relative;isolation:isolate;background:transparent;border-radius:0;} html body #premiumPage .premium-offline-wifi::before {content:"";position:absolute;inset:0;z-index:-1;background:#ff9569;-webkit-mask:url('/episode-download-anivox.png?v=2') center/contain no-repeat;mask:url('/episode-download-anivox.png?v=2') center/contain no-repeat;transform:scaleX(-1);} html body #premiumPage .premium-offline-wifi svg {width:29px;height:29px;} html body #premiumPage .premium-offline-icons>img {border-radius:0;} html body #premiumPage .premium-offline-scene {display:grid;grid-template-columns:1fr 1.05fr 1.15fr;grid-template-rows:auto auto auto;align-items:center;gap:22px 46px;max-width:1050px;box-sizing:border-box;height:auto;min-height:380px;padding:22px 30px 50px;} html body #premiumPage .premium-offline-select {position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;min-width:0;} html body #premiumPage .premium-offline-select--episodes {grid-column:1;grid-row:1/3;transform:rotate(-5deg);} html body #premiumPage .premium-offline-select--voice {grid-column:3;grid-row:1/3;width:100%;transform:rotate(5deg);} html body #premiumPage .premium-offline-select>.ah-player-select__menu {position:relative;top:auto;left:auto;margin-top:8px;min-width:0;width:100%;box-sizing:border-box;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button {font-size:11px!important;} html body #premiumPage .premium-offline-trigger {font-size:12px!important;} html body #premiumPage .premium-offline-skip {position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:2;grid-row:1;justify-self:center;max-width:100%;width:max-content;padding:13px 16px;font-size:10px!important;white-space:nowrap;transform:rotate(3deg);} html body #premiumPage .premium-offline-skip--ending {grid-column:2;grid-row:2;transform:rotate(-3deg);} html body #premiumPage .premium-offline-quality {position:relative;left:auto;top:auto;grid-column:2/4;grid-row:3;justify-self:center;width:max-content;max-width:100%;padding:17px 22px;transform:rotate(-2deg);font-size:14px!important;} html body #premiumPage .premium-plans-scene {max-width:1100px;margin-top:38px;} html body #premiumPage .premium-plans {gap:18px!important;} html body #premiumPage .premium-plan-card { --plan-tone:#191d25;min-height:370px!important;padding:28px 24px 24px!important; border-radius:24px!important;border:1px solid #ffffff16!important; background:var(--plan-tone)!important;box-shadow:none!important; } html body #premiumPage .premium-plan-card--quarter {--plan-tone:#2b211f;min-height:400px!important;padding-top:48px!important;border-color:#ffaf8d70!important;} html body #premiumPage .premium-plan-card--year {--plan-tone:#221c27;min-height:385px!important;padding-top:36px!important;} html body #premiumPage .premium-plan-card::after {display:none;} html body #premiumPage .premium-plan-card h2 {font-size:24px!important;} html body #premiumPage .premium-plan-card>p {margin-bottom:18px!important;font-weight:650!important;} html body #premiumPage .premium-plan-price {min-height:0;margin-bottom:12px!important;gap:0!important;} html body #premiumPage .premium-plan-price>div:not(:nth-child(2)) {display:none!important;} html body #premiumPage .premium-plan-price>div:nth-child(2) {margin:0!important;} html body #premiumPage .premium-plan-price>div:nth-child(2) strong {font-size:36px!important;color:#fff!important;} html body #premiumPage .premium-plan-meta {min-height:28px;margin-bottom:14px;gap:7px;font-weight:650;} html body #premiumPage [data-plan-saving] {text-transform:lowercase!important;} html body #premiumPage .premium-plan-card ul {display:flex!important;flex-wrap:wrap;gap:8px 12px!important;margin:0 0 20px!important;padding-top:14px!important;font-size:10.5px!important;font-weight:650;} @media(max-width:1050px) and (min-width:761px){ html body #premiumPage .premium-offline-scene {gap:18px 24px;padding:20px 18px 42px;grid-template-columns:1fr 1fr 1.1fr;} html body #premiumPage .premium-offline-skip {padding:12px;font-size:9px!important;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button {padding:11px;font-size:10px!important;} html body #premiumPage .premium-plan-card {padding:24px 18px!important;} html body #premiumPage .premium-plan-card h2 {font-size:21px!important;} } @media(max-width:760px){ html body #premiumPage .premium-comparison {width:calc(100% - 8px)!important;} html body #premiumPage .premium-offline-scene {grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto auto auto;gap:20px 20px;min-height:0;padding:18px 8px 30px;} html body #premiumPage .premium-offline-select--episodes {grid-column:1;grid-row:1/3;transform:rotate(-3deg);width:100%;} html body #premiumPage .premium-offline-select--voice {grid-column:2;grid-row:2/4;transform:rotate(3deg);width:100%;} html body #premiumPage .premium-offline-skip {grid-column:2;grid-row:1;white-space:normal;font-size:8px!important;line-height:1.6;text-align:center;transform:rotate(2deg);} html body #premiumPage .premium-offline-skip--ending {grid-column:1;grid-row:3;transform:rotate(-2deg);} html body #premiumPage .premium-offline-quality {grid-column:1/3;grid-row:4;max-width:100%;font-size:12px!important;gap:8px;padding:15px 18px;} html body #premiumPage .premium-offline-trigger {font-size:9px!important;padding:10px;} html body #premiumPage .premium-offline-select>.ah-player-select__menu>button {font-size:9px!important;padding:9px;min-height:34px;} html body #premiumPage .premium-offline-select .ah-player-voice-badge {font-size:6px;padding:4px 5px;} html body #premiumPage .premium-plans-scene {margin-top:64px;} html body #premiumPage .premium-plan-card {min-height:0!important;padding:26px!important;} html body #premiumPage .premium-plan-card h2 {font-size:24px!important;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} /* PREMIUM_POLISH_V3_END */ /* PREMIUM_NATIVE_PLAYER_V4: real offline player and individual tariff perks. */ html body #premiumPage .premium-plans-scene {margin-top:78px;} html body #premiumPage .premium-plan-card { background:linear-gradient(155deg,#262d39 0%,#181b23 52%,#14161c 100%)!important; border-color:#ffffff1c!important;overflow:visible!important; transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s; } html body #premiumPage .premium-plan-card--quarter {background:linear-gradient(155deg,#493129 0%,#2a2221 52%,#1a191d 100%)!important;border-color:#ffad858c!important;box-shadow:0 12px 44px #ff956f12!important;} html body #premiumPage .premium-plan-card--year {background:linear-gradient(155deg,#34283f 0%,#241e2b 52%,#19171f 100%)!important;} html body #premiumPage .premium-plan-card ul {display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-bottom:24px!important;font-size:11px!important;} html body #premiumPage .premium-plan-card li {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;line-height:1.6;white-space:nowrap;} html body #premiumPage .premium-perk-icon {display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:9px;background:#ffaf8514;color:#ffb895;} html body #premiumPage .premium-perk-icon svg {display:block;width:17px;height:17px;} html body #premiumPage .premium-native-player-wrap {width:min(940px,100%);margin:12px auto 0;} html body #premiumPage #premiumOfflinePlayer {display:block;border:0;width:100%;height:auto;min-height:220px;aspect-ratio:16/10;background:transparent;border-radius:20px;} @keyframes premium-tariff-tag-breathe {0%,100%{box-shadow:0 4px 16px #ff956f14;}50%{box-shadow:0 4px 24px #ff956f45;}} @media(max-width:1050px) and (min-width:761px){html body #premiumPage .premium-plan-card li {font-size:10px!important;gap:7px;}} @media(max-width:760px){ html body #premiumPage .premium-plans-scene {margin-top:90px;} html body #premiumPage .premium-plans {gap:28px!important;} html body #premiumPage .premium-plan-card li {font-size:12px!important;} html body #premiumPage .premium-native-player-wrap {width:100%;} html body #premiumPage #premiumOfflinePlayer {border-radius:14px;min-height:170px;} } @media(prefers-reduced-motion:reduce){html body #premiumPage *,html body #premiumPage *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}} html body #premiumPage .premium-plan-card li {justify-content:flex-start;gap:12px;} html body #premiumPage .premium-perk-icon {flex:0 0 24px;width:24px;height:26px;border-radius:0;background:transparent;color:#fff;} html body #premiumPage .premium-perk-icon svg {width:22px;height:22px;} html body #premiumPage .premium-profile-avatar-shell {position:relative;display:block;flex:0 0 64px;width:64px;height:64px;--avatar-frame-thickness:4px;} html body #premiumPage .premium-profile-avatar-shell::before, html body #premiumPage .premium-profile-avatar-shell::after {content:"";position:absolute;pointer-events:none;border-radius:50%;opacity:0;} html body #premiumPage .premium-profile-avatar-shell .profile-avatar-crop {position:relative;z-index:2;display:block;box-sizing:border-box;width:100%;height:100%;overflow:hidden;border:4px solid #080808;border-radius:50%;background:#0b0b0d;} html body #premiumPage .premium-profile-avatar-shell img {display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none;} @keyframes premium-tariff-label-glow {0%,100%{box-shadow:0 0 0 5px #0b0b0d,0 8px 24px #ff956935;}50%{box-shadow:0 0 0 5px #0b0b0d,0 8px 34px #ff95696b;}} @media(max-width:760px){html body #premiumPage .premium-profile-avatar-shell {flex-basis:52px;width:52px;height:52px;}} @media(prefers-reduced-motion:reduce){} /* PREMIUM_REFINEMENT_V5_END */ /* PREMIUM_NEON_V6 — decorative paint only; existing geometry and typography stay intact. */ @property --premium-neon-angle {syntax:"";inherits:false;initial-value:0deg;} html body #premiumPage {--premium-neon-peach:#ff9874;--premium-neon-pink:#fa75c5;--premium-neon-ice:#83ddff;} html body #premiumPage .premium-universe-heading {position:relative;isolation:isolate;} html body #premiumPage .premium-universe-heading::before { content:"";position:absolute;z-index:-1;inset:-65px 0 -40px;pointer-events:none; background:radial-gradient(ellipse at 28% 44%,#fa75c51c,transparent 45%),radial-gradient(ellipse at 72% 35%,#ff98742b,transparent 46%),radial-gradient(ellipse at 50% 76%,#a28aff18,transparent 50%); background-size:140% 130%;animation:premium-neon-aurora 16s ease-in-out infinite alternate; } html body #premiumPage .premium-universe-heading h1>span { color:#ffb18c;background:linear-gradient(105deg,#ff956f 4%,#ffd7bb 25%,#fff0e5 36%,#ffa5b5 52%,#d4b2ff 71%,#ff956f 96%); background-size:250% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; text-shadow:none;filter:drop-shadow(0 0 20px #ff956f38);animation:premium-neon-spectrum 10s ease-in-out infinite alternate; } html body #premiumPage .premium-plan-card { --neon-color:#83ddff;--neon-secondary:#9385ff;--neon-base:#131c2b; background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--neon-color) 18%,transparent),transparent 60%),linear-gradient(150deg,var(--neon-base),#111118 88%)!important; border-color:color-mix(in srgb,var(--neon-color) 42%,transparent)!important; box-shadow:inset 0 1px 0 #ffffff17,0 0 28px color-mix(in srgb,var(--neon-color) 9%,transparent),0 18px 42px #0005!important; } html body #premiumPage .premium-plan-card--quarter {--neon-color:#ff9874;--neon-secondary:#f676ae;--neon-base:#2b1d24;} html body #premiumPage .premium-plan-card--year {--neon-color:#fa75c5;--neon-secondary:#ae8aff;--neon-base:#25182e;} html body #premiumPage .premium-plan-card::before { content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border-radius:inherit;padding:1px; background:conic-gradient(from var(--premium-neon-angle),transparent 0deg,var(--neon-color) 44deg,#fff0 83deg,transparent 170deg,var(--neon-secondary) 220deg,transparent 267deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:premium-neon-orbit 12s linear infinite; } html body #premiumPage .premium-plan-card--quarter::before {animation-duration:10s;animation-delay:-4s;} html body #premiumPage .premium-plan-card--year::before {animation-duration:14s;animation-delay:-8s;} html body #premiumPage .premium-plan-card>svg.premium-neon-art { position:absolute!important;inset:0;z-index:0;display:block!important;width:100%!important;height:100%!important; border-radius:inherit;overflow:hidden;pointer-events:none;fill:none;stroke:var(--neon-color);opacity:.6; } html body #premiumPage .premium-neon-art .neon-trace {stroke-width:.8;vector-effect:non-scaling-stroke;opacity:.36;} html body #premiumPage .premium-neon-art .neon-trace--bright {stroke-width:1.5;stroke-dasharray:32 420;stroke-linecap:round;opacity:.85;animation:premium-neon-trace 16s linear infinite;} html body #premiumPage .premium-plan-card--quarter .neon-trace--bright {animation-delay:-5s;} html body #premiumPage .premium-plan-card--year .neon-trace--bright {animation-delay:-10s;} html body #premiumPage .premium-neon-art .neon-star {fill:var(--neon-color);stroke:none;opacity:.45;animation:premium-neon-star 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center;} html body #premiumPage .premium-neon-art .neon-star:nth-last-child(2) {animation-delay:-3s;} html body #premiumPage .premium-plan-card h2, html body #premiumPage .premium-plan-price {position:relative;z-index:1;} html body #premiumPage .premium-plan-card h2 {text-shadow:0 0 20px color-mix(in srgb,var(--neon-color) 20%,transparent);} html body #premiumPage .premium-plan-price strong {text-shadow:0 0 26px color-mix(in srgb,var(--neon-color) 22%,transparent);} html body #premiumPage .premium-plan-card ul {position:relative;z-index:1;border-top-color:color-mix(in srgb,var(--neon-color) 18%,transparent)!important;} html body #premiumPage .premium-perk-icon {color:#fff;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--neon-color) 45%,transparent));} html body #premiumPage .premium-plan-card li {transition:color .25s,text-shadow .25s;} html body #premiumPage [data-plan-saving] {background:linear-gradient(110deg,#8e51852e,#ef87bd3d)!important;color:#ffd0e9!important;box-shadow:inset 0 0 0 1px #f88bcc30,0 0 16px #ec74b818;} html body #premiumPage .premium-section-heading h2 span {color:#ffbd9b;text-shadow:0 0 18px #ff956f66,0 0 40px #ff956f22;} html body #premiumPage .premium-experience-copy h3 {text-shadow:0 0 24px #ff956f26;} html body #premiumPage .premium-comparison {box-shadow:0 0 0 1px #ffb28c36,0 0 32px #ff956f14,0 18px 50px #0006;} html body #premiumPage .premium-comparison__divider {box-shadow:0 0 6px #fff9,0 0 16px #ffb78c77;} html body #premiumPage .premium-comparison__source, html body #premiumPage .premium-menu-trigger {box-shadow:inset 0 0 0 1px #ffffff20,0 4px 18px #0004;} html body #premiumPage .premium-menu-trigger {transition:background .25s,box-shadow .25s;} html body #premiumPage .premium-menu-trigger:is(:hover,:focus-visible) {box-shadow:inset 0 0 0 1px #ffbe9f88,0 0 18px #ff956f30;} html body #premiumPage .premium-demo-menu__panel {box-shadow:inset 0 0 0 1px #ffb69125,0 8px 28px #0006;} html body #premiumPage .premium-profile-example {box-shadow:0 0 0 1px #ffffff0d,0 0 24px color-mix(in srgb,var(--profile-demo-color) 13%,transparent),0 20px 40px #0007!important;} html body #premiumPage .premium-profile-example.is-center {border-color:color-mix(in srgb,var(--profile-demo-color) 50%,transparent)!important;box-shadow:0 0 22px color-mix(in srgb,var(--profile-demo-color) 24%,transparent),0 20px 40px #0007!important;} html body #premiumPage .premium-questions details { background:linear-gradient(110deg,#201d24,#19181e 76%);box-shadow:inset 0 0 0 1px #d7bbff12; transition:background .3s,box-shadow .3s; } html body #premiumPage .premium-questions details:nth-of-type(3n+2) {--faq-neon:#ffad85;} html body #premiumPage .premium-questions details:nth-of-type(3n+1) {--faq-neon:#b29aff;} html body #premiumPage .premium-questions details:nth-of-type(3n) {--faq-neon:#f594c6;} html body #premiumPage .premium-questions details:is(:hover,[open]) { background:linear-gradient(110deg,color-mix(in srgb,var(--faq-neon) 12%,#19181e),#19181e 90%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--faq-neon) 40%,transparent),0 0 22px color-mix(in srgb,var(--faq-neon) 8%,transparent); } html body #premiumPage .premium-questions summary::after {color:var(--faq-neon);text-shadow:0 0 10px color-mix(in srgb,var(--faq-neon) 55%,transparent);} @keyframes premium-neon-aurora {from{background-position:0% 30%;opacity:.75;}to{background-position:100% 70%;opacity:1;}} @keyframes premium-neon-spectrum {from{background-position:0% 50%;}to{background-position:100% 50%;}} @keyframes premium-neon-orbit {to{--premium-neon-angle:360deg;}} @keyframes premium-neon-trace {to{stroke-dashoffset:-452;}} @keyframes premium-neon-star {from{opacity:.25;transform:scale(.85);}to{opacity:.8;transform:scale(1.12);}} @keyframes premium-neon-sheen {0%,55%{transform:translateX(-140%);}78%,100%{transform:translateX(140%);}} @keyframes premium-neon-badge {from{background-position:0% 50%;box-shadow:0 0 0 5px #0b0b0d,0 0 14px #ffb38c88,0 0 28px #ff956f33;}to{background-position:100% 50%;box-shadow:0 0 0 5px #0b0b0d,0 0 18px #ffb38c99,0 0 40px #ff956f66;}} @keyframes premium-neon-badge-year {from{background-position:0% 50%;box-shadow:0 0 0 5px #0b0b0d,0 0 14px #df85cf88,0 0 28px #da6cbd33;}to{background-position:100% 50%;box-shadow:0 0 0 5px #0b0b0d,0 0 18px #e99bdf99,0 0 40px #da6cbd66;}} @media(max-width:760px){ html body #premiumPage .premium-plan-card>svg.premium-neon-art {opacity:.42;} html body #premiumPage .premium-universe-heading::before {inset:-35px 0 0;animation:none;} html body #premiumPage .premium-plan-card::before {animation-duration:18s;} } @media(prefers-reduced-motion:reduce){ html body #premiumPage *,html body #premiumPage *::before,html body #premiumPage *::after {animation:none!important;} } html body #premiumPage .premium-comparison__divider {box-shadow:none!important;background:transparent!important;} html body #premiumPage .premium-comparison__divider::before {top:3px;bottom:3px;left:50%;width:3.5px;transform:translateX(-50%);border-radius:999px;background:#fff;box-shadow:0 0 6px #fff9,0 0 14px #ffb78c88;} html body #premiumPage .premium-profile-showcase {max-width:1200px;} html body #premiumPage .premium-profile-example.is-far-before {z-index:0;transform:translateX(-173%) translateY(43px) rotate(-19deg) scale(.78);opacity:.5;} html body #premiumPage .premium-profile-example.is-far-after {z-index:0;transform:translateX(73%) translateY(43px) rotate(19deg) scale(.78);opacity:.5;} @media(max-width:760px){html body #premiumPage .premium-profile-example.is-far-before,html body #premiumPage .premium-profile-example.is-far-after {opacity:0;pointer-events:none;}} /* PREMIUM_CONTROLS_V7_END */ /* PREMIUM_LAYOUT_V8: continuous background, calm tariffs and a native episode rail. */ html body #premiumPage {position:relative;isolation:isolate;background:transparent!important;} html body #premiumPage::before { content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse at 18% 18%,#c56c8d20,transparent 55%),radial-gradient(ellipse at 78% 28%,#ed9a6430,transparent 55%),radial-gradient(ellipse at 55% 85%,#9674d825,transparent 60%),#0a090d; } html body #premiumPage .premium-universe-heading::before {content:none!important;} html body #premiumPage .premium-plan-card {height:auto!important;min-height:0!important;animation:none!important;padding:32px 24px 24px!important;} html body #premiumPage .premium-plan-card::before, html body #premiumPage .premium-plan-card::after {content:none!important;display:none!important;animation:none!important;} html body #premiumPage .premium-plans {align-items:end!important;} html body #premiumPage .premium-plan-price {min-height:0!important;} html body #premiumPage .premium-plan-card ul {margin-top:10px!important;margin-bottom:24px!important;} html body #premiumPage .premium-experience-copy p, html body #premiumPage .premium-faq-answer p, html body #premiumPage .premium-plan-card {font-family:"Unbounded",sans-serif!important;} html body #premiumPage .premium-experience-copy p {font-size:13px!important;line-height:1.9!important;font-weight:600!important;} html body #premiumPage .premium-plan-meta {font-family:"Unbounded",sans-serif;font-size:10px;} html body #premiumPage .premium-questions summary {text-transform:none!important;} html body #premiumPage .premium-offline-story {width:100%;} html body #premiumPage .premium-offline-rail-wrap {width:min(1200px,100%);margin:26px auto 0;} html body #premiumPage #premiumEpisodesDemo {display:block;width:100%;height:245px;border:0;background:transparent;} html body #premiumPage .premium-questions details, html body #premiumPage .premium-questions details:is(:hover,[open]) {background:#ffffff07;box-shadow:none!important;border:0!important;transition:background .22s;} html body #premiumPage .premium-questions details:hover {background:#ffffff10;} html body #premiumPage .premium-questions summary {position:relative;padding-right:28px;color:#fff!important;} html body #premiumPage .premium-questions summary::after, html body #premiumPage .premium-questions details[open] summary::after { content:""!important;position:absolute;right:3px;top:calc(50% - 6px);float:none;display:block; width:8px;height:8px;border:solid #fff;border-width:0 2px 2px 0;margin:0; transform:rotate(45deg);transition:transform .26s ease;text-shadow:none;box-shadow:none; } html body #premiumPage .premium-questions details.is-expanded summary::after {transform:rotate(225deg);} html body #premiumPage .premium-faq-answer {height:0;overflow:hidden;} html body #premiumPage .premium-faq-answer p {margin:0;padding:0 0 22px;color:#c9c4cd;font-size:11px;line-height:1.9;font-weight:500;} @media(max-width:760px){ html body #premiumPage .premium-experience-copy p {font-size:11px!important;} html body #premiumPage .premium-plans {gap:38px!important;} } /* PREMIUM_LAYOUT_V8_END */ /* PREMIUM_SCROLL_REVEAL_V1: keep page geometry while revealing nearby content. */ html body #premiumPage.premium-has-reveal .premium-reveal-item { transition-property:opacity,translate,background,border-color,transform,box-shadow; transition-duration:.6s,.6s,.25s,.25s,.25s,.25s; transition-timing-function:cubic-bezier(.2,.7,.3,1); } html body #premiumPage.premium-has-reveal .premium-reveal-item:not(.is-premium-revealed) {opacity:0;translate:0 24px;} html body #premiumPage.premium-has-reveal .premium-reveal-item.is-premium-revealed {opacity:1;translate:0 0;} html body #premiumPage .premium-profile-story.premium-reveal-item:not(.is-premium-visible) *, html body #premiumPage .premium-profile-story.premium-reveal-item:not(.is-premium-visible) *::before, html body #premiumPage .premium-profile-story.premium-reveal-item:not(.is-premium-visible) *::after {animation-play-state:paused!important;} html body #premiumPage .premium-offline-rail-wrap, html body #premiumPage #premiumEpisodesDemo {background:transparent!important;border:0!important;box-shadow:none!important;} html body #premiumPage #premiumEpisodesDemo {height:205px;min-height:0;} @media(prefers-reduced-motion:reduce){ html body #premiumPage.premium-has-reveal .premium-reveal-item {opacity:1!important;translate:none!important;transition:none!important;} } /* Match the embedded document color scheme so its transparent canvas stays transparent. */ html body #premiumPage #premiumEpisodesDemo {color-scheme:dark;background:transparent!important;} /* Explicit reference price sits to the right of the payable amount. */ html body #premiumPage .premium-plan-price > .premium-plan-rub { display:flex!important;flex-direction:row!important;align-items:baseline!important; gap:10px!important;flex-wrap:nowrap!important;white-space:nowrap!important; width:max-content;max-width:100%; } html body #premiumPage .premium-plan-price .premium-old-price {order:2;} html body #premiumPage .premium-plan-price strong {order:1;} html body #premiumPage .premium-plan-price > .premium-plan-rub > :is(strong,s) { display:inline-block!important;flex:0 0 auto;width:auto;margin:0!important; } /* Emphasize the middle three-month plan with actual layout dimensions. */ @media(min-width:761px){ html body #premiumPage .premium-plans {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)!important;} html body #premiumPage .premium-plan-card--quarter {padding:35.2px 26.4px 26.4px!important;border-radius:26.4px!important;} html body #premiumPage .premium-plan-card--quarter h2 {font-size:26.4px!important;margin-bottom:7.7px!important;} html body #premiumPage .premium-plan-card--quarter .premium-plan-price {margin-bottom:13.2px!important;} html body #premiumPage .premium-plan-card--quarter .premium-plan-price > .premium-plan-rub {gap:11px!important;} html body #premiumPage .premium-plan-card--quarter .premium-plan-price > div:nth-child(2) strong {font-size:39.6px!important;} html body #premiumPage .premium-plan-card--quarter .premium-old-price {font-size:14.3px!important;} html body #premiumPage .premium-plan-card--quarter .premium-plan-meta {font-size:11px;min-height:30.8px;margin-bottom:15.4px;} html body #premiumPage .premium-plan-card--quarter ul {gap:13.2px!important;margin-top:11px!important;margin-bottom:26.4px!important;padding-top:15.4px!important;font-size:12.1px!important;} html body #premiumPage .premium-plan-card--quarter li {gap:13.2px;min-height:28.6px;} html body #premiumPage .premium-plan-card--quarter .premium-perk-icon {flex-basis:26.4px;width:26.4px;height:28.6px;} html body #premiumPage .premium-plan-card--quarter .premium-perk-icon svg {width:24.2px;height:24.2px;} } @media(min-width:761px) and (max-width:1050px){ html body #premiumPage .premium-plan-card--quarter h2 {font-size:23.1px!important;} html body #premiumPage .premium-plan-card--quarter li {font-size:11px!important;gap:7.7px;} } @media(min-width:761px){ } /* Compact static purchase buttons and more legible reference prices. */ html body #premiumPage .premium-old-price {font-size:18px!important;line-height:1.2!important;} html body #premiumPage .premium-plan-card--quarter .premium-old-price {font-size:19.8px!important;} @media(min-width:761px){ } @media(max-width:760px){ html body #premiumPage .premium-old-price, html body #premiumPage .premium-plan-card--quarter .premium-old-price {font-size:16px!important;} } @media(min-width:761px){ } /* Scoped local Premium adjustments, keeping the existing desktop geometry. */ html body #premiumPage .premium-plan-card {--plan-accent:#5ab8ff;} html body #premiumPage .premium-plan-card--quarter {--plan-accent:#ff8a5c;} html body #premiumPage .premium-plan-card--year {--plan-accent:#a56bff;} html body #premiumPage.premium-has-reveal .premium-reveal-item {transition-duration:.32s,.32s,.2s,.2s,.2s,.2s;} html body #premiumPage.premium-has-reveal .premium-reveal-item:not(.is-premium-revealed) {translate:0 12px;} html body #premiumPage .premium-profile-example__background {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.7;pointer-events:none;} html body #premiumPage .premium-profile-example__banner,html body #premiumPage .premium-profile-example__identity {position:relative;z-index:1;} html body #premiumPage .premium-profile-example__identity {padding-bottom:14px;text-shadow:0 2px 6px #000;} html body #premiumPage .premium-profile-example {padding-bottom:12px!important;} /* A parent control owns hover and navigation for these two crowns. */ html body .header-premium-action .premium-code-badge,html body .hero-premium .premium-code-badge {background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important;filter:none!important;pointer-events:none;} html body .header-premium-action .premium-code-badge {color:#fff!important;} html body .hero-premium .premium-code-badge {color:#ff9874!important;} html body .header-premium-action .premium-code-badge::before,html body .header-premium-action .premium-code-badge::after,html body .hero-premium .premium-code-badge::before,html body .hero-premium .premium-code-badge::after {content:none!important;} @keyframes premium-payment-pop {from {opacity:0;transform:translateY(10px) scale(.98);}} @keyframes premium-payment-peek {from {transform:translate(-50%,40px);opacity:0;}} @keyframes premium-payment-sheen {0%,60% {transform:translateX(-120%);}90%,100% {transform:translateX(120%);}} @media(max-width:760px) { html body #premiumPage .premium-plans {display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:min(360px,100%);margin-inline:auto;gap:38px!important;} html body #premiumPage .premium-plan-card--month {order:0!important;} html body #premiumPage .premium-plan-card--quarter {order:1!important;} html body #premiumPage .premium-plan-card--year {order:2!important;margin-top:64px;} html body #premiumPage .premium-plan-card {padding:26px 20px 20px!important;} html body #premiumPage .premium-plan-card h2 {font-size:22px!important;} html body #premiumPage .premium-plan-card li {font-size:10.5px!important;} } @media(max-width:520px) { } @media(max-width:360px) {} @media(prefers-reduced-motion:reduce) {} html body #premiumPage .premium-profile-example__identity strong {color:var(--profile-demo-color,#ffc0a1)!important;background:none!important;-webkit-text-fill-color:currentColor!important;text-shadow:0 1px 4px #000!important;animation:none!important;} @media(max-width:760px){html body #premiumPage .premium-plan-card--year {margin-top:0!important;}} html body #premiumPaymentModal{position:fixed!important;inset:0!important;z-index:1000!important;padding:0!important;margin:0!important;display:block!important;overflow:visible!important;background:none!important;border:0!important;backdrop-filter:none!important;} html body #premiumPaymentModal[hidden]{display:none!important;} /* Canonical Premium tariff controls. One definition per state. */ html body #premiumPage .premium-plan-card>button[data-premium-buy]{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:none!important;min-height:44px!important;height:44px!important;margin:0!important;padding:0 20px!important;border:0!important;border-radius:999px!important;font:900 14px/1 Unbounded,sans-serif!important;letter-spacing:.025em!important;white-space:nowrap!important;text-align:center!important;color:#fff!important;background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)!important;transform:none!important;transition:background .2s ease,box-shadow .2s ease!important;} html body #premiumPage .premium-plan-card>button[data-premium-buy]:hover{background:rgba(255,255,255,.10)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)!important;} html body #premiumPage .premium-plan-card>button[data-premium-buy]:active{background:rgba(255,255,255,.14)!important;} html body #premiumPage .premium-plan-card>button[data-premium-buy]:focus-visible{outline:3px solid #fff;outline-offset:3px;} html body #premiumPage .premium-plan-card>button[data-premium-buy]::before,html body #premiumPage .premium-plan-card>button[data-premium-buy]::after{content:none!important;} html body #premiumPage .premium-buy-label{display:block;text-align:center;} html body #premiumPage .premium-plan-card:hover{transform:none!important;box-shadow:0 0 32px color-mix(in srgb,var(--plan-accent) 24%,transparent)!important;} html body #premiumPage .premium-tariff-tag{position:absolute;top:-18px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);display:block;width:max-content;max-width:none;height:auto;min-height:0;padding:10px 18px;border-radius:999px;font:900 14px/1 Unbounded,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-align:center;color:#fff;background:#5a352c;box-shadow:inset 0 0 0 1px #ff8a5c99;animation:none;} html body #premiumPage .premium-plan-card--year .premium-tariff-tag{background:#3b2459;box-shadow:inset 0 0 0 1px #a56bff99;} html body #premiumPage .premium-plan-saving{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:6px 11px;border:0;border-radius:999px;outline:0;box-shadow:none;background:color-mix(in srgb,var(--plan-accent) 22%,transparent);color:color-mix(in srgb,var(--plan-accent) 45%,#fff);font:800 11px/1.2 Unbounded,sans-serif;white-space:nowrap;letter-spacing:.01em;} html body #premiumPage .premium-plan-saving[hidden],html body #premiumPage .premium-plan-meta[hidden]{display:none!important;} html body #premiumPage .premium-tariff-mascot{position:absolute;z-index:0;left:calc(50% + 62px);right:auto;top:-95px;bottom:auto;width:110px;height:147px;object-fit:contain;mix-blend-mode:normal;transform:rotate(12deg);animation:premium-mascot-float 5s ease-in-out infinite;pointer-events:none;} html body #premiumPage.premium-has-reveal .premium-reveal-item{transition:opacity .32s cubic-bezier(.2,.7,.3,1),translate .32s cubic-bezier(.2,.7,.3,1);} @media(max-width:760px){ html body #premiumPage.premium-page.premium-page--universe{padding-top:100px!important;} html body #premiumPage .premium-universe-heading{margin:0 auto!important;padding:0!important;min-height:0!important;} html body #premiumPage .premium-universe-heading h1{margin:0!important;} html body #premiumPage .premium-hero--plans{margin-top:38px!important;padding-top:0!important;} html body #premiumPage .premium-plans-scene{margin-top:0!important;} html body #premiumPage .premium-plan-card>button[data-premium-buy]{font-size:12px!important;} html body #premiumPage .premium-tariff-mascot{display:none!important;} html body #premiumPage .premium-tariff-tag{font-size:12px;} } /* Keep purchase after benefits; reveal timing is independent of asset loading. */ html body #premiumPage .premium-plan-card>button[data-premium-buy]{order:10!important;margin-top:auto!important;} html body #premiumPage.premium-has-reveal .premium-reveal-item{transition-property:opacity,translate;transition-duration:.38s,.38s;transition-delay:var(--premium-reveal-delay,0ms),var(--premium-reveal-delay,0ms);} html body #premiumPage.premium-has-reveal .premium-reveal-item:not(.is-premium-revealed){opacity:0;translate:0 18px;} html body #premiumPage.premium-has-reveal .premium-reveal-item.is-premium-revealed{opacity:1;translate:0 0;} @media(max-width:760px){ html body #premiumPage .premium-experience{margin-top:38px!important;gap:38px!important;} html body #premiumPage .premium-experience>article{margin-top:0!important;margin-bottom:38px!important;padding-top:0!important;padding-bottom:0!important;min-height:0!important;} html body #premiumPage .premium-experience-copy{margin-top:0!important;margin-bottom:20px!important;} html body #premiumPage .premium-profile-deck{height:290px!important;} html body #premiumPage .premium-profile-showcase{margin-top:0!important;margin-bottom:0!important;} html body #premiumPage .premium-questions{margin-top:38px!important;padding-top:0!important;} } @media(max-width:760px){html body #premiumPage .premium-experience{display:block!important;}} /* PREMIUM_MOBILE_GAPS_V1: tighter spacing on phones (series -> profile heading -> cards -> FAQ). */ @media(max-width:760px){ html body #premiumPage .premium-offline-rail-wrap{margin-top:14px!important;margin-bottom:-20px!important;} html body #premiumPage .premium-profile-story .premium-experience-copy{margin-bottom:6px!important;} html body #premiumPage .premium-profile-showcase{padding:8px 0 30px!important;} html body #premiumPage .premium-profile-deck{height:230px!important;} html body #premiumPage .premium-experience>article.premium-profile-story{margin-bottom:0!important;} html body #premiumPage .premium-questions{margin-top:0!important;} } /* PREMIUM_SHOWCASE_NICKS_V1: nicknames like on public profiles (plain = white, Premium colors = color/gradient + glint). */ html body #premiumPage .premium-profile-example__identity strong{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;animation:none!important;} html body #premiumPage .premium-profile-example__identity strong.has-showcase-name-color{ color:var(--showcase-name-1)!important;-webkit-text-fill-color:transparent!important; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) 0 0/250% 100% no-repeat,linear-gradient(90deg,var(--showcase-name-1),var(--showcase-name-2)) 0 0/100% 100% no-repeat!important; -webkit-background-clip:text!important;background-clip:text!important; animation:premium-showcase-nick-glint 3.2s ease-in-out infinite!important;text-shadow:none!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75)); } @keyframes premium-showcase-nick-glint{0%,35%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}} @media(prefers-reduced-motion:reduce){html body #premiumPage .premium-profile-example__identity strong.has-showcase-name-color{animation:none!important;}} html body #premiumPage .premium-profile-deck video.premium-profile-example__avatar{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;} /* PREMIUM_SAVING_PILL_V2: "выгода" pill as in animehub-pricing-v3.html */ html body #premiumPage .premium-plan-card [data-plan-saving]{background:color-mix(in srgb,var(--plan-accent,#FF8A5C) 22%,transparent)!important;color:color-mix(in srgb,var(--plan-accent,#FF8A5C) 45%,#fff)!important;box-shadow:none!important;} /* PREMIUM_PLAN_HOVER_GLOW_V1: glow fades in/out smoothly; reveal timing unchanged. */ html body #premiumPage .premium-plan-card{transition:box-shadow .35s ease;} html body #premiumPage.premium-has-reveal .premium-plan-card.premium-reveal-item{transition-property:opacity,translate,box-shadow;transition-duration:.38s,.38s,.35s;transition-timing-function:cubic-bezier(.2,.7,.3,1),cubic-bezier(.2,.7,.3,1),ease;transition-delay:var(--premium-reveal-delay,0ms),var(--premium-reveal-delay,0ms),0s;} @media(prefers-reduced-motion:reduce){html body #premiumPage .premium-plan-card{transition:none!important;}} /* PREMIUM_PLAN_HOVER_GLOW_V2: same 3-layer shadow list in both states, so box-shadow interpolates instead of jumping. */ html body #premiumPage .premium-plan-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 32px color-mix(in srgb,var(--plan-accent,#FF8A5C) 24%,transparent),0 18px 42px rgba(0,0,0,.333)!important;} /* PREMIUM_SHOWCASE_NICKS_V2: original showcase look restored — every nick two-colour with a moving shine (own colour + lilac). */ html body #premiumPage .premium-profile-example__identity strong, html body #premiumPage .premium-profile-example__identity strong.has-showcase-name-color{display:inline-block!important;color:var(--profile-demo-color,#ffb392)!important;background:linear-gradient(105deg,var(--profile-demo-color,#ffb392) 8%,#fff 28%,var(--profile-demo-color,#ffb392) 43%,#e6c1ff 66%,var(--profile-demo-color,#ffb392) 90%) 0 0/240% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));animation:premium-profile-nick-shine 4s linear infinite!important;} @media(prefers-reduced-motion:reduce){html body #premiumPage .premium-profile-example__identity strong{animation:none!important;}} /* PREMIUM_PLAN_HOVER_GLOW_V3: slower, softer glow fade for tariff cards. */ html body #premiumPage .premium-plan-card{transition:box-shadow .6s cubic-bezier(.25,.1,.25,1)!important;} html body #premiumPage.premium-has-reveal .premium-plan-card.premium-reveal-item{transition-property:opacity,translate,box-shadow!important;transition-duration:.38s,.38s,.6s!important;transition-timing-function:cubic-bezier(.2,.7,.3,1),cubic-bezier(.2,.7,.3,1),cubic-bezier(.25,.1,.25,1)!important;transition-delay:var(--premium-reveal-delay,0ms),var(--premium-reveal-delay,0ms),0s!important;} @media(prefers-reduced-motion:reduce){html body #premiumPage .premium-plan-card{transition:none!important;}} /* PREMIUM_SHOWCASE_NICKS_V3: nick shine always runs (like profile nick glint, which ignores reduced motion / offscreen pause). */ html body #premiumPage .premium-profile-story .premium-profile-deck .premium-profile-example__identity strong{animation:premium-profile-nick-shine 4s linear infinite!important;animation-play-state:running!important;} /* PREMIUM_DESKTOP_GAPS_V1: smaller gap from the offline series rail to "Оформление профиля" on desktop. */ @media(min-width:761px){html body #premiumPage .premium-offline-story.premium-reveal-item{margin-bottom:44px!important;}} /* PREMIUM_TRIAL_OFFER_V1: trial popup host (same layer as the payment modal) and banner at the top of /premium. */ html body #premiumTrialModal{position:fixed!important;inset:0!important;z-index:1000!important;display:block!important;margin:0!important;padding:0!important;background:none!important;border:0!important;} html body #premiumTrialModal[hidden]{display:none!important;} html body #premiumPage .premium-trial-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1100px,calc(100% - 32px));margin:8px auto 24px;padding:18px 18px 18px 26px;border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,#3d2523 0%,transparent 60%),radial-gradient(110% 140% at 100% 100%,#2b1b35 0%,transparent 60%),#17111a;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px -36px rgba(0,0,0,.85);} html body #premiumPage .premium-trial-banner[hidden]{display:none!important;} html body #premiumPage .premium-trial-banner__copy{display:grid;gap:6px;min-width:0;} html body #premiumPage .premium-trial-banner__copy strong{font:800 16px/1.3 Unbounded,sans-serif;color:#f6eef2;} html body #premiumPage .premium-trial-banner__copy strong b{color:#FF8B62;font-weight:800;} html body #premiumPage .premium-trial-banner__copy small{font:500 12px/1.4 Unbounded,sans-serif;color:#a99aa6;} html body #premiumPage .premium-trial-banner__button{position:relative;overflow:hidden;isolation:isolate;flex:none;height:50px;padding:0 28px;border:0;border-radius:999px;background:#FF8B62;color:#fff;font:700 14px/1 Unbounded,sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s ease;} html body #premiumPage .premium-trial-banner__button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);transform:translateX(-120%);animation:premium-trial-sheen 4s ease-in-out infinite;} @keyframes premium-trial-sheen{0%,60%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}} html body #premiumPage .premium-trial-banner__button:hover{background:#FF9C78;} html body #premiumPage .premium-trial-banner__button:disabled{cursor:progress;opacity:.75;} @media(max-width:760px){html body #premiumPage .premium-trial-banner{flex-direction:column;align-items:stretch;text-align:center;gap:14px;margin-bottom:20px;padding:16px;border-radius:20px;}html body #premiumPage .premium-trial-banner__copy strong{font-size:13px;}html body #premiumPage .premium-trial-banner__copy small{font-size:10px;}html body #premiumPage .premium-trial-banner__button{height:46px;font-size:12px;}} @media(prefers-reduced-motion:reduce){html body #premiumPage .premium-trial-banner__button::before{animation:none;}} /* PREMIUM_TRIAL_OFFER_V2: Telegram confirm button styled like a payment method row; Premium countdown banner. */ html body #premiumPage .premium-tg-confirm{flex:none;display:grid;grid-template-columns:30px auto 20px;align-items:center;gap:12px;min-width:290px;padding:14px 16px 14px 18px;border:0;border-radius:20px;cursor:pointer;text-align:left;color:#f6eef2;background:rgba(255,255,255,.09);transition:background .2s ease;} html body #premiumPage .premium-tg-confirm:hover{background:rgba(255,255,255,.14);} html body #premiumPage .premium-tg-confirm:focus-visible{outline:3px solid #fff;outline-offset:3px;} html body #premiumPage .premium-tg-confirm:disabled{cursor:progress;opacity:.7;} html body #premiumPage .premium-tg-confirm__icon{display:grid;place-items:center;width:30px;height:30px;} html body #premiumPage .premium-tg-confirm__icon img{width:28px;height:28px;object-fit:contain;} html body #premiumPage .premium-tg-confirm__name{font:700 15px/1.2 Unbounded,sans-serif;white-space:nowrap;} html body #premiumPage .premium-tg-confirm__arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;} html body #premiumPage .premium-until-banner{display:grid;justify-items:center;gap:16px;width:min(1100px,calc(100% - 32px));margin:8px auto 24px;padding:22px 20px 24px;border-radius:24px;text-align:center;background:radial-gradient(120% 140% at 0% 0%,#3d2523 0%,transparent 60%),radial-gradient(110% 140% at 100% 100%,#2b1b35 0%,transparent 60%),#17111a;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px -36px rgba(0,0,0,.85);} html body #premiumPage .premium-until-banner[hidden]{display:none!important;} html body #premiumPage .premium-until-banner__title{margin:0;font:800 15px/1.3 Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#f6eef2;} html body #premiumPage .premium-until-banner__timer{display:grid;grid-template-columns:repeat(4,88px);gap:12px;} html body #premiumPage .premium-until-banner__timer span{display:grid;justify-items:center;gap:8px;padding:14px 6px 12px;border-radius:18px;background:rgba(255,255,255,.06);} html body #premiumPage .premium-until-banner__timer b{font:800 30px/1 Unbounded,sans-serif;color:#fff;font-variant-numeric:tabular-nums;} html body #premiumPage .premium-until-banner__timer span:first-child b{color:#FF8B62;} html body #premiumPage .premium-until-banner__timer small{font:600 10px/1 Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#a99aa6;} @media(max-width:760px){html body #premiumPage .premium-tg-confirm{min-width:0;width:100%;grid-template-columns:26px 1fr 18px;padding:13px 14px;border-radius:16px;}html body #premiumPage .premium-tg-confirm__name{font-size:12px;}html body #premiumPage .premium-until-banner{gap:12px;margin-bottom:20px;padding:16px 12px 18px;border-radius:20px;}html body #premiumPage .premium-until-banner__title{font-size:11px;}html body #premiumPage .premium-until-banner__timer{grid-template-columns:repeat(4,minmax(0,64px));gap:8px;}html body #premiumPage .premium-until-banner__timer span{padding:10px 4px 9px;border-radius:14px;}html body #premiumPage .premium-until-banner__timer b{font-size:20px;}html body #premiumPage .premium-until-banner__timer small{font-size:7.5px;letter-spacing:.04em;}} html body #premiumPage .premium-tg-confirm,html body #premiumPage .premium-tg-confirm__name{text-transform:none!important;letter-spacing:.01em!important;} /* PREMIUM_TRIAL_OFFER_V3: no light border over the gradient (it looked uneven). */ html body #premiumPage .premium-trial-banner,html body #premiumPage .premium-until-banner{border:0!important;} /* PREMIUM_UNTIL_TIMER_V2: no card background; title and labels use the page heading font (text1), title size kept. */ html body #premiumPage .premium-until-banner{background:none!important;box-shadow:none!important;border:0!important;padding:8px 0 4px!important;} html body #premiumPage .premium-until-banner__title.text1{font-size:15px!important;line-height:1.3!important;text-transform:uppercase!important;letter-spacing:.02em!important;} html body #premiumPage .premium-until-banner__timer small.text1{font-size:9px!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#a99aa6;} @media(max-width:760px){html body #premiumPage .premium-until-banner__title.text1{font-size:11px!important;}html body #premiumPage .premium-until-banner__timer small.text1{font-size:7px!important;}} /* AVATAR_CROWN_OFF_V1: safety net for crowns placed on avatars by other code paths. */ html body .premium-avatar-shell > .premium-crown{display:none!important;} /* PREMIUM_TRIAL_OFFER_V4: lower Telegram button in the top banner. */ html body #premiumPage .premium-tg-confirm{padding:9px 14px 9px 16px!important;} /* COMMENT_PLACEHOLDER_ONE_LINE_V1: long placeholder no longer wraps and doubles the comment field height (field-sizing:content). */ html body .episode-comment-form textarea::placeholder{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} /* SIMILAR_STACK_MOBILE_V1: title closer to the carousel, arrows raised and centred under it. */ @media(max-width:760px){ html body #detailPage .similar-stack__info{padding-top:8px!important;grid-template-rows:auto auto!important;row-gap:12px!important;align-content:start!important;justify-items:center!important;} html body #detailPage .similar-stack__info h3{align-self:start!important;} html body #detailPage .similar-stack__navigation{align-self:start!important;justify-content:center!important;width:auto!important;} } /* AVATAR_CROWN_OFF_V2: profile avatar crown hidden for everyone. */ html body #profileAvatarPremium{display:none!important;} /* POSTER_RELEASE_TIMER_V1: next-episode timer under the poster buttons (scaled Premium countdown); old big boxes hidden. */ html body #detailReleaseCountdown,html body #watchReleaseCountdown{display:none!important;} html body .poster-release-timer{grid-column:1/-1;display:grid;gap:12px;width:100%;margin-top:4px;padding:14px 14px 14px;border-radius:20px;background:rgba(255,255,255,.04);box-sizing:border-box;} html body .poster-release-timer[hidden]{display:none!important;} html body .poster-release-timer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;} html body .poster-release-timer__label{display:inline-flex;align-items:center;gap:7px;font:800 11px/1.2 Unbounded,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FF8B62;white-space:nowrap;} html body .poster-release-timer__label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;} html body .poster-release-timer__date{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.07);font:700 10px/1 Unbounded,sans-serif;color:#d9ccd5;white-space:nowrap;} html body .poster-release-timer__date[hidden]{display:none!important;} html body .poster-release-timer__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} html body .poster-release-timer__tiles[hidden]{display:none!important;} html body .poster-release-timer__tiles span{display:grid;justify-items:center;gap:6px;padding:10px 4px 9px;border-radius:14px;background:rgba(255,255,255,.06);min-width:0;} html body .poster-release-timer__tiles b{font:800 22px/1 Unbounded,sans-serif;color:#fff;font-variant-numeric:tabular-nums;} html body .poster-release-timer__tiles span:first-child b{color:#FF8B62;} html body .poster-release-timer__tiles small.text1{font-size:8px!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#a99aa6;white-space:nowrap;} html body .poster-release-timer__unknown{margin:0;font:700 12px/1.4 Unbounded,sans-serif;color:#d9ccd5;} html body .poster-release-timer__unknown[hidden]{display:none!important;} @media(max-width:760px){html body .poster-release-timer{padding:12px;border-radius:16px;gap:10px;}html body .poster-release-timer__tiles b{font-size:18px;}html body .poster-release-timer__tiles small.text1{font-size:7px!important;}}