/*
 * Anime Shuffle presentation layer, shared by the React components.
 * Theme colors arrive through --cool/--warm; layout remains independent of cover size.
 * Sections: base controls, ambient background, navigation, discovery cards,
 * details, watchlist, dialogs, responsive breakpoints, and reduced-motion support.
 */
.install-app {
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #14232d;
  overflow-wrap: anywhere;
}
.install-app-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.install-app-heading img {
  flex: 0 0 48px;
  border-radius: 12px;
}
.install-app-heading div {
  min-width: 0;
}
.install-app-heading h3 {
  margin: 0;
}
.install-app-heading p {
  margin: 4px 0 0;
}
.install-app p {
  font-size: 0.875rem;
  line-height: 1.55;
}
.install-app-help {
  color: var(--muted);
}
.install-app button {
  min-height: 44px;
  white-space: normal;
}
/* Android APK invitation: a native modal bottom sheet, scrollable on short screens. */
.android-app-sheet {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(100%, 520px);
  max-width: 100%;
  max-height: calc(100dvh - 16px);
  padding: 26px max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text);
  background: #14232d;
  border: 1px solid #526c7c;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 64px #0008;
  overflow-wrap: anywhere;
}
.android-app-sheet::backdrop {
  background: #030910a6;
  backdrop-filter: blur(3px);
}
.android-app-handle {
  width: 48px;
  height: 5px;
  margin: -14px auto 22px;
  border-radius: 8px;
  background: #71899a;
}
.android-app-close {
  position: absolute;
  right: 10px;
  top: 12px;
  min-width: 44px;
  min-height: 44px;
}
.android-app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
}
.android-app-brand img {
  border-radius: 12px;
  flex: 0 0 48px;
}
.android-app-brand .eyebrow {
  font-size: 0.7rem;
  line-height: 1.5;
  margin: 0;
}
.android-app-sheet h2 {
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  line-height: 1.2;
  margin: 18px 0 12px;
}
.android-app-sheet p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0;
}
.android-app-sheet .android-app-sync {
  margin-bottom: 22px;
}
button.apk-download:disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #394650;
  border: 1px solid #56616b;
  color: #b8c0c6;
  font-weight: 700;
  opacity: 1;
  cursor: not-allowed;
  white-space: normal;
  box-shadow: none;
}
.android-app-sheet .android-app-status {
  text-align: center;
  font-size: 0.78rem;
  margin: 8px 0 16px;
}
.android-app-continue {
  min-height: 50px;
  border-radius: 12px;
  white-space: normal;
}
.android-app-sheet .android-app-footer {
  font-size: 0.8rem;
  text-align: center;
  margin: 18px 0 0;
}
.footer-support {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-support:focus-visible {
  outline: 2px solid #7cddf4;
  outline-offset: 4px;
  border-radius: 3px;
}
@media (max-height: 500px) {
  .android-app-sheet {
    padding-top: 22px;
  }
  .android-app-sheet h2 {
    margin-top: 12px;
  }
  .android-app-sheet .android-app-sync {
    margin-bottom: 12px;
  }
}
@font-face {
  font-family: Shuffle;
  src: local("Bahnschrift");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  color-scheme: dark;
  font-size: 16px;
}
body {
  --cool: 20, 55, 70;
  --warm: 55, 38, 61;
  --surface: #0c161df5;
  --line: #304a58;
  --text: #eff4f8;
  --muted: #aebccb;
  margin: 0;
  background: #0c1217;
  color: var(--text);
  font-family: Shuffle, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}
button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
input {
  touch-action: manipulation;
}
button,
input {
  font: inherit;
}
button,
a {
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s,
    color 0.18s;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
button:not(:disabled):active {
  transform: translateY(1px);
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #e3f3ff;
  outline-offset: 4px;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  color: inherit;
}
button svg,
a svg {
  pointer-events: none;
}
svg.icon {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
[hidden] {
  display: none !important;
}
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 8% 25%,
      rgba(var(--cool), 0.38),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 98% 88%,
      rgba(var(--warm), 0.42),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 0% 82%,
      rgba(var(--warm), 0.25),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 86% 5%,
      rgba(var(--cool), 0.22),
      transparent 36%
    ),
    #0b1217;
}
.ambient::before {
  content: "";
  position: absolute;
  inset: -15%;
  background-image: var(--anime-cover, none);
  background-position: center;
  background-size: cover;
  filter: blur(32px);
  opacity: 0.24;
  pointer-events: none;
}
/* Anime-palette motion: gradients stay static; only transforms and opacity animate. */
.ambient {
  pointer-events: none;
}
.ambient::before {
  opacity: 0.12;
}
.aurora-ribbons,
.liquid-field,
.comet-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.aurora-ribbon {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: ribbon-flow 12s ease-in-out infinite alternate;
}
.ribbon-halo {
  stroke-width: 110px;
  opacity: 0.32;
  filter: none;
}
.ribbon-core {
  stroke-width: 24px;
  opacity: 0.85;
  filter: none;
}
.ribbon-edge {
  stroke: rgba(var(--cool), 0.85);
  stroke-width: 2px;
}
.ribbon-1 {
  animation-delay: -8s;
  animation-duration: 16s;
  opacity: 0.8;
}
.ribbon-2 {
  animation-delay: -15s;
  animation-duration: 20s;
  opacity: 0.55;
}
@keyframes ribbon-flow {
  from {
    transform: translate(-10%, -19%) rotate(-14deg) scale(1.2, 0.85);
    opacity: 0.55;
  }
  to {
    transform: translate(9%, 15%) rotate(16deg) scale(0.95, 1.15);
    opacity: 1;
  }
}
.liquid-ring {
  position: absolute;
  left: 68%;
  top: 60%;
  width: 60vmax;
  height: 60vmax;
  border-radius: 48% 52% 46% 54%;
  border: 2px solid rgba(var(--cool), 0.7);
  background: radial-gradient(
    ellipse,
    transparent 52%,
    rgba(var(--warm), 0.18) 60%,
    rgba(var(--cool), 0.42) 64%,
    transparent 68%
  );
  box-shadow:
    inset 0 0 25px rgba(var(--cool), 0.5),
    0 0 35px rgba(var(--warm), 0.3);
  animation: liquid-spread 12s linear infinite;
}
.ring-1 {
  animation-delay: -3s;
}
.ring-2 {
  animation-delay: -6s;
}
.ring-3 {
  animation-delay: -9s;
}
@keyframes liquid-spread {
  0% {
    transform: translate(-50%, -50%) scale(0.12) rotate(-15deg);
    opacity: 0;
  }
  18% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(25deg);
    opacity: 0;
  }
}
.comet-stars {
  position: absolute;
  inset: -10%;
  opacity: 0.7;
  background-image:
    radial-gradient(
      circle at 15% 25%,
      rgba(var(--cool), 0.95) 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(var(--warm), 0.8) 1.5px,
      transparent 3px
    );
  background-size:
    173px 211px,
    257px 293px;
  animation: star-drift 24s ease-in-out infinite alternate;
}
.comet-trail {
  position: absolute;
  left: calc(-25% + var(--n) * 12%);
  top: calc(-20% + var(--n) * 9%);
  width: clamp(70px, 12vw, 180px);
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--warm), 0.75),
    rgba(var(--cool), 1)
  );
  box-shadow: 0 0 10px rgba(var(--cool), 0.65);
  animation: comet-drift 14s linear infinite;
  animation-delay: calc(var(--n) * -2.7s);
}
.comet-trail::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--cool));
  box-shadow: 0 0 12px 3px rgba(var(--cool), 0.8);
}
@keyframes comet-drift {
  0% {
    transform: translate(-20vw, -20vh) rotate(32deg);
    opacity: 0;
  }
  15%,
  65% {
    opacity: 0.85;
  }
  100% {
    transform: translate(60vw, 60vh) rotate(32deg);
    opacity: 0;
  }
}
@keyframes star-drift {
  to {
    transform: translate(3%, 4%);
    opacity: 1;
  }
}
.ambient[data-paused="true"] * {
  animation-play-state: paused;
}
/* Dialogs already obscure the artwork; avoid spending frames behind them. */
body:has(dialog[open]) .ambient * {
  animation-play-state: paused;
}
.ambient[data-enabled="false"] {
  background: #0b1217;
}
.ambient[data-enabled="false"]::before {
  display: none;
}
.setting-row select {
  max-width: 100%;
  min-height: 44px;
}
@media (max-width: 560px) {
  .setting-row:has(select[aria-label="Animated background"]) {
    flex-wrap: wrap;
    gap: 10px;
  }
  .comet-trail:nth-of-type(n + 7) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient * {
    animation: none;
  }
  .aurora-ribbon {
    opacity: 0.65;
  }
  .ribbon-1 {
    transform: translate(0, -25%) rotate(15deg);
  }
  .ribbon-2 {
    display: none;
  }
  .liquid-ring {
    transform: translate(-50%, -50%);
    opacity: 0.45;
  }
  .ring-1 {
    transform: translate(-50%, -50%) scale(0.7);
  }
  .ring-2,
  .ring-3,
  .comet-trail {
    display: none;
  }
}
.topbar {
  min-height: 83px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  padding: 9px 3.4%;
  border-bottom: 1px solid #3d50594d;
  background: #0a131ce8;
  backdrop-filter: blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none !important;
}
.brand img {
  width: 86px;
  height: 59px;
  object-fit: contain;
}
.brand > span {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(23px, 2.45vw, 36px);
  letter-spacing: -1.2px;
}
.brand b {
  color: #95d9ef;
}
.topbar nav {
  display: flex;
  gap: 16px;
}
.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 28px;
  padding: 11px 22px;
  color: #bfcad8;
  font-size: 16px;
  font-weight: 600;
}
.nav-button.active {
  color: #f4fbff;
  border-color: #26748d;
  background: linear-gradient(120deg, #193643, #12303a);
  box-shadow: inset 0 0 16px #1b63752e;
}
.nav-button:hover {
  background: #1c303c;
}
.account-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.account {
  border: 1px solid #334750;
  border-radius: 26px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #0c171e;
  padding: 11px 17px;
  color: #9fe8f5;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.account.is-connected:after {
  content: "";
  width: 7px;
  height: 7px;
  background: #5ee8b0;
  border-radius: 50%;
}
.icon-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  color: #c4d5e4;
}
.icon-button:hover {
  background: #243541;
}
.count {
  font-size: 12px;
  border-radius: 20px;
  background: #22414c;
  padding: 2px 6px;
}
.notice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  background: #152430e0;
  border-bottom: 1px solid #3d5460;
  color: #bdcdda;
  font-size: 13px;
}
.notice button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #8dbccd;
  padding: 2px 0;
  color: #b7e5f2;
  font-size: 13px;
  white-space: nowrap;
}
main {
  width: 100%;
  padding: 0 24px;
  min-height: calc(100vh - 160px);
}
.feed-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 69px;
  justify-content: center;
  padding: 13px 0;
}
.reason {
  border: 1px solid #669daf9c;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 30px;
  background: #0c1923b8;
  padding: 8px 17px;
  color: #b3e2ef;
  font-size: 13px;
  font-weight: 600;
}
.reason svg {
  width: 17px;
  height: 17px;
}
.progress {
  color: #94a8b7;
  font-size: 12px;
}
.cards-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin: 0 auto;
  max-width: 1200px;
}
.anime-card {
  width: min(100%, 548px);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #527783;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 25px 80px #0004;
  transition:
    opacity 0.18s,
    transform 0.22s;
}
.anime-card.changing {
  opacity: 0.4;
  transform: translateY(6px);
}
.poster-stage {
  position: relative;
  height: clamp(248px, 36vh, 390px);
  overflow: hidden;
  background: #122531;
  isolation: isolate;
}
.poster-glow {
  position: absolute;
  inset: -40px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(0.7);
  opacity: 0.38;
  z-index: -1;
}
.poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  display: block;
}
.poster-fade {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(transparent, #0c161d);
  pointer-events: none;
}
.media-badge {
  position: absolute;
  top: 16px;
  left: 17px;
  border: 1px solid #d4e9fa36;
  background: #0b1826cd;
  backdrop-filter: blur(10px);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 5px;
}
.poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9bb7c5;
  gap: 16px;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(var(--cool), 0.4), transparent),
    radial-gradient(ellipse at 80% 80%, rgba(var(--warm), 0.4), transparent),
    #15232e;
}
.poster-fallback svg {
  width: 60px;
  height: 60px;
  opacity: 0.6;
}
.card-content {
  padding: 0 23px 21px;
  position: relative;
  margin-top: -5px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
#anime-title {
  font-weight: 750;
  letter-spacing: -0.7px;
  line-height: 1.14;
  font-size: clamp(25px, 2.6vw, 35px);
  margin: 0 0 13px;
}
.metadata {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d0d9e3;
  font-size: 14px;
}
.metadata svg {
  width: 18px;
  height: 18px;
}
.metadata .dot {
  color: #7895a6;
}
.genres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 13px 0;
}
.genre {
  padding: 5px 11px;
  border: 1px solid #23768f;
  background: #13364642;
  color: #67d6f3;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1.1;
}
.genre:nth-child(3n + 2) {
  color: #d5a7ef;
  border-color: #765493;
  background: #512b6129;
}
.genre:nth-child(3n) {
  color: #ff9cac;
  border-color: #864451;
  background: #61233325;
}
.synopsis {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #bdc9d7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 46px;
  margin: 13px 0 16px;
}
.details-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid #87bed1;
  background: #10202a38;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 600;
}
.details-toggle:hover {
  background: #19313d;
}
.details-toggle > span:last-child {
  margin-left: auto;
}
.details-toggle > span:first-child {
  margin-left: auto;
}
.details-toggle svg {
  width: 19px;
  height: 19px;
}
.reaction-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin: 20px 0 10px;
  font-size: 13px;
  color: #c9d2df;
}
.reaction-labels span {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.reaction-labels span:before,
.reaction-labels span:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #667f8a65;
}
.reactions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.reaction {
  min-height: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border-radius: 12px;
  border: 1px solid #ffffff21;
  color: #082033;
  box-shadow: inset 0 1px 0 #fff3;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  padding: 10px 4px;
}
.reaction svg {
  height: 25px;
  width: 25px;
  stroke-width: 2.4;
}
.reaction.good {
  background: #68edb4;
}
.reaction.bad {
  background: #ff798e;
}
.reaction.watch {
  background: #67cafa;
}
.reaction.nope {
  background: #c7a4f2;
}
.reaction:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow: 0 7px 20px #0004;
}
.reaction kbd {
  position: absolute;
  right: 5px;
  top: 3px;
  font-size: 10px;
  opacity: 0;
  font-family: inherit;
}
.reaction:hover kbd {
  opacity: 0.65;
}
.secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.secondary-actions button,
.outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #18252d;
  border: 1px solid #415965;
  border-radius: 10px;
  min-height: 42px;
  padding: 9px 15px;
  font-size: 14px;
}
.secondary-actions button:hover:not(:disabled),
.outline:hover {
  background: #263b47;
}
.secondary-actions svg {
  width: 20px;
  height: 20px;
}
.details-card {
  width: min(100%, 490px);
  position: relative;
  border: 1px solid #527783;
  background: #0c161df7;
  border-radius: 20px;
  padding: 29px 27px;
  box-shadow: 0 25px 80px #0003;
  animation: panel-in 0.25s ease;
}
.details-card .eyebrow {
  margin-top: 4px;
}
.eyebrow {
  display: block;
  color: #a5c4d5;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 650;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.details-card h2 {
  font-size: 29px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 10px;
  padding-right: 10px;
}
.close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.alternate-title {
  color: #aab8ca;
  font-size: 13px;
  margin-bottom: 18px;
}
.full-synopsis {
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.75;
  color: #c5d0dd;
  font-size: 15px;
  white-space: pre-line;
  max-height: 280px;
  overflow: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}
.detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  border-top: 1px solid #355261;
  border-bottom: 1px solid #355261;
  padding: 24px 0;
  margin: 24px 0;
}
.detail-facts > div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.detail-facts svg {
  color: #b0c9df;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.detail-facts dt {
  font-size: 12px;
  color: #a7b9c9;
  margin-bottom: 5px;
}
.detail-facts dd {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}
.why-card {
  display: flex;
  gap: 13px;
  padding: 18px;
  border: 1px solid #447181;
  background: #10252d67;
  border-radius: 12px;
}
.why-card svg {
  color: #82dcef;
  flex: none;
}
.why-card h3 {
  font-size: 15px;
  color: #a5e5f5;
  margin-bottom: 7px;
}
.why-card p {
  font-size: 13px;
  line-height: 1.7;
  color: #b9d0df;
}
.external-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #7dadbf;
  border-radius: 11px;
  padding: 13px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
}
.external-button:hover {
  background: #1c3642;
  text-decoration: none;
}
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 20px;
  color: #849eae;
  font-size: 12px;
  flex-wrap: wrap;
}
footer a {
  color: #b0d2e3;
}
footer button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #849eae;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.empty {
  max-width: 580px;
  margin: 40px auto;
  text-align: center;
  padding: 50px 30px;
  border: 1px solid #3d5869;
  border-radius: 20px;
  background: #10202bd9;
}
.empty > span svg {
  width: 50px;
  height: 50px;
  margin: 0 auto 20px;
  color: #96dcf4;
}
.empty h2 {
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 15px;
}
.empty p {
  color: #abbccc;
  line-height: 1.7;
  margin-bottom: 25px;
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #9bddf1;
  color: #0b2432;
  font-weight: 750;
  min-height: 45px;
  padding: 12px 22px;
  border: 0;
  border-radius: 11px;
  text-decoration: none !important;
  font-size: 15px;
}
.primary:hover {
  background: #b5eafb;
}
.quiet {
  display: block;
  margin: 15px auto 0;
  background: none;
  border: 0;
  color: #a8c3d4;
  text-decoration: underline;
  font-size: 13px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 38px auto 26px;
  gap: 20px;
  max-width: 1140px;
}
.section-heading h1 {
  font-size: 36px;
  letter-spacing: -1px;
}
.section-heading p {
  color: #a9bdcd;
  margin-top: 8px;
  font-size: 14px;
}
.section-heading .eyebrow {
  margin-bottom: 7px;
}
.subtabs {
  max-width: 1140px;
  margin: 0 auto 24px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #30424e;
}
.subtabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 13px 16px;
  color: #a5b8c7;
  font-size: 14px;
}
.subtabs button.selected {
  border-bottom-color: #9bd9ee;
  color: #d6f1fa;
}
.subtabs span {
  margin-left: 6px;
  color: #9db6c9;
  font-size: 12px;
}
.watchlist-grid {
  max-width: 1140px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.saved-card {
  overflow: hidden;
  border: 1px solid #344e5e;
  border-radius: 15px;
  background: #101c25;
  display: flex;
  flex-direction: column;
}
.saved-image {
  flex-shrink: 0;
  aspect-ratio: 3/3.7;
  background: linear-gradient(130deg, #223d51, #352333);
  overflow: hidden;
  position: relative;
}
.saved-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saved-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saved-content h3 {
  font-size: 18px;
  line-height: 1.3;
}
.saved-content p {
  font-size: 12px;
  color: #a6b9c8;
}
.saved-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.saved-actions button,
.saved-actions a {
  border: 1px solid #496474;
  border-radius: 7px;
  padding: 7px 10px;
  background: #1b303e;
  font-size: 12px;
}
.saved-actions .remove {
  margin-left: auto;
  background: none;
  border-color: transparent;
  color: #a4b5c5;
}
.saved-status {
  color: #8ee1c0 !important;
  font-size: 12px;
}
.dialog {
  width: min(530px, calc(100% - 30px));
  padding: 34px;
  background: #101c26;
  color: #ecf3f8;
  border: 1px solid #5c8197;
  border-radius: 21px;
  box-shadow: 0 25px 90px #000a;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  scrollbar-width: thin;
}
.dialog::backdrop {
  background: #040912bb;
  backdrop-filter: blur(8px);
}
.dialog h2 {
  font-size: 30px;
  letter-spacing: -0.8px;
  margin-bottom: 18px;
}
.dialog p {
  font-size: 14px;
  line-height: 1.75;
  color: #b6c6d7;
  margin-bottom: 18px;
}
.welcome {
  text-align: center;
  max-width: 470px;
}
.welcome-logo {
  width: 210px;
  height: 145px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}
.welcome .primary,
.welcome .outline {
  width: 100%;
  margin-top: 12px;
}
.welcome h2 {
  font-size: 33px;
}
.welcome small {
  display: block;
  font-size: 12px;
  color: #8fa8ba;
  margin-top: 18px;
}
.setting-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid #2f4351;
}
.setting-row strong {
  font-size: 15px;
  line-height: 1.5;
}
.setting-row p {
  font-size: 13px;
  margin: 5px 0 0;
}
.setting-row input {
  appearance: none;
  width: 46px;
  height: 26px;
  border-radius: 24px;
  background: #384753;
  border: 1px solid #647584;
  flex: none;
  cursor: pointer;
  position: relative;
}
.setting-row input:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9e4ed;
  top: 3px;
  left: 3px;
  transition: transform 0.15s;
}
.setting-row input:checked {
  background: #41839a;
  border-color: #89d9e9;
}
.setting-row input:checked:after {
  transform: translateX(20px);
  background: #fff;
}
.setting-row input:disabled {
  opacity: 0.45;
}
.setup-help {
  background: #0b151e;
  border: 1px solid #334c5d;
  border-radius: 12px;
  padding: 18px;
  margin: 5px 0 20px;
}
.setup-help h3 {
  font-size: 17px;
}
.setup-help ol {
  padding-left: 20px;
  font-size: 13px;
  color: #c1d0de;
  line-height: 1.9;
}
.setup-help p {
  font-size: 12px;
  margin-bottom: 10px;
}
.setup-help a {
  font-size: 13px;
  color: #8fd3e9;
  display: flex;
  gap: 8px;
  align-items: center;
}
.setup-help svg {
  width: 15px;
  height: 15px;
}
code {
  font-size: 12px;
  background: #243643;
  padding: 2px 4px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.connection-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.connection-info strong {
  font-size: 17px;
  display: block;
}
.connection-info p {
  font-size: 12px;
  margin: 3px 0 0;
}
.danger-outline {
  border: 1px solid #a45971;
  background: #402234;
  color: #ffd4df;
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 14px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 30px);
  background: #203745f5;
  border: 1px solid #6c99ac;
  box-shadow: 0 10px 40px #0006;
  border-radius: 13px;
  padding: 14px 23px;
  color: #f0f9ff;
  font-size: 14px;
  z-index: 100;
  line-height: 1.5;
  text-align: center;
}
#mode-label {
  color: #83a1b7;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (min-height: 1000px) {
  .poster-stage {
    height: 390px;
  }
  .synopsis {
    -webkit-line-clamp: 3;
  }
  .card-content {
    padding-bottom: 25px;
  }
  .reactions {
    gap: 12px;
  }
  .reaction {
    min-height: 78px;
  }
}
@media (max-width: 1100px) {
  .topbar {
    gap: 18px;
    padding: 10px 20px;
  }
  .brand > span {
    font-size: 25px;
  }
  .brand img {
    width: 70px;
    height: 50px;
  }
  .nav-button {
    padding: 10px 14px;
  }
  .account {
    padding: 10px 13px;
  }
  .cards-layout.expanded .anime-card {
    width: 48%;
  }
  .cards-layout.expanded .details-card {
    width: 48%;
    padding: 25px 20px;
  }
  .cards-layout.expanded .reaction {
    font-size: 12px;
  }
  .cards-layout.expanded {
    gap: 18px;
  }
  .watchlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .topbar {
    padding: 8px 15px;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 112px;
  }
  .brand > span {
    font-size: 25px;
  }
  .brand img {
    width: 64px;
    height: 44px;
  }
  .account-actions {
    gap: 4px;
  }
  .account {
    padding: 9px 10px;
    font-size: 12px;
  }
  .account svg {
    height: 17px;
    width: 17px;
  }
  .topbar nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 8px;
  }
  .nav-button {
    padding: 8px 24px;
    font-size: 14px;
  }
  .nav-button svg {
    width: 18px;
    height: 18px;
  }
  .icon-button {
    width: 34px;
    height: 34px;
  }
  .notice {
    font-size: 12px;
    gap: 10px;
    text-align: left;
  }
  main {
    padding: 0 15px;
  }
  .feed-top {
    min-height: 63px;
  }
  .reason {
    font-size: 12px;
    padding: 7px 13px;
  }
  .anime-card {
    width: min(100%, 520px);
    border-radius: 17px;
  }
  .poster-stage {
    height: clamp(220px, 33vh, 350px);
  }
  .card-content {
    padding: 0 18px 18px;
  }
  .synopsis {
    font-size: 14px;
  }
  .reactions {
    gap: 8px;
  }
  .reaction {
    font-size: 12px;
    min-height: 70px;
  }
  .reaction kbd {
    display: none;
  }
  .cards-layout.expanded .anime-card {
    width: min(100%, 520px);
  }
  .cards-layout.expanded .details-card {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-height: 83dvh;
    overflow: auto;
    z-index: 50;
    border-radius: 22px 22px 0 0;
    padding: 28px 24px;
    box-shadow: 0 -30px 0 100vh #030912aa;
    overscroll-behavior: contain;
  }
  .details-card .full-synopsis {
    max-height: none;
  }
  .watchlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
  .section-heading {
    margin-top: 25px;
  }
  .section-heading h1 {
    font-size: 30px;
  }
  .section-heading .outline {
    padding: 8px;
    font-size: 12px;
  }
  .saved-content {
    padding: 12px;
  }
  .saved-content h3 {
    font-size: 16px;
  }
  .subtabs button {
    padding: 12px 10px;
    font-size: 13px;
  }
  footer {
    font-size: 11px;
    gap: 12px;
  }
  .dialog {
    padding: 30px 24px;
  }
  .details-card h2 {
    font-size: 26px;
  }
}
@media (max-width: 380px) {
  .brand > span {
    font-size: 21px;
  }
  .brand img {
    width: 48px;
  }
  .account > span:first-child {
    display: none;
  }
  .account {
    font-size: 11px;
    padding: 8px;
  }
  .reactions {
    gap: 5px;
  }
  .reaction {
    font-size: 11px;
  }
  .card-content {
    padding: 0 12px 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Comfortable reading sizes; short labels stay compact within the four-action row. */
.synopsis {
  font-size: 16px;
  line-height: 1.6;
  min-height: 51px;
}
.full-synopsis {
  font-size: 16px;
}
.genre {
  font-size: 14px;
}
.connection-settings {
  margin-bottom: 20px;
}
/* Each definition-list item is a vertical label/value pair. */
.detail-facts > .fact {
  display: block;
}

/* First-visit forms share the existing card palette and native dialog focus trap. */
.account-form {
  display: grid;
  gap: 10px;
  text-align: left;
}
.account-form label {
  font-size: 14px;
  margin-top: 10px;
  font-weight: 650;
}
.account-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #567384;
  border-radius: 9px;
  padding: 10px 12px;
  background: #0b151e;
  color: #eff4f8;
}
.account-form small,
.preference-group small {
  color: #a6bdcc;
  font-size: 13px;
  line-height: 1.5;
}
.account-form .primary {
  margin-top: 16px;
}
.dialog .account-note {
  font-size: 13px;
  margin: 22px 0 0;
}
.dialog .form-error {
  color: #ffb8c5;
  background: #4b24324d;
  padding: 10px 13px;
  border-radius: 8px;
  margin: 8px 0;
}
.full-width {
  width: 100%;
  margin: 12px 0;
}
.preference-group {
  border: 0;
  padding: 0;
  margin: 24px 0;
  min-width: 0;
}
.preference-group legend {
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 10px;
}
.preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.preference-option {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border: 1px solid #466070;
  border-radius: 12px;
  text-align: left;
  background: #13232e;
}
.preference-option strong {
  font-size: 15px;
}
.preference-option span {
  font-size: 13px;
  line-height: 1.5;
  color: #b8cbd8;
}
.preference-option[aria-pressed="true"],
.any-choice[aria-pressed="true"] {
  border-color: #95d9ef;
  background: #234755;
  box-shadow: inset 0 0 0 1px #95d9ef;
}
.any-choice {
  border: 1px solid #466070;
  border-radius: 20px;
  background: #13232e;
  padding: 8px 16px;
  font-size: 14px;
}
.dialog .preference-help {
  font-size: 13px;
  margin-bottom: 12px;
}
.runtime-estimate {
  font-size: 13px;
  color: #a9c9da;
  margin-top: 8px;
}
@media (max-width: 380px) {
  .preference-grid {
    grid-template-columns: 1fr;
  }
}

/* Stacked accordion leaderboard. Only the expanded row mounts the full anime card. */
main.wide-main {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 24px;
}
.recommendations-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.recommendations-heading h1 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 8px 0;
}
.recommendations-heading p,
.shortlist-note {
  color: var(--muted, #aebcc9);
}
.recommendations-heading > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.recommendations-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.leaderboard-row {
  --rank-color: #b8cbd9;
  border: 1px solid #3e5463;
  border-radius: 9px;
  background: linear-gradient(110deg, #10212bcc, #0b1720e8);
  overflow: hidden;
}
.leaderboard-row.medal-1 {
  --rank-color: #ffe18a;
  border: 2px solid #e4bf51;
}
.leaderboard-row.medal-2 {
  --rank-color: #e0e9f3;
  border: 2px solid #b7c7d8;
}
.leaderboard-row.medal-3 {
  --rank-color: #edb181;
  border: 2px solid #c68e61;
}
.leaderboard-heading {
  margin: 0;
  font: inherit;
}
.leaderboard-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 16px 0 0;
  gap: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rank-color);
  text-align: left;
  cursor: pointer;
}
.leaderboard-toggle:hover {
  background: #ffffff08;
}
.leaderboard-toggle:focus-visible {
  outline: 2px solid #80d9e2;
  outline-offset: -4px;
}
.leaderboard-number {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 64px;
  flex-shrink: 0;
  background: #ffffff07;
  font-size: 19px;
  font-weight: 800;
}
.leaderboard-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.leaderboard-toggle > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transform: rotate(90deg);
}
.leaderboard-toggle[aria-expanded="true"] > svg {
  transform: rotate(-90deg);
}
.leaderboard-row .ranked-card {
  display: grid;
  grid-template-columns: minmax(180px, 28%) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  border: 0;
  border-top: 1px solid #ffffff18;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 12px;
  gap: 18px;
}
/* MAL covers vary in resolution. Scale down to fit without enlarging
   smaller originals, and keep the cover independent of the text column. */
.leaderboard-row .poster-stage {
  height: 340px;
  min-height: 0;
  align-self: start;
  border-radius: 8px;
}
.leaderboard-row .poster {
  object-fit: scale-down;
}
.leaderboard-row .poster-glow {
  display: none;
}
.leaderboard-row .card-content {
  padding: 8px 12px 12px 0;
}
.ranked-card h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.ranked-card .genres {
  gap: 6px;
}
.ranked-card .synopsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ranked-card .reactions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.ranked-card .reaction {
  min-width: 0;
  padding: 10px 5px;
  font-size: 13px;
  min-height: 58px;
}
.ranked-card .details-toggle {
  font-size: 13px;
}
.match-reason {
  font-size: 13px;
  color: #b9d8d9;
  padding: 10px 0;
  border-bottom: 1px solid #ffffff18;
}
.release-status {
  font-size: 12px;
  color: #a3e3cd;
  margin: 8px 0;
  font-weight: 700;
}
.release-status.unreleased {
  color: #dcc797;
}
.reaction:disabled {
  filter: grayscale(1);
  opacity: 0.4;
  cursor: not-allowed;
}
.recommendation-details {
  margin: 0 12px 12px;
}
.recommendation-details .details-card {
  width: 100%;
  max-width: none;
  position: relative;
}
@media (max-width: 800px) {
  .recommendations-heading {
    flex-direction: column;
    align-items: start;
  }
  .topbar nav {
    overflow-x: auto;
    max-width: 100%;
  }
  .leaderboard-row .ranked-card {
    grid-template-columns: minmax(180px, 35%) minmax(0, 1fr);
    gap: 12px;
  }
  .ranked-card .reactions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ranked-card .reaction-labels {
    display: none;
  }
}
@media (max-width: 560px) {
  main.wide-main {
    padding: 22px 12px;
  }
  .leaderboard-toggle {
    gap: 10px;
  }
  .leaderboard-number {
    width: 44px;
  }
  .leaderboard-title {
    font-size: 14px;
  }
  .leaderboard-row .ranked-card {
    grid-template-columns: 1fr;
  }
  .leaderboard-row .poster-stage {
    height: 260px;
    min-height: 0;
  }
  .leaderboard-row .card-content {
    padding: 8px;
  }
}

/* Reacted rows stay in their batch until refresh; text explains the muted state. */
.leaderboard-row.reacted {
  filter: grayscale(1);
  opacity: 0.55;
}
.reaction-feedback {
  font-size: 12px;
  color: #c5d3dc;
  white-space: nowrap;
}
.watchlist-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 16px;
}
.watchlist-controls label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 210px;
  color: #c4d8e3;
}
.watchlist-controls input,
.watchlist-controls select {
  background: #12232e;
  color: #e3eef5;
  border: 1px solid #456171;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
}
.watchlist-count {
  color: #aebcc9;
  font-size: 13px;
}
.saved-content small {
  display: block;
  color: #aebcc9;
  margin: 0;
}
/* Keep links and actions aligned along the bottom of each watchlist row. */
.saved-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.saved-footer .quiet {
  margin: 4px auto 0;
}
.primary.danger-confirm {
  display: flex;
  margin-inline: auto;
  background: #c93643;
  color: #fff;
}
.primary.danger-confirm:hover:not(:disabled) {
  background: #af2733;
}
@media (max-width: 560px) {
  .reaction-feedback {
    font-size: 10px;
    white-space: normal;
    max-width: 85px;
  }
}

/* Dropdowns share one compact grid; taste setup uses illustrated search results. */
.watchlist-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.watchlist-controls label {
  min-width: 0;
  font-size: 13px;
}
.watchlist-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.watchlist-actions > .quiet {
  margin: 0 auto 0 0;
}
/* Wrap the pair as one unit, keeping import beside export on small screens too. */
.watchlist-transfer {
  display: flex;
  gap: 12px;
  max-width: 100%;
}
.watchlist-transfer .outline {
  flex: 1;
  margin: 0;
  min-height: 44px;
}
.genre-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 24px;
}
.genre-choices button {
  border: 1px solid transparent;
  border-radius: 999px;
  margin: 0;
  padding: 8px 14px;
}
.genre-choices button[aria-pressed="true"] {
  background: #284e62;
  color: #d1f5ff;
  border-color: #95d9ef;
  box-shadow: 0 0 0 2px #95d9ef;
}
.taste-setup > label {
  display: block;
  margin-top: 18px;
}
.taste-setup > input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background: #12232e;
  color: #e3eef5;
  border: 1px solid #456171;
  margin-top: 12px;
}
.favorite-results {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow: auto;
}
.favorite-results button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 8px;
  background: #152b38;
  color: #e3eef5;
  border: 1px solid #35566a;
}
.favorite-results [aria-selected="true"] button,
.favorite-results button:hover {
  background: #284e62;
}
.favorite-results img,
.favorite-selections img {
  width: 38px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
}
.favorite-results small {
  display: block;
  color: #afc5d1;
  margin-top: 4px;
}
.favorite-selections {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.favorite-selections > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px;
  background: #152b38;
  border-radius: 8px;
}
.favorite-selections span {
  flex: 1;
}
.backup-format {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c4d8e3;
}
.backup-format select {
  padding: 10px;
  border-radius: 8px;
  background: #12232e;
  color: #e3eef5;
  border: 1px solid #456171;
}
.watchlist-import {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #35566a;
  border-radius: 10px;
}
.watchlist-import label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: #e3eef5;
}
.watchlist-import p {
  font-size: 13px;
  color: #afc5d1;
}
.watchlist-import button {
  margin-right: 10px;
}
.sync-warning {
  position: relative;
  z-index: 5;
  padding: 12px 20px;
  background: #563e22;
  color: #fff3da;
  text-align: center;
}

/* The spinner occupies the feed only while work is pending; no placeholder cards. */
.loading-state {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.loading-ring {
  width: 150px;
  height: 150px;
  position: relative;
  margin-bottom: 24px;
}
.loading-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.loading-track,
.loading-arc {
  fill: none;
  stroke-width: 4;
}
.loading-track {
  stroke: #ffffff14;
}
.loading-arc {
  stroke: #79dbe6;
  stroke-linecap: round;
  stroke-dasharray: 95 220;
  transform-origin: 60px 60px;
  animation: loading-orbit 1.4s linear infinite;
}
.loading-ring strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8e8f0;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.loading-state h2 {
  font-size: 21px;
  margin: 0 0 10px;
}
.loading-state p {
  color: #a9b7c4;
  margin: 0;
}
@keyframes loading-orbit {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-arc {
    animation: none;
  }
}

.english-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #b5f3fa;
  background: #173d4bb3;
  border-left: 3px solid #79dbe6;
  border-radius: 4px;
  padding: 0.12em 0.45em;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0.25em;
  overflow-wrap: anywhere;
}

.audience-preference {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}
.audience-preference select,
.preference-score-range select {
  background: #12232e;
  color: #e3eef5;
  border: 1px solid #456171;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  max-width: 100%;
}
.audience-preference small {
  color: #aebcc9;
  line-height: 1.5;
}

.genre-focus {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 8px 0 12px;
  padding: 7px 10px;
  background: rgba(121, 186, 207, 0.08);
  border: 1px solid rgba(121, 186, 207, 0.25);
  border-radius: 8px;
  color: #bed7e2;
  font-size: 12px;
  line-height: 1.5;
}
.genre-focus strong {
  color: #a8e0ee;
  font-weight: 600;
}

.genre-focus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.genre-change {
  padding: 5px 9px;
  border: 1px solid rgba(121, 186, 207, 0.45);
  border-radius: 6px;
  background: rgba(121, 186, 207, 0.1);
  color: #a8e0ee;
  font-size: 12px;
  white-space: nowrap;
}
.genre-change:hover {
  background: rgba(121, 186, 207, 0.2);
  border-color: #79bacf;
}

/* Responsive Discover layout: compact cards and browser navigation at the top. */
.mobile-reaction-label {
  display: none;
}
[data-layout="familiar"] .topbar {
  min-height: 58px;
  gap: clamp(12px, 2vw, 30px);
  padding: 5px 3%;
}
[data-layout="familiar"] .brand img {
  width: 60px;
  height: 42px;
}
[data-layout="familiar"] .brand > span {
  font-size: clamp(22px, 2vw, 29px);
}
[data-layout="familiar"] .topbar nav {
  gap: 6px;
  min-width: 0;
}
[data-layout="familiar"] .nav-button {
  padding: 9px 14px;
  gap: 7px;
  font-size: 14px;
}
[data-layout="familiar"] .account {
  max-width: 180px;
  padding: 9px 12px;
}
[data-layout="familiar"] .account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-layout="familiar"] main:not(.wide-main) {
  min-height: calc(100dvh - 120px);
}
[data-layout="familiar"] .feed-top {
  min-height: 46px;
  padding: 7px 0;
  flex-direction: row;
  gap: 12px;
}
[data-layout="familiar"] .reason {
  font-size: 12px;
  padding: 6px 12px;
}
[data-layout="familiar"] .cards-layout {
  gap: 20px;
  max-width: 1090px;
}
[data-layout="familiar"] .cards-layout .anime-card {
  width: min(100%, 470px);
  min-width: 0;
}
[data-layout="familiar"] .cards-layout .poster-stage {
  height: clamp(150px, calc(100svh - 550px), 235px);
}
[data-layout="familiar"] .cards-layout .card-content {
  padding: 0 17px 14px;
}
[data-layout="familiar"] #anime-title {
  font-size: clamp(23px, 2.2vw, 28px);
  margin-bottom: 7px;
  overflow-wrap: anywhere;
}
[data-layout="familiar"] .cards-layout .metadata {
  font-size: 13px;
}
[data-layout="familiar"] .cards-layout .runtime-estimate {
  margin: 4px 0;
  font-size: 12px;
}
[data-layout="familiar"] .cards-layout .release-status {
  margin: 5px 0;
  font-size: 12px;
}
[data-layout="familiar"] .cards-layout .genres {
  height: auto;
  gap: 5px;
  margin: 8px 0;
}
[data-layout="familiar"] .cards-layout .genre {
  font-size: 12px;
  padding: 4px 8px;
}
[data-layout="familiar"] .cards-layout .synopsis {
  min-height: 0;
  margin: 8px 0;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}
