/*
 * AnimeRadar v2.4.194 — Material Design reference redesign
 * Visual-only override. Existing application logic, routes, provider assets,
 * AnimeRadar brand assets and data flows remain untouched.
 */

:root {
  color-scheme: dark;
  --md-primary: #e53935;
  --md-action-fill: #d8343a;
  --md-secondary: #ff5252;
  --md-primary-container: #3a0d12;
  --md-background: #120609;
  --md-surface: #231216;
  --md-surface-variant: #1b0d10;
  --md-surface-elevated: #2a181c;
  --md-outline: #3a2a2d;
  --md-outline-strong: #5a2a2f;
  --md-on-surface: #ece6e9;
  --md-on-primary: #ffffff;
  --md-muted: #b8adb1;
  --md-dim: #817579;
  --md-rating: #ffc247;
  --md-success: #81c784;
  --md-info: #5b9cf6;
  --md-error: #cc6679;
  --md-radius-shell: 12px;
  --md-radius-card: 10px;
  --md-radius-control: 8px;
  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, .34);
  --md-elevation-2: 0 3px 10px rgba(0, 0, 0, .34);
  --md-elevation-3: 0 8px 24px rgba(0, 0, 0, .38);
  --md-motion: cubic-bezier(.2, 0, 0, 1);
  --md-sidebar-width: 188px;

  /* Map the existing design API to the reference tokens. */
  --bg: var(--md-background) !important;
  --bg-2: var(--md-surface-variant) !important;
  --panel: var(--md-surface) !important;
  --panel-2: var(--md-surface-elevated) !important;
  --ink: var(--md-on-surface) !important;
  --muted: var(--md-muted) !important;
  --dim: var(--md-dim) !important;
  --red: var(--md-primary) !important;
  --red-2: var(--md-primary-container) !important;
  --gold: var(--md-secondary) !important;
  --gold-2: var(--md-primary) !important;
  --line: var(--md-outline) !important;
  --line-red: color-mix(in srgb, var(--md-primary) 45%, transparent) !important;
  --shadow: var(--md-elevation-2) !important;
  --sharp: var(--md-radius-control) !important;
  --font-display: "Roboto Flex", "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  --font-body: "Roboto Flex", "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  --scrollbar-track: var(--md-surface-variant) !important;
  --scrollbar-track-strong: var(--md-surface) !important;
  --scrollbar-thumb: var(--md-primary) !important;
  --scrollbar-thumb-hover: var(--md-secondary) !important;
}

/* The four source boards print different Material tokens. Keep them scoped. */
#view-detail {
  --md-primary: #e53949;
  --md-action-fill: #d43544;
  --md-secondary: #ff6b6b;
  --md-primary-container: #3b1118;
  --md-background: #12090b;
  --md-surface: #1e1214;
  --md-surface-variant: #2a1619;
  --md-surface-elevated: #321c20;
  --md-outline: #5a2a2f;
  --md-on-surface: #ede0e1;
  --red: var(--md-primary);
  --red-2: var(--md-primary-container);
  --gold: var(--md-secondary);
  --line: var(--md-outline);
}

#view-calendar,
#view-planner {
  --md-primary: #8f1d2d;
  --md-action-fill: #8f1d2d;
  --md-secondary: #d34a4a;
  --md-primary-container: #45121b;
  --md-background: #121212;
  --md-surface: #121212;
  --md-surface-variant: #1d1416;
  --md-surface-elevated: #24181a;
  --md-outline: #3a2a2d;
  --md-on-surface: #e6dde0;
  --red: var(--md-primary);
  --red-2: var(--md-primary-container);
  --gold: var(--md-secondary);
  --line: var(--md-outline);
}

#view-profile,
#view-stats,
#view-public-profile,
#view-public-list,
#view-socials {
  --md-primary: #ff4d57;
  --md-action-fill: #d73b47;
  --md-secondary: #ff8a8d;
  --md-primary-container: #3a0d12;
  --md-background: #121212;
  --md-surface: #121212;
  --md-surface-variant: #1e1e1e;
  --md-surface-elevated: #252225;
  --md-outline: #2b2b2b;
  --md-on-surface: #ededed;
  --red: var(--md-primary);
  --red-2: var(--md-primary-container);
  --gold: var(--md-secondary);
  --line: var(--md-outline);
}

#view-search,
#view-season {
  --md-primary: #e53935;
  --md-action-fill: #d8343a;
  --md-secondary: #ff5252;
  --md-primary-container: #3a0d12;
  --md-background: #120609;
  --md-surface: #231216;
  --md-surface-variant: #1b0d10;
  --md-surface-elevated: #2a181c;
  --md-outline: #3a2a2d;
  --md-on-surface: #ece6e9;
  --red: var(--md-primary);
  --red-2: var(--md-primary-container);
  --gold: var(--md-secondary);
  --line: var(--md-outline);
}

html {
  background: #080708;
  scrollbar-color: var(--md-primary) var(--md-surface-variant);
}

html body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(143, 29, 45, .12), transparent 28rem),
    linear-gradient(180deg, #0b090a 0%, #10090b 48%, #090809 100%) !important;
  color: var(--md-on-surface) !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

body::before,
body::after,
.noise {
  display: none !important;
}

::selection {
  background: color-mix(in srgb, var(--md-primary) 44%, transparent);
  color: var(--md-on-primary);
}

html body :where(h1, h2, h3, h4, h5, h6) {
  color: var(--md-on-surface);
  font-family: var(--font-display) !important;
  font-weight: 650;
  letter-spacing: -.015em !important;
  line-height: 1.18;
  text-transform: none !important;
}

html body :where(p, small, .release-meta, .lib-meta, .field-help, .field-hint) {
  color: var(--md-muted);
}

html body .section-kicker {
  color: var(--md-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  line-height: 1.2;
  text-transform: none !important;
}

html body .section-kicker::before {
  display: none !important;
}

html body .page-title-row {
  align-items: flex-start;
  margin: 0 0 24px !important;
}

html body .page-title-row .page-main-title,
html body .anime-news-page-title,
html body .voting-page-title,
html body .giveaway-page-title-row .page-main-title {
  margin: 4px 0 0 !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.2 !important;
}

html body .page-title-row p {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--md-muted) !important;
  font-size: 13px;
  line-height: 1.45;
}

/* Material surfaces: compact radius, warm outline, elevation 1–3. */
html body :where(
  .hero-panel,
  .pulse-card,
  .watch-box,
  .content-band,
  .search-filter-card,
  .calendar-filters,
  .profile-card,
  .profile-form-card,
  .stat-card,
  .release-card,
  .release-item,
  .poster-card,
  .library-card,
  .library-list-shell,
  .search-row,
  .rank-row,
  .rated-row,
  .comment-card,
  .social-community-card,
  .anime-news-card,
  .anime-news-banner-shell,
  .ui-state-card,
  .legal-card,
  .public-list-card,
  .release-planner-stat,
  .release-planner-day,
  .release-planner-card,
  .release-reminder-card,
  .app-platform-card,
  .app-update-notes-card,
  .product-analytics-card,
  .giveaway-entry-panel,
  .giveaway-feed-card,
  .giveaway-account-gate,
  .voting-option-card,
  .voting-history-panel,
  .seo-related-card,
  .empty-state
) {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface-variant) !important;
  box-shadow: var(--md-elevation-1) !important;
  clip-path: none !important;
}

html body :where(.content-band, .watch-box, .profile-card, .profile-form-card) {
  padding: 18px !important;
}

html body .content-band {
  margin-top: 16px !important;
}

html body :where(.band-head, .results-toolbar, .anime-news-head) {
  align-items: center;
  gap: 12px;
  margin-bottom: 14px !important;
}

html body :where(.band-head h2, .watch-box h2, .pulse-card h2) {
  margin-top: 3px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

/* Buttons and icon actions follow the 36–44 dp controls shown in every board. */
html body :where(
  .solid-action,
  .ghost-action,
  .small-btn,
  .outline-action,
  .danger-action,
  .text-action,
  .site-menu-trigger,
  .modal-close,
  .ar-select-btn,
  .day-chip,
  .list-tab,
  .auth-tab,
  .mobile-section-tab,
  .voting-mode-btn,
  .voting-cast-btn,
  .season-choice,
  .season-year-choice,
  .episode-btn,
  .roadmap-icon-btn,
  .release-planner-rail-icon-btn
) {
  border-radius: var(--md-radius-control) !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-family: var(--font-body) !important;
  font-weight: 550 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  transition:
    background-color .18s var(--md-motion),
    border-color .18s var(--md-motion),
    color .18s var(--md-motion),
    box-shadow .18s var(--md-motion),
    opacity .18s var(--md-motion) !important;
}

html body :where(.solid-action, button.solid-action, a.solid-action) {
  min-height: 42px;
  border-color: transparent !important;
  background: var(--md-action-fill) !important;
  color: var(--md-on-primary) !important;
}

html body :where(.solid-action, button.solid-action, a.solid-action):hover:not(:disabled),
html body :where(.solid-action, button.solid-action, a.solid-action):focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--md-action-fill) 90%, white) !important;
  box-shadow: var(--md-elevation-2) !important;
  transform: none !important;
}

