:root {
  --otaku-bg: #0b0f15;
  --otaku-bg-soft: #101722;
  --otaku-panel: #151e2a;
  --otaku-panel-2: #1a2533;
  --otaku-panel-3: #202d3e;
  --otaku-border: rgba(132, 176, 228, 0.14);
  --otaku-border-strong: rgba(58, 169, 255, 0.32);
  --otaku-blue: #249dff;
  --otaku-blue-2: #3bb7ff;
  --otaku-blue-deep: #0b78dc;
  --otaku-blue-soft: rgba(36, 157, 255, 0.14);
  --otaku-text: #f3f7fb;
  --otaku-muted: #98a9bc;
  --otaku-muted-2: #6f8297;
  --otaku-danger: #ff6b7d;
  --otaku-radius: 14px;
  --otaku-radius-sm: 10px;
  --otaku-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  --otaku-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--otaku-bg); }
body {
  margin: 0 !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(36,157,255,.08), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(31,115,214,.07), transparent 28%),
    var(--otaku-bg) !important;
  color: var(--otaku-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body::before { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--otaku-blue-2); }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  color: var(--otaku-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.02em;
}
p { color: #c7d3df; }
::selection { background: var(--otaku-blue); color: #fff; }

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

.otaku-site { min-height: 100vh; }
.otaku-container {
  width: min(calc(100% - 32px), var(--otaku-container));
  margin-inline: auto;
}
.otaku-narrow-container { max-width: 900px; }

/* top utility bar */
.otaku-topbar {
  background: #080b10;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--otaku-muted);
  font-size: 12px;
}
.otaku-topbar-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.otaku-utility-menu,
.otaku-utility-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.otaku-utility-menu a {
  color: #a7b5c4;
  font-weight: 650;
  transition: color .2s ease;
}
.otaku-utility-menu a:hover { color: var(--otaku-blue-2); }
.otaku-topbar-note {
  color: #6f8297;
  white-space: nowrap;
}

/* branding */
.otaku-header {
  background: linear-gradient(180deg, #161c25 0%, #141a22 100%);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.otaku-header-inner {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 520px);
  align-items: center;
  gap: 36px;
}
.otaku-branding { min-width: 0; }
.otaku-logo img,
.custom-logo {
  display: block;
  max-width: 220px !important;
  max-height: 78px !important;
  width: auto !important;
  height: auto !important;
}
.otaku-text-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.otaku-logo-main {
  color: #fff;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -.055em;
}
.otaku-logo-main::after {
  content: ".";
  color: var(--otaku-blue-2);
}
.otaku-logo-sub {
  margin-top: 8px;
  color: #7f94aa;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* search */
.otaku-search-form { margin: 0; width: 100%; }
.otaku-search-control {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(121,163,210,.16);
  background: #0d131b;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.otaku-search-control:focus-within {
  border-color: rgba(36,157,255,.6);
  box-shadow: 0 0 0 4px rgba(36,157,255,.1);
}
.otaku-search-form input[type="search"] {
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #eaf3fb !important;
  font-size: 14px;
  padding: 0 58px 0 16px !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.otaku-search-form input::placeholder { color: #65778b; }
.otaku-search-form .search-submit {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--otaku-blue), var(--otaku-blue-deep)) !important;
  box-shadow: 0 6px 18px rgba(25,129,223,.22);
  transition: transform .18s ease, filter .18s ease;
}
.otaku-search-form .search-submit:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* main navigation */
.otaku-nav {
  position: relative;
  z-index: 90;
  background: #0d1118;
  border-bottom: 3px solid var(--otaku-blue);
  box-shadow: 0 7px 22px rgba(0,0,0,.18);
}
.otaku-nav-inner { min-height: 54px; display: flex; align-items: stretch; }
.otaku-menu-wrap { display: flex; align-items: stretch; width: 100%; }
.otaku-primary-menu,
.otaku-primary-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.otaku-primary-menu {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.otaku-primary-menu > li { position: relative; display: flex; }
.otaku-primary-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  color: #dde7f0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}
.otaku-primary-menu > li > a:hover,
.otaku-primary-menu > .current-menu-item > a,
.otaku-primary-menu > .current_page_item > a {
  color: #fff;
  background: linear-gradient(180deg, rgba(36,157,255,.18), rgba(36,157,255,.06));
}
.otaku-primary-menu > li > a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--otaku-blue-2);
  opacity: 0;
  transform: scaleX(.4);
  transition: .2s ease;
}
.otaku-primary-menu > li:hover > a::after,
.otaku-primary-menu > .current-menu-item > a::after { opacity: 1; transform: scaleX(1); }
.otaku-primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  background: #121923;
  border: 1px solid var(--otaku-border);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--otaku-shadow);
  transition: .18s ease;
}
.otaku-primary-menu li:hover > .sub-menu,
.otaku-primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.otaku-primary-menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #b8c5d2;
  font-size: 13px;
  font-weight: 650;
}
.otaku-primary-menu .sub-menu a:hover { background: var(--otaku-blue-soft); color: #fff; }
.otaku-menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}
.otaku-menu-icon { width: 22px; display: grid; gap: 4px; }
.otaku-menu-icon span { display: block; height: 2px; border-radius: 2px; background: var(--otaku-blue-2); }