[data-layout="familiar"] .cards-layout .details-toggle {
  min-height: 40px;
  padding: 8px 10px;
}
[data-layout="familiar"] .cards-layout .reaction-labels {
  margin: 10px 0 6px;
}
[data-layout="familiar"] .cards-layout .reactions {
  gap: 8px;
}
[data-layout="familiar"] .cards-layout .reaction {
  min-height: 48px;
  padding: 7px 4px;
  gap: 4px;
  font-size: 12px;
}
[data-layout="familiar"] .cards-layout .reaction svg {
  width: 20px;
  height: 20px;
}
[data-layout="familiar"] .cards-layout .secondary-actions {
  margin-top: 8px;
  gap: 8px;
}
[data-layout="familiar"] .cards-layout .secondary-actions button {
  min-height: 38px;
  padding: 7px;
}
[data-layout="familiar"] .cards-layout .details-card {
  width: min(100%, 600px);
  min-width: 0;
  padding: 0;
  max-height: none;
  overflow: hidden;
}
[data-layout="familiar"] .cards-layout .details-header {
  position: relative;
  padding: 20px 24px 0;
}
[data-layout="familiar"] .cards-layout .details-header .eyebrow {
  margin: 0;
}
[data-layout="familiar"] .cards-layout .details-body {
  padding: 20px 24px 24px;
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
[data-layout="familiar"] .cards-layout .details-card h2 {
  font-size: 24px;
  overflow-wrap: anywhere;
}
[data-layout="familiar"] .cards-layout .full-synopsis {
  font-size: 16px;
  line-height: 1.7;
  max-height: none;
  overflow: visible;
}
[data-layout="familiar"] .cards-layout .detail-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0;
  margin: 14px 0;
}
[data-layout="familiar"] .cards-layout .detail-facts .fact {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
[data-layout="familiar"] .cards-layout .detail-facts dd {
  font-size: 13px;
}
[data-layout="familiar"] .cards-layout .why-card {
  padding: 12px;
  gap: 8px;
}
[data-layout="familiar"] .cards-layout .external-button {
  margin-top: 12px;
  padding: 10px;
}
@media (min-width: 901px) and (max-width: 1100px) {
  [data-layout="familiar"] .topbar {
    gap: 10px;
    padding-inline: 16px;
  }
  [data-layout="familiar"] .brand > span {
    font-size: 23px;
  }
  [data-layout="familiar"] .nav-button {
    padding-inline: 9px;
    font-size: 13px;
  }
  [data-layout="familiar"] .account {
    max-width: 115px;
  }
  [data-layout="familiar"] .cards-layout.expanded > .anime-card {
    width: calc(44% - 10px);
  }
  [data-layout="familiar"] .cards-layout.expanded > .details-card {
    width: calc(56% - 10px);
  }
}
@media (max-width: 900px) {
  /* Two real web-header rows avoid overflowing a desktop nav on small screens. */
  [data-layout="familiar"] .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    min-height: 0;
    padding: 5px 12px 0;
  }
  [data-layout="familiar"] .brand {
    min-width: 0;
    gap: 4px;
  }
  [data-layout="familiar"] .brand img {
    width: 48px;
    height: 36px;
  }
  [data-layout="familiar"] .brand > span {
    font-size: clamp(19px, 4.9vw, 25px);
    letter-spacing: -0.7px;
  }
  [data-layout="familiar"] .account-actions {
    margin-left: 0;
    gap: 2px;
  }
  [data-layout="familiar"] .account {
    width: 36px;
    height: 40px;
    padding: 8px;
  }
  [data-layout="familiar"] .account span {
    display: none;
  }
  [data-layout="familiar"] .topbar .icon-button {
    width: 36px;
    height: 40px;
  }
  [data-layout="familiar"] .topbar nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1.55fr;
    gap: 3px;
    width: 100%;
  }
  [data-layout="familiar"] .nav-button {
    position: relative;
    min-width: 0;
    min-height: 40px;
    padding: 8px 3px;
    border-radius: 8px 8px 0 0;
    font-size: clamp(12px, 3.1vw, 14px);
    gap: 3px;
  }
  [data-layout="familiar"] .nav-button > svg {
    display: none;
  }
  [data-layout="familiar"] .nav-button .count {
    font-size: 10px;
    padding: 1px 3px;
    min-width: 0;
    max-width: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-layout="familiar"] .cards-layout.expanded .anime-card {
    width: min(100%, 470px);
  }
  [data-layout="familiar"] .cards-layout dialog.details-card {
    position: fixed;
    inset: 96px 12px 12px auto;
    margin: 0;
    width: min(600px, calc(100% - 24px));
    height: calc(100dvh - 108px);
    max-height: calc(100dvh - 108px);
    color: var(--text);
    box-shadow: 0 20px 80px #0008;
    border-radius: 16px;
  }
  [data-layout="familiar"] .cards-layout dialog.details-card[open] {
    display: flex;
    flex-direction: column;
  }
  [data-layout="familiar"] .cards-layout dialog.details-card::backdrop {
    background: #030912a8;
  }
  [data-layout="familiar"] .cards-layout .details-header {
    flex: none;
    padding-top: 20px;
    padding-bottom: 16px;
  }
  [data-layout="familiar"] .cards-layout .details-body {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
  }
  [data-layout="familiar"] .cards-layout .full-synopsis {
    max-height: none;
    overflow: visible;
  }
  [data-layout="familiar"] .cards-layout .detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  [data-layout="familiar"] main:not(.wide-main) {
    padding-inline: 10px;
  }
  [data-layout="familiar"] .feed-top {
    gap: 6px;
    flex-wrap: wrap;
    min-height: 36px;
    padding: 5px 0;
  }
  [data-layout="familiar"] .reason {
    font-size: 11px;
    padding: 5px 8px;
  }
  [data-layout="familiar"] .progress {
    font-size: 11px;
  }
  [data-layout="familiar"] .cards-layout .poster-stage {
    height: clamp(135px, 22svh, 185px);
  }
  [data-layout="familiar"] .cards-layout .card-content {
    padding: 0 12px 10px;
  }
  [data-layout="familiar"] #anime-title {
    font-size: 23px;
    margin-bottom: 5px;
  }
  [data-layout="familiar"] .cards-layout .synopsis {
    -webkit-line-clamp: 1;
    margin: 7px 0;
  }
  [data-layout="familiar"] .cards-layout .reaction-labels {
    display: none;
  }
  [data-layout="familiar"] .cards-layout .reactions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
  }
  [data-layout="familiar"] .cards-layout .mobile-reaction-label {
    display: block;
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
  }
  [data-layout="familiar"] .cards-layout .reaction {
    min-height: 44px;
    flex-direction: row;
    gap: 7px;
    font-size: 13px;
  }
  [data-layout="familiar"] .cards-layout .reaction kbd {
    display: none;
  }
  [data-layout="familiar"] .cards-layout .secondary-actions button {
    min-height: 40px;
  }
  [data-layout="familiar"] .cards-layout dialog.details-card {
    inset: 104px 8px 8px;
    width: calc(100% - 16px);
    height: calc(100dvh - 112px);
    max-height: calc(100dvh - 112px);
    border-radius: 16px;
  }
  [data-layout="familiar"] .cards-layout .details-body {
    padding-inline: 16px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  [data-layout="familiar"] .cards-layout .details-header {
    padding-left: 16px;
  }
  [data-layout="familiar"] footer {
    flex-wrap: wrap;
    padding-inline: 12px;
  }
}

/* A shared save or another feed's request must never silently disable a card. */
.loading-state.loading-state-compact {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 12px 16px;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 3px 12px;
  text-align: left;
  align-items: center;
}
.loading-state-compact .loading-ring {
  width: 48px;
  height: 48px;
  margin: 0;
  grid-row: 1 / 3;
}
.loading-state-compact .loading-ring strong {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.loading-state-compact h2,
.loading-state-compact p {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.loading-state-compact h2 {
  font-size: 14px;
  margin: 0;
}
.loading-state-compact p {
  font-size: 12px;
  margin: 0;
}

/* The synopsis uses the reading surface, never a second scrolling text box. */
.details-card .full-synopsis {
  max-height: none;
  overflow: visible;
  padding-right: 0;
  margin: 0;
}
.details-header h2 {
  padding-right: 24px;
}
.details-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid #355261;
  margin-top: 20px;
}
.details-tabs [role="tab"] {
  min-width: 0;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #c5d0dd;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.details-tabs [aria-selected="true"] {
  color: #89e8f1;
  border-bottom-color: #79dbe6;
  font-weight: 650;
}
.details-tabs [role="tab"]:focus-visible,
.details-body [role="tabpanel"]:focus-visible {
  outline: 2px solid #79dbe6;
  outline-offset: 3px;
}
.details-body [role="tabpanel"][hidden] {
  display: none;
}
.details-body .detail-facts {
  margin-top: 0;
  border-top: 0;
}
.details-body .external-button {
  margin-top: 24px;
}
@media (max-width: 900px) {
  [data-layout="familiar"] .cards-layout .details-header {
    padding-bottom: 0;
  }
  [data-layout="familiar"] .cards-layout .details-body {
    flex: 1;
  }
}
@media (max-width: 560px) {
  .details-tabs {
    gap: 0;
    margin-top: 14px;
  }
  .details-tabs [role="tab"] {
    font-size: 13px;
  }
}

/* Inside the native dialog's top layer, anchored to the viewport without layout shifts. */
.preference-save-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
  padding: 8px 14px;
  border: 1px solid #52778b;
  border-radius: 10px;
  background: #17313ef5;
  color: #b5f3fa;
  font-size: 13px;
  box-shadow: 0 4px 18px #0004;
  white-space: nowrap;
}

.nav-new-badge {
  border-radius: 8px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1.2;
  color: #b5f3fa;
  background: #234755;
}
.recommendations-unlock-toast {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  width: min(560px, calc(100% - 30px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #52778b;
  border-radius: 13px;
  background: #17313efa;
  box-shadow: 0 8px 30px #0006;
  font-size: 14px;
}
.recommendations-unlock-toast strong {
  display: block;
  color: #b5f3fa;
}
@media (max-width: 520px) {
  .recommendations-unlock-toast {
    flex-wrap: wrap;
  }
  .nav-new-badge {
    padding: 1px 3px;
    font-size: 9px;
  }
}

.preference-score-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.preference-score-range label {
  display: grid;
  gap: 7px;
  color: #b6cbd7;
  font-size: 13px;
}
.preference-score-range select {
  width: 100%;
  min-width: 0;
}

/* Reserve the same player space before/after play, including short mobile viewports.
   YouTube requires a 200px player height; controls live outside its viewport. */
.poster-stage.has-preview {
  min-height: 260px;
}
.watch-preview {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding: 10px 17px;
  min-height: 44px;
  border: 1px solid #7795a5;
  border-radius: 24px;
  background: #10202aee;
  color: #e6f5ff;
  font-size: 14px;
}
.watch-preview[hidden] {
  display: none;
}
.watch-preview:hover {
  background: #214654;
}
.trailer-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: 36px minmax(200px, 1fr) 24px;
  background: #05090e;
}
.trailer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12px;
}
.trailer-toolbar button {
  background: #19313d;
  color: #e6f5ff;
  border: 1px solid #456171;
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 12px;
}
.trailer-panel iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 200px;
}
.trailer-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 10px;
  text-align: center;
  color: #d7e6ef;
  font-size: 14px;
}
.trailer-footer {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0 5px;
  font-size: 10px;
  color: #aebfcb;
}
.trailer-footer a {
  color: #a6dbe8;
  text-align: center;
}

/* Media stays within the existing card widths, including the mobile details dialog. */
.details-tabs.with-media {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.details-tabs [role="tab"] {
  padding-inline: 5px;
}
.trailer-panel {
  grid-template-rows: 36px minmax(200px, 1fr) 24px;
}
.trailer-panel[hidden],
.media-gallery[hidden] {
  display: none;
}
.poster-stage.has-preview {
  min-height: 320px;
}
.inline-trailer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #05090e;
}
.inline-trailer-frame {
  flex: 1;
  position: relative;
  min-width: 200px;
  min-height: 200px;
}
.inline-trailer-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 0;
}
.leaderboard-row .poster-stage.has-preview {
  min-height: 360px;
  min-width: 200px;
}
.leaderboard-row .ranked-card {
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
}
@media (max-width: 700px) {
  .leaderboard-row .ranked-card {
    grid-template-columns: 1fr;
  }
}
.inline-trailer-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px 12px;
  flex-wrap: wrap;
  padding: 8px;
  color: #c8dce9;
  font-size: 12px;
}
.inline-trailer-feedback [role="status"] {
  display: flex;
  align-items: center;
  gap: 7px;
}
.inline-trailer-feedback a {
  color: #a6dbe8;
}
.inline-trailer-feedback button,
.anime-media button,
.media-empty button {
  border: 1px solid #456171;
  border-radius: 8px;
  background: #19313d;
  color: #e6f5ff;
  padding: 9px 12px;
  min-height: 44px;
}
.anime-media .inline-trailer-frame {
  aspect-ratio: 16 / 9;
  flex: none;
}
.media-note {
  color: #b7c9d7;
  font-size: 13px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.media-trailers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.media-trailers button {
  text-align: left;
  overflow-wrap: anywhere;
}
.media-trailers button[aria-pressed="true"] {
  border-color: #89e8f1;
  background: #204453;
}
.media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.media-gallery button {
  padding: 4px;
  overflow: hidden;
}
.media-gallery img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.media-expanded {
  display: grid;
  justify-items: center;
  gap: 12px;
}
.media-expanded img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 12px;
  color: #c8dce9;
}
.media-image-error {
  display: block;
  padding: 20px 8px;
  color: #b7c9d7;
  font-size: 13px;
}
.media-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid #456171;
  border-top-color: #89e8f1;
  border-radius: 50%;
  animation: media-spin 0.8s linear infinite;
}
@keyframes media-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-spinner {
    animation: none;
  }
}
@media (max-width: 560px) {
  .details-tabs [role="tab"] {
    padding-inline: 7px;
  }
}

@media (max-width: 560px) {
  .details-tabs.with-media {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .details-tabs.with-media [role="tab"] {
    grid-column: span 2;
  }
  .details-tabs.with-media [role="tab"]:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Reserve each media tile's geometry before its image arrives. Grid previews
   crop to fit; selecting gallery artwork still shows the complete original. */
.watch-preview:disabled {
  cursor: default;
  opacity: 0.9;
}
.media-gallery {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  align-items: start;
}
.media-gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 9px;
}
.media-picture-frame {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.media-trailers {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: stretch;
}
.media-trailers button {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.media-trailer-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.media-image {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background: #10212d;
  overflow: hidden;
}
.media-tile { position: relative; min-width: 0; }
.media-tile > button { width: 100%; }
.media-tile-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; font-size: 12px; text-align: center; }
.card-media-loading { width: 100%; min-height: 240px; }
.artwork-fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.poster-fallback .artwork-fallback { width: 100%; height: 100%; opacity: 1; }
span.leaderboard-cover { display: block; width: 32px; height: 44px; overflow: hidden; }
.media-cover-fallback { display: grid; gap: 16px; justify-items: center; }
.media-cover-fallback > .media-image { width: min(100%, 260px); aspect-ratio: 2 / 3; }
.media-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.media-image img.is-loaded {
  opacity: 1;
}
.media-image-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.media-image-error {
  font-size: 11px;
  padding: 10px;
  text-align: center;
}
.media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #07121be0;
  border: 1px solid #b1e6ee;
  border-radius: 50%;
  font-size: 14px;
}
.media-trailer-title {
  display: block;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.media-expanded .media-image {
  height: auto;
  min-height: 140px;
  background: transparent;
}
.media-expanded img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

.image-carousel-stage {
  height: clamp(220px, 48svh, 480px);
  min-width: 0;
  touch-action: pan-y pinch-zoom;
  overflow: hidden;
  border: 1px solid #355261;
  border-radius: 10px;
}
.image-carousel-stage .media-image {
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.image-carousel-stage img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  /* Fit the full artwork, shrinking large sources without enlarging small ones. */
  object-fit: scale-down;
  object-position: center;
  user-select: none;
}
.image-carousel-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
  text-align: center;
  margin-top: 12px;
  color: #d9edf4;
}
.image-carousel-controls button {
  padding: 0;
  font-size: 28px;
  line-height: 1;
}
.image-carousel-controls button:disabled {
  opacity: 0.4;
}
.image-carousel-dots {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 6px auto 0;
  overflow-x: auto;
}
.image-carousel-dots button {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}
.image-carousel-dots button span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #526d7e;
}
.image-carousel-dots button[aria-current="true"] span {
  width: 9px;
  height: 9px;
  background: #89e8f1;
}
@media (max-width: 560px) {
  .image-carousel-stage {
    height: clamp(200px, 42svh, 420px);
  }
}
.image-carousel-dots button {
  width: 26px;
  min-width: 26px;
}

.image-view-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 12px;
  border: 1px solid #355261;
  border-radius: 10px;
  background: #0c1a24;
}
.image-view-switch button {
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: #b7c9d7;
  font-size: 13px;
}
.image-view-switch button[aria-pressed="true"] {
  color: #a9f1f5;
  background: #204453;
}

/* Profile insights use existing evidence and stay visually separate from picks. */
.profile-page {
  max-width: 1120px;
  margin: auto;
  padding: 12px 0 30px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  border: 1px solid #335366;
  border-radius: 20px;
  background: linear-gradient(120deg, #183345, #152030 70%);
}
.profile-avatar {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border: 2px solid #79d9e5;
  border-radius: 50%;
  color: #a5ebf2;
  background: #1c354a;
  font-size: 30px;
}
.profile-header h1 {
  margin: 4px 0 10px;
  overflow-wrap: anywhere;
}
.profile-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #a4b8c9;
  margin: 0;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: #b3c7d4;
  font-size: 13px;
}
.profile-meta a {
  color: #9ee8ef;
}
.profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 18px;
}
.profile-section-heading h2 {
  margin: 0 0 8px;
}
.profile-section-heading p,
.profile-caption {
  color: #b3c7d4;
  font-size: 13px;
  line-height: 1.5;
}
.profile-taste-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 16px 0 30px;
}
.profile-taste-card,
.profile-contrast {
  padding: 20px;
  border: 1px solid #34596a;
  border-radius: 16px;
  background: linear-gradient(135deg, #172f3c, #111f2d);
  min-width: 0;
}
.profile-taste-card:nth-child(3n + 2) {
  border-color: #555379;
  background: linear-gradient(135deg, #242a43, #111f2d);
}
.profile-taste-card.curious {
  border-color: #66583b;
}
.profile-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
  color: #e8f7fc;
}
.profile-card-heading h3 {
  margin: 0;
  font-size: 19px;
  text-transform: capitalize;
}
.profile-card-heading > span {
  color: #93e3ee;
  font-size: 24px;
}
.profile-covers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.profile-covers a {
  min-width: 0;
  text-decoration: none;
  color: #e3edf5;
  font-size: 12px;
}
.profile-covers img {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 8px;
  background: #0c1823;
  margin-bottom: 8px;
}
.profile-covers a > span {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.profile-covers small {
  display: block;
  color: #a8c0ce;
  margin-top: 5px;
  font-size: 10px;
}
.profile-covers .english-title {
  font-size: 10px;
}
.profile-empty {
  padding: 35px;
  text-align: center;
  background: #132532;
  border: 1px solid #34596a;
  border-radius: 16px;
}
.profile-contrast {
  margin: 16px 0;
}
.profile-contrast > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.taste-explorer {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  border: 1px solid #34596a;
  border-radius: 18px;
  background: #112331;
  margin-bottom: 30px;
  padding: 20px;
}
.taste-map {
  position: relative;
  min-height: 460px;
}
.taste-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.taste-map line {
  stroke: #548194;
  stroke-width: 0.35;
}
.taste-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 110px;
  min-height: 92px;
  padding: 10px;
  border-radius: 50%;
  border: 1px solid #6378a5;
  background: #24344d;
  color: #dcebf8;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.taste-node[aria-pressed="true"] {
  border-color: #96f2f3;
  background: #245161;
  box-shadow: 0 0 18px #68d7e233;
}
.taste-evidence {
  min-width: 0;
  align-self: center;
}
@media (max-width: 760px) {
  .profile-taste-grid,
  .taste-explorer {
    grid-template-columns: 1fr;
  }
  .profile-header {
    padding: 20px;
    gap: 15px;
  }
  .profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 23px;
  }
  .profile-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .taste-map {
    min-height: 420px;
  }
  .profile-contrast > div {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 400px) {
  .taste-explorer {
    padding: 10px;
  }
  .taste-node {
    width: 83px;
    min-height: 80px;
    font-size: 10px;
  }
  .taste-map {
    min-height: 360px;
  }
  .profile-taste-card {
    padding: 14px;
  }
  .profile-covers {
    gap: 8px;
  }
}

/* Optional reaction attribution stays in the existing toast, away from the card. */
.vote-attribution {
  margin-top: 8px;
}
.vote-attribution-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.vote-attribution > span {
  display: block;
  font-size: 12px;
  color: #bfdde8;
  margin: 4px 0 10px;
}
.reaction-reason-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.reaction-reason-options button {
  padding: 7px 10px;
  border: 1px solid #638695;
  background: #233f4f;
  border-radius: 18px;
  color: #effaff;
  font-size: 12px;
}
.reaction-reason-options button:hover,
.reaction-reason-options button:focus-visible {
  background: #34596c;
  border-color: #a4dceb;
}
.episode-coverage {
  color: #bbd2e0;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid #546777;
  border-radius: 10px;
}
#toast:has(.reaction-reason-options) {
  max-height: 65dvh;
  overflow-y: auto;
  box-sizing: border-box;
  width: min(440px, calc(100% - 30px));
}

/* The owner dashboard shares the site's palette without changing discovery. */
.admin-workspace {
  max-width: 1180px;
  margin: auto;
  padding: 28px 24px 70px;
  color: var(--text, #f1edf8);
}
.admin-header,
.admin-heading,
.admin-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-header {
  margin-bottom: 30px;
}
.admin-header > div {
  flex: 1;
}
.admin-header h1 {
  margin: 5px 0;
}
.admin-brand img {
  width: 84px;
  height: 72px;
  object-fit: contain;
}
.admin-heading {
  justify-content: space-between;
}
.admin-heading p {
  max-width: 740px;
}
.admin-panel {
  padding: 24px;
  background: rgba(30, 25, 47, 0.85);
  border: 1px solid #574768;
  border-radius: 18px;
  margin: 20px 0;
}
.admin-panel h2 {
  margin: 0 0 12px;
}
.admin-panel p,
.admin-panel li {
  line-height: 1.65;
}
.admin-workspace label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-weight: 600;
}
.admin-workspace select,
.admin-workspace input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #75618d;
  border-radius: 9px;
  background: #211a30;
  color: #f4efff;
  box-sizing: border-box;
}
.admin-workspace button,
.admin-workspace .soft-button {
  padding: 11px 16px;
  border: 1px solid #83679e;
  border-radius: 10px;
  background: #352641;
  color: #f9f2ff;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.admin-workspace button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-workspace a {
  color: #dfc4ff;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.admin-stats > div {
  padding: 20px 16px;
  border: 1px solid #574768;
  background: #241b32;
  border-radius: 14px;
  display: grid;
  gap: 8px;
}
.admin-stats strong {
  font-size: 30px;
  color: #d7b4ff;
}
.admin-stats span,
.admin-workspace .muted,
.admin-workspace small {
  color: #bcaeca;
  line-height: 1.5;
}
.admin-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.admin-columns > .admin-panel {
  margin: 10px 0;
}
.admin-actions {
  margin: 18px 0;
}
.admin-alert,
.admin-notice {
  padding: 14px 18px;
  border-radius: 10px;
  background: #392942;
  border: 1px solid #ab79ce;
}
.admin-alert {
  background: #3c202c;
  border-color: #db769a;
}
.admin-account-id {
  display: block;
  padding: 16px;
  background: #191322;
  border-radius: 10px;
  overflow-wrap: anywhere;
  user-select: all;
}
.admin-import-list {
  max-height: 230px;
  overflow: auto;
}
.admin-workspace small {
  display: block;
  font-weight: 400;
}
.admin-profiles details {
  border-bottom: 1px solid #554263;
  padding: 14px 0;
}
.admin-profiles summary {
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.admin-profiles summary span {
  color: #c5b1d5;
  font-size: 13px;
}
.admin-profile-body {
  padding: 12px 0;
}
.admin-table-scroll {
  overflow: auto;
}
.admin-workspace table {
  border-collapse: collapse;
  min-width: 570px;
  width: 100%;
  font-size: 14px;
}
.admin-workspace th,
.admin-workspace td {
  padding: 12px 10px;
  border-bottom: 1px solid #50405e;
  text-align: left;
  vertical-align: top;
}
.admin-workspace td:first-child {
  min-width: 160px;
}
.admin-diagnostics {
  margin: 0;
}
.admin-diagnostics > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid #44354f;
}
.admin-diagnostics dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.trait-tracker {
  margin: 1rem 0;
}
.trait-tracker-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}
.trait-tracker-filters label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.trait-tracker-filters input,
.trait-tracker-filters select {
  width: 100%;
  min-width: 0;
  padding: 0.6rem;
}
.trait-tracker small {
  display: block;
  margin-top: 0.4rem;
}
.trait-tracker code {
  overflow-wrap: anywhere;
}
.trait-tracker-pages {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}
.admin-trait-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.admin-trait-list span {
  padding: 6px 9px;
  background: #33253f;
  border-radius: 8px;
  font-size: 13px;
}
.admin-workspace .admin-danger {
  border-color: #ba5168;
  color: #ffc6d0;
}
.admin-working {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #52346d;
  color: white;
  border-radius: 12px;
  padding: 10px 24px;
  box-shadow: 0 6px 30px #0008;
  z-index: 1000;
}
@media (max-width: 760px) {
  .admin-workspace {
    padding: 18px 14px 60px;
  }
  .admin-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-panel {
    padding: 18px;
  }
  .admin-header {
    gap: 10px;
  }
  .admin-header h1 {
    font-size: 25px;
  }
  .admin-header > .soft-button {
    width: 100%;
    text-align: center;
  }
  .admin-brand img {
    width: 65px;
    height: 60px;
  }
}