html body :where(.ghost-action, .small-btn, .outline-action) {
  border-color: var(--md-outline) !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
}

html body :where(.ghost-action, .small-btn, .outline-action):hover:not(:disabled),
html body :where(.ghost-action, .small-btn, .outline-action):focus-visible:not(:disabled) {
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 13%, var(--md-surface-elevated)) !important;
  color: var(--md-secondary) !important;
  transform: none !important;
}

html body .text-action {
  min-height: 32px;
  color: var(--md-secondary) !important;
  background: transparent !important;
}

html body :where(.danger-action, .small-btn.danger, button.danger) {
  border-color: color-mix(in srgb, var(--md-error) 55%, transparent) !important;
  background: color-mix(in srgb, var(--md-error) 13%, var(--md-surface-elevated)) !important;
  color: #ffb4c0 !important;
}

html body :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--md-secondary) !important;
  outline-offset: 2px;
}

html body :where(button, input, select, textarea):disabled {
  opacity: .4;
}

/* Inputs/selects use filled Material fields; native and custom selects match. */
html body :where(input, select, textarea, .ar-select-btn, .ar-select-menu, .ar-select-studio-search-input) {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-control) !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
  box-shadow: none !important;
}

html body :where(input, select, .ar-select-btn) {
  min-height: 44px;
}

html body textarea {
  min-height: 116px;
  padding: 12px !important;
}

html body :where(input, select, textarea, .ar-select-btn):focus,
html body :where(input, select, textarea, .ar-select-btn).is-open {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 1px var(--md-primary) !important;
}

html body :where(input, textarea)::placeholder {
  color: var(--md-dim);
  opacity: 1;
}

html body label,
html body .library-control-field span,
html body .season-control-label {
  color: var(--md-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Chips, badges and tabs. */
html body :where(.tag, .status-pill, .list-name-badge, .streaming-country-chip, .app-platform-badge, .giveaway-live-badge) {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--md-outline) !important;
  border-radius: 999px !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body :where(.tag.is-active, .tag.active, .status-pill.active, .list-tab.active, .mobile-section-tab.active) {
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 15%, var(--md-surface-elevated)) !important;
  color: var(--md-secondary) !important;
}

html body :where(.list-tabs, .mobile-section-tabs, .season-button-group, .season-year-buttons) {
  gap: 6px !important;
  scrollbar-width: none;
}

html body :where(.list-tabs, .mobile-section-tabs, .season-button-group, .season-year-buttons)::-webkit-scrollbar {
  display: none;
}

html body :where(.list-tab, .mobile-section-tab) {
  position: relative;
  min-height: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--md-muted) !important;
  white-space: nowrap;
}

html body :where(.list-tab, .mobile-section-tab).active {
  color: var(--md-secondary) !important;
}

html body :where(.list-tab, .mobile-section-tab).active::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-primary);
}

/* Rating yellow is the only warm non-red emphasis in the references. */
html body :where(
  .countdown,
  .poster-info span,
  .rating-stat strong,
  .rating-editor-value,
  .rank-row strong,
  .star-layer-fill,
  .star-hit,
  .search-row .release-meta
) {
  color: var(--md-rating) !important;
}

html body :where(.progress-bar, .genre-bar-fill i, .voting-result-track > span) {
  background: var(--md-primary) !important;
  border-radius: 999px;
}

html body :where(.progress-track, .genre-bar-fill, .voting-result-track) {
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-on-surface) 9%, transparent) !important;
}

/* Preserve the exact image assets and remove legacy shape effects around them. */
html body :where(.brand-mark, .footer-mark) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

html body :where(.brand-mark img, .footer-mark img) {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  filter: none !important;
  transform: none !important;
}

html body :where(.poster-card, .library-card, .search-row-image-link, .release-card, .seo-related-card) img {
  object-fit: cover;
}

/* Desktop app shell from all four reference boards. */
@media (min-width: 1181px) {
  html:not(.native-app) body .topbar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 50;
    width: var(--md-sidebar-width) !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 14px 18px !important;
    border: 0 !important;
    border-right: 1px solid var(--md-outline) !important;
    background: rgba(18, 12, 14, .98) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html:not(.native-app) body .topbar::after {
    display: none !important;
  }

  html:not(.native-app) body .topbar .brand {
    min-height: 44px;
    display: flex !important;
    gap: 10px;
    padding: 0 8px !important;
  }

  html:not(.native-app) body .topbar .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px;
  }

  html:not(.native-app) body .topbar .brand-text strong {
    color: var(--md-on-surface);
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 650;
    letter-spacing: -.01em !important;
    text-transform: none !important;
  }

  html:not(.native-app) body .nav-strip {
    width: 100%;
    max-width: none !important;
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html:not(.native-app) body .nav-link {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--md-radius-control) !important;
    background: transparent !important;
    color: var(--md-muted) !important;
    clip-path: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html:not(.native-app) body .nav-link::before {
    content: "";
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
  }

  html:not(.native-app) body .nav-link[data-view="home"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link[data-view="calendar"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link[data-view="season"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11h8V3H3v8zm0 10h8v-8H3v8zm10 0h8v-8h-8v8zm0-18v8h8V3h-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11h8V3H3v8zm0 10h8v-8H3v8zm10 0h8v-8h-8v8zm0-18v8h8V3h-8z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link[data-view="search"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3a6.5 6.5 0 1 0 3.98 11.64L19.85 21 21 19.85l-6.36-6.37A6.5 6.5 0 0 0 9.5 3zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3a6.5 6.5 0 1 0 3.98 11.64L19.85 21 21 19.85l-6.36-6.37A6.5 6.5 0 0 0 9.5 3zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link[data-view="lists"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5c.83 0 1.5-.67 1.5-1.5S4.83 1.5 4 1.5 2.5 2.17 2.5 3 3.17 4.5 4 4.5zM7 4h14V2H7v2zm-3 6.5c.83 0 1.5-.67 1.5-1.5S4.83 7.5 4 7.5 2.5 8.17 2.5 9s.67 1.5 1.5 1.5zM7 10h14V8H7v2zm-3 6.5c.83 0 1.5-.67 1.5-1.5S4.83 13.5 4 13.5 2.5 14.17 2.5 15s.67 1.5 1.5 1.5zM7 16h14v-2H7v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5c.83 0 1.5-.67 1.5-1.5S4.83 1.5 4 1.5 2.5 2.17 2.5 3 3.17 4.5 4 4.5zM7 4h14V2H7v2zm-3 6.5c.83 0 1.5-.67 1.5-1.5S4.83 7.5 4 7.5 2.5 8.17 2.5 9s.67 1.5 1.5 1.5zM7 10h14V8H7v2zm-3 6.5c.83 0 1.5-.67 1.5-1.5S4.83 13.5 4 13.5 2.5 14.17 2.5 15s.67 1.5 1.5 1.5zM7 16h14v-2H7v2z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link[data-view="toplists"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  }

  html:not(.native-app) body .nav-link:hover,
  html:not(.native-app) body .nav-link:focus-visible {
    border-color: color-mix(in srgb, var(--md-primary) 25%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
  }

  html:not(.native-app) body .nav-link.active {
    border-color: color-mix(in srgb, var(--md-primary) 35%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-variant)) !important;
    color: var(--md-secondary) !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger {
    width: 100% !important;
    min-height: 42px;
    margin-top: 5px;
    border-color: transparent !important;
    background: transparent !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger:hover,
  html:not(.native-app) body .site-menu-desktop-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--md-primary) 35%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface-variant)) !important;
  }

  html:not(.native-app) body .top-actions {
    width: 100%;
    display: flex !important;
    margin-top: auto;
  }

  html:not(.native-app) body .top-account-button {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 10px;
    overflow: hidden;
    border-color: var(--md-outline) !important;
    background: var(--md-surface-variant) !important;
    color: var(--md-on-surface) !important;
  }

  html:not(.native-app) body .top-account-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid var(--md-primary);
    border-radius: 50%;
  }

  html:not(.native-app) body .top-account-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(.native-app) body .shell {
    width: calc(100% - var(--md-sidebar-width)) !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 0 0 var(--md-sidebar-width) !important;
    padding: 28px clamp(28px, 3vw, 46px) 104px !important;
  }

  html:not(.native-app) body .site-footer {
    width: auto !important;
    margin-left: var(--md-sidebar-width) !important;
    padding-right: clamp(28px, 3vw, 46px) !important;
    padding-left: clamp(28px, 3vw, 46px) !important;
  }

  html:not(.native-app) body .site-menu-panel {
    left: calc(var(--md-sidebar-width) + 10px) !important;
    top: max(8px, min(42vh, calc(100dvh - 368px))) !important;
    bottom: auto !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html:not(.native-app) body .consent-banner {
    left: calc(var(--md-sidebar-width) + 14px) !important;
  }
}

/* Tablet keeps the existing reachable horizontal navigation, only reskinned. */
@media (min-width: 761px) and (max-width: 1180px) {
  html body .topbar {
    position: sticky !important;
    top: 0;
    z-index: 40;
    min-height: 70px;
    padding: 10px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--md-outline) !important;
    background: rgba(18, 12, 14, .97) !important;
    backdrop-filter: blur(14px);
  }

  html body .topbar::after {
    display: none !important;
  }

  html body .nav-strip {
    border: 0 !important;
    border-radius: var(--md-radius-control) !important;
    background: var(--md-surface-variant) !important;
  }

  html body .nav-link {
    border-radius: 6px !important;
    clip-path: none !important;
    color: var(--md-muted) !important;
    font-size: 12px;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body .nav-link.active {
    background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-variant)) !important;
    color: var(--md-secondary) !important;
  }

  html body .shell {
    width: min(100% - 40px, 1160px) !important;
    padding-top: 24px !important;
  }
}

/* Home — same compact Material hierarchy used by the supplied screens. */
html body .hero-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr) !important;
  gap: 12px !important;
}