/* content */
.otaku-main { padding: 28px 0 56px; }
.otaku-announcement {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 26px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(34,126,230,.18), rgba(36,157,255,.08));
  border: 1px solid rgba(61,170,255,.23);
  border-radius: 12px;
  color: #cfe6fa;
  box-shadow: inset 3px 0 0 var(--otaku-blue);
}
.otaku-announcement strong { color: #fff; margin-right: 8px; }
.otaku-announcement span:not(.otaku-announcement-dot) { color: #a9bfd1; font-size: 13px; }
.otaku-announcement-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--otaku-blue-2);
  box-shadow: 0 0 0 5px rgba(59,183,255,.10), 0 0 18px rgba(59,183,255,.45);
}
.otaku-content-layout,
.otaku-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
.otaku-content-column,
.otaku-single-content { min-width: 0; }
.otaku-section-spaced { margin-top: 38px; }
.otaku-section-heading {
  min-height: 50px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px 0 16px;
  background: linear-gradient(180deg, #171f29, #121923);
  border: 1px solid var(--otaku-border);
  border-left: 4px solid var(--otaku-blue);
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(0,0,0,.12);
}
.otaku-section-heading-copy { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.otaku-section-heading h2 { margin: 0; color: #fff !important; font-size: 16px; font-weight: 850; text-transform: uppercase; letter-spacing: .025em; }
.otaku-section-heading p { margin: 0; color: #708499; font-size: 11px; }
.otaku-section-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(74,181,255,.20);
  border-radius: 8px;
  background: rgba(36,157,255,.10);
  color: #bde4ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: .18s ease;
}
.otaku-section-button:hover { color: #fff; background: rgba(36,157,255,.18); border-color: rgba(74,181,255,.42); transform: translateY(-1px); }

/* cards */
.otaku-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.otaku-anime-card {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #161f2a, #121923);
  border: 1px solid rgba(134,173,214,.12);
  border-radius: 11px;
  box-shadow: 0 9px 25px rgba(0,0,0,.15);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.otaku-anime-card:hover {
  transform: translateY(-4px);
  border-color: rgba(58,169,255,.42);
  box-shadow: 0 14px 34px rgba(0,0,0,.25), 0 0 0 1px rgba(36,157,255,.05);
}
.otaku-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0b1118;
}
.otaku-card-media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(5,9,14,.82));
  opacity: .6;
  pointer-events: none;
}
.otaku-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .32s ease, filter .32s ease;
}
.otaku-anime-card:hover .otaku-card-media img { transform: scale(1.035); filter: saturate(1.07); }
.otaku-card-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    linear-gradient(145deg, rgba(36,157,255,.16), transparent 52%),
    #101822;
  color: #5f7790;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.otaku-episode-badge,
.otaku-status-badge,
.otaku-score-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 7px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(0,0,0,.18);
}
.otaku-episode-badge { top: 8px; left: 8px; background: rgba(20,128,224,.92); color: #fff; }
.otaku-score-badge { top: 8px; right: 8px; background: rgba(10,16,23,.83); color: #ffd369; border: 1px solid rgba(255,255,255,.10); }
.otaku-status-badge { bottom: 8px; left: 8px; background: rgba(11,16,23,.82); color: #dbeaf6; border: 1px solid rgba(255,255,255,.08); }
.otaku-status-badge.is-completed { color: #bfe9ff; background: rgba(19,101,168,.82); }
.otaku-card-body { padding: 11px 11px 12px; }
.otaku-card-title {
  margin: 0;
  min-height: 39px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #f2f7fb !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.otaku-card-title a:hover { color: var(--otaku-blue-2); }
.otaku-card-meta {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(130,169,207,.10);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #71869a;
  font-size: 10px;
  font-weight: 650;
}
.otaku-card-meta span:last-child { color: #91a6bb; }

/* sidebar */
.otaku-sidebar { display: grid; gap: 18px; min-width: 0; }
.otaku-widget {
  overflow: hidden;
  padding: 14px;
  background: linear-gradient(180deg, #151e29, #111923);
  border: 1px solid var(--otaku-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.13);
}
.otaku-widget-title {
  position: relative;
  margin: -14px -14px 14px;
  padding: 12px 14px 12px 18px;
  background: #111821;
  border-bottom: 1px solid rgba(125,170,216,.11);
  color: #fff !important;
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.otaku-widget-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--otaku-blue);
}
.otaku-search-widget .otaku-search-control { background: #0b1118; }
.otaku-genre-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.otaku-genre-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(113,154,197,.055);
  color: #aebdcc;
  font-size: 11px;
  font-weight: 650;
  transition: .18s ease;
}
.otaku-genre-list a:hover { background: var(--otaku-blue-soft); color: #fff; transform: translateX(2px); }
.otaku-genre-list a span { color: #647b92; font-size: 9px; }
.otaku-muted { margin: 0; color: var(--otaku-muted-2); font-size: 12px; }
.otaku-mini-list { display: grid; gap: 8px; }
.otaku-mini-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px;
  margin-inline: -5px;
  border-radius: 9px;
  transition: background .18s ease;
}
.otaku-mini-item:hover { background: rgba(36,157,255,.08); }
.otaku-mini-thumb { width: 48px; height: 58px; overflow: hidden; border-radius: 7px; background: #0b1118; }
.otaku-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.otaku-thumb-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(145deg, #16283a, #0e151e); }
.otaku-mini-copy { min-width: 0; }
.otaku-mini-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #dbe5ee;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
.otaku-mini-copy small { display: block; margin-top: 4px; color: var(--otaku-blue-2); font-size: 9px; }

/* archive headings */
.otaku-page-heading {
  margin-bottom: 20px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(36,157,255,.12), rgba(21,30,42,.8) 48%, #121923);
  border: 1px solid var(--otaku-border);
  border-radius: 13px;
  box-shadow: inset 3px 0 0 var(--otaku-blue), 0 10px 25px rgba(0,0,0,.12);
}
.otaku-page-heading h1 { margin: 2px 0 0; color: #fff !important; font-size: clamp(23px, 3vw, 34px); font-weight: 850; line-height: 1.2; }
.otaku-eyebrow { color: var(--otaku-blue-2); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.otaku-archive-description { margin-top: 9px; color: #8ea2b6; font-size: 13px; }
.otaku-archive-description p { margin: 0; color: inherit; }
.otaku-pagination { margin-top: 26px; }
.otaku-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 7px; }
.otaku-pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid var(--otaku-border);
  border-radius: 8px;
  background: #141d28;
  color: #a7b7c7;
  font-size: 12px;
  font-weight: 750;
}
.otaku-pagination .page-numbers:hover,
.otaku-pagination .page-numbers.current { background: var(--otaku-blue); border-color: var(--otaku-blue); color: #fff; }

/* single */
.otaku-breadcrumbs {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #687e93;
  font-size: 11px;
}
.otaku-breadcrumbs a { color: #a7b9ca; }
.otaku-breadcrumbs a:hover { color: var(--otaku-blue-2); }
.otaku-anime-hero {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 26px;
  margin-bottom: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 80% 20%, rgba(36,157,255,.12), transparent 34%),
    linear-gradient(135deg, #151e29, #111923);
  border: 1px solid var(--otaku-border);
  border-radius: 16px;
  box-shadow: var(--otaku-shadow);
}
.otaku-anime-poster {
  overflow: hidden;
  min-height: 320px;
  border-radius: 12px;
  background: #0b1118;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.otaku-anime-poster img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.otaku-poster-placeholder { min-height: 320px; display: grid; place-items: center; color: #61778d; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.otaku-anime-info { padding: 6px 6px 6px 0; }
.otaku-anime-info h1 { margin: 4px 0 4px; font-size: clamp(26px, 4vw, 42px); font-weight: 900; line-height: 1.12; }
.otaku-alt-title { margin: 0 0 12px; color: #8398ad; font-size: 13px; }
.otaku-hero-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.otaku-hero-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(113,164,211,.16);
  border-radius: 7px;
  background: rgba(11,17,24,.62);
  color: #b7c8d8;
  font-size: 10px;
  font-weight: 750;
}
.otaku-hero-badges .otaku-score { color: #ffd66b; }
.otaku-meta-list { margin: 0 0 18px; display: grid; gap: 1px; }
.otaku-meta-row { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(135,173,210,.11); }
.otaku-meta-row dt { margin: 0; color: #70869c; font-size: 11px; font-weight: 700; }
.otaku-meta-row dd { margin: 0; color: #c7d4df; font-size: 11px; font-weight: 600; }
.otaku-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(100,195,255,.28);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--otaku-blue), #137ddf);
  color: #fff !important;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 9px 24px rgba(21,126,220,.22);
  transition: .18s ease;
}
.otaku-primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 13px 30px rgba(21,126,220,.28); }
.otaku-content-card {
  overflow: hidden;
  background: #131c27;
  border: 1px solid var(--otaku-border);
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.otaku-content-title { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #101721; border-bottom: 1px solid var(--otaku-border); }
.otaku-content-title span { width: 4px; height: 20px; border-radius: 4px; background: var(--otaku-blue); }
.otaku-content-title h2 { margin: 0; font-size: 14px; font-weight: 850; }
.otaku-prose { padding: 18px 18px 22px; color: #bdcbd7; }
.otaku-prose > :first-child { margin-top: 0; }
.otaku-prose > :last-child { margin-bottom: 0; }
.otaku-prose p,
.otaku-prose li { color: #bdcbd7; }
.otaku-prose h2,
.otaku-prose h3,
.otaku-prose h4 { margin-top: 1.5em; color: #f4f8fb !important; }
.otaku-prose a { color: var(--otaku-blue-2); text-decoration: underline; text-decoration-color: rgba(59,183,255,.25); text-underline-offset: 3px; }
.otaku-prose iframe,
.otaku-prose video,
.otaku-prose embed,
.otaku-prose object { max-width: 100%; border-radius: 10px; }
.otaku-prose iframe { width: 100%; aspect-ratio: 16/9; height: auto; background: #05080c; }
.otaku-prose .wp-block-button__link,
.otaku-prose button,
.otaku-prose input[type="submit"] { border-radius: 9px !important; background: var(--otaku-blue) !important; color: #fff !important; }
.otaku-post-taxonomy { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.otaku-post-taxonomy a { padding: 6px 9px; border-radius: 7px; background: rgba(36,157,255,.09); border: 1px solid rgba(36,157,255,.14); color: #9dd8ff; font-size: 10px; font-weight: 700; }
.otaku-post-navigation { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.otaku-post-navigation > div:last-child { text-align: right; }
.otaku-post-navigation a { display: inline-block; padding: 9px 12px; border-radius: 8px; background: #141e29; border: 1px solid var(--otaku-border); color: #b8c8d7; font-size: 11px; font-weight: 700; }
.otaku-post-navigation a:hover { border-color: var(--otaku-border-strong); color: #fff; background: var(--otaku-blue-soft); }

/* general page and empty states */
.otaku-article { background: #131c27; border: 1px solid var(--otaku-border); border-radius: 14px; overflow: hidden; }
.otaku-article .otaku-page-heading { margin: 0; border: 0; border-bottom: 1px solid var(--otaku-border); border-radius: 0; }
.otaku-empty-state {
  padding: 44px 24px;
  text-align: center;
  background: #131c27;
  border: 1px solid var(--otaku-border);
  border-radius: 14px;
}
.otaku-empty-state h1,
.otaku-empty-state h2 { margin-bottom: 8px; }
.otaku-empty-state p { max-width: 600px; margin: 0 auto 18px; color: #7f94a9; }
.otaku-empty-state .otaku-search-form { max-width: 520px; margin: 0 auto 18px; }
.otaku-404-code { display: block; color: var(--otaku-blue); font-size: clamp(64px, 12vw, 124px); font-weight: 950; line-height: 1; letter-spacing: -.07em; }

/* comments */
.comments-area { margin-top: 22px; padding: 18px; background: #131c27; border: 1px solid var(--otaku-border); border-radius: 13px; }
.comments-area h2,
.comments-area h3 { font-size: 17px; }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  border: 1px solid var(--otaku-border) !important;
  border-radius: 8px !important;
  background: #0e151e !important;
  color: #e7f0f7 !important;
}
.comments-area input[type="submit"] { border-radius: 8px !important; background: var(--otaku-blue) !important; }

/* footer */
.otaku-footer {
  margin-top: 10px;
  padding: 32px 0 18px;
  background: #080c11;
  border-top: 1px solid rgba(111,155,199,.10);
}
.otaku-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 22px; }
.otaku-footer-title { color: #fff; font-size: 20px; font-weight: 900; letter-spacing: -.035em; }
.otaku-footer-brand p { margin: 6px 0 0; color: #687d91; font-size: 11px; }
.otaku-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 16px; }
.otaku-footer-links a { color: #8ea1b4; font-size: 11px; font-weight: 700; }
.otaku-footer-links a:hover { color: var(--otaku-blue-2); }
.otaku-footer-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #53687c;
  font-size: 10px;
}

/* remove legacy chrome when original theme styles are still loaded */
.main-home-box,
.home-content,
.home-left-sidebar,
.right-sidebar-box,
.toggle-left,
.footer-section,
#footer-2.close-sticky { all: unset; }
#preloader { display: none !important; }
.scrollup { display: none !important; }

/* Responsive */
@media (max-width: 1100px) {
  .otaku-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .otaku-content-layout,
  .otaku-single-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; }
}

@media (max-width: 900px) {
  .otaku-topbar-note { display: none; }
  .otaku-header-inner { min-height: 94px; grid-template-columns: 1fr minmax(260px, 420px); gap: 18px; }
  .otaku-menu-toggle { display: inline-flex; }
  .otaku-nav-inner { display: block; }
  .otaku-menu-wrap {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .otaku-menu-wrap.is-open { max-height: 70vh; opacity: 1; overflow-y: auto; padding-bottom: 10px; }
  .otaku-primary-menu { display: block; padding: 3px 0 7px; }
  .otaku-primary-menu > li { display: block; }
  .otaku-primary-menu > li > a { min-height: 44px; padding: 0 10px; border-radius: 8px; }
  .otaku-primary-menu > li > a::after { display: none; }
  .otaku-primary-menu .sub-menu { position: static; min-width: 0; margin-left: 12px; padding: 0 0 4px; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; }
  .otaku-content-layout,
  .otaku-single-layout { grid-template-columns: 1fr; }
  .otaku-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otaku-sidebar .otaku-search-widget { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .otaku-container { width: min(calc(100% - 22px), var(--otaku-container)); }
  .otaku-topbar { display: none; }
  .otaku-header-inner { min-height: 126px; grid-template-columns: 1fr; gap: 11px; padding-block: 16px; }
  .otaku-branding { text-align: center; }
  .otaku-text-logo { align-items: center; }
  .otaku-logo { display: flex; justify-content: center; }
  .otaku-logo img,
  .custom-logo { max-height: 58px !important; max-width: 190px !important; }
  .otaku-logo-main { font-size: 30px; }
  .otaku-header-search { width: 100%; }
  .otaku-nav { border-bottom-width: 2px; }
  .otaku-main { padding-top: 18px; }
  .otaku-announcement { align-items: flex-start; margin-bottom: 18px; }
  .otaku-announcement strong { display: block; margin: 0 0 2px; }
  .otaku-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .otaku-section-heading { min-height: 46px; padding-left: 12px; }
  .otaku-section-heading-copy { display: block; }
  .otaku-section-heading h2 { font-size: 13px; }
  .otaku-section-heading p { display: none; }
  .otaku-section-button { padding: 7px 8px; font-size: 9px; }
  .otaku-card-body { padding: 9px; }
  .otaku-card-title { min-height: 36px; font-size: 12px; }
  .otaku-card-meta { font-size: 9px; }
  .otaku-anime-hero { grid-template-columns: 145px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .otaku-anime-poster,
  .otaku-anime-poster img,
  .otaku-poster-placeholder { min-height: 210px; }
  .otaku-anime-info h1 { font-size: 25px; }
  .otaku-meta-row { grid-template-columns: 100px minmax(0,1fr); }
  .otaku-sidebar { grid-template-columns: 1fr; }
  .otaku-sidebar .otaku-search-widget { grid-column: auto; }
  .otaku-footer-grid,
  .otaku-footer-bottom { display: block; text-align: center; }
  .otaku-footer-links { justify-content: center; margin-top: 14px; }
  .otaku-footer-bottom span { display: block; }
  .otaku-footer-bottom span + span { margin-top: 5px; }
}

@media (max-width: 520px) {
  body { font-size: 14px; }
  .otaku-search-form input[type="search"] { height: 44px; font-size: 13px; }
  .otaku-search-form .search-submit { width: 36px; height: 36px; }
  .otaku-menu-toggle { min-height: 48px; }
  .otaku-announcement { padding: 9px 11px; }
  .otaku-announcement span:not(.otaku-announcement-dot) { font-size: 11px; }
  .otaku-card-media { aspect-ratio: 3 / 4.15; }
  .otaku-episode-badge,
  .otaku-status-badge,
  .otaku-score-badge { min-height: 22px; padding: 3px 6px; border-radius: 6px; font-size: 8px; }
  .otaku-score-badge { top: 6px; right: 6px; }
  .otaku-episode-badge { top: 6px; left: 6px; }
  .otaku-status-badge { bottom: 6px; left: 6px; }
  .otaku-card-title { font-size: 11px; line-height: 1.35; }
  .otaku-card-meta { display: grid; gap: 2px; }
  .otaku-section-spaced { margin-top: 28px; }
  .otaku-anime-hero { grid-template-columns: 1fr; }
  .otaku-anime-poster { width: min(210px, 72%); margin: 0 auto; }
  .otaku-anime-info { padding: 0; text-align: left; }
  .otaku-meta-row { grid-template-columns: 92px minmax(0,1fr); gap: 8px; }
  .otaku-post-navigation { grid-template-columns: 1fr; }
  .otaku-post-navigation > div:last-child { text-align: left; }
  .otaku-prose { padding: 15px; }
}

/* ========================================================================
   Otaku Blue v2 — editorial pass
   Visual goal: compact anime portal, flat surfaces, restrained blue accents.
   ======================================================================== */
:root {
  --otaku-bg: #0c0f13;
  --otaku-bg-soft: #11151a;
  --otaku-panel: #151a20;
  --otaku-panel-2: #181e25;
  --otaku-panel-3: #1d242c;
  --otaku-border: #252c34;
  --otaku-border-strong: #34485d;
  --otaku-blue: #2387d9;
  --otaku-blue-2: #4ba3e6;
  --otaku-blue-deep: #176cae;
  --otaku-blue-soft: #12283a;
  --otaku-text: #edf1f5;
  --otaku-muted: #9aa6b2;
  --otaku-muted-2: #707b86;
  --otaku-radius: 6px;
  --otaku-radius-sm: 4px;
  --otaku-shadow: 0 6px 18px rgba(0,0,0,.18);
  --otaku-container: 1160px;
}

body {
  background: var(--otaku-bg) !important;
  color: var(--otaku-text) !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}

h1,h2,h3,h4,h5,h6,
.otaku-primary-menu > li > a,
.otaku-widget-title,
.otaku-section-heading h2,
.otaku-footer-title {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
}

p { color: #bdc6cf; }

/* Header: flat, compact, portal-like. */
.otaku-topbar {
  background: #080a0d;
  border-color: #171c21;
}
.otaku-topbar-inner { min-height: 33px; }
.otaku-utility-menu a { font-weight: 500; }
.otaku-header {
  background: #13171c;
  border-bottom: 1px solid #232930;
}
.otaku-header-inner {
  min-height: 96px;
  grid-template-columns: minmax(220px,1fr) minmax(280px,470px);
  gap: 34px;
}
.otaku-logo-main {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}
.otaku-logo-sub {
  margin-top: 5px;
  color: #7d8894;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

/* Search: no floating gradient button. */
.otaku-search-control {
  border-color: #303841;
  background: #0c0f13;
  border-radius: 4px;
  box-shadow: none;
}
.otaku-search-control:focus-within {
  border-color: var(--otaku-blue);
  box-shadow: 0 0 0 2px rgba(35,135,217,.13);
}
.otaku-search-form input[type="search"] { height: 44px; font-weight: 400; }
.otaku-search-form .search-submit {
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-left: 1px solid #303841 !important;
  border-radius: 0;
  background: #1e75b9 !important;
  box-shadow: none;
  transition: background .15s ease;
}
.otaku-search-form .search-submit:hover { transform: none; filter: none; background: #2387d9 !important; }

/* Navigation: closer to a real content portal. */
.otaku-nav {
  background: #101419;
  border-bottom: 2px solid var(--otaku-blue);
  box-shadow: none;
}
.otaku-nav-inner { min-height: 46px; }
.otaku-primary-menu > li > a {
  min-height: 46px;
  padding: 0 16px;
  color: #d6dde4;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
}
.otaku-primary-menu > li > a:hover,
.otaku-primary-menu > .current-menu-item > a,
.otaku-primary-menu > .current_page_item > a {
  color: #fff;
  background: #19212a;
}
.otaku-primary-menu > li > a::after { display: none; }
.otaku-primary-menu .sub-menu {
  padding: 5px;
  background: #14191f;
  border-color: #29313a;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.otaku-primary-menu .sub-menu a { border-radius: 3px; font-weight: 500; }
.otaku-primary-menu .sub-menu a:hover { background: #1b2732; }

/* Content rhythm. */
.otaku-main { padding: 22px 0 48px; }
.otaku-announcement {
  min-height: 44px;
  margin-bottom: 22px;
  padding: 9px 13px;
  background: #101820;
  border: 1px solid #263747;
  border-left: 3px solid var(--otaku-blue);
  border-radius: 3px;
  box-shadow: none;
}
.otaku-announcement-dot {
  width: 6px;
  height: 6px;
  background: #4ba3e6;
  box-shadow: none;
}
.otaku-announcement strong { font-weight: 600; }
.otaku-announcement span:not(.otaku-announcement-dot) { color: #9eacb9; }

.otaku-content-layout,
.otaku-single-layout { gap: 24px; grid-template-columns: minmax(0,1fr) 270px; }
.otaku-section-spaced { margin-top: 32px; }

/* Section headers: plain title strip, no SaaS panel look. */
.otaku-section-heading {
  min-height: 42px;
  margin-bottom: 12px;
  padding: 0 0 0 11px;
  background: #14191f;
  border: 0;
  border-left: 3px solid var(--otaku-blue);
  border-bottom: 1px solid #2a3138;
  border-radius: 0;
  box-shadow: none;
}
.otaku-section-heading-copy { gap: 10px; }
.otaku-section-heading h2 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.otaku-section-heading p { color: #7d8893; font-size: 11px; }
.otaku-section-button {
  align-self: stretch;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid #29313a;
  border-radius: 0;
  background: transparent;
  color: #8ebde1;
  font-size: 10px;
  font-weight: 600;
}
.otaku-section-button:hover { transform: none; background: #18222b; color: #fff; }

/* Anime cards: poster-first; less container chrome. */
.otaku-card-grid { gap: 12px; }
.otaku-anime-card {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.otaku-anime-card:hover { transform: none; border-color: transparent; box-shadow: none; }
.otaku-card-media {
  aspect-ratio: 3/4.15;
  border: 1px solid #252d35;
  border-radius: 4px;
  background: #11161b;
}
.otaku-card-media::after { display: none; }
.otaku-card-media img { transition: opacity .15s ease; }
.otaku-anime-card:hover .otaku-card-media img { transform: none; filter: none; opacity: .9; }
.otaku-card-placeholder {
  background: #121820;
  color: #6f7d8a;
  letter-spacing: .05em;
}
.otaku-episode-badge,
.otaku-status-badge,
.otaku-score-badge {
  min-height: 22px;
  padding: 3px 6px;
  border-radius: 2px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;
  box-shadow: none;
}
.otaku-episode-badge { top: 7px; left: 7px; background: #1978bd; }
.otaku-score-badge { top: 7px; right: 7px; background: #11161bd9; color: #f2ce72; border: 1px solid #30363c; }
.otaku-status-badge { bottom: 7px; left: 7px; background: #11161bd9; color: #d7dfe6; border: 1px solid #30363c; }
.otaku-status-badge.is-completed { color: #dceeff; background: #175a89e8; }
.otaku-card-body { padding: 8px 1px 2px; }
.otaku-card-title {
  min-height: 36px;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0;
}
.otaku-card-meta {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
  color: #747f8a;
  font-size: 9px;
  font-weight: 400;
}

/* Sidebar: compact modules, not glass cards. */
.otaku-sidebar { gap: 14px; }
.otaku-widget {
  padding: 12px;
  background: #13181e;
  border-color: #252c34;
  border-radius: 4px;
  box-shadow: none;
}
.otaku-widget-title {
  margin: -12px -12px 12px;
  padding: 9px 11px;
  background: #171d23;
  border-bottom-color: #2a323a;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .025em;
}
.otaku-widget-title::before { width: 3px; }
.otaku-genre-list { gap: 4px; }
.otaku-genre-list a {
  padding: 6px 7px;
  border-radius: 2px;
  background: #171d23;
  font-size: 10px;
  font-weight: 500;
}
.otaku-genre-list a:hover { transform: none; background: #1c2b38; }
.otaku-mini-list { gap: 6px; }
.otaku-mini-item { padding: 5px; margin-inline: -4px; border-radius: 2px; }
.otaku-mini-item:hover { background: #18232d; }
.otaku-mini-thumb { width: 45px; height: 58px; border-radius: 2px; }
.otaku-thumb-placeholder { background: #1a222a; }
.otaku-mini-copy strong { font-size: 10.5px; font-weight: 600; }

/* Archive / single: keep hierarchy clean. */
.otaku-page-heading {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: #13191f;
  border-color: #28313a;
  border-left: 3px solid var(--otaku-blue);
  border-radius: 3px;
  box-shadow: none;
}
.otaku-page-heading h1 { font-size: clamp(25px,3vw,34px); font-weight: 600; letter-spacing: 0; }
.otaku-eyebrow { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; }
.otaku-pagination .page-numbers {
  border-radius: 3px;
  background: #151b21;
  font-weight: 500;
}

.otaku-anime-hero {
  gap: 22px;
  padding: 15px;
  background: #13191f;
  border-color: #283039;
  border-radius: 4px;
  box-shadow: none;
}
.otaku-anime-poster { border-radius: 3px; box-shadow: none; border: 1px solid #2a323b; }
.otaku-anime-info h1 { font-size: clamp(29px,4vw,41px); font-weight: 600; letter-spacing: 0; }
.otaku-hero-badges span { border-radius: 2px; background: #171d23; font-weight: 500; }
.otaku-meta-row { border-bottom-style: solid; }
.otaku-primary-button {
  border-color: #2c8bd3;
  border-radius: 3px;
  background: #1f82cc;
  font-weight: 600;
  box-shadow: none;
}
.otaku-primary-button:hover { transform: none; filter: none; box-shadow: none; background: #2894e3; }
.otaku-content-card,
.otaku-article,
.otaku-empty-state,
.comments-area {
  background: #13191f;
  border-color: #29313a;
  border-radius: 4px;
  box-shadow: none;
}
.otaku-content-title { background: #171d23; }
.otaku-content-title span { width: 3px; border-radius: 0; }
.otaku-content-title h2 { font-size: 17px; font-weight: 600; }
.otaku-prose .wp-block-button__link,
.otaku-prose button,
.otaku-prose input[type="submit"] { border-radius: 3px !important; }
.otaku-post-taxonomy a,
.otaku-post-navigation a { border-radius: 3px; }

/* Footer. */
.otaku-footer { background: #090c10; border-top-color: #20262c; }
.otaku-footer-title { font-size: 23px; font-weight: 600; letter-spacing: 0; }

/* Mobile refinements. */
@media (max-width: 900px) {
  .otaku-primary-menu > li > a { border-radius: 0; }
}
@media (max-width: 720px) {
  .otaku-header-inner { min-height: 116px; }
  .otaku-logo-main { font-size: 32px; }
  .otaku-section-heading { padding-left: 9px; }
  .otaku-section-heading h2 { font-size: 16px; }
  .otaku-card-grid { gap: 9px 8px; }
  .otaku-card-title { font-size: 11.5px; }
}
@media (max-width: 520px) {
  .otaku-container { width: calc(100% - 18px); }
  .otaku-main { padding-top: 14px; }
  .otaku-announcement { border-radius: 2px; }
  .otaku-card-media { border-radius: 3px; }
  .otaku-card-body { padding-top: 6px; }
  .otaku-card-meta { font-size: 8.5px; }
}

/* ========================================================================
   Otaku Blue Final V3 — content architecture + responsive device pass
   ======================================================================== */

/* Weekly schedule: intentionally flat and editorial. */
.otaku-schedule {
  margin: 0 0 24px;
  background: #11161b;
  border: 1px solid #252d35;
  border-top: 3px solid var(--otaku-blue);
}
.otaku-schedule-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid #252d35;
}
.otaku-kicker {
  display: block;
  margin-bottom: 2px;
  color: #6f94b3;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.otaku-schedule-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
}
.otaku-schedule-note {
  color: #7e8994;
  font-size: 11px;
}
.otaku-day-tabs {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  border-bottom: 1px solid #252d35;
  background: #0e1216;
}
.otaku-day-tab {
  min-width: 0;
  min-height: 40px;
  padding: 7px 6px;
  border: 0;
  border-right: 1px solid #252d35;
  border-radius: 0;
  background: transparent;
  color: #a9b3bc;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.otaku-day-tab:last-child { border-right: 0; }
.otaku-day-tab:hover { background: #171d23; color: #fff; }
.otaku-day-tab.is-active { background: #1b6fae; color: #fff; }
.otaku-day-tab span {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 9px;
}
.otaku-schedule-panel { padding: 4px 12px 10px; }
.otaku-schedule-panel[hidden] { display: none !important; }
.otaku-schedule-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
.otaku-schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid #232a31;
}
.otaku-schedule-title {
  min-width: 0;
  overflow: hidden;
  color: #dfe6ec;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.otaku-schedule-episode { flex: 0 0 auto; color: #6e9fc6; font-size: 10px; }
.otaku-schedule-empty { margin: 10px 0 2px; color: #7f8993; font-size: 12px; }

/* Anime list archive filters. */
.otaku-archive-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.otaku-archive-tabs a {
  padding: 6px 10px;
  border: 1px solid #303841;
  border-radius: 3px;
  background: #101419;
  color: #aab4bd;
  font-size: 11px;
  font-weight: 600;
}
.otaku-archive-tabs a:hover,
.otaku-archive-tabs a.is-active { border-color: #2387d9; background: #1d6fae; color: #fff; }

/* Series page: inspired by classic anime portals, not a SaaS landing page. */
.otaku-series-layout { align-items: start; }
.otaku-series-page { min-width: 0; }
.otaku-series-titlebar {
  margin-bottom: 12px;
  padding: 11px 14px;
  border-left: 4px solid var(--otaku-blue);
  background: #151a20;
  border-bottom: 1px solid #29313a;
}
.otaku-series-titlebar h1 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: clamp(19px,2.6vw,27px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.01em;
}
.otaku-series-block,
.otaku-list-section {
  margin-bottom: 16px;
  border: 1px solid #29313a;
  background: #11161b;
}
.otaku-classic-heading {
  padding: 9px 12px;
  border-bottom: 1px solid #29313a;
  background: #171d23;
}
.otaku-classic-heading h2 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}
.otaku-series-info-grid {
  display: grid;
  grid-template-columns: 205px minmax(0,1fr);
  gap: 18px;
  padding: 15px;
}
.otaku-series-poster img,
.otaku-series-poster .otaku-poster-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3/4.2;
  object-fit: cover;
  border: 1px solid #2d353d;
  border-radius: 2px;
  background: #0f1419;
}
.otaku-series-facts dl { margin: 0; }
.otaku-series-facts dl > div {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted #303841;
  font-size: 12px;
}
.otaku-series-facts dt { color: #81909e; font-weight: 500; }
.otaku-series-facts dd { margin: 0; color: #d7dfe6; font-weight: 500; overflow-wrap: anywhere; }
.otaku-series-facts dd a { color: #5ea8df; }
.otaku-series-facts dd a:hover { text-decoration: underline; }
.otaku-series-synopsis {
  padding: 0 15px 15px;
  border-top: 1px solid #232a31;
}
.otaku-series-synopsis > *:first-child { margin-top: 13px; }

/* Episode/batch list like a compact real portal list. */
.otaku-classic-list { padding: 0 12px 6px; }
.otaku-classic-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 39px;
  border-bottom: 1px solid #242b32;
  color: #d5dde4;
}
.otaku-classic-row:hover { color: #5da9e2; }
.otaku-classic-row.is-disabled { color: #7c8791; }
.otaku-classic-row-title {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.otaku-classic-row-date { color: #77838e; font-size: 10px; white-space: nowrap; }
.otaku-classic-empty { padding: 12px 2px; color: #78838e; font-size: 12px; }
.otaku-help-box {
  display: flex;
  gap: 7px;
  margin: 16px 0;
  padding: 10px 12px;
  border-left: 3px solid #2f88cb;
  background: #111a22;
  color: #94a2ae;
  font-size: 11px;
}
.otaku-help-box strong { color: #c9d6df; }

/* Episode page. */
.otaku-episode-page-head {
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid #29313a;
  border-left: 4px solid var(--otaku-blue);
  background: #14191f;
}
.otaku-episode-page-head h1 {
  margin: 2px 0 5px;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: clamp(20px,3vw,30px);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.otaku-episode-page-head p { margin: 0; color: #87939f; font-size: 12px; }
.otaku-episode-player {
  padding: 14px;
  border: 1px solid #29313a;
  background: #10151a;
}
.otaku-episode-player iframe,
.otaku-episode-player video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  background: #000;
}
.otaku-episode-nav {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 8px;
  margin: 10px 0 16px;
}
.otaku-episode-nav > div:last-child { text-align: right; }
.otaku-episode-nav a,
.otaku-episode-series-link a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #303841;
  border-radius: 3px;
  background: #151b21;
  color: #c7d0d8;
  font-size: 10px;
  font-weight: 600;
}
.otaku-episode-nav a:hover,
.otaku-episode-series-link a:hover { border-color: #2387d9; color: #fff; background: #1b6fae; }
.otaku-episode-nav-center { text-align: center; }
.otaku-episode-series-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #29313a;
  background: #11161b;
  color: #7f8b96;
  font-size: 11px;
}

/* Device classes: UA-based initial render + JS refinement. */
body.device-desktop .otaku-card-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.device-desktop .otaku-content-layout,
body.device-desktop .otaku-single-layout { grid-template-columns: minmax(0,1fr) 270px; }

body.device-tablet .otaku-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.device-tablet .otaku-content-layout,
body.device-tablet .otaku-single-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 18px; }
body.device-tablet .otaku-header-inner { grid-template-columns: minmax(200px,1fr) minmax(260px,420px); }

/* Viewport CSS stays authoritative when browser is resized or UA is misleading. */
@media (max-width: 1024px) {
  .otaku-container { width: min(calc(100% - 24px), var(--otaku-container)); }
  .otaku-content-layout,
  .otaku-single-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 18px; }
  .otaku-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .otaku-series-info-grid { grid-template-columns: 180px minmax(0,1fr); }
  .otaku-series-facts dl > div { grid-template-columns: 105px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .otaku-content-layout,
  .otaku-single-layout,
  body.device-tablet .otaku-content-layout,
  body.device-tablet .otaku-single-layout { grid-template-columns: 1fr; }
  .otaku-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .otaku-search-widget { grid-column: 1/-1; }
  .otaku-schedule-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body.device-mobile .otaku-card-grid,
  .otaku-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .otaku-schedule-head { display: block; }
  .otaku-schedule-note { display: block; margin-top: 4px; }
  .otaku-day-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .otaku-day-tab { flex: 0 0 auto; min-width: 82px; padding-inline: 10px; }
  .otaku-series-info-grid { grid-template-columns: 150px minmax(0,1fr); gap: 13px; padding: 12px; }
  .otaku-series-facts dl > div { grid-template-columns: 88px minmax(0,1fr); gap: 7px; font-size: 11px; }
  .otaku-series-synopsis { padding: 0 12px 12px; }
  .otaku-classic-list { padding-inline: 9px; }
  .otaku-sidebar { grid-template-columns: 1fr; }
  .otaku-search-widget { grid-column: auto; }
  .otaku-episode-nav { grid-template-columns: 1fr 1fr; }
  .otaku-episode-nav-center { grid-column: 1/-1; grid-row: 2; }
}

@media (max-width: 520px) {
  .otaku-series-titlebar { padding: 9px 10px; }
  .otaku-series-titlebar h1 { font-size: 18px; }
  .otaku-classic-heading { padding: 8px 9px; }
  .otaku-classic-heading h2 { font-size: 12.5px; }
  .otaku-series-info-grid { grid-template-columns: 112px minmax(0,1fr); gap: 10px; padding: 10px; }
  .otaku-series-facts dl > div { display: block; padding: 4px 0; }
  .otaku-series-facts dt { display: inline; margin-right: 4px; }
  .otaku-series-facts dt::after { content: ":"; }
  .otaku-series-facts dd { display: inline; font-size: 10.5px; }
  .otaku-classic-row { min-height: 38px; gap: 8px; }
  .otaku-classic-row-title { font-size: 10.5px; white-space: normal; }
  .otaku-classic-row-date { font-size: 8.5px; }
  .otaku-help-box { display: block; }
  .otaku-help-box strong { display: block; margin-bottom: 2px; }
  .otaku-episode-player { padding: 8px; }
  .otaku-episode-nav { display: block; }
  .otaku-episode-nav > div { margin-bottom: 6px; text-align: left !important; }
  .otaku-episode-nav a { display: flex; width: 100%; justify-content: center; text-align: center; }
}

/* Make viewport rules authoritative even if a full-page cache served a stale UA class. */
@media (max-width: 1024px) {
  body.device-desktop .otaku-card-grid,
  body.device-tablet .otaku-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.device-desktop .otaku-content-layout,
  body.device-desktop .otaku-single-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 18px; }
}
@media (max-width: 900px) {
  body.device-desktop .otaku-content-layout,
  body.device-desktop .otaku-single-layout,
  body.device-tablet .otaku-content-layout,
  body.device-tablet .otaku-single-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.device-desktop .otaku-card-grid,
  body.device-tablet .otaku-card-grid,
  body.device-mobile .otaku-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ========================================================================
   Otaku Blue Final V4 — comment system visual integration
   Keep native WordPress comments, but make them visually consistent with
   the editorial dark/blue UI instead of the upstream theme's white cards.
   ======================================================================== */
#comments.otaku-comments,
#comments.comments-area {
  margin-top: 22px;
  padding: 18px;
  background: #13191f !important;
  border: 1px solid #29313a !important;
  border-radius: 4px !important;
  color: #d7e0e8;
}

#comments .otaku-comments-header {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #29313a;
}

#comments h2.comments-title,
#comments .comments-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 16px !important;
  line-height: 1.35;
  font-weight: 600 !important;
  color: #f3f7fb !important;
}

#comments .comment-list,
#comments ol.comment-list,
#comments ol.children {
  list-style: none;
  margin: 0;
  padding: 0;
}

#comments ol.children {
  margin: 10px 0 0 28px;
}

#comments .comment-list > li.comment,
#comments ol.children > li.comment,
#comments .comment-list > li.pingback,
#comments .comment-list > li.trackback {
  width: 100% !important;
  display: block !important;
  position: relative;
  margin: 0 0 10px !important;
  padding: 14px !important;
  overflow: hidden;
  background: #10161c !important;
  border: 1px solid #28313a !important;
  border-radius: 4px !important;
  color: #d4dde6 !important;
  box-shadow: none !important;
}

#comments ol.children > li.comment {
  background: #151c23 !important;
}

#comments .comment-body {
  min-height: 44px;
}

#comments .comment-author,
#comments .comment-metadata,
#comments .comment-meta.commentmetadata {
  float: none !important;
  width: auto !important;
  text-align: left !important;
}

#comments .comment-author {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  margin: 0;
  color: #f1f5f8;
}

#comments .comment-author .avatar {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover;
  border: 1px solid #34414d;
  border-radius: 50%;
  background: #0b1015;
}

#comments .comment-author .fn,
#comments .comment-author .fn a {
  color: #f2f6fa !important;
  font-style: normal;
  font-weight: 600;
  text-decoration: none !important;
}

#comments .comment-author .says {
  color: #778899;
  font-size: 12px;
  font-weight: 400;
}

#comments .comment-metadata,
#comments .comment-meta.commentmetadata {
  margin: 6px 0 0 54px;
  padding: 0 !important;
  color: #778899;
  font-size: 11.5px;
  line-height: 1.4;
}

#comments .comment-metadata a,
#comments .comment-meta.commentmetadata a,
#comments .comment-edit-link {
  color: #7e91a4 !important;
  text-decoration: none !important;
}

#comments .comment-metadata a:hover,
#comments .comment-meta.commentmetadata a:hover,
#comments .comment-edit-link:hover {
  color: #4aabf2 !important;
}

#comments .comment-content {
  float: none !important;
  width: auto !important;
  margin: 12px 0 0 54px !important;
  color: #c6d0da !important;
  font-size: 14px;
  line-height: 1.7;
}

#comments .comment-content p,
#comments .comment-content li,
#comments .comment-content blockquote {
  float: none !important;
  width: auto !important;
  color: #c6d0da !important;
}

#comments .comment-content p:last-child {
  margin-bottom: 0;
}

#comments .comment-content a {
  color: #49aaf0 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#comments .reply {
  float: none !important;
  margin: 12px 0 0 54px !important;
}

#comments a.comment-reply-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px !important;
  background: #1f82cc !important;
  border: 1px solid #2c8bd3 !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: none !important;
}

#comments a.comment-reply-link:hover,
#comments a.comment-reply-link:focus {
  background: #2894e3 !important;
  border-color: #3b9be4 !important;
  color: #fff !important;
}

#comments .comment-navigation,
#comments .comments-navigation {
  margin: 12px 0;
  color: #92a2b2;
  font-size: 12px;
}

#comments .comment-navigation a,
#comments .comments-navigation a {
  color: #49aaf0;
}

#comments #respond,
#comments div#respond {
  clear: both;
  margin: 18px 0 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #29313a !important;
  background: transparent !important;
}

#comments #reply-title,
#comments h2#reply-title,
#comments h3.comment-reply-title,
#comments .comment-reply-title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #f3f7fb !important;
  font-size: 16px !important;
  line-height: 1.4;
  font-weight: 600 !important;
}

#comments .comment-notes,
#comments .logged-in-as,
#comments .must-log-in,
#comments .comment-form-cookies-consent,
#comments .no-comments {
  color: #8192a3 !important;
  font-size: 12px;
}

#comments .comment-form p {
  margin-bottom: 12px;
}

#comments .comment-form label {
  display: block;
  margin: 0 0 6px;
  color: #aab7c4;
  font-size: 12px;
  font-weight: 500;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  background: #0c1218 !important;
  border: 1px solid #2b3540 !important;
  border-radius: 3px !important;
  color: #e7edf3 !important;
  font-size: 14px !important;
  line-height: 1.5;
  outline: 0;
  box-shadow: none !important;
}

#comments textarea {
  min-height: 130px;
  resize: vertical;
}

#comments input[type="text"]:focus,
#comments input[type="email"]:focus,
#comments input[type="url"]:focus,
#comments textarea:focus {
  border-color: #2b8fd7 !important;
  background: #0e151c !important;
}

#comments input[type="submit"],
#comments .form-submit input[type="submit"] {
  min-height: 36px;
  padding: 8px 15px !important;
  background: #1f82cc !important;
  border: 1px solid #2c8bd3 !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1;
  box-shadow: none !important;
}

#comments input[type="submit"]:hover,
#comments input[type="submit"]:focus {
  background: #2894e3 !important;
  border-color: #3b9be4 !important;
}

#comments .comment-awaiting-moderation {
  display: block;
  margin: 7px 0 0 54px;
  color: #d8b46d;
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 720px) {
  #comments.otaku-comments,
  #comments.comments-area {
    padding: 12px;
  }

  #comments .comment-list > li.comment,
  #comments ol.children > li.comment,
  #comments .comment-list > li.pingback,
  #comments .comment-list > li.trackback {
    padding: 12px !important;
  }

  #comments ol.children {
    margin-left: 12px;
  }

  #comments .comment-metadata,
  #comments .comment-meta.commentmetadata,
  #comments .comment-content,
  #comments .reply,
  #comments .comment-awaiting-moderation {
    margin-left: 0 !important;
  }

  #comments .comment-content {
    margin-top: 12px !important;
  }
}

/* ========================================================================
   Otaku Blue Final V5 — stable desktop navigation + advertising system
   ======================================================================== */

/*
 * Desktop navigation must stay desktop even when OS scaling / browser zoom
 * makes the CSS viewport smaller than 900px. The UA/device class is used
 * only for this navigation mode; content grids remain viewport-responsive.
 */
body.device-desktop .otaku-menu-toggle {
  display: none !important;
}
body.device-desktop .otaku-nav-inner {
  display: flex !important;
  align-items: stretch !important;
  min-height: 46px !important;
  overflow: visible !important;
}
body.device-desktop .otaku-menu-wrap,
body.device-desktop .otaku-menu-wrap.is-open {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
}
body.device-desktop .otaku-primary-menu {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}
body.device-desktop .otaku-primary-menu > li {
  position: relative !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
body.device-desktop .otaku-primary-menu > li > a {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
}
body.device-desktop .otaku-primary-menu .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Keep the desktop brand/search row tidy on zoomed desktop browsers. */
@media (max-width: 900px) {
  body.device-desktop .otaku-topbar {
    display: block !important;
  }
  body.device-desktop .otaku-topbar-inner {
    display: flex !important;
    min-height: 34px !important;
  }
  body.device-desktop .otaku-topbar-note {
    display: block !important;
  }
  body.device-desktop .otaku-header-inner {
    min-height: 92px !important;
    grid-template-columns: minmax(170px, 1fr) minmax(240px, 390px) !important;
    gap: 18px !important;
    padding-block: 12px !important;
  }
  body.device-desktop .otaku-branding {
    text-align: left !important;
  }
  body.device-desktop .otaku-text-logo {
    align-items: flex-start !important;
  }
  body.device-desktop .otaku-logo {
    justify-content: flex-start !important;
  }
  body.device-desktop .otaku-logo-main {
    font-size: clamp(26px, 4vw, 34px) !important;
  }
}

@media (max-width: 620px) {
  body.device-desktop .otaku-header-inner {
    grid-template-columns: minmax(150px, .9fr) minmax(210px, 1.1fr) !important;
    gap: 12px !important;
  }
  body.device-desktop .otaku-topbar-note {
    display: none !important;
  }
  body.device-desktop .otaku-primary-menu > li > a {
    padding-inline: 12px !important;
    font-size: 12px !important;
  }
}

/* ------------------------------------------------------------------------
   Responsive ad slots
   ------------------------------------------------------------------------ */
.aoi-ad-shell--below-nav {
  padding: 12px 0;
  background: #0b1015;
  border-bottom: 1px solid #202933;
}

.aoi-ad-slot {
  position: relative;
  width: 100%;
  min-height: 86px;
  margin: 18px 0;
  padding: 20px 16px 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #11171d;
  border: 1px dashed #35414c;
  border-radius: 3px;
  color: #8494a4;
  text-align: center;
}

.aoi-ad-shell--below-nav .aoi-ad-slot {
  margin: 0;
  min-height: 90px;
}

.aoi-ad-slot-label {
  position: absolute;
  top: 6px;
  left: 8px;
  color: #617181;
  font: 600 9px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .12em;
}

.aoi-ad-slot-content {
  width: 100%;
  max-width: 100%;
  color: #9cabb8;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.aoi-ad-slot-content > :first-child { margin-top: 0; }
.aoi-ad-slot-content > :last-child { margin-bottom: 0; }
.aoi-ad-slot-content img,
.aoi-ad-slot-content iframe,
.aoi-ad-slot-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.aoi-ad-slot-content a { color: #53aaf0; }
.aoi-ad-slot-content a:hover { color: #83c7fb; }

.aoi-ad-slot--sidebar {
  min-height: 220px;
  margin: 0;
}
.otaku-sidebar > .aoi-ad-slot--sidebar {
  align-self: start;
}
.aoi-ad-slot--content { margin: 24px 0 8px; }
.aoi-ad-slot--wide { margin: 14px 0 20px; }

@media (max-width: 900px) {
  .aoi-ad-shell--below-nav { padding: 10px 0; }
  .aoi-ad-slot { min-height: 78px; margin-block: 14px; }
  .otaku-sidebar > .aoi-ad-slot--sidebar {
    min-height: 150px;
  }
}

@media (max-width: 520px) {
  .aoi-ad-shell--below-nav { padding: 8px 0; }
  .aoi-ad-slot {
    min-height: 70px;
    margin-block: 12px;
    padding: 18px 10px 12px;
  }
  .aoi-ad-slot-content { font-size: 11px; }
  .otaku-sidebar > .aoi-ad-slot--sidebar { min-height: 120px; }
}

/* ------------------------------------------------------------------------
   Square popup advertisement — once per page load, 5-second default timer
   ------------------------------------------------------------------------ */
html.aoi-ad-popup-open,
body.aoi-ad-popup-open {
  overflow: hidden !important;
}

.aoi-ad-popup[hidden] {
  display: none !important;
}

.aoi-ad-popup {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.aoi-ad-popup.is-visible {
  opacity: 1;
  visibility: visible;
}

.aoi-ad-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 11, .76);
}

.aoi-ad-popup-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 28px), calc(100vh - 28px));
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  outline: 0;
  background: #12181e;
  border: 1px solid #34404a;
  border-radius: 4px;
  box-shadow: 0 18px 54px rgba(0,0,0,.48);
  transform: translateY(8px) scale(.985);
  transition: transform .2s ease;
}

.aoi-ad-popup.is-visible .aoi-ad-popup-dialog {
  transform: none;
}

.aoi-ad-popup-head {
  padding: 14px 16px 12px;
  background: #171e25;
  border-bottom: 1px solid #2d3740;
  text-align: left;
}

.aoi-ad-popup-badge {
  display: block;
  margin-bottom: 5px;
  color: #738394;
  font: 600 9px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .13em;
}

.aoi-ad-popup-head h2 {
  margin: 0 !important;
  color: #f3f7fb !important;
  font-family: "Barlow Condensed", "IBM Plex Sans", sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: .01em;
}

.aoi-ad-popup-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #c4ced8;
  text-align: center;
  overscroll-behavior: contain;
}

.aoi-ad-popup-body > :first-child { margin-top: 0; }
.aoi-ad-popup-body > :last-child { margin-bottom: 0; }
.aoi-ad-popup-body img,
.aoi-ad-popup-body video,
.aoi-ad-popup-body iframe {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  margin-inline: auto;
}

.aoi-ad-popup-close {
  width: 100%;
  min-height: 62px;
  margin: 0 !important;
  padding: 9px 14px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 7px;
  border: 0 !important;
  border-top: 1px solid #39b971 !important;
  border-radius: 0 !important;
  background: #198f50 !important;
  color: #fff !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  text-align: center;
  box-shadow: none !important;
  transition: background .15s ease;
}

.aoi-ad-popup-close:hover,
.aoi-ad-popup-close:focus {
  background: #20a55e !important;
  color: #fff !important;
}

.aoi-ad-popup-close-main {
  font-weight: 700;
}

.aoi-ad-popup-close-countdown {
  color: #dff9e9;
  font-weight: 500;
}

.aoi-ad-popup-close [data-aoi-countdown-value] {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-inline: 2px;
  padding: 0 5px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(0,0,0,.13);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transform-origin: center;
}

.aoi-ad-popup-close [data-aoi-countdown-value].is-ticking {
  animation: aoiCountdownTick .34s ease;
}

@keyframes aoiCountdownTick {
  0%   { transform: translateY(-3px) scale(.78); opacity: .35; }
  55%  { transform: translateY(1px) scale(1.14); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.aoi-ad-popup-close.is-auto-finished {
  background: #147a43 !important;
}

.aoi-ad-popup-auto-message {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

@media (max-width: 520px) {
  .aoi-ad-popup { padding: 8px; }
  .aoi-ad-popup-dialog {
    width: min(94vw, calc(100vh - 18px));
    max-width: 390px;
  }
  .aoi-ad-popup-head { padding: 11px 12px 9px; }
  .aoi-ad-popup-head h2 { font-size: 20px !important; }
  .aoi-ad-popup-body { padding: 13px; font-size: 13px; }
  .aoi-ad-popup-close {
    min-height: 58px;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aoi-ad-popup,
  .aoi-ad-popup-dialog,
  .aoi-ad-popup-close [data-aoi-countdown-value] {
    animation: none !important;
    transition: none !important;
  }
}

/* Desktop submenu reset after the legacy <=900px mobile block. */
body.device-desktop .otaku-primary-menu .sub-menu {
  margin: 0 !important;
  padding: 5px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  background: #14191f !important;
  border: 1px solid #29313a !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}
body.device-desktop .otaku-primary-menu li:hover > .sub-menu,
body.device-desktop .otaku-primary-menu li:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ========================================================================
   Otaku Blue Final V6 — single-navigation header cleanup
   Removes the duplicated utility navigation and keeps one authoritative
   primary menu on desktop/tablet/mobile.
   ======================================================================== */

/* Safety guard: even if an old header fragment is served briefly by cache,
   never show the obsolete utility bar/menu. */
.otaku-topbar,
.otaku-topbar-menu,
.otaku-utility-menu {
  display: none !important;
}

/* Header now starts directly with branding/search. */
.otaku-header {
  border-top: 0 !important;
}

.otaku-header-inner {
  min-height: 100px;
}

/* One clean desktop nav row. Avoid scroll containers that can clip dropdowns. */
body.device-desktop .otaku-nav-inner {
  min-height: 48px !important;
}
body.device-desktop .otaku-menu-wrap,
body.device-desktop .otaku-primary-menu {
  overflow: visible !important;
}
body.device-desktop .otaku-primary-menu {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
body.device-desktop .otaku-primary-menu > li > a {
  min-height: 48px !important;
  padding: 0 17px !important;
  line-height: 1 !important;
}

/* Tablet/mobile are controlled by the real viewport, not by duplicated menus. */
@media (max-width: 900px) {
  body:not(.device-desktop) .otaku-menu-toggle {
    display: inline-flex !important;
  }
  body:not(.device-desktop) .otaku-nav-inner {
    display: block !important;
  }
  body:not(.device-desktop) .otaku-menu-wrap {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
  }
  body:not(.device-desktop) .otaku-menu-wrap.is-open {
    max-height: 72vh !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    padding-bottom: 8px !important;
  }
  body:not(.device-desktop) .otaku-primary-menu {
    display: block !important;
    width: 100% !important;
    padding: 3px 0 6px !important;
  }
  body:not(.device-desktop) .otaku-primary-menu > li {
    display: block !important;
    width: 100% !important;
  }
  body:not(.device-desktop) .otaku-primary-menu > li > a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 10px !important;
  }
}

/* Phone polish. */
@media (max-width: 720px) {
  .otaku-header-inner {
    min-height: 112px;
  }
  .otaku-nav-inner {
    min-height: 46px;
  }
  .aoi-ad-shell--below-nav {
    border-top: 0;
  }
}

/* ========================================================================
   NontonAnime V8 — content workflow, metadata, player, downloads & sharing
   ======================================================================== */

/* Anime information: compact editorial rows, not dashboard cards. */
.infozingle {
  min-width: 0;
}
.infozingle p {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid #26313b;
  color: #cbd5df;
  line-height: 1.55;
}
.infozingle p:first-child { padding-top: 1px; }
.infozingle p:last-child { border-bottom: 0; }
.infozingle b {
  color: #f4f7fa;
  font-weight: 600;
}
.infozingle a { color: #4da6e8; }
.aoi-inline-rating,
.otaku-score-badge i {
  color: #f2b84b;
}

/* Embedded player + source chooser. */
.aoi-stream-box {
  margin: 20px 0 22px;
  border: 1px solid #29343f;
  background: #11171d;
}
.aoi-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05080b;
  overflow: hidden;
}
.aoi-player-frame iframe,
.aoi-player-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
.aoi-stream-controls {
  padding: 14px;
  border-top: 1px solid #29343f;
}
.aoi-quality-tabs,
.aoi-mirror-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aoi-mirror-list { margin-top: 10px; }
.aoi-quality-button,
.aoi-mirror-button {
  appearance: none;
  border: 1px solid #33414e;
  background: #171f27;
  color: #d7e0e8;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 3px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.aoi-quality-button:hover,
.aoi-mirror-button:hover,
.aoi-quality-button.is-active,
.aoi-mirror-button.is-active {
  background: #1f7fbe;
  border-color: #1f7fbe;
  color: #fff;
}

/* Episode and batch download groups. */
.aoi-download-section { margin: 24px 0; }
.aoi-download-grid {
  border: 1px solid #29343f;
  border-top: 0;
  background: #11171d;
}
.aoi-download-quality {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 15px;
  border-top: 1px solid #26313b;
}
.aoi-download-quality:first-child { border-top: 0; }
.aoi-download-quality-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f3f6f9;
  font-weight: 700;
}
.aoi-download-quality-title i { color: #4da6e8; }
.aoi-download-mirrors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aoi-download-mirrors a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #33414e;
  background: #171f27;
  color: #dbe5ed;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}
.aoi-download-mirrors a:hover {
  border-color: #2d91d1;
  color: #fff;
  background: #192a36;
}
.aoi-download-mirrors i { color: #68b5e8; }

/* Help box. */
.aoi-help-panel {
  margin: 24px 0;
  padding: 17px 19px;
  background: #111820;
  border: 1px solid #2a3641;
  border-left: 3px solid #2b91d2;
}
.aoi-help-panel h3 {
  margin: 0 0 9px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f2f6fa;
}
.aoi-help-panel ul {
  margin: 0;
  padding-left: 19px;
  color: #bdc9d4;
}
.aoi-help-panel li { margin: 6px 0; line-height: 1.55; }
.aoi-help-panel a { color: #58aee5; text-decoration: underline; text-underline-offset: 2px; }

/* Share bar. Brand colors are intentionally restrained so it still belongs to the theme. */
.aoi-share-section {
  margin: 26px 0;
  padding: 17px 18px;
  border: 1px solid #29343f;
  background: #11171d;
}
.aoi-share-section h3 {
  margin: 0 0 13px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #ecf2f7;
}
.aoi-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.aoi-share-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  background: #182029;
  border: 1px solid #33414e;
  border-radius: 3px;
  color: #dbe5ed;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aoi-share-button:hover { background: #202b35; color: #fff; border-color: #4b5d6d; }
.aoi-share-button i { font-size: 14px; }
.aoi-share-button.is-facebook i { color: #65a3ef; }
.aoi-share-button.is-x i { color: #eef3f6; }
.aoi-share-button.is-whatsapp i { color: #50d890; }
.aoi-share-button.is-instagram i { color: #ef83b3; }
.aoi-share-button.is-tiktok i { color: #8ee8ea; }
.aoi-share-button.is-telegram i { color: #65b9e9; }
.aoi-share-button.is-reddit i { color: #ff845e; }
.aoi-share-note { min-height: 1em; margin: 8px 0 0; color: #8ea0af; font-size: 11px; }

/* Recommendations reuse the same poster language as homepage. */
.aoi-recommendations { margin: 30px 0 8px; }
.aoi-recommendation-grid { margin-top: 14px; }

/* The schedule module was intentionally retired in V8. */
.otaku-schedule,
.otaku-day-tabs,
.otaku-schedule-panels { display: none !important; }

@media (max-width: 720px) {
  .aoi-download-quality {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }
  .aoi-download-mirrors a,
  .aoi-share-button {
    min-height: 38px;
  }
  .aoi-player-frame { aspect-ratio: 16 / 9; }
  .aoi-stream-controls { padding: 11px; }
  .aoi-share-section,
  .aoi-help-panel { padding: 14px; }
  .aoi-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aoi-share-button { width: 100%; }
  .aoi-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 390px) {
  .aoi-quality-button,
  .aoi-mirror-button { padding-left: 10px; padding-right: 10px; }
}