/* Owner operations: compact at desktop widths, stacked and scroll-safe on phones. */
.admin-research-section[hidden] {
  display: none;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 24px;
  border-bottom: 1px solid #344653;
  padding-bottom: 16px;
}
.admin-tabs button {
  color: #c5d3dd;
  background: #14232f;
  border: 1px solid #344653;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
}
.admin-tabs button.active {
  background: #284a56;
  border-color: #80d9e2;
  color: #fff;
}
.admin-operations h2,
.admin-operations h3 {
  margin-top: 0;
}
.admin-operations .admin-panel {
  margin-bottom: 20px;
}
.admin-operations label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0;
}
.admin-operations input:not([type="checkbox"]),
.admin-operations select,
.admin-operations textarea {
  color: #edf2f7;
  background: #0c1821;
  border: 1px solid #405562;
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 100%;
  min-width: 0;
}
.admin-operations textarea {
  min-height: 80px;
  resize: vertical;
}
.admin-account-search {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-account-search label:first-child {
  flex: 1;
  min-width: 200px;
}
.admin-account-search button {
  margin-bottom: 12px;
}
.admin-text-button {
  background: transparent;
  border: 0;
  color: #80d9e2;
  padding: 4px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.admin-account-detail {
  border-top: 1px solid #405562;
  margin-top: 24px;
  padding-top: 24px;
}
.admin-account-detail .admin-account-id {
  margin-bottom: 18px;
}
.admin-taste-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.admin-taste-grid details {
  background: #142630;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.admin-preference-editor fieldset {
  border: 1px solid #405562;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0;
}
.admin-preference-editor label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.admin-sparkbars {
  height: 150px;
  display: flex;
  align-items: end;
  gap: 4px;
  margin: 16px 0 32px;
}
.admin-sparkbars > div {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.admin-sparkbars span {
  display: block;
  width: 100%;
  background: #5ba9b8;
  border-radius: 4px 4px 0 0;
}
.admin-sparkbars small {
  position: absolute;
  top: 100%;
  color: #a6becb;
  font-size: 10px;
}
.admin-operations .admin-diagnostics dd {
  overflow-wrap: anywhere;
}
.admin-operations td {
  overflow-wrap: anywhere;
  max-width: 350px;
}
@media (max-width: 700px) {
  .admin-taste-grid {
    grid-template-columns: 1fr;
  }
  .admin-tabs button {
    flex: 1 1 40%;
    padding: 10px;
  }
  .admin-account-search {
    display: block;
  }
  .admin-operations .admin-actions {
    flex-wrap: wrap;
  }
}

.why-reasons {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.why-reasons li {
  line-height: 1.5;
}

/* Optional reasons live inside the existing anime details panel. */
.why-feedback-entry {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.why-feedback-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
}
.why-feedback-title img {
  width: 54px;
  height: 76px;
  object-fit: cover;
  border-radius: 7px;
  flex: none;
}
.why-feedback-title > div {
  min-width: 0;
}
.why-feedback-title strong {
  display: block;
  margin-bottom: 8px;
}
.why-feedback-entry > button {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  white-space: normal;
}
.details-card.feedback-active {
  padding: 0;
  overflow: hidden;
}
.feedback-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: calc(100dvh - 110px);
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.feedback-back {
  display: block;
  border: 0;
  background: none;
  color: #8ce1fa;
  padding: 0 0 12px;
  min-height: 44px;
  text-align: left;
}
.feedback-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  min-width: 44px;
  min-height: 44px;
}
.feedback-badge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 8px;
  color: #07151c;
  background: #63c8f4;
  font-weight: 700;
}
.feedback-badge.good {
  background: #72ebbc;
}
.feedback-badge.bad {
  background: #ff7b96;
}
.feedback-badge.nope {
  background: #c49eea;
}
.feedback-header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.feedback-header > div {
  min-width: 0;
}
.feedback-header h2 {
  font-size: 19px;
  margin: 6px 0 9px;
}
.feedback-eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.feedback-close {
  align-self: flex-start;
  flex: none;
}
.feedback-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px;
  overscroll-behavior: contain;
}
.feedback-body h3 {
  margin: 0;
  font-size: 18px;
}
.feedback-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 7px 0 14px;
}
.feedback-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.feedback-editor button {
  white-space: normal;
  overflow-wrap: anywhere;
}
.feedback-options button,
.feedback-opinion button {
  background: #132630;
  border: 1px solid #456171;
  border-radius: 9px;
  padding: 9px 8px;
  min-height: 44px;
  font-size: 13px;
}
.feedback-options button[aria-pressed="true"] {
  border-color: #8ce1fa;
  background: #164560;
  color: #effaff;
}
.feedback-search {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  font-size: 12px;
  color: var(--muted);
}
.feedback-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid #456171;
  border-radius: 9px;
  background: #0b1a23;
  color: var(--text);
  padding: 11px;
  font: inherit;
  font-size: 16px;
}
.feedback-detail {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin: 0 0 16px;
}
.feedback-detail h4 {
  margin: 0 0 10px;
  font-size: 14px;
}
.feedback-opinion {
  margin: 12px 0;
  padding: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.feedback-opinion legend {
  font-size: 13px;
  padding: 0 4px;
}
.feedback-opinion-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 5px;
}
.feedback-opinion .feedback-remove {
  padding: 4px;
  min-width: 0;
  font-size: 20px;
}
.feedback-opinion .feedback-like[aria-pressed="true"] {
  color: #081a13;
  background: #72ebbc;
  border-color: #72ebbc;
}
.feedback-opinion .feedback-dislike[aria-pressed="true"] {
  color: #21080d;
  background: #ff7b96;
  border-color: #ff7b96;
}
.feedback-opinion small {
  display: block;
  font-size: 12px;
  margin-top: 8px;
  color: var(--muted);
}
.feedback-editor .feedback-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #0c161d;
  flex: none;
}
.feedback-footer > span {
  color: var(--muted);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.feedback-footer button {
  min-height: 44px;
  padding: 9px 18px;
  flex: none;
}

.feedback-header h2 {
  line-height: 1.4;
  padding-block: 2px;
  max-height: 4.5em;
  overflow-y: auto;
}
.feedback-header .feedback-hint {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  dialog.details-card .feedback-editor {
    height: 100%;
    max-height: none;
  }
}
@media (max-width: 560px) {
  .feedback-header {
    padding: 12px;
    gap: 4px;
  }
  .feedback-body {
    padding: 12px;
  }
  .feedback-editor .feedback-footer {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  .feedback-footer button {
    padding-inline: 12px;
  }
}

/* Database-independent intermission screen. */
.service-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 28% 32%, #17475255, transparent 48%),
    radial-gradient(ellipse at 78% 70%, #55274730, transparent 45%), #0b141b;
}
.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px clamp(20px, 5vw, 80px);
  border-bottom: 1px solid #ffffff0b;
}
.service-header .brand {
  font-size: 20px;
}
.service-preview-link {
  color: #aebccb;
  font-size: 13px;
}
.service-main {
  flex: 1;
  width: min(100%, 720px);
  margin: auto;
  padding: 56px 24px 48px;
  text-align: center;
}
.service-art {
  position: relative;
  width: 190px;
  height: 176px;
  margin: 0 auto 28px;
}
.service-card {
  position: absolute;
  width: 108px;
  height: 144px;
  top: 12px;
  border-radius: 17px;
  border: 1px solid #4b7f8b;
  background: linear-gradient(145deg, #193843, #12222e);
  box-shadow: 0 15px 45px #0004;
}
.service-card-back {
  left: 23px;
  transform: rotate(-15deg);
  opacity: 0.55;
}
.service-card-front {
  left: 66px;
  transform: rotate(12deg);
  display: grid;
  place-items: center;
}
.service-card-front .icon {
  width: 49px;
  height: 49px;
  color: #87d5da;
  stroke-width: 1.2;
}
.service-pause {
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #172b32;
  border: 1px solid #74bac5;
  box-shadow: 0 6px 24px #0005;
}
.service-pause i {
  width: 5px;
  height: 17px;
  border-radius: 2px;
  background: #abdce1;
}
.service-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e1c694;
  font-size: 13px;
  letter-spacing: 0.025em;
  padding: 8px 13px;
  border: 1px solid #b9955138;
  border-radius: 99px;
  background: #b9955109;
}
.service-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2bb76;
}
.service-main h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.13;
  letter-spacing: -0.035em;
  margin: 24px 0 18px;
}
.service-intro {
  color: #d3dee5;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 9px;
}
.service-description {
  max-width: 455px;
  margin: 0 auto;
  color: #9caebd;
  font-size: 16px;
  line-height: 1.7;
}
.service-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 165px;
  min-height: 48px;
  padding: 13px 24px;
  margin-top: 31px;
  border: 1px solid #93e3e5;
  border-radius: 12px;
  color: #09232c;
  background: #93dce1;
  font-weight: 700;
}
.service-retry:hover:not(:disabled) {
  background: #b1eef0;
}
.service-retry .icon {
  width: 18px;
  height: 18px;
}
.service-hint {
  font-size: 13px;
  color: #8fa3b2;
  line-height: 1.6;
  margin: 17px 0 0;
}
.service-footer {
  padding: 18px 24px 27px;
  text-align: center;
  font-size: 12px;
  color: #718694;
}
.service-start {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #aebccb;
}
@media (max-width: 500px) {
  .service-header {
    padding: 15px 18px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .service-header .brand {
    font-size: 17px;
  }
  .service-header .brand img {
    width: 65px;
    height: 44px;
  }
  .service-main {
    padding: 38px 23px 34px;
  }
  .service-art {
    margin-bottom: 24px;
  }
  .service-intro {
    font-size: 16px;
  }
  .service-description {
    font-size: 14px;
  }
  .service-hint {
    max-width: 235px;
    margin-left: auto;
    margin-right: auto;
  }
}

.database-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  margin: 20px 0;
}
.database-meters meter {
  display: block;
  width: 100%;
  height: 20px;
  margin: 8px 0;
}
.database-meters small {
  color: var(--muted);
}
.database-usage summary {
  cursor: pointer;
  padding: 12px 0;
}
.database-usage > p {
  line-height: 1.65;
}

.feedback-saved {
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.feedback-saved ul {
  list-style: none;
  padding: 0;
}
.feedback-saved li {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
}
.feedback-saved li > span {
  flex: 1 1 150px;
}

/* Categories and available reasons are blue; selected reasons are green. */
.feedback-reasons button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #132630;
  border-color: #456171;
  color: #effaff;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  text-align: left;
}
.feedback-reasons button[aria-pressed="true"] {
  background: #68edb4;
  border-color: #d9ffed;
  color: #08251d;
  box-shadow: inset 0 0 0 1px #08251d;
}
.feedback-reasons button:hover {
  filter: brightness(1.08);
}
.feedback-reasons button > .icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.feedback-reasons .reason-label {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.feedback-custom {
  margin-top: 18px;
}
.feedback-custom .feedback-search {
  margin-bottom: 8px;
}
.feedback-custom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.feedback-add {
  background: #185139;
  border: 1px solid #6fc99e;
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
}
.feedback-saved li > span {
  overflow-wrap: anywhere;
  min-width: 0;
}
.feedback-detail h4 {
  margin: 18px 0 8px;
}
@media (min-width: 1100px) {
  .feedback-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Real effect thumbnails, frozen so Settings stays quiet and inexpensive. */
.background-options {
  border: 0;
  padding: 18px 0;
  margin: 0;
  min-width: 0;
}
.background-options legend {
  font-weight: 700;
  padding: 0;
}
.background-options > p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}
.background-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.background-choice {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: #10212d;
  border: 1px solid #456171;
  border-radius: 10px;
  cursor: pointer;
}
.background-choice:has(input:checked) {
  border-color: #8ce1fa;
  box-shadow: 0 0 0 1px #8ce1fa;
}
.background-choice:has(input:focus-visible) {
  outline: 3px solid #e5faff;
  outline-offset: 3px;
}
.background-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.background-preview {
  display: block;
  position: relative;
  overflow: hidden;
  height: clamp(56px, 12vw, 80px);
  isolation: isolate;
  --cool: 113, 158, 235;
  --warm: 167, 110, 211;
}
.background-preview .ambient {
  position: absolute;
  z-index: 0;
}
.background-preview .ambient::before {
  display: none;
}
.background-preview .ambient * {
  animation: none;
}
.background-preview .aurora-ribbons {
  overflow: visible;
}
.background-preview .ribbon-halo {
  filter: none;
}
.background-preview .ribbon-1 {
  transform: translate(0, -250px);
}
.background-preview .ribbon-2 {
  display: none;
}
.background-preview .liquid-ring {
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}
.background-preview .ring-1 {
  transform: translate(-50%, -50%) scale(0.65);
}
.background-preview .ring-2 {
  transform: translate(-50%, -50%) scale(1.5);
}
.background-preview .ring-3 {
  display: none;
}
.background-preview .comet-trail {
  width: 65px;
  transform: rotate(32deg);
  opacity: 0.8;
}
.background-preview .comet-stars {
  background-size:
    45px 61px,
    71px 89px;
}
.background-choice-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 650;
  color: #effaff;
}
.background-selected {
  color: #8ce1fa;
}
.background-options-fixture {
  position: relative;
  max-width: 560px;
  margin: 12px auto;
  padding: 16px;
  background: #0b151f;
  border-radius: 12px;
}
@media (max-width: 350px) {
  .background-options-grid {
    gap: 8px;
  }
  .background-choice-label {
    font-size: 12px;
    padding-inline: 8px;
  }
}

/* The same anime Details content, centered when opened from a saved card. */
dialog.details-card.details-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(600px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  color: var(--text);
  overflow: hidden;
}
dialog.details-card.details-modal[open] {
  display: flex;
  flex-direction: column;
}
dialog.details-card.details-modal::backdrop {
  background: #030912b8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.details-modal .details-header {
  padding: 24px 24px 0;
  flex: none;
}
.details-modal .details-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.details-modal .full-synopsis {
  max-height: none;
  overflow: visible;
}
.cover-unavailable {
  display: grid;
  place-items: center;
  height: 100%;
  color: #aebcc9;
  padding: 12px;
}
@media (max-width: 480px) {
  .details-modal .details-header {
    padding: 20px 16px 0;
  }
  .details-modal .details-body {
    padding: 16px;
  }
  .details-modal .details-header h2 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }
}

.watchlist-jump {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 20;
  background: #153245;
  border-color: #6591a8;
  box-shadow: 0 8px 28px #0008;
}
.watchlist-jump svg {
  transform: rotate(90deg);
}
.watchlist-bottom {
  height: 72px;
}
@media (max-width: 700px) {
  .watchlist-jump {
    position: static;
    margin-left: auto;
    box-shadow: none;
  }
  .watchlist-bottom {
    height: 16px;
  }
}