html body .hero-panel,
html body .pulse-card {
  min-height: 470px !important;
}

html body .hero-panel {
  overflow: hidden;
  isolation: isolate;
  border-color: var(--md-outline) !important;
  background: var(--md-surface-variant) !important;
}

html body .hero-panel::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 6, 9, .96) 0%, rgba(18, 6, 9, .72) 44%, rgba(18, 6, 9, .08) 78%),
    linear-gradient(0deg, rgba(18, 6, 9, .86) 0%, transparent 55%) !important;
}

html body .hero-slide {
  min-height: 470px !important;
}

html body .hero-copy {
  z-index: 3;
  align-self: end;
  padding: clamp(26px, 3vw, 42px) !important;
}

html body .hero-copy .hero-main-title {
  max-width: 700px;
  margin: 9px 0 10px !important;
  font-size: clamp(38px, 4.5vw, 62px) !important;
  font-weight: 650 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

html body .hero-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--md-muted) !important;
  font-size: 14px;
  line-height: 1.48;
}

html body .hero-actions {
  gap: 8px !important;
  margin-top: 18px !important;
}

html body .hero-art::after {
  background:
    linear-gradient(90deg, var(--md-surface-variant) 0%, transparent 54%),
    linear-gradient(0deg, var(--md-surface-variant) 0%, transparent 58%) !important;
}

html body .hero-art :where(.hero-poster, .hero-fixed-image) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body :where(.hero-carousel-arrow, .anime-news-banner-controls button) {
  width: 38px;
  height: 38px;
  border: 1px solid var(--md-outline) !important;
  border-radius: 50% !important;
  background: rgba(30, 18, 20, .88) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html body :where(.hero-carousel-dot, .anime-news-dots button) {
  background: color-mix(in srgb, var(--md-on-surface) 28%, transparent) !important;
}

html body :where(.hero-carousel-dot, .anime-news-dots button).is-active {
  background: var(--md-primary) !important;
}

html body .pulse-card {
  padding: 18px !important;
  background: var(--md-surface) !important;
}

html body .release-stack {
  gap: 8px !important;
  margin-top: 14px !important;
}

html body .release-item {
  min-height: 76px;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 9px !important;
  overflow: hidden;
}

html body .release-item::before {
  width: 2px;
  background: var(--md-primary) !important;
}

html body .release-thumb {
  width: 54px !important;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
}

html body .release-title {
  font-size: 13px;
  font-weight: 600;
}

html body .poster-rail {
  grid-auto-columns: minmax(168px, 204px) !important;
  gap: 12px !important;
  padding-bottom: 6px !important;
}

html body .poster-card {
  min-height: 306px !important;
  overflow: hidden;
}

html body .poster-card::after {
  background: linear-gradient(0deg, rgba(10, 7, 8, .96) 0 24%, rgba(10, 7, 8, .1) 68%, transparent) !important;
}

html body .poster-info {
  right: 11px;
  bottom: 11px;
  left: 11px;
}

/* Calendar / planner — agenda cards, restrained time/day controls and filter rail. */
html body #view-calendar,
html body #view-planner {
  color: var(--md-on-surface);
}

html body #view-calendar .calendar-stage {
  grid-template-columns: minmax(0, 1fr) 292px !important;
  grid-template-areas:
    "days filters"
    "results filters" !important;
  gap: 12px !important;
  align-items: start;
}

html body #view-calendar .weekday-dock {
  gap: 4px !important;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--md-outline);
}

html body #view-calendar .day-chip {
  position: relative;
  min-height: 58px !important;
  padding: 9px 10px !important;
  border-color: transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--md-muted) !important;
  text-align: center;
}

html body #view-calendar .day-chip strong {
  color: inherit;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600;
  text-transform: none !important;
}

html body #view-calendar .day-chip span {
  color: inherit;
  font-size: 11px;
}

html body #view-calendar .day-chip.active {
  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-variant)) !important;
  color: var(--md-secondary) !important;
}

html body #view-calendar .day-chip.active::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -7px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-secondary);
}

html body #view-calendar .calendar-filters {
  top: 18px !important;
  padding: 16px !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: var(--md-elevation-2) !important;
}

html body #view-calendar .calendar-filters h3 {
  margin: 0 0 14px !important;
  font-size: 17px !important;
}

html body #view-calendar .calendar-filters label {
  gap: 6px;
  margin-bottom: 10px;
}

html body #view-calendar .release-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #view-calendar .release-card {
  min-height: 132px !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  overflow: hidden;
  cursor: pointer;
}

html body #view-calendar .release-card:hover {
  border-color: color-mix(in srgb, var(--md-primary) 55%, var(--md-outline)) !important;
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-variant)) !important;
}

html body #view-calendar .release-card > img {
  width: 86px !important;
  height: 100% !important;
  border-radius: 0 !important;
}

html body #view-calendar .release-card-body {
  gap: 6px !important;
  padding: 11px !important;
}

html body #view-calendar .release-card h3 {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html body #view-calendar .release-card .tag {
  min-height: 22px;
  padding: 2px 7px !important;
  font-size: 9px !important;
}

html body #view-calendar .card-actions {
  gap: 6px;
}

html body #view-calendar .card-actions .small-btn {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 11px;
}

html body .release-planner-surface,
html body .release-planner-mobile-host {
  background: transparent !important;
}

html body .release-planner-summary {
  gap: 10px !important;
}

html body .release-planner-stat {
  min-height: 76px !important;
  padding: 13px 15px !important;
}

html body .release-planner-stat strong {
  color: var(--md-on-surface);
  font-size: 21px !important;
  font-weight: 650;
}

html body .release-planner-timeline {
  gap: 12px !important;
}

html body .release-planner-day {
  overflow: hidden;
  background: var(--md-surface) !important;
}

html body .release-planner-day > header {
  padding: 11px 14px !important;
  border-bottom-color: var(--md-outline) !important;
  background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface-variant)) !important;
}

html body .release-planner-card {
  min-height: 78px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-outline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .release-planner-card:last-child {
  border-bottom: 0 !important;
}

html body .release-planner-card img {
  border-radius: 7px !important;
}

/* Discover/search — full-width search, compact filter field group, five poster columns. */
html body #view-search.active {
  display: flex !important;
  flex-direction: column;
}

html body #view-search .page-title-row {
  order: 0;
}

html body #view-search .search-board,
html body #view-search .search-main {
  display: contents !important;
}

html body #view-search .search-input-label {
  order: 1;
  gap: 7px;
  margin: 0 0 14px !important;
}

html body #view-search #searchInput {
  min-height: 46px !important;
  padding-inline: 15px !important;
  border-color: var(--md-outline) !important;
  border-radius: 9px !important;
  background: var(--md-surface) !important;
  font-size: 14px !important;
}

html body #view-search .search-filter-card {
  order: 2;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px !important;
  margin: 0 0 18px;
  padding: 16px !important;
  background: var(--md-surface-variant) !important;
}

html body #view-search .search-filter-card > h3 {
  grid-column: 1 / -1;
  margin: 0 !important;
  font-size: 16px !important;
}

html body #view-search .search-filter-card > label {
  min-width: 0;
  gap: 5px;
  margin: 0 !important;
}

html body #view-search .search-filter-card > small {
  grid-column: 1 / -1;
  margin: -5px 0 0;
  color: var(--md-dim) !important;
  font-size: 10px;
}

html body #view-search .search-filter-card > .solid-action {
  grid-column: span 2;
  align-self: end;
}

