:root {
  color-scheme: dark;
  --bg: #05070a;
  --panel: #090d12;
  --panel-2: #0d1218;
  --panel-3: #121922;
  --line: #202c38;
  --line-soft: #17212b;
  --text: #f6f8fa;
  --muted: #8796a5;
  --orange: #ffc08a;
  --orange-2: #ffd7ad;
  --blue: #2997d6;
  --blue-soft: rgba(41, 151, 214, .12);
  --danger: #e65b45;
  --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: #ffc08a;
  --orange-2: #ffd7ad;
  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, #05070a);
  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: #0a0a0a;
  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, #ffc08a 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: #090d12;
  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: 24px;
  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: #ffd7ad;
}
.hero-carousel__genre {
  padding: 4px 9px;
  border: 1px solid rgba(255,192,138,.22);
  border-radius: 6px;
  background: rgba(255,192,138,.12);
  color: #ffc08a;
}
.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: #0a0a0a;
}

.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); }
.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%, #090d12),
      #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: #090d12;
  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: #090d12;
  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: #030405 !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: solid black circle, 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: #000 !important;
  background-color: #000 !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: none !important;
  -webkit-backdrop-filter: none !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: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: #000 !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: #000 !important;
  background-color: #000 !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: #000 !important;
  background-color: #000 !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: #030405 !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: #030405 !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: #030405 !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: #ffc08a;
}
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: #ffc08a;
  --orange-2: #ffd7ad;
  --danger: #d84545;
  --anime-primary: #ffc08a;
  --anime-accent: #ffd7ad;
  --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: #ffc08a;
  --orange-2: #ffd7ad;
  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: #ffc08a; }
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; }
.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: #171b22;
  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: #0a0a0a;
  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: #ffc08a;
  --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: #0a0a0a !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: #ffc08a;
  --orange-2: #ffd7ad;
  --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, #ffd7ad);
}

.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: #ffc08a;
  --orange-2: #ffd7ad;
  --watch-orange: #ffc08a;
  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: #0a0a0a !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: #171B22;
  --panel-2: #20252D;
  --panel-3: #20252D;
  --line: rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.06);
  --muted: #9CA3AF;
  --orange: #FFA477;
  --orange-2: #FFD0AC;
  --watch-orange: #FFA477;
  --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)),
    #171b22 !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: #171B22 !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: #171B22 !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: #171B22;
  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: #ffa477 !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: #171b22 !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: #ffa477 !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: #171b22 !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: #ffa477 !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: #171b22 !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: #171b22 !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: #ffa477 !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: #171b22 !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: #171b22 !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: #171b22 !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: #171b22 !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: #030405 !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,
          #050607 !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, #050607 0%, rgba(5, 6, 7, .02) 24%, rgba(5, 6, 7, .02) 76%, #050607 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,
            #050607 !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, #050607 0%, rgba(5, 6, 7, .18) 30%, rgba(5, 6, 7, .06) 70%, #050607 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, #050607 0%, rgba(5, 6, 7, .04) 25%, rgba(5, 6, 7, .04) 75%, #050607 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: #030405 !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 !important;
}

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, #121318 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;
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  max-width: calc(100% - 350px);
}

.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__identity p {
  margin: 8px 0 0;
  color: #a8abb2;
  font-size: 16px;
  font-weight: 750;
}

.profile-hero__identity .profile-presence { margin-top: 10px; color: #9699a1; font-size: 13px; }
.profile-hero__identity .profile-presence::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #686b72; }
.profile-hero__identity .profile-presence.is-online { color: #72d887; }
.profile-hero__identity .profile-presence.is-online::before { background: #4dcc6a; box-shadow: 0 0 0 4px rgba(77,204,106,.12); }

.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-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: 18px 2px 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-status-copy { min-height: 92px; padding-bottom: 22px; border-bottom: 1px solid #292b32; }
.profile-status-copy p { margin: 14px 0 0; color: #d1d3d8; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.profile-statline { display: grid; gap: 0; margin-top: 10px; }

.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-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-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 {
  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 input:focus, .settings-clean-row select:focus { border-color: #62656e; }
.settings-clean-row input[type="checkbox"] { justify-self: end; width: 42px; height: 22px; accent-color: #ff9166; 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: #0d0e11; 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; bottom: 26px; max-width: calc(100% - 48px); }
  .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 { align-items: flex-start; flex-direction: column; gap: 14px; }
  .profile-hero__avatar { width: 94px; height: 94px; flex-basis: 94px; }
  .profile-hero__identity h1 { font-size: 38px; }
  .profile-statline > span { min-width: 0; }
  .settings-preview { min-height: 170px; padding: 22px; }
  .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%; }
}