/* Anime detail page refresh: flat surfaces, one accent, text-first metadata.
   Loaded after every other stylesheet on /anime/:slug, so it deliberately wins over the older rules. */

html body #infoBoxContainer { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ---------- hero ---------- */
html body .anime-hero-banner-wrap {
  background: #1b1a23 !important;
  border: 1px solid #2a2935 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
}
html body .anime-hero-backdrop-header { height: 170px !important; background-position: center 30% !important; }
html body .anime-hero-backdrop-img { filter: saturate(.85) brightness(.55); }
html body .anime-hero-backdrop-overlay { background: linear-gradient(180deg, rgba(27,26,35,.15) 0%, rgba(27,26,35,.55) 55%, #1b1a23 100%) !important; }
html body .anime-hero-bg { display: none !important; }
html body .anime-hero-gradient { display: none !important; }
html body .anime-hero-content { gap: 26px !important; padding: 0 26px 26px !important; margin-top: -78px !important; }
html body .anime-hero-poster {
  flex: 0 0 190px !important; max-width: 190px !important;
  border-radius: 4px !important; box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  border: 1px solid #34333f !important; background: #14131a !important;
}

html body .anime-hero-breadcrumbs { font-size: 12px !important; letter-spacing: .2px !important; text-transform: none !important; font-weight: 500 !important; color: #8f8da0 !important; margin-bottom: 4px !important; }
html body .anime-hero-breadcrumbs a { color: #b9b7c8 !important; }
html body .anime-hero-breadcrumbs a:hover { color: #fff !important; }
html body .anime-hero-breadcrumbs span:nth-child(even) { opacity: .5; }
html body .anime-hero-title { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.2px !important; line-height: 1.2 !important; color: #f2f1f7 !important; margin: 0 0 4px !important; }
html body .anime-hero-native-title { color: #8f8da0 !important; font-size: 13px !important; margin-bottom: 12px !important; }

/* status, rating, episodes... become one quiet line of text instead of coloured pills */
html body .anime-hero-badges { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 !important; margin: 4px 0 12px !important; font-size: 13px !important; color: #b9b7c8 !important; }
html body .hero-pill,
html body .hero-pill.pill-rating, html body .hero-pill.pill-sub, html body .hero-pill.pill-dub,
html body .hero-pill.pill-quality, html body .hero-pill.pill-eps,
html body .pill-status-ongoing, html body .pill-status-completed, html body .pill-status-upcoming {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #b9b7c8 !important; gap: 5px !important;
}
html body .hero-pill + .hero-pill::before { content: "·"; margin: 0 10px; color: #55536a; font-weight: 700; }
html body .hero-pill i { display: none !important; }
html body .hero-pill.pill-rating { color: #e9c46a !important; font-weight: 700 !important; }
html body .hero-pill.pill-rating i { display: inline-block !important; color: #e9c46a !important; font-size: 11px !important; }
html body .hero-pill.pill-quality { display: none !important; }
html body .pill-status-ongoing { color: #7fcf9b !important; }
html body .pill-status-completed { color: #8fb4d9 !important; }
html body .pill-status-upcoming { color: #e0b564 !important; }
html body .live-dot { width: 6px !important; height: 6px !important; box-shadow: none !important; animation: none !important; background: #7fcf9b !important; display: inline-block !important; }
html body .hero-pill .live-dot, html body .hero-pill i.live-dot { display: inline-block !important; }

html body .anime-hero-genres { gap: 0 !important; margin-bottom: 10px !important; }
html body .anime-hero-genres a {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  color: #cfcde0 !important; font-size: 13px !important; text-decoration: none !important;
}
html body .anime-hero-genres a + a::before { content: "/"; margin: 0 9px; color: #55536a; }
html body .anime-hero-genres a:hover { background: none !important; color: #fff !important; text-decoration: underline !important; }

html body .anime-hero-synopsis { color: #c8c6d6 !important; font-size: 14px !important; line-height: 1.65 !important; max-width: 70ch; }
html body .synopsis-toggle-btn { color: #9f8cf0 !important; font-weight: 500 !important; }

html body .anime-hero-actions { gap: 10px !important; margin-top: 14px !important; }
html body .btn-hero-watch {
  background: #7c5cd6 !important; background-image: none !important; box-shadow: none !important; transform: none !important;
  border-radius: 6px !important; padding: 10px 22px !important; font-weight: 600 !important; font-size: 14px !important;
}
html body .btn-hero-watch:hover { background: #8d70e6 !important; transform: none !important; box-shadow: none !important; }
html body .btn-hero-restart, html body .btn-hero-switch-subdub, html body .btn-hero-share {
  background: transparent !important; border: 1px solid #3a3948 !important; border-radius: 6px !important;
  padding: 9px 14px !important; font-weight: 500 !important; font-size: 13px !important; color: #cfcde0 !important;
}
html body .btn-hero-restart:hover, html body .btn-hero-switch-subdub:hover, html body .btn-hero-share:hover { background: #24232e !important; border-color: #55536a !important; color: #fff !important; }

/* ---------- details table ---------- */
html body .anime-spec-box { background: #1b1a23 !important; border: 1px solid #2a2935 !important; border-radius: 8px !important; padding: 6px 22px 14px !important; margin-bottom: 14px !important; }
html body .anime-spec-title { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #e6e5ec !important; padding: 14px 0 6px !important; margin: 0 !important; }
html body .anime-spec-title i { display: none !important; }
html body .anime-spec-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 44px !important; }
html body .anime-spec-item { flex-direction: row !important; align-items: baseline !important; justify-content: flex-start !important; gap: 14px !important; padding: 9px 0 !important; border-bottom: 1px solid #272631 !important; font-size: 13.5px !important; }
html body .anime-spec-label { flex: 0 0 118px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 400 !important; color: #8f8da0 !important; }
html body .anime-spec-value { color: #e6e5ec !important; font-weight: 400 !important; }
html body .anime-spec-value a { color: #b6a7f5 !important; }
html body .anime-tags-wrap { border-top: 0 !important; margin-top: 10px !important; padding-top: 4px !important; }
html body .anime-tags-list { gap: 4px 12px !important; }
html body .anime-tag-badge { background: none !important; border: 0 !important; padding: 0 !important; font-size: 12.5px !important; color: #8f8da0 !important; }
html body .anime-tag-badge:hover { background: none !important; color: #cfcde0 !important; text-decoration: underline; }

/* ---------- episodes ---------- */
html body .releases { border-bottom: 1px solid #272631 !important; }
html body .ep-count-pill { background: none !important; color: #8f8da0 !important; font-size: 13px !important; font-weight: 400 !important; padding: 0 !important; border-radius: 0 !important; }
html body .ep-count-pill i { display: none !important; }

html body .ep-range-tabs { display: flex !important; flex-wrap: wrap !important; gap: 2px 18px !important; padding: 2px 16px 10px !important; border-bottom: 1px solid #272631 !important; margin-bottom: 6px !important; }
html body .ep-range-tab { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 6px 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #8f8da0 !important; box-shadow: none !important; }
html body .ep-range-tab:hover { color: #e6e5ec !important; background: none !important; }
html body .ep-range-tab.active { color: #fff !important; border-bottom-color: #7c5cd6 !important; background: none !important; box-shadow: none !important; }

html body #epSearchInput, html body #epJumpSelect { background: #14131a !important; border: 1px solid #2f2e3b !important; border-radius: 6px !important; }

html body #episodesList { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important; gap: 6px !important; }
html body #episodesList .item.ep-item {
  height: 36px !important; line-height: 36px !important; border-radius: 4px !important;
  background: #23222d !important; border: 1px solid #2f2e3b !important; color: #cfcde0 !important;
  font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important;
}
html body #episodesList .item.ep-item:hover { background: #2c2b38 !important; border-color: #55536a !important; color: #fff !important; box-shadow: none !important; }
html body #episodesList .item.ep-item.active { background: #7c5cd6 !important; border-color: #7c5cd6 !important; color: #fff !important; box-shadow: none !important; }
html body #episodesList .item.ep-item.watched { color: #7a7890 !important; }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  html body .anime-hero-backdrop-header { height: 130px !important; }
  html body .anime-hero-content { gap: 14px !important; padding: 0 16px 20px !important; margin-top: -54px !important; }
  html body .anime-hero-poster { flex-basis: 130px !important; max-width: 130px !important; }
  html body .anime-hero-title { font-size: 22px !important; }
  html body .anime-hero-badges { justify-content: center !important; }
  html body .anime-spec-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .anime-spec-label { flex-basis: 104px !important; }
  html body #episodesList { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; }
}