html body #view-search .search-results {
  order: 3;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #view-search .search-results > :where(.ui-state-card, .empty-state) {
  grid-column: 1 / -1;
}

html body #view-search .search-row {
  position: relative;
  min-width: 0;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--md-surface) !important;
}

html body #view-search .search-row-image-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

html body #view-search .search-row-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 8, 10, .98) 0 31%, rgba(13, 8, 10, .2) 68%, transparent 82%);
}

html body #view-search .search-row-image-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .24s var(--md-motion);
}

html body #view-search .search-row:hover .search-row-image-link img {
  transform: scale(1.025);
}

html body #view-search .search-row > div:not(.search-row-actions) {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: auto;
  padding: 92px 11px 6px !important;
}

html body #view-search .search-row .tag-row {
  max-height: 24px;
  flex-wrap: nowrap;
  overflow: hidden;
}

html body #view-search .search-row .tag {
  min-height: 21px;
  padding: 2px 6px !important;
  background: rgba(27, 13, 16, .82) !important;
  font-size: 9px !important;
  backdrop-filter: blur(4px);
}

html body #view-search .search-row-title-link {
  display: block;
  margin-top: 7px;
  text-decoration: none;
}

html body #view-search .search-row h3 {
  margin: 0;
  color: var(--md-on-surface);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.25 !important;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body #view-search .search-title-romaji {
  display: block;
  overflow: hidden;
  color: var(--md-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-search .search-row-description {
  display: -webkit-box !important;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--md-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body #view-search .search-row .release-meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--md-muted) !important;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-search .search-row-actions {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px !important;
  padding: 0 10px 10px !important;
}

html body #view-search .search-row-actions .small-btn {
  min-width: 0;
  min-height: 30px;
  padding-inline: 6px;
  background: rgba(35, 18, 22, .9) !important;
  font-size: 10px;
  backdrop-filter: blur(5px);
}

html body #view-search .search-streaming-providers {
  max-height: none !important;
  margin-top: 5px;
  overflow: visible !important;
}

/* Season uses the same five-column Discover card language with real controls. */
html body #view-season .season-controls {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface-variant) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html body #view-season .season-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #view-season .season-grid .release-card {
  min-height: 352px !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  background: var(--md-surface) !important;
}

html body #view-season .season-grid .release-card > img {
  width: 100% !important;
  height: 245px !important;
  flex: 0 0 245px;
  border-radius: 0 !important;
  object-fit: cover;
}

html body #view-season .season-grid .release-card-body {
  min-height: 0;
  gap: 6px !important;
  padding: 10px !important;
}

html body #view-season .season-grid .release-card h3 {
  font-size: 14px !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body #view-season .season-grid .tag-row {
  max-height: 23px;
  overflow: hidden;
}

html body #view-season .season-grid .tag {
  min-height: 20px;
  padding: 2px 6px !important;
  font-size: 9px !important;
}

html body #view-season .season-grid .card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: auto;
}

html body #view-season .season-grid .small-btn {
  min-height: 29px;
  padding-inline: 5px;
  font-size: 10px;
}

/* Anime detail — image-led hero and stacked Material information surfaces. */
html body #view-detail .detail-page-shell {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #view-detail .detail-hero {
  min-height: 410px !important;
  display: flex !important;
  align-items: flex-end;
  padding: clamp(26px, 3vw, 38px) !important;
  overflow: hidden !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-shell) !important;
  background: var(--md-surface) !important;
  box-shadow: var(--md-elevation-2) !important;
  isolation: isolate;
}

html body #view-detail .detail-hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 8, 11, .95) 0%, rgba(18, 8, 11, .62) 46%, rgba(18, 8, 11, .12) 76%),
    linear-gradient(0deg, rgba(18, 8, 11, .98) 0%, rgba(18, 8, 11, .55) 45%, rgba(18, 8, 11, .14) 100%) !important;
}

html body #view-detail .detail-hero .backdrop {
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: .68 !important;
  filter: saturate(.94) contrast(1.04) !important;
  object-fit: cover;
}

/* The reference hero has no separate poster; the real banner remains untouched. */
html body #view-detail .detail-poster {
  display: none !important;
}

html body #view-detail .detail-title {
  position: relative !important;
  z-index: 2;
  width: min(900px, 92%);
  display: grid !important;
  gap: 8px !important;
  align-content: end;
  margin: 0 !important;
}

html body #view-detail .detail-title .detail-main-title,
html body #view-detail .detail-title h1 {
  max-width: 820px !important;
  margin: 0 !important;
  color: var(--md-on-surface) !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 650 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: anywhere;
}

html body #view-detail .detail-dub-badge {
  width: fit-content;
  border-color: var(--md-outline) !important;
  border-radius: 999px !important;
  background: rgba(30, 18, 20, .82) !important;
  color: var(--md-on-surface) !important;
  box-shadow: none !important;
}

html body #view-detail .detail-facts-panel {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #view-detail .detail-meta-grid--hero {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #view-detail .detail-meta-grid--hero .tag {
  min-height: 25px;
  border-color: color-mix(in srgb, var(--md-on-surface) 20%, transparent) !important;
  background: rgba(30, 18, 20, .72) !important;
  backdrop-filter: blur(5px);
}

html body #view-detail .detail-rating-board {
  width: min(720px, 100%);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #view-detail .rating-stat {
  min-width: 0;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb, var(--md-on-surface) 16%, transparent) !important;
  border-radius: 8px !important;
  background: rgba(42, 22, 25, .78) !important;
  backdrop-filter: blur(5px);
}

html body #view-detail .rating-stat span,
html body #view-detail .rating-stat small {
  color: var(--md-muted) !important;
  font-size: 9px !important;
}

html body #view-detail .rating-stat strong {
  display: block;
  color: var(--md-rating) !important;
  font-size: 18px !important;
  font-weight: 650;
}

html body #view-detail .detail-release-box {
  width: min(720px, 100%);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #view-detail .detail-countdown {
  min-height: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #view-detail .detail-countdown .countdown-label {
  color: var(--md-muted) !important;
  font-size: 10px !important;
}

html body #view-detail .detail-countdown strong {
  color: var(--md-on-surface) !important;
  font-size: 12px !important;
  font-weight: 550;
}

html body #view-detail .detail-action-row {
  width: min(620px, 100%);
  display: grid !important;
  grid-template-columns: minmax(200px, auto) 42px 42px !important;
  justify-content: start;
  gap: 8px !important;
  margin: 4px 0 0 !important;
}

html body #view-detail .detail-action-row > * {
  min-height: 42px !important;
}

html body #view-detail :where(.detail-fav-action, .detail-reminder-action) {
  width: 42px !important;
  padding: 0 !important;
}

html body #view-detail .detail-fav-action.is-favorite {
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-elevated)) !important;
  color: var(--md-secondary) !important;
}

html body #view-detail .detail-body {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 286px !important;
  gap: 12px !important;
  padding: 16px 0 0 !important;
  overflow: visible !important;
}

html body #view-detail .detail-copy {
  min-width: 0;
}

html body #view-detail .plot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
  border: 1px solid var(--md-outline);
  border-bottom: 0;
  border-radius: var(--md-radius-card) var(--md-radius-card) 0 0;
  background: var(--md-surface-variant);
}

html body #view-detail #detailDescription {
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 16px 16px;
  border: 1px solid var(--md-outline);
  border-top: 0;
  border-radius: 0 0 var(--md-radius-card) var(--md-radius-card);
  background: var(--md-surface-variant);
  color: var(--md-on-surface) !important;
  font-size: 13px;
  line-height: 1.55 !important;
}

html body #view-detail #expandDescBtn {
  margin: 6px 0 0 8px;
}

html body #view-detail .detail-copy > .detail-meta-grid {
  margin: 10px 0 0 !important;
}

html body #view-detail :where(.trailer-band, .streaming-provider-band, .comment-band, .seo-discovery-band) {
  background: var(--md-surface-variant) !important;
}

html body #view-detail .trailer-content {
  overflow: hidden;
  border-radius: 8px;
}

html body #view-detail .streaming-provider-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  gap: 8px !important;
}

html body #view-detail .streaming-provider-card {
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  gap: 7px;
  padding: 11px 8px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: 8px !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: none !important;
}

html body #view-detail .streaming-provider-card img,
html body #view-detail .streaming-provider-logo-fallback {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9px !important;
  object-fit: contain !important;
}

html body #view-detail .streaming-provider-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .episode-progress-head {
  align-items: flex-start;
}

html body #view-detail .episode-hint {
  margin: 0 0 12px;
  color: var(--md-muted) !important;
  font-size: 12px;
}

html body #view-detail .episode-grid {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important;
  gap: 6px !important;
}

html body #view-detail .episode-btn {
  min-height: 40px !important;
  border-color: var(--md-outline) !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
}

