:root {


  color-scheme: dark;


  --bg: var(--bg-base);


  --panel: var(--bg-surface);


  --panel-2: #0d1218;


  --panel-3: #121922;


  --line: var(--border-default);


  --line-soft: var(--border-subtle);


  --text: #f6f8fa;


  --muted: var(--text-secondary);


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  --blue: #2997d6;


  --blue-soft: rgba(41, 151, 214, .12);


  --danger: var(--status-danger);


  --anime-primary: var(--orange);


  --anime-accent: var(--orange-2);


  --anime-glow: rgba(255, 192, 138, .18);


  --anime-bg: none;


  --radius: 8px;


}





* { box-sizing: border-box; }


html { scroll-behavior: smooth; }


body {


  margin: 0;


  min-height: 100vh;


  background: #040609;


  color: var(--text);


  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


  font-size: 14px;


}


body.is-home {


  background:


    linear-gradient(90deg, rgba(4,6,9,.36), rgba(4,6,9,.96) 22% 78%, rgba(4,6,9,.36)),


    var(--home-hero-bg, none) center top / cover fixed no-repeat,


    #040609;


}


body.is-home::after {


  content: "";


  position: fixed;


  inset: 68px 0 0;


  z-index: -1;


  pointer-events: none;


  opacity: .6;


  background:


    linear-gradient(90deg, rgba(4,6,9,.2), rgba(4,6,9,.98) 18% 82%, rgba(4,6,9,.2)),


    linear-gradient(180deg, transparent 35%, #040609 94%),


    var(--home-hero-bg, none) left top / max(350px, 25vw) 100% no-repeat,


    var(--home-hero-bg, none) right top / max(350px, 25vw) 100% no-repeat;


}


body.is-home .site-shell {


  width: 100%;


  border-right: 0;


  border-left: 0;


  background: rgba(7,11,16,.96);


}


body.home-intro .site-shell {


  animation: home-shell-intro .9s cubic-bezier(.18,.82,.2,1) both;


}


body.home-intro .home-page > section,


body.home-intro .sidebar,


body.home-intro .topbar {


  animation: home-content-intro .8s cubic-bezier(.18,.82,.2,1) both;


}


body.home-intro .home-page > section:nth-child(2) { animation-delay: .07s; }


body.home-intro .home-page > section:nth-child(3) { animation-delay: .12s; }


@keyframes home-shell-intro {


  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }


  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }


}


@keyframes home-content-intro {


  from { opacity: 0; transform: translateY(14px); }


  to { opacity: 1; transform: translateY(0); }


}


html:not([data-theme="light"]) body::before {


  content: "";


  position: fixed;


  inset: 0;


  z-index: -1;


  pointer-events: none;


  opacity: .25;


  background-image:


    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),


    linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);


  background-size: 34px 34px;


  mask-image: linear-gradient(to bottom, black, transparent 78%);


}


body.is-detail {


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  background:


    linear-gradient(90deg, rgba(3,6,9,.46) 0, rgba(3,6,9,.86) 20%, rgba(3,6,9,.98) 36% 64%, rgba(3,6,9,.86) 80%, rgba(3,6,9,.46) 100%),


    linear-gradient(145deg, color-mix(in srgb, var(--anime-secondary) 58%, transparent) 0 14%, transparent 36%),


    linear-gradient(215deg, color-mix(in srgb, var(--anime-primary) 42%, transparent) 0 12%, transparent 34%),


    linear-gradient(180deg, transparent 0 58%, rgba(3,6,9,.94) 94%),


    var(--anime-bg) center top / cover fixed no-repeat,


    var(--anime-dark, var(--bg-base));


  background-attachment: fixed;


}


body.is-detail .logo-hub {


  background: var(--orange);


}


body.is-detail .site-shell {


  width: min(1180px, calc(100% - 96px));


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


  border-color: color-mix(in srgb, var(--anime-secondary) 48%, #17222d);


  background:


    linear-gradient(180deg, color-mix(in srgb, var(--anime-dark) 74%, #0b1117), rgba(7,11,16,.97) 260px),


    rgba(7,11,16,.96);


  box-shadow:


    0 0 0 1px rgba(0,0,0,.4),


    -24px 0 70px color-mix(in srgb, var(--anime-primary) 22%, transparent),


    24px 0 70px color-mix(in srgb, var(--anime-accent) 18%, transparent),


    0 26px 80px rgba(0,0,0,.64);


}


body.is-detail .topbar {


  grid-template-columns: 168px minmax(260px, 520px) 1fr;


}


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


  opacity: .34;


  background-image:


    linear-gradient(115deg, color-mix(in srgb, var(--anime-primary) 22%, transparent), transparent 24%),


    linear-gradient(245deg, color-mix(in srgb, var(--anime-accent) 18%, transparent), transparent 24%),


    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),


    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);


  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;


  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.7) 60%, transparent);


}


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


  content: "";


  position: fixed;


  inset: 0;


  z-index: -1;


  pointer-events: none;


  background:


    var(--anime-bg) left top / max(360px, 27vw) 100% no-repeat,


    var(--anime-bg) right top / max(360px, 27vw) 100% no-repeat;


  filter: saturate(1.12) contrast(1.04) brightness(1.1);


}


button, input, select { font: inherit; }


button, a { -webkit-tap-highlight-color: transparent; }


button { cursor: pointer; }


[hidden] { display: none !important; }


*::-webkit-scrollbar { width: 7px; height: 7px; }


*::-webkit-scrollbar-track { background: #080c11; }


*::-webkit-scrollbar-thumb { background: #2b3c4a; border-radius: 20px; }





.site-shell {


  position: relative;


  isolation: isolate;


  width: min(1480px, 100%);


  min-height: 100vh;


  margin: 0 auto;


  display: grid;


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


  grid-template-rows: 68px 1fr;


  background: var(--panel);


  border-inline: 1px solid #17222d;


  box-shadow: 0 0 70px rgba(0,0,0,.45);


}


.topbar {


  position: sticky;


  top: 0;


  z-index: 40;


  grid-column: 1 / -1;


  display: grid;


  grid-template-columns: 178px minmax(260px, 560px) 1fr;


  align-items: center;


  border-bottom: 1px solid var(--line);


  background:


    linear-gradient(90deg, rgba(9,13,18,.98), rgba(11,16,22,.96)),


    rgba(9,13,18,.96);


  backdrop-filter: blur(20px);


  box-shadow: 0 8px 30px rgba(0,0,0,.16);


}


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


  border-bottom-color: rgba(255,192,138,.34);


  background:


    linear-gradient(90deg,


      rgba(38,22,8,.96),


      rgba(8,13,18,.97) 31% 69%,


      rgba(36,20,7,.96)),


    #091018;


  box-shadow: 0 10px 34px rgba(0,0,0,.32);


}


.logo {


  position: relative;


  isolation: isolate;


  display: inline-flex;


  align-items: center;


  width: max-content;


  padding-left: 22px;


  color: white;


  font-size: 22px;


  font-weight: 900;


  letter-spacing: -1.1px;


  text-decoration: none;


}


.logo::after {


  content: "";


  position: absolute;


  z-index: 4;


  inset: -8px -12px;


  pointer-events: none;


  opacity: 0;


  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.92) 48%, rgba(255,196,90,.5) 52%, transparent 72%);


  mix-blend-mode: screen;


  transform: translateX(-120%) skewX(-12deg);


  clip-path: inset(0 100% 0 0);


}


body.fox-moment .logo::after {


  animation: fox-logo-shine .78s .06s ease-out both;


}


.logo-anime,


.logo-hub {


  position: relative;


  z-index: 2;


}


.logo-hub {


  margin-left: 2px;


  padding: 1px 4px 2px;


  border-radius: 3px;


  background: var(--orange);


  color: var(--bg-base);


  transform-origin: center;


  transition:


    background .28s ease,


    border-radius .28s ease,


    box-shadow .28s ease,


    transform .28s ease;


}


.logo-tail {


  position: absolute;


  z-index: 1;


  left: 8px;


  right: auto;


  bottom: -9px;


  width: 32px;


  height: 24px;


  background: url("./fox-tail.png") center / contain no-repeat;


  filter: drop-shadow(0 3px 5px rgba(0,0,0,.36));


  opacity: 0;


  pointer-events: none;


  filter: blur(1px);


  transform: translate(7px, -2px) rotate(5deg) scale(.82);


  transform-origin: right top;


  transition:


    opacity .32s ease,


    filter .32s ease,


    transform .42s cubic-bezier(.22,.72,.25,1);


  transition-delay: 0s;


}


.logo:hover .logo-hub,


.logo:focus-visible .logo-hub {


  border-radius: 4px 4px 6px 6px;


  background: linear-gradient(145deg, var(--accent-default) 0%, #ffb27a 52%, #ff9d68 100%);


  box-shadow:


    inset 0 1px 0 rgba(255,255,255,.2),


    0 3px 10px rgba(255, 192, 138, .28);


  transform: translateY(0) scale(1.01);


}


.logo:hover .logo-tail,


.logo:focus-visible .logo-tail {


  opacity: 1;


  filter: drop-shadow(0 3px 5px rgba(0,0,0,.36)) blur(0);


  transform: translate(0, 0) rotate(-13deg) scale(1);


  transition-delay: .14s;


}


body.fox-moment .nav a.is-active,


body.fox-moment .nav a[data-nav="home"],


body.fox-moment .round-play {


  animation: fox-accent-pop .9s .12s ease-out both;


}


@keyframes fox-logo-shine {


  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-120%) skewX(-12deg); }


  20% { opacity: .9; }


  70% { opacity: .7; clip-path: inset(0 0 0 0); }


  100% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(115%) skewX(-12deg); }


}


@keyframes fox-accent-pop {


  0%, 100% { filter: none; }


  35% { filter: brightness(1.18); }


}


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


  .logo-hub,


  .logo-tail {


    transition: none;


  }


  body.fox-moment .logo::after,


  body.fox-moment .nav a,


  body.fox-moment .round-play {


    animation: none;


  }


}


.top-search {


  height: 42px;


  display: grid;


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


  margin-left: 18px;


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


  border-radius: 11px;


  background: rgba(35,36,40,.92);


  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.18);


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


}


.top-search input {


  grid-column: 2;


  grid-row: 1;


  min-width: 0;


  padding: 0 14px 0 2px;


  border: 0;


  outline: 0;


  background: transparent;


  color: white;


  font-size: 14px;


}


.top-search button, .icon-button {


  border: 0;


  background: transparent;


  color: #b6b7b7;


}


.top-search button {


  position: relative;


  grid-column: 1;


  grid-row: 1;


  width: 42px;


  height: 42px;


  font-size: 0;


  color: #a9abb2;


}


.top-search button::before {


  content: "";


  display: block;


  width: 18px;


  height: 18px;


  margin: auto;


  background: currentColor;


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


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


}


.top-search button::after {


  content: none;


}


.top-actions {


  position: relative;


  justify-self: end;


  display: flex;


  align-items: center;


  gap: 12px;


  padding-right: 18px;


}


.icon-button { width: 34px; height: 34px; }


.notification-button {


  position: relative;


  width: 38px;


  height: 38px;


  display: grid;


  place-items: center;


  border: 1px solid var(--line);


  border-radius: 50%;


  background: rgba(13,17,22,.74);


  color: var(--muted);


}


.notification-button:hover,


.notification-button.is-active {


  border-color: color-mix(in srgb, var(--orange) 58%, var(--line));


  color: var(--orange);


}


.notification-button b {


  position: absolute;


  top: -4px;


  right: -4px;


  min-width: 17px;


  height: 17px;


  display: grid;


  place-items: center;


  padding: 0 4px;


  border-radius: 999px;


  background: var(--orange);


  color: #111;


  font-size: 8px;


  font-weight: 900;


}


.notifications-popover {


  position: absolute;


  top: calc(100% + 12px);


  right: 70px;


  z-index: 30;


  width: min(340px, calc(100vw - 24px));


  overflow: hidden;


  border: 1px solid var(--line);


  border-radius: 14px;


  background: rgba(9,12,16,.96);


  box-shadow: 0 22px 50px rgba(0,0,0,.42);


}


.notifications-popover header {


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: 12px 14px;


  border-bottom: 1px solid var(--line);


}


.notifications-popover header button {


  width: 26px;


  height: 26px;


  border: 1px solid var(--line);


  border-radius: 50%;


  background: transparent;


  color: var(--muted);


}


.notifications-list { display: grid; max-height: 360px; overflow-y: auto; }


.notifications-list > p {


  margin: 0;


  padding: 22px 14px;


  color: var(--muted);


  font-size: 10px;


}


.notification-item {


  display: grid;


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


  gap: 10px;


  padding: 12px 14px;


  border-bottom: 1px solid var(--line);


}


.notification-item img {


  width: 34px;


  height: 34px;


  border-radius: 50%;


  object-fit: cover;


}


.notification-item strong { display: block; font-size: 10px; }


.notification-item p { margin: 3px 0 8px; color: var(--muted); font-size: 9px; line-height: 1.35; }


.notification-actions { display: flex; flex-wrap: wrap; gap: 6px; }


.notification-actions button {


  min-height: 26px;


  padding: 0 10px;


  border: 1px solid var(--line);


  border-radius: 7px;


  background: #14181e;


  color: #d8d8d6;


  font-size: 9px;


  font-weight: 800;


}


.notification-actions button:first-child {


  border-color: var(--orange);


  background: var(--orange);


  color: #111;


}


.theme-toggle {


  display: grid;


  place-items: center;


  border: 1px solid var(--line);


  border-radius: 50%;


  background: var(--panel-3);


  color: var(--orange);


  font-size: 17px;


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


}


.theme-toggle:hover { transform: rotate(12deg) scale(1.05); }


html:not([data-theme="light"]) .theme-toggle:hover {


  border-color: rgba(41,151,214,.55);


}


html:not([data-theme="light"]) .poster-card:hover,


html:not([data-theme="light"]) .mini-card:hover,


html:not([data-theme="light"]) .favorite-card:hover {


  border-color: color-mix(in srgb, var(--orange) 58%, var(--line));


  box-shadow: 0 12px 30px rgba(0,0,0,.42);


}


html:not([data-theme="light"]) .tabs button:not(.is-active),


html:not([data-theme="light"]) .library-tabs button:not(.is-active) {


  color: #8296a8;


}


html:not([data-theme="light"]) .search-modal {


  background: rgba(2,5,8,.86);


}


html:not([data-theme="light"]) .round-play:hover,


html:not([data-theme="light"]) .accent-button:hover,


html:not([data-theme="light"]) .watch-button:hover {


  filter: brightness(1.1);


}


html:not([data-theme="light"]) .top-search:focus-within {


  border-color: rgba(255,192,138,.62);


  background: rgba(40,40,44,.98);


  box-shadow: 0 0 0 3px rgba(255,192,138,.08), 0 10px 28px rgba(0,0,0,.24);


}


html:not([data-theme="light"]) .settings-groups section:hover, html:not([data-theme="light"]) .profile-summary:hover {


  border-color: #2c4050;


}


html:not([data-theme="light"]) .tabs {


  border-color: #1e2b36;


}


.profile-button {


  display: flex;


  align-items: center;


  gap: 9px;


  border: 0;


  background: transparent;


  color: #d8d8d6;


}


.profile-avatar, .settings-avatar {


  display: block;


  overflow: hidden;


  border: 1px solid #9a541a;


  border-radius: 50%;


  background: var(--bg-surface);


  object-fit: cover;


}


.profile-avatar { width: 38px; height: 38px; }





.sidebar {


  position: sticky;


  top: 68px;


  grid-column: 1;


  grid-row: 2;


  height: calc(100vh - 68px);


  display: flex;


  flex-direction: column;


  justify-content: space-between;


  border-right: 0;


  background: transparent;


}


.nav { display: grid; gap: 3px; padding: 15px 11px; }


.nav a, .nav button {


  display: grid;


  grid-template-columns: 24px 1fr;


  align-items: center;


  min-height: 39px;


  padding: 0 12px;


  border: 0;


  border-left: 2px solid transparent;


  border-radius: 5px;


  background: transparent;


  color: #a2a4a4;


  text-align: left;


  text-decoration: none;


  font-size: 12px;


}


.nav a span, .nav button span { color: #d6d6d4; font-size: 15px; }


.nav a:hover,


.nav button:hover,


.nav a.is-active {


  border-left-color: transparent;


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


  color: #fff;


}


.nav a:hover span,


.nav button:hover span,


.nav a.is-active span { color: #fff; }


.nav--footer { border-top: 0; }


.nav-mobile-settings { display: none !important; }





.home-page, .detail-page {


  grid-column: 2;


  grid-row: 2;


  min-width: 0;


  padding: 18px;


}


.section-head, .page-heading {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 16px;


  margin-bottom: 14px;


}


.section-head h2 { margin: 0; font-size: 17px; }


.page-heading h1 { margin: 0; font-size: 28px; }


.eyebrow {


  margin: 0 0 5px;


  color: var(--orange);


  font-size: 10px;


  font-weight: 800;


  letter-spacing: .9px;


  text-transform: uppercase;


}


.link-button, .danger-link {


  border: 0;


  background: transparent;


  color: #a3a5a5;


  font-size: 12px;


}


.danger-link { color: var(--orange); }





.continue-card {


  position: relative;


  isolation: isolate;


  margin-bottom: 22px;


}


.continue-card .section-head { display: none; }


.watch-progress {


  position: relative;


  min-height: 292px;


  overflow: hidden;


  display: grid;


  grid-template-columns: minmax(270px, 44%) minmax(0, 1fr) 52px;


  align-items: center;


  gap: 14px;


  padding: 28px 36px;


  border: 1px solid var(--line);


  border-radius: var(--radius);


  background:


    linear-gradient(90deg, #080d12 0%, rgba(8,13,18,.95) 32%, rgba(8,13,18,.38) 72%, #080d12 100%),


    var(--hero-bg, none) right center / 68% auto no-repeat,


    #0a1016;


  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 45px rgba(0,0,0,.22);


}


.hero-carousel.watch-progress {


  min-height: clamp(390px, 46vw, 560px);


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


  align-items: end;


  gap: 28px;


  padding: 54px 52px;


  border-radius: 0 0 18px 18px;


  background:


    linear-gradient(90deg, rgba(3,6,9,.96) 0%, rgba(3,6,9,.8) 38%, rgba(3,6,9,.18) 72%, rgba(3,6,9,.5) 100%),


    linear-gradient(180deg, rgba(3,6,9,.05) 35%, rgba(3,6,9,.92) 100%),


    var(--hero-bg, none) center / cover no-repeat,


    #080d12;


  box-shadow: 0 22px 60px rgba(0,0,0,.42);


  animation: hero-breathe 7s ease-in-out infinite alternate;


}


.hero-carousel__video-shell {


  position: absolute;


  z-index: 0;


  inset: 0;


  overflow: hidden;


  opacity: 1;


  pointer-events: none;


}


.hero-carousel__video-shell iframe {


  position: absolute;


  z-index: 0;


  top: 50%;


  left: 50%;


  width: max(100%, 177.78vh);


  min-width: 112%;


  height: max(100%, 56.25vw);


  min-height: 112%;


  aspect-ratio: auto;


  border: 0;


  pointer-events: none;


  filter: brightness(1.13) saturate(1.12) contrast(1.03);


  transform: translate(-50%, -50%) scale(1.08);


}


.hero-carousel__video-shell video {


  position: absolute;


  z-index: 0;


  inset: 50% auto auto 50%;


  width: 100%;


  height: 100%;


  min-width: 100%;


  min-height: 100%;


  border: 0;


  object-fit: cover;


  pointer-events: none;


  transform: translate(-50%, -50%);


}


.hero-carousel.has-hero-video::before {


  content: "";


  position: absolute;


  z-index: 1;


  inset: 0;


  pointer-events: none;


  background: none;


}


.hero-carousel.has-hero-video {


  animation: none;


  background: var(--hero-bg, none) center / cover no-repeat, #080d12;


}


.hero-carousel.has-hero-video > *:not(.hero-carousel__video-shell) {


  z-index: 2;


}


.hero-carousel .hero-carousel__copy {


  max-width: 570px;


  padding: 0;


  border: 0;


  border-radius: 0;


  background: transparent;


  backdrop-filter: none;


  text-shadow: 0 2px 9px rgba(0,0,0,.92);


}


.hero-carousel.watch-progress h3 {


  max-width: 620px;


  margin: 10px 0 10px;


  font-size: clamp(34px, 4vw, 54px);


  line-height: 1.02;


  letter-spacing: -1.6px;


  text-wrap: balance;


}


.hero-carousel__eyebrow {


  display: flex;


  align-items: center;


  gap: 8px;


  color: #b8bac1 !important;


  font-size: 11px;


  font-weight: 800;


  letter-spacing: .08em;


  text-transform: uppercase;


}


.hero-carousel__eyebrow::before {


  content: "";


  width: 7px;


  height: 7px;


  flex: 0 0 7px;


  border-radius: 50%;


  background: var(--orange);


  box-shadow: 0 0 12px rgba(255,192,138,.58);


}


.hero-carousel__facts {


  display: flex;


  align-items: center;


  flex-wrap: wrap;


  gap: 8px 12px;


  margin-bottom: 14px;


  color: #c3c5ca;


  font-size: 12px;


  font-weight: 650;


}


.hero-carousel__score {


  color: var(--accent-hover);


}


.hero-carousel__genre {


  padding: 4px 9px;


  border: 1px solid rgba(255,192,138,.22);


  border-radius: 6px;


  background: rgba(255,192,138,.12);


  color: var(--accent-default);


}


.hero-carousel .hero-carousel__description {


  max-width: 500px;


  color: #c0c2c7;


  font-size: 13px;


  line-height: 1.55;


}


.hero-carousel .round-play {


  width: 154px;


  min-width: 154px;


  max-width: 154px;


  justify-self: end;


  height: 52px;


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 10px;


  padding: 0 25px;


  border-radius: 28px;


  background: #fff;


  color: #121722;


  font-size: 13px;


  font-weight: 850;


  white-space: nowrap;


  box-shadow: 0 8px 28px rgba(0,0,0,.34);


  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;


}


.hero-carousel .round-play span { font-size: 15px; }


.hero-carousel .round-play:hover {


  background: var(--orange);


  transform: scale(1.08);


  box-shadow: 0 11px 34px rgba(0,0,0,.45);


}


@keyframes hero-breathe {


  from { background-size: auto, auto, 104% auto, auto; }


  to { background-size: auto, auto, 112% auto, auto; }


}


.watch-progress::after {


  content: "";


  position: absolute;


  inset: auto 0 0;


  height: 2px;


  background: linear-gradient(90deg, var(--orange) 0 18%, transparent 18%);


}


html:not([data-theme="light"]) .watch-progress {


  border-color: rgba(255,128,0,.31);


  box-shadow: inset 0 1px 0 rgba(255,194,96,.06), 0 18px 45px rgba(0,0,0,.28);


}


.watch-progress > * { position: relative; z-index: 1; }


.watch-progress > .hero-carousel__video-shell {


  position: absolute;


  z-index: 0;


  inset: 0;


}


.hero-carousel > .hero-carousel__copy,


.hero-carousel > .round-play {


  min-width: 0;


}


.progress-cover { display: none; }


.watch-progress h3 { margin: 6px 0 9px; font-size: clamp(27px, 4vw, 42px); line-height: 1; }


.watch-progress p { margin: 0; color: #b8b9b8; line-height: 1.55; }


.hero-carousel__meta { color: #fff !important; font-weight: 700; font-size: 12px; }


.hero-carousel__description {


  max-width: 480px;


  margin-top: 13px !important;


  display: -webkit-box;


  -webkit-line-clamp: 3;


  -webkit-box-orient: vertical;


  overflow: hidden;


  font-size: 12px;


}


.progress-line { display: none; }


.round-play {


  width: 48px;


  height: 48px;


  border: 0;


  border-radius: 6px;


  background: var(--orange);


  color: var(--bg-base);


}





.poster-section {


  position: relative;


  isolation: isolate;


  margin-top: 24px;


}


.poster-grid, .results, .library-grid, .catalog-grid {


  display: grid;


  grid-template-columns: repeat(6, minmax(0, 1fr));


  gap: 12px;


}


.poster-grid--new {


  grid-template-columns: repeat(5, minmax(0, 1fr));


}


.poster-card, .mini-card {


  position: relative;


  min-width: 0;


  overflow: hidden;


  border: 1px solid var(--line);


  border-radius: 6px;


  background: linear-gradient(160deg, #111820, #0b1016 78%);


  color: #fff;


  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;


}


.poster-grid:not(.poster-grid--new) .poster-card,


.catalog-grid .poster-card,


.results .poster-card {


  aspect-ratio: 2 / 3;


  border-radius: 12px;


  background: #080b0f;


}


.poster-grid:not(.poster-grid--new) .poster-card::after,


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


.results .poster-card::after {


  content: "";


  position: absolute;


  inset: 0;


  z-index: 1;


  pointer-events: none;


  background: linear-gradient(180deg, transparent 42%, rgba(3,5,8,.38) 62%, rgba(3,5,8,.96) 100%);


  transition: background .25s ease;


}


.poster-grid:not(.poster-grid--new) .poster-card:hover::after,


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


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


  background: linear-gradient(180deg, rgba(3,5,8,.08), rgba(3,5,8,.6) 54%, rgba(3,5,8,.98) 100%);


}


.poster-grid:not(.poster-grid--new) .poster-card > img,


.catalog-grid .poster-card > img,


.results .poster-card > img,


.poster-grid:not(.poster-grid--new) .poster-card > .poster-fallback,


.catalog-grid .poster-card > .poster-fallback,


.results .poster-card > .poster-fallback {


  position: absolute;


  inset: 0;


  width: 100%;


  height: 100%;


  aspect-ratio: auto;


  transition: transform .35s ease, filter .35s ease;


}


.poster-grid:not(.poster-grid--new) .poster-card:hover > img,


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


.results .poster-card:hover > img {


  transform: scale(1.09);


  filter: saturate(1.08);


}


.poster-grid:not(.poster-grid--new) .poster-card > strong,


.catalog-grid .poster-card > strong,


.results .poster-card > strong {


  position: absolute;


  right: 10px;


  bottom: 31px;


  left: 10px;


  z-index: 2;


  min-height: 0;


  margin: 0;


  padding: 0;


  font-size: 13px;


  text-shadow: 0 2px 9px rgba(0,0,0,.9);


}


.poster-grid:not(.poster-grid--new) .poster-card > small,


.catalog-grid .poster-card > small,


.results .poster-card > small {


  position: absolute;


  right: 10px;


  bottom: 11px;


  left: 10px;


  z-index: 2;


  padding: 0;


  overflow: hidden;


  color: #c8d1d9;


  text-overflow: ellipsis;


  white-space: nowrap;


}


.poster-grid:not(.poster-grid--new) .poster-card .badge,


.catalog-grid .poster-card .badge,


.results .poster-card .badge {


  z-index: 4;


  border-radius: 7px;


  background: rgba(5,8,12,.66);


  backdrop-filter: blur(8px);


}


.poster-grid:not(.poster-grid--new) .poster-card,


.catalog-grid .poster-card {


  opacity: 0;


  animation: card-rise .42s ease forwards;


}


.poster-grid:not(.poster-grid--new) .poster-card:nth-child(2n),


.catalog-grid .poster-card:nth-child(2n) { animation-delay: .035s; }


.poster-grid:not(.poster-grid--new) .poster-card:nth-child(3n),


.catalog-grid .poster-card:nth-child(3n) { animation-delay: .07s; }


.poster-grid:not(.poster-grid--new) .poster-card:nth-child(4n),


.catalog-grid .poster-card:nth-child(4n) { animation-delay: .105s; }


@keyframes card-rise {


  from { opacity: 0; filter: blur(4px); }


  to { opacity: 1; filter: blur(0); }


}


.poster-card:hover, .mini-card:hover {


  transform: translateY(-3px);


  border-color: #5a3b18;


  box-shadow: 0 10px 25px rgba(0,0,0,.35);


}


.poster-card img, .poster-fallback {


  display: block;


  width: 100%;


  aspect-ratio: 2 / 2.82;


  object-fit: cover;


  background: linear-gradient(145deg, #251d19, #5a3d2d);


}


.poster-fallback { display: grid; place-items: center; font-size: 34px; font-weight: 900; color: var(--orange); background: #15161a url("/fallback-poster.webp") center / cover no-repeat !important; }


.banner-fallback { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 3 / 1; background: #15161a url("/fallback-banner.webp") center / cover no-repeat; }


.poster-card strong, .poster-card small { display: block; padding-inline: 9px; }


.poster-card strong {


  min-height: 31px;


  margin-top: 8px;


  overflow: hidden;


  font-size: 12px;


  line-height: 1.3;


}


.poster-card small { padding-bottom: 9px; color: var(--muted); font-size: 10px; }


.poster-card__overlay {


  position: absolute;


  inset: 0;


  z-index: 3;


  display: flex;


  flex-direction: column;


  justify-content: flex-end;


  padding: 14px 11px 11px;


  background:


    linear-gradient(180deg, rgba(5,5,5,.12), rgba(5,5,5,.72) 38%, rgba(5,5,5,.97) 100%);


  opacity: 0;


  transform: translateY(8px);


  pointer-events: none;


  transition: opacity .22s ease, transform .22s ease;


}


.poster-card--catalog:hover .poster-card__overlay,


.poster-card--catalog:focus-within .poster-card__overlay {


  opacity: 1;


  transform: translateY(0);


  pointer-events: auto;


}


.poster-card__overlay p {


  margin: 0 0 10px;


  overflow: hidden;


  color: #ddd;


  font-size: 9px;


  line-height: 1.48;


  display: -webkit-box;


  -webkit-line-clamp: 7;


  -webkit-box-orient: vertical;


}


.card-favorite {


  width: 100%;


  min-height: 32px;


  border: 1px solid #31363e;


  border-radius: 6px;


  background: #171b21;


  color: #f1f3f5;


  font-size: 9px;


  font-weight: 800;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);


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


}


.card-favorite:hover,


.card-favorite.is-active {


  border-color: rgba(255,164,119,.72);


  background: #1f2228;


  color: var(--orange-2);


  transform: translateY(-1px);


  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(255,164,119,.12);


}


.card-favorite:disabled { opacity: .55; cursor: wait; }


.badge {


  position: absolute;


  top: 7px;


  left: 7px;


  padding: 3px 6px;


  border-radius: 3px;


  background: rgba(5,5,5,.82);


  color: #ddd;


  font-size: 9px;


  font-weight: 700;


}


#reloadCatalog { color: var(--orange); }


.continue-item {


  min-width: 0;


  overflow: hidden;


  border: 1px solid var(--line);


  border-radius: 6px;


  background: #0d0e0e;


  color: white;


  transition: transform .18s ease, border-color .18s ease;


}


.continue-item:hover {


  transform: translateY(-3px);


  border-color: color-mix(in srgb, var(--orange) 45%, var(--line));


}


.continue-item__cover {


  position: relative;


  height: 96px;


  overflow: hidden;


  background: #151616;


}


.continue-item__cover img,


.continue-item__cover .poster-fallback {


  width: 100%;


  height: 100%;


  object-fit: cover;


  aspect-ratio: auto;


}


.continue-item__cover::after {


  content: "";


  position: absolute;


  inset: 0;


  background: linear-gradient(transparent 35%, rgba(0,0,0,.72));


}


.continue-item__cover > span {


  position: absolute;


  inset: 0;


  z-index: 1;


  display: grid;


  place-items: center;


  color: white;


  font-size: 18px;


  text-shadow: 0 2px 12px #000;


}


.continue-item__body { position: relative; padding: 8px 9px 10px; }


.continue-item__body strong {


  display: block;


  min-height: 30px;


  overflow: hidden;


  font-size: 11px;


  line-height: 1.35;


}


.continue-item__body small {


  display: block;


  margin-top: 3px;


  overflow: hidden;


  color: var(--muted);


  font-size: 8px;


  text-overflow: ellipsis;


  white-space: nowrap;


}


.continue-item__progress {


  height: 3px;


  margin-top: 9px;


  overflow: hidden;


  border-radius: 10px;


  background: #292a2a;


}


.continue-item__progress span {


  display: block;


  width: var(--continue-progress, 0%);


  height: 100%;


  background: var(--orange);


}


.continue-item__body b {


  display: block;


  margin-top: 5px;


  color: var(--muted);


  font-size: 8px;


  font-weight: 500;


}


.continue-empty {


  grid-column: 1 / -1;


  margin: 0;


  padding: 24px;


  border: 1px dashed var(--line);


  border-radius: 6px;


  color: var(--muted);


  text-align: center;


  font-size: 11px;


}


.poster-grid--new .poster-card {


  min-height: 116px;


  display: grid;


  grid-template-columns: 43% 1fr;


  align-items: end;


}


.poster-grid--new .poster-card img, .poster-grid--new .poster-fallback {


  grid-row: 1 / 4;


  height: 116px;


  aspect-ratio: auto;


}


.poster-grid--new .poster-card strong { align-self: end; }


.poster-grid--new .badge { left: calc(43% + 7px); }


.search-section:has(#searchResults:empty) { display: none; }





.catalog-section, .library-section, .settings-section { min-height: 72vh; }


.catalog-toolbar {


  display: grid;


  grid-template-columns: repeat(5, minmax(120px, 1fr));


  gap: 9px;


  margin-bottom: 18px;


}


.catalog-toolbar label {


  display: grid;


  gap: 6px;


  color: var(--muted);


  font-size: 10px;


}


.catalog-toolbar select {


  height: 36px;


  padding: 0 10px;


  border: 1px solid var(--line);


  border-radius: 5px;


  outline: 0;


  background: #101111;


  color: #ddd;


}


.view-switch { display: flex; gap: 5px; }


.view-switch button {


  width: 34px; height: 34px;


  border: 1px solid var(--line);


  border-radius: 5px;


  background: #101111;


  color: #888;


}


.view-switch .is-active { color: var(--orange); border-color: #6a4634; }


.catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }





.library-tabs { display: flex; gap: 26px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }


.library-tabs button {


  padding: 0 0 11px;


  border: 0;


  border-bottom: 2px solid transparent;


  background: transparent;


  color: var(--muted);


}


.library-tabs button.is-active { border-color: var(--orange); color: white; }


.library-section #favoritesGrid {


  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));


  gap: 14px;


  align-items: start;


}


.favorite-card {


  position: relative;


  min-width: 0;


  overflow: hidden;


  border: 1px solid var(--line);


  border-radius: 7px;


  background: linear-gradient(160deg, #111820, #0b1016);


  color: white;


  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;


}


.favorite-card:hover {


  transform: translateY(-3px);


  border-color: color-mix(in srgb, var(--orange) 45%, var(--line));


  box-shadow: 0 12px 28px rgba(0,0,0,.38);


}


.favorite-card__cover {


  position: relative;


  overflow: hidden;


  aspect-ratio: 2 / 2.85;


  background: #151616;


}


.favorite-card__cover::after {


  content: "";


  position: absolute;


  inset: auto 0 0;


  height: 32%;


  background: linear-gradient(transparent, rgba(5,5,5,.9));


  pointer-events: none;


}


.favorite-card__cover img,


.favorite-card__cover .poster-fallback {


  width: 100%;


  height: 100%;


  object-fit: cover;


  aspect-ratio: auto;


}


.favorite-card__body { padding: 10px; }


.favorite-card__body strong {


  display: block;


  min-height: 32px;


  overflow: hidden;


  font-size: 12px;


  line-height: 1.35;


}


.favorite-card__body p {


  min-height: 14px;


  margin: 5px 0 9px;


  overflow: hidden;


  color: var(--muted);


  font-size: 9px;


  text-overflow: ellipsis;


  white-space: nowrap;


}


.favorite-card__body > div {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 8px;


}


.favorite-card__body span { color: var(--orange); font-size: 10px; font-weight: 800; }


.favorite-card__body small { color: var(--muted); font-size: 9px; }


.favorite-remove {


  position: absolute;


  top: 7px;


  right: 7px;


  z-index: 2;


  width: 27px;


  height: 27px;


  display: grid;


  place-items: center;


  padding: 0;


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


  border-radius: 50%;


  background: rgba(7,7,7,.82);


  color: #bbb;


  font-size: 17px;


  opacity: 0;


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


}


.favorite-card:hover .favorite-remove,


.favorite-remove:focus-visible { opacity: 1; }


.favorite-remove:hover { background: #7c251d; color: white; }


.mini-card {


  display: grid;


  grid-template-columns: 86px 1fr;


  gap: 10px;


  min-height: 118px;


  padding: 8px;


}


.mini-card img, .mini-card .poster-fallback { width: 86px; height: 100px; aspect-ratio: auto; border-radius: 4px; }


.mini-card span { color: var(--orange); font-size: 11px; }


.mini-card strong { display: block; margin: 9px 0 5px; font-size: 12px; }


.mini-card small { color: var(--muted); font-size: 10px; }


.history-list { display: grid; }


.history-card {


  display: grid;


  grid-template-columns: 78px minmax(0, 1fr) 44px;


  gap: 14px;


  align-items: center;


  min-height: 82px;


  padding: 8px 6px;


  border-bottom: 1px solid var(--line);


  background: linear-gradient(90deg, rgba(18,25,34,.46), transparent 72%);


  color: white;


}


.history-card__poster { width: 78px; height: 58px; overflow: hidden; border-radius: 4px; }


.history-card__poster img, .history-card__poster .poster-fallback { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }


.history-card__body { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(100px, .6fr) minmax(120px, .8fr); gap: 14px; align-items: center; }


.history-card__body > span { grid-column: 3; grid-row: 1; justify-self: end; color: var(--muted); font-size: 10px; }


.history-card__body strong { grid-column: 1; grid-row: 1; font-size: 12px; }


.history-card__body p { grid-column: 1; grid-row: 2; margin: 0; color: var(--muted); font-size: 10px; }


.history-card__meta { grid-column: 2; grid-row: 1 / 3; }


.history-card__meta b { display: block; color: #ddd; font-size: 10px; }


.history-card__meta small {


  display: block;


  height: 3px;


  margin-top: 8px;


  overflow: hidden;


  border-radius: 5px;


  background: linear-gradient(90deg, var(--orange) 0 var(--history-progress, 0%), #272828 var(--history-progress, 0%));


  color: transparent;


}


.profile-summary {


  display: grid;


  grid-template-columns: 84px 1fr auto;


  gap: 15px;


  align-items: center;


  margin-bottom: 12px;


  padding: 15px;


  border: 1px solid var(--line);


  border-radius: var(--radius);


  background: var(--panel-2);


}


.settings-avatar { width: 84px; height: 84px; }


.profile-summary h2 { margin: 0 0 5px; font-size: 16px; }


.profile-summary p { margin: 0; color: var(--orange); font-size: 11px; }


.profile-summary__email {


  margin-bottom: 5px !important;


  color: #aeb8c2 !important;


  font-size: 13px !important;


}


.profile-summary.is-authenticated {


  grid-template-columns: 1fr;


  justify-items: center;


  padding: 24px;


  text-align: center;


}


.profile-summary.is-authenticated .settings-avatar {


  width: 104px;


  height: 104px;


}


.profile-summary.is-authenticated .profile-summary__identity {


  display: grid;


  justify-items: center;


}


.profile-stats {


  display: grid;


  grid-template-columns: repeat(6, minmax(0, 1fr));


  gap: 8px;


  margin-bottom: 12px;


}


.profile-stats article {


  min-width: 0;


  padding: 13px 10px;


  border: 1px solid var(--line);


  border-radius: 7px;


  background: #10171f;


}


.profile-stats strong {


  display: block;


  margin-bottom: 5px;


  color: var(--orange);


  font-size: 20px;


  line-height: 1;


}


.profile-stats span {


  display: block;


  overflow: hidden;


  color: var(--muted);


  font-size: 8px;


  line-height: 1.35;


  text-overflow: ellipsis;


}


.accent-button {


  min-height: 34px;


  padding: 0 14px;


  border: 1px solid #5e3612;


  border-radius: 5px;


  background: rgba(255,192,138,.12);


  color: var(--orange);


}


.settings-groups { display: grid; gap: 12px; }


.settings-groups section { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }


.settings-groups label, .settings-groups section > button {


  width: 100%;


  min-height: 43px;


  display: flex;


  align-items: center;


  justify-content: space-between;


  padding: 0 14px;


  border: 0;


  border-bottom: 1px solid var(--line-soft);


  background: linear-gradient(180deg, #111820, #0e151c);


  color: #d3d4d4;


  text-align: left;


  font-size: 12px;


}


.settings-groups section > *:last-child { border-bottom: 0; }


.settings-groups input { accent-color: var(--orange); }


.my-comments-section {


  margin-top: 18px;


  padding: 15px;


  border: 1px solid var(--line);


  border-radius: var(--radius);


  background: linear-gradient(160deg, #111820, #0b1016);


}


.my-comments-section .section-head { margin-bottom: 4px; }


.my-comments-section .section-head h2 { font-size: 17px; }


.my-comments-section .section-head > span {


  min-width: 25px;


  height: 25px;


  display: grid;


  place-items: center;


  border-radius: 14px;


  background: rgba(255,192,138,.12);


  color: var(--orange);


  font-size: 10px;


}


.my-comments-list { display: grid; }


.my-comment-card {


  padding: 13px 0;


  border-bottom: 1px solid var(--line);


}


.my-comment-card:last-child { border-bottom: 0; }


.my-comment-card > div,


.my-comment-card footer {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 12px;


}


.my-comment-card > div span { color: var(--orange); font-size: 10px; font-weight: 800; }


.my-comment-card time { color: var(--muted); font-size: 8px; }


.my-comment-card p {


  margin: 8px 0;


  color: #d0d1d0;


  font-size: 11px;


  line-height: 1.5;


}


.my-comment-card footer span { color: var(--muted); font-size: 8px; }


.my-comment-card footer button {


  padding: 0;


  border: 0;


  background: transparent;


  color: #bbb;


  font-size: 9px;


}


.my-comment-card footer button:hover { color: var(--orange); }





.detail-page {


  position: relative;


  isolation: isolate;


  padding-top: 10px;


}


.anime-aura-canvas {


  position: fixed;


  z-index: 2;


  top: 68px;


  bottom: 0;


  left: var(--aura-shell-left, 0);


  right: auto;


  width: var(--aura-shell-width, 100vw) !important;


  height: calc(100vh - 68px);


  pointer-events: none;


  mix-blend-mode: screen;


  display: none;


  clip-path: inset(0);


  transform: none;


}


.detail-page::before,


.detail-page::after {


  display: none !important;


  content: none !important;


}


.detail-page::before {


  top: 68px;


  bottom: 0;


  left: var(--aura-shell-left, 0);


  right: auto;


  width: var(--aura-shell-width, 100vw);


  opacity: .9;


  background:


    radial-gradient(circle at 12% 38%, color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 64%, transparent), transparent 35%),


    radial-gradient(circle at 88% 64%, color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 54%, transparent), transparent 38%);


  filter: saturate(1.5);


  animation: none;


}


.detail-page::after {


  top: 68px;


  left: var(--aura-shell-left, 0);


  right: auto;


  width: var(--aura-shell-width, 100vw);


  height: 64vh;


  opacity: .75;


  background:


    conic-gradient(from 90deg at 50% 50%, transparent, color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 52%, transparent), transparent 36%, color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 48%, transparent), transparent 72%);


  filter: blur(48px) saturate(1.55);


  animation: none;


}


.detail-page > section, .detail-page > div:not(.anime-aura-canvas) {


  position: relative;


  z-index: 3;


}


body.is-detail .topbar,


body.is-detail .sidebar {


  z-index: 5;


}


body[data-anime-aura="fire"] .detail-page::before {


  background:


    radial-gradient(circle at 10% 82%, rgba(255,45,8,.82), transparent 38%),


    radial-gradient(circle at 88% 18%, rgba(255,188,28,.66), transparent 34%),


    linear-gradient(125deg, rgba(255,33,0,.26), transparent 48%, rgba(255,139,0,.22));


}


body[data-anime-aura="shadow"] .detail-page::before {


  opacity: 1;


  background:


    radial-gradient(ellipse at 14% 55%, rgba(116,43,255,.9), transparent 40%),


    radial-gradient(ellipse at 84% 30%, rgba(19,142,255,.72), transparent 43%),


    linear-gradient(150deg, rgba(17,3,56,.94), transparent 62%);


  filter: blur(16px) saturate(1.45);


}


body[data-anime-aura="smoke"] .detail-page::before {


  opacity: .88;


  background:


    radial-gradient(ellipse at 8% 72%, rgba(219,196,170,.58), transparent 43%),


    radial-gradient(ellipse at 90% 25%, rgba(255,67,34,.55), transparent 38%),


    linear-gradient(135deg, rgba(109,91,75,.38), transparent 58%);


  filter: blur(26px) contrast(1.15);


}


body[data-anime-aura="leaves"] .detail-page::before {


  background:


    radial-gradient(circle at 13% 42%, rgba(255,166,7,.86), transparent 38%),


    radial-gradient(circle at 88% 72%, rgba(96,196,50,.58), transparent 39%),


    linear-gradient(125deg, rgba(255,111,0,.22), transparent 48%, rgba(30,145,255,.16));


}


body[data-anime-aura="comet"] .detail-page::before {


  opacity: 1;


  background:


    radial-gradient(circle at 78% 12%, rgba(80,205,255,.88), transparent 31%),


    radial-gradient(circle at 20% 82%, rgba(255,77,202,.72), transparent 39%),


    linear-gradient(160deg, rgba(19,21,101,.9), transparent 58%);


}


body[data-anime-aura="flash"] .detail-page::before {


  background:


    radial-gradient(circle at 13% 44%, rgba(255,228,20,.92), transparent 36%),


    radial-gradient(circle at 90% 58%, rgba(255,75,25,.68), transparent 35%);


}


html:not([data-theme="light"]) body.is-detail .anime-hero {


  backdrop-filter: none;


  box-shadow:


    inset 0 1px 0 rgba(255,255,255,.05),


    0 18px 46px rgba(0,0,0,.38);


}


@keyframes aura-orbit {


  0% { transform: translate3d(-4%, -2%, 0) scale(1); }


  100% { transform: translate3d(5%, 4%, 0) scale(1.12); }


}


@keyframes aura-sweep {


  to { transform: rotate(360deg) scale(1.12); }


}


@keyframes aura-card-pulse {


  from {


    box-shadow:


      inset 0 1px 0 rgba(255,255,255,.08),


      0 20px 54px rgba(0,0,0,.42),


      0 0 28px color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 24%, transparent);


  }


  to {


    box-shadow:


      inset 0 1px 0 rgba(255,255,255,.12),


      0 24px 62px rgba(0,0,0,.46),


      0 0 58px color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 48%, transparent),


      0 0 96px color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 24%, transparent);


  }


}


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


  background: transparent;


}


html:not([data-theme="light"]) body.is-detail .site-shell {


  background:


    radial-gradient(circle at 9% 42%, color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 78%, transparent), transparent 38%),


    radial-gradient(circle at 91% 62%, color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 68%, transparent), transparent 40%),


    linear-gradient(110deg,


      color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 30%, transparent),


      transparent 34% 66%,


      color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 26%, transparent)),


    linear-gradient(145deg,


      color-mix(in srgb, var(--aura-primary, var(--anime-primary)) 30%, var(--bg-surface)),


      #080d12 45%,


      color-mix(in srgb, var(--aura-secondary, var(--anime-accent)) 28%, #080d12));


  background-attachment: scroll;


}


.anime-hero {


  border: 1px solid var(--line);


  border-radius: var(--radius);


  background: linear-gradient(155deg, rgba(18,25,34,.96), rgba(9,14,19,.98));


  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 14px 35px rgba(0,0,0,.16);


}


@keyframes watch-party-in {


  from { opacity: 0; transform: translateX(18px); }


  to { opacity: 1; transform: translateX(0); }


}


html:not([data-theme="light"]) body.is-detail .anime-hero {


  border-color: rgba(255,192,138,.26);


  background:


    linear-gradient(145deg,


      rgba(27,22,17,.98),


      #0a1016 46%,


      rgba(20,16,11,.98));


  box-shadow:


    inset 0 1px 0 rgba(255,255,255,.025),


    0 14px 38px rgba(0,0,0,.26),


    0 0 24px color-mix(in srgb, var(--anime-primary) 8%, transparent);


}


html:not([data-theme="light"]) body.is-detail .anime-hero {


  border-top-color: rgba(255,192,138,.46);


}


html:not([data-theme="light"]) body.is-detail .anime-hero {


  box-shadow:


    inset 0 1px 0 rgba(255,255,255,.03),


    0 16px 42px rgba(0,0,0,.34);


}


html:not([data-theme="light"]) body.is-detail .anime-hero h1 {


  color: #fff4e7;


  text-shadow: 0 0 18px rgba(255,192,138,.18);


}


iframe { display: block; width: 100%; aspect-ratio: 16 / 8.4; border: 0; background: #050505; }


body.is-home .home-page {


  overflow: visible;


}


body.is-home #continueCard {


  width: calc(100% + 214px);


  margin-top: -18px;


  margin-left: -196px;


}


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


  min-height: clamp(460px, 43vw, 610px);


  border-width: 0;


  border-radius: 0;


}


body.is-home .hero-carousel.watch-progress::after {


  display: none;


}


body.is-home .hero-carousel__copy {


  margin-left: 178px;


}


body.is-home .sidebar {


  z-index: 4;


  border-right: 0;


  background: transparent;


  backdrop-filter: none;


}


body.is-home .sidebar .nav a,


body.is-home .sidebar .nav button {


  border-color: transparent;


  background: transparent;


  text-shadow: 0 1px 8px rgba(0,0,0,.9);


}


body.is-home .sidebar .nav a:hover,


body.is-home .sidebar .nav button:hover,


body.is-home .sidebar .nav a.is-active,


body.is-home .sidebar .nav a[data-nav="home"] {


  background: rgba(6,10,14,.34);


  backdrop-filter: blur(5px);


  color: #fff;


}


body.is-home .sidebar .nav a.is-active span,


body.is-home .sidebar .nav a[data-nav="home"] span {


  color: #fff;


}


.css-filter-control {


  display: flex;


  align-items: center;


  justify-content: flex-end;


  gap: 5px;


  min-width: 0;


  max-width: 100%;


  margin: 0 0 0 auto;


  color: var(--muted);


  font-size: 9px;


  overflow-x: auto;


  scrollbar-width: none;


}


.css-filter-control::-webkit-scrollbar { display: none; }


.css-filter-control button {


  min-height: 27px;


  flex: 0 0 auto;


  padding: 0 9px;


  border: 1px solid var(--line);


  border-radius: 14px;


  background: #11171d;


  color: #98a3ad;


  font-size: 9px;


  transition: color .16s ease, border-color .16s ease, background .16s ease;


}


.css-filter-control button:hover {


  border-color: color-mix(in srgb, var(--orange) 48%, var(--line));


  background: #11171d;


  color: #fff;


}


.css-filter-control button.is-active {


  border-color: color-mix(in srgb, var(--orange) 48%, var(--line));


  background: #11171d;


  color: #fff;


}


@media (max-width: 980px) {


  .css-filter-control {


    justify-content: flex-start;


    margin: 0;


  }


}


.ghost-link {


  padding: 7px 10px;


  border: 1px solid var(--line);


  border-radius: 4px;


  color: #aaa;


  text-decoration: none;


  font-size: 10px;


}


.anime-hero {


  display: grid;


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


  gap: 15px;


  margin-top: 12px;


  padding: 15px;


}


.anime-poster { overflow: hidden; border-radius: 5px; background: #171818; }


.anime-poster img, .anime-poster .poster-fallback { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }


.title-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }


.anime-info h1 { margin: 0; font-size: 21px; }


.title-line > strong { color: var(--orange); }


.subtitle { margin: 3px 0 9px; color: var(--muted); font-size: 10px; }


.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }


.chips span { padding: 3px 6px; border-radius: 3px; background: #161717; color: #aaa; font-size: 9px; }


.chips #profileScoreChip { color: var(--orange); }


.description { max-width: 720px; margin: 0; color: #b8b9b9; font-size: 10px; line-height: 1.45; }


.meta-list { display: none; }


.anime-info > small { color: var(--muted); font-size: 9px; }


.poster-actions { display: flex; gap: 7px; margin-top: 11px; }


.poster-actions button {


  min-height: 32px;


  padding: 0 12px;


  border: 1px solid var(--line);


  border-radius: 4px;


  background: #121313;


  color: #bbb;


  font-size: 10px;


}


.poster-actions .watch-button { margin-left: auto; border-color: var(--orange); background: var(--orange); color: #111; font-weight: 800; }


.bookmark-button.is-active { border-color: #6e4218; color: var(--orange); }


.watch-description-copy { margin: 14px 0 0; color: #b8b9b9; font-size: 11px; line-height: 1.6; }


.tabs { display: flex; gap: 25px; border-bottom: 1px solid var(--line); }


.tabs button {


  border: 0;


  background: transparent;


  color: var(--muted);


  font-size: 10px;


}


.tabs button { padding: 0 0 10px; border-bottom: 2px solid transparent; }


.tabs button.is-active { border-color: var(--orange); color: var(--orange); }


.tabs button span {


  display: inline-grid;


  place-items: center;


  min-width: 17px;


  height: 17px;


  margin-left: 4px;


  padding: 0 5px;


  border-radius: 10px;


  background: #1b1c1c;


  color: var(--muted);


  font-size: 8px;


}


.tabs button.is-active span { background: rgba(255,192,138,.14); color: var(--orange); }


.comments-panel { padding-top: 14px; }


.comment-form {


  display: grid;


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


  gap: 11px;


  padding: 12px;


  border: 1px solid var(--line);


  border-radius: 7px;


  background: #101111;


}


.comment-form__avatar {


  width: 48px;


  height: 48px;


  border: 1px solid #9a541a;


  border-radius: 50%;


  background: var(--bg-surface);


  object-fit: cover;


}


.comment-form textarea {


  width: 100%;


  min-height: 86px;


  resize: vertical;


  padding: 11px 12px;


  border: 1px solid var(--line);


  border-radius: 6px;


  outline: 0;


  background: #0b0c0c;


  color: white;


  line-height: 1.5;


}


.comment-form textarea:focus { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); }


.comment-form__footer {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 12px;


  margin-top: 8px;


}


.comment-form__footer span { color: var(--muted); font-size: 9px; }


.comment-form__footer button {


  min-height: 32px;


  padding: 0 13px;


  border: 0;


  border-radius: 5px;


  background: var(--orange);


  color: #111;


  font-size: 10px;


  font-weight: 900;


}


.comment-form__footer button:disabled { opacity: .55; cursor: wait; }


.comments-list { display: grid; margin-top: 12px; }


.comment-card {


  display: grid;


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


  gap: 11px;


  padding: 14px 4px;


  border-bottom: 1px solid var(--line);


}


.comment-card__avatar {


  width: 46px;


  height: 46px;


  border: 1px solid #9a541a;


  border-radius: 50%;


  background: var(--bg-surface);


  object-fit: cover;


}


.comment-card__content header {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 12px;


}


.comment-user-trigger {


  display: inline-flex;


  align-items: center;


  gap: 6px;


  border: 0;


  background: transparent;


  color: #f2f2ef;


  font: inherit;


  font-size: 11px;


  font-weight: 900;


  cursor: pointer;


}


.comment-user-trigger:hover { color: var(--orange); }


.comment-user-actions {


  display: inline-flex;


  gap: 5px;


  margin-left: auto;


  opacity: 0;


  transform: translateY(-1px);


  transition: opacity .15s ease, transform .15s ease;


}


.comment-card:hover .comment-user-actions { opacity: 1; transform: translateY(0); }


.comment-user-actions button {


  min-height: 24px;


  padding: 0 8px;


  border: 1px solid var(--line);


  border-radius: 999px;


  background: #14181e;


  color: var(--muted);


  font-size: 8px;


  font-weight: 900;


}


.comment-user-actions button:hover {


  border-color: var(--orange);


  color: var(--orange);


}


.comment-card__content header strong { font-size: 11px; }


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


.comment-card__content > p {


  margin: 7px 0 10px;


  color: #d0d1d0;


  font-size: 11px;


  line-height: 1.55;


  white-space: pre-wrap;


  overflow-wrap: anywhere;


}


.comment-reactions { display: flex; flex-wrap: wrap; gap: 5px; }


.comment-reactions button {


  min-width: 38px;


  height: 26px;


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 4px;


  padding: 0 8px;


  border: 1px solid var(--line);


  border-radius: 14px;


  background: #121313;


  color: #aaa;


}


.comment-reactions button:hover { border-color: color-mix(in srgb, var(--orange) 42%, var(--line)); }


.comment-reactions button.is-active {


  border-color: var(--orange);


  background: rgba(255,192,138,.12);


  color: var(--orange);


}


.comment-reactions button span { font-size: 12px; }


.comment-reactions button b { font-size: 8px; }


.comment-reply-button,


.comment-reply-cancel {


  width: auto !important;


  min-width: 0 !important;


  padding: 0 10px !important;


  border-radius: 999px;


}





/* Watch sidebar cleanup v3 */


body.is-detail .detail-page {


  padding: clamp(28px, 4vw, 58px) clamp(24px, 4.6vw, 72px) 70px !important;


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


}





body.is-detail .anime-hero {


  order: -1 !important;


  display: grid !important;


  grid-template-columns: clamp(118px, 10vw, 172px) minmax(0, 1fr) !important;


  gap: clamp(20px, 2.4vw, 34px) !important;


  align-items: end !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}





body.is-detail .anime-poster {


  border-radius: 8px !important;


  background: #08090b !important;


  box-shadow: 0 18px 42px rgba(0, 0, 0, .42) !important;


}





body.is-detail .anime-info {


  max-width: 920px !important;


  padding: 0 0 8px !important;


}





body.is-detail .anime-info h1 {


  margin: 0 !important;


  color: #f4f4f1 !important;


  font-size: clamp(40px, 5vw, 82px) !important;


  line-height: .96 !important;


  letter-spacing: 0 !important;


  text-shadow: none !important;


}





body.is-detail .anime-info .description {


  max-width: 860px !important;


  margin-top: 14px !important;


  color: rgba(244, 244, 241, .68) !important;


  font-size: 16px !important;


  line-height: 1.55 !important;


}





body.is-detail .chips {


  gap: 8px !important;


  margin-top: 14px !important;


}





body.is-detail .chips span {


  border: 0 !important;


  border-radius: 999px !important;


  background: #15171b !important;


  color: rgba(255, 255, 255, .78) !important;


}





body.is-detail .poster-actions {


  margin-top: 18px !important;


}





@media (max-width: 720px) {


  body.is-detail .detail-page {


    padding: 18px 14px 48px !important;


  }





  body.is-detail .anime-hero {


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


  }





  body.is-detail .anime-info h1 {


    font-size: 34px !important;


  }


}





/* Final card favorite heart state: glass surface, color-only hover. */


html body .poster-card > button.card-heart,


html body .catalog-grid .poster-card > button.card-heart,


html body .poster-grid .poster-card > button.card-heart,


html body .results .poster-card > button.card-heart {


  width: 36px !important;


  height: 36px !important;


  display: grid !important;


  place-items: center !important;


  position: absolute !important;


  top: 12px !important;


  right: 12px !important;


  z-index: 20 !important;


  overflow: hidden !important;


  isolation: isolate !important;


  appearance: none !important;


  border: 0 !important;


  border-radius: 999px !important;


  background: rgba(20,20,20,.48) !important;


  background-color: rgba(20,20,20,.48) !important;


  background-image: none !important;


  opacity: 1 !important;


  color: #fff !important;


  box-shadow: none !important;


  filter: none !important;


  text-shadow: none !important;


  transform: none !important;


  backdrop-filter: blur(12px) saturate(140%) !important;


  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;


}





html body .poster-card > button.card-heart::before,


html body .catalog-grid .poster-card > button.card-heart::before,


html body .poster-grid .poster-card > button.card-heart::before,


html body .results .poster-card > button.card-heart::before {


  content: none !important;


  position: absolute !important;


  inset: 0 !important;


  z-index: -1 !important;


  border-radius: inherit !important;


  background: rgba(20,20,20,.48) !important;


  opacity: 1 !important;


  pointer-events: none !important;


}





html body .poster-card > button.card-heart:hover,


html body .catalog-grid .poster-card > button.card-heart:hover,


html body .poster-grid .poster-card > button.card-heart:hover,


html body .results .poster-card > button.card-heart:hover {


  background: rgba(20,20,20,.48) !important;


  background-color: rgba(20,20,20,.48) !important;


  color: #ff4058 !important;


  opacity: 1 !important;


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





html body .poster-card > button.card-heart.is-active,


html body .poster-card > button.card-heart.is-active:hover,


html body .catalog-grid .poster-card > button.card-heart.is-active,


html body .catalog-grid .poster-card > button.card-heart.is-active:hover,


html body .poster-grid .poster-card > button.card-heart.is-active,


html body .poster-grid .poster-card > button.card-heart.is-active:hover,


html body .results .poster-card > button.card-heart.is-active,


html body .results .poster-card > button.card-heart.is-active:hover {


  background: rgba(20,20,20,.48) !important;


  background-color: rgba(20,20,20,.48) !important;


  color: #ff4058 !important;


  opacity: 1 !important;


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





/* Home rails: keep horizontal scroll, hide the orange bars, remove card snapping. */


html body.is-home .poster-grid,


html body.is-home #popularGrid,


html body.is-home #recommendationsGrid,


html body.is-home #ongoingGrid,


html body.is-home #moviesGrid {


  overflow-x: auto !important;


  overflow-y: hidden !important;


  scroll-snap-type: none !important;


  scroll-behavior: auto !important;


  scrollbar-width: none !important;


  scrollbar-color: transparent transparent !important;


  -ms-overflow-style: none !important;


}





html body.is-home .poster-grid::-webkit-scrollbar,


html body.is-home #popularGrid::-webkit-scrollbar,


html body.is-home #recommendationsGrid::-webkit-scrollbar,


html body.is-home #ongoingGrid::-webkit-scrollbar,


html body.is-home #moviesGrid::-webkit-scrollbar {


  width: 0 !important;


  height: 0 !important;


  display: none !important;


}





html body.is-home .poster-grid .poster-card,


html body.is-home #popularGrid .poster-card,


html body.is-home #recommendationsGrid .poster-card,


html body.is-home #ongoingGrid .poster-card,


html body.is-home #moviesGrid .poster-card {


  scroll-snap-align: none !important;


  scroll-snap-stop: normal !important;


}





/* History page: continue-watching style cards. */


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


  background: transparent !important;


  border: 0 !important;


  box-shadow: none !important;


}





html body.is-library #historyPage .page-heading {


  margin-bottom: 22px !important;


}





html body.is-library #historyPage .page-heading h1 {


  color: #fff !important;


  font-size: clamp(28px, 2.3vw, 42px) !important;


  line-height: 1.05 !important;


  letter-spacing: 0 !important;


}





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


  display: grid !important;


  grid-template-columns: repeat(auto-fill, minmax(330px, 420px)) !important;


  gap: 28px 24px !important;


  align-items: start !important;


  justify-content: start !important;


  width: 100% !important;


  max-width: none !important;


  margin: 0 !important;


}





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


  display: grid !important;


  gap: 12px !important;


  width: 100% !important;


  min-height: 0 !important;


  aspect-ratio: auto !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


  overflow: visible !important;


  cursor: pointer !important;


  transform: none !important;


}





html body.is-library #historyGrid .history-card:hover {


  background: transparent !important;


  box-shadow: none !important;


  transform: none !important;


}





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


  position: relative !important;


  width: 100% !important;


  height: auto !important;


  aspect-ratio: 16 / 9 !important;


  border-radius: 8px !important;


  overflow: hidden !important;


  background: #08090c !important;


  box-shadow: none !important;


}





html body.is-library #historyGrid .history-card__poster img,


html body.is-library #historyGrid .history-card__poster .poster-fallback {


  width: 100% !important;


  height: 100% !important;


  object-fit: cover !important;


}





html body.is-library #historyGrid .history-card__poster::before {


  content: "" !important;


  position: absolute !important;


  left: 10px !important;


  right: 10px !important;


  bottom: 10px !important;


  z-index: 2 !important;


  height: 3px !important;


  border-radius: 999px !important;


  background:


    linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .32) var(--history-progress, 0%) 100%) !important;


}





html body.is-library #historyGrid .history-card__poster::after {


  content: attr(data-episode) !important;


  position: absolute !important;


  right: 10px !important;


  bottom: 18px !important;


  z-index: 3 !important;


  color: #fff !important;


  font-size: 13px !important;


  font-weight: 900 !important;


  line-height: 1 !important;


  text-shadow: 0 1px 4px rgba(0, 0, 0, .75) !important;


}





html body.is-library #historyGrid .history-card__body {


  position: static !important;


  display: grid !important;


  gap: 5px !important;


  min-width: 0 !important;


  padding: 0 !important;


}





html body.is-library #historyGrid .history-card__body strong {


  grid-column: auto !important;


  grid-row: auto !important;


  color: #fff !important;


  font-size: 18px !important;


  line-height: 1.18 !important;


  font-weight: 900 !important;


}





html body.is-library #historyGrid .history-card__body p,


html body.is-library #historyGrid .history-card__body > span,


html body.is-library #historyGrid .history-card__meta {


  display: none !important;


}





@media (max-width: 760px) {


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


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


    gap: 22px !important;


  }


}





/* History cards readability pass: black footer, progress below image, visible hover. */


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


  gap: 0 !important;


  border-radius: 8px !important;


  background: #000 !important;


  overflow: hidden !important;


  transition: transform .14s ease, filter .14s ease !important;


}





html body.is-library #historyGrid .continue-history-card:hover {


  background: #000 !important;


  transform: translateY(-3px) !important;


  filter: brightness(1.06) !important;


}





html body.is-library #historyGrid .continue-history-cover {


  border-radius: 8px 8px 0 0 !important;


}





html body.is-library #historyGrid .continue-history-cover::before {


  content: none !important;


}





html body.is-library #historyGrid .continue-history-cover::after {


  bottom: 10px !important;


}





html body.is-library #historyGrid .continue-history-cover img {


  transition: transform .16s ease, filter .16s ease !important;


}





html body.is-library #historyGrid .continue-history-card:hover .continue-history-cover img {


  transform: scale(1.025) !important;


  filter: saturate(1.04) brightness(.9) !important;


}





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


  gap: 10px !important;


  padding: 10px 0 0 !important;


  background: #000 !important;


}





html body.is-library #historyGrid .continue-history-card .history-card__body::before {


  content: "" !important;


  display: block !important;


  width: 100% !important;


  height: 3px !important;


  border-radius: 999px !important;


  background: linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .34) var(--history-progress, 0%) 100%) !important;


}





html body.is-library #historyGrid .continue-history-card .history-card__body strong {


  padding: 0 0 2px !important;


  text-shadow: none !important;


}





/* History card footer layout: progress timeline at the very bottom. */


html body.is-library #historyGrid .continue-history-cover::after {


  content: none !important;


}





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


  position: relative !important;


  align-content: start !important;


  gap: 0 !important;


  min-height: 58px !important;


  padding: 12px 12px 20px !important;


  background: #000 !important;


}





html body.is-library #historyGrid .continue-history-card .history-card__body::before {


  position: absolute !important;


  left: 12px !important;


  right: 12px !important;


  bottom: 10px !important;


  width: auto !important;


}





html body.is-library #historyGrid .continue-history-card .history-card__body strong {


  padding: 0 !important;


}





html body.is-library #historyGrid .continue-history-footer {


  position: relative !important;


  display: grid !important;


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


  align-items: start !important;


  gap: 10px !important;


  min-height: 62px !important;


  padding: 12px 12px 22px !important;


  background: #000 !important;


  color: #fff !important;


}





html body.is-library #historyGrid .continue-history-footer strong {


  min-width: 0 !important;


  color: #fff !important;


  font-size: 18px !important;


  line-height: 1.18 !important;


  font-weight: 900 !important;


}





html body.is-library #historyGrid .continue-history-footer span {


  color: rgba(255, 255, 255, .84) !important;


  font-size: 13px !important;


  line-height: 1.2 !important;


  font-weight: 900 !important;


  white-space: nowrap !important;


}





html body.is-library #historyGrid .continue-history-footer::after {


  content: "" !important;


  position: absolute !important;


  left: 12px !important;


  right: 12px !important;


  bottom: 10px !important;


  height: 3px !important;


  border-radius: 999px !important;


  background: linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .34) var(--history-progress, 0%) 100%) !important;


}





/* Favorites board: three draggable columns. */


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


  display: grid !important;


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


  gap: 0 !important;


  width: 100% !important;


  max-width: none !important;


  align-items: stretch !important;


}





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


  min-width: 0 !important;


  min-height: 360px !important;


  display: grid !important;


  grid-template-rows: auto minmax(240px, 1fr) !important;


  gap: 14px !important;


  padding: 0 28px 28px !important;


  border: 0 !important;


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


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


  transition: background .14s ease !important;


}





html body.is-library #favoritesGrid .favorite-column:last-child {


  border-right: 0 !important;


}





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


  background: rgba(255, 255, 255, .045) !important;


}





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


  display: flex !important;


  align-items: center !important;


  justify-content: space-between !important;


  gap: 12px !important;


  min-height: 38px !important;


  padding: 0 2px 10px !important;


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


}





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


  margin: 0 !important;


  color: #fff !important;


  font-size: 22px !important;


  line-height: 1.1 !important;


  font-weight: 900 !important;


  letter-spacing: 0 !important;


}





html body.is-library #favoritesGrid .favorite-column header span {


  min-width: 28px !important;


  height: 24px !important;


  display: inline-grid !important;


  place-items: center !important;


  padding: 0 8px !important;


  border-radius: 999px !important;


  background: #17191f !important;


  color: rgba(255, 255, 255, .78) !important;


  font-size: 12px !important;


  font-weight: 900 !important;


}





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


  min-height: 280px !important;


  display: grid !important;


  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;


  align-content: start !important;


  gap: 16px !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 8px !important;


  background: transparent !important;


}





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


  border-color: transparent !important;


  background: transparent !important;


}





html body.is-library #favoritesGrid .favorite-card {


  width: 100% !important;


  min-height: 0 !important;


  border-radius: 8px !important;


  background: transparent !important;


  box-shadow: none !important;


  cursor: grab !important;


  transition: transform .14s ease, filter .14s ease, opacity .14s ease !important;


}





html body.is-library #favoritesGrid .favorite-card:active {


  cursor: grabbing !important;


}





html body.is-library #favoritesGrid .favorite-card:hover {


  transform: translateY(-2px) !important;


  filter: brightness(1.04) !important;


  box-shadow: none !important;


}





html body.is-library #favoritesGrid .favorite-card.is-dragging {


  opacity: .46 !important;


  transform: scale(.98) !important;


}





html body.is-library #favoritesGrid .favorite-card__cover {


  aspect-ratio: 3 / 4 !important;


  border-radius: 8px !important;


  overflow: hidden !important;


  background: #08090c !important;


}





html body.is-library #favoritesGrid .favorite-card__body {


  padding: 10px 0 0 !important;


  background: transparent !important;


}





html body.is-library #favoritesGrid .favorite-card__body strong {


  color: #fff !important;


  font-size: 15px !important;


  line-height: 1.15 !important;


  font-weight: 900 !important;


}





html body.is-library #favoritesGrid .favorite-card__body p,


html body.is-library #favoritesGrid .favorite-card__body small {


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


}





@media (max-width: 1100px) {


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


    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;


    overflow-x: auto !important;


    padding-bottom: 12px !important;


  }


}





/* Final layout correction: keep the new header, fix desktop content flow. */


@media (min-width: 821px) {


  body:not(.is-mobile) .site-shell,


  body:not(.is-mobile).is-home .site-shell,


  body:not(.is-mobile).is-library .site-shell,


  body:not(.is-mobile).is-detail .site-shell {


    display: grid !important;


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


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


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    background: #050608 !important;


  }





  body:not(.is-mobile) .site-shell > .sidebar,


  body:not(.is-mobile) aside.sidebar,


  body:not(.is-mobile) .sidebar {


    display: none !important;


    visibility: hidden !important;


    width: 0 !important;


    min-width: 0 !important;


    max-width: 0 !important;


    pointer-events: none !important;


  }





  body:not(.is-mobile) .topbar {


    grid-column: 1 / -1 !important;


    position: sticky !important;


    top: 0 !important;


    z-index: 100 !important;


  }





  body:not(.is-mobile) .top-actions {


    position: static !important;


    inset: auto !important;


    transform: none !important;


    justify-self: end !important;


    margin: 0 !important;


  }





  body:not(.is-mobile) .home-page,


  body:not(.is-mobile) .detail-page,


  body:not(.is-mobile) .home-page.library-mode,


  body:not(.is-mobile) .catalog-section,


  body:not(.is-mobile) .library-section,


  body:not(.is-mobile) .settings-section,


  body:not(.is-mobile) .search-section {


    grid-column: 1 / -1 !important;


    width: 100% !important;


    max-width: none !important;


    margin-left: 0 !important;


    margin-right: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page {


    padding: 0 0 84px !important;


  }





  body:not(.is-mobile).is-home .continue-card {


    margin: 0 0 clamp(46px, 5vw, 78px) !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-home .continue-card > .section-head,


  body:not(.is-mobile).is-home .continue-card > .section-head--compact {


    display: none !important;


  }





  body:not(.is-mobile).is-home .hero-carousel.watch-progress {


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page > .poster-section,


  body:not(.is-mobile).is-home .home-page > .search-section {


    width: 100% !important;


    max-width: none !important;


    margin: 0 0 clamp(52px, 5vw, 84px) !important;


    padding: 0 clamp(28px, 3.5vw, 54px) !important;


  }





  body:not(.is-mobile).is-home .poster-grid,


  body:not(.is-mobile).is-home #popularGrid,


  body:not(.is-mobile).is-home #recommendationsGrid,


  body:not(.is-mobile).is-home #ongoingGrid,


  body:not(.is-mobile).is-home #moviesGrid {


    display: grid !important;


    grid-auto-flow: column !important;


    grid-auto-columns: clamp(178px, 13.5vw, 238px) !important;


    grid-template-columns: none !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


    overflow-x: auto !important;


    overflow-y: hidden !important;


    scroll-snap-type: x mandatory !important;


    overscroll-behavior-inline: contain !important;


    width: 100% !important;


    max-width: none !important;


    padding: 0 0 18px !important;


  }





  body:not(.is-mobile).is-home .poster-grid .poster-card {


    width: auto !important;


    min-width: 0 !important;


    scroll-snap-align: start !important;


  }





  body:not(.is-mobile).is-library .home-page {


    padding: clamp(82px, 7vw, 128px) clamp(28px, 3.5vw, 54px) 90px !important;


  }





  body:not(.is-mobile).is-library .home-page > .catalog-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .library-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .settings-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .search-section:not([hidden]) {


    display: block !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-library .catalog-toolbar {


    width: 100% !important;


    max-width: none !important;


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


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


    margin: 0 0 34px !important;


  }





  body:not(.is-mobile).is-library .catalog-grid,


  body:not(.is-mobile).is-library .library-grid,


  body:not(.is-mobile).is-library .results {


    width: 100% !important;


    max-width: none !important;


    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)) !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


  }





  body:not(.is-mobile).is-library .history-list {


    width: 100% !important;


    max-width: none !important;


  }





  body:not(.is-mobile).is-detail .detail-page {


    padding: clamp(34px, 4vw, 64px) clamp(28px, 3.5vw, 54px) 90px !important;


  }


}





/* Absolute final watch override. Keep this at the end of the file. */


body.is-detail .detail-page {


  padding: clamp(28px, 4vw, 58px) clamp(24px, 4.6vw, 72px) 70px !important;


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


}





body.is-detail .anime-hero {


  order: -1 !important;


  display: grid !important;


  grid-template-columns: clamp(118px, 10vw, 172px) minmax(0, 1fr) !important;


  gap: clamp(20px, 2.4vw, 34px) !important;


  align-items: end !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}





body.is-detail .anime-poster {


  border-radius: 8px !important;


  background: #08090b !important;


  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;


}





body.is-detail .anime-info h1 {


  color: #f4f4f1 !important;


  font-size: clamp(40px, 5vw, 82px) !important;


  line-height: .96 !important;


  letter-spacing: 0 !important;


  text-shadow: none !important;


}





body.is-detail .anime-info .description {


  max-width: 860px !important;


  color: rgba(244,244,241,.68) !important;


  font-size: 16px !important;


  line-height: 1.55 !important;


}





@media (max-width: 720px) {


  body.is-detail .detail-page {


    padding: 18px 14px 48px !important;


  }





  body.is-detail .anime-hero {


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


  }





  body.is-detail .anime-info h1 {


    font-size: 34px !important;


  }


}





/* Absolute final watch override. Keep this at the end of the file. */


body.is-detail .detail-page {


  padding: clamp(28px, 4vw, 58px) clamp(24px, 4.6vw, 72px) 70px !important;


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


}





body.is-detail .anime-hero {


  order: -1 !important;


  display: grid !important;


  grid-template-columns: clamp(118px, 10vw, 172px) minmax(0, 1fr) !important;


  gap: clamp(20px, 2.4vw, 34px) !important;


  align-items: end !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}





body.is-detail .anime-poster {


  border-radius: 8px !important;


  background: #08090b !important;


  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;


}





body.is-detail .anime-info h1 {


  color: #f4f4f1 !important;


  font-size: clamp(40px, 5vw, 82px) !important;


  line-height: .96 !important;


  letter-spacing: 0 !important;


  text-shadow: none !important;


}





body.is-detail .anime-info .description {


  max-width: 860px !important;


  color: rgba(244,244,241,.68) !important;


  font-size: 16px !important;


  line-height: 1.55 !important;


}





@media (max-width: 720px) {


  body.is-detail .detail-page {


    padding: 18px 14px 48px !important;


  }





  body.is-detail .anime-hero {


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


  }





  body.is-detail .anime-info h1 {


    font-size: 34px !important;


  }


}


body.is-detail .detail-page {


  padding: clamp(28px, 4vw, 58px) clamp(24px, 4.6vw, 72px) 70px !important;


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


}





body.is-detail .anime-hero {


  order: -1 !important;


  display: grid !important;


  grid-template-columns: clamp(118px, 10vw, 172px) minmax(0, 1fr) !important;


  gap: clamp(20px, 2.4vw, 34px) !important;


  align-items: end !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}





body.is-detail .anime-info h1 {


  color: #f4f4f1 !important;


  font-size: clamp(40px, 5vw, 82px) !important;


  line-height: .96 !important;


  letter-spacing: 0 !important;


  text-shadow: none !important;


}





body.is-detail .anime-info .description {


  max-width: 860px !important;


  color: rgba(244, 244, 241, .68) !important;


  font-size: 16px !important;


  line-height: 1.55 !important;


}





body.is-detail .anime-poster {


  border-radius: 8px !important;


  background: #08090b !important;


  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;


}





@media (max-width: 720px) {


  body.is-detail .detail-page {


    padding: 18px 14px 48px !important;


  }





  body.is-detail .anime-hero {


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


  }





  body.is-detail .anime-info h1 {


    font-size: 34px !important;


  }


}





/* Definitive desktop layout fixes after all broad redesign rules. */


@media (min-width: 821px) {


  body:not(.is-mobile) .site-shell,


  body:not(.is-mobile).is-home .site-shell,


  body:not(.is-mobile).is-library .site-shell,


  body:not(.is-mobile).is-detail .site-shell {


    display: grid !important;


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


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


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    overflow-x: hidden !important;


  }





  body:not(.is-mobile) .site-shell > aside.sidebar,


  body:not(.is-mobile) aside.sidebar,


  body:not(.is-mobile) .sidebar {


    display: none !important;


    visibility: hidden !important;


    width: 0 !important;


    min-width: 0 !important;


    max-width: 0 !important;


    opacity: 0 !important;


    pointer-events: none !important;


  }





  body:not(.is-mobile) .topbar {


    grid-column: 1 / -1 !important;


    grid-template-columns: auto minmax(390px, 1fr) minmax(330px, 640px) auto !important;


    position: sticky !important;


    top: 0 !important;


    z-index: 100 !important;


    width: 100% !important;


  }





  body:not(.is-mobile) .top-actions {


    position: static !important;


    inset: auto !important;


    transform: none !important;


    justify-self: end !important;


    margin: 0 !important;


  }





  body:not(.is-mobile) .home-page,


  body:not(.is-mobile) .detail-page,


  body:not(.is-mobile) .home-page.library-mode {


    grid-column: 1 / -1 !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page {


    padding: 0 0 84px !important;


  }





  body:not(.is-mobile).is-home .continue-card {


    margin: 0 0 clamp(46px, 5vw, 78px) !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-home .continue-card > .section-head,


  body:not(.is-mobile).is-home .continue-card > .section-head--compact {


    display: none !important;


  }





  body:not(.is-mobile).is-home .hero-carousel.watch-progress {


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page > .poster-section,


  body:not(.is-mobile).is-home .home-page > .search-section {


    width: 100% !important;


    max-width: none !important;


    margin: 0 0 clamp(52px, 5vw, 84px) !important;


    padding: 0 clamp(28px, 3.5vw, 54px) !important;


  }





  body:not(.is-mobile).is-home .poster-grid,


  body:not(.is-mobile).is-home #popularGrid,


  body:not(.is-mobile).is-home #recommendationsGrid,


  body:not(.is-mobile).is-home #ongoingGrid,


  body:not(.is-mobile).is-home #moviesGrid {


    display: grid !important;


    grid-auto-flow: column !important;


    grid-auto-columns: clamp(178px, 13.5vw, 238px) !important;


    grid-template-columns: none !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


    overflow-x: auto !important;


    overflow-y: hidden !important;


    scroll-snap-type: x mandatory !important;


    overscroll-behavior-inline: contain !important;


    width: 100% !important;


    max-width: none !important;


    padding: 0 0 18px !important;


  }





  body:not(.is-mobile).is-home .poster-grid .poster-card {


    width: auto !important;


    min-width: 0 !important;


    scroll-snap-align: start !important;


  }





  body:not(.is-mobile).is-library .home-page {


    padding: clamp(82px, 7vw, 128px) clamp(28px, 3.5vw, 54px) 90px !important;


  }





  body:not(.is-mobile).is-library .home-page > .catalog-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .library-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .settings-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .search-section:not([hidden]) {


    display: block !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-library .catalog-toolbar {


    width: 100% !important;


    max-width: none !important;


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


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


    margin: 0 0 34px !important;


  }





  body:not(.is-mobile).is-library .catalog-grid,


  body:not(.is-mobile).is-library .library-grid,


  body:not(.is-mobile).is-library .results {


    width: 100% !important;


    max-width: none !important;


    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)) !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


  }





  body:not(.is-mobile).is-library .history-list {


    width: 100% !important;


    max-width: none !important;


  }





  body:not(.is-mobile).is-detail .detail-page {


    padding: clamp(34px, 4vw, 64px) clamp(28px, 3.5vw, 54px) 90px !important;


  }


}


.comment-replies {


  display: grid;


  gap: 8px;


  margin: 0 0 0 56px;


  padding-left: 14px;


  border-left: 1px solid var(--line);


}


.comment-card.is-reply {


  padding: 10px 0;


}


.comment-card.is-reply .comment-card__avatar {


  width: 34px;


  height: 34px;


}


.comment-form__footer .comment-reply-cancel {


  height: 24px;


  border: 1px solid var(--line);


  background: #14181e;


  color: var(--muted);


  font-size: 9px;


  font-weight: 900;


}


.comment-form__footer .comment-reply-cancel:hover {


  border-color: var(--orange);


  color: var(--orange);


}


.comments-empty {


  margin: 0;


  padding: 28px 12px;


  color: var(--muted);


  text-align: center;


  font-size: 10px;


}


.user-profile-panel { max-width: 430px; }


.user-profile-card {


  display: flex;


  align-items: center;


  gap: 14px;


  margin-bottom: 14px;


}


.user-profile-avatar {


  width: 76px;


  height: 76px;


  border-radius: 22px;


}


.user-profile-card small {


  color: var(--orange);


  text-transform: uppercase;


  letter-spacing: .12em;


  font-size: 9px;


  font-weight: 900;


}


.user-profile-card h2 { margin: 4px 0; }


.user-profile-card p { margin: 0; color: var(--muted); }


.user-profile-stats {


  display: grid;


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


  gap: 8px;


  margin: 14px 0;


}


.user-profile-stats span {


  padding: 10px 8px;


  border: 1px solid var(--line);


  border-radius: 10px;


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


  color: var(--muted);


  text-align: center;


  font-size: 8px;


}


.user-profile-stats b {


  display: block;


  color: #fff;


  font-size: 15px;


}


.user-profile-actions {


  display: flex;


  flex-wrap: wrap;


  gap: 8px;


}


.user-profile-actions button {


  min-height: 36px;


  padding: 0 14px;


  border-radius: 9px;


  font-weight: 900;


}


.ghost-button {


  border: 1px solid var(--line);


  background: transparent;


  color: #d8d8d6;


}


html[data-theme="light"] .notifications-popover,


html[data-theme="light"] .notification-actions button,


html[data-theme="light"] .comment-user-actions button {


  background: #fff;


  color: #183246;


}


html[data-theme="light"] .notification-button {


  background: #f1f6fa;


  color: var(--accent-default);


}


html[data-theme="light"] .user-profile-stats b,


html[data-theme="light"] .comment-user-trigger {


  color: #102333;


}


.play-dot { color: var(--orange); }





.search-modal {


  position: fixed;


  inset: 0;


  z-index: 80;


  display: grid;


  place-items: start center;


  padding: 8vh 16px;


  background: rgba(0,0,0,.78);


  backdrop-filter: blur(16px);


}


.search-modal__panel {


  width: min(760px, 100%);


  max-height: 84vh;


  overflow: auto;


  padding: 22px;


  border: 1px solid var(--line);


  border-radius: 9px;


  background: #0d0e0e;


}


.confirm-modal { z-index: 100; place-items: center; padding: 16px; }


.confirm-modal__panel {


  width: min(390px, 100%);


  overflow: visible;


  text-align: center;


}


.confirm-modal__panel h2 { margin: 5px 0 9px; font-size: 22px; }


.confirm-modal__panel > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }


.confirm-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }


.confirm-modal__actions button {


  min-height: 42px;


  border: 1px solid var(--line);


  border-radius: 5px;


  font-weight: 750;


}


.confirm-modal__cancel { background: #141515; color: #ddd; }


.confirm-modal__approve { border-color: var(--orange) !important; background: var(--orange); color: #111; }





html[data-theme="light"] {


  color-scheme: light;


  --bg: #f4f8fc;


  --panel: #ffffff;


  --panel-2: #f7fafc;


  --panel-3: #edf4fa;


  --line: #c9d9e7;


  --line-soft: #dce7f0;


  --text: #102333;


  --muted: #607487;


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  --danger: #d84545;


  --anime-primary: var(--accent-default);


  --anime-accent: var(--accent-hover);


  --anime-glow: rgba(0, 174, 247, .24);


}


html[data-theme="light"] body {


  background: #eaf2f8;


  color: var(--text);


}


html[data-theme="light"] body.is-home { background: #eaf2f8; }


html[data-theme="light"] body.is-home::after { display: none; }


html[data-theme="light"] body.is-home .site-shell { background: #fff; }


html[data-theme="light"] body.is-detail {


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  background:


    linear-gradient(90deg,


      color-mix(in srgb, var(--anime-primary) 28%, rgba(239,247,253,.88)),


      rgba(246,250,253,.98) 22% 78%,


      color-mix(in srgb, var(--anime-accent) 25%, rgba(239,247,253,.9))),


    linear-gradient(180deg, rgba(255,255,255,.04) 0 38%, #edf4f9 92%),


    #eef5fa;


}


html[data-theme="light"] body.is-detail::after {


  content: "";


  position: fixed;


  inset: 0;


  z-index: -1;


  pointer-events: none;


  opacity: .96;


  background:


    linear-gradient(90deg,


      rgba(244,249,253,.08) 0,


      rgba(244,249,253,.82) 18%,


      rgba(244,249,253,.98) 28% 72%,


      rgba(244,249,253,.82) 82%,


      rgba(244,249,253,.08) 100%),


    linear-gradient(180deg, transparent 42%, rgba(238,245,250,.72) 88%, #eef5fa 100%),


    var(--anime-bg) left top / max(360px, 27vw) 100% no-repeat,


    var(--anime-bg) right top / max(360px, 27vw) 100% no-repeat;


  filter: saturate(1.2) contrast(1.05) brightness(1.08);


}


html[data-theme="light"] body.is-detail .site-shell {


  border-color: color-mix(in srgb, var(--anime-primary) 38%, #c9d9e7);


  background:


    radial-gradient(circle at 7% 38%,


      color-mix(in srgb, var(--anime-primary) 25%, transparent),


      transparent 32%),


    radial-gradient(circle at 94% 58%,


      color-mix(in srgb, var(--anime-accent) 23%, transparent),


      transparent 34%),


    linear-gradient(105deg,


      color-mix(in srgb, var(--anime-primary) 8%, rgba(249,252,255,.97)),


      rgba(249,252,255,.97) 31% 69%,


      color-mix(in srgb, var(--anime-accent) 8%, rgba(249,252,255,.97)));


  box-shadow:


    0 0 0 1px rgba(255,255,255,.7),


    -24px 0 64px color-mix(in srgb, var(--anime-primary) 28%, transparent),


    24px 0 64px color-mix(in srgb, var(--anime-accent) 24%, transparent),


    0 26px 70px rgba(38,72,98,.24);


}


html[data-theme="light"] .site-shell { border-color: #c9d9e7; }


html[data-theme="light"] .topbar {


  border-color: var(--line);


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


}


html[data-theme="light"] .sidebar {


  border-right-color: transparent;


  background: transparent;


}


html[data-theme="light"] .logo-anime { color: #102333; }


html[data-theme="light"] .logo-hub { color: white; }


html[data-theme="light"] .top-search, html[data-theme="light"] .catalog-toolbar select, html[data-theme="light"] .view-switch button, html[data-theme="light"] .settings-groups label, html[data-theme="light"] .settings-groups section > button {


  background: #f1f6fa;


  color: #183246;


}


html[data-theme="light"] .top-search input { color: #183246; }


html[data-theme="light"] .top-search button,


html[data-theme="light"] .icon-button { color: var(--accent-default); }


html[data-theme="light"] .profile-button { color: #183246; }


html[data-theme="light"] .nav a,


html[data-theme="light"] .nav button { color: #52687a; }


html[data-theme="light"] .nav a span,


html[data-theme="light"] .nav button span { color: #52687a; }


html[data-theme="light"] .nav a:hover,


html[data-theme="light"] .nav button:hover,


html[data-theme="light"] .nav a.is-active {


  background: rgba(16,35,51,.07);


  color: #102333;


}


html[data-theme="light"] .nav a:hover span,


html[data-theme="light"] .nav button:hover span,


html[data-theme="light"] .nav a.is-active span {


  color: #102333;


}


html[data-theme="light"] .continue-card, html[data-theme="light"] .poster-card, html[data-theme="light"] .catalog-card, html[data-theme="light"] .favorite-card, html[data-theme="light"] .history-card, html[data-theme="light"] .profile-summary, html[data-theme="light"] .profile-stats, html[data-theme="light"] .settings-groups section, html[data-theme="light"] .my-comments-section, html[data-theme="light"] .anime-hero, html[data-theme="light"] .search-modal__panel {


  background: #ffffff;


  border-color: var(--line);


  color: #102333;


}


html[data-theme="light"] body.is-detail .detail-page {


  background: transparent;


}


html[data-theme="light"] body.is-detail .detail-page::before {


  opacity: .36;


  filter: blur(24px) saturate(1.18);


  mix-blend-mode: multiply;


}


html[data-theme="light"] body.is-detail .detail-page::after {


  opacity: .2;


  filter: blur(54px) saturate(1.25);


  mix-blend-mode: multiply;


}


html[data-theme="light"] body.is-detail .anime-hero {


  border-color: color-mix(in srgb, var(--anime-primary) 38%, #c8d8e5);


  background:


    linear-gradient(145deg,


      color-mix(in srgb, var(--anime-primary) 6%, #fff),


      rgba(255,255,255,.97) 48%,


      color-mix(in srgb, var(--anime-accent) 7%, #fff));


  color: #102333;


  box-shadow:


    inset 0 1px 0 rgba(255,255,255,.96),


    0 16px 38px rgba(35,72,101,.13),


    0 0 24px color-mix(in srgb, var(--anime-primary) 14%, transparent);


}


html[data-theme="light"] body.is-detail .anime-hero {


  border-top-color: color-mix(in srgb, var(--anime-primary) 66%, #fff);


}


html[data-theme="light"] body.is-detail .anime-hero h1 {


  color: #102333;


  text-shadow: 0 0 18px color-mix(in srgb, var(--anime-primary) 20%, transparent);


}


html[data-theme="light"] .poster-card,


html[data-theme="light"] .favorite-card,


html[data-theme="light"] .catalog-card {


  box-shadow: 0 8px 22px rgba(31,73,105,.08);


}


html[data-theme="light"] .watch-progress {


  background:


    linear-gradient(90deg, #f8fbfd 0%, rgba(248,251,253,.96) 32%, rgba(248,251,253,.22) 72%, #f8fbfd 100%),


    var(--hero-bg, none) right center / 68% auto no-repeat,


    #f8fbfd;


}


html[data-theme="light"] .watch-progress p,


html[data-theme="light"] .description,


html[data-theme="light"] .watch-description-copy,


html[data-theme="light"] .comment-card__content > p { color: #435d70; }


html[data-theme="light"] .hero-carousel__meta { color: #102333 !important; }


html[data-theme="light"] .settings-groups label,


html[data-theme="light"] .settings-groups section > button { color: #263f52; }


html[data-theme="light"] .ghost-link,


html[data-theme="light"] .confirm-modal__cancel {


  background: #f1f6fa;


  color: #274255;


}


html[data-theme="light"] .google-button {


  border-color: #c5c9ce;


  background: #fff;


  color: #1f1f1f;


}


html[data-theme="light"] .google-button:hover {


  border-color: #aeb4bb;


  background: #f8faff;


}


html[data-theme="light"] .auth-divider::before,


html[data-theme="light"] .auth-divider::after { background: #d5e1eb; }


html[data-theme="light"] .auth-divider span { color: #738596; }


html[data-theme="light"] .search-modal {


  background: rgba(222,234,243,.78);


}


html[data-theme="light"] input,


html[data-theme="light"] textarea,


html[data-theme="light"] select { color-scheme: light; }


html[data-theme="light"] *::-webkit-scrollbar-track { background: #edf4f9; }


html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #abc2d4; }


.search-modal__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }


.search-modal__head h2 { margin: 0; }


/* Chromium adds its own small clear button to search inputs. AnimeHub already


   has an explicit close action, so showing both produces two crosses. */


#searchInput::-webkit-search-cancel-button,


#modalSearchInput::-webkit-search-cancel-button {


  -webkit-appearance: none;


  appearance: none;


  display: none;


}


.score-pill {


  position: absolute;


  top: 7px;


  right: 7px;


  z-index: 4;


  padding: 4px 7px;


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


  border-radius: 7px;


  background: rgba(5, 8, 12, .7);


  color: #fff;


  font-size: 10px;


  font-weight: 850;


  line-height: 1;


  backdrop-filter: blur(8px);


}





/* Post-registration avatar reveal */


.profile-button,


.profile-button:hover,


.profile-button:focus-visible {


  width: 46px !important;


  min-width: 46px !important;


  height: 46px !important;


  min-height: 46px !important;


  padding: 2px !important;


  display: grid !important;


  place-items: center !important;


  border-radius: 999px !important;


}





.profile-button .profile-avatar {


  width: 42px !important;


  min-width: 42px !important;


  height: 42px !important;


}





.avatar-reveal-modal {


  z-index: 1800;


  background: rgba(0, 0, 0, .82);


  backdrop-filter: blur(16px);


}





.avatar-reveal-modal.is-open:not([hidden]) {


  display: grid !important;


}





body.has-avatar-reveal {


  overflow: hidden;


}





.avatar-reveal-panel {


  width: min(980px, calc(100vw - 32px));


  padding: clamp(28px, 5vw, 58px);


  overflow: hidden;


  text-align: center;


}





.avatar-reveal-panel h2 {


  margin: 7px 0 8px;


  font-size: clamp(30px, 5vw, 58px);


  line-height: 1;


}





.avatar-reveal-copy {


  margin: 0 0 28px;


  color: var(--muted);


  font-weight: 700;


}





.avatar-reveal-roulette {


  position: relative;


  width: 100%;


  height: 170px;


  margin: 0 auto 22px;


  display: flex;


  align-items: center;


  overflow: hidden;


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


  border-radius: 24px;


  background: #0d0f14;


  box-shadow: inset 0 0 42px rgba(0, 0, 0, .5);


}





.avatar-reveal-track {


  display: flex;


  align-items: center;


  gap: 14px;


  width: max-content;


  padding: 0 18px;


  will-change: transform;


}





.avatar-reveal-track img {


  width: 104px;


  min-width: 104px;


  height: 104px;


  object-fit: cover;


  border: 3px solid transparent;


  border-radius: 22px;


  opacity: .66;


  transform: scale(.9);


  transition: opacity .25s ease, transform .35s ease, border-color .25s ease, box-shadow .25s ease;


}





.avatar-reveal-track.has-winner img:not(.is-selected) {


  opacity: .3;


}





.avatar-reveal-track img.is-selected {


  z-index: 2;


  opacity: 1;


  border-color: var(--orange);


  transform: scale(1.18);


  box-shadow: 0 0 0 5px rgba(255, 147, 98, .14), 0 12px 35px rgba(0, 0, 0, .5);


}





.avatar-reveal-fade {


  position: absolute;


  z-index: 4;


  top: 0;


  bottom: 0;


  width: 22%;


  pointer-events: none;


}





.avatar-reveal-fade--left {


  left: 0;


  background: linear-gradient(90deg, #0d0f14 12%, transparent);


}





.avatar-reveal-fade--right {


  right: 0;


  background: linear-gradient(-90deg, #0d0f14 12%, transparent);


}





.avatar-reveal-pointer {


  position: absolute;


  z-index: 5;


  left: 50%;


  top: 10px;


  bottom: 10px;


  width: 3px;


  border-radius: 999px;


  background: var(--orange);


  transform: translateX(-50%);


  box-shadow: 0 0 22px rgba(255, 147, 98, .72);


  pointer-events: none;


}





.avatar-reveal-pointer::before,


.avatar-reveal-pointer::after {


  content: "";


  position: absolute;


  left: 50%;


  border: 10px solid transparent;


  transform: translateX(-50%);


}





.avatar-reveal-pointer::before {


  top: -2px;


  border-top-color: var(--orange);


}





.avatar-reveal-pointer::after {


  bottom: -2px;


  border-bottom-color: var(--orange);


}





.avatar-reveal-status {


  min-height: 24px;


  margin: 0 0 18px;


}





.avatar-reveal-continue {


  min-width: 220px;


  min-height: 52px;


  padding: 0 28px;


  border: 0;


  border-radius: 14px;


  color: #101114;


  background: var(--orange);


  font-weight: 900;


  cursor: pointer;


}





.avatar-reveal-continue:disabled {


  opacity: .45;


  cursor: wait;


}





@media (max-width: 620px) {


  .profile-button,


  .profile-button:hover,


  .profile-button:focus-visible {


    width: 42px !important;


    min-width: 42px !important;


    height: 42px !important;


    min-height: 42px !important;


  }





  .profile-button .profile-avatar {


    width: 38px !important;


    min-width: 38px !important;


    height: 38px !important;


  }





  .avatar-reveal-panel {


    padding: 28px 16px;


  }





  .avatar-reveal-roulette {


    height: 138px;


    border-radius: 18px;


  }





  .avatar-reveal-track {


    gap: 10px;


  }





  .avatar-reveal-track img {


    width: 84px;


    min-width: 84px;


    height: 84px;


    border-radius: 18px;


  }


}


.search-close {


  width: 38px;


  height: 38px;


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


  border-radius: 12px;


  background: #151a22;


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


  transition: border-color .16s ease, background .16s ease, color .16s ease;


}


.search-close:hover,


.search-close:focus-visible {


  border-color: color-mix(in srgb, var(--orange) 42%, rgba(255,255,255,.14));


  background: #1c222b;


  color: var(--orange-2);


  outline: 0;


}


.search-modal__form { display: grid; grid-template-columns: 1fr 112px; gap: 10px; margin-bottom: 18px; }


.search-modal__form input, .auth-form input {


  min-height: 48px;


  padding: 0 14px;


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


  border-radius: 12px;


  outline: 0;


  background: #11161d;


  color: white;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.34);


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


}


.search-modal__form input:focus,


.auth-form input:focus {


  border-color: color-mix(in srgb, var(--orange) 50%, rgba(255,255,255,.16));


  background: #151b23;


  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent), inset 0 -1px 0 rgba(0,0,0,.34);


}


.search-modal__form button, .auth-actions button {


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


  border-radius: 12px;


  background: var(--bg-surface);


  color: #f5f6f8;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36);


  font-weight: 900;


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


}


.search-modal__form button:hover,


.search-modal__form button:focus-visible,


.auth-actions button:hover,


.auth-actions button:focus-visible {


  border-color: color-mix(in srgb, var(--orange) 52%, rgba(255,255,255,.14));


  background: #20252d;


  color: var(--orange-2);


  transform: translateY(-1px);


  outline: 0;


}


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


.auth-panel { width: min(480px, 100%); }


.google-button {


  position: relative;


  width: 100%;


  min-height: 46px;


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 12px;


  padding: 0 46px;


  border: 1px solid #747775;


  border-radius: 6px;


  background: #fff;


  color: #1f1f1f;


  font-size: 13px;


  font-weight: 650;


  letter-spacing: .1px;


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


}


.google-button:hover {


  border-color: #a8aaad;


  background: #f8faff;


  box-shadow: 0 2px 8px rgba(0,0,0,.24);


  transform: translateY(-1px);


}


.google-button:active {


  box-shadow: none;


  transform: translateY(0);


}


.google-button:focus-visible {


  outline: 3px solid rgba(66,133,244,.28);


  outline-offset: 2px;


}


.google-button__icon {


  position: absolute;


  left: 15px;


  width: 20px;


  height: 20px;


  display: grid;


  place-items: center;


}


.google-button__icon svg { width: 20px; height: 20px; display: block; }


.auth-divider {


  display: grid;


  grid-template-columns: 1fr auto 1fr;


  align-items: center;


  gap: 10px;


  margin: 14px 0;


}


.auth-divider::before,


.auth-divider::after {


  content: "";


  height: 1px;


  background: var(--line);


}


.auth-divider span {


  color: var(--muted);


  font-size: 10px;


  text-transform: uppercase;


  letter-spacing: .8px;


}


.auth-form { display: grid; gap: 8px; }


.google-username-copy {


  margin: 0 0 16px;


  color: var(--muted);


  font-size: 11px;


  line-height: 1.55;


}


.auth-field-label {


  margin: 4px 0 -2px;


  color: #bbb;


  font-size: 10px;


  font-weight: 700;


}


.auth-form input[readonly] {


  cursor: default;


  opacity: .72;


}


.google-username-submit {


  min-height: 44px;


  margin-top: 8px;


  border: 0;


  border-radius: 6px;


  background: var(--orange);


  color: #111;


  font-weight: 850;


}


.google-username-submit:disabled {


  cursor: wait;


  opacity: .62;


}


.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }


.auth-actions button { min-height: 42px; }


.bottom-nav { display: none; }





@media (max-width: 1100px) {


  .poster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }


  .poster-grid--new { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }


  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }


}


@media (max-width: 820px) {


  .site-shell { display: block; padding-bottom: 72px; }


  .topbar { grid-template-columns: auto 1fr auto; height: 60px; padding: 0 12px; }


  body.is-home .site-shell { width: 100%; }


  body.is-detail .site-shell { width: 100%; }


  body.is-detail .topbar { grid-template-columns: auto 1fr auto; }


  .logo { padding: 0; font-size: 19px; }


  .top-search { margin-left: 8px; }


  .profile-button span:last-child, .icon-button { display: none; }


  .theme-toggle { display: grid; width: 34px; height: 34px; }


  .top-actions { padding: 0; }


  .sidebar { display: none; }


  .anime-aura-canvas,


  .detail-page::before,


  .detail-page::after {


    left: 0;


    right: 0;


  }


  .anime-aura-canvas {


    width: 100% !important;


    transform: none;


  }


  .home-page, .detail-page { padding: 12px; }


  body.is-home #continueCard {


    width: calc(100% + 24px);


    margin-top: -12px;


    margin-left: -12px;


  }


  body.is-home .hero-carousel__copy {


    margin-left: 0;


  }


  .watch-progress { min-height: 250px; grid-template-columns: 1fr 44px; padding: 22px; background-position: center; background-size: cover; }


  .hero-carousel.watch-progress {


    min-height: 390px;


    grid-template-columns: 1fr 52px;


    padding: 30px 24px;


    border-radius: 0 0 14px 14px;


  }


  .hero-carousel.watch-progress h3 { font-size: clamp(32px, 8vw, 52px); }


  .poster-grid, .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }


  .catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }


  .bottom-nav {


    position: fixed;


    left: 10px;


    right: 10px;


    bottom: 9px;


    z-index: 60;


    display: grid;


    grid-template-columns: repeat(5, 1fr);


    padding: 8px;


    border: 1px solid var(--line);


    border-radius: 10px;


    background: rgba(10,11,11,.96);


    backdrop-filter: blur(18px);


  }


  .bottom-nav a { display: grid; justify-items: center; gap: 3px; color: #999; text-decoration: none; font-size: 16px; }


  .bottom-nav a span { font-size: 8px; }


  .bottom-nav a.is-active { color: var(--orange); }


}


@media (max-width: 560px) {


  .top-search input { width: 100%; }


  .watch-progress { min-height: 280px; align-content: end; }


  .hero-carousel.watch-progress {


    min-height: 420px;


    grid-template-columns: 1fr;


    padding: 26px 20px;


  }


  .hero-carousel .round-play {


    min-width: 142px;


    width: max-content;


    height: 48px;


    padding: 0 21px;


  }


  .poster-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .poster-grid--new, .library-grid { grid-template-columns: 1fr; }


  .catalog-toolbar { grid-template-columns: 1fr 1fr; }


  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .anime-hero { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; }


  .poster-actions { flex-wrap: wrap; }


  .poster-actions .watch-button { margin-left: 0; }


  .history-card__body { grid-template-columns: 1fr; }


  .history-card__body > span, .history-card__body strong, .history-card__body p, .history-card__meta { grid-column: 1; grid-row: auto; justify-self: start; }


  .modal-results { grid-template-columns: 1fr; }


}


body.is-detail .detail-page {


  padding-top: 22px;


}





body.is-detail .css-filter-control {


  justify-content: center;


  gap: 7px;


  margin: 0;


}





body.is-detail .css-filter-control button {


  min-height: 36px;


  border-color: rgba(255,255,255,.05);


  border-radius: 3px;


  background: #111112;


  color: #d7d7dc;


  box-shadow: none;


}





body.is-detail .css-filter-control button:hover,


body.is-detail .css-filter-control button.is-active {


  border-color: color-mix(in srgb, var(--orange) 66%, #fff);


  background: color-mix(in srgb, var(--orange) 28%, #111112);


  color: #fff;


}





body.is-detail .video-seek-wrap {


  position: relative;


  min-width: 0;


  display: grid;


  align-items: center;


}





body.is-detail .video-seek-tooltip {


  position: absolute;


  z-index: 12;


  bottom: 28px;


  left: 0;


  min-width: 48px;


  padding: 5px 7px;


  border-radius: 3px;


  background: rgba(16,16,18,.96);


  color: #fff;


  font-size: 11px;


  font-weight: 900;


  text-align: center;


  opacity: 0;


  pointer-events: none;


  transform: translateX(-50%) translateY(5px);


  transition: opacity .12s ease, transform .12s ease;


}





body.is-detail .video-seek-tooltip.is-visible {


  opacity: 1;


  transform: translateX(-50%) translateY(0);


}





@keyframes watch-party-in {


  from { opacity: 0; transform: translateX(104%); }


  to { opacity: 1; transform: translateX(0); }


}





body.is-detail .anime-hero {


  order: 1;


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


  gap: 26px;


  margin-top: 18px;


  padding: 26px;


  border-radius: 2px;


  background: rgba(27,27,29,.96);


}





body.is-detail .poster-column {


  display: grid;


  align-content: start;


  justify-items: center;


  gap: 10px;


}





body.is-detail .anime-poster {


  width: min(250px, 100%);


  border-radius: 2px;


}





body.is-detail .anime-info {


  align-content: start;


}





body.is-detail .anime-info h1 {


  font-size: 24px;


  color: #e6e6e8;


}





body.is-detail .subtitle {


  margin: 6px 0 16px;


  color: color-mix(in srgb, var(--orange) 68%, #cf3cff);


  font-size: 17px;


}





body.is-detail .chips {


  display: none;


}





body.is-detail .description {


  margin: 16px 0 0;


  color: #bababe;


  font-size: 15px;


  line-height: 1.72;


}





body.is-detail .meta-list {


  display: grid;


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


  gap: 0;


  margin: 0 0 16px;


  border: 0;


}





body.is-detail .meta-list dt,


body.is-detail .meta-list dd {


  min-height: 38px;


  display: flex;


  align-items: center;


  margin: 0;


  padding: 0 12px;


  border-bottom: 4px solid #1b1b1d;


  background: #111112;


  font-size: 14px;


}





body.is-detail .meta-list dt {


  color: #99999f;


}





body.is-detail .meta-list dd {


  color: color-mix(in srgb, var(--orange) 70%, #cf3cff);


  font-weight: 700;


}





body.is-detail .poster-actions {


  display: grid;


  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);


  gap: 26px;


  margin-top: 22px;


}





body.is-detail .poster-actions .share-button {


  display: none;


}





body.is-detail .poster-actions button {


  min-height: 52px;


  border-radius: 2px;


  font-size: 14px;


  font-weight: 900;


  text-transform: uppercase;


}





body.is-detail .poster-actions .watch-button {


  order: -1;


  margin-left: 0;


  border-color: color-mix(in srgb, var(--orange) 60%, #cf3cff);


  background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 64%, #cf3cff), color-mix(in srgb, #cf3cff 76%, var(--orange)));


  color: #fff;


  box-shadow: 0 14px 32px color-mix(in srgb, var(--orange) 28%, transparent);


}





body.is-detail .poster-actions .bookmark-button {


  border-color: #303640;


  background: #171b21;


  color: #f5f6f8;


}





body.is-detail .poster-actions .bookmark-button::before {


  content: "♥ ";


  color: color-mix(in srgb, var(--orange) 60%, #cf3cff);


}





body.is-detail .anime-hero {


  order: 2;


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


  gap: 18px;


  margin-top: 0;


  padding: 18px;


  border: 1px solid color-mix(in srgb, var(--orange) 36%, rgba(255,255,255,.06));


  border-radius: 7px;


  background: linear-gradient(160deg, rgba(15,20,27,.98), rgba(8,12,17,.98));


  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 44px rgba(0,0,0,.34);


}





body.is-detail .anime-poster {


  width: 132px;


  border-radius: 5px;


}





body.is-detail .anime-info h1 {


  margin: 0;


  color: #f0f0f0;


  font-size: 24px;


  line-height: 1.15;


  text-shadow: none;


}





body.is-detail .subtitle {


  margin: 4px 0 10px;


  color: #a5adb5;


  font-size: 12px;


}





body.is-detail .chips {


  display: flex;


  flex-wrap: wrap;


  gap: 6px;


  margin-bottom: 12px;


}





body.is-detail .chips span {


  padding: 5px 8px;


  border-radius: 4px;


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


  color: #aeb5bc;


  font-size: 10px;


}





body.is-detail .chips #profileScoreChip {


  color: var(--orange);


}





body.is-detail .meta-list {


  display: none;


}





body.is-detail .description {


  margin: 0;


  color: #bdc3c8;


  font-size: 13px;


  line-height: 1.65;


}





body.is-detail .poster-actions {


  display: flex;


  flex-wrap: wrap;


  gap: 10px;


  margin-top: 16px;


}





body.is-detail .poster-actions .share-button {


  display: inline-flex;


}





body.is-detail .poster-actions button {


  min-height: 38px;


  padding: 0 16px;


  border-radius: 6px;


  font-size: 12px;


  font-weight: 900;


  text-transform: none;


}





body.is-detail .poster-actions .watch-button {


  order: 3;


  margin-left: auto;


  border-color: var(--orange);


  background: var(--orange);


  color: var(--bg-base);


  box-shadow: none;


}





body.is-detail .poster-actions .bookmark-button {


  border-color: #303640;


  background: #171b21;


  color: #f5f6f8;


}





body.is-detail .poster-actions .bookmark-button::before {


  content: none;


}





body.is-detail .css-filter-control {


  justify-content: flex-start;


  opacity: .72;


}





body.is-detail .css-filter-control button {


  min-height: 26px;


  padding: 0 8px;


  border-radius: 4px;


  font-size: 9px;


}





@media (max-width: 760px) {


  body.is-detail .anime-hero {


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


    padding: 12px;


  }





  body.is-detail .anime-poster {


    width: 92px;


  }





  body.is-detail .poster-actions .watch-button {


    margin-left: 0;


  }


}





body.is-detail .css-filter-control {


  display: none;


}





body.is-detail .poster-actions {


  display: flex;


  gap: 10px;


}





body.is-detail .poster-actions .share-button {


  display: none !important;


}





body.is-detail .poster-actions .watch-button {


  order: 1;


  margin-left: 0;


}





body.is-detail .poster-actions .bookmark-button {


  order: 2;


}


body.is-detail .anime-hero {


  order: 0;


}





@media (max-width: 760px) {





  body.is-detail .css-filter-control {


    justify-content: flex-start;


  }


}


body.is-detail [data-watch-tab="description"], body.is-detail #descriptionPanel {


  display: none !important;


}





body.is-detail #commentsPanel,


body.is-detail #commentsPanel[hidden] {


  display: block !important;


}





body.is-detail .comment-form {


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


  gap: 12px;


  padding: 14px;


  border-radius: 6px;


  background: rgba(0,0,0,.24);


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


}





body.is-detail .comment-form textarea {


  min-height: 92px;


  border-radius: 4px;


  background: rgba(0,0,0,.32);


  border-color: rgba(255,255,255,.1);


  color: #f6f7f8;


  font-size: 13px;


  line-height: 1.55;


}





body.is-detail .comment-form__footer {


  margin-top: 10px;


  gap: 10px;


}





body.is-detail .comment-form__footer button {


  min-height: 34px;


  padding: 0 14px;


  border-radius: 4px;


  background: var(--orange);


  color: #0d0d0e;


  font-size: 11px;


  font-weight: 900;


}





body.is-detail .comments-list {


  gap: 10px;


  margin-top: 12px;


}





body.is-detail .comment-card {


  gap: 12px;


  padding: 13px;


  border-radius: 6px;


  background: rgba(0,0,0,.2);


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


}





body.is-detail .comment-card:hover {


  background: rgba(0,0,0,.28);


  border-color: rgba(255,192,138,.28);


}





body.is-detail .comment-card__content > p {


  color: rgba(246,247,248,.82);


  font-size: 13px;


  line-height: 1.55;


}





body.is-detail .comment-reactions button {


  border-radius: 4px;


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


}





body.is-detail .comment-form {


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


  gap: 11px;


  padding: 12px;


  border-radius: 6px;


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


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


}





body.is-detail .comment-form:hover {


  border-color: rgba(255,255,255,.14);


}





body.is-detail .comment-form__avatar,


body.is-detail .comment-card__avatar {


  box-shadow: 0 0 0 1px rgba(255,255,255,.12);


}





body.is-detail .comment-form textarea {


  min-height: 82px;


  border-radius: 5px;


  background: rgba(0,0,0,.22);


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


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


}





body.is-detail .comment-form textarea:hover {


  border-color: rgba(255,255,255,.16);


  background: rgba(0,0,0,.28);


}





body.is-detail .comment-form textarea:focus {


  border-color: rgba(255,192,138,.58);


  box-shadow: 0 0 0 3px rgba(255,192,138,.1);


}





body.is-detail .comment-form__footer button,


body.is-detail .comment-user-actions button,


body.is-detail .comment-reactions button {


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


}





body.is-detail .comment-form__footer button {


  border: 1px solid rgba(255,192,138,.5);


  background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 92%, #fff), var(--orange));


  box-shadow: 0 8px 18px rgba(255,192,138,.16);


}





body.is-detail .comment-form__footer button:hover {


  transform: translateY(-1px);


  box-shadow: 0 12px 24px rgba(255,192,138,.24);


  filter: brightness(1.04);


}





body.is-detail .comment-card {


  gap: 11px;


  padding: 12px;


  border-radius: 6px;


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


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


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


}





body.is-detail .comment-card:hover {


  transform: translateY(-1px);


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


  border-color: rgba(255,255,255,.14);


}





body.is-detail .comment-card__content header {


  gap: 7px;


}





body.is-detail .comment-card__content > p {


  margin-top: 7px;


  margin-bottom: 10px;


  color: rgba(246,247,248,.78);


}





body.is-detail .comment-reactions {


  gap: 6px;


}





body.is-detail .comment-reactions button {


  min-height: 27px;


  border-radius: 5px;


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


  border-color: rgba(255,255,255,.08);


}





body.is-detail .comment-reactions button:hover,


body.is-detail .comment-user-actions button:hover {


  transform: translateY(-1px);


  border-color: rgba(255,192,138,.4);


  background: rgba(255,192,138,.1);


  color: var(--orange);


}





body.is-detail .anime-hero {


  width: 100%;


  max-width: none;


}


body.is-detail .detail-page {


  --watch-bg: rgba(7,8,10,.88);


  --watch-panel: rgba(12,13,15,.92);


  --watch-panel-soft: rgba(16,17,19,.76);


  --watch-line: rgba(255,255,255,.1);


  --watch-line-strong: rgba(255,255,255,.16);


  --watch-text: #f5f6f7;


  --watch-muted: rgba(245,246,247,.62);


  --watch-orange: var(--accent-default);


  --watch-orange-soft: rgba(255,192,138,.14);


  --watch-orange-glow: rgba(255,192,138,.34);


}





body.is-detail .anime-hero {


  width: 100% !important;


  max-width: none !important;


}





body.is-detail .anime-hero {


  border: 1px solid var(--watch-line) !important;


  border-radius: 6px !important;


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


  box-shadow: none !important;


  overflow: hidden;


}





body.is-detail .anime-hero {


  padding: 16px !important;


  display: grid !important;


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


  gap: 18px !important;


}





body.is-detail .anime-info h1 {


  color: var(--watch-text) !important;


}





body.is-detail .anime-info .description,


body.is-detail .comment-card__content > p {


  color: rgba(245,246,247,.78) !important;


}





body.is-detail [data-watch-tab="description"],


body.is-detail #descriptionPanel {


  display: none !important;


}





body.is-detail #commentsPanel,


body.is-detail #commentsPanel[hidden] {


  display: block !important;


}





body.is-detail .comment-form,


body.is-detail .comment-card {


  border: 1px solid var(--watch-line) !important;


  border-radius: 6px !important;


  background: var(--watch-panel-soft) !important;


  box-shadow: none !important;


  transform: none !important;


}





body.is-detail .comment-form:hover,


body.is-detail .comment-card:hover,


body.is-detail .comment-form textarea:hover {


  border-color: rgba(255,192,138,.42) !important;


  background: var(--watch-panel-soft) !important;


  box-shadow: none !important;


}





body.is-detail .comment-form textarea {


  min-height: 88px !important;


  border: 1px solid var(--watch-line) !important;


  border-radius: 4px !important;


  background: rgba(0,0,0,.24) !important;


  color: var(--watch-text) !important;


  box-shadow: none !important;


}





body.is-detail .comment-form textarea:focus {


  border-color: rgba(255,192,138,.72) !important;


  box-shadow: 0 0 0 2px rgba(255,192,138,.12) !important;


}





@media (max-width: 760px) {


  body.is-detail .anime-hero {


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


    gap: 12px !important;


    padding: 12px !important;


  }


}





/* Absolute final override: quality, 4K and sound never react visually. */





/* Redesigned comments block: quiet graphite base, peach only on intent. */


body.is-detail .comments-panel {


  padding-top: 0 !important;


}





body.is-detail .comments-layout {


  display: grid !important;


  gap: 14px !important;


  padding: 16px !important;


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


  border-radius: 16px !important;


  background: linear-gradient(180deg, rgba(28,32,39,.92), rgba(14,17,22,.96)) !important;


}





body.is-detail .comments-intro {


  display: grid !important;


  gap: 4px !important;


  padding-bottom: 12px !important;


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


}





body.is-detail .comments-intro span {


  color: var(--orange-2) !important;


  font-size: 10px !important;


  font-weight: 1000 !important;


  text-transform: uppercase !important;


}





body.is-detail .comments-intro strong {


  color: #f5f6f8 !important;


  font-size: clamp(22px, 2.6vw, 34px) !important;


  line-height: 1 !important;


}





body.is-detail .comments-intro small {


  color: rgba(255,255,255,.5) !important;


  font-size: 12px !important;


  font-weight: 800 !important;


}





body.is-detail .comment-form,


body.is-detail .comment-form:hover {


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


  gap: 12px !important;


  padding: 14px !important;


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


  border-radius: 14px !important;


  background: #141820 !important;


  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;


  transform: none !important;


}





body.is-detail .comment-form__avatar,


body.is-detail .comment-card__avatar {


  width: 44px !important;


  height: 44px !important;


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


  border-radius: 14px !important;


  background: #0f1218 !important;


}





body.is-detail .comment-form textarea,


body.is-detail .comment-form textarea:hover {


  min-height: 96px !important;


  padding: 13px 14px !important;


  border: 1px solid #303640 !important;


  border-radius: 12px !important;


  background: #10141a !important;


  color: var(--watch-text) !important;


  box-shadow: none !important;


  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;


}





body.is-detail .comment-form textarea:focus,


body.is-detail .comment-form textarea:focus-visible {


  border-color: rgba(255,164,119,.72) !important;


  background: #121821 !important;


  box-shadow: 0 0 0 3px rgba(255,164,119,.1) !important;


}





body.is-detail .comment-form__footer {


  margin-top: 10px !important;


}





body.is-detail .comment-form__footer span {


  color: rgba(255,255,255,.48) !important;


  font-size: 11px !important;


  font-weight: 800 !important;


}





body.is-detail .comment-form__footer button {


  border: 1px solid #303640 !important;


  background: #1a1f27 !important;


  color: #f5f6f8 !important;


  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;


}





body.is-detail .comment-form__footer button:hover {


  border-color: rgba(255,164,119,.78) !important;


  background: #222832 !important;


  color: var(--orange-2) !important;


  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,164,119,.12) !important;


  transform: translateY(-1px) !important;


  filter: none !important;


}





body.is-detail .comments-list {


  gap: 10px !important;


  margin-top: 0 !important;


}





body.is-detail .comment-card,


body.is-detail .comment-card:hover {


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


  gap: 12px !important;


  padding: 14px !important;


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


  border-radius: 14px !important;


  background: #12161d !important;


  box-shadow: none !important;


  transform: none !important;


  transition: border-color .16s ease, background .16s ease !important;


}





body.is-detail .comment-card:hover {


  border-color: rgba(255,164,119,.34) !important;


  background: #151a22 !important;


}





body.is-detail .comment-card__content header {


  padding-bottom: 6px !important;


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


}





body.is-detail .comment-card__content > p {


  margin: 10px 0 12px !important;


  color: rgba(245,246,248,.82) !important;


  font-size: 13px !important;


}





body.is-detail .comment-reactions {


  gap: 7px !important;


}





body.is-detail .comment-reactions button,


body.is-detail .comment-user-actions button {


  border: 1px solid #303640 !important;


  border-radius: 999px !important;


  background: #171b21 !important;


  color: rgba(255,255,255,.66) !important;


  transition: border-color .16s ease, background .16s ease, color .16s ease !important;


}





body.is-detail .comment-reactions button:hover,


body.is-detail .comment-user-actions button:hover {


  border-color: rgba(255,164,119,.64) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


}





body.is-detail .comment-reactions button.is-active {


  border-color: rgba(255,164,119,.78) !important;


  background: #222832 !important;


  color: var(--orange-2) !important;


}





/* The center play button must obey JS visibility state. */





body.is-detail .video-seek-wrap {


  pointer-events: auto !important;


}





body.is-detail .video-seek-wrap {


  height: 34px !important;


  padding: 0 8px !important;


  background: rgba(6,7,8,.94) !important;


}





/* Final bottom controls fit: 720 + 4K + volume stay in one Yummy-like row. */





body.is-detail .video-seek-wrap {


  background: rgba(6,7,8,.94) !important;


  border-color: rgba(255,255,255,.12) !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .video-seek-wrap {


  min-width: 0 !important;


}





/* Bottom controls final alignment: play, time, seek, duration, sound, volume, 720, 4K, fullscreen. */


body.is-detail .video-seek-wrap { order: 3 !important; }





/* Final fit polish: sound icon, 4K checkbox, comments focus, watch-party calm glass. */





body.is-detail .comment-form textarea:focus,


body.is-detail .comment-form textarea:focus-visible,


body.is-detail .comment-form textarea:hover {


  border-color: rgba(255,164,119,.72) !important;


  box-shadow: 0 0 0 3px rgba(255,164,119,.1) !important;


  outline: 0 !important;


}


.theme-toggle,


.notification-button {


  color: #fff;


}





html[data-theme="light"] .theme-toggle,


html[data-theme="light"] .notification-button {


  color: #111820;


}





.theme-toggle,


.theme-toggle:hover,


.theme-toggle:focus,


.theme-toggle:active {


  font-size: 0 !important;


  transform: none !important;


}





.theme-toggle::before,


.notification-button::before {


  content: "";


  display: block;


  width: 19px;


  height: 19px;


  background: currentColor;


  transition: background .18s ease;


}





.theme-toggle::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm0 4a1 1 0 0 1-1-1v-1.35a1 1 0 1 1 2 0V21a1 1 0 0 1-1 1Zm0-16.65a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v1.35a1 1 0 0 1-1 1ZM4.22 20.78a1 1 0 0 1-.7-1.71l.95-.96a1 1 0 0 1 1.42 1.42l-.96.95a1 1 0 0 1-.71.3Zm14.6-14.6a1 1 0 0 1-.7-1.71l.95-.96a1 1 0 1 1 1.42 1.42l-.96.95a1 1 0 0 1-.71.3ZM3 13a1 1 0 1 1 0-2h1.35a1 1 0 1 1 0 2H3Zm16.65 0a1 1 0 1 1 0-2H21a1 1 0 1 1 0 2h-1.35ZM4.47 5.89l-.96-.96a1 1 0 0 1 1.42-1.42l.95.96a1 1 0 1 1-1.41 1.42Zm14.6 14.6-.96-.96a1 1 0 0 1 1.42-1.42l.95.96a1 1 0 0 1-1.41 1.42Z'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm0 4a1 1 0 0 1-1-1v-1.35a1 1 0 1 1 2 0V21a1 1 0 0 1-1 1Zm0-16.65a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v1.35a1 1 0 0 1-1 1ZM4.22 20.78a1 1 0 0 1-.7-1.71l.95-.96a1 1 0 0 1 1.42 1.42l-.96.95a1 1 0 0 1-.71.3Zm14.6-14.6a1 1 0 0 1-.7-1.71l.95-.96a1 1 0 1 1 1.42 1.42l-.96.95a1 1 0 0 1-.71.3ZM3 13a1 1 0 1 1 0-2h1.35a1 1 0 1 1 0 2H3Zm16.65 0a1 1 0 1 1 0-2H21a1 1 0 1 1 0 2h-1.35ZM4.47 5.89l-.96-.96a1 1 0 0 1 1.42-1.42l.95.96a1 1 0 1 1-1.41 1.42Zm14.6 14.6-.96-.96a1 1 0 0 1 1.42-1.42l.95.96a1 1 0 0 1-1.41 1.42Z'/%3E%3C/svg%3E") center / contain no-repeat;


}





html[data-theme="light"] .theme-toggle::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.76 15.84a1 1 0 0 1 .2 1.05A9.7 9.7 0 0 1 12.01 23C6.49 23 2 18.51 2 12.99 2 8.63 4.8 4.77 8.95 3.43a1 1 0 0 1 1.25 1.28 8.02 8.02 0 0 0-.43 2.6 8.13 8.13 0 0 0 8.13 8.13c.58 0 1.15-.06 1.7-.18a1 1 0 0 1 1.16.58Z'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.76 15.84a1 1 0 0 1 .2 1.05A9.7 9.7 0 0 1 12.01 23C6.49 23 2 18.51 2 12.99 2 8.63 4.8 4.77 8.95 3.43a1 1 0 0 1 1.25 1.28 8.02 8.02 0 0 0-.43 2.6 8.13 8.13 0 0 0 8.13 8.13c.58 0 1.15-.06 1.7-.18a1 1 0 0 1 1.16.58Z'/%3E%3C/svg%3E") center / contain no-repeat;


}





.notification-button span {


  display: none !important;


}





.notification-button::before {


  width: 18px;


  height: 18px;


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;


}





.theme-toggle:hover,


.theme-toggle:focus-visible,


.notification-button:hover,


.notification-button:focus-visible,


.notification-button.is-active {


  color: var(--anime-primary, var(--orange)) !important;


  border-color: color-mix(in srgb, var(--anime-primary, var(--orange)) 62%, var(--line)) !important;


}





.notification-button b {


  background: var(--anime-primary, var(--orange)) !important;


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


  box-shadow: 0 0 14px color-mix(in srgb, var(--anime-primary, var(--orange)) 42%, transparent) !important;


}





body.is-detail .profile-button,


body.is-detail .profile-button:hover,


body.is-detail .profile-button:focus,


body.is-detail .profile-button:active {


  background: transparent !important;


  box-shadow: none !important;


  transform: none !important;


}





body.is-detail .nav--footer button:hover,


body.is-detail .nav--footer button:focus,


body.is-detail .nav--footer button:active {


  border-left-color: transparent !important;


  background: transparent !important;


  color: inherit !important;


  box-shadow: none !important;


  transform: none !important;


  backdrop-filter: none !important;


}





body.is-detail .nav--footer button:hover span,


body.is-detail .nav--footer button:focus span,


body.is-detail .nav--footer button:active span {


  color: #d6d6d4 !important;


}





html[data-theme="light"] body.is-detail .nav--footer button:hover span,


html[data-theme="light"] body.is-detail .nav--footer button:focus span,


html[data-theme="light"] body.is-detail .nav--footer button:active span {


  color: #52687a !important;


}





body.is-detail .video-seek-wrap {


  background-color: rgba(0,0,0,.30) !important;


  border-color: rgba(255,255,255,.10) !important;


  box-shadow: none !important;


}





/* Header icon correction: cleaner theme glyph, calm bell hover. */


.theme-toggle::before {


  width: 20px !important;


  height: 20px !important;


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat !important;


}





html[data-theme="light"] .theme-toggle::before {


  width: 19px !important;


  height: 19px !important;


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 7.5A9 9 0 1 1 12 3Z'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 7.5A9 9 0 1 1 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat !important;


}





.notification-button:hover,


.notification-button:focus-visible,


.notification-button.is-active {


  color: #a8b0b8 !important;


  border-color: rgba(168,176,184,.42) !important;


}





/* Anivox-inspired refresh: rounder typography, softer dark surface, pink accent. */


:root {


  --bg: #0b0b0d;


  --panel: #111113;


  --panel-2: #171719;


  --panel-3: #202024;


  --line: rgba(255,255,255,.09);


  --line-soft: rgba(255,255,255,.055);


  --text: #fbfbfb;


  --muted: #a7a7ad;


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  --blue: #8ad7ff;


  --anime-primary: var(--orange);


  --anime-accent: var(--orange-2);


  --anime-glow: rgba(255,192,138,.24);


  --radius: 22px;


}





body {


  background:


    linear-gradient(180deg, rgba(255,192,138,.035), transparent 260px),


    #0a0a0c;


  font-family: "Arial Rounded MT Bold", "Nunito", Inter, ui-rounded, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


  font-weight: 700;


  letter-spacing: 0;


}





html:not([data-theme="light"]) body::before {


  opacity: .52;


  background-image:


    radial-gradient(circle at 18% 18%, rgba(255,192,138,.34) 0 2px, transparent 3px),


    radial-gradient(circle at 72% 24%, rgba(255,190,224,.26) 0 2px, transparent 3px),


    radial-gradient(circle at 48% 62%, rgba(255,192,138,.22) 0 2px, transparent 3px),


    radial-gradient(circle at 88% 74%, rgba(255,190,224,.22) 0 2px, transparent 3px);


  background-size: 440px 420px, 520px 500px, 620px 580px, 720px 680px;


  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.72) 70%, transparent);


}





.site-shell,


body.is-home .site-shell,


body.is-detail .site-shell {


  width: 100%;


  max-width: none;


  border: 0;


  background: rgba(10,10,12,.96);


  box-shadow: none;


}





.topbar,


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


  grid-template-columns: 188px minmax(280px, 560px) 1fr;


  height: 76px;


  border-bottom: 1px solid rgba(255,255,255,.07);


  background: rgba(13,13,15,.88);


  backdrop-filter: blur(22px);


  box-shadow: none;


}





.logo {


  align-items: center;


  min-height: 52px;


  padding-left: 24px;


  font-size: 25px;


  font-weight: 1000;


  letter-spacing: 0;


}





.logo::before {


  content: "";


  width: 42px;


  height: 42px;


  margin-right: 10px;


  border-radius: 15px;


  background: #fff;


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='black' d='M24 4c8.2 0 15.4 4.8 18.7 11.9l-4.4 4.4-4.8-9.8-7.5 5.1-7.5-5.1-4.8 9.8-4.4-4.4C12.6 8.8 15.8 4 24 4Zm0 11.6 9.8 6.6v7.5L24 39.8l-9.8-10.1v-7.5L24 15.6Zm-4 8.8v7.2l7-3.6-7-3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='black' d='M24 4c8.2 0 15.4 4.8 18.7 11.9l-4.4 4.4-4.8-9.8-7.5 5.1-7.5-5.1-4.8 9.8-4.4-4.4C12.6 8.8 15.8 4 24 4Zm0 11.6 9.8 6.6v7.5L24 39.8l-9.8-10.1v-7.5L24 15.6Zm-4 8.8v7.2l7-3.6-7-3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;


}





.logo-anime,


.logo-hub {


  color: #fff;


}





.logo-hub,


body.is-detail .logo-hub,


.logo:hover .logo-hub,


.logo:focus-visible .logo-hub {


  margin-left: 3px;


  padding: 0;


  border-radius: 0;


  background: transparent;


  color: var(--orange);


  box-shadow: none;


  transform: none;


}





.logo-tail,


.logo::after {


  display: none !important;


}





.top-search {


  height: 46px;


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


  margin-left: 10px;


  border: 0;


  border-radius: 999px;


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


  box-shadow: none;


}





.top-search:hover,


.top-search:focus-within,


html:not([data-theme="light"]) .top-search:focus-within {


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


  box-shadow: inset 0 0 0 2px rgba(255,192,138,.34);


}





.top-search input {


  padding-right: 18px;


  font-size: 15px;


  font-weight: 800;


}





.top-search button {


  width: 48px;


  height: 46px;


  color: #fff;


}





.top-actions {


  gap: 14px;


  padding-right: 28px;


}





.theme-toggle,


.notification-button {


  width: 42px;


  height: 42px;


  border: 0;


  border-radius: 999px;


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


  color: #fff;


}





.theme-toggle:hover,


.theme-toggle:focus-visible {


  color: #0b0b0d !important;


  background: var(--orange) !important;


  border-color: transparent !important;


}





.notification-button:hover,


.notification-button:focus-visible,


.notification-button.is-active {


  color: #c9c9cf !important;


  background: rgba(255,255,255,.11) !important;


  border-color: transparent !important;


}





.profile-button {


  min-height: 46px;


  padding: 0 14px 0 4px;


  border-radius: 999px;


  color: #fff;


  font-size: 15px;


  font-weight: 900;


}





.profile-button:hover {


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


}





.profile-avatar {


  width: 42px;


  height: 42px;


  border: 0;


  background: linear-gradient(145deg, #ffb0df, var(--accent-hover));


}





.sidebar {


  top: 76px;


  height: calc(100vh - 76px);


  padding: 16px 10px;


}





.nav {


  gap: 10px;


  padding: 0;


}





.nav a,


.nav button {


  min-height: 50px;


  grid-template-columns: 34px 1fr;


  padding: 0 16px;


  border: 0;


  border-radius: 18px;


  color: #a8a8ad;


  font-size: 14px;


  font-weight: 900;


}





.nav a span,


.nav button span {


  width: 28px;


  height: 28px;


  display: grid;


  place-items: center;


  font-size: 0;


  color: currentColor;


}





.nav a span::before,


.nav button span::before {


  content: "";


  width: 19px;


  height: 19px;


  background: currentColor;


}





.nav a:nth-child(1) span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav a:nth-child(2) span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav a:nth-child(3) span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav a:nth-child(4) span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav--footer a span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.2a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.7l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.2a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.2a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.7v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.2a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.2a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.7l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.2a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.2a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.7v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.2a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav--footer button span::before {


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;


}





.nav a:hover,


.nav button:hover,


.nav a.is-active,


body.is-home .sidebar .nav a:hover,


body.is-home .sidebar .nav button:hover,


body.is-home .sidebar .nav a.is-active,


body.is-home .sidebar .nav a[data-nav="home"] {


  background: rgba(255,192,138,.16);


  color: #fff;


  backdrop-filter: blur(10px);


}





.home-page,


.detail-page {


  padding: 22px clamp(18px, 3vw, 44px) 42px;


}





.section-head h2,


.page-heading h1,


.title-line h1,


.watch-progress h3 {


  font-weight: 1000;


  letter-spacing: 0;


}





.section-head h2 {


  display: inline-flex;


  align-items: center;


  gap: 12px;


  font-size: clamp(24px, 2.3vw, 34px);


}





.section-head h2::before {


  content: "";


  width: 24px;


  height: 24px;


  border-radius: 9px;


  background: var(--orange);


  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5 14.9 8l6.1.8-4.4 4.3 1 6.1L12 16.3 6.4 19.2l1-6.1L3 8.8 9.1 8 12 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;


  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5 14.9 8l6.1.8-4.4 4.3 1 6.1L12 16.3 6.4 19.2l1-6.1L3 8.8 9.1 8 12 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;


}





.watch-progress {


  min-height: min(620px, calc(100vh - 132px));


  grid-template-columns: minmax(280px, 42%) minmax(0, 1fr) 86px;


  align-items: end;


  padding: clamp(34px, 5vw, 70px);


  border: 0;


  border-radius: 0;


  background:


    linear-gradient(90deg, rgba(10,10,12,.96) 0 30%, rgba(10,10,12,.62) 56%, rgba(10,10,12,.94) 100%),


    var(--hero-bg, none) right center / auto 105% no-repeat,


    #101012;


  box-shadow: none;


}





.watch-progress::before {


  content: "";


  position: absolute;


  inset: 0;


  pointer-events: none;


  opacity: .45;


  background:


    radial-gradient(circle at 17% 33%, rgba(255,192,138,.5) 0 2px, transparent 3px),


    radial-gradient(circle at 66% 18%, rgba(255,204,229,.42) 0 2px, transparent 3px),


    radial-gradient(circle at 78% 72%, rgba(255,192,138,.38) 0 2px, transparent 3px);


  background-size: 360px 330px, 520px 480px, 440px 390px;


}





.watch-progress > * {


  position: relative;


  z-index: 1;


}





.progress-cover {


  border-radius: 22px;


  box-shadow: 0 22px 60px rgba(0,0,0,.44);


}





.watch-progress h3 {


  max-width: 620px;


  margin-bottom: 18px;


  color: #fff;


  font-size: clamp(42px, 7vw, 86px);


  line-height: .94;


}





.watch-progress p {


  color: #b9b9bf;


  font-size: 16px;


  font-weight: 700;


}





.watch-progress .progress-meta,


.chips,


.meta-chips {


  gap: 10px;


}





.watch-progress .progress-meta span,


.chips span,


.meta-chips span,


.age-chip {


  min-height: 34px;


  display: inline-flex;


  align-items: center;


  border: 0;


  border-radius: 999px;


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


  color: #fff;


  font-size: 13px;


  font-weight: 1000;


}





.watch-button,


.accent-button,


.round-play,


.google-login-button,


.auth-form button {


  border: 0 !important;


  border-radius: 999px !important;


  background: var(--orange) !important;


  color: #101012 !important;


  font-weight: 1000 !important;


  box-shadow: none !important;


}





.watch-button:hover,


.accent-button:hover,


.round-play:hover,


.google-login-button:hover,


.auth-form button:hover {


  filter: brightness(1.04) !important;


  transform: translateY(-1px);


}





.bookmark-button,


.share-button,


.link-button,


.danger-link {


  border-radius: 999px;


  font-weight: 1000;


}





.poster-section {


  margin-top: 32px;


}





.poster-row,


.poster-grid,


.favorites-grid,


.history-grid {


  gap: 20px;


}





.poster-card,


.mini-card,


.favorite-card,


.history-card,


.continue-item,


.catalog-card {


  border: 0 !important;


  border-radius: 24px !important;


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


  box-shadow: none !important;


  transition: transform .2s ease, background .2s ease, filter .2s ease !important;


}





.poster-card:hover,


.mini-card:hover,


.favorite-card:hover,


.history-card:hover,


.continue-item:hover,


.catalog-card:hover {


  border-color: transparent !important;


  background: rgba(255,255,255,.085) !important;


  transform: translateY(-4px);


  filter: saturate(1.05);


}





.poster-card img,


.mini-card img,


.favorite-card__cover img,


.history-card__poster img,


.continue-item__cover img {


  border-radius: 22px;


}





.poster-card h3,


.mini-card h3,


.favorite-card h3,


.history-card h3,


.continue-item h3 {


  color: #fff;


  font-weight: 1000;


  line-height: 1.05;


}





.poster-card small,


.mini-card small,


.favorite-card small,


.history-card small,


.continue-item small {


  color: #a8a8ad;


  font-weight: 800;


}





body.is-detail {


  --orange: var(--accent-default);


  --orange-2: var(--accent-hover);


  --watch-orange: var(--accent-default);


  background:


    linear-gradient(90deg, rgba(10,10,12,.62), rgba(10,10,12,.95) 22% 78%, rgba(10,10,12,.62)),


    linear-gradient(180deg, rgba(255,192,138,.055), transparent 260px),


    var(--anime-bg) center top / cover fixed no-repeat,


    #0a0a0c;


}





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


  opacity: .78;


  filter: saturate(1.03) contrast(1.02) brightness(.86);


}





.anime-hero, .notifications-popover, .search-modal__panel {


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


  border-radius: 26px !important;


  background: rgba(15,15,18,.72) !important;


  box-shadow: none !important;


  backdrop-filter: blur(18px);


}





.anime-poster {


  border: 0 !important;


  border-radius: 24px !important;


  box-shadow: 0 18px 54px rgba(0,0,0,.42) !important;


}





.title-line h1,


.profile-summary h2,


.auth-panel h2 {


  color: #fff;


  font-size: clamp(30px, 3.2vw, 48px);


  font-weight: 1000;


  line-height: 1.02;


}





.description,


.watch-description-copy,


.meta-list,


.subtitle {


  color: #b7b7bd !important;


  font-weight: 700;


}





.tabs {


  border-color: rgba(255,255,255,.07) !important;


}





.tabs button {


  min-height: 42px;


  padding: 0 18px;


  border-radius: 999px;


  color: #aaaab0;


  font-weight: 1000;


}





.tabs button.is-active {


  background: rgba(255,192,138,.18);


  color: #fff;


}





.comment-card,


.comment-form,


.my-comment-card {


  border-color: rgba(255,255,255,.07) !important;


  border-radius: 22px !important;


  background: rgba(255,255,255,.045) !important;


}





html[data-theme="light"] body {


  background: #f8f7fb;


}





html[data-theme="light"] .site-shell,


html[data-theme="light"] body.is-home .site-shell,


html[data-theme="light"] body.is-detail .site-shell {


  background: rgba(248,247,251,.96);


}





html[data-theme="light"] .topbar {


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


}





html[data-theme="light"] .logo-anime {


  color: #17171a;


}





html[data-theme="light"] .top-search,


html[data-theme="light"] .theme-toggle,


html[data-theme="light"] .notification-button {


  background: rgba(20,20,24,.07);


}





html[data-theme="light"] .watch-progress, html[data-theme="light"] .anime-hero {


  background-color: rgba(255,255,255,.82) !important;


}





@media (max-width: 980px) {


  .topbar,


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


    grid-template-columns: 160px minmax(180px, 1fr) auto;


  }





  .watch-progress {


    grid-template-columns: 1fr;


    min-height: 520px;


  }





  .watch-progress h3 {


    font-size: clamp(38px, 12vw, 64px);


  }


}


body.is-detail .anime-hero {


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


  border-radius: 26px !important;


  background: rgba(15,15,18,.72) !important;


  box-shadow: none !important;


  backdrop-filter: blur(18px);


}





html[data-theme="light"] body.is-detail .anime-hero {


  background: rgba(255,255,255,.82) !important;


}





/* Restore AnimeHub wordmark after the Anivox-like pass. */


.logo {


  min-height: auto !important;


  padding-left: 22px !important;


  font-size: 22px !important;


  font-weight: 900 !important;


  letter-spacing: -1.1px !important;


}





.logo::before {


  content: none !important;


  display: none !important;


}





.logo-anime {


  color: #fff !important;


}





.logo-hub,


body.is-detail .logo-hub,


.logo:hover .logo-hub,


.logo:focus-visible .logo-hub {


  margin-left: 2px !important;


  padding: 1px 4px 2px !important;


  border-radius: 3px !important;


  background: var(--orange) !important;


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


  box-shadow: none !important;


  transform: none !important;


}





html[data-theme="light"] .logo-anime {


  color: #17171a !important;


}





.logo {


  display: inline-flex !important;


  align-items: center !important;


  gap: 8px !important;


  padding-left: 0 !important;


}





.logo-mark {


  display: block;


  width: 38px;


  height: 38px;


  object-fit: contain;


  flex: 0 0 auto;


}





.logo-anime {


  margin-left: 0 !important;


}





/* Home should use the full viewport width without losing the left navigation. */


body.is-home .site-shell {


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


}





body.is-home .sidebar {


  display: flex !important;


}





body.is-home .home-page {


  grid-column: 2 !important;


  width: 100% !important;


  padding-inline: 0 24px !important;


}





body.is-home .poster-section,


body.is-home .catalog-section,


body.is-home .library-section,


body.is-home .settings-section {


  width: min(1520px, calc(100% - 48px));


  margin-inline: auto;


}





body.is-home .continue-card {


  margin-inline: 0 !important;


}


body.is-detail .video-seek-wrap { order: 3 !important; }


body.is-detail .video-seek-wrap { order: 3 !important; }





/* Home hero stays full-width while the left navigation floats transparently above it. */


body.is-home .home-page {


  grid-column: 1 / -1 !important;


  width: 100% !important;


  padding-inline: 0 !important;


  overflow: visible !important;


}





body.is-home #continueCard,


body.is-home .continue-card {


  width: 100% !important;


  margin: 0 !important;


}





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


  border-radius: 0 !important;


}





body.is-home .hero-carousel__copy {


  margin-left: clamp(238px, 20vw, 330px) !important;


}





body.is-home .sidebar {


  z-index: 8 !important;


  border-right: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


  backdrop-filter: none !important;


}





body.is-home .sidebar::before,


body.is-home .sidebar::after {


  display: none !important;


}





body.is-home .sidebar .nav a,


body.is-home .sidebar .nav button {


  border-color: transparent !important;


  background: transparent !important;


  box-shadow: none !important;


  backdrop-filter: none !important;


}





body.is-home .sidebar .nav a:hover,


body.is-home .sidebar .nav button:hover,


body.is-home .sidebar .nav a.is-active,


body.is-home .sidebar .nav a[data-nav="home"] {


  background: rgba(6,10,14,.34) !important;


  color: #fff !important;


  box-shadow: none !important;


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


}





@media (max-width: 980px) {


  body.is-home .home-page {


    grid-column: auto !important;


    padding-inline: 12px !important;


  }





  body.is-home #continueCard,


  body.is-home .continue-card {


    width: calc(100% + 24px) !important;


    margin-left: -12px !important;


  }





  body.is-home .hero-carousel__copy {


    margin-left: 0 !important;


  }


}





/* Logo spacing and softer graphite surfaces. */


:root {


  --bg: #101317;


  --panel: #15191f;


  --panel-2: #1a2027;


  --panel-3: #202832;


}





body {


  background:


    linear-gradient(180deg, rgba(255,192,138,.028), transparent 260px),


    #111418 !important;


}





.site-shell,


body.is-home .site-shell,


body.is-detail .site-shell {


  background: rgba(19,23,29,.96) !important;


}





.topbar,


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


  background: rgba(22,26,32,.9) !important;


  border-bottom-color: rgba(255,255,255,.09) !important;


}





.logo {


  padding-left: 18px !important;


}





body.is-home .sidebar {


  background: rgba(17,20,25,.18) !important;


}





.top-search,


.theme-toggle,


.notification-button {


  background: rgba(255,255,255,.09) !important;


}





.anime-hero, .notifications-popover, .search-modal__panel, body.is-detail .anime-hero {


  background: rgba(24,29,36,.78) !important;


}





.poster-card,


.mini-card,


.favorite-card,


.history-card,


.continue-item,


.catalog-card,


.comment-card,


.comment-form,


.my-comment-card {


  background: rgba(255,255,255,.07) !important;


}





html[data-theme="light"] body {


  background: #f0f2f5 !important;


}





html[data-theme="light"] .site-shell,


html[data-theme="light"] body.is-home .site-shell,


html[data-theme="light"] body.is-detail .site-shell {


  background: rgba(242,244,247,.96) !important;


}





html[data-theme="light"] .topbar {


  background: rgba(235,238,242,.92) !important;


}





/* Tighter wordmark and search placement. */


.topbar,


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


  grid-template-columns: 206px minmax(280px, 560px) 1fr !important;


}





.logo {


  gap: 5px !important;


}





.logo-hub,


body.is-detail .logo-hub,


.logo:hover .logo-hub,


.logo:focus-visible .logo-hub {


  margin-left: -1px !important;


}





.top-search {


  margin-left: 14px !important;


}





@media (max-width: 980px) {


  .topbar,


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


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


  }


}





/* Transparent home sidebar with peach navigation states. */


body.is-home .sidebar {


  background: transparent !important;


  box-shadow: none !important;


  backdrop-filter: none !important;


}





body.is-home .sidebar .nav a,


body.is-home .sidebar .nav button {


  background: transparent !important;


  box-shadow: none !important;


  backdrop-filter: none !important;


}





body.is-home .sidebar .nav a:hover,


body.is-home .sidebar .nav button:hover,


body.is-home .sidebar .nav a.is-active,


body.is-home .sidebar .nav a[data-nav="home"] {


  background: rgba(255,192,138,.16) !important;


  color: #fff !important;


  box-shadow: none !important;


  backdrop-filter: none !important;


}





body.is-home .sidebar .nav a:hover span,


body.is-home .sidebar .nav button:hover span,


body.is-home .sidebar .nav a.is-active span,


body.is-home .sidebar .nav a[data-nav="home"] span {


  color: #fff !important;


}





/* Neutral action buttons with a soft peach hover accent. */


.watch-button, .accent-button, .round-play, .link-button, .danger-link, .ghost-button, .google-button, .google-login-button, .google-username-submit, .auth-actions button, .auth-form button, .confirm-modal__cancel, .confirm-modal__approve, .poster-actions .bookmark-button, .poster-actions .watch-button, #accountAction, #settingsLogin, #settingsLogout {


  min-height: 48px !important;


  padding: 0 24px !important;


  border: 1px solid #303640 !important;


  border-radius: 999px !important;


  background: #171b21 !important;


  color: #f5f6f8 !important;


  font-weight: 1000 !important;


  text-decoration: none !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


  transform: translateZ(0) scale(1) !important;


  transition:


    transform .18s ease,


    background-color .18s ease,


    border-color .18s ease,


    color .18s ease,


    box-shadow .18s ease,


    filter .18s ease !important;


}





.watch-button:hover, .watch-button:focus-visible, .accent-button:hover, .accent-button:focus-visible, .round-play:hover, .round-play:focus-visible, .link-button:hover, .link-button:focus-visible, .danger-link:hover, .danger-link:focus-visible, .ghost-button:hover, .ghost-button:focus-visible, .google-button:hover, .google-button:focus-visible, .google-login-button:hover, .google-login-button:focus-visible, .google-username-submit:hover, .google-username-submit:focus-visible, .auth-actions button:hover, .auth-actions button:focus-visible, .auth-form button:hover, .auth-form button:focus-visible, .confirm-modal__cancel:hover, .confirm-modal__cancel:focus-visible, .confirm-modal__approve:hover, .confirm-modal__approve:focus-visible, .poster-actions .bookmark-button:hover, .poster-actions .bookmark-button:focus-visible, .poster-actions .watch-button:hover, .poster-actions .watch-button:focus-visible, #accountAction:hover, #accountAction:focus-visible, #settingsLogin:hover, #settingsLogin:focus-visible, #settingsLogout:hover, #settingsLogout:focus-visible {


  border-color: rgba(255,164,119,.72) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  transform: translateZ(0) translateY(-1px) !important;


  filter: none !important;


  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,164,119,.12) !important;


}





.watch-button *, .accent-button *, .round-play *, .link-button *, .danger-link *, .ghost-button *, .google-button *, .google-login-button *, .auth-actions button *, .auth-form button *, #accountAction *, #settingsLogin *, #settingsLogout * {


  color: inherit !important;


}





/* Compact video controls stay neutral; peach appears only as a hover accent. */


body.is-detail .tabs button, body.is-detail [data-watch-tab="description"] {


  min-height: 44px !important;


  padding: 0 20px !important;


  border: 1px solid #303640 !important;


  border-radius: 999px !important;


  background: #171b21 !important;


  color: #f5f6f8 !important;


  font-weight: 1000 !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


  transform: translateZ(0) scale(1) !important;


  transition:


    transform .18s ease,


    background-color .18s ease,


    color .18s ease !important;


}





body.is-detail .tabs button:hover, body.is-detail .tabs button:focus-visible, body.is-detail [data-watch-tab="description"]:hover, body.is-detail [data-watch-tab="description"]:focus-visible {


  border-color: rgba(255,164,119,.72) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  transform: translateZ(0) translateY(-1px) !important;


  box-shadow: 0 8px 18px rgba(0,0,0,.24), 0 0 0 1px rgba(255,164,119,.12) !important;


  filter: none !important;


}





body.is-detail .tabs button.is-active, body.is-detail [data-watch-tab="description"].is-active {


  border-color: rgba(255,164,119,.72) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  transform: translateZ(0) scale(1) !important;


  box-shadow: 0 0 0 1px rgba(255,164,119,.12) !important;


  filter: none !important;


}





body.is-detail .tabs button *, body.is-detail [data-watch-tab="description"] * {


  color: inherit !important;


}





body.is-detail .video-seek-wrap {


  border-color: transparent !important;


  background: transparent !important;


  background-color: transparent !important;


  box-shadow: none !important;


  filter: none !important;


  backdrop-filter: none !important;


  -webkit-backdrop-filter: none !important;


}





/* Final settings cleanup: compact profile surface, no stacked old card effects. */


.settings-section {


  max-width: 1120px !important;


  margin: 0 auto !important;


  padding: 10px 0 48px !important;


}





.settings-heading { margin-bottom: 18px !important; }


.settings-heading h1 {


  margin: 0 !important;


  font-size: clamp(28px, 4vw, 44px) !important;


  line-height: 1.05 !important;


}





.settings-section .profile-summary {


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


  gap: 18px !important;


  align-items: center !important;


  margin-bottom: 18px !important;


  padding: 18px !important;


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


  border-radius: 18px !important;


  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;


  box-shadow: none !important;


  text-align: left !important;


}





.settings-section .profile-summary.is-authenticated {


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


  justify-items: stretch !important;


  text-align: left !important;


}





.settings-section .settings-avatar,


.settings-section .profile-summary.is-authenticated .settings-avatar {


  width: 76px !important;


  height: 76px !important;


  border-radius: 22px !important;


}





.settings-section .profile-summary.is-authenticated .settings-avatar {


  width: 92px !important;


  height: 92px !important;


}





.settings-section .profile-summary__identity { min-width: 0 !important; }


.settings-section .profile-summary h2 {


  overflow: hidden !important;


  margin: 0 0 6px !important;


  color: #fff !important;


  font-size: 24px !important;


  line-height: 1.05 !important;


  text-overflow: ellipsis !important;


  white-space: nowrap !important;


}





.settings-section .profile-summary p {


  margin: 0 !important;


  color: rgba(255,255,255,.62) !important;


  font-size: 13px !important;


}





.settings-section .profile-summary__email {


  margin-bottom: 5px !important;


  color: var(--orange) !important;


}





.settings-section .profile-stats {


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


  gap: 10px !important;


  margin-bottom: 18px !important;


}





.settings-section .profile-stats article {


  min-height: 92px !important;


  display: grid !important;


  align-content: center !important;


  gap: 8px !important;


  padding: 14px !important;


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


  border-radius: 16px !important;


  background: rgba(255,255,255,.04) !important;


  box-shadow: none !important;


}





.settings-section .profile-stats strong {


  margin: 0 !important;


  color: var(--orange) !important;


  font-size: 26px !important;


  line-height: 1 !important;


}





.settings-section .profile-stats span {


  overflow: visible !important;


  color: rgba(255,255,255,.58) !important;


  font-size: 11px !important;


  line-height: 1.25 !important;


  text-overflow: clip !important;


}





.settings-section .settings-groups {


  display: grid !important;


  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr) !important;


  gap: 16px !important;


}





.settings-section .settings-card,


.settings-section .settings-groups section {


  overflow: hidden !important;


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


  border-radius: 18px !important;


  background: rgba(255,255,255,.035) !important;


  box-shadow: none !important;


}





.settings-section .settings-group-title {


  display: grid !important;


  gap: 4px !important;


  padding: 16px 18px !important;


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


  background: rgba(255,255,255,.03) !important;


}





.settings-section .settings-group-title span {


  color: #fff !important;


  font-size: 15px !important;


  font-weight: 1000 !important;


}





.settings-section .settings-group-title small {


  color: rgba(255,255,255,.48) !important;


  font-size: 12px !important;


  font-weight: 800 !important;


}





.settings-section .settings-groups label,


.settings-section .settings-groups section > button {


  min-height: 58px !important;


  padding: 0 18px !important;


  border: 0 !important;


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


  border-radius: 0 !important;


  background: transparent !important;


  color: rgba(255,255,255,.84) !important;


  box-shadow: none !important;


  font-size: 14px !important;


  font-weight: 900 !important;


  transform: none !important;


}





.settings-section .settings-groups label:hover,


.settings-section .settings-groups section > button:hover {


  background: rgba(255,192,138,.08) !important;


  color: #fff !important;


  transform: none !important;


}





.settings-section .settings-groups section > *:last-child { border-bottom: 0 !important; }





.settings-section #accountAction,


.settings-section #settingsLogin,


.settings-section #settingsLogout {


  min-height: 58px !important;


  justify-content: space-between !important;


  padding: 0 18px !important;


  border-radius: 0 !important;


  background: transparent !important;


  color: rgba(255,255,255,.86) !important;


  box-shadow: none !important;


}





.settings-section #accountAction:hover,


.settings-section #accountAction:focus-visible,


.settings-section #settingsLogin:hover,


.settings-section #settingsLogin:focus-visible,


.settings-section #settingsLogout:hover,


.settings-section #settingsLogout:focus-visible {


  background: rgba(255,192,138,.12) !important;


  color: #fff !important;


  transform: none !important;


}





.settings-section .settings-friends-card {


  min-height: 420px !important;


}





.settings-section .settings-friends-list {


  max-height: 498px !important;


  overflow-y: auto !important;


  display: grid !important;


  align-content: start !important;


  gap: 10px !important;


  padding: 14px !important;


  scrollbar-width: thin;


  scrollbar-color: rgba(255,164,119,.36) transparent;


}





.settings-section .settings-friends-list::-webkit-scrollbar {


  width: 7px;


}





.settings-section .settings-friends-list::-webkit-scrollbar-track {


  background: transparent;


}





.settings-section .settings-friends-list::-webkit-scrollbar-thumb {


  border-radius: 999px;


  background: rgba(255,164,119,.34);


}





.settings-section .settings-friend {


  min-height: 64px !important;


  display: grid !important;


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


  align-items: center !important;


  gap: 10px !important;


  padding: 10px !important;


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


  border-radius: 14px !important;


  background: #141820 !important;


}





.settings-section .settings-friend img {


  width: 42px !important;


  height: 42px !important;


  border-radius: 12px !important;


  object-fit: cover !important;


  background: #0f1218 !important;


}





.settings-section .settings-friend div {


  min-width: 0 !important;


  display: grid !important;


  gap: 3px !important;


}





.settings-section .settings-friend strong,


.settings-section .settings-friend span {


  overflow: hidden !important;


  text-overflow: ellipsis !important;


  white-space: nowrap !important;


}





.settings-section .settings-friend strong {


  color: #f5f6f8 !important;


  font-size: 13px !important;


  font-weight: 1000 !important;


}





.settings-section .settings-friend span {


  color: rgba(255,255,255,.5) !important;


  font-size: 11px !important;


  font-weight: 800 !important;


}





.settings-section .settings-friend button {


  min-height: 34px !important;


  padding: 0 12px !important;


  border: 1px solid #303640 !important;


  border-radius: 999px !important;


  background: #171b21 !important;


  color: #f5f6f8 !important;


  font-size: 11px !important;


  font-weight: 900 !important;


}





.settings-section .settings-friend button:hover {


  border-color: rgba(255,164,119,.72) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


}





.settings-section .settings-friends-empty {


  margin: 0 !important;


  padding: 28px 12px !important;


  color: rgba(255,255,255,.52) !important;


  text-align: center !important;


  font-size: 12px !important;


  font-weight: 800 !important;


}





.settings-section .my-comments-section {


  margin-top: 18px !important;


  border-radius: 18px !important;


  background: rgba(255,255,255,.035) !important;


  box-shadow: none !important;


}





@media (max-width: 900px) {


  .settings-section .profile-stats {


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


  }





  .settings-section .settings-groups {


    grid-template-columns: 1fr !important;


  }





  .settings-section .profile-summary,


  .settings-section .profile-summary.is-authenticated {


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


  }





  .settings-section #settingsLogin {


    grid-column: 1 / -1 !important;


  }


}





/* Keep volume as a real slim range, not a filled rectangle. */





/* Restore stable bottom timeline/time layout and the segmented volume meter. */





body.is-detail .video-seek-wrap {


  min-width: 0 !important;


  height: 34px !important;


  display: grid !important;


  align-items: center !important;


  background: transparent !important;


  box-shadow: none !important;


}





/* Restore seek bar: transparent input, peach only up to the actual progress. */





/* Home cards: match the screenshot's narrower six-card poster field. */


:root {


  --orange: #f4c49a;


  --orange-2: #ffe0bd;


  --watch-orange: #f4c49a;


  --anime-primary: var(--orange);


  --anime-accent: var(--orange-2);


  --anime-glow: rgba(244, 196, 154, .2);


}





body,


body.is-home,


body.is-detail {


  --orange: #f4c49a;


  --orange-2: #ffe0bd;


  --watch-orange: #f4c49a;


  --watch-orange-soft: rgba(244,196,154,.14);


  --watch-orange-glow: rgba(244,196,154,.34);


  --anime-primary: var(--orange);


  --anime-accent: var(--orange-2);


}





body.is-home .poster-section {


  width: min(1480px, calc(100% - 420px)) !important;


}





body.is-home .poster-grid {


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


  gap: 22px !important;


}





body.is-home .poster-grid:not(.poster-grid--new) .poster-card {


  border-radius: 18px !important;


}





.logo-hub, body.is-detail .logo-hub, .round-play, .watch-button, .accent-button, .confirm-modal__approve, .google-username-form button, .notification-action {


  background: var(--orange) !important;


}





.history-card {


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


  padding-right: 18px !important;


}





.history-card .round-play {


  display: none !important;


}





#clearHistory {


  min-height: 40px !important;


  padding: 0 16px !important;


  border-color: rgba(255,255,255,.1) !important;


  border-radius: 12px !important;


  background:


    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),


    #151a22 !important;


  color: rgba(255,255,255,.72) !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


  transform: none !important;


}





#clearHistory::before {


  content: "" !important;


  width: 7px !important;


  height: 7px !important;


  display: inline-block !important;


  margin-right: 9px !important;


  border-radius: 999px !important;


  background: rgba(255,255,255,.34) !important;


  box-shadow: 10px 0 0 rgba(255,255,255,.24) !important;


  vertical-align: 1px !important;


}





#clearHistory:hover,


#clearHistory:focus-visible {


  border-color: color-mix(in srgb, var(--orange) 48%, rgba(255,255,255,.14)) !important;


  background:


    linear-gradient(180deg, color-mix(in srgb, var(--orange) 14%, rgba(255,255,255,.055)), rgba(255,255,255,.03)),


    #1b2028 !important;


  color: var(--orange-2) !important;


  box-shadow: 0 10px 24px rgba(0,0,0,.2), 0 0 0 3px color-mix(in srgb, var(--orange) 10%, transparent), inset 0 -1px 0 rgba(0,0,0,.36) !important;


  transform: translateY(-1px) !important;


}





#clearHistory:hover::before,


#clearHistory:focus-visible::before {


  background: var(--orange) !important;


  box-shadow: 10px 0 0 color-mix(in srgb, var(--orange) 55%, transparent) !important;


}





.poster-card:hover,


.mini-card:hover,


.continue-item:hover,


.favorite-card:hover,


.history-card:hover,


.catalog-card:hover {


  border-color: color-mix(in srgb, var(--orange) 52%, var(--line)) !important;


}





.card-favorite:hover, .card-favorite.is-active, .tabs button.is-active, .comment-reactions button.is-active {


  border-color: var(--orange) !important;


  color: var(--orange) !important;


}





.card-favorite:hover,


.card-favorite.is-active {


  background: #20242b !important;


  color: var(--orange-2) !important;


  transform: translateY(-1px) !important;


  box-shadow: 0 8px 18px rgba(0,0,0,.24), 0 0 0 1px rgba(255,164,119,.12) !important;


}





@media (max-width: 1320px) {


  body.is-home .poster-section {


    width: min(100%, calc(100% - 56px)) !important;


  }





  body.is-home .poster-grid {


    gap: 16px !important;


  }


}





@media (max-width: 980px) {


  body.is-home .poster-section {


    width: 100% !important;


  }


}





/* Absolute final home overrides. */


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


  height: clamp(560px, 54vw, 720px) !important;


  min-height: clamp(560px, 54vw, 720px) !important;


  display: flex !important;


  align-items: center !important;


  padding-top: clamp(86px, 8vw, 128px) !important;


  padding-bottom: clamp(86px, 8vw, 128px) !important;


}





body.is-home .poster-section .section-head {


  justify-content: flex-start !important;


}





body.is-home .poster-section .link-button {


  display: none !important;


}





body.is-home .poster-grid {


  display: flex !important;


  grid-template-columns: none !important;


  gap: 22px !important;


  overflow-x: auto !important;


  overflow-y: hidden !important;


  padding: 2px 0 14px !important;


  scroll-snap-type: x proximity !important;


  scrollbar-width: thin !important;


  scrollbar-color: rgba(255,164,119,.42) transparent !important;


}





body.is-home .poster-grid .poster-card {


  flex: 0 0 calc((100% - 110px) / 6) !important;


  min-width: 0 !important;


  scroll-snap-align: start !important;


}





body.is-home .poster-grid::-webkit-scrollbar {


  height: 8px !important;


}





body.is-home .poster-grid::-webkit-scrollbar-track {


  background: rgba(255,255,255,.04) !important;


  border-radius: 999px !important;


}





body.is-home .poster-grid::-webkit-scrollbar-thumb {


  background: rgba(255,164,119,.38) !important;


  border-radius: 999px !important;


}





body.is-home .poster-card__play {


  display: none !important;


}





@media (max-width: 1320px) {


  body.is-home .poster-grid {


    gap: 16px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: calc((100% - 80px) / 6) !important;


  }


}





@media (max-width: 980px) {


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


    height: 520px !important;


    min-height: 520px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: min(210px, 42vw) !important;


  }


}





/* Must stay last: fixes the home banner and horizontal strips after legacy overrides. */


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


  height: clamp(560px, 54vw, 720px) !important;


  min-height: clamp(560px, 54vw, 720px) !important;


  display: flex !important;


  align-items: center !important;


  padding-top: clamp(86px, 8vw, 128px) !important;


  padding-bottom: clamp(86px, 8vw, 128px) !important;


}





body.is-home .poster-section .section-head {


  justify-content: flex-start !important;


}





body.is-home .poster-section .link-button {


  display: none !important;


}





body.is-home .poster-grid {


  display: flex !important;


  grid-template-columns: none !important;


  gap: 22px !important;


  overflow-x: auto !important;


  overflow-y: hidden !important;


  padding: 2px 0 14px !important;


  scroll-snap-type: x proximity !important;


  scrollbar-width: thin !important;


  scrollbar-color: rgba(255,164,119,.42) transparent !important;


}





body.is-home .poster-grid .poster-card {


  flex: 0 0 calc((100% - 110px) / 6) !important;


  min-width: 0 !important;


  scroll-snap-align: start !important;


}





body.is-home .poster-grid::-webkit-scrollbar {


  height: 8px !important;


}





body.is-home .poster-grid::-webkit-scrollbar-track {


  background: rgba(255,255,255,.04) !important;


  border-radius: 999px !important;


}





body.is-home .poster-grid::-webkit-scrollbar-thumb {


  background: rgba(255,164,119,.38) !important;


  border-radius: 999px !important;


}





body.is-home .poster-card__play {


  display: none !important;


}





@media (max-width: 1320px) {


  body.is-home .poster-grid {


    gap: 16px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: calc((100% - 80px) / 6) !important;


  }


}





@media (max-width: 980px) {


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


    height: 520px !important;


    min-height: 520px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: min(210px, 42vw) !important;


  }


}





/* Final home overrides: no section buttons, tall banner, reliable horizontal strips. */


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


  height: clamp(560px, 54vw, 720px) !important;


  min-height: clamp(560px, 54vw, 720px) !important;


  align-items: flex-end !important;


  padding-top: clamp(86px, 8vw, 128px) !important;


  padding-bottom: clamp(86px, 8vw, 128px) !important;


}





body.is-home .poster-section .section-head {


  justify-content: flex-start !important;


}





body.is-home .poster-section .link-button {


  display: none !important;


}





body.is-home .poster-grid {


  display: flex !important;


  grid-template-columns: none !important;


  gap: 22px !important;


  overflow-x: auto !important;


  overflow-y: hidden !important;


  overscroll-behavior-inline: contain;


  scroll-snap-type: x proximity;


  padding: 2px 0 14px !important;


  scrollbar-width: thin;


  scrollbar-color: rgba(255,164,119,.42) transparent;


}





body.is-home .poster-grid .poster-card {


  flex: 0 0 calc((100% - 110px) / 6) !important;


  min-width: 0 !important;


  scroll-snap-align: start;


}





body.is-home .poster-grid::-webkit-scrollbar {


  height: 8px;


}





body.is-home .poster-grid::-webkit-scrollbar-track {


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


  border-radius: 999px;


}





body.is-home .poster-grid::-webkit-scrollbar-thumb {


  background: rgba(255,164,119,.38);


  border-radius: 999px;


}





@media (max-width: 1320px) {


  body.is-home .poster-grid {


    gap: 16px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: calc((100% - 80px) / 6) !important;


  }


}





@media (max-width: 980px) {


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


    height: 520px !important;


    min-height: 520px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: min(210px, 42vw) !important;


  }


}





/* Requested follow-up: taller hero, horizontal rows, quieter card hover. */


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


  min-height: clamp(390px, 46vw, 560px) !important;


  align-items: flex-end !important;


  padding-block: clamp(62px, 7vw, 96px) !important;


}





body.is-home .poster-grid {


  display: flex !important;


  grid-template-columns: none !important;


  gap: 22px !important;


  overflow-x: auto !important;


  overflow-y: hidden !important;


  scroll-snap-type: x proximity;


  scroll-padding-inline: 2px;


  padding: 2px 2px 12px !important;


  scrollbar-width: thin;


  scrollbar-color: rgba(255,164,119,.42) transparent;


}





body.is-home .poster-grid::-webkit-scrollbar {


  height: 7px;


}





body.is-home .poster-grid::-webkit-scrollbar-track {


  background: transparent;


}





body.is-home .poster-grid::-webkit-scrollbar-thumb {


  border-radius: 999px;


  background: rgba(255,164,119,.34);


}





body.is-home .poster-grid .poster-card {


  flex: 0 0 calc((100% - 110px) / 6) !important;


  scroll-snap-align: start;


}





body.is-home #popularGrid {


  overflow-x: auto !important;


  overflow-y: hidden !important;


}





.poster-card__play {


  display: none !important;


}





.link-button,


.danger-link {


  min-height: 36px !important;


  padding: 0 14px !important;


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


  border-radius: 999px !important;


  background: rgba(255,255,255,.045) !important;


  color: rgba(255,255,255,.76) !important;


  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;


}





.link-button:hover,


.link-button:focus-visible,


.danger-link:hover,


.danger-link:focus-visible {


  border-color: color-mix(in srgb, var(--orange) 42%, rgba(255,255,255,.14)) !important;


  background: color-mix(in srgb, var(--orange) 12%, rgba(255,255,255,.045)) !important;


  color: var(--orange-2) !important;


  transform: translateX(2px) !important;


}





@media (max-width: 1320px) {


  body.is-home .poster-grid {


    gap: 16px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: calc((100% - 80px) / 6) !important;


  }


}





@media (max-width: 980px) {


  body.is-home .poster-grid {


    gap: 16px !important;


  }





  body.is-home .poster-grid .poster-card {


    flex-basis: min(210px, 42vw) !important;


  }


}


/* Polished home composition: compact header, grouped hero copy, lighter cards. */


body,


body.is-home,


body.is-detail {


  --bg: #10141A;


  --panel: var(--bg-surface);


  --panel-2: #20252D;


  --panel-3: #20252D;


  --line: rgba(255,255,255,.08);


  --line-soft: rgba(255,255,255,.06);


  --muted: #9CA3AF;


  --orange: var(--accent-default);


  --orange-2: #FFD0AC;


  --watch-orange: var(--accent-default);


  --watch-orange-soft: rgba(255,164,119,.14);


  --watch-orange-glow: rgba(255,164,119,.34);


  --anime-primary: var(--orange);


  --anime-accent: var(--orange-2);


}





body,


.site-shell,


body.is-home .site-shell,


body.is-detail .site-shell {


  background: #10141A !important;


}





.topbar,


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


  min-height: 72px !important;


  height: 72px !important;


  grid-template-columns: 184px minmax(320px, 500px) 1fr !important;


  gap: 18px !important;


  padding: 0 28px !important;


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


  background: rgba(23,27,34,.94) !important;


}





.logo {


  padding-left: 0 !important;


}





.top-search {


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


  height: 48px !important;


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


  margin-left: 0 !important;


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


  border-radius: 14px !important;


  background:


    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),


    var(--bg-surface) !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease !important;


}





.top-search:hover,


.top-search:focus-within,


html:not([data-theme="light"]) .top-search:focus-within {


  border-color: color-mix(in srgb, var(--orange) 50%, rgba(255,255,255,.14)) !important;


  background:


    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.035)),


    #1b2028 !important;


  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent), inset 0 -1px 0 rgba(0,0,0,.36) !important;


}





.top-search input {


  height: 100% !important;


  padding: 0 18px 0 0 !important;


  color: #f4f5f7 !important;


  font-size: 14px !important;


  font-weight: 850 !important;


}





.top-search input::placeholder {


  color: rgba(255,255,255,.45) !important;


}





.top-search button {


  width: 52px !important;


  height: 48px !important;


  color: rgba(255,255,255,.82) !important;


  transition: color .16s ease, transform .16s ease !important;


}





.top-search:hover button,


.top-search:focus-within button {


  color: var(--orange-2) !important;


  transform: scale(1.03) !important;


}





.top-actions {


  gap: 10px !important;


}





.theme-toggle,


.notification-button,


.profile-button .profile-avatar {


  width: 42px !important;


  height: 42px !important;


  min-width: 42px !important;


}





.profile-button {


  min-height: 42px !important;


}





body.is-home #continueCard,


body.is-home .continue-card {


  margin-bottom: 54px !important;


}





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


  min-height: clamp(330px, 32vw, 450px) !important;


  display: flex !important;


  align-items: center !important;


  padding: 54px clamp(54px, 7vw, 118px) !important;


  border: 0 !important;


  border-radius: 0 !important;


  background:


    linear-gradient(90deg, rgba(16,20,26,.96) 0%, rgba(16,20,26,.84) 34%, rgba(16,20,26,.2) 68%, rgba(16,20,26,.58) 100%),


    var(--hero-bg, none) center / cover no-repeat,


    #10141A !important;


  box-shadow: none !important;


}





body.is-home .hero-carousel__copy {


  width: min(600px, 50vw) !important;


  max-width: 600px !important;


  margin-left: clamp(230px, 18vw, 300px) !important;


  align-self: center !important;


}





body.is-home .hero-carousel.watch-progress h3 {


  margin: 0 0 12px !important;


  font-size: clamp(40px, 4.5vw, 64px) !important;


  line-height: .96 !important;


}





body.is-home .hero-carousel__facts {


  margin-bottom: 12px !important;


  color: #d8dbe0 !important;


  font-size: 13px !important;


}





body.is-home .hero-carousel__score,


body.is-home .hero-carousel__genre {


  color: var(--orange-2) !important;


}





body.is-home .hero-carousel__genre {


  padding: 0 !important;


  border: 0 !important;


  background: transparent !important;


}





body.is-home .hero-carousel .hero-carousel__description {


  max-width: 560px !important;


  display: -webkit-box !important;


  -webkit-line-clamp: 2 !important;


  -webkit-box-orient: vertical !important;


  overflow: hidden !important;


  color: #c7ccd4 !important;


  font-size: 14px !important;


}





.hero-carousel__actions {


  display: flex;


  align-items: center;


  gap: 12px;


  margin-top: 22px;


}





.hero-carousel .round-play,


.hero-favorite {


  width: auto !important;


  min-width: 0 !important;


  max-width: none !important;


  height: 46px !important;


  display: inline-flex !important;


  align-items: center !important;


  justify-content: center !important;


  gap: 9px !important;


  padding: 0 22px !important;


  border-radius: 999px !important;


  font-size: 14px !important;


  font-weight: 900 !important;


}





.hero-carousel .round-play {


  border: 1px solid color-mix(in srgb, var(--orange) 78%, #fff) !important;


  background: var(--orange) !important;


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


}





.hero-favorite {


  border: 1px solid #303640 !important;


  background: #171b21 !important;


  color: #f5f6f8 !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


}





.hero-favorite:hover,


.hero-favorite.is-active {


  border-color: rgba(255,164,119,.72) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  transform: translateY(-1px) !important;


  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,164,119,.12) !important;


}





body.is-home .poster-section {


  width: min(1480px, calc(100% - 420px)) !important;


  margin-top: 0 !important;


  margin-bottom: 58px !important;


}





body.is-home .poster-section + .poster-section {


  margin-top: 58px !important;


}





.section-head {


  margin-bottom: 22px !important;


}





.section-head h2 {


  font-size: clamp(30px, 3vw, 48px) !important;


  line-height: 1 !important;


}





.link-button,


.danger-link {


  min-height: 38px !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  color: var(--orange-2) !important;


  font-size: 14px !important;


  font-weight: 900 !important;


  box-shadow: none !important;


}





.link-button:hover,


.link-button:focus-visible {


  color: #fff !important;


  transform: none !important;


}





body.is-home .poster-grid {


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


  gap: 22px !important;


}





body.is-home #popularGrid {


  overflow: visible !important;


}





.poster-grid:not(.poster-grid--new) .poster-card,


.catalog-grid .poster-card,


.results .poster-card {


  border-color: rgba(255,255,255,.08) !important;


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


}





.poster-grid:not(.poster-grid--new) .poster-card::after,


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


.results .poster-card::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-grid:not(.poster-grid--new) .poster-card:hover::after,


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


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


  background: linear-gradient(180deg, rgba(3,5,8,0) 35%, rgba(3,5,8,.18) 60%, rgba(3,5,8,.9) 100%) !important;


}





.poster-grid:not(.poster-grid--new) .poster-card:hover > img,


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


.results .poster-card:hover > img {


  transform: scale(1.03) !important;


  filter: saturate(1.05) brightness(1.03) !important;


}





.poster-card:hover,


.mini-card:hover {


  transform: translateY(-2px) !important;


  border-color: var(--orange) !important;


  box-shadow: 0 16px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,164,119,.2) !important;


}





.poster-grid:not(.poster-grid--new) .poster-card > strong,


.catalog-grid .poster-card > strong,


.results .poster-card > strong {


  bottom: 36px !important;


  font-size: 14px !important;


  line-height: 1.18 !important;


}





.poster-grid:not(.poster-grid--new) .poster-card > small,


.catalog-grid .poster-card > small,


.results .poster-card > small {


  bottom: 14px !important;


  color: color-mix(in srgb, var(--orange-2) 78%, #9CA3AF) !important;


  font-size: 11px !important;


  font-weight: 800 !important;


}





.poster-card__overlay {


  justify-content: flex-end !important;


  padding: 16px 12px 12px !important;


  background: linear-gradient(180deg, rgba(5,5,5,0), rgba(5,5,5,.2) 42%, rgba(5,5,5,.88) 100%) !important;


}





.poster-card__play {


  position: absolute;


  top: 50%;


  left: 50%;


  width: 52px;


  height: 52px;


  display: grid;


  place-items: center;


  border-radius: 999px;


  background: rgba(255,164,119,.94);


  color: var(--bg-surface);


  font-size: 17px;


  font-weight: 900;


  transform: translate(-50%, -50%) scale(.92);


  box-shadow: 0 14px 34px rgba(0,0,0,.36);


}





.poster-card__overlay p {


  margin-bottom: 12px !important;


  color: rgba(255,255,255,.78) !important;


  font-size: 10px !important;


  -webkit-line-clamp: 4 !important;


}





.card-favorite {


  border-color: #303640 !important;


  background: #171b21 !important;


  color: #f5f6f8 !important;


  box-shadow: inset 0 -1px 0 rgba(0,0,0,.36) !important;


}





@media (max-width: 1320px) {


  .topbar,


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


    grid-template-columns: 184px minmax(280px, 460px) 1fr !important;


  }





  body.is-home .poster-section {


    width: min(100%, calc(100% - 56px)) !important;


  }


}





@media (max-width: 980px) {


  .topbar,


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


    height: 64px !important;


    min-height: 64px !important;


    padding: 0 14px !important;


  }





  body.is-home .hero-carousel__copy {


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


    margin-left: 0 !important;


  }





  body.is-home .poster-section {


    width: 100% !important;


  }


}





/* Final interaction cleanup: solid peach hover, no neon/glass effects. */


button, .watch-button, .accent-button, .round-play, .bookmark-button, .share-button, .link-button, .danger-link, .ghost-button, .notification-button, .theme-toggle, .profile-button, .card-favorite, .comment-reactions button, .comment-user-actions button, #clearHistory {


  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease !important;


}





.watch-button:hover, .watch-button:focus-visible, .accent-button:hover, .accent-button:focus-visible, .round-play:hover, .round-play:focus-visible {


  border-color: var(--orange) !important;


  background: var(--orange) !important;


  color: #15171b !important;


  box-shadow: none !important;


  filter: none !important;


}





@media (max-width: 430px) {


  body.is-detail .title-line { order: 1 !important; }


  body.is-detail .subtitle { order: 2 !important; }


  body.is-detail .chips { order: 3 !important; }


  body.is-detail .meta-list { order: 4 !important; }


  body.is-detail .poster-actions { order: 5 !important; }


  body.is-detail .anime-info .description,


  body.is-detail .description { order: 6 !important; }


  body.is-detail .anime-info > small { order: 7 !important; }





  body.is-detail .watch-button {


    order: 1 !important;


    border-color: transparent !important;


    background: var(--accent-default) !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button {


    order: 2 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #f3f4f6 !important;


  }





  body.is-detail .share-button {


    order: 3 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #aeb4be !important;


  }





  body.is-detail .watch-button:hover,


  body.is-detail .watch-button:focus-visible {


    background: #ffd0ac !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button:hover,


  body.is-detail .bookmark-button:focus-visible,


  body.is-detail .share-button:hover,


  body.is-detail .share-button:focus-visible {


    border-color: rgba(255,164,119,.55) !important;


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


    color: #ffd0ac !important;


  }


}





@media (min-width: 821px) {


  body .site-shell > aside.sidebar,


  body.is-home .site-shell > aside.sidebar,


  body.is-detail .site-shell > aside.sidebar {


    display: none !important;


    visibility: hidden !important;


    opacity: 0 !important;


    pointer-events: none !important;


    position: absolute !important;


    inset: auto !important;


    width: 0 !important;


    min-width: 0 !important;


    max-width: 0 !important;


    height: 0 !important;


    overflow: hidden !important;


  }





  body.is-home .home-page,


  body.is-detail .detail-page,


  body .home-page,


  body .detail-page {


    grid-column: 1 / -1 !important;


    margin-left: 0 !important;


  }


}





/* Clean content pass below the hero and across library pages. */


@media (min-width: 821px) {


  .home-page > .poster-section,


  .home-page > .search-section,


  .home-page > .catalog-section,


  .home-page > .library-section,


  .home-page > .settings-section {


    width: 100% !important;


    max-width: none !important;


    margin: clamp(52px, 5vw, 86px) 0 0 !important;


    padding: 0 !important;


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .home-page > .continue-card + .poster-section {


    margin-top: clamp(40px, 4vw, 70px) !important;


  }





  .home-page .section-head,


  .home-page .page-heading,


  .catalog-section .page-heading,


  .library-section .page-heading,


  .settings-section .page-heading {


    display: flex !important;


    align-items: end !important;


    justify-content: space-between !important;


    gap: 20px !important;


    margin: 0 0 22px !important;


    padding: 0 !important;


    min-height: 0 !important;


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .home-page .section-head h2,


  .home-page .page-heading h1,


  .catalog-section .page-heading h1,


  .library-section .page-heading h1,


  .settings-section .page-heading h1 {


    margin: 0 !important;


    color: #fff !important;


    font-size: clamp(32px, 3vw, 52px) !important;


    font-weight: 950 !important;


    line-height: .95 !important;


  }





  .home-page .section-head h2::before,


  .home-page .section-head h2::after,


  .home-page .page-heading h1::before,


  .home-page .page-heading h1::after {


    display: none !important;


  }





  .home-page .link-button,


  .section-head .link-button {


    min-height: auto !important;


    padding: 0 !important;


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    color: rgba(255, 255, 255, .68) !important;


    box-shadow: none !important;


    font-size: 15px !important;


  }





  .home-page .link-button:hover,


  .section-head .link-button:hover {


    color: #fff !important;


    background: transparent !important;


    transform: none !important;


  }





  .poster-grid,


  #popularGrid,


  #recommendationsGrid,


  #ongoingGrid,


  #moviesGrid,


  .catalog-grid,


  .library-grid,


  .results {


    width: 100% !important;


    max-width: none !important;


    display: grid !important;


    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;


    gap: clamp(18px, 1.45vw, 30px) !important;


    overflow: visible !important;


    padding: 0 !important;


    scroll-snap-type: none !important;


  }





  .poster-grid .poster-card,


  .catalog-grid .poster-card,


  .library-grid .poster-card,


  .results .poster-card {


    width: 100% !important;


    min-width: 0 !important;


    height: auto !important;


    aspect-ratio: 2 / 3 !important;


    background: #08090c !important;


    border: 0 !important;


    border-radius: 8px !important;


    box-shadow: none !important;


    filter: none !important;


    scroll-snap-align: unset !important;


  }





  .poster-grid .poster-card:hover,


  .catalog-grid .poster-card:hover,


  .library-grid .poster-card:hover,


  .results .poster-card:hover {


    background: #0f1117 !important;


    transform: translateY(-2px) !important;


    box-shadow: none !important;


  }





  .poster-grid .poster-card img,


  .catalog-grid .poster-card img,


  .library-grid .poster-card img,


  .results .poster-card img {


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


  }





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


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


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


  .results .poster-card:hover img {


    transform: scale(1.035) !important;


  }





  .poster-card__play,


  .poster-card__overlay {


    display: none !important;


  }





  .catalog-toolbar {


    display: grid !important;


    grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;


    gap: 12px !important;


    margin: 0 0 34px !important;


    padding: 0 !important;


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .catalog-toolbar label {


    display: grid !important;


    gap: 8px !important;


    color: rgba(255, 255, 255, .62) !important;


    font-size: 12px !important;


    font-weight: 850 !important;


  }





  .catalog-toolbar select,


  .settings-card select,


  .settings-card input,


  .search-section input,


  .search-modal__form input {


    min-height: 48px !important;


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


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


    border-radius: 8px !important;


    color: #fff !important;


    box-shadow: none !important;


  }





  .catalog-toolbar select:hover,


  .settings-card select:hover,


  .settings-card input:hover,


  .search-section input:hover {


    background: rgba(255, 255, 255, .085) !important;


    border-color: rgba(255, 255, 255, .16) !important;


  }





  .history-list {


    display: grid !important;


    gap: 0 !important;


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .history-card {


    display: grid !important;


    grid-template-columns: 92px minmax(220px, 1fr) minmax(220px, .7fr) auto !important;


    align-items: center !important;


    gap: 22px !important;


    min-height: 118px !important;


    padding: 18px 0 !important;


    background: transparent !important;


    border: 0 !important;


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


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .history-card:hover {


    background: rgba(255, 255, 255, .025) !important;


    transform: none !important;


  }





  .history-card img,


  .history-card .poster-fallback {


    width: 92px !important;


    height: 68px !important;


    border-radius: 8px !important;


  }





  .profile-summary,


  .profile-stats,


  .settings-groups,


  .settings-card,


  .friends-card,


  .my-comments-section {


    background: transparent !important;


    border: 0 !important;


    border-radius: 0 !important;


    box-shadow: none !important;


  }





  .profile-summary {


    display: flex !important;


    align-items: center !important;


    gap: 18px !important;


    padding: 0 0 28px !important;


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


  }





  .profile-stats {


    display: grid !important;


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


    gap: 0 !important;


    margin: 30px 0 !important;


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


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


  }





  .profile-stats article {


    padding: 18px 18px 18px 0 !important;


    background: transparent !important;


    border: 0 !important;


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


    border-radius: 0 !important;


  }





  .profile-stats article:last-child {


    border-right: 0 !important;


  }





  .settings-groups {


    display: grid !important;


    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;


    gap: clamp(28px, 3vw, 52px) !important;


  }





  .settings-card {


    padding: 0 !important;


  }





  .settings-card > header,


  .settings-card > div,


  .settings-card > label,


  .settings-card > button {


    border-color: rgba(255, 255, 255, .075) !important;


  }


}





/* Layout repair after the wide-shell pass. */


@media (min-width: 821px) {


  body.is-home .home-page,


  body.is-library .home-page {


    padding: 0 0 84px !important;


    margin: 0 !important;


    max-width: none !important;


    width: 100% !important;


  }





  body.is-home .continue-card {


    margin: 0 0 clamp(42px, 4vw, 72px) !important;


    padding: 0 !important;


  }





  body.is-home .continue-card > .section-head,


  body.is-home .continue-card > .section-head--compact {


    display: none !important;


  }





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


    width: 100% !important;


    margin: 0 !important;


  }





  body.is-home .home-page > .poster-section,


  body.is-home .home-page > .search-section {


    width: 100% !important;


    max-width: none !important;


    margin: 0 0 clamp(50px, 5vw, 86px) !important;


    padding: 0 clamp(28px, 3.5vw, 54px) !important;


  }





  body.is-home .home-page > .poster-section + .poster-section {


    margin-top: 0 !important;


  }





  body.is-home .poster-grid,


  body.is-home #popularGrid,


  body.is-home #recommendationsGrid,


  body.is-home #ongoingGrid,


  body.is-home #moviesGrid {


    display: grid !important;


    grid-auto-flow: column !important;


    grid-auto-columns: clamp(178px, 13.8vw, 238px) !important;


    grid-template-columns: none !important;


    gap: clamp(18px, 1.5vw, 30px) !important;


    width: 100% !important;


    max-width: none !important;


    overflow-x: auto !important;


    overflow-y: hidden !important;


    overscroll-behavior-inline: contain !important;


    scroll-snap-type: x mandatory !important;


    padding: 0 0 18px !important;


    scrollbar-width: thin !important;


  }





  body.is-home .poster-grid .poster-card,


  body.is-home #popularGrid .poster-card,


  body.is-home #recommendationsGrid .poster-card,


  body.is-home #ongoingGrid .poster-card,


  body.is-home #moviesGrid .poster-card {


    width: auto !important;


    min-width: 0 !important;


    scroll-snap-align: start !important;


  }





  body.is-home .poster-grid::-webkit-scrollbar {


    height: 8px !important;


  }





  body.is-home .poster-grid::-webkit-scrollbar-track {


    background: rgba(255, 255, 255, .04) !important;


    border-radius: 999px !important;


  }





  body.is-home .poster-grid::-webkit-scrollbar-thumb {


    background: rgba(255, 255, 255, .22) !important;


    border-radius: 999px !important;


  }





  body.is-library .home-page > .catalog-section:not([hidden]),


  body.is-library .home-page > .library-section:not([hidden]),


  body.is-library .home-page > .settings-section:not([hidden]),


  body.is-library .home-page > .search-section:not([hidden]),


  body.is-detail .detail-page {


    display: block !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    padding: clamp(82px, 7vw, 128px) clamp(28px, 3.5vw, 54px) 90px !important;


    grid-column: 1 / -1 !important;


    background: transparent !important;


    border: 0 !important;


    box-shadow: none !important;


  }





  body.is-library .home-page > .catalog-section:not([hidden]) .page-heading,


  body.is-library .home-page > .library-section:not([hidden]) .page-heading,


  body.is-library .home-page > .settings-section:not([hidden]) .page-heading {


    margin: 0 0 30px !important;


    padding: 0 !important;


  }





  body.is-library .catalog-toolbar {


    width: 100% !important;


    max-width: none !important;


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


    margin: 0 0 34px !important;


  }





  body.is-library .catalog-grid,


  body.is-library .library-grid,


  body.is-library .results {


    width: 100% !important;


    max-width: none !important;


    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;


    gap: clamp(18px, 1.55vw, 30px) !important;


  }





  body.is-library .history-list {


    width: 100% !important;


    max-width: none !important;


  }





  body.is-detail .anime-hero,


  body.is-detail .watch-shell,


  body.is-detail .comments-layout {


    width: 100% !important;


    max-width: none !important;


    margin-left: 0 !important;


    margin-right: 0 !important;


  }





  body.is-detail .topbar {


    grid-template-columns: auto minmax(330px, 1fr) minmax(280px, 520px) auto !important;


  }





  body.is-detail .top-actions,


  body.is-library .top-actions,


  body.is-home .top-actions {


    position: static !important;


    justify-self: end !important;


    transform: none !important;


    margin: 0 !important;


  }


}


@media (max-width: 430px) {


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


  .sidebar > .nav:not(.nav--footer) button,


  body.is-home .sidebar > .nav:not(.nav--footer) a,


  body.is-home .sidebar > .nav:not(.nav--footer) button {


    background: transparent !important;


    color: #aeb4be !important;


    transform: none !important;


    transition: color .16s ease, background-color .16s ease !important;


  }





  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


  .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) button:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a[data-nav="home"] {


    background: rgba(255,255,255,.045) !important;


    color: #ffd0ac !important;


    transform: none !important;


    box-shadow: none !important;


  }





  .history-card {


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


    min-height: 88px !important;


    padding: 9px 12px 9px 9px !important;


  }





  .history-card__poster,


  .history-card__body img,


  .history-card__body > img {


    width: 60px !important;


    min-width: 60px !important;


    height: 60px !important;


  }





  .history-card__body {


    min-height: 64px !important;


    grid-template-rows: auto auto !important;


    align-content: center !important;


    gap: 8px !important;


  }





  .history-card__body strong,


  .history-card h3,


  .history-card strong {


    font-size: 13px !important;


    line-height: 1.2 !important;


    -webkit-line-clamp: 2 !important;


  }





  .history-card__meta {


    grid-column: 1 !important;


    grid-row: 2 !important;


    display: block !important;


    width: 100% !important;


    min-width: 0 !important;


  }





  .history-card__meta b {


    display: none !important;


  }





  .history-card__meta small {


    display: block !important;


    width: 100% !important;


    height: 4px !important;


    margin-top: 0 !important;


    border-radius: 999px !important;


    background: linear-gradient(90deg, #ffd0ac 0 var(--history-progress, 0%), rgba(255,255,255,.09) var(--history-progress, 0%)) !important;


    color: transparent !important;


  }





  body.is-detail .anime-hero {


    order: 1 !important;


    display: flex !important;


    flex-direction: column !important;


    align-items: center !important;


    width: 100% !important;


    padding: 14px 18px 18px !important;


    gap: 0 !important;


    border-radius: 18px !important;


    text-align: center !important;


  }





  body.is-detail .poster-column {


    width: min(210px, 72vw) !important;


    max-width: min(210px, 72vw) !important;


    height: auto !important;


    margin: 0 auto 18px !important;


  }





  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback,


  body.is-detail .anime-poster {


    width: 100% !important;


    max-width: 100% !important;


    aspect-ratio: 2 / 3 !important;


    height: auto !important;


    min-height: 0 !important;


    border-radius: 4px !important;


    object-fit: cover !important;


  }





  body.is-detail .anime-info {


    width: 100% !important;


    max-width: 100% !important;


    display: flex !important;


    flex-direction: column !important;


    align-items: stretch !important;


    text-align: center !important;


  }





  body.is-detail .title-line {


    order: 1 !important;


    display: grid !important;


    grid-template-columns: 1fr auto !important;


    align-items: center !important;


    gap: 8px !important;


    width: 100% !important;


    margin: 0 !important;


  }





  body.is-detail .anime-info h1,


  body.is-detail .title-line h1 {


    min-width: 0 !important;


    font-size: 26px !important;


    line-height: 1.12 !important;


    font-weight: 800 !important;


    text-align: center !important;


    color: #e5e7eb !important;


    text-shadow: none !important;


    -webkit-line-clamp: 3 !important;


    overflow-wrap: normal !important;


  }





  body.is-detail .title-line strong {


    min-width: 42px !important;


    padding: 5px 7px !important;


    border-radius: 6px !important;


    font-size: 13px !important;


    line-height: 1 !important;


  }





  body.is-detail .subtitle {


    order: 2 !important;


    margin: 8px 0 18px !important;


    font-size: 19px !important;


    line-height: 1.25 !important;


    color: #ffd0ac !important;


    text-align: center !important;


  }





  body.is-detail .chips {


    order: 3 !important;


    display: grid !important;


    grid-template-columns: 1fr 1fr !important;


    gap: 1px !important;


    margin: 0 0 12px !important;


    border-radius: 2px !important;


    overflow: hidden !important;


    background: rgba(255,255,255,.035) !important;


  }





  body.is-detail .chips span {


    min-height: 36px !important;


    padding: 0 10px !important;


    border-radius: 0 !important;


    background: rgba(0,0,0,.22) !important;


    color: #aeb4be !important;


    font-size: 12px !important;


    font-weight: 600 !important;


  }





  body.is-detail .meta-list {


    order: 4 !important;


    display: grid !important;


    grid-template-columns: 1fr !important;


    gap: 1px !important;


    margin: 0 0 16px !important;


    text-align: left !important;


  }





  body.is-detail .meta-list dt,


  body.is-detail .meta-list dd {


    min-height: 36px !important;


    margin: 0 !important;


    padding: 8px 10px !important;


    background: rgba(0,0,0,.20) !important;


    color: #aeb4be !important;


    font-size: 12px !important;


    line-height: 1.35 !important;


  }





  body.is-detail .meta-list dt {


    color: #858b95 !important;


    padding-bottom: 0 !important;


  }





  body.is-detail .meta-list dd {


    color: #d1d5db !important;


    padding-top: 0 !important;


  }





  body.is-detail .anime-info .description,


  body.is-detail .description {


    order: 6 !important;


    margin: 4px 0 18px !important;


    font-size: 15px !important;


    line-height: 1.55 !important;


    color: #b8bdc6 !important;


    text-align: left !important;


    -webkit-line-clamp: 9 !important;


  }





  body.is-detail .anime-info > small {


    order: 20 !important;


    margin-top: 8px !important;


    color: #858b95 !important;


    font-size: 11px !important;


    text-align: center !important;


  }





  body.is-detail .poster-actions {


    order: 5 !important;


    display: flex !important;


    flex-direction: column !important;


    width: 100% !important;


    gap: 10px !important;


    margin: 0 0 18px !important;


  }





  body.is-detail .poster-actions button,


  body.is-detail .watch-button,


  body.is-detail .bookmark-button,


  body.is-detail .share-button {


    width: 100% !important;


    min-height: 48px !important;


    height: 48px !important;


    border-radius: 3px !important;


    padding: 0 14px !important;


    font-size: 13px !important;


    font-weight: 800 !important;


    text-transform: uppercase !important;


    letter-spacing: 0 !important;


  }





  body.is-detail .watch-button {


    order: 1 !important;


    border-color: transparent !important;


    background: var(--accent-default) !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button {


    order: 2 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #f3f4f6 !important;


  }





  body.is-detail .share-button {


    order: 3 !important;


    min-height: 40px !important;


    height: 40px !important;


    font-size: 11px !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #aeb4be !important;


  }





  body.is-detail .watch-button:hover,


  body.is-detail .watch-button:focus-visible {


    background: #ffd0ac !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button:hover,


  body.is-detail .bookmark-button:focus-visible,


  body.is-detail .share-button:hover,


  body.is-detail .share-button:focus-visible {


    border-color: rgba(255,164,119,.55) !important;


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


    color: #ffd0ac !important;


  }


}





@media (max-width: 430px) {


  body.is-detail .title-line { order: 1 !important; }


  body.is-detail .subtitle { order: 2 !important; }


  body.is-detail .chips { order: 3 !important; }


  body.is-detail .meta-list { order: 4 !important; }


  body.is-detail .poster-actions { order: 5 !important; }


  body.is-detail .anime-info .description,


  body.is-detail .description { order: 6 !important; }


  body.is-detail .anime-info > small { order: 7 !important; }





  body.is-detail .watch-button {


    order: 1 !important;


    border-color: transparent !important;


    background: var(--accent-default) !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button {


    order: 2 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #f3f4f6 !important;


  }





  body.is-detail .share-button {


    order: 3 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #aeb4be !important;


  }





  body.is-detail .watch-button:hover,


  body.is-detail .watch-button:focus-visible {


    background: #ffd0ac !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button:hover,


  body.is-detail .bookmark-button:focus-visible,


  body.is-detail .share-button:hover,


  body.is-detail .share-button:focus-visible {


    border-color: rgba(255,164,119,.55) !important;


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


    color: #ffd0ac !important;


  }


}





.bookmark-button:hover, .bookmark-button:focus-visible, .share-button:hover, .share-button:focus-visible, .link-button:hover, .link-button:focus-visible, .danger-link:hover, .danger-link:focus-visible, .ghost-button:hover, .ghost-button:focus-visible, .card-favorite:hover, .card-favorite:focus-visible, .comment-reactions button:hover, .comment-reactions button:focus-visible, .comment-user-actions button:hover, .comment-user-actions button:focus-visible, #clearHistory:hover, #clearHistory:focus-visible {


  border-color: var(--orange) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  box-shadow: none !important;


  filter: none !important;


}





.notification-button:hover,


.notification-button:focus-visible,


.theme-toggle:hover,


.theme-toggle:focus-visible,


.profile-button:hover,


.profile-button:focus-visible,


.nav a:hover,


.nav a:focus-visible,


.nav button:hover,


.nav button:focus-visible {


  border-color: color-mix(in srgb, var(--orange) 55%, rgba(255,255,255,.14)) !important;


  background: #20242b !important;


  color: var(--orange-2) !important;


  box-shadow: none !important;


  filter: none !important;


}





body.is-home #popularGrid,


body.is-home #recommendationsGrid,


body.is-home #ongoingGrid,


body.is-home #moviesGrid {


  overflow-x: auto !important;


  overflow-y: hidden !important;


}





body.is-library .home-page {


  background: #10141a !important;


}





body.is-library .home-page .continue-card,


.home-page.library-mode .continue-card {


  display: none !important;


}





body.is-detail .detail-page {


  padding-top: 0 !important;


}





body.is-detail .anime-hero {


  order: 1 !important;


  margin-top: 0 !important;


  margin-bottom: 28px !important;


}





/* Internal pages use a calmer, narrower working area; the home page stays cinematic. */


body.is-library .home-page {


  padding-inline: clamp(24px, 5vw, 96px) !important;


}





body.is-library .catalog-section,


body.is-library .library-section,


body.is-library .settings-section {


  width: min(1320px, calc(100% - clamp(148px, 8vw, 192px) - 24px)) !important;


  margin-left: clamp(148px, 8vw, 192px) !important;


  margin-right: auto !important;


}





body.is-detail .detail-page {


  padding-left: clamp(24px, 3vw, 56px) !important;


  padding-right: clamp(24px, 4.6vw, 88px) !important;


}





body.is-detail .anime-hero, body.is-detail .comments-shell {


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


  margin-left: 0 !important;


  margin-right: auto !important;


}





@media (max-width: 980px) {


  body.is-library .home-page,


  body.is-detail .detail-page {


    padding-inline: 12px !important;


  }





  body.is-library .catalog-section, body.is-library .library-section, body.is-library .settings-section, body.is-detail .anime-hero, body.is-detail .comments-shell {


    width: 100% !important;


    margin-left: 0 !important;


    margin-right: 0 !important;


  }


}





html[data-theme="light"] body,


html[data-theme="light"] body.is-home,


html[data-theme="light"] body.is-library,


html[data-theme="light"] body.is-detail {


  --bg: #f4f6f8 !important;


  --panel: #ffffff !important;


  --panel-2: #eef2f5 !important;


  --panel-3: #e6ebf0 !important;


  --line: rgba(17,24,39,.12) !important;


  --line-soft: rgba(17,24,39,.08) !important;


  --text: #111827 !important;


  --muted: #4b5563 !important;


  background: #f4f6f8 !important;


  color: #111827 !important;


}





html[data-theme="light"] .site-shell,


html[data-theme="light"] body.is-home .site-shell,


html[data-theme="light"] body.is-detail .site-shell {


  background: #f4f6f8 !important;


  color: #111827 !important;


}





html[data-theme="light"] .topbar {


  background: rgba(255,255,255,.96) !important;


  border-bottom-color: rgba(17,24,39,.12) !important;


}





html[data-theme="light"] .top-search, html[data-theme="light"] .settings-card, html[data-theme="light"] .settings-groups section, html[data-theme="light"] .profile-summary, html[data-theme="light"] .profile-stats article, html[data-theme="light"] .catalog-toolbar select, html[data-theme="light"] .history-card, html[data-theme="light"] .favorite-card, html[data-theme="light"] .catalog-card, html[data-theme="light"] .comment-card, html[data-theme="light"] .comment-form, html[data-theme="light"] .my-comments-section, html[data-theme="light"] .anime-hero, html[data-theme="light"] .search-modal__panel {


  background: #ffffff !important;


  border-color: rgba(17,24,39,.12) !important;


  color: #111827 !important;


}





html[data-theme="light"] h1,


html[data-theme="light"] h2,


html[data-theme="light"] h3,


html[data-theme="light"] h4,


html[data-theme="light"] strong,


html[data-theme="light"] label,


html[data-theme="light"] .page-heading,


html[data-theme="light"] .section-head,


html[data-theme="light"] .settings-group-title span,


html[data-theme="light"] .profile-summary h2,


html[data-theme="light"] .anime-info,


html[data-theme="light"] .anime-info h1,


html[data-theme="light"] .title-line h1,


html[data-theme="light"] .comment-card__content strong,


html[data-theme="light"] .my-comment-card strong,


html[data-theme="light"] .nav a.is-active span {


  color: #111827 !important;


  text-shadow: none !important;


}





html[data-theme="light"] p, html[data-theme="light"] small, html[data-theme="light"] span, html[data-theme="light"] .subtitle, html[data-theme="light"] .description, html[data-theme="light"] .meta-list, html[data-theme="light"] .settings-group-title small, html[data-theme="light"] .profile-summary p, html[data-theme="light"] .history-card__body p, html[data-theme="light"] .history-card__body > span {


  color: #4b5563 !important;


}





html[data-theme="light"] input,


html[data-theme="light"] select,


html[data-theme="light"] textarea {


  background: #f8fafc !important;


  border-color: rgba(17,24,39,.14) !important;


  color: #111827 !important;


}





html[data-theme="light"] .top-search input,


html[data-theme="light"] .top-search button,


html[data-theme="light"] .nav a,


html[data-theme="light"] .nav button,


html[data-theme="light"] .nav a span,


html[data-theme="light"] .nav button span,


html[data-theme="light"] .icon-button,


html[data-theme="light"] .theme-toggle,


html[data-theme="light"] .notification-button,


html[data-theme="light"] .profile-button {


  color: #111827 !important;


}





/* Final mobile layout: double header, bottom navigation, no horizontal spill. */


@media (max-width: 820px) {


  html,


  body {


    width: 100% !important;


    max-width: 100% !important;


    overflow-x: hidden !important;


  }





  body {


    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;


    background: #0b0f14 !important;


  }





  .site-shell,


  body.is-home .site-shell,


  body.is-library .site-shell,


  body.is-detail .site-shell {


    width: 100% !important;


    max-width: 100% !important;


    min-height: 100vh !important;


    display: block !important;


    overflow-x: clip !important;


    background: #0b0f14 !important;


  }





  .topbar,


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


    position: sticky !important;


    top: 0 !important;


    z-index: 90 !important;


    width: 100% !important;


    height: 118px !important;


    min-height: 118px !important;


    display: grid !important;


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


    grid-template-rows: 58px 52px !important;


    align-items: center !important;


    gap: 0 10px !important;


    padding: 8px 12px 10px !important;


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


    background: rgba(14,18,24,.96) !important;


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


  }





  .logo {


    grid-column: 1 !important;


    grid-row: 1 !important;


    min-width: 0 !important;


    min-height: 46px !important;


    padding: 0 !important;


    font-size: 21px !important;


  }





  .logo::before {


    width: 36px !important;


    height: 36px !important;


    margin-right: 8px !important;


    border-radius: 12px !important;


  }





  .logo-mark {


    width: 36px !important;


    height: 36px !important;


  }





  .top-actions {


    grid-column: 2 !important;


    grid-row: 1 !important;


    justify-self: end !important;


    display: flex !important;


    align-items: center !important;


    gap: 8px !important;


    min-width: 0 !important;


    padding: 0 !important;


  }





  .notification-button {


    width: 42px !important;


    min-width: 42px !important;


    height: 42px !important;


    border-radius: 999px !important;


  }





  .profile-button {


    width: 42px !important;


    min-width: 42px !important;


    height: 42px !important;


    padding: 0 !important;


    border-radius: 999px !important;


    display: grid !important;


    place-items: center !important;


  }





  .profile-button span:not(#profileButtonName),


  .profile-button #profileButtonName,


  .profile-button span:last-child {


    display: none !important;


  }





  .profile-avatar {


    width: 34px !important;


    height: 34px !important;


  }





  .top-search {


    grid-column: 1 / -1 !important;


    grid-row: 2 !important;


    width: 100% !important;


    height: 48px !important;


    min-width: 0 !important;


    margin: 4px 0 0 !important;


    display: grid !important;


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


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


    border-radius: 16px !important;


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


    box-shadow: none !important;


  }





  .top-search button {


    width: 46px !important;


    height: 46px !important;


  }





  .top-search input {


    width: 100% !important;


    min-width: 0 !important;


    height: 46px !important;


    padding: 0 14px 0 0 !important;


    font-size: 14px !important;


  }





  .sidebar,


  body.is-home .sidebar,


  body.is-library .sidebar,


  body.is-detail .sidebar {


    display: contents !important;


    position: static !important;


    width: auto !important;


    height: auto !important;


    min-height: 0 !important;


    padding: 0 !important;


    margin: 0 !important;


  }





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


    position: fixed !important;


    left: 10px !important;


    right: 10px !important;


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


    z-index: 110 !important;


    height: 64px !important;


    display: grid !important;


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


    gap: 4px !important;


    padding: 6px !important;


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


    border-radius: 22px !important;


    background: rgba(18,22,28,.96) !important;


    box-shadow: 0 14px 36px rgba(0,0,0,.42) !important;


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


  }





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


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


    width: 100% !important;


    height: 52px !important;


    min-height: 52px !important;


    display: grid !important;


    grid-template-rows: 24px 16px !important;


    place-items: center !important;


    gap: 2px !important;


    padding: 6px 2px !important;


    border: 0 !important;


    border-radius: 16px !important;


    background: transparent !important;


    color: #9ca3af !important;


    font-size: 9px !important;


    line-height: 1 !important;


    text-align: center !important;


  }





  .sidebar > .nav:not(.nav--footer) a span,


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


    width: 24px !important;


    height: 24px !important;


    display: grid !important;


    place-items: center !important;


    font-size: 18px !important;


    color: inherit !important;


  }





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


    display: grid !important;


  }





  .sidebar > .nav:not(.nav--footer) a span::before,


  .sidebar > .nav:not(.nav--footer) button span::before {


    display: none !important;


    content: none !important;


  }





  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


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


    background: #22262d !important;


    color: var(--orange-2) !important;


    box-shadow: none !important;


    transform: none !important;


  }





  .nav--footer {


    display: none !important;


  }





  .bottom-nav {


    display: none !important;


  }





  .home-page,


  body.is-home .home-page,


  body.is-library .home-page,


  .detail-page,


  body.is-detail .detail-page {


    width: 100% !important;


    max-width: 100% !important;


    padding: 14px 12px calc(86px + env(safe-area-inset-bottom, 0px)) !important;


    margin: 0 !important;


    overflow-x: clip !important;


  }





  .home-page.library-mode > .continue-card,


  .home-page.library-mode > .poster-section,


  .home-page.library-mode > .search-section {


    display: none !important;


  }





  .home-page.library-mode > .catalog-section:not([hidden]),


  .home-page.library-mode > .library-section:not([hidden]),


  .home-page.library-mode > .settings-section:not([hidden]) {


    display: block !important;


  }





  body.is-library .catalog-section, body.is-library .library-section, body.is-library .settings-section, body.is-detail .anime-hero, body.is-detail .comments-shell, .poster-section, .continue-card, .search-section {


    width: 100% !important;


    max-width: 100% !important;


    margin-left: 0 !important;


    margin-right: 0 !important;


  }





  .page-heading {


    display: flex !important;


    align-items: flex-start !important;


    gap: 12px !important;


    margin: 8px 0 16px !important;


  }





  .page-heading h1 {


    font-size: clamp(28px, 9vw, 38px) !important;


    line-height: 1.05 !important;


  }





  .section-head {


    align-items: center !important;


    margin-bottom: 14px !important;


  }





  .section-head h2 {


    font-size: clamp(26px, 8vw, 34px) !important;


    line-height: 1.05 !important;


  }





  body.is-home #continueCard {


    width: calc(100% + 24px) !important;


    max-width: calc(100% + 24px) !important;


    margin: -14px -12px 24px !important;


    border-radius: 0 0 22px 22px !important;


  }





  .hero-carousel.watch-progress,


  .watch-progress {


    min-height: min(76vh, 520px) !important;


    grid-template-columns: 1fr !important;


    align-content: end !important;


    padding: 24px 18px !important;


    background-position: center !important;


  }





  .hero-carousel.watch-progress h3,


  .watch-progress h3 {


    max-width: 100% !important;


    font-size: clamp(34px, 11vw, 48px) !important;


    line-height: .98 !important;


  }





  body.is-home .poster-grid,


  #popularGrid,


  #recommendationsGrid,


  #ongoingGrid,


  #moviesGrid {


    width: calc(100% + 12px) !important;


    max-width: calc(100% + 12px) !important;


    margin-right: -12px !important;


    display: grid !important;


    grid-auto-flow: column !important;


    grid-auto-columns: minmax(150px, 42vw) !important;


    grid-template-columns: none !important;


    gap: 12px !important;


    overflow-x: auto !important;


    overflow-y: hidden !important;


    padding: 0 12px 10px 0 !important;


    scroll-snap-type: x proximity !important;


  }





  body.is-home .poster-grid .poster-card,


  #popularGrid .poster-card,


  #recommendationsGrid .poster-card,


  #ongoingGrid .poster-card,


  #moviesGrid .poster-card {


    width: 100% !important;


    min-width: 0 !important;


    height: auto !important;


    aspect-ratio: 2 / 3 !important;


    scroll-snap-align: start !important;


  }





  .catalog-grid,


  .library-grid,


  .results {


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


    gap: 12px !important;


  }





  .catalog-toolbar {


    grid-template-columns: 1fr !important;


    gap: 10px !important;


  }





  .catalog-toolbar label,


  .catalog-toolbar select {


    width: 100% !important;


    min-width: 0 !important;


  }





  .history-card,


  .history-card__body {


    width: 100% !important;


    max-width: 100% !important;


  }





  .history-card__body {


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


    gap: 12px !important;


    align-items: center !important;


  }





  .history-card__body img {


    width: 72px !important;


    height: 72px !important;


  }





  .history-card__body strong,


  .history-card__body p {


    min-width: 0 !important;


    overflow-wrap: anywhere !important;


  }





  .settings-section .profile-summary,


  .settings-section .profile-summary.is-authenticated {


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


    gap: 12px !important;


    padding: 16px !important;


  }





  .settings-section .profile-summary .accent-button {


    grid-column: 1 / -1 !important;


    width: 100% !important;


  }





  .settings-section .profile-stats {


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


  }





  .settings-section .settings-groups {


    grid-template-columns: 1fr !important;


  }





  body.is-detail .anime-hero, body.is-detail .comments-shell {


    width: 100% !important;


    max-width: 100% !important;


    min-width: 0 !important;


  }





  body.is-detail .anime-hero {


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


    gap: 12px !important;


    padding: 14px !important;


    border-radius: 18px !important;


  }





  body.is-detail .anime-info h1,


  body.is-detail .title-line h1 {


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


    line-height: 1.02 !important;


    overflow-wrap: anywhere !important;


  }





  body.is-detail .anime-info .description,


  body.is-detail .description {


    display: -webkit-box !important;


    -webkit-box-orient: vertical !important;


    -webkit-line-clamp: 7 !important;


    overflow: hidden !important;


    font-size: 13px !important;


    line-height: 1.5 !important;


  }





  body.is-detail .poster-column {


    max-width: 86px !important;


  }





  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback {


    width: 86px !important;


    border-radius: 14px !important;


  }





  .search-modal {


    padding: 12px !important;


    align-items: start !important;


  }





  .search-modal__panel {


    width: 100% !important;


    max-height: calc(100vh - 24px) !important;


    padding: 16px !important;


    border-radius: 18px !important;


  }





  .search-modal__form {


    grid-template-columns: 1fr !important;


  }





  .modal-results {


    grid-template-columns: 1fr !important;


  }


}





@media (max-width: 430px) {


  .topbar,


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


    height: 112px !important;


    min-height: 112px !important;


    grid-template-rows: 54px 50px !important;


    padding-inline: 10px !important;


  }





  .logo {


    font-size: 19px !important;


  }





  .notification-button,


  .profile-button {


    width: 38px !important;


    min-width: 38px !important;


    height: 38px !important;


  }





  .profile-avatar {


    width: 31px !important;


    height: 31px !important;


  }





  .home-page,


  body.is-home .home-page,


  body.is-library .home-page,


  .detail-page,


  body.is-detail .detail-page {


    padding-inline: 10px !important;


  }





  body.is-home .poster-grid,


  #popularGrid,


  #recommendationsGrid,


  #ongoingGrid,


  #moviesGrid {


    grid-auto-columns: minmax(138px, 44vw) !important;


  }





  .catalog-grid,


  .library-grid,


  .results {


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


    gap: 10px !important;


  }





  body.is-detail .anime-hero {


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


    padding: 12px !important;


  }





  body.is-detail .poster-column,


  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback {


    width: 74px !important;


    max-width: 74px !important;


  }


}





/* Mobile fit polish: icon-only nav, tighter search, compact watch and history. */


@media (max-width: 820px) {


  .top-search {


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


    justify-self: center !important;


    height: 44px !important;


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


    border-radius: 14px !important;


  }





  .top-search button {


    width: 42px !important;


    height: 42px !important;


  }





  .top-search input {


    height: 42px !important;


    font-size: 13px !important;


    padding-right: 10px !important;


  }





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


    height: 58px !important;


    padding: 5px !important;


    border-radius: 20px !important;


  }





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


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


    height: 48px !important;


    min-height: 48px !important;


    display: grid !important;


    grid-template-rows: 1fr !important;


    place-items: center !important;


    padding: 0 !important;


    font-size: 0 !important;


    line-height: 0 !important;


  }





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


    color: #9ca3af !important;


  }





  .sidebar > .nav:not(.nav--footer) a span,


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


    width: 34px !important;


    height: 34px !important;


    font-size: 21px !important;


    line-height: 1 !important;


  }





  .history-card__body {


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


    min-height: 78px !important;


    gap: 10px !important;


    padding: 10px !important;


  }





  .history-card__body img,


  .history-card__poster {


    width: 66px !important;


    height: 66px !important;


  }





  .history-card__body p,


  .history-card__meta,


  .history-card__body > span {


    display: none !important;


  }





  .history-card__body strong {


    grid-column: 2 !important;


    grid-row: 1 !important;


    align-self: center !important;


    font-size: 13px !important;


    line-height: 1.2 !important;


    display: -webkit-box !important;


    -webkit-box-orient: vertical !important;


    -webkit-line-clamp: 2 !important;


    overflow: hidden !important;


  }





  .history-card .round-play,


  .history-card__body .round-play {


    width: 38px !important;


    min-width: 38px !important;


    height: 38px !important;


  }





  body.is-detail .anime-hero {


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


    gap: 10px !important;


    padding: 12px !important;


  }





  body.is-detail .poster-column,


  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback {


    width: 70px !important;


    max-width: 70px !important;


  }





  body.is-detail .anime-info h1,


  body.is-detail .title-line h1 {


    font-size: clamp(25px, 8vw, 34px) !important;


  }





  body.is-detail .anime-info > small,


  body.is-detail .chips,


  body.is-detail .chips span {


    font-size: 10px !important;


  }





  body.is-detail .chips {


    gap: 6px !important;


    margin: 8px 0 !important;


  }





  body.is-detail .chips span {


    min-height: 28px !important;


    padding: 0 9px !important;


    border-radius: 7px !important;


  }





  body.is-detail .anime-info .description,


  body.is-detail .description {


    -webkit-line-clamp: 4 !important;


    font-size: 12px !important;


    line-height: 1.42 !important;


    margin-top: 8px !important;


  }





  body.is-detail .poster-actions {


    display: grid !important;


    grid-template-columns: 1fr 1fr !important;


    gap: 8px !important;


    margin-top: 12px !important;


  }





  body.is-detail .poster-actions button,


  body.is-detail .watch-button,


  body.is-detail .bookmark-button {


    min-height: 40px !important;


    height: 40px !important;


    padding: 0 10px !important;


    border-radius: 999px !important;


    font-size: 11px !important;


    white-space: nowrap !important;


  }





  body.is-detail #currentEpisodeTitle {


    font-size: 15px !important;


  }


}





@media (max-width: 430px) {


  .top-search {


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


  }





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


    left: 12px !important;


    right: 12px !important;


  }


}





/* Narrow phone cleanup, tuned for 330px responsive viewport. */


@media (max-width: 430px) {


  .topbar,


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


    height: 108px !important;


    min-height: 108px !important;


    grid-template-rows: 52px 44px !important;


    padding-top: 6px !important;


    padding-bottom: 8px !important;


  }





  .top-search {


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


    height: 40px !important;


    margin-top: 0 !important;


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


  }





  .top-search button {


    width: 40px !important;


    height: 38px !important;


  }





  .top-search input {


    height: 38px !important;


    font-size: 12px !important;


  }





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


    left: 14px !important;


    right: 14px !important;


    height: 54px !important;


    padding: 5px !important;


    gap: 2px !important;


    border-radius: 18px !important;


  }





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


  .sidebar > .nav:not(.nav--footer) button,


  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


  .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a,


  body.is-home .sidebar > .nav:not(.nav--footer) button,


  body.is-home .sidebar > .nav:not(.nav--footer) a:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) button:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a[data-nav="home"] {


    height: 44px !important;


    min-height: 44px !important;


    border-radius: 14px !important;


    background: transparent !important;


    box-shadow: none !important;


    backdrop-filter: none !important;


  }





  .sidebar > .nav:not(.nav--footer) a.is-active,


  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


  body.is-home .sidebar > .nav:not(.nav--footer) a:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) button:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a[data-nav="home"] {


    color: var(--orange-2) !important;


  }





  .sidebar > .nav:not(.nav--footer) a span,


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


    width: 30px !important;


    height: 30px !important;


    font-size: 19px !important;


  }





  .home-page,


  body.is-home .home-page,


  body.is-library .home-page,


  .detail-page,


  body.is-detail .detail-page {


    padding-top: 10px !important;


  }





  .history-list {


    display: grid !important;


    gap: 8px !important;


  }





  .history-card {


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


    gap: 10px !important;


    align-items: center !important;


    padding: 8px 12px 8px 8px !important;


    min-height: 76px !important;


    border-radius: 18px !important;


    overflow: hidden !important;


  }





  .history-card__body {


    min-height: 76px !important;


    display: grid !important;


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


    gap: 0 !important;


    align-items: center !important;


    padding: 0 !important;


  }





  .history-card__poster,


  .history-card__body img,


  .history-card__body > img {


    grid-column: 1 !important;


    grid-row: 1 !important;


    width: 62px !important;


    min-width: 62px !important;


    height: 58px !important;


    border-radius: 14px !important;


    object-fit: cover !important;


  }





  .history-card__body strong,


  .history-card h3,


  .history-card strong {


    grid-column: 1 !important;


    grid-row: 1 !important;


    width: 100% !important;


    max-width: 100% !important;


    min-width: 0 !important;


    align-self: center !important;


    justify-self: stretch !important;


    text-align: left !important;


    font-size: 13px !important;


    line-height: 1.18 !important;


    display: -webkit-box !important;


    -webkit-box-orient: vertical !important;


    -webkit-line-clamp: 2 !important;


    overflow: hidden !important;


  }





  .history-card__body p,


  .history-card__meta,


  .history-card__body > span,


  .history-card small,


  .history-card .round-play {


    display: none !important;


  }





  body.is-detail .anime-hero {


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


    gap: 9px !important;


    padding: 10px !important;


    border-radius: 16px !important;


  }





  body.is-detail .poster-column,


  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback {


    width: 62px !important;


    max-width: 62px !important;


  }





  body.is-detail .anime-info h1,


  body.is-detail .title-line h1 {


    font-size: clamp(22px, 7.2vw, 26px) !important;


    line-height: 1.04 !important;


    display: -webkit-box !important;


    -webkit-box-orient: vertical !important;


    -webkit-line-clamp: 4 !important;


    overflow: hidden !important;


  }





  body.is-detail .anime-info > small {


    font-size: 9px !important;


    line-height: 1.25 !important;


  }





  body.is-detail .chips {


    gap: 5px !important;


    margin: 6px 0 !important;


  }





  body.is-detail .chips span {


    min-height: 24px !important;


    padding: 0 7px !important;


    font-size: 9px !important;


  }





  body.is-detail .anime-info .description,


  body.is-detail .description {


    -webkit-line-clamp: 3 !important;


    font-size: 11px !important;


    line-height: 1.36 !important;


    margin-top: 6px !important;


  }





  body.is-detail .poster-actions {


    grid-column: 1 / -1 !important;


    width: 100% !important;


    margin-top: 10px !important;


    gap: 7px !important;


  }





  body.is-detail .poster-actions button,


  body.is-detail .watch-button,


  body.is-detail .bookmark-button {


    height: 36px !important;


    min-height: 36px !important;


    padding: 0 8px !important;


    font-size: 10px !important;


  }





  body.is-detail .css-filter-control {


    display: none !important;


  }


}





/* Final narrow-phone watch polish: keep this after all earlier mobile overrides. */


@media (max-width: 430px) {


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


  .sidebar > .nav:not(.nav--footer) button,


  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


  .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) button:hover,


  body.is-home .sidebar > .nav:not(.nav--footer) a.is-active,


  body.is-home .sidebar > .nav:not(.nav--footer) a[data-nav="home"] {


    height: 44px !important;


    min-height: 44px !important;


    background: transparent !important;


    color: #aeb4be !important;


    box-shadow: none !important;


    transform: none !important;


    backdrop-filter: none !important;


  }





  .sidebar > .nav:not(.nav--footer) a:hover,


  .sidebar > .nav:not(.nav--footer) a:focus-visible,


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


    color: #ffd0ac !important;


  }





  .history-card {


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


    min-height: 88px !important;


    padding: 9px 12px 9px 9px !important;


  }





  .history-card__poster,


  .history-card__body img,


  .history-card__body > img {


    width: 60px !important;


    min-width: 60px !important;


    height: 60px !important;


  }





  .history-card__body {


    min-height: 64px !important;


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


    grid-template-rows: auto auto !important;


    align-content: center !important;


    gap: 8px !important;


    padding: 0 !important;


  }





  .history-card__meta {


    grid-column: 1 !important;


    grid-row: 2 !important;


    display: block !important;


    width: 100% !important;


  }





  .history-card__meta b {


    display: none !important;


  }





  .history-card__meta small {


    display: block !important;


    width: 100% !important;


    height: 4px !important;


    margin-top: 0 !important;


    border-radius: 999px !important;


    background: linear-gradient(90deg, #ffd0ac 0 var(--history-progress, 0%), rgba(255,255,255,.09) var(--history-progress, 0%)) !important;


    color: transparent !important;


  }





  body.is-detail .anime-hero {


    order: 1 !important;


    display: flex !important;


    flex-direction: column !important;


    align-items: center !important;


    width: 100% !important;


    padding: 14px 18px 18px !important;


    gap: 0 !important;


    text-align: center !important;


  }





  body.is-detail .poster-column {


    width: min(210px, 72vw) !important;


    max-width: min(210px, 72vw) !important;


    height: auto !important;


    margin: 0 auto 18px !important;


  }





  body.is-detail .poster-column img,


  body.is-detail .poster-column .poster-fallback,


  body.is-detail .anime-poster {


    width: 100% !important;


    max-width: 100% !important;


    aspect-ratio: 2 / 3 !important;


    height: auto !important;


    min-height: 0 !important;


    border-radius: 4px !important;


    object-fit: cover !important;


  }





  body.is-detail .anime-info {


    width: 100% !important;


    max-width: 100% !important;


    display: flex !important;


    flex-direction: column !important;


    align-items: stretch !important;


    text-align: center !important;


  }





  body.is-detail .title-line {


    display: grid !important;


    grid-template-columns: 1fr auto !important;


    align-items: center !important;


    gap: 8px !important;


    width: 100% !important;


  }





  body.is-detail .anime-info h1,


  body.is-detail .title-line h1 {


    font-size: 26px !important;


    line-height: 1.12 !important;


    font-weight: 800 !important;


    text-align: center !important;


    color: #e5e7eb !important;


    text-shadow: none !important;


    -webkit-line-clamp: 3 !important;


  }





  body.is-detail .title-line strong {


    min-width: 42px !important;


    padding: 5px 7px !important;


    border-radius: 6px !important;


    font-size: 13px !important;


    line-height: 1 !important;


  }





  body.is-detail .subtitle {


    margin: 8px 0 18px !important;


    font-size: 19px !important;


    line-height: 1.25 !important;


    color: #ffd0ac !important;


    text-align: center !important;


  }





  body.is-detail .chips {


    display: grid !important;


    grid-template-columns: 1fr 1fr !important;


    gap: 1px !important;


    margin: 0 0 12px !important;


    overflow: hidden !important;


    background: rgba(255,255,255,.035) !important;


  }





  body.is-detail .chips span {


    min-height: 36px !important;


    padding: 0 10px !important;


    border-radius: 0 !important;


    background: rgba(0,0,0,.22) !important;


    color: #aeb4be !important;


    font-size: 12px !important;


    font-weight: 600 !important;


  }





  body.is-detail .meta-list {


    display: grid !important;


    grid-template-columns: 1fr !important;


    gap: 1px !important;


    margin: 0 0 16px !important;


    text-align: left !important;


  }





  body.is-detail .meta-list dt,


  body.is-detail .meta-list dd {


    min-height: 32px !important;


    margin: 0 !important;


    padding: 7px 10px !important;


    background: rgba(0,0,0,.20) !important;


    font-size: 12px !important;


    line-height: 1.35 !important;


  }





  body.is-detail .meta-list dt {


    color: #858b95 !important;


    padding-bottom: 0 !important;


  }





  body.is-detail .meta-list dd {


    color: #d1d5db !important;


    padding-top: 0 !important;


  }





  body.is-detail .anime-info .description,


  body.is-detail .description {


    order: 6 !important;


    margin: 4px 0 18px !important;


    font-size: 15px !important;


    line-height: 1.55 !important;


    color: #b8bdc6 !important;


    text-align: left !important;


    -webkit-line-clamp: 9 !important;


  }





  body.is-detail .anime-info > small {


    order: 7 !important;


    margin-top: 8px !important;


    color: #858b95 !important;


    font-size: 11px !important;


    text-align: center !important;


  }





  body.is-detail .poster-actions {


    order: 5 !important;


    display: flex !important;


    flex-direction: column !important;


    width: 100% !important;


    gap: 10px !important;


    margin: 0 0 18px !important;


  }





  body.is-detail .poster-actions button,


  body.is-detail .watch-button,


  body.is-detail .bookmark-button,


  body.is-detail .share-button {


    width: 100% !important;


    min-height: 48px !important;


    height: 48px !important;


    border-radius: 3px !important;


    padding: 0 14px !important;


    font-size: 13px !important;


    font-weight: 800 !important;


    text-transform: uppercase !important;


    letter-spacing: 0 !important;


  }





  body.is-detail .watch-button {


    order: 1 !important;


    border-color: transparent !important;


    background: var(--accent-default) !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button {


    order: 2 !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #f3f4f6 !important;


  }





  body.is-detail .share-button {


    order: 3 !important;


    min-height: 40px !important;


    height: 40px !important;


    font-size: 11px !important;


    border-color: rgba(255,255,255,.1) !important;


    background: #111318 !important;


    color: #aeb4be !important;


  }





  body.is-detail .watch-button:hover,


  body.is-detail .watch-button:focus-visible {


    background: #ffd0ac !important;


    color: #15110f !important;


  }





  body.is-detail .bookmark-button:hover,


  body.is-detail .bookmark-button:focus-visible,


  body.is-detail .share-button:hover,


  body.is-detail .share-button:focus-visible {


    border-color: rgba(255,164,119,.55) !important;


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


    color: #ffd0ac !important;


  }


}


@media (max-width: 430px) {





  body.is-detail .video-seek-wrap {


    min-width: 0 !important;


    height: 24px !important;


    display: flex !important;


    align-items: center !important;


    padding: 0 !important;


    overflow: visible !important;


  }


}





/* Final notifications popover alignment. */


.top-actions .notifications-popover,


html:not([data-theme="light"]) .top-actions .notifications-popover,


html[data-theme="light"] .top-actions .notifications-popover {


  position: absolute !important;


  top: calc(100% + 10px) !important;


  right: 0 !important;


  left: auto !important;


  z-index: 120 !important;


  width: min(320px, calc(100vw - 18px)) !important;


  max-width: calc(100vw - 18px) !important;


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


  border-radius: 12px !important;


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


  box-shadow: 0 18px 38px rgba(0,0,0,.36) !important;


  backdrop-filter: none !important;


  -webkit-backdrop-filter: none !important;


  transform: none !important;


}





.top-actions .notifications-popover[hidden] {


  display: none !important;


}





.top-actions .notifications-popover::before {


  content: "" !important;


  position: absolute !important;


  top: -6px !important;


  right: 102px !important;


  width: 10px !important;


  height: 10px !important;


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


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


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


  transform: rotate(45deg) !important;


}





@media (max-width: 520px) {


  .top-actions .notifications-popover,


  html:not([data-theme="light"]) .top-actions .notifications-popover,


  html[data-theme="light"] .top-actions .notifications-popover {


    position: fixed !important;


    top: 76px !important;


    right: 10px !important;


    left: 10px !important;


    width: auto !important;


    max-width: none !important;


  }





  .top-actions .notifications-popover::before {


    right: 74px !important;


  }


}





/* Detail page final polish: lower info block, plain comments, filled peach button hovers. */


@media (min-width: 821px) {


  body.is-detail .anime-hero {


    margin-top: 18px !important;


  }


}





body.is-detail .comments-panel {


  padding-top: 0 !important;


}





body.is-detail .comments-layout,


body.is-detail .comment-form,


body.is-detail .comment-card,


body.is-detail .comments-layout:hover,


body.is-detail .comment-form:hover,


body.is-detail .comment-card:hover {


  border: 0 !important;


  border-color: transparent !important;


  background: transparent !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .comments-layout {


  padding: 0 !important;


  gap: 0 !important;


}





body.is-detail .comments-intro {


  padding: 0 0 18px !important;


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


}





body.is-detail .comment-form {


  padding: 20px 0 22px !important;


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


  border-radius: 0 !important;


}





body.is-detail .comment-form textarea {


  border-color: rgba(255,255,255,.1) !important;


  background: #10141a !important;


  box-shadow: none !important;


}





body.is-detail .comment-form textarea:focus {


  border-color: rgba(255,164,119,.72) !important;


}





body.is-detail .comments-list {


  margin-top: 0 !important;


  gap: 0 !important;


}





body.is-detail .comment-card {


  padding: 18px 0 !important;


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


  border-radius: 0 !important;


  transition: none !important;


}





body.is-detail .comment-card:last-child {


  border-bottom: 0 !important;


}





body.is-detail .comment-card__content header {


  padding-bottom: 8px !important;


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


}





body.is-detail .comment-card__content > p {


  margin: 14px 0 12px !important;


  color: #d8dadd !important;


}





body.is-detail .comment-replies {


  margin-top: 2px !important;


  gap: 0 !important;


  border-left-color: rgba(255,255,255,.08) !important;


}





body.is-detail .comment-form__footer button:not(:disabled):hover,


body.is-detail .comment-form__footer button:not(:disabled):focus-visible,


body.is-detail .comment-reply-button:hover,


body.is-detail .comment-reply-button:focus-visible,


body.is-detail .comment-reply-cancel:hover,


body.is-detail .comment-reply-cancel:focus-visible,


body.is-detail .comment-user-actions button:hover,


body.is-detail .comment-user-actions button:focus-visible,


body.is-detail .comment-reactions button:hover,


body.is-detail .comment-reactions button:focus-visible {


  border-color: var(--orange) !important;


  background: var(--orange) !important;


  color: #15110f !important;


  box-shadow: none !important;


  filter: none !important;


}





/* Absolute final detail polish: lower info card and no moving comment surfaces. */


@media (min-width: 821px) {


  body.is-detail .anime-hero {


    margin-top: 30px !important;


  }


}





body.is-detail .comment-card,


body.is-detail .comment-form {


  background: rgba(255,255,255,.025) !important;


  transition: background .16s ease, color .16s ease, border-color .16s ease !important;


}





body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within {


  border-color: transparent !important;


  background: rgba(255,255,255,.045) !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .comment-card:hover *,


body.is-detail .comment-card:focus-within *,


body.is-detail .comment-form:hover *,


body.is-detail .comment-form:focus-within * {


  transform: none !important;


}





body.is-detail .comment-form textarea,


body.is-detail .comment-form textarea:hover,


body.is-detail .comment-form textarea:focus,


body.is-detail .comment-form textarea:focus-visible {


  border-color: rgba(255,255,255,.12) !important;


  box-shadow: none !important;


}





body.is-detail .poster-actions .watch-button:hover,


body.is-detail .poster-actions .watch-button:focus-visible,


body.is-detail .poster-actions .bookmark-button:hover,


body.is-detail .poster-actions .bookmark-button:focus-visible {


  border-color: var(--orange) !important;


  background: var(--orange) !important;


  color: #15110f !important;


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





/* Home buttons and narrower desktop sidebar hover states. */


body.is-home .home-page .link-button:hover,


body.is-home .home-page .link-button:focus-visible,


body.is-home .home-page .round-play:hover,


body.is-home .home-page .round-play:focus-visible,


body.is-home .home-page .hero-favorite:hover,


body.is-home .home-page .hero-favorite:focus-visible,


body.is-home .home-page .watch-button:hover,


body.is-home .home-page .watch-button:focus-visible,


body.is-home .home-page .bookmark-button:hover,


body.is-home .home-page .bookmark-button:focus-visible,


body.is-home .home-page .ghost-button:hover,


body.is-home .home-page .ghost-button:focus-visible {


  border-color: var(--orange) !important;


  background: var(--orange) !important;


  color: #15110f !important;


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





@media (min-width: 821px) {


  .sidebar .nav a,


  .sidebar .nav button,


  body.is-home .sidebar .nav a,


  body.is-home .sidebar .nav button {


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


    margin-left: 14px !important;


    margin-right: 14px !important;


    box-sizing: border-box !important;


  }





  .sidebar .nav a:hover,


  .sidebar .nav a:focus-visible,


  .sidebar .nav button:hover,


  .sidebar .nav button:focus-visible,


  .sidebar .nav a.is-active,


  body.is-home .sidebar .nav a:hover,


  body.is-home .sidebar .nav a:focus-visible,


  body.is-home .sidebar .nav button:hover,


  body.is-home .sidebar .nav button:focus-visible,


  body.is-home .sidebar .nav a.is-active,


  body.is-home .sidebar .nav a[data-nav="home"] {


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


    margin-left: 14px !important;


    margin-right: 14px !important;


    transform: none !important;


  }


}





/* Kill every comment-card hover movement/reshuffle. */


body.is-detail .comment-card,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus,


body.is-detail .comment-card:focus-within,


body.is-detail .comment-card:active {


  margin: 0 !important;


  padding: 18px 0 !important;


  border-top: 0 !important;


  border-right: 0 !important;


  border-left: 0 !important;


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


  border-radius: 0 !important;


  background: rgba(255,255,255,.025) !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


  transition: none !important;


}





body.is-detail .comment-card:hover .comment-user-actions,


body.is-detail .comment-card:focus-within .comment-user-actions {


  opacity: 0 !important;


  transform: none !important;


}





body.is-detail .comment-card *,


body.is-detail .comment-card:hover *,


body.is-detail .comment-card:focus-within * {


  transform: none !important;


  transition-property: color, background, border-color, opacity !important;


}





/* Same no-motion rule for the "leave a comment" form, plus gentler avatar inset. */


body.is-detail .comment-form,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-form:active {


  margin: 0 !important;


  padding: 20px 0 22px 18px !important;


  border-top: 0 !important;


  border-right: 0 !important;


  border-left: 0 !important;


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


  border-radius: 0 !important;


  background: rgba(255,255,255,.025) !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


  transition: none !important;


}





body.is-detail .comment-form *,


body.is-detail .comment-form:hover *,


body.is-detail .comment-form:focus-within * {


  transform: none !important;


}





body.is-detail .comment-form__avatar,


body.is-detail .comment-card__avatar {


  margin-left: 14px !important;


}





body.is-detail .comment-form textarea,


body.is-detail .comment-form textarea:hover,


body.is-detail .comment-form textarea:focus,


body.is-detail .comment-form textarea:focus-visible {


  border-color: rgba(255,255,255,.12) !important;


  background: #10141a !important;


  box-shadow: none !important;


  transform: none !important;


}





/* Detail poster wash and final comment alignment. */


body.is-detail .site-shell {


  position: relative !important;


  isolation: isolate !important;


  background:


    linear-gradient(90deg, rgba(16,20,26,.98) 0 14%, rgba(16,20,26,.9) 34%, rgba(16,20,26,.98) 100%),


    var(--anime-bg, none) center top / cover fixed no-repeat,


    #10141a !important;


}





body.is-detail .site-shell::before {


  content: "" !important;


  position: fixed !important;


  inset: 116px 0 0 0 !important;


  z-index: -1 !important;


  pointer-events: none !important;


  background:


    linear-gradient(180deg, rgba(16,20,26,.72), rgba(16,20,26,.96) 62%, #10141a),


    var(--anime-bg, none) center 18% / cover no-repeat !important;


  opacity: .2 !important;


  filter: blur(18px) saturate(.82) brightness(.78) !important;


}





body.is-detail .comment-form,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within {


  display: grid !important;


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


  column-gap: 0 !important;


  padding: 18px 0 !important;


}





body.is-detail .comment-form__avatar,


body.is-detail .comment-card__avatar {


  width: 48px !important;


  height: 48px !important;


  margin-left: 18px !important;


  justify-self: start !important;


}





body.is-detail .comment-form__footer button,


body.is-detail .comment-form__footer button:hover,


body.is-detail .comment-form__footer button:focus-visible {


  box-shadow: none !important;


  filter: none !important;


}





/* Plain detail description area: no card box under the anime info. */


body.is-detail .anime-hero {


  border-color: transparent !important;


  background: transparent !important;


  box-shadow: none !important;


}





/* Comments: remove background boxes completely, keep only text and separators. */


body.is-detail .comments-layout,


body.is-detail .comments-layout:hover,


body.is-detail .comment-form,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus,


body.is-detail .comment-card:focus-within,


body.is-detail .comment-card:active {


  background: transparent !important;


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





body.is-detail .comment-form,


body.is-detail .comment-card {


  border-radius: 0 !important;


  border-top: 0 !important;


  border-right: 0 !important;


  border-left: 0 !important;


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


}





body.is-detail .comment-form textarea {


  background: transparent !important;


}





body.is-detail .comments-panel,


body.is-detail .comments-layout,


body.is-detail .comments-intro,


body.is-detail .comment-form,


body.is-detail .comment-card,


body.is-detail .comment-card__content header,


body.is-detail .comment-replies {


  border: 0 !important;


  border-bottom: 0 !important;


  border-left: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}





body.is-detail .comments-layout {


  padding: 0 !important;


}





body.is-detail .comments-intro {


  padding-bottom: 14px !important;


}





body.is-detail .comment-form,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within {


  padding-block: 16px !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .comment-form textarea {


  border-color: rgba(255,255,255,.1) !important;


}





/* Premium profile controls. */


.settings-section .profile-summary {


  position: relative !important;


  overflow: hidden !important;


}





.settings-section .profile-summary::before {


  content: "" !important;


  position: absolute !important;


  inset: 0 !important;


  background:


    linear-gradient(90deg, rgba(16,20,26,.92), rgba(16,20,26,.72)),


    var(--profile-banner, none) center / cover no-repeat !important;


  opacity: 0 !important;


  transition: opacity .18s ease !important;


  pointer-events: none !important;


}





.settings-section .profile-summary.is-premium::before {


  opacity: 1 !important;


}





.settings-section .profile-summary > * {


  position: relative !important;


  z-index: 1 !important;


}





.user-profile-card {


  position: relative !important;


  overflow: hidden !important;


}





.user-profile-card::before {


  content: "" !important;


  position: absolute !important;


  inset: 0 !important;


  background:


    linear-gradient(90deg, rgba(16,20,26,.94), rgba(16,20,26,.64)),


    var(--profile-banner, none) center / cover no-repeat !important;


  opacity: 0 !important;


  pointer-events: none !important;


}





.user-profile-card.is-premium::before {


  opacity: 1 !important;


}





.user-profile-card > * {


  position: relative !important;


  z-index: 1 !important;


}





.premium-profile-card.is-locked {


  opacity: .72 !important;


}





.premium-profile-card label {


  align-items: start !important;


  gap: 10px !important;


}





.premium-profile-card input {


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


  min-height: 42px !important;


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


  border-radius: 7px !important;


  background: #10141a !important;


  color: #f5f6f8 !important;


  padding: 0 13px !important;


  font: inherit !important;


  font-size: 13px !important;


  outline: 0 !important;


}





.premium-profile-card input:not(:disabled):focus {


  border-color: rgba(255,164,119,.62) !important;


}





.premium-profile-card input:disabled {


  color: rgba(255,255,255,.35) !important;


  cursor: not-allowed !important;


}





.premium-profile-save {


  justify-self: end !important;


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


  border-radius: 7px !important;


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


  color: #f5f6f8 !important;


  min-height: 40px !important;


  padding: 0 18px !important;


  font-weight: 900 !important;


  cursor: pointer !important;


  box-shadow: none !important;


}





.premium-profile-save:not(:disabled):hover,


.premium-profile-save:not(:disabled):focus-visible {


  background: var(--orange) !important;


  border-color: var(--orange) !important;


  color: #15110f !important;


  box-shadow: none !important;


  outline: 0 !important;


}





.premium-profile-save:disabled {


  opacity: .55 !important;


  cursor: not-allowed !important;


}





body.is-detail .css-filter-control {


  display: none !important;


}





body.is-detail .anime-hero {


  margin-top: 0 !important;


}





/* Desktop watch theatre: keep the mobile side-panel idea, give desktop the full width back. */


@media (min-width: 1101px) {


  body.is-detail .site-shell {


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


    max-width: none !important;


  }


}





/* Final polish layer: quieter UI, no accidental hover shifts or neon artifacts. */


.top-search {


  align-self: center !important;


}





.top-search:focus-within {


  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.18) !important;


}





.nav button,


.nav button:hover,


.nav button:focus-visible,


.icon-button,


.icon-button:hover,


.profile-button,


.profile-button:hover,


.notification-button,


.notification-button:hover {


  transform: none !important;


  filter: none !important;


  box-shadow: none !important;


}





.nav button:hover:not(.active) {


  background: rgba(255,255,255,.045) !important;


  color: rgba(255,255,255,.84) !important;


}





body.is-home .home-page .watch-button:hover,


body.is-home .home-page .watch-button:focus-visible,


body.is-home .home-page .bookmark-button:hover,


body.is-home .home-page .bookmark-button:focus-visible,


body.is-home .home-page .ghost-button:hover,


body.is-home .home-page .ghost-button:focus-visible,


body.is-detail .poster-actions .watch-button:hover,


body.is-detail .poster-actions .watch-button:focus-visible,


body.is-detail .poster-actions .bookmark-button:hover,


body.is-detail .poster-actions .bookmark-button:focus-visible,


body.is-detail .comment-form__footer button:not(:disabled):hover,


body.is-detail .comment-form__footer button:not(:disabled):focus-visible {


  background: var(--orange) !important;


  border-color: var(--orange) !important;


  color: #10141a !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .anime-hero {


  background-color: transparent !important;


  box-shadow: none !important;


}





body.is-detail .profile-score,


body.is-detail #profileScore,


body.is-detail #profileScoreChip {


  white-space: nowrap !important;


}





body.is-detail .comment-form,


body.is-detail .comment-card,


body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within,


body.is-detail .comment-card:active {


  background: transparent !important;


  border-color: rgba(255,255,255,.07) !important;


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within {


  background: rgba(255,255,255,.018) !important;


}





body.is-detail .comment-form *,


body.is-detail .comment-form:hover *,


body.is-detail .comment-form:focus-within *,


body.is-detail .comment-card *,


body.is-detail .comment-card:hover *,


body.is-detail .comment-card:focus-within * {


  transform: none !important;


}





body.is-detail .comment-card__avatar,


body.is-detail .comment-form__avatar {


  margin-left: 18px !important;


}





body.is-detail .comment-user-actions,


body.is-detail .comment-card:hover .comment-user-actions,


body.is-detail .comment-card:focus-within .comment-user-actions {


  transform: none !important;


  filter: none !important;


}





body.is-detail .comment-form textarea,


body.is-detail .comment-form textarea:hover,


body.is-detail .comment-form textarea:focus,


body.is-detail .comment-form textarea:focus-visible {


  box-shadow: none !important;


  transform: none !important;


  filter: none !important;


}





/* Minimal modern pass: flatter surfaces, sharper media, quick restrained hover. */


:root {


  --surface-soft: rgba(255,255,255,.028);


  --surface-hover: rgba(255,255,255,.055);


}





.poster-card,


.favorite-card,


.history-card,


.settings-card,


.stat-card {


  background: var(--surface-soft) !important;


  border-color: rgba(255,255,255,.065) !important;


}





.poster-card:hover,


.favorite-card:hover,


.history-card:hover,


.settings-card:hover {


  background: var(--surface-hover) !important;


  transform: none !important;


  box-shadow: none !important;


  filter: none !important;


}





.catalog-toolbar,


.settings-groups section,


.profile-card,


.friends-card {


  background: transparent !important;


  box-shadow: none !important;


}





.catalog-toolbar select,


.settings-groups select,


.settings-groups input,


.auth-form input,


.search-modal__form input {


  background: rgba(255,255,255,.035) !important;


  border-color: rgba(255,255,255,.08) !important;


  box-shadow: none !important;


}





.catalog-toolbar select:hover,


.settings-groups select:hover,


.settings-groups input:hover,


.auth-form input:hover,


.search-modal__form input:hover {


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


  border-color: rgba(255,255,255,.12) !important;


}





body.is-detail .comments-layout,


body.is-detail .comments-panel,


body.is-detail .watch-tab-panel {


  background: transparent !important;


  border-color: transparent !important;


}





body.is-detail .comment-form,


body.is-detail .comment-card {


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


  border-right: 0 !important;


  border-bottom: 0 !important;


  border-left: 0 !important;


  border-radius: 0 !important;


}





body.is-detail .comment-form:hover,


body.is-detail .comment-form:focus-within,


body.is-detail .comment-card:hover,


body.is-detail .comment-card:focus-within {


  background: rgba(255,255,255,.024) !important;


}





body.is-detail .comment-form__footer button,


.watch-button,


.bookmark-button,


.ghost-button,


.login-button,


.auth-actions button,


.google-button {


  box-shadow: none !important;


  filter: none !important;


}





.card-favorite:hover, .favorite-remove:hover, .comment-reactions button:hover, .comment-reply-button:hover, .comment-reply-cancel:hover {


  box-shadow: none !important;


  filter: none !important;


  transform: none !important;


}





/* Aniland-inspired desktop polish: wider canvas, header navigation, darker base. */


.header-nav {


  display: none;


}





@media (min-width: 821px) {


  html:not([data-theme="light"]) {


    --bg: #050608;


    --panel: #07090d;


    --surface: #0d1016;


    --surface-2: #11151c;


    --surface-soft: rgba(255, 255, 255, .025);


    --surface-hover: rgba(255, 255, 255, .07);


    --line: rgba(255, 255, 255, .075);


    --muted: rgba(255, 255, 255, .72);


    --text: #ffffff;


  }





  html:not([data-theme="light"]) body {


    background:


      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .035), transparent 30%),


      #050608 !important;


    color: #fff !important;


  }





  .site-shell,


  body.is-home .site-shell,


  body.is-detail .site-shell {


    width: 100% !important;


    max-width: none !important;


    min-height: 100vh !important;


    margin: 0 !important;


    display: grid !important;


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


    grid-template-rows: 72px 1fr !important;


    background: #050608 !important;


    border: 0 !important;


    box-shadow: none !important;


  }





  .topbar,


  body.is-detail .topbar {


    grid-column: 1 !important;


    height: 72px !important;


    min-height: 72px !important;


    display: grid !important;


    grid-template-columns: auto minmax(350px, 1fr) minmax(280px, 480px) auto !important;


    align-items: center !important;


    gap: clamp(20px, 2vw, 34px) !important;


    padding: 0 clamp(28px, 3.5vw, 54px) !important;


    background: rgba(9, 10, 15, .96) !important;


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


    box-shadow: none !important;


    backdrop-filter: blur(14px);


  }





  .sidebar {


    display: none !important;


  }





  .header-nav {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: clamp(12px, 1.3vw, 24px);


    min-width: 0;


  }





  .header-nav a {


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


    text-decoration: none;


    font-weight: 800;


    font-size: 15px;


    line-height: 1;


    padding: 10px 4px;


    border-radius: 6px;


    transition: color .12s ease, background .12s ease;


    white-space: nowrap;


  }





  .header-nav a:hover,


  .header-nav a.is-active {


    color: #fff;


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


  }





  .logo {


    color: #fff !important;


    filter: none !important;


    padding: 0 !important;


  }





  .logo-mark {


    filter: grayscale(1) brightness(2.2) contrast(1.1) !important;


    opacity: .96 !important;


  }





  .logo-hub {


    background: #fff !important;


    color: #050608 !important;


    box-shadow: none !important;


  }





  .top-search {


    width: 100% !important;


    max-width: 480px !important;


    justify-self: end !important;


    margin: 0 !important;


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


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


    border-radius: 10px !important;


    box-shadow: none !important;


  }





  .top-search:hover,


  .top-search:focus-within {


    background: rgba(255, 255, 255, .08) !important;


    border-color: rgba(255, 255, 255, .18) !important;


    box-shadow: none !important;


  }





  .top-search input {


    color: #fff !important;


  }





  .top-search input::placeholder {


    color: rgba(255, 255, 255, .58) !important;


  }





  .top-search button,


  .notification-button,


  .profile-button {


    color: #fff !important;


  }





  .notification-button,


  .profile-button {


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


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


    box-shadow: none !important;


  }





  .notification-button:hover,


  .profile-button:hover {


    background: #fff !important;


    color: #050608 !important;


    transform: none !important;


  }





  .home-page,


  .detail-page,


  .catalog-section,


  .library-page,


  .history-page,


  .settings-page {


    grid-column: 1 !important;


    max-width: none !important;


    width: 100% !important;


    padding-left: clamp(28px, 3.5vw, 54px) !important;


    padding-right: clamp(28px, 3.5vw, 54px) !important;


  }





  .home-page {


    padding-top: 18px !important;


    padding-bottom: 78px !important;


    background: transparent !important;


  }





  .continue-card {


    margin: 0 0 48px !important;


    padding: 0 !important;


    background: transparent !important;


    border: 0 !important;


    box-shadow: none !important;


  }





  .section-head,


  .page-heading {


    border: 0 !important;


    background: transparent !important;


    box-shadow: none !important;


    padding: 0 !important;


  }





  .section-head h2,


  .page-heading h1,


  .library-hero h1 {


    color: #fff !important;


    font-size: clamp(34px, 3.35vw, 58px) !important;


    letter-spacing: 0 !important;


    text-shadow: none !important;


  }





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


    min-height: clamp(420px, 45vw, 660px) !important;


    border: 0 !important;


    border-radius: 0 !important;


    padding: clamp(94px, 11vw, 154px) clamp(34px, 6vw, 94px) !important;


    background:


      linear-gradient(90deg, rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .52) 42%, rgba(5, 6, 8, .18) 72%, rgba(5, 6, 8, .55) 100%),


      linear-gradient(0deg, rgba(5, 6, 8, .6), rgba(5, 6, 8, .04) 45%, rgba(5, 6, 8, .7)),


      var(--hero-bg, none) center / cover no-repeat !important;


    box-shadow: none !important;


    overflow: hidden !important;


  }





  body.is-home .hero-carousel.watch-progress::after,


  body.is-home .hero-carousel__poster,


  body.is-home .hero-carousel__video-shell {


    display: none !important;


  }





  body.is-home .hero-carousel__copy {


    max-width: 650px !important;


    align-self: center !important;


    color: #fff !important;


    text-shadow: 0 10px 34px rgba(0, 0, 0, .6);


  }





  body.is-home .hero-carousel.watch-progress h3 {


    color: #fff !important;


    font-size: clamp(48px, 5.4vw, 86px) !important;


    line-height: .92 !important;


    letter-spacing: 0 !important;


    text-shadow: inherit !important;


  }





  body.is-home .hero-carousel__facts,


  body.is-home .hero-carousel__description {


    color: rgba(255, 255, 255, .84) !important;


  }





  body.is-home .hero-carousel__score {


    color: #fff !important;


  }





  body.is-home .hero-carousel .round-play,


  body.is-home .hero-carousel .hero-favorite,


  .primary-button,


  .secondary-button,


  .watch-button,


  .favorite-button,


  .continue-button,


  .clear-button {


    box-shadow: none !important;


    border-radius: 8px !important;


    transition: background .12s ease, color .12s ease, border-color .12s ease !important;


  }





  body.is-home .hero-carousel .round-play,


  .primary-button,


  .watch-button {


    background: #fff !important;


    color: #050608 !important;


    border-color: #fff !important;


  }





  body.is-home .hero-carousel .round-play:hover,


  .primary-button:hover,


  .watch-button:hover,


  .favorite-button:hover,


  .secondary-button:hover,


  .continue-button:hover,


  .clear-button:hover {


    background: rgba(255, 255, 255, .82) !important;


    color: #050608 !important;


    border-color: rgba(255, 255, 255, .82) !important;


    transform: none !important;


    box-shadow: none !important;


  }





  body.is-home .hero-carousel .hero-favorite,


  .secondary-button,


  .favorite-button,


  .continue-button,


  .clear-button {


    background: rgba(255, 255, 255, .065) !important;


    color: #fff !important;


    border-color: rgba(255, 255, 255, .13) !important;


  }





  .poster-section,


  .search-section,


  .catalog-section,


  .history-page,


  .settings-page,


  .library-page {


    background: transparent !important;


    border: 0 !important;


    box-shadow: none !important;


  }





  .poster-grid,


  .results,


  .library-grid,


  .catalog-grid {


    gap: clamp(16px, 1.5vw, 28px) !important;


  }





  .poster-grid,


  .catalog-grid {


    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;


  }





  .poster-card,


  .favorite-card,


  .history-card {


    border: 0 !important;


    border-radius: 10px !important;


    background: #090a0d !important;


    box-shadow: none !important;


    overflow: hidden !important;


  }





  .poster-card:hover,


  .favorite-card:hover,


  .history-card:hover {


    background: #10131a !important;


    transform: translateY(-2px) !important;


    box-shadow: none !important;


  }





  .poster-card::after {


    background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .92) 100%) !important;


  }





  .poster-card strong,


  .favorite-card strong,


  .history-card strong {


    color: #fff !important;


    text-shadow: 0 2px 14px rgba(0, 0, 0, .8) !important;


  }





  .poster-card small,


  .favorite-card small,


  .history-card small,


  .muted,


  small {


    color: rgba(255, 255, 255, .68) !important;


  }





  .poster-card .badge,


  .score-pill,


  .chips span {


    background: rgba(0, 0, 0, .58) !important;


    color: #fff !important;


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


    box-shadow: none !important;


  }





  .catalog-toolbar,


  .filter-row,


  .settings-card,


  .stat-card,


  .comments-layout,


  .comment-form,


  .comment-card {


    background: transparent !important;


    border-color: rgba(255, 255, 255, .07) !important;


    box-shadow: none !important;


  }





  select,


  input,


  textarea {


    background: rgba(255, 255, 255, .045) !important;


    color: #fff !important;


    border-color: rgba(255, 255, 255, .1) !important;


    box-shadow: none !important;


  }


}





/* Definitive desktop layout fixes after all broad redesign rules. */


@media (min-width: 821px) {


  body:not(.is-mobile) .site-shell,


  body:not(.is-mobile).is-home .site-shell,


  body:not(.is-mobile).is-library .site-shell,


  body:not(.is-mobile).is-detail .site-shell {


    display: grid !important;


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


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


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    overflow-x: hidden !important;


  }





  body:not(.is-mobile) .site-shell > aside.sidebar,


  body:not(.is-mobile) aside.sidebar,


  body:not(.is-mobile) .sidebar {


    display: none !important;


    visibility: hidden !important;


    width: 0 !important;


    min-width: 0 !important;


    max-width: 0 !important;


    opacity: 0 !important;


    pointer-events: none !important;


  }





  body:not(.is-mobile) .topbar {


    grid-column: 1 / -1 !important;


    grid-template-columns: auto minmax(390px, 1fr) minmax(330px, 640px) auto !important;


    position: sticky !important;


    top: 0 !important;


    z-index: 100 !important;


    width: 100% !important;


  }





  body:not(.is-mobile) .top-actions {


    position: static !important;


    inset: auto !important;


    transform: none !important;


    justify-self: end !important;


    margin: 0 !important;


  }





  body:not(.is-mobile) .home-page,


  body:not(.is-mobile) .detail-page,


  body:not(.is-mobile) .home-page.library-mode {


    grid-column: 1 / -1 !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page {


    padding: 0 0 84px !important;


  }





  body:not(.is-mobile).is-home .continue-card {


    margin: 0 0 clamp(46px, 5vw, 78px) !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-home .continue-card > .section-head,


  body:not(.is-mobile).is-home .continue-card > .section-head--compact {


    display: none !important;


  }





  body:not(.is-mobile).is-home .hero-carousel.watch-progress {


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


  }





  body:not(.is-mobile).is-home .home-page > .poster-section,


  body:not(.is-mobile).is-home .home-page > .search-section {


    width: 100% !important;


    max-width: none !important;


    margin: 0 0 clamp(52px, 5vw, 84px) !important;


    padding: 0 clamp(28px, 3.5vw, 54px) !important;


  }





  body:not(.is-mobile).is-home .poster-grid,


  body:not(.is-mobile).is-home #popularGrid,


  body:not(.is-mobile).is-home #recommendationsGrid,


  body:not(.is-mobile).is-home #ongoingGrid,


  body:not(.is-mobile).is-home #moviesGrid {


    display: grid !important;


    grid-auto-flow: column !important;


    grid-auto-columns: clamp(178px, 13.5vw, 238px) !important;


    grid-template-columns: none !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


    overflow-x: auto !important;


    overflow-y: hidden !important;


    scroll-snap-type: x mandatory !important;


    overscroll-behavior-inline: contain !important;


    width: 100% !important;


    max-width: none !important;


    padding: 0 0 18px !important;


  }





  body:not(.is-mobile).is-home .poster-grid .poster-card {


    width: auto !important;


    min-width: 0 !important;


    scroll-snap-align: start !important;


  }





  body:not(.is-mobile).is-library .home-page {


    padding: clamp(82px, 7vw, 128px) clamp(28px, 3.5vw, 54px) 90px !important;


  }





  body:not(.is-mobile).is-library .home-page > .catalog-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .library-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .settings-section:not([hidden]),


  body:not(.is-mobile).is-library .home-page > .search-section:not([hidden]) {


    display: block !important;


    width: 100% !important;


    max-width: none !important;


    margin: 0 !important;


    padding: 0 !important;


  }





  body:not(.is-mobile).is-library .catalog-toolbar {


    width: 100% !important;


    max-width: none !important;


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


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


    margin: 0 0 34px !important;


  }





  body:not(.is-mobile).is-library .catalog-grid,


  body:not(.is-mobile).is-library .library-grid,


  body:not(.is-mobile).is-library .results {


    width: 100% !important;


    max-width: none !important;


    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)) !important;


    gap: clamp(18px, 1.6vw, 30px) !important;


  }





  body:not(.is-mobile).is-library .history-list {


    width: 100% !important;


    max-width: none !important;


  }





  body:not(.is-mobile).is-detail .detail-page {


    padding: clamp(34px, 4vw, 64px) clamp(28px, 3.5vw, 54px) 90px !important;


  }


}








/* Absolute final watch override. Keep this at the end of the file. */


body.is-detail .detail-page {


  padding: clamp(28px, 4vw, 58px) clamp(24px, 4.6vw, 72px) 70px !important;


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


}


body.is-detail .anime-hero {


  order: -1 !important;


  display: grid !important;


  grid-template-columns: clamp(118px, 10vw, 172px) minmax(0, 1fr) !important;


  gap: clamp(20px, 2.4vw, 34px) !important;


  align-items: end !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  box-shadow: none !important;


}


body.is-detail .anime-poster {


  border-radius: 8px !important;


  background: #08090b !important;


  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;


}


body.is-detail .anime-info h1 {


  color: #f4f4f1 !important;


  font-size: clamp(40px, 5vw, 82px) !important;


  line-height: .96 !important;


  letter-spacing: 0 !important;


  text-shadow: none !important;


}


body.is-detail .anime-info .description {


  max-width: 860px !important;


  color: rgba(244,244,241,.68) !important;


  font-size: 16px !important;


  line-height: 1.55 !important;


}


@media (max-width: 720px) {


  body.is-detail .detail-page { padding: 18px 14px 48px !important; }


  body.is-detail .anime-hero { grid-template-columns: 88px minmax(0, 1fr) !important; }


  body.is-detail .anime-info h1 { font-size: 34px !important; }


}





/* Final detail page poster layout lock. Keeps the vertical poster out of text flow. */


/* Panel/search/profile polish: final override layer. */


.top-search,


.top-search:hover,


.top-search:focus-within {


  transform: none !important;


  box-shadow: none !important;


  cursor: text !important;


}





.top-search button {


  pointer-events: none !important;


}





.search-result-card,


.user-search-card {


  display: grid !important;


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


  align-items: end !important;


  min-height: 118px !important;


  padding: 18px !important;


  border: 0 !important;


  border-radius: 6px !important;


  background: #101114 !important;


  overflow: hidden !important;


}





.search-result-card img {


  position: absolute !important;


  inset: 0 !important;


  width: 100% !important;


  height: 100% !important;


  object-fit: cover !important;


  opacity: .78 !important;


  z-index: 0 !important;


}





.search-result-card::after {


  content: "" !important;


  position: absolute !important;


  inset: 0 !important;


  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.72)) !important;


  z-index: 1 !important;


  pointer-events: none !important;


}





.search-result-card > *:not(img) {


  grid-column: 1 / -1 !important;


  position: relative !important;


  z-index: 2 !important;


}





.search-result-title,


.user-search-card strong {


  color: #fff !important;


  font-size: 18px !important;


  line-height: 1.05 !important;


  text-shadow: 0 2px 14px rgba(0,0,0,.55) !important;


}





.search-result-meta,


.user-search-card span {


  color: rgba(255,255,255,.7) !important;


  font-size: 13px !important;


  font-weight: 800 !important;


}





.user-search-card {


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


  align-items: center !important;


  min-height: 86px !important;


}





.user-search-card__avatar {


  width: 58px !important;


  height: 58px !important;


  border-radius: 50% !important;


  object-fit: cover !important;


}





.premium-profile-card .profile-upload-input {


  min-height: 44px;


  padding: 10px;


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


  border: 1px dashed rgba(255,255,255,.2);


  border-radius: 8px;


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


}





@media (max-width: 760px) {


  .search-result-card {


    grid-template-columns: 1fr !important;


  }


}








/* Migrated from index.html inline style blocks during flat cleanup. */





.logo {


        gap: 0 !important;


        column-gap: 0 !important;


      }





      .logo-mark {


        margin-right: 8px !important;


      }





      .logo-word {


        display: inline !important;


        margin: 0 !important;


        padding: 0 !important;


        border: 0 !important;


        border-radius: 0 !important;


        background: transparent !important;


        color: #fff !important;


        box-shadow: none !important;


        filter: none !important;


      }





      .logo:hover .logo-word,


      .logo:focus-visible .logo-word {


        color: #ff9367 !important;


        background: transparent !important;


        box-shadow: none !important;


        filter: none !important;


      }





      .poster-card .card-heart,


      .catalog-grid .card-heart,


      .poster-grid .card-heart,


      .results .card-heart,


      .card-heart {


        width: 36px !important;


        height: 36px !important;


        display: grid !important;


        place-items: center !important;


        border: 0 !important;


        border-radius: 999px !important;


        background: #000 !important;


        opacity: 1 !important;


        color: #fff !important;


        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


        text-shadow: none !important;


        transform: none !important;


        backdrop-filter: none !important;


        -webkit-backdrop-filter: none !important;


      }





      .poster-card .card-heart:hover,


      .catalog-grid .card-heart:hover,


      .poster-grid .card-heart:hover,


      .results .card-heart:hover,


      .card-heart:hover {


        background: #000 !important;


        opacity: 1 !important;


        color: #ff4058 !important;


        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


        transform: none !important;


      }





      .poster-card .card-heart.is-active,


      .poster-card .card-heart.is-active:hover,


      .catalog-grid .card-heart.is-active,


      .catalog-grid .card-heart.is-active:hover,


      .poster-grid .card-heart.is-active,


      .poster-grid .card-heart.is-active:hover,


      .results .card-heart.is-active,


      .results .card-heart.is-active:hover,


      .card-heart.is-active,


      .card-heart.is-active:hover {


        background: #000 !important;


        opacity: 1 !important;


        color: #ff4058 !important;


        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


        transform: none !important;


      }





      body.is-home .poster-grid,


      body.is-home #popularGrid,


      body.is-home #recommendationsGrid,


      body.is-home #ongoingGrid,


      body.is-home #moviesGrid {


        overflow-x: auto !important;


        overflow-y: hidden !important;


        scroll-snap-type: none !important;


        scroll-behavior: auto !important;


        scrollbar-width: none !important;


        scrollbar-color: transparent transparent !important;


        -ms-overflow-style: none !important;


      }





      body.is-home .poster-grid::-webkit-scrollbar,


      body.is-home #popularGrid::-webkit-scrollbar,


      body.is-home #recommendationsGrid::-webkit-scrollbar,


      body.is-home #ongoingGrid::-webkit-scrollbar,


      body.is-home #moviesGrid::-webkit-scrollbar {


        width: 0 !important;


        height: 0 !important;


        display: none !important;


      }





      body.is-home .poster-grid .poster-card,


      body.is-home #popularGrid .poster-card,


      body.is-home #recommendationsGrid .poster-card,


      body.is-home #ongoingGrid .poster-card,


      body.is-home #moviesGrid .poster-card {


        scroll-snap-align: none !important;


        scroll-snap-stop: normal !important;


      }





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


        background: transparent !important;


        border: 0 !important;


        box-shadow: none !important;


      }





      body.is-library #historyPage .page-heading {


        margin-bottom: 22px !important;


      }





      body.is-library #historyPage .page-heading h1 {


        color: #fff !important;


        font-size: clamp(28px, 2.3vw, 42px) !important;


        line-height: 1.05 !important;


        letter-spacing: 0 !important;


      }





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


        display: grid !important;


        grid-template-columns: repeat(auto-fill, minmax(330px, 420px)) !important;


        gap: 28px 24px !important;


        align-items: start !important;


        justify-content: start !important;


        width: 100% !important;


        max-width: none !important;


        margin: 0 !important;


      }





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


        display: grid !important;


        gap: 12px !important;


        width: 100% !important;


        min-height: 0 !important;


        aspect-ratio: auto !important;


        padding: 0 !important;


        border: 0 !important;


        border-radius: 0 !important;


        background: transparent !important;


        box-shadow: none !important;


        overflow: visible !important;


        cursor: pointer !important;


        transform: none !important;


      }





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


        background: transparent !important;


        box-shadow: none !important;


        transform: none !important;


      }





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


        position: relative !important;


        width: 100% !important;


        height: auto !important;


        aspect-ratio: 16 / 9 !important;


        border-radius: 8px !important;


        overflow: hidden !important;


        background: #08090c !important;


        box-shadow: none !important;


      }





      body.is-library #historyGrid .history-card__poster img,


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


        width: 100% !important;


        height: 100% !important;


        object-fit: cover !important;


      }





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


        content: "" !important;


        position: absolute !important;


        left: 10px !important;


        right: 10px !important;


        bottom: 10px !important;


        z-index: 2 !important;


        height: 3px !important;


        border-radius: 999px !important;


        background: linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .32) var(--history-progress, 0%) 100%) !important;


      }





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


        content: attr(data-episode) !important;


        position: absolute !important;


        right: 10px !important;


        bottom: 18px !important;


        z-index: 3 !important;


        color: #fff !important;


        font-size: 13px !important;


        font-weight: 900 !important;


        line-height: 1 !important;


        text-shadow: 0 1px 4px rgba(0, 0, 0, .75) !important;


      }





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


        position: static !important;


        display: grid !important;


        gap: 5px !important;


        min-width: 0 !important;


        padding: 0 !important;


      }





      body.is-library #historyGrid .history-card__body strong {


        grid-column: auto !important;


        grid-row: auto !important;


        color: #fff !important;


        font-size: 18px !important;


        line-height: 1.18 !important;


        font-weight: 900 !important;


      }





      body.is-library #historyGrid .history-card__body p,


      body.is-library #historyGrid .history-card__body > span,


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


        display: none !important;


      }





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


        display: grid !important;


        gap: 0 !important;


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


        min-height: 0 !important;


        padding: 0 !important;


        border: 0 !important;


        border-radius: 8px !important;


        background: #000 !important;


        box-shadow: none !important;


        overflow: hidden !important;


        cursor: pointer !important;


        transform: none !important;


        transition: transform .14s ease, filter .14s ease !important;


      }





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


        background: #000 !important;


        box-shadow: none !important;


        transform: translateY(-3px) !important;


        filter: brightness(1.06) !important;


      }





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


        position: relative !important;


        width: 100% !important;


        height: auto !important;


        aspect-ratio: 16 / 9 !important;


        border-radius: 8px 8px 0 0 !important;


        overflow: hidden !important;


        background: #08090c !important;


      }





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


      body.is-library #historyGrid .continue-history-cover .poster-fallback {


        width: 100% !important;


        height: 100% !important;


        object-fit: cover !important;


        transition: transform .16s ease, filter .16s ease !important;


      }





      body.is-library #historyGrid .continue-history-card:hover .continue-history-cover img {


        transform: scale(1.025) !important;


        filter: saturate(1.04) brightness(.9) !important;


      }





      body.is-library #historyGrid .continue-history-cover::before {


        content: none !important;


      }





      body.is-library #historyGrid .continue-history-cover::after {


        content: none !important;


      }





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


        position: relative !important;


        display: grid !important;


        align-content: start !important;


        gap: 0 !important;


        min-width: 0 !important;


        min-height: 58px !important;


        padding: 12px 12px 20px !important;


        background: #000 !important;


      }





      body.is-library #historyGrid .continue-history-card .history-card__body::before {


        content: "" !important;


        position: absolute !important;


        left: 12px !important;


        right: 12px !important;


        bottom: 10px !important;


        display: block !important;


        width: auto !important;


        height: 3px !important;


        border-radius: 999px !important;


        background: linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .34) var(--history-progress, 0%) 100%) !important;


      }





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


        color: #fff !important;


        font-size: 18px !important;


        line-height: 1.18 !important;


        font-weight: 900 !important;


        padding: 0 !important;


        text-shadow: none !important;


      }





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


      body.is-library #historyGrid .continue-history-card .history-card__body > span,


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


        display: none !important;


      }





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


        position: relative !important;


        display: grid !important;


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


        align-items: start !important;


        gap: 10px !important;


        min-height: 62px !important;


        padding: 12px 12px 22px !important;


        background: #000 !important;


        color: #fff !important;


      }





      body.is-library #historyGrid .continue-history-footer strong {


        min-width: 0 !important;


        color: #fff !important;


        font-size: 18px !important;


        line-height: 1.18 !important;


        font-weight: 900 !important;


      }





      body.is-library #historyGrid .continue-history-footer span {


        color: rgba(255, 255, 255, .84) !important;


        font-size: 13px !important;


        line-height: 1.2 !important;


        font-weight: 900 !important;


        white-space: nowrap !important;


      }





      body.is-library #historyGrid .continue-history-footer::after {


        content: "" !important;


        position: absolute !important;


        left: 12px !important;


        right: 12px !important;


        bottom: 10px !important;


        height: 3px !important;


        border-radius: 999px !important;


        background: linear-gradient(90deg, #fff 0 var(--history-progress, 0%), rgba(255, 255, 255, .34) var(--history-progress, 0%) 100%) !important;


      }





      @media (max-width: 760px) {


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


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


          gap: 22px !important;


        }





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


          width: 100% !important;


        }


      }





      body.is-home .home-page {


        padding-top: 0 !important;


      }





      body.is-home #continueCard.continue-card {


        width: 100% !important;


        margin: 0 0 clamp(44px, 4vw, 70px) !important;


        padding: 0 !important;


        background: transparent !important;


        border: 0 !important;


        box-shadow: none !important;


      }





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


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


        max-width: 1220px !important;


        min-height: 0 !important;


        height: auto !important;


        aspect-ratio: 3 / 1 !important;


        margin: 0 auto !important;


        padding: clamp(22px, 2.4vw, 40px) clamp(34px, 4vw, 72px) !important;


        overflow: hidden !important;


        border: 0 !important;


        border-radius: 8px !important;


        background:


          linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .56) 36%, rgba(0, 0, 0, .16) 72%, rgba(0, 0, 0, .38) 100%),


          linear-gradient(180deg, rgba(0, 0, 0, .06) 36%, rgba(0, 0, 0, .82) 100%),


          var(--hero-bg, none) center / cover no-repeat,


          var(--bg-base) !important;


        box-shadow: none !important;


        animation: none !important;


      }





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


        content: "" !important;


        position: absolute !important;


        inset: 0 !important;


        z-index: 0 !important;


        background: linear-gradient(90deg, var(--bg-base) 0%, rgba(5, 6, 7, .02) 24%, rgba(5, 6, 7, .02) 76%, var(--bg-base) 100%) !important;


        pointer-events: none !important;


      }





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


        position: relative !important;


        z-index: 1 !important;


      }





      .home-page > .continue-card + .poster-section {


        margin-top: 0 !important;


      }





      @media (max-width: 760px) {


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


          aspect-ratio: auto !important;


          min-height: 430px !important;


          padding: 28px 20px !important;


          background:


            linear-gradient(90deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .32)),


            linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .88)),


            var(--hero-bg, none) center / cover no-repeat,


            var(--bg-base) !important;


        }


      }





      body.is-library #historyGrid .continue-history-cover::before {


        content: "" !important;


        position: absolute !important;


        inset: auto 0 0 0 !important;


        z-index: 2 !important;


        height: 54% !important;


        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86)) !important;


        pointer-events: none !important;


      }





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


        position: absolute !important;


        left: 12px !important;


        right: 12px !important;


        bottom: 12px !important;


        z-index: 3 !important;


        color: #fff !important;


        font-size: 18px !important;


        line-height: 1.12 !important;


        font-weight: 900 !important;


        text-shadow: 0 2px 8px rgba(0, 0, 0, .75) !important;


      }





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


        min-height: 54px !important;


        padding: 12px 12px 20px !important;


      }





      body.is-library #historyGrid .continue-history-footer strong {


        font-size: 16px !important;


      }





      body.is-library #historyGrid .continue-history-footer span {


        font-size: 14px !important;


      }





      .search-modal__panel {


        background: rgba(5, 6, 8, .94) !important;


        border: 0 !important;


        box-shadow: none !important;


      }





      #searchModal .search-modal__head {


        justify-content: flex-end !important;


        margin-bottom: 18px !important;


      }





      #searchModal .search-modal__form {


        display: block !important;


        max-width: 520px !important;


        margin: 0 0 24px !important;


      }





      #searchModal .search-modal__form button {


        display: none !important;


      }





      #searchModalResults.modal-results {


        display: grid !important;


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


        gap: 14px 18px !important;


      }





      .search-result-card {


        position: relative !important;


        display: block !important;


        aspect-ratio: 3 / 1 !important;


        min-height: 0 !important;


        padding: 0 !important;


        border: 0 !important;


        border-radius: 8px !important;


        overflow: hidden !important;


        background: #07080b !important;


        cursor: pointer !important;


        transition: transform .14s ease, filter .14s ease !important;


      }





      .search-result-card:hover {


        transform: translateY(-2px) !important;


        filter: brightness(1.08) !important;


      }





      .search-result-card img,


      .search-result-card .poster-fallback {


        width: 100% !important;


        height: 100% !important;


        object-fit: cover !important;


        border-radius: 0 !important;


        background: #090a0d !important;


      }





      .search-result-card::after {


        content: "" !important;


        position: absolute !important;


        inset: auto 0 0 0 !important;


        z-index: 1 !important;


        height: 70% !important;


        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .78) 58%, rgba(0, 0, 0, .95) 100%) !important;


        pointer-events: none !important;


      }





      .search-result-title {


        position: absolute !important;


        left: 14px !important;


        right: 14px !important;


        bottom: 32px !important;


        z-index: 2 !important;


        color: #fff !important;


        font-size: 18px !important;


        line-height: 1.12 !important;


        font-weight: 900 !important;


        text-shadow: 0 2px 12px rgba(0, 0, 0, .9) !important;


      }





      .search-result-meta {


        position: absolute !important;


        left: 14px !important;


        right: 14px !important;


        bottom: 12px !important;


        z-index: 2 !important;


        color: rgba(255, 255, 255, .62) !important;


        font-size: 13px !important;


        font-weight: 800 !important;


      }





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


        grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)) !important;


        gap: 30px 26px !important;


      }





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


        width: 100% !important;


        max-width: 640px !important;


      }





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


        aspect-ratio: 3 / 1 !important;


      }





      body.is-library #historyGrid .continue-history-cover img {


        object-fit: cover !important;


      }





      body.is-library #historyGrid .continue-history-cover::before {


        height: 72% !important;


        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .96) 100%) !important;


      }





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


        text-shadow: 0 2px 14px rgba(0, 0, 0, .95) !important;


      }





      body.is-library #historyGrid .continue-history-footer strong,


      body.is-library #historyGrid .continue-history-footer span {


        color: rgba(255, 255, 255, .62) !important;


        font-size: 13px !important;


        line-height: 1.2 !important;


        font-weight: 800 !important;


      }





      body.is-detail .bookmark-button {


        background: rgba(255, 255, 255, .08) !important;


        color: #fff !important;


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


        box-shadow: none !important;


        transition: background .14s ease, color .14s ease, transform .14s ease !important;


      }





      body.is-detail .bookmark-button:hover {


        background: rgba(255, 255, 255, .14) !important;


        color: #fff !important;


        transform: translateY(-1px) !important;


      }





      body.is-detail .bookmark-button.is-active {


        background: rgba(255, 255, 255, .08) !important;


        color: #fff !important;


      }





      body.is-detail .bookmark-button.is-active .bookmark-heart {


        color: #ff4058 !important;


      }





      @media (max-width: 760px) {


        #searchModalResults.modal-results,


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


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


        }





        .search-result-card img,


        .search-result-card .poster-fallback {


          width: 100% !important;


        }


      }


      /* Final page-specific fixes: keep these last inside this style tag. */


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


        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;


        gap: 28px 24px !important;


      }





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


        width: 100% !important;


        max-width: none !important;


        background: #000 !important;


        border-radius: 8px !important;


        overflow: hidden !important;


      }





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


        aspect-ratio: 3 / 1 !important;


        border-radius: 8px 8px 0 0 !important;


      }





      body.is-library #historyGrid .continue-history-cover::before {


        content: "" !important;


        position: absolute !important;


        inset: auto 0 0 0 !important;


        z-index: 2 !important;


        height: 78% !important;


        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .72) 54%, rgba(0, 0, 0, .98) 100%) !important;


        pointer-events: none !important;


      }





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


        left: 14px !important;


        right: 14px !important;


        bottom: 14px !important;


        z-index: 3 !important;


        color: #fff !important;


        font-size: 17px !important;


        line-height: 1.12 !important;


        font-weight: 900 !important;


        text-shadow: 0 2px 14px rgba(0, 0, 0, .98) !important;


      }





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


        display: grid !important;


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


        align-items: center !important;


        gap: 10px !important;


        min-height: 40px !important;


        padding: 9px 14px 19px !important;


        background: #000 !important;


        color: rgba(255, 255, 255, .62) !important;


      }





      body.is-library #historyGrid .continue-history-footer strong,


      body.is-library #historyGrid .continue-history-footer span,


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


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


        color: rgba(255, 255, 255, .62) !important;


        font-size: 12px !important;


        line-height: 1.15 !important;


        font-weight: 800 !important;


        white-space: nowrap !important;


        overflow: hidden !important;


        text-overflow: ellipsis !important;


      }





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


        justify-self: end !important;


      }





      body.is-library #historyGrid .continue-history-footer::after {


        left: 14px !important;


        right: 14px !important;


        bottom: 9px !important;


        height: 3px !important;


      }





      #searchModal .search-modal__panel {


        width: min(1080px, calc(100vw - 120px)) !important;


        max-height: calc(100vh - 170px) !important;


        overflow-y: auto !important;


        padding: 48px 0 28px !important;


      }





      #searchModalResults.modal-results {


        display: grid !important;


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


        gap: 16px !important;


      }





      #searchModalResults .search-result-card {


        position: relative !important;


        display: block !important;


        aspect-ratio: 3 / 1 !important;


        min-height: 0 !important;


        padding: 0 !important;


        border: 0 !important;


        border-radius: 8px !important;


        overflow: hidden !important;


        background: #07080b !important;


      }





      #searchModalResults .search-result-card img,


      #searchModalResults .search-result-card .poster-fallback {


        width: 100% !important;


        height: 100% !important;


        object-fit: cover !important;


        border-radius: 0 !important;


      }





      #searchModalResults .search-result-card::after {


        content: "" !important;


        position: absolute !important;


        inset: auto 0 0 0 !important;


        z-index: 1 !important;


        height: 74% !important;


        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .72) 56%, rgba(0, 0, 0, .96) 100%) !important;


      }





      #searchModalResults .search-result-title {


        position: absolute !important;


        left: 14px !important;


        right: 14px !important;


        bottom: 31px !important;


        z-index: 2 !important;


        color: #fff !important;


        font-size: 17px !important;


        line-height: 1.12 !important;


        font-weight: 900 !important;


        text-shadow: 0 2px 14px rgba(0, 0, 0, .95) !important;


      }





      #searchModalResults .search-result-meta {


        position: absolute !important;


        left: 14px !important;


        right: 14px !important;


        bottom: 12px !important;


        z-index: 2 !important;


        color: rgba(255, 255, 255, .62) !important;


        font-size: 12px !important;


        line-height: 1.15 !important;


        font-weight: 800 !important;


      }





      @media (max-width: 900px) {


        #searchModal .search-modal__panel {


          width: min(620px, calc(100vw - 32px)) !important;


        }





        #searchModalResults.modal-results,


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


          grid-template-columns: 1fr !important;


        }


      }





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


        padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 72px) 86px !important;


        background: #050608 !important;


      }





      body.is-detail #detailPage:not([hidden]) .share-button {


        display: none !important;


      }





      /* Detail page layout: invisible, stable container. */





      /* Rebuilt anime description page. Keep the visual style, remove old hero layout conflicts. */


      /* Final inline lock: vertical poster belongs to the banner block, not the description text. */


      /* Absolute last detail layout override. */


.top-search,


      .top-search:hover,


      .top-search:focus-within,


      html:not([data-theme="light"]) .top-search:focus-within {


        cursor: text !important;


        transform: none !important;


        background: #15161b !important;


        border-color: rgba(255,255,255,.10) !important;


        box-shadow: none !important;


      }





      .top-search button,


      .top-search:hover button,


      .top-search:focus-within button {


        pointer-events: none !important;


        transform: none !important;


        background: transparent !important;


        color: rgba(255,255,255,.72) !important;


        box-shadow: none !important;


      }





      #searchModalResults.modal-results {


        display: grid !important;


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


        gap: 10px 14px !important;


        max-width: 1120px !important;


      }





      #searchModalResults .search-result-card,


      #searchModalResults .user-search-card {


        position: relative !important;


        display: grid !important;


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


        grid-template-rows: 1fr auto !important;


        min-height: 116px !important;


        padding: 0 !important;


        overflow: hidden !important;


        border: 0 !important;


        border-radius: 7px !important;


        background: #101114 !important;


        box-shadow: none !important;


        cursor: pointer !important;


      }





      #searchModalResults .search-result-card::after,


      #searchModalResults .user-search-card::after {


        content: "" !important;


        position: absolute !important;


        inset: 0 !important;


        background: linear-gradient(90deg, rgba(0,0,0,0) 24%, rgba(0,0,0,.28) 54%, rgba(0,0,0,.74) 100%) !important;


        pointer-events: none !important;


      }





      #searchModalResults .search-result-card:hover,


      #searchModalResults .user-search-card:hover {


        background: #15161a !important;


        transform: translateY(-1px) !important;


      }





      #searchModalResults .search-result-card img,


      #searchModalResults .search-result-card .poster-fallback,


      #searchModalResults .user-search-card img {


        grid-row: 1 / span 2 !important;


        width: 100% !important;


        height: 118px !important;


        object-fit: cover !important;


        border-radius: 0 !important;


      }





      #searchModalResults .search-result-title,


      #searchModalResults .user-search-title {


        position: relative !important;


        z-index: 1 !important;


        align-self: end !important;


        padding: 0 18px !important;


        color: #fff !important;


        font-size: 17px !important;


        line-height: 1.15 !important;


      }





      #searchModalResults .search-result-meta,


      #searchModalResults .user-search-meta {


        position: relative !important;


        z-index: 1 !important;


        padding: 5px 18px 16px !important;


        color: rgba(255,255,255,.62) !important;


        font-size: 12px !important;


        font-weight: 800 !important;


      }





      .premium-profile-card .profile-upload-input {


        width: 100% !important;


        padding: 12px !important;


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


        border-radius: 8px !important;


        background: #15161b !important;


        color: rgba(255,255,255,.78) !important;


      }





      @media (max-width: 760px) {


        #searchModalResults.modal-results {


          grid-template-columns: 1fr !important;


        }


        #searchModalResults .search-result-card,


        #searchModalResults .user-search-card {


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


        }


      }








/* Merged from design-overrides.css during flat cleanup. */


/* Final design overrides for the current frontend pass. */





.logo {


  gap: 0 !important;


  column-gap: 0 !important;


}





.logo-mark {


  margin-right: 8px !important;


}





.logo-word {


  display: inline !important;


  margin: 0 !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  color: #fff !important;


  box-shadow: none !important;


  filter: none !important;


}





.logo-anime {


  margin-right: 0 !important;


  color: #fff !important;


}





.logo-hub,


body.is-detail .logo-hub,


body:not(.is-mobile) .logo-hub,


body:not(.is-mobile) .brand .logo-hub,


.logo:hover .logo-hub,


.logo:focus-visible .logo-hub {


  margin-left: 0 !important;


  padding: 0 !important;


  border: 0 !important;


  border-radius: 0 !important;


  background: transparent !important;


  color: #fff !important;


  box-shadow: none !important;


  filter: none !important;


}





.logo:hover .logo-anime,


.logo:hover .logo-hub,


.logo:hover .logo-word,


.logo:focus-visible .logo-anime,


.logo:focus-visible .logo-hub,


.logo:focus-visible .logo-word {


  color: #ff9367 !important;


  background: transparent !important;


  box-shadow: none !important;


  filter: none !important;


}





.poster-card .card-heart,


.catalog-grid .card-heart,


.poster-grid .card-heart,


.results .card-heart,


.card-heart {


  width: 36px !important;


  height: 36px !important;


  display: grid !important;


  place-items: center !important;


  border: 0 !important;


  border-radius: 999px !important;


  background: #000 !important;


  opacity: 1 !important;


  color: #fff !important;


  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


  text-shadow: none !important;


  backdrop-filter: none !important;


  -webkit-backdrop-filter: none !important;


}





.poster-card .card-heart:hover,


.catalog-grid .card-heart:hover,


.poster-grid .card-heart:hover,


.results .card-heart:hover,


.card-heart:hover {


  border: 0 !important;


  background: #000 !important;


  opacity: 1 !important;


  color: #ff4058 !important;


  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


  text-shadow: none !important;


  transform: none !important;


  backdrop-filter: none !important;


  -webkit-backdrop-filter: none !important;


}





.poster-card .card-heart.is-active,


.poster-card .card-heart.is-active:hover,


.catalog-grid .card-heart.is-active,


.catalog-grid .card-heart.is-active:hover,


.poster-grid .card-heart.is-active,


.poster-grid .card-heart.is-active:hover,


.results .card-heart.is-active,


.results .card-heart.is-active:hover,


.card-heart.is-active,


.card-heart.is-active:hover {


  border: 0 !important;


  background: #000 !important;


  opacity: 1 !important;


  color: #ff4058 !important;


  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;


  text-shadow: none !important;


  transform: none !important;


  backdrop-filter: none !important;


  -webkit-backdrop-filter: none !important;


}





/* Watch side panel: plain controls, not an episode catalogue. */





#detailPage:not([hidden]) .anime-hero.has-hero-banner,


body.is-detail .anime-hero.has-hero-banner {


  position: relative !important;


  display: grid !important;


  grid-template-columns: clamp(116px, 10vw, 172px) minmax(0, 1fr) !important;


  align-items: end !important;


  gap: clamp(18px, 2.2vw, 34px) !important;


  width: 100% !important;


  aspect-ratio: var(--detail-hero-ratio, 16 / 5) !important;


  min-height: clamp(300px, 24vw, 500px) !important;


  max-height: min(560px, 42vw) !important;


  margin-top: clamp(34px, 4vw, 76px) !important;


  padding: clamp(22px, 3vw, 44px) !important;


  overflow: hidden !important;


  border: 0 !important;


  border-radius: 8px !important;


  background:


    linear-gradient(90deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .52) 42%, rgba(0, 0, 0, .18) 100%),


    linear-gradient(0deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .34) 44%, rgba(0, 0, 0, .12) 100%),


    var(--detail-hero-bg) center / cover no-repeat !important;


  box-shadow: none !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner::before,


body.is-detail .anime-hero.has-hero-banner::before {


  content: "" !important;


  position: absolute !important;


  inset: 0 !important;


  z-index: 0 !important;


  background: linear-gradient(90deg, var(--bg-base) 0%, rgba(5, 6, 7, .18) 30%, rgba(5, 6, 7, .06) 70%, var(--bg-base) 100%) !important;


  pointer-events: none !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner > *,


body.is-detail .anime-hero.has-hero-banner > * {


  position: relative !important;


  z-index: 1 !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner .anime-poster,


body.is-detail .anime-hero.has-hero-banner .anime-poster {


  width: 100% !important;


  max-width: 172px !important;


  aspect-ratio: 2 / 3 !important;


  border-radius: 8px !important;


  box-shadow: 0 18px 46px rgba(0, 0, 0, .5) !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner .anime-info,


body.is-detail .anime-hero.has-hero-banner .anime-info {


  max-width: 920px !important;


  padding: 0 !important;


  background: transparent !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner .title-line h1,


body.is-detail .anime-hero.has-hero-banner .title-line h1 {


  max-width: min(900px, 78vw) !important;


  color: #fff !important;


  text-shadow: 0 2px 18px rgba(0, 0, 0, .65) !important;


}





#detailPage:not([hidden]) .anime-hero.has-hero-banner .description,


body.is-detail .anime-hero.has-hero-banner .description,


#detailPage:not([hidden]) .anime-hero.has-hero-banner .subtitle,


body.is-detail .anime-hero.has-hero-banner .subtitle {


  max-width: 820px !important;


  color: rgba(255, 255, 255, .88) !important;


  text-shadow: 0 2px 14px rgba(0, 0, 0, .72) !important;


}





@media (max-width: 760px) {


  #detailPage:not([hidden]) .anime-hero.has-hero-banner,


  body.is-detail .anime-hero.has-hero-banner {


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


    aspect-ratio: auto !important;


    min-height: 360px !important;


    max-height: none !important;


    padding: 18px !important;


    background:


      linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .42)),


      linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .1)),


      var(--detail-hero-bg) center / cover no-repeat !important;


  }


}





body.is-home #continueCard.continue-card {


  width: 100% !important;


  margin: 0 0 clamp(48px, 5vw, 82px) !important;


  background: transparent !important;


  border: 0 !important;


  box-shadow: none !important;


}





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


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


  min-height: 0 !important;


  height: auto !important;


  aspect-ratio: var(--home-hero-ratio, 1440 / 658) !important;


  max-height: none !important;


  margin: 0 auto !important;


  display: grid !important;


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


  align-items: end !important;


  padding: clamp(34px, 4vw, 58px) clamp(42px, 6vw, 96px) !important;


  overflow: hidden !important;


  border: 0 !important;


  border-radius: 0 !important;


  background:


    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .58) 36%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .44) 100%),


    linear-gradient(180deg, rgba(0, 0, 0, .05) 42%, rgba(0, 0, 0, .86) 100%),


    var(--hero-bg, none) center / contain no-repeat,


    #060708 !important;


  box-shadow: none !important;


  animation: none !important;


}





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


  content: "" !important;


  position: absolute !important;


  inset: 0 !important;


  z-index: 0 !important;


  background: linear-gradient(90deg, var(--bg-base) 0%, rgba(5, 6, 7, .04) 25%, rgba(5, 6, 7, .04) 75%, var(--bg-base) 100%) !important;


  pointer-events: none !important;


}





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


  position: relative !important;


  z-index: 1 !important;


}





@media (max-width: 760px) {


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


    aspect-ratio: auto !important;


    min-height: 430px !important;


    padding: 28px 20px !important;


    background:


      linear-gradient(90deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .32)),


      linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .88)),


      var(--hero-bg, none) center / cover no-repeat,


      #060708 !important;


  }


}





/* Migrated remaining watch style blocks from index.html. */





/* Empty profile page: keep only the shared header and background. */


body.is-library #settingsPage.settings-section:not([hidden]) {


  display: none !important;


}





/* Anime description page: banner, detached poster and episode arcs. */


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


  width: 100% !important;


  max-width: none !important;


  padding: 0 0 88px !important;


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


}





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


  display: none !important;


}





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


  display: block !important;


  width: min(calc(100% - clamp(32px, 8vw, 176px)), 1760px) !important;


  max-width: 1760px !important;


  margin: 0 auto !important;


  padding: 0 !important;


  background: transparent !important;


  border: 0 !important;


  box-shadow: none !important;


}





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


  display: block !important;


  width: 100% !important;


  height: clamp(150px, 14vw, 230px) !important;


  min-height: 0 !important;


  max-height: 230px !important;


  aspect-ratio: auto !important;


  margin: 0 0 clamp(34px, 4vw, 54px) !important;


  overflow: hidden !important;


  border: 0 !important;


  border-radius: 0 0 10px 10px !important;


  background: #111317 !important;


  box-shadow: none !important;


}





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


  display: none !important;


}





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


  display: block !important;


  width: 100% !important;


  height: 100% !important;


  min-width: 100% !important;


  object-fit: cover !important;


  object-position: center !important;


}





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


  display: grid !important;


  grid-template-columns: clamp(190px, 17vw, 252px) minmax(0, 1fr) !important;


  align-items: start !important;


  gap: clamp(32px, 4vw, 58px) !important;


  width: 100% !important;


  margin: 0 !important;


  padding: 0 !important;


}





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


  position: static !important;


  display: block !important;


  width: 100% !important;


  max-width: none !important;


  height: auto !important;


  margin: 0 !important;


}





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


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


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


  display: block !important;


  width: 100% !important;


  max-width: none !important;


  height: auto !important;


  min-height: 0 !important;


  aspect-ratio: 2 / 3 !important;


  object-fit: cover !important;


  border-radius: 9px !important;


}





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


  overflow: hidden !important;


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


  background: #121317 !important;


  box-shadow: none !important;


}





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


  display: flex !important;


  flex-direction: column !important;


  align-items: flex-start !important;


  width: 100% !important;


  max-width: none !important;


  min-width: 0 !important;


  padding: 6px 0 0 !important;


  background: transparent !important;


  text-align: left !important;


}





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


  display: block !important;


  width: 100% !important;


}





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


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


  max-width: 100% !important;


  margin: 0 !important;


  color: #f7f7f8 !important;


  font-size: clamp(38px, 4vw, 64px) !important;


  font-weight: 950 !important;


  line-height: .98 !important;


  letter-spacing: -.045em !important;


  text-align: left !important;


  text-shadow: none !important;


}





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


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


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


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


  display: none !important;


}





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


  margin: 7px 0 0 !important;


  color: rgba(255, 255, 255, .58) !important;


  font-size: 12px !important;


  font-weight: 700 !important;


  line-height: 1.3 !important;


  text-align: left !important;


  text-shadow: none !important;


}





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


  display: flex !important;


  flex-wrap: wrap !important;


  gap: 8px !important;


  width: 100% !important;


  margin: 24px 0 25px !important;


  overflow: visible !important;


  background: transparent !important;


}





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


  display: inline-flex !important;


  align-items: center !important;


  justify-content: center !important;


  width: auto !important;


  min-width: 0 !important;


  min-height: 32px !important;


  height: 32px !important;


  padding: 0 12px !important;


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


  border-radius: 999px !important;


  background: #15171b !important;


  color: rgba(255, 255, 255, .82) !important;


  font-size: 11px !important;


  font-weight: 850 !important;


  line-height: 1 !important;


}





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


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


  display: block !important;


  width: 100% !important;


  max-width: none !important;


  margin: 0 !important;


  overflow: visible !important;


  color: rgba(255, 255, 255, .73) !important;


  font-size: clamp(14px, 1.2vw, 17px) !important;


  font-weight: 650 !important;


  line-height: 1.62 !important;


  text-align: left !important;


  text-shadow: none !important;


  -webkit-line-clamp: unset !important;


}





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


  display: flex !important;


  flex-direction: row !important;


  flex-wrap: wrap !important;


  gap: 12px !important;


  width: auto !important;


  margin: 25px 0 0 !important;


}





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


  width: auto !important;


  min-width: 188px !important;


  min-height: 52px !important;


  height: 52px !important;


  margin: 0 !important;


  padding: 0 24px !important;


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


  border-radius: 7px !important;


  background: #121419 !important;


  color: #fff !important;


  font-size: 13px !important;


  font-weight: 900 !important;


  line-height: 1 !important;


  text-transform: none !important;


  box-shadow: none !important;


}





body.is-detail:not(.is-watch) #detailPage .poster-actions button:hover,


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


  border-color: rgba(255, 255, 255, .18) !important;


  background: #1a1c21 !important;


  color: #fff !important;


  transform: none;


}





body.is-detail:not(.is-watch) #detailPage .bookmark-button.is-active,


body.is-detail:not(.is-watch) #detailPage .bookmark-button.is-active:hover {


  background: #17191e !important;


  color: #fff !important;


}





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


  display: block !important;


  width: 100% !important;


  margin: clamp(54px, 7vw, 92px) 0 0 !important;


  padding: 0 !important;


  border: 0 !important;


  background: transparent !important;


}





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


  display: none !important;


}





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


  display: flex !important;


  align-items: end !important;


  justify-content: space-between !important;


  gap: 24px !important;


  width: 100% !important;


  margin: 0 0 24px !important;


}





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


  margin: 0 !important;


  color: #f7f7f8 !important;


  font-size: clamp(36px, 4vw, 52px) !important;


  font-weight: 950 !important;


  line-height: 1 !important;


  letter-spacing: -.035em !important;


}





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


  padding-bottom: 4px !important;


  color: rgba(255, 255, 255, .48) !important;


  font-size: 12px !important;


  font-weight: 800 !important;


}





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


  display: block !important;


  width: 100% !important;


}





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


  width: 100% !important;


  margin: 0 !important;


  padding: 0 0 24px !important;


  border: 0 !important;


  background: transparent !important;


}





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


  margin-top: 8px !important;


  padding-top: 24px !important;


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


}





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


  margin: 0 0 14px !important;


  color: rgba(255, 255, 255, .64) !important;


  font-size: 15px !important;


  font-weight: 850 !important;


  line-height: 1.2 !important;


  text-align: center !important;


}





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


  display: grid !important;


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


  gap: 7px !important;


  width: 100% !important;


}





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


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  width: 100% !important;


  min-width: 0 !important;


  min-height: 44px !important;


  height: 44px !important;


  padding: 0 8px !important;


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


  border-radius: 4px !important;


  background: #1d1f22 !important;


  color: rgba(255, 255, 255, .84) !important;


  font-size: 12px !important;


  font-weight: 850 !important;


  line-height: 1 !important;


  box-shadow: none !important;


}





body.is-detail:not(.is-watch) #detailPage .detail-episode-arc__grid button:hover,


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


  border-color: rgba(255, 255, 255, .12) !important;


  background: #292b2f !important;


  color: #fff !important;


  transform: none !important;


}





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


  width: 100% !important;


  margin: 48px 0 0 !important;


}





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


  display: flex !important;


  gap: 8px !important;


  margin: 0 0 18px !important;


  overflow-x: auto !important;


}





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


  flex: 0 0 auto !important;


  min-height: 40px !important;


  padding: 0 18px !important;


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


  border-radius: 6px !important;


  background: #121419 !important;


  color: rgba(255, 255, 255, .62) !important;


}





body.is-detail:not(.is-watch) #detailPage .detail-extra__tabs button.is-active {


  background: #22242a !important;


  color: #fff !important;


}





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


  display: flex !important;


  gap: 14px !important;


  width: 100% !important;


  overflow-x: auto !important;


  overscroll-behavior-inline: contain !important;


  scrollbar-width: thin !important;


  padding: 0 0 10px !important;


}





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


  display: none !important;


}





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


  flex: 0 0 170px !important;


  overflow: hidden !important;


  border-radius: 7px !important;


  background: #121419 !important;


}





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


  display: block !important;


  width: 100% !important;


  aspect-ratio: 2 / 3 !important;


  object-fit: cover !important;


}





body.is-detail:not(.is-watch) #detailPage .detail-extra-card > div {


  display: grid !important;


  gap: 4px !important;


  padding: 11px 12px 13px !important;


}





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


  color: #fff !important;


  font-size: 13px !important;


  line-height: 1.25 !important;


}





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


  color: rgba(255, 255, 255, .5) !important;


  font-size: 11px !important;


}





@media (max-width: 1100px) {


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


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


  }


}





@media (max-width: 760px) {


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


    width: min(calc(100% - 28px), 1760px) !important;


  }





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


    height: 132px !important;


    margin-bottom: 24px !important;


    border-radius: 0 0 7px 7px !important;


  }





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


    grid-template-columns: 1fr !important;


    gap: 22px !important;


  }





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


    width: 132px !important;


  }





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


    align-items: flex-start !important;


    padding-top: 0 !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(26px, 8vw, 38px) !important;


    text-align: left !important;


  }





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


    margin-top: 5px !important;


    text-align: left !important;


  }





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


    gap: 5px !important;


    margin: 14px 0 0 !important;


  }





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


    min-height: 27px !important;


    height: 27px !important;


    padding: 0 9px !important;


    font-size: 9px !important;


  }





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


    margin-top: 20px !important;


    font-size: 14px !important;


    line-height: 1.55 !important;


  }





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


    width: 100% !important;


    margin-top: 20px !important;


  }





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


    flex: 1 1 150px !important;


    min-width: 0 !important;


  }





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


    margin-top: 52px !important;


  }





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


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


    gap: 6px !important;


  }


}





@media (max-width: 520px) {


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


    grid-template-columns: 1fr !important;


    gap: 14px !important;


  }





  body.is-detail:not(.is-watch) #detailPage .chips span:nth-child(n + 5) {


    display: none !important;


  }





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


    font-size: 34px !important;


  }


}





/* Public profile + account settings */


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


body.is-library #settingsPage.settings-section:not([hidden]) {


  display: block !important;


}





.profile-page,


.settings-section {


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


  margin: 0 auto !important;


  padding: 36px 0 100px !important;


  color: #f6f6f7;


}





.profile-hero {


  position: relative;


  min-height: 360px;


  overflow: hidden;


  border-radius: 24px;


  background: #111318;


  border: 1px solid #24262d;


}





.profile-hero__banner {


  position: absolute;


  inset: 0;


  background: radial-gradient(circle at 75% 20%, #343740, var(--bg-surface) 58%, #08090b);


  background-size: cover;


  background-position: center 28%;


}





.profile-hero__fade {


  position: absolute;


  inset: 0;


  background: linear-gradient(90deg, rgba(4, 5, 7, .58) 0%, rgba(4, 5, 7, .2) 52%, rgba(4, 5, 7, .04)), linear-gradient(0deg, rgba(9, 10, 13, .7) 0%, transparent 55%);


}





.profile-hero__identity {


  position: absolute;


  left: 42px;


  right: 42px;


  bottom: 34px;


  z-index: 2;


  display: flex;


  flex-direction: row;


  align-items: flex-start;


  gap: 24px;


  max-width: none;


}





.profile-hero__boundary {


  display: flex;


  flex-direction: column;


  align-items: flex-start;


  width: 134px;


  flex: 0 0 134px;


}





.profile-avatar-shell {


  position: relative;


  display: inline-flex;


  width: max-content;


  height: max-content;


  line-height: 0;


}





.profile-avatar-premium {


  display: flex;


  position: absolute;


  top: -4px;


  right: -4px;


  width: 31px;


  height: 31px;


  z-index: 5;


  border-radius: 50%;


  background: #111318;


  border: 3px solid #08090b;


  align-items: center;


  justify-content: center;


}





.profile-avatar-premium[hidden] {


  display: none !important;


}





.profile-avatar-premium img {


  display: block;


  width: 19px;


  height: 19px;


  object-fit: contain;


}





.profile-avatar-presence {


  position: absolute;


  right: 5px;


  bottom: 5px;


  z-index: 2;


  width: 16px;


  height: 16px;


  border: 3px solid #090a0d;


  border-radius: 50%;


  background: #4ed56c;


  box-shadow: 0 0 14px rgba(78, 213, 108, .78);


}





.profile-avatar-presence[hidden] { display: none; }





.profile-avatar-presence::after {


  content: "";


  position: absolute;


  inset: -5px;


  border: 2px solid rgba(78, 213, 108, .55);


  border-radius: inherit;


  animation: profile-presence-pulse 1.8s ease-out infinite;


}





@keyframes profile-presence-pulse {


  0% { opacity: .9; transform: scale(.72); }


  70%, 100% { opacity: 0; transform: scale(1.45); }


}





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


  .profile-avatar-presence::after { animation: none; }


}





.profile-rank {


  position: relative;


  display: flex;


  flex: 0 0 auto;


  align-items: flex-end;


  min-width: 0;


  min-height: 42px;


  margin-top: 12px;


}





.profile-rank span {


  position: relative;


  display: inline-flex;


  align-items: center;


  min-height: 42px;


  margin: 0;


  padding: 0 24px 0 45px;


  overflow: hidden;


  border: 1px solid rgba(255, 145, 102, .4);


  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);


  background: linear-gradient(110deg, rgba(255, 145, 102, .2), rgba(255, 145, 102, .05) 62%, transparent);


  color: #ffad89;


  font-size: 19px;


  font-weight: 950;


  line-height: 1;


  letter-spacing: .18em;


  text-shadow: 0 0 22px rgba(255, 132, 87, .48);


  box-shadow: inset 3px 0 0 var(--accent-default);


}





.profile-rank span::before {


  content: "◆";


  position: absolute;


  left: 22px;


  color: var(--accent-default);


  font-size: 10px;


  filter: drop-shadow(0 0 6px rgba(255, 145, 102, .8));


}





.profile-hero__details {


  min-width: 0;


  padding-top: 8px;


}





.profile-hero__avatar {


  width: 126px;


  height: 126px;


  flex: 0 0 126px;


  border-radius: 50%;


  object-fit: cover;


  border: 4px solid #0a0b0e;


  background: #202228;


  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);


}





.profile-hero__identity h1 {


  margin: 0;


  font-size: clamp(38px, 4vw, 62px);


  line-height: .98;


  letter-spacing: -.045em;


}





.profile-hero__details .profile-handle {


  margin: 0;


  color: #f7f7f8;


  font-size: clamp(34px, 3.6vw, 56px);


  font-weight: 950;


  line-height: 1;


  letter-spacing: -.045em;


}





.profile-hero__identity p {


  margin: 8px 0 0;


  color: #a8abb2;


  font-size: 16px;


  font-weight: 750;


}





.profile-edit-button {


  position: absolute;


  z-index: 3;


  right: 30px;


  bottom: 34px;


  min-height: 46px;


  padding: 0 18px;


  border: 1px solid #34363d;


  border-radius: 12px;


  background: rgba(19, 20, 25, .82);


  color: #f3f3f4;


  font: inherit;


  font-weight: 800;


  cursor: pointer;


  backdrop-filter: blur(14px);


}





.profile-edit-button:hover { background: #2b2d33; }


.profile-edit-button.is-friend-action { min-width: 188px; }


.profile-edit-button:disabled { opacity: .62; cursor: default; }





.profile-hero__actions {


  position: absolute;


  z-index: 3;


  top: 24px;


  right: 24px;


  display: flex;


  gap: 8px;


}


.profile-hero__actions[hidden] { display: none !important; }


.profile-hero__actions button {


  min-height: 40px;


  padding: 0 16px;


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


  border-radius: 10px;


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


  color: #d7d8dc;


  font: inherit;


  font-size: 13px;


  font-weight: 800;


  cursor: pointer;


  backdrop-filter: blur(10px);


  transition: color .15s ease, border-color .15s ease, background-color .15s ease;


}


.profile-hero__actions button:hover {


  border-color: rgba(255, 255, 255, .48);


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


  color: #fff;


}





.settings-mode-tabs button {


  min-height: 40px;


  padding: 0 16px;


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


  border-radius: 10px;


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


  color: #d7d8dc;


  font: inherit;


  font-size: 13px;


  font-weight: 800;


  cursor: pointer;


  backdrop-filter: blur(10px);


  transition: color .15s ease, border-color .15s ease, background-color .15s ease;


}


.settings-mode-tabs button:hover {


  border-color: rgba(255, 255, 255, .48);


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


  color: #fff;


}


.settings-mode-tabs button.is-active {


  border-color: rgba(255, 255, 255, .4);


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


  color: #fff;


}





.profile-toast[hidden] { display: none !important; }


.profile-toast { position: fixed; z-index: 11000; left: 50%; bottom: 34px; transform: translate(-50%, 18px); min-width: min(360px, calc(100% - 32px)); padding: 14px 20px; border: 1px solid #34363d; border-radius: 13px; background: rgba(25,27,32,.96); color: #fff; text-align: center; font-size: 13px; font-weight: 800; opacity: 0; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(12px); }


.profile-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }





/* User results are compact profile rows, independent from anime cards. */


#searchModalResults .user-search-card {


  position: relative !important;


  display: grid !important;


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


  grid-template-rows: auto !important;


  align-items: center !important;


  gap: 14px !important;


  width: 100% !important;


  min-height: 78px !important;


  padding: 11px 14px !important;


  overflow: visible !important;


  border: 1px solid #282a31 !important;


  border-radius: 14px !important;


  background: #17191e !important;


  color: #fff !important;


  text-align: left !important;


  box-shadow: none !important;


  cursor: pointer !important;


}


#searchModalResults .user-search-card::after { content: "›" !important; position: static !important; display: block !important; background: none !important; color: #777b84 !important; font-size: 27px !important; line-height: 1 !important; }


#searchModalResults .user-search-card:hover { transform: none !important; border-color: #3a3d45 !important; background: #202228 !important; }


#searchModalResults .user-search-card .user-search-card__avatar { position: static !important; grid-row: auto !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover !important; opacity: 1 !important; }


#searchModalResults .user-search-card > div { display: grid !important; gap: 6px !important; min-width: 0 !important; }


#searchModalResults .user-search-card .user-search-title { position: static !important; padding: 0 !important; overflow: hidden !important; color: #f5f5f6 !important; font-size: 15px !important; line-height: 1.15 !important; text-overflow: ellipsis !important; text-shadow: none !important; white-space: nowrap !important; }


#searchModalResults .user-search-card .user-search-meta { position: static !important; padding: 0 !important; color: #858891 !important; font-size: 12px !important; font-weight: 700 !important; }





.profile-member-since {


  margin: 14px 0 0;


  color: #777b84;


  font-size: 13px;


}





.profile-overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 18px; margin-top: 32px; align-items: stretch; }


.profile-statistics-card, .profile-friends-card { min-height: 280px; padding: 26px; border: 1px solid #25272d; border-radius: 20px; background: #15171b; }


.profile-statistics-card h2, .profile-friends-card h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }


.profile-statline { display: grid; gap: 0; }





.profile-statline > span {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 20px;


  min-height: 58px;


  padding: 0;


  border-bottom: 1px solid #292b32;


}


.profile-statline > span:last-child { border-bottom: 0; }


.profile-statline strong { order: 2; font-size: 26px; line-height: 1; }


.profile-statline small { color: #9699a1; font-size: 14px; font-weight: 700; }


.profile-description {


  padding-bottom: 22px;


  border-bottom: 1px solid #292b32;


}


.profile-description header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }


.profile-description h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }


.profile-description header span { color: #6f727b; font-size: 11px; font-weight: 750; }


.profile-description p {


  max-width: min(100%, 50vw);


  margin: 12px 0 0;


  overflow-wrap: anywhere;


  white-space: pre-wrap;


  color: #c5c7cd;


  font-size: 14px;


  font-weight: 650;


  line-height: 1.55;


}


.profile-description p.is-empty { color: #737780; font-weight: 600; }


.profile-friends-card { overflow: hidden; }


.profile-friends-card > header { display: flex; align-items: center; gap: 10px; }


.profile-friends-card > header span { min-width: 25px; padding: 4px 8px; border-radius: 999px; background: #24262c; color: #aaaeb6; text-align: center; font-size: 12px; font-weight: 850; }


.profile-friends-list { display: grid; gap: 8px; max-height: 205px; margin-top: 20px; overflow-y: auto; padding-right: 5px; scrollbar-color: #3b3e46 transparent; }


.profile-friend-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 9px 12px; border: 0; border-radius: 13px; background: #1d1f24; color: #fff; text-align: left; cursor: pointer; }


.profile-friend-row:hover { background: #25272d; }


.profile-friend-row img { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%; object-fit: cover; }


.profile-friend-row > span { display: grid; gap: 4px; min-width: 0; }


.profile-friend-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }


.profile-friend-row small { color: #858891; font-size: 11px; }


.profile-friend-row small.is-online { color: #5fd276; }





.profile-content-section { margin-top: 48px; }


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


.profile-section-head h2 { margin: 0; font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.035em; }


.profile-section-note { margin: 6px 0 0; color: #767982; font-size: 12px; font-weight: 700; }


.profile-add-favorite { min-height: 42px; padding: 0 16px; border: 1px solid #34363d; border-radius: 11px; background: #1b1d22; color: #fff; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }


.profile-add-favorite:hover { background: #27292f; }


.profile-section-head a { color: #91949c; text-decoration: none; font-size: 13px; font-weight: 800; }


.profile-section-head a:hover { color: #fff; }





.profile-favorites-rail {


  display: grid;


  grid-template-columns: repeat(6, minmax(0, 1fr));


  gap: 14px;


}





.profile-favorite-card {


  position: relative;


  aspect-ratio: 2 / 3;


  padding: 0;


  overflow: hidden;


  border: 0;


  border-radius: 15px;


  background: #1b1d22;


  color: #fff;


  text-align: left;


  cursor: pointer;


}


.profile-favorite-card__open { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; }


.profile-favorite-card__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }


.profile-favorite-card__open::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.9)); }


.profile-favorite-card__open span { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; font-size: 14px; font-weight: 900; line-height: 1.25; }


.profile-favorite-card:hover .profile-favorite-card__open img { transform: scale(1.035); }


.profile-favorite-card__remove { position: absolute; z-index: 4; top: 9px; right: 9px; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(8,9,11,.78); color: #fff; font-size: 23px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }


.profile-favorite-card__remove:hover { background: #fff; color: #101115; }





.profile-anime-picker[hidden] { display: none !important; }


.profile-anime-picker { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.76); backdrop-filter: blur(12px); }


.profile-anime-picker > section { width: min(680px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; border: 1px solid #2d3037; border-radius: 22px; background: #121419; box-shadow: 0 30px 90px rgba(0,0,0,.55); }


.profile-anime-picker header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 16px; }


.profile-anime-picker header h2 { margin: 0; font-size: 25px; }


.profile-anime-picker header p { margin: 6px 0 0; color: #858891; font-size: 13px; }


.profile-anime-picker header button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #22242a; color: #fff; font-size: 25px; cursor: pointer; }


.profile-anime-picker > section > label { display: flex; align-items: center; gap: 11px; margin: 0 24px 16px; padding: 0 15px; min-height: 50px; border: 1px solid #30323a; border-radius: 13px; background: #1a1c21; color: #888b93; }


.profile-anime-picker input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; }


.profile-anime-picker__results { display: grid; gap: 7px; max-height: 540px; overflow-y: auto; padding: 0 16px 18px 24px; }


.profile-anime-picker__item { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 8px; border: 0; border-radius: 13px; background: transparent; color: #fff; text-align: left; cursor: pointer; }


.profile-anime-picker__item:hover { background: #1d1f25; }


.profile-anime-picker__item:disabled { opacity: .55; cursor: default; }


.profile-anime-picker__item img, .profile-anime-picker__item > .poster-fallback { width: 56px; height: 72px; border-radius: 9px; object-fit: cover; }


.profile-anime-picker__item > span { display: grid; gap: 6px; min-width: 0; }


.profile-anime-picker__item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }


.profile-anime-picker__item small { color: #858891; font-size: 11px; }


.profile-anime-picker__item > b { color: #ff9871; font-size: 12px; }





.profile-activity { border-top: 1px solid #22242a; }


.profile-activity > div { display: flex; justify-content: space-between; gap: 24px; padding: 17px 0; border-bottom: 1px solid #22242a; }


.profile-activity > div.is-clickable { cursor: pointer; }


.profile-activity > div.is-clickable:hover p { color: #fff; }


.profile-activity p { margin: 0; color: #d2d3d7; font-size: 14px; }


.profile-activity time { color: #737780; font-size: 12px; }


.profile-empty { grid-column: 1 / -1; margin: 0; padding: 34px 0; color: #777b83; border-top: 1px solid #22242a; border-bottom: 1px solid #22242a; }





.settings-title { margin-bottom: 30px; }


.settings-title p { margin: 0 0 8px; color: #7d8088; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }


.settings-title h1 { margin: 0; font-size: clamp(40px, 5vw, 66px); letter-spacing: -.05em; }





.settings-preview {


  --settings-banner: none;


  position: relative;


  display: flex;


  align-items: flex-end;


  gap: 20px;


  min-height: 210px;


  padding: 30px;


  overflow: hidden;


  border: 1px solid #24262c;


  border-radius: 20px;


  background: #15171c;


}


.settings-preview::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(7,8,10,.95), rgba(7,8,10,.12)), var(--settings-banner); background-size: cover; background-position: center; }


.settings-preview > * { position: relative; z-index: 1; }


.settings-preview__avatar { width: 94px; height: 94px; border-radius: 50%; object-fit: cover; border: 3px solid #111318; background: #25272d; }


.settings-preview div { display: grid; gap: 7px; }


.settings-preview strong { font-size: 25px; }


.settings-preview span { color: #9a9da5; font-size: 13px; }





.settings-stack { margin-top: 42px; }


.settings-mode-tabs {


  position: absolute;


  z-index: 3;


  top: 24px;


  right: 24px;


  display: flex;


  gap: 8px;


  margin: 0;


}


#settingsPage[data-settings-section="profile"] .settings-clean-section:not(#publicProfileSettings),


#settingsPage[data-settings-section="settings"] #publicProfileSettings { display: none; }


.settings-clean-section { padding: 34px 0; border-top: 1px solid #24262c; }


.settings-clean-section:last-child { border-bottom: 1px solid #24262c; }


.settings-clean-section > header { margin-bottom: 10px; }


.settings-clean-section > header h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }


.settings-clean-section > header p { margin: 7px 0 0; color: #777b84; font-size: 13px; }





.settings-clean-row {


  display: grid;


  grid-template-columns: minmax(260px, 1fr) minmax(280px, 520px);


  align-items: center;


  gap: 30px;


  min-height: 70px;


  margin: 0;


  border-bottom: 1px solid #1d1f24;


}


.settings-clean-row > span { display: grid; gap: 5px; }


.settings-clean-row b { font-size: 14px; }


.settings-clean-row small { color: #737780; font-size: 12px; }


.settings-clean-row input[type="text"], .settings-clean-row input[type="url"], .settings-clean-row select, .settings-clean-row textarea {


  width: 100%; height: 44px; padding: 0 14px; border: 1px solid #2b2d34; border-radius: 10px; outline: 0; background: #17191e; color: #f4f4f5; font: inherit; font-size: 13px;


}


.settings-clean-row textarea { min-height: 112px; height: auto; padding: 12px 14px; resize: vertical; overflow-wrap: anywhere; line-height: 1.5; white-space: pre-wrap; }


.settings-clean-row input:focus, .settings-clean-row select:focus, .settings-clean-row textarea:focus { border-color: #62656e; }


.settings-clean-row--textarea { align-items: start; padding: 14px 0; }


.settings-clean-row--textarea output { color: #a6a9b0; font-variant-numeric: tabular-nums; }


.settings-clean-row input[type="checkbox"] { justify-self: end; width: 42px; height: 22px; accent-color: var(--accent-default); cursor: pointer; }


.profile-upload-input { justify-self: end; max-width: 520px; color: #999ca4; }





.settings-save-row { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding-top: 22px; }


.settings-save-row span { color: #8b8e96; font-size: 12px; }


.settings-save-button { min-height: 44px; padding: 0 19px; border: 0; border-radius: 10px; background: #f4f4f5; color: var(--bg-surface); font: inherit; font-weight: 900; cursor: pointer; }


.settings-save-button:hover { background: #dedfe2; }


.settings-danger-section > button { display: block; width: 100%; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid #1d1f24; background: transparent; color: #d7d8dc; text-align: left; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }


.settings-danger-section > button:hover { color: #fff; }


.settings-danger-section > button.danger-text { color: #f17474; }





@media (max-width: 960px) {


  .profile-page, .settings-section { width: min(100% - 36px, 1540px) !important; }


  .profile-hero { min-height: 330px; }


  .profile-hero__identity { left: 24px; right: 24px; bottom: 26px; max-width: none; }


  .profile-edit-button { top: 20px; right: 20px; bottom: auto; }


  .profile-overview { grid-template-columns: 1fr; }


  .profile-favorites-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }


  .profile-favorite-card { flex: 0 0 180px; scroll-snap-align: start; }


}





@media (max-width: 640px) {


  .profile-page, .settings-section { width: min(100% - 24px, 1540px) !important; padding-top: 18px !important; }


  .profile-hero { min-height: 390px; border-radius: 18px; }


  .profile-hero__identity { flex-direction: column; align-items: stretch; gap: 12px; }


  .profile-hero__boundary { width: 100%; flex-basis: auto; }


  .profile-hero__details { padding-top: 0; }


  .profile-description { text-align: center; }


  .profile-description header { justify-content: center; }


  .profile-description p { max-width: 100%; margin-right: auto; margin-left: auto; text-align: center; }


  .profile-hero__avatar { width: 94px; height: 94px; flex-basis: 94px; }


  .profile-hero__actions { top: 14px; right: 14px; gap: 6px; }


  .profile-hero__actions button { min-height: 36px; padding: 0 12px; font-size: 12px; }


  .profile-rank span { min-height: 36px; margin-left: 12px; padding: 0 16px 0 35px; font-size: 14px; }


  .profile-rank span::before { left: 16px; }


  .profile-hero__identity h1 { font-size: 38px; }


  .profile-statline > span { min-width: 0; }


  .settings-preview { min-height: 170px; padding: 22px; }


  .settings-mode-tabs { top: 14px; right: 14px; gap: 6px; }


  .settings-mode-tabs button { min-height: 36px; padding: 0 12px; font-size: 12px; }


  .settings-clean-row { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }


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


  .profile-upload-input { justify-self: start; width: 100%; }


}


.detail-episode-arc__grid.is-pending {


  min-height: 48px;


}





.poster-card:focus-visible,


.mini-card:focus-visible {


  outline: 3px solid var(--orange);


  outline-offset: 3px;


}





/* Keep the header account control avatar-only on every page and breakpoint. */


.top-actions .profile-button,


.top-actions .profile-button:hover,


.top-actions .profile-button:focus-visible,


body.is-detail .top-actions .profile-button {


  width: 46px !important;


  min-width: 46px !important;


  height: 46px !important;


  min-height: 46px !important;


  padding: 2px !important;


  display: grid !important;


  place-items: center !important;


  border-radius: 999px !important;


}





.top-actions .profile-button .profile-avatar {


  width: 42px !important;


  min-width: 42px !important;


  height: 42px !important;


}





@media (max-width: 620px) {


  .top-actions .profile-button,


  .top-actions .profile-button:hover,


  .top-actions .profile-button:focus-visible,


  body.is-detail .top-actions .profile-button {


    width: 42px !important;


    min-width: 42px !important;


    height: 42px !important;


    min-height: 42px !important;


  }





  .top-actions .profile-button .profile-avatar {


    width: 38px !important;


    min-width: 38px !important;


    height: 38px !important;


  }


}


/* AnimeHub Premium */


.premium-nav-link{display:inline-flex!important;align-items:center;gap:7px}.premium-nav-link img{width:21px;height:21px;object-fit:contain}.bottom-premium-crown{width:22px;height:22px;object-fit:contain}.premium-crown{width:18px;height:18px;object-fit:contain;flex:none;filter:saturate(.9)}


@keyframes premium-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}


.premium-page:not([hidden]) .premium-hero>*{animation:premium-rise .55s both}.premium-page:not([hidden]) .premium-hero>*:nth-child(2){animation-delay:.05s}.premium-page:not([hidden]) .premium-hero>*:nth-child(3){animation-delay:.1s}.premium-page:not([hidden]) .premium-hero>*:nth-child(4){animation-delay:.15s}.premium-page:not([hidden]) .premium-hero>*:nth-child(5){animation-delay:.2s}.premium-page:not([hidden]) .premium-bento article{animation:premium-rise .5s both}.premium-page:not([hidden]) .premium-bento article:nth-child(2){animation-delay:.06s}.premium-page:not([hidden]) .premium-bento article:nth-child(3){animation-delay:.12s}.premium-page:not([hidden]) .premium-bento article:nth-child(4){animation-delay:.18s}.premium-page:not([hidden]) .premium-bento article:nth-child(5){animation-delay:.24s}


.premium-page,.premium-chat-page{min-height:calc(100vh - 92px);padding:clamp(54px,7vw,110px) clamp(24px,5vw,84px);background:#070707;color:#f7f4ed}.premium-hero{text-align:center;max-width:1050px;margin:0 auto 70px}.premium-hero__crown{width:112px;height:112px;margin:0 auto 22px;border:1px solid #3f3522;border-radius:32px;display:grid;place-items:center;background:radial-gradient(circle,#251d0e,#0b0a07 68%);box-shadow:0 20px 70px #dcae4230}.premium-hero__crown img{width:74px;height:74px;object-fit:contain}.premium-hero>p:first-of-type,.premium-chat-page>header p,.premium-plan p{letter-spacing:.24em;color:#c9a85c;font-weight:850;font-size:12px}.premium-hero h1{font-size:clamp(54px,7.4vw,116px);line-height:.9;letter-spacing:-.07em;margin:18px 0 26px}.premium-hero__lead{max-width:620px;margin:0 auto 34px!important;color:#a5a29a;font-size:18px;line-height:1.55}.premium-buy-button,.premium-plan button{border:1px solid #b68e3d;background:#e0b95e;color:#100e09;border-radius:13px;padding:15px 22px;display:inline-flex;gap:18px;align-items:center;font:800 15px inherit;cursor:pointer;transition:.2s ease}.premium-buy-button:hover,.premium-plan button:hover{background:#efd17c;transform:translateY(-1px)}.premium-buy-button b{font-size:12px;opacity:.72}.premium-current-status{min-height:20px;color:#d2bc87;margin-top:14px!important}.premium-bento{max-width:1320px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-auto-rows:minmax(240px,auto);gap:14px}.premium-bento article{position:relative;overflow:hidden;border:1px solid #29251d;border-radius:22px;padding:32px;background:linear-gradient(145deg,#15130f,#0b0b0a);min-width:0}.premium-bento article:after{content:"";position:absolute;inset:auto -25% -55% 20%;height:70%;background:radial-gradient(circle,#ca9d3438,transparent 70%);pointer-events:none}.premium-bento h2{font-size:26px;margin:72px 0 10px;letter-spacing:-.035em}.premium-bento p{color:#94918a;line-height:1.5;max-width:470px}.premium-bento__profile{grid-row:span 2}.premium-bento__profile>div{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:900}.premium-bento__profile img{width:40px;height:40px}.premium-bento__profile h2{margin-top:210px;font-size:40px}.premium-bento__quality>span,.premium-bento__upscale>span{font-weight:950;font-size:34px;color:#d8b65e}.premium-bento__chat{grid-column:span 2}.premium-chat-mock{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid #292720;background:#090909;border-radius:14px}.premium-chat-mock i{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#dac36d,#262115)}.premium-chat-mock span{display:grid}.premium-chat-mock small{color:#9d9a92}.premium-bento__chat button{margin-top:18px;background:transparent;border:0;color:#d2b665;font-weight:800;cursor:pointer}.premium-bento__download>span{font-size:44px;color:#d8b65e}.premium-plan{max-width:1320px;margin:14px auto 0;border:1px solid #3b3220;border-radius:22px;padding:28px 32px;display:flex;align-items:center;gap:24px;background:#11100d}.premium-plan>img{width:64px;height:64px}.premium-plan>div{flex:1}.premium-plan h2{margin:5px 0;font-size:30px}.premium-plan span{color:#99958b}.premium-chat-page>header{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24221c;padding-bottom:24px}.premium-chat-page>header h1{font-size:54px;margin:4px 0}.premium-chat-page>header img{width:72px;height:72px}.premium-chat-shell,.premium-chat-locked{max-width:1100px;margin:24px auto}.premium-chat-locked{text-align:center;padding:80px 20px;border:1px solid #28241a;border-radius:20px}.premium-chat-locked img{width:78px}.premium-chat-locked button,.premium-chat-more{background:#d3b25f;color:#111;border:0;border-radius:10px;padding:12px 18px;font-weight:850}.premium-chat-list{min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}.premium-chat-message{display:flex;gap:14px;padding:18px 4px;border-bottom:1px solid #171717}.premium-chat-message>img{width:42px;height:42px;border-radius:50%;object-fit:cover}.premium-chat-message__head{display:flex;align-items:center;gap:8px}.premium-chat-message__head time{font-size:12px;color:#777}.premium-chat-message p{margin:7px 0 0;color:#e2e0dc}.premium-chat-message small{color:#b99b54}.premium-chat-form{display:flex;gap:12px;padding:12px;border:1px solid #28251e;border-radius:14px;background:#0c0c0c;position:sticky;bottom:16px}.premium-chat-form img{width:42px;height:42px;border-radius:50%;object-fit:cover}.premium-chat-form input{flex:1;background:transparent;border:0;color:#fff;outline:0;font:inherit}.premium-chat-form button{border:0;border-radius:9px;background:#d5b25b;padding:0 18px;font-weight:850}.premium-gate{position:fixed;inset:0;z-index:10000;background:#000b;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.premium-gate[hidden]{display:none}.premium-gate__panel{width:min(470px,100%);text-align:center;padding:44px 34px 34px;background:linear-gradient(150deg,#17140e,#090909);border:1px solid #4a3b1f;border-radius:24px;position:relative;box-shadow:0 30px 120px #000}.premium-gate__panel>img{width:76px;height:76px}.premium-gate__panel>p{color:#caaa56;letter-spacing:.18em;font-size:11px;font-weight:900}.premium-gate__panel h2{font-size:34px;margin:10px 0}.premium-gate__panel>span{display:block;color:#9c9991;line-height:1.5}.premium-gate__panel>button:last-child{margin-top:25px;border:0;border-radius:11px;background:#dfbb60;color:#100e08;padding:13px 19px;font-weight:900}.premium-gate__close{position:absolute;top:14px;right:14px;border:0;background:transparent;color:#aaa;font-size:25px}.telegram-login-button{width:100%;height:52px;border:1px solid #2b72a1;border-radius:12px;background:#1678ac;color:#fff;font-weight:850;font-size:15px}.settings-clean-row b .premium-crown{vertical-align:middle;margin-left:6px}.ah-player__download{height:34px;min-width:42px;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;gap:2px;font-weight:900}.ah-player__download img{width:16px;height:16px}.ah-player-quality__menu button.is-premium-locked{display:flex;align-items:center;gap:7px;color:#d4bc76}.ah-player-quality__menu button.is-premium-locked img{width:16px;height:16px}.premium-name{display:inline-flex;align-items:center;gap:5px}.premium-name .premium-crown{width:16px;height:16px}


.premium-hero__actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.premium-trial-button{min-height:49px;border:1px solid #3c3526;border-radius:13px;padding:0 20px;background:#0e0d0a;color:#d8c795;font:800 14px inherit;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.premium-trial-button:hover:not(:disabled){border-color:#8b7543;background:#141109;color:#f1daa0}.premium-trial-button:disabled{opacity:.48;cursor:default}


@media(max-width:900px){.premium-nav-link{display:none!important}.premium-page,.premium-chat-page{padding:44px 16px 100px}.premium-hero h1{font-size:52px}.premium-bento{grid-template-columns:1fr}.premium-bento article,.premium-bento__profile,.premium-bento__chat{grid-column:auto;grid-row:auto;min-height:220px}.premium-bento__profile h2{margin-top:90px;font-size:31px}.premium-plan{align-items:flex-start;flex-wrap:wrap}.premium-plan button{width:100%;justify-content:center}.premium-chat-page>header h1{font-size:38px}.bottom-nav .bottom-premium-crown{display:block}}


.settings-inline-status{min-height:18px;margin:12px 0 0;color:#747780;font-size:12px;font-weight:700}


@media(prefers-reduced-motion:reduce){.premium-page:not([hidden]) .premium-hero>*,.premium-page:not([hidden]) .premium-bento article{animation:none}.premium-buy-button,.premium-plan button{transition:none}}





/* Premium episode downloads */


.premium-bento__download > span { display: none; }


.premium-bento__download > img { width: 50px; height: 50px; object-fit: contain; opacity: .9; }


.ah-player__download { width: 36px; min-width: 36px; height: 34px; gap: 0; border-radius: 7px; cursor: pointer; transition: background .15s ease, opacity .15s ease; }


.ah-player__download:hover { background: #ffffff12; }


.ah-player__download:disabled { opacity: .45; cursor: wait; }


.ah-player__download img { width: 21px; height: 21px; object-fit: contain; }


.ah-player__download.is-loading img { animation: download-pulse .8s ease-in-out infinite alternate; }


@keyframes download-pulse { to { opacity: .35; transform: translateY(2px); } }





/* Referral program */


.premium-referral-button {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  min-height: 42px;


  margin-top: 17px;


  padding: 0 19px;


  border: 0;


  border-radius: 999px;


  background: transparent;


  color: #9bbdcc;


  font: 800 13px inherit;


  letter-spacing: .01em;


  cursor: pointer;


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


}


.premium-referral-button::before { content: "↗"; margin-right: 8px; font-size: 16px; }


.premium-referral-button:hover { background: #78cce80d; color: #d8f5ff; }





.referral-page {


  --referral-accent: #74cae4;


  --referral-accent-soft: #9ae0d2;


  min-height: calc(100vh - 92px);


  padding: clamp(50px, 7vw, 108px) clamp(20px, 5vw, 84px) 120px;


  background:


    radial-gradient(ellipse 95% 72% at 50% 0%, #153f4b78 0%, #0c242c52 38%, transparent 76%),


    linear-gradient(180deg, #081115 0%, #060808 54%, #060808 100%);


  color: #f4f7f7;


}


.referral-hero { max-width: 1050px; margin: 0 auto 64px; text-align: center; }


.referral-hero__icon {


  width: 164px;


  height: 164px;


  margin: 0 auto 26px;


  display: grid;


  place-items: center;


  overflow: visible;


  border: 1px solid #39788a;


  border-radius: 44px;


  background: transparent;


  box-shadow: 0 20px 70px #55bbd129;


}


.referral-hero__icon img { width: 142px; height: 142px; object-fit: contain; }





body.is-referrals .home-page,


body:not(.is-mobile).is-library.is-referrals .home-page {


  padding: 0 !important;


  background: #081115 !important;


}


.referral-hero > p:first-of-type,


.referral-list-section > header p {


  margin: 0;


  color: var(--referral-accent);


  font-size: 12px;


  font-weight: 900;


  letter-spacing: .24em;


}


.referral-hero h1 {


  margin: 18px 0 25px;


  font-size: clamp(54px, 7vw, 108px);


  line-height: .91;


  letter-spacing: -.065em;


}


.referral-hero__lead {


  max-width: 690px;


  margin: 0 auto 31px !important;


  color: #929b9d;


  font-size: 17px;


  line-height: 1.55;


}


.referral-link-box {


  width: min(720px, 100%);


  margin: 0 auto;


  display: grid;


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


  gap: 8px;


  padding: 8px;


  border: 1px solid #24363c;


  border-radius: 15px;


  background: #0b0f11;


}


.referral-link-box input {


  min-width: 0;


  padding: 0 13px;


  border: 0;


  outline: 0;


  background: transparent;


  color: #c4d9df;


  font: 750 14px inherit;


}


.referral-link-box button,


.referral-login {


  min-height: 44px;


  padding: 0 18px;


  border: 0;


  border-radius: 10px;


  background: var(--referral-accent);


  color: #071014;


  font: 900 13px inherit;


  cursor: pointer;


  transition: background .2s ease, transform .2s ease;


}


.referral-link-box button:hover,


.referral-login:hover { background: #a2e7f3; transform: translateY(-1px); }


.referral-status { min-height: 20px; margin: 13px 0 0 !important; color: #78878b; font-size: 13px; font-weight: 700; }


.referral-summary,


.referral-list-section { width: min(1140px, 100%); margin-inline: auto; }


.referral-summary {


  display: grid;


  grid-template-columns: repeat(3, minmax(0, 1fr));


  border-block: 1px solid #1e3035;


}


.referral-summary article { min-width: 0; padding: 31px 25px; text-align: center; }


.referral-summary article + article { border-left: 1px solid #1e3035; }


.referral-summary small,


.referral-summary span { display: block; color: #778286; font-size: 12px; font-weight: 750; }


.referral-summary strong { display: block; margin: 8px 0 6px; color: #eef9fb; font-size: 40px; line-height: 1; }


.referral-list-section { margin-top: 70px; }


.referral-list-section > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 21px; border-bottom: 1px solid #1b2b30; }


.referral-list-section h2 { margin: 7px 0 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; }


.referral-list-section > header > span { color: var(--referral-accent-soft); font-size: 14px; font-weight: 900; }


.referral-list { display: grid; }


.referral-person {


  display: grid;


  grid-template-columns: 58px minmax(0, 1fr) auto;


  align-items: center;


  gap: 18px;


  min-height: 105px;


  padding: 18px 4px;


  border-bottom: 1px solid #182326;


}


.referral-person__avatar,


.user-search-card__avatar-shell,


.episode-comment__avatar-shell,


.premium-avatar-shell { position: relative; display: inline-grid; flex: none; }


.referral-person__avatar { width: 58px; height: 58px; }


.referral-person__avatar > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }


.referral-person__avatar .premium-crown,


.user-search-card__avatar-shell .premium-crown,


.episode-comment__avatar-shell .premium-crown,


.premium-avatar-shell .premium-crown {


  position: absolute !important;


  right: -5px !important;


  top: -5px !important;


  bottom: auto !important;


  z-index: 2;


  width: 22px !important;


  height: 22px !important;


  padding: 3px;


  border: 2px solid #090b0c;


  border-radius: 50%;


  background: #17130a;


  object-fit: contain;


  filter: none;


}


.referral-person > div { min-width: 0; display: grid; gap: 4px; }


.referral-person b { overflow: hidden; color: #f2f5f5; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }


.referral-person small { color: #748084; font-size: 12px; font-weight: 800; }


.referral-person p { margin: 3px 0 0; color: #a4adb0; font-size: 13px; line-height: 1.45; }


.referral-person > strong { color: #91dace; font-size: 13px; white-space: nowrap; }


.referral-person.is-premium > strong { color: #e4c363; }


.referral-empty { padding: 42px 0; color: #747e81; text-align: center; }


.referral-login { display: block; margin: 40px auto; }





/* One compact Premium badge, used on search results and comments. */


.user-search-card__avatar-shell { width: 56px; height: 56px; }


#searchModalResults .user-search-card__avatar-shell .user-search-card__avatar { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover !important; }


.episode-comment__avatar-shell { width: 46px; height: 46px; align-self: start; }


.episode-comment__avatar-shell .episode-comment__avatar { width: 46px; height: 46px; margin: 0; border-radius: 50%; object-fit: cover; }


.episode-comment__avatar-shell .premium-crown { width: 19px !important; height: 19px !important; right: -4px !important; top: -4px !important; bottom: auto !important; padding: 2px; }





.profile-friend-row__avatar { width: 43px; height: 43px; }


.profile-friend-row__avatar > img:first-child { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }


.settings-friend__avatar { width: 42px; height: 42px; }


.settings-friend__avatar > img:first-child { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }


.premium-chat-message__avatar { width: 42px; height: 42px; align-self: flex-start; }


.premium-chat-message__avatar > img:first-child { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }


.premium-chat-message__avatar .premium-crown,


.profile-friend-row__avatar .premium-crown,


.settings-friend__avatar .premium-crown { width: 19px !important; height: 19px !important; padding: 2px; }





@media (max-width: 700px) {


  .referral-page { min-height: calc(100vh - 64px); padding: 34px 16px 108px; }


  .referral-hero { margin-bottom: 44px; }


  .referral-hero__icon { width: 132px; height: 132px; border-radius: 34px; }


  .referral-hero__icon img { width: 116px; height: 116px; }


  .referral-hero h1 { font-size: clamp(44px, 14vw, 62px); }


  .referral-hero__lead { font-size: 14px; }


  .referral-link-box { grid-template-columns: 1fr; }


  .referral-link-box input { min-height: 42px; text-align: center; font-size: 12px; }


  .referral-summary { grid-template-columns: 1fr; }


  .referral-summary article { padding: 21px 12px; }


  .referral-summary article + article { border-top: 1px solid #1e3035; border-left: 0; }


  .referral-summary strong { font-size: 32px; }


  .referral-list-section { margin-top: 48px; }


  .referral-list-section > header { align-items: flex-start; }


  .referral-list-section h2 { font-size: 31px; }


  .referral-person { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 16px 0; }


  .referral-person__avatar { width: 48px; height: 48px; }


  .referral-person > strong { grid-column: 2; }


}





/* ===== MOBILE ANIME DETAIL — 2026-09-15 FINAL LOCK ===== */


@media (max-width: 760px) {


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


    padding: 0 0 108px !important;


  }





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


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


    max-width: 520px !important;


    margin: 0 auto !important;


  }





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


    height: 112px !important;


    margin-bottom: 24px !important;


  }





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


    display: flex !important;


    flex-direction: column !important;


    gap: 0 !important;


  }





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


    width: min(76vw, 244px) !important;


    max-width: 244px !important;


    margin: 0 auto !important;


  }





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


  html body.is-detail:not(.is-watch) #detailPage .anime-poster img,


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


    width: 100% !important;


    max-width: none !important;


    height: auto !important;


    aspect-ratio: 2 / 3 !important;


    border-radius: 10px !important;


    object-fit: cover !important;


  }





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


    display: grid !important;


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


    gap: 8px !important;


    width: 100% !important;


    margin: 12px 0 0 !important;


  }





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


    grid-column: 1 / -1 !important;


  }





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


    width: 100% !important;


    min-width: 0 !important;


    min-height: 44px !important;


    height: auto !important;


    padding: 10px 8px !important;


    border-radius: 10px !important;


    font-size: 9px !important;


    line-height: 1.15 !important;


    white-space: normal !important;


    text-align: center !important;


  }





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


    min-height: 48px !important;


    background: #fff !important;


    color: #090909 !important;


    font-size: 11px !important;


  }





  /* This block must be directly below the poster/actions. */


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


    display: flex !important;


    flex-direction: column !important;


    align-items: center !important;


    width: 100% !important;


    margin-top: 28px !important;


    padding: 0 !important;


    text-align: center !important;


  }





  /* Explicit ordering fixes old mobile rules that were reordering children. */


  html body.is-detail:not(.is-watch) #detailPage .anime-info > .title-line { order: 1 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > .chips { order: 2 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileDescription { order: 3 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #descriptionToggle { order: 4 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailCharacters { order: 5 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #detailChronology { order: 6 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > .meta-list { order: 20 !important; }


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #profileVotes,


  html body.is-detail:not(.is-watch) #detailPage .anime-info > #shareButton { order: 21 !important; }





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


    display: block !important;


    width: 100% !important;


    margin: 0 !important;


  }





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


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


    display: block !important;


    width: 100% !important;


    max-width: 100% !important;


    margin: 0 !important;


    color: #fff !important;


    font-size: clamp(24px, 8vw, 32px) !important;


    font-weight: 900 !important;


    line-height: 1.08 !important;


    text-align: center !important;


    overflow: visible !important;


    -webkit-line-clamp: unset !important;


    -webkit-box-orient: unset !important;


  }





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


    display: none !important;


  }





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


    display: flex !important;


    flex-wrap: wrap !important;


    justify-content: center !important;


    gap: 7px !important;


    width: 100% !important;


    margin: 12px 0 0 !important;


    background: transparent !important;


    overflow: visible !important;


  }





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


    display: inline-flex !important;


    align-items: center !important;


    justify-content: center !important;


    min-height: 25px !important;


    height: 25px !important;


    padding: 0 8px !important;


    border-radius: 999px !important;


    background: #15171b !important;


    font-size: 9px !important;


    font-weight: 800 !important;


  }





  html body.is-detail:not(.is-watch) #detailPage .chips span:nth-child(n+5) {


    display: none !important;


  }





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


    display: block !important;


    width: 100% !important;


    max-width: 430px !important;


    margin: 20px auto 0 !important;


    overflow: visible !important;


    color: rgba(255,255,255,.74) !important;


    font-size: 13px !important;


    font-weight: 600 !important;


    line-height: 1.55 !important;


    text-align: center !important;


    -webkit-line-clamp: unset !important;


  }





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


    display: inline-flex !important;


    align-items: center !important;


    justify-content: center !important;


    gap: 5px !important;


    margin: 8px auto 0 !important;


    padding: 7px 10px !important;


    border: 0 !important;


    background: transparent !important;


    color: rgba(255,255,255,.65) !important;


    font-size: 10px !important;


    font-weight: 850 !important;


  }





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


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


    width: 100% !important;


    max-width: none !important;


    margin: 42px 0 0 !important;


    text-align: left !important;


  }





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


    width: 100% !important;


    max-width: none !important;


    margin: 48px 0 0 !important;


  }





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


    display: block !important;


    width: 100% !important;


    margin: 48px 0 0 !important;


    padding: 16px 17px !important;


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


    border-radius: 13px !important;


    background: #101114 !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dl {


    display: grid !important;


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


    gap: 10px 14px !important;


    margin: 0 !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dt {


    color: rgba(255,255,255,.48) !important;


    font-size: 11px !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dd {


    margin: 0 !important;


    color: #fff !important;


    font-size: 11px !important;


    text-align: right !important;


  }





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


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


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


    display: none !important;


  }


}





/* ===== MOBILE DETAIL SMALL POLISH — 2026-09-15 ===== */


@media (max-width: 760px) {


  /* Bigger label on the main CTA. */


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


    font-size: 13px !important;


    font-weight: 950 !important;


    letter-spacing: .01em !important;


  }





  /* Keep the final info table aligned and readable on narrow phones. */


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


    box-sizing: border-box !important;


    padding: 15px 14px !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dl {


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


    column-gap: 12px !important;


    row-gap: 11px !important;


    align-items: start !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dt,


  html body.is-detail:not(.is-watch) #detailPage #detailFacts dd {


    min-width: 0 !important;


    line-height: 1.28 !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dt {


    text-align: left !important;


  }





  html body.is-detail:not(.is-watch) #detailPage #detailFacts dd {


    text-align: right !important;


    overflow-wrap: anywhere !important;


  }


}





@media (max-width: 360px) {


  html body.is-detail:not(.is-watch) #detailPage #detailFacts dl {


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


    column-gap: 9px !important;


  }


}





/* ===== MOBILE: HIDE ADDITIONAL INFO BOX ===== */


@media (max-width: 760px) {


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


  html body.is-detail:not(.is-watch) #detailPage #detailFacts[hidden],


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


    display: none !important;


  }


}





/* Desktop: additional info stays under poster actions. Mobile: remove it completely. */


@media (max-width: 760px) {


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


    display: none !important;


  }


}








/* ===== MOBILE HEADER + BURGER NAV — 2026-09-15 ===== */


.mobile-nav-burger,


.mobile-nav-drawer,


.mobile-nav-overlay { display: none; }





@media (max-width: 760px) {


  /* Header: only centered search + notifications/profile on the right. */


  html body .topbar,


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


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


    position: sticky !important;


    top: 0 !important;


    z-index: 120 !important;


    display: grid !important;


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


    grid-template-rows: 52px !important;


    align-items: center !important;


    gap: 8px !important;


    width: 100% !important;


    height: 62px !important;


    min-height: 62px !important;


    padding: 6px 12px 4px !important;


    background: transparent !important;


    border: 0 !important;


    box-shadow: none !important;


    backdrop-filter: none !important;


  }





  .topbar .logo,


  .topbar #mobileMenuButton,


  .top-actions .header-random-action,


  .top-actions .header-premium-action {


    display: none !important;


  }





  .top-search,


  .top-search:hover,


  .top-search:focus-within,


  html:not([data-theme="light"]) .top-search:focus-within {


    grid-column: 1 !important;


    grid-row: 1 !important;


    justify-self: center !important;


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


    height: 42px !important;


    margin: 0 !important;


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


    border: 0 !important;


    border-radius: 0 !important;


    background: transparent !important;


    box-shadow: none !important;


    backdrop-filter: none !important;


  }





  .top-search::before,


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





  .top-search button {


    width: 38px !important;


    height: 42px !important;


    padding: 0 !important;


    pointer-events: none !important;


    color: rgba(255,255,255,.62) !important;


    background: transparent !important;


  }





  .top-search button svg {


    width: 19px !important;


    height: 19px !important;


  }





  .top-search input {


    width: 100% !important;


    height: 42px !important;


    padding: 0 8px 0 0 !important;


    border: 0 !important;


    outline: 0 !important;


    background: transparent !important;


    color: #fff !important;


    font-size: 13px !important;


    font-weight: 750 !important;


    text-align: left !important;


  }





  .top-search input::placeholder {


    color: rgba(255,255,255,.55) !important;


  }





  .top-actions {


    grid-column: 2 !important;


    grid-row: 1 !important;


    display: flex !important;


    align-items: center !important;


    gap: 7px !important;


    margin: 0 !important;


  }





  .top-actions .notification-button,


  .top-actions .profile-button {


    display: grid !important;


    place-items: center !important;


    width: 38px !important;


    height: 38px !important;


    min-width: 38px !important;


    border: 0 !important;


    background: transparent !important;


    box-shadow: none !important;


  }





  .top-actions .notification-button span {


    width: 22px !important;


    height: 22px !important;


    background: transparent !important;


  }





  .top-actions .notification-button svg {


    width: 20px !important;


    height: 20px !important;


  }





  .top-actions .profile-button {


    width: 40px !important;


    height: 40px !important;


    border-radius: 50% !important;


  }





  .top-actions .profile-avatar {


    width: 34px !important;


    height: 34px !important;


    border-radius: 50% !important;


  }





  /* Existing mobile bottom nav is the transformed desktop rail. */


  .desktop-rail > a[data-view="profile"] {


    display: none !important;


  }





  .desktop-rail .mobile-nav-burger {


    display: grid !important;


    place-items: center !important;


    appearance: none !important;


    border: 0 !important;


    background: transparent !important;


    color: rgba(255,255,255,.78) !important;


    cursor: pointer !important;


  }





  .burger-lines {


    position: relative !important;


    display: block !important;


    width: 23px !important;


    height: 18px !important;


  }





  .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 .28s cubic-bezier(.2,.8,.2,1), opacity .16s ease !important;


  }


  .burger-lines i:nth-child(1) { top: 1px !important; }


  .burger-lines i:nth-child(2) { top: 8px !important; }


  .burger-lines i:nth-child(3) { top: 15px !important; }





  body.mobile-drawer-open .burger-lines i:nth-child(1) {


    top: 8px !important;


    transform: rotate(45deg) !important;


  }


  body.mobile-drawer-open .burger-lines i:nth-child(2) {


    opacity: 0 !important;


    transform: scaleX(.35) !important;


  }


  body.mobile-drawer-open .burger-lines i:nth-child(3) {


    top: 8px !important;


    transform: rotate(-45deg) !important;


  }





  /* Put the burger exactly where Profile used to sit in the mobile bar. */


  .desktop-rail .mobile-nav-burger {


    order: 30 !important;


  }





  .mobile-nav-overlay {


    position: fixed !important;


    inset: 0 !important;


    z-index: 998 !important;


    display: block !important;


    background: rgba(0,0,0,.54) !important;


    opacity: 0 !important;


    pointer-events: none !important;


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


    transition: opacity .24s ease !important;


  }





  .mobile-nav-overlay[hidden] { display: block !important; }





  .mobile-nav-drawer {


    position: fixed !important;


    z-index: 999 !important;


    left: 12px !important;


    right: 12px !important;


    bottom: 78px !important;


    display: block !important;


    max-height: min(72vh, 620px) !important;


    padding: 16px !important;


    overflow: auto !important;


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


    border-radius: 22px !important;


    background: rgba(14,15,18,.97) !important;


    box-shadow: 0 24px 80px rgba(0,0,0,.58) !important;


    backdrop-filter: blur(22px) saturate(135%) !important;


    opacity: 0 !important;


    visibility: hidden !important;


    transform: translateY(20px) scale(.97) !important;


    transform-origin: bottom center !important;


    pointer-events: none !important;


    transition:


      opacity .22s ease,


      transform .3s cubic-bezier(.2,.85,.2,1),


      visibility .22s step-end !important;


  }





  body.mobile-drawer-open .mobile-nav-overlay {


    opacity: 1 !important;


    pointer-events: auto !important;


  }





  body.mobile-drawer-open .mobile-nav-drawer {


    opacity: 1 !important;


    visibility: visible !important;


    transform: translateY(0) scale(1) !important;


    pointer-events: auto !important;


    transition:


      opacity .22s ease,


      transform .3s cubic-bezier(.2,.85,.2,1),


      visibility 0s step-start !important;


  }





  .mobile-nav-drawer__head {


    display: flex !important;


    align-items: center !important;


    justify-content: space-between !important;


    gap: 14px !important;


    padding: 2px 2px 13px !important;


  }





  .mobile-nav-drawer__head > div {


    display: grid !important;


    gap: 2px !important;


  }





  .mobile-nav-drawer__head span {


    color: var(--orange-2, #ff966b) !important;


    font-size: 9px !important;


    font-weight: 900 !important;


    letter-spacing: .18em !important;


  }





  .mobile-nav-drawer__head strong {


    color: #fff !important;


    font-size: 20px !important;


    font-weight: 900 !important;


  }





  .mobile-nav-drawer__close {


    width: 34px !important;


    height: 34px !important;


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


    border-radius: 50% !important;


    background: #17181c !important;


    color: #fff !important;


    font-size: 22px !important;


    line-height: 1 !important;


  }





  .mobile-nav-drawer__links {


    display: grid !important;


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


    gap: 8px !important;


  }





  .mobile-nav-drawer__links a {


    display: flex !important;


    align-items: center !important;


    min-height: 48px !important;


    padding: 0 13px !important;


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


    border-radius: 13px !important;


    background: #121317 !important;


    color: rgba(255,255,255,.82) !important;


    text-decoration: none !important;


    font-size: 12px !important;


    font-weight: 800 !important;


  }





  .mobile-nav-drawer__links a.is-active {


    border-color: rgba(255,147,104,.26) !important;


    background: rgba(255,147,104,.08) !important;


    color: #ff9a72 !important;


  }





  .mobile-nav-drawer__legal {


    display: grid !important;


    gap: 7px !important;


    margin-top: 13px !important;


    padding-top: 13px !important;


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


  }





  .mobile-nav-drawer__legal a {


    color: rgba(255,255,255,.45) !important;


    font-size: 10px !important;


    font-weight: 700 !important;


    text-decoration: none !important;


  }





  .mobile-nav-drawer__logout {


    width: 100% !important;


    min-height: 42px !important;


    margin-top: 13px !important;


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


    border-radius: 12px !important;


    background: rgba(255,80,80,.04) !important;


    color: #d68484 !important;


    font-size: 11px !important;


    font-weight: 800 !important;


  }


}





@media (max-width: 380px) {


  .topbar {


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


    padding-inline: 8px !important;


  }


  .top-search input { font-size: 12px !important; }


  .top-actions { gap: 3px !important; }


  .top-actions .notification-button,


  .top-actions .profile-button { width: 34px !important; min-width: 34px !important; }


  .mobile-nav-drawer__links { grid-template-columns: 1fr !important; }


}


@media (max-width: 620px) {


}


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


}


/* PREMIUM_PAYMENT_MODAL_V1_END */





/* PREMIUM_PLAN_RUB_V2_BEGIN */


/* Stars stay on the first row; RUB sits neatly under them. */


html body #premiumPage .premium-plan-price {


  display: grid !important;


  grid-template-columns: max-content max-content;


  grid-template-rows: auto auto;


  justify-content: start;


  align-items: end;


  column-gap: 9px;


  row-gap: 5px;


  margin-bottom: 8px !important;


}


html body #premiumPage .premium-plan-price > strong {


  grid-column: 1;


  grid-row: 1;


}


html body #premiumPage .premium-plan-price > span:not(.premium-plan-rub) {


  grid-column: 2;


  grid-row: 1;


}


html body #premiumPage .premium-plan-price > .premium-plan-rub {


  grid-column: 1 / -1;


  grid-row: 2;


  margin: 0 !important;


  padding: 0 !important;


  color: rgba(255,255,255,.50) !important;


  font-size: 13px !important;


  line-height: 1.15 !important;


  font-weight: 700 !important;


  letter-spacing: 0 !important;


  white-space: nowrap;


}


@media (max-width: 420px) {


  html body #premiumPage .premium-plan-price > .premium-plan-rub {


    font-size: 12px !important;


  }


}
/* PREMIUM_PAYMENT_ICONS_FIX_V3_END */