/* Keep the anime palette when motion is unavailable without costly blurred artwork. */
.ambient[data-motion="false"]::before {
  display: none;
}
.ambient[data-motion="false"] * {
  animation: none !important;
}
.aurora-ribbon,
.liquid-ring,
.comet-trail {
  will-change: transform, opacity;
}
.ambient[data-motion="false"] * {
  will-change: auto;
}
.watchlist-controls .watchlist-search {
  flex: 1 1 300px;
  min-width: min(100%, 250px);
}
.watchlist-controls .watchlist-search input {
  min-height: 48px;
  border: 2px solid #7cb8e6;
  background: #10293b;
  box-shadow: 0 0 0 3px #59aaff12;
  font-size: 16px;
  width: 100%;
}
.watchlist-search input:focus {
  outline: 3px solid #aad9ff;
  outline-offset: 2px;
}
.genre-groups {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.genre-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.genre-group-label {
  flex: 0 0 60px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b8cede;
}
.genre-group .genres {
  margin: 0;
  min-width: 0;
  flex-wrap: wrap;
}
.genre-group .genre {
  font-size: 11px;
  padding: 4px 7px;
}
.genre-group-genres .genre {
  background: #173344;
  border-color: #4988ad;
  color: #c5e9ff;
}
.genre-group-other .genre {
  background: #28333e;
  border-color: #6b7f91;
  color: #dbe5ef;
}
.genre-group-themes .genre {
  background: #302b4a;
  border-color: #8474ad;
  color: #e5daff;
}
.genre-group-audience .genre {
  background: #263737;
  border-color: #618b83;
  color: #c6e8de;
}
.genre-group-content .genre {
  background: #432f27;
  border-color: #a58458;
  color: #ffdfa4;
}
.theme-preferences {
  margin-top: 16px;
}
.theme-preferences summary {
  cursor: pointer;
  color: #b9dcff;
  min-height: 44px;
  padding: 12px 0;
}
@media (max-width: 420px) {
  .genre-group {
    flex-wrap: wrap;
    gap: 4px;
  }
  .genre-group-label {
    flex-basis: 100%;
  }
}

.main-category-preferences {
  margin-bottom: 20px;
}
.main-category-preferences h3,
.preference-group h3 {
  font-size: 15px;
  margin: 16px 0 8px;
}
.theme-option-group {
  flex-basis: 100%;
  min-width: 0;
}
.theme-option-group h4 {
  color: #cddaf0;
  margin: 12px 0 8px;
  font-size: 13px;
}
.category-explanation,
.theme-explanation {
  font-size: 13px;
  color: #c4d8e3;
  line-height: 1.5;
}

/* Taxonomy stays collapsed on cards; category navigation mounts one level at a time. */
.taxonomy-card {
  width: 100%;
  min-width: 0;
  margin-top: 3px;
}
.taxonomy-card summary,
.taxonomy-preferences summary {
  cursor: pointer;
  min-height: 44px;
  padding: 12px 0;
  color: #b9dcff;
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.taxonomy-card summary span,
.taxonomy-preferences summary .taxonomy-count {
  font-size: 11px;
  color: #b8cede;
  margin-left: 6px;
}
.taxonomy-card p,
.taxonomy-help {
  color: #b8cede;
  font-size: 12px;
  line-height: 1.55;
}
.taxonomy-card-paths {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.taxonomy-card-path {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #395568;
  border-radius: 9px;
  background: #10212ce6;
}
.taxonomy-facet {
  color: #c4d5e3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.taxonomy-path {
  color: #cee8fc;
  font-size: 13px;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.taxonomy-leaf {
  color: #fff;
  font-weight: 700;
}
.taxonomy-arrow {
  color: #78c9e8;
  padding: 0 3px;
}
.taxonomy-definition,
.taxonomy-card-path small {
  color: #b8cede;
  font-size: 11px;
  line-height: 1.5;
}
.taxonomy-preferences {
  margin-top: 16px;
  padding: 0 12px 12px;
  border: 1px solid #395568;
  border-radius: 12px;
  min-width: 0;
}
.taxonomy-preferences input[type="search"] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #6498be;
  border-radius: 8px;
  padding: 10px;
  background: #102333;
  color: #f0f7fc;
  margin: 8px 0;
}
.taxonomy-preferences .taxonomy-restrict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.taxonomy-preferences .taxonomy-restrict input {
  flex: none;
  margin-top: 5px;
}
.taxonomy-breadcrumbs,
.taxonomy-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.taxonomy-preferences button {
  min-height: 44px;
  border: 1px solid #467494;
  border-radius: 8px;
  padding: 8px 10px;
  background: #133148;
  color: #e5f3ff;
  overflow-wrap: anywhere;
  text-align: left;
}
.taxonomy-preferences button:hover {
  background: #214762;
}
.taxonomy-breadcrumbs button {
  font-size: 12px;
}
.taxonomy-breadcrumbs [aria-current] {
  border-color: #85c5f0;
}
.taxonomy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.taxonomy-option {
  display: flex;
  min-width: 0;
}
.taxonomy-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.taxonomy-choice span {
  font-weight: 650;
}
.taxonomy-choice small {
  color: #b6cbdc;
  font-size: 10px;
}
.taxonomy-preferences .taxonomy-drill {
  flex: none;
  min-width: 44px;
  margin-left: 3px;
  text-align: center;
}
.taxonomy-choice[aria-pressed="true"],
.taxonomy-selected button {
  background: #195037;
  border-color: #69c594;
}
.taxonomy-preferences > button {
  margin-top: 10px;
}
@media (max-width: 480px) {
  .taxonomy-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .taxonomy-preferences {
    padding: 0 9px 9px;
  }
}

/* Leave room for browser chrome on 1080p desktops. Category rows already have
 * their own gap; the older standalone genre margins must not stack per row.
 * Keep natural document flow for long titles, expanded categories and zoom. */
@media (min-width: 901px) and (max-height: 1080px) {
  [data-layout="familiar"] main:not(.wide-main) .feed-top {
    min-height: 42px;
    padding-block: 5px;
  }
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .poster-stage {
    height: clamp(130px, calc(100svh - 700px), 210px);
  }
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .card-content {
    padding-bottom: 12px;
  }
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .genre-groups {
    gap: 4px;
    margin-block: 6px;
  }
  [data-layout="familiar"]
    main:not(.wide-main)
    .cards-layout
    .genre-group
    .genres {
    margin: 0;
  }
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .genre-focus {
    margin-block: 6px;
  }
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .reaction-labels {
    margin-top: 8px;
  }
}

/* Discover must remain reachable at narrow widths, browser zoom and short
 * landscape heights. Never cap the card/content height: extra information
 * expands the document and stays reachable through ordinary page scrolling. */
main:not(.wide-main) section[aria-label="Anime discovery"] {
  min-width: 0;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
main:not(.wide-main) .feed-top {
  flex-wrap: wrap;
}
main:not(.wide-main) .feed-top .reason {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
main:not(.wide-main) .cards-layout .anime-card {
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
}
main:not(.wide-main) .cards-layout .card-content {
  min-width: 0;
  height: auto;
  max-height: none;
  overflow-wrap: anywhere;
}
[data-layout="familiar"]
  main:not(.wide-main)
  .cards-layout
  .genre-group
  .genres {
  margin: 0;
  min-width: 0;
}
main:not(.wide-main) .cards-layout .genre {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
main:not(.wide-main) .cards-layout .reaction,
main:not(.wide-main) .cards-layout .secondary-actions button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 360px) {
  [data-layout="familiar"] main:not(.wide-main) .cards-layout .reaction {
    flex-wrap: wrap;
  }
}
/* A landscape phone must not lose its details controls to the tall portrait
 * navigation offset. The details body retains its existing internal scroll. */
@media (max-width: 900px) and (max-height: 500px) {
  [data-layout="familiar"] .cards-layout dialog.details-card {
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  [data-layout="familiar"] .cards-layout .details-header {
    padding-top: 10px;
    padding-bottom: 8px;
  }
}

/* Review improvements: retain the established palette and bring tasks forward. */
a.nav-button:hover {
  text-decoration: none;
}
.dialog[aria-labelledby="preferences-title"] {
  scroll-padding-block: 24px 130px;
}
.preference-advanced {
  margin: 20px 0;
  border-block: 1px solid #34505f;
}
.preference-advanced > summary,
.watchlist-tools > summary {
  cursor: pointer;
  padding: 14px 0;
  min-height: 44px;
  color: #b7eafa;
  font-weight: 600;
}
.preference-advanced > summary span {
  display: block;
  margin-top: 6px;
  color: #b6c6d7;
  font-size: 13px;
  font-weight: 400;
}
.preference-advanced[open] > summary {
  margin-bottom: 16px;
}
.preference-continue {
  position: sticky;
  bottom: -1px;
  z-index: 3;
  padding: 14px 0 max(12px, env(safe-area-inset-bottom));
  margin-top: 16px;
  background: #101c26;
  border-top: 1px solid #34505f;
  box-shadow: 0 -12px 16px #101c26;
}
/* Cover the dialog's bottom padding so scrolled content cannot peek below the action. */
.preference-continue::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 40px;
  background: #101c26;
}
.preference-continue .primary {
  margin: 0;
  min-height: 48px;
}
.preference-continue small {
  display: block;
  margin: 8px 0 0;
  color: #b6c6d7;
  font-size: 12px;
}
.preference-advanced :is(button, input, select, summary) {
  scroll-margin-bottom: 130px;
}
.dialog .close,
.details-card .close,
.details-card .feedback-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
.dialog:not(.welcome) > h2 {
  padding-right: 28px;
}
summary:focus-visible {
  outline: 3px solid #e3f3ff;
  outline-offset: 4px;
  border-radius: 6px;
}
.watchlist-extra-filters {
  display: contents;
}
.watchlist-filter-toggle {
  display: none;
}
.watchlist-tools {
  max-width: 100%;
}
.watchlist-tools-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding-bottom: 12px;
}
@media (max-width: 640px) {
  .watchlist-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 16px;
  }
  .watchlist-controls .watchlist-search {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .watchlist-filter-toggle {
    display: block;
    align-self: end;
    min-height: 44px;
    margin: 0;
  }
  .watchlist-extra-filters {
    display: none;
    grid-column: 1 / -1;
  }
  .watchlist-extra-filters.expanded {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-block: 8px;
  }
  .watchlist-tools {
    flex-basis: 100%;
  }
  .watchlist-tools-body,
  .watchlist-tools .watchlist-transfer {
    width: 100%;
  }
}

/* Discover refinement: the artwork and decision share one calm surface.
 * Scope to Discover so ranked cards, Watchlist and their dialogs keep geometry. */
[data-layout="familiar"] .cards-layout.discover-layout {
  --discover-ink: #edf5fc;
  --discover-muted: #b8cbd9;
  --discover-link: #89d8ff;
  --discover-surface: #0c1923f5;
  --discover-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1120px;
  gap: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .anime-card.discover-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
  width: 100%;
  padding: 20px;
  background: var(--discover-surface);
  border: 1px solid #7babc13d;
  border-radius: var(--discover-radius);
  box-shadow: 0 18px 50px #0003;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .poster-stage {
  height: clamp(390px, calc(100svh - 210px), 540px);
  min-height: 0;
  border-radius: 12px;
  width: 100%;
  background: #15232f;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .poster {
  object-fit: scale-down;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .poster-fade {
  height: 90px;
  background: linear-gradient(transparent, #0c1923b3);
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .media-badge {
  display: none; /* The format is now in the readable facts row. */
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .card-content {
  margin: 0;
  padding: 8px 0 0;
  min-width: 0;
  color: var(--discover-ink);
}
[data-layout="familiar"] .cards-layout.discover-layout #anime-title {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .metadata {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--discover-muted);
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .release-status {
  font-size: 13px;
  font-weight: 400;
  color: var(--discover-muted);
  margin: 3px 0;
  line-height: 1.5;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .release-status.unreleased {
  color: #f6d699;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .runtime-estimate {
  font-size: 12px;
  line-height: 1.5;
  color: var(--discover-muted);
  margin: 2px 0;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .genre-groups {
  margin: 18px 0 8px;
  gap: 8px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .genre-group {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .genre-group-label {
  flex: 0 0 65px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .genres {
  margin: 0;
  gap: 5px;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .genre {
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.3;
  border-color: #5487a25c;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .genre-unknown {
  padding: 0;
  border: 0;
  background: none;
  color: var(--discover-muted);
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .taxonomy-card
  summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--discover-link);
  font-size: 13px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .taxonomy-card
  summary::before {
  content: "›";
  font-size: 20px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .taxonomy-card[open]
  summary::before {
  transform: rotate(90deg);
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .synopsis {
  font-size: 15px;
  line-height: 1.6;
  color: #d0dce6;
  -webkit-line-clamp: 3;
  min-height: 0;
  margin: 12px 0;
}
.discover-links {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 4px 0 18px;
  border: 1px solid #527389;
  border-radius: 8px;
  background: #102532;
}
.discover-links:has(.why-toggle)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #7393a8;
  pointer-events: none;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-links
  .details-toggle {
  min-height: 44px;
  padding: 8px 6px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  justify-content: center;
  color: var(--discover-link);
  gap: 7px;
  font-size: 14px;
  text-align: left;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-links
  .details-toggle:hover {
  background: #183747;
  color: #c1edff;
}
.discover-links .details-toggle > span:first-child,
.discover-links .details-toggle > span:last-child {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
}
.discover-links .details-toggle > span:last-child svg {
  width: 14px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .reaction-labels {
  margin: 0 0 8px;
  gap: 16px;
  color: var(--discover-muted);
  font-size: 13px;
}
.discover-card .reaction-labels span {
  justify-content: flex-start;
}
.discover-card .reaction-labels span::before,
.discover-card .reaction-labels span::after {
  display: none;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .reactions {
  gap: 8px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .reaction {
  min-height: 68px;
  gap: 6px;
  padding: 9px 4px;
  font-size: 13px;
  border-radius: 10px;
  box-shadow: none;
  white-space: normal;
}
.discover-card .reaction kbd {
  display: none; /* Shortcuts remain available in each button's tooltip. */
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .secondary-actions {
  margin-top: 16px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .secondary-actions
  button {
  min-height: 44px;
  font-size: 13px;
  border-color: #8ab5cd30;
  background: #152632;
}

.fixture-controls {
  padding: 4px 16px;
  color: #b8cbd9;
  font-size: 12px;
}
.fixture-controls > summary {
  cursor: pointer;
  min-height: 28px;
}
@media (max-width: 900px) {
  [data-layout="familiar"] .cards-layout.discover-layout {
    max-width: 600px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .anime-card.discover-card {
    width: 100%;
    display: block;
    padding: 0;
    border-radius: 16px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .poster-stage {
    height: clamp(150px, 24svh, 245px);
    border-radius: 0;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .card-content {
    padding: 12px 16px 14px;
  }
  [data-layout="familiar"] .cards-layout.discover-layout #anime-title {
    font-size: 28px;
    margin-bottom: 8px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .genre-groups {
    margin: 12px 0 4px;
    gap: 5px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .synopsis {
    -webkit-line-clamp: 2;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .discover-links {
    margin: 0 0 10px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .secondary-actions {
    margin-top: 10px;
  }
}
@media (max-width: 560px) {
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .poster-stage {
    height: clamp(140px, 18svh, 180px);
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .card-content {
    padding: 10px 14px 12px;
  }
  [data-layout="familiar"] .cards-layout.discover-layout #anime-title {
    font-size: 26px;
    margin-bottom: 6px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .reaction-labels {
    display: none;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .reactions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .mobile-reaction-label {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    color: var(--discover-muted);
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card
    .reaction {
    flex-direction: row;
    min-height: 46px;
    font-size: 13px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-links
    .details-toggle {
    font-size: 13px;
    gap: 5px;
  }
}
@media (max-width: 360px) {
  .discover-links .details-toggle > span:last-child {
    display: none;
  }
}

[data-layout="familiar"]
  .cards-layout.discover-layout
  .discover-card
  .poster-stage:has(.trailer-panel:not([hidden])) {
  min-height: 320px;
}

/* Discover details stay in the viewport; only their content scrolls.
 * Override historical side-panel offsets at every breakpoint. */
[data-layout="familiar"] .cards-layout.discover-layout dialog.details-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100vw - 32px));
  height: fit-content;
  max-height: min(760px, calc(100dvh - 48px));
  padding: 0;
  border: 1px solid #7babc15c;
  border-radius: 18px;
  background: #0c1923;
  color: var(--text);
  box-shadow: 0 24px 80px #0008;
  overflow: hidden;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  dialog.details-modal::backdrop {
  background: #030912a8;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .details-modal
  .details-header {
  padding: 20px 24px 0;
  flex: none;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .details-modal
  .details-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .details-modal
  .details-header
  h2 {
  margin-right: 44px;
  max-height: min(150px, 18dvh);
  overflow-y: auto;
  overflow-wrap: anywhere;
  font-size: 28px;
  line-height: 1.4;
  padding-block: 3px;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .details-modal
  .details-header
  .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: #b8cbd9;
}
[data-layout="familiar"]
  .cards-layout.discover-layout
  .details-modal
  .feedback-editor {
  height: 100%;
  max-height: none;
  min-height: 0;
}
@media (max-width: 560px), (max-height: 500px) {
  [data-layout="familiar"] .cards-layout.discover-layout dialog.details-modal {
    width: calc(100vw - 16px);
    height: fit-content;
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .details-modal
    .details-header {
    padding: 12px 16px 0;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .details-modal
    .details-body {
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .details-modal
    .details-header
    h2 {
    font-size: 23px;
  }
}

[data-layout="familiar"]
  .cards-layout.discover-layout
  dialog.details-modal.feedback-active {
  height: min(760px, calc(100dvh - 48px));
}

/* Watchlist: compact artwork-led collection; one aligned content column. */
.watchlist-page {
  max-width: 1180px;
  margin-inline: auto;
}
.watchlist-page .section-heading {
  max-width: none;
  margin: 24px 0 20px;
  align-items: center;
}
.watchlist-page .section-heading h1 {
  font-size: 32px;
}
.watchlist-page .section-heading p {
  margin-top: 6px;
}
.watchlist-page .watchlist-controls {
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 240px) auto auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 12px;
}
.watchlist-page .watchlist-controls :is(input, select) {
  min-height: 46px;
  font-size: 14px;
}
.watchlist-page .watchlist-controls input[type="search"] {
  font-size: 16px;
}
.watchlist-page .watchlist-filter-toggle {
  display: flex;
  min-height: 46px;
  margin: 0;
  gap: 8px;
}
.watchlist-page .watchlist-extra-filters {
  display: none;
  grid-column: 1 / -1;
}
.watchlist-page .watchlist-extra-filters.expanded {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
  background: #101c25;
  border: 1px solid #344e5e;
  border-radius: 10px;
}
.watchlist-layout-switch {
  display: flex;
  border: 1px solid #527389;
  border-radius: 8px;
}
.watchlist-layout-switch button {
  border: 0;
  background: transparent;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
}
.watchlist-layout-switch button[aria-pressed="true"] {
  background: #204258;
  color: #a3e4ff;
  box-shadow: inset 0 0 0 1px #89d8ff;
}
.watchlist-page .watchlist-actions {
  gap: 8px;
  min-height: 44px;
}
.watchlist-active-filters {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.watchlist-active-filters .quiet {
  margin: 0;
  min-height: 44px;
}
.filter-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  border: 1px solid #527389;
  border-radius: 8px;
  background: #153245;
  padding: 7px 10px;
}
.filter-chip svg {
  width: 15px;
  height: 15px;
}
.watchlist-page .watchlist-tools {
  margin-left: auto;
  flex-basis: auto;
}
.watchlist-page .watchlist-tools > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.watchlist-page .watchlist-tools[open] {
  flex-basis: 100%;
}
.watchlist-page .watchlist-tools-body {
  padding-top: 12px;
}
.watchlist-page .watchlist-count {
  margin: 6px 0;
}
.watchlist-sort-help {
  font-size: 13px;
  color: #b8cbd9;
  margin-bottom: 8px;
}
.watchlist-sort-help summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.watchlist-sort-help summary::before {
  content: "›";
  font-size: 20px;
}
.watchlist-sort-help[open] summary::before {
  transform: rotate(90deg);
}
.watchlist-sort-help p {
  max-width: 75ch;
  line-height: 1.6;
  padding-bottom: 12px;
}
.watchlist-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  scroll-margin-top: 24px;
}
.watchlist-pagination > span {
  font-size: 12px;
  color: #aebcc9;
  margin-right: auto;
}
.watchlist-pagination button {
  margin: 0;
  min-height: 44px;
}
.watchlist-pagination .quiet {
  display: flex;
  gap: 8px;
  align-items: center;
}
.watchlist-pagination .quiet svg {
  transform: rotate(90deg);
  width: 16px;
}
.watchlist-pagination-bottom {
  justify-content: center;
  margin-top: 24px;
}
.watchlist-page .watchlist-grid {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.watchlist-page .saved-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  overflow: visible;
  align-items: start;
  position: relative;
}
.watchlist-page .saved-card:has(.saved-menu[open]) {
  z-index: 3;
}
.watchlist-page .saved-image {
  width: 104px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: #0b1217;
}
.watchlist-page .saved-image img {
  object-fit: contain;
}
.watchlist-page .saved-content {
  padding: 0;
  gap: 6px;
  min-width: 0;
  align-self: stretch;
}
.watchlist-page .saved-content h3 {
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.watchlist-page .saved-content p {
  font-size: 13px;
  line-height: 1.45;
}
.watchlist-page .saved-content .saved-match-reason {
  color: #aeddf1;
  font-size: 12px;
}
.saved-source {
  align-self: flex-start;
  display: inline-block;
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: #20394a;
  color: #d9eaf5;
}
.watchlist-page .saved-footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  gap: 6px;
}
.watchlist-page .saved-footer .details-toggle {
  margin: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 13px;
  width: auto;
  flex: 1;
  gap: 5px;
  justify-content: center;
  border-color: #669dbb;
  color: #a4dfff;
}
.watchlist-page .saved-footer .details-toggle svg {
  width: 14px;
  height: 14px;
}
.saved-menu {
  position: relative;
  flex: 0 0 44px;
}
.saved-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.saved-menu summary::-webkit-details-marker {
  display: none;
}
.saved-menu summary:hover,
.saved-menu[open] summary {
  background: #20394a;
}
.saved-menu summary svg {
  stroke-width: 4;
}
.saved-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(230px, 75vw);
  padding: 8px;
  border: 1px solid #527389;
  border-radius: 10px;
  background: #102532;
  box-shadow: 0 12px 32px #0008;
  z-index: 5;
}
.saved-menu-panel :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 14px;
}
.saved-menu-panel :is(a, button):hover {
  background: #20394a;
}
.saved-menu-panel .saved-remove {
  color: #ff9eaa;
}
.saved-menu-panel small {
  font-size: 12px;
  padding: 8px;
  line-height: 1.45;
}
.watchlist-page .watchlist-list {
  grid-template-columns: 1fr;
}
.watchlist-page .watchlist-list .saved-card {
  grid-template-columns: 80px minmax(0, 1fr);
}
.watchlist-page .watchlist-list .saved-image {
  width: 80px;
}
.watchlist-page .watchlist-list .saved-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.watchlist-page .watchlist-list .saved-content > :not(.saved-footer) {
  grid-column: 1;
}
.watchlist-page .watchlist-list .saved-footer {
  grid-column: 2;
  grid-row: 1 / span 6;
  min-width: 185px;
}
@media (max-width: 1100px) {
  .watchlist-page .watchlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .watchlist-page .watchlist-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .watchlist-page .section-heading {
    margin: 12px 0 16px;
    gap: 8px;
  }
  .watchlist-page .section-heading h1 {
    font-size: 26px;
  }
  .watchlist-page .section-heading p {
    font-size: 13px;
  }
  .watchlist-page .watchlist-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .watchlist-page .watchlist-search {
    grid-column: 1 / -1;
  }
  .watchlist-layout-switch {
    display: none;
  }
  .watchlist-page .watchlist-extra-filters.expanded {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
    gap: 12px;
  }
  .watchlist-page .watchlist-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .watchlist-page .saved-card,
  .watchlist-page .watchlist-list .saved-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  .watchlist-page .saved-image,
  .watchlist-page .watchlist-list .saved-image {
    width: 88px;
  }
  .watchlist-page .saved-content,
  .watchlist-page .watchlist-list .saved-content {
    display: flex;
  }
  .watchlist-page .saved-footer,
  .watchlist-page .watchlist-list .saved-footer {
    min-width: 0;
  }
  .watchlist-page .saved-genres {
    font-size: 12px;
  }
  .watchlist-page .watchlist-count {
    font-size: 12px;
  }
  .watchlist-sort-help {
    margin: 0;
  }
}
@media (max-width: 380px) {
  .watchlist-page .saved-card,
  .watchlist-page .watchlist-list .saved-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
  }
  .watchlist-page .saved-image,
  .watchlist-page .watchlist-list .saved-image {
    width: 70px;
  }
  .watchlist-page .watchlist-extra-filters.expanded {
    grid-template-columns: 1fr;
  }
}
.watchlist-page .watchlist-extra-filters .watchlist-sort-help {
  grid-column: 1 / -1;
}
.watchlist-page .watchlist-actions > .quiet {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.watchlist-page .watchlist-actions > .quiet svg {
  width: 14px;
  transform: rotate(90deg);
}
.watchlist-page .saved-menu-panel {
  top: auto;
  bottom: calc(100% + 6px);
}
@media (max-width: 700px) {
  .watchlist-active-filters:empty {
    display: none;
  }
  .watchlist-page .watchlist-actions {
    justify-content: space-between;
  }
  .watchlist-page .watchlist-tools > summary {
    font-size: 13px;
  }
}

/* Watchlist details has no recommendation rationale; keep the remaining tabs balanced. */
.details-tabs.without-why {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.details-tabs.with-media.without-why {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 560px) {
  .details-tabs.with-media.without-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .details-tabs.with-media.without-why [role="tab"] {
    grid-column: auto;
  }
}

/* Recommendations: compact decision surface, current eligibility, shared details. */
.recommendations-page {
  --recommendation-border: #3e596c;
  --recommendation-muted: #b8cbd9;
  --recommendation-link: #9cddff;
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}
.recommendations-heading {
  align-items: start;
  gap: 16px;
  margin-bottom: 8px;
}
.recommendations-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.recommendations-heading h1 {
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}
.recommendations-count {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--recommendation-border);
  border-radius: 20px;
  white-space: nowrap;
}
.recommendations-heading p {
  margin-top: 8px;
  line-height: 1.5;
}
.recommendations-heading .recommendations-exclusions {
  font-size: 13px;
  margin-top: 2px;
}
.recommendations-heading .recommendations-tools {
  flex-shrink: 0;
  gap: 8px;
  align-items: start;
}
.recommendations-tools > button {
  min-height: 44px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.recommendations-more {
  position: relative;
}
.recommendations-more > summary {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--recommendation-border);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 22px;
}
.recommendations-more > summary::-webkit-details-marker {
  display: none;
}
.recommendations-more > div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, 80vw);
  padding: 8px;
  background: #102532;
  border: 1px solid var(--recommendation-border);
  border-radius: 8px;
  z-index: 5;
  box-shadow: 0 8px 24px #0008;
}
.recommendations-more button {
  display: block;
  min-height: 44px;
  text-align: left;
  width: 100%;
  white-space: normal;
}
.recommendations-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.recommendations-toolbar .recommendations-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #527389;
  border-radius: 8px;
  background: #102532;
  color: var(--recommendation-link);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.recommendations-toolbar .recommendations-utility:hover,
.recommendations-toolbar .recommendations-utility[aria-expanded="true"] {
  background: #183747;
  border-color: #89c6e8;
}
.recommendations-utility .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.recommendations-utility .icon:last-child:not(:first-child) {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}
.recommendations-utility[aria-expanded="true"] .icon:last-child {
  transform: rotate(-90deg);
}
.recommendations-help {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--recommendation-border);
  border-radius: 8px;
  background: #10212b;
}
.recommendations-help[hidden] {
  display: none;
}
.recommendations-help h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.recommendations-help p {
  max-width: 78ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--recommendation-muted);
}
.recommendations-help p + p {
  margin-top: 8px;
}
.recommendation-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--recommendation-border);
  border-radius: 8px;
  background: #102532;
}
.recommendation-confirmation > span {
  flex: 1;
  min-width: 150px;
  overflow-wrap: anywhere;
}
.recommendation-confirmation button {
  min-height: 44px;
  min-width: 44px;
}
.recommendations-page .leaderboard-row {
  border: 1px solid var(--recommendation-border);
  background: #0c1923f5;
}
.recommendations-page .leaderboard-toggle {
  padding: 8px 12px;
  gap: 12px;
  color: #edf5fc;
}
.recommendations-page .leaderboard-number {
  width: 32px;
  height: 32px;
  align-self: center;
  border-radius: 50%;
  color: var(--rank-color);
  font-variant-numeric: tabular-nums;
}
.leaderboard-cover {
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 4px;
}
.leaderboard-facts {
  color: var(--recommendation-muted);
  font-size: 12px;
  flex: 0 1 35%;
}
.recommendations-page .leaderboard-row .ranked-card {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  padding: 16px;
  align-items: start;
}
.recommendations-page .leaderboard-row .poster-stage {
  height: 260px;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.recommendations-page .ranked-card .media-badge {
  display: none;
}
.recommendations-page .leaderboard-row .card-content {
  padding: 0;
  margin: 0;
  min-width: 0;
}
.recommendations-page .ranked-card h2 {
  margin-bottom: 6px;
  font-size: clamp(22px, 2.3vw, 28px);
  overflow-wrap: anywhere;
}
.recommendations-page .ranked-card .metadata {
  display: block;
  line-height: 1.5;
  font-size: 13px;
}
.recommendations-page .ranked-card .release-status {
  display: inline;
  font-size: 12px;
  margin-right: 10px;
}
.recommendations-page .ranked-card .runtime-estimate {
  display: inline;
  font-size: 12px;
}
.recommendations-page .ranked-card .match-reason {
  padding: 0;
  border: 0;
  margin: 10px 0 6px;
  font-size: 14px;
  line-height: 1.5;
}
.recommendations-page .ranked-card .synopsis {
  margin: 8px 0 12px;
  font-size: 14px;
  line-height: 1.5;
  min-height: 0;
}
.recommendations-page .discover-links {
  margin: 10px 0 14px;
}
.recommendations-page .discover-links .details-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  gap: 8px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--recommendation-link);
  font-size: 14px;
}
.recommendations-page .discover-links .details-toggle:hover {
  background: #183747;
}
.recommendations-page .discover-links .details-toggle > span {
  flex: 0 1 auto;
}
.recommendations-page .discover-links .details-toggle > span:last-child {
  display: none;
}
.recommendations-page .ranked-card .reaction-labels {
  margin: 0 0 6px;
}
.recommendations-page .ranked-card .reaction {
  min-height: 54px;
  padding: 8px;
}
.recommendations-page .shortlist-note {
  font-size: 13px;
  line-height: 1.6;
  margin-block: 16px;
}
.recommendations-page .shortlist-note button {
  min-height: 44px;
}
.recommendations-page .poster-stage:has(.trailer-panel:not([hidden])) {
  grid-column: 1 / -1;
  height: 360px;
  max-height: none;
}
.recommendations-page
  .ranked-card:has(.trailer-panel:not([hidden]))
  .card-content {
  grid-column: 1 / -1;
}
@media (max-width: 800px) {
  .recommendations-heading {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .recommendations-page .leaderboard-row .ranked-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 14px;
  }
  .recommendations-page .ranked-card .mobile-reaction-label {
    display: block;
    grid-column: 1 / -1;
    color: var(--recommendation-muted);
    font-size: 12px;
  }
  .recommendations-page .ranked-card .reaction-labels {
    display: none;
  }
  .recommendations-page .ranked-card .reaction {
    flex-direction: row;
    min-height: 44px;
  }
}
@media (max-width: 560px) {
  .recommendations-heading {
    gap: 12px;
  }
  .recommendations-heading .recommendations-tools {
    width: 100%;
    flex-wrap: nowrap;
  }
  .recommendations-tools > button {
    flex: 1;
  }
  .recommendations-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
  }
  .recommendations-toolbar .recommendations-utility {
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    gap: 6px;
    font-size: 12px;
  }
  .recommendations-toolbar .recommendations-utility .icon {
    width: 16px;
    height: 16px;
  }
  .recommendations-toolbar
    .recommendations-utility
    .icon:last-child:not(:first-child) {
    width: 12px;
  }
  .recommendations-help {
    padding: 12px;
  }
  .recommendations-page .leaderboard-toggle {
    display: grid;
    grid-template-columns: 32px 32px minmax(0, 1fr) 20px;
    gap: 2px 8px;
    padding: 8px;
  }
  .recommendations-page .leaderboard-number {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .recommendations-page .leaderboard-cover {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .recommendations-page .leaderboard-title {
    grid-column: 3;
    grid-row: 1;
  }
  .recommendations-page .leaderboard-facts {
    display: block;
    grid-column: 3;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.4;
  }
  .recommendations-page .leaderboard-toggle > svg {
    grid-column: 4;
    grid-row: 1 / 3;
  }
  .recommendations-page .leaderboard-toggle:not(:has(.leaderboard-cover)) {
    grid-template-columns: 32px 0 minmax(0, 1fr) 20px;
  }
  .recommendations-page .leaderboard-row .ranked-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .recommendations-page .leaderboard-row .card-content {
    display: contents;
  }
  .recommendations-page .ranked-card .card-content > * {
    grid-column: 1 / -1;
    margin-block: 0;
  }
  .recommendations-page .ranked-card .card-content > .anime-summary {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .recommendations-page .ranked-card h2 {
    font-size: 21px;
  }
  .recommendations-page .leaderboard-row .poster-stage {
    grid-column: 1;
    grid-row: 1;
    height: 176px;
  }
  .recommendations-page .ranked-card .poster {
    height: 138px;
  }
  .recommendations-page .ranked-card .watch-preview {
    min-height: 44px;
    padding: 4px;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    font-size: 11px;
    white-space: normal;
    border-radius: 6px;
  }
  .recommendations-page .ranked-card .discover-links .details-toggle {
    font-size: 12px;
    gap: 6px;
  }
  .recommendations-page .ranked-card .synopsis {
    -webkit-line-clamp: 3;
  }
  .recommendations-page .poster-stage:has(.trailer-panel:not([hidden])) {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 320px;
  }
  .recommendations-page
    .ranked-card:has(.trailer-panel:not([hidden]))
    .anime-summary {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Phone metadata shares the small cover's height instead of adding another panel. */
@media (max-width: 560px) {
  .recommendations-page .leaderboard-row .ranked-card {
    gap: 6px 10px;
  }
  .recommendations-page .ranked-card .card-content > .anime-summary {
    align-self: start;
  }
  .recommendations-page .ranked-card .genre-groups {
    display: contents;
  }
  .recommendations-page .ranked-card .genre-group {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .recommendations-page .ranked-card .genre-group-label {
    flex: 0 0 54px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .recommendations-page .ranked-card .genre-group-audience {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .recommendations-page .ranked-card .taxonomy-card {
    grid-column: 1 / -1;
    margin: 0;
  }
  .recommendations-page .ranked-card .taxonomy-card summary {
    min-height: 44px;
    padding: 10px 0;
  }
  .recommendations-page .leaderboard-row .poster-stage {
    grid-row: 1 / 3;
    height: 156px;
  }
  .recommendations-page .ranked-card .poster {
    height: 118px;
  }
  .recommendations-page .ranked-card .reactions {
    gap: 4px 8px;
  }
  .recommendations-page .ranked-card .mobile-reaction-label {
    line-height: 18px;
  }
  .recommendations-page
    .ranked-card:has(.trailer-panel:not([hidden]))
    .poster-stage {
    grid-row: 1;
    height: 320px;
  }
  .recommendations-page
    .ranked-card:has(.trailer-panel:not([hidden]))
    .genre-group-audience {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Discover: touch gestures only on the artwork. Everything else can scroll. */
.swipe-guide,
.swipe-feedback {
  display: none;
}
@media (max-width: 700px) {
  .cards-layout.discover-layout {
    overflow: clip;
  }
  .discover-card.swipe-enabled {
    transition:
      transform 180ms ease-out,
      opacity 160ms ease-out;
  }
  .discover-card.swipe-dragging {
    transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px))
      rotate(var(--swipe-rotate, 0deg));
    transition: none;
  }
  .discover-card.swipe-leaving {
    transition:
      transform 160ms ease-in,
      opacity 160ms ease-in;
    opacity: 0;
    pointer-events: none;
  }
  .discover-card.swipe-enabled .poster-stage {
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
  }
  .discover-card .poster-stage:has(.trailer-panel:not([hidden])) {
    touch-action: auto;
  }
  .discover-card .poster {
    -webkit-user-drag: none;
  }
  [data-layout="familiar"]
    .cards-layout.discover-layout
    .discover-card.swipe-enabled
    .poster-stage {
    height: clamp(180px, 32svh, 320px);
  }
  .discover-card .swipe-guide {
    display: block;
    color: #bdd0df;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 10px;
  }
  .discover-card .swipe-feedback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 6;
    pointer-events: none;
  }
  .swipe-stamp {
    padding: 14px 18px;
    border: 2px solid currentColor;
    border-radius: 10px;
    background: #0b1725f2;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }
  .swipe-stamp small {
    display: block;
    color: #edf4fa;
    font-size: 12px;
    margin-top: 4px;
  }
  .swipe-stamp.good {
    color: #61e7b8;
  }
  .swipe-stamp.bad {
    color: #ff7b91;
  }
  .swipe-stamp.watch {
    color: #65cafa;
  }
  .swipe-stamp.nope {
    color: #c6a5ef;
  }
  .swipe-stamp.blocked {
    color: #d3dce5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .discover-card.swipe-enabled,
  .discover-card.swipe-leaving {
    transition: none;
  }
}

/* Settings and returning viewing preferences follow the approved navy panels.
   Desktop: 208px navigation + flexible content; phones: one section at a time. */
.dialog.panel-dialog {
  --panel-bg: #0b1b29;
  --panel-rule: #254355;
  --panel-ink: #edf5fc;
  --panel-muted: #b3c7d8;
  width: min(960px, calc(100% - 40px));
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border-radius: 12px;
  border-color: #3b6882;
  background: var(--panel-bg);
  color: var(--panel-ink);
  overflow: hidden;
}
.dialog.settings-panel-dialog {
  width: min(780px, calc(100% - 40px));
  height: min(820px, calc(100dvh - 48px));
}
.preference-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-width: 0;
}
.panel-heading {
  padding: 20px 64px 20px 24px;
  border-bottom: 1px solid var(--panel-rule);
}
.dialog .panel-heading h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  margin: 0;
}
.dialog.panel-dialog > .close {
  top: 12px;
  right: 12px;
  position: absolute;
  z-index: 5;
}
.panel-workspace {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 0;
}
.panel-navigation {
  padding: 16px 12px;
  border-right: 1px solid var(--panel-rule);
  overflow-y: auto;
}
.panel-navigation button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  margin-bottom: 6px;
  background: transparent;
  color: var(--panel-ink);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  text-align: left;
  line-height: 1.45;
}
.panel-navigation button:hover {
  background: #183449;
}
.panel-navigation button[aria-current] {
  background: #183d57;
  border-left-color: #71e2fa;
  color: #8eeafa;
}
.panel-navigation .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.panel-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.panel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 22px 24px;
  scroll-padding-block: 16px;
  overflow-wrap: anywhere;
}
.panel-content :is(button, input, select, summary, a) {
  scroll-margin-block: 16px;
}
.panel-content h3 {
  font-size: 16px;
  margin: 0 0 10px;
}
.dialog .panel-content p {
  font-size: 13px;
  line-height: 1.6;
  margin: 6px 0 12px;
  color: var(--panel-muted);
}
.panel-content .preference-group {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--panel-rule);
}
.panel-content .preference-group:first-child {
  padding-top: 0;
}
.panel-content .preference-group:last-child {
  border-bottom: 0;
}
.panel-content .preference-group legend {
  font-size: 16px;
  margin: 0 0 4px;
  padding: 0;
  float: left;
  width: 100%;
}
.panel-content .preference-group legend + * {
  clear: both;
}
.panel-content .preference-group::after {
  content: "";
  display: block;
  clear: both;
}
.panel-content :is(input[type="search"], select) {
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  color: var(--panel-ink);
  background: #0d2435;
  border: 1px solid #456d83;
  border-radius: 5px;
  font-size: 14px;
}
.panel-content input::placeholder {
  color: #adc1d2;
}
.panel-content :is(button, a, input, select, summary):focus-visible,
.panel-navigation button:focus-visible,
.panel-footer button:focus-visible,
.panel-mobile-select select:focus-visible,
.panel-mobile-back:focus-visible {
  outline: 3px solid #c3f5ff;
  outline-offset: 2px;
}
.panel-content .genre-choices {
  gap: 8px;
  margin: 12px 0;
}
.panel-content .genre-choices button {
  min-height: 44px;
  padding: 9px 12px;
  background: #10283a;
  border: 1px solid #3e6278;
  border-radius: 5px;
  color: var(--panel-ink);
  font-size: 13px;
  text-decoration: none;
  margin: 0;
}
.panel-content .genre-choices button:hover {
  border-color: #85d9ef;
  background: #1a3d52;
}
.panel-content .genre-choices button[aria-pressed="true"] {
  background: #7cddf4;
  color: #072331;
  border-color: #7cddf4;
  box-shadow: none;
  font-weight: 650;
}
.panel-content .genre-choices button[aria-pressed="true"]::after {
  content: " ✓";
}
.panel-content .main-category-preferences {
  padding: 0;
  border: 0;
  margin: 0;
}
.panel-content .main-category-preferences h3 {
  display: none;
}
.panel-content .genre-focus {
  margin-block: 12px;
  padding: 10px;
  border-radius: 5px;
  font-size: 13px;
}
.panel-content label:has(> input[type="checkbox"]:not([role="switch"])) {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding-block: 10px;
  font-size: 14px;
  cursor: pointer;
}
.panel-content input[type="checkbox"]:not([role="switch"]) {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #7cddf4;
}
.panel-checks label > span {
  display: block;
}
.panel-checks label small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}
.panel-checks label:has(input:checked) {
  color: #8eeafa;
}
.panel-content .panel-checks > small {
  display: block;
  margin-top: 12px;
}
.panel-content .setting-row {
  padding: 18px 0;
  gap: 18px;
  border-bottom: 1px solid var(--panel-rule);
  margin: 0;
}
.panel-content .setting-row > :first-child {
  min-width: 0;
  flex: 1;
}
.panel-content .setting-row strong {
  font-size: 14px;
  font-weight: 600;
}
.setting-help {
  display: block;
  margin-top: 5px;
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.55;
}
.panel-toggle {
  cursor: pointer;
}
.panel-content input[role="switch"] {
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
}
.panel-content .panel-group {
  padding-top: 20px;
}
.panel-content .taxonomy-preferences {
  margin-top: 20px;
  border-top: 1px solid var(--panel-rule);
  border-radius: 0;
  padding: 16px 0 0;
  background: none;
}
.panel-content .taxonomy-preferences summary {
  min-height: 44px;
  font-size: 15px;
}
.panel-content .taxonomy-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-content .taxonomy-option {
  min-width: 0;
}
.panel-content .taxonomy-choice {
  min-height: 52px;
}
.panel-content .theme-preferences {
  margin: 0;
}
.panel-content .theme-preferences > summary {
  min-height: 44px;
  padding: 8px 0;
}
.panel-content .taste-setup > label {
  font-size: 13px;
  margin-top: 8px;
  display: block;
}
.panel-content .taste-setup > label strong {
  font-weight: 400;
  color: var(--panel-muted);
}
.panel-content .favorite-selections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 104px));
  gap: 12px;
  margin-top: 14px;
}
.panel-content .favorite-selections > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  padding: 0;
  background: none;
  gap: 6px;
}
.panel-content .favorite-selections img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 5px;
}
.panel-content .favorite-selections span {
  font-size: 12px;
  line-height: 1.4;
}
.panel-content .favorite-selections button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: #06121cdd;
  color: white;
  font-size: 25px;
  border-radius: 0 5px 0 5px;
  text-decoration: none;
}
.panel-content .favorite-results {
  max-height: 240px;
  overflow-y: auto;
}
.panel-content .background-options {
  padding: 0 0 20px;
}
.panel-content .background-options legend {
  font-size: 16px;
}
.panel-content .background-preview {
  height: clamp(80px, 11vw, 126px);
}
.panel-content .background-motion-note {
  margin: 14px 0 0;
  font-size: 12px;
}
.settings-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--panel-rule);
  color: var(--panel-ink);
  text-align: left;
  border-radius: 0;
  min-height: 64px;
}
.settings-link:hover {
  background: #163044;
}
.settings-link > span {
  flex: 1;
  min-width: 0;
}
.settings-link strong {
  font-size: 14px;
  font-weight: 600;
}
.settings-link small {
  display: block;
  font-size: 12px;
  color: var(--panel-muted);
  margin-top: 5px;
}
.settings-link .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.install-app-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px 0 0;
}
.install-app-compact > span {
  flex: 1;
  min-width: 120px;
}
.install-app-compact strong {
  display: block;
  font-size: 14px;
}
.install-app-compact small {
  display: block;
  color: var(--panel-muted);
  font-size: 12px;
  margin-top: 4px;
}
.install-app-compact .apk-download {
  width: auto;
  font-size: 12px;
  padding: 10px;
  margin: 0;
  min-height: 44px;
  opacity: 0.65;
}
.shortcut-list {
  margin: 16px 0;
}
.shortcut-list > div {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 20px;
  border-bottom: 1px solid var(--panel-rule);
}
.shortcut-list dt {
  min-width: 64px;
}
.shortcut-list dd {
  margin: 0;
  font-size: 14px;
}
.shortcut-list kbd {
  font-family: inherit;
  font-size: 13px;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #456d83;
  border-radius: 4px;
}
.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--panel-rule);
  background: var(--panel-bg);
  font-size: 12px;
  color: var(--panel-muted);
}
.panel-footer > :first-child {
  flex: 1;
}
.panel-footer .primary {
  min-width: 100px;
  min-height: 44px;
  margin: 0;
  background: #7cddf4;
  color: #072331;
  border-radius: 6px;
  box-shadow: none;
}
.panel-reset {
  min-height: 44px;
  background: none;
  border: 0;
  color: #8eeafa;
  font-size: 12px;
  padding: 6px;
}
.panel-mobile-select,
.panel-mobile-back {
  display: none;
}
@media (max-width: 700px) {
  .dialog.panel-dialog {
    width: calc(100% - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 10px;
  }
  .panel-heading {
    padding: 18px 60px 18px 16px;
  }
  .dialog .panel-heading h2 {
    font-size: 22px;
  }
  .panel-workspace {
    display: flex;
    flex-direction: column;
  }
  .panel-navigation {
    display: none;
  }
  .panel-main {
    flex: 1;
  }
  .panel-mobile-select {
    display: block;
    padding: 12px 16px 0;
  }
  .panel-mobile-select select {
    min-height: 44px;
    width: 100%;
    border: 1px solid #456d83;
    background: #10283a;
    color: #8eeafa;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
  }
  .panel-mobile-back {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-height: 48px;
    margin: 0 16px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--panel-rule);
    background: none;
    color: #b7eafa;
    font-size: 14px;
  }
  .panel-content {
    padding: 18px 16px;
  }
  .panel-footer {
    flex-wrap: wrap;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  .panel-footer .primary {
    min-width: 80px;
  }
  .panel-content .background-preview {
    height: 90px;
  }
  .panel-content .preference-score-range {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .panel-content .favorite-selections {
    gap: 8px;
  }
  .panel-content .taxonomy-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 360px) {
  .panel-footer .panel-save-status {
    flex-basis: 100%;
  }
  .panel-footer .panel-reset {
    margin-right: auto;
  }
}
.panel-mobile-select .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.account-section {
  padding-top: 20px;
}
.account-section:first-of-type {
  padding-top: 8px;
}
.account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  flex-wrap: wrap;
}
.account-identity > div {
  flex: 1;
  min-width: 100px;
}
.account-identity strong {
  font-size: 14px;
}
.account-identity small {
  display: block;
  color: var(--panel-muted);
  font-size: 12px;
  margin-top: 5px;
}
.account-identity button {
  min-height: 44px;
}
.mal-wordmark {
  background: #244eaa;
  color: white;
  padding: 12px 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 750;
}
/* Keep the first useful controls in view, with full scrolling for denser taste lists. */
.dialog.panel-dialog {
  max-width: calc(100% - 40px);
}
.panel-heading h2:focus {
  outline: none;
}
.panel-content .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.panel-content .background-preview {
  height: 108px;
}
.panel-content .background-options {
  padding-bottom: 8px;
}
.panel-content .background-motion-note {
  line-height: 1.5;
  margin: 12px 0 0;
}
.settings-link {
  padding-block: 12px;
}
.settings-link strong {
  display: block;
  line-height: 20px;
}
.settings-link small {
  line-height: 18px;
  margin-top: 3px;
}
.settings-link[aria-label="Help"] {
  display: none;
}
.install-app-compact {
  padding-top: 14px;
}
.install-app-compact .apk-download {
  flex: 0 0 auto;
}
.panel-content .favorite-selections {
  grid-template-columns: repeat(3, minmax(0, 90px));
}
@media (max-width: 700px) {
  .dialog.panel-dialog {
    max-width: calc(100% - 16px);
  }
  .panel-content .background-preview {
    height: 80px;
  }
  .settings-link[aria-label="Help"] {
    display: flex;
  }
  .install-app-compact > .icon {
    display: none;
  }
  .install-app-compact > span {
    min-width: 100px;
  }
}

/* Preference editor: stable grids, readable labels, selection before restrictions. */
@media (min-width: 701px) {
  .settings-link[aria-label="Account & MyAnimeList"] {
    display: none;
  }
}
.dialog .panel-content p,
.panel-content .setting-help {
  font-size: 14px;
  line-height: 1.6;
}
.panel-content .preference-group {
  min-inline-size: 0;
}
.panel-content .taste-setup > label.visually-hidden {
  margin: -1px;
}
.panel-content .genre-preferences-taste > .genre-choices,
.panel-content .main-category-preferences > .genre-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.panel-content .genre-choices button {
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.panel-content .genre-preferences-taste > .genre-choices button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.panel-content .genre-preferences-taste > .genre-choices button::after {
  content: "";
  width: 12px;
  flex: 0 0 12px;
  margin-left: 4px;
}
.panel-content
  .genre-preferences-taste
  > .genre-choices
  button[aria-pressed="true"]::after {
  content: "✓";
}
.panel-content .favorite-selections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.panel-content .favorite-selections > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4px 10px;
  border: 1px solid var(--panel-rule);
  border-radius: 5px;
  padding: 8px;
  background: #10283a;
}
.panel-content .favorite-selections img {
  grid-row: 1 / 3;
  width: 48px;
  height: 72px;
  aspect-ratio: auto;
}
.panel-content .favorite-selections span {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.panel-content .favorite-selections button {
  position: static;
  justify-self: end;
  width: 44px;
  background: transparent;
  border-radius: 4px;
  font-size: 22px;
}
.panel-content .taxonomy-preferences > label:not(.taxonomy-restrict) {
  display: block;
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.panel-content .taxonomy-restrict {
  margin-top: 20px;
  border-top: 1px solid var(--panel-rule);
}
.panel-content .taxonomy-choice {
  text-align: left;
}
.panel-content label:has(> input[type="checkbox"]:not([role="switch"])) {
  line-height: 20px;
}
@media (max-width: 900px) {
  .panel-content .genre-preferences-taste > .genre-choices,
  .panel-content .main-category-preferences > .genre-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .panel-content .favorite-selections {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .panel-content .favorite-selections > div {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    grid-template-rows: auto;
    align-items: center;
  }
  .panel-content .favorite-selections img {
    grid-row: auto;
    width: 40px;
    height: 56px;
  }
}
@media (max-width: 420px) {
  .panel-content .genre-preferences-taste > .genre-choices,
  .panel-content .main-category-preferences > .genre-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Layered navy settings: distinguish navigation, workspace and controls without glow. */
.dialog.panel-dialog {
  --panel-bg: #122333;
  --panel-rule: #304454;
  --panel-muted: #bfccd7;
  background: var(--panel-bg);
  border-color: #42596b;
  border-radius: 10px;
}
.dialog.settings-panel-dialog {
  height: min(720px, calc(100dvh - 48px));
}
.panel-heading,
.panel-footer {
  background: #0e1c29;
}
.panel-navigation {
  background: #0b1824;
}
.panel-navigation button {
  border-radius: 3px;
}
.panel-navigation button[aria-current] {
  background: #1a3448;
  color: #e3f7ff;
  border-left-color: #7cddf4;
}
.panel-content .genre-choices button {
  background: #1a3042;
  border-color: #3b5264;
  border-radius: 4px;
  box-shadow: none;
}
.panel-content .genre-choices button[aria-pressed="true"] {
  background: #214b65;
  border-color: #7cddf4;
  color: #effbff;
}
.panel-content .genre-choices button:hover {
  background: #28465c;
  border-color: #83bfd7;
}
.panel-content .taxonomy-preferences {
  border: 1px solid var(--panel-rule);
  background: #0e1d2b;
  border-radius: 6px;
  padding: 16px;
  margin-top: 24px;
}
.panel-content .taxonomy-preferences summary {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  list-style: none;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--panel-ink);
  line-height: 1.45;
}
.panel-content .taxonomy-preferences summary::-webkit-details-marker {
  display: none;
}
.panel-content .taxonomy-preferences summary::before {
  content: "›";
  font-size: 23px;
  color: #9edcf0;
}
.panel-content .taxonomy-preferences[open] summary::before {
  transform: rotate(90deg);
}
.panel-content .taxonomy-preferences .taxonomy-heading {
  font-size: 16px;
  font-weight: 650;
}
.panel-content .taxonomy-preferences .taxonomy-count {
  margin-left: 0;
  font-size: 12px;
  font-weight: 400;
  color: #bfccd7;
}
.panel-content .taxonomy-options {
  gap: 0 16px;
}
.panel-content .taxonomy-option {
  border-bottom: 1px solid var(--panel-rule);
}
.panel-content .taxonomy-choice {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding: 12px 8px;
  min-height: 66px;
}
.panel-content .taxonomy-choice span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.panel-content .taxonomy-choice small {
  font-size: 12px;
  line-height: 1.4;
  color: #b6c8d6;
}
.panel-content .taxonomy-choice:not([aria-pressed]) {
  padding-right: 28px;
}
.panel-content .taxonomy-choice:not([aria-pressed])::after {
  content: "›";
  position: absolute;
  right: 8px;
  top: 22px;
  color: #9edcf0;
  font-size: 20px;
}
.panel-content .taxonomy-choice:hover {
  background: #1b3448;
}
.panel-content .taxonomy-choice[aria-pressed="true"] {
  background: #214b65;
  box-shadow: inset 3px 0 #7cddf4;
}
.panel-content .taxonomy-breadcrumbs button {
  background: transparent;
  border-color: #435b6c;
  border-radius: 4px;
  font-size: 13px;
}
.panel-content .background-choice {
  box-shadow: none;
  border-radius: 5px;
}
@media (max-width: 700px) {
  .dialog.settings-panel-dialog {
    height: calc(100dvh - 16px);
  }
  .panel-content .taxonomy-preferences {
    padding: 14px;
  }
  .panel-content .taxonomy-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-content .taxonomy-preferences summary {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 4px 8px;
  }
  .panel-content .taxonomy-preferences .taxonomy-count {
    grid-column: 2;
  }
}

/* Category choices explicitly distinguish saving an interest from browsing deeper. */
.panel-content .taxonomy-choice:not([aria-pressed]) {
  padding-right: 8px;
}
.panel-content .taxonomy-choice:not([aria-pressed])::after {
  content: none;
}
.taxonomy-choice .taxonomy-action {
  align-self: flex-start;
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid #689bb6;
  border-radius: 4px;
  color: #d7f5ff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  background: #1b3e55;
}
.taxonomy-choice[aria-pressed="true"] .taxonomy-action {
  border-color: #7cddf4;
  color: #effbff;
  background: #245573;
}
.taxonomy-choice:not([aria-pressed]) .taxonomy-action {
  padding-left: 0;
  background: transparent;
  border-color: transparent;
}
.panel-content .taxonomy-preferences .taxonomy-drill {
  flex: 0 0 112px;
  align-self: stretch;
  font-size: 12px;
  line-height: 1.5;
  border: 0;
  border-left: 1px solid var(--panel-rule);
  border-radius: 0;
  background: transparent;
  color: #bce7f7;
  margin: 8px 0 8px 8px;
  padding: 8px;
}
.panel-content .taxonomy-preferences .taxonomy-drill:hover {
  background: #1b3448;
}

.admin-browser-signals {
  display: grid;
  grid-template-columns: minmax(100px, 160px) minmax(0, 1fr);
  gap: 10px 16px;
}
.admin-browser-signals dt {
  font-weight: 650;
}
.admin-browser-signals dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .admin-browser-signals {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .admin-browser-signals dd {
    margin-bottom: 12px;
  }
}

/* Approved expandable category tree: selection and expansion are separate controls. */
.settings-preferences-workspace .panel-workspace {
  grid-template-columns: 226px minmax(0, 1fr);
}
.workspace-intro {
  padding: 24px 24px 12px;
}
.dialog .workspace-intro h3 {
  font-size: 23px;
  line-height: 1.25;
  margin: 0;
}
.dialog .workspace-intro p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--panel-muted);
  margin: 8px 0 0;
}
.workspace-back {
  display: none;
}
.preference-section-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--panel-rule);
}
.preference-section-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.4;
}
.preference-section-tabs button[aria-current] {
  color: #8eeafa;
  border-bottom-color: #59cfff;
  font-weight: 650;
}
.preference-section-tabs button:hover {
  background: #193247;
  color: #effbff;
}
.preference-section-tabs button:focus-visible,
.workspace-back:focus-visible {
  outline: 3px solid #c3f5ff;
  outline-offset: -3px;
}
.interest-editor {
  margin: 0 0 24px;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid var(--panel-rule, #304454);
  min-width: 0;
}
.interest-editor > summary {
  padding: 12px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
}
.panel-content .interest-editor h3 {
  font-size: 18px;
  margin: 0 0 14px;
}
.interest-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.interest-editor > input[type="search"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
.interest-selected {
  margin: 16px 0 18px;
}
.dialog .interest-selected .interest-selected-title {
  color: var(--panel-ink);
  font-size: 13px;
  margin: 0 0 8px;
}
.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.interest-chips button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 14px;
  background: #245b86;
  border: 1px solid #3e7fab;
  border-radius: 24px;
  color: white;
  font-size: 14px;
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.interest-chips button:hover {
  background: #306d9c;
}
.interest-chips button span {
  font-size: 19px;
}
.interest-tree,
.interest-children {
  list-style: none;
  padding: 0;
  margin: 0;
}
.interest-branch {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.interest-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  border-radius: 4px;
}
.interest-row:hover {
  background: #182f42;
}
.interest-expand,
.interest-spacer {
  flex: 0 0 36px;
  width: 36px;
}
.interest-expand {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #dbeaf5;
  font-size: 21px;
}
.interest-family {
  flex: 1;
  text-align: left;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ecf5fc;
  font-size: 15px;
  line-height: 1.5;
}
.interest-family small {
  color: #b2c7d8;
  font-size: 13px;
}
.interest-family:hover,
.interest-expand:hover {
  background: #1d3b52;
}
.interest-children {
  margin-left: 18px;
  padding-left: 12px;
  border-left: 1px dashed #3d596c;
}
.interest-children.interest-deep {
  margin-left: 4px;
  padding-left: 4px;
}
.interest-tree .interest-selection,
.panel-content .interest-tree .interest-selection {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}
.interest-selection > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.interest-selection small {
  display: block;
  color: #b2c7d8;
  font-size: 12px;
  margin-top: 2px;
}
.interest-selection input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #58bbef;
}
.interest-row.is-selected .interest-selection {
  color: #e2f6ff;
}
.interest-search-results > li {
  padding: 0 8px;
  border-bottom: 1px solid #304454;
}
.dialog .interest-legend {
  color: #c3d3df;
  font-size: 13px;
  padding: 14px 0;
  margin: 16px 0 0;
}
.interest-restrict {
  border-top: 1px solid #304454;
  padding-top: 14px;
}
.dialog .interest-filter-help {
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .settings-preferences-workspace .panel-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-preferences-workspace .panel-heading h2 {
    display: none;
  }
  .workspace-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    color: #dcefff;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 15px;
  }
  .settings-preferences-workspace .panel-heading {
    padding: 6px 60px 6px 18px;
  }
  .workspace-intro {
    padding: 14px 16px 4px;
  }
  .dialog .workspace-intro h3 {
    font-size: 22px;
  }
  .dialog .workspace-intro p {
    font-size: 13px;
  }
  .preference-section-tabs {
    display: none;
  }
  .interest-expand,
  .interest-spacer {
    flex-basis: 30px;
    width: 30px;
  }
  .interest-children {
    margin-left: 14px;
    padding-left: 6px;
  }
  .interest-family {
    font-size: 14px;
  }
}

/* Keep the interest list usable in short landscape windows. */
@media (max-height: 520px) {
  .settings-preferences-workspace .panel-heading {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .settings-preferences-workspace .workspace-intro {
    padding: 8px 20px 4px;
  }
  .dialog .settings-preferences-workspace .workspace-intro h3 {
    font-size: 18px;
  }
  .settings-preferences-workspace .workspace-intro p {
    display: none;
  }
  .settings-preferences-workspace .preference-section-tabs button {
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .settings-preferences-workspace .panel-footer {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .settings-preferences-workspace .panel-mobile-select {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Category glossary: browsing, reading and saving are independent actions. */
.dialog.preferences-panel-dialog {
  width: min(1120px, calc(100% - 40px));
}
.interest-search-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 550;
}
.interest-browser {
  min-width: 0;
  margin-bottom: 18px;
}
.interest-browser.has-reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr);
  gap: 20px;
  align-items: start;
}
.interest-list {
  min-width: 0;
}
.interest-row.is-reading {
  background: #16354a;
  box-shadow: inset 0 0 0 1px #64cfff;
}
.interest-info-wrap {
  position: relative;
  flex: 0 0 44px;
  align-self: center;
}
.interest-info {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: #a9def9;
  cursor: pointer;
}
.interest-info svg {
  width: 24px;
  height: 24px;
  fill: #18384d;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.interest-info .info-dot {
  fill: currentColor;
  stroke: none;
}
.interest-info:hover,
.interest-info:focus-visible,
.interest-info[aria-expanded="true"] {
  color: #77e7ff;
  background: #20475f;
}
.interest-info[aria-expanded="true"] svg {
  stroke-width: 2;
}
.interest-tooltip {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 8;
  width: max-content;
  max-width: min(220px, 60vw);
  padding: 7px 10px;
  background: #071622;
  color: #f4faff;
  border: 1px solid #52738a;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 3px 10px #0005;
}
.interest-info-wrap:not(.tooltip-dismissed) > .interest-info:focus-visible:not([aria-expanded="true"]) + .interest-tooltip {
  display: block;
}
@media (hover: hover) {
  .interest-info-wrap:not(.tooltip-dismissed):hover > .interest-info:not([aria-expanded="true"]) + .interest-tooltip {
    display: block;
  }
}
.interest-reader {
  min-width: 0;
  padding: 0 0 12px 20px;
  border-left: 1px solid #375064;
  position: sticky;
  top: 0;
}
.interest-reader-heading {
  display: flex;
  align-items: start;
  gap: 8px;
}
.interest-reader-heading h4 {
  flex: 1;
  font-size: 22px;
  line-height: 1.35;
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.interest-reader-heading h4:focus-visible {
  outline: 2px solid #a9eaff;
  outline-offset: 3px;
}
.interest-reader-close {
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
  font-size: 26px;
  border: 0;
  background: transparent;
  color: #c5dae9;
}
.interest-reader-close:hover {
  background: #203d51;
}
.dialog .interest-reader p,
.interest-reader li {
  font-size: 14px;
  line-height: 1.65;
}
.dialog .interest-reader .interest-definition {
  color: #e4eff7;
  margin: 18px 0;
}
.interest-reader h5 {
  font-size: 14px;
  margin: 22px 0 10px;
}
.interest-reader ul {
  padding-left: 20px;
}
.interest-reader li + li {
  margin-top: 8px;
}
.interest-reader-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #62d0fa;
  color: #8ce5ff;
  background: #103149;
  font-size: 14px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.interest-reader-select:hover {
  background: #204b67;
}
.interest-reader-select[aria-pressed="true"] {
  background: #245b86;
  color: #fff;
}
.interest-reader-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.interest-context-links {
  border-top: 1px solid #304454;
  margin-top: 16px;
}
.interest-context-links button {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: #9ae5ff;
  font-size: 14px;
}
.interest-context-links button small {
  display: block;
  font-size: 12px;
  color: #bdcedb;
  margin-top: 2px;
}
.dialog .interest-legend {
  padding: 0;
  margin: 12px 0 18px;
}
.interest-browser.has-reader .interest-children {
  margin-left: 8px;
  padding-left: 6px;
}
.interest-browser.has-reader .interest-deep {
  margin-left: 3px;
  padding-left: 3px;
}
.interest-browser.has-reader .interest-spacer {
  flex-basis: 12px;
  width: 12px;
}
.interest-browser.has-reader .interest-expand {
  flex-basis: 28px;
  width: 28px;
}
.taste-secondary {
  border-bottom: 1px solid #304454;
  padding: 12px 0;
}
.taste-secondary > summary {
  cursor: pointer;
  min-height: 44px;
  display: list-item;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .interest-browser.has-reader {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .interest-browser.has-reader .interest-list {
    max-height: 280px;
    overflow: auto;
    padding: 24px 4px 4px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
  .interest-reader {
    position: static;
    border: 1px solid #375064;
    border-radius: 8px;
    padding: 12px 16px;
    background: #102a3d;
  }
}
@media (max-width: 700px) {
  .dialog.preferences-panel-dialog {
    width: calc(100% - 16px);
  }
  .interest-reader-heading h4 {
    font-size: 20px;
  }
  .interest-browser.has-reader .interest-list {
    max-height: 220px;
  }
}

/* Approved A: one expandable hierarchy, with no depth-dependent navigation. */
.interest-browser {
  display: block;
}
.interest-list {
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  padding: 3px;
  scrollbar-width: thin;
}
.interest-tree {
  min-width: 100%;
}
.interest-tree > .interest-branch {
  margin: 12px 0;
}
.interest-row {
  position: relative;
  gap: 4px;
  min-width: 190px;
  min-height: 48px;
}
.interest-row.has-children:hover {
  background: transparent;
}
.interest-branch-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  text-align: left;
  padding: 8px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #edf5fb;
  font-size: 16px;
  line-height: 24px;
  touch-action: manipulation;
}
.interest-branch-toggle strong {
  font-size: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.interest-chevron {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.interest-row.is-main {
  background: #1b405c;
  border: 1px solid #527d9b;
  border-radius: 5px;
  padding-left: 8px;
}
.interest-row.is-main > .interest-branch-toggle {
  min-height: 52px;
}
.interest-row.is-main > .interest-branch-toggle strong {
  font-weight: 700;
}
.interest-branch-toggle:hover {
  background: #254a65;
}
.interest-branch-toggle:focus-visible {
  outline: 2px solid #a9eaff;
  outline-offset: -2px;
}
.interest-children,
.interest-browser .interest-children {
  border-left: 1px dotted #7293a9;
  margin: 0 0 0 8px;
  padding: 4px 0 0 12px;
}
.interest-children > .interest-branch {
  margin: 0;
}
.interest-children > .interest-branch > .interest-row::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  border-top: 1px dotted #7293a9;
  pointer-events: none;
}
.interest-children
  > .interest-branch
  > .interest-row:is(.is-selected, .is-reading)::before {
  border-color: #82e5ff;
}
.interest-row.is-selected {
  background: #173c53;
  box-shadow: inset 3px 0 #76d9ff;
}
.interest-row.is-reading {
  outline: 1px solid #65cff5;
  outline-offset: -1px;
}
.interest-branch-choice {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  min-height: 48px;
  cursor: pointer;
}
.interest-branch-check {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #58bbef;
}
.interest-tree .interest-selection,
.panel-content .interest-tree .interest-selection {
  min-height: 48px;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
}
.interest-info {
  touch-action: manipulation;
}
@media (max-width: 700px) {
  .interest-children,
  .interest-browser .interest-children {
    margin-left: 4px;
    padding-left: 8px;
  }
  .interest-children > .interest-branch > .interest-row::before {
    left: -8px;
    width: 8px;
  }
  .interest-branch-choice {
    flex-basis: 44px;
    width: 44px;
  }
}
.category-popover.interest-reader {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 16px 20px 20px;
  border: 1px solid #5b8da9;
  border-radius: 9px;
  background: #112b3e;
  color: #edf5fb;
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  box-shadow: 0 14px 40px #0008;
  transform: none;
  animation: none;
  transition: none;
}
.category-popover::backdrop {
  background: #020c1426;
  backdrop-filter: none;
}
.category-popover .interest-reader-heading {
  position: sticky;
  top: -16px;
  margin: -16px -20px 0;
  padding: 12px 12px 8px 20px;
  background: #112b3e;
  z-index: 1;
}
.category-popover .interest-reader-heading h4 {
  font-size: 20px;
}
.category-popover .interest-reader-heading h4:focus {
  outline: none;
}
.category-popover .interest-reader-heading h4:focus-visible {
  outline: 2px solid #b2edff;
  outline-offset: 2px;
}
.category-popover .interest-reader-select {
  margin-top: 8px;
}
.category-popover :is(button, a):focus-visible {
  outline: 3px solid #c3f5ff;
  outline-offset: 2px;
}
.category-popover .interest-reading-note {
  font-size: 13px;
  color: #c2d2df;
}

/* Read-only glossary, with its own type scale rather than inherited dialog paragraphs. */
.category-popover.interest-reader {
  width: min(400px, calc(100vw - 24px));
}
.category-popover .interest-reader-heading {
  align-items: center;
}
.category-popover .interest-reader-heading h4 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  margin: 0;
}
.dialog .category-popover.interest-reader p,
.category-popover.interest-reader p,
.category-popover.interest-reader li {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 12px 0;
  text-align: left;
}
.dialog .category-popover.interest-reader .interest-context {
  font-size: 14px;
  line-height: 21px;
  color: #bfd0de;
  margin: 0 0 12px;
}
.dialog .category-popover.interest-reader .interest-definition {
  color: #edf5fb;
  margin: 12px 0;
}
.category-popover.interest-reader h5 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin: 16px 0 4px;
}
.category-popover .interest-context-links {
  margin-top: 16px;
  padding-top: 0;
}
.category-popover .interest-context-links button {
  font-size: 16px;
  line-height: 24px;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .category-popover::backdrop {
    background: #020c1470;
  }
}

/* Expanded child rows remain plain; global expanded-button styles must not color them. */
.interest-row:not(.is-main) > .interest-branch-toggle[aria-expanded] {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.interest-row:not(.is-main) > .interest-branch-toggle[aria-expanded]:hover {
  background: #ffffff08;
  color: #b9edff;
}

/* Anime scenery remains visible in still mode; only transforms animate. */
.anime-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
.scene-moon {
  fill: rgb(var(--warm));
  opacity: 0.45;
}
.scene-distant {
  fill: rgb(var(--cool));
  opacity: 0.65;
}
.scene-near {
  fill: rgb(var(--cool));
  opacity: 0.85;
}
.mountain-snow {
  fill: rgb(var(--warm));
  opacity: 0.45;
}
.sakura-branch {
  fill: none;
  stroke: rgb(var(--cool));
  stroke-width: 16;
  stroke-linecap: round;
}
.sakura-petal {
  fill: rgb(var(--warm));
  opacity: 0.8;
  animation: petal-breeze 14s ease-in-out infinite alternate;
  animation-delay: calc(var(--n) * -1.3s);
}
.scene-cloud {
  fill: none;
  stroke: rgb(var(--warm));
  stroke-width: 26;
  opacity: 0.2;
  animation: scene-drift 25s ease-in-out infinite alternate;
}
.skyline-wire {
  fill: none;
  stroke: rgb(var(--warm));
  stroke-width: 3;
  opacity: 0.3;
}
@keyframes petal-breeze {
  from {
    transform: translate(-30px, -45px);
  }
  to {
    transform: translate(100px, 100px);
  }
}
@keyframes scene-drift {
  from {
    transform: translateX(-40px);
  }
  to {
    transform: translateX(60px);
  }
}
.background-controls {
  display: grid;
  gap: 12px;
  margin: 18px 0 12px;
}
.background-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.5;
}
.background-controls input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #80cced;
}
.category-popover.interest-reader[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.category-popover.interest-reader .interest-reader-heading {
  position: static;
  flex: none;
  margin: 0;
  padding: 12px 12px 10px 20px;
  border-bottom: 1px solid #385569;
}
.interest-reader-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}
.interest-context-links button {
  text-align: left;
  max-width: 100%;
  white-space: normal;
}
.interest-row:focus-within {
  outline: 2px solid #8ce1fa;
  outline-offset: 2px;
}
.ambient[data-motion="false"] .ribbon-halo {
  filter: none;
}

/* Selection and browsing have explicit, different labels at every depth. */
.interest-select-group {
  padding: 10px 4px;
}
.interest-selection .interest-category-name {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
.interest-select-group .interest-category-name {
  font-weight: 650;
}
.interest-selection small {
  display: block;
  margin-top: 3px;
  color: #b5ccd9;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
}
.interest-row:has(input[aria-checked="mixed"]) {
  box-shadow: inset 3px 0 #8cb4c8;
}
.interest-chips {
  max-height: 128px;
  overflow-y: auto;
  padding: 3px;
}
.interest-row .interest-selection {
  min-width: 0;
  flex: 1;
}
.interest-row .interest-selection > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Discover has one full-width route into Details; Why remains a Details tab. */
.discover-links:not(:has(.why-toggle)) {
  grid-template-columns: minmax(0, 1fr);
}
/* The entire visible row belongs to its native action, including the left inset. */
.interest-row,
.interest-row.is-main,
.interest-search-results > .interest-row {
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.interest-row > .interest-branch-toggle {
  border-radius: inherit;
  padding-left: 12px;
}
.interest-row > .interest-selection {
  align-self: stretch;
  border-radius: inherit;
  touch-action: manipulation;
}
.interest-row > .interest-info-wrap {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  flex: 0 0 44px;
}
.interest-row .interest-info {
  height: 100%;
  min-height: 44px;
}

/* One continuous tree: only the root category groups have a blue container. */
.interest-row > .interest-selection.interest-checkbox-only {
  flex: 0 0 44px;
  width: 44px;
  min-height: 48px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.interest-row:not(.is-main),
.interest-row:not(.is-main):is(.is-selected, .is-reading, :focus-within) {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.interest-row:not(.is-main) > .interest-branch-toggle {
  padding-left: 8px;
}
.interest-selection:has(input:focus-visible) {
  outline: 2px solid #a9eaff;
  outline-offset: -2px;
}

/* Watchlist transfer tools share one deliberate, responsive surface. */
.watchlist-page .watchlist-tools > summary {
  width: max-content;
  max-width: 100%;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #456478;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
}
.watchlist-tools > summary::-webkit-details-marker { display: none; }
.watchlist-tools > summary svg { width: 16px; height: 16px; }
.watchlist-tools[open] > summary svg { transform: rotate(180deg); }
.watchlist-page .watchlist-tools[open] > summary { margin-left: auto; }
.watchlist-page .watchlist-tools-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  margin: 12px 0 16px;
  padding: 20px;
  background: #101f2a;
  border: 1px solid #365365;
  border-radius: 9px;
}
.watchlist-transfer-section { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.watchlist-transfer-section + .watchlist-transfer-section { border-left: 1px solid #365365; padding-left: 24px; }
.watchlist-transfer-section h3 { margin: 0; font-size: 16px; color: #edf5fb; }
.watchlist-transfer-section p { margin: 0; color: #b8cbd9; font-size: 14px; line-height: 1.55; max-width: 52ch; }
.watchlist-export-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: auto; width: 100%; }
.watchlist-tools-body .backup-format { display: grid; gap: 6px; margin: 0; color: #c3d3df; font-size: 13px; }
.watchlist-tools-body .backup-format select { min-width: 120px; min-height: 44px; margin: 0; }
.watchlist-tools-body .outline { min-height: 44px; width: auto; margin: 0; padding: 10px 16px; white-space: normal; }
.watchlist-transfer-section > .outline { margin-top: auto; }
.watchlist-tools > summary:focus-visible { outline: 2px solid #8ce1fa; outline-offset: 3px; }
@media (max-width: 640px) {
  .watchlist-page .watchlist-tools-body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .watchlist-transfer-section + .watchlist-transfer-section { border-left: 0; border-top: 1px solid #365365; padding: 20px 0 0; }
  .watchlist-export-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .watchlist-tools-body .outline, .watchlist-tools-body .backup-format { width: 100%; }
}

/* Anchor Details navigation independently of the active panel's height.
 * Short panels shrink downward; long panels scroll below the same header. */
dialog.details-card.details-modal,
[data-layout="familiar"] .cards-layout.discover-layout dialog.details-modal {
  --details-top: max(24px, calc((100dvh - 760px) / 2));
  top: var(--details-top);
  bottom: auto;
  margin: 0 auto;
  height: auto;
  max-height: calc(100dvh - var(--details-top) - 24px);
}
.details-modal .details-body {
  scrollbar-gutter: stable;
}
@media (max-width: 560px), (max-height: 500px) {
  dialog.details-card.details-modal,
  [data-layout="familiar"] .cards-layout.discover-layout dialog.details-modal {
    --details-top: 12px;
    max-height: calc(100dvh - 24px);
  }
}

/* The complete artwork is the preview target; its overlay is only a cue. */
.poster-stage .artwork-preview,
.saved-image .artwork-preview,
.recommendations-page .ranked-card .artwork-preview {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: normal;
}
.artwork-play {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding-left: 3px;
  border: 1px solid #e4f6ffb3;
  border-radius: 50%;
  background: #071522cc;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 3px 12px #0005;
}
.artwork-unavailable {
  padding: 6px 10px;
  border-radius: 6px;
  background: #071522d9;
  color: #f3faff;
  font-size: 12px;
}
.artwork-preview:hover .artwork-play { background: #17516be6; border-color: #9ae6ff; }
.artwork-preview:focus-visible { outline: 3px solid #9ae6ff; outline-offset: -3px; }
.artwork-preview:disabled { cursor: default; opacity: 1; }
.poster-stage .artwork-preview[hidden], .saved-image .artwork-preview[hidden] { display: none; }
.saved-image { position: relative; }
.saved-image .artwork-play { width: 38px; height: 38px; font-size: 17px; }
.watchlist-page .saved-card:has(.trailer-panel:not([hidden])) .saved-image {
  grid-column: 1 / -1;
  width: 100%;
  height: 280px;
  aspect-ratio: auto;
}
.watchlist-page .saved-card:has(.trailer-panel:not([hidden])) .saved-content { grid-column: 1 / -1; }
.recommendations-page .discover-links .details-toggle > span:last-child { display: inline-flex; }
.feedback-saved-indicator {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid #5fbc9360;
  border-radius: 6px;
  color: #a1ebc8;
  background: #16392e;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}
.why-feedback-title { flex-wrap: wrap; }
.why-feedback-title > div { flex: 1; min-width: 120px; }

/* Approved preview toolbar: a clear, touch-sized return to the artwork. */
.trailer-panel { grid-template-rows: 56px minmax(200px, 1fr) 24px; }
.trailer-toolbar {
  gap: 8px;
  padding: 6px 8px;
  background: #0b1b26;
  border-bottom: 1px solid #304956;
  font-size: 14px;
  color: #b8ccd8;
}
.trailer-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #9cdef0;
  border-radius: 8px;
  background: #9cdef0;
  color: #08202e;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.trailer-toolbar button span { font-size: 22px; line-height: 1; }
.trailer-toolbar button:hover { background: #b9ecfa; border-color: #b9ecfa; }
.trailer-toolbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Secondary reactions share the main buttons' restrained lift. */
.secondary-actions button {
  transition: transform 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .secondary-actions button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: #83b5c8;
    box-shadow: 0 3px 9px #0003;
  }
  .secondary-actions button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
  }
}
.secondary-actions button:focus-visible {
  outline: 2px solid #9cdef0;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .secondary-actions button:hover:not(:disabled),
  .secondary-actions button:active:not(:disabled) { transform: none; }
}

/* Keep the decision controls anchored across titles of different lengths. */
.card-info-contents { display: contents; }
[data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card {
  height: clamp(560px, calc(100svh - 190px), 780px);
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  align-items: stretch;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .poster-stage {
  height: 100%;
  min-height: 0;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.discover-info {
  flex: 1 1 0;
  min-height: 0;
  overflow: clip;
  margin-bottom: 12px;
}
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .card-content > :not(.discover-info) {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(150px, 24svh, 245px) minmax(0, 1fr);
    gap: 0;
    height: max(700px, calc(100svh - 160px));
  }
}
@media (max-width: 560px) {
  [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card {
    grid-template-rows: clamp(140px, 18svh, 180px) minmax(0, 1fr);
    height: max(680px, calc(100svh - 150px));
  }
}

/* The page may scroll; the Discover summary never becomes a scroll pane. */
.discover-info #anime-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.discover-info .genres { flex-wrap: nowrap; overflow: hidden; }
.discover-info .genre { flex-shrink: 0; }
.discover-info .synopsis { min-height: 0; }
.discover-info .taxonomy-card { display: none; }

@media (min-width: 1600px) {
  [data-layout="familiar"] .cards-layout.discover-layout {
    max-width: 1280px;
  }
}

/* Artwork must stay inside its allocated grid row, including swipe/preview states. */
[data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card.swipe-enabled .poster-stage {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  overflow: hidden;
}
[data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card .card-content {
  position: relative;
  margin: 0;
  min-width: 0;
  align-self: stretch;
}
.discover-card .trailer-panel { grid-template-rows: 56px minmax(0, 1fr) 24px; }
.discover-card .trailer-panel .inline-trailer-frame,
.discover-card .trailer-panel iframe { min-height: 0; min-width: 0; }

/* Fixed comparison slot: synopsis yields space; action rows never move. */
.discover-card .discover-info { display:flex; flex-direction:column; margin-bottom:8px; }
.discover-card .discover-info .anime-summary { flex:0 0 auto; }
.discover-card .discover-info #anime-title { line-height:1.15; margin-bottom:6px; overflow-wrap:anywhere; }
.discover-card .discover-info #anime-title > span:first-child { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.discover-card .discover-info .english-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.discover-card .discover-info .synopsis { min-height:0; margin:6px 0 0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; flex:1 1 auto; }
.discover-comparison { flex:0 0 160px !important; height:160px; box-sizing:border-box; min-width:0; margin:0 0 10px; padding:10px 12px; border:1px solid #365365; border-radius:10px; background:#112938; display:flex; flex-direction:column; gap:6px; font-size:13px; }
.discover-comparison header,.discover-comparison footer { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; }
.discover-comparison header strong { color:#e7f5fc; font-size:14px; }
.discover-comparison header > span { color:#9db7c7; font-size:11px; }
.discover-comparison footer { margin-top:auto; }
.discover-comparison footer button { border:0; background:transparent; color:#a5ddf1; padding:3px 0; min-height:30px; font-size:11px; }
.discover-comparison footer span { font-size:11px; color:#9ce3bc; }
.comparison-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; min-height:0; }
.discover-comparison button { cursor:pointer; }
.discover-comparison button:focus-visible { outline:2px solid #9ce8ff; outline-offset:2px; }
.comparison-choice { display:flex; align-items:center; min-width:0; min-height:66px; padding:4px 6px; gap:8px; border:1px solid #426379; border-radius:7px; background:#19394c; color:#ecf7fc; text-align:left; }
.comparison-choice:hover { background:#24516a; }
.comparison-choice img { width:36px; height:50px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.comparison-choice > span { min-width:0; }
.comparison-choice small { display:block; font-size:10px; color:#b6ccda; }
.comparison-choice strong { font-size:12px; line-height:1.25; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.comparison-options.variant-1 { display:block; }
.comparison-queue { margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#b9d3e2; font-size:12px; }
.comparison-priority { display:flex; gap:6px; }
.comparison-priority button { flex:1; min-height:40px; padding:4px; font-size:12px; color:#e7f5fc; border:1px solid #426379; border-radius:6px; background:#19394c; }
@media(max-width:560px) {
 .discover-comparison { padding:8px; }
 .discover-comparison header strong { font-size:13px; }
 .discover-card .discover-info .runtime-estimate { display:none; }
 .discover-card .discover-info .release-status { margin:2px 0; font-size:11px; }
 .discover-card .discover-info .metadata { font-size:12px; }
 .discover-card .discover-info .genres { margin:3px 0; }
 .discover-card .discover-info .synopsis { font-size:13px; line-height:1.4; }
}
@media(max-width:560px) {
 .discover-comparison { flex-basis:124px !important; height:124px; gap:3px; }
 .comparison-choice { min-height:52px; }
 .comparison-choice img { width:28px; height:40px; }
 .discover-comparison footer button { min-height:28px; }
 .discover-comparison footer span { max-width:70px; line-height:1.1; }
 .discover-card .discover-info .swipe-guide { display:none; }
 .discover-card .discover-info .release-status { display:none; }
 .discover-card .discover-info .genre-groups { margin:3px 0; }
 .comparison-priority button { min-height:32px; }
 .comparison-queue { margin-bottom:2px; }
}
/* Keep primary metadata readable before allocating the synopsis remainder. */
.discover-card .discover-info .runtime-estimate { display:none; }
.discover-card .discover-info .release-status:not(.unreleased) { display:none; }
.discover-card .discover-info .genre-groups { margin:2px 0; flex-shrink:0; }
.discover-card .discover-info #anime-title { margin-bottom:4px; }
@media(min-width:561px) and (max-height:800px) {
 .discover-card .discover-info #anime-title { font-size:24px !important; }
}

/* Use the reserved question space for artwork, not an empty bottom gutter. */
.discover-comparison:has(> header) {
 display:grid;
 grid-template-rows:20px minmax(0,1fr) 28px;
 gap:4px;
}
.discover-comparison > header { margin:0; padding:0; min-height:0; }
.discover-comparison > header strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discover-comparison > .comparison-options { height:100%; min-height:0; align-items:stretch; }
.discover-comparison .comparison-choice { height:100%; min-height:0; padding:3px 6px; gap:10px; overflow:hidden; }
.discover-comparison .comparison-choice img { height:100%; max-height:80px; width:54px; object-fit:contain; background:#0c202d; }
.discover-comparison .comparison-choice strong { font-size:14px; -webkit-line-clamp:3; }
.discover-comparison .comparison-choice small { font-size:11px; margin-bottom:3px; }
.discover-comparison > footer { margin:0; padding:0; min-height:0; align-self:stretch; }
.discover-comparison > footer button { min-height:28px; margin:0; }
.discover-comparison > footer span { line-height:1.15; text-align:center; }
.discover-comparison .comparison-options.variant-1 { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 40px; gap:3px; }
.discover-comparison .comparison-queue { margin:0; align-self:center; }
.discover-comparison .comparison-priority { min-height:0; }
@media(max-width:560px) {
 .discover-comparison:has(> header) { grid-template-rows:18px minmax(0,1fr) 28px; gap:2px; }
 .discover-comparison .comparison-choice { padding:2px 4px; gap:6px; }
 .discover-comparison .comparison-choice img { width:36px; max-height:54px; }
 .discover-comparison .comparison-choice strong { font-size:12px; -webkit-line-clamp:2; }
 .discover-comparison .comparison-choice small { font-size:10px; margin-bottom:1px; }
 .discover-comparison .comparison-options.variant-1 { grid-template-rows:minmax(0,1fr) 32px; gap:2px; }
 .discover-comparison > header > span { display:none; }
}

/* Artwork-first questions: preserve the reserved space across every question. */
.discover-comparison { flex-basis:220px !important; height:220px; border:0; border-top:1px solid #365365; border-radius:0; background:transparent; padding:10px 0 0; }
.discover-comparison .comparison-choice { padding:0; gap:12px; border:0; border-radius:4px; background:#142b39; }
.discover-comparison .comparison-choice img { width:96px; height:100%; max-height:none; object-fit:contain; border-radius:2px; }
.discover-comparison .comparison-choice > span { padding-right:8px; }
.discover-comparison .comparison-choice strong { font-size:15px; -webkit-line-clamp:4; }
.discover-comparison .comparison-choice:hover { background:#204052; }
.discover-comparison .comparison-options.variant-1 { grid-template-rows:minmax(0,1fr) 44px; }
.discover-comparison .comparison-queue { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:14px; line-height:1.5; }
[data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:clamp(620px,calc(100svh - 130px),840px); }
@media(max-width:900px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:max(760px,calc(100svh - 100px)); }
}
@media(max-width:560px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:max(740px,calc(100svh - 90px)); }
 .discover-comparison { flex-basis:184px !important; height:184px; padding:8px 0 0; }
 .discover-comparison .comparison-choice { gap:6px; }
 .discover-comparison .comparison-choice img { width:64px; height:100%; max-height:none; }
 .discover-comparison .comparison-choice strong { font-size:12px; -webkit-line-clamp:4; }
 .discover-comparison .comparison-choice small { font-size:10px; }
 .discover-comparison .comparison-queue { font-size:12px; }
 .discover-comparison .comparison-options.variant-1 { grid-template-rows:minmax(0,1fr) 40px; }
}
/* Solid surfaces and restrained edges replace decorative glass and nested panels. */
.topbar { background:#0a151e; backdrop-filter:none; }
.media-badge { background:#0b1826; backdrop-filter:none; }
.nav-button { border-radius:6px; }
.nav-button.active { background:#193542; box-shadow:none; }
.anime-card,.saved-card,.leaderboard-row { border-radius:8px; }
.leaderboard-row { background:#101e29; }
.dialog,.settings-panel,.preference-panel { border-radius:10px; }
button:hover { box-shadow:none; }
/* Keep the user's optional background modes, without the bright halo layer. */
.ribbon-halo { display:none; }

/* Narrow device emulation and breakpoint edges: keep labels readable. */
.discover-comparison > footer { min-width:0; gap:4px; }
.discover-comparison > footer button { flex-shrink:0; }
.discover-comparison > footer span { flex:1 1 0; min-width:0; max-width:none; overflow-wrap:anywhere; font-size:10px; }
@media(max-width:360px) {
 .discover-comparison .comparison-choice { flex-direction:column; justify-content:flex-start; gap:3px; padding:3px; }
 .discover-comparison .comparison-choice img { height:76px; width:100%; flex:0 0 76px; }
 .discover-comparison .comparison-choice > span { width:100%; padding:0 2px; text-align:center; }
 .discover-comparison .comparison-choice small { display:none; }
 .discover-comparison .comparison-choice strong { font-size:12px; line-height:1.2; -webkit-line-clamp:3; }
 .discover-comparison > header strong { font-size:12px; }
 .discover-comparison .comparison-priority { gap:3px; }
 .discover-comparison .comparison-priority button { font-size:11px; padding:3px; min-width:0; }
 .discover-card .discover-info .genre-group { gap:5px; }
 .discover-card .discover-info #anime-title { font-size:20px !important; }
}
@media(max-width:560px) {
 .discover-card .discover-info .genre-group { flex-wrap:nowrap; align-items:center; gap:5px; }
 .discover-card .discover-info .genre-group-label { flex-basis:50px; }
 .discover-card .discover-info .genre-groups { gap:3px; }
 .discover-card .discover-info .genre-group .genre { padding:2px 5px; }
}
@media(max-width:560px) {
 [data-layout="familiar"] .discover-card .discover-info .genre-groups { margin:2px 0 !important; gap:2px !important; }
 [data-layout="familiar"] .discover-card .discover-info .genre-group .genres { margin:0 !important; }
 [data-layout="familiar"] .discover-card .discover-info .genre-group .genre { padding:2px 5px !important; line-height:14px !important; }
}
/* At very narrow widths the main reaction labels wrap, costing another row. */
@media(max-width:360px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:max(764px,calc(100svh - 66px)); }
}
.discover-comparison .comparison-queue-covers { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; height:100%; min-height:0; align-self:stretch; }
.comparison-queue-covers > div { display:flex; align-items:center; gap:8px; min-width:0; min-height:0; }
.comparison-queue-covers img { width:60px; height:100%; min-height:0; object-fit:contain; }
.comparison-queue-covers span { min-width:0; }
.comparison-queue-covers small { display:block; font-size:11px; color:#aebccb; }
.comparison-queue-covers strong { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:12px; line-height:1.25; }
@media(max-width:560px) {
 .comparison-queue-covers img { width:40px; }
 .comparison-queue-covers > div { gap:4px; }
 .comparison-queue-covers strong { font-size:11px; }
}

/* Pending comparison selection: visible without changing card geometry. */
.discover-comparison .comparison-choice { position:relative; }
.discover-comparison .comparison-choice[aria-pressed="true"] {
  outline:2px solid #64dca0; outline-offset:-2px; background:#173f36;
}
.discover-comparison .comparison-choice .comparison-selected {
  position:absolute; top:5px; right:5px; width:22px; height:22px;
  display:grid; place-items:center; padding:0; border-radius:50%;
  background:#64dca0; color:#092a1d; font-size:15px; font-weight:800;
}
.discover-comparison .comparison-choice:focus-visible { outline:3px solid #b9ddff; outline-offset:-3px; }

/* Discover is a reading card again: fixed viewport sizing, no filler slot. */
[data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card {
  height:clamp(520px,calc(100svh - 210px),680px);
}
.discover-card .discover-info { justify-content:flex-start; }
[data-layout="familiar"] .cards-layout.discover-layout .discover-card .discover-info .synopsis {
  flex:0 0 auto; margin:12px 0 0; -webkit-line-clamp:3;
}
@media(max-width:900px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:clamp(660px,calc(100svh - 120px),800px); }
}
@media(max-width:560px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:clamp(640px,calc(100svh - 100px),720px); }
}
@media(max-width:360px) {
 [data-layout="familiar"] .cards-layout.discover-layout .anime-card.discover-card { height:664px; }
}