html body #view-detail .episode-btn.watched {
  border-color: var(--md-primary) !important;
  background: var(--md-action-fill) !important;
  color: var(--md-on-primary) !important;
}

html body #view-detail .episode-btn.future {
  opacity: .36;
}

html body #view-detail .side-editor {
  position: sticky;
  top: 18px;
  min-width: 0;
}

html body #view-detail .rating-editor {
  padding: 16px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html body #view-detail .rating-editor-head {
  gap: 8px;
}

html body #view-detail .rating-stars-wrap {
  margin-top: 12px;
}

html body #view-detail .comment-composer textarea {
  background: var(--md-surface-elevated) !important;
}

html body #view-detail .comment-card {
  background: var(--md-surface-elevated) !important;
}

html body #view-detail .seo-related-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #view-detail .seo-related-card {
  overflow: hidden;
  background: var(--md-surface) !important;
}

html body #view-detail .seo-related-card img {
  width: 100% !important;
  border-radius: 0 !important;
}

html body #view-detail .seo-context-links {
  gap: 7px;
}

html body #view-detail .seo-context-links a {
  border: 1px solid var(--md-outline) !important;
  border-radius: 999px !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
}

/* Profile, statistics, library and community use the profile board's hierarchy. */
html body :where(#view-profile, #view-stats, #view-public-profile, #view-public-list, #view-socials) .mobile-section-tabs {
  border-bottom: 1px solid var(--md-outline);
}

html body #view-profile .profile-shell {
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body #view-profile .profile-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-primary) 13%, var(--md-surface-variant)), var(--md-surface-variant)) !important;
}

html body #view-profile .avatar-frame,
html body #view-public-profile .avatar-frame {
  width: 108px !important;
  height: 108px !important;
  border: 2px solid var(--md-primary) !important;
  border-radius: 50% !important;
  background: var(--md-primary-container) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-2) !important;
  font-size: 48px !important;
}

html body #view-profile .profile-main-title {
  margin: 14px 0 4px !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
}

html body #view-profile .profile-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 7px !important;
  margin-top: 16px !important;
}

html body #view-profile .profile-actions > * {
  min-width: 0;
  min-height: 38px;
  padding-inline: 9px;
  font-size: 11px;
}

html body #view-profile .profile-form-card h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

html body #view-profile .profile-form-card label {
  margin-bottom: 11px;
}

html body .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body .stat-card {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px !important;
  background: var(--md-surface-variant) !important;
}

html body .stat-card strong {
  color: var(--md-on-surface) !important;
  font-family: var(--font-body) !important;
  font-size: 27px !important;
  font-weight: 650;
}

html body .stat-card span {
  color: var(--md-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .genre-bars {
  gap: 10px !important;
}

html body .genre-bar {
  grid-template-columns: 140px minmax(0, 1fr) 34px !important;
  gap: 10px !important;
  color: var(--md-muted) !important;
  font-size: 12px;
}

html body :where(.library-controls, .list-tabs) {
  border-color: var(--md-outline) !important;
}

html body .library-controls {
  grid-template-columns: minmax(150px, 190px) minmax(270px, 300px) minmax(200px, 1fr) !important;
  gap: 9px !important;
  margin-bottom: 12px !important;
}

html body .library-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .library-card {
  overflow: hidden;
  background: var(--md-surface) !important;
}

html body .library-card .poster-wrap {
  overflow: hidden;
  background: var(--md-surface-elevated) !important;
}

html body .library-card .lib-body {
  padding: 11px !important;
}

html body .library-card h3 {
  font-size: 15px !important;
  line-height: 1.24 !important;
}

html body .library-list-head,
html body .library-list-row {
  border-color: var(--md-outline) !important;
}

html body .library-list-head {
  background: var(--md-surface-elevated) !important;
  color: var(--md-muted) !important;
}

html body .library-list-row {
  background: var(--md-surface-variant) !important;
}

html body .library-list-row:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-variant)) !important;
}

html body .library-list-title {
  color: var(--md-on-surface) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.25 !important;
}

html body .rated-row,
html body .rank-row {
  border-color: var(--md-outline) !important;
  background: var(--md-surface-elevated) !important;
}

html body .toplists-grid {
  gap: 12px !important;
}

html body .social-community-grid {
  gap: 12px !important;
}

html body .social-community-card {
  overflow: hidden;
  background: var(--md-surface-variant) !important;
}

html body .social-community-card::before,
html body .social-community-card::after,
html body .social-icon-cutout {
  box-shadow: none !important;
  filter: none !important;
}

html body :where(.release-reminders-list, .comments-list, .mini-list) {
  gap: 8px !important;
}

html body .native-push-settings {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: none !important;
}

/* Remaining real routes inherit the same Material component vocabulary. */
html body :where(.anime-news-grid, .app-platform-grid, .product-analytics-columns) {
  gap: 12px !important;
}

html body .anime-news-card {
  overflow: hidden;
  background: var(--md-surface-variant) !important;
}

html body .anime-news-card-media,
html body .anime-news-card-image {
  border-radius: 0 !important;
}

html body :where(.voting-option-card, .giveaway-entry-panel, .giveaway-feed-card, .app-platform-card) {
  background: var(--md-surface-variant) !important;
}

html body :where(.voting-option-card, .giveaway-active-layout)::before,
html body :where(.voting-option-card, .giveaway-active-layout)::after {
  filter: none !important;
  box-shadow: none !important;
}

html body .legal-grid {
  gap: 12px !important;
}

html body .legal-card {
  background: var(--md-surface-variant) !important;
}

/* Menus, drawers, dialogs and feedback surfaces retain every existing action. */
html body .site-menu-scrim {
  background: rgba(0, 0, 0, .62) !important;
  backdrop-filter: blur(4px) !important;
}

html body .site-menu-panel {
  border: 1px solid var(--md-outline-strong) !important;
  border-radius: 12px !important;
  background: var(--md-surface) !important;
  box-shadow: var(--md-elevation-3) !important;
}

html body .site-menu-panel::before,
html body .site-menu-panel-glow,
html body .site-menu-item-icon::before,
html body .site-menu-item-icon::after {
  display: none !important;
}

html body .site-menu-panel-content {
  gap: 7px !important;
  padding: 10px !important;
}

html body .site-menu-item {
  min-height: 70px;
  padding: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .site-menu-item:hover,
html body .site-menu-item:focus-visible,
html body .site-menu-item.active {
  border-color: color-mix(in srgb, var(--md-primary) 34%, transparent) !important;
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-variant)) !important;
  transform: none !important;
}

html body .site-menu-item-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--md-outline) !important;
  border-radius: 50% !important;
  background: var(--md-primary-container) !important;
  color: var(--md-secondary) !important;
  box-shadow: none !important;
}

html body .site-menu-item-title strong {
  font-size: 13px;
  font-weight: 600;
}

html body .site-menu-item-title em {
  border-radius: 999px;
  background: var(--md-action-fill) !important;
  color: var(--md-on-primary) !important;
}

html body .site-menu-item-copy small {
  color: var(--md-muted) !important;
}

html body .site-menu-item-arrow {
  color: var(--md-secondary) !important;
}

html body :where(
  dialog,
  .auth-dialog,
  .app-dialog,
  .anime-news-detail-dialog,
  .release-reminder-dialog,
  .release-planner-info-dialog,
  .username-setup-dialog
) {
  border: 1px solid var(--md-outline-strong) !important;
  border-radius: 16px !important;
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .58) !important;
}

html body :where(dialog, .auth-dialog, .app-dialog)::backdrop {
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(6px) !important;
}

html body :where(
  .ar-confirm-panel,
  .ar-choice-card,
  .ar-input-panel,
  .add-list-panel,
  .release-reminder-panel,
  .anime-news-detail-panel,
  .release-planner-info-panel,
  .username-setup-layout
) {
  border-color: var(--md-outline) !important;
  border-radius: 14px !important;
  background: var(--md-surface) !important;
  box-shadow: none !important;
}

html body :where(.modal-close, .ar-confirm-x, .add-list-close, .search-filter-close,
                 .release-planner-rail-close, .anime-news-detail-close) {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body :where(.modal-close, .ar-confirm-x, .add-list-close) {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: 50% !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
  box-shadow: none !important;
}

html body .auth-split {
  gap: 24px !important;
  padding: 26px !important;
}

html body .auth-split h2 {
  margin: 8px 0 !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
}

html body .auth-tab.active {
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-elevated)) !important;
  color: var(--md-secondary) !important;
}

html body .auth-status {
  border-color: var(--md-outline) !important;
  border-radius: 8px;
  background: var(--md-surface-elevated) !important;
}

html body .release-planner-overlay,
html body .roadmap-overlay {
  background: rgba(0, 0, 0, .68) !important;
  backdrop-filter: blur(5px) !important;
}

html body .release-planner-rail,
html body .roadmap-rail {
  border-color: var(--md-outline-strong) !important;
  background: var(--md-surface) !important;
  box-shadow: var(--md-elevation-3) !important;
}

html body :where(.release-planner-rail, .roadmap-rail)::before,
html body :where(.release-planner-rail, .roadmap-rail)::after,
html body :where(.release-planner-rail-glow, .roadmap-glow) {
  display: none !important;
}

html body :where(.release-planner-rail-header, .roadmap-header) {
  border-bottom-color: var(--md-outline) !important;
  background: var(--md-surface-variant) !important;
}

html body :where(.release-planner-rail-emblem, .roadmap-emblem) {
  border-color: var(--md-outline) !important;
  border-radius: 50% !important;
  background: var(--md-primary-container) !important;
  color: var(--md-secondary) !important;
  box-shadow: none !important;
}

html body .release-planner-rail-intro {
  border-bottom-color: var(--md-outline) !important;
  background: var(--md-surface-variant) !important;
  color: var(--md-muted) !important;
}

html body :where(.release-planner-fab, .roadmap-fab) {
  border: 1px solid color-mix(in srgb, var(--md-primary) 60%, var(--md-outline)) !important;
  border-radius: 12px !important;
  background: var(--md-action-fill) !important;
  color: var(--md-on-primary) !important;
  box-shadow: var(--md-elevation-3) !important;
  clip-path: none !important;
}

html body :where(.release-planner-fab, .roadmap-fab) :where(strong, small) {
  color: var(--md-on-primary) !important;
}

html body :where(.hero-slide, .release-planner-rail)[aria-hidden="true"] {
  visibility: hidden !important;
}

html body :where(.hero-slide, .release-planner-rail)[aria-hidden="false"] {
  visibility: visible !important;
}

html body .consent-banner {
  border: 1px solid var(--md-outline-strong) !important;
  border-radius: 12px !important;
  background: var(--md-surface) !important;
  box-shadow: var(--md-elevation-3) !important;
}

html body .network-status-banner {
  border-color: var(--md-outline-strong) !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
}

html body .toast {
  border-color: var(--md-outline-strong) !important;
  border-radius: 10px !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-3) !important;
}

html body .site-footer {
  border-top-color: var(--md-outline) !important;
  background: transparent !important;
  color: var(--md-muted) !important;
}

html body .footer-links {
  gap: 8px 16px !important;
}

/* Die vier Links sind <a>, "Cookie-Einstellungen" ist ein <button>. Beide sind
   durch min-height 32px gleich hohe Flex-Items, aber ein Button zentriert seinen
   Text selbst, waehrend ein Anker ihn oben im Kasten absetzt - der Button sass
   dadurch rund 7px tiefer. inline-flex + align-items zentriert beide gleich.
   Gleiches Muster wie a.solid-action/a.ghost-action in styles-v2-4-141.css:39. */
html body .footer-links .text-action {
  display: inline-flex;
  align-items: center;
}

/* Never synthesize a provider logo. If the official image is absent, show name only. */
html body .streaming-provider-logo-fallback,
html body .search-streaming-provider-item > span[aria-hidden="true"] {
  display: none !important;
}

html body :where(.streaming-provider-card img, .search-streaming-match img) {
  filter: none !important;
  object-fit: contain !important;
}

/* Mobile state demonstrated by every board; the application already uses 760px. */
@media (max-width: 760px) {
  html body {
    background: var(--md-background) !important;
  }

  html body .topbar {
    position: sticky !important;
    top: 0;
    z-index: 42;
    width: 100%;
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-rows: 48px;
    align-items: center;
    gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--md-outline) !important;
    background: rgba(18, 9, 11, .97) !important;
    backdrop-filter: blur(12px) !important;
  }

  html.native-app body .topbar {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
  }

  html body .topbar::after {
    display: none !important;
  }

  html body .topbar > .site-menu-mobile-trigger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
  }

  html body .topbar > .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 0;
    gap: 8px !important;
  }

  html body .topbar .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  html body .topbar .brand-text {
    min-width: 0;
  }

  html body .topbar .brand-text strong {
    overflow: hidden;
    color: var(--md-on-surface);
    font-family: var(--font-body) !important;
    font-size: 17px !important;
    font-weight: 650;
    letter-spacing: -.01em !important;
    text-overflow: ellipsis;
    text-transform: none !important;
    white-space: nowrap;
  }

  html body .topbar > .top-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end;
    min-width: 0;
  }

  html body .topbar .top-account-button {
    width: auto;
    max-width: 106px !important;
    min-height: 40px !important;
    padding-inline: 10px !important;
    overflow: hidden;
    border-color: var(--md-outline) !important;
    background: var(--md-surface-variant) !important;
    color: var(--md-on-surface) !important;
    font-size: 10px;
  }

  html body .topbar .top-account-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body .shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 12px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: clip;
  }

  html body .page-title-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    margin-bottom: 17px !important;
  }

  html body .page-title-row .page-main-title,
  html body .anime-news-page-title,
  html body .voting-page-title {
    margin-top: 2px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  html body .page-title-row p {
    font-size: 12px;
  }

  html body .section-kicker {
    font-size: 10px !important;
  }

  html body :where(.content-band, .watch-box, .profile-card, .profile-form-card) {
    padding: 14px !important;
  }

  html body .content-band {
    margin-top: 11px !important;
  }

  html body .band-head {
    gap: 8px;
    margin-bottom: 11px !important;
  }

  html body :where(.band-head h2, .watch-box h2, .pulse-card h2) {
    font-size: 16px !important;
  }

  html body .mobile-section-tabs {
    width: calc(100% + 24px) !important;
    display: flex !important;
    gap: 0 !important;
    margin: -4px -12px 16px !important;
    padding: 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid var(--md-outline) !important;
    background: transparent !important;
    scroll-snap-type: x proximity;
  }

  html body .mobile-section-tab {
    flex: 0 0 auto;
    min-height: 42px !important;
    padding: 0 11px !important;
    scroll-snap-align: start;
  }

  html body .mobile-tabs {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 60;
    width: 100% !important;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--md-outline) !important;
    border-radius: 0 !important;
    background: rgba(18, 12, 14, .98) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body .mobile-tab {
    min-width: 0;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--md-muted) !important;
    box-shadow: none !important;
  }

  html body .mobile-tab > span {
    min-height: 22px;
    color: currentColor !important;
    font-size: 21px !important;
    line-height: 1;
  }

  html body .mobile-tab small {
    overflow: hidden;
    color: currentColor !important;
    font-size: 9px !important;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body .mobile-tab.active {
    background: transparent !important;
    color: var(--md-secondary) !important;
  }

  html body .site-footer {
    padding: 24px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Home cards stack like the mobile reference cards. */
  html body .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body .hero-panel,
  html body .pulse-card,
  html body .hero-slide {
    min-height: 0 !important;
  }

  html body .hero-panel {
    display: block !important;
  }

  html body .hero-slide {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .hero-art {
    min-height: 246px !important;
    order: -1;
  }

  html body .hero-copy {
    padding: 18px 15px 16px !important;
  }

  html body .hero-copy .hero-main-title {
    margin: 7px 0 8px !important;
    font-size: clamp(28px, 9vw, 36px) !important;
    line-height: 1.08 !important;
  }

  html body .hero-copy p {
    font-size: 12px;
  }

  html body .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
    margin-top: 14px !important;
  }

  html body .hero-actions > * {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }

  html body #view-home .hero-carousel {
    min-height: clamp(390px, 110vw, 440px) !important;
    padding: 0 !important;
  }

  html body #view-home .hero-carousel .hero-carousel-track {
    height: 100% !important;
    min-height: inherit !important;
  }

  html body #view-home .hero-carousel .hero-slide {
    min-height: inherit !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 214px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html body #view-home .hero-carousel .hero-slide .hero-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 214px !important;
    min-height: 214px !important;
    order: -1 !important;
  }

  html body #view-home .hero-carousel .hero-slide .hero-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    padding: 16px 14px 18px !important;
  }

  html body #view-home .hero-carousel .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  html body #view-home .hero-carousel-dots {
    top: 188px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: max-content;
    max-width: calc(100% - 28px) !important;
    transform: translateX(-50%) !important;
  }

  html body .pulse-card {
    padding: 14px !important;
  }

  html body .poster-rail {
    grid-auto-columns: 146px !important;
    gap: 9px !important;
  }

  html body .poster-card {
    min-height: 226px !important;
  }

  /* Calendar is an agenda on phones, matching the reference. */
  html body #view-calendar .calendar-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "days" "filters" "results" !important;
    gap: 10px !important;
  }

  html body #view-calendar .weekday-dock {
    width: calc(100% + 24px);
    display: flex !important;
    gap: 2px !important;
    margin-inline: -12px;
    padding: 0 10px 6px;
    overflow-x: auto;
  }

  html body #view-calendar .day-chip {
    min-width: 62px !important;
    min-height: 54px !important;
    padding: 7px 5px !important;
  }

  html body #view-calendar .calendar-filters {
    position: static !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--md-surface-variant) !important;
  }

  html body #view-calendar .calendar-filters .filter-toggle {
    border-radius: 10px !important;
    background: var(--md-surface-elevated) !important;
  }

  html body #view-calendar .calendar-filters.is-open .filter-toggle {
    border-radius: 10px 10px 0 0 !important;
  }

  html body #view-calendar .filter-body {
    padding: 12px !important;
    border-top: 1px solid var(--md-outline) !important;
    background: var(--md-surface-variant) !important;
  }

  html body #view-calendar .release-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body #view-calendar .release-card {
    min-height: 106px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  html body #view-calendar .release-card > img {
    width: 72px !important;
    height: 100% !important;
  }

  html body #view-calendar .release-card-body {
    padding: 9px !important;
  }

  html body .release-planner-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body .release-planner-card {
    grid-template-columns: 48px 64px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  /* Discover remains exactly two poster columns on phone. */
  html body #view-search .search-filter-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-bottom: 12px;
    padding: 12px !important;
  }

  html body #view-search .search-filter-card > h3,
  html body #view-search .search-filter-card > small,
  html body #view-search .search-filter-card > .solid-action {
    grid-column: 1 / -1;
  }

  html body #view-search .search-filter-card :where(input, select, .ar-select-btn) {
    min-height: 40px;
    font-size: 11px;
  }

  html body #view-search .search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body #view-search .search-row {
    min-height: 286px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #view-search .search-row > div:not(.search-row-actions) {
    padding: 66px 9px 4px !important;
  }

  html body #view-search .search-row h3 {
    font-size: 12px !important;
  }

  html body #view-search .search-row .tag-row {
    display: flex !important;
    max-height: 22px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  html body #view-search .search-streaming-providers {
    display: flex !important;
    max-height: none !important;
    flex-wrap: wrap;
    gap: 4px !important;
    overflow: visible !important;
  }

  html body #view-search .search-row-actions {
    grid-column: auto !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 0 8px 8px !important;
  }

  html body #view-search .search-row-actions .small-btn {
    min-height: 28px;
    font-size: 9px;
  }

  html body #view-season .season-controls {
    width: 100%;
    padding: 10px !important;
  }

  html body #view-season .season-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body #view-season .season-grid .release-card {
    min-height: 284px !important;
  }

  html body #view-season .season-grid .release-card > img {
    height: 190px !important;
    flex-basis: 190px;
  }

  html body #view-season .season-grid .card-actions {
    grid-template-columns: 1fr !important;
  }

  /* Detail hero and actions stack without hiding real controls. */
  html body #view-detail .detail-hero {
    width: calc(100% + 24px) !important;
    min-height: 348px !important;
    margin: -16px -12px 0 !important;
    padding: 150px 14px 14px !important;
    border-inline: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }

  html body #view-detail .detail-title {
    width: 100% !important;
    max-width: none !important;
    gap: 6px !important;
  }

  html body #view-detail .detail-title .detail-main-title,
  html body #view-detail .detail-title h1 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.6vw, 31px) !important;
    line-height: 1.08 !important;
  }

  html body #view-detail .detail-rating-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body #view-detail .rating-stat {
    padding: 6px !important;
  }

  html body #view-detail .rating-stat strong {
    font-size: 15px !important;
  }

  html body #view-detail .rating-stat small {
    display: none;
  }

  html body #view-detail .detail-action-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 6px !important;
  }

  html body #view-detail .detail-body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px 0 0 !important;
  }

  html body #view-detail .plot-head {
    padding: 13px 13px 0;
  }

  html body #view-detail #detailDescription {
    padding: 8px 13px 13px;
    font-size: 12px;
  }

  html body #view-detail .side-editor {
    position: static;
  }

  html body #view-detail .streaming-provider-grid {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  html body #view-detail .streaming-provider-card {
    min-width: 96px;
    flex: 0 0 96px;
    scroll-snap-align: start;
  }

  html body #view-detail .episode-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
  }

  html body #view-detail .seo-related-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto;
  }

  /* Profile/library: one-column account areas, two-column media grids. */
  html body #view-profile .profile-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #view-profile .profile-card {
    text-align: left;
  }

  html body #view-profile .avatar-frame {
    width: 88px !important;
    height: 88px !important;
  }

  html body #view-profile .profile-main-title {
    font-size: 23px !important;
  }

  html body #view-profile .profile-actions {
    grid-template-columns: 1fr 1fr;
  }

  html body .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body .stat-card {
    min-height: 82px;
    padding: 12px !important;
  }

  html body .stat-card strong {
    font-size: 22px !important;
  }

  html body .genre-bar {
    grid-template-columns: 90px minmax(0, 1fr) 28px !important;
    gap: 7px !important;
  }

  html body .library-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body .library-card .lib-body {
    padding: 9px !important;
  }

  html body .library-card h3 {
    font-size: 13px !important;
  }

  html body .library-list-shell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .library-list-head {
    display: none !important;
  }

  html body .library-list-body {
    gap: 8px;
  }

  html body .library-list-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 11px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: 10px !important;
  }

  html body .library-list-cell::before {
    content: attr(data-label) !important;
    color: var(--md-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
  }

  html body .social-community-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body :where(.anime-news-grid, .app-platform-grid, .product-analytics-columns, .toplists-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body :where(
    dialog,
    .auth-dialog,
    .app-dialog,
    .anime-news-detail-dialog,
    .release-reminder-dialog,
    .release-planner-info-dialog,
    .username-setup-dialog
  ) {
    width: 100dvw !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-inline: 0 !important;
    border-radius: 0 !important;
  }

  html body .auth-split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 54px 14px 18px !important;
  }

  html body .site-menu-panel {
    max-height: calc(100dvh - 76px) !important;
    border-radius: 12px !important;
  }

  html body .consent-banner {
    right: 10px !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    width: auto !important;
    padding: 13px !important;
  }

  html body .toast-host {
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 10px;
  }

  html body .toast {
    max-width: none;
  }
}

@media (max-width: 380px) {
  html body .shell {
    padding-inline: 10px !important;
  }

  html body .mobile-section-tabs {
    width: calc(100% + 20px) !important;
    margin-inline: -10px !important;
  }

  html body .topbar {
    padding-inline: 8px !important;
    gap: 5px !important;
  }

  html body .topbar .brand-text strong {
    font-size: 15px !important;
  }

  html body .topbar .top-account-button {
    max-width: 90px !important;
    padding-inline: 7px !important;
  }

  html body #view-detail .detail-hero {
    width: calc(100% + 20px) !important;
    margin-inline: -10px !important;
  }

  html body #view-search .search-row {
    min-height: 264px !important;
  }
}

/*
 * The reference desktop layout never turns secondary tools into permanent
 * columns. Older releases docked Roadmap, Planner and Chat above 2180px,
 * which covered the sidebar and left a large unused strip. Keep the existing
 * tools, but retain their normal off-canvas drawer behaviour at every width.
 */
@media (min-width: 2180px) {
  html body .roadmap-overlay,
  html body .release-planner-overlay,
  html body .community-chat-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 78 !important;
  }

  html body .roadmap-rail {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 80 !important;
    width: min(410px, 100vw) !important;
    height: 100dvh !important;
    border-width: 0 1px 0 0 !important;
    transform: translateX(-105%) !important;
  }

  html body .release-planner-rail,
  html body .community-chat-rail {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 80 !important;
    width: min(410px, 100vw) !important;
    height: 100dvh !important;
    border-width: 0 0 0 1px !important;
    transform: translateX(105%) !important;
  }

  html body.roadmap-open .roadmap-rail,
  html body.release-planner-open .release-planner-rail,
  html body.community-chat-open .community-chat-rail {
    transform: translateX(0) !important;
  }

  html body .roadmap-close-btn,
  html body .release-planner-rail-close,
  html body .community-chat-close {
    display: grid !important;
  }

  html body .roadmap-fab,
  html body .release-planner-fab,
  html body .community-chat-fab {
    display: flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Seitenbanner (V2.4.211)                                                   */
/* Gemeinsame Flaeche fuer die Banner der Startseite und der Premium-Seite.  */
/* Dieselbe Formensprache wie die vorhandenen Hero-Flaechen von Social Media */
/* und Giveaway: 1px-Rand, Radius 12, dieselbe Schattierung. Die Hoehe kommt */
/* aus dem Seitenverhaeltnis des jeweiligen Bildes und ist nach oben         */
/* gedeckelt, damit der Banner auf grossen Monitoren nicht ins Riesige       */
/* waechst.                                                                  */
/* ------------------------------------------------------------------------ */
html body .ar-page-banner {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-shell, 12px);
  background: var(--md-surface-variant);
  box-shadow: var(--md-elevation-1);
}

html body .ar-page-banner img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* Startbanner als Ebenenaufbau (V2.4.212)                                     */
/*                                                                            */
/* Das Quellbanner ist ein flaches, deckendes Bild. Aizen kann daraus nicht    */
/* nach oben herausragen, solange es allein in einem beschnittenen Kasten      */
/* liegt. Deshalb zwei Ebenen:                                                */
/*                                                                            */
/*   1. .ar-page-banner-frame  - das unveraenderte Originalbanner, beschnitten */
/*   2. .ar-page-banner-popout - der freigestellte Aizen mit Alphakanal, der   */
/*                               oben ueber die Bannerkante hinausreicht       */
/*                                                                            */
/* Die Werte des Freistellers stammen aus einem rechnerischen Deckungsabgleich */
/* mit dem Quellbanner: bei 31.54 % Breite und 59.09 % Abstand von links liegt */
/* er punktgenau auf dem Aizen der unteren Ebene. Es entsteht dadurch kein     */
/* zweites, versetztes Gesicht.                                               */
/* -------------------------------------------------------------------------- */
html body .ar-page-banner-home {
  /* Hoehe des sichtbaren Bannerkastens und senkrechter Bildfokus. Beide
     Werte gehen in die Lage des Freistellers ein - siehe margin-top unten.
     Der Freisteller waechst mit der Bannerbreite, der Platz oberhalb des
     Banners ist dagegen fest. Ohne Mitwachsen der Kastenhoehe wuerde auf
     sehr breiten Bildschirmen nur noch die Stirn ueber der Kante stehen.
     Bis 1920 bleibt es bei den 174px der Referenz. */
  --ar-banner-h: clamp(174px, calc(16.6vw - 148px), 330px);
  --ar-banner-focus: 44%;
  --ar-popout-w: 31.54%;
  --ar-popout-x: 59.09%;
  /* Der Freisteller ragt heraus, deshalb traegt die Figur selbst keine
     Flaeche und keinen Beschnitt mehr - beides liegt jetzt im Rahmen. */
  aspect-ratio: auto;
  height: var(--ar-banner-h);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html body .ar-page-banner-home .ar-page-banner-frame {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-shell, 12px);
  background: var(--md-surface-variant);
  box-shadow: var(--md-elevation-1);
}

html body .ar-page-banner-home .ar-page-banner-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--ar-banner-focus);
}

/* Prozentwerte von margin-top rechnen gegen die BREITE des Bannerkastens.
   Genau das wird hier gebraucht, weil der Ausschnittversatz mit der
   Bildbreite waechst, die Kastenhoehe aber fest ist:
     16.908 % = 2.241 % (Kopf oberhalb des Quellbildes)
              + 33.333 % (Quellhoehe zur Breite) * 0.44 (Fokus)
   Dazu kommt der feste Anteil Kastenhoehe * 0.44. Aendert sich der Fokus,
   muessen beide Zahlen und der Wert in clip-path mitgerechnet werden. */
/* Vom Freisteller bleibt ausschliesslich der Teil OBERHALB der Bannerkante
   stehen. Im Originalbanner ist der Schriftzug ueber Aizens Schulter
   gezeichnet - ein ungeschnittener Freisteller wuerde ihn verdecken.
   Der Schnitt liegt einen Punkt unterhalb der Rahmenoberkante, damit die
   Rahmenlinie nicht quer durch das Gesicht laeuft. Weil beide Ebenen
   deckungsgleich ausgerichtet sind, geht die Figur an der Schnittstelle
   ohne sichtbaren Versatz ins Banner ueber. */
html body .ar-page-banner img.ar-page-banner-popout {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--ar-popout-x);
  width: var(--ar-popout-w);
  height: auto;
  margin-top: calc(var(--ar-banner-h) * 0.44 - 16.908%);
  /* 57.098 % der Eigenhoehe entsprechen 0.225 Bannerbreiten; zusammen mit
     dem Anteil der Kastenhoehe endet der sichtbare Teil genau an der
     Oberkante des Bannerrahmens. Es ist ein gerader Schnitt auf einer
     ohnehin vorhandenen Bildkante - kein Ausschnitt um die Figur herum. */
  clip-path: inset(0 0 calc(57.098% + var(--ar-banner-h) * 0.44 - 14px) 0);
  /* Der Freisteller ist kein bildgleicher Auszug des Banners, sondern eine
     eigene Zeichnung derselben Figur. Ein harter Schnitt an der Kante
     hinterliesse deshalb einen feinen Helligkeitsversatz im Gesicht.
     Die letzten 13 Punkte laufen daher weich aus - und zwar INNERHALB des
     Banners, wo die untere Ebene dasselbe Motiv deckungsgleich zeigt.
     Dadurch kreuzen sich beide Ebenen unsichtbar. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 calc(42.902% - var(--ar-banner-h) * 0.44 + 1px),
    transparent calc(42.902% - var(--ar-banner-h) * 0.44 + 14px));
  mask-image: linear-gradient(to bottom,
    #000 calc(42.902% - var(--ar-banner-h) * 0.44 + 1px),
    transparent calc(42.902% - var(--ar-banner-h) * 0.44 + 14px));
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}

/* Premium: Krone und Kopf sitzen dicht am oberen Bildrand. Wuerde hier
   mittig beschnitten, faellt die Krone weg - deshalb oben ausgerichtet. */
html body .ar-page-banner-premium {
  aspect-ratio: 2172 / 724;
  max-height: 260px;
}

html body .ar-page-banner-premium img { object-position: center top; }

@media (max-width: 760px) {
  /* Schmaler Bildausschnitt: Hoehe herunter, damit der Banner nicht die
     halbe Ansicht einnimmt. Das Bild wird dabei seitlich beschnitten -
     mittig, weil dort Schriftzug beziehungsweise Schild sitzen. */
  html body .ar-page-banner {
    margin-bottom: 11px;
    border-radius: var(--md-radius-card, 10px);
  }

  html body .ar-page-banner-home { --ar-banner-h: 96px; }
  html body .ar-page-banner-premium { max-height: 124px; }
  html body .ar-page-banner-premium img { object-position: 72% top; }
}

/* ------------------------------------------------------------------------ */
/* Footer (V2.4.212)                                                         */
/* Eine Zeile: Marke links, Textlinks und Social-Icons rechts. TMDb-Hinweis  */
/* und Copyright sind auf Wunsch entfallen.                                  */
/* ------------------------------------------------------------------------ */
html body .site-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px 24px !important;
}

html body .site-footer .footer-links {
  margin-left: auto !important;
}

html body .footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

html body .footer-socials a {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--md-muted);
  transition: color .16s ease;
}

html body .footer-socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

/* Instagram ist als Kontur gezeichnet, die anderen drei als Flaeche. */
html body .footer-socials a[aria-label^="Instagram"] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

html body .footer-socials .footer-social-cutout {
  fill: var(--md-background);
}

html body .footer-socials a:hover {
  color: var(--md-primary);
}

/* ------------------------------------------------------------------------ */
/* Footer-Zeile nach der Startseiten-Referenz (V2.4.212)                     */
/* Logo, Wortmarke und der bestehende Zusatztext stehen nebeneinander in     */
/* einer flachen Zeile, rechts die Links und die Social-Symbole.            */
/* ------------------------------------------------------------------------ */
@media (min-width: 960px) {
  html:not(.native-app) body .site-footer .footer-brand {
    gap: 10px !important;
  }

  html:not(.native-app) body .site-footer .footer-mark {
    width: 28px !important;
    height: 28px !important;
  }

  html:not(.native-app) body .site-footer .footer-brand > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 32px !important;
  }

  html:not(.native-app) body .site-footer .footer-brand strong {
    font-size: 16px !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .site-footer .footer-brand small {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .site-footer .footer-links {
    gap: 0 22px !important;
    flex-wrap: nowrap !important;
  }

  html:not(.native-app) body .site-footer .footer-links .text-action {
    min-height: 0 !important;
    padding: 0 !important;
    /* Die Referenz haelt die Fusszeilenverweise zurueckhaltend grau, nicht rot. */
    color: var(--md-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }

  html:not(.native-app) body .site-footer .footer-links .text-action:hover,
  html:not(.native-app) body .site-footer .footer-links .text-action:focus-visible {
    color: var(--md-on-surface) !important;
  }

  html:not(.native-app) body .site-footer .footer-socials {
    gap: 16px !important;
  }
}

/* Unterhalb der Desktopbreite zeigt die Referenz einen glatten Bannerkasten
   ohne herausragende Figur - der Freisteller bleibt dort aussen vor. */
@media (max-width: 959px) {
  html body .ar-page-banner img.ar-page-banner-popout {
    display: none !important;
  }

  html body .ar-page-banner-home .ar-page-banner-frame img {
    object-position: center 30%;
  }
}