*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --focus-ring: #9ad0ff;
  --ui-font-scale: 1.00;
  --ui-control-height: 40px;
  --ui-control-padding-y: 8px;
  --ui-control-padding-x: 10px;
  --ui-pill-font-size: 13px;
  --ui-pill-padding-y: 6px;
  --ui-pill-padding-x: 10px;
  --ui-heading-scale: 1.00;
}

body.ui-scale-small {
  --ui-font-scale: 0.95;
  --ui-control-height: 38px;
  --ui-control-padding-y: 7px;
  --ui-control-padding-x: 9px;
  --ui-pill-font-size: 12px;
  --ui-pill-padding-y: 5px;
  --ui-pill-padding-x: 9px;
  --ui-heading-scale: 0.97;
}

body.ui-scale-medium {
  --ui-font-scale: 1.00;
  --ui-control-height: 40px;
  --ui-control-padding-y: 8px;
  --ui-control-padding-x: 10px;
  --ui-pill-font-size: 13px;
  --ui-pill-padding-y: 6px;
  --ui-pill-padding-x: 10px;
  --ui-heading-scale: 1.00;
}

body.ui-scale-large {
  --ui-font-scale: 1.10;
  --ui-control-height: 44px;
  --ui-control-padding-y: 9px;
  --ui-control-padding-x: 11px;
  --ui-pill-font-size: 14px;
  --ui-pill-padding-y: 7px;
  --ui-pill-padding-x: 11px;
  --ui-heading-scale: 1.10;
}

body.ui-scale-extra-large {
  --ui-font-scale: 1.25;
  --ui-control-height: 48px;
  --ui-control-padding-y: 10px;
  --ui-control-padding-x: 12px;
  --ui-pill-font-size: 15px;
  --ui-pill-padding-y: 8px;
  --ui-pill-padding-x: 12px;
  --ui-heading-scale: 1.18;
}

/* Step 5: first-pass overall UI scaling for shared headings, controls, and repeated pills. */
/* Step 7: route remaining shared helper controls/text through the same scale variables. */

/* Theme-scoped variables (allows per-mode admin overrides) */
html.theme-dark{
  --btn-shimmer-rgb: var(--btn-shimmer-dark-rgb, 255,255,255);
  --tabs-text-color: var(--tabs-text-color-dark, #9ad0ff);
  --title-text-color: var(--title-text-color-dark, #e7e7e7);
  --rating-meter-fill-start: var(--rating-meter-fill-start-dark, #48b6ff);
  --rating-meter-fill-end: var(--rating-meter-fill-end-dark, #1d6fe3);
  /* Global tabs panel background override (rgba) */
  --nav-panel-bg: var(--nav-panel-bg-rgba-custom, #0f1116);
}
html.theme-dim{
  --btn-shimmer-rgb: var(--btn-shimmer-dim-rgb, 255,255,255);
  --tabs-text-color: var(--tabs-text-color-dim, #b7c6d9);
  --title-text-color: var(--title-text-color-dim, #e7e7e7);
  --rating-meter-fill-start: var(--rating-meter-fill-start-dim, #48b6ff);
  --rating-meter-fill-end: var(--rating-meter-fill-end-dim, #1d6fe3);
  /* Global tabs panel background override (rgba) */
  --nav-panel-bg: var(--nav-panel-bg-rgba-custom, #171a21);
}
html.theme-light{
  --btn-shimmer-rgb: var(--btn-shimmer-light-rgb, 11,79,191);
  --tabs-text-color: var(--tabs-text-color-light, #0b4fbf);
  --title-text-color: var(--title-text-color-light, #1d2430);
  --rating-meter-fill-start: var(--rating-meter-fill-start-light, #48b6ff);
  --rating-meter-fill-end: var(--rating-meter-fill-end-light, #1d6fe3);
  --nav-panel-bg-light: var(--nav-panel-bg-light-custom, #f3f6ff);
  /* Light theme: solid tint override (if set) wins over global rgba override */
  --nav-panel-bg: var(--nav-panel-bg-rgba-custom, rgba(255,255,255,0.72));
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: calc(16px * var(--ui-font-scale)); margin: 0; background:#0b0c10; color:#e7e7e7; }
html, body { overscroll-behavior-y: none; }
a { color:#9ad0ff; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Skip link (keyboard users). Hidden until focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #12141a;
  border: 1px solid #2b3444;
  color: #e7e7e7;
  z-index: 100;
  transform: translateY(-220%);
  transition: transform 120ms ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* Screen-reader only (visually hidden) utility. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .skip-link { transition: none; }
}

/* Focus-visible ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
header.site-header {
  --site-brand-size: clamp(18px, 2vw, 26px);
  --site-brand-icon-size: calc(var(--site-brand-size) * 1.28);
  position: sticky;
  top: 0;
  background:
    radial-gradient(circle at 16% 50%, rgba(102, 129, 182, 0.20) 0%, rgba(102, 129, 182, 0.10) 12%, rgba(10, 19, 40, 0.00) 34%),
    linear-gradient(180deg, rgba(13, 23, 48, var(--top-banner-opacity-dark, 0.90)) 0%, rgba(10, 19, 40, var(--top-banner-opacity-dark, 0.90)) 100%);
  border-bottom: 1px solid rgba(124, 150, 198, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px) saturate(128%);
  -webkit-backdrop-filter: blur(10px) saturate(128%);
  padding: 12px 24px;
  z-index: 10120;
}



header#siteHeader.site-header{
  position: sticky;
  top: 0;
  z-index: 10120;
}
header .site-header-inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap:20px;
  align-items:center;
  width:100%;
  max-width:none;
  margin:0;
}

header .header-left{
  display:flex;
  align-items:center;
  min-width:0;
  transform-origin: 0 0;
  will-change: transform;
  transition: transform 160ms ease;
}

header .brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-decoration:none;
  color:#f4f7fb;
}


header .brand-mark{
  flex: 0 0 auto;
  width: var(--site-brand-icon-size);
}

header .brand-mark img{
  display:block;
  width:100%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
}

header .brand-mark .brand-mark-lightmode{
  display:none;
}

html.theme-light header .brand-mark .brand-mark-darkmode{
  display:none;
}

html.theme-light header .brand-mark .brand-mark-lightmode{
  display:block;
}

header .brand-copy{
  display:flex;
  align-items:center;
  min-width:0;
}

header .brand-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

header .brand{
  font-weight:800;
  font-size: var(--site-brand-size);
  line-height:1;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

header .tagline{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  line-height:1;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(230, 236, 246, 0.74);
}

header .header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  justify-self:end;
  transform-origin: 100% 0;
  will-change: transform;
  transition: transform 160ms ease;
}
header .about-row { display:flex; align-items:center; }

header.is-scrolled .header-left,
header.is-scrolled .header-actions{
  transform: translate3d(0,-1px,0) scale(0.985);
}

html.motion-off header .header-left,
html.motion-off header .header-actions{
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) header .header-left,
  html:not(.motion-full) header .header-actions{
    transition: none;
  }
}

@media (max-width: 980px){
  header.site-header{ --site-brand-size: clamp(17px, 2.6vw, 23px); padding: 10px 18px; }
  header .site-header-inner{ column-gap: 14px; }
  header .tagline{ font-size: 10px; letter-spacing: 0.05em; }
}

@media (max-width: 760px){
  header.site-header{ --site-brand-size: clamp(16px, 4.8vw, 21px); padding: 9px 14px; }
  header .site-header-inner{ grid-template-columns: 1fr; row-gap: 10px; }
  header .header-actions{ width: 100%; justify-self: end; justify-content: flex-end; gap: 8px; }
  header .about-row{ width: auto; justify-content: flex-end; }
}

@media (max-width: 520px){
  header.site-header{ --site-brand-size: clamp(15px, 5.2vw, 19px); }
  header .brand-lockup{ gap: 8px; align-items: center; }
  header .brand-row{ align-items: center; gap: 6px; }
  header .brand{ white-space: nowrap; line-height: 1; }
  header .tagline{ display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
  header .header-actions{ justify-content: space-between; }
  header .motion-select,
  header .theme-select{ max-width: none; flex: 1 1 160px; min-width: 0; }
}

@media (max-width: 520px) and (orientation: portrait){
  header.site-header{ --site-brand-size: clamp(17px, 6vw, 22px); }
  header .tagline{ font-size: 12px; }
}

header .motion-select,
header .theme-select { max-width: 220px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
@media (max-width: 680px){
  header .motion-select,
  header .theme-select { max-width: 175px; font-size: 12px; padding: 6px 8px; }
}

header nav a{color: var(--tabs-text-color);}
header nav a:hover{color: var(--tabs-text-color);}

.container { display:flex; min-height: calc(100vh - 49px); }
nav { width: 220px; background: var(--nav-panel-bg, #0f1116); border-right:1px solid #222; padding: 14px; }
nav a { display:block; padding: 8px 10px; border-radius: 10px; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }

/* Step 1: main site nav only. Soften inactive sidebar tab text in dark/dim themes without changing header tabs, portal UI, admin sidebars, or active tab styling. */
html.theme-dark body > .container > nav > a:not(.active),
html.theme-dark body > .container > nav > a:not(.active):hover,
html.theme-dark body > .container > nav > a:not(.active):focus-visible{
  color: #CBD5E0;
}

html.theme-dim body > .container > nav > a:not(.active),
html.theme-dim body > .container > nav > a:not(.active):hover,
html.theme-dim body > .container > nav > a:not(.active):focus-visible{
  color: #A0AEC0;
}

/* Sub-tabs (in-page) */
.tab-switch{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tab-switch a{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 10px; text-decoration:none; color: var(--tabs-text-color); }
nav a:hover:not(:active), .tab-switch a:hover { background: var(--tabs-hover-bg, #1a1f2a); transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(var(--tabs-hover-border-rgb), 0.65),
    0 0 calc(14px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.32 * var(--glow-tabs-int))),
    0 0 calc(28px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.18 * var(--glow-tabs-int)));
}
nav a.active, .tab-switch a.active {
  background-color: var(--tabs-active-bg, var(--tabs-hover-bg, #1a1f2a));
  background-image: linear-gradient(
    rgba(var(--glow-tabs-rgb), var(--tabs-active-tint-alpha, 0.00)),
    rgba(var(--glow-tabs-rgb), var(--tabs-active-tint-alpha, 0.00))
  );
}

/* Active tab border uses the same configurable hover border color */
nav a.active,
.tab-switch a.active{
  box-shadow:
    0 0 0 1px rgba(var(--tabs-hover-border-rgb), 0.70),
    0 0 calc(18px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.40 * var(--glow-tabs-int))),
    0 0 calc(36px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.16 * var(--glow-tabs-int)));
}


/* Step 2: main site nav only. Strengthen the active sidebar tab state in dark/dim themes without changing in-page tabs, portal UI, admin sidebars, or light theme styling. */
html.theme-dark body > .container > nav > a.active,
html.theme-dark body > .container > nav > a.active:hover,
html.theme-dark body > .container > nav > a.active:focus-visible,
html.theme-dim body > .container > nav > a.active,
html.theme-dim body > .container > nav > a.active:hover,
html.theme-dim body > .container > nav > a.active:focus-visible{
  color: #FFFFFF;
  background-color: #2A4365;
  background-image: none;
  box-shadow:
    inset 3px 0 0 var(--main-site-nav-accent, #63B3ED),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--tabs-hover-border-rgb), 0.70),
    0 10px 22px rgba(0, 0, 0, 0.34),
    0 0 calc(18px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.40 * var(--glow-tabs-int))),
    0 0 calc(36px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.16 * var(--glow-tabs-int)));
}

/* Step 3: main site nav only. Add a little more padding and use a slightly tighter 8px corner radius without changing sub-tabs, portal UI, admin sidebars, or other shared nav patterns. */
body > .container > nav > a{
  padding: 10px 12px;
  border-radius: 8px;
}

/* Step 4: main site nav only. Give inactive sidebar tabs a restrained lift on hover in dark/dim themes without changing active tabs, in-page tabs, portal UI, admin sidebars, or light theme styling. */
html.theme-dark body > .container > nav > a:not(.active):hover,
html.theme-dark body > .container > nav > a:not(.active):focus-visible,
html.theme-dim body > .container > nav > a:not(.active):hover,
html.theme-dim body > .container > nav > a:not(.active):focus-visible{
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(var(--tabs-hover-border-rgb), 0.42),
    0 8px 18px rgba(0, 0, 0, 0.26);
}

/* Step 5: main site nav only. Normalize row spacing and text rhythm across the desktop sidebar without changing nav content, mobile tab wrapping, portal UI, admin sidebars, or other shared nav patterns. */
body > .container > nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body > .container > nav > a{
  margin: 0;
  line-height: 1.25;
  box-sizing: border-box;
  text-decoration: none;
}

body > .container > nav > .random-article-dice{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 11px;
  align-self: flex-start;
  flex: 0 0 auto;
  overflow: visible;
  color: transparent;
  background: linear-gradient(180deg, #2796dc 0%, #1678cf 100%);
  border: 1px solid rgba(162, 220, 249, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(7, 35, 78, 0.20),
    0 2px 6px rgba(5, 16, 39, 0.22);
  text-decoration: none;
  transform: perspective(620px) translateY(0) rotateY(0deg) rotateZ(0deg) translateZ(0);
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
  transition: box-shadow 150ms ease, filter 150ms ease, background 150ms ease;
}

body > .container > nav > .random-article-dice:hover,
body > .container > nav > .random-article-dice:focus-visible{
  animation: aiowiki-random-dice-half-turn 520ms cubic-bezier(.18,.82,.24,1) both;
  background: linear-gradient(180deg, #2c9de2 0%, #197dd3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(7, 35, 78, 0.22),
    0 8px 16px rgba(5, 16, 39, 0.24),
    0 0 0 1px rgba(179, 239, 255, 0.14),
    0 0 12px rgba(49, 198, 255, 0.12);
  filter: none;
}

body > .container > nav > .random-article-dice:active{
  animation: none;
  transform: perspective(620px) translateY(-1px) rotateY(180deg) rotateZ(0deg) scale(0.98) translateZ(0);
  background: linear-gradient(180deg, #248fd4 0%, #156fc6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(7, 35, 78, 0.24),
    0 4px 8px rgba(5, 16, 39, 0.24),
    0 0 8px rgba(49, 198, 255, 0.12);
}

body > .container > nav > .random-article-dice:focus-visible{
  outline: none;
}

@keyframes aiowiki-random-dice-half-turn{
  0%{
    transform: perspective(620px) translateY(0) rotateY(0deg) rotateZ(0deg) scale(1) translateZ(0);
  }
  45%{
    transform: perspective(620px) translateY(-4px) rotateY(105deg) rotateZ(-4deg) scale(1.04) translateZ(0);
  }
  72%{
    transform: perspective(620px) translateY(-3px) rotateY(195deg) rotateZ(2deg) scale(1.02) translateZ(0);
  }
  100%{
    transform: perspective(620px) translateY(-3px) rotateY(180deg) rotateZ(0deg) scale(1) translateZ(0);
  }
}

html.theme-light body > .container > nav > .random-article-dice{
  border-color: rgba(94, 183, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(7, 35, 78, 0.16),
    0 2px 6px rgba(24, 73, 146, 0.14);
}

.random-article-dice__shine{
  display: none;
}

.random-article-dice__pip{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(244, 250, 255, 0.96);
  box-shadow: none;
  pointer-events: none;
}

.random-article-dice__pip--tl{ top: 8px; left: 8px; }
.random-article-dice__pip--tr{ top: 8px; right: 8px; }
.random-article-dice__pip--c{ top: 50%; left: 50%; transform: translate(-50%, -50%); }
.random-article-dice__pip--bl{ bottom: 8px; left: 8px; }
.random-article-dice__pip--br{ bottom: 8px; right: 8px; }


html.motion-reduce body > .container > nav > .random-article-dice,
html.motion-off body > .container > nav > .random-article-dice{
  transition: none;
  animation: none;
}

html.motion-reduce body > .container > nav > .random-article-dice:hover,
html.motion-reduce body > .container > nav > .random-article-dice:focus-visible,
html.motion-off body > .container > nav > .random-article-dice:hover,
html.motion-off body > .container > nav > .random-article-dice:focus-visible,
html.motion-reduce body > .container > nav > .random-article-dice:active,
html.motion-off body > .container > nav > .random-article-dice:active{
  animation: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) body > .container > nav > .random-article-dice{
    transition: none;
    animation: none;
  }

  html:not(.motion-full) body > .container > nav > .random-article-dice:hover,
  html:not(.motion-full) body > .container > nav > .random-article-dice:focus-visible,
  html:not(.motion-full) body > .container > nav > .random-article-dice:active{
    animation: none;
    transform: none;
  }
}

/* Step 6: main site nav only. Add small restrained monochrome icons to top-level public sidebar items without changing nav structure, JS behavior, portal sidebars, or admin areas. */
body > .container > nav > a[data-main-nav-key]:not([data-main-nav-key="admin"]){
  display: flex;
  align-items: center;
  gap: 8px;
}

body > .container > nav > a[data-main-nav-key]:not([data-main-nav-key="admin"])::before{
  content: "•";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  min-width: 1em;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.82;
}

body > .container > nav > a[data-main-nav-key="albums"]::before{ content: "◫"; }
body > .container > nav > a[data-main-nav-key="seasons"]::before{ content: "◧"; }
body > .container > nav > a[data-main-nav-key="characters"]::before{ content: "◉"; }
body > .container > nav > a[data-main-nav-key="episodes"]::before{ content: "☰"; }
body > .container > nav > a[data-main-nav-key="elsewhere"]::before{ content: "↗"; }
body > .container > nav > a[data-main-nav-key="videos"]::before{ content: "▶"; }
body > .container > nav > a[data-main-nav-key="arcs"]::before{ content: "⌁"; }
body > .container > nav > a[data-main-nav-key="stats"]::before{ content: "◲"; }
body > .container > nav > a[data-main-nav-key="games"]::before{ content: "✦"; }
body > .container > nav > a[data-main-nav-key="portal"]::before{ content: "◌"; }
body > .container > nav > a[data-main-nav-key^="custom:"]::before{ content: "▣"; }

/* Step 7: main site nav only. Optionally sync the active sidebar accent bar to the current Title color with a safe brand-blue fallback. Keep the active background fixed for stability and scope this to the main site nav accent only. */
:root{
  --main-site-nav-accent: #63B3ED;
}

/* Tabs frosted glass option (Admin Config -> Animation -> Tabs) */
body[data-tabs-glass="1"] nav a,
body[data-tabs-glass="1"] .tab-switch a{
  background: rgba(255, 255, 255, var(--tabs-glass-alpha, 0.10));
  border: 1px solid rgba(255, 255, 255, var(--tabs-glass-border-alpha, 0.18));
  backdrop-filter: blur(var(--tabs-glass-blur, 14px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--tabs-glass-blur, 14px)) saturate(140%);
}
body[data-tabs-glass="1"] nav a:hover:not(:active),
body[data-tabs-glass="1"] .tab-switch a:hover:not(:active){
  background: rgba(255, 255, 255, calc(var(--tabs-glass-alpha, 0.10) + 0.05));
}
body[data-tabs-glass="1"] nav a.active,
body[data-tabs-glass="1"] .tab-switch a.active{
  background-color: rgba(255, 255, 255, calc(var(--tabs-glass-alpha, 0.10) + 0.08));
  background-image: linear-gradient(
    rgba(var(--glow-tabs-rgb), var(--tabs-active-tint-alpha, 0.00)),
    rgba(var(--glow-tabs-rgb), var(--tabs-active-tint-alpha, 0.00))
  );
}

/* Global frosted glass surfaces (Admin Config -> Animation -> Frosted Glass) */
body[data-glass-headers="1"] header,
body[data-glass-headers="1"] .page-hero,
body[data-glass-headers="1"] .site-notice {
  position: relative;
  /* Allow hover "lift" and glow effects in headers without getting clipped. */
  overflow: visible;
}

/* Extra breathing room for hover-lift in glass mode (prevents shadows/glows from feeling cramped at the bottom edge). */
body[data-glass-headers="1"] header { padding-bottom: calc(12px + 10px); }
body[data-glass-headers="1"] .page-hero { padding-bottom: calc(18px + 10px); }
body[data-glass-headers="1"] .site-notice { padding-bottom: 10px; }

body[data-glass-headers="1"] header::before,
body[data-glass-headers="1"] .page-hero::before,
body[data-glass-headers="1"] .site-notice::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255, 255, 255, var(--glass-alpha, 0.10));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha, 0.18));
  pointer-events: none;
  z-index: 0;
}
body[data-glass-headers="1"] header > *,
body[data-glass-headers="1"] .page-hero > *,
body[data-glass-headers="1"] .site-notice > *{
  position: relative;
  z-index: 1;
}

body[data-glass-cards="1"] .card,
body[data-glass-cards="1"] .table-wrap{
  position: relative;
  /* Allow hover "lift" and glow effects inside cards without getting clipped. */
  overflow: visible;
}

/* Extra breathing room for hover-lift in glass cards (prevents button lift from hugging the card edge). */
body[data-glass-cards="1"] .card { padding-bottom: calc(14px + 10px); }
body[data-glass-cards="1"] .table-wrap { padding-bottom: 10px; }

body[data-glass-cards="1"] .card::before,
body[data-glass-cards="1"] .table-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255, 255, 255, var(--glass-alpha, 0.10));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha, 0.18));
  pointer-events: none;
  z-index: 0;
}
body[data-glass-cards="1"] .card > *,
body[data-glass-cards="1"] .table-wrap > *{
  position: relative;
  z-index: 1;
}

body[data-glass-toolbars="1"] .pager,
body[data-glass-toolbars="1"] .filter-chips-wrap,
body[data-glass-toolbars="1"] .vote-controls,
body[data-glass-toolbars="1"] .episode-top-actions,
body[data-glass-toolbars="1"] .character-detail-actions,
body[data-glass-toolbars="1"] .admin-config-actions,
body[data-glass-toolbars="1"] .cfg-unsaved-actions,
body[data-glass-toolbars="1"] .confirm-actions{
  position: relative;
  /* Allow hover "lift" and glow effects on buttons without getting clipped. */
  overflow: visible;
  border-radius: 12px;
}
body[data-glass-toolbars="1"] .pager::before,
body[data-glass-toolbars="1"] .filter-chips-wrap::before,
body[data-glass-toolbars="1"] .vote-controls::before,
body[data-glass-toolbars="1"] .episode-top-actions::before,
body[data-glass-toolbars="1"] .character-detail-actions::before,
body[data-glass-toolbars="1"] .admin-config-actions::before,
body[data-glass-toolbars="1"] .cfg-unsaved-actions::before,
body[data-glass-toolbars="1"] .confirm-actions::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--glass-alpha, 0.10));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha, 0.18));
  pointer-events: none;
  z-index: 0;
}
body[data-glass-toolbars="1"] .pager > *,
body[data-glass-toolbars="1"] .filter-chips-wrap > *,
body[data-glass-toolbars="1"] .vote-controls > *,
body[data-glass-toolbars="1"] .episode-top-actions > *,
body[data-glass-toolbars="1"] .character-detail-actions > *,
body[data-glass-toolbars="1"] .admin-config-actions > *,
body[data-glass-toolbars="1"] .cfg-unsaved-actions > *,
body[data-glass-toolbars="1"] .confirm-actions > *{
  position: relative;
  z-index: 1;
}

body[data-glass-panels="1"] .config-advanced,
body[data-glass-panels="1"] .config-advanced-split,
body[data-glass-panels="1"] .config-bulk,
body[data-glass-panels="1"] .modal,
body[data-glass-panels="1"] .dialog{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
body[data-glass-panels="1"] .config-advanced::before,
body[data-glass-panels="1"] .config-advanced-split::before,
body[data-glass-panels="1"] .config-bulk::before,
body[data-glass-panels="1"] .modal::before,
body[data-glass-panels="1"] .dialog::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255, 255, 255, var(--glass-alpha, 0.10));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha, 0.18));
  pointer-events: none;
  z-index: 0;
}
body[data-glass-panels="1"] .config-advanced > *,
body[data-glass-panels="1"] .config-advanced-split > *,
body[data-glass-panels="1"] .config-bulk > *,
body[data-glass-panels="1"] .modal > *,
body[data-glass-panels="1"] .dialog > *{
  position: relative;
  z-index: 1;
}

main { flex:1; padding: 18px; }

/* Page hero banner (Albums, Club Seasons, etc.) */
.page-hero {
  position: relative;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(43,52,68,0.9);
  background:
    radial-gradient(1100px 340px at 18% 0%, rgba(29,111,227,0.42), transparent 62%),
    radial-gradient(900px 280px at 78% 24%, rgba(154,208,255,0.16), transparent 60%),
    radial-gradient(700px 260px at 98% 98%, rgba(29,111,227,0.10), transparent 72%),
    linear-gradient(180deg, #121621, #0f1116);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.35);
  overflow: visible;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjI2MCIgdmlld0JveD0iMCAwIDEyMDAgMjYwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icm91dGUiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOWFkMGZmIiBzdG9wLW9wYWNpdHk9IjAuMzUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWQ2ZmUzIiBzdG9wLW9wYWNpdHk9IjAuMTgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0tNDAgMTkwIEMgMTUwIDkwLCAyOTAgMjUwLCA0NjAgMTYwIFMgNzYwIDQwLCAxMDQwIDEyMCBTIDEzMjAgMjEwLCAxMjUwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjcm91dGUpIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxIDEwIiBvcGFjaXR5PSIwLjciLz4KICA8cGF0aCBkPSJNLTYwIDE2MCBDIDEyMCA3MCwgMzEwIDIxMCwgNTIwIDEyMCBTIDg2MCAyMCwgMTIyMCA5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4xMCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxnIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuMDYiIGZpbGw9Im5vbmUiPgogICAgPGNpcmNsZSBjeD0iOTIwIiBjeT0iMTYwIiByPSIxMTAiLz4KICAgIDxjaXJjbGUgY3g9IjkyMCIgY3k9IjE2MCIgcj0iNzAiLz4KICAgIDxjaXJjbGUgY3g9IjkyMCIgY3k9IjE2MCIgcj0iNDAiLz4KICA8L2c+CiAgPGcgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjEyIj4KICAgIDxjaXJjbGUgY3g9IjEyMCIgY3k9IjQwIiByPSIxLjMiLz4KICAgIDxjaXJjbGUgY3g9IjIyMCIgY3k9IjgwIiByPSIxLjAiLz4KICAgIDxjaXJjbGUgY3g9IjM0MCIgY3k9IjMwIiByPSIxLjEiLz4KICAgIDxjaXJjbGUgY3g9IjQyMCIgY3k9IjcwIiByPSIxLjQiLz4KICAgIDxjaXJjbGUgY3g9IjU2MCIgY3k9IjQwIiByPSIxLjAiLz4KICAgIDxjaXJjbGUgY3g9IjY5MCIgY3k9IjkwIiByPSIxLjIiLz4KICAgIDxjaXJjbGUgY3g9IjgyMCIgY3k9IjYwIiByPSIxLjAiLz4KICAgIDxjaXJjbGUgY3g9Ijk4MCIgY3k9IjUwIiByPSIxLjUiLz4KICAgIDxjaXJjbGUgY3g9IjEwODAiIGN5PSI4MCIgcj0iMS4xIi8+CiAgICA8Y2lyY2xlIGN4PSIxNjAiIGN5PSIxNTAiIHI9IjEuMCIvPgogICAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMTMwIiByPSIxLjIiLz4KICAgIDxjaXJjbGUgY3g9IjUyMCIgY3k9IjIxMCIgcj0iMS4xIi8+CiAgICA8Y2lyY2xlIGN4PSI3NDAiIGN5PSIyMDAiIHI9IjEuMCIvPgogICAgPGNpcmNsZSBjeD0iMTA0MCIgY3k9IjIwMCIgcj0iMS4yIi8+CiAgPC9nPgo8L3N2Zz4K"),
    radial-gradient(rgba(154,208,255,0.20) 1px, transparent 1px);
  background-repeat: no-repeat, repeat;
  background-position: center 55%, 0 0;
  background-size: 1200px 260px, 26px 26px;
  opacity: 0.45;
  pointer-events: none;
  filter: blur(0px);
  border-radius: inherit;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(29,111,227,0), rgba(29,111,227,0.8), rgba(154,208,255,0.45), rgba(29,111,227,0));
  opacity: 0.7;
  pointer-events: none;
  border-radius: inherit;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.page-hero-text h1 {
  margin: 0;
  font-size: calc(var(--hero-title-font-size, 30px) * var(--ui-heading-scale));
  letter-spacing: 0.01em;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.hero-sub {
  margin-top: 6px;
  color: #aab2bf;
  font-size: calc(14px * var(--ui-font-scale));
}
.hero-sub-dynamic {
  font-size: calc(var(--hero-sub-font-size, 14px) * var(--ui-font-scale));
}

@media (max-width: 680px) {
  .page-hero { padding: 14px 14px; border-radius: 16px; }
  .page-hero-text h1 { font-size: clamp(calc(18px * var(--ui-heading-scale)), calc((var(--hero-title-font-size, 30px) - 8px) * var(--ui-heading-scale)), calc(34px * var(--ui-heading-scale))); }
  .hero-sub-dynamic { font-size: clamp(calc(12px * var(--ui-font-scale)), calc((var(--hero-sub-font-size, 14px) - 1px) * var(--ui-font-scale)), calc(40px * var(--ui-font-scale))); }
}

@media (max-width: 680px) and (orientation: portrait) {
  .page-hero-text h1 { font-size: clamp(calc(30px * var(--ui-heading-scale)), calc((var(--hero-title-font-size, 30px) + 6px) * var(--ui-heading-scale)), calc(46px * var(--ui-heading-scale))); }
  .hero-sub-dynamic { font-size: clamp(calc(16px * var(--ui-font-scale)), calc((var(--hero-sub-font-size, 14px) + 3px) * var(--ui-font-scale)), calc(22px * var(--ui-font-scale))); }
}
/* Tablet-friendly navigation (iPad and similar). */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  nav { width: 180px; padding: 12px; }
  nav a { padding: 9px 10px; }
  main { padding: 14px; }
}
.card { background:#11141b; border:1px solid #222; border-radius:16px; padding:14px; margin-bottom:12px; }
table { width: 100%; border-collapse: collapse; }

/* Fix: sticky table headers can overlap the first rows on some browsers when using border-collapse: collapse.
   Use separate border model for our data tables so sticky headers do not clip the first items. */
.data-table{ border-collapse: separate; border-spacing: 0; }
th, td { border-bottom:1px solid #222; padding: 10px 8px; text-align:left; vertical-align:top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color:#b8c0cc; }
tr:hover td { background:#0f131b; }
.episodes-table tbody tr { cursor: pointer; }

/* Clickable rows (Albums, Club Seasons, Characters, Episodes). */
.data-table tbody tr.row-link { cursor: pointer; }

/* Remove vertical column separators inside list tables (user preference). */
.data-table th,
.data-table td{
  border-left: none !important;
  border-right: none !important;
}

/* Avoid per-cell outlines/shadows that can look like column dividers. */
.data-table tbody td{
  box-shadow: none !important;
  outline: none !important;
}

/* Keyboard focus for clickable rows (lists). */
.data-table tbody tr.row-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.data-table tbody tr.row-link:focus-visible td {
  background:#0f131b;
}

/* Keyboard focus for clickable rows (Episodes). */
.episodes-table tbody tr.row-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.episodes-table tbody tr.row-link:focus-visible td {
  background:#0f131b;
}
.badge { display:inline-block; padding: calc(var(--ui-pill-padding-y) - 4px) calc(var(--ui-pill-padding-x) - 2px); border:1px solid #2b3444; border-radius:999px; font-size: calc(var(--ui-pill-font-size) - 1px); color:#cfe8ff; }

/* Episodes list: the # badge under the title is redundant with the left # column. */
.episodes-table .badge-episode-num { display: none; }
/* Security status box (Admin home) */
.security-status-head { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.security-status-title { font-weight:800; letter-spacing:0.01em; }
.security-status-sub { font-size: calc(12px * var(--ui-font-scale)); color:#b8c0cc; }
.security-status-list { display:flex; flex-direction:column; gap:8px; }
.security-status-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 10px; border:1px solid #222; border-radius:14px; background:#0f1116; }
.security-status-label { font-weight:600; }
.security-status-value { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.security-status-details { font-size: calc(12px * var(--ui-font-scale)); color:#b8c0cc; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding: calc(var(--ui-pill-padding-y) - 4px) var(--ui-pill-padding-x); border-radius:999px; font-size: calc(var(--ui-pill-font-size) - 1px); font-weight:800; letter-spacing:0.08em; border:1px solid #2b3444; background:#11141b; }
.status-pill-on { border-color: rgba(76,175,80,0.55); color:#d8ffe3; background: rgba(76,175,80,0.12); }
.status-pill-off { border-color: rgba(255,94,94,0.55); color:#ffe2e2; background: rgba(255,94,94,0.10); }
@media (max-width: 680px) {
  .security-status-row { flex-direction:column; }
  .security-status-value { justify-content:flex-start; }
}

/* Rating meter (percentage with thin bar) */
.rating-meter { --fill: 0%; --mark: 0%; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; max-width: 180px; }
.rating-meter__text { font-weight: 900; letter-spacing: 0.01em; line-height: 1; color: #eaf3ff;text-shadow: 0 1px 0 rgba(0,0,0,0.90), 0 0 10px rgba(0,0,0,0.55); }
.rating-meter__bar { position: relative; width:100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 2px rgba(0,0,0,0.55); }
.rating-meter__fill { height: 100%; width: var(--fill); border-radius: 999px; background: linear-gradient(90deg, var(--rating-meter-fill-start, #48b6ff), var(--rating-meter-fill-end, #1d6fe3)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.rating-meter__mark { position:absolute; left: var(--mark); top: 50%; transform: translate(-50%, -50%); width: 2px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.35); }
.rating-meter--sm { max-width: 160px; }
.rating-meter--sm .rating-meter__text { font-size: 14px; }
.rating-meter--sm .rating-meter__bar { height: 6px; }
.rating-meter--sm .rating-meter__mark { height: 12px; }
.rating-meter--lg { max-width: 280px; gap: 6px; }
.rating-meter--lg .rating-meter__text { font-size: 16px; }
.rating-meter--lg .rating-meter__bar { height: 8px; }
.rating-meter--lg .rating-meter__mark { height: 16px; }

/* Mobile: slightly taller rating meter bar for readability */
@media (max-width: 680px) {
  .rating-meter--sm .rating-meter__bar { height: 7px; }
}

/* Rating ring (gauge)
   Uses SVG strokes for clean edges (no conic-gradient artifacts) and supports animated fill on load. */
.rating-ring { --p: 0%; --size: 64px; --thickness: 8px; position: relative; width: var(--size); height: var(--size); display: inline-block; }
.rating-ring__svg { width: var(--size); height: var(--size); display: block; }

/* The circles are rotated so 0% starts at the top (12 o'clock). */
.rating-ring__track, .rating-ring__progress {
  fill: none;
  stroke-width: var(--thickness);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.rating-ring__track {
  stroke: rgba(255,255,255,0.20);
}

.rating-ring__progress {
  stroke: rgba(var(--rating-ring-rgb, var(--glow-primary-rgb)), 1);
  stroke-linecap: round;
  /* Default to empty ring to avoid a 100% flash before JS runs. */
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  /* JS refines dasharray/dashoffset and transition for animation. */
}

.rating-ring__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #eaf3ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.90), 0 0 10px rgba(0,0,0,0.45);
  font-size: 16px;
}

.rating-ring--lg { --size: 78px; --thickness: 9px; }

@media (max-width: 680px) {
  .rating-ring--lg { --size: 70px; --thickness: 8px; }
  .rating-ring__text { font-size: 15px; }
}

/* Rating (vote) pill bar */
.vote-pill {
  --fill: 0%;
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e5ea;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 20px rgba(0,0,0,0.28);
}

.vote-pill__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rating-meter-fill-start, #48b6ff), var(--rating-meter-fill-end, #1d6fe3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Subtle tick marks (0-100) to make the bar more useful at a glance. */
.vote-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0,
    rgba(0,0,0,0.10) 1px,
    transparent 1px,
    transparent 20%
  );
  /* Keep the ticks subtle so the percentage stays readable. */
  opacity: 0.08;
  pointer-events: none;
}

.vote-pill__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.01em;
  z-index: 2;
  pointer-events: none;
}

.vote-pill__label-text {
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  min-width: 84px;
  height: 76%;
  border-radius: 999px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 14px rgba(0,0,0,0.24);
  color: #ffffff;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.90),
    0 0 10px rgba(0,0,0,0.60),
    0 2px 18px rgba(0,0,0,0.45);
}

.vote-pill__marker {
  position: absolute;
  top: 50%;
  left: var(--mark);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  z-index: 3;
}

.vote-pill--sm { height: 22px; max-width: 320px; }
.vote-pill--sm .vote-pill__label-text { font-size: 15px; min-width: 90px; }

.vote-pill--lg { height: 28px; max-width: 640px; }
.vote-pill--lg .vote-pill__label-text { font-size: 16px; min-width: 120px; }

@media (max-width: 680px) {
  .vote-pill { max-width: 100%; }
}

.row-title { display:block; font-weight: 650; line-height: 1.25; }
.row-meta { display:none; margin-top: 10px; gap: 14px; row-gap: 10px; flex-wrap: wrap; align-items:center; }
.row-meta .badge { background: #0f131b; }

/* Elsewhere list: hide the Code (#) column on all viewports. */
.elsewhere-table th:nth-child(2), .elsewhere-table td:nth-child(2) { display:none; }


/* Albums/Seasons list number cell: default shows the item number (album/season). On mobile we swap to row number. */
.albums-table .cell-rownum,
.seasons-table .cell-rownum { display:none; }
.albums-table .cell-itemnum,
.seasons-table .cell-itemnum { display:inline; }
.form-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
input[type="text"], input[type="number"], input[type="url"], input[type="file"], textarea { background:#0b0d12; border:1px solid #2a2f3a; color:#e7e7e7; padding: var(--ui-control-padding-y) var(--ui-control-padding-x); min-height: var(--ui-control-height); border-radius: 10px; font-size: calc(1rem * var(--ui-font-scale)); line-height: 1.35; }

textarea { font-family: inherit; }
.site-notice-textarea { width: 100%; resize: vertical; min-height: 84px; }

/* Text inputs with an in-field Clear button */
.input-clear-wrap { position: relative !important; width: 100%; max-width: 100%; }
.input-clear-wrap input[type="text"],
.input-clear-wrap input[type="number"] { padding-right: 40px; width: 100%; max-width: 100%; display: block; box-sizing: border-box; }
.input-clear-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 3;
  width: calc(var(--ui-control-height) - 12px);
  height: calc(var(--ui-control-height) - 12px);
  border-radius: 999px;
  border: 1px solid #2a2f3a;
  background: #0b0d12;
  color: #e7e7e7;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: calc(14px * var(--ui-font-scale));
}
.input-clear-btn:hover { background: #111522; }
.input-clear-btn:active { transform: translateY(-50%) scale(0.98); }

/* Secondary ghost-style button (used for "Clear" next to search boxes) */
.btn-ghost {
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 2px);
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: #0b0d12;
  color: #e7e7e7;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  white-space: nowrap;
  font-size: calc(14px * var(--ui-font-scale));
}
.btn-ghost:hover { background: #111522; }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost.disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Filter chips (Episodes) */
.filter-chips-wrap { width: 100%; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  gap: 8px;
  padding: var(--ui-pill-padding-y) var(--ui-pill-padding-x);
  border-radius: 999px;
  border: 1px solid #2a2f3a;
  background: #0b0d12;
  color: #e7e7e7;
  cursor: pointer;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  font-size: var(--ui-pill-font-size);
  line-height: 1;
}
.filter-chip:hover { background: #111522; }
.filter-chip:active { transform: translateY(1px); }
.filter-chip__x { opacity: 0.85; font-size: calc(var(--ui-pill-font-size) + 2px); line-height: 1; }
.filter-chip:focus-visible { outline: 2px solid #1d6fe3; outline-offset: 2px; }
select { background:#0b0d12; border:1px solid #2a2f3a; color:#e7e7e7; padding: var(--ui-control-padding-y) var(--ui-control-padding-x); min-height: var(--ui-control-height); border-radius: 10px; font-size: calc(1rem * var(--ui-font-scale)); line-height: 1.35; }
button { background:#1d6fe3; border:0; color:white; padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 2px); min-height: var(--ui-control-height); border-radius: 10px; cursor:pointer; font-size: calc(14px * var(--ui-font-scale)); line-height: 1.1; }
button:hover { filter: brightness(1.05); }
.muted { color:#aab2bf; font-size: calc(13px * var(--ui-font-scale)); }
.detail-stat { color:#aab2bf; font-size: calc(16px * var(--ui-font-scale)); line-height: 1.35; }
.split { display:flex; gap: 16px; flex-wrap:wrap; }
.split > :first-child { flex: 0 0 220px; }
.split > :last-child { flex: 1 1 560px; }
/* Stack the split layout only on smaller screens. */
@media (max-width: 820px) { .split > :first-child, .split > :last-child { flex: 1 1 100%; } }

/* Character detail: allow the page thumbnail to be larger and keep its full aspect ratio. */
.split.split-character > :first-child{
  /* Let the left column size to its contents (thumbnail + badges) instead of reserving extra space. */
  flex: 0 1 auto;
  width: auto;
  max-width: clamp(240px, 34vw, 520px);
  flex-shrink: 0;
  align-self: flex-start;
}
.split.split-character > :last-child{
  flex: 1 1 420px;
  /* Important for flexbox: allow the right column to shrink/wrap instead of forcing a larger left column. */
  min-width: 0;
}

/* Arc detail: let the thumbnail column shrink with the window instead of holding a fixed width. */
body[data-page-kind="arc"] .split.split-character > :first-child{
  flex: 0 1 clamp(220px, 30vw, 440px);
  width: min(100%, clamp(220px, 30vw, 440px));
  max-width: clamp(220px, 30vw, 440px);
  min-width: 0;
  flex-shrink: 1;
}
body[data-page-kind="arc"] .arc-detail-card:not(.arc-detail-card--no-thumb) .arc-detail-left{
  width: 100%;
  min-width: 0;
}

/* Arc detail: frame the thumbnail (even when other elements below it are hidden on mobile). */
body[data-page-kind="arc"] .thumb-arc-page{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}

@media (min-width: 821px){
  body[data-page-kind="arc"] .thumb-arc-page{
    max-width: 100%;
    max-height: clamp(260px, 52vh, 380px);
  }
}

@media (max-width: 820px){
  /* Arc detail: the meta badges under the thumbnail are not needed on mobile. */
  .arc-detail-card .arc-detail-context{ display:none; }
}

/* Episode detail: left column (thumb + context) */
.episode-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Episode detail: keep the Album/Season pills aligned to the thumbnail width.
   This prevents long titles from extending farther right than the thumbnail. */
body[data-page-kind="episode"] .episode-thumb,
body[data-page-kind="episode"] .episode-context,
body[data-page-kind="episode"] .episode-top-actions{
  width: min(100%, 420px);
  max-width: min(100%, 420px);
}
body[data-page-kind="episode"] .episode-context-item{
  box-sizing: border-box;
}

/* Episode detail: ensure the thumbnail scales smoothly as the window narrows.
   Without an explicit flex-basis on the left column, some layouts can behave
   like shrink-to-fit and keep the thumbnail too wide until it wraps. */
body[data-page-kind="episode"] .split.split-elsewhere > :first-child,
body[data-page-kind="elsewhere"] .split.split-elsewhere > :first-child,
body[data-page-kind="videos"] .split.split-elsewhere > :first-child{
  flex: 0 1 clamp(220px, 30vw, 440px);
  min-width: 0;
  max-width: 100%;
}
body[data-page-kind="episode"] .episode-left,
body[data-page-kind="elsewhere"] .episode-left,
body[data-page-kind="videos"] .episode-left{
  min-width: 0;
}

/* Elsewhere detail: when there is no thumbnail, do not reserve a wide left column.
   This keeps the AIOWiki button and vote section grouped like Arc detail pages. */
body[data-page-kind="episode"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :first-child,
body[data-page-kind="episode"] .split.split-elsewhere.split-elsewhere-no-thumb > :first-child,
body[data-page-kind="elsewhere"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :first-child,
body[data-page-kind="elsewhere"] .split.split-elsewhere.split-elsewhere-no-thumb > :first-child,
body[data-page-kind="videos"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :first-child,
body[data-page-kind="videos"] .split.split-elsewhere.split-elsewhere-no-thumb > :first-child{
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}
body[data-page-kind="episode"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :last-child,
body[data-page-kind="episode"] .split.split-elsewhere.split-elsewhere-no-thumb > :last-child,
body[data-page-kind="elsewhere"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :last-child,
body[data-page-kind="elsewhere"] .split.split-elsewhere.split-elsewhere-no-thumb > :last-child,
body[data-page-kind="videos"] .elsewhere-detail-card--no-thumb .split.split-elsewhere > :last-child,
body[data-page-kind="videos"] .split.split-elsewhere.split-elsewhere-no-thumb > :last-child{
  flex: 1 1 420px;
  min-width: 0;
}

.episode-thumb {
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}

/* Arc detail: match the rounded thumbnail framing used on Character details. */
.arc-detail-card .arc-detail-thumb-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: transparent;
}

/* Arc detail: when there is no thumbnail, do not reserve thumbnail space.
   This keeps the vote section next to the AIOWiki button instead of pushing it away. */
body[data-page-kind="arc"] .arc-detail-card--no-thumb .split.split-character > :first-child{
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}
body[data-page-kind="arc"] .arc-detail-card--no-thumb .split.split-character > :last-child{
  flex: 1 1 420px;
  min-width: 0;
}

.episode-context {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-context-item {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid rgba(98, 123, 164, 0.32);
  background:
    linear-gradient(135deg, rgba(32, 76, 145, 0.22), rgba(11, 18, 30, 0.96) 68%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.00));
  box-shadow:
    0 14px 30px rgba(0,0,0,0.24),
    0 0 0 1px rgba(123, 171, 232, 0.06),
    0 0 28px rgba(var(--glow-buttons-rgb), calc(0.22 * var(--glow-buttons-int)));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
  will-change: transform;
}

.episode-context-item::after {
  content: "";
  position: absolute;
  inset: -50% -60%;
  background: linear-gradient(115deg, transparent 34%, rgba(var(--btn-shimmer-rgb),0.24) 50%, transparent 66%);
  transform: translateX(-70%);
  opacity: 0;
  transition: transform 720ms ease, opacity 260ms ease;
  pointer-events: none;
}

.episode-context-item[href] {
  cursor: pointer;
}

.episode-context-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #d7ecff;
}

.episode-context-value {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  line-height: 1.3;
  color: #eef5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (pointer: fine) {
  .episode-context-item[href]:hover:not(:active),
  .episode-context-item[href]:focus-visible {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(123, 171, 232, 0.48);
    box-shadow:
      0 16px 34px rgba(0,0,0,0.26),
      0 0 0 1px rgba(123, 171, 232, 0.08),
      0 0 36px rgba(var(--glow-buttons-rgb), calc(0.36 * var(--glow-buttons-int)));
    filter: brightness(1.04);
  }

  .episode-context-item[href]:hover:not(:active)::after,
  .episode-context-item[href]:focus-visible::after {
    opacity: 1;
    transform: translateX(76%);
  }
}

.episode-context-item[href]:focus-visible {
  outline: none;
}

.episode-context-item[href]:active {
  transform: translateY(-1px) scale(0.995);
}

html.motion-reduce .episode-context-item {
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    filter 120ms ease;
}

html.motion-reduce .episode-context-item::after {
  transition: opacity 180ms ease;
}

@media (pointer: fine) {
  html.motion-reduce .episode-context-item[href]:hover:not(:active),
  html.motion-reduce .episode-context-item[href]:focus-visible {
    transform: translateY(-1px);
  }

  html.motion-reduce .episode-context-item[href]:hover:not(:active)::after,
  html.motion-reduce .episode-context-item[href]:focus-visible::after {
    opacity: 0.85;
    transform: translateX(48%);
  }
}

html.motion-off .episode-context-item,
html.motion-off .episode-context-item::after {
  transition: none !important;
  animation: none !important;
}

/* Episode detail: action buttons under the thumbnail (Back + Vote info + AIOWiki). */
.episode-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  align-self: flex-start;
}

/* Episode detail: keep the action stack tied to the thumbnail column width so
   the pills can wrap/shrink with the column instead of holding a wider
   intrinsic size as the window narrows. */
body[data-page-kind="episode"] .episode-top-actions {
  width: 100%;
  min-width: 0;
}

body[data-page-kind="episode"] .episode-top-actions .vote-info-btn {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* On mobile, keep the action buttons under the thumbnail and left-aligned.
   (This also helps if a cached/older CSS previously aligned them to the right.) */
@media (max-width: 900px) {
  .episode-left {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .episode-top-actions {
    align-items: flex-start !important;
    align-self: flex-start !important;
  }
  .episode-top-actions .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.btn.btn-back {
  /* Match the pill look used by the Vote info + AIOWiki buttons */
  font-weight: 750;
  max-width: 100%;
  white-space: normal;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid #2b3444;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.0)), #0f131b;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.btn.btn-back:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.0)), #141a26;
  text-decoration: none !important;
}

/* Thumbnails */
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid #2a2a2a; }
.thumb-list {
  /* Bigger table thumbs for Albums / Club Seasons list pages.
     - Phones stay reasonable.
     - Tablets/desktops get a noticeably larger thumbnail. */
  width: clamp(56px, 8vw, 120px);
  height: clamp(56px, 8vw, 120px);
  border-radius: 12px;
}

/* Albums / Seasons / Elsewhere list thumbnails: make them a little larger
   without changing other list types. */
.albums-table .thumb-list,
.seasons-table .thumb-list,
.elsewhere-table .thumb-list {
  width: clamp(64px, 9vw, 136px);
  height: clamp(64px, 9vw, 136px);
  border-radius: 12px;
}

/* Albums / Seasons / Elsewhere / Videos public list thumbnails: add a small
   desktop-only increase. Keep phones and tablets on the existing controlled
   sizing so titles and rating columns do not get crowded or clipped. */
@media (min-width: 1501px) and (pointer: fine) {
  .public-list-page--albums .albums-table .thumb-list,
  .public-list-page--seasons .seasons-table .thumb-list,
  .public-list-page--elsewhere .elsewhere-table .thumb-list,
  .public-list-page--videos .elsewhere-table .thumb-list {
    width: 144px;
    height: 144px;
  }
}


/* Admin list thumbnails (Albums / Club Seasons).
   Keep small on phones, but make them easier to see on desktop. */
.thumb-admin {
  /* Match the public Albums / Club Seasons list thumbnail sizing. */
  width: clamp(56px, 8vw, 120px);
  height: clamp(56px, 8vw, 120px);
  border-radius: 12px;
}
.thumb-lg { display:block; width: 160px; height: 160px; object-fit: cover; border-radius: 16px; border: 1px solid #2a2a2a; background: #111; }

/* Characters: do not crop list thumbs, and let the character page thumb use its full aspect ratio.
   Use !important to override the global .thumb { object-fit: cover } rule. */
.thumb-character-list {
  display: block;
  object-fit: cover !important;
  object-position: center top;
  background: transparent;
}

/* Characters: make list thumbs a bit taller (portrait) so faces read larger,
   while still showing the full image (no cropping). */
.thumb-character-list.thumb-list,
.thumb-character-list.thumb-admin {
  height: clamp(72px, 10vw, 160px);
}
.thumb-character-page {
  display: block;

  /* Avoid forcing a wide, dark frame on tall portrait thumbs. */
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* Border + rounding is handled by the wrapper so it matches desktop + mobile. */
  border: 0;
  border-radius: 0;
  background: transparent;
}

.thumb-character-page-video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: inherit;
  object-fit: contain;
  background: transparent;
}

.thumb-character-list video,
video.thumb-character-list,
.admin-page-thumbs video.thumb,
.character-detail-media video {
  display: block;
}

/* Give the placeholder a reasonable footprint when there is no image. */
.thumb-character-page.thumb-ph-lg { min-height: 240px; }

@media (min-width: 821px) {
  /*
    Character detail page: keep the thumbnail a consistent size regardless of
    whether the Description <details> is collapsed or expanded.
  */
  .character-media-card .thumb-character-page {
    max-height: clamp(420px, 70vh, 660px);
  }
}

/* Character detail page: thumbnail on the left, voting on the right (stacks on mobile). */
.character-detail-grid {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.character-detail-left {
  /* Keep the thumbnail column from shrinking when the Description panel expands. */
  width: auto;
  max-width: clamp(220px, 38vw, 520px);
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: flex-start;
}
.character-detail-right {
  flex: 1 1 auto;
  /* Important for flexbox: allow the right column to wrap instead of forcing the left thumb to shrink. */
  min-width: 0;
}
.character-media-card {
  /* Shrink to fit the thumbnail instead of stretching full width. */
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.character-media-card .character-detail-media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: transparent;
}

/* Character detail page: before/after switch sits below the image frame. */
.character-photo-controls{
  display: flex;
  justify-content: flex-start;
}
.character-media-card .char-photo-switch{
  position: static;
  justify-content: center;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.character-media-card .char-photo-switch a{
  padding: 8px 12px;
  border-radius: 10px;
}
.character-detail-actions {
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 740px) {
  .character-detail-grid { flex-direction: column; }
  .character-detail-left { width: 100%; display: flex; justify-content: center; }
  .character-detail-right { min-width: 0; }
  /* On mobile, keep the Character vote-detail media from becoming overly tall. */
  .character-media-card { display: flex; width: 100%; align-items: center; }
  .character-media-card .character-detail-media {
    width: 100%;
    max-width: clamp(200px, 72vw, 320px);
    height: min(54vh, 480px);
    margin: 0 auto;
  }
  .character-media-card .character-detail-media-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .thumb-character-page,
  .thumb-character-page-video {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }
  .thumb-character-page.thumb-ph-lg { min-height: 180px; }
  .character-photo-controls { justify-content: center; }
}


@media (max-width: 740px){
  /* Albums detail: the page reuses Character media markup for the thumbnail selector.
     Override the Character mobile fixed-height frame so album art shrink-wraps like Seasons. */
  body[data-page-kind="album"] .character-media-card .character-detail-media{
    height: auto;
    max-width: 420px;
  }
}


/* Thumbnail placeholders + inline mobile thumbs */
.thumb-ph { display:inline-flex; align-items:center; justify-content:center; background:#0f131b; color:#aab2bf; font-size:11px; font-weight:700; letter-spacing:.04em; }
.thumb-ph-lg { display:flex; align-items:center; justify-content:center; background:#0f131b; color:#aab2bf; font-size:14px; font-weight:700; letter-spacing:.04em; }
.row-title-line { display:flex; gap:10px; align-items:flex-start; }
.row-title-line .row-title { flex: 1 1 auto; }
.thumb-inline { display:none; }
@media (max-width: 680px) { .thumb-inline { display:inline-flex; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height: var(--ui-control-height); padding: calc(var(--ui-control-padding-y) + 2px) calc(var(--ui-control-padding-x) + 2px); border-radius: 12px; border: 1px solid #333; background: #141414; color: #e7e7e7; text-decoration:none; line-height: 1; font-size: calc(14px * var(--ui-font-scale)); }
.btn:hover { background: #1b1b1b; }
.btn.btn-mini { min-height: calc(var(--ui-control-height) - 4px); padding: var(--ui-control-padding-y) var(--ui-control-padding-x); border-radius: 12px; font-size: calc(13px * var(--ui-font-scale)); }

/* Public list controls: give pager + search/reset a gentle accent glow (matches the colorful pills without overpowering them) */
.public-list-page .pager .btn:not(.btn-primary):not(.btn-danger),
.public-list-page .list-filters-actions .btn:not(.btn-primary):not(.btn-danger){
  --glow-buttons-rgb: var(--glow-list-rgb);
  --glow-buttons-int: var(--glow-list-int);
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-list-rgb), 0.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)),
    var(--btn-glass-bg);
  border-color: rgba(var(--glow-list-rgb), 0.26);
}

@media (pointer: fine){
  .public-list-page .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  .public-list-page .list-filters-actions .btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    border-color: rgba(var(--glow-list-rgb), 0.36);
  }
}

/* Public Downloads: give action buttons the same neutral list-control treatment as Reset. */
.custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger){
  --glow-buttons-rgb: var(--glow-list-rgb);
  --glow-buttons-int: var(--glow-list-int);
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-list-rgb), 0.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)),
    var(--btn-glass-bg);
  border-color: rgba(var(--glow-list-rgb), 0.26);
}

@media (pointer: fine){
  .custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    border-color: rgba(var(--glow-list-rgb), 0.36);
  }
}


/* Admin list controls: mirror the public pager + search/reset treatment, but keep it scoped to admin list filters and pagers only. */
body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger),
body[data-page-kind="admin"] .list-filters-actions .btn:not(.btn-primary):not(.btn-danger){
  --glow-buttons-rgb: var(--glow-admin-rgb);
  --glow-buttons-int: var(--glow-admin-int);
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-admin-rgb), 0.15), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)),
    var(--btn-glass-bg);
  border-color: rgba(var(--glow-admin-rgb), 0.24);
}

@media (pointer: fine){
  body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  body[data-page-kind="admin"] .list-filters-actions .btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    border-color: rgba(var(--glow-admin-rgb), 0.34);
  }
}

/* Auto-apply public list pages: hide the manual Search button, but keep Reset as a normal neutral button. */
.public-list-page--albums #albumsForm .list-filters-actions button[type="submit"],
.public-list-page--seasons #seasonsForm .list-filters-actions button[type="submit"],
.public-list-page--characters #charactersForm .list-filters-actions button[type="submit"],
.public-list-page--episodes #episodesForm .list-filters-actions button[type="submit"],
.public-list-page--elsewhere #elsewhereForm .list-filters-actions button[type="submit"],
.public-list-page--videos #videosForm .list-filters-actions button[type="submit"]{
  display: none;
}

/* Pager: make the current page obvious */
.pager .btn[aria-current="page"]{
  position: relative;
  padding: 9px 11px;
  background:
    radial-gradient(900px 120px at 50% 0%, rgba(255,255,255,0.14), rgba(255,255,255,0.0)),
    rgba(var(--glow-primary-rgb), 0.34);
  border: 2px solid rgba(var(--glow-primary-rgb), 0.70);
  outline: 2px solid rgba(var(--glow-primary-rgb), 0.30);
  outline-offset: 2px;
  color: #ffffff;
  font-weight: 950;
  letter-spacing: 0.02em;
  cursor: default;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
  box-shadow:
    var(--btn-shadow),
    0 0 34px rgba(var(--glow-primary-rgb), calc(1.00 * var(--glow-primary-int))),
    0 0 90px rgba(var(--glow-primary-rgb), calc(0.40 * var(--glow-primary-int))),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  transform: none;
}

/* Public list current page: keep the selected page button more neutral inside,
   and push the list accent into the surrounding glow instead. */
.public-list-page .pager .btn[aria-current="page"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 55%),
    rgba(var(--glow-list-rgb), 0.14) !important;
  background-color: rgba(var(--glow-list-rgb), 0.14) !important;
  border-color: rgba(var(--glow-list-rgb), 0.82);
  outline-color: rgba(var(--glow-list-rgb), 0.42);
  box-shadow: var(--btn-shadow);
}

/* Pulse lives on a separate glow layer so the number stays visually stable */
.pager .btn[aria-current="page"]::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: rgba(var(--glow-primary-rgb), 0.18);
  filter: blur(10px);
  opacity: 0.65;
  z-index: -1;
  pointer-events: none;
  animation: pagerGlowPulse 1.8s ease-in-out infinite;
}

.public-list-page .pager .btn[aria-current="page"]::before{
  display: none;
}

body[data-page-kind="admin"] .pager .btn[aria-current="page"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 55%),
    rgba(var(--glow-admin-rgb), 0.13) !important;
  background-color: rgba(var(--glow-admin-rgb), 0.13) !important;
  border-color: rgba(var(--glow-admin-rgb), 0.76);
  outline-color: rgba(var(--glow-admin-rgb), 0.36);
  box-shadow:
    var(--btn-shadow),
    0 0 28px rgba(var(--glow-admin-rgb), calc(0.92 * var(--glow-admin-int))),
    0 0 66px rgba(var(--glow-admin-rgb), calc(0.30 * var(--glow-admin-int)));
}

body[data-page-kind="admin"] .pager .btn[aria-current="page"]::before{
  background: rgba(var(--glow-admin-rgb), 0.18);
  filter: blur(10px);
  opacity: 0.60;
}

/* Keep it visually stable on hover/active */
@media (pointer: fine){
  .pager .btn[aria-current="page"]:hover{
    transform: none;
    filter: none;
  }
}

.pager .btn[aria-current="page"]::after{ opacity: 0; }
.pager .btn[aria-current="page"]:active{ transform: none; }

/* Subtle pulse for the current page glow layer */
@keyframes pagerGlowPulse{
  0%, 100%{
    opacity: 0.55;
    transform: scale(0.98);
  }
  50%{
    opacity: 0.95;
    transform: scale(1.03);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pager .btn[aria-current="page"]::before{
    animation: none !important;
  }
}

/* Primary button variant */
.btn.btn-primary { background:#1d6fe3; border:0; color:white; }
.btn.btn-primary:hover { filter: brightness(1.05); }

/* Dangerous/destructive actions */
.btn.btn-danger { background:#b42318; border:0; color:white; }
.btn.btn-danger:hover { filter: brightness(1.05); }

/* Admin home: large stylized tiles */
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.admin-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid #2b3444;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0)),
              radial-gradient(1000px 240px at 18% 0%, rgba(29,111,227,0.18), rgba(0,0,0,0)),
              #0f131b;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  text-decoration: none;
  color: #e7e7e7;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}

.admin-tile:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.02);
}

.admin-tile:active {
  transform: translateY(0px);
}

.admin-tile-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #dbe7ff;
  border: 1px solid #2b3444;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)), #101822;
}

.admin-tile-title {
  font-size: 16px;
  font-weight: 850;
}

.admin-tile-desc {
  color: #aab2bf;
  font-size: 13px;
  line-height: 1.35;
}

.admin-tile-danger {
  border-color: #3b2730;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0)),
              radial-gradient(1000px 240px at 18% 0%, rgba(235,87,87,0.18), rgba(0,0,0,0)),
              #0f131b;
}

.admin-tile-danger .admin-tile-icon {
  border-color: #3b2730;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0)), #1a0f12;
  color: #ffd7d7;
}

/* Simple grid helpers */
.grid2 { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.grid2 > * { min-width: 0; }
.grid2 input, .grid2 select { min-width: 0; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

/* Voting controls */

.community-rating-num {
  font-size: 26px;
  font-weight: 850;
  line-height: 1.15;
}

.vote-info-btn {
  font-weight: 750;
  max-width: 100%;
  white-space: normal;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid #2b3444;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.0)), #0f131b;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.vote-info-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.0)), #141a26;
  text-decoration: none !important;
}

/* Vote info modal (Legacy vs New) */
.voteinfo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  /* Animated open/close (default hidden) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.voteinfo-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s;
}

body.modal-open { overflow: hidden; }

.voteinfo-modal {
  width: min(760px, 100%);
  margin: 0;
  position: relative;
  max-height: calc(100vh - 44px);
  overflow: auto;

  /* Pop-up animation */
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
}

.voteinfo-overlay.is-open .voteinfo-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Respect motion preference */
html.motion-reduce .voteinfo-overlay {
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
html.motion-reduce .voteinfo-overlay.is-open {
  transition: opacity 140ms ease, visibility 0s;
}
html.motion-reduce .voteinfo-modal {
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 140ms ease;
  transform: translateY(8px) scale(0.99);
}

html.motion-off .voteinfo-overlay,
html.motion-off .voteinfo-modal {
  transition: none !important;
}

.voteinfo-title {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.voteinfo-modal p { margin: 0 0 10px 0; }

.voteinfo-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

@media (max-width: 480px) {
  .voteinfo-overlay { padding: 14px; }
}

/* Secondary style for the AIOWiki button (still matches the pill look) */
.aiowiki-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0)), #101822;
}

.aiowiki-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0)), #152234;
}

.vote-summary-card {
  margin-top: 2px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #2b3444;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 72%),
    radial-gradient(120% 120% at 0% 0%, rgba(29,111,227,0.18), rgba(29,111,227,0.00) 56%),
    #0f131b;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

.vote-summary-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vote-summary-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #9ad0ff;
}

.vote-summary-title {
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
  color: #f3f7ff;
}

.vote-summary-ring {
  margin-top: 12px;
}

.vote-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.vote-summary-card--no-legacy .vote-summary-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vote-summary-stat {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}

.vote-summary-stat--legacy {
  background: linear-gradient(180deg, rgba(72,182,255,0.12), rgba(72,182,255,0.04));
}

.vote-summary-stat--new {
  background: linear-gradient(180deg, rgba(29,111,227,0.14), rgba(29,111,227,0.05));
}

.vote-summary-stat-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #a8b7cb;
}

.vote-summary-stat--legacy .vote-summary-stat-label,
.vote-summary-stat--new .vote-summary-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vote-summary-stat--legacy .vote-summary-stat-label::before,
.vote-summary-stat--new .vote-summary-stat-label::before {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}

.vote-summary-stat--legacy .vote-summary-stat-label::before {
  content: "◔";
  color: #7fd2ff;
}

.vote-summary-stat--new .vote-summary-stat-label::before {
  content: "✦";
  color: #6ab3ff;
}

.vote-summary-stat-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
  color: #ffffff;
}

.vote-summary-stat-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #c3cfdd;
}

/* Episode vote block (episode detail page) */
.episode-vote-block{
  margin-top: 14px;
}

.vote-controls {
  /* Keep the vote block a reasonable width, but align it with the page content. */
  margin: 8px 0 0;
  width: 100%;
  max-width: 760px; /* keep Vote button the same width as the vote bar */
  text-align: left;
}

.vote-slider{
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 32px;          /* match the bar height so the overlay stays perfectly centered */
  overflow: visible;     /* allow the thumb glow to render outside the bar */
}

.vote-slider input[type="range"]{
  width: 100%;
  min-width: 0;
  height: 32px;
  margin: 0;
  display: block;
}

.vote-overlay{
  position: absolute;
  inset: 0;              /* fill the bar area */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  isolation: isolate;
}

.vote-overlay-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 22px;
  min-width: 56px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #ffffff;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.18);

  /* Crisp outline (no blur) so it stays readable on both blue and gray. */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 -1px 0 rgba(0,0,0,0.85),
    1px 0 0 rgba(0,0,0,0.85),
    -1px 0 0 rgba(0,0,0,0.85);
}

/* Keep the overlay aligned when the mobile slider height increases. */
@media (max-width: 680px){
  .vote-slider{ height: 44px; }
  .vote-slider input[type="range"]{ height: 44px; }
  .vote-overlay-label{ font-size: 16px; height: 24px; padding: 0 12px; }
}


/* Cool, useful vote bar: looks like a progress bar while still behaving like a slider. */
.vote-range {
  --p: 80%;
  /* Chromium/Edge gets an exact pixel fill stop from the small sync script in
     base.html so the blue fill reaches under the native thumb like Firefox. */
  --vote-thumb-size: 22px;
  --vote-fill-end: var(--vote-native-fill-end, var(--p));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, #48b6ff 0, #1d6fe3 var(--vote-fill-end), #e2e5ea var(--vote-fill-end), #e2e5ea 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 20px rgba(0,0,0,0.28);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

.vote-range::-webkit-slider-runnable-track {
  height: 32px;
  border-radius: 999px;
  background: transparent;
}

.vote-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.40);
  cursor: pointer;
}

.vote-range::-moz-range-track {
  height: 32px;
  border-radius: 999px;
  background: #e2e5ea;
  border: 1px solid rgba(0,0,0,0.18);
}

.vote-range::-moz-range-progress {
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rating-meter-fill-start, #48b6ff), var(--rating-meter-fill-end, #1d6fe3));
}

.vote-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.40);
  cursor: pointer;
}

.vote-range:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.vote-hint { margin-top: 8px; }

/* Vote input + % badge on one line, Vote button always full-width */
.vote-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Smaller, clearly-editable number box (desktop default) */
.vote-number {
  width: 76px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  cursor: text;
  font-size: 15px;
  text-align: center;
}
.vote-number:focus { outline: 2px solid #1d6fe3; outline-offset: 2px; }

/* Remove number spinners so values don't get obscured in narrow inputs */
.vote-number::-webkit-outer-spin-button,
.vote-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vote-number[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Compact % badge (no weird sizing/overlap) */
.vote-badge {
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 22px;
  font-weight: 850;
  min-height: 44px;
  min-width: 84px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Full-width button everywhere, but not huge on desktop */
.vote-btn {
  flex: 1 1 100%;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 14px;
}

/* Confirm vote actions */
.confirm-actions { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.confirm-actions .btn { min-height: 44px; }

/* Mobile-friendly voting (portrait) */
@media (max-width: 680px) {
  .vote-summary-card {
    padding: 14px;
  }

  .vote-summary-title {
    font-size: 18px;
  }

  .vote-summary-stats {
    grid-template-columns: 1fr;
  }

  .vote-summary-stat-value {
    font-size: 24px;
  }

  /* Keep the info buttons slightly smaller on phones. */
  .vote-info-btn { font-size: 13px; padding: 9px 12px; }

  .vote-slider input[type="range"] { height: 44px; }
  .vote-range { --vote-thumb-size: 28px; height: 44px; }
  .vote-range::-webkit-slider-runnable-track { height: 44px; }
  .vote-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 8px; }
  .vote-range::-moz-range-track { height: 44px; }
  .vote-range::-moz-range-progress { height: 44px; }
  .vote-range::-moz-range-thumb { width: 28px; height: 28px; }
  .vote-row { gap: 8px; }
  .vote-overlay-label { font-size: 16px; }
  .vote-number { width: 64px; padding: 6px 8px; font-size: 14px; }
  .vote-badge { padding: 10px 12px; font-size: 18px; min-height: 44px; min-width: 72px; }
  .vote-btn { min-height: 44px; padding: 12px 14px; font-size: 16px; }
  .confirm-actions { flex-direction: column; }
  .confirm-actions .btn { width: 100%; }
}

/* Form controls */
input[type="text"], input[type="number"], input[type="url"], input[type="file"], select, textarea {
  max-width: 100%;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
}
select { cursor: pointer; }
select { color-scheme: dark; }
select option, select optgroup {
  background-color: #141414;
  color: #e7e7e7;
}

/* Episodes: Album selector (desktop): use a styled trigger + an in-page listbox overlay.
   This avoids Firefox native popup paint glitches while keeping the control the same height
   and giving the dropdown list the same bordered popover look as the other selects. */
.select-popover { position: relative; }

/* Default: mobile/touch uses the native <select> (better UX). */
.select-popover .select-display { display: none; }

/* Desktop enhanced mode (enabled via JS). */
.select-popover.enhanced .select-display {
  display: block;
  width: 100%;
  min-height: var(--ui-control-height);
  text-align: left;
  padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 24px) var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  cursor: pointer;
  position: relative;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
}
.select-popover.enhanced .select-display::after {
  content: "\25BE"; /* small down triangle */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8c0cc;
  pointer-events: none;
}
.select-popover.enhanced .select-display:focus {
  outline: 2px solid #1d6fe3;
  outline-offset: 2px;
}

/* Header Motion/Theme: keep keyboard focus styling, but avoid the persistent focus ring after mouse/touch selection. */
header .header-select-popover.enhanced .motion-select.select-display:focus:not(:focus-visible),
header .header-select-popover.enhanced .theme-select.select-display:focus:not(:focus-visible){
  outline: none;
  outline-offset: 0;
}

/* Episodes: disable lift/hover animation on the Album dropdown display */
.select-popover.enhanced .select-display,
.select-popover.enhanced .select-display:hover,
.select-popover.enhanced .select-display:active {
  transform: none !important;
  transition: none !important;
}
.select-popover.enhanced .select-display:hover {
  filter: none !important;
}

/* Hide native select until opened as a listbox. */
.select-popover.enhanced select { display: none; }

/* Open state: show listbox as an overlay below the trigger. */
.select-popover.enhanced.open select {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2000;
  padding: 0; /* listbox mode */
  border: 1px solid #333;
  border-radius: 10px;
  background: #141414;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}
.select-popover.enhanced.open select option,
.select-popover.enhanced.open select optgroup {
  background-color: #141414;
  color: #e7e7e7;
}
/* Inline validation helpers */
.input-error { border-color:#e35d5d !important; }
.help-text { font-size: 12px; margin-top: 6px; }
.help-text.ok { color:#aab2bf; }
.help-text.bad { color:#ff9a9a; }

/* Tables on small screens */
.table-wrap {
  overflow: visible;
  border: 1px solid #222;
  border-radius: 16px;
  background:#11141b;
}

/* Mobile/tablet: prevent side-swipe scrolling inside tables (keeps lists from sliding left/right). */
@media (max-width: 1024px) {
  .table-wrap{
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-y;
  }
  .table-wrap table{
    min-width: 0 !important;
    width: 100%;
  }
  .table-wrap::-webkit-scrollbar{ display:none; }

  /* Make list tables fit the wrapper even when a badge is very long.
     We already block horizontal swipe on touch; this prevents tiny overflows from being clipped. */
  .episodes-table,
  .elsewhere-table,
  .albums-table,
  .seasons-table,
  .characters-table,
  .arcs-table{
    table-layout: fixed;
  }

  /* Episodes: keep long Album badges from forcing the table wider than the wrapper. */
  .episodes-table th:nth-child(2), .episodes-table td:nth-child(2){ min-width: 0; }
  .episodes-table td:nth-child(2){ overflow: hidden; }
  .episodes-table .row-title-line,
  .episodes-table .row-meta{ min-width: 0; }
  .episodes-table .badge-episode-album{
    display: inline-flex;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  /* Episodes: on fixed-layout tables, columns can split evenly unless we set widths.
     Keep # and Rating compact so Title gets most of the space. */
  .episodes-table:not(.episodes-table--detail) th:first-child,
  .episodes-table:not(.episodes-table--detail) td:first-child{
    width: 46px;
    max-width: 46px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }

  .episodes-table:not(.episodes-table--detail) th:nth-child(4),
  .episodes-table:not(.episodes-table--detail) td:nth-child(4){
    width: 98px;
    max-width: 98px;
  }

/* Mobile/tablet: keep rating meters compact (prevents the Rating column from clipping). */
@media (max-width: 1024px) {
  /* Make the Rating column a bit tighter so the header text fits. */
  .albums-table th:nth-child(3), .albums-table td:nth-child(3),
  .seasons-table th:nth-child(3), .seasons-table td:nth-child(3),
  .characters-table th:nth-child(4), .characters-table td:nth-child(4),
  .episodes-table th:nth-child(4), .episodes-table td:nth-child(4),
  .elsewhere-table th:nth-child(4), .elsewhere-table td:nth-child(4),
  .arcs-table th:nth-child(2), .arcs-table td:nth-child(2),
  .episodes-table.episodes-table--detail th:nth-child(3), .episodes-table.episodes-table--detail td:nth-child(3){
    min-width: 86px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
  }

  /* Characters: Episodes column compact */
  .characters-table th:nth-child(3), .characters-table td:nth-child(3){
    min-width: 72px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
  }

  /* Shrink-to-fit rating meters for list tables that did not have a mobile width rule before. */
  .characters-table td:nth-child(4) .rating-meter,
  .arcs-table td:nth-child(2) .rating-meter{
    display: inline-flex;
    width: 100%;
    max-width: 112px;
  }

  /* Slightly thicker bar so it still reads well at the smaller width. */
  .table-wrap .rating-meter__bar{ height: 8px; }
  .table-wrap .rating-meter__mark{ height: 16px; }
}

/* Mobile/tablet: Admin tables should never force horizontal page scroll. */
@media (max-width: 1024px) {
  /* Fixed-layout + wrapping prevents long titles/IDs/URLs from widening the table. */
  .table-wrap table[class*="admin-"]{
    table-layout: fixed;
  }
  .table-wrap table[class*="admin-"] th,
  .table-wrap table[class*="admin-"] td{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep rating meters from forcing a wide column in Admin lists (e.g., Manage arcs). */
  .table-wrap table[class*="admin-"] td .rating-meter{
    display: inline-flex;
    width: 100%;
    max-width: 112px;
  }
}

.js #episodesResults { transition: opacity 120ms ease; }
.js #albumsResults,
.js #clubSeasonsResults,
.js #charactersResults { transition: opacity 120ms ease; }

.js #episodesResults.is-loading { opacity: 0.72; }
.js #albumsResults.is-loading,
.js #clubSeasonsResults.is-loading,
.js #charactersResults.is-loading { opacity: 0.72; }

.table-wrap table { min-width: 780px; }

/* Fixed table header clone (AIOStickyTables). */
.sticky-table-clone-wrap{
  position:fixed;
  left:0;
  top:0;
  z-index:10100;
  display:none;
  overflow:hidden;
  contain: layout paint;
  will-change: top, left;
}
.sticky-table-clone-wrap .sticky-table-clone{ margin:0 !important; will-change: transform; }
.sticky-table-clone-wrap .sticky-table-clone thead th{
  /* Prevent existing sticky CSS from fighting the fixed clone. */
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  backface-visibility: hidden;
}
/* When the fixed header clone is shown, hide the original thead to prevent double headers. */
table.aio-sticky-clone-active > thead{visibility:hidden !important; pointer-events:none !important;}

/* Sticky table headers on desktop (sticky TH cells).
   Sticky THEAD can overlap the first rows in Chromium-based browsers; sticky TH is more reliable. */
@media (min-width: 1025px) and (pointer: fine) {
  .episodes-table thead,
  .albums-table thead,
  .seasons-table thead,
  .characters-table thead,
  .arcs-table thead {
    position: relative;
    z-index: 9;
  }

  .episodes-table thead th,
  .albums-table thead th,
  .seasons-table thead th,
  .characters-table thead th,
  .arcs-table thead th {
    position: sticky;
    top: var(--sticky-top, 0px);
    z-index: 10090;
    background: #11141b;
    background-clip: padding-box;
    box-shadow: 0 1px 0 #222;
  }
  /* Match the table wrapper's rounded top corners without changing wrapper overflow. */
  .episodes-table thead th:first-child,
  .albums-table thead th:first-child,
  .seasons-table thead th:first-child,
  .characters-table thead th:first-child,
  .arcs-table thead th:first-child {
    border-top-left-radius: 15px;
  }

  .episodes-table thead th:last-child,
  .albums-table thead th:last-child,
  .seasons-table thead th:last-child,
  .characters-table thead th:last-child,
  .arcs-table thead th:last-child {
    border-top-right-radius: 15px;
  }
}

/* Clickable sortable column headers (table lists) */
.data-table thead th.sortable { white-space: nowrap; }

.data-table thead th.sortable .th-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  text-shadow: none;
  filter: none;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
}
.data-table thead th.sortable .th-sort:focus { outline: none; }

/* Consistent underline for both <a> and <button>. */
.data-table thead th.sortable .th-sort::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.85);
  transform-origin: left;
  transition: opacity 120ms ease, transform 120ms ease;
}
.data-table thead th.sortable .th-sort:hover::before,
.data-table thead th.sortable .th-sort:focus::before {
  opacity: 0.70;
  transform: scaleX(1);
}
.data-table thead th.sortable.is-active .th-sort::before {
  opacity: 0.95;
  transform: scaleX(1);
}

/* Focus ring (keyboard only). */
.data-table thead th.sortable .th-sort:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

.data-table thead th.sortable .th-sort:hover::after,
.data-table thead th.sortable .th-sort:focus::after { opacity: 0.7; }

.data-table thead th.sortable .th-sort::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.45;
  transform: translateY(1px);
}

.data-table thead th.sortable.is-active .th-sort::after { opacity: 0.95; }

.data-table thead th.sortable.is-active.dir-ASC .th-sort::after { transform: translateY(-1px) rotate(180deg); }

.data-table thead th.sortable.is-active.dir-DESC .th-sort::after { transform: translateY(1px); }

@media (max-width: 820px) { .table-wrap table { min-width: 680px; } }
@media (max-width: 680px) { .table-wrap table { min-width: 0; } }

button.btn{ cursor: pointer; }

/* Make <a class="btn btn-primary"> hover and press match button behavior */
/* Focus ring for primary link-buttons (keyboard navigation) */
a.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button.btn:focus-visible,
input.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn-ghost:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Mobile: keep tables, but collapse extra columns into the Title cell (row-meta) */
@media (max-width: 680px) {
  .container { flex-direction: column; }
  nav { width: 100%; border-right: none; border-bottom: 1px solid #222; padding: 10px 12px; display:flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
  nav a { display:inline-flex; padding: 8px 10px; }
  main { padding: 12px; }

  /* Bigger tap targets (but keep mini buttons compact, especially inside table row-meta) */
  .btn:not(.btn-mini), button.btn { min-height: 44px; }
  .btn.btn-mini {
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
  }
  input[type="text"], input[type="number"], select, textarea { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .site-notice-textarea { min-height: 84px; }
  .select-popover { min-height: 44px; }
  .row-title { font-size: 16px; }
  .row-meta { display:flex; }

  /* Episodes: on mobile we show Album as a badge under Title, and keep Rating as the right-side column. */
  .episodes-table .badge-episode-album {
    display: inline-flex;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Avoid duplicate: rating is visible as the right column. */
  .episodes-table .badge-episode-rating { display: none; }

  /* Reduce table padding a bit */
  th, td { padding: 10px 10px; }

  /* Episodes tables: keep #, Title, Rating visible; move Album into row-meta; hide Votes + AIOWiki */
  .episodes-table th:nth-child(3), .episodes-table td:nth-child(3),
  .episodes-table th:nth-child(5), .episodes-table td:nth-child(5),
  .episodes-table th:nth-child(6), .episodes-table td:nth-child(6) { display:none; }

  /* Rating column alignment and compact width */
  .episodes-table th:nth-child(4), .episodes-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .episodes-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Elsewhere: keep Thumb + Title + Rating visible; hide # + Votes + AIOWiki (already shown in row-meta) */
  .elsewhere-table th:nth-child(2), .elsewhere-table td:nth-child(2),
  .elsewhere-table th:nth-child(5), .elsewhere-table td:nth-child(5),
  .elsewhere-table th:nth-child(6), .elsewhere-table td:nth-child(6) { display:none; }

  /* Elsewhere: rating stays as the right-side column on mobile */
  .elsewhere-table th:nth-child(4), .elsewhere-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .elsewhere-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Album/Season detail pages: episodes table has no Album column (#, Title, Rating, Votes, AIOWiki) */
  .episodes-table.episodes-table--detail th:nth-child(3), .episodes-table.episodes-table--detail td:nth-child(3) { display: table-cell; }
  .episodes-table.episodes-table--detail th:nth-child(4), .episodes-table.episodes-table--detail td:nth-child(4),
  .episodes-table.episodes-table--detail th:nth-child(5), .episodes-table.episodes-table--detail td:nth-child(5) { display:none; }
  .episodes-table.episodes-table--detail th:nth-child(3), .episodes-table.episodes-table--detail td:nth-child(3) { text-align: right; white-space: nowrap; }
  .episodes-table.episodes-table--detail td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Albums: keep Thumb + Title + Rating visible; hide Episodes + AIOWiki (already shown in row-meta) */
  .albums-table th:nth-child(4), .albums-table td:nth-child(4),
  .albums-table th:nth-child(5), .albums-table td:nth-child(5) { display:none; }

  /* Albums: rating stays as the right-side column on mobile */
  .albums-table th:nth-child(3), .albums-table td:nth-child(3) { text-align: right; white-space: nowrap; }
  .albums-table td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Club Seasons: keep Thumb + Title + Rating visible; hide Episodes + AIOWiki (already shown in row-meta). */
  .seasons-table th:nth-child(4), .seasons-table td:nth-child(4),
  .seasons-table th:nth-child(5), .seasons-table td:nth-child(5) { display:none; }

  /* Club Seasons: rating stays as the right-side column on mobile */
  .seasons-table th:nth-child(3), .seasons-table td:nth-child(3) { text-align: right; white-space: nowrap; }
  .seasons-table td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Albums/Seasons: show row number (not album/season number) in the # column on mobile. */
  .albums-table .cell-itemnum,
  .seasons-table .cell-itemnum { display:none; }
  .albums-table .cell-rownum,
  .seasons-table .cell-rownum { display:inline; }

  /* Arcs: keep Title + Rating; hide Votes + Episodes + AIOWiki (already shown in row-meta). */
  .arcs-table th:nth-child(3), .arcs-table td:nth-child(3),
  .arcs-table th:nth-child(4), .arcs-table td:nth-child(4),
  .arcs-table th:nth-child(5), .arcs-table td:nth-child(5) { display:none; }

  /* Arcs: visually align Title with other tabs that have a # column. */
  .arcs-table th:nth-child(1), .arcs-table td:nth-child(1) { padding-left: 42px; }

  /* Arcs: rating stays as the right-side column on mobile */
  .arcs-table th:nth-child(2), .arcs-table td:nth-child(2) { text-align: right; white-space: nowrap; }
  .arcs-table td:nth-child(2) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Characters: match the Seasons mobile layout so the meta badges have the same room and stacking. */
  .characters-table th:nth-child(3), .characters-table td:nth-child(3),
  .characters-table th:nth-child(5), .characters-table td:nth-child(5),
  .characters-table th:nth-child(6), .characters-table td:nth-child(6) { display:none; }

  /* Characters: rating stays as the right-side column on mobile */
  .characters-table th:nth-child(4), .characters-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .characters-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Admin tables: keep Title + Edit, hide the rest */
  .admin-albums-table th:nth-child(1), .admin-albums-table td:nth-child(1),
  .admin-albums-table th:nth-child(2), .admin-albums-table td:nth-child(2),
  .admin-albums-table th:nth-child(4), .admin-albums-table td:nth-child(4) { display:none; }

  /* Admin seasons: same behavior as admin albums, but isolated. */
  .admin-seasons-table th:nth-child(1), .admin-seasons-table td:nth-child(1),
  .admin-seasons-table th:nth-child(2), .admin-seasons-table td:nth-child(2),
  .admin-seasons-table th:nth-child(4), .admin-seasons-table td:nth-child(4) { display:none; }

  /* Admin characters: keep Name + Edit, hide the rest */
  .admin-characters-table th:nth-child(1), .admin-characters-table td:nth-child(1),
  .admin-characters-table th:nth-child(2), .admin-characters-table td:nth-child(2),
  .admin-characters-table th:nth-child(3), .admin-characters-table td:nth-child(3),
  .admin-characters-table th:nth-child(5), .admin-characters-table td:nth-child(5),
  .admin-characters-table th:nth-child(6), .admin-characters-table td:nth-child(6) { display:none; }

  .admin-episodes-table th:nth-child(1), .admin-episodes-table td:nth-child(1),
  .admin-episodes-table th:nth-child(3), .admin-episodes-table td:nth-child(3) { display:none; }

  /* Make the last column (Edit) align nicely when it's the only extra column */
  .admin-albums-table td:last-child,
  .admin-seasons-table td:last-child,
  .admin-characters-table td:last-child,
  .admin-episodes-table td:last-child { white-space: nowrap; }
}

/* Characters list: on narrow portrait screens, hide the redundant Vote button (tap the name/row to vote) */
@media (max-width: 680px) and (orientation: portrait) {
  .characters-table .character-list-vote { display: none; }
}

/* Mobile landscape: many phones are >680px wide in landscape, which can trigger
   the desktop sidebar layout and make the page feel off-center.
   Stack nav above content for touch devices in landscape.
   Target only the top-level layout container to avoid affecting other .container uses.
*/
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) {
  body > .container { flex-direction: column; }
  body > .container > nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #222;
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  body > .container > nav a { display: inline-flex; padding: 8px 10px; }
  body > .container > nav > .random-article-dice {
    width: 34px;
    height: 34px;
    padding: 0;
    align-self: center;
  }
  body > .container > main { padding: 12px; }

  /* Episodes: on touch landscape we show Album as a badge under Title, and keep Rating as the right-side column. */
  .episodes-table .row-title { font-size: 16px; }
  .episodes-table .row-meta { display:flex; }
  .episodes-table .badge-episode-album {
    display: inline-flex;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .episodes-table .badge-episode-rating { display: none; }
  .episodes-table th, .episodes-table td { padding: 10px 10px; }
  .episodes-table th:nth-child(3), .episodes-table td:nth-child(3),
  .episodes-table th:nth-child(5), .episodes-table td:nth-child(5),
  .episodes-table th:nth-child(6), .episodes-table td:nth-child(6) { display:none; }
  .episodes-table th:nth-child(4), .episodes-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .episodes-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Album/Season detail pages: episodes table has no Album column (#, Title, Rating, Votes, AIOWiki) */
  .episodes-table.episodes-table--detail th:nth-child(3), .episodes-table.episodes-table--detail td:nth-child(3) { display: table-cell; }
  .episodes-table.episodes-table--detail th:nth-child(4), .episodes-table.episodes-table--detail td:nth-child(4),
  .episodes-table.episodes-table--detail th:nth-child(5), .episodes-table.episodes-table--detail td:nth-child(5) { display:none; }
  .episodes-table.episodes-table--detail th:nth-child(3), .episodes-table.episodes-table--detail td:nth-child(3) { text-align: right; white-space: nowrap; }
  .episodes-table.episodes-table--detail td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Albums/Seasons/Characters: same landscape touch treatment as mobile portrait. */
  .table-wrap table { min-width: 0; }

  .albums-table .row-meta,
  .elsewhere-table .row-meta,
  .seasons-table .row-meta,
  .characters-table .row-meta,
  .arcs-table .row-meta { display:flex; }

  .albums-table th, .albums-table td,
  .seasons-table th, .seasons-table td,
  .characters-table th, .characters-table td,
  .arcs-table th, .arcs-table td { padding: 10px 10px; }

  /* Albums/Seasons: show row number (not album/season number) in the # column on touch landscape. */
  .albums-table .cell-itemnum,
  .seasons-table .cell-itemnum { display:none; }
  .albums-table .cell-rownum,
  .seasons-table .cell-rownum { display:inline; }

  /* Albums: keep Thumb + Title + Rating visible; hide Episodes + AIOWiki (already shown in row-meta) */
  .albums-table th:nth-child(4), .albums-table td:nth-child(4),
  .albums-table th:nth-child(5), .albums-table td:nth-child(5) { display:none; }

  /* Albums: rating stays as the right-side column on touch landscape */
  .albums-table th:nth-child(3), .albums-table td:nth-child(3) { text-align: right; white-space: nowrap; }
  .albums-table td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Club Seasons: keep Thumb + Title + Rating visible; hide Episodes + AIOWiki (already shown in row-meta) */
  .seasons-table th:nth-child(4), .seasons-table td:nth-child(4),
  .seasons-table th:nth-child(5), .seasons-table td:nth-child(5) { display:none; }

  /* Elsewhere: keep Thumb + Title + Rating visible; hide # + Votes + AIOWiki (already shown in row-meta) */
  .elsewhere-table th:nth-child(2), .elsewhere-table td:nth-child(2),
  .elsewhere-table th:nth-child(5), .elsewhere-table td:nth-child(5),
  .elsewhere-table th:nth-child(6), .elsewhere-table td:nth-child(6) { display:none; }

  /* Elsewhere: rating stays as the right-side column on touch landscape */
  .elsewhere-table th:nth-child(4), .elsewhere-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .elsewhere-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Arcs: keep Title + Rating; hide Votes + Episodes + AIOWiki (already shown in row-meta). */
  .arcs-table th:nth-child(3), .arcs-table td:nth-child(3),
  .arcs-table th:nth-child(4), .arcs-table td:nth-child(4),
  .arcs-table th:nth-child(5), .arcs-table td:nth-child(5) { display:none; }

  /* Club Seasons: rating stays as the right-side column on touch landscape */
  .seasons-table th:nth-child(3), .seasons-table td:nth-child(3) { text-align: right; white-space: nowrap; }
  .seasons-table td:nth-child(3) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Arcs: rating stays as the right-side column on touch landscape */
  .arcs-table th:nth-child(2), .arcs-table td:nth-child(2) { text-align: right; white-space: nowrap; }
  .arcs-table td:nth-child(2) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Characters: match the Seasons touch layout so the meta badges keep the same spacing. */
  .characters-table th:nth-child(3), .characters-table td:nth-child(3),
  .characters-table th:nth-child(5), .characters-table td:nth-child(5),
  .characters-table th:nth-child(6), .characters-table td:nth-child(6) { display:none; }

  /* Characters: rating stays as the right-side column on touch landscape */
  .characters-table th:nth-child(4), .characters-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .characters-table td:nth-child(4) .rating-meter { display: inline-flex; width: 100%; max-width: 112px; }

  /* Characters list: hide the redundant Vote button on mobile landscape (tap the row/name to vote). */
  .characters-table .character-list-vote { display:none; }
}

/* Site notice banner */
.site-notice {
  border-top: 1px solid rgba(var(--title-text-rgb, 154, 208, 255), 0.16);
  border-bottom: 1px solid rgba(var(--title-text-rgb, 154, 208, 255), 0.24);
  background:
    linear-gradient(
      90deg,
      rgba(var(--title-text-rgb, 154, 208, 255), 0.10),
      rgba(var(--title-text-rgb, 154, 208, 255), 0.05) 48%,
      rgba(var(--title-text-rgb, 154, 208, 255), 0.08)
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.site-notice-inner {
  padding: 10px 16px;
  font-size: var(--site-notice-font-size, 14px);
  color: var(--title-text-color, #e7e9ef);
}

/* Admin config overhaul */
.admin-config-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cfg-unsaved-banner {
  position: sticky;
  top: 62px;
  z-index: 9;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 126, 126, 0.45);
  background: rgba(160, 35, 35, 0.92);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);

  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.cfg-unsaved-title {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.cfg-unsaved-sub {
  margin-top: 2px;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}

.cfg-unsaved-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 680px) {
  .cfg-unsaved-banner { top: 58px; }
  .cfg-unsaved-actions { width: 100%; justify-content: flex-start; }
}

.config-bulk {
  margin: 0;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
}

.config-section h2 {
  margin-bottom: 10px;
  font-size: calc(1.5rem * var(--ui-heading-scale));
}

/* Admin config: subsection divider line */
.cfg-subdivider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.cfg-subdivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #2b2f3a;
}

.config-item {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #2b2f3a;
}

.config-item:first-of-type {
  border-top: 0;
}

.config-item-wide {
  grid-template-columns: 1fr;
  align-items: start;
}

.config-item-wide .config-item-right {
  width: 100%;
}

/* Keep controls snug to the right edge of the fixed right column. */
.config-item-right {
  justify-self: end;
}

.config-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.config-textarea-large {
  min-height: 280px;
  resize: vertical;
}

@media (max-width: 520px) {
  .config-item {
    grid-template-columns: 1fr;
  }

  /* On mobile the layout becomes single-column, so align controls normally. */
  .config-item-right {
    justify-self: start;
  }
}

.config-label {
  font-weight: 700;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
  margin-bottom: 2px;
}

.label,
.switch-label,
.mobile-search-toggle__label{
  font-size: calc(0.95rem * var(--ui-font-scale));
  line-height: 1.35;
}

/* Admin config: color preview swatches (hex / rgba inputs) */
.cfg-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Admin config: stack paired intensity controls below their hex color text box. */
.admin-config .config-item-right:has(> .cfg-color-row + label > input[type="number"][name*="_intensity"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.admin-config .config-item-right:has(> .cfg-color-row + label > input[type="number"][name*="_intensity"]) > label {
  align-self: flex-start;
}

.cfg-color-swatch {
  --cfg-color: transparent;
  --cfg-glow: transparent;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45) inset,
    0 0 16px var(--cfg-glow);
}

.cfg-color-swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.08)),
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.08));
}

.cfg-color-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cfg-color);
}

.cfg-color-swatch[data-invalid="1"] {
  border-color: rgba(255, 95, 95, 0.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45) inset,
    0 0 16px rgba(255, 95, 95, 0.35);
}

.config-savebar {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;

  position: sticky;
  bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #30374a;
  border-radius: 14px;
  background: rgba(10, 12, 18, 0.92);
  z-index: 5;
}

.config-savebar.dirty {
  border-color: #4a5d91;
}

.config-savebar button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.config-advanced {
  margin-top: 12px;
}

.config-advanced summary {
  cursor: pointer;
}

.config-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.config-filter-row input {
  min-width: 240px;
}

.config-table {
  margin-top: 10px;
}

.config-table td {
  vertical-align: top;
}

/* Toggle switch */
.switch {
  display: inline-flex;
  position: relative;
  line-height: 1.1;
  gap: 10px;
  align-items: center;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}

.switch input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #414756;
  background: #1b2030;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 120ms ease, border-color 120ms ease;
}

/* Keyboard focus ring for toggle switches (custom checkboxes). */
.switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7e9ef;
  transition: transform 120ms ease;
}

.switch input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
}

.switch input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.switch-label {
  font-weight: 600;
}

/* ==========================================================================
   v64: Glass UI + button micro-animations
   - Keeps existing layout/colors, but adds translucent "glass" surfaces.
   - Adds subtle hover/press/shine interactions to buttons and chips.
   ========================================================================== */

:root{
  /* Background and glass surfaces */
  --bg-base: #0b0c10;
  --bg-grad-a: rgba(29,111,227,0.22);
  --bg-grad-b: rgba(154,208,255,0.12);
  --bg-grad-c: rgba(154,90,255,0.10);

  --glass-bg: rgba(15, 19, 27, 0.28);
  --glass-bg-weak: rgba(15, 19, 27, 0.18);
  --glass-border: rgba(255,255,255,0.14);
  --glass-border-strong: rgba(154,208,255,0.26);
  --glass-shadow: 0 22px 54px rgba(0,0,0,0.60);

  /* Buttons */
  --btn-glass-bg: rgba(18, 22, 32, 0.40);
  --btn-glass-bg-hover: rgba(24, 30, 44, 0.52);
  --btn-glass-border: rgba(255,255,255,0.16);
  --btn-shadow: 0 10px 24px rgba(0,0,0,0.45);
  --btn-shadow-hover: 0 20px 44px rgba(0,0,0,0.62);

/* Animation glow (customizable in Admin config) */
--glow-tabs-rgb: 29,111,227;
--glow-tabs-int: 0.55;
--glow-buttons-rgb: 29,111,227;
--glow-buttons-int: 0.45;
--glow-admin-rgb: 154,208,255;
--glow-admin-int: 0.50;
--glow-primary-rgb: 29,111,227;
--glow-primary-int: 0.65;
--glow-danger-rgb: 180,35,24;
--glow-danger-int: 0.60;
--glow-aiowiki-rgb: 29,111,227;
--glow-aiowiki-int: 0.50;
--glow-list-rgb: 154,208,255;
--glow-list-int: 0.25;
}

/* App background */
body{
  background:
    radial-gradient(1100px 520px at 18% 2%, var(--bg-grad-a), transparent 60%),
    radial-gradient(900px 420px at 86% 18%, var(--bg-grad-b), transparent 58%),
    radial-gradient(900px 520px at 48% 110%, var(--bg-grad-c), transparent 55%),
    linear-gradient(180deg, #07080c, var(--bg-base) 44%, #07080c);
}

.skip-link{ z-index: 50; }
header, .site-notice, .container{ position: relative; z-index: 1; }

/* Big frosted "shell" around nav + main (desktop gets rounded corners) */

/* --------------------------------------------------------------------------
   Button animations (subtle, fast, and respects reduced-motion)
   -------------------------------------------------------------------------- */

/* Base animation + "shine" overlay */
:is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn){
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
  will-change: transform;
}

:is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn)::after{
  content: "";
  position: absolute;
  inset: -50% -60%;
  background: linear-gradient(115deg, transparent 34%, rgba(var(--btn-shimmer-rgb),0.24) 50%, transparent 66%);
  transform: translateX(-60%);
  opacity: 0;
  transition: transform 720ms ease, opacity 260ms ease;
  pointer-events: none;
}

/* Hover/press behaviors, but avoid hover-only effects on touch */
@media (pointer: fine){
  :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):not(.btn-primary):not(.btn-danger):hover:not(:active){
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      var(--btn-shadow-hover),
      0 0 calc(34px * var(--glow-buttons-int)) rgba(var(--glow-buttons-rgb), calc(0.60 * var(--glow-buttons-int))),
      0 0 calc(72px * var(--glow-buttons-int)) rgba(var(--glow-buttons-rgb), calc(0.22 * var(--glow-buttons-int)));
  }

  
/* AIOWiki links: allow a separate glow setting */
a.btn.btn-aiowiki, button.btn-aiowiki{
  --glow-buttons-rgb: var(--glow-aiowiki-rgb);
  --glow-buttons-int: var(--glow-aiowiki-int);
}

/* Primary/Danger keep their own glow style (not affected by Buttons glow settings) */
  .btn.btn-primary:hover:not(:active),
  button.btn-primary:hover:not(:active){
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      var(--btn-shadow-hover),
      0 0 26px rgba(var(--glow-primary-rgb), calc(0.95 * var(--glow-primary-int))),
      0 0 66px rgba(var(--glow-primary-rgb), calc(0.40 * var(--glow-primary-int)));
    filter: brightness(1.06);
  }
  .btn.btn-danger:hover:not(:active),
  button.btn-danger:hover:not(:active){
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      var(--btn-shadow-hover),
      0 0 26px rgba(var(--glow-danger-rgb), calc(0.92 * var(--glow-danger-int))),
      0 0 66px rgba(var(--glow-danger-rgb), calc(0.38 * var(--glow-danger-int)));
    filter: brightness(1.06);
  }
  :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):hover:not(:active)::after{
    opacity: 1;
    transform: translateX(70%);
  }
}

:is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):active{
  transform: translateY(0px) scale(0.96);
}

:is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):active{
  box-shadow: 0 10px 18px rgba(0,0,0,0.55);
}

/* Glass look for "neutral" buttons only */
.btn:not(.btn-primary):not(.btn-danger){
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.0)), var(--btn-glass-bg);
  border: 1px solid var(--btn-glass-border);
  box-shadow: var(--btn-shadow);
}

@media (pointer: fine){
  .btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0)), var(--btn-glass-bg-hover);
    border-color: var(--glass-border-strong);
    text-decoration: none;
  }
}

/* Ghost buttons and chips: keep their intent, just glass them slightly */
.btn-ghost{
  background: var(--glass-bg-weak);
  border-color: rgba(255,255,255,0.10);
}

@media (pointer: fine){
  .btn-ghost:hover{ border-color: var(--glass-border-strong); }
}

.filter-chip{
  background: var(--glass-bg-weak);
  border-color: rgba(255,255,255,0.10);
}

@media (pointer: fine){
  .filter-chip:hover{ border-color: var(--glass-border-strong); }
}

/* Keep primary/danger colors, but add a little depth. */
.btn.btn-primary, button.btn-primary{
  box-shadow:
    0 12px 26px rgba(var(--glow-primary-rgb), calc(0.38 * var(--glow-primary-int))),
    0 0 calc(30px * var(--glow-primary-int)) rgba(var(--glow-primary-rgb), calc(0.55 * var(--glow-primary-int))),
    var(--btn-shadow);
}
.btn.btn-danger, button.btn-danger{
  box-shadow:
    0 12px 26px rgba(var(--glow-danger-rgb), calc(0.36 * var(--glow-danger-int))),
    0 0 calc(30px * var(--glow-danger-int)) rgba(var(--glow-danger-rgb), calc(0.52 * var(--glow-danger-int))),
    var(--btn-shadow);
}

/* Reduced motion: disable movement, keep color changes */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn){
    transition: background-color 180ms ease, border-color 180ms ease, filter 180ms ease;
  }
  html:not(.motion-full) :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn)::after{
    transition: none;
    display: none;
  }
  
}

/* Reduced motion (system): also disable hover/press movement on nav and clickable list rows. */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) nav a,
  html:not(.motion-full) .tab-switch a{ transition: background-color .18s ease, box-shadow .18s ease; }
  html:not(.motion-full) .data-table tbody tr.row-link td{ transition: background-color 180ms ease, filter 180ms ease; }
}

@media (prefers-reduced-motion: reduce) and (pointer: fine){
  html:not(.motion-full) :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):hover{ transform: none !important; }
  html:not(.motion-full) nav a:hover:not(:active),
  html:not(.motion-full) .tab-switch a:hover:not(:active){ transform: none !important; }
  html:not(.motion-full) .data-table tbody tr.row-link:hover:not(:active) td{ transform: none !important; filter: none !important; }
html:not(.motion-full) .data-table tbody tr.row-link:hover:not(:active) td .cell-fx{ transform: none !important; filter: none !important; }
  html:not(.motion-full) .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover{ transform: none !important; }
  html:not(.motion-full) .data-table tbody td:last-child a.btn.btn-mini:hover:not(:active){ transform: none !important; }
}

/* Motion off (user setting): disable animations and transitions entirely. */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after{
  animation: none !important;
  transition: none !important;
}

html.motion-off nav a::after{ display:none !important; }
html.motion-off .tab-switch a::after{ display:none !important; }
html.motion-off :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn)::after{ display:none !important; }
html.motion-off .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost)::after{ display:none !important; }

@media (pointer: fine){
  html.motion-off :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):hover{ transform: none !important; }
  html.motion-off nav a:hover:not(:active),
  html.motion-off .tab-switch a:hover:not(:active){ transform: none !important; }
  html.motion-off .data-table tbody tr.row-link:hover:not(:active) td{ transform: none !important; filter: none !important; }
html.motion-off .data-table tbody tr.row-link:hover:not(:active) td .cell-fx{ transform: none !important; filter: none !important; }
  html.motion-off .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover{ transform: none !important; }
  html.motion-off .data-table tbody td:last-child a.btn.btn-mini:hover:not(:active){ transform: none !important; }
}

/* Reduced motion (user setting): force reduced motion regardless of OS preference. */
html.motion-reduce .skip-link{ transition: none !important; }
html.motion-reduce nav a,
html.motion-reduce .tab-switch a{ transition: background-color .18s ease, box-shadow .18s ease !important; }
html.motion-reduce .data-table tbody tr.row-link td{ transition: background-color 180ms ease, filter 180ms ease !important; }
html.motion-reduce :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn){
  transition: background-color 180ms ease, border-color 180ms ease, filter 180ms ease !important;
}
html.motion-reduce :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn)::after{
  transition: none !important;
  display: none !important;
}
@media (pointer: fine){
  html.motion-reduce :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn):hover{ transform: none !important; }
  html.motion-reduce nav a:hover:not(:active),
  html.motion-reduce .tab-switch a:hover:not(:active){ transform: none !important; }
  html.motion-reduce .data-table tbody tr.row-link:hover:not(:active) td{ transform: none !important; filter: none !important; }
html.motion-reduce .data-table tbody tr.row-link:hover:not(:active) td .cell-fx{ transform: none !important; filter: none !important; }
  html.motion-reduce .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover{ transform: none !important; }
  html.motion-reduce .data-table tbody td:last-child a.btn.btn-mini:hover:not(:active){ transform: none !important; }
}

 

/* --------------------------------------------------------------------------
   Button-like animation for list areas and links
   -------------------------------------------------------------------------- */

/* Clickable list rows: animate cell content (td) instead of the <tr> itself.
   This avoids table-row transform/filter glitches where the right-side Open link can flicker or vanish. */
.data-table tbody tr.row-link td{
  transition: background-color 180ms ease;
  will-change: auto;
}
/* Wrap cell contents for hover lift to avoid subpixel seams between <td> backgrounds across browsers. */
.data-table tbody tr.row-link td .cell-fx{
  display:block;
}
.data-table tbody tr.row-link td:first-child .cell-fx{
  display:flex;
  align-items:center;
  height:100%;
}
.data-table tbody tr.row-link td:last-child .cell-fx{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

html.motion-full .data-table tbody tr.row-link td .cell-fx{
  transition: transform 180ms ease, filter 180ms ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (pointer: fine){
  html.motion-full .data-table tbody tr.row-link:hover:not(:active) td .cell-fx{
    transform: translate3d(0,-2px,0);
    filter: brightness(1.04);
  }
}
html.motion-full .data-table tbody tr.row-link:active td .cell-fx{
  transform: translate3d(0,0,0) scale(0.99);
  filter: none;
}

/* Arcs list: ensure row hover lift matches other list tables (same motion + pointer gating). */
@media (pointer: fine){
  html.motion-full .arcs-table tbody tr.row-link:hover:not(:active) td .cell-fx{
    transform: translate3d(0,-2px,0);
    filter: brightness(1.04);
  }
}
html.motion-full .arcs-table tbody tr.row-link:active td .cell-fx{
  transform: translate3d(0,0,0) scale(0.99);
  filter: none;
}



/* Round the hovered row like a big button */
.data-table tbody tr.row-link td:first-child{ border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.data-table tbody tr.row-link td:last-child{ border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

@media (pointer: fine){
  /* Hover state for clickable list rows.
     Important: avoid per-cell transforms/filters and will-change promotions, which can render faint vertical seams
     differently across browsers (especially Chromium/Edge) when cell backgrounds are semi-transparent. */
  .data-table tbody tr.row-link:hover:not(:active) td{
    background: rgba(var(--glow-list-rgb), calc(0.03 + (var(--glow-list-int) * 0.12))) !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
  }
}
.data-table tbody tr.row-link:active td{
  filter: none;
  box-shadow: none !important;
  outline: none !important;
}

@media (pointer: fine){
  /* Tiny lift for the small "Open" button in list tables */
  .data-table tbody td:last-child a.btn.btn-mini:hover:not(:active){
    transform: translateY(-1px) scale(1.02);
  }
}

/* Make the plain "Open" links in list tables behave like mini buttons */
.data-table tbody td:last-child > a:not(.btn):not(.btn-ghost){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--btn-glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.0)), var(--btn-glass-bg);
  color:#e7e7e7;
  text-decoration:none;
  line-height: 1;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  transform: translateZ(0);
  transform-origin: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}

.data-table tbody td:last-child > a:not(.btn):not(.btn-ghost)::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-60%);
  opacity: 0;
  transition: transform 720ms ease, opacity 260ms ease;
  pointer-events: none;
}

@media (pointer: fine){
  .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover{
    transform: translateY(-1px) scale(1.03);
    box-shadow: var(--btn-shadow-hover);
    border-color: var(--glass-border-strong);
    filter: brightness(1.06);
  }
  .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover:not(:active)::after{
    opacity: 1;
    transform: translateX(70%);
  }
}

.data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):active{
  transform: translateY(0px) scale(0.98);
}

/* Give navigation links the same button feel */
nav a,
.tab-switch a{
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}

nav a::after,
.tab-switch a::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Subtle highlight that fades in, no sweep/shimmer movement */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 62%),
    radial-gradient(circle at 22% 18%, rgba(var(--glow-tabs-rgb), calc(0.18 * var(--glow-tabs-int))), transparent 55%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

nav a.active::after,
.tab-switch a.active::after{
  opacity: 0.35;
}

@media (pointer: fine){
  nav a:hover:not(:active),
  .tab-switch a:hover:not(:active){
    background: var(--tabs-hover-bg, #1a1f2a);
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
      0 0 0 1px rgba(var(--tabs-hover-border-rgb), 0.70),
      0 14px 26px rgba(0,0,0,0.45),
      0 0 calc(30px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.58 * var(--glow-tabs-int))),
      0 0 calc(66px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.20 * var(--glow-tabs-int)));
  }
  nav a:hover::after,
  .tab-switch a:hover:not(:active)::after{
    opacity: 1;
  }
}

nav a:active,
.tab-switch a:active{
  transform: translateY(0px) scale(0.98);
}

@keyframes aiowiki-click-bounce{
  0%{ transform: translateY(0px) scale(0.98); }
  55%{ transform: translateY(-1px) scale(1.02); }
  100%{ transform: translateY(0px) scale(1); }
}

html.motion-full nav a.is-click-bouncing,
html.motion-full .tab-switch a.is-click-bouncing{
  animation: aiowiki-click-bounce 160ms cubic-bezier(.2,.8,.2,1) both;
  will-change: transform;
}

nav a:focus-visible,
.tab-switch a:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(var(--glow-tabs-rgb), calc(0.45 * var(--glow-tabs-int))),
    0 0 calc(30px * var(--glow-tabs-int)) rgba(var(--glow-tabs-rgb), calc(0.25 * var(--glow-tabs-int)));
}

/* Admin config: allow a separate glow just for the config page controls */
.admin-config{
  --glow-buttons-rgb: var(--glow-admin-rgb);
  --glow-buttons-int: var(--glow-admin-int);
}

/* Reduced motion: no movement, keep color changes */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) .data-table tbody tr.row-link{ transition: none; }
  html:not(.motion-full) .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost){ transition: background-color 180ms ease, border-color 180ms ease, filter 180ms ease; }
  html:not(.motion-full) .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost)::after{ display:none; }
  html:not(.motion-full) nav a,
  html:not(.motion-full) .tab-switch a{ transition: background-color 180ms ease, filter 180ms ease; }
  html:not(.motion-full) nav a::after,
  html:not(.motion-full) .tab-switch a::after{ display:none; }
}


/* Collapsible search section (Albums, Club Seasons, Characters) */
.search-collapsible{
  border:0;
  padding:0;
  margin:0;
}
.search-collapsible > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #222;
  background: rgba(255,255,255,0.02);
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}
.search-collapsible > summary::-webkit-details-marker{ display:none; }
.search-collapsible > summary:hover{
  background: rgba(255,255,255,0.03);
}
.search-summary-right{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.search-summary-arrow{
  display:inline-block;
  transition: transform 160ms ease;
}
.search-collapsible[open] .search-summary-arrow{
  transform: rotate(180deg);
}
.search-body{ margin-top: 0; padding-top: 12px; }
/* Animated <details> bodies (Search + Description/Summary boxes)
   JS wraps the content (everything except <summary>) inside .details-clip and animates its height. */
details.search-collapsible > .details-clip,
details.details-animate > .details-clip{
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: height 220ms ease, opacity 160ms ease, transform 220ms ease;
  will-change: height;
}

details.search-collapsible[open] > .details-clip,
details.details-animate[open] > .details-clip{
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.site-footer{
  border-top: 1px solid #222;
  background: #0f1116;
  padding: 14px 16px;
}
.site-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  font-size: 13px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-footer a{
  color: inherit;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
}
.site-footer a:hover{
  background: rgba(255,255,255,0.03);
}

/* Disclaimer page */
.legal-text{ white-space: pre-wrap; line-height: 1.55; }
.disclaimer-legal-text{ font-size: var(--site-disclaimer-font-size, 16px); }
.vote-info-legal-text{ font-size: var(--vote-info-font-size, 16px); }
.legal-card{ max-width: 920px; }
.legal-text h2{ margin: 0 0 12px 0; font-size: 20px; }
.legal-text h3{ margin: 18px 0 8px 0; font-size: 16px; }
.legal-text p{ margin: 0 0 12px 0; line-height: 1.55; }
.legal-text strong{ font-weight: 700; }

/* Custom 404 image */
.custom404-wrap{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.custom404-img{
  display: block;
  width: auto;
  max-width: min(100%, 900px);
  max-height: 70vh;
  height: auto;
  margin: 0 auto;
}
.custom404-home{
  display: flex;
  width: fit-content;
  min-width: 220px;
  justify-content: center;
  text-align: center;
  margin: 0 auto 12px auto;
}
@media (max-width: 700px){
  .custom404-img{
    max-height: 60vh;
  }
  .custom404-home{
    width: min(100%, 280px);
  }
}

.cfg-404-preview img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

.cfg-404-upload-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Stats leaderboards: category pill labels */
.lb-card{
  --lb-color: #60a5fa;
  position: relative;
  overflow: hidden;
}
.lb-card[data-lb="albums"]{ --lb-color: var(--lb-color-albums, #36cfc0); }
.lb-card[data-lb="seasons"]{ --lb-color: var(--lb-color-seasons, #a78bfa); }
.lb-card[data-lb="arcs"]{ --lb-color: var(--lb-color-arcs, #fbbf24); }
.lb-card[data-lb="episodes"]{ --lb-color: var(--lb-color-episodes, #60a5fa); }
.lb-card[data-lb="characters"]{ --lb-color: var(--lb-color-characters, #f472b6); }
.lb-card[data-lb="vdist-episodes"]{--lb-color:var(--lb-color-vdist-episodes,var(--lb-color-episodes,#60a5fa));}
.lb-card[data-lb="vdist-characters"]{--lb-color:var(--lb-color-vdist-characters,var(--lb-color-characters,#f472b6));}

/* Leaderboard card backdrop tint (fades toward bottom) */
.lb-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.lb-card > *{
  position: relative;
  z-index: 1;
}

@supports (background: color-mix(in srgb, #000 10%, transparent)){
  .lb-card::before{
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--lb-color) 16%, rgba(0,0,0,0)) 0%,
      color-mix(in srgb, var(--lb-color) 8%, rgba(0,0,0,0)) 38%,
      rgba(0,0,0,0) 100%
    );
  }
}

.lb-card-title{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}

.lb-card-title-text{
  font-weight: 900;
}

.lb-cat-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--ui-pill-padding-y) - 2px) calc(var(--ui-pill-padding-x) - 1px);
  border-radius: 999px;
  font-size: calc(var(--ui-pill-font-size) - 2px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-color);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}

/* Character detail/admin linked-item count pills (bigger and self-explanatory) */
.lb-cat-pill.char-episodes-count-pill,
.lb-cat-pill.char-videos-count-pill,
.lb-cat-pill.arc-videos-count-pill{
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 6px;
}

.char-episodes-count-pill .char-episodes-count-num,
.char-videos-count-pill .char-videos-count-num,
.arc-videos-count-pill .arc-videos-count-num{
  font-size: 15px;
  font-weight: 900;
}

.char-episodes-count-pill .char-episodes-count-label,
.char-videos-count-pill .char-videos-count-label,
.arc-videos-count-pill .arc-videos-count-label{
  color: inherit;
  font-weight: 800;
  opacity: 1;
}

/* Episode detail: characters count pill (matches character episodes count pill) */
.lb-cat-pill.ep-characters-count-pill{
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 6px;
}

.ep-characters-count-pill .ep-characters-count-num{
  font-size: 15px;
  font-weight: 900;
}

.ep-characters-count-pill .ep-characters-count-label{
  color: inherit;
  font-weight: 800;
  opacity: 1;
}

/* Episode detail: arcs count pill (matches character/episode pills) */
.lb-cat-pill.ep-arcs-count-pill{
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 6px;
}

.ep-arcs-count-pill .ep-arcs-count-num{
  font-size: 15px;
  font-weight: 900;
}

.ep-arcs-count-pill .ep-arcs-count-label{
  color: inherit;
  font-weight: 800;
  opacity: 1;
}

@supports (background: color-mix(in srgb, #000 10%, transparent)){
  .lb-cat-pill{
    background: color-mix(in srgb, var(--lb-color) 14%, rgba(0,0,0,0));
    border-color: color-mix(in srgb, var(--lb-color) 45%, rgba(255,255,255,0.14));
  }
}

/* Admin config section pills (match Stats Leaderboards pill look) */
.admin-config{ --lb-color: #60a5fa; }
.cfg-section-pill.lb-cat-pill{
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: calc(var(--ui-pill-font-size) + 2px);
  padding: calc(var(--ui-pill-padding-y) + 4px) calc(var(--ui-pill-padding-x) + 6px);
  margin-bottom: 10px;
}

/* Admin config pill tabs (click to show one section) */
.cfg-tabs-card{
  padding-top: 12px;
  padding-bottom: 12px;
}

.cfg-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Ensure all Admin config pill tabs are the larger size (active and inactive) */
.cfg-tabs .lb-cat-pill{
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: calc(var(--ui-pill-font-size) + 2px);
  padding: calc(var(--ui-pill-padding-y) + 4px) calc(var(--ui-pill-padding-x) + 6px);
  text-decoration: none;
}

.cfg-tab-pill.lb-cat-pill{
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: calc(var(--ui-pill-font-size) + 2px);
  padding: calc(var(--ui-pill-padding-y) + 4px) calc(var(--ui-pill-padding-x) + 6px);
  cursor: pointer;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}

.cfg-tab-pill.is-active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.26);
}

@supports (background: color-mix(in srgb, #000 10%, transparent)){
  .cfg-tab-pill.is-active{
    background: color-mix(in srgb, var(--lb-color) 24%, rgba(0,0,0,0));
    border-color: color-mix(in srgb, var(--lb-color) 75%, rgba(255,255,255,0.14));
  }
}

.config-grid.is-filtered{
  grid-template-columns: 1fr;
}

/* Admin config: align layout with the admin edit page split layout */
.admin-config--edit .config-grid{
  grid-template-columns: 1fr;
}

.admin-config-layout.is-single{
  grid-template-columns: 1fr;
}

/* ========================================================================== 
   v115: Light mode (user preference)
   - Toggle with the Theme selector in the header (Theme: Dark/Light)
   - Controlled via html.theme-light / html.theme-dark on <html>
   ========================================================================== */

/* Theme selector styling matches Motion selector */
header .motion-select,
header .theme-select { max-width: 220px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
@media (max-width: 680px){
  header .motion-select,
  header .theme-select { max-width: 175px; font-size: 12px; padding: 6px 8px; }
}

html.theme-dim{
  color-scheme: dark;
  /* Dim theme sits between Dark and Light: still dark-scheme, but with softer gray surfaces. */
}

/* Dim theme surface overrides */
html.theme-dim body{ background:#14161b; color:#e5e7eb; }
html.theme-dim header{ background: rgba(27,31,39,var(--top-banner-opacity-dark, 0.90)); border-bottom: 1px solid #2f3847; }
html.theme-dim nav{ background: var(--nav-panel-bg, #171a21); border:1px solid #2f3847; }
html.theme-dim .card{ background:#1b1f27; border:1px solid #2f3847; }
html.theme-dim th,
html.theme-dim td{ border-bottom:1px solid #2f3847; }
html.theme-dim th{ color:#c4cbd8; }
html.theme-dim tr:hover td{ background:#151922; }
html.theme-dim .security-status-row{ background:#171a21; border-color:#2f3847; }
html.theme-dim .status-pill{ background:#1b1f27; border-color:#3a465b; }
html.theme-dim .site-footer{ border-top: 1px solid #2f3847; background:#151922; }
html.theme-dim .site-footer a:hover{ background: rgba(255,255,255,0.04); }

html.theme-light{
  color-scheme: light;
  --focus-ring: #2563eb;

  /* Background and glass surfaces */
  --bg-base: #edf1f6;
  --bg-grad-a: rgba(29,111,227,0.07);
  --bg-grad-b: rgba(154,208,255,0.10);
  --bg-grad-c: rgba(154,90,255,0.025);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-weak: rgba(255, 255, 255, 0.56);
  --glass-border: rgba(30, 41, 59, 0.18);
  --glass-border-strong: rgba(29,111,227,0.24);
  --glass-shadow: 0 14px 34px rgba(16,24,40,0.10);

  /* Buttons */
  --btn-glass-bg: rgba(255, 255, 255, 0.86);
  --btn-glass-bg-hover: rgba(255, 255, 255, 0.94);
  --btn-glass-border: rgba(30, 41, 59, 0.20);
  --btn-shadow: 0 8px 18px rgba(16,24,40,0.10);
  --btn-shadow-hover: 0 12px 24px rgba(16,24,40,0.12);

  /* Tabs */
  /* Tabs panel background (Light theme): solid tint wins over global rgba override */
  --nav-panel-bg: var(--nav-panel-bg-rgba-custom, rgba(233,239,246,0.94));
  --tabs-hover-bg: rgba(29,111,227,0.08);
  --tabs-active-bg: rgba(29,111,227,0.12);
}

html.theme-light body{
  color: #1d2430;
  background:
    radial-gradient(1100px 520px at 18% 2%, var(--bg-grad-a), transparent 60%),
    radial-gradient(900px 420px at 86% 18%, var(--bg-grad-b), transparent 58%),
    radial-gradient(900px 520px at 48% 110%, var(--bg-grad-c), transparent 55%),
    linear-gradient(180deg, #f7f9fc, var(--bg-base) 44%, #f7f9fc);
}

html.theme-light a{ color:#1d6fe3; }

html.theme-light .muted,
html.theme-light .detail-stat,
html.theme-light .hero-sub{ color:#556070; }

html.theme-light .skip-link{
  background: rgba(255,255,255,0.92);
  border-color: rgba(30, 41, 59, 0.18);
  color: #1d2430;
}

html.theme-light header{
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(248,251,254,var(--top-banner-opacity-light, 0.98)), rgba(235,240,247,var(--top-banner-opacity-light, 0.98)));
  border-bottom: 1px solid rgba(92, 129, 184, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 6px 16px rgba(16,24,40,0.06);
  backdrop-filter: blur(10px) saturate(128%);
  -webkit-backdrop-filter: blur(10px) saturate(128%);
}

html.theme-light body[data-header-backdrop-light="1"] header{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgba(250,251,253,var(--top-banner-opacity-light, 0.98)), rgba(242,246,251,var(--top-banner-opacity-light, 0.98)));
  border-bottom: 1px solid rgba(var(--header-backdrop-light-rgb, 92, 129, 184), calc((var(--header-backdrop-light-a, 0.12) * 0.90) + 0.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 8px 24px rgba(var(--header-backdrop-light-rgb, 16, 24, 40), calc((var(--header-backdrop-light-a, 0.12) * 0.18) + 0.04));
}

html.theme-light header .brand-mark{
  position: relative;
  isolation: isolate;
}

html.theme-light header .brand-mark::before{
  content: none;
}

html.theme-light header .brand-mark img{
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.62)) drop-shadow(0 4px 10px rgba(52, 93, 156, 0.14)) brightness(1.02) contrast(1.02);
}

html.theme-light nav{
  background: linear-gradient(180deg, rgba(235,240,246,0.96), rgba(229,234,242,0.96));
  border-right: 1px solid rgba(30, 41, 59, 0.18);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.54);
}

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  html.theme-light nav{ border-bottom: 1px solid rgba(30, 41, 59, 0.18); }
}

html.theme-light body > .container > nav > a:not(.active),
html.theme-light body > .container > nav > a:not(.active):hover,
html.theme-light body > .container > nav > a:not(.active):focus-visible{
  color: #48607c;
}

html.theme-light body > .container > nav > a:not(.active):hover,
html.theme-light body > .container > nav > a:not(.active):focus-visible{
  background: rgba(29,111,227,0.07);
  box-shadow:
    0 0 0 1px rgba(29,111,227,0.14),
    0 6px 14px rgba(29,111,227,0.08);
}

html.theme-light body > .container > nav > a.active,
html.theme-light body > .container > nav > a.active:hover,
html.theme-light body > .container > nav > a.active:focus-visible{
  color: #12304f;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(236,244,255,0.92)),
    rgba(29,111,227,0.10);
  box-shadow:
    inset 3px 0 0 #2b7be8,
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 0 0 1px rgba(29,111,227,0.22),
    0 8px 18px rgba(29,111,227,0.10);
}

html.theme-light .card{
  background: rgba(244,248,252,0.88);
  border: 1px solid rgba(30, 41, 59, 0.20);
  box-shadow: 0 6px 18px rgba(16,24,40,0.07);
}

html.theme-light th,
html.theme-light td{
  border-bottom: 1px solid rgba(30, 41, 59, 0.16);
}

html.theme-light th{ color:#5b6777; }

html.theme-light tr:hover td{ background: rgba(29,111,227,0.06); }

html.theme-light .data-table tbody tr.row-link:focus-visible td,
html.theme-light .episodes-table tbody tr.row-link:focus-visible td{
  background: rgba(29,111,227,0.08);
}

html.theme-light input[type="text"],
html.theme-light input[type="number"],
html.theme-light textarea,
html.theme-light select{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(30, 41, 59, 0.24);
  color: #1d2430;
}

html.theme-light select{ color-scheme: light; }

html.theme-light .btn:not(.btn-primary):not(.btn-danger),
html.theme-light a.btn:not(.btn-primary):not(.btn-danger),
html.theme-light button.btn:not(.btn-primary):not(.btn-danger){
  color: #1d2430;
}

html.theme-light .public-list-page .list-filters-actions a.btn:not(.btn-primary):not(.btn-danger),
html.theme-light body[data-page-kind="admin"] .list-filters-actions a.btn:not(.btn-primary):not(.btn-danger){
  color: #445266;
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.060), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.66)),
    rgba(248, 250, 253, 0.94);
  border-color: rgba(var(--glow-buttons-rgb), 0.18);
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.58);
}

@media (pointer: fine){
  html.theme-light .public-list-page .list-filters-actions a.btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light body[data-page-kind="admin"] .list-filters-actions a.btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    color: #334155;
    background:
      radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.078), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72)),
      rgba(250, 252, 255, 0.98);
    border-color: rgba(var(--glow-buttons-rgb), 0.24);
    box-shadow:
      0 12px 24px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.70);
  }
}

/* Light theme: make pager buttons a bit easier to pick out without changing dark mode or non-list controls. */
html.theme-light .public-list-page .pager .btn:not(.btn-primary):not(.btn-danger),
html.theme-light body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger){
  color: #334155;
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.068), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.68)),
    rgba(248, 250, 253, 0.96);
  border-color: rgba(var(--glow-buttons-rgb), 0.20);
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.62);
}

@media (pointer: fine){
  html.theme-light .public-list-page .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    color: #1f2f46;
    background:
      radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.092), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.76)),
      rgba(250, 252, 255, 0.99);
    border-color: rgba(var(--glow-buttons-rgb), 0.28);
    box-shadow:
      0 12px 24px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.72);
  }
}

html.theme-light .public-list-page .pager .btn[aria-current="page"],
html.theme-light body[data-page-kind="admin"] .pager .btn[aria-current="page"]{
  color: #0f2138;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74) 58%),
    rgba(var(--glow-buttons-rgb), 0.22) !important;
  background-color: rgba(var(--glow-buttons-rgb), 0.22) !important;
  border-color: rgba(var(--glow-buttons-rgb), 0.56);
  outline-color: rgba(var(--glow-buttons-rgb), 0.26);
  text-shadow: none;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.13),
    0 0 0 1px rgba(var(--glow-buttons-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.76);
}

html.theme-light .custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger){
  color: #445266;
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.060), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.66)),
    rgba(248, 250, 253, 0.94);
  border-color: rgba(var(--glow-buttons-rgb), 0.18);
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.58);
}

@media (pointer: fine){
  html.theme-light .custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    color: #334155;
    background:
      radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.078), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72)),
      rgba(250, 252, 255, 0.98);
    border-color: rgba(var(--glow-buttons-rgb), 0.24);
    box-shadow:
      0 12px 24px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.70);
  }
}

/* Light mode: make the shimmer sweep clearly visible on light button surfaces */
html.theme-light :is(.btn, button, .btn-ghost, .filter-chip, .input-clear-btn):not(.select-display):not(.input-clear-btn)::after{
  background:
    linear-gradient(120deg,
      transparent 18%,
      rgba(var(--btn-shimmer-rgb),0) 34%,
      rgba(var(--btn-shimmer-rgb),0.92) 48%,
      rgba(255,255,255,0.70) 52%,
      rgba(var(--btn-shimmer-rgb),0.92) 56%,
      transparent 82%);
  filter: drop-shadow(0 0 10px rgba(var(--btn-shimmer-rgb),0.35));
}

/* Light mode: restore a subtle "back glow" for AIOWiki mini buttons in detail tables */
html.theme-light a.btn.btn-aiowiki,
html.theme-light button.btn-aiowiki{
  box-shadow:
    var(--btn-shadow),
    0 0 calc(22px * var(--glow-aiowiki-int)) rgba(var(--glow-aiowiki-rgb), calc(0.18 * var(--glow-aiowiki-int)));
}

html.theme-light .btn-ghost,
html.theme-light .filter-chip{
  background: rgba(255,255,255,0.92);
  border-color: rgba(30, 41, 59, 0.20);
  color: #1d2430;
}

html.theme-light .btn-ghost:hover,
html.theme-light .filter-chip:hover{ background: rgba(29,111,227,0.06); }

html.theme-light .badge{
  border-color: rgba(29,111,227,0.25);
  color: #0b63ce;
  background: rgba(29,111,227,0.07);
}

html.theme-light .status-pill{
  border-color: rgba(30, 41, 59, 0.18);
  background: rgba(255,255,255,0.76);
  color: #1d2430;
}

html.theme-light .security-status-row{
  background: rgba(255,255,255,0.72);
  border-color: rgba(30, 41, 59, 0.18);
}

html.theme-light .site-notice{
  border-top: 1px solid rgba(var(--title-text-rgb, 29, 36, 48), 0.10);
  border-bottom: 1px solid rgba(var(--title-text-rgb, 29, 36, 48), 0.16);
  background:
    linear-gradient(
      90deg,
      rgba(var(--title-text-rgb, 29, 36, 48), 0.055),
      rgba(var(--title-text-rgb, 29, 36, 48), 0.025) 48%,
      rgba(var(--title-text-rgb, 29, 36, 48), 0.045)
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}

html.theme-light .site-notice-inner{ color: var(--title-text-color, #1d2430); }

html.theme-light .page-hero{
  border: 1px solid rgba(29,111,227,0.32);
  background:
    radial-gradient(1100px 340px at 18% 0%, rgba(29,111,227,0.18), transparent 62%),
    radial-gradient(900px 280px at 78% 24%, rgba(154,208,255,0.22), transparent 60%),
    radial-gradient(700px 260px at 98% 98%, rgba(29,111,227,0.09), transparent 72%),
    linear-gradient(180deg, rgba(243,248,254,0.98), rgba(229,238,249,0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 10px 24px rgba(16,24,40,0.11);
}

html.theme-light .page-hero-text h1{ text-shadow: none; }

html.theme-light .page-hero::before{ opacity: 0.30; }

html.theme-light .page-hero::after{
  opacity: 0.88;
  background: linear-gradient(90deg, rgba(29,111,227,0.06), rgba(29,111,227,0.78), rgba(154,208,255,0.62), rgba(29,111,227,0.06));
}

html.theme-light .voteinfo-overlay{ background: rgba(16, 24, 40, 0.55); }

html.theme-light .vote-overlay-label{
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.70),
    0 -1px 0 rgba(0,0,0,0.70),
    1px 0 0 rgba(0,0,0,0.70),
    -1px 0 0 rgba(0,0,0,0.70);
}

html.theme-light .site-footer{
  border-top: 1px solid rgba(30, 41, 59, 0.18);
  background: rgba(255,255,255,0.70);
}

html.theme-light .site-footer a{ color:#1d6fe3; }

/* ========================================================================== 
   v116: Light mode fixes
   - Make table lists (Albums/Characters/Episodes/Seasons/Arcs) use light surfaces
   - Fix Episodes Album selector (custom popover) to match light theme
   - Improve Stats readability (rating meter text, rings)
   ========================================================================== */

html.theme-light .muted,
html.theme-light .detail-stat,
html.theme-light .hero-sub{ color:#475569; }

/* Table lists should not stay dark in light mode */
html.theme-light .table-wrap{
  background: rgba(243,247,251,0.90);
  border: 1px solid rgba(30, 41, 59, 0.20);
  box-shadow: 0 6px 18px rgba(16,24,40,0.07);
}

@media (min-width: 1025px) and (pointer: fine) {
  html.theme-light .episodes-table thead th,
  html.theme-light .albums-table thead th,
  html.theme-light .seasons-table thead th,
  html.theme-light .characters-table thead th,
  html.theme-light .arcs-table thead th{
    background: rgba(246,249,253,0.90);
    box-shadow: 0 1px 0 rgba(30, 41, 59, 0.14);
  }
}

/* Episodes: Album selector (custom select-popover) */
html.theme-light .select-popover.enhanced .select-display{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(30, 41, 59, 0.20);
  color: #1d2430;
}
html.theme-light .select-popover.enhanced .select-display::after{ color:#667085; }

html.theme-light .select-popover.enhanced.open select{
  border: 1px solid rgba(30, 41, 59, 0.20);
  background: rgba(255,255,255,0.98);
  color: #1d2430;
  box-shadow: 0 18px 36px rgba(16,24,40,0.18);
}
html.theme-light .select-popover.enhanced.open select option,
html.theme-light .select-popover.enhanced.open select optgroup{
  background-color: #ffffff;
  color: #1d2430;
}

/* Stats: rating meter text should be readable on light surfaces */
html.theme-light .rating-meter__text{
  color: #111827;
  text-shadow: none;
}
html.theme-light .rating-meter__bar{
  background: rgba(30, 41, 59, 0.12);
  border: 1px solid rgba(30, 41, 59, 0.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
html.theme-light .rating-meter__mark{
  background: rgba(30, 41, 59, 0.62);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.70), 0 6px 14px rgba(16,24,40,0.12);
}

/* Rating rings (if used on light pages) */
html.theme-light .rating-ring__text{ color:#111827; text-shadow:none; }
html.theme-light .rating-ring__track{ stroke: rgba(30, 41, 59, 0.18); }

/* Placeholders */
html.theme-light .thumb-ph,
html.theme-light .thumb-ph-lg{
  background: rgba(30, 41, 59, 0.08);
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   Light mode: ensure detail-page pill buttons and "Open" action links are readable
   -------------------------------------------------------------------------- */

/* Optional subtle episode detail backdrop (Light theme)
   Applies to the top episode section panels (title + thumbnail + community rating + vote area). */
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .episode-title-panel,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .episode-title-panel,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .episode-title-panel{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  /* Use background-color + background-image so the tint is always layered above the base panel. */
  background-color: rgba(255,255,255,0.78) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a)),
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--episode-vote-backdrop-light-rgb), calc(0.10 + var(--episode-vote-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,0.06);
}
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .episode-title-panel h1,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .episode-title-panel h1,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .episode-title-panel h1{ margin:0; }

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a)),
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a))) !important;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-linked-card,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-linked-card,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-linked-card,
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-detail-section,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.elsewhere-detail-section,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.videos-detail-section{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a)),
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--episode-vote-backdrop-light-rgb), calc(0.10 + var(--episode-vote-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}


html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block{
  border-radius: 18px;
  background-color: rgba(255,255,255,0.78);
  background-image:
    linear-gradient(0deg,
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a)),
      rgba(var(--episode-vote-backdrop-light-rgb), var(--episode-vote-backdrop-light-a)));
  border: 1px solid rgba(var(--episode-vote-backdrop-light-rgb), calc(0.10 + var(--episode-vote-backdrop-light-a) * 0.40));
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right{
  padding: 12px 12px 10px;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block{
  padding: 12px 12px 14px;
  box-shadow:
    0 14px 30px rgba(16,24,40,0.10),
    0 0 0 1px rgba(var(--episode-vote-backdrop-light-rgb), calc(var(--episode-vote-backdrop-light-a) * 0.14));
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block .vote-controls,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block .vote-controls,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block .vote-controls{
  margin-top: 10px;
}

@media (max-width: 820px) {
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .episode-title-panel,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .episode-title-panel,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .episode-title-panel{
    padding: 10px 12px;
    border-radius: 16px;
  }
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-right{
    padding: 10px 10px 8px;
    border-radius: 16px;
  }
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-vote-block{
    padding: 10px 10px 12px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   v126: Light theme page backdrops (uniform fill, configurable)
   - Album detail page
   - Season detail page
   - Arc detail page
   - Character detail page
   ========================================================================== */

/* Shared title panel */
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .album-title-panel,
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .season-title-panel,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .arc-title-panel,
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .character-title-panel{
  display:flex;
  align-items:flex-end;
  padding: 14px 16px;
  margin: 0 0 14px;
  border-radius: 18px;
  background-color: rgba(255,255,255,0.78) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--page-backdrop-rgb, 29,111,227), var(--page-backdrop-a, 0.12)),
      rgba(var(--page-backdrop-rgb, 29,111,227), var(--page-backdrop-a, 0.12))) !important;
  border: 1px solid rgba(var(--page-backdrop-rgb, 29,111,227), calc(0.10 + var(--page-backdrop-a, 0.12) * 0.40)) !important;
  box-shadow: 0 12px 28px rgba(16,24,40,0.10);
}

.album-title-panel h1,
.season-title-panel h1,
.arc-title-panel h1,
.character-title-panel h1{ margin:0; }

/* Tie shared vars to each page type */
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"]{
  --page-backdrop-rgb: var(--album-backdrop-light-rgb);
  --page-backdrop-a: var(--album-backdrop-light-a);
}
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"]{
  --page-backdrop-rgb: var(--season-backdrop-light-rgb);
  --page-backdrop-a: var(--season-backdrop-light-a);
}
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"]{
  --page-backdrop-rgb: var(--arc-backdrop-light-rgb);
  --page-backdrop-a: var(--arc-backdrop-light-a);
}
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"]{
  --page-backdrop-rgb: var(--character-backdrop-light-rgb);
  --page-backdrop-a: var(--character-backdrop-light-a);
}

/* Album */
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .card.album-detail-card,
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .table-wrap.album-detail-table{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--album-backdrop-light-rgb), var(--album-backdrop-light-a)),
      rgba(var(--album-backdrop-light-rgb), var(--album-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--album-backdrop-light-rgb), calc(0.10 + var(--album-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}

/* Season */
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .card.season-detail-card,
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .table-wrap.season-detail-table{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--season-backdrop-light-rgb), var(--season-backdrop-light-a)),
      rgba(var(--season-backdrop-light-rgb), var(--season-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--season-backdrop-light-rgb), calc(0.10 + var(--season-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}

/* Arc uses the episode-card layout, so target a dedicated class to avoid affecting episode pages */
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .card.arc-detail-card{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a)),
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--arc-backdrop-light-rgb), calc(0.10 + var(--arc-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}

html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .card.arc-detail-card .arc-detail-left,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .card.arc-detail-card .arc-detail-right{
  border-radius: 18px;
  background-color: rgba(255,255,255,0.78) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a)),
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--arc-backdrop-light-rgb), calc(0.10 + var(--arc-backdrop-light-a) * 0.40)) !important;
  padding: 12px 12px 10px;
}


/* Arc detail: Episodes table should match the page backdrop tint (Light mode) */
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .table-wrap.arc-detail-table{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a)),
      rgba(var(--arc-backdrop-light-rgb), var(--arc-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--arc-backdrop-light-rgb), calc(0.10 + var(--arc-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}

/* Character */
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .card.character-detail-card{
  background-color: rgba(255,255,255,0.72) !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--character-backdrop-light-rgb), var(--character-backdrop-light-a)),
      rgba(var(--character-backdrop-light-rgb), var(--character-backdrop-light-a))) !important;
  border: 1px solid rgba(var(--character-backdrop-light-rgb), calc(0.10 + var(--character-backdrop-light-a) * 0.40)) !important;
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}

@media (max-width: 820px) {
  html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .album-title-panel,
  html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .season-title-panel,
  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .arc-title-panel,
  html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .character-title-panel{
    padding: 10px 12px;
    border-radius: 16px;
  }

  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .card.arc-detail-card .arc-detail-left,
  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .card.arc-detail-card .arc-detail-right{
    padding: 10px 10px 8px;
    border-radius: 16px;
  }
}

/* Light theme vote number input */
html.theme-light .vote-number{
  background: #ffffff;
  border: 1px solid #d6d9df;
  color: #111827;
}

html.theme-light .vote-info-btn{
  background: rgba(255,255,255,0.92);
  border-color: rgba(30, 41, 59, 0.20);
  color: #1d2430;
  box-shadow: 0 10px 26px rgba(16,24,40,0.10);
}

@media (pointer: fine){
  html.theme-light .vote-info-btn:hover{
    background: rgba(255,255,255,0.98);
    border-color: rgba(29,111,227,0.28);
  }
}

/* The AIOWiki pill on detail pages uses .aiowiki-btn (dark-mode style).
   In light mode, give it a friendly blue-tinted surface and readable text. */
html.theme-light .aiowiki-btn{
  background: rgba(29,111,227,0.10);
  border-color: rgba(29,111,227,0.32);
  color: #0b63ce;
}

@media (pointer: fine){
  html.theme-light .aiowiki-btn:hover{
    background: rgba(29,111,227,0.14);
    border-color: rgba(29,111,227,0.38);
  }
}


/* Light theme: make secondary/public utility buttons read more clearly without altering dark mode. */
html.theme-light .btn.btn-back,
html.theme-light .vote-info-btn,
html.theme-light .aiowiki-btn,
html.theme-light .public-list-page .list-filters-actions .btn:not(.btn-primary):not(.btn-danger),
html.theme-light body[data-page-kind="admin"] .list-filters-actions .btn:not(.btn-primary):not(.btn-danger),
html.theme-light .public-list-page .pager .btn:not(.btn-primary):not(.btn-danger),
html.theme-light body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger),
html.theme-light .custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger){
  color: #1b2c45;
  text-shadow: none;
  font-weight: 650;
}

html.theme-light .btn.btn-back,
html.theme-light .vote-info-btn,
html.theme-light .aiowiki-btn{
  background:
    radial-gradient(900px 140px at 50% 0%, rgba(var(--glow-buttons-rgb), 0.080), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76)),
    rgba(246, 249, 255, 0.98);
  border-color: rgba(var(--glow-buttons-rgb), 0.28);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255,255,255,0.74);
}

@media (pointer: fine){
  html.theme-light .btn.btn-back:hover,
  html.theme-light .vote-info-btn:hover,
  html.theme-light .aiowiki-btn:hover,
  html.theme-light .public-list-page .list-filters-actions .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light body[data-page-kind="admin"] .list-filters-actions .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light .public-list-page .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light body[data-page-kind="admin"] .pager .btn:not(.btn-primary):not(.btn-danger):hover:not(:active),
  html.theme-light .custom-page-downloads .custom-link-action.btn:not(.btn-primary):not(.btn-danger):hover:not(:active){
    color: #132741;
  }
}

/* Detail-page table "Open" links are plain anchors styled as mini buttons.
   Override the dark-mode fixed text color so it stays readable in light mode. */
html.theme-light .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost){
  color: #1d2430;
}

@media (pointer: fine){
  html.theme-light .data-table tbody td:last-child > a:not(.btn):not(.btn-ghost):hover{
    color: #0b63ce;
  }
}

h1{color: var(--title-text-color);}

/* About overlay modal */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  /* Animated open/close (default hidden) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.about-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s;
}

.about-modal {
  width: min(980px, 100%);
  margin: 0;
  position: relative;
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 10px;

  /* Pop-up animation */
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
}

.about-overlay.is-open .about-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Respect motion preference */
html.motion-reduce .about-overlay {
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
html.motion-reduce .about-overlay.is-open {
  transition: opacity 140ms ease, visibility 0s;
}
html.motion-reduce .about-modal {
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 140ms ease;
  transform: translateY(8px) scale(0.99);
}

html.motion-off .about-overlay,
html.motion-off .about-modal {
  transition: none !important;
}

.about-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.about-actions{
  display: flex;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 4px;
}

.about-close-btn{ min-width: 120px; }

.about-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 999px;
  padding: 6px 10px;
  line-height: 1;
  font-size: 18px;
}

header .about-btn {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15, 19, 27, 0.28);
  color: inherit;
  cursor: pointer;
}
header .about-btn:hover { filter: brightness(1.06); }
header .about-btn:active { transform: translateY(1px); }

html.theme-light header .about-btn {
  border: 1px solid rgba(30, 41, 59, 0.18);
  background: rgba(255,255,255,0.70);
}

@media (max-width: 480px) {
  .about-overlay { padding: 14px; }
}

/* ------------------------------
   Light theme: solid page/list tints
   ------------------------------ */

/* Tabs panel (nav) solid tint (Light theme)
   Uses the same overlay approach as other solid tints so intensity changes are obvious.
   If the Tabs panel color is blank, it can fall back to the list page tint on list pages. */
html.theme-light{
  --nav-panel-bg-effective-rgb: var(--nav-panel-bg-light-rgb);
  --nav-panel-bg-effective-a: var(--nav-panel-bg-light-a);
}
html.theme-light body[data-nav-fallback-list-light="1"][data-list-page-bg-light="1"]{
  --nav-panel-bg-effective-rgb: var(--list-page-bg-light-rgb);
  --nav-panel-bg-effective-a: var(--list-page-bg-light-a);
}
html.theme-light nav{
  background-color: var(--nav-panel-bg, rgba(240,245,252,0.92));
  background-image: linear-gradient(0deg,
    rgba(var(--nav-panel-bg-effective-rgb, 0,0,0), var(--nav-panel-bg-effective-a, 0)),
    rgba(var(--nav-panel-bg-effective-rgb, 0,0,0), var(--nav-panel-bg-effective-a, 0))
  );
}
/* When Light theme solid tint is active (custom) or when falling back to list tint, ignore the global nav background override. */
html.theme-light body[data-nav-solid-tint-light="1"] nav,
html.theme-light body[data-nav-fallback-list-light="1"][data-list-page-bg-light="1"] nav{
  background-color: rgba(240,245,252,0.92);
}

/* Shared site-wide page backdrop across public pages */
html.theme-light body[data-page-bg-light="1"][data-page-kind="albums"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="seasons"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="episodes"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="characters"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="elsewhere"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="videos"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="arcs"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="episode"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="album"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="season"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="arc"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="character"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="stats"],
html.theme-light body[data-page-bg-light="1"][data-page-kind="downloads"] {
  --page-bg-effective-rgb: var(--page-bg-light-rgb);
  --page-bg-effective-a: var(--page-bg-light-a);
  background-color: #ffffff !important;
  background-image: linear-gradient(0deg,
    rgba(var(--page-bg-effective-rgb), var(--page-bg-effective-a)),
    rgba(var(--page-bg-effective-rgb), var(--page-bg-effective-a))
  ) !important;
}

/* Stats page-specific background tint (Light theme).
   Overlays the Stats-only color above the site-wide page color when both are set. */
html.theme-light body[data-stats-page-bg-light="1"][data-page-kind="stats"] {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--page-bg-stats-light-rgb), var(--page-bg-stats-light-a)),
      rgba(var(--page-bg-stats-light-rgb), var(--page-bg-stats-light-a))
    ),
    linear-gradient(0deg,
      rgba(var(--page-bg-light-rgb, 0,0,0), var(--page-bg-light-a, 0)),
      rgba(var(--page-bg-light-rgb, 0,0,0), var(--page-bg-light-a, 0))
    ) !important;
}

/* List pages: Albums / Seasons / Characters / Arcs */
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"],
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"],
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"],
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"],
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"],
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(0deg,
      rgba(var(--list-page-bg-light-rgb), var(--list-page-bg-light-a)),
      rgba(var(--list-page-bg-light-rgb), var(--list-page-bg-light-a))
    ),
    linear-gradient(0deg,
      rgba(var(--page-bg-light-rgb, 0,0,0), var(--page-bg-light-a, 0)),
      rgba(var(--page-bg-light-rgb, 0,0,0), var(--page-bg-light-a, 0))
    ) !important;
}

/* Step 3: keep list-page large content surfaces in the same style direction,
   but reduce the remaining blue cast so the main results area feels calmer.
   Scope stays limited to the broad list cards/tables on public list pages. */
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .card {
  background-color: rgba(248, 250, 253, 0.82) !important;
  background-image: linear-gradient(0deg,
    rgba(var(--list-page-bg-light-rgb), calc(var(--list-page-bg-light-a) * 0.60)),
    rgba(var(--list-page-bg-light-rgb), calc(var(--list-page-bg-light-a) * 0.60))
  ) !important;
}

html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .table-wrap {
  background-color: rgba(249, 251, 254, 0.86) !important;
  background-image: linear-gradient(0deg,
    rgba(var(--list-page-bg-light-rgb), calc(var(--list-page-bg-light-a) * 0.46)),
    rgba(var(--list-page-bg-light-rgb), calc(var(--list-page-bg-light-a) * 0.46))
  ) !important;
}

/* =========================
   Stats page: solid tint cards (Light theme)
   ========================= */

@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  html.theme-light body[data-page-kind="stats"][data-stats-solid-tint-light="1"] .lb-card::before {
    /* Replace the old fade with a solid tint using the leaderboard's color. */
    background: color-mix(in srgb, var(--lb-color) var(--stats-solid-tint-pct-light), rgba(0, 0, 0, 0));
  }

  html.theme-light body[data-page-kind="stats"][data-stats-solid-tint-light="1"] .stats-summary-card {
    --lb-color: var(--stats-summary-card-tint-color, var(--lb-color-episodes, #1d6fe3));
    position: relative;
    overflow: hidden;
  }

  html.theme-light body[data-page-kind="stats"][data-stats-solid-tint-light="1"] .stats-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--lb-color) var(--stats-solid-tint-pct-light), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 0;
  }

  html.theme-light body[data-page-kind="stats"][data-stats-solid-tint-light="1"] .stats-summary-card > * {
    position: relative;
    z-index: 1;
  }
}
/* =======================================================================
   FIX v2: Character detail page right-edge clipping on small screens
   Why it happens:
   - A flex row inside the Episodes card uses space-between; when the count pill
     is wide (eg "292 episodes"), it can force a tiny horizontal overflow.
   - With any global horizontal-scroll lock, that overflow looks like the right
     side of controls is "cut off".
   What this does:
   - Allows the Episodes header row to wrap.
   - Ensures common character-page blocks and controls can shrink (min-width:0).
   - Adds small right padding so native range thumbs and select chevrons don't
     sit on the very edge on mobile.
   ======================================================================= */

.character-detail-grid,
.character-detail-left,
.character-detail-right,
.card,
.vote-controls,
.vote-slider,
.vote-row,
.vote-range,
.vote-number,
.vote-btn,
.char-episodes-count-pill,
.char-videos-count-pill,
select,
input[type="range"],
input[type="number"]{
  max-width: 100%;
  min-width: 0;
}

/* Episodes card header row: let the pill drop to the next line instead of overflowing. */
.character-episodes-head-row,
.character-videos-head-row{
  flex-wrap: wrap;
}

@media (max-width: 680px){
  .vote-slider{ padding-right: 12px; box-sizing: border-box; }
  select{ width: 100%; box-sizing: border-box; padding-right: 34px; }
}

/* ---- Tiny-phone list meta stacking ---- */
@media (max-width: 420px) {
  .episodes-table .row-meta,
  .elsewhere-table .row-meta,
  .albums-table .row-meta,
  .seasons-table .row-meta,
  .characters-table .row-meta,
  .arcs-table .row-meta {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    row-gap: 8px;
  }

  .episodes-table .row-meta .badge,
  .elsewhere-table .row-meta .badge,
  .albums-table .row-meta .badge,
  .seasons-table .row-meta .badge,
  .characters-table .row-meta .badge,
  .arcs-table .row-meta .badge {
    font-size: 13px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* Tiny phones: prevent long Album or Season pills from overflowing the table */
  .episodes-table .row-meta .badge[title],
  .elsewhere-table .row-meta .badge[title],
  .albums-table .row-meta .badge[title],
  .seasons-table .row-meta .badge[title]{
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Fallback for pages that render the album pill without a title attribute */
  .episodes-table .row-meta .badge-episode-album{
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .episodes-table .row-meta .btn.btn-mini,
  .elsewhere-table .row-meta .btn.btn-mini,
  .albums-table .row-meta .btn.btn-mini,
  .seasons-table .row-meta .btn.btn-mini,
  .characters-table .row-meta .btn.btn-mini,
  .arcs-table .row-meta .btn.btn-mini {
    font-size: 13px;
    padding: 7px 12px;
    white-space: nowrap;
  }
}

/* -------------------- Admin reorder animation -------------------- */

tbody.reorder-anim tr.reorder-row {
  will-change: transform;
}

.reorder-row.is-dragging {
  opacity: 0.6;
}

.reorder-row.is-drag-over {
  outline: 2px dashed rgba(255,255,255,0.25);
  outline-offset: -2px;
}

/* Drag "ghost" image */
table.reorder-drag-image {
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(25,25,25,0.95);
}

table.reorder-drag-image td,
table.reorder-drag-image th {
  background: transparent;
}


/* Animated <details> (used by Description/Summary boxes)
   JS handles the height animation; CSS just ensures consistent spacing. */
.details-animate-body{ padding-top:10px; }

html.theme-light body[data-desc-summary-backdrop-light="1"] .details-animate-body{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--desc-summary-backdrop-light-rgb), var(--desc-summary-backdrop-light-a));
  border: 1px solid rgba(30,41,59,0.12);
}

/* Keep Summary/Description-style detail sections on the non-episode detail pages
   using the same light-theme blue backdrop treatment as the Episodes detail page. */
html.theme-light body[data-desc-summary-backdrop-light="1"] .desc-summary-expandable .details-animate-body{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--desc-summary-backdrop-light-rgb), var(--desc-summary-backdrop-light-a));
  border: 1px solid rgba(30,41,59,0.12);
}


/* Scroll-to-top button */
.scroll-top-btn{
  position: fixed !important;

  /*
    Keep it on the right edge, but give it enough breathing room so
    the glow/shadow isn't visibly clipped by the viewport edge.

    Use CSS vars so JS can keep the button pinned even if some browsers
    drop env(safe-area-inset-*) declarations.
  */
  /* Base inset values.
     The right inset is intentionally a bit larger to avoid looking
     "cut off" behind platform scrollbars and to keep the shadow visible. */
  --stb-right: 36px;
  --stb-bottom: 24px;

  /* Reset any left/top so the button cannot get shoved off-screen. */
  left: auto !important;
  top: auto !important;

  /* Fallback positioning (for browsers that do not support env()). */
  right: var(--stb-right) !important;
  bottom: var(--stb-bottom) !important;
  inset: auto var(--stb-right) var(--stb-bottom) auto;

  /* Safe-area support (overrides fallback when supported). */
  right: calc(var(--stb-right) + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(var(--stb-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  inset: auto calc(var(--stb-right) + env(safe-area-inset-right, 0px)) calc(var(--stb-bottom) + env(safe-area-inset-bottom, 0px)) auto;

  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  z-index: 3000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px) scale(0.98);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}


.scroll-top-btn.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s;
}

@media (pointer: fine){
  .scroll-top-btn:hover{
    /* a subtle lift without changing the existing palette */
    transform: translateY(-1px) scale(1.02);
  }
}

html.motion-off .scroll-top-btn,
html.motion-reduce .scroll-top-btn{
  transition: none;
}

/* =====================================================================
   Custom pages: Link list mode
   ===================================================================== */

.custom-link-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-link-item{
  margin: 0;
}

.custom-link-a{
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15, 19, 27, 0.22);
}

.custom-link-title{
  font-weight: 650;
}

.custom-link-desc{
  margin-top: 4px;
  font-size: var(--custom-link-desc-font-size, 13px);
  opacity: 0.78;
  white-space: pre-wrap;
}

.custom-link-multi{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15, 19, 27, 0.22);
}

.custom-link-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.custom-link-action{
  text-decoration: none;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

@media (max-width: 680px){
  .custom-link-actions{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .custom-link-action{
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-width: 0;
  }
}

.custom-link-section{
  padding: 12px 4px 6px 4px;
  font-weight: 750;
  opacity: 0.9;
}

.custom-link-a:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(15, 19, 27, 0.32);
}

html.theme-light .custom-link-a{
  border: 1px solid rgba(30,41,59,0.14);
  background: rgba(255,255,255,0.78);
}

html.theme-light .custom-link-a:hover{
  border-color: rgba(30,41,59,0.20);
  background: rgba(255,255,255,0.92);
}

html.theme-light .custom-link-multi{
  border: 1px solid rgba(30,41,59,0.14);
  background: rgba(255,255,255,0.78);
}

/* Admin editor UI for link lists */
.cp-links{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 19, 27, 0.18);
}

html.theme-light .cp-links{
  border: 1px solid rgba(30,41,59,0.14);
  background: rgba(255,255,255,0.70);
}

.cp-links-toolbar{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cp-links-table{
  display: grid;
  gap: 8px;
}

.cp-links-head,
.cp-links-row{
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr auto;
  gap: 8px;
  align-items: center;
}

.cp-links-row.cp-links-heading{
  grid-template-columns: 1fr auto;
}

.cp-links-head{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  padding: 0 2px;
}

.cp-links-head > div:first-child,
.cp-links-head > div:nth-child(3){
  color: #fff;
}

html.theme-light .cp-links-head > div:first-child,
html.theme-light .cp-links-head > div:nth-child(3){
  color: #fff;
}

.cp-links-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cp-link-urls,
.cp-link-desc{
  min-height: 84px;
  resize: vertical;
}

@media (max-width: 720px){
  .cp-links-head{ display: none; }
  .cp-links-row{ grid-template-columns: 1fr; }
  .cp-links-row.cp-links-heading{ grid-template-columns: 1fr; }
  .cp-links-actions{ justify-content: flex-start; }
}

/* Character details: photo toggle buttons (2-per-row when 3+ options exist) */
.char-photo-switch{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(520px, 100%);
  margin: 0 auto;
}
.char-photo-switch a{
  width: 100%;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 700;
}
.char-photo-switch a[data-photo="2"],
.char-photo-switch a[data-photo="1"]{
  border-radius: 0;
}
.char-photo-switch a[data-photo="2"]{
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  -webkit-clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  padding-left: 18px;
}
.char-photo-switch a[data-photo="1"]{
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-right: 18px;
}
.char-photo-switch a[data-photo="3"],
.char-photo-switch a[data-photo="4"]{
  clip-path: none;
  -webkit-clip-path: none;
}

@supports not (clip-path: polygon(0 0)){
  .char-photo-switch a[data-photo="1"],
  .char-photo-switch a[data-photo="2"]{ border-radius: 12px; }
}

/* Admin: compact page thumbs group */
.admin-page-thumbs{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}


/* List filter layout */
.list-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-filters-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
}

.list-filters-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 1024px) {
  .list-filters-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .list-filters-actions {
    margin-left: auto;
    flex-wrap: nowrap;
  }
}

@media (min-width: 681px) {
  .public-list-page select[id$="Sort"] { width: 180px; box-sizing: border-box; }
  .public-list-page select[id$="Dir"] { width: 140px; box-sizing: border-box; }
  .public-list-page select[id$="PageSize"] { width: 140px; box-sizing: border-box; }
}

@media (max-width: 680px) {
  .public-list-page .list-filters-row {
    align-items: stretch;
  }

  .public-list-page .list-filters-row > div:not(.list-filters-actions),
  .public-list-page .list-filters-actions {
    width: 100%;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .public-list-page .list-filters .label {
    display: block;
    margin: 0 0 6px;
  }

  .public-list-page .list-filters .input,
  .public-list-page .list-filters .select,
  .public-list-page .list-filters .select-popover,
  .public-list-page .list-filters .select-display {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .public-list-page .list-filters .select-popover {
    min-width: 0 !important;
  }

  .public-list-page--episodes #episodesForm .list-filters-row:first-child > div:nth-child(2) {
    display: block !important;
  }

  /* Episodes mobile: keep the custom desktop Album trigger hidden unless the
     mobile animated-select enhancement is active. */
  .public-list-page--episodes #episodesAlbumWrap .select-display {
    display: none !important;
  }

  .public-list-page--episodes #episodesAlbumWrap select.select {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  html.js .mobile-search .mobile-filter-select-popover {
    display: block;
    width: 100%;
    position: relative;
  }

  html.js .mobile-search .mobile-filter-select-popover > .mobile-filter-select-display,
  html.js .mobile-search .mobile-filter-select-popover > .mobile-filter-select-options {
    display: none;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > select.select {
    display: none !important;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display {
    display: block !important;
    width: 100%;
    text-align: left;
    padding: 8px 36px 8px 14px;
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.18);
    background: rgba(255,255,255,0.90);
    color: #1d2430;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after {
    content: "\25BE";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 45%;
    color: #5f6b7e;
    pointer-events: none;
    transition: transform .18s ease;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display {
    border-color: rgba(59, 130, 246, 0.34);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
    background: rgba(255,255,255,0.96);
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display::after {
    transform: translateY(-50%) rotate(180deg);
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 2200;
    max-height: min(320px, 48vh);
    overflow: auto;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.16);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scaleY(0.98);
    transform-origin: top center;
    transition:
      opacity .18s ease,
      transform .22s ease,
      visibility 0s linear .22s;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scaleY(1);
    transition:
      opacity .18s ease,
      transform .22s ease;
  }

  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1d2430;
    box-sizing: border-box;
    transition:
      background-color .16s ease,
      transform .16s ease,
      color .16s ease;
  }

  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option + .mobile-filter-select-option {
    margin-top: 2px;
  }

  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:hover,
  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:focus-visible {
    background: rgba(59, 130, 246, 0.10);
    color: #0f172a;
  }

  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option.is-selected {
    background: rgba(59, 130, 246, 0.14);
    color: #0f172a;
    font-weight: 600;
  }

  html.js .mobile-search .mobile-filter-select-popover .mobile-filter-select-option[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  html.theme-light .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display {
    background: rgba(255,255,255,0.90);
    border-color: rgba(30, 41, 59, 0.18);
    color: #1d2430;
  }

  html.theme-light .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options {
    background: rgba(255,255,255,0.98);
    border-color: rgba(30, 41, 59, 0.16);
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display {
    background: #141414;
    border-color: #333;
    color: #e7e7e7;
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after {
    color: #b8c0cc;
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display {
    border-color: rgba(83, 140, 255, 0.52);
    box-shadow: 0 16px 34px rgba(29,111,227,.18);
    background: #181818;
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options {
    background: #141414;
    border-color: #333;
    box-shadow: 0 22px 42px rgba(0,0,0,.45);
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover .mobile-filter-select-option,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover .mobile-filter-select-option {
    color: #e7e7e7;
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:hover,
  html.theme-dark .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:focus-visible,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:hover,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover .mobile-filter-select-option:focus-visible {
    background: rgba(29,111,227,.18);
    color: #ffffff;
  }

  html.theme-dark .mobile-search .mobile-filter-select-popover .mobile-filter-select-option.is-selected,
  html:not(.theme-light) .mobile-search .mobile-filter-select-popover .mobile-filter-select-option.is-selected {
    background: rgba(29,111,227,.24);
    color: #ffffff;
  }
}

@media (min-width: 761px) {
  html.js .public-list-page .mobile-search .list-filters-row > div,
  html.js .public-list-page .mobile-search .list-filters-actions{
    position: relative;
    z-index: 0;
  }

  html.js .public-list-page .mobile-search .list-filters-row > div.mobile-filter-field-open,
  html.js .public-list-page .mobile-search .list-filters-actions.mobile-filter-field-open{
    z-index: 90;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active{
    display: block;
    width: 100%;
    position: relative;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active.open{
    z-index: 91;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > select.select{
    display: none !important;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
    display: block !important;
    width: 100%;
    min-height: var(--ui-control-height);
    text-align: left;
    padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 24px) var(--ui-control-padding-y) var(--ui-control-padding-x);
    border-radius: 10px;
    border: 1px solid #333;
    background: #141414;
    color: #e7e7e7;
    position: relative;
    box-sizing: border-box;
    font-size: calc(1rem * var(--ui-font-scale));
    line-height: 1.35;
    cursor: pointer;
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease,
      color .18s ease;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
    content: "\25BE";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 45%;
    color: #b8c0cc;
    pointer-events: none;
    transition: transform .18s ease;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
    border-color: rgba(83, 140, 255, 0.52);
    box-shadow: 0 16px 34px rgba(29,111,227,.18);
    background: #181818;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display::after{
    transform: translateY(-50%) rotate(180deg);
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 2200;
    max-height: min(320px, 50vh);
    overflow: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #333;
    background: #141414;
    box-shadow: 0 22px 42px rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scaleY(0.98);
    transform-origin: top center;
    transition:
      opacity .18s ease,
      transform .22s ease,
      visibility 0s linear .22s;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-options{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scaleY(1);
    transition:
      opacity .18s ease,
      transform .22s ease;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option{
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e7e7e7;
    box-sizing: border-box;
    line-height: 1.35;
    transition:
      background-color .16s ease,
      color .16s ease;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option + .mobile-filter-select-option{
    margin-top: 2px;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option:hover,
  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option:focus-visible{
    background: rgba(29,111,227,.18);
    color: #ffffff;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option.is-selected{
    background: rgba(29,111,227,.24);
    color: #ffffff;
    font-weight: 600;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option[disabled]{
    opacity: 0.55;
    cursor: not-allowed;
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
    background: rgba(255,255,255,0.90);
    border-color: rgba(30, 41, 59, 0.18);
    color: #1d2430;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
    color: #5f6b7e;
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
    border-color: rgba(59, 130, 246, 0.34);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
    background: rgba(255,255,255,0.96);
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
    background: rgba(255,255,255,0.98);
    border-color: rgba(30, 41, 59, 0.16);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option{
    color: #1d2430;
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option:hover,
  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option:focus-visible{
    background: rgba(59, 130, 246, 0.10);
    color: #0f172a;
  }

  html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option.is-selected{
    background: rgba(59, 130, 246, 0.14);
    color: #0f172a;
  }
}

html.motion-off .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-off .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-off .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-off .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option,
html.motion-reduce .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-reduce .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-reduce .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-reduce .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced .mobile-filter-select-option {
  transition: none !important;
}

html.motion-off .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-off .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-off .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-off .mobile-search .mobile-filter-select-popover .mobile-filter-select-option,
html.motion-reduce .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-reduce .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-reduce .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-reduce .mobile-search .mobile-filter-select-popover .mobile-filter-select-option {
  transition: none !important;
}

/* Public tab search: collapse filter boxes on mobile behind a toggle */
.mobile-search-toggle{
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.mobile-search-toggle__label{
  font-weight: 700;
}

.mobile-search-toggle__meta{
  font-size: 13px;
  opacity: 0.85;
}

@media (max-width: 760px) {
  html.js .mobile-search-toggle{
    display: flex;
  }

  html.js .mobile-search-body{
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    margin-top: 0;
    transition:
      max-height .22s ease,
      opacity .18s ease,
      margin-top .18s ease,
      visibility 0s linear .22s;
    will-change: max-height, opacity;
  }

  html.js .mobile-search-body .list-filters{
    padding-inline: 3px;
  }

  html.js .mobile-search-body .list-filters-row > div,
  html.js .mobile-search-body .list-filters-actions{
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity .18s ease,
      transform .22s ease;
    will-change: opacity, transform;
  }

  html.js .mobile-search-body :is(input, select, textarea, button, a):focus-visible{
    outline-offset: 0;
  }

  html.js .mobile-search.is-open .mobile-search-body{
    max-height: var(--aio-mobile-search-body-height, 1200px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: 10px;
    transition:
      max-height .22s ease,
      opacity .18s ease,
      margin-top .18s ease;
  }

  html.js .mobile-search.is-open .mobile-search-body .list-filters-row > div,
  html.js .mobile-search.is-open .mobile-search-body .list-filters-actions{
    opacity: 1;
    transform: none;
  }

  html.js .mobile-search .list-filters-row > div,
  html.js .mobile-search .list-filters-actions{
    position: relative;
    z-index: 0;
  }

  html.js .mobile-search.is-open .mobile-search-body{
    overflow: visible;
  }

  html.js .mobile-search .list-filters-row > div.mobile-filter-field-open,
  html.js .mobile-search .list-filters-actions.mobile-filter-field-open{
    z-index: 80;
  }

  html.js .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced.is-enhanced-select-active.open{
    z-index: 81;
  }
}



/* Keep Search / Reset buttons from lifting into clipped parent edges on Public + Admin pages. */
.list-filters,
.list-filters-row,
.list-filters-actions,
.mobile-search-body,
.admin-edit-panel--addsearch,
.admin-edit-search-form,
.admin-edit-search-row,
.admin-edit-search-actions,
.admin-edit-search-actions-inline,
.admin-edit-search-table-wrap{
  overflow: visible;
}

@media (pointer: fine){
  .list-filters-actions .btn:hover:not(:active),
  .list-filters-actions .btn:focus-visible,
  .admin-edit-search-actions .btn:hover:not(:active),
  .admin-edit-search-actions .btn:focus-visible,
  .admin-edit-search-actions-inline .btn:hover:not(:active),
  .admin-edit-search-actions-inline .btn:focus-visible{
    transform: none;
  }
}

/* Elsewhere detail: match Arc detail thumbnail sizing so it scales down cleanly as the window narrows. */
.split.split-elsewhere > :first-child{
  flex: 0 1 auto;
  width: auto;
  max-width: clamp(220px, 30vw, 440px);
  min-width: 0;
  flex-shrink: 1;
  align-self: flex-start;
}
.split.split-elsewhere > :last-child{
  flex: 1 1 420px;
  min-width: 0;
}


/* Album + Season detail thumbnails: match Elsewhere detail sizing (desktop),
   while still shrinking nicely on mobile. */
body[data-page-kind="album"] .split.album-detail-card > :first-child,
body[data-page-kind="season"] .split.season-detail-card > :first-child {
  flex: 0 0 auto;
  width: auto;
  max-width: clamp(220px, 30vw, 440px);
  flex-shrink: 0;
  align-self: flex-start;
}
body[data-page-kind="album"] .split.album-detail-card > :last-child,
body[data-page-kind="season"] .split.season-detail-card > :last-child {
  flex: 1 1 420px;
  min-width: 0;
}

body[data-page-kind="album"] .thumb-lg,
body[data-page-kind="season"] .thumb-lg {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  height: auto;
  max-height: clamp(260px, 52vh, 380px);
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid #2a2a2a;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}


.thumb-elsewhere-page{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}

@media (min-width: 821px){
  .thumb-elsewhere-page{
    max-width: 420px;
    max-height: clamp(260px, 52vh, 380px);
  }
}


/* Elsewhere: also hide # + Votes + AIOWiki on small tablets (match mobile list layout) */
@media (max-width: 820px) {
  .elsewhere-table th:nth-child(2), .elsewhere-table td:nth-child(2),
  .elsewhere-table th:nth-child(5), .elsewhere-table td:nth-child(5),
  .elsewhere-table th:nth-child(6), .elsewhere-table td:nth-child(6) { display:none; }
}

/* Character photo Older/Newer controls redesign for light theme */
html.theme-light .character-media-card .char-photo-switch{
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(237,242,255,0.82));
  border: 1px solid rgba(44, 84, 153, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 4px rgba(22, 46, 94, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-light .character-media-card .char-photo-switch a,
html.theme-light .character-media-card .char-photo-switch a.active,
html.theme-light .character-media-card .char-photo-switch a:focus-visible{
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 12px !important;
  min-width: 92px;
  padding: 8px 14px !important;
  border: 1px solid rgba(36, 84, 166, 0.55) !important;
  background: linear-gradient(180deg, #f5f8ff, #e3ecff) !important;
  color: #2164cc !important;
  font-weight: 800;
  text-shadow: none;
  filter: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(24, 58, 116, 0.10) !important;
}

html.theme-light .character-media-card .char-photo-switch a::after{
  display: none !important;
}

html.theme-light .character-media-card .char-photo-switch a.active{
  border-color: rgba(29, 76, 153, 0.88) !important;
  background: linear-gradient(180deg, #dceaff, #cbdfff) !important;
  color: #1f58ad !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 1px 2px rgba(24, 58, 116, 0.12) !important;
}

@media (pointer: fine){
  html.theme-light .character-media-card .char-photo-switch a:hover:not(:active){
    border-color: rgba(33, 86, 170, 0.90) !important;
    background: linear-gradient(180deg, #edf4ff, #d8e6ff) !important;
    color: #1f5fc2 !important;
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      0 2px 6px rgba(23, 58, 117, 0.14) !important;
  }
}

html.theme-light .character-media-card .char-photo-switch a:active{
  transform: translateY(0) scale(0.99);
}

html.theme-light .character-media-card .char-photo-switch a:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 2px rgba(46, 106, 210, 0.18),
    0 1px 2px rgba(24, 58, 116, 0.10) !important;
}


/* Character photo Older/Newer controls redesign for dark + dim themes */
html.theme-dark .character-media-card .char-photo-switch,
html.theme-dim .character-media-card .char-photo-switch{
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(44,52,70,0.92), rgba(28,34,46,0.92));
  border: 1px solid rgba(98, 128, 188, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 4px rgba(0,0,0,0.30);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-dark .character-media-card .char-photo-switch a,
html.theme-dark .character-media-card .char-photo-switch a.active,
html.theme-dark .character-media-card .char-photo-switch a:focus-visible,
html.theme-dim .character-media-card .char-photo-switch a,
html.theme-dim .character-media-card .char-photo-switch a.active,
html.theme-dim .character-media-card .char-photo-switch a:focus-visible{
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 12px !important;
  min-width: 92px;
  padding: 8px 14px !important;
  border: 1px solid rgba(88, 126, 206, 0.70) !important;
  background: linear-gradient(180deg, rgba(40,54,84,0.98), rgba(30,41,65,0.98)) !important;
  color: #a9c8ff !important;
  font-weight: 800;
  text-shadow: none;
  filter: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.34) !important;
}

html.theme-dark .character-media-card .char-photo-switch a::after,
html.theme-dim .character-media-card .char-photo-switch a::after{
  display: none !important;
}

html.theme-dark .character-media-card .char-photo-switch a.active,
html.theme-dim .character-media-card .char-photo-switch a.active{
  border-color: rgba(113, 160, 255, 0.92) !important;
  background: linear-gradient(180deg, rgba(53,73,113,0.98), rgba(37,51,84,0.98)) !important;
  color: #d6e6ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(152, 191, 255, 0.08),
    0 1px 2px rgba(0,0,0,0.36) !important;
}

@media (pointer: fine){
  html.theme-dark .character-media-card .char-photo-switch a:hover:not(:active),
  html.theme-dim .character-media-card .char-photo-switch a:hover:not(:active){
    border-color: rgba(122, 173, 255, 0.95) !important;
    background: linear-gradient(180deg, rgba(50,70,108,0.98), rgba(35,49,79,0.98)) !important;
    color: #d3e4ff !important;
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 2px 6px rgba(0,0,0,0.34) !important;
  }
}

html.theme-dark .character-media-card .char-photo-switch a:active,
html.theme-dim .character-media-card .char-photo-switch a:active{
  transform: translateY(0) scale(0.99);
}

html.theme-dark .character-media-card .char-photo-switch a:focus-visible,
html.theme-dim .character-media-card .char-photo-switch a:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 2px rgba(88, 150, 255, 0.22),
    0 1px 2px rgba(0,0,0,0.34) !important;
}

/* Center Character Older/Newer control under the image in all themes */
.character-photo-controls{
  justify-content: center !important;
}

.character-media-card .char-photo-switch{
  margin-left: auto;
  margin-right: auto;
}

/* --- Character photo controls centering (wrapper-level fix) --- */
.character-media-card .character-photo-controls{
  display: flex;
  width: 100%;
  align-self: stretch;
  justify-content: center;
}

.character-media-card .char-photo-switch{
  margin: 0 auto;
}


/* Tighten spacing: move Older/Newer group closer to character image */
.character-media-card .character-photo-controls{
  margin-top: -6px;
}


/* Episode detail: character thumbnail grid */
.episode-character-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}
.episode-character-item{
  width: clamp(72px, 10vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: visible;
  transform: translateY(0);
  transition: transform .18s ease;
  will-change: transform;
}
.episode-character-thumb-link{
  display: inline-flex;
  text-decoration: none;
  line-height: 0;
  border-radius: 12px;
}
.episode-character-thumb{
  display: block;
  transition: filter .18s ease;
}
.episode-character-item:hover,
.episode-character-item:focus-within{
  transform: translateY(-8px);
}
.episode-character-item:hover .episode-character-thumb,
.episode-character-item:focus-within .episode-character-thumb{
  box-shadow: none;
  filter: brightness(1.04);
}
.episode-character-thumb-link:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.episode-character-thumb-placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
}
.episode-character-name{
  width: 100%;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.episode-character-name:hover{
  text-decoration: underline;
}


/* Admin editor refresh: cleaner split layout used by admin edit pages */
.admin-edit-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-edit-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(320px, 0.95fr);
  gap:12px;
  align-items:start;
}
.admin-edit-main,
.admin-edit-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.admin-edit-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.admin-edit-toolbar__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.admin-edit-toolbar__eyebrow{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8fb9ff;
  font-weight:800;
}
.admin-edit-toolbar__title{
  font-size:20px;
  font-weight:800;
  line-height:1.15;
}
.admin-edit-toolbar__sub{
  color:#aab2bf;
  font-size:13px;
  line-height:1.45;
  max-width:72ch;
}
.admin-edit-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-panel{
  position:relative;
  overflow:hidden;
}
.admin-edit-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(0,130,198,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.admin-edit-panel > *{ position:relative; z-index:1; }
.admin-edit-panel-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 12px 0;
}
.admin-edit-panel-head h2{
  margin:0;
  font-size:16px;
  line-height:1.2;
}
.admin-edit-panel-head p{
  margin:0;
  color:#aab2bf;
  font-size:13px;
  line-height:1.45;
}
.admin-edit-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-edit-panel input[type="text"],
.admin-edit-panel input[type="number"],
.admin-edit-panel input[type="url"],
.admin-edit-panel select,
.admin-edit-panel textarea{
  width:100%;
  max-width:100%;
}
.admin-edit-field-row{
  display:grid;
  gap:12px;
}
.admin-edit-field-row + .admin-edit-field-row{ margin-top:12px; }
.admin-edit-field-row--2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.admin-edit-field-row--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.admin-edit-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.admin-edit-inline > input[type="text"],
.admin-edit-inline > input[type="number"],
.admin-edit-inline > select,
.admin-edit-inline > textarea{
  flex:1 1 auto;
  min-width:0;
}
.admin-edit-split-note{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.025);
}
.admin-edit-media-grid{
  display:grid;
  gap:12px;
}
.admin-edit-media-grid--2{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.admin-edit-media-card{
  padding:12px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(255,255,255,0.025);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-edit-media-card h3{
  margin:0;
  font-size:14px;
}
.admin-edit-preview-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.admin-edit-preview{
  width:76px;
  height:76px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.admin-edit-preview img,
.admin-edit-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.admin-edit-preview--wide{
  width:100%;
  max-width:200px;
  height:auto;
  aspect-ratio:1/1;
}
.admin-edit-help-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-edit-textarea textarea,
.admin-edit-textarea input,
.admin-edit-textarea select{
  width:100%;
}
.admin-edit-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.admin-edit-management{
  padding:12px;
  border:1px solid rgba(255,94,94,0.28);
  background:rgba(180,35,24,0.08);
  border-radius:14px;
}
.admin-edit-management h3{
  margin:0 0 6px 0;
  font-size:14px;
  color:#ffb4ac;
}
.admin-edit-table-card .table-wrap{
  margin-top:8px;
}
.admin-edit-table-card .data-table thead th{
  position:sticky;
  top:0;
  background:#11141b;
  z-index:1;
}
.admin-vote-settings{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-vote-settings__group{
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.025);
}
.admin-vote-settings__group h3{
  margin:0 0 10px 0;
  font-size:14px;
}
.admin-vote-settings__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.admin-vote-settings__actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.admin-vote-settings__actions input{
  width:110px;
  flex:0 0 auto;
}
.admin-edit-spacer-top{
  margin-top:14px;
}
@media (max-width: 980px){
  .admin-edit-grid{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .admin-edit-field-row--2,
  .admin-edit-field-row--3,
  .admin-edit-media-grid--2,
  .admin-vote-settings__grid{
    grid-template-columns:1fr;
  }
  .admin-edit-toolbar__title{ font-size:18px; }
  .admin-edit-actions{ justify-content:flex-start; }
}


/* Admin edit page shell standardization (step 1) */
.admin-edit-page{
  max-width: 1380px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-edit-page .page-hero,
.admin-edit-page .card{
  margin-bottom:0;
}
.admin-edit-page-frame{
  margin-bottom:0;
}
.admin-edit-page-frame__breadcrumbs,
.admin-edit-outline{
  width:auto;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.admin-edit-page-frame__breadcrumbs::before,
.admin-edit-outline::before,
.admin-edit-page-frame__breadcrumbs::after,
.admin-edit-outline::after{
  content:none;
}
.admin-edit-page-frame__breadcrumbs a{
  display:inline-flex;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.admin-edit-page-frame__breadcrumbs a:hover,
.admin-edit-page-frame__breadcrumbs a:active,
.admin-edit-page-frame__breadcrumbs a.active{
  background:transparent;
  box-shadow:none;
  transform:none;
}
.admin-edit-page-frame__breadcrumbs{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:6px;
  column-gap:0;
  margin:0 0 12px 0;
  font-size:12px;
  letter-spacing:.02em;
  color:#b9c4d4;
}
.admin-edit-page-frame__crumb{
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:100%;
}
.admin-edit-page-frame__crumb::before{
  content:"/";
  flex:0 0 auto;
  margin:0 12px;
  color:#8ea0b8;
}
.admin-edit-page-frame__crumb:first-child::before{
  content:none;
  margin:0;
}
.admin-edit-page-frame__crumb > a,
.admin-edit-page-frame__crumb > span{
  min-width:0;
  overflow-wrap:anywhere;
}
.admin-edit-page-frame__crumb > a{
  color:#dce9ff;
  text-decoration:none;
}
.admin-edit-page-frame__crumb > a:hover{
  text-decoration:underline;
}
.admin-edit-page-frame__crumb:last-child,
.admin-edit-page-frame__crumb:last-child > span{
  color:#f2f5fb;
}
.admin-edit-page-frame__row{
  align-items:flex-start;
  gap:18px;
}
.admin-edit-page-frame__text{
  flex:1 1 auto;
  min-width:0;
}
.admin-edit-page-frame__eyebrow{
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#8fb9ff;
  font-weight:800;
}
.admin-edit-page-frame__quick{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
}
.admin-edit-toolbar--frame{
  align-items:center;
}
.admin-edit-toolbar--frame .admin-edit-toolbar__sub{
  max-width:54ch;
}
@media (max-width: 820px){
  .admin-edit-page-frame__row{
    flex-direction:column;
  }
  .admin-edit-page-frame__quick{
    justify-content:flex-start;
    width:100%;
  }
}


/* Admin edit section card styling (step 3) */
.admin-edit-grid{
  gap:14px;
}
.admin-edit-main,
.admin-edit-side{
  gap:14px;
}
.card.admin-edit-panel{
  padding:18px;
  border-radius:18px;
  border-color:rgba(140, 168, 208, 0.18);
  box-shadow:
    0 16px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.admin-edit-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.admin-edit-panel::before{
  background:
    radial-gradient(circle at top right, rgba(0,130,198,0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));
}
.admin-edit-panel > .admin-edit-panel-head,
.admin-edit-panel > .admin-edit-stack,
.admin-edit-panel > .admin-edit-textarea,
.admin-edit-panel > .admin-edit-media-grid,
.admin-edit-panel > .admin-vote-settings{
  width:100%;
}
.admin-edit-panel-head{
  gap:6px;
  margin:0;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-edit-panel-head h2{
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
}
.admin-edit-panel-head p{
  max-width:64ch;
  line-height:1.55;
}
.admin-edit-panel label.muted{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  color:#c9d5e7;
}
.admin-edit-inline label.muted,
label.muted.admin-edit-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:13px;
  font-weight:600;
  color:#aab2bf;
}
.admin-edit-panel .help-text{
  margin-top:6px;
}
.admin-edit-stack{
  gap:14px;
}
.admin-edit-media-grid{
  gap:14px;
  align-items:start;
}
.admin-edit-media-card{
  padding:14px;
  border-radius:16px;
  border-color:rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.admin-edit-media-card h3{
  font-size:14px;
  font-weight:800;
}
.admin-edit-textarea textarea{
  min-height:140px;
}
html.theme-light .card.admin-edit-panel{
  border-color:rgba(30,41,59,0.16);
  box-shadow:
    0 14px 28px rgba(16,24,40,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
html.theme-light .admin-edit-panel-head{
  border-bottom-color:rgba(30,41,59,0.10);
}
html.theme-light .admin-edit-panel label.muted{
  color:#475467;
}

/* Admin edit action bar normalization (step 2) */
.admin-edit-toolbar--frame .admin-edit-actions{
  margin-left:auto;
  max-width:100%;
}
.admin-edit-page-frame__quick .btn,
.admin-edit-actions .btn,
.admin-edit-form-actions .btn{
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  white-space:nowrap;
}
.admin-edit-page-frame__quick .btn.btn-mini,
.admin-edit-actions .btn.btn-mini,
.admin-edit-form-actions .btn.btn-mini{
  min-height:42px;
  padding:10px 14px;
  font-size:14px;
}
@media (max-width: 900px){
  .admin-edit-toolbar--frame .admin-edit-actions{
    width:100%;
    justify-content:flex-start;
  }
}
@media (max-width: 700px){
  .admin-edit-actions,
  .admin-edit-form-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    align-items:stretch;
  }
  .admin-edit-actions .btn,
  .admin-edit-form-actions .btn{
    width:100%;
  }
}
@media (max-width: 520px){
  .admin-edit-page-frame__quick,
  .admin-edit-actions,
  .admin-edit-form-actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    align-items:stretch;
  }
  .admin-edit-page-frame__quick .btn,
  .admin-edit-actions .btn,
  .admin-edit-form-actions .btn{
    width:100%;
  }
}


/* Admin edit identity/details section unification (step 4) */
.admin-edit-panel--identity{
  gap:18px;
}
.admin-edit-panel--identity .admin-edit-stack--identity{
  gap:16px;
}
.admin-edit-panel--identity .admin-edit-field,
.admin-edit-panel--identity .admin-edit-field-row--identity > div{
  min-width:0;
}
.admin-edit-panel--identity .admin-edit-field-row--identity{
  gap:14px 16px;
  align-items:start;
}
.admin-edit-panel--identity .admin-edit-field--url{
  margin-top:0;
}
.admin-edit-panel--identity .admin-edit-spacer-top{
  margin-top:0;
}
.admin-edit-panel--identity .admin-edit-inline--url{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
}
.admin-edit-panel--identity .admin-edit-inline--url > input[type="text"],
.admin-edit-panel--identity .admin-edit-inline--url > input[type="url"]{
  width:100%;
  min-width:0;
}
.admin-edit-panel--identity .admin-edit-inline--url .btn{
  white-space:nowrap;
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-edit-panel--identity .help-text{
  max-width:72ch;
}
.admin-edit-panel--identity .admin-edit-split-note .muted{
  display:block;
}
@media (max-width: 700px){
  .admin-edit-panel--identity .admin-edit-inline--url{
    grid-template-columns:1fr;
  }
  .admin-edit-panel--identity .admin-edit-inline--url .btn{
    width:100%;
  }
}


/* Admin edit ratings and vote settings panels (step 5) */
.admin-vote-settings{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-vote-settings--single .admin-vote-settings__group{
  max-width:none;
}
.admin-vote-settings__overview{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(143, 185, 255, 0.20);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(85, 126, 214, 0.13), rgba(85, 126, 214, 0.05)),
    rgba(255,255,255,0.02);
}
.admin-vote-settings__summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  min-width:0;
}
.admin-vote-settings__overview-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.admin-vote-settings__overview-copy strong{
  font-size:14px;
  line-height:1.3;
}
.admin-vote-settings__overview-copy span{
  color:#b9c4d4;
  font-size:13px;
  line-height:1.5;
}
.admin-vote-settings__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.admin-vote-settings__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.admin-vote-settings__badge--legacy{
  border-color:rgba(255, 193, 88, 0.34);
  background:rgba(255, 193, 88, 0.14);
  color:#ffd68d;
}
.admin-vote-settings__badge--new{
  border-color:rgba(106, 196, 255, 0.30);
  background:rgba(33, 119, 255, 0.14);
  color:#b8ddff;
}
.admin-vote-settings__info-link{
  flex:0 0 auto;
}
.admin-vote-settings__group{
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.admin-vote-settings__group--legacy{
  border-color:rgba(255, 193, 88, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 193, 88, 0.08), rgba(255, 193, 88, 0.02)),
    rgba(255,255,255,0.02);
}
.admin-vote-settings__group--new{
  border-color:rgba(106, 196, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(33, 119, 255, 0.08), rgba(33, 119, 255, 0.02)),
    rgba(255,255,255,0.02);
}
.admin-vote-settings__group-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.admin-vote-settings__eyebrow{
  margin:0 0 5px 0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#9dbff3;
}
.admin-vote-settings__group--legacy .admin-vote-settings__eyebrow{
  color:#ffcf73;
}
.admin-vote-settings__group h3{
  margin:0;
  font-size:15px;
  line-height:1.35;
}
.admin-vote-settings__group-head p{
  margin:5px 0 0 0;
  color:#b9c4d4;
  font-size:13px;
  line-height:1.55;
  max-width:58ch;
}
.admin-vote-settings__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.admin-vote-settings__metric{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(10, 13, 20, 0.22);
}
.admin-vote-settings__metric input{
  width:100%;
}
.admin-vote-settings__metric .help-text{
  margin-top:0;
}
.admin-vote-settings__metric-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}
.admin-vote-settings__note{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:12px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(84, 195, 255, 0.18);
  background:rgba(84, 195, 255, 0.08);
}
.admin-vote-settings__note strong{
  font-size:13px;
}
.admin-vote-settings__note span{
  color:#d7e6f8;
  font-size:13px;
  line-height:1.55;
}
.admin-edit-panel--ratings .admin-edit-panel-head p{
  max-width:56ch;
}

@media (max-width: 820px){
  .admin-vote-settings__overview{
    align-items:flex-start;
  }
  .admin-vote-settings__summary{
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-vote-settings__grid{
    grid-template-columns:1fr;
  }
}

html.theme-light .admin-vote-settings__overview{
  border-color:rgba(0, 83, 143, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 130, 198, 0.08), rgba(0, 130, 198, 0.03)),
    rgba(255,255,255,0.9);
}
html.theme-light .admin-vote-settings__overview-copy span,
html.theme-light .admin-vote-settings__group-head p{
  color:#526277;
}
html.theme-light .admin-vote-settings__badge{
  border-color:rgba(0,0,0,0.10);
  background:rgba(0,0,0,0.04);
}
html.theme-light .admin-vote-settings__badge--legacy{
  border-color:rgba(163, 105, 0, 0.24);
  background:rgba(255, 193, 88, 0.16);
  color:#835500;
}
html.theme-light .admin-vote-settings__badge--new{
  border-color:rgba(0, 88, 165, 0.22);
  background:rgba(0, 130, 198, 0.12);
  color:#00518b;
}
html.theme-light .admin-vote-settings__group{
  border-color:rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.86);
}
html.theme-light .admin-vote-settings__group--legacy{
  border-color:rgba(163, 105, 0, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 193, 88, 0.10), rgba(255, 193, 88, 0.03)),
    rgba(255,255,255,0.88);
}
html.theme-light .admin-vote-settings__group--new{
  border-color:rgba(0, 88, 165, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 130, 198, 0.08), rgba(0, 130, 198, 0.03)),
    rgba(255,255,255,0.88);
}
html.theme-light .admin-vote-settings__metric{
  border-color:rgba(0,0,0,0.08);
  background:rgba(245, 248, 252, 0.95);
}
html.theme-light .admin-vote-settings__note{
  border-color:rgba(0, 88, 165, 0.14);
  background:rgba(0, 130, 198, 0.08);
}
html.theme-light .admin-vote-settings__eyebrow{
  color:#2f70b5;
}
html.theme-light .admin-vote-settings__group--legacy .admin-vote-settings__eyebrow{
  color:#9a6600;
}
html.theme-light .admin-vote-settings__note span{
  color:#415368;
}


/* Admin edit media panel cleanup (step 6) */
.admin-edit-panel--media{
  gap:14px;
}
.admin-edit-media-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.admin-edit-media-overview__item,
.admin-edit-media-group{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
.admin-edit-media-overview__item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-edit-media-overview__item strong{
  font-size:13px;
  font-weight:800;
  color:#f2f5fb;
}
.admin-edit-media-overview__item span,
.admin-edit-media-card__head p,
.admin-edit-media-group-head p{
  color:#b9c4d4;
  font-size:12px;
  line-height:1.5;
}
.admin-edit-media-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-edit-media-group{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-edit-media-group-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-edit-media-group-head h3,
.admin-edit-media-card__head h3{
  margin:0;
}
.admin-edit-media-group-head p,
.admin-edit-media-card__head p{
  margin:0;
}
.admin-edit-media-card{
  gap:12px;
}
.admin-edit-media-card__head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-edit-media-field,
.admin-edit-media-status,
.admin-edit-media-upload{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-edit-media-status{
  min-height:76px;
  justify-content:center;
}
.admin-edit-media-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.admin-edit-media-card--primary{
  padding:16px;
}
html.theme-light .admin-edit-media-overview__item,
html.theme-light .admin-edit-media-group{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
}
@media (max-width: 820px){
  .admin-edit-media-overview{
    grid-template-columns:1fr;
  }
}


/* Admin edit summary/description/editor areas (step 7) */
.admin-edit-panel--content{
  gap:14px;
}
.admin-edit-content-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.admin-edit-content-overview__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
.admin-edit-content-overview__item strong{
  font-size:13px;
  font-weight:800;
  color:#f2f5fb;
}
.admin-edit-content-overview__item span,
.admin-edit-editor-card__head p,
.admin-edit-editor-note span{
  color:#b9c4d4;
  font-size:12px;
  line-height:1.5;
}
.admin-edit-content-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-edit-content-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  align-items:start;
}
.admin-edit-editor-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.admin-edit-editor-card--primary{
  padding:16px;
}
.admin-edit-editor-card__head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-edit-editor-card__head h3{
  margin:0;
  font-size:14px;
  font-weight:800;
}
.admin-edit-editor-card__head p,
.admin-edit-editor-note strong{
  margin:0;
}
.admin-edit-editor-card .admin-edit-textarea{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-edit-editor-card .admin-edit-textarea .help-text{
  margin-top:0;
}
.admin-edit-editor-card textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  line-height:1.55;
}
.admin-edit-editor-card--compact textarea{
  min-height:112px;
}
.admin-edit-editor-note{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(84, 195, 255, 0.18);
  background:rgba(84, 195, 255, 0.08);
}
html.theme-light .admin-edit-content-overview__item,
html.theme-light .admin-edit-editor-card{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
}
html.theme-light .admin-edit-editor-note{
  border-color:rgba(0, 88, 165, 0.14);
  background:rgba(0, 130, 198, 0.08);
}
html.theme-light .admin-edit-content-overview__item strong{
  color:#1d2430;
}
html.theme-light .admin-edit-content-overview__item span,
html.theme-light .admin-edit-editor-card__head p,
html.theme-light .admin-edit-editor-note span{
  color:#526277;
}
@media (max-width: 820px){
  .admin-edit-content-overview,
  .admin-edit-content-grid{
    grid-template-columns:1fr;
  }
}


/* Admin edit linked item tables (step 8) */
.admin-edit-panel--linked{
  gap:14px;
}
.admin-edit-panel--linked > details{
  width:100%;
}
.admin-edit-linked-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  list-style:none;
}
summary.admin-edit-linked-summary{
  cursor:pointer;
}
summary.admin-edit-linked-summary::-webkit-details-marker{
  display:none;
}
.admin-edit-linked-summary__title{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.admin-edit-linked-summary__title h2{
  margin:0;
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
}
.admin-edit-linked-summary__note{
  color:#b9c4d4;
  font-size:12px;
  line-height:1.55;
}
.admin-edit-linked-summary__meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
.admin-edit-linked-count{
  white-space:nowrap;
}
.admin-edit-linked-summary__hint{
  white-space:nowrap;
  font-size:12px;
}
.admin-edit-linked-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-edit-panel--linked details > .admin-edit-linked-body{
  padding-top:14px;
}
.admin-edit-linked-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-linked-toolbar__actions,
.admin-edit-linked-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.admin-edit-linked-empty{
  padding:12px 14px;
  border:1px dashed rgba(255,255,255,0.16);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  color:#b9c4d4;
}
.admin-edit-linked-table-wrap{
  max-height:420px;
  overflow:auto;
  border-radius:16px;
}
.admin-edit-linked-table th{
  white-space:nowrap;
}
.admin-edit-linked-table__action{
  text-align:right;
  white-space:nowrap;
}
.admin-edit-linked-actions{
  justify-content:flex-end;
}
.admin-edit-linked-note{
  margin:0;
}
html.theme-light .admin-edit-linked-summary{
  border-color:rgba(30,41,59,0.08);
}
html.theme-light .admin-edit-linked-summary__note,
html.theme-light .admin-edit-linked-empty{
  color:#526277;
}
html.theme-light .admin-edit-linked-empty{
  border-color:rgba(30,41,59,0.16);
  background:rgba(255,255,255,0.72);
}
@media (max-width: 820px){
  .admin-edit-linked-summary,
  .admin-edit-linked-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-edit-linked-summary__meta,
  .admin-edit-linked-actions,
  .admin-edit-linked-toolbar__actions{
    justify-content:flex-start;
    margin-left:0;
  }
}


/* Step 9: shared add/search + bulk add panel cleanup */
.admin-edit-panel--addsearch,
.admin-edit-panel--bulkadd{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-edit-panel-head--compact h2{
  margin:0;
}
.admin-edit-panel-head--compact p{
  margin:6px 0 0;
}
.admin-edit-search-form{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.admin-edit-search-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
.admin-edit-search-field{
  flex:1 1 260px;
  min-width:240px;
}
.admin-edit-search-field label{
  display:block;
  margin:0 0 6px;
}
.admin-edit-search-input-wrap{
  width:100%;
}
.admin-edit-search-input{
  width:100%;
}
.admin-edit-search-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-search-status{
  display:flex;
  align-items:center;
  min-height:38px;
  flex:1 1 180px;
}
.admin-edit-search-results{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-edit-search-meta,
.admin-edit-search-tip,
.admin-edit-search-empty{
  margin:0;
}
.admin-edit-search-row-muted{
  opacity:.62;
}
.admin-edit-search-table-wrap{
  border-radius:16px;
}
.admin-edit-search-table th{
  white-space:nowrap;
}
.admin-edit-search-table__action{
  text-align:right;
  white-space:nowrap;
}
.admin-edit-search-actions-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.admin-edit-bulk-intro{
  margin:-2px 0 0;
}
.admin-edit-bulk-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-edit-bulk-textarea{
  width:100%;
  resize:vertical;
  min-height:150px;
}
.admin-edit-bulk-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-page > .admin-edit-bulk-results{
  margin:12px 0;
}
.admin-edit-bulk-results{
  margin:0;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,130,198,0.45);
  background:rgba(0,130,198,0.12);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-edit-bulk-results.flash.bad,
.admin-edit-bulk-results.bad{
  border-color:rgba(255,80,80,0.45);
  background:rgba(255,80,80,0.12);
}
.admin-edit-bulk-results.flash.ok,
.admin-edit-bulk-results.ok{
  border-color:rgba(0,130,198,0.45);
  background:rgba(0,130,198,0.12);
}
.admin-edit-bulk-results--compact{
  padding:10px 12px;
}
.admin-edit-bulk-results__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.admin-edit-bulk-results__title{
  font-weight:700;
  margin:0 0 2px;
}
.admin-edit-bulk-results__message,
.admin-edit-bulk-results__summary{
  opacity:.92;
}
.admin-edit-bulk-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-bulk-stat{
  min-width:140px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.12);
}
.admin-edit-bulk-stat__label{
  font-size:12px;
  opacity:.8;
}
.admin-edit-bulk-stat__value{
  font-size:20px;
  font-weight:700;
  line-height:1;
}
.admin-edit-bulk-details-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-edit-bulk-details{
  margin:0;
}
.admin-edit-bulk-details summary{
  cursor:pointer;
}
.admin-edit-bulk-list{
  margin:6px 0 0 18px;
  padding:0;
}
.admin-edit-bulk-results--website-json .admin-edit-bulk-details--updates{
  border-color:rgba(96,165,250,0.55);
  background:rgba(59,130,246,0.13);
}
.admin-edit-bulk-results--website-json .admin-edit-bulk-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  max-height:34rem;
  overflow:auto;
  padding-right:4px;
}
.admin-edit-bulk-results--website-json .admin-edit-bulk-list li{
  margin:0;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.14);
  line-height:1.35;
}
.admin-edit-bulk-note{
  margin-top:6px;
}
.admin-edit-bulk-pre{
  white-space:pre-wrap;
  margin-top:8px;
}
.admin-edit-bulk-copy-row{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-bulk-copy-buffer{
  position:absolute;
  left:-9999px;
  top:-9999px;
}
.admin-edit-bulk-tags{
  margin-top:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.admin-edit-bulk-tag{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.12);
}
.admin-edit-bulk-code{
  opacity:.85;
}
html.theme-light .admin-edit-bulk-results{
  border-color:rgba(0,130,198,0.18);
  background:rgba(0,130,198,0.08);
}
html.theme-light .admin-edit-bulk-results.flash.bad,
html.theme-light .admin-edit-bulk-results.bad{
  border-color:rgba(220,38,38,0.18);
  background:rgba(220,38,38,0.08);
}
html.theme-light .admin-edit-bulk-results--website-json .admin-edit-bulk-details--updates{
  border-color:rgba(37,99,235,0.28);
  background:rgba(37,99,235,0.08);
}
html.theme-light .admin-edit-bulk-results--website-json .admin-edit-bulk-list li{
  border-color:rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.62);
}
html.theme-light .admin-edit-bulk-stat,
html.theme-light .admin-edit-bulk-tag{
  border-color:rgba(30,41,59,0.10);
  background:rgba(148,163,184,0.10);
}
@media (max-width: 820px){
  .admin-edit-search-form,
  .admin-edit-search-row,
  .admin-edit-search-actions,
  .admin-edit-bulk-actions{
    align-items:stretch;
  }
  .admin-edit-search-status{
    min-height:0;
  }
  .admin-edit-search-table__action{
    text-align:left;
  }
  .admin-edit-search-actions-inline{
    justify-content:flex-start;
  }
}

/* Step 10 - standardized danger zone panels */
.admin-edit-panel--danger{
  border:1px solid rgba(220,38,38,0.22);
  background:linear-gradient(180deg, rgba(120,18,18,0.16), rgba(0,0,0,0.10));
}
.admin-edit-panel--danger .admin-edit-panel-head{
  margin-bottom:14px;
}
.admin-edit-panel-head--danger h2{
  color:#fecaca;
}
.admin-edit-panel-head--danger p{
  max-width:64ch;
}
.admin-edit-danger-form{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(220,38,38,0.20);
  background:rgba(0,0,0,0.14);
}
.admin-edit-danger-copy{
  min-width:min(300px, 100%);
  flex:1 1 320px;
}
.admin-edit-danger-title{
  font-weight:700;
  margin:0 0 4px;
}
.admin-edit-danger-note{
  opacity:.92;
  line-height:1.45;
}
.admin-edit-danger-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.admin-edit-danger-actions .btn{
  min-width:160px;
}
html.theme-light .admin-edit-panel--danger{
  border-color:rgba(220,38,38,0.20);
  background:linear-gradient(180deg, rgba(220,38,38,0.08), rgba(248,250,252,0.88));
}
html.theme-light .admin-edit-panel-head--danger h2{
  color:#991b1b;
}
html.theme-light .admin-edit-danger-form{
  border-color:rgba(220,38,38,0.18);
  background:rgba(254,242,242,0.92);
}
@media (max-width: 820px){
  .admin-edit-danger-form,
  .admin-edit-danger-actions{
    align-items:stretch;
  }
  .admin-edit-danger-actions{
    width:100%;
  }
  .admin-edit-danger-actions .btn{
    width:100%;
    min-width:0;
  }
}

/* Step 11 - remove page-specific layout drift */
.admin-edit-open-link{
  display:none;
}
.admin-edit-inline-form{
  display:inline;
}
.admin-edit-search-state--hidden{
  display:none !important;
}
.admin-edit-copy-buffer{
  position:fixed;
  left:-9999px;
  top:-9999px;
}
.admin-edit-inline-note{
  margin-bottom:8px;
}
.admin-edit-help-text--hidden,
.admin-edit-preview-wrap--hidden,
.admin-edit-linked-empty--hidden,
.admin-edit-linked-table-wrap--hidden{
  display:none;
}
.admin-edit-linked-count--episodes{
  --lb-color: var(--lb-color-episodes, #60a5fa);
}
.admin-edit-linked-count--videos{
  --lb-color: var(--lb-color-episodes, #60a5fa);
}
.admin-edit-linked-count--characters{
  --lb-color: var(--lb-color-characters, #60a5fa);
}
.admin-edit-search-input--wide{
  min-width:260px;
}
.admin-edit-search-field--grow{
  flex:1 1 260px;
}


/* Step 12 - responsive behavior improvements */
.admin-edit-linked-table td[data-label],
.admin-edit-search-table td[data-label]{
  overflow-wrap:anywhere;
}
.admin-edit-linked-table__action,
.admin-edit-search-table__action{
  min-width:140px;
}
@media (max-width: 900px){
  .card.admin-edit-panel{
    padding:16px;
  }
  .admin-edit-linked-toolbar__actions,
  .admin-edit-linked-actions,
  .admin-edit-search-actions-inline{
    justify-content:flex-start;
  }
}
@media (max-width: 760px){
  .admin-edit-page{
    gap:10px;
  }
  .admin-edit-toolbar__sub,
  .admin-edit-panel-head p,
  .admin-edit-linked-summary__note{
    max-width:none;
  }
  .admin-edit-linked-summary__meta,
  .admin-edit-linked-toolbar__actions,
  .admin-edit-linked-actions,
  .admin-edit-search-actions-inline{
    width:100%;
  }
  .admin-edit-linked-table-wrap,
  .admin-edit-search-table-wrap{
    max-height:none;
    overflow:visible;
    border-radius:0;
  }
  .admin-edit-linked-table,
  .admin-edit-linked-table thead,
  .admin-edit-linked-table tbody,
  .admin-edit-linked-table tr,
  .admin-edit-linked-table th,
  .admin-edit-linked-table td,
  .admin-edit-search-table,
  .admin-edit-search-table thead,
  .admin-edit-search-table tbody,
  .admin-edit-search-table tr,
  .admin-edit-search-table th,
  .admin-edit-search-table td{
    display:block;
    width:100%;
  }
  .admin-edit-linked-table thead,
  .admin-edit-search-table thead{
    display:none;
  }
  .admin-edit-linked-table tbody,
  .admin-edit-search-table tbody{
    display:grid;
    gap:12px;
  }
  .admin-edit-linked-table tr,
  .admin-edit-search-table tr{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .admin-edit-linked-table td,
  .admin-edit-search-table td{
    display:grid;
    grid-template-columns:minmax(108px, auto) minmax(0, 1fr);
    gap:10px;
    align-items:start;
    padding:0;
    border:0;
    text-align:left;
    white-space:normal;
  }
  .admin-edit-linked-table td::before,
  .admin-edit-search-table td::before{
    content:attr(data-label);
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
    color:#b9c4d4;
  }
  .admin-edit-linked-table__action,
  .admin-edit-search-table__action{
    min-width:0;
    text-align:left;
  }
  .admin-edit-linked-actions,
  .admin-edit-search-actions-inline{
    gap:8px;
  }
}
@media (max-width: 560px){
  .card.admin-edit-panel,
  .admin-edit-linked-table tr,
  .admin-edit-search-table tr{
    padding:14px;
  }
  .admin-edit-linked-table td,
  .admin-edit-search-table td{
    grid-template-columns:minmax(0, 1fr);
    gap:4px;
  }
  .admin-edit-linked-actions,
  .admin-edit-search-actions-inline,
  .admin-edit-linked-toolbar__actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
  }
  .admin-edit-linked-actions .btn,
  .admin-edit-search-actions-inline .btn,
  .admin-edit-linked-toolbar__actions .btn,
  .admin-edit-linked-actions form,
  .admin-edit-search-actions-inline form{
    width:100%;
  }
  .admin-edit-linked-actions .btn,
  .admin-edit-search-actions-inline .btn{
    justify-content:center;
  }
  .admin-edit-bulk-stats{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
html.theme-light .admin-edit-linked-table td::before,
html.theme-light .admin-edit-search-table td::before{
  color:#526277;
}
html.theme-light .admin-edit-linked-table tr,
html.theme-light .admin-edit-search-table tr{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
}


/* Step 13 - accessibility and usability pass */
.admin-edit-flash .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.admin-edit-outline{
  position:static;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.admin-edit-outline__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b9c4d4;
  white-space:nowrap;
  padding-top:6px;
}
.admin-edit-outline__links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.admin-edit-outline__links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:inherit;
  text-decoration:none;
}
.admin-edit-outline__links a:hover{
  background:rgba(255,255,255,0.06);
}
.admin-edit-panel[role="region"]{
  scroll-margin-top:96px;
}
.admin-edit-panel-head h2[id]{
  scroll-margin-top:132px;
}
.admin-edit-panel:target{
  box-shadow:0 0 0 2px rgba(0,130,198,0.32), 0 12px 28px rgba(0,0,0,0.22);
}
.admin-edit-open-link[aria-hidden="true"]{
  display:none;
}
html.theme-light .admin-edit-outline__label{
  color:#526277;
}
html.theme-light .admin-edit-outline__links a{
  border-color:rgba(30,41,59,0.10);
  background:rgba(255,255,255,0.72);
}
@media (max-width: 760px){
  .admin-edit-outline{
    align-items:stretch;
  }
  .admin-edit-outline__label,
  .admin-edit-outline__links,
  .admin-edit-outline__links a{
    width:100%;
  }
}


/* Admin config advanced block aligned with admin edit panels */
.config-advanced{
  margin-top:12px;
}
.config-advanced summary{
  cursor:pointer;
  list-style:none;
}
.config-advanced summary::-webkit-details-marker{ display:none; }
.config-advanced-summary{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-right:36px;
  position:relative;
}
.config-advanced-summary::after{
  content:"▾";
  position:absolute;
  right:0;
  top:0;
  font-size:18px;
  line-height:1;
  color:#8fb9ff;
  transform:translateY(2px);
  transition:transform 180ms ease;
}
.details-animate[open] > .config-advanced-summary::after,
.config-advanced[open] > .config-advanced-summary::after{
  transform:translateY(2px) rotate(180deg);
}
.config-advanced-summary__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.config-advanced-summary__eyebrow{
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8fb9ff;
  font-weight:800;
}
.config-advanced-summary__title{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}
.config-advanced-summary__sub{
  color:#aab2bf;
  font-size:13px;
  line-height:1.45;
}
.config-advanced-body{
  margin-top:14px;
}
.config-advanced-intro{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.025);
}
.config-advanced-card{
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(255,255,255,0.025);
}
.config-advanced-card--danger{
  border-color:rgba(255,94,94,0.24);
  background:rgba(180,35,24,0.08);
}
.config-advanced-card--danger .admin-edit-panel-head p{
  color:#d7bec1;
}
.config-advanced-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.config-filter-row--panel{
  align-items:end;
  margin-bottom:10px;
}
.config-filter-row--panel label{
  min-width:96px;
}
.config-filter-row input{
  min-width:240px;
  flex:1 1 280px;
}
.config-advanced-table-wrap{
  margin-top:0;
}
.config-table{
  margin-top:0;
  min-width:880px;
}
.config-table td{
  vertical-align:top;
}
.config-advanced-help{
  margin-top:4px;
}
.config-row-form--advanced{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin:0;
}
.config-row-form--advanced .config-value-input{
  flex:1 1 360px;
  min-width:180px;
}
.config-row-delete-form{
  margin:0;
  display:flex;
  justify-content:flex-end;
}
.config-advanced-secret-row input,
.config-advanced-secret-row select{
  width:100%;
}
html.theme-light .config-advanced-card{
  background:rgba(255,255,255,0.88);
  border-color:rgba(13,27,62,0.08);
}
html.theme-light .config-advanced-intro{
  background:rgba(255,255,255,0.82);
  border-color:rgba(13,27,62,0.08);
}
html.theme-light .config-advanced-card--danger{
  background:rgba(255,236,236,0.92);
  border-color:rgba(180,35,24,0.20);
}
@media (max-width: 980px){
  .config-advanced-split{
    grid-template-columns:1fr;
  }
  .config-advanced-secret-row{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .config-advanced-summary{
    padding-right:28px;
  }
  .config-row-form--advanced{
    align-items:stretch;
  }
  .config-row-form--advanced .config-value-input,
  .config-row-form--advanced .btn{
    width:100%;
  }
}


/* v188: Admin Cache and Admin Database aligned with admin edit pages */
.admin-ops-layout{
  align-items:start;
}
.admin-ops-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}
.admin-ops-stat-card{
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  min-width:0;
}
.admin-ops-stat-card--wide{
  grid-column:span 2;
}
.admin-ops-stat-card__label{
  color:#aab2bf;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:8px;
}
.admin-ops-stat-card__value{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.admin-ops-stat-card__value--small{
  font-size:18px;
}
.admin-ops-stat-card__meta{
  margin-top:6px;
  color:#aab2bf;
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.admin-ops-live-footer{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.admin-ops-live-footer #cm-error{
  display:none;
}
.admin-ops-live-footer .is-visible{
  display:block !important;
}
.admin-ops-notice{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
.admin-ops-notice--danger{
  border-color:rgba(255,120,120,0.28);
  background:rgba(180,35,24,0.10);
}
.admin-ops-notice--warning{
  border-color:rgba(255,207,102,0.26);
  background:rgba(112,74,6,0.12);
}
.admin-ops-kv{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-ops-kv__row{
  display:grid;
  grid-template-columns:minmax(150px, 220px) minmax(0,1fr);
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-ops-kv__row:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.admin-ops-kv__label{
  font-weight:800;
  color:#dce9ff;
}
.admin-ops-kv__value{
  min-width:0;
  overflow-wrap:anywhere;
}
.admin-ops-action-grid,
.admin-ops-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.admin-ops-action-card,
.admin-ops-mini-card{
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.admin-ops-action-card h3,
.admin-ops-mini-card h3{
  margin:0;
  font-size:14px;
}
.admin-ops-action-card p,
.admin-ops-mini-card p{
  margin:0;
  color:#aab2bf;
  font-size:13px;
  line-height:1.5;
}
.admin-ops-action-card .btn,
.admin-ops-mini-card .btn{
  margin-top:auto;
  align-self:flex-start;
}
.admin-ops-form-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
.admin-ops-form-field{
  grid-column:span 4;
  min-width:0;
}
.admin-ops-form-field--wide{
  grid-column:span 6;
}
.admin-ops-form-field--full{
  grid-column:1 / -1;
}
.admin-ops-form-field label,
.admin-ops-checkbox label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  color:#c9d5e7;
}
.admin-ops-form-field textarea,
.admin-ops-form-field select,
.admin-ops-form-field input[type="text"],
.admin-ops-form-field input[type="file"]{
  width:100%;
  max-width:100%;
}
.admin-ops-checkbox{
  grid-column:span 2;
  padding:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
.admin-ops-checkbox label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  color:#dce9ff;
}
.admin-ops-checkbox .help-text,
.admin-ops-form-field .help-text{
  margin-top:8px;
}
.admin-ops-submit{
  grid-column:span 2;
  display:flex;
  align-items:flex-end;
}
.admin-ops-submit .btn{
  width:100%;
}
.admin-ops-file-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-ops-file-meta__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-ops-file-meta__row:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.admin-ops-file-meta__row span:first-child{
  color:#aab2bf;
}
.admin-ops-file-meta__row span:last-child{
  font-weight:700;
  text-align:right;
  overflow-wrap:anywhere;
}
html.theme-light .admin-ops-stat-card,
html.theme-light .admin-ops-action-card,
html.theme-light .admin-ops-mini-card,
html.theme-light .admin-ops-checkbox,
html.theme-light .admin-ops-notice{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
html.theme-light .admin-ops-notice--danger{
  border-color:rgba(185,28,28,0.24);
  background:rgba(254,242,242,0.78);
}
html.theme-light .admin-ops-notice--warning{
  border-color:rgba(180,83,9,0.24);
  background:rgba(255,251,235,0.85);
}
html.theme-light .admin-ops-kv__row,
html.theme-light .admin-ops-live-footer,
html.theme-light .admin-ops-file-meta__row{
  border-bottom-color:rgba(30,41,59,0.10);
}
html.theme-light .admin-ops-kv__label,
html.theme-light .admin-ops-checkbox label,
html.theme-light .admin-ops-form-field label{
  color:#344054;
}
html.theme-light .admin-ops-stat-card__label,
html.theme-light .admin-ops-action-card p,
html.theme-light .admin-ops-mini-card p,
html.theme-light .admin-ops-stat-card__meta,
html.theme-light .admin-ops-file-meta__row span:first-child{
  color:#667085;
}
@media (max-width: 1100px){
  .admin-ops-form-field,
  .admin-ops-form-field--wide,
  .admin-ops-checkbox,
  .admin-ops-submit{
    grid-column:span 6;
  }
}
@media (max-width: 760px){
  .admin-ops-kv__row{
    grid-template-columns:1fr;
  }
  .admin-ops-stat-card--wide{
    grid-column:span 1;
  }
  .admin-ops-form-field,
  .admin-ops-form-field--wide,
  .admin-ops-form-field--full,
  .admin-ops-checkbox,
  .admin-ops-submit{
    grid-column:1 / -1;
  }
}

/* v189: Admin Home aligned with admin edit-page system */
.admin-home-layout{
  align-items:start;
}
.admin-home-link-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.admin-home-link-grid--system{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.admin-home-link-card{
  text-decoration:none;
  color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.admin-home-link-card:hover,
.admin-home-link-card:active{
  text-decoration:none;
}
.admin-home-link-card:hover{
  transform:translateY(-1px);
  border-color:rgba(102,163,255,0.24);
  background:rgba(255,255,255,0.045);
  box-shadow:0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.admin-home-link-card__eyebrow{
  display:inline-block;
  margin-bottom:2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fb9ff;
}
.admin-home-link-card--danger{
  border-color:rgba(255,120,120,0.24);
  background:rgba(180,35,24,0.08);
}
.admin-home-link-card--danger:hover{
  border-color:rgba(255,120,120,0.34);
  background:rgba(180,35,24,0.12);
}
.admin-home-status-list{
  gap:10px;
}
.admin-home-status-list .security-status-row{
  padding:12px 14px;
  border-color:rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
.admin-home-metrics-grid,
.admin-home-sitemap-grid{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.admin-home-inline-footer{
  margin-top:12px;
}
.admin-home-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.admin-home-inline-actions--stack > *{
  margin:0;
}
html.theme-light .admin-home-link-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
html.theme-light .admin-home-link-card:hover{
  background:rgba(255,255,255,0.9);
  border-color:rgba(47,109,221,0.20);
  box-shadow:0 12px 24px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.72);
}
html.theme-light .admin-home-link-card--danger{
  border-color:rgba(185,28,28,0.18);
  background:rgba(254,242,242,0.82);
}
html.theme-light .admin-home-link-card--danger:hover{
  border-color:rgba(185,28,28,0.28);
  background:rgba(254,242,242,0.95);
}
html.theme-light .admin-home-status-list .security-status-row{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
@media (max-width: 760px){
  .admin-home-link-grid,
  .admin-home-link-grid--system,
  .admin-home-metrics-grid,
  .admin-home-sitemap-grid{
    grid-template-columns:1fr;
  }
}


/* v190: Admin Changelog and Audit aligned with admin edit-page system */
.admin-changelog-layout,
.admin-audit-layout{
  align-items:start;
}
.admin-changelog-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.admin-changelog-panel-head__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.admin-changelog-panel-head__actions form{
  margin:0;
}
.admin-changelog-table-wrap{
  overflow:auto;
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  background:rgba(8,12,18,0.30);
}
.admin-changelog-table{
  min-width:860px;
}
.admin-changelog-row-deleted{
  opacity:0.72;
}
.admin-changelog-empty{
  margin-top:12px;
}
.admin-changelog-link-grid{
  grid-template-columns:1fr;
}
.admin-changelog-link-card{
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.admin-changelog-link-card:hover,
.admin-changelog-link-card:active{
  text-decoration:none;
}
.admin-changelog-link-card:hover{
  transform:translateY(-1px);
  border-color:rgba(102,163,255,0.24);
  background:rgba(255,255,255,0.045);
  box-shadow:0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.admin-changelog-link-card__eyebrow{
  display:inline-block;
  margin-bottom:2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fb9ff;
}
.admin-audit-notice{
  margin-bottom:14px;
}
.admin-ops-form-field input[type="number"]{
  width:100%;
  max-width:100%;
}
.admin-audit-filter-grid{
  align-items:end;
}
.admin-audit-filter-actions{
  grid-column:span 2;
}
.admin-audit-filter-actions .btn{
  width:100%;
}
.admin-audit-events-table{
  min-width:980px;
}
.admin-audit-lockouts-wrap{
  margin-top:0;
}
.admin-audit-lockouts-table{
  min-width:760px;
}
html.theme-light .admin-changelog-table-wrap{
  border-color:rgba(30,41,59,0.12);
  background:rgba(255,255,255,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
html.theme-light .admin-changelog-link-card:hover{
  background:rgba(255,255,255,0.9);
  border-color:rgba(47,109,221,0.20);
  box-shadow:0 12px 24px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.72);
}
@media (max-width: 1100px){
  .admin-audit-filter-actions{
    grid-column:span 3;
  }
}
@media (max-width: 760px){
  .admin-changelog-panel-head,
  .admin-changelog-panel-head__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-changelog-table,
  .admin-audit-events-table,
  .admin-audit-lockouts-table{
    min-width:720px;
  }
  .admin-audit-filter-actions{
    grid-column:1 / -1;
  }
}


.admin-edit-actions form{
  margin:0;
}
.admin-changelog-set-layout{
  align-items:start;
}
.admin-changelog-sidebar-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-changelog-filter-grid{
  align-items:end;
}
.admin-changelog-pager{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.admin-changelog-pager__meta{
  display:flex;
  align-items:center;
}
.admin-changelog-entry-value{
  max-width:520px;
  white-space:pre-wrap;
  word-break:break-word;
}
.admin-changelog-json{
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  background:#0c0f15;
  padding:10px;
  border-radius:12px;
  border:1px solid #222;
  max-height:260px;
  overflow:auto;
  margin:0;
}
.admin-changelog-bulkbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.admin-changelog-status-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-changelog-status-option{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.admin-changelog-table--sets{
  min-width:980px;
}
.admin-changelog-table--config-entries{
  min-width:980px;
}
.admin-changelog-table--entity-entries{
  min-width:1080px;
}
.admin-changelog-table--vote-log{
  min-width:1500px;
}
html.theme-light .admin-changelog-json{
  background:#f8fafc;
  border-color:rgba(148,163,184,0.28);
}
@media (max-width: 760px){
  .admin-changelog-pager,
  .admin-changelog-bulkbar{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-changelog-bulkbar .btn,
  .admin-changelog-pager .btn{
    width:100%;
  }
}


/* Albums list desktop tightening: reduce airy empty space and keep the list visually denser. */
.public-list-page--albums{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--albums .card{
  margin-bottom:0;
}
.public-list-page--albums .mobile-search{
  margin-bottom:0;
}
.public-list-page--albums .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--albums .table-wrap{
  margin-top:0 !important;
}

.public-list-page--albums .albums-table th:nth-child(6),
.public-list-page--albums .albums-table td:nth-child(6){
  display:none;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--albums{
    max-width: 1280px;
    margin: 0 auto;
  }

  .public-list-page--albums .albums-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--albums .albums-table .badge-votes,
  .public-list-page--albums .albums-table .badge-episodes,
  .public-list-page--albums .albums-table .badge-aiowiki{
    display:none;
  }

  .public-list-page--albums .albums-table .albums-col-thumb{ width: 160px; }
  .public-list-page--albums .albums-table .albums-col-rating{ width: 176px; }
  .public-list-page--albums .albums-table .albums-col-votes{ width: 104px; }
  .public-list-page--albums .albums-table .albums-col-episodes{ width: 104px; }
  .public-list-page--albums .albums-table .albums-col-aiowiki{ width: 116px; }

  .public-list-page--albums .albums-table td:nth-child(3),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--albums .albums-table th:nth-child(3),
  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6){
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(6){
    text-align:center;
  }

  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6){
    display:table-cell;
  }

  .public-list-page--albums .albums-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Albums public page: keep the new density improvements desktop-only.
   On mobile/tablet responsive layouts, restore the older proportions so
   the Title column stays wider and the list matches the previous layout. */
@media (max-width: 1179px) {
  .public-list-page--albums .albums-table .badge-album-number{
    display:none;
  }

  .public-list-page--albums .albums-table .albums-col-thumb{
    width:104px;
  }

  .public-list-page--albums .albums-table .albums-col-title{
    width:auto;
  }

  .public-list-page--albums .albums-table .albums-col-rating{
    width:120px;
  }

  .public-list-page--albums .albums-table .albums-col-votes,
  .public-list-page--albums .albums-table .albums-col-episodes,
  .public-list-page--albums .albums-table .albums-col-aiowiki{
    width:0;
  }
}


/* Albums public page: add a bit more vertical breathing room around
   desktop pagination controls without affecting mobile. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--albums .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--albums .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Albums public page: mobile pagination spacing.
   The page wrapper previously zeroed pager margins; bring back a bit of
   vertical spacing on smaller screens so the button cluster can breathe. */
@media (max-width: 1179px) {
  .public-list-page--albums .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--albums .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}

/* Albums public page: give the top pager extra breathing room on iPad
   landscape so the button row does not feel cramped between the summary
   bar above and the table header below. Scope only to touch landscape. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1366px) {
  .public-list-page--albums .pager.pager-top{
    margin-top: 20px !important;
    margin-bottom: 22px !important;
  }
}


/* Club Seasons list desktop tightening: reduce airy empty space and keep the list visually denser while preserving the mobile layout. */
.public-list-page--seasons{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--seasons .card{
  margin-bottom:0;
}
.public-list-page--seasons .mobile-search{
  margin-bottom:0;
}
.public-list-page--seasons .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--seasons .table-wrap{
  margin-top:0 !important;
}

.public-list-page--seasons .seasons-table th:nth-child(6),
.public-list-page--seasons .seasons-table td:nth-child(6){
  display:none;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--seasons{
    max-width: 1280px;
    margin: 0 auto;
  }

  .public-list-page--seasons .seasons-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--seasons .seasons-table .badge-votes,
  .public-list-page--seasons .seasons-table .badge-episodes,
  .public-list-page--seasons .seasons-table .badge-aiowiki{
    display:none;
  }

  .public-list-page--seasons .seasons-table .seasons-col-thumb{ width: 160px; }
  .public-list-page--seasons .seasons-table .seasons-col-rating{ width: 176px; }
  .public-list-page--seasons .seasons-table .seasons-col-votes{ width: 104px; }
  .public-list-page--seasons .seasons-table .seasons-col-episodes{ width: 104px; }
  .public-list-page--seasons .seasons-table .seasons-col-aiowiki{ width: 116px; }

  .public-list-page--seasons .seasons-table td:nth-child(3),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(3),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6){
    white-space:nowrap;
  }

  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(6){
    text-align:center;
  }

  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6){
    display:table-cell;
  }

  .public-list-page--seasons .seasons-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Club Seasons public page: keep the density improvements desktop-only.
   On mobile/tablet, restore the previous proportions so the title column
   keeps enough room and the responsive layout stays intact. */
@media (max-width: 1179px) {
  .public-list-page--seasons .seasons-table .badge-season-number{
    display:none;
  }

  .public-list-page--seasons .seasons-table .seasons-col-thumb{
    width:104px;
  }

  .public-list-page--seasons .seasons-table .seasons-col-title{
    width:auto;
  }

  .public-list-page--seasons .seasons-table .seasons-col-rating{
    width:120px;
  }

  .public-list-page--seasons .seasons-table .seasons-col-votes,
  .public-list-page--seasons .seasons-table .seasons-col-episodes,
  .public-list-page--seasons .seasons-table .seasons-col-aiowiki{
    width:0;
  }
}


/* Club Seasons public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--seasons .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--seasons .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Club Seasons public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--seasons .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--seasons .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Public list pages (desktop): hide the badges that render under each row title.
   These are useful on mobile, but on desktop they add clutter because the
   key metrics are already visible as columns. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page .row-meta{
    display:none !important;
  }
}



/* Characters list desktop tightening: reduce airy empty space and keep the list visually denser while preserving the mobile layout. */
.public-list-page--characters{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--characters .card{
  margin-bottom:0;
}
.public-list-page--characters .mobile-search{
  margin-bottom:0;
}
.public-list-page--characters .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--characters .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--characters{
    max-width: 1280px;
    margin: 0 auto;
  }

  .public-list-page--characters .characters-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1){
    width: 152px;
  }

  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4){
    width: 176px;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6){
    width: 116px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Characters public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--characters .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--characters .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Characters public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--characters .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--characters .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Episodes list desktop tightening: reduce airy empty space and keep the
   list visually denser while preserving the mobile layout. */
.public-list-page--episodes{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--episodes .card{
  margin-bottom:0;
}
.public-list-page--episodes .mobile-search{
  margin-bottom:0;
}
.public-list-page--episodes .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--episodes .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--episodes{
    max-width: 1320px;
    margin: 0 auto;
  }

  .public-list-page--episodes .episodes-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width: 72px;
    white-space: nowrap;
  }

  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3){
    width: 240px;
    white-space: nowrap;
  }

  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4){
    width: 176px;
    white-space: nowrap;
  }

  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5){
    width: 104px;
    text-align:center;
    white-space: nowrap;
  }

  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6){
    width: 116px;
    text-align:center;
    white-space: nowrap;
  }

  .public-list-page--episodes .episodes-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Episodes public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--episodes .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--episodes .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}

@media (min-width: 1025px) {
  .public-list-page--episodes .episodes-table .episode-album-season-badges{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
    white-space:normal;
  }

  .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episodes{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    max-width:100%;
    min-height: calc(var(--ui-control-height) - 12px);
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size: calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.32);
    color: var(--list-pill-episodes-color, #D6E7FF);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.22), rgba(14, 23, 39, 0.88) 60%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
  }

  html.theme-light .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episodes{
    color: var(--list-pill-episodes-color, #2C5F9E);
    border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(53, 96, 150, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
  }
}



/* Episodes public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--episodes .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--episodes .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Elsewhere list desktop tightening: reduce airy empty space and keep the
   list visually denser while preserving the mobile layout. */
.public-list-page--elsewhere{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--elsewhere .card{
  margin-bottom:0;
}
.public-list-page--elsewhere .mobile-search{
  margin-bottom:0;
}
.public-list-page--elsewhere .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--elsewhere .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--elsewhere{
    max-width: 1280px;
    margin: 0 auto;
  }

  .public-list-page--elsewhere .elsewhere-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1){
    width: 160px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4){
    width: 176px;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6){
    width: 116px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Elsewhere public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--elsewhere .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--elsewhere .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Elsewhere public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--elsewhere .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--elsewhere .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Videos list desktop tightening: reduce airy empty space and keep the
   list visually denser while preserving the mobile layout. */
.public-list-page--videos{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--videos .card{
  margin-bottom:0;
}
.public-list-page--videos .mobile-search{
  margin-bottom:0;
}
.public-list-page--videos .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--videos .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--videos{
    max-width: 1280px;
    margin: 0 auto;
  }

  .public-list-page--videos .elsewhere-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width: 160px;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4){
    width: 176px;
    white-space:nowrap;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5){
    width: 104px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6){
    width: 116px;
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--videos .elsewhere-table td:nth-child(6) .cell-fx{
    justify-content:center;
  }
}


/* Videos public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--videos .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--videos .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Videos public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--videos .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--videos .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Arcs list desktop tightening: reduce airy empty space and keep the
   list visually denser while preserving the mobile layout. */
.public-list-page--arcs{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.public-list-page--arcs .card{
  margin-bottom:0;
}
.public-list-page--arcs .mobile-search{
  margin-bottom:0;
}
.public-list-page--arcs .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.public-list-page--arcs .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--arcs{
    max-width: 1200px;
    margin: 0 auto;
  }

  .public-list-page--arcs .arcs-table .row-meta{
    display:flex;
    margin-top:8px;
    gap:8px;
    row-gap:8px;
  }

  /* Hide duplicate episode + AIOWiki badges on desktop (those are already columns). */
  .public-list-page--arcs .arcs-table .badge-episodes,
  .public-list-page--arcs .arcs-table .badge-aiowiki{
    display:none;
  }

  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width: 176px;
    white-space: nowrap;
  }

  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3){
    width: 104px;
    text-align:center;
    white-space: nowrap;
  }

  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4){
    width: 104px;
    text-align:center;
    white-space: nowrap;
  }

  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    width: 116px;
    text-align:center;
    white-space: nowrap;
  }
}


/* Arcs public page: add matching vertical breathing room around
   desktop pagination controls at the top and bottom. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--arcs .pager.pager-top{
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--arcs .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
}


/* Arcs public page: matching mobile pagination spacing for the
   top and bottom pager button groups. */
@media (max-width: 1179px) {
  .public-list-page--arcs .pager.pager-top{
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  .public-list-page--arcs .pager:not(.pager-top){
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }
}


/* Arcs public page: keep the arc-type tab card aligned to the same
   centered desktop width as the list area, without changing mobile. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-tab-switch-card--arcs,
  .public-tab-switch-card--episodes{
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   v202: Public Seasons detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="season"] .page-seasons-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="season"] .page-seasons-detail .season-title-panel,
  body[data-page-kind="season"] .page-seasons-detail .season-detail-card,
  body[data-page-kind="season"] .page-seasons-detail .season-detail-table,
  body[data-page-kind="season"] .page-seasons-detail .season-detail-back{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="season"] .page-seasons-detail .season-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="season"] .page-seasons-detail .season-detail-card{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="season"] .page-seasons-detail .season-detail-card > :first-child{
    max-width: clamp(220px, 24vw, 360px);
  }

  body[data-page-kind="season"] .page-seasons-detail .season-detail-card > :last-child{
    flex-basis: 360px;
  }

  body[data-page-kind="season"] .page-seasons-detail .thumb-lg{
    max-width: 360px;
  }

  body[data-page-kind="season"] .page-seasons-detail .season-detail-table{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v203: Seasons detail header overlap fix
   - Keep the Seasons detail table header in normal flow
   - Opt this table out of the sticky clone system
   - Prevent the header bar from covering the first visible row
   ========================================================================== */
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th{
  position: static !important;
  top: auto !important;
}

body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th{
  z-index: auto !important;
}


/* ==========================================================================
   v204: Public Characters detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep the header block aligned and unobstructed
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="character"] .page-characters-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-title-panel,
  body[data-page-kind="character"] .page-characters-detail .character-detail-grid{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-grid{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-left{
    max-width: clamp(240px, 28vw, 420px);
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card{
    max-width: 100%;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-right{
    max-width: 680px;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-right .character-detail-card{
    width: 100%;
  }
}


/* ==========================================================================
   v205: Public Episodes detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep the main card, info sections, and linked sections centered
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="episode"] .page-episodes-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
  body[data-page-kind="episode"] .page-episodes-detail .episode-card,
  body[data-page-kind="episode"] .page-episodes-detail .episode-detail-section,
  body[data-page-kind="episode"] .page-episodes-detail .episode-linked-card,
  body[data-page-kind="episode"] .page-episodes-detail .episode-detail-back{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere > :first-child{
    flex: 0 1 clamp(220px, 24vw, 340px);
    max-width: clamp(220px, 24vw, 340px);
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-thumb{
    max-width: 340px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-linked-card,
  body[data-page-kind="episode"] .page-episodes-detail .episode-detail-section{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v206: Public Elsewhere detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep long reading sections comfortable while reducing empty side space
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="elsewhere"] .page-elsewhere-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-section,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-back{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere > :first-child{
    flex: 0 1 clamp(220px, 24vw, 340px);
    max-width: clamp(220px, 24vw, 340px);
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-thumb{
    max-width: 340px;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-section{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v207: Public Videos detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep the media, rating card, summary, and back row centered
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="videos"] .page-videos-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-section,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-back{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere > :first-child{
    flex: 0 1 clamp(220px, 24vw, 340px);
    max-width: clamp(220px, 24vw, 340px);
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="videos"] .page-videos-detail .episode-thumb{
    max-width: 340px;
  }

  body[data-page-kind="videos"] .page-videos-detail .videos-detail-section{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v208: Public Arcs detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep the title, detail card, description, episodes table, and back row centered
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="arc"] .page-arcs-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-section,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-back,
  body[data-page-kind="arc"] .page-arcs-detail > h2{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
  body[data-page-kind="arc"] .page-arcs-detail > h2{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character > :first-child{
    flex: 0 1 clamp(220px, 24vw, 340px);
    width: min(100%, clamp(220px, 24vw, 340px));
    max-width: clamp(220px, 24vw, 340px);
    min-width: 0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :first-child{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-thumb-wrap{
    width: 100%;
    max-width: 100%;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-section{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v208: Arcs detail header overlap fix
   - Keep the Arcs detail table header in normal flow
   - Opt this table out of the sticky clone system
   - Prevent the header bar from covering the first visible row
   ========================================================================== */
body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail thead,
body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail thead th{
  position: static !important;
  top: auto !important;
}

body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail thead th{
  z-index: auto !important;
}


/* ==========================================================================
   v209: Public Albums detail tighter desktop treatment
   - Keep mobile unchanged
   - Constrain the main detail content width on desktop only
   - Keep the title, detail card, episodes table, and back row centered
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="album"] .page-album-detail{
    max-width: 1180px;
    margin: 0 auto;
  }

  body[data-page-kind="album"] .page-album-detail .album-title-panel,
  body[data-page-kind="album"] .page-album-detail .album-detail-card,
  body[data-page-kind="album"] .page-album-detail .album-detail-table,
  body[data-page-kind="album"] .page-album-detail .album-detail-back{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page-kind="album"] .page-album-detail .album-title-panel{
    padding-left: 20px;
    padding-right: 20px;
  }

  body[data-page-kind="album"] .page-album-detail .album-detail-card{
    gap: 20px;
    align-items: flex-start;
  }

  body[data-page-kind="album"] .page-album-detail .album-detail-card > :first-child{
    flex: 0 1 clamp(220px, 24vw, 360px);
    max-width: clamp(220px, 24vw, 360px);
    min-width: 0;
  }

  body[data-page-kind="album"] .page-album-detail .album-detail-card > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }

  body[data-page-kind="album"] .page-album-detail .thumb-lg{
    max-width: 360px;
  }

  body[data-page-kind="album"] .page-album-detail .album-detail-table{
    overflow-x: auto;
  }
}


/* ==========================================================================
   v209: Albums detail header overlap fix
   - Keep the Albums detail table header in normal flow
   - Opt this table out of the sticky clone system
   - Prevent the header bar from covering the first visible row
   ========================================================================== */
body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead,
body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th{
  position: static !important;
  top: auto !important;
}

body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th{
  z-index: auto !important;
}

body[data-page-kind="album"] .album-detail-stats,
body[data-page-kind="season"] .season-detail-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

body[data-page-kind="album"] .album-detail-stat-chip,
body[data-page-kind="season"] .season-detail-stat-chip{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 140px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #273043;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
}

body[data-page-kind="album"] .album-detail-stat-chip__label,
body[data-page-kind="season"] .season-detail-stat-chip__label{
  color: #8fa0ba;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page-kind="album"] .album-detail-stat-chip__value,
body[data-page-kind="season"] .season-detail-stat-chip__value{
  color: #f5f7fb;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (max-width: 640px){
  body[data-page-kind="album"] .album-detail-stats,
  body[data-page-kind="season"] .season-detail-stats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 460px;
  }

  body[data-page-kind="album"] .album-detail-stat-chip,
  body[data-page-kind="season"] .season-detail-stat-chip{
    min-width: 0;
    width: 100%;
    flex: none;
  }
}

html.theme-light body[data-page-kind="album"] .album-detail-stat-chip,
html.theme-light body[data-page-kind="season"] .season-detail-stat-chip{
  border-color: rgba(57, 88, 132, 0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,248,255,0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 12px 26px rgba(16,24,40,0.10);
}

html.theme-light body[data-page-kind="album"] .album-detail-stat-chip__label,
html.theme-light body[data-page-kind="season"] .season-detail-stat-chip__label{
  color: #6b7a90;
}

html.theme-light body[data-page-kind="album"] .album-detail-stat-chip__value,
html.theme-light body[data-page-kind="season"] .season-detail-stat-chip__value{
  color: #1d2430;
}


/* Public tab TITLE row text size (Albums, Seasons, Characters, Episodes, Elsewhere, Videos, Arcs, and their detail tables) */
body[data-page-kind="albums"] .row-title,
body[data-page-kind="album"] .row-title,
body[data-page-kind="seasons"] .row-title,
body[data-page-kind="season"] .row-title,
body[data-page-kind="characters"] .row-title,
body[data-page-kind="character"] .row-title,
body[data-page-kind="episodes"] .row-title,
body[data-page-kind="episode"] .row-title,
body[data-page-kind="elsewhere"] .row-title,
body[data-page-kind="videos"] .row-title,
body[data-page-kind="arcs"] .row-title,
body[data-page-kind="arc"] .row-title {
  font-size: var(--tab-row-title-font-size, 16px);
}


/* ========================================================================== 
   v217: Mobile header action order fix
   - Prevent wrapped header controls from appearing out of order on mobile.
   - Stack About, Motion, and Theme controls cleanly below the brand lockup.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    justify-self:stretch;
    justify-content:stretch;
    align-items:stretch;
    gap:8px;
  }

  header .about-row{
    width:100%;
    justify-content:flex-start;
  }

  header .about-btn{
    align-self:flex-start;
  }

  header .motion-select,
  header .theme-select{
    width:100%;
    max-width:none;
    min-width:0;
    flex:none;
  }
}


/* ========================================================================== 
   v218: Mobile header select width trim
   - Keep the stacked Motion and Theme controls shorter on mobile.
   - Preserve the corrected order from v217 while avoiding full-width selects.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions{
    justify-items:start;
  }

  header .motion-select,
  header .theme-select{
    width:min(100%, 210px);
    max-width:210px;
  }
}


/* ========================================================================== 
   v219: Mobile header select right alignment and tighter widths
   - Keep Motion and Theme stacked on the right side on mobile.
   - Size each select only a little wider than its text.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) max-content;
    grid-template-areas:
      "about motion"
      ". theme";
    width:100%;
    align-items:start;
    justify-content:stretch;
    justify-items:end;
    column-gap:10px;
    row-gap:8px;
  }

  header .about-row{
    grid-area:about;
    width:auto;
    justify-content:flex-start;
    justify-self:start;
  }

  header #motionSetting{
    grid-area:motion;
  }

  header #themeSetting{
    grid-area:theme;
  }

  header .motion-select,
  header .theme-select{
    min-width:0;
    max-width:none;
    width:auto;
    justify-self:end;
    flex:none;
  }

  header .motion-select{
    min-width:11.25rem;
  }

  header .theme-select{
    min-width:10rem;
  }
}


/* ========================================================================== 
   v220: Mobile header control toolbar rebalance
   - Replace the right-aligned staggered mobile layout with a compact toolbar.
   - Center About, Theme, and Motion under the brand so the header feels balanced.
   - Keep selects only modestly wider than their visible text while allowing wrap.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    align-items:center;
    justify-content:center;
    justify-self:stretch;
    gap:8px;
  }

  header .about-row{
    width:auto;
    justify-content:center;
    order:1;
  }

  header #themeSetting{
    order:2;
  }

  header #motionSetting{
    order:3;
  }

  header .motion-select,
  header .theme-select{
    width:auto;
    flex:0 1 auto;
    min-width:0;
    max-width:none;
  }

  header .theme-select{
    min-width:9rem;
  }

  header .motion-select{
    min-width:10rem;
  }
}

@media (max-width: 420px){
  header .header-actions{
    justify-content:flex-start;
  }
}


/* ========================================================================== 
   v221: Mobile header control layout polish
   - Keep About clearly to the right of the site title on mobile.
   - Stack the title and tagline so the title row has its own room.
   - Keep Theme on the left and Motion on the right on the next row.
   ========================================================================== */
@media (max-width: 680px){
  header .site-header-inner{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:10px;
    row-gap:8px;
  }

  header .header-left{
    grid-column:1;
    grid-row:1;
    min-width:0;
    padding-right:4px;
  }

  header .brand-lockup,
  header .brand-copy{
    min-width:0;
    max-width:100%;
  }

  header .brand-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:start;
    row-gap:3px;
    min-width:0;
  }

  header .brand{
    display:block;
    min-width:0;
    font-size:clamp(13px, 4.35vw, 18px);
    line-height:1;
    white-space:nowrap;
  }

  header .tagline{
    display:block;
    min-width:0;
    max-width:100%;
  }

  header .header-actions{
    display:contents;
  }

  header .about-row{
    grid-column:2;
    grid-row:1;
    width:auto;
    justify-content:flex-end;
    justify-self:end;
    align-self:center;
    margin-left:6px;
  }

  header #themeSetting{
    grid-column:2;
    grid-row:2;
    justify-self:end;
  }

  header #motionSetting{
    grid-column:1;
    grid-row:2;
    justify-self:start;
  }

  header .about-btn{
    font-size:12px;
    padding:5px 10px;
  }

  header .theme-select,
  header .motion-select{
    width:auto;
    max-width:none;
    min-width:0;
    flex:none;
  }

  header .theme-select{
    min-width:8.9rem;
  }

  header .motion-select{
    min-width:9.7rem;
  }
}

@media (max-width: 420px){
  header .site-header-inner{
    column-gap:8px;
  }

  header .brand{
    font-size:clamp(12px, 4.2vw, 16px);
    letter-spacing:0.04em;
  }

  header .about-btn{
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
  }

  header .theme-select{
    min-width:8.25rem;
  }

  header .motion-select{
    min-width:9rem;
  }
}

/* ========================================================================== 
   v221: Mobile header tagline full text fix
   - Keep the full tagline visible instead of ellipsizing it.
   - Reserve space for the About button on the right.
   - Slightly reduce brand/tagline sizing on tighter screens.
   ========================================================================== */
@media (max-width: 680px){
  header .header-left{
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    width:100%;
    padding-right:78px;
  }

  header .brand-row{
    row-gap:2px;
  }

  header .brand{
    font-size:clamp(12px, 4vw, 17px);
  }

  header .tagline{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    max-width:none;
    font-size:clamp(8px, 2.15vw, 10px);
    letter-spacing:0.035em;
  }

  header .about-row{
    position:relative;
    z-index:2;
    margin-left:0;
  }
}

@media (max-width: 420px){
  header .header-left{
    padding-right:72px;
  }

  header .brand{
    font-size:clamp(11px, 3.85vw, 15px);
    letter-spacing:0.035em;
  }

  header .tagline{
    font-size:clamp(7px, 2vw, 8.5px);
    letter-spacing:0.025em;
  }
}


/* ========================================================================== 
   v221: Mobile header full-text sizing restore
   - Keep the full title and tagline visible on mobile.
   - Restore the larger title/tagline sizing from the earlier compact layout.
   ========================================================================== */
@media (max-width: 680px){
  header .header-left{
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    width:100%;
    padding-right:78px;
  }

  header .brand-row{
    row-gap:3px;
  }

  header .brand{
    font-size:clamp(13px, 4.35vw, 18px);
    line-height:1;
    white-space:nowrap;
  }

  header .tagline{
    display:block;
    min-width:0;
    max-width:none;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    font-size:10px;
    letter-spacing:0.05em;
  }

  header .about-row{
    position:relative;
    z-index:2;
    margin-left:0;
  }
}

@media (max-width: 420px){
  header .header-left{
    padding-right:72px;
  }

  header .brand{
    font-size:clamp(12px, 4.2vw, 16px);
    letter-spacing:0.04em;
  }

  header .tagline{
    font-size:10px;
    letter-spacing:0.04em;
  }
}

/* ========================================================================== 
   v221: Mobile header slimmer Theme/Motion controls
   - Make both controls moderately thinner on mobile.
   - Keep both controls the same height.
   - Reduce horizontal padding so they feel less bulky.
   ========================================================================== */
@media (max-width: 680px){
  header .theme-select,
  header .motion-select{
    height:32px;
    min-height:32px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:8px;
    padding-right:24px;
    font-size:12px;
    line-height:1.1;
  }

  header .theme-select{
    min-width:7.85rem;
  }

  header .motion-select{
    min-width:8.35rem;
  }
}

@media (max-width: 420px){
  header .theme-select,
  header .motion-select{
    height:31px;
    min-height:31px;
    padding-left:7px;
    padding-right:22px;
    font-size:11px;
  }

  header .theme-select{
    min-width:7.35rem;
  }

  header .motion-select{
    min-width:7.8rem;
  }
}



/* ========================================================================== 
   v225: Native mobile sticky list headers
   - Use native sticky table headers on touch/mobile instead of JS header clones.
   - This avoids Firefox Android issues where cloned headers fail to stick.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .episodes-table thead,
  .albums-table thead,
  .seasons-table thead,
  .characters-table thead,
  .elsewhere-table thead,
  .videos-table thead,
  .arcs-table thead,
  .data-table thead {
    position: relative;
    z-index: 9;
  }

  .episodes-table thead th,
  .albums-table thead th,
  .seasons-table thead th,
  .characters-table thead th,
  .elsewhere-table thead th,
  .videos-table thead th,
  .arcs-table thead th,
  .data-table thead th {
    position: sticky;
    top: var(--sticky-top, 0px);
    z-index: 10090;
    background: #11141b;
    background-clip: padding-box;
    box-shadow: 0 1px 0 #222;
  }

  html.theme-light .episodes-table thead th,
  html.theme-light .albums-table thead th,
  html.theme-light .seasons-table thead th,
  html.theme-light .characters-table thead th,
  html.theme-light .elsewhere-table thead th,
  html.theme-light .videos-table thead th,
  html.theme-light .arcs-table thead th,
  html.theme-light .data-table thead th {
    background: #f6f8fc;
    box-shadow: 0 1px 0 rgba(30, 41, 59, 0.10);
  }

  html.theme-dim .episodes-table thead th,
  html.theme-dim .albums-table thead th,
  html.theme-dim .seasons-table thead th,
  html.theme-dim .characters-table thead th,
  html.theme-dim .elsewhere-table thead th,
  html.theme-dim .videos-table thead th,
  html.theme-dim .arcs-table thead th,
  html.theme-dim .data-table thead th {
    background: #171a21;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .sticky-table-clone-wrap {
    display: none !important;
  }

  table.aio-sticky-clone-active > thead {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* ========================================================================== 
   v226: Android Firefox mobile reliability fixes
   - Keep mobile table wrappers overflow-visible so Firefox sticky headers can work.
   - Use an explicit mobile header grid instead of display: contents.
   - Add a Firefox-specific sticky THEAD fallback for public list tables.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .table-wrap {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
  }

  .episodes-table thead th,
  .albums-table thead th,
  .seasons-table thead th,
  .characters-table thead th,
  .elsewhere-table thead th,
  .videos-table thead th,
  .arcs-table thead th,
  .data-table thead th {
    position: -webkit-sticky;
    position: sticky;
  }
}

@-moz-document url-prefix() {
  @media (max-width: 1024px), (pointer: coarse) {
    .episodes-table thead,
    .albums-table thead,
    .seasons-table thead,
    .characters-table thead,
    .elsewhere-table thead,
    .videos-table thead,
    .arcs-table thead,
    .data-table thead {
      position: sticky;
      top: var(--sticky-top, 0px);
      z-index: 10091;
    }

    .episodes-table thead th,
    .albums-table thead th,
    .seasons-table thead th,
    .characters-table thead th,
    .elsewhere-table thead th,
    .videos-table thead th,
    .arcs-table thead th,
    .data-table thead th {
      position: static;
      top: auto;
      z-index: auto;
    }
  }
}

@media (max-width: 680px) {
  header .site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand about"
      "motion theme";
    align-items: start;
    column-gap: 8px;
    row-gap: 8px;
  }

  header .header-left {
    grid-area: brand;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    width: 100%;
    padding-right: 0;
  }

  header .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    grid-template-areas: "motion theme";
    align-items: center;
    justify-content: space-between;
    justify-self: stretch;
    width: 100%;
    gap: 8px;
    transform: none;
  }

  header .about-row {
    grid-area: about;
    grid-column: auto;
    grid-row: auto;
    width: auto;
    justify-content: flex-end;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 2;
    margin-left: 0;
  }

  header #motionSetting {
    grid-area: motion;
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }

  header #themeSetting {
    grid-area: theme;
    grid-column: auto;
    grid-row: auto;
    justify-self: end;
  }

  header .brand-row {
    row-gap: 3px;
  }

  header .brand {
    font-size: clamp(13px, 4.35vw, 18px);
    line-height: 1;
    white-space: nowrap;
  }

  header .tagline {
    display: block;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  header .about-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  header .theme-select,
  header .motion-select {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    height: 32px;
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 24px;
    font-size: 12px;
    line-height: 1.1;
  }

  header .theme-select {
    min-width: 7.85rem;
  }

  header .motion-select {
    min-width: 7.8rem;
  }
}

@media (max-width: 420px) {
  header .site-header-inner {
    column-gap: 8px;
  }

  header .brand {
    font-size: clamp(12px, 4.2vw, 16px);
    letter-spacing: 0.04em;
  }

  header .tagline {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  header .about-btn {
    font-size: 11px;
    padding-left: 10px;
    padding-right: 10px;
  }

  header .theme-select,
  header .motion-select {
    height: 31px;
    min-height: 31px;
    padding-left: 7px;
    padding-right: 22px;
    font-size: 11px;
  }

  header .theme-select {
    min-width: 7.35rem;
  }

  header .motion-select {
    min-width: 7.3rem;
  }
}


/* ========================================================================== 
   v227: Restore mobile header control placement and Characters header spacing
   - Keep the sticky-header Firefox fix from v226.
   - Restore mobile top-bar placement: About top right, Motion left, Theme right.
   - Restore breathing room between Character and Episodes in the Characters header.
   ========================================================================== */
@media (max-width: 680px){
  header .site-header-inner{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:10px;
    row-gap:8px;
  }

  header .header-left{
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    width:100%;
    padding-right:78px;
  }

  header .brand-lockup,
  header .brand-copy{
    min-width:0;
    max-width:100%;
  }

  header .brand-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:start;
    row-gap:3px;
    min-width:0;
  }

  header .brand{
    display:block;
    min-width:0;
    font-size:clamp(13px, 4.35vw, 18px);
    line-height:1;
    white-space:nowrap;
  }

  header .tagline{
    display:block;
    min-width:0;
    max-width:none;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    font-size:10px;
    letter-spacing:0.05em;
  }

  header .header-actions{
    display:contents;
  }

  header .about-row{
    grid-column:2;
    grid-row:1;
    width:auto;
    justify-content:flex-end;
    justify-self:end;
    align-self:center;
    position:relative;
    z-index:2;
    margin-left:0;
  }

  header #motionSetting{
    grid-column:1;
    grid-row:2;
    justify-self:start;
  }

  header #themeSetting{
    grid-column:2;
    grid-row:2;
    justify-self:end;
  }

  header .about-btn{
    font-size:12px;
    padding:5px 10px;
  }

  header .theme-select,
  header .motion-select{
    width:auto;
    max-width:none;
    min-width:0;
    flex:none;
    height:32px;
    min-height:32px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:8px;
    padding-right:24px;
    font-size:12px;
    line-height:1.1;
  }

  header .theme-select{
    min-width:7.85rem;
  }

  header .motion-select{
    min-width:8.35rem;
  }

  /* Characters mobile header: restore the earlier separation between Character and Episodes. */
  .characters-table th:nth-child(2){
    text-align:left;
    padding-left:0;
    padding-right:4px;
    transform:translateX(-8px);
  }

  .characters-table th:nth-child(3){
    padding-left:16px;
    min-width:92px;
    transform:translateX(-5px);
  }
}

@media (max-width: 420px){
  header .site-header-inner{
    column-gap:8px;
  }

  header .header-left{
    padding-right:72px;
  }

  header .brand{
    font-size:clamp(12px, 4.2vw, 16px);
    letter-spacing:0.04em;
  }

  header .tagline{
    font-size:10px;
    letter-spacing:0.04em;
  }

  header .about-btn{
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
  }

  header .theme-select,
  header .motion-select{
    height:31px;
    min-height:31px;
    padding-left:7px;
    padding-right:22px;
    font-size:11px;
  }

  header .theme-select{
    min-width:7.35rem;
  }

  header .motion-select{
    min-width:7.8rem;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape){
  /* Characters touch header: keep the same Character/Episodes spacing as portrait. */
  .characters-table th:nth-child(2){
    text-align:left;
    padding-left:0;
    padding-right:4px;
    transform:translateX(-8px);
  }

  .characters-table th:nth-child(3){
    padding-left:16px;
    min-width:92px;
    transform:translateX(-5px);
  }
}


/* ========================================================================== 
   v228: Characters mobile header clipping fix
   - Keep the native mobile sticky-header path from v225/v226/v227 unchanged.
   - Remove the transform-based nudge on the Characters mobile header.
   - Give the Character header label a little more breathing room so its sort arrow is not clipped.
   ========================================================================== */
@media (max-width: 680px){
  .public-list-page--characters .characters-table th:nth-child(2){
    text-align:left;
    padding-left:2px;
    padding-right:12px;
    transform:none;
    overflow:visible;
  }

  .public-list-page--characters .characters-table th:nth-child(2) .th-sort{
    gap:4px;
    overflow:visible;
  }

  .public-list-page--characters .characters-table th:nth-child(3){
    padding-left:14px;
    min-width:88px;
    transform:none;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape){
  .public-list-page--characters .characters-table th:nth-child(2){
    text-align:left;
    padding-left:2px;
    padding-right:12px;
    transform:none;
    overflow:visible;
  }

  .public-list-page--characters .characters-table th:nth-child(2) .th-sort{
    gap:4px;
    overflow:visible;
  }

  .public-list-page--characters .characters-table th:nth-child(3){
    padding-left:14px;
    min-width:88px;
    transform:none;
  }
}


/* ========================================================================== 
   v229: Lift mobile header controls closer to the site title block
   - Move About, Motion, and Theme upward to reduce the empty gap
   - Keep the existing mobile layout and sticky header behavior intact
   ========================================================================== */
@media (max-width: 680px){
  header .site-header-inner{
    row-gap: 4px !important;
  }

  header .brand-row{
    row-gap: 2px;
  }

  header .about-row{
    margin-top: -4px !important;
    align-self: start;
  }

  header #motionSetting,
  header #themeSetting{
    margin-top: -6px;
  }
}

@media (max-width: 420px){
  header .site-header-inner{
    row-gap: 3px !important;
  }

  header .about-row{
    margin-top: -30px !important;
  }

  header #motionSetting,
  header #themeSetting{
    margin-top: -0px;
  }
}


/* v230: targeted purge form layout fix */
.admin-cache-targeted-form{
  grid-template-columns:minmax(0, 1.45fr) minmax(240px, 0.95fr) minmax(120px, auto);
  grid-template-areas:
    "targets mode mode"
    "targets scope scope"
    "targets rebuild submit";
  align-items:start;
}
.admin-cache-targeted-form__targets{
  grid-area:targets;
  grid-column:auto;
}
.admin-cache-targeted-form__mode{
  grid-area:mode;
  grid-column:auto;
}
.admin-cache-targeted-form__scope{
  grid-area:scope;
  grid-column:auto;
}
.admin-cache-targeted-form__rebuild{
  grid-area:rebuild;
  grid-column:auto;
  min-width:0;
  align-self:end;
}
.admin-cache-targeted-form__rebuild label{
  white-space:nowrap;
}
.admin-cache-targeted-form__submit{
  grid-area:submit;
  grid-column:auto;
  min-width:120px;
  align-self:end;
}
@media (max-width: 1100px){
  .admin-cache-targeted-form{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "targets targets"
      "mode scope"
      "rebuild submit";
  }
}
@media (max-width: 760px){
  .admin-cache-targeted-form{
    grid-template-columns:1fr;
    grid-template-areas:
      "targets"
      "mode"
      "scope"
      "rebuild"
      "submit";
  }
  .admin-cache-targeted-form__rebuild label{
    white-space:normal;
  }
}


/* ========================================================================== 
   v232: Stats leaderboards mobile header fix
   - Disable sticky table headers on the public Stats page only.
   - Prevent leaderboard headers from overlaying the first row on mobile.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  body[data-page-kind="stats"] .lb-card .data-table thead,
  body[data-page-kind="stats"] .lb-card .data-table thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}

@-moz-document url-prefix() {
  @media (max-width: 1024px), (pointer: coarse) {
    body[data-page-kind="stats"] .lb-card .data-table thead,
    body[data-page-kind="stats"] .lb-card .data-table thead th {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
    }
  }
}


/* ==========================================================================
   v233: Episode detail light mode thumbnail width parity
   - Keep the inherited album/season artwork the same visual width as dark mode
   - Restrict the change to the light-theme episode backdrop treatment only
   ========================================================================== */
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left{
  padding-left: 0;
  padding-right: 0;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left .episode-thumb{
  width: calc(100% + 2px);
  max-width: calc(100% + 2px);
  margin-left: -1px;
  margin-right: -1px;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left .episode-context,
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left .episode-top-actions{
  padding-left: 12px;
  padding-right: 12px;
}

html.theme-light .episode-context-item{
  border-color: rgba(11,79,191,0.22);
  background:
    linear-gradient(135deg, rgba(145, 187, 255, 0.26), rgba(255,255,255,0.98) 74%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,255,0.90));
  box-shadow:
    0 12px 24px rgba(11,79,191,0.10),
    0 0 0 1px rgba(11,79,191,0.05),
    0 0 26px rgba(11,79,191,0.10);
}

@media (pointer: fine) {
  html.theme-light .episode-context-item[href]:hover:not(:active),
  html.theme-light .episode-context-item[href]:focus-visible {
    border-color: rgba(11,79,191,0.34);
    box-shadow:
      0 16px 30px rgba(11,79,191,0.13),
      0 0 0 1px rgba(11,79,191,0.08),
      0 0 32px rgba(11,79,191,0.14);
  }
}

html.theme-light .episode-context-label,
html.theme-light .vote-summary-eyebrow{
  color: #073f9c;
}

html.theme-light .episode-context-value,
html.theme-light .vote-summary-title,
html.theme-light .vote-summary-stat-value{
  color: #1d2430;
}

html.theme-light .vote-summary-card{
  border-color: rgba(11,79,191,0.18);
  background:
    linear-gradient(180deg, rgba(232,240,255,0.98), rgba(221,233,255,0.94) 72%),
    radial-gradient(120% 120% at 0% 0%, rgba(11,79,191,0.12), rgba(11,79,191,0.00) 58%),
    #dde9ff;
  box-shadow: 0 14px 28px rgba(11,79,191,0.10);
}

html.theme-light .vote-summary-stat{
  border-color: rgba(11,79,191,0.22);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.48);
}

html.theme-light .vote-summary-ring{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html.theme-light .vote-summary-stat--total{
  background: transparent;
}

html.theme-light .vote-summary-stat--legacy{
  background: transparent;
}

html.theme-light .vote-summary-stat--new{
  background: transparent;
}

html.theme-light .vote-summary-stat-label{
  color: #5b6880;
}

html.theme-light .vote-summary-stat--legacy .vote-summary-stat-label::before{
  color: #0b79cf;
}

html.theme-light .vote-summary-stat--new .vote-summary-stat-label::before{
  color: #0b4fbf;
}

html.theme-light .vote-summary-stat-note{
  color: #4a5568;
}

@media (max-width: 820px) {
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left .episode-context,
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .card.episode-card .episode-left .episode-top-actions{
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* Public list pages: style the mobile meta pills/buttons to better match
   the grouped capsule look used elsewhere, without changing layout logic. */
@media (max-width: 1179px) {
  .public-list-page .row-meta{
    justify-content:center;
    align-items:center;
    gap:6px;
    row-gap:6px;
  }

  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height: calc(var(--ui-control-height) - 12px);
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size: calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    border:1px solid rgba(124, 150, 198, 0.26);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
      rgba(10, 17, 31, 0.82);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .public-list-page .row-meta .badge-votes{
    color:#d7efb3;
    border-color:rgba(170, 214, 115, 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(149, 208, 88, 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(149, 208, 88, 0.14);
  }

  .public-list-page .row-meta .badge-episodes{
    color:#d6e7ff;
    border-color:rgba(101, 170, 255, 0.32);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(64, 140, 255, 0.22), rgba(14, 23, 39, 0.88) 60%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(64, 140, 255, 0.12);
  }

  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    min-width:88px;
    color:#eaf3ff;
    border-color:rgba(93, 161, 255, 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(36, 109, 226, 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(36, 109, 226, 0.14);
  }

  .public-list-page .row-meta .badge-votes::before,
  .public-list-page .row-meta .badge-episodes::before,
  .public-list-page .row-meta .btn-aiowiki::before,
  .public-list-page .row-meta .badge-aiowiki::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  .public-list-page .row-meta .badge-votes::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  .public-list-page .row-meta .badge-episodes::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
  }

  .public-list-page .row-meta .btn-aiowiki::before,
  .public-list-page .row-meta .badge-aiowiki::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  @media (pointer: fine){
    .public-list-page .row-meta .btn-aiowiki:hover,
    .public-list-page .row-meta .btn-aiowiki:focus-visible,
    .public-list-page .row-meta .badge-aiowiki:hover,
    .public-list-page .row-meta .badge-aiowiki:focus-visible{
      border-color:rgba(122, 182, 255, 0.50);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
        linear-gradient(135deg, rgba(48, 124, 248, 0.30), rgba(14, 23, 39, 0.90) 62%);
      text-decoration:none;
    }
  }
}


/* Tablet landscape (touch): keep public list meta badges in the compact "mobile pill" style (matches iPad portrait). */
@media (min-width: 1180px) and (pointer: coarse) {
  .public-list-page .row-meta{
    justify-content:center;
    align-items:center;
    gap:6px;
    row-gap:6px;
  }

  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height: calc(var(--ui-control-height) - 12px);
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size: calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    border:1px solid rgba(124, 150, 198, 0.26);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
      rgba(10, 17, 31, 0.82);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .public-list-page .row-meta .badge-votes{
    color:#d7efb3;
    border-color:rgba(170, 214, 115, 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(149, 208, 88, 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(149, 208, 88, 0.14);
  }

  .public-list-page .row-meta .badge-episodes{
    color:#d6e7ff;
    border-color:rgba(101, 170, 255, 0.32);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(64, 140, 255, 0.22), rgba(14, 23, 39, 0.88) 60%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(64, 140, 255, 0.12);
  }

  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    min-width:88px;
    color:#eaf3ff;
    border-color:rgba(93, 161, 255, 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(36, 109, 226, 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(36, 109, 226, 0.14);
  }

  .public-list-page .row-meta .badge-votes::before,
  .public-list-page .row-meta .badge-episodes::before,
  .public-list-page .row-meta .btn-aiowiki::before,
  .public-list-page .row-meta .badge-aiowiki::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  .public-list-page .row-meta .badge-votes::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  .public-list-page .row-meta .badge-episodes::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
  }

  .public-list-page .row-meta .btn-aiowiki::before,
  .public-list-page .row-meta .badge-aiowiki::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes .badge-label{
    display:none !important;
  }
}


@media (max-width: 420px) {
  .public-list-page .row-meta{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
}

html.theme-light .public-list-page .row-meta .badge-votes,
html.theme-light .public-list-page .row-meta .badge-episodes,
html.theme-light .public-list-page .row-meta .btn-aiowiki,
html.theme-light .public-list-page .row-meta .badge-aiowiki{
  box-shadow:
    0 12px 24px rgba(13, 26, 48, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}


/* ========================================================================== 
   v235: Title color control alignment and caret fixes
   - Apply list TITLE color to row titles instead of page h1 headings.
   - Keep the mobile Title control directly under Motion.
   - Restore an explicit caret and visible bordered control styling.
   - Force the dropdown menu to fully hide when closed.
   ========================================================================== */
html.theme-dark h1,
html.theme-dim h1,
html.theme-light h1{
  color: inherit;
}

html.theme-dark h1{
  color: var(--title-text-color-dark, #e7e7e7);
}

html.theme-dim h1{
  color: var(--title-text-color-dim, #e7e7e7);
}

html.theme-light h1{
  color: var(--title-text-color-light, #1d2430);
}

body[data-page-kind="albums"] .row-title,
body[data-page-kind="album"] .row-title,
body[data-page-kind="seasons"] .row-title,
body[data-page-kind="season"] .row-title,
body[data-page-kind="characters"] .row-title,
body[data-page-kind="character"] .row-title,
body[data-page-kind="episodes"] .row-title,
body[data-page-kind="episode"] .row-title,
body[data-page-kind="elsewhere"] .row-title,
body[data-page-kind="videos"] .row-title,
body[data-page-kind="arcs"] .row-title,
body[data-page-kind="arc"] .row-title{
  color: var(--title-text-color);
}

header .title-color-select{
  min-height: 34px;
  padding-right: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15, 19, 27, 0.28);
}

header .title-color-select__label{
  flex: 1 1 auto;
}

header .title-color-select__caret{
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  color: #b8c0cc;
}

header .title-color-select::after{
  content: none !important;
  display: none !important;
}

header .title-color-menu[hidden]{
  display: none !important;
}

html.theme-light header .title-color-select{
  border-color: rgba(30, 41, 59, 0.18);
  background: rgba(255,255,255,0.88);
}

html.theme-light header .title-color-select__caret{
  color: #667085;
}

@media (max-width: 680px){
  header #titleColorControl{
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: 0;
  }

  header .title-color-select{
    min-width: 9.7rem;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 420px){
  header .title-color-select{
    min-width: 9rem;
  }
}


/* ========================================================================== 
   v236: Desktop list action pills match mobile button styling
   - Apply the same capsule treatment used on mobile to the desktop Votes,
     Episodes, and AIOWiki controls on album, season, and arc list pages.
   - Keep the existing desktop table layout and labels intact.
   ========================================================================== */
@media (min-width: 1025px) and (pointer: fine) {
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height: calc(var(--ui-control-height) - 12px);
    margin:0 auto;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size: calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    border:1px solid rgba(124, 150, 198, 0.26);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
      rgba(10, 17, 31, 0.82);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx{
    color:#d7efb3;
    border-color:rgba(170, 214, 115, 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(149, 208, 88, 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(149, 208, 88, 0.14);
  }

  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
    color:#d6e7ff;
    border-color:rgba(101, 170, 255, 0.32);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(64, 140, 255, 0.22), rgba(14, 23, 39, 0.88) 60%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(64, 140, 255, 0.12);
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx::before,
  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx::before,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before,
  .public-list-page--albums .albums-table td:nth-child(6) .btn::before,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn::before,
  .public-list-page--characters .characters-table td:nth-child(6) .btn::before,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx::before,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
  }

  .public-list-page--albums .albums-table td:nth-child(6) .btn,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
  .public-list-page--characters .characters-table td:nth-child(6) .btn,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    min-height:28px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  .public-list-page--albums .albums-table td:nth-child(6) .btn::before,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn::before,
  .public-list-page--characters .characters-table td:nth-child(6) .btn::before,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }
}

html.theme-light .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
  box-shadow:
    0 12px 24px rgba(13, 26, 48, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}


/* ========================================================================== 
   v237: Light-mode list action pill polish
   - Keep the existing pill layout on desktop and mobile.
   - Soften the light-theme Votes, Episodes, and AIOWiki treatments so they
     fit the brighter page background without changing dark/dim themes.
   ========================================================================== */
html.theme-light .public-list-page .row-meta .badge-votes,
html.theme-light .public-list-page .row-meta .badge-episodes,
html.theme-light .public-list-page .row-meta .btn-aiowiki,
html.theme-light .public-list-page .row-meta .badge-aiowiki,
html.theme-light .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
  border-color: rgba(112, 138, 180, 0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 248, 253, 0.94)),
    linear-gradient(135deg, rgba(191, 212, 240, 0.18), rgba(230, 239, 249, 0.88) 72%);
  box-shadow:
    0 10px 22px rgba(54, 82, 122, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(176, 194, 219, 0.18);
}

html.theme-light .public-list-page .row-meta .badge-votes,
html.theme-light .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx{
  color: #5a761f;
  border-color: rgba(148, 184, 92, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(198, 226, 155, 0.48), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(173, 199, 132, 0.18);
}

html.theme-light .public-list-page .row-meta .badge-episodes,
html.theme-light .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
  color: #2c5f9e;
  border-color: rgba(99, 153, 225, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(174, 206, 246, 0.46), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(147, 184, 230, 0.18);
}

html.theme-light .public-list-page .row-meta .btn-aiowiki,
html.theme-light .public-list-page .row-meta .badge-aiowiki,
html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
  color: #274a74;
  border-color: rgba(107, 156, 220, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(164, 196, 243, 0.44), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(142, 179, 225, 0.18);
}

@media (pointer: fine){
  html.theme-light .public-list-page .row-meta .btn-aiowiki:hover,
  html.theme-light .public-list-page .row-meta .btn-aiowiki:focus-visible,
  html.theme-light .public-list-page .row-meta .badge-aiowiki:hover,
  html.theme-light .public-list-page .row-meta .badge-aiowiki:focus-visible,
  html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible{
    border-color: rgba(119, 166, 226, 0.42);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246, 249, 255, 0.96)),
      linear-gradient(135deg, rgba(184, 212, 248, 0.52), rgba(235, 243, 252, 0.92) 72%);
    text-decoration: none;
  }
}

/* ========================================================================== 
   v236: Mobile enhanced header select surface parity
   - Keep the JS-enhanced Motion and Theme display buttons on mobile using
     the same rounded surface treatment as the Title control.
   - Scope only to the mobile header controls so desktop and menus stay intact.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      #141414 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
  }

  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    border-color: rgba(30, 41, 59, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.94)) !important;
    box-shadow: 0 14px 30px rgba(16,24,40,0.14) !important;
  }
}

@media (max-width: 420px){
  header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.20) !important;
  }

  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    box-shadow: 0 12px 24px rgba(16,24,40,0.12) !important;
  }
}

/* ========================================================================== 
   v237: Mobile title control font-size parity
   - Match the Title button text sizing to the Motion and Theme controls.
   - Mobile only, font-size only.
   ========================================================================== */
@media (max-width: 680px){
  header .header-actions--title-stack .title-color-select{
    font-size: 13px !important;
  }
}

@media (max-width: 420px){
  header .header-actions--title-stack .title-color-select{
    font-size: 13px !important;
  }
}

/* ========================================================================== 
   v238: Desktop header control surface parity
   - Apply the same rounded surface treatment to Motion, Title, and Theme
     controls on desktop only.
   - Scope to the three header buttons only so layout and menus stay intact.
   ========================================================================== */
@media (min-width: 681px){
  header .header-actions--title-stack .title-color-select,
  header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      #141414 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
  }

  html.theme-light header .header-actions--title-stack .title-color-select,
  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .motion-select.select-display,
  html.theme-light header .header-actions--title-stack .header-select-popover.enhanced .theme-select.select-display{
    border-color: rgba(30, 41, 59, 0.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.94)) !important;
    box-shadow: 0 14px 30px rgba(16,24,40,0.14) !important;
  }
}

/* ========================================================================== 
   v239b: Mobile landscape enhanced header select repaint hardening
   - Flatten only the JS-enhanced Motion and Theme display buttons on touch
     landscape screens to avoid the Firefox/Android middle seam while scrolling.
   - Keep the rest of the header layout and controls unchanged.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px){
  header .header-select-popover.enhanced{
    isolation: isolate;
  }

  header .header-select-popover.enhanced .motion-select.select-display,
  header .header-select-popover.enhanced .theme-select.select-display{
    overflow: hidden !important;
    contain: paint;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: none !important;
    background: #141414 !important;
    background-image: none !important;
    background-clip: padding-box !important;
    border-image: none !important;
    will-change: auto !important;
  }

  html.theme-light header .header-select-popover.enhanced .motion-select.select-display,
  html.theme-light header .header-select-popover.enhanced .theme-select.select-display{
    background: #f7f9fc !important;
    background-image: none !important;
    border-image: none !important;
  }
}


/* ========================================================================== 
   v239: Narrow-header brand sizing nudge
   - Increase the site title/tagline size on narrow screens so the brand block
     sits closer to the About button.
   - Keep the existing header layout and controls unchanged.
   ========================================================================== */
@media (max-width: 680px){
  header .header-left{
    padding-right: 70px;
  }

  header .brand{
    font-size: clamp(14px, 4.8vw, 20px);
  }

  header .tagline{
    font-size: 11px;
  }
}

@media (max-width: 420px){
  header .header-left{
    padding-right: 66px;
  }

  header .brand{
    font-size: clamp(13px, 4.45vw, 18px);
  }

  header .tagline{
    font-size: 10.5px;
  }
}


/* ========================================================================== 
   v240: Mobile landscape header scrolled-state neutralization
   - Firefox/Android was repainting the Motion and Theme controls when the
     header shrink transform activated during scroll.
   - Keep the header in its at-top layout for touch landscape only so the
     controls do not shift or develop the mid-button seam.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px){
  header .header-left,
  header .header-actions{
    will-change: auto !important;
    transition: none !important;
  }

  header.is-scrolled .header-left,
  header.is-scrolled .header-actions{
    transform: none !important;
  }
}


/* ========================================================================== 
   v241: Mobile portrait header brand size bump
   - Increase only the site title and tagline in mobile portrait mode.
   - Leave desktop, tablet, and landscape behavior unchanged.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 680px){
  header .brand{
    font-size: clamp(14px, 4.8vw, 19px);
  }

  header .tagline{
    font-size: 11px;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 680px){
  .public-list-page--episodes .row-meta.row-meta--compact-badges-mobile .badge-episode-album,
  .public-list-page--episodes .row-meta.row-meta--compact-badges-mobile .badge-episode-season{
    flex: 1 1 100%;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .public-list-page--episodes .row-meta.row-meta--compact-badges-mobile .badge-episode-album .badge-text,
  .public-list-page--episodes .row-meta.row-meta--compact-badges-mobile .badge-episode-season .badge-text{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 420px){
  header .brand{
    font-size: clamp(14px, 4.7vw, 18px);
  }

  header .tagline{
    font-size: 11px;
  }
}


/* ========================================================================== 
   v242: Slimmer mobile portrait header
   - Keep the title, tagline, About button, and Settings button visible.
   - Reduce only mobile portrait header height by tightening spacing and
     placing the two buttons on the same top row.
   - Keep expanded mobile style controls directly below the header row.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 680px){
  html body header#siteHeader.site-header{
    padding-top: 6px !important;
    padding-bottom: 7px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
  }

  html body header#siteHeader.site-header .header-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    width: 100%;
    padding-right: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 26px;
    height: 26px;
  }

  html body header#siteHeader.site-header .brand-row{
    row-gap: 1px !important;
	margin-top: 2px !important; /* lowers main title + subtext together */
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(15px, 4.9vw, 19px) !important;
    line-height: 0.96;
    letter-spacing: 0.045em;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: 11px !important;
    line-height: 0.96;
    letter-spacing: 0.04em;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about{
    display: contents !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .mobile-style-toggle{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
	margin-right: 6px !important; /* moves Settings left some */
	margin-top: 3px !important; /* lowers Settings some */
  }

  html body header#siteHeader.site-header .header-actions--title-stack:not(.header-actions--with-about) .mobile-style-toggle{
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  html body header#siteHeader.site-header .about-row{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin-left: 0 !important;
	margin-top: 4px !important; /* lowers About some */
  }

  html body header#siteHeader.site-header .mobile-style-toggle{
    min-height: 26px !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  html body header#siteHeader.site-header .about-btn{
    min-height: 26px;
    padding: 4px 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 1;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 0;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 420px){
  html body header#siteHeader.site-header{
    padding-top: 5px !important;
    padding-bottom: 6px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 5px !important;
    row-gap: 3px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 24px;
    height: 24px;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(14px, 4.65vw, 18px) !important;
    letter-spacing: 0.04em;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: 10.5px !important;
    letter-spacing: 0.035em;
  }

  html body header#siteHeader.site-header .mobile-style-toggle{
    min-height: 25px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  html body header#siteHeader.site-header .about-btn{
    min-height: 25px;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
}

/* ========================================================================== 
   v240: Title-linked list button palettes
   - Let each title color option carry Votes, Episodes, and AIOWiki sub-colors.
   - Keep the existing layout and effects, but replace the old hardcoded hues.
   ========================================================================== */
.public-list-page .row-meta .badge-votes,
.public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
.public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
.public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
.public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
.public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
.public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
.public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
}

.public-list-page .row-meta .badge-episodes,
.public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
.public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
.public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
.public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.22), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
}

.public-list-page .row-meta .btn-aiowiki,
.public-list-page .row-meta .badge-aiowiki,
.public-list-page--albums .albums-table td:nth-child(6) .btn,
.public-list-page--seasons .seasons-table td:nth-child(6) .btn,
.public-list-page--arcs .arcs-table td:nth-child(5) .btn,
.public-list-page--episodes .episodes-table td:nth-child(6) .btn,
.public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
.public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
.public-list-page--characters .characters-table td:nth-child(6) .btn{
  color: var(--list-pill-aiowiki-color, #EAF3FF);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
}

@media (pointer: fine){
  .public-list-page .row-meta .btn-aiowiki:hover,
  .public-list-page .row-meta .btn-aiowiki:focus-visible,
  .public-list-page .row-meta .badge-aiowiki:hover,
  .public-list-page .row-meta .badge-aiowiki:focus-visible,
  .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration: none;
  }
}

html.theme-light .public-list-page .row-meta .badge-votes,
html.theme-light .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light .public-list-page .row-meta .badge-episodes,
html.theme-light .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

html.theme-light .public-list-page .row-meta .btn-aiowiki,
html.theme-light .public-list-page .row-meta .badge-aiowiki,
html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn{
  color: var(--list-pill-aiowiki-color, #274A74);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}

@media (pointer: fine){
  html.theme-light .public-list-page .row-meta .btn-aiowiki:hover,
  html.theme-light .public-list-page .row-meta .btn-aiowiki:focus-visible,
  html.theme-light .public-list-page .row-meta .badge-aiowiki:hover,
  html.theme-light .public-list-page .row-meta .badge-aiowiki:focus-visible,
  html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  html.theme-light .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.42);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246, 249, 255, 0.96)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34), rgba(235, 243, 252, 0.92) 72%);
    text-decoration: none;
  }
}


/* ========================================================================== 
   v243: Desktop button shrink bridge
   - Keep the Votes, Episodes, and AIOWiki action columns visible on fine-
     pointer desktop widths between 1025px and 1179px.
   - Preserve the rounded desktop pill/button shape while tightening spacing
     so the actions compress instead of disappearing before mobile mode.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1179px) and (pointer: fine) {
  .public-list-page .row-meta{
    display:none !important;
  }

  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1){
    width:136px;
  }

  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5){
    width:90px;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4){
    width:160px;
  }

  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6){
    width:104px;
  }

  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter{
    max-width:120px;
  }

  .public-list-page--characters .characters-table td:nth-child(6) .btn{
    min-width:80px;
    gap:3px;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 2px);
    font-size: calc(var(--ui-pill-font-size) - 2px);
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width:60px;
  }

  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3){
    width:220px;
  }

  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4){
    width:160px;
  }

  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5){
    width:90px;
  }

  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6){
    width:104px;
  }

  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter{
    max-width:120px;
  }

  .public-list-page--episodes .episodes-table td:nth-child(6) .btn{
    min-width:80px;
    gap:3px;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 2px);
    font-size: calc(var(--ui-pill-font-size) - 2px);
  }

  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6){
    display:table-cell;
  }

  .public-list-page--albums .albums-table .albums-col-thumb,
  .public-list-page--seasons .seasons-table .seasons-col-thumb{
    width:136px;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating{
    width:160px;
  }

  .public-list-page--albums .albums-table .albums-col-votes,
  .public-list-page--albums .albums-table .albums-col-episodes,
  .public-list-page--seasons .seasons-table .seasons-col-votes,
  .public-list-page--seasons .seasons-table .seasons-col-episodes{
    width:90px;
  }

  .public-list-page--albums .albums-table .albums-col-aiowiki,
  .public-list-page--seasons .seasons-table .seasons-col-aiowiki{
    width:104px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4){
    width:96px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    width:108px;
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
    gap:3px;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 2px);
    font-size: calc(var(--ui-pill-font-size) - 2px);
  }

  .public-list-page--albums .albums-table td:nth-child(6) .btn,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn{
    min-width:80px;
    gap:3px;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 2px);
    font-size: calc(var(--ui-pill-font-size) - 2px);
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:136px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5){
    width:90px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4){
    width:160px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6){
    width:104px;
  }

  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter{
    max-width:120px;
  }
}

/* ========================================================================== 
   v261: Fine-pointer compact list bridge for narrower desktop windows
   - Prevent Characters, Episodes, and Arcs list pills from colliding when a
     desktop window is narrow but not yet in phone layout.
   - Reuse the compact under-title badges and hide the duplicate columns early.
   ========================================================================== */
@media (min-width: 681px) and (max-width: 1024px) and (pointer: fine) {
  .public-list-page--characters .characters-table .row-meta,
  .public-list-page--episodes .episodes-table .row-meta,
  .public-list-page--arcs .arcs-table .row-meta,
  .public-list-page--albums .albums-table .row-meta,
  .public-list-page--seasons .seasons-table .row-meta,
  .public-list-page--elsewhere .elsewhere-table .row-meta,
  .public-list-page--videos .elsewhere-table .row-meta{
    display:flex;
  }

  .public-list-page--characters .characters-table th,
  .public-list-page--characters .characters-table td,
  .public-list-page--episodes .episodes-table th,
  .public-list-page--episodes .episodes-table td,
  .public-list-page--arcs .arcs-table th,
  .public-list-page--arcs .arcs-table td,
  .public-list-page--albums .albums-table th,
  .public-list-page--albums .albums-table td,
  .public-list-page--seasons .seasons-table th,
  .public-list-page--seasons .seasons-table td,
  .public-list-page--elsewhere .elsewhere-table th,
  .public-list-page--elsewhere .elsewhere-table td,
  .public-list-page--videos .elsewhere-table th,
  .public-list-page--videos .elsewhere-table td{
    padding:10px 10px;
  }

  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6){
    display:none;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--characters .characters-table .character-list-vote{
    display:none;
  }

  .public-list-page--episodes .episodes-table .badge-episode-rating{
    display:none;
  }

  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6){
    display:none;
  }

  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:none;
  }

  .public-list-page--arcs .arcs-table th:nth-child(1),
  .public-list-page--arcs .arcs-table td:nth-child(1){
    padding-left:42px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6){
    display:none;
  }

  .public-list-page--albums .albums-table th:nth-child(3),
  .public-list-page--albums .albums-table td:nth-child(3),
  .public-list-page--seasons .seasons-table th:nth-child(3),
  .public-list-page--seasons .seasons-table td:nth-child(3){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6){
    display:none;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }
}


/* ========================================================================== 
   v241: Mobile portrait main nav flow alignment
   - Match the main site nav flow in mobile portrait more closely to the
     existing touch-landscape treatment so the nav does not become a long
     single-column list.
   - Scope only to the top-level main site nav on touch portrait screens.
   - Leave desktop, tablet, landscape, header, and in-page tabs unchanged.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 680px){
  body > .container > nav{
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  body > .container > nav > a{
    display: inline-flex;
    white-space: nowrap;
  }

  body > .container > nav > .random-article-dice{
    width: 34px;
    height: 34px;
    padding: 0;
    align-self: center;
  }
}


/* ==========================================================================
   v246: Accessibility Step 8 - contrast safeguard root class + conservative
   readability improvements for shared text, borders, inputs, dropdowns, and
   repeated neutral pills.
   ========================================================================== */
body.contrast-safeguard{
  --contrast-safeguard-surface-dark: #11161f;
  --contrast-safeguard-surface-dark-raised: #161d29;
  --contrast-safeguard-border-dark: #465367;
  --contrast-safeguard-text-dark: #f3f7fc;
  --contrast-safeguard-muted-dark: #d2dbe7;
  --contrast-safeguard-shadow-dark: rgba(0,0,0,0.18);
  --contrast-safeguard-surface-light: rgba(255,255,255,0.98);
  --contrast-safeguard-surface-light-raised: rgba(248,251,255,0.98);
  --contrast-safeguard-border-light: rgba(30,41,59,0.34);
  --contrast-safeguard-text-light: #17212f;
  --contrast-safeguard-muted-light: #334155;
  --contrast-safeguard-shadow-light: rgba(16,24,40,0.10);
}

body.contrast-safeguard :is(.muted, .detail-stat, .security-status-sub, .security-status-details){
  color: var(--contrast-safeguard-muted-dark);
}
html.theme-light body.contrast-safeguard :is(.muted, .detail-stat, .security-status-sub, .security-status-details){
  color: var(--contrast-safeguard-muted-light);
}

body.contrast-safeguard :is(input[type="text"], input[type="number"], input[type="url"], input[type="file"], textarea, select, .select-popover.enhanced .select-display, .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced > .mobile-filter-select-display){
  border-color: var(--contrast-safeguard-border-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--contrast-safeguard-surface-dark);
  color: var(--contrast-safeguard-text-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px var(--contrast-safeguard-shadow-dark);
}
body.contrast-safeguard :is(input[type="text"], input[type="number"], input[type="url"], input[type="file"], textarea, select)::placeholder{
  color: #c8d2df;
  opacity: 1;
}
body.contrast-safeguard .select-popover.enhanced .select-display::after,
body.contrast-safeguard .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced > .mobile-filter-select-display::after{
  color: #d7e1ec;
}

html.theme-light body.contrast-safeguard :is(input[type="text"], input[type="number"], input[type="url"], input[type="file"], textarea, select, .select-popover.enhanced .select-display, .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced > .mobile-filter-select-display){
  border-color: var(--contrast-safeguard-border-light);
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(247,250,255,0.98)),
    var(--contrast-safeguard-surface-light);
  color: var(--contrast-safeguard-text-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 1px 2px var(--contrast-safeguard-shadow-light);
}
html.theme-light body.contrast-safeguard :is(input[type="text"], input[type="number"], input[type="url"], input[type="file"], textarea, select)::placeholder{
  color: #475569;
}
html.theme-light body.contrast-safeguard .select-popover.enhanced .select-display::after,
html.theme-light body.contrast-safeguard .mobile-search .mobile-filter-select-popover.is-mobile-select-enhanced > .mobile-filter-select-display::after{
  color: #475569;
}

body.contrast-safeguard :is(.btn-ghost, .input-clear-btn, .filter-chip, .badge, .status-pill, .lb-cat-pill){
  border-color: var(--contrast-safeguard-border-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    var(--contrast-safeguard-surface-dark-raised);
  color: var(--contrast-safeguard-text-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px var(--contrast-safeguard-shadow-dark);
}
body.contrast-safeguard .filter-chip__x{
  opacity: 1;
}
body.contrast-safeguard .status-pill-on{
  border-color: rgba(76,175,80,0.72);
  color: #eaffef;
  background: rgba(76,175,80,0.16);
}
body.contrast-safeguard .status-pill-off{
  border-color: rgba(255,94,94,0.72);
  color: #fff0f0;
  background: rgba(255,94,94,0.14);
}

html.theme-light body.contrast-safeguard :is(.btn-ghost, .input-clear-btn, .filter-chip, .badge, .status-pill, .lb-cat-pill){
  border-color: var(--contrast-safeguard-border-light);
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(246,249,255,0.98)),
    var(--contrast-safeguard-surface-light-raised);
  color: var(--contrast-safeguard-text-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px var(--contrast-safeguard-shadow-light);
}
html.theme-light body.contrast-safeguard .status-pill-on{
  border-color: rgba(76,175,80,0.58);
  color: #1f5a28;
  background: rgba(76,175,80,0.14);
}
html.theme-light body.contrast-safeguard .status-pill-off{
  border-color: rgba(220,38,38,0.42);
  color: #8a1c1c;
  background: rgba(220,38,38,0.10);
}


/* ========================================================================== 
   v247: Contrast safeguard for title-linked palettes
   - Keep title-linked Votes, Episodes, and AIOWiki pills readable when a chosen
     title color is weak.
   - Scope all changes to contrast-safeguard so normal styling stays untouched.
   - Keep the selected color family for borders/glows while using safer text and
     surface values for readability.
   ========================================================================== */
body.contrast-safeguard{
  --list-pill-safe-text-votes: #F3FAE6;
  --list-pill-safe-text-episodes: #ECF4FF;
  --list-pill-safe-text-aiowiki: #F6FAFF;
}

html.theme-light body.contrast-safeguard{
  --list-pill-safe-text-votes: #35551A;
  --list-pill-safe-text-episodes: #214A79;
  --list-pill-safe-text-aiowiki: #1E4067;
}

body.contrast-safeguard header .title-color-select__swatch,
body.contrast-safeguard header .title-color-option__swatch{
  border-color: rgba(255,255,255,0.40);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 0 1px rgba(0,0,0,0.22);
}

html.theme-light body.contrast-safeguard header .title-color-select__swatch,
html.theme-light body.contrast-safeguard header .title-color-option__swatch{
  border-color: rgba(30, 41, 59, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.42),
    0 0 0 1px rgba(255,255,255,0.72);
}

body.contrast-safeguard .public-list-page .row-meta .badge-votes,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  color: var(--list-pill-safe-text-votes);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34), rgba(10, 17, 30, 0.94) 62%);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.10),
    0 0 26px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.16);
  text-shadow: 0 1px 1px rgba(0,0,0,0.32);
}

body.contrast-safeguard .public-list-page .row-meta .badge-episodes,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  color: var(--list-pill-safe-text-episodes);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.54);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.30), rgba(10, 17, 30, 0.94) 62%);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.10),
    0 0 26px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.16);
  text-shadow: 0 1px 1px rgba(0,0,0,0.32);
}

body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki,
body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn{
  color: var(--list-pill-safe-text-aiowiki);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.56);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.32), rgba(10, 17, 30, 0.95) 64%);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.10),
    0 0 28px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.17);
  text-shadow: 0 1px 1px rgba(0,0,0,0.32);
}

@media (pointer: fine){
  body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:hover,
  body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:focus-visible,
  body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:hover,
  body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:focus-visible,
  body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.68);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.38), rgba(10, 17, 30, 0.95) 64%);
    text-decoration: none;
  }
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-votes,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  color: var(--list-pill-safe-text-votes);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.46);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250, 252, 246, 0.98)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34), rgba(244, 248, 237, 0.94) 74%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.24),
    0 0 0 1px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.10);
  text-shadow: none;
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-episodes,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  color: var(--list-pill-safe-text-episodes);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.46);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246, 249, 254, 0.98)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34), rgba(238, 244, 252, 0.94) 74%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.24),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.10);
  text-shadow: none;
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki,
html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn{
  color: var(--list-pill-safe-text-aiowiki);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246, 249, 254, 0.98)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34), rgba(236, 243, 252, 0.94) 74%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.24),
    0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.10);
  text-shadow: none;
}

@media (pointer: fine){
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:hover,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:hover,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.60);
    background:
      linear-gradient(180deg, rgba(255,255,255,1.00), rgba(247, 250, 254, 0.99)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.40), rgba(236, 243, 252, 0.95) 74%);
    text-decoration: none;
  }
}


/* ==========================================================================
   v248: Contrast safeguard readability-first refinement
   - In safeguard mode, prefer clearer surfaces and boundaries over stronger
     decorative glow/text-shadow treatments on title-linked controls.
   - Keep the work limited to title-linked public list pills/buttons and the
     shared title color picker surfaces.
   ========================================================================== */
body.contrast-safeguard{
  --contrast-safeguard-pill-surface-dark: rgba(17, 24, 39, 0.96);
  --contrast-safeguard-pill-surface-dark-raised: rgba(21, 30, 45, 0.98);
  --contrast-safeguard-pill-surface-light: rgba(255,255,255,0.99);
  --contrast-safeguard-pill-surface-light-raised: rgba(248, 251, 255, 0.995);
}

body.contrast-safeguard .public-list-page .row-meta .badge-votes,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.18), var(--contrast-safeguard-pill-surface-dark) 66%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.12);
  text-shadow: none;
}

body.contrast-safeguard .public-list-page .row-meta .badge-episodes,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18), var(--contrast-safeguard-pill-surface-dark) 66%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
  text-shadow: none;
}

body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki,
body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki,
body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.20), var(--contrast-safeguard-pill-surface-dark-raised) 68%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.12);
  text-shadow: none;
}

@media (pointer: fine){
  body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:hover,
  body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:focus-visible,
  body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:hover,
  body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:focus-visible,
  body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), var(--contrast-safeguard-pill-surface-dark-raised) 68%);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.26),
      0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.16);
  }
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-votes,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
  background:
    linear-gradient(180deg, rgba(255,255,255,1.00), rgba(253, 255, 251, 0.995)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.24), var(--contrast-safeguard-pill-surface-light) 76%);
  box-shadow:
    0 1px 2px rgba(16,24,40,0.08),
    0 0 0 1px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.12);
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-episodes,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(3) .cell-fx{
  background:
    linear-gradient(180deg, rgba(255,255,255,1.00), rgba(251, 253, 255, 0.995)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.24), var(--contrast-safeguard-pill-surface-light) 76%);
  box-shadow:
    0 1px 2px rgba(16,24,40,0.08),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.12);
}

html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki,
html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki,
html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,1.00), rgba(251, 253, 255, 0.995)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.26), var(--contrast-safeguard-pill-surface-light-raised) 76%);
  box-shadow:
    0 1px 2px rgba(16,24,40,0.08),
    0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.12);
}

@media (pointer: fine){
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:hover,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .btn-aiowiki:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:hover,
  html.theme-light body.contrast-safeguard .public-list-page .row-meta .badge-aiowiki:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  html.theme-light body.contrast-safeguard .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    background:
      linear-gradient(180deg, rgba(255,255,255,1.00), rgba(252, 254, 255, 1.00)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.30), var(--contrast-safeguard-pill-surface-light-raised) 76%);
    box-shadow:
      0 1px 2px rgba(16,24,40,0.10),
      0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.16);
  }
}

body.contrast-safeguard header .title-color-select,
body.contrast-safeguard header .title-color-menu{
  border-color: var(--contrast-safeguard-border-dark);
  color: var(--contrast-safeguard-text-dark);
  background: var(--contrast-safeguard-surface-dark-raised);
}

body.contrast-safeguard header .title-color-menu{
  box-shadow: 0 8px 18px var(--contrast-safeguard-shadow-dark);
}

body.contrast-safeguard header .title-color-select::after{
  color: var(--contrast-safeguard-muted-dark);
}

body.contrast-safeguard header .title-color-option:hover,
body.contrast-safeguard header .title-color-option:focus-visible{
  background: rgba(255,255,255,0.12);
}

body.contrast-safeguard header .title-color-option[aria-selected="true"]{
  background: rgba(255,255,255,0.16);
}

html.theme-light body.contrast-safeguard header .title-color-select,
html.theme-light body.contrast-safeguard header .title-color-menu{
  border-color: var(--contrast-safeguard-border-light);
  color: var(--contrast-safeguard-text-light);
  background: var(--contrast-safeguard-surface-light-raised);
}

html.theme-light body.contrast-safeguard header .title-color-menu{
  box-shadow: 0 8px 18px var(--contrast-safeguard-shadow-light);
}

html.theme-light body.contrast-safeguard header .title-color-select::after{
  color: var(--contrast-safeguard-muted-light);
}

html.theme-light body.contrast-safeguard header .title-color-option:hover,
html.theme-light body.contrast-safeguard header .title-color-option:focus-visible{
  background: rgba(23, 33, 47, 0.08);
}

html.theme-light body.contrast-safeguard header .title-color-option[aria-selected="true"]{
  background: rgba(23, 33, 47, 0.12);
}


/* ==========================================================================
   v249: Accessibility Step 11 - browser zoom and standard text resizing
   safety pass for shared page text scaling behavior.
   ========================================================================== */
html{
}


/* ========================================================================== 
   v250: Step 12 static cross-breakpoint accessibility QA follow-up
   - Keep the Title color menu usable if text growth makes the list taller.
   - Let the compact public-list mobile meta pills/buttons wrap on the
     narrowest portrait widths instead of forcing single-line overflow.
   ========================================================================== */
header .title-color-menu{
  max-height: min(52vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

header .title-color-option{
  align-items: flex-start;
  line-height: 1.25;
}

@media (max-width: 420px){
  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.15;
  }
}


/* ========================================================================== 
   v251: Step 13 final incremental accessibility hardening pass
   - Improve Title color menu keyboard focus visibility and touch scrolling.
   - Remove remaining narrow mobile min-width pressure from compact AIOWiki
     row-meta controls while keeping the earlier wrapping fallback.
   ========================================================================== */
header .title-color-menu{
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

header .title-color-option:focus-visible{
  outline: 2px solid rgba(29, 111, 227, 0.72);
  outline-offset: 2px;
}

body.contrast-safeguard header .title-color-option:focus-visible{
  outline-color: rgba(255,255,255,0.72);
}

html.theme-light body.contrast-safeguard header .title-color-option:focus-visible{
  outline-color: rgba(23, 33, 47, 0.52);
}

@media (max-width: 420px){
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    min-width: 0;
  }

  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki{
    padding-top: calc(var(--ui-pill-padding-y));
    padding-bottom: calc(var(--ui-pill-padding-y));
    line-height: 1.2;
  }
}


/* ========================================================================== 
   v251: iPad albums list touch-width safeguard
   - Keep the Albums public list from cramming Votes/Episodes on iPad portrait
     and landscape widths.
   - Reuse the compact touch layout only for the public Albums page.
   - Leave desktop fine-pointer layouts and other public tabs unchanged.
   ========================================================================== */
@media (hover: none) and (pointer: coarse){
  .public-list-page--albums .albums-table .row-meta{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    row-gap:6px;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--albums .albums-table col.albums-col-aiowiki{
    display:none;
    width:0;
  }

  .public-list-page--albums .albums-table .badge-album-number{
    display:none;
  }

  .public-list-page--albums .albums-table .albums-col-thumb{
    width:104px;
  }

  .public-list-page--albums .albums-table .albums-col-title{
    width:auto;
  }

  .public-list-page--albums .albums-table .albums-col-rating{
    width:120px;
  }

  .public-list-page--albums .albums-table .albums-col-votes,
  .public-list-page--albums .albums-table .albums-col-episodes,
  .public-list-page--albums .albums-table .albums-col-aiowiki{
    width:0;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5){
    display:none;
  }

  .public-list-page--albums .albums-table th:nth-child(3),
  .public-list-page--albums .albums-table td:nth-child(3){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }
}


/* v251: Stats + vote-page category pills in light mode
   - Keep the change scoped to public Stats and public detail/vote pages.
   - Preserve the existing category tint while darkening the text enough
     to stay readable on bright backgrounds. */
html.theme-light body[data-page-kind="stats"] .lb-cat-pill,
html.theme-light body[data-page-kind="album"] .lb-cat-pill,
html.theme-light body[data-page-kind="season"] .lb-cat-pill,
html.theme-light body[data-page-kind="arc"] .lb-cat-pill,
html.theme-light body[data-page-kind="episode"] .lb-cat-pill,
html.theme-light body[data-page-kind="character"] .lb-cat-pill,
html.theme-light body[data-page-kind="elsewhere"] .lb-cat-pill,
html.theme-light body[data-page-kind="videos"] .lb-cat-pill{
  color: color-mix(in srgb, var(--lb-color) 34%, #17253a 66%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--lb-color) 22%, rgba(255,255,255,0)) 0%,
      rgba(255,255,255,0.90) 72%);
  border-color: color-mix(in srgb, var(--lb-color) 42%, rgba(15,23,42,0.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08);
  text-shadow: none;
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)){
  html.theme-light body[data-page-kind="stats"] .lb-cat-pill,
  html.theme-light body[data-page-kind="album"] .lb-cat-pill,
  html.theme-light body[data-page-kind="season"] .lb-cat-pill,
  html.theme-light body[data-page-kind="arc"] .lb-cat-pill,
  html.theme-light body[data-page-kind="episode"] .lb-cat-pill,
  html.theme-light body[data-page-kind="character"] .lb-cat-pill,
  html.theme-light body[data-page-kind="elsewhere"] .lb-cat-pill,
  html.theme-light body[data-page-kind="videos"] .lb-cat-pill{
    color: #1f344e;
    background: rgba(255,255,255,0.96);
    border-color: rgba(93, 124, 168, 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      0 8px 18px rgba(37, 58, 88, 0.08);
  }
}


/* v252: Vote-page cleanup for Characters, Arcs, and Elsewhere */
.vote-redundant-copy {
  display: none !important;
}

body[data-page-kind="character"] .page-characters-detail .vote-summary-card,
body[data-page-kind="arc"] .page-arcs-detail .vote-summary-card,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-card {
  width: 100%;
  max-width: 760px;
}

body[data-page-kind="character"] .page-characters-detail .character-detail-right,
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-right,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-right {
  min-width: 0;
}

body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-right,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .split.split-elsewhere > :last-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body[data-page-kind="character"] .page-characters-detail .vote-controls,
body[data-page-kind="arc"] .page-arcs-detail .vote-controls,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-controls {
  max-width: 100%;
}


/* ========================================================================== 
   v289: Album/season detail votes + AIOWiki match main list styling
   - Keep the album-detail and season-detail episode tables visually aligned
     with the main Albums and Club Seasons list treatments.
   - Applies the same desktop pill/button look to the Votes and AIOWiki
     columns, and the same mobile meta-pill look inside the row title area.
   ========================================================================== */
@media (min-width: 1025px) and (pointer: fine) {
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:28px;
    min-width:72px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    color:var(--list-pill-votes-color, #D7EFB3);
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
  }

  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx::before,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    min-height:28px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn::before,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn:hover,
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn:focus-visible,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn:hover,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }
}

@media (max-width: 1179px) {
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail{
    justify-content:center;
    align-items:center;
    gap:6px;
    row-gap:6px;
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height: calc(var(--ui-control-height) - 12px);
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size: calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes{
    color:var(--list-pill-votes-color, #D7EFB3);
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
    min-width:88px;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes::before,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki::before,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki::before,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki::before,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }
}

@media (max-width: 420px) {
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
}

html.theme-light .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn,
html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
html.theme-light .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
  box-shadow:
    0 12px 24px rgba(13, 26, 48, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}


/* Light-theme overrides for the detail-page pills/buttons (match main list pages) */
@media (min-width: 1025px) and (pointer: fine) {
  html.theme-light .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  html.theme-light .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    color:var(--list-pill-votes-color, #5A761F);
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
  }

  html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn{
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
  }
}

@media (max-width: 1179px) {
  html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes{
    color:var(--list-pill-votes-color, #5A761F);
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
  }

  html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
  html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
  }
}


/* ========================================================================== 
   v251: Detail-page badge parity for album/season episode rows
   - Keep the Votes and AIOWiki pills under episode titles on album/season
     detail pages using the same Admin-config palette as the main list pages.
   - Apply at desktop widths too so the detail-page badges no longer drift.
   ========================================================================== */
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  row-gap:6px;
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height: calc(var(--ui-control-height) - 12px);
  padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
  border-radius:999px;
  font-size: calc(var(--ui-pill-font-size) - 2px);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes{
  color:var(--list-pill-votes-color, #D7EFB3);
  border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
  min-width:88px;
  color:var(--list-pill-aiowiki-color, #EAF3FF);
  border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes::before,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki::before,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki::before{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  display:inline-block;
  background-color:currentColor;
  opacity:0.96;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
}

body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki::before,
body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki::before,
body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
}

@media (pointer: fine){
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki:hover,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki:focus-visible,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki:hover,
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki:focus-visible,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki:hover,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki:focus-visible,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki:hover,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }
}

html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-votes,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-votes{
  color:var(--list-pill-votes-color, #5A761F);
  border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .btn-aiowiki,
html.theme-light body[data-page-kind="album"] .page-album-detail .row-meta--album-detail .badge-aiowiki,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .btn-aiowiki,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail .badge-aiowiki{
  color:var(--list-pill-aiowiki-color, #274A74);
  border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}


/* ==========================================================================
   v251: compact mobile list badges follow-up
   - Keep Votes and Episodes compact on mobile-responsive list cards.
   - Keep AIOWiki on its own tap-friendly row.
   - Hide the Episodes word on those compact mobile layouts to save space.
   ========================================================================== */
.public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

@media (max-width: 1179px){
  .public-list-page .row-meta.row-meta--compact-badges-mobile{
    justify-content:flex-start;
    align-items:center;
    gap:6px 8px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile > *{
    order:10;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    order:1;
    flex:0 0 auto;
    width:auto;
    max-width:none;
    min-height:32px;
    padding:6px 12px;
    font-size:12px;
    line-height:1;
    gap:4px;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
    text-align:left;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    order:2;
    padding-left:10px;
    padding-right:10px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes .badge-label{
    display:none !important;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    order:3;
    display:inline-flex;
    align-self:flex-start;
    width:auto;
    max-width:none;
    min-width:88px;
    min-height:calc(var(--ui-control-height) - 12px);
    margin-top:2px;
    padding:calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    justify-content:center;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }

  /* Arcs: keep the compact AIOWiki pill on its own row without letting the
     extra Story/Character badge make the pill feel wider than the Album/Season
     versions. */
  .public-list-page--arcs .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    flex:0 0 auto;
    width:auto;
    margin-right:100%;
  }
}


/* v254: vote-page premium pill family refinement
   Make the vote-page controls visibly match the premium Album/Season pill look,
   including the darker gradient body, glow, and shimmer sweep. */
body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn),
body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn),
body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn),
body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn),
body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn),
body[data-page-kind="album"] .vote-info-btn,
body[data-page-kind="season"] .vote-info-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(98, 123, 164, 0.36);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(70, 124, 214, 0.22), rgba(70, 124, 214, 0.00) 56%),
    linear-gradient(135deg, rgba(27, 62, 118, 0.34), rgba(9, 16, 28, 0.98) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  box-shadow:
    0 16px 34px rgba(0,0,0,0.30),
    0 0 0 1px rgba(123, 171, 232, 0.07),
    0 0 34px rgba(var(--glow-buttons-rgb), calc(0.30 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03);
  color: #eef5ff;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.34);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
  will-change: transform;
}

body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::before,
body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::before,
body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::before,
body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::before,
body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::before,
body[data-page-kind="album"] .vote-info-btn::before,
body[data-page-kind="season"] .vote-info-btn::before{
  content: "";
  position: absolute;
  inset: -28% -18%;
  border-radius: inherit;
  background: radial-gradient(60% 72% at 50% 50%, rgba(var(--glow-buttons-rgb), calc(0.34 * var(--glow-buttons-int))), rgba(var(--glow-buttons-rgb), 0) 72%);
  filter: blur(16px);
  opacity: 0.95;
  transform: scale(0.98);
  z-index: -1;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::after,
body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::after,
body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::after,
body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::after,
body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::after,
body[data-page-kind="album"] .vote-info-btn::after,
body[data-page-kind="season"] .vote-info-btn::after{
  background: linear-gradient(115deg, transparent 34%, rgba(var(--btn-shimmer-rgb),0.34) 50%, transparent 66%);
}

body[data-page-kind="episode"] .vote-info-btn,
body[data-page-kind="character"] .vote-info-btn,
body[data-page-kind="arc"] .vote-info-btn,
body[data-page-kind="elsewhere"] .vote-info-btn,
body[data-page-kind="videos"] .vote-info-btn,
body[data-page-kind="album"] .vote-info-btn,
body[data-page-kind="season"] .vote-info-btn{
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 11px 16px;
}

body[data-page-kind="episode"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="character"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="arc"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="elsewhere"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="videos"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="album"] .vote-info-btn.aiowiki-btn,
body[data-page-kind="season"] .vote-info-btn.aiowiki-btn{
  --glow-buttons-rgb: var(--glow-aiowiki-rgb);
  --glow-buttons-int: var(--glow-aiowiki-int);
  border-color: rgba(98, 123, 164, 0.32);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(53, 113, 217, 0.18), rgba(53, 113, 217, 0.00) 56%),
    linear-gradient(135deg, rgba(20, 48, 92, 0.30), rgba(9, 16, 28, 0.98) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:
    0 14px 28px rgba(0,0,0,0.28),
    0 0 0 1px rgba(123, 171, 232, 0.06),
    0 0 28px rgba(var(--glow-aiowiki-rgb), calc(0.24 * var(--glow-aiowiki-int))),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(255,255,255,0.02);
}

body[data-page-kind="episode"] .vote-btn,
body[data-page-kind="character"] .vote-btn,
body[data-page-kind="arc"] .vote-btn,
body[data-page-kind="elsewhere"] .vote-btn,
body[data-page-kind="videos"] .vote-btn{
  --glow-buttons-rgb: var(--glow-primary-rgb);
  --glow-buttons-int: var(--glow-primary-int);
  width: 100%;
  flex: 1 1 100%;
  padding: 10px 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  border-color: rgba(123, 171, 232, 0.48);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(79, 147, 255, 0.28), rgba(79, 147, 255, 0.00) 56%),
    linear-gradient(135deg, rgba(33, 83, 162, 0.42), rgba(8, 18, 33, 0.99) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  box-shadow:
    0 18px 38px rgba(0,0,0,0.32),
    0 0 0 1px rgba(123, 171, 232, 0.10),
    0 0 40px rgba(var(--glow-primary-rgb), calc(0.42 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

@media (pointer: fine){
  body[data-page-kind="episode"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="episode"] .vote-info-btn:focus-visible,
  body[data-page-kind="character"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="character"] .vote-info-btn:focus-visible,
  body[data-page-kind="arc"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="arc"] .vote-info-btn:focus-visible,
  body[data-page-kind="elsewhere"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="elsewhere"] .vote-info-btn:focus-visible,
  body[data-page-kind="videos"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="videos"] .vote-info-btn:focus-visible,
  body[data-page-kind="album"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="album"] .vote-info-btn:focus-visible,
  body[data-page-kind="season"] .vote-info-btn:hover:not(:active),
  body[data-page-kind="season"] .vote-info-btn:focus-visible{
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(123, 171, 232, 0.52);
    box-shadow:
      0 18px 38px rgba(0,0,0,0.32),
      0 0 0 1px rgba(123, 171, 232, 0.10),
      0 0 40px rgba(var(--glow-buttons-rgb), calc(0.40 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03);
    filter: brightness(1.05);
  }

  body[data-page-kind="episode"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="episode"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="character"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="character"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="arc"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="arc"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="videos"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="videos"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="album"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="album"] .vote-info-btn:focus-visible::before,
  body[data-page-kind="season"] .vote-info-btn:hover:not(:active)::before,
  body[data-page-kind="season"] .vote-info-btn:focus-visible::before{
    opacity: 1;
    transform: scale(1.02);
  }

  body[data-page-kind="episode"] .vote-btn:hover:not(:active),
  body[data-page-kind="episode"] .vote-btn:focus-visible,
  body[data-page-kind="character"] .vote-btn:hover:not(:active),
  body[data-page-kind="character"] .vote-btn:focus-visible,
  body[data-page-kind="arc"] .vote-btn:hover:not(:active),
  body[data-page-kind="arc"] .vote-btn:focus-visible,
  body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active),
  body[data-page-kind="elsewhere"] .vote-btn:focus-visible,
  body[data-page-kind="videos"] .vote-btn:hover:not(:active),
  body[data-page-kind="videos"] .vote-btn:focus-visible{
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(154, 197, 255, 0.64);
    box-shadow:
      0 20px 42px rgba(0,0,0,0.34),
      0 0 0 1px rgba(154, 197, 255, 0.14),
      0 0 46px rgba(var(--glow-primary-rgb), calc(0.56 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.13),
      inset 0 -1px 0 rgba(255,255,255,0.04);
    filter: brightness(1.08);
  }

  body[data-page-kind="episode"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="episode"] .vote-btn:focus-visible::before,
  body[data-page-kind="character"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="character"] .vote-btn:focus-visible::before,
  body[data-page-kind="arc"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="arc"] .vote-btn:focus-visible::before,
  body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="elsewhere"] .vote-btn:focus-visible::before,
  body[data-page-kind="videos"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="videos"] .vote-btn:focus-visible::before{
    opacity: 1;
    transform: scale(1.03);
  }
}

body[data-page-kind="episode"] .vote-info-btn:focus-visible,
body[data-page-kind="character"] .vote-info-btn:focus-visible,
body[data-page-kind="arc"] .vote-info-btn:focus-visible,
body[data-page-kind="elsewhere"] .vote-info-btn:focus-visible,
body[data-page-kind="videos"] .vote-info-btn:focus-visible,
body[data-page-kind="album"] .vote-info-btn:focus-visible,
body[data-page-kind="season"] .vote-info-btn:focus-visible,
body[data-page-kind="episode"] .vote-btn:focus-visible,
body[data-page-kind="character"] .vote-btn:focus-visible,
body[data-page-kind="arc"] .vote-btn:focus-visible,
body[data-page-kind="elsewhere"] .vote-btn:focus-visible,
body[data-page-kind="videos"] .vote-btn:focus-visible{
  outline: none;
}

body[data-page-kind="episode"] .vote-info-btn:active,
body[data-page-kind="character"] .vote-info-btn:active,
body[data-page-kind="arc"] .vote-info-btn:active,
body[data-page-kind="elsewhere"] .vote-info-btn:active,
body[data-page-kind="videos"] .vote-info-btn:active,
body[data-page-kind="album"] .vote-info-btn:active,
body[data-page-kind="season"] .vote-info-btn:active,
body[data-page-kind="episode"] .vote-btn:active,
body[data-page-kind="character"] .vote-btn:active,
body[data-page-kind="arc"] .vote-btn:active,
body[data-page-kind="elsewhere"] .vote-btn:active,
body[data-page-kind="videos"] .vote-btn:active{
  transform: translateY(-1px) scale(0.992);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.42),
    0 0 24px rgba(var(--glow-buttons-rgb), calc(0.24 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="album"] .vote-info-btn,
html.theme-light body[data-page-kind="season"] .vote-info-btn{
  color: #173457;
  text-shadow: none;
  border-color: rgba(11,79,191,0.28);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(106, 168, 255, 0.24), rgba(106, 168, 255, 0.00) 56%),
    linear-gradient(135deg, rgba(162, 203, 255, 0.36), rgba(255,255,255,0.99) 74%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,247,255,0.94));
  box-shadow:
    0 14px 28px rgba(11,79,191,0.12),
    0 0 0 1px rgba(11,79,191,0.06),
    0 0 28px rgba(11,79,191,0.12),
    inset 0 1px 0 rgba(255,255,255,0.84),
    inset 0 -1px 0 rgba(151, 177, 227, 0.12);
}

html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="album"] .vote-info-btn::before,
html.theme-light body[data-page-kind="season"] .vote-info-btn::before{
  background: radial-gradient(60% 72% at 50% 50%, rgba(11,79,191,0.18), rgba(11,79,191,0.00) 72%);
}

html.theme-light body[data-page-kind="episode"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="character"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="arc"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="videos"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="album"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="season"] .vote-info-btn.aiowiki-btn{
  color: #184275;
  border-color: rgba(11,79,191,0.24);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(106, 168, 255, 0.18), rgba(106, 168, 255, 0.00) 56%),
    linear-gradient(135deg, rgba(170, 209, 255, 0.30), rgba(255,255,255,0.99) 74%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.95));
}

html.theme-light body[data-page-kind="episode"] .vote-btn,
html.theme-light body[data-page-kind="character"] .vote-btn,
html.theme-light body[data-page-kind="arc"] .vote-btn,
html.theme-light body[data-page-kind="elsewhere"] .vote-btn,
html.theme-light body[data-page-kind="videos"] .vote-btn{
  border-color: rgba(11,79,191,0.38);
  background:
    radial-gradient(140% 170% at 50% -12%, rgba(106, 168, 255, 0.30), rgba(106, 168, 255, 0.00) 56%),
    linear-gradient(135deg, rgba(155, 196, 255, 0.42), rgba(255,255,255,0.99) 74%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(236,244,255,0.93));
  box-shadow:
    0 16px 30px rgba(11,79,191,0.14),
    0 0 0 1px rgba(11,79,191,0.08),
    0 0 34px rgba(11,79,191,0.16),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(151, 177, 227, 0.14);
}

@media (pointer: fine){
  html.theme-light body[data-page-kind="episode"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="character"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="character"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="arc"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="arc"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="videos"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="videos"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="album"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="album"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="season"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="season"] .vote-info-btn:focus-visible{
    border-color: rgba(11,79,191,0.38);
    box-shadow:
      0 16px 32px rgba(11,79,191,0.14),
      0 0 0 1px rgba(11,79,191,0.08),
      0 0 34px rgba(11,79,191,0.16),
      inset 0 1px 0 rgba(255,255,255,0.86),
      inset 0 -1px 0 rgba(151, 177, 227, 0.14);
  }

  html.theme-light body[data-page-kind="episode"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="character"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="character"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="arc"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="arc"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="elsewhere"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="videos"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="videos"] .vote-btn:focus-visible{
    border-color: rgba(11,79,191,0.46);
    box-shadow:
      0 18px 34px rgba(11,79,191,0.16),
      0 0 0 1px rgba(11,79,191,0.10),
      0 0 38px rgba(11,79,191,0.20),
      inset 0 1px 0 rgba(255,255,255,0.88),
      inset 0 -1px 0 rgba(151, 177, 227, 0.16);
  }
}

html.motion-reduce body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn),
html.motion-reduce body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn),
html.motion-reduce body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn),
html.motion-reduce body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn),
html.motion-reduce body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn),
html.motion-reduce body[data-page-kind="album"] .vote-info-btn,
html.motion-reduce body[data-page-kind="season"] .vote-info-btn{
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
}

html.motion-off body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn),
html.motion-off body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn),
html.motion-off body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn),
html.motion-off body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn),
html.motion-off body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn),
html.motion-off body[data-page-kind="album"] .vote-info-btn,
html.motion-off body[data-page-kind="season"] .vote-info-btn,
html.motion-off body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::before,
html.motion-off body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::before,
html.motion-off body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::before,
html.motion-off body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::before,
html.motion-off body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::before,
html.motion-off body[data-page-kind="album"] .vote-info-btn::before,
html.motion-off body[data-page-kind="season"] .vote-info-btn::before{
  transition: none !important;
}

@media (max-width: 680px){
  body[data-page-kind="episode"] .vote-info-btn,
  body[data-page-kind="character"] .vote-info-btn,
  body[data-page-kind="arc"] .vote-info-btn,
  body[data-page-kind="elsewhere"] .vote-info-btn,
  body[data-page-kind="videos"] .vote-info-btn,
  body[data-page-kind="album"] .vote-info-btn,
  body[data-page-kind="season"] .vote-info-btn{
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  body[data-page-kind="episode"] .vote-btn,
  body[data-page-kind="character"] .vote-btn,
  body[data-page-kind="arc"] .vote-btn,
  body[data-page-kind="elsewhere"] .vote-btn,
  body[data-page-kind="videos"] .vote-btn{
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }
}


/* v262: give vote-page bottom Back buttons the same blue primary outline family
   as the Vote button, while keeping the existing neutral button body intact. */
body[data-page-kind="episode"] .page-episodes-detail .episode-detail-back > .btn,
body[data-page-kind="character"] .page-characters-detail .character-detail-back > .btn,
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-back > .btn,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-back > .btn,
body[data-page-kind="videos"] .page-videos-detail .videos-detail-back > .btn,
body[data-page-kind="album"] .page-album-detail .album-detail-back > .btn,
body[data-page-kind="season"] .page-seasons-detail .season-detail-back > .btn{
  border-color: rgba(123, 171, 232, 0.48);
  box-shadow:
    var(--btn-shadow),
    0 0 0 1px rgba(123, 171, 232, 0.10),
    0 0 40px rgba(var(--glow-primary-rgb), calc(0.42 * var(--glow-primary-int)));
}

@media (pointer: fine){
  body[data-page-kind="episode"] .page-episodes-detail .episode-detail-back > .btn:hover:not(:active),
  body[data-page-kind="episode"] .page-episodes-detail .episode-detail-back > .btn:focus-visible,
  body[data-page-kind="character"] .page-characters-detail .character-detail-back > .btn:hover:not(:active),
  body[data-page-kind="character"] .page-characters-detail .character-detail-back > .btn:focus-visible,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-back > .btn:hover:not(:active),
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-back > .btn:focus-visible,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-back > .btn:hover:not(:active),
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-back > .btn:focus-visible,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-back > .btn:hover:not(:active),
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-back > .btn:focus-visible,
  body[data-page-kind="album"] .page-album-detail .album-detail-back > .btn:hover:not(:active),
  body[data-page-kind="album"] .page-album-detail .album-detail-back > .btn:focus-visible,
  body[data-page-kind="season"] .page-seasons-detail .season-detail-back > .btn:hover:not(:active),
  body[data-page-kind="season"] .page-seasons-detail .season-detail-back > .btn:focus-visible{
    border-color: rgba(154, 197, 255, 0.64);
    box-shadow:
      var(--btn-shadow-hover),
      0 0 0 1px rgba(154, 197, 255, 0.14),
      0 0 46px rgba(var(--glow-primary-rgb), calc(0.56 * var(--glow-primary-int)));
  }
}

/* v255: rebalance vote-page back glow on Vote info + Vote
   Restore a visible premium back glow, but keep it tucked in tighter than the
   first pass so the pills stay crisp instead of hazy. */
body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn){
  box-shadow:
    0 14px 28px rgba(0,0,0,0.30),
    0 0 0 1px rgba(123, 171, 232, 0.06),
    0 0 24px rgba(var(--glow-buttons-rgb), calc(0.24 * var(--glow-buttons-int))),
    0 0 44px rgba(var(--glow-buttons-rgb), calc(0.10 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03);
}

body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn)::before{
  inset: -17% -11%;
  background: radial-gradient(58% 68% at 50% 50%, rgba(var(--glow-buttons-rgb), calc(0.28 * var(--glow-buttons-int))), rgba(var(--glow-buttons-rgb), calc(0.10 * var(--glow-buttons-int))) 46%, rgba(var(--glow-buttons-rgb), 0) 74%);
  filter: blur(12px);
  opacity: 0.88;
  transform: scale(0.992);
}

body[data-page-kind="episode"] .vote-btn,
body[data-page-kind="character"] .vote-btn,
body[data-page-kind="arc"] .vote-btn,
body[data-page-kind="elsewhere"] .vote-btn,
body[data-page-kind="videos"] .vote-btn{
  box-shadow:
    0 16px 32px rgba(0,0,0,0.32),
    0 0 0 1px rgba(123, 171, 232, 0.08),
    0 0 28px rgba(var(--glow-primary-rgb), calc(0.30 * var(--glow-primary-int))),
    0 0 56px rgba(var(--glow-primary-rgb), calc(0.12 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

body[data-page-kind="episode"] .vote-btn::before,
body[data-page-kind="character"] .vote-btn::before,
body[data-page-kind="arc"] .vote-btn::before,
body[data-page-kind="elsewhere"] .vote-btn::before,
body[data-page-kind="videos"] .vote-btn::before{
  inset: -15% -10%;
  background: radial-gradient(56% 64% at 50% 50%, rgba(var(--glow-primary-rgb), calc(0.34 * var(--glow-primary-int))), rgba(var(--glow-primary-rgb), calc(0.12 * var(--glow-primary-int))) 48%, rgba(var(--glow-primary-rgb), 0) 74%);
  filter: blur(12px);
  opacity: 0.90;
  transform: scale(0.992);
}

@media (pointer: fine){
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):focus-visible{
    box-shadow:
      0 16px 32px rgba(0,0,0,0.32),
      0 0 0 1px rgba(123, 171, 232, 0.08),
      0 0 28px rgba(var(--glow-buttons-rgb), calc(0.28 * var(--glow-buttons-int))),
      0 0 50px rgba(var(--glow-buttons-rgb), calc(0.12 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03);
  }

  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before{
    opacity: 0.96;
    transform: scale(1.005);
  }

  body[data-page-kind="episode"] .vote-btn:hover:not(:active),
  body[data-page-kind="episode"] .vote-btn:focus-visible,
  body[data-page-kind="character"] .vote-btn:hover:not(:active),
  body[data-page-kind="character"] .vote-btn:focus-visible,
  body[data-page-kind="arc"] .vote-btn:hover:not(:active),
  body[data-page-kind="arc"] .vote-btn:focus-visible,
  body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active),
  body[data-page-kind="elsewhere"] .vote-btn:focus-visible,
  body[data-page-kind="videos"] .vote-btn:hover:not(:active),
  body[data-page-kind="videos"] .vote-btn:focus-visible{
    box-shadow:
      0 18px 36px rgba(0,0,0,0.34),
      0 0 0 1px rgba(154, 197, 255, 0.12),
      0 0 32px rgba(var(--glow-primary-rgb), calc(0.38 * var(--glow-primary-int))),
      0 0 62px rgba(var(--glow-primary-rgb), calc(0.14 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.13),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }

  body[data-page-kind="episode"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="episode"] .vote-btn:focus-visible::before,
  body[data-page-kind="character"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="character"] .vote-btn:focus-visible::before,
  body[data-page-kind="arc"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="arc"] .vote-btn:focus-visible::before,
  body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="elsewhere"] .vote-btn:focus-visible::before,
  body[data-page-kind="videos"] .vote-btn:hover:not(:active)::before,
  body[data-page-kind="videos"] .vote-btn:focus-visible::before{
    opacity: 0.98;
    transform: scale(1.008);
  }
}


/* v256: tighten Vote info back glow so it matches the Album pill more closely
   Keep the glow visible, but pull it in so the pill reads crisp instead of foggy. */
body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn),
body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn){
  box-shadow:
    0 14px 28px rgba(0,0,0,0.30),
    0 0 0 1px rgba(123, 171, 232, 0.06),
    0 0 18px rgba(var(--glow-buttons-rgb), calc(0.18 * var(--glow-buttons-int))),
    0 0 32px rgba(var(--glow-buttons-rgb), calc(0.07 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03);
}

body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn)::before,
body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn)::before{
  inset: -11% -7%;
  background: radial-gradient(54% 60% at 50% 50%, rgba(var(--glow-buttons-rgb), calc(0.22 * var(--glow-buttons-int))), rgba(var(--glow-buttons-rgb), calc(0.08 * var(--glow-buttons-int))) 44%, rgba(var(--glow-buttons-rgb), 0) 72%);
  filter: blur(9px);
  opacity: 0.84;
  transform: scale(0.995);
}

@media (pointer: fine){
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):focus-visible,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active),
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):focus-visible{
    box-shadow:
      0 16px 32px rgba(0,0,0,0.32),
      0 0 0 1px rgba(123, 171, 232, 0.08),
      0 0 22px rgba(var(--glow-buttons-rgb), calc(0.22 * var(--glow-buttons-int))),
      0 0 36px rgba(var(--glow-buttons-rgb), calc(0.08 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03);
  }

  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="episode"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="character"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="arc"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="elsewhere"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="videos"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="album"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):hover:not(:active)::before,
  body[data-page-kind="season"] .vote-info-btn:not(.aiowiki-btn):focus-visible::before{
    opacity: 0.90;
    transform: scale(1.0);
  }
}

/* ========================================================================== 
   v251b: Hide album/season detail title badges on desktop
   - Keep the under-title Votes + AIOWiki row for touch/mobile layouts only.
   - On desktop/fine-pointer layouts, the table already has dedicated Votes and
     AIOWiki columns, so hide the duplicate row-meta badges.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  body[data-page-kind="album"] .page-album-detail .row-meta--album-detail,
  body[data-page-kind="season"] .page-seasons-detail .row-meta--season-detail{
    display:none !important;
  }
}


/* Random article dice: keep the dedicated blue face on desktop hover and use lift only. */
body > .container > nav > .random-article-dice::after{
  display: none;
}

@media (pointer: fine){
  body > .container > nav > .random-article-dice:hover:not(:active),
  body > .container > nav > .random-article-dice:focus-visible{
    background: linear-gradient(180deg, #2c9de2 0%, #197dd3 100%) !important;
    filter: none !important;
    transform: translateY(-3px) translateZ(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(7, 35, 78, 0.22),
      0 8px 16px rgba(5, 16, 39, 0.24),
      0 0 0 1px rgba(179, 239, 255, 0.14),
      0 0 12px rgba(49, 198, 255, 0.12);
  }

  body > .container > nav > .random-article-dice:active{
    background: linear-gradient(180deg, #248fd4 0%, #156fc6 100%) !important;
    filter: none !important;
  }
}

@media (pointer: coarse){
  body > .container > nav > .random-article-dice:hover,
  body > .container > nav > .random-article-dice:focus-visible,
  body > .container > nav > .random-article-dice:active{
    background: linear-gradient(180deg, #2796dc 0%, #1678cf 100%) !important;
    filter: none !important;
  }
}


/* Step 4: add gentle edge definition to the major light-mode list surfaces so
   the calmer Step 3 panels separate more clearly without looking heavy. */
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .card {
  border-color: rgba(30, 41, 59, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    0 0 0 1px rgba(255,255,255,0.26),
    0 6px 18px rgba(16,24,40,0.07);
}

html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .table-wrap {
  border-color: rgba(30, 41, 59, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 0 0 1px rgba(255,255,255,0.28),
    0 6px 18px rgba(16,24,40,0.07);
}


/* Step 5: tighten the broader light-mode panel shadows on the same major
   public list surfaces so the light theme keeps depth without the hazy glow. */
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    0 0 0 1px rgba(255,255,255,0.26),
    0 4px 12px rgba(16,24,40,0.05);
}

html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .table-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 0 0 1px rgba(255,255,255,0.28),
    0 4px 12px rgba(16,24,40,0.05);
}

/* Step 6: tiny light-mode balance pass on the same major public list
   surfaces so Steps 3 through 5 stay cohesive and do not read too flat or
   too contrasty after the tint, edge, and shadow cleanup. */
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .card,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .card {
  background-color: rgba(248, 250, 253, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.56),
    0 0 0 1px rgba(255,255,255,0.24),
    0 5px 14px rgba(16,24,40,0.05);
}

html.theme-light body[data-list-page-bg-light="1"][data-page-kind="albums"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="seasons"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="episodes"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="elsewhere"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="characters"] .table-wrap,
html.theme-light body[data-list-page-bg-light="1"][data-page-kind="arcs"] .table-wrap {
  background-color: rgba(249, 251, 254, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    0 0 0 1px rgba(255,255,255,0.26),
    0 5px 14px rgba(16,24,40,0.05);
}


/* ========================================================================== 
   v259: responsive badge and header scaling refinement
   - Keep public list badges a little more compact on touch devices, including
     iPads and other tablet-sized viewports.
   - Restore an even smaller badge scale on very small phones after the later
     compact-badge rules so the pills do not overpower the row.
   - Reduce the top-header brand and tagline sizing on tighter touch screens so
     the title block stays clear of the Settings and About buttons.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 1280px){
  .public-list-page .row-meta.row-meta--compact-badges-mobile{
    gap: 6px 8px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    min-height: 30px;
    padding: 5px 11px;
    font-size: 11.5px;
    line-height: 1;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    padding-left: 9px;
    padding-right: 9px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    min-height: 30px;
    min-width: 82px;
    padding: 6px 13px;
    font-size: 11.5px;
    line-height: 1;
  }

  header#siteHeader.site-header{
    --site-brand-size: clamp(16px, 2.35vw, 22px);
  }

  header#siteHeader.site-header .brand-mark{
    width: calc(var(--site-brand-size) * 1.16);
    flex-basis: calc(var(--site-brand-size) * 1.16);
  }

  header#siteHeader.site-header .tagline{
    font-size: clamp(9px, 0.95vw, 10px);
    letter-spacing: 0.045em;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 680px){
  html body header#siteHeader.site-header .brand{
    font-size: clamp(13.5px, 4.25vw, 17px) !important;
    letter-spacing: 0.038em;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8.7px, 2.35vw, 9.8px) !important;
    letter-spacing: 0.03em;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 420px){
  .public-list-page .row-meta.row-meta--compact-badges-mobile{
    gap: 7px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    min-height: 28px;
    min-width: 78px;
    padding: 5px 11px;
    font-size: 11px;
    margin-top: 0;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 4px !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 5px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 22px !important;
    height: 22px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(12.5px, 4.05vw, 15.5px) !important;
    letter-spacing: 0.03em;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8px, 2.15vw, 9px) !important;
    letter-spacing: 0.018em;
  }
}


/* ========================================================================== 
   v260: small-phone public list scaling + iPad portrait AIOWiki width
   - Tighten the public list table proportions on very small portrait phones so
     the Title column keeps more usable width next to Thumb and Rating.
   - Keep the Albums/Seasons portrait-tablet AIOWiki badge compact instead of
     stretching it to a wide own-row pill.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 430px){
  .public-list-page .table-wrap th,
  .public-list-page .table-wrap td{
    padding: 8px 6px;
  }

  .public-list-page .row-title{
    font-size: clamp(14px, 4.5vw, 15.5px);
    line-height: 1.16;
  }

  .public-list-page .rating-meter--sm,
  .public-list-page .rating-meter{
    max-width: 96px;
  }

  .public-list-page--albums .albums-table .albums-col-thumb,
  .public-list-page--seasons .seasons-table .seasons-col-thumb{
    width: 88px;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating{
    width: 102px;
  }

  .public-list-page--albums .thumb-list,
  .public-list-page--seasons .thumb-list,
  .public-list-page--elsewhere .thumb-list,
  .public-list-page--episodes .thumb-list{
    width: 56px;
    height: 56px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile{
    gap: 6px;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 82px;
    margin-top: 0;
    margin-right: 100%;
    align-self: flex-start;
    justify-content: center;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 700px) and (max-width: 1100px){
  .public-list-page--albums .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page--albums .row-meta.row-meta--compact-badges-mobile .badge-aiowiki,
  .public-list-page--seasons .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page--seasons .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 82px;
    margin-top: 0;
    margin-right: 100%;
    align-self: flex-start;
    justify-content: center;
  }
}


/* ========================================================================== 
   v261: small-phone landscape header + compact AIOWiki pill refinement
   - Keep the sticky top header as thin in small-phone landscape as it feels in
     portrait by preventing the action buttons from forcing a tall stacked row.
   - Keep the compact row-meta AIOWiki pill on its own short row in small-phone
     landscape instead of letting it stretch into a wide full-row button.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(13px, 2.05vw, 16px);
    padding: 4px 10px !important;
  }

  html.theme-light body[data-glass-headers="1"] header#siteHeader.site-header,
  body[data-glass-headers="1"] header#siteHeader.site-header{
    padding-bottom: calc(4px + 10px) !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .header-left{
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand-copy,
  html body header#siteHeader.site-header .brand-row{
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 22px !important;
    height: 22px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(12px, 2.35vw, 15px) !important;
    letter-spacing: 0.024em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(7.5px, 1.3vw, 8.8px) !important;
    letter-spacing: 0.018em !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    gap: 8px !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .about-row{
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    order: 2 !important;
    justify-content: flex-end !important;
    justify-self: auto !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack .mobile-style-toggle{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 1 !important;
    align-self: center !important;
    justify-self: auto !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 0 !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 82px !important;
    margin-top: 0 !important;
    margin-right: 100% !important;
    align-self: flex-start !important;
    justify-content: center !important;
  }
}


/* ========================================================================== 
   v262: narrow landscape header single-row hardening
   - Keep the top header on one overall row for narrow landscape windows,
     including browser responsive resizing where coarse-pointer media queries
     may not apply.
   - Stack the brand title and tagline vertically inside the left block so the
     title can stay readable without pushing the action buttons onto a second
     row.
   - Keep the change scoped to short landscape viewports only.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  html body header#siteHeader.site-header{
    padding: 6px 10px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .header-left{
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .brand-copy{
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body header#siteHeader.site-header .brand-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(13px, 2.7vw, 18px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .tagline{
    display: block !important;
    font-size: clamp(8px, 1.6vw, 10px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html body header#siteHeader.site-header .about-row{
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    order: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 0 !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 520px){
  html body header#siteHeader.site-header{
    padding: 6px 8px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 20px !important;
    height: 20px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(12.5px, 3.15vw, 16px) !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(7.5px, 1.7vw, 9px) !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 390px){
  html body header#siteHeader.site-header .brand-lockup{
    gap: 5px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 18px !important;
    height: 18px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(12px, 3.45vw, 14px) !important;
    letter-spacing: 0.022em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(7px, 1.85vw, 8px) !important;
    letter-spacing: 0.012em !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
}

/* ========================================================================== 
   v262: universal narrow-landscape single-row header lock
   - Keep the top header on one overall row during responsive browser shrinking,
     not only on touch devices.
   - Preserve a larger, more readable title by letting the tagline absorb more
     of the compression first.
   - Keep Settings/About compact and on the same row without forcing a second
     line under the brand block.
   ========================================================================== */
@media (orientation: landscape) and (max-width: 980px),
       (orientation: landscape) and (max-height: 520px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(15px, 2.45vw, 20px);
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.theme-light body[data-glass-headers="1"] header#siteHeader.site-header,
  body[data-glass-headers="1"] header#siteHeader.site-header{
    padding-bottom: calc(5px + 10px) !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: none !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }

  html body header#siteHeader.site-header .header-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 7px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-copy{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    row-gap: 1px !important;
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: clamp(22px, 2.35vw, 27px) !important;
    height: clamp(22px, 2.35vw, 27px) !important;
    flex: 0 0 clamp(22px, 2.35vw, 27px) !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 100% !important;
    height: auto !important;
  }

  html body header#siteHeader.site-header .brand{
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(15px, 2.45vw, 20px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.032em !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .tagline{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(9px, 1.12vw, 11px) !important;
    line-height: 1 !important;
    letter-spacing: 0.032em !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body header#siteHeader.site-header .header-actions .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .about-row{
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    justify-self: auto !important;
    align-items: center !important;
    order: 2 !important;
  }

  html body header#siteHeader.site-header .header-actions .mobile-style-toggle,
  html body header#siteHeader.site-header .header-actions--title-stack .mobile-style-toggle{
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    order: 1 !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 28px !important;
    height: auto !important;
    padding: 4px 10px !important;
    font-size: clamp(10px, 1.04vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 4px !important;
  }
}

@media (orientation: landscape) and (max-width: 760px),
       (orientation: landscape) and (max-height: 440px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(14px, 2.75vw, 18px);
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(14px, 2.75vw, 18px) !important;
    letter-spacing: 0.026em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8.5px, 1.18vw, 10px) !important;
    letter-spacing: 0.026em !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 26px !important;
    padding: 3px 8px !important;
    font-size: clamp(9.5px, 0.98vw, 11px) !important;
  }
}

/* v262: vote pages, remove the light-theme blue back glow on detail pills/buttons
   and use a cleaner, more noticeable blue outline instead. */
html.theme-light body[data-page-kind="episode"] .episode-context-item{
  border-color: rgba(11,79,191,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,248,255,0.95));
  box-shadow:
    0 10px 22px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

@media (pointer: fine) {
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:focus-visible{
    border-color: rgba(11,79,191,0.56);
    box-shadow:
      0 12px 24px rgba(15,23,42,0.12),
      inset 0 1px 0 rgba(255,255,255,0.86);
  }
}

html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn),
html.theme-light body[data-page-kind="album"] .vote-info-btn,
html.theme-light body[data-page-kind="season"] .vote-info-btn{
  border-color: rgba(11,79,191,0.46);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243,247,255,0.95));
  box-shadow:
    0 10px 22px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.84);
}

html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::before,
html.theme-light body[data-page-kind="album"] .vote-info-btn::before,
html.theme-light body[data-page-kind="season"] .vote-info-btn::before{
  inset: 0;
  background: none;
  filter: none;
  opacity: 0;
  transform: none;
}

html.theme-light body[data-page-kind="episode"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="character"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="arc"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="videos"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="album"] .vote-info-btn.aiowiki-btn,
html.theme-light body[data-page-kind="season"] .vote-info-btn.aiowiki-btn{
  border-color: rgba(11,79,191,0.50);
}

html.theme-light body[data-page-kind="episode"] .vote-btn,
html.theme-light body[data-page-kind="character"] .vote-btn,
html.theme-light body[data-page-kind="arc"] .vote-btn,
html.theme-light body[data-page-kind="elsewhere"] .vote-btn,
html.theme-light body[data-page-kind="videos"] .vote-btn{
  border-color: rgba(11,79,191,0.54);
}

@media (pointer: fine) {
  html.theme-light body[data-page-kind="episode"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="character"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="character"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="arc"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="arc"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="videos"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="videos"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="album"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="album"] .vote-info-btn:focus-visible,
  html.theme-light body[data-page-kind="season"] .vote-info-btn:hover:not(:active),
  html.theme-light body[data-page-kind="season"] .vote-info-btn:focus-visible{
    border-color: rgba(11,79,191,0.58);
    box-shadow:
      0 12px 24px rgba(15,23,42,0.12),
      inset 0 1px 0 rgba(255,255,255,0.86);
  }

  html.theme-light body[data-page-kind="episode"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="character"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="character"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="arc"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="arc"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="elsewhere"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="elsewhere"] .vote-btn:focus-visible,
  html.theme-light body[data-page-kind="videos"] .vote-btn:hover:not(:active),
  html.theme-light body[data-page-kind="videos"] .vote-btn:focus-visible{
    border-color: rgba(11,79,191,0.64);
    box-shadow:
      0 12px 24px rgba(15,23,42,0.12),
      inset 0 1px 0 rgba(255,255,255,0.88);
  }
}

html.theme-light body[data-page-kind="episode"] .vote-info-btn:active,
html.theme-light body[data-page-kind="character"] .vote-info-btn:active,
html.theme-light body[data-page-kind="arc"] .vote-info-btn:active,
html.theme-light body[data-page-kind="elsewhere"] .vote-info-btn:active,
html.theme-light body[data-page-kind="videos"] .vote-info-btn:active,
html.theme-light body[data-page-kind="album"] .vote-info-btn:active,
html.theme-light body[data-page-kind="season"] .vote-info-btn:active,
html.theme-light body[data-page-kind="episode"] .vote-btn:active,
html.theme-light body[data-page-kind="character"] .vote-btn:active,
html.theme-light body[data-page-kind="arc"] .vote-btn:active,
html.theme-light body[data-page-kind="elsewhere"] .vote-btn:active,
html.theme-light body[data-page-kind="videos"] .vote-btn:active{
  box-shadow:
    0 8px 18px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

/* ========================================================================== 
   v262: Apply theme Title text color to the site header brand text
   - Ensures Admin "Title text color" settings affect the site title (brand)
   - Does not affect tab link colors
   ========================================================================== */
html.theme-dark header .brand-lockup{
  color: var(--title-text-color-dark, #f4f7fb);
}

html.theme-dim header .brand-lockup{
  color: var(--title-text-color-dim, #f4f7fb);
}

html.theme-light header .brand-lockup{
  color: var(--title-text-color-light, #1d2430);
}

/* ========================================================================== 
   v263: Apply theme Tabs text color to main sidebar nav links in all themes
   - Ensures Admin "Tabs text color" settings affect the public main nav tabs
   - Leaves existing hover/active backgrounds and other nav styling unchanged
   ========================================================================== */
html.theme-light body > .container > nav > a,
html.theme-light body > .container > nav > a:hover,
html.theme-light body > .container > nav > a:focus-visible,
html.theme-light body > .container > nav > a.active,
html.theme-light body > .container > nav > a.active:hover,
html.theme-light body > .container > nav > a.active:focus-visible,
html.theme-dim body > .container > nav > a,
html.theme-dim body > .container > nav > a:hover,
html.theme-dim body > .container > nav > a:focus-visible,
html.theme-dim body > .container > nav > a.active,
html.theme-dim body > .container > nav > a.active:hover,
html.theme-dim body > .container > nav > a.active:focus-visible,
html.theme-dark body > .container > nav > a,
html.theme-dark body > .container > nav > a:hover,
html.theme-dark body > .container > nav > a:focus-visible,
html.theme-dark body > .container > nav > a.active,
html.theme-dark body > .container > nav > a.active:hover,
html.theme-dark body > .container > nav > a.active:focus-visible{
  color: var(--tabs-text-color);
}
/* ========================================================================== 
   v264: Keep theme Tabs text color authoritative for tab links in all themes
   - Fixes remaining light-theme override from generic anchor color rules
   - Applies only to tab-style navigation targets, leaving other links alone
   ========================================================================== */
html.theme-light header nav a,
html.theme-light header nav a:hover,
html.theme-light header nav a:focus-visible,
html.theme-light .tab-switch a,
html.theme-light .tab-switch a:hover,
html.theme-light .tab-switch a:focus-visible,
html.theme-light .tab-switch a.active,
html.theme-light .tab-switch a.active:hover,
html.theme-light .tab-switch a.active:focus-visible,
html.theme-light body > .container > nav > a,
html.theme-light body > .container > nav > a:hover,
html.theme-light body > .container > nav > a:focus-visible,
html.theme-light body > .container > nav > a.active,
html.theme-light body > .container > nav > a.active:hover,
html.theme-light body > .container > nav > a.active:focus-visible,
html.theme-dim header nav a,
html.theme-dim header nav a:hover,
html.theme-dim header nav a:focus-visible,
html.theme-dim .tab-switch a,
html.theme-dim .tab-switch a:hover,
html.theme-dim .tab-switch a:focus-visible,
html.theme-dim .tab-switch a.active,
html.theme-dim .tab-switch a.active:hover,
html.theme-dim .tab-switch a.active:focus-visible,
html.theme-dim body > .container > nav > a,
html.theme-dim body > .container > nav > a:hover,
html.theme-dim body > .container > nav > a:focus-visible,
html.theme-dim body > .container > nav > a.active,
html.theme-dim body > .container > nav > a.active:hover,
html.theme-dim body > .container > nav > a.active:focus-visible,
html.theme-dark header nav a,
html.theme-dark header nav a:hover,
html.theme-dark header nav a:focus-visible,
html.theme-dark .tab-switch a,
html.theme-dark .tab-switch a:hover,
html.theme-dark .tab-switch a:focus-visible,
html.theme-dark .tab-switch a.active,
html.theme-dark .tab-switch a.active:hover,
html.theme-dark .tab-switch a.active:focus-visible,
html.theme-dark body > .container > nav > a,
html.theme-dark body > .container > nav > a:hover,
html.theme-dark body > .container > nav > a:focus-visible,
html.theme-dark body > .container > nav > a.active,
html.theme-dark body > .container > nav > a.active:hover,
html.theme-dark body > .container > nav > a.active:focus-visible{
  color: var(--tabs-text-color);
}

/* ========================================================================== 
   v265: Optional inactive tab text colors for the main public sidebar nav
   - Adds Admin-configurable non-highlighted tab text colors per theme
   - Preserves current defaults when the new settings are left blank
   - Leaves active/highlighted tab text and other surfaces unchanged
   ========================================================================== */
html.theme-light body > .container > nav > a:not(.active),
html.theme-light body > .container > nav > a:not(.active):hover,
html.theme-light body > .container > nav > a:not(.active):focus-visible{
  color: var(--tabs-inactive-text-color-light, #48607c);
}

html.theme-dim body > .container > nav > a:not(.active),
html.theme-dim body > .container > nav > a:not(.active):hover,
html.theme-dim body > .container > nav > a:not(.active):focus-visible{
  color: var(--tabs-inactive-text-color-dim, #A0AEC0);
}

html.theme-dark body > .container > nav > a:not(.active),
html.theme-dark body > .container > nav > a:not(.active):hover,
html.theme-dark body > .container > nav > a:not(.active):focus-visible{
  color: var(--tabs-inactive-text-color-dark, #CBD5E0);
}


/* ========================================================================== 
   v266: landscape header single-row scaling restore
   - Keep the narrow landscape top header on one row during browser resizing.
   - Let the title stay larger before it scales down.
   - Keep Settings and About compact so they stay on the first row.
   ========================================================================== */
@media (orientation: landscape) and (max-width: 1180px),
       (orientation: landscape) and (max-height: 620px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(16px, 2.85vw, 23px);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.theme-light body[data-glass-headers="1"] header#siteHeader.site-header,
  body[data-glass-headers="1"] header#siteHeader.site-header{
    padding-bottom: calc(6px + 10px) !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .header-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 7px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .brand-copy{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body header#siteHeader.site-header .brand-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    row-gap: 1px !important;
    min-width: 0 !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: clamp(24px, 2.5vw, 30px) !important;
    height: clamp(24px, 2.5vw, 30px) !important;
    flex: 0 0 clamp(24px, 2.5vw, 30px) !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 100% !important;
    height: auto !important;
  }

  html body header#siteHeader.site-header .brand{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(16px, 2.85vw, 23px) !important;
    line-height: 0.99 !important;
    letter-spacing: 0.034em !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .tagline{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(9px, 1.12vw, 11px) !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
    gap: 7px !important;
    transform: none !important;
  }

  html body header#siteHeader.site-header .header-actions .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .about-row{
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    justify-self: auto !important;
    align-items: center !important;
    order: 2 !important;
  }

  html body header#siteHeader.site-header .header-actions .mobile-style-toggle,
  html body header#siteHeader.site-header .header-actions--title-stack .mobile-style-toggle{
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    order: 1 !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 28px !important;
    height: auto !important;
    padding: 4px 10px !important;
    font-size: clamp(10.5px, 1.02vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
}

@media (orientation: landscape) and (max-width: 760px),
       (orientation: landscape) and (max-height: 460px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(15px, 3vw, 20px);
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 8px !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(15px, 3vw, 20px) !important;
    letter-spacing: 0.03em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8.5px, 1.24vw, 10px) !important;
    letter-spacing: 0.028em !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: clamp(10px, 0.98vw, 11px) !important;
  }
}


/* ========================================================================== 
   v263: universal narrow-portrait single-row header lock
   - Mirror the responsive single-row header behavior in portrait mode too,
     not only on touch devices.
   - Keep the site title larger and readable while letting the tagline compress
     first.
   - Keep Settings/About on the same top row and scale them down cleanly.
   ========================================================================== */
@media (orientation: portrait) and (max-width: 680px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(15px, 4.7vw, 19px);
    padding-top: 6px !important;
    padding-bottom: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: none !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 3px !important;
  }

  html body header#siteHeader.site-header .header-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-copy{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    row-gap: 1px !important;
    min-width: 0 !important;
    margin-top: 1px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 100% !important;
    height: auto !important;
  }

  html body header#siteHeader.site-header .brand{
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(15px, 4.7vw, 19px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .tagline{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(9px, 2.45vw, 11px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.032em !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    gap: 5px !important;
    transform: none !important;
  }

  html body header#siteHeader.site-header .header-actions .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .about-row{
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    justify-self: auto !important;
    align-items: center !important;
    order: 2 !important;
  }

  html body header#siteHeader.site-header .header-actions .mobile-style-toggle,
  html body header#siteHeader.site-header .header-actions--title-stack .mobile-style-toggle{
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    order: 1 !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 26px !important;
    height: auto !important;
    padding: 3px 8px !important;
    font-size: clamp(10px, 2.35vw, 11px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
  }
}

@media (orientation: portrait) and (max-width: 420px){
  html body header#siteHeader.site-header{
    --site-brand-size: clamp(14px, 4.55vw, 18px);
    padding-top: 5px !important;
    padding-bottom: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 5px !important;
    row-gap: 3px !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 5px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(14px, 4.55vw, 18px) !important;
    letter-spacing: 0.036em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8.5px, 2.25vw, 10.5px) !important;
    letter-spacing: 0.028em !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 25px !important;
    padding: 3px 7px !important;
    font-size: clamp(9.5px, 2.25vw, 10.5px) !important;
  }
}


/* ========================================================================== 
   v267: responsive single-row header correction
   - Fix the mid-size breakpoint where the top header falls to two rows before
     collapsing back to one row again.
   - Keep the title block and the Settings/About buttons on one overall row in
     both portrait and landscape while preserving the expandable controls row.
   - Override only the narrow responsive header layout rules.
   ========================================================================== */
@media (max-width: 760px){
  html body header#siteHeader.site-header{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body header#siteHeader.site-header .site-header-inner{
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .header-left{
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-copy{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body header#siteHeader.site-header .brand-row{
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  html body header#siteHeader.site-header .brand{
    min-width: 0 !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    letter-spacing: 0.036em !important;
  }

  html body header#siteHeader.site-header .tagline{
    min-width: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(8.4px, 1.9vw, 9.8px) !important;
    letter-spacing: 0.028em !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    justify-items: end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
  }

  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    grid-template-columns: auto auto !important;
  }

  html body header#siteHeader.site-header .header-actions:not(.header-actions--with-about),
  html body header#siteHeader.site-header .header-actions--title-stack:not(.header-actions--with-about){
    grid-template-columns: auto !important;
  }

  html body header#siteHeader.site-header .header-actions .about-row,
  html body header#siteHeader.site-header .header-actions--title-stack .about-row{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  html body header#siteHeader.site-header .header-actions .mobile-style-toggle,
  html body header#siteHeader.site-header .header-actions--title-stack .mobile-style-toggle{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 26px !important;
    padding: 3px 8px !important;
    font-size: clamp(10px, 1.9vw, 11px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: end !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 520px){
  html body header#siteHeader.site-header .site-header-inner{
    column-gap: 6px !important;
  }

  html body header#siteHeader.site-header .brand-lockup{
    gap: 5px !important;
  }

  html body header#siteHeader.site-header .brand-mark{
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  html body header#siteHeader.site-header .brand-mark img{
    width: 24px !important;
    height: auto !important;
  }

  html body header#siteHeader.site-header .brand{
    font-size: clamp(13.5px, 4.35vw, 16.5px) !important;
    letter-spacing: 0.032em !important;
  }

  html body header#siteHeader.site-header .tagline{
    font-size: clamp(8px, 2.15vw, 9.2px) !important;
    letter-spacing: 0.022em !important;
  }

  html body header#siteHeader.site-header .header-actions,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions--title-stack,
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about{
    column-gap: 5px !important;
  }

  html body header#siteHeader.site-header .mobile-style-toggle,
  html body header#siteHeader.site-header .about-btn{
    min-height: 25px !important;
    padding: 3px 7px !important;
    font-size: clamp(9.5px, 2.2vw, 10.5px) !important;
  }
}

/* ========================================================================== 
   v262a: keep Settings left of About during responsive shrinking
   - Lock the top-row action order so Settings stays on the left and About
     stays on the right as the header crosses mobile/narrow breakpoints.
   - Keep the existing open controls row behavior unchanged.
   ========================================================================== */
@media (max-width: 980px){
  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about{
    display: contents !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .mobile-style-toggle,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about .mobile-style-toggle{
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .about-row,
  html body header#siteHeader.site-header .header-actions.header-actions--with-about .about-row{
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    order: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body header#siteHeader.site-header .header-actions--title-stack.header-actions--with-about .mobile-style-controls:not([hidden]),
  html body header#siteHeader.site-header .header-actions.header-actions--with-about .mobile-style-controls:not([hidden]){
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}


/* ========================================================================== 
   v268: narrow portrait header settings grid alignment fix
   - Restore the intended 2x2 Settings grid on touch/mobile portrait widths.
   - Prevent older motion/theme-only overrides from overlapping UI Scale and
     High Contrast after the newer accessibility controls were added.
   - Keep this scoped to the expanded header controls only.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .motion-select,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .theme-select,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover.enhanced .select-display{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ========================================================================== 
   v262: touch-width public list badge parity
   - Extend the compact mobile-style public list treatment to the remaining
     list tabs on coarse-pointer devices up to iPad-class widths.
   - Keep desktop fine-pointer layouts unchanged.
   - Reuse the existing compact under-title badges instead of introducing
     any new markup or visual system.
   ========================================================================== */
@media (hover: none) and (pointer: coarse){
  .public-list-page--episodes .episodes-table .row-meta,
  .public-list-page--characters .characters-table .row-meta,
  .public-list-page--elsewhere .elsewhere-table .row-meta,
  .public-list-page--videos .elsewhere-table .row-meta,
  .public-list-page--arcs .arcs-table .row-meta,
  .public-list-page--seasons .seasons-table .row-meta{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    row-gap:6px;
  }

  /* Episodes: keep #, Title, and Rating visible; move Album/Votes/AIOWiki
     into the compact badge row under the title. */
  .public-list-page--episodes .episodes-table .badge-episode-rating{
    display:none;
  }

  .public-list-page--episodes .episodes-table .badge-episode-album{
    display:inline-flex;
    flex:0 1 auto;
    width:auto;
    min-width:0;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6){
    display:none;
  }

  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  /* Characters: match the compact touch layout and hide the redundant Vote
     button once the row switches to badge mode. */
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6){
    display:none;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--characters .characters-table .character-list-vote{
    display:none;
  }

  /* Elsewhere: keep Thumb, Title, and Rating visible. */
  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6){
    display:none;
  }

  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  /* Videos: same compact touch treatment as Elsewhere. */
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6){
    display:none;
  }

  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  /* Arcs: keep Story/Character visible as compact type badges under Title. */
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:none;
  }

  .public-list-page--arcs .arcs-table th:nth-child(1),
  .public-list-page--arcs .arcs-table td:nth-child(1){
    padding-left:42px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  /* Club Seasons: match the Albums touch-width safeguard so the compact
     under-title badges carry votes and episode count at iPad-class widths. */
  .public-list-page--seasons .seasons-table .badge-season-number{
    display:none;
  }

  .public-list-page--seasons .seasons-table .seasons-col-thumb{
    width:104px;
  }

  .public-list-page--seasons .seasons-table .seasons-col-title{
    width:auto;
  }

  .public-list-page--seasons .seasons-table .seasons-col-rating{
    width:120px;
  }

  .public-list-page--seasons .seasons-table .seasons-col-votes,
  .public-list-page--seasons .seasons-table .seasons-col-episodes,
  .public-list-page--seasons .seasons-table .seasons-col-aiowiki{
    width:0;
  }

  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5){
    display:none;
  }

  .public-list-page--seasons .seasons-table th:nth-child(3),
  .public-list-page--seasons .seasons-table td:nth-child(3){
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }
}

/* ========================================================================== 
   v263: Episodes mobile album/season badge hard ellipsis fix
   - Keep the change scoped to the Episodes public list on touch/mobile widths.
   - Force the under-title Album/Season badge to shrink within the title cell
     so it ellipses instead of visually running under the Rating column.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 680px){
  .public-list-page--episodes .episodes-table td:nth-child(2),
  .public-list-page--episodes .episodes-table td:nth-child(2) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(2) .row-title-line,
  .public-list-page--episodes .episodes-table td:nth-child(2) .row-meta.row-meta--compact-badges-mobile{
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-album,
  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-season{
    display: inline-flex;
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-album .badge-text,
  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-season .badge-text{
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ========================================================================== 
   v264: Seasons touch badge clearance tweak
   - Lower the compact Seasons under-title badges slightly on coarse-pointer
     layouts so they clear the rating meter without changing other tabs.
   ========================================================================== */
@media (hover: none) and (pointer: coarse){
  .public-list-page--seasons .seasons-table .row-meta{
    margin-top: 27px;
    align-items: flex-start;
  }
}

/* ========================================================================== 
   v265: Mobile portrait main nav organization guard
   - Keep the top-level public nav organized on narrow portrait widths.
   - Do not rely on pointer/hover detection since emulation and hybrid devices
     can report fine pointers even at phone sizes.
   - Pack grid rows at the top so the nav never creates huge vertical gaps.
   ========================================================================== */
@media (max-width: 680px) and (orientation: portrait){
  body > .container{
    flex-direction: column;
  }

  body > .container > nav{
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #222;
    padding: 10px 12px;
    height: auto;
    align-content: start;
    display: grid;
    grid-template-columns: 36px repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    box-sizing: border-box;
  }

  body > .container > nav > .random-article-dice{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: start;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
  }

  body > .container > nav > a{
    display: inline-flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    box-sizing: border-box;
  }

  body > .container > main{
    padding: 12px;
  }
}

@media (max-width: 420px) and (orientation: portrait){
  body > .container > nav{
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
  }

  body > .container > nav > .random-article-dice{
    width: 32px;
    height: 32px;
  }

  body > .container > nav > a{
    padding: 9px 10px;
    font-size: 0.96rem;
  }
}


/* ========================================================================== 
   v266: Phone portrait main nav spacing fix
   - Replace the phone portrait nav grid with a wrapped flex layout so rows pack
     naturally and never develop large empty vertical gaps.
   - Keep the dice pinned at the left of the first row and let tabs fill the
     remaining width in compact two-up rows, collapsing to one-per-row only if
     needed.
   - Scope only to narrow portrait widths.
   ========================================================================== */
@media (max-width: 680px) and (orientation: portrait){
  body > .container > nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 8px;
  }

  body > .container > nav > .random-article-dice{
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
    margin: 0;
  }

  body > .container > nav > a:not(.random-article-dice){
    flex: 1 1 calc(50% - 12px);
    min-width: 136px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }
}

@media (min-width: 561px) and (max-width: 680px) and (orientation: portrait){
  body > .container > nav > a:not(.random-article-dice){
    flex-basis: calc(50% - 8px);
  }
}

@media (max-width: 420px) and (orientation: portrait){
  body > .container > nav > a:not(.random-article-dice){
    flex-basis: calc(100% - 44px);
    min-width: 0;
  }
}


/* ========================================================================== 
   v269: always keep site tagline below the site title
   - Force the header brand copy to stack vertically on all viewport sizes.
   - Keep the existing responsive sizing and truncation behavior intact.
   - Do not change header actions or any unrelated layout rules.
   ========================================================================== */
html body header#siteHeader.site-header .brand-copy{
  display: block !important;
  min-width: 0 !important;
}

html body header#siteHeader.site-header .brand-row{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body header#siteHeader.site-header .brand{
  display: block !important;
  max-width: 100% !important;
}

html body header#siteHeader.site-header .tagline{
  display: block !important;
  max-width: 100% !important;
}


/* ========================================================================== 
   v269: media-only night light slider
   - Add a saved Settings slider that warms and gently dims only images/videos.
   - Keep the scope out of the header chrome and text UI.
   - Preserve the existing Settings layout by spanning the slider full width.
   ========================================================================== */
:root{
  --aiowiki-media-viewer-filter: none;
}

.media-comfort-control{
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.media-comfort-control__label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: inherit;
}

.media-comfort-control__value{
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

.media-comfort-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent, #1d6fe3);
  cursor: pointer;
  touch-action: pan-x;
}

.media-comfort-slider::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
}

.media-comfort-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

.media-comfort-slider::-moz-range-track{
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
}

.media-comfort-slider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

html.theme-light .media-comfort-control{
  border-color: rgba(30,41,59,0.14);
  background: rgba(255,255,255,0.78);
}

html.theme-light .media-comfort-slider::-webkit-slider-runnable-track{
  background: rgba(100,116,139,0.34);
}

html.theme-light .media-comfort-slider::-webkit-slider-thumb{
  border-color: rgba(15,23,42,0.14);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15,23,42,0.18);
}

html.theme-light .media-comfort-slider::-moz-range-track{
  background: rgba(100,116,139,0.34);
}

html.theme-light .media-comfort-slider::-moz-range-thumb{
  border-color: rgba(15,23,42,0.14);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15,23,42,0.18);
}

@media (hover: none) and (pointer: coarse){
  .media-comfort-control{
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .media-comfort-slider{
    height: 34px;
  }

  .media-comfort-slider::-webkit-slider-runnable-track{
    height: 12px;
  }

  .media-comfort-slider::-webkit-slider-thumb{
    width: 28px;
    height: 28px;
    margin-top: -8px;
  }

  .media-comfort-slider::-moz-range-track{
    height: 12px;
  }

  .media-comfort-slider::-moz-range-thumb{
    width: 28px;
    height: 28px;
  }
}

body main img,
body main video,
body main picture img,
body main a img,
body main .thumb:is(img, video),
body .about-image,
body .about-image img,
body .about-image video{
  filter: var(--aiowiki-media-viewer-filter) !important;
  transition: filter 160ms ease;
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-row: 3 !important;
  }
}

.custom-page-html-frame{
  display:block;
  width:100%;
  min-height:70vh;
  border:0;
  background:transparent;
}

/* ========================================================================== 
   v262: Public vote detail title alignment across themes
   - Keep vote-page titles on the same centered width in dark, dim, and light.
   - Give dark and dim title panels the same subtle bordered treatment.
   ========================================================================== */
body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
body[data-page-kind="character"] .page-characters-detail .character-title-panel{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 14px 20px;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
}

body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel h1,
body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel h1,
body[data-page-kind="videos"] .page-videos-detail .videos-title-panel h1,
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel h1,
body[data-page-kind="character"] .page-characters-detail .character-title-panel h1{
  margin: 0;
}

html.theme-dark body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
html.theme-dark body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
html.theme-dark body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
html.theme-dark body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
html.theme-dark body[data-page-kind="character"] .page-characters-detail .character-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(29,111,227,0.20), transparent 62%),
    linear-gradient(180deg, rgba(18,22,33,0.94), rgba(15,17,22,0.94));
  border: 1px solid rgba(43,52,68,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.28);
}

html.theme-dim body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
html.theme-dim body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
html.theme-dim body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
html.theme-dim body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
html.theme-dim body[data-page-kind="character"] .page-characters-detail .character-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(99,179,237,0.14), transparent 62%),
    linear-gradient(180deg, rgba(27,31,39,0.96), rgba(24,28,36,0.96));
  border: 1px solid #2f3847;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.20);
}

html.theme-light body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
html.theme-light body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
html.theme-light body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
html.theme-light body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
html.theme-light body[data-page-kind="character"] .page-characters-detail .character-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(29,111,227,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(241,247,255,0.82));
  border: 1px solid rgba(109,139,200,0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 10px 24px rgba(16,24,40,0.08);
}

@media (max-width: 820px){
  body[data-page-kind="episode"] .page-episodes-detail .episode-title-panel,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-title-panel,
  body[data-page-kind="videos"] .page-videos-detail .videos-title-panel,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-title-panel,
  body[data-page-kind="character"] .page-characters-detail .character-title-panel{
    padding: 10px 12px;
    border-radius: 16px;
  }
}



/* ========================================================================== 
   v262b: Light vote detail title backdrop alignment fix
   - The optional light-mode vote backdrop rule is more specific than the
     shared title-panel alignment rule. When enabled, it was overriding the
     centered margin and smaller side padding only on color-backed titles.
   - Reapply the shared title-panel geometry for that optional backdrop state
     without changing the color treatment or the rest of the vote layout.
   ========================================================================== */
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail .episode-title-panel,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail .episode-title-panel,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail .videos-title-panel{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 14px 20px;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 820px){
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail .episode-title-panel,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail .episode-title-panel,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail .videos-title-panel{
    padding: 10px 12px;
  }
}

/* ========================================================================== 
   v263: Light detail title colored-backdrop alignment hardening
   - Keep color-backed title panels on the same centered geometry as their
     uncolored state.
   - This intentionally touches only the title-panel box sizing, margin,
     padding, and flex alignment for light-mode colored backdrops.
   ========================================================================== */
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel,
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 14px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: flex-end !important;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel h1,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel h1,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel h1,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel h1,
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel h1{
  margin: 0 !important;
}

@media (max-width: 820px){
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel,
  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel,
  html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel{
    padding: 10px 12px !important;
    border-radius: 16px;
  }
}


/* ========================================================================== 
   v264b: All public vote detail title colored-backdrop alignment hardening
   - Extends the light-mode colored title alignment fix to every public tab
     detail/vote page, including Albums and Club Seasons.
   - Keeps the colored state on the same centered geometry as the uncolored
     state without changing backdrop colors or the rest of the page layout.
   ========================================================================== */
html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel,
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .page-album-detail > .album-title-panel,
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .page-seasons-detail > .season-title-panel,
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-title-panel,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .episode-title-panel,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 14px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: flex-end !important;
}

html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel h1,
html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .page-album-detail > .album-title-panel h1,
html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .page-seasons-detail > .season-title-panel h1,
html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel h1,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-title-panel h1,
html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel h1,
html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel h1,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .episode-title-panel h1,
html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel h1{
  margin: 0 !important;
}

@media (max-width: 820px){
  html.theme-light body[data-page-kind="episode"][data-episode-vote-backdrop-light="1"] .page-episodes-detail > .episode-title-panel,
  html.theme-light body[data-page-kind="album"][data-album-backdrop-light="1"] .page-album-detail > .album-title-panel,
  html.theme-light body[data-page-kind="season"][data-season-backdrop-light="1"] .page-seasons-detail > .season-title-panel,
  html.theme-light body[data-page-kind="character"][data-character-backdrop-light="1"] .page-characters-detail > .character-title-panel,
  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-title-panel,
  html.theme-light body[data-page-kind="arc"][data-arc-backdrop-light="1"] .page-arcs-detail > .arc-detail-title-panel,
  html.theme-light body[data-page-kind="elsewhere"][data-episode-vote-backdrop-light="1"] .page-elsewhere-detail > .episode-title-panel,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .episode-title-panel,
  html.theme-light body[data-page-kind="videos"][data-episode-vote-backdrop-light="1"] .page-videos-detail > .videos-title-panel{
    padding: 10px 12px !important;
    border-radius: 16px;
  }
}

/* 2026-04-25: keep the custom 404 image and home button centered. */
.custom404-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.custom404-img{
  width: auto;
  max-width: min(100%, 900px);
  max-height: min(70vh, 760px);
  object-fit: contain;
  margin: 0 auto;
}
.custom404-home{
  display: flex;
  width: fit-content;
  min-width: 220px;
  justify-content: center;
  text-align: center;
  margin: 0 auto 12px auto;
}
@media (max-width: 700px){
  .custom404-img{
    max-height: 60vh;
  }
  .custom404-home{
    width: min(100%, 280px);
  }
}
/* Desktop public list/detail row hover accent: mirror the main sidebar tab left highlight without changing mobile/touch layouts. */
@media (min-width: 681px) and (pointer: fine){
  .public-list-page .data-table tbody tr.row-link:hover:not(:active) td:first-child,
  .public-list-page .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  .album-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  .season-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  .arc-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child{
    box-shadow: inset 3px 0 0 var(--main-site-nav-accent, #63B3ED) !important;
  }
  html.theme-light .public-list-page .data-table tbody tr.row-link:hover:not(:active) td:first-child,
  html.theme-light .public-list-page .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  html.theme-light .album-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  html.theme-light .season-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child,
  html.theme-light .arc-detail-table .episodes-table tbody tr.row-link:hover:not(:active) td:first-child{
    box-shadow: inset 3px 0 0 #2b7be8 !important;
  }
}


/* ========================================================================== 
   v270: Light-mode hover shimmer tuning and detail pill alignment
   - Tunes the light-mode hover shimmer to a medium-soft strength.
   - Uses the same light-mode shimmer overlay for the Episode detail Album/Season
     context pill, Vote info pill, AIOWiki pill, and regular button controls.
   - Leaves dark/dim mode shimmer strength unchanged.
   ========================================================================== */
html.theme-light{
  --btn-shimmer-light-alpha: 0.20;
  --btn-shimmer-light-white-alpha: 0.10;
}

html.theme-light :is(.btn, button, .btn-ghost, .filter-chip):not(.select-display):not(.input-clear-btn)::after,
html.theme-light .episode-context-item::after{
  background:
    linear-gradient(115deg,
      transparent 36%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 49%,
      rgba(255,255,255, var(--btn-shimmer-light-white-alpha)) 52%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 55%,
      transparent 68%);
  filter: none;
}

html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="album"] .vote-info-btn::after,
html.theme-light body[data-page-kind="season"] .vote-info-btn::after,
html.theme-light body[data-page-kind="episode"] .episode-context-item::after{
  background:
    linear-gradient(115deg,
      transparent 36%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 49%,
      rgba(255,255,255, var(--btn-shimmer-light-white-alpha)) 52%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 55%,
      transparent 68%);
  filter: none;
}

@media (pointer: fine){
  html.theme-light :is(.btn, button, .btn-ghost, .filter-chip):not(.select-display):not(.input-clear-btn):hover:not(:active)::after,
  html.theme-light .episode-context-item[href]:hover:not(:active)::after,
  html.theme-light .episode-context-item[href]:focus-visible::after{
    opacity: 0.92;
  }
}


/* ========================================================================== 
   v271: stronger light-mode hover shimmer
   - Raises the light-mode shimmer from the medium-soft pass because it was
     still barely noticeable on hover.
   - Keeps the Album/Season episode context pill matched to the same shimmer
     as the other light-mode buttons.
   - Leaves dark and dim mode hover shimmer unchanged.
   ========================================================================== */
html.theme-light{
  --btn-shimmer-light-alpha: 0.34;
  --btn-shimmer-light-white-alpha: 0.16;
}

html.theme-light :is(.btn, button, .btn-ghost, .filter-chip):not(.select-display):not(.input-clear-btn)::after,
html.theme-light .episode-context-item::after,
html.theme-light body[data-page-kind="episode"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="character"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="arc"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="elsewhere"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="videos"] :is(.vote-info-btn, .vote-btn)::after,
html.theme-light body[data-page-kind="album"] .vote-info-btn::after,
html.theme-light body[data-page-kind="season"] .vote-info-btn::after{
  background:
    linear-gradient(115deg,
      transparent 32%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 47%,
      rgba(255,255,255, var(--btn-shimmer-light-white-alpha)) 51%,
      rgba(var(--btn-shimmer-rgb), var(--btn-shimmer-light-alpha)) 55%,
      transparent 70%);
  filter: drop-shadow(0 0 5px rgba(var(--btn-shimmer-rgb),0.14));
}

@media (pointer: fine){
  html.theme-light :is(.btn, button, .btn-ghost, .filter-chip):not(.select-display):not(.input-clear-btn):hover:not(:active)::after,
  html.theme-light .episode-context-item[href]:hover:not(:active)::after,
  html.theme-light .episode-context-item[href]:focus-visible::after{
    opacity: 1;
  }
}


/* ========================================================================== 
   v272: Admin-configurable public vote/detail text colors
   - Variables are only emitted when Admin Config > Text color has a value.
   - Dark variables apply to both Dark and Dim modes.
   ========================================================================== */
body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-card, .episode-detail-section, .episode-linked-card, .album-detail-card, .season-detail-card, .arc-detail-card, .arc-detail-section, .character-detail-card, .elsewhere-detail-card, .elsewhere-detail-section, .videos-detail-card, .videos-detail-section){
  color: var(--text-main-body-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-card, .episode-detail-section, .episode-linked-card, .album-detail-card, .season-detail-card, .arc-detail-card, .arc-detail-section, .character-detail-card, .elsewhere-detail-card, .elsewhere-detail-section, .videos-detail-card, .videos-detail-section){
  color: var(--text-main-body-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-stat-label, .episode-context-label, .detail-stat, .album-detail-stat-chip__label, .season-detail-stat-chip__label, .episode-detail-section b){
  color: var(--text-secondary-labels-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-stat-label, .episode-context-label, .detail-stat, .album-detail-stat-chip__label, .season-detail-stat-chip__label, .episode-detail-section b){
  color: var(--text-secondary-labels-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.muted, .vote-hint, .vote-summary-stat-note, .row-meta){
  color: var(--text-helper-microcopy-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.muted, .vote-hint, .vote-summary-stat-note, .row-meta){
  color: var(--text-helper-microcopy-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-eyebrow, summary > b, .episode-linked-card > div:first-child .muted){
  color: var(--text-section-heading-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-eyebrow, summary > b, .episode-linked-card > div:first-child .muted){
  color: var(--text-section-heading-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-title, .episode-context-value){
  color: var(--text-card-heading-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-title, .episode-context-value){
  color: var(--text-card-heading-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-stat-value, .rating-ring__text, .rating-meter__text, .album-detail-stat-chip__value, .season-detail-stat-chip__value){
  color: var(--text-large-value-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-summary-stat-value, .rating-ring__text, .rating-meter__text, .album-detail-stat-chip__value, .season-detail-stat-chip__value){
  color: var(--text-large-value-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.btn, .btn-ghost, .vote-info-btn, .aiowiki-btn, .episode-context-item){
  color: var(--text-button-pill-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.btn, .btn-ghost, .vote-info-btn, .aiowiki-btn, .episode-context-item){
  color: var(--text-button-pill-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn){
  color: var(--text-primary-action-dark, var(--text-button-pill-dark, currentColor));
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn){
  color: var(--text-primary-action-light, var(--text-button-pill-light, currentColor));
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.badge, .badge *, .badge-votes, .badge-votes *, .lb-cat-pill, .lb-cat-pill *, .ep-characters-count-pill, .ep-characters-count-pill *, .ep-arcs-count-pill, .ep-arcs-count-pill *){
  color: var(--text-badge-count-pill-dark, var(--lb-color, currentColor));
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.badge, .badge *, .badge-votes, .badge-votes *, .lb-cat-pill, .lb-cat-pill *, .ep-characters-count-pill, .ep-characters-count-pill *, .ep-arcs-count-pill, .ep-arcs-count-pill *){
  color: var(--text-badge-count-pill-light, var(--lb-color, currentColor));
}
body:is([data-page-kind="episode"],[data-page-kind="character"]) main#main :is(.ep-characters-count-pill, .ep-characters-count-pill > span, .ep-characters-count-pill .ep-characters-count-num, .ep-characters-count-pill .ep-characters-count-label, .char-episodes-count-pill, .char-episodes-count-pill > span, .char-episodes-count-pill .char-episodes-count-num, .char-episodes-count-pill .char-episodes-count-label, .char-videos-count-pill, .char-videos-count-pill > span, .char-videos-count-pill .char-videos-count-num, .char-videos-count-pill .char-videos-count-label){
  color: var(--text-character-count-pill-dark, var(--list-pill-characters-color, var(--text-badge-count-pill-dark, var(--lb-color, currentColor))));
}
html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"]) main#main :is(.ep-characters-count-pill, .ep-characters-count-pill > span, .ep-characters-count-pill .ep-characters-count-num, .ep-characters-count-pill .ep-characters-count-label, .char-episodes-count-pill, .char-episodes-count-pill > span, .char-episodes-count-pill .char-episodes-count-num, .char-episodes-count-pill .char-episodes-count-label, .char-videos-count-pill, .char-videos-count-pill > span, .char-videos-count-pill .char-videos-count-num, .char-videos-count-pill .char-videos-count-label){
  color: var(--text-character-count-pill-light, var(--list-pill-characters-color, var(--text-badge-count-pill-light, var(--lb-color, currentColor))));
}
body:is([data-page-kind="episode"],[data-page-kind="arc"]) main#main :is(.ep-arcs-count-pill, .ep-arcs-count-pill > span, .ep-arcs-count-pill .ep-arcs-count-num, .ep-arcs-count-pill .ep-arcs-count-label, .arc-episodes-count-pill, .arc-episodes-count-pill > span){
  color: var(--text-arc-count-pill-dark, var(--list-pill-arcs-color, var(--text-badge-count-pill-dark, var(--lb-color, currentColor))));
}
html.theme-light body:is([data-page-kind="episode"],[data-page-kind="arc"]) main#main :is(.ep-arcs-count-pill, .ep-arcs-count-pill > span, .ep-arcs-count-pill .ep-arcs-count-num, .ep-arcs-count-pill .ep-arcs-count-label, .arc-episodes-count-pill, .arc-episodes-count-pill > span){
  color: var(--text-arc-count-pill-light, var(--list-pill-arcs-color, var(--text-badge-count-pill-light, var(--lb-color, currentColor))));
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main a:not(.btn):not(.btn-ghost):not(.episode-context-item):not(.row-title){
  color: var(--text-hyperlink-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main a:not(.btn):not(.btn-ghost):not(.episode-context-item):not(.row-title){
  color: var(--text-hyperlink-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .vote-overlay-label{
  color: var(--text-slider-text-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .vote-overlay-label{
  color: var(--text-slider-text-light, currentColor);
}

body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-number, input.vote-number){
  color: var(--text-input-text-dark, currentColor);
}
html.theme-light body:is([data-page-kind="album"],[data-page-kind="season"],[data-page-kind="episode"],[data-page-kind="arc"],[data-page-kind="character"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-number, input.vote-number){
  color: var(--text-input-text-light, currentColor);
}


/* ==========================================================================
   v274: Admin config color/intensity organization
   - Moved paired intensity controls below matching hex color inputs for all
     color settings that have a directly paired intensity/brightness field.
   ========================================================================== */
.admin-config .cfg-inline-intensity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
}

.admin-config .cfg-inline-intensity__control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.admin-config .cfg-inline-intensity__label {
  font-weight: 700;
}

.admin-config .cfg-inline-intensity input[type="number"] {
  max-width: 120px;
}


/* ========================================================================== 
   v275: Style 1 soft-glass detail buttons
   - Replaces the stronger blue-filled detail button surfaces with a subtle
     frosted glass treatment in both dark/dim and light modes.
   - Applies only to detail-page Album/Season context pills, Vote info,
     AIOWiki, and primary Vote buttons.
   ========================================================================== */
body[data-page-kind="episode"] .episode-context-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.090), rgba(255,255,255,0.018) 68%),
    radial-gradient(140% 150% at 50% -30%, rgba(150, 194, 255, 0.16), rgba(150, 194, 255, 0.00) 62%),
    rgba(13, 20, 33, 0.72);
  border-color: rgba(169, 199, 236, 0.22);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.035),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.035);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.vote-info-btn, .vote-btn){
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.022) 70%),
    radial-gradient(130% 150% at 50% -24%, rgba(154, 198, 255, 0.15), rgba(154, 198, 255, 0.00) 62%),
    rgba(13, 20, 33, 0.74);
  border-color: rgba(169, 199, 236, 0.24);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.035),
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(255,255,255,0.035);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.022) 70%),
    radial-gradient(130% 150% at 50% -24%, rgba(var(--glow-aiowiki-rgb), 0.13), rgba(var(--glow-aiowiki-rgb), 0.00) 64%),
    rgba(13, 20, 33, 0.74);
  border-color: rgba(169, 199, 236, 0.24);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.030) 70%),
    radial-gradient(150% 170% at 50% -28%, rgba(var(--glow-primary-rgb), 0.25), rgba(var(--glow-primary-rgb), 0.00) 66%),
    rgba(14, 25, 44, 0.80);
  border-color: rgba(var(--glow-primary-rgb), 0.40);
  box-shadow:
    0 13px 28px rgba(0,0,0,0.26),
    0 0 0 1px rgba(255,255,255,0.045),
    0 0 24px rgba(var(--glow-primary-rgb), calc(0.12 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.vote-info-btn, .vote-btn)::before{
  opacity: 0.28;
  filter: blur(10px);
  background: radial-gradient(60% 70% at 50% 50%, rgba(180, 215, 255, 0.20), rgba(180, 215, 255, 0.00) 74%);
}

@media (pointer: fine){
  body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  body[data-page-kind="episode"] .episode-context-item[href]:focus-visible{
    border-color: rgba(185, 214, 248, 0.34);
    box-shadow:
      0 14px 30px rgba(0,0,0,0.26),
      0 0 0 1px rgba(255,255,255,0.045),
      0 0 24px rgba(var(--glow-buttons-rgb), calc(0.10 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -1px 0 rgba(255,255,255,0.04);
    filter: brightness(1.035) saturate(1.04);
  }

  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:focus-visible{
    border-color: rgba(185, 214, 248, 0.36);
    box-shadow:
      0 14px 30px rgba(0,0,0,0.27),
      0 0 0 1px rgba(255,255,255,0.045),
      0 0 24px rgba(var(--glow-buttons-rgb), calc(0.10 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -1px 0 rgba(255,255,255,0.04);
    filter: brightness(1.035) saturate(1.04);
  }

  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    border-color: rgba(var(--glow-primary-rgb), 0.52);
    box-shadow:
      0 15px 32px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.05),
      0 0 28px rgba(var(--glow-primary-rgb), calc(0.16 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045);
    filter: brightness(1.04) saturate(1.05);
  }
}

html.theme-light body[data-page-kind="episode"] .episode-context-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.72) 72%),
    radial-gradient(140% 160% at 50% -34%, rgba(var(--glow-buttons-rgb), 0.075), rgba(var(--glow-buttons-rgb), 0.00) 64%),
    rgba(247, 250, 255, 0.76);
  border-color: rgba(80, 120, 170, 0.22);
  box-shadow:
    0 10px 22px rgba(15,23,42,0.085),
    0 0 0 1px rgba(255,255,255,0.72),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(76, 114, 164, 0.050);
  text-shadow: none;
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.vote-info-btn, .vote-btn){
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.72) 72%),
    radial-gradient(140% 160% at 50% -34%, rgba(var(--glow-buttons-rgb), 0.075), rgba(var(--glow-buttons-rgb), 0.00) 64%),
    rgba(247, 250, 255, 0.76);
  border-color: rgba(80, 120, 170, 0.24);
  box-shadow:
    0 10px 22px rgba(15,23,42,0.085),
    0 0 0 1px rgba(255,255,255,0.72),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(76, 114, 164, 0.050);
  text-shadow: none;
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.72) 72%),
    radial-gradient(140% 160% at 50% -34%, rgba(var(--glow-aiowiki-rgb), 0.070), rgba(var(--glow-aiowiki-rgb), 0.00) 64%),
    rgba(247, 250, 255, 0.76);
  border-color: rgba(80, 120, 170, 0.24);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(246,250,255,0.78) 72%),
    radial-gradient(150% 170% at 50% -34%, rgba(var(--glow-primary-rgb), 0.105), rgba(var(--glow-primary-rgb), 0.00) 68%),
    rgba(248, 251, 255, 0.82);
  border-color: rgba(var(--glow-primary-rgb), 0.34);
  box-shadow:
    0 10px 22px rgba(15,23,42,0.085),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 18px rgba(var(--glow-primary-rgb), calc(0.055 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(76, 114, 164, 0.060);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.vote-info-btn, .vote-btn)::before{
  opacity: 0;
  filter: none;
  background: none;
}

@media (pointer: fine){
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:focus-visible{
    border-color: rgba(80, 120, 170, 0.34);
    box-shadow:
      0 12px 24px rgba(15,23,42,0.10),
      0 0 0 1px rgba(255,255,255,0.80),
      0 0 18px rgba(var(--glow-buttons-rgb), calc(0.045 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 0 rgba(76, 114, 164, 0.065);
    filter: brightness(1.015) saturate(1.03);
  }

  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:focus-visible{
    border-color: rgba(80, 120, 170, 0.35);
    box-shadow:
      0 12px 24px rgba(15,23,42,0.10),
      0 0 0 1px rgba(255,255,255,0.80),
      0 0 18px rgba(var(--glow-buttons-rgb), calc(0.045 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 0 rgba(76, 114, 164, 0.065);
    filter: brightness(1.015) saturate(1.03);
  }

  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    border-color: rgba(var(--glow-primary-rgb), 0.44);
    box-shadow:
      0 12px 25px rgba(15,23,42,0.105),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 20px rgba(var(--glow-primary-rgb), calc(0.070 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(76, 114, 164, 0.075);
    filter: brightness(1.018) saturate(1.035);
  }
}


/* ========================================================================== 
   v276: reference-matched Style 1 detail buttons
   - Restores the reference image proportions, neutral readable text, subtle
     soft-glass side buttons, and blue primary Vote button.
   - Scoped to public detail pages only.
   ========================================================================== */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-button-icon,
body[data-page-kind="episode"] .episode-context-icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  color: rgba(150, 196, 255, 0.86);
  opacity: 0.92;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-button-icon svg,
body[data-page-kind="episode"] .episode-context-icon svg{
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-button-text{
  position: relative;
  z-index: 1;
}

body[data-page-kind="episode"] .episode-context-item{
  min-height: 58px;
  padding: 13px 18px;
  gap: 12px;
  color: #eef5ff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(134, 183, 250, 0.18), rgba(134, 183, 250, 0.00) 66%),
    rgba(13, 20, 33, 0.76);
  border-color: rgba(170, 204, 245, 0.28);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.045),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035);
}

body[data-page-kind="episode"] .episode-context-label{
  color: rgba(226, 238, 255, 0.82) !important;
}

body[data-page-kind="episode"] .episode-context-value{
  color: #eef5ff !important;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn{
  min-height: 48px;
  padding: 12px 18px;
  gap: 10px;
  border-radius: 999px;
  color: #eef5ff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(134, 183, 250, 0.17), rgba(134, 183, 250, 0.00) 66%),
    rgba(13, 20, 33, 0.76);
  border-color: rgba(170, 204, 245, 0.28);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.045),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035);
  text-shadow: none;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  color: #eef5ff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--glow-aiowiki-rgb), 0.17), rgba(var(--glow-aiowiki-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76);
  border-color: rgba(170, 204, 245, 0.28);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  min-height: 54px;
  gap: 10px;
  color: #f8fbff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.26);
  background:
    linear-gradient(180deg, rgba(121, 183, 255, 0.96), rgba(51, 130, 238, 0.94) 62%, rgba(34, 109, 218, 0.96)),
    radial-gradient(140% 180% at 50% -55%, rgba(255,255,255,0.34), rgba(255,255,255,0.00) 68%);
  border-color: rgba(126, 185, 255, 0.58);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 22px rgba(var(--glow-primary-rgb), calc(0.16 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(20, 74, 160, 0.24);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn .detail-button-icon{
  color: rgba(255,255,255,0.92);
}

@media (pointer: fine){
  body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  body[data-page-kind="episode"] .episode-context-item[href]:focus-visible,
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:focus-visible{
    border-color: rgba(190, 220, 255, 0.42);
    box-shadow:
      0 14px 28px rgba(0,0,0,0.27),
      0 0 0 1px rgba(255,255,255,0.055),
      0 0 18px rgba(var(--glow-buttons-rgb), calc(0.070 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045);
    filter: brightness(1.025) saturate(1.035);
  }

  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    border-color: rgba(156, 206, 255, 0.74);
    box-shadow:
      0 16px 32px rgba(0,0,0,0.27),
      0 0 0 1px rgba(255,255,255,0.10),
      0 0 28px rgba(var(--glow-primary-rgb), calc(0.20 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.36),
      inset 0 -1px 0 rgba(20, 74, 160, 0.26);
    filter: brightness(1.035) saturate(1.05);
  }
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-button-icon,
html.theme-light body[data-page-kind="episode"] .episode-context-icon{
  color: rgba(74, 111, 165, 0.82);
}

html.theme-light body[data-page-kind="episode"] .episode-context-item{
  color: #1d2430 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(88, 135, 197, 0.105), rgba(88, 135, 197, 0.00) 66%),
    rgba(247, 250, 255, 0.82);
  border-color: rgba(92, 129, 184, 0.26);
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(76, 114, 164, 0.055);
  text-shadow: none;
}

html.theme-light body[data-page-kind="episode"] .episode-context-label{
  color: #44536a !important;
}

html.theme-light body[data-page-kind="episode"] .episode-context-value{
  color: #1d2430 !important;
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn{
  color: #1d2430 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(88, 135, 197, 0.105), rgba(88, 135, 197, 0.00) 66%),
    rgba(247, 250, 255, 0.82);
  border-color: rgba(92, 129, 184, 0.26);
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(76, 114, 164, 0.055);
  text-shadow: none;
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  color: #1d2430 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--glow-aiowiki-rgb), 0.085), rgba(var(--glow-aiowiki-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82);
  border-color: rgba(92, 129, 184, 0.26);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,45,120,0.26);
  background:
    linear-gradient(180deg, rgba(122, 185, 255, 0.98), rgba(60, 141, 241, 0.96) 58%, rgba(34, 113, 222, 0.98)),
    radial-gradient(150% 180% at 50% -58%, rgba(255,255,255,0.38), rgba(255,255,255,0.00) 68%);
  border-color: rgba(51, 128, 231, 0.58);
  box-shadow:
    0 12px 24px rgba(29, 111, 227, 0.18),
    0 0 0 1px rgba(255,255,255,0.42),
    0 0 20px rgba(var(--glow-primary-rgb), calc(0.12 * var(--glow-primary-int))),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(24, 83, 175, 0.22);
}

@media (pointer: fine){
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:focus-visible,
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn:focus-visible{
    border-color: rgba(92, 129, 184, 0.36);
    box-shadow:
      0 12px 23px rgba(15,23,42,0.095),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 16px rgba(var(--glow-buttons-rgb), calc(0.035 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(76, 114, 164, 0.065);
    filter: brightness(1.012) saturate(1.025);
  }

  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    border-color: rgba(43, 123, 232, 0.68);
    box-shadow:
      0 14px 28px rgba(29, 111, 227, 0.21),
      0 0 0 1px rgba(255,255,255,0.48),
      0 0 24px rgba(var(--glow-primary-rgb), calc(0.16 * var(--glow-primary-int))),
      inset 0 1px 0 rgba(255,255,255,0.46),
      inset 0 -1px 0 rgba(24, 83, 175, 0.24);
    filter: brightness(1.025) saturate(1.04);
  }
}

/* ========================================================================== 
   v277: Admin-configurable public Vote button fill
   - Adds optional Admin Config color/intensity hooks for the main public Vote
     button in light and dark/dim modes.
   - Keeps the hover state colored instead of allowing a white hover wash.
   ========================================================================== */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  --vote-button-rgb: var(--vote-button-dark-rgb, var(--glow-primary-rgb));
  --vote-button-int: var(--vote-button-dark-int, 1);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,calc(0.18 + (0.14 * var(--vote-button-int)))) 0%,
      rgba(255,255,255,calc(0.06 + (0.05 * var(--vote-button-int)))) 42%,
      rgba(0,0,0,calc(0.07 + (0.12 * var(--vote-button-int)))) 100%),
    linear-gradient(180deg,
      rgba(var(--vote-button-rgb), calc(0.78 + (0.18 * var(--vote-button-int)))) 0%,
      rgba(var(--vote-button-rgb), calc(0.84 + (0.12 * var(--vote-button-int)))) 62%,
      rgba(var(--vote-button-rgb), calc(0.88 + (0.10 * var(--vote-button-int)))) 100%);
  border-color: rgba(var(--vote-button-rgb), calc(0.36 + (0.26 * var(--vote-button-int))));
  box-shadow:
    0 14px 28px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 22px rgba(var(--vote-button-rgb), calc(0.14 * var(--vote-button-int))),
    inset 0 1px 0 rgba(255,255,255,calc(0.22 + (0.12 * var(--vote-button-int)))),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  --vote-button-rgb: var(--vote-button-light-rgb, var(--glow-primary-rgb));
  --vote-button-int: var(--vote-button-light-int, 1);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,calc(0.22 + (0.16 * var(--vote-button-int)))) 0%,
      rgba(255,255,255,calc(0.07 + (0.06 * var(--vote-button-int)))) 40%,
      rgba(0,0,0,calc(0.05 + (0.10 * var(--vote-button-int)))) 100%),
    linear-gradient(180deg,
      rgba(var(--vote-button-rgb), calc(0.76 + (0.20 * var(--vote-button-int)))) 0%,
      rgba(var(--vote-button-rgb), calc(0.82 + (0.14 * var(--vote-button-int)))) 58%,
      rgba(var(--vote-button-rgb), calc(0.86 + (0.12 * var(--vote-button-int)))) 100%);
  border-color: rgba(var(--vote-button-rgb), calc(0.36 + (0.24 * var(--vote-button-int))));
  box-shadow:
    0 12px 24px rgba(var(--vote-button-rgb), calc(0.10 + (0.10 * var(--vote-button-int)))),
    0 0 0 1px rgba(255,255,255,0.42),
    0 0 20px rgba(var(--vote-button-rgb), calc(0.10 * var(--vote-button-int))),
    inset 0 1px 0 rgba(255,255,255,calc(0.28 + (0.16 * var(--vote-button-int)))),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn::after{
  background:
    linear-gradient(115deg,
      transparent 34%,
      rgba(var(--vote-button-rgb), calc(0.10 + (0.12 * var(--vote-button-int)))) 49%,
      rgba(var(--vote-button-rgb), calc(0.08 + (0.10 * var(--vote-button-int)))) 53%,
      transparent 68%) !important;
  filter: none !important;
}

@media (pointer: fine){
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,calc(0.20 + (0.13 * var(--vote-button-int)))) 0%,
        rgba(255,255,255,calc(0.07 + (0.05 * var(--vote-button-int)))) 42%,
        rgba(0,0,0,calc(0.06 + (0.12 * var(--vote-button-int)))) 100%),
      linear-gradient(180deg,
        rgba(var(--vote-button-rgb), calc(0.80 + (0.18 * var(--vote-button-int)))) 0%,
        rgba(var(--vote-button-rgb), calc(0.86 + (0.12 * var(--vote-button-int)))) 62%,
        rgba(var(--vote-button-rgb), calc(0.90 + (0.10 * var(--vote-button-int)))) 100%);
    border-color: rgba(var(--vote-button-rgb), calc(0.44 + (0.28 * var(--vote-button-int))));
    box-shadow:
      0 16px 32px rgba(0,0,0,0.27),
      0 0 0 1px rgba(255,255,255,0.10),
      0 0 28px rgba(var(--vote-button-rgb), calc(0.18 * var(--vote-button-int))),
      inset 0 1px 0 rgba(255,255,255,calc(0.26 + (0.12 * var(--vote-button-int)))),
      inset 0 -1px 0 rgba(0,0,0,0.18);
    filter: brightness(1.012) saturate(1.04);
  }

  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,calc(0.24 + (0.14 * var(--vote-button-int)))) 0%,
        rgba(255,255,255,calc(0.08 + (0.06 * var(--vote-button-int)))) 40%,
        rgba(0,0,0,calc(0.04 + (0.10 * var(--vote-button-int)))) 100%),
      linear-gradient(180deg,
        rgba(var(--vote-button-rgb), calc(0.78 + (0.20 * var(--vote-button-int)))) 0%,
        rgba(var(--vote-button-rgb), calc(0.84 + (0.14 * var(--vote-button-int)))) 58%,
        rgba(var(--vote-button-rgb), calc(0.88 + (0.12 * var(--vote-button-int)))) 100%);
    border-color: rgba(var(--vote-button-rgb), calc(0.44 + (0.26 * var(--vote-button-int))));
    box-shadow:
      0 14px 28px rgba(var(--vote-button-rgb), calc(0.12 + (0.10 * var(--vote-button-int)))),
      0 0 0 1px rgba(255,255,255,0.48),
      0 0 24px rgba(var(--vote-button-rgb), calc(0.13 * var(--vote-button-int))),
      inset 0 1px 0 rgba(255,255,255,calc(0.32 + (0.14 * var(--vote-button-int)))),
      inset 0 -1px 0 rgba(0,0,0,0.14);
    filter: brightness(1.01) saturate(1.035);
  }

  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active)::after,
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible::after{
    opacity: 0.45;
  }
}


/* ========================================================================== 
   v278: stronger light-mode Vote button shimmer
   - Makes only the public Vote button shimmer more visible in light mode.
   - Keeps the button colored on hover and leaves dark/dim mode unchanged.
   ========================================================================== */
html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn::after{
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,0.00) 39%,
      rgba(255,255,255,calc(0.28 + (0.18 * var(--vote-button-int)))) 47%,
      rgba(225,240,255,calc(0.34 + (0.18 * var(--vote-button-int)))) 52%,
      rgba(255,255,255,calc(0.24 + (0.16 * var(--vote-button-int)))) 57%,
      rgba(255,255,255,0.00) 67%,
      transparent 72%) !important;
  filter: drop-shadow(0 0 6px rgba(var(--vote-button-rgb), calc(0.13 * var(--vote-button-int)))) !important;
}

@media (pointer: fine){
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active)::after,
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible::after{
    opacity: 0.88;
  }
}

/* ========================================================================== 
   v279: explicit dark/dim Vote button fill binding
   - Makes the Admin Config dark Vote button fill color target dark and dim
     theme classes directly, matching the light mode override path.
   - Keeps the hover state colored so it does not wash out to white.
   ========================================================================== */
html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn),
html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn){
  --vote-button-rgb: var(--vote-button-dark-rgb, var(--glow-primary-rgb));
  --vote-button-int: var(--vote-button-dark-int, 1);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,calc(0.18 + (0.14 * var(--vote-button-int)))) 0%,
      rgba(255,255,255,calc(0.06 + (0.05 * var(--vote-button-int)))) 42%,
      rgba(0,0,0,calc(0.07 + (0.12 * var(--vote-button-int)))) 100%),
    linear-gradient(180deg,
      rgba(var(--vote-button-rgb), calc(0.78 + (0.18 * var(--vote-button-int)))) 0%,
      rgba(var(--vote-button-rgb), calc(0.84 + (0.12 * var(--vote-button-int)))) 62%,
      rgba(var(--vote-button-rgb), calc(0.88 + (0.10 * var(--vote-button-int)))) 100%);
  border-color: rgba(var(--vote-button-rgb), calc(0.36 + (0.26 * var(--vote-button-int))));
  box-shadow:
    0 14px 28px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 22px rgba(var(--vote-button-rgb), calc(0.14 * var(--vote-button-int))),
    inset 0 1px 0 rgba(255,255,255,calc(0.22 + (0.12 * var(--vote-button-int)))),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn){
  --vote-button-rgb: var(--vote-button-light-rgb, var(--glow-primary-rgb));
  --vote-button-int: var(--vote-button-light-int, 1);
}

@media (pointer: fine){
  html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):hover:not(:active),
  html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):focus-visible,
  html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):hover:not(:active),
  html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):focus-visible{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,calc(0.20 + (0.13 * var(--vote-button-int)))) 0%,
        rgba(255,255,255,calc(0.07 + (0.05 * var(--vote-button-int)))) 42%,
        rgba(0,0,0,calc(0.06 + (0.12 * var(--vote-button-int)))) 100%),
      linear-gradient(180deg,
        rgba(var(--vote-button-rgb), calc(0.80 + (0.18 * var(--vote-button-int)))) 0%,
        rgba(var(--vote-button-rgb), calc(0.86 + (0.12 * var(--vote-button-int)))) 62%,
        rgba(var(--vote-button-rgb), calc(0.90 + (0.10 * var(--vote-button-int)))) 100%);
    border-color: rgba(var(--vote-button-rgb), calc(0.44 + (0.28 * var(--vote-button-int))));
    box-shadow:
      0 16px 32px rgba(0,0,0,0.27),
      0 0 0 1px rgba(255,255,255,0.10),
      0 0 28px rgba(var(--vote-button-rgb), calc(0.18 * var(--vote-button-int))),
      inset 0 1px 0 rgba(255,255,255,calc(0.26 + (0.12 * var(--vote-button-int)))),
      inset 0 -1px 0 rgba(0,0,0,0.18);
    filter: brightness(1.012) saturate(1.04);
  }
}


/* ========================================================================== 
   v280: stronger dark/dim Vote button hover shimmer
   - Restores a clearer animated shimmer on the public Vote button in dark/dim
     modes after the dark admin color binding override.
   - Leaves the light-mode Vote button shimmer unchanged.
   ========================================================================== */
html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn)::after,
html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn)::after{
  background:
    linear-gradient(115deg,
      transparent 28%,
      rgba(255,255,255,0.00) 38%,
      rgba(var(--vote-button-rgb), calc(0.22 + (0.14 * var(--vote-button-int)))) 46%,
      rgba(255,255,255, calc(0.38 + (0.16 * var(--vote-button-int)))) 52%,
      rgba(var(--vote-button-rgb), calc(0.20 + (0.12 * var(--vote-button-int)))) 58%,
      rgba(255,255,255,0.00) 68%,
      transparent 74%) !important;
  filter: drop-shadow(0 0 8px rgba(var(--vote-button-rgb), calc(0.18 + (0.10 * var(--vote-button-int))))) !important;
}

@media (pointer: fine){
  html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):hover:not(:active)::after,
  html.theme-dark body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):focus-visible::after,
  html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):hover:not(:active)::after,
  html.theme-dim body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(.vote-btn, button[type="submit"].vote-btn):focus-visible::after{
    opacity: 0.82 !important;
  }
}

/* ========================================================================== 
   v281: remove default outside blue glow from Vote info and AIOWiki buttons
   - Keep the pill body, border, icon color, and shimmer behavior intact.
   - Remove the blue aura behind Vote info/AIOWiki on detail pages by default.
   - Remove the same default blue aura from AIOWiki controls on public list pages.
   - Allow only a restrained hover/focus lift so the buttons still feel active.
   ========================================================================== */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn{
  box-shadow:
    0 14px 28px rgba(0,0,0,0.30),
    0 0 0 1px rgba(123, 171, 232, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn::before{
  opacity:0;
  transform:scale(0.98);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn{
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.12),
    0 0 0 1px rgba(255,255,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(46, 87, 138, 0.10);
}

@media (pointer: fine){
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:focus-visible{
    box-shadow:
      0 16px 32px rgba(0,0,0,0.32),
      0 0 0 1px rgba(123, 171, 232, 0.10),
      0 0 18px rgba(var(--glow-buttons-rgb), calc(0.10 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03);
  }

  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:hover:not(:active)::before,
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:focus-visible::before{
    inset:-7% -5%;
    background:radial-gradient(54% 58% at 50% 50%, rgba(var(--glow-buttons-rgb), calc(0.14 * var(--glow-buttons-int))), rgba(var(--glow-buttons-rgb), 0) 72%);
    filter:blur(7px);
    opacity:0.34;
    transform:scale(1.0);
  }

  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) main#main .vote-info-btn:focus-visible{
    box-shadow:
      0 12px 24px rgba(46, 87, 138, 0.15),
      0 0 0 1px rgba(var(--glow-buttons-rgb), calc(0.12 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.94),
      inset 0 -1px 0 rgba(46, 87, 138, 0.12);
  }
}

body main#main .public-list-page .row-meta .btn-aiowiki,
body main#main .public-list-page .row-meta .badge-aiowiki,
body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn,
body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn{
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light body main#main .public-list-page .row-meta .btn-aiowiki,
html.theme-light body main#main .public-list-page .row-meta .badge-aiowiki,
html.theme-light body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn,
html.theme-light body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
html.theme-light body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn,
html.theme-light body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
html.theme-light body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
html.theme-light body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
html.theme-light body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn{
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.14);
}

@media (pointer: fine){
  body main#main .public-list-page .row-meta .btn-aiowiki:hover,
  body main#main .public-list-page .row-meta .btn-aiowiki:focus-visible,
  body main#main .public-list-page .row-meta .badge-aiowiki:hover,
  body main#main .public-list-page .row-meta .badge-aiowiki:focus-visible,
  body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    box-shadow:
      0 12px 26px rgba(0,0,0,0.26),
      0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.13),
      inset 0 1px 0 rgba(255,255,255,0.11),
      inset 0 0 0 1px rgba(255,255,255,0.04);
  }

  html.theme-light body main#main .public-list-page .row-meta .btn-aiowiki:hover,
  html.theme-light body main#main .public-list-page .row-meta .btn-aiowiki:focus-visible,
  html.theme-light body main#main .public-list-page .row-meta .badge-aiowiki:hover,
  html.theme-light body main#main .public-list-page .row-meta .badge-aiowiki:focus-visible,
  html.theme-light body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn:hover,
  html.theme-light body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn:focus-visible,
  html.theme-light body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn:hover,
  html.theme-light body main#main .public-list-page--characters .characters-table td:nth-child(6) .btn:focus-visible{
    box-shadow:
      0 12px 24px rgba(46, 87, 138, 0.14),
      0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.12),
      inset 0 1px 0 rgba(255,255,255,0.94),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.16);
  }
}



/* ========================================================================== 
   v281: Browser zoom public list bridge
   - At desktop widths that appear after 110% browser zoom, reuse the compact
     list layout so badge pills keep room to wrap and AIOWiki remains visible.
   - Scope only to public list pages on fine-pointer desktop screens.
   ========================================================================== */
@media (min-width: 1180px) and (max-width: 1320px) and (pointer: fine) {
  .public-list-page .table-wrap table{
    min-width:0 !important;
    width:100%;
  }

  .public-list-page .albums-table,
  .public-list-page .seasons-table,
  .public-list-page .characters-table,
  .public-list-page .episodes-table,
  .public-list-page .elsewhere-table,
  .public-list-page .arcs-table{
    table-layout:fixed;
  }

  .public-list-page .row-meta{
    display:flex !important;
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    row-gap:6px;
    min-width:0;
  }

  .public-list-page .row-title-line,
  .public-list-page .row-title{
    min-width:0;
  }

  .public-list-page .row-meta .badge,
  .public-list-page .row-meta .btn-mini{
    flex:0 1 auto;
    max-width:100%;
  }

  .public-list-page--characters .characters-table th,
  .public-list-page--characters .characters-table td,
  .public-list-page--episodes .episodes-table th,
  .public-list-page--episodes .episodes-table td,
  .public-list-page--arcs .arcs-table th,
  .public-list-page--arcs .arcs-table td,
  .public-list-page--albums .albums-table th,
  .public-list-page--albums .albums-table td,
  .public-list-page--seasons .seasons-table th,
  .public-list-page--seasons .seasons-table td,
  .public-list-page--elsewhere .elsewhere-table th,
  .public-list-page--elsewhere .elsewhere-table td,
  .public-list-page--videos .elsewhere-table th,
  .public-list-page--videos .elsewhere-table td{
    padding:10px 10px;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--albums .albums-table col.albums-col-aiowiki,
  .public-list-page--seasons .seasons-table col.seasons-col-votes,
  .public-list-page--seasons .seasons-table col.seasons-col-episodes,
  .public-list-page--seasons .seasons-table col.seasons-col-aiowiki{
    display:none;
    width:0 !important;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:none !important;
  }

  .public-list-page--albums .albums-table .albums-col-thumb,
  .public-list-page--seasons .seasons-table .seasons-col-thumb,
  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:120px !important;
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width:58px !important;
    max-width:58px;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating,
  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4),
  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width:130px !important;
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter,
  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter,
  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--characters .characters-table .character-list-vote,
  .public-list-page--episodes .episodes-table .badge-episode-rating{
    display:none !important;
  }
}


/* v281 follow-up: the zoom bridge must undo desktop-only child hiding too. */
@media (min-width: 1180px) and (max-width: 1320px) and (pointer: fine) {
  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki,
  .public-list-page--episodes .episodes-table .badge-episode-album,
  .public-list-page--episodes .episodes-table .badge-episode-season{
    display:inline-flex !important;
  }

  .public-list-page--albums .albums-table .badge-album-number,
  .public-list-page--seasons .seasons-table .badge-season-number,
  .public-list-page--characters .characters-table .character-list-vote,
  .public-list-page--episodes .episodes-table .badge-episode-rating{
    display:none !important;
  }
}


/* ==========================================================================
   v282: Half-window 110% zoom public list bridge
   - Covers the narrow desktop gap between the older 681-1024 bridge and the
     1180-1320 zoom bridge.
   - Keeps compact under-title badges available when a desktop window is about
     half width at 110% zoom, before the phone layout takes over.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1179px) and (pointer: fine) {
  .public-list-page .table-wrap table{
    min-width:0 !important;
    width:100%;
  }

  .public-list-page .albums-table,
  .public-list-page .seasons-table,
  .public-list-page .characters-table,
  .public-list-page .episodes-table,
  .public-list-page .elsewhere-table,
  .public-list-page .arcs-table{
    table-layout:fixed;
  }

  .public-list-page .row-meta{
    display:flex !important;
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    row-gap:6px;
    min-width:0;
    flex-wrap:wrap;
  }

  .public-list-page .row-title-line,
  .public-list-page .row-title{
    min-width:0;
  }

  .public-list-page .row-meta .badge,
  .public-list-page .row-meta .btn-mini{
    flex:0 1 auto;
    max-width:100%;
  }

  .public-list-page--characters .characters-table th,
  .public-list-page--characters .characters-table td,
  .public-list-page--episodes .episodes-table th,
  .public-list-page--episodes .episodes-table td,
  .public-list-page--arcs .arcs-table th,
  .public-list-page--arcs .arcs-table td,
  .public-list-page--albums .albums-table th,
  .public-list-page--albums .albums-table td,
  .public-list-page--seasons .seasons-table th,
  .public-list-page--seasons .seasons-table td,
  .public-list-page--elsewhere .elsewhere-table th,
  .public-list-page--elsewhere .elsewhere-table td,
  .public-list-page--videos .elsewhere-table th,
  .public-list-page--videos .elsewhere-table td{
    padding:10px 10px;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--albums .albums-table col.albums-col-aiowiki,
  .public-list-page--seasons .seasons-table col.seasons-col-votes,
  .public-list-page--seasons .seasons-table col.seasons-col-episodes,
  .public-list-page--seasons .seasons-table col.seasons-col-aiowiki{
    display:none;
    width:0 !important;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:none !important;
  }

  .public-list-page--albums .albums-table .albums-col-thumb,
  .public-list-page--seasons .seasons-table .seasons-col-thumb,
  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:120px !important;
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width:58px !important;
    max-width:58px;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating,
  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4),
  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width:130px !important;
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter,
  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter,
  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki,
  .public-list-page--episodes .episodes-table .badge-episode-album,
  .public-list-page--episodes .episodes-table .badge-episode-season{
    display:inline-flex !important;
  }

  .public-list-page--albums .albums-table .badge-album-number,
  .public-list-page--seasons .seasons-table .badge-season-number,
  .public-list-page--characters .characters-table .character-list-vote,
  .public-list-page--episodes .episodes-table .badge-episode-rating{
    display:none !important;
  }
}


/* ============================================================================
   v283: Public list half-window zoom bridge
   - Extends the compact list treatment to the wider in-between desktop width
     seen at 110% zoom in a half-size browser window.
   - Hides the duplicate metric/AIOWiki columns before they can squeeze or fall
     off the right edge, and restores the under-title vote/episode/AIOWiki pills.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1500px) {
  .public-list-page .table-wrap table,
  .public-list-page .albums-table,
  .public-list-page .seasons-table,
  .public-list-page .characters-table,
  .public-list-page .episodes-table,
  .public-list-page .elsewhere-table,
  .public-list-page .arcs-table{
    width:100%;
    min-width:0 !important;
    table-layout:fixed;
  }

  .public-list-page .row-title-line,
  .public-list-page .row-title{
    min-width:0;
    max-width:100%;
  }

  .public-list-page .row-meta{
    display:flex !important;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    row-gap:6px;
    margin-top:8px;
    min-width:0;
  }

  .public-list-page .row-meta .badge,
  .public-list-page .row-meta .btn-mini{
    flex:0 1 auto;
    max-width:100%;
  }

  .public-list-page .row-meta .badge-votes,
  .public-list-page .row-meta .badge-episodes,
  .public-list-page .row-meta .btn-aiowiki,
  .public-list-page .row-meta .badge-aiowiki,
  .public-list-page--episodes .episodes-table .badge-episode-album,
  .public-list-page--episodes .episodes-table .badge-episode-season{
    display:inline-flex !important;
  }

  .public-list-page--albums .albums-table .badge-album-number,
  .public-list-page--seasons .seasons-table .badge-season-number,
  .public-list-page--episodes .episodes-table .badge-episode-num,
  .public-list-page--episodes .episodes-table .badge-episode-rating,
  .public-list-page--characters .characters-table .character-list-vote{
    display:none !important;
  }

  .public-list-page--albums .albums-table th,
  .public-list-page--albums .albums-table td,
  .public-list-page--seasons .seasons-table th,
  .public-list-page--seasons .seasons-table td,
  .public-list-page--characters .characters-table th,
  .public-list-page--characters .characters-table td,
  .public-list-page--episodes .episodes-table th,
  .public-list-page--episodes .episodes-table td,
  .public-list-page--elsewhere .elsewhere-table th,
  .public-list-page--elsewhere .elsewhere-table td,
  .public-list-page--videos .elsewhere-table th,
  .public-list-page--videos .elsewhere-table td,
  .public-list-page--arcs .arcs-table th,
  .public-list-page--arcs .arcs-table td{
    padding:10px 10px;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--albums .albums-table col.albums-col-aiowiki,
  .public-list-page--seasons .seasons-table col.seasons-col-votes,
  .public-list-page--seasons .seasons-table col.seasons-col-episodes,
  .public-list-page--seasons .seasons-table col.seasons-col-aiowiki{
    width:0 !important;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:none !important;
  }

  .public-list-page--albums .albums-table .albums-col-thumb,
  .public-list-page--seasons .seasons-table .seasons-col-thumb,
  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:120px !important;
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width:58px !important;
    max-width:58px;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating,
  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4),
  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width:130px !important;
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter,
  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter,
  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }
}


/* ============================================================================
   v284: Half-window desktop zoom column-preserving bridge
   - Restores the full sortable desktop columns between 1025px and 1500px.
   - Keeps Votes, Episodes/Album, and AIOWiki in their table columns so the
     column headers remain clickable for sorting.
   - Tightens only column widths, padding, and pill sizing to prevent the action
     badges from being squeezed off the right edge at 110% zoom in half windows.
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1500px) and (pointer: fine) {
  .public-list-page .table-wrap{
    overflow:visible;
  }

  .public-list-page .table-wrap table,
  .public-list-page .albums-table,
  .public-list-page .seasons-table,
  .public-list-page .characters-table,
  .public-list-page .episodes-table,
  .public-list-page .elsewhere-table,
  .public-list-page .arcs-table{
    width:100%;
    min-width:0 !important;
    table-layout:fixed;
  }

  .public-list-page .row-meta{
    display:none !important;
  }

  .public-list-page .row-title-line,
  .public-list-page .row-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table th,
  .public-list-page--albums .albums-table td,
  .public-list-page--seasons .seasons-table th,
  .public-list-page--seasons .seasons-table td,
  .public-list-page--characters .characters-table th,
  .public-list-page--characters .characters-table td,
  .public-list-page--episodes .episodes-table th,
  .public-list-page--episodes .episodes-table td,
  .public-list-page--elsewhere .elsewhere-table th,
  .public-list-page--elsewhere .elsewhere-table td,
  .public-list-page--videos .elsewhere-table th,
  .public-list-page--videos .elsewhere-table td,
  .public-list-page--arcs .arcs-table th,
  .public-list-page--arcs .arcs-table td{
    padding:9px 8px;
  }

  .public-list-page--albums .albums-table col.albums-col-thumb,
  .public-list-page--seasons .seasons-table col.seasons-col-thumb{
    display:table-column !important;
    width:132px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-title,
  .public-list-page--seasons .seasons-table col.seasons-col-title{
    display:table-column !important;
    width:auto !important;
  }

  .public-list-page--albums .albums-table col.albums-col-rating,
  .public-list-page--seasons .seasons-table col.seasons-col-rating{
    display:table-column !important;
    width:126px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--seasons .seasons-table col.seasons-col-votes{
    display:table-column !important;
    width:84px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--seasons .seasons-table col.seasons-col-episodes{
    display:table-column !important;
    width:94px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-aiowiki,
  .public-list-page--seasons .seasons-table col.seasons-col-aiowiki{
    display:table-column !important;
    width:100px !important;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    display:table-cell !important;
  }

  /* Elsewhere/Videos intentionally keep the hidden code column hidden. */
  .public-list-page--elsewhere .elsewhere-table th:nth-child(2),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(2),
  .public-list-page--videos .elsewhere-table th:nth-child(2),
  .public-list-page--videos .elsewhere-table td:nth-child(2){
    display:none !important;
  }

  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:132px !important;
  }

  .public-list-page--episodes .episodes-table th:nth-child(1),
  .public-list-page--episodes .episodes-table td:nth-child(1){
    width:58px !important;
    max-width:58px;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4){
    width:180px !important;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4),
  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width:126px !important;
    text-align:right;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3){
    width:84px !important;
  }

  .public-list-page--albums .albums-table th:nth-child(4),
  .public-list-page--albums .albums-table th:nth-child(5),
  .public-list-page--albums .albums-table th:nth-child(6),
  .public-list-page--seasons .seasons-table th:nth-child(4),
  .public-list-page--seasons .seasons-table th:nth-child(5),
  .public-list-page--seasons .seasons-table th:nth-child(6),
  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(5){
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--albums .albums-table td:nth-child(4),
  .public-list-page--albums .albums-table td:nth-child(5),
  .public-list-page--albums .albums-table td:nth-child(6),
  .public-list-page--seasons .seasons-table td:nth-child(4),
  .public-list-page--seasons .seasons-table td:nth-child(5),
  .public-list-page--seasons .seasons-table td:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    text-align:center;
    white-space:nowrap;
  }

  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    width:100px !important;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter,
  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter,
  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
    max-width:100%;
    min-width:0;
    padding:5px 7px;
    gap:3px;
    font-size:calc(var(--ui-pill-font-size) - 3px);
  }

  .public-list-page--albums .albums-table td:nth-child(6) .btn,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
  .public-list-page--characters .characters-table td:nth-child(6) .btn,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
    min-width:78px;
    max-width:100%;
    padding:5px 7px;
    gap:3px;
    font-size:11px;
  }

  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx::before,
  .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx::before,
  .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(3) .cell-fx::before,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx::before,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx::before,
  .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before,
  .public-list-page--albums .albums-table td:nth-child(6) .btn::before,
  .public-list-page--seasons .seasons-table td:nth-child(6) .btn::before,
  .public-list-page--characters .characters-table td:nth-child(6) .btn::before,
  .public-list-page--episodes .episodes-table td:nth-child(6) .btn::before,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--videos .elsewhere-table td:nth-child(6) .btn::before,
  .public-list-page--arcs .arcs-table td:nth-child(5) .btn::before{
    width:11px;
    height:11px;
    flex-basis:11px;
  }

  .public-list-page--episodes .episodes-table .episode-album-season-badges,
  .public-list-page--episodes .episodes-table .badge-episode-album,
  .public-list-page--episodes .episodes-table .badge-episode-season{
    min-width:0;
    max-width:100%;
  }

  .public-list-page--episodes .episodes-table .episode-album-season-badges .badge,
  .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-text{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (min-width: 1025px) and (max-width: 1220px) and (pointer: fine) {
  .public-list-page--albums .albums-table col.albums-col-thumb,
  .public-list-page--seasons .seasons-table col.seasons-col-thumb{
    width:118px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-rating,
  .public-list-page--seasons .seasons-table col.seasons-col-rating{
    width:118px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-votes,
  .public-list-page--seasons .seasons-table col.seasons-col-votes,
  .public-list-page--characters .characters-table th:nth-child(5),
  .public-list-page--characters .characters-table td:nth-child(5),
  .public-list-page--episodes .episodes-table th:nth-child(5),
  .public-list-page--episodes .episodes-table td:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(5),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5),
  .public-list-page--videos .elsewhere-table th:nth-child(5),
  .public-list-page--videos .elsewhere-table td:nth-child(5),
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3){
    width:76px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-episodes,
  .public-list-page--seasons .seasons-table col.seasons-col-episodes,
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4){
    width:86px !important;
  }

  .public-list-page--albums .albums-table col.albums-col-aiowiki,
  .public-list-page--seasons .seasons-table col.seasons-col-aiowiki,
  .public-list-page--characters .characters-table th:nth-child(6),
  .public-list-page--characters .characters-table td:nth-child(6),
  .public-list-page--episodes .episodes-table th:nth-child(6),
  .public-list-page--episodes .episodes-table td:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(6),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(6),
  .public-list-page--videos .elsewhere-table th:nth-child(6),
  .public-list-page--videos .elsewhere-table td:nth-child(6),
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    width:90px !important;
  }

  .public-list-page--characters .characters-table th:nth-child(1),
  .public-list-page--characters .characters-table td:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(1),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(1),
  .public-list-page--videos .elsewhere-table th:nth-child(1),
  .public-list-page--videos .elsewhere-table td:nth-child(1){
    width:118px !important;
  }

  .public-list-page--characters .characters-table th:nth-child(3),
  .public-list-page--characters .characters-table td:nth-child(3),
  .public-list-page--episodes .episodes-table th:nth-child(3),
  .public-list-page--episodes .episodes-table td:nth-child(3){
    width:150px !important;
  }

  .public-list-page--characters .characters-table th:nth-child(4),
  .public-list-page--characters .characters-table td:nth-child(4),
  .public-list-page--episodes .episodes-table th:nth-child(4),
  .public-list-page--episodes .episodes-table td:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table th:nth-child(4),
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4),
  .public-list-page--videos .elsewhere-table th:nth-child(4),
  .public-list-page--videos .elsewhere-table td:nth-child(4),
  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width:118px !important;
  }

  .public-list-page--albums .albums-table td:nth-child(3) .rating-meter,
  .public-list-page--seasons .seasons-table td:nth-child(3) .rating-meter,
  .public-list-page--characters .characters-table td:nth-child(4) .rating-meter,
  .public-list-page--episodes .episodes-table td:nth-child(4) .rating-meter,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--videos .elsewhere-table td:nth-child(4) .rating-meter,
  .public-list-page--arcs .arcs-table td:nth-child(2) .rating-meter{
    max-width:104px;
  }
}


/* ============================================================================
   v285: Album/season detail 110% half-window badge bridge
   - Keep Albums and Club Seasons detail episode-list columns in place on
     desktop-style half-window zoom widths.
   - Reapply the same Votes and AIOWiki pill/icon treatment used by the main
     Albums and Club Seasons list pages when the viewport drops below the
     older desktop styling breakpoint.
   - Leave phone/mobile column-collapse behavior alone.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1179px) and (pointer: fine) {
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail{
    width:100%;
    table-layout:fixed;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th,
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td{
    padding:9px 8px;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(1),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(1){
    width:58px;
    max-width:58px;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(2),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(2){
    min-width:0;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-title-line,
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-title,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-title-line,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(3),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(3){
    width:126px;
    text-align:right;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(3) .rating-meter,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(4){
    width:94px;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5){
    width:112px;
    text-align:center;
    white-space:nowrap;
  }

  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:72px;
    max-width:100%;
    min-height:28px;
    padding:5px 7px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    color:var(--list-pill-votes-color, #D7EFB3);
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
  }

  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx::before,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx::before{
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .cell-fx,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .cell-fx{
    display:inline-flex;
    justify-content:center;
    max-width:100%;
    min-width:0;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    max-width:100%;
    min-height:28px;
    padding:5px 7px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn::before,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn::before{
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn:hover,
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn:focus-visible,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn:hover,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }

  html.theme-light .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  html.theme-light .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    color:var(--list-pill-votes-color, #5A761F);
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
  }

  html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5) .btn,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn{
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
  }
}


/* ========================================================================== 
   v286: Arc detail episode Votes + AIOWiki parity
   - Match the Club Seasons detail episode list badges for arc vote pages.
   - Scope only to the arc detail episode table and its mobile row-meta pills.
   ========================================================================== */
@media (min-width: 1025px) and (pointer: fine) {
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:28px;
    min-width:72px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    color:var(--list-pill-votes-color, #D7EFB3);
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
  }

  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .cell-fx{
    display:inline-flex;
    justify-content:center;
    max-width:100%;
    min-width:0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    min-height:28px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn:hover,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }

  html.theme-light .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    color:var(--list-pill-votes-color, #5A761F);
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
  }

  html.theme-light body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn{
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
  }
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  row-gap:6px;
  min-width:0;
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-votes,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height: calc(var(--ui-control-height) - 12px);
  padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
  border-radius:999px;
  font-size: calc(var(--ui-pill-font-size) - 2px);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-votes{
  color:var(--list-pill-votes-color, #D7EFB3);
  border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki{
  min-width:88px;
  color:var(--list-pill-aiowiki-color, #EAF3FF);
  border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-votes::before,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki::before,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki::before{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  display:inline-block;
  background-color:currentColor;
  opacity:0.96;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-votes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
}

body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki::before,
body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
}

@media (pointer: fine){
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki:hover,
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki:focus-visible,
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki:hover,
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }
}

html.theme-light body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-votes{
  color:var(--list-pill-votes-color, #5A761F);
  border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .btn-aiowiki,
html.theme-light body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-aiowiki{
  color:var(--list-pill-aiowiki-color, #274A74);
  border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}

/* v334: Arc detail mobile episode meta badges
   Keep this scoped to the Arc detail episode row mobile metadata. */
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-episode-rating{
    display:none;
  }

  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-episodes{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    max-width:100%;
    min-height:calc(var(--ui-control-height) - 12px);
    padding:calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
    border-radius:999px;
    font-size:calc(var(--ui-pill-font-size) - 2px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    overflow:hidden;
    color:var(--list-pill-episodes-color, #D6E7FF);
    border:1px solid rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.32);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.22), rgba(14, 23, 39, 0.88) 60%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.08),
      0 3px 9px rgba(0,0,0,0.18);
  }

  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-episodes::before{
    content:"";
    width:12px;
    height:12px;
    flex:0 0 12px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
  }

  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-episodes .badge-text{
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html.theme-light body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail .badge-episodes{
    color:var(--list-pill-episodes-color, #2C5F9E);
    border-color:rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.90) 72%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      0 0 0 1px rgba(112,138,180,0.10),
      0 3px 9px rgba(54,82,122,0.10);
  }
}

@media (min-width: 681px) and (max-width: 1179px) and (pointer: fine) {
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail{
    width:100%;
    table-layout:fixed;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td{
    padding:9px 8px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(1){
    width:58px;
    max-width:58px;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2){
    min-width:0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-title-line,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:126px;
    text-align:right;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:94px;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:112px;
    text-align:center;
    white-space:nowrap;
  }

  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    min-width:72px;
    max-width:100%;
    padding:5px 7px;
    font-size:11px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn{
    min-width:88px;
    max-width:100%;
    padding:5px 7px;
    font-size:11px;
  }
}

@media (hover:hover) and (pointer:fine){
  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail{
    display:none !important;
  }
}


/* ============================================================================
   v287: Arc detail 110% half-window Votes/AIOWiki badge bridge
   - Mirrors the already-working Club Seasons detail/list badge treatment on
     arc detail vote pages when a desktop browser is zoomed and half-width.
   - Keeps the fix scoped to the arc detail episode table only.
   - Leaves the true mobile collapse at 680px and below unchanged.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1500px) and (pointer: fine) {
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table.table-wrap{
    overflow:visible;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail{
    width:100%;
    min-width:0 !important;
    table-layout:fixed;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td{
    padding:9px 8px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(1){
    width:58px;
    max-width:58px;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2){
    min-width:0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-title-line,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:126px;
    text-align:right;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:84px;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:100px;
    text-align:center;
    white-space:nowrap;
  }

  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:28px !important;
    padding:5px 7px !important;
    border-radius:999px !important;
    box-sizing:border-box !important;
    font-size:calc(var(--ui-pill-font-size) - 3px) !important;
    font-weight:700 !important;
    letter-spacing:0.01em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    color:var(--list-pill-votes-color, #D7EFB3) !important;
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14) !important;
  }

  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx::before{
    content:"" !important;
    width:11px !important;
    height:11px !important;
    flex:0 0 11px !important;
    display:inline-block !important;
    background-color:currentColor !important;
    opacity:0.96 !important;
    -webkit-mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    -webkit-mask-size:contain !important;
    mask-repeat:no-repeat !important;
    mask-position:center !important;
    mask-size:contain !important;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>") !important;
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>") !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .cell-fx{
    display:inline-flex !important;
    justify-content:center !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:78px !important;
    max-width:100% !important;
    min-height:28px !important;
    padding:5px 7px !important;
    border-radius:999px !important;
    box-sizing:border-box !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:0.01em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    color:var(--list-pill-aiowiki-color, #EAF3FF) !important;
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14) !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn::before{
    content:"" !important;
    width:11px !important;
    height:11px !important;
    flex:0 0 11px !important;
    display:inline-block !important;
    background-color:currentColor !important;
    opacity:0.96 !important;
    -webkit-mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    -webkit-mask-size:contain !important;
    mask-repeat:no-repeat !important;
    mask-position:center !important;
    mask-size:contain !important;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>") !important;
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>") !important;
  }

  html.theme-light .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    color:var(--list-pill-votes-color, #5A761F) !important;
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%) !important;
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18) !important;
  }

  html.theme-light body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .btn{
    color:var(--list-pill-aiowiki-color, #274A74) !important;
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%) !important;
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1220px) and (pointer: fine) {
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:118px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:76px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:90px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3) .rating-meter{
    max-width:104px;
  }
}


/* Full-window Albums / Seasons / Arcs list placement polish.
   Safely pull the right-side metric columns inward on wide desktop layouts only,
   while leaving the existing half-window / 110% / mobile fixes unchanged. */
@media (min-width: 1180px) and (pointer: fine) {
  .public-list-page--albums,
  .public-list-page--seasons{
    max-width: 1200px;
  }

  .public-list-page--arcs{
    max-width: 1120px;
  }

  .public-list-page--albums .albums-table .albums-col-rating,
  .public-list-page--seasons .seasons-table .seasons-col-rating{
    width: 168px;
  }

  .public-list-page--albums .albums-table .albums-col-votes,
  .public-list-page--albums .albums-table .albums-col-episodes,
  .public-list-page--seasons .seasons-table .seasons-col-votes,
  .public-list-page--seasons .seasons-table .seasons-col-episodes,
  .public-list-page--arcs .arcs-table th:nth-child(3),
  .public-list-page--arcs .arcs-table td:nth-child(3),
  .public-list-page--arcs .arcs-table th:nth-child(4),
  .public-list-page--arcs .arcs-table td:nth-child(4){
    width: 96px;
  }

  .public-list-page--albums .albums-table .albums-col-aiowiki,
  .public-list-page--seasons .seasons-table .seasons-col-aiowiki,
  .public-list-page--arcs .arcs-table th:nth-child(5),
  .public-list-page--arcs .arcs-table td:nth-child(5){
    width: 112px;
  }

  .public-list-page--arcs .arcs-table th:nth-child(2),
  .public-list-page--arcs .arcs-table td:nth-child(2){
    width: 168px;
  }
}


/* Full-window detail episode-list placement polish.
   This targets the actual episode tables shown inside Album, Season, and Arc
   detail/vote pages. It intentionally stays above the half-window bridge
   ranges so the existing 110% and mobile fixes are not disturbed. */
@media (min-width: 1501px) and (pointer: fine) {
  body[data-page-kind="album"] .page-album-detail .album-detail-table,
  body[data-page-kind="season"] .page-seasons-detail .season-detail-table,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table{
    width:min(100%, 1120px) !important;
    max-width:1120px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th,
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td{
    padding-left:10px;
    padding-right:10px;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(1),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(1),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(1){
    width:70px;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(2),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2){
    min-width:0;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(3),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:168px;
    text-align:right;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(3) .rating-meter,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(3) .rating-meter,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:122px;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:102px;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(5),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:122px;
    text-align:center;
    white-space:nowrap;
  }
}

/* ========================================================================== 
   v290: Center no-thumbnail Arc vote placement on desktop
   - When an Arc detail page has no thumbnail, keep the same desktop voting
     placement used by no-thumbnail Elsewhere detail pages.
   - Mobile and thumbnail Arc layouts are unchanged.
   ========================================================================== */
@media (min-width: 1024px){
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :first-child{
    flex: 0 1 clamp(220px, 24vw, 340px);
    width: min(100%, clamp(220px, 24vw, 340px));
    max-width: clamp(220px, 24vw, 340px);
    min-width: 0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :last-child{
    flex: 1 1 460px;
    max-width: 700px;
    min-width: 0;
  }
}


/* ==========================================================================
   v291: Mobile list badge artifact cleanup
   - Scope to compact public-list badges used under titles on phones/touch.
   - Remove the broad outer glow that could render as a faint square/box around
     rounded pills in mobile Firefox while keeping the existing pill layout.
   ========================================================================== */
@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    background-clip: padding-box;
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.03),
      0 3px 9px rgba(0,0,0,0.18);
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 1px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.08),
      0 3px 9px rgba(0,0,0,0.18);
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.08),
      0 3px 9px rgba(0,0,0,0.18);
  }

  .public-list-page .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 1px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.08),
      0 3px 9px rgba(0,0,0,0.18);
  }
}

@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  html.theme-light .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-votes,
  html.theme-light .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-episodes,
  html.theme-light .public-list-page .row-meta.row-meta--compact-badges-mobile .btn-aiowiki,
  html.theme-light .public-list-page .row-meta.row-meta--compact-badges-mobile .badge-aiowiki{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      0 0 0 1px rgba(112,138,180,0.10),
      0 3px 9px rgba(54,82,122,0.10);
  }
}


/* ==========================================================================
   v292: Mobile landscape title color menu height fix
   - Scope only to touch/coarse landscape settings panels.
   - Keep the title color picker higher in the panel and make its option list
     scrollable so it does not run off the bottom of short landscape screens.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 681px) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl.is-open .title-color-menu{
    max-height: min(44vh, 220px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Global site-wide search */
.global-search-shell{
  position: relative;
  z-index: 35;
  margin: 14px auto 20px;
  max-width: 980px;
}
.global-search-form{
  position: relative;
  margin: 0;
}
.global-search-input-row{
  position: relative;
  display: block;
  width: 100%;
}
.global-search-input-icon{
  position: absolute;
  left: 17px;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--muted, #aeb7c8);
  opacity: 0.82;
  pointer-events: none;
  transform: translateY(-50%);
}
.global-search-input-icon svg{
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.global-search-input{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(154, 208, 255, 0.24);
  background: rgba(13, 17, 24, 0.78);
  color: var(--text, #f5f7fb);
  padding: 10px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.18);
  outline: none;
}
.global-search-input-row .global-search-input{
  width: 100%;
  padding-left: 46px;
}
.global-search-input:focus{
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.68);
  box-shadow: 0 0 0 3px rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.global-search-submit{
  flex: 0 0 auto;
  min-height: 46px;
  border-radius: 999px;
  white-space: nowrap;
}
.global-search-quick{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(154, 208, 255, 0.22);
  background: rgba(13, 17, 24, 0.96);
  box-shadow: 0 22px 54px rgba(0,0,0,0.34);
  backdrop-filter: blur(14px);
}
.global-search-quick-inner{
  display: grid;
  gap: 10px;
  max-height: min(560px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}
.global-search-quick-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
  color: var(--muted, #aeb7c8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.global-search-group{
  display: grid;
  gap: 6px;
}
.global-search-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.global-search-group-count{
  flex: 0 0 auto;
  color: var(--muted, #aeb7c8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 4px 0;
  text-transform: uppercase;
  opacity: 0.82;
}
.global-search-group-more{
  display: inline-flex;
  justify-self: start;
  margin-top: 2px;
  padding: 0 4px;
  color: var(--title-text-color, #9ad0ff);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.global-search-group-more:hover,
.global-search-group-more:focus-visible{
  text-decoration: underline;
  outline: none;
}
.global-search-group-title{
  color: var(--muted, #aeb7c8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 4px 0;
  text-transform: uppercase;
}
.global-search-result-link{
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.035);
}
.global-search-result-link:hover,
.global-search-result-link:focus-visible{
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.38);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
  outline: none;
}
.global-search-result-title{
  display: block;
  color: var(--title-text-color, #9ad0ff);
  font-weight: 800;
  line-height: 1.25;
}
.global-search-result-subtitle,
.global-search-result-excerpt{
  display: block;
  margin-top: 3px;
  color: var(--muted, #aeb7c8);
  font-size: 13px;
  line-height: 1.35;
}
.global-search-view-all{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--title-text-color, #9ad0ff);
  font-weight: 800;
  text-decoration: none;
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
}
.global-search-empty,
.global-search-loading{
  padding: 16px;
  color: var(--muted, #aeb7c8);
  text-align: center;
}
.search-page-card{
  display: grid;
  gap: 18px;
}
.search-page-form{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.search-page-form .global-search-input{
  min-height: 48px;
}
.search-summary-line{
  color: var(--muted, #aeb7c8);
  margin: 0;
}
.search-category-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-category-filter{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(154, 208, 255, 0.20);
  background: rgba(255,255,255,0.035);
}
.search-category-filter.is-active,
.search-category-filter:hover,
.search-category-filter:focus-visible{
  color: var(--title-text-color, #9ad0ff);
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.42);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
  outline: none;
}
.search-category-count{
  opacity: .76;
  font-size: 12px;
}
.search-results-page-groups{
  display: grid;
  gap: 18px;
}
.search-results-page-group{
  display: grid;
  gap: 10px;
}
.search-results-page-group h2{
  margin: 0;
}
.search-results-page-list{
  display: grid;
  gap: 10px;
}
.search-results-page-list .global-search-result-link{
  background: rgba(255,255,255,0.045);
}
html.theme-light .global-search-input{
  border-color: rgba(30, 41, 59, 0.16);
  background: rgba(255,255,255,0.94);
  color: #1d2430;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 10px 26px rgba(16,24,40,0.10);
}
html.theme-light .global-search-quick{
  border-color: rgba(30, 41, 59, 0.16);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 22px 54px rgba(16,24,40,0.18);
}
html.theme-light .global-search-result-link,
html.theme-light .search-category-filter{
  background: rgba(29, 111, 227, 0.045);
}
@media (max-width: 680px){
  .global-search-shell{
    margin-top: 10px;
    margin-bottom: 16px;
  }
  .global-search-input-row,
  .search-page-form{
    gap: 8px;
  }
  .global-search-submit,
  .search-page-form .btn{
    padding-left: 12px;
    padding-right: 12px;
  }
  .global-search-input{
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .global-search-input-row .global-search-input{
    padding-left: 44px;
  }
  .global-search-quick{
    border-radius: 18px;
  }
  .global-search-quick-inner{
    max-height: min(500px, 58vh);
  }
}
@media (max-width: 460px){
  .search-page-form{
    flex-direction: column;
  }
  .search-page-form .btn{
    width: 100%;
  }
}

/* Phase 3 global search results page polish */
.search-hero .muted{
  max-width: 860px;
}
.search-results-card{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.search-page-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.search-category-filters{
  padding: 4px 0 2px;
}
.search-category-filter{
  min-height: 38px;
  line-height: 1.15;
}
.search-category-filter.is-active{
  box-shadow: 0 0 0 2px rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
}
.search-category-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  min-height: 1.7em;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-weight: 800;
}
.search-results-page-group{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(154, 208, 255, 0.14);
  background: rgba(255,255,255,0.024);
}
.search-results-page-group-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.search-results-page-group-head h2{
  margin: 0;
}
.search-result-group-count{
  flex: 0 0 auto;
  color: var(--muted, #aeb7c8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.search-page-start{
  display: grid;
  gap: 6px;
  text-align: left;
}
.search-page-start span{
  display: block;
}
html.theme-light .search-category-count{
  background: rgba(29, 111, 227, 0.08);
}
html.theme-light .search-results-page-group{
  border-color: rgba(30, 41, 59, 0.12);
  background: rgba(29, 111, 227, 0.025);
}
@media (max-width: 720px){
  .search-results-page-group{
    padding: 12px;
    border-radius: 16px;
  }
  .search-results-page-group-head{
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .search-category-filter{
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
  }
}
@media (max-width: 460px){
  .search-category-filter{
    flex-basis: 100%;
  }
}

/* Global search layout and quick-result cleanup. */
main > .global-search-shell{
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0 auto 14px;
}
.global-search-quick-inner{
  gap: 8px;
  max-height: min(380px, 52vh);
  padding: 10px;
}
.global-search-quick-heading{
  padding: 0 4px;
}
.global-search-quick .global-search-group{
  gap: 5px;
}
.global-search-quick .global-search-group-head{
  justify-content: flex-start;
}
.global-search-quick .global-search-group-count,
.global-search-quick .global-search-group-more{
  display: none;
}
.global-search-quick .global-search-group-title{
  padding: 2px 4px 0;
  font-size: 11px;
  letter-spacing: .04em;
}
.global-search-quick .global-search-result-link{
  padding: 8px 10px;
  border-radius: 12px;
}
.global-search-quick .global-search-result-title{
  line-height: 1.22;
}
.global-search-quick .global-search-result-subtitle{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.28;
}
.global-search-quick .global-search-view-all{
  padding: 8px 10px;
  border-radius: 12px;
}
@media (max-width: 680px){
  main > .global-search-shell{
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
  }
  .global-search-quick-inner{
    max-height: min(340px, 50vh);
  }
}


/* Search page quiet layout pass. */
.search-hero-compact{
  padding-bottom: 10px;
}
.search-hero-compact h1{
  margin-bottom: 6px;
}
.search-hero-compact .muted{
  max-width: 520px;
}
.search-page-form{
  display: block;
}
.search-page-input-row{
  display: block;
}
.search-page-card{
  gap: 14px;
}
.search-summary-line{
  font-size: 14px;
  opacity: .86;
}
.search-category-filters{
  gap: 7px;
  padding: 0;
}
.search-category-filter{
  min-height: 32px;
  padding: 5px 10px;
  gap: 5px;
  font-size: 14px;
  background: rgba(255,255,255,0.025);
}
.search-category-filter.is-active{
  box-shadow: 0 0 0 1px rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
}
.search-category-count{
  min-width: 1.55em;
  min-height: 1.55em;
  padding: 0 5px;
  font-size: 11px;
  opacity: .70;
}
.search-results-page-groups{
  gap: 14px;
}
.search-results-page-group{
  gap: 9px;
  padding: 12px;
}
.search-results-page-group-head h2{
  font-size: clamp(22px, 2.2vw, 28px);
}
.search-result-group-count{
  opacity: .78;
}
.search-results-page-list{
  gap: 8px;
}
.search-results-page-list .global-search-result-link{
  padding: 9px 11px;
  border-radius: 12px;
}
.search-results-page-list .global-search-result-excerpt{
  font-size: 13px;
  line-height: 1.32;
}
.search-results-extra{
  margin-top: 2px;
}
.search-results-extra summary{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 208, 255, 0.16);
  color: var(--title-text-color, #9ad0ff);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.08);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.search-results-extra summary::-webkit-details-marker{
  display: none;
}
.search-results-extra summary:hover,
.search-results-extra summary:focus-visible{
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.36);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.12);
  outline: none;
}
.search-results-page-list-extra{
  margin-top: 8px;
}
html.theme-light .search-category-filter{
  background: rgba(29, 111, 227, 0.035);
}
html.theme-light .search-results-extra summary{
  border-color: rgba(30, 41, 59, 0.12);
}
@media (max-width: 720px){
  .search-category-filter{
    flex: 0 1 auto;
    justify-content: center;
  }
}
@media (max-width: 460px){
  .search-category-filter{
    flex: 1 1 calc(50% - 7px);
  }
}

/* ========================================================================== 
   v299: Album/season detail badge glow clipping fix
   - Keep the fix scoped to episode rows inside album and season detail lists.
   - Let the under-title badge glow render naturally instead of being clipped
     into a faint rectangular box by the mobile title-cell overflow rule.
   ========================================================================== */
@media (max-width: 1024px){
  .album-detail-table .episodes-table td:nth-child(2),
  .season-detail-table .episodes-table td:nth-child(2),
  .album-detail-table .episodes-table .row-meta--detail,
  .season-detail-table .episodes-table .row-meta--detail{
    overflow: visible;
  }
}

/* ========================================================================== 
   v300: Search page light mode readability fix
   - Keep the change scoped to the Search page results card and its children.
   - Strengthen light-mode surfaces and foreground colors so result titles,
     subtitles, excerpts, filters, and counts remain readable.
   ========================================================================== */
html.theme-light .search-results-card{
  color: #1d2430;
  background: rgba(255,255,255,0.94);
  border-color: rgba(30, 41, 59, 0.18);
  box-shadow: 0 14px 34px rgba(16,24,40,0.10);
}
html.theme-light .search-results-card .global-search-input-icon{
  color: #64748b;
  opacity: 1;
}
html.theme-light .search-summary-line{
  color: #334155;
  opacity: 1;
}
html.theme-light .search-summary-line strong{
  color: #111827;
}
html.theme-light .search-category-filter{
  color: #334155;
  border-color: rgba(30, 41, 59, 0.14);
  background: rgba(255,255,255,0.80);
}
html.theme-light .search-category-filter.is-active,
html.theme-light .search-category-filter:hover,
html.theme-light .search-category-filter:focus-visible{
  color: #0f2138;
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.30);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.11);
}
html.theme-light .search-category-count{
  color: #1d4ed8;
  background: rgba(29, 111, 227, 0.10);
  opacity: 1;
}
html.theme-light .search-results-page-group{
  color: #1d2430;
  border-color: rgba(30, 41, 59, 0.14);
  background: rgba(248,250,252,0.94);
}
html.theme-light .search-results-page-group-head h2{
  color: #111827;
}
html.theme-light .search-result-group-count{
  color: #64748b;
  opacity: 1;
}
html.theme-light .search-results-page-list .global-search-result-link{
  color: #1d2430;
  border-color: rgba(30, 41, 59, 0.10);
  background: rgba(255,255,255,0.86);
}
html.theme-light .search-results-page-list .global-search-result-link:hover,
html.theme-light .search-results-page-list .global-search-result-link:focus-visible{
  border-color: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.30);
  background: rgba(var(--anim-glow-primary-rgb, 29, 111, 227), 0.09);
}
html.theme-light .search-results-page-list .global-search-result-title{
  color: #111827;
}
html.theme-light .search-results-page-list .global-search-result-subtitle,
html.theme-light .search-results-page-list .global-search-result-excerpt{
  color: #475569;
  opacity: 1;
}
html.theme-light .search-results-extra summary{
  color: #0f3f87;
  border-color: rgba(30, 41, 59, 0.16);
  background: rgba(29, 111, 227, 0.09);
}
html.theme-light .search-page-card .global-search-empty,
html.theme-light .search-page-start{
  color: #334155;
}
html.theme-light .search-page-start strong{
  color: #111827;
}


/* ========================================================================== 
   v302: Search page submit button restore
   - Keep the change scoped to the full Search page form.
   - The full results page remains submit-based so it does not reload while typing.
   ========================================================================== */
.search-page-form{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}
.search-page-input-row{
  min-width: 0;
}
.search-page-submit{
  align-self: stretch;
  min-width: 104px;
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 560px){
  .search-page-form{
    grid-template-columns: 1fr;
  }
  .search-page-submit{
    width: 100%;
  }
}

/* ========================================================================== 
   v303: Search result title color follows title setting in light mode
   - Keep the change scoped to full Search page result item titles.
   - Restore the dynamic title color variable that dark mode already uses.
   ========================================================================== */
html.theme-light .search-results-page-list .global-search-result-title{
  color: var(--title-text-color, #1d6fe3);
}

/* ========================================================================== 
   v304: Album tab under-title badge glow parity
   - Keep the change scoped to the public Albums tab under-title badge row.
   - Add the same visible colored glow strength used by the Album detail list
     badges without changing list layout or other page types.
   ========================================================================== */
.public-list-page--albums .albums-table td:nth-child(2),
.public-list-page--albums .albums-table td:nth-child(2) .cell-fx,
.public-list-page--albums .albums-table .row-meta--albums{
  overflow: visible;
}

.public-list-page--albums .albums-table .row-meta--albums .badge-votes{
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30), rgba(14, 23, 39, 0.88) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--albums .albums-table .row-meta--albums .badge-episodes{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.26), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--albums .albums-table .row-meta--albums .btn-aiowiki,
.public-list-page--albums .albums-table .row-meta--albums .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #EAF3FF);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.28), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 30px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-votes{
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.30), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    0 0 24px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-episodes{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.30), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .btn-aiowiki,
html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #274A74);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.30), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    0 0 24px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}


/* ========================================================================== 
   v305: Seasons tab under-title badge glow parity
   - Keep the change scoped to the public Seasons tab under-title badge row.
   - Add the same visible colored glow strength used by the Season detail list
     badges without changing list layout or other page types.
   ========================================================================== */
.public-list-page--seasons .seasons-table td:nth-child(2),
.public-list-page--seasons .seasons-table td:nth-child(2) .cell-fx,
.public-list-page--seasons .seasons-table .row-meta--seasons{
  overflow: visible;
}

.public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes{
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30), rgba(14, 23, 39, 0.88) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.26), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--seasons .seasons-table .row-meta--seasons .btn-aiowiki,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #EAF3FF);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.28), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 30px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes{
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248, 251, 241, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.30), rgba(236, 244, 228, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    0 0 24px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.30), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .btn-aiowiki,
html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #274A74);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.30), rgba(229, 238, 250, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    0 0 24px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}


/* ========================================================================== 
   v306: Public tab badge glow standardization
   - Keep the badge glow across public tab under-title badge rows.
   - Standardize it across tabs with a restrained, consistent treatment.
   - Scope the change to row-meta badges/buttons on public list pages only.
   ========================================================================== */
.public-list-page .row-meta,
.public-list-page .row-meta .badge,
.public-list-page .row-meta .btn,
.public-list-page--albums .albums-table td:nth-child(2),
.public-list-page--albums .albums-table td:nth-child(2) .cell-fx,
.public-list-page--seasons .seasons-table td:nth-child(2),
.public-list-page--seasons .seasons-table td:nth-child(2) .cell-fx,
.public-list-page--episodes .episodes-table td:nth-child(2),
.public-list-page--episodes .episodes-table td:nth-child(2) .cell-fx,
.public-list-page--characters .characters-table td:nth-child(2),
.public-list-page--characters .characters-table td:nth-child(2) .cell-fx,
.public-list-page--arcs .arcs-table td:nth-child(1),
.public-list-page--arcs .arcs-table td:nth-child(1) .cell-fx,
.public-list-page--elsewhere .elsewhere-table td:nth-child(3),
.public-list-page--elsewhere .elsewhere-table td:nth-child(3) .cell-fx,
.public-list-page--videos .elsewhere-table td:nth-child(3),
.public-list-page--videos .elsewhere-table td:nth-child(3) .cell-fx{
  overflow: visible;
}

.public-list-page--albums .albums-table .row-meta--albums .badge-votes,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes,
.public-list-page .row-meta .badge-votes{
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.28), rgba(14, 23, 39, 0.89) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.17),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--albums .albums-table .row-meta--albums .badge-episodes,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes,
.public-list-page .row-meta .badge-episodes{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.24), rgba(14, 23, 39, 0.89) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.16),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page--albums .albums-table .row-meta--albums .btn-aiowiki,
.public-list-page--albums .albums-table .row-meta--albums .badge-aiowiki,
.public-list-page--seasons .seasons-table .row-meta--seasons .btn-aiowiki,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-aiowiki,
.public-list-page .row-meta .btn-aiowiki,
.public-list-page .row-meta .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #EAF3FF);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.26), rgba(14, 23, 39, 0.90) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.17),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.public-list-page .row-meta .badge-album-number,
.public-list-page .row-meta .badge-season-number,
.public-list-page .row-meta .badge-episode-num,
.public-list-page .row-meta .badge-episode-rating{
  color: #DCEBFF;
  border-color: rgba(117, 177, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(117, 177, 255, 0.22), rgba(14, 23, 39, 0.89) 60%);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 22px rgba(117, 177, 255, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-votes,
html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes,
html.theme-light .public-list-page .row-meta .badge-votes{
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248, 251, 241, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.91) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.13),
    0 0 18px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-episodes,
html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes,
html.theme-light .public-list-page .row-meta .badge-episodes{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.91) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.13),
    0 0 18px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

html.theme-light .public-list-page--albums .albums-table .row-meta--albums .btn-aiowiki,
html.theme-light .public-list-page--albums .albums-table .row-meta--albums .badge-aiowiki,
html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .btn-aiowiki,
html.theme-light .public-list-page--seasons .seasons-table .row-meta--seasons .badge-aiowiki,
html.theme-light .public-list-page .row-meta .btn-aiowiki,
html.theme-light .public-list-page .row-meta .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #274A74);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.91) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.13),
    0 0 18px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
}

html.theme-light .public-list-page .row-meta .badge-album-number,
html.theme-light .public-list-page .row-meta .badge-season-number,
html.theme-light .public-list-page .row-meta .badge-episode-num,
html.theme-light .public-list-page .row-meta .badge-episode-rating{
  color: #29507F;
  border-color: rgba(107, 156, 220, 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.96)),
    linear-gradient(135deg, rgba(107, 156, 220, 0.26), rgba(229, 238, 250, 0.91) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.12),
    0 0 18px rgba(107, 156, 220, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(107, 156, 220, 0.18);
}


/* ========================================================================== 
   v307: Complete public tab badge glow pass
   - The previous pass was too subtle on several public tabs.
   - Apply the visible badge glow directly to the under-title badge rows for
     Characters, Episodes, Elsewhere, Videos, and Arcs.
   - Keep the glow on the badge itself and keep row containers transparent.
   ========================================================================== */
.public-list-page--characters .characters-table td:nth-child(2),
.public-list-page--characters .characters-table td:nth-child(2) .cell-fx,
.public-list-page--episodes .episodes-table td:nth-child(2),
.public-list-page--episodes .episodes-table td:nth-child(2) .cell-fx,
.public-list-page--elsewhere .elsewhere-table td:nth-child(3),
.public-list-page--elsewhere .elsewhere-table td:nth-child(3) .cell-fx,
.public-list-page--videos .elsewhere-table td:nth-child(3),
.public-list-page--videos .elsewhere-table td:nth-child(3) .cell-fx,
.public-list-page--arcs .arcs-table td:nth-child(1),
.public-list-page--arcs .arcs-table td:nth-child(1) .cell-fx,
.public-list-page--characters .characters-table .row-meta,
.public-list-page--episodes .episodes-table .row-meta,
.public-list-page--elsewhere .elsewhere-table .row-meta,
.public-list-page--videos .elsewhere-table .row-meta,
.public-list-page--arcs .arcs-table .row-meta{
  overflow: visible !important;
  background: transparent !important;
}

.public-list-page--characters .characters-table .row-meta .badge,
.public-list-page--episodes .episodes-table .row-meta .badge,
.public-list-page--elsewhere .elsewhere-table .row-meta .badge,
.public-list-page--videos .elsewhere-table .row-meta .badge,
.public-list-page--arcs .arcs-table .row-meta .badge,
.public-list-page--characters .characters-table .row-meta .btn-mini,
.public-list-page--episodes .episodes-table .row-meta .btn-mini,
.public-list-page--elsewhere .elsewhere-table .row-meta .btn-mini,
.public-list-page--videos .elsewhere-table .row-meta .btn-mini,
.public-list-page--arcs .arcs-table .row-meta .btn-mini{
  position: relative;
  overflow: visible !important;
  background-clip: padding-box;
}

.public-list-page--characters .characters-table .row-meta .badge-votes,
.public-list-page--episodes .episodes-table .row-meta .badge-votes,
.public-list-page--elsewhere .elsewhere-table .row-meta .badge-votes,
.public-list-page--videos .elsewhere-table .row-meta .badge-votes,
.public-list-page--arcs .arcs-table .row-meta .badge-votes{
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34), rgba(14, 23, 39, 0.90) 58%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 30px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.24),
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.public-list-page--characters .characters-table .row-meta .badge-episodes,
.public-list-page--episodes .episodes-table .row-meta .badge-episodes,
.public-list-page--elsewhere .elsewhere-table .row-meta .badge-episodes,
.public-list-page--videos .elsewhere-table .row-meta .badge-episodes,
.public-list-page--arcs .arcs-table .row-meta .badge-episodes{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.30), rgba(14, 23, 39, 0.90) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 30px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.22),
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.public-list-page--characters .characters-table .row-meta .btn-aiowiki,
.public-list-page--characters .characters-table .row-meta .badge-aiowiki,
.public-list-page--episodes .episodes-table .row-meta .btn-aiowiki,
.public-list-page--episodes .episodes-table .row-meta .badge-aiowiki,
.public-list-page--elsewhere .elsewhere-table .row-meta .btn-aiowiki,
.public-list-page--elsewhere .elsewhere-table .row-meta .badge-aiowiki,
.public-list-page--videos .elsewhere-table .row-meta .btn-aiowiki,
.public-list-page--videos .elsewhere-table .row-meta .badge-aiowiki,
.public-list-page--arcs .arcs-table .row-meta .btn-aiowiki,
.public-list-page--arcs .arcs-table .row-meta .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #EAF3FF);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.32), rgba(14, 23, 39, 0.91) 62%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 32px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24),
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.public-list-page--episodes .episodes-table .row-meta .badge-episode-num,
.public-list-page--episodes .episodes-table .row-meta .badge-episode-rating,
.public-list-page--arcs .arcs-table .row-meta .badge:not(.badge-votes):not(.badge-episodes):not(.badge-aiowiki){
  color: #DCEBFF;
  border-color: rgba(117, 177, 255, 0.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(117, 177, 255, 0.28), rgba(14, 23, 39, 0.90) 60%);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.24),
    0 0 28px rgba(117, 177, 255, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

html.theme-light .public-list-page--characters .characters-table .row-meta .badge-votes,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-votes,
html.theme-light .public-list-page--elsewhere .elsewhere-table .row-meta .badge-votes,
html.theme-light .public-list-page--videos .elsewhere-table .row-meta .badge-votes,
html.theme-light .public-list-page--arcs .arcs-table .row-meta .badge-votes{
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248, 251, 241, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.30), rgba(236, 244, 228, 0.92) 72%);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    0 0 20px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.11),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.20);
}

html.theme-light .public-list-page--characters .characters-table .row-meta .badge-episodes,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-episodes,
html.theme-light .public-list-page--elsewhere .elsewhere-table .row-meta .badge-episodes,
html.theme-light .public-list-page--videos .elsewhere-table .row-meta .badge-episodes,
html.theme-light .public-list-page--arcs .arcs-table .row-meta .badge-episodes{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.30), rgba(232, 241, 252, 0.92) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    0 0 20px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.11),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.20);
}

html.theme-light .public-list-page--characters .characters-table .row-meta .btn-aiowiki,
html.theme-light .public-list-page--characters .characters-table .row-meta .badge-aiowiki,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .btn-aiowiki,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-aiowiki,
html.theme-light .public-list-page--elsewhere .elsewhere-table .row-meta .btn-aiowiki,
html.theme-light .public-list-page--elsewhere .elsewhere-table .row-meta .badge-aiowiki,
html.theme-light .public-list-page--videos .elsewhere-table .row-meta .btn-aiowiki,
html.theme-light .public-list-page--videos .elsewhere-table .row-meta .badge-aiowiki,
html.theme-light .public-list-page--arcs .arcs-table .row-meta .btn-aiowiki,
html.theme-light .public-list-page--arcs .arcs-table .row-meta .badge-aiowiki{
  color: var(--list-pill-aiowiki-color, #274A74);
  border-color: rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.30), rgba(229, 238, 250, 0.92) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.14),
    0 0 20px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.11),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.20);
}

html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-episode-num,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-episode-rating,
html.theme-light .public-list-page--arcs .arcs-table .row-meta .badge:not(.badge-votes):not(.badge-episodes):not(.badge-aiowiki){
  color: #29507F;
  border-color: rgba(107, 156, 220, 0.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.96)),
    linear-gradient(135deg, rgba(107, 156, 220, 0.28), rgba(229, 238, 250, 0.92) 72%);
  box-shadow:
    0 10px 22px rgba(46, 87, 138, 0.13),
    0 0 20px rgba(107, 156, 220, 0.11),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(107, 156, 220, 0.20);
}


/* ==========================================================================
   v308: Arc detail episode list overflow cleanup
   - Remove the mobile title-cell overflow clipping on the Episodes list inside
     Arc detail pages so the under-title badges do not render a square backdrop.
   ========================================================================== */
@media (max-width: 1024px) {
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) {
    overflow: visible;
  }
}


/* ========================================================================== 
   v309: Stats leaderboard mobile table header polish
   - Keep the public Stats leaderboard header from inheriting the mobile sticky
     table header's dark block after sticky behavior is disabled.
   - Tighten the mobile leaderboard rating/votes columns so the Votes header
     stays visible instead of clipping at the card edge.
   ========================================================================== */
@media (max-width: 680px) {
  body[data-page-kind="stats"] .lb-card .data-table thead,
  body[data-page-kind="stats"] .lb-card .data-table thead th {
    background: transparent !important;
    box-shadow: none !important;
    background-clip: border-box !important;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table {
    table-layout: fixed;
    width: 100%;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table--ranked th:first-child,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table--ranked td:first-child {
    width: 34px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th:nth-last-child(2),
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td:nth-last-child(2) {
    width: 92px !important;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th:last-child,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td:last-child {
    width: 58px;
    text-align: right;
    white-space: nowrap;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table .rating-meter--sm {
    max-width: 78px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table .rating-meter--sm .rating-meter__text {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td {
    padding-left: 5px;
    padding-right: 5px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table--ranked th:first-child,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table--ranked td:first-child {
    width: 30px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th:nth-last-child(2),
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td:nth-last-child(2) {
    width: 84px !important;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table th:last-child,
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table td:last-child {
    width: 52px;
  }

  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table .rating-meter--sm {
    max-width: 70px;
  }
}


/* ==========================================================================
   v310: Stats leaderboard row hover tint
   - Replace the harsh black Stats leaderboard row hover with a softer tint that
     follows the leaderboard card color.
   ========================================================================== */
body[data-page-kind="stats"] .lb-card .stats-leaderboard-table tbody tr:hover td {
  background: rgba(54, 207, 192, 0.10) !important;
}

@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  body[data-page-kind="stats"] .lb-card .stats-leaderboard-table tbody tr:hover td {
    background: color-mix(in srgb, var(--lb-color) 12%, transparent) !important;
  }
}

/* ========================================================================== 
   v311: Quick search light-mode supporting text readability
   - Keep the change scoped to the global quick search overlay in Light theme.
   - Match the stronger readable supporting-text colors used on the full Search page.
   ========================================================================== */
html.theme-light .global-search-quick .global-search-quick-heading,
html.theme-light .global-search-quick .global-search-group-title,
html.theme-light .global-search-quick .global-search-group-count,
html.theme-light .global-search-quick .global-search-result-subtitle,
html.theme-light .global-search-quick .global-search-result-excerpt,
html.theme-light .global-search-quick .global-search-empty,
html.theme-light .global-search-quick .global-search-loading{
  color: #475569;
  opacity: 1;
}
html.theme-light .global-search-quick .global-search-quick-heading,
html.theme-light .global-search-quick .global-search-group-title,
html.theme-light .global-search-quick .global-search-group-count{
  color: #64748b;
}


/* -------------------------------------------------------------------------
   v312: Stats leaderboard full-row click affordance
   - Only changes the cursor for Stats leaderboard rows that JavaScript marks
     as using the first title link as their row destination.
   ------------------------------------------------------------------------- */
body[data-page-kind="stats"] .lb-card .stats-leaderboard-table tbody tr.stats-leaderboard-clickable-row {
  cursor: pointer;
}


/* -------------------------------------------------------------------------
   v313: Stats leaderboard row click activation fix
   - Keeps the existing Stats-only clickable row cursor rule available under
     the newest cache-busted stylesheet revision.
   ------------------------------------------------------------------------- */

/* v314: Public tab filter text boxes should fill their filter field so placeholder and typed text do not get clipped. */
.public-list-page .list-filters input.input[type="text"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   v315: Public tab filter input sizing
   - Keeps public tab text filter boxes compact on desktop so single-field
     tabs do not stretch across the whole filter card.
   - Slightly reduces the Episodes filter input text on mobile so the full
     placeholder fits without clipping.
   ------------------------------------------------------------------------- */
@media (min-width: 681px) {
  .public-list-page .list-filters input.input[type="text"] {
    width: min(100%, 382px);
    max-width: 382px;
  }
}

@media (max-width: 680px) {
  .public-list-page--episodes #episodesQ {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------------------
   v316: Public tab search label alignment
   - Aligns Search Episodes, Search Albums, and other public search labels
     with the text inside their matching search boxes instead of the outer
     border of the input.
   - Targets only the main query labels, leaving sort/page-size labels alone.
   ------------------------------------------------------------------------- */
.public-list-page .list-filters label.label[for$="Q"] {
  display: block;
  padding-left: var(--ui-control-padding-x, 16px);
}

/* ========================================================================== 
   v322: Random article dice single half-turn spin fix
   - Spin the actual dice element as one piece instead of a pseudo-face.
   - Keep all five real pips visible at rest.
   - Give the center pip the same small hover pulse as the corner pips so it
     visibly participates while the whole dice performs a 180-degree spin.
   ========================================================================== */
@keyframes randomArticleDiceWholeHalfSpinV322{
  0%{
    transform: translateY(0) rotate(0deg) scale(1) translateZ(0);
  }
  36%{
    transform: translateY(-4px) rotate(88deg) scale(1.06) translateZ(0);
  }
  72%{
    transform: translateY(-3px) rotate(176deg) scale(1.03) translateZ(0);
  }
  100%{
    transform: translateY(-3px) rotate(180deg) scale(1) translateZ(0);
  }
}

@keyframes randomArticleDicePipPulseV322{
  0%, 100%{
    opacity: 1;
    transform: scale(1);
  }
  36%{
    opacity: 0.86;
    transform: scale(0.94);
  }
  72%{
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes randomArticleDiceCenterPipPulseV322{
  0%, 100%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  36%{
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.94);
  }
  72%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

body > .container > nav > .random-article-dice{
  overflow: hidden !important;
  isolation: isolate;
  transform-origin: center center !important;
  transform: translateY(0) rotate(0deg) scale(1) translateZ(0);
  transform-style: flat !important;
  backface-visibility: visible !important;
}

body > .container > nav > .random-article-dice::before,
body > .container > nav > .random-article-dice::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

body > .container > nav > .random-article-dice .random-article-dice__shine{
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0) 54%);
  opacity: 0.38 !important;
  pointer-events: none;
  z-index: 1;
  animation: none !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip{
  display: block !important;
  opacity: 1 !important;
  z-index: 2;
  transform-origin: center center;
  animation: none;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--c{
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine){
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning{
    animation: randomArticleDiceWholeHalfSpinV322 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    will-change: transform;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip:not(.random-article-dice__pip--c){
    animation: randomArticleDicePipPulseV322 680ms ease both;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
    animation: randomArticleDiceCenterPipPulseV322 680ms ease both;
  }

  html.motion-full body > .container > nav > .random-article-dice:active{
    animation: none !important;
    transform: translateY(-1px) rotate(180deg) scale(0.98) translateZ(0);
  }
}

html.motion-reduce body > .container > nav > .random-article-dice,
html.motion-off body > .container > nav > .random-article-dice,
html.motion-reduce body > .container > nav > .random-article-dice:hover,
html.motion-reduce body > .container > nav > .random-article-dice:focus-visible,
html.motion-reduce body > .container > nav > .random-article-dice.is-hover-spinning,
html.motion-off body > .container > nav > .random-article-dice:hover,
html.motion-off body > .container > nav > .random-article-dice:focus-visible,
html.motion-off body > .container > nav > .random-article-dice.is-hover-spinning{
  animation: none !important;
  transform: translateY(0) rotate(0deg) scale(1) translateZ(0) !important;
  will-change: auto;
}

html.motion-reduce body > .container > nav > .random-article-dice .random-article-dice__pip,
html.motion-off body > .container > nav > .random-article-dice .random-article-dice__pip{
  animation: none !important;
}

@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) body > .container > nav > .random-article-dice,
  html:not(.motion-full) body > .container > nav > .random-article-dice:hover,
  html:not(.motion-full) body > .container > nav > .random-article-dice:focus-visible,
  html:not(.motion-full) body > .container > nav > .random-article-dice.is-hover-spinning{
    animation: none !important;
    transform: translateY(0) rotate(0deg) scale(1) translateZ(0) !important;
    will-change: auto;
  }

  html:not(.motion-full) body > .container > nav > .random-article-dice .random-article-dice__pip{
    animation: none !important;
  }
}



/* ========================================================================== 
   v323: Random article dice single-spin cleanup
   - Keep the hover spin attached to the JS replay class only, so the original
     hover keyframes cannot run again while the mouse remains over the dice.
   - Use a flat 2D half-turn so the dice rotates as one piece without flipping.
   ========================================================================== */
@keyframes randomArticleDiceSingleHalfTurnV323{
  0%{
    transform: translateY(0) rotate(0deg) scale(1) translateZ(0);
  }
  45%{
    transform: translateY(-4px) rotate(92deg) scale(1.05) translateZ(0);
  }
  100%{
    transform: translateY(-3px) rotate(180deg) scale(1) translateZ(0);
  }
}

@media (hover: hover) and (pointer: fine){
  html.motion-full body > .container > nav > .random-article-dice:hover:not(.is-hover-spinning):not(:active),
  html.motion-full body > .container > nav > .random-article-dice:focus-visible:not(.is-hover-spinning){
    animation: none !important;
    transform: translateY(0) rotate(0deg) scale(1) translateZ(0) !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning{
    animation: randomArticleDiceSingleHalfTurnV323 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform-origin: center center !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    will-change: transform;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip:not(.random-article-dice__pip--c){
    animation: randomArticleDicePipPulseV322 680ms ease both !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
    animation: randomArticleDiceCenterPipPulseV322 680ms ease both !important;
  }
}


/* ========================================================================== 
   v324: Random article dice one-half-turn guard
   - Fully neutralize the older plain :hover/:focus animation path so it cannot
     start before the JS replay class is applied.
   - Keep the visible half-turn attached only to .is-hover-spinning.
   ========================================================================== */
@keyframes randomArticleDiceSingleHalfTurnV324{
  0%{
    transform: translateY(0) rotate(0deg) scale(1) translateZ(0);
  }
  45%{
    transform: translateY(-4px) rotate(92deg) scale(1.05) translateZ(0);
  }
  100%{
    transform: translateY(-3px) rotate(180deg) scale(1) translateZ(0);
  }
}

@media (hover: hover) and (pointer: fine){
  html.motion-full body > .container > nav > .random-article-dice:hover,
  html.motion-full body > .container > nav > .random-article-dice:focus-visible{
    animation: none !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:hover,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:focus-visible{
    animation: randomArticleDiceSingleHalfTurnV324 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform-origin: center center !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    will-change: transform;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip:not(.random-article-dice__pip--c){
    animation: randomArticleDicePipPulseV322 680ms ease both !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
    animation: randomArticleDiceCenterPipPulseV322 680ms ease both !important;
  }
}


/* ========================================================================== 
   v326: Random article dice single quarter-turn adjustment
   - Keep the single-spin safeguards from v325.
   - Reduce the rotation from a 180 degree half-turn to a 90 degree turn.
   - Preserve the existing single-run JS-triggered animation flow.
   ========================================================================== */
@keyframes randomArticleDiceQuarterTurnV326{
  0%{
    transform: rotate(0deg) scale(1) translateZ(0);
  }
  45%{
    transform: rotate(46deg) scale(1.04) translateZ(0);
  }
  100%{
    transform: rotate(90deg) scale(1) translateZ(0);
  }
}

@media (hover: hover) and (pointer: fine){
  html.motion-full body > .container > nav > .random-article-dice:not(.is-hover-spinning),
  html.motion-full body > .container > nav > .random-article-dice:hover:not(.is-hover-spinning),
  html.motion-full body > .container > nav > .random-article-dice:focus-visible:not(.is-hover-spinning){
    animation: none !important;
    transform: rotate(0deg) scale(1) translateZ(0) !important;
    transform-origin: center center !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:hover,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:focus-visible{
    animation-name: randomArticleDiceQuarterTurnV326 !important;
    animation-duration: 680ms !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    transform-origin: center center !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    will-change: transform;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip:not(.random-article-dice__pip--c){
    animation: randomArticleDicePipPulseV322 680ms ease 0ms 1 both !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
    animation: randomArticleDiceCenterPipPulseV322 680ms ease 0ms 1 both !important;
  }
}


/* ========================================================================== 
   v327: Random article dice direct smooth quarter-turn
   - Use a direct transform transition for the hover class instead of another
     keyframe animation, avoiding stacked or inherited spin paths.
   - Rotate once from 0 degrees to 90 degrees with no midpoint scale/overshoot.
   - Keep the pips still and visible so the whole dice face moves as one piece.
   ========================================================================== */
@media (hover: hover) and (pointer: fine){
  html.motion-full body > .container > nav > .random-article-dice,
  html.motion-full body > .container > nav > .random-article-dice:hover,
  html.motion-full body > .container > nav > .random-article-dice:focus-visible{
    animation: none !important;
    transform: rotate(0deg) scale(1) translateZ(0) !important;
    transform-origin: center center !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    transition:
      box-shadow 150ms ease,
      filter 150ms ease,
      background 150ms ease !important;
  }

  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:hover,
  html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:focus-visible{
    animation: none !important;
    transform: rotate(90deg) scale(1) translateZ(0) !important;
    transition:
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 150ms ease,
      filter 150ms ease,
      background 150ms ease !important;
    will-change: transform;
  }

  html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip{
    animation: none !important;
  }

  html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--c{
    transform: translate(-50%, -50%) !important;
  }
}


/* ========================================================================== 
   v328: Random article dice cross-browser pip alignment
   - Use a fixed 3x3 CSS grid for the dice pips instead of mixed absolute
     top/right/bottom positioning and a center-pip transform.
   - This keeps Chromium/Edge and Firefox from composing the pip positions
     differently while the parent dice is transformed.
   ========================================================================== */
body > .container > nav > .random-article-dice{
  display: inline-grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  padding: 6px !important;
  box-sizing: border-box;
}

body > .container > nav > .random-article-dice .random-article-dice__shine{
  position: absolute !important;
  inset: 0 !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 4px !important;
  height: 4px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  align-self: center;
  justify-self: center;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tl{
  grid-column: 1;
  grid-row: 1;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tr{
  grid-column: 3;
  grid-row: 1;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--c{
  grid-column: 2;
  grid-row: 2;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--bl{
  grid-column: 1;
  grid-row: 3;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--br{
  grid-column: 3;
  grid-row: 3;
}


/* ========================================================================== 
   v329: Random article dice center-pip grid alignment fix
   - Give the center pip the same no-transform behavior as the corner pips.
   - Match the motion-full selector specificity from older rules so earlier
     center-pip translate and pulse rules cannot move it inside the grid cell.
   ========================================================================== */
body > .container > nav > .random-article-dice .random-article-dice__pip,
body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
}


/* ========================================================================== 
   v330: Random article dice Edge pip-size and leave-state cleanup
   - Use fixed absolute pip positions in every dice state instead of grid cells,
     so Chromium/Edge does not render different dot sizes while transformed.
   - Keep the same pip layout active before hover, during hover, and after mouse
     leave so the dice does not fall back to the older visual layout.
   ========================================================================== */
body > .container > nav > .random-article-dice,
body > .container > nav > .random-article-dice:hover,
body > .container > nav > .random-article-dice:focus-visible,
body > .container > nav > .random-article-dice.is-hover-spinning,
html.motion-full body > .container > nav > .random-article-dice,
html.motion-full body > .container > nav > .random-article-dice:hover,
html.motion-full body > .container > nav > .random-article-dice:focus-visible,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning{
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip{
  position: absolute !important;
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  max-width: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 4px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(244, 250, 255, 0.96) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tl,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip--tl,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--tl,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--tl,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--tl,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip--tl,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--tl,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--tl{
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tr,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip--tr,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--tr,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--tr,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--tr,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip--tr,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--tr,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--tr{
  top: 8px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--c,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip--c,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--c,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--c{
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--bl,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip--bl,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--bl,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--bl,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--bl,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip--bl,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--bl,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--bl{
  top: 24px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--br,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip--br,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--br,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--br,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--br,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip--br,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip--br,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip--br{
  top: 24px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;
}

/* ========================================================================== 
   v331: Random article dice centered pips and smooth leave reset
   - Center every pip from the dice face center using CSS variables, so normal,
     hover, focus, and spin states all use the same exact coordinates.
   - Keep all pip sizing fixed and remove every pip transform/animation path.
   - Include transform in the base dice transition so leaving hover eases back
     instead of snapping or visually shifting.
   ========================================================================== */
body > .container > nav > .random-article-dice,
body > .container > nav > .random-article-dice:hover,
body > .container > nav > .random-article-dice:focus-visible,
body > .container > nav > .random-article-dice.is-hover-spinning,
html.motion-full body > .container > nav > .random-article-dice,
html.motion-full body > .container > nav > .random-article-dice:hover,
html.motion-full body > .container > nav > .random-article-dice:focus-visible,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning{
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  animation: none !important;
  transform-origin: center center !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 150ms ease,
    filter 150ms ease,
    background 150ms ease !important;
}

body > .container > nav > .random-article-dice,
body > .container > nav > .random-article-dice:hover:not(.is-hover-spinning),
body > .container > nav > .random-article-dice:focus-visible:not(.is-hover-spinning),
html.motion-full body > .container > nav > .random-article-dice,
html.motion-full body > .container > nav > .random-article-dice:hover:not(.is-hover-spinning),
html.motion-full body > .container > nav > .random-article-dice:focus-visible:not(.is-hover-spinning){
  transform: rotate(0deg) scale(1) translateZ(0) !important;
}

body > .container > nav > .random-article-dice.is-hover-spinning,
body > .container > nav > .random-article-dice.is-hover-spinning:hover,
body > .container > nav > .random-article-dice.is-hover-spinning:focus-visible,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:hover,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning:focus-visible{
  transform: rotate(90deg) scale(1) translateZ(0) !important;
  will-change: transform;
}

body > .container > nav > .random-article-dice .random-article-dice__pip,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip{
  position: absolute !important;
  display: block !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% - 2px + var(--dice-pip-x, 0px)) !important;
  top: calc(50% - 2px + var(--dice-pip-y, 0px)) !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  max-width: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 4px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(244, 250, 255, 0.96) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tl,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--tl{
  --dice-pip-x: -8px;
  --dice-pip-y: -8px;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--tr,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--tr{
  --dice-pip-x: 8px;
  --dice-pip-y: -8px;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--c,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--c{
  --dice-pip-x: 0px;
  --dice-pip-y: 0px;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--bl,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--bl{
  --dice-pip-x: -8px;
  --dice-pip-y: 8px;
}

body > .container > nav > .random-article-dice .random-article-dice__pip--br,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip--br{
  --dice-pip-x: 8px;
  --dice-pip-y: 8px;
}

/* ========================================================================== 
   v332: Random article dice Edge-stable pip rendering
   - Draw the five dice pips as one SVG-backed pseudo-element instead of five
     separate 4px HTML circles.
   - Hide the old pip spans so Edge/Chromium cannot round each dot differently
     during the hover transform or when returning to rest.
   - Leave the existing dice face, hover state, click target, and spin logic in
     place.
   ========================================================================== */
body > .container > nav > .random-article-dice::before,
body > .container > nav > .random-article-dice:hover::before,
body > .container > nav > .random-article-dice:focus-visible::before,
body > .container > nav > .random-article-dice:active::before,
body > .container > nav > .random-article-dice.is-hover-spinning::before,
html.motion-full body > .container > nav > .random-article-dice::before,
html.motion-full body > .container > nav > .random-article-dice:hover::before,
html.motion-full body > .container > nav > .random-article-dice:focus-visible::before,
html.motion-full body > .container > nav > .random-article-dice:active::before,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning::before{
  content: "" !important;
  position: absolute !important;
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' shape-rendering='geometricPrecision'%3E%3Cg fill='%23f4faff' fill-opacity='.96'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='26' cy='10' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Ccircle cx='10' cy='26' r='2'/%3E%3Ccircle cx='26' cy='26' r='2'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 36px 36px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  z-index: 2 !important;
}

body > .container > nav > .random-article-dice .random-article-dice__pip,
body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
body > .container > nav > .random-article-dice:active .random-article-dice__pip,
body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:hover .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:focus-visible .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice:active .random-article-dice__pip,
html.motion-full body > .container > nav > .random-article-dice.is-hover-spinning .random-article-dice__pip{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Admin Manage Stats layout */
.stats-admin-actions-card {
  margin-bottom: 12px;
}

.stats-admin-grid {
  display: grid;
  gap: 12px;
}

.stats-admin-grid-top {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}

.stats-admin-card {
  overflow: visible;
}

.stats-admin-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.stats-admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stats-admin-metric {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 14px;
  padding: 12px;
}

.stats-admin-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}

.stats-tracking-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
}

.stats-tracking-pill.is-active {
  background: rgba(52, 211, 153, 0.16);
  color: #b7f7da;
  border-color: rgba(52, 211, 153, 0.34);
}

.stats-tracking-pill.is-paused {
  background: rgba(251, 191, 36, 0.16);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.40);
}

.stats-admin-alert {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 10px 12px;
  color: #dce4f0;
}

.stats-admin-alert-warning {
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}

.stats-admin-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.stats-admin-number-field {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.stats-admin-number-field input {
  max-width: 180px;
}

.stats-admin-table-wrap {
  overflow: auto;
}

.stats-admin-backup-table,
.stats-admin-reorder-table {
  min-width: 560px;
  width: 100%;
}

.stats-admin-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stats-admin-reorder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stats-admin-reorder-panel {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  border-radius: 16px;
  padding: 12px;
}

.stats-admin-subhead {
  display: grid;
  gap: 3px;
}

.stats-admin-drag-handle {
  text-align: center;
  cursor: grab;
  user-select: none;
  color: #b8c0cc;
  font-size: 16px;
}

.stats-admin-reorder-table tr.reorder-row td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.stats-admin-reorder-table tr.reorder-row:hover td {
  background: rgba(255,255,255,0.045);
}

.stats-admin-save-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stats-admin-save-row .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.stats-admin-danger-zone {
  border-color: rgba(180, 35, 24, 0.50);
}

html.theme-light .stats-admin-metric,
html.theme-light .stats-admin-reorder-panel,
html.theme-light .stats-admin-alert {
  border-color: rgba(30,41,59,0.12);
  background: rgba(30,41,59,0.035);
}

html.theme-light .stats-admin-alert {
  color: #334155;
}

html.theme-light .stats-admin-alert-warning {
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(251, 191, 36, 0.18);
  color: #92400e;
}

html.theme-light .stats-tracking-pill.is-active {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.30);
}

html.theme-light .stats-tracking-pill.is-paused {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.34);
}

@media (max-width: 980px) {
  .stats-admin-grid-top,
  .stats-admin-reorder-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .stats-admin-card-head,
  .stats-admin-form-row,
  .stats-admin-row-actions {
    align-items: stretch;
  }

  .stats-admin-card-head,
  .stats-admin-form-row {
    flex-direction: column;
  }

  .stats-admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .stats-admin-number-field,
  .stats-admin-number-field input {
    max-width: none;
    width: 100%;
  }
}

/* ========================================================================== 
   v334: Google Trends inspired public Stats page overhaul
   - Refreshes the public Stats page with a chart-first analytics layout.
   - Keeps existing stats queries, leaderboards, and rating data intact.
   ========================================================================== */
body[data-page-kind="stats"] .page-hero {
  display: none;
}

body[data-page-kind="stats"] .stats-trends-page {
  display: grid;
  gap: 18px;
}

body[data-page-kind="stats"] .stats-trends-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px;
  border-color: rgba(96, 165, 250, 0.22);
  background:
    radial-gradient(circle at 8% 0%, rgba(96, 165, 250, 0.22), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(54, 207, 192, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-trends-hero::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 92px;
  opacity: 0.34;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 8%, rgba(96,165,250,0.72) 8.5% 9.5%, transparent 10% 20%, rgba(54,207,192,0.68) 20.5% 21.5%, transparent 22% 34%, rgba(167,139,250,0.62) 34.5% 35.5%, transparent 36% 52%, rgba(96,165,250,0.60) 52.5% 53.5%, transparent 54% 68%, rgba(52,211,153,0.62) 68.5% 69.5%, transparent 70% 100%),
    linear-gradient(180deg, transparent 24%, rgba(255,255,255,0.10) 24.5%, transparent 25%, transparent 49%, rgba(255,255,255,0.08) 49.5%, transparent 50%, transparent 74%, rgba(255,255,255,0.07) 74.5%, transparent 75%);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

body[data-page-kind="stats"] .stats-trends-hero__copy,
body[data-page-kind="stats"] .stats-trends-hero__metrics {
  position: relative;
  z-index: 1;
}

body[data-page-kind="stats"] .stats-trends-hero h1 {
  margin: 4px 0 8px 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

body[data-page-kind="stats"] .stats-eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: #b8d5ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-trends-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

body[data-page-kind="stats"] .stats-trends-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.88rem;
}

body[data-page-kind="stats"] .stats-trends-tabs a:hover,
body[data-page-kind="stats"] .stats-trends-tabs a:focus-visible {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.36);
}

body[data-page-kind="stats"] .stats-trends-hero__metrics {
  display: grid;
  gap: 12px;
  align-content: center;
}

body[data-page-kind="stats"] .stats-trends-hero__metrics > div {
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(9, 14, 24, 0.26);
  border-radius: 20px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body[data-page-kind="stats"] .stats-trends-hero__metrics span {
  display: block;
  color: #b7c3d5;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-trends-hero__metrics strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

body[data-page-kind="stats"] .stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

body[data-page-kind="stats"] .stats-summary-card {
  --stats-summary-accent: var(--lb-color-episodes, #60a5fa);
  position: relative;
  grid-column: span 4;
  min-height: 154px;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--stats-summary-accent) 26%, rgba(255,255,255,0.12));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--stats-summary-accent) 12%, rgba(255,255,255,0.04)), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-summary-card--views { --stats-summary-accent: var(--lb-color-episodes, #60a5fa); }
body[data-page-kind="stats"] .stats-summary-card--visitors { --stats-summary-accent: var(--lb-color-albums, #36cfc0); }
body[data-page-kind="stats"] .stats-summary-card--votes { --stats-summary-accent: var(--lb-color-characters, #f472b6); }
body[data-page-kind="stats"] .stats-summary-card--items { --stats-summary-accent: var(--lb-color-arcs, #fbbf24); }
body[data-page-kind="stats"] .stats-summary-card--activity { --stats-summary-accent: var(--lb-color-elsewhere, #34d399); }

body[data-page-kind="stats"] .stats-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--stats-summary-accent) 26%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 54%);
}

body[data-page-kind="stats"] .stats-summary-card > * {
  position: relative;
  z-index: 1;
}

body[data-page-kind="stats"] .stats-summary-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #b7c3d5;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-summary-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stats-summary-accent) 42%, rgba(255,255,255,0.12));
  color: color-mix(in srgb, var(--stats-summary-accent) 72%, white);
  background: color-mix(in srgb, var(--stats-summary-accent) 18%, rgba(255,255,255,0.04));
}

body[data-page-kind="stats"] .stats-summary-card__value {
  margin-top: 12px;
  font-size: clamp(2.1rem, 6vw, 3.25rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

body[data-page-kind="stats"] .stats-summary-card__note {
  margin-top: 8px;
  color: #aab6c8;
}

body[data-page-kind="stats"] .stats-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

body[data-page-kind="stats"] .stats-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: #d5deeb;
  font-size: 0.82rem;
  font-weight: 750;
}

body[data-page-kind="stats"] .stats-last-votes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body[data-page-kind="stats"] .stats-last-votes div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body[data-page-kind="stats"] .stats-last-votes div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

body[data-page-kind="stats"] .stats-last-votes span {
  color: #aeb9ca;
}

body[data-page-kind="stats"] .stats-last-votes strong {
  text-align: right;
  font-size: 0.92rem;
}

body[data-page-kind="stats"] .stats-trend-panel,
body[data-page-kind="stats"] .stats-section {
  border-radius: 22px;
}

body[data-page-kind="stats"] .stats-trend-panel {
  overflow: hidden;
  padding: 18px;
  border-color: rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

body[data-page-kind="stats"] .stats-section-header h2 {
  margin: 8px 0 4px 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

body[data-page-kind="stats"] .stats-section-header p {
  margin: 0;
  color: #aab6c8;
}

body[data-page-kind="stats"] .stats-section-header--compact {
  align-items: flex-start;
}

body[data-page-kind="stats"] .stats-section-note {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.055);
  color: #c6d1df;
  font-size: 0.84rem;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-trend-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page-kind="stats"] .stats-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-trend-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

body[data-page-kind="stats"] .stats-trend-key--views,
body[data-page-kind="stats"] .stats-trend-bar--views {
  background: var(--lb-color-episodes, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-key--visitors,
body[data-page-kind="stats"] .stats-trend-bar--visitors {
  background: var(--lb-color-albums, #36cfc0);
}

body[data-page-kind="stats"] .stats-trend-key--votes,
body[data-page-kind="stats"] .stats-trend-bar--votes {
  background: var(--lb-color-arcs, #fbbf24);
}

body[data-page-kind="stats"] .stats-trend-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 230px;
  padding: 18px 12px 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 18px / 100% 45px,
    linear-gradient(180deg, rgba(6, 10, 18, 0.22), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-trend-point {
  min-width: 0;
  display: grid;
  align-items: end;
  gap: 7px;
  height: 198px;
}

body[data-page-kind="stats"] .stats-trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 166px;
}

body[data-page-kind="stats"] .stats-trend-bar {
  display: block;
  width: 7px;
  min-height: 0;
  border-radius: 999px 999px 4px 4px;
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 35%, transparent);
}

body[data-page-kind="stats"] .stats-trend-bar--views {
  color: var(--lb-color-episodes, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-bar--visitors {
  color: var(--lb-color-albums, #36cfc0);
  opacity: 0.78;
}

body[data-page-kind="stats"] .stats-trend-bar--votes {
  color: var(--lb-color-arcs, #fbbf24);
  opacity: 0.82;
}

body[data-page-kind="stats"] .stats-trend-date {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #9eaabc;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-empty-state {
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 18px;
  color: #aeb9ca;
  background: rgba(255,255,255,0.035);
}

body[data-page-kind="stats"] .stats-vote-mix {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

body[data-page-kind="stats"] .stats-vote-mix > div {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
}

body[data-page-kind="stats"] .stats-vote-mix span {
  display: block;
  color: #aeb9ca;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-vote-mix strong {
  display: block;
  margin-top: 5px;
  font-size: 1.45rem;
  line-height: 1;
}

body[data-page-kind="stats"] .stats-section {
  display: grid;
  gap: 0;
}

body[data-page-kind="stats"] .stats-leaderboard-grid,
body[data-page-kind="stats"] .stats-distribution-grid {
  gap: 16px;
}

body[data-page-kind="stats"] .lb-card {
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--lb-color) 26%, rgba(255,255,255,0.11));
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

body[data-page-kind="stats"] .lb-card-title {
  align-items: center;
  margin-bottom: 12px;
}

body[data-page-kind="stats"] .lb-card-title-text {
  font-size: 1.02rem;
}

body[data-page-kind="stats"] .lb-card .data-table {
  border-collapse: separate;
  border-spacing: 0;
}

body[data-page-kind="stats"] .lb-card .data-table th {
  color: #aeb9ca;
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .lb-card .data-table td {
  vertical-align: middle;
}

html.theme-light body[data-page-kind="stats"] .stats-trends-hero {
  border-color: rgba(82, 127, 190, 0.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 122, 214, 0.15), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(54, 207, 192, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,254,0.92));
  box-shadow: 0 18px 44px rgba(38, 74, 120, 0.12);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-hero__metrics > div,
html.theme-light body[data-page-kind="stats"] .stats-summary-card,
html.theme-light body[data-page-kind="stats"] .stats-trend-panel,
html.theme-light body[data-page-kind="stats"] .stats-vote-mix > div,
html.theme-light body[data-page-kind="stats"] .stats-trend-chart,
html.theme-light body[data-page-kind="stats"] .stats-empty-state {
  border-color: rgba(30, 41, 59, 0.10);
  background-color: rgba(255,255,255,0.82);
}

html.theme-light body[data-page-kind="stats"] .stats-eyebrow {
  color: #2d5f9d;
  border-color: rgba(69, 109, 164, 0.18);
  background: rgba(224, 236, 251, 0.72);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a,
html.theme-light body[data-page-kind="stats"] .stats-trend-legend span,
html.theme-light body[data-page-kind="stats"] .stats-section-note,
html.theme-light body[data-page-kind="stats"] .stats-chip-row span {
  color: #334155;
  border-color: rgba(30, 41, 59, 0.12);
  background: rgba(255,255,255,0.78);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-hero__metrics span,
html.theme-light body[data-page-kind="stats"] .stats-summary-card__top,
html.theme-light body[data-page-kind="stats"] .stats-summary-card__note,
html.theme-light body[data-page-kind="stats"] .stats-section-header p,
html.theme-light body[data-page-kind="stats"] .stats-last-votes span,
html.theme-light body[data-page-kind="stats"] .stats-trend-date,
html.theme-light body[data-page-kind="stats"] .stats-vote-mix span,
html.theme-light body[data-page-kind="stats"] .lb-card .data-table th {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-chart {
  background:
    linear-gradient(180deg, rgba(100, 116, 139, 0.13) 1px, transparent 1px) 0 18px / 100% 45px,
    linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.72));
}

html.theme-light body[data-page-kind="stats"] .lb-card {
  box-shadow: 0 14px 34px rgba(37, 58, 88, 0.10);
}

@media (max-width: 1040px) {
  body[data-page-kind="stats"] .stats-trends-hero {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-trends-hero__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-kind="stats"] .stats-summary-card {
    grid-column: span 6;
  }

  body[data-page-kind="stats"] .stats-vote-mix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trends-page {
    gap: 14px;
  }

  body[data-page-kind="stats"] .stats-trends-hero,
  body[data-page-kind="stats"] .stats-trend-panel {
    padding: 16px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-trends-hero__metrics,
  body[data-page-kind="stats"] .stats-summary-grid,
  body[data-page-kind="stats"] .stats-vote-mix {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-summary-card {
    grid-column: 1 / -1;
    min-height: 0;
  }

  body[data-page-kind="stats"] .stats-section-header,
  body[data-page-kind="stats"] .stats-section-header--compact {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page-kind="stats"] .stats-trend-legend {
    justify-content: flex-start;
  }

  body[data-page-kind="stats"] .stats-trend-chart {
    gap: 8px;
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: 52px;
    grid-template-columns: none;
    padding-left: 10px;
    padding-right: 10px;
  }

  body[data-page-kind="stats"] .stats-trend-point {
    width: 52px;
  }

  body[data-page-kind="stats"] .stats-trend-date {
    overflow: visible;
    text-overflow: clip;
    font-size: 0.70rem;
  }

  body[data-page-kind="stats"] .stats-trend-bar {
    width: 6px;
  }
}

@media (max-width: 420px) {
  body[data-page-kind="stats"] .stats-trends-tabs a {
    width: 100%;
  }

  body[data-page-kind="stats"] .stats-chip-row span {
    width: 100%;
    justify-content: space-between;
  }
}


/* ========================================================================== 
   v335: Stats Phase 2B recent activity and category comparison
   - Adds Google Trends style recent movement cards without changing stat storage.
   ========================================================================== */
body[data-page-kind="stats"] [data-lb="albums"] { --lb-color: var(--lb-color-albums, #36cfc0); }
body[data-page-kind="stats"] [data-lb="seasons"] { --lb-color: var(--lb-color-seasons, #a78bfa); }
body[data-page-kind="stats"] [data-lb="arcs"] { --lb-color: var(--lb-color-arcs, #fbbf24); }
body[data-page-kind="stats"] [data-lb="episodes"] { --lb-color: var(--lb-color-episodes, #60a5fa); }
body[data-page-kind="stats"] [data-lb="characters"] { --lb-color: var(--lb-color-characters, #f472b6); }
body[data-page-kind="stats"] [data-lb="elsewhere"] { --lb-color: var(--lb-color-elsewhere, #34d399); }
body[data-page-kind="stats"] [data-lb="videos"] { --lb-color: var(--lb-color-videos, #f87171); }

body[data-page-kind="stats"] .stats-section--trending {
  gap: 0;
}

body[data-page-kind="stats"] .stats-trending-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

body[data-page-kind="stats"] .stats-trending-card {
  grid-column: span 6;
  border-radius: 22px;
  padding: 18px;
  overflow: hidden;
  border-color: rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,0.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-trending-card--wide {
  grid-column: span 12;
}

body[data-page-kind="stats"] .stats-mini-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

body[data-page-kind="stats"] .stats-mini-card-header h3 {
  margin: 0 0 4px 0;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

body[data-page-kind="stats"] .stats-mini-card-header p {
  margin: 0;
  color: #aab6c8;
}

body[data-page-kind="stats"] .stats-category-activity-list,
body[data-page-kind="stats"] .stats-trending-list {
  display: grid;
  gap: 10px;
}

body[data-page-kind="stats"] .stats-category-activity-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(160px, 1.2fr) minmax(170px, auto);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 22%, rgba(255,255,255,0.10));
  border-radius: 16px;
  background: color-mix(in srgb, var(--lb-color) 7%, rgba(255,255,255,0.035));
}

body[data-page-kind="stats"] .stats-category-activity-row__label strong,
body[data-page-kind="stats"] .stats-trending-item__main a,
body[data-page-kind="stats"] .stats-trending-item__main strong {
  display: block;
  color: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

body[data-page-kind="stats"] .stats-trending-item__main a:hover,
body[data-page-kind="stats"] .stats-trending-item__main a:focus-visible {
  color: color-mix(in srgb, var(--lb-color) 78%, white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-page-kind="stats"] .stats-category-activity-row__label span,
body[data-page-kind="stats"] .stats-trending-item__main span,
body[data-page-kind="stats"] .stats-trending-item__meta span,
body[data-page-kind="stats"] .stats-trending-item__rating span {
  display: block;
  margin-top: 3px;
  color: #aab6c8;
  font-size: 0.82rem;
}

body[data-page-kind="stats"] .stats-category-activity-row__bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

body[data-page-kind="stats"] .stats-category-activity-row__bar span {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--lb-color, #60a5fa);
  box-shadow: 0 0 24px color-mix(in srgb, var(--lb-color) 45%, transparent);
}

body[data-page-kind="stats"] .stats-category-activity-row__numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  text-align: right;
}

body[data-page-kind="stats"] .stats-category-activity-row__numbers span,
body[data-page-kind="stats"] .stats-category-activity-row__numbers strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  font-size: 0.82rem;
  font-weight: 850;
}

body[data-page-kind="stats"] .stats-category-activity-row__numbers span {
  color: #aab6c8;
}

body[data-page-kind="stats"] .stats-activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

body[data-page-kind="stats"] .stats-activity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 26%, rgba(255,255,255,0.10));
  background: color-mix(in srgb, var(--lb-color) 8%, rgba(255,255,255,0.04));
  color: #d5deeb;
  font-size: 0.82rem;
  font-weight: 850;
}

body[data-page-kind="stats"] .stats-activity-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--lb-color, #60a5fa);
}

body[data-page-kind="stats"] .stats-activity-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
  align-items: end;
  gap: 7px;
  min-height: 222px;
  padding: 16px 10px 10px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075) 1px, transparent 1px) 0 16px / 100% 42px,
    linear-gradient(180deg, rgba(6,10,18,0.20), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-activity-point {
  display: grid;
  align-items: end;
  gap: 7px;
  height: 188px;
  min-width: 0;
}

body[data-page-kind="stats"] .stats-activity-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
  height: 156px;
}

body[data-page-kind="stats"] .stats-activity-bars span {
  display: block;
  width: 5px;
  min-height: 0;
  border-radius: 999px 999px 4px 4px;
  background: var(--lb-color, #60a5fa);
}

body[data-page-kind="stats"] .stats-trending-item {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(82px, auto) minmax(82px, auto) minmax(130px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 22%, rgba(255,255,255,0.10));
  border-radius: 16px;
  background: color-mix(in srgb, var(--lb-color) 7%, rgba(255,255,255,0.035));
}

body[data-page-kind="stats"] .stats-trending-item__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-page-kind="stats"] .stats-trending-item__main > div {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-trending-item__meta,
body[data-page-kind="stats"] .stats-trending-item__rating {
  text-align: right;
}

body[data-page-kind="stats"] .stats-trending-item__meta strong,
body[data-page-kind="stats"] .stats-trending-item__rating strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.05;
}

html.theme-light body[data-page-kind="stats"] .stats-trending-card,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row,
html.theme-light body[data-page-kind="stats"] .stats-trending-item,
html.theme-light body[data-page-kind="stats"] .stats-activity-chart {
  border-color: rgba(30,41,59,0.10);
  background-color: rgba(255,255,255,0.82);
}

html.theme-light body[data-page-kind="stats"] .stats-mini-card-header p,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__label span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__rating span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__numbers span {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-activity-chart {
  background:
    linear-gradient(180deg, rgba(100,116,139,0.13) 1px, transparent 1px) 0 16px / 100% 42px,
    linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.72));
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__bar {
  background: rgba(15,23,42,0.08);
}

html.theme-light body[data-page-kind="stats"] .stats-activity-legend span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__numbers span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__numbers strong {
  color: #334155;
  border-color: rgba(30,41,59,0.10);
  background: rgba(255,255,255,0.74);
}

@media (max-width: 980px) {
  body[data-page-kind="stats"] .stats-trending-card,
  body[data-page-kind="stats"] .stats-trending-card--wide {
    grid-column: 1 / -1;
  }

  body[data-page-kind="stats"] .stats-category-activity-row,
  body[data-page-kind="stats"] .stats-trending-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page-kind="stats"] .stats-category-activity-row__numbers,
  body[data-page-kind="stats"] .stats-trending-item__meta,
  body[data-page-kind="stats"] .stats-trending-item__rating {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trending-card {
    padding: 16px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-activity-chart {
    grid-auto-flow: column;
    grid-auto-columns: 30px;
    grid-template-columns: none;
    overflow-x: auto;
  }

  body[data-page-kind="stats"] .stats-activity-point {
    width: 30px;
  }

  body[data-page-kind="stats"] .stats-trending-item__main {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ========================================================================== 
   v336: Stats Phase 3 leaderboard card overhaul
   - Replaces public Stats leaderboard table presentation with ranked cards.
   - Keeps existing leaderboard data and ordering logic intact.
   ========================================================================== */
body[data-page-kind="stats"] .stats-leaderboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px 0;
}

body[data-page-kind="stats"] .stats-leaderboard-toolbar span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-leaderboard-showcase {
  align-items: start;
}

body[data-page-kind="stats"] .stats-leaderboard-card {
  overflow: hidden;
  padding: 16px;
}

body[data-page-kind="stats"] .stats-leaderboard-card-title {
  position: relative;
  z-index: 1;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--lb-color) 18%, rgba(255,255,255,0.10));
}

body[data-page-kind="stats"] .stats-leaderboard-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page-kind="stats"] .stats-leaderboard-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(146px, auto) minmax(74px, auto);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 18%, rgba(255,255,255,0.09));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--lb-color) 10%, transparent), transparent 36%),
    rgba(255,255,255,0.035);
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

body[data-page-kind="stats"] .stats-leaderboard-row:hover,
body[data-page-kind="stats"] .stats-leaderboard-row:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--lb-color) 38%, rgba(255,255,255,0.14));
  background-color: color-mix(in srgb, var(--lb-color) 7%, rgba(255,255,255,0.045));
}

body[data-page-kind="stats"] .stats-leaderboard-rank {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page-kind="stats"] .stats-leaderboard-rank span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 30%, rgba(255,255,255,0.13));
  background: color-mix(in srgb, var(--lb-color) 12%, rgba(255,255,255,0.05));
  color: color-mix(in srgb, var(--lb-color) 74%, white);
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: -0.03em;
}

body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="1"] .stats-leaderboard-rank span,
body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="2"] .stats-leaderboard-rank span,
body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="3"] .stats-leaderboard-rank span {
  width: 50px;
  height: 50px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--lb-color) 22%, transparent);
}

body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="1"] {
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--lb-color) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--lb-color) 10%, rgba(255,255,255,0.045)), rgba(255,255,255,0.03));
}

body[data-page-kind="stats"] .stats-leaderboard-main {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-leaderboard-main a,
body[data-page-kind="stats"] .stats-leaderboard-main strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.22;
  text-decoration: none;
  text-overflow: ellipsis;
}

body[data-page-kind="stats"] .stats-leaderboard-main a:hover,
body[data-page-kind="stats"] .stats-leaderboard-main a:focus-visible {
  color: color-mix(in srgb, var(--lb-color) 76%, white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-page-kind="stats"] .stats-leaderboard-main span,
body[data-page-kind="stats"] .stats-leaderboard-score > span,
body[data-page-kind="stats"] .stats-leaderboard-votes > span {
  display: block;
  margin-top: 4px;
  color: #aab6c8;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-leaderboard-score,
body[data-page-kind="stats"] .stats-leaderboard-votes {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-leaderboard-score > span,
body[data-page-kind="stats"] .stats-leaderboard-votes > span {
  margin: 0 0 5px 0;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter--sm {
  min-width: 132px;
}

body[data-page-kind="stats"] .stats-leaderboard-votes {
  justify-self: end;
  text-align: right;
}

body[data-page-kind="stats"] .stats-leaderboard-votes strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 22%, rgba(255,255,255,0.10));
  border-radius: 999px;
  background: color-mix(in srgb, var(--lb-color) 10%, rgba(255,255,255,0.04));
  font-size: 1rem;
  font-weight: 950;
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-toolbar span,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-row,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-votes strong {
  border-color: rgba(30,41,59,0.10);
  background-color: rgba(255,255,255,0.78);
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-toolbar span,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main span,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-score > span,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-votes > span {
  color: #64748b;
}

@media (max-width: 1120px) {
  body[data-page-kind="stats"] .stats-leaderboard-row {
    grid-template-columns: 54px minmax(0, 1fr) minmax(125px, auto);
  }

  body[data-page-kind="stats"] .stats-leaderboard-votes {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-leaderboard-card {
    padding: 14px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-leaderboard-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    border-radius: 16px;
  }

  body[data-page-kind="stats"] .stats-leaderboard-rank span {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="1"] .stats-leaderboard-rank span,
  body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="2"] .stats-leaderboard-rank span,
  body[data-page-kind="stats"] .stats-leaderboard-row[data-rank="3"] .stats-leaderboard-rank span {
    width: 44px;
    height: 44px;
  }

  body[data-page-kind="stats"] .stats-leaderboard-score,
  body[data-page-kind="stats"] .stats-leaderboard-votes {
    grid-column: 2 / -1;
    justify-self: stretch;
    text-align: left;
  }

  body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter--sm {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  body[data-page-kind="stats"] .stats-leaderboard-toolbar span {
    width: 100%;
  }

  body[data-page-kind="stats"] .stats-leaderboard-row {
    padding: 10px;
  }
}

/* ========================================================================== 
   v337: Stats Phase 4 vote distribution card overhaul
   - Replaces the Stats vote distribution tables with responsive dashboard cards.
   - Expands the section to include Albums, Seasons, Arcs, Episodes, Characters,
     Elsewhere, and Videos using existing rating/vote data only.
   ========================================================================== */
body[data-page-kind="stats"] .stats-distribution-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 20px;
  border-color: rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-distribution-overview > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}

body[data-page-kind="stats"] .stats-distribution-overview strong,
body[data-page-kind="stats"] .stats-distribution-overview span {
  display: block;
}

body[data-page-kind="stats"] .stats-distribution-overview strong {
  margin-bottom: 5px;
  font-size: 0.94rem;
  font-weight: 950;
}

body[data-page-kind="stats"] .stats-distribution-overview span {
  color: #aeb9ca;
  line-height: 1.45;
}

body[data-page-kind="stats"] .stats-distribution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

body[data-page-kind="stats"] .stats-distribution-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
}

body[data-page-kind="stats"] .stats-distribution-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--lb-color) 19%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--lb-color) 8%, transparent), transparent 52%);
}

body[data-page-kind="stats"] .stats-distribution-card > * {
  position: relative;
  z-index: 1;
}

body[data-page-kind="stats"] .stats-distribution-card__title {
  padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--lb-color) 18%, rgba(255,255,255,0.10));
}

body[data-page-kind="stats"] .stats-distribution-note {
  min-height: 42px;
  margin: -2px 0 12px 0;
  color: #aab6c8;
  line-height: 1.42;
}

body[data-page-kind="stats"] .stats-distribution-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page-kind="stats"] .stats-distribution-summary > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 16%, rgba(255,255,255,0.09));
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

body[data-page-kind="stats"] .stats-distribution-summary span,
body[data-page-kind="stats"] .stats-distribution-topline span {
  display: block;
  color: #9faec2;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-distribution-summary strong {
  display: block;
  margin-top: 5px;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.035em;
}

body[data-page-kind="stats"] .stats-distribution-rated-share {
  position: relative;
  height: 9px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 22%, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.08);
}

body[data-page-kind="stats"] .stats-distribution-rated-share span {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lb-color) 58%, white), var(--lb-color));
}

body[data-page-kind="stats"] .stats-distribution-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 18%, rgba(255,255,255,0.10));
  border-radius: 15px;
  background: color-mix(in srgb, var(--lb-color) 8%, rgba(255,255,255,0.035));
}

body[data-page-kind="stats"] .stats-distribution-topline strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--lb-color) 70%, white);
  font-size: 0.96rem;
  font-weight: 950;
  text-align: right;
}

body[data-page-kind="stats"] .stats-distribution-topline em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 28%, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.055);
  color: inherit;
  font-style: normal;
}

body[data-page-kind="stats"] .stats-distribution-buckets {
  display: grid;
  gap: 7px;
}

body[data-page-kind="stats"] .stats-distribution-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) minmax(120px, 1fr) 48px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 14%, rgba(255,255,255,0.08));
  border-radius: 13px;
  background: rgba(255,255,255,0.03);
}

body[data-page-kind="stats"] .stats-distribution-row--empty {
  opacity: 0.82;
}

body[data-page-kind="stats"] .stats-distribution-row__label {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-distribution-row__label span,
body[data-page-kind="stats"] .stats-distribution-row__label strong {
  display: block;
}

body[data-page-kind="stats"] .stats-distribution-row__label span {
  overflow: hidden;
  color: #d8e2f0;
  font-size: 0.84rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-distribution-row__label strong {
  margin-top: 2px;
  color: #9faec2;
  font-size: 0.74rem;
  font-weight: 850;
}

body[data-page-kind="stats"] .stats-distribution-row__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
}

body[data-page-kind="stats"] .stats-distribution-row__bar span {
  display: block;
  width: var(--fill);
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lb-color) 54%, white), var(--lb-color));
  box-shadow: 0 0 18px color-mix(in srgb, var(--lb-color) 24%, transparent);
}

body[data-page-kind="stats"] .stats-distribution-row__share {
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
}

html.theme-light body[data-page-kind="stats"] .stats-distribution-overview,
html.theme-light body[data-page-kind="stats"] .stats-distribution-overview > div,
html.theme-light body[data-page-kind="stats"] .stats-distribution-summary > div,
html.theme-light body[data-page-kind="stats"] .stats-distribution-topline,
html.theme-light body[data-page-kind="stats"] .stats-distribution-row {
  border-color: rgba(30,41,59,0.10);
  background-color: rgba(255,255,255,0.78);
}

html.theme-light body[data-page-kind="stats"] .stats-distribution-overview span,
html.theme-light body[data-page-kind="stats"] .stats-distribution-note,
html.theme-light body[data-page-kind="stats"] .stats-distribution-summary span,
html.theme-light body[data-page-kind="stats"] .stats-distribution-topline span,
html.theme-light body[data-page-kind="stats"] .stats-distribution-row__label strong {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-distribution-row__label span {
  color: #1e293b;
}

html.theme-light body[data-page-kind="stats"] .stats-distribution-row__bar,
html.theme-light body[data-page-kind="stats"] .stats-distribution-rated-share {
  background: rgba(100,116,139,0.14);
}

html.theme-light body[data-page-kind="stats"] .stats-distribution-row__share {
  color: #334155;
}

@media (max-width: 900px) {
  body[data-page-kind="stats"] .stats-distribution-overview {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-distribution-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body[data-page-kind="stats"] .stats-distribution-card {
    padding: 14px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-distribution-summary {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-distribution-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-page-kind="stats"] .stats-distribution-topline strong {
    text-align: left;
  }

  body[data-page-kind="stats"] .stats-distribution-row {
    grid-template-columns: minmax(64px, 0.46fr) minmax(90px, 1fr) 44px;
    gap: 7px;
    padding: 7px;
  }
}


/* ========================================================================== 
   v338: Unified rounded rating bars
   - Updates rating meters to use the softer dashboard-style rounded bar.
   - Keeps the percentage text centered directly above the bar.
   - Uses each Stats leaderboard card accent color on the Stats page.
   ========================================================================== */
.rating-meter {
  align-items: center;
  gap: 5px;
}

.rating-meter__text {
  width: 100%;
  text-align: center;
}

.rating-meter__bar {
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  box-shadow: none;
}

.rating-meter__fill {
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rating-meter-fill-start, #48b6ff) 56%, white), var(--rating-meter-fill-end, #1d6fe3));
  box-shadow: 0 0 18px color-mix(in srgb, var(--rating-meter-fill-end, #1d6fe3) 24%, transparent);
}

.rating-meter--sm .rating-meter__bar {
  height: 9px;
}

.rating-meter--lg .rating-meter__bar {
  height: 10px;
}

.rating-meter__mark {
  height: 16px;
  background: rgba(255,255,255,0.95);
}

body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter {
  max-width: 170px;
}

body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__text {
  color: #f8fbff;
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: -0.015em;
}

body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
  background: rgba(255,255,255,0.075);
}

body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--lb-color) 54%, white), var(--lb-color));
  box-shadow: 0 0 18px color-mix(in srgb, var(--lb-color) 24%, transparent);
}

html.theme-light .rating-meter__bar {
  background: rgba(100,116,139,0.14);
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__text {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
  background: rgba(100,116,139,0.14);
}


/* ========================================================================== 
   v339: Global blue dashboard rating bars
   - Keeps the rounded dashboard rating bar style on every page that uses
     .rating-meter, including public tabs and mobile table/card layouts.
   - Standardizes the fill back to the site's blue rating-bar palette instead
     of category-specific leaderboard colors.
   ========================================================================== */
.rating-meter__fill,
body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__fill {
  background: linear-gradient(90deg, color-mix(in srgb, #48b6ff 56%, white), #1d6fe3) !important;
  box-shadow: 0 0 18px color-mix(in srgb, #1d6fe3 24%, transparent) !important;
}

.rating-meter__text,
body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__text {
  width: 100%;
  text-align: center;
}

.rating-meter__bar,
body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  box-shadow: none;
}

.rating-meter--sm .rating-meter__bar,
body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter--sm .rating-meter__bar {
  height: 9px;
}

.rating-meter--lg .rating-meter__bar {
  height: 10px;
}

html.theme-light .rating-meter__bar,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
  background: rgba(100,116,139,0.14);
}

@media (max-width: 720px) {
  .rating-meter__text,
  body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__text {
    text-align: center;
  }

  .rating-meter__bar,
  body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
    height: 9px;
    border-radius: 999px;
  }
}

/* ========================================================================== 
   v340: Admin controls for public Stats page sections
   - Adds display-setting cards for the public /stats dashboard.
   - Keeps the controls responsive and consistent with Manage Stats styling.
   ========================================================================== */
.stats-admin-display-form {
  display: grid;
  gap: 12px;
}

.stats-admin-display-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stats-admin-toggle-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
}

.stats-admin-toggle-card input {
  margin-top: 2px;
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--accent, #60a5fa);
}

.stats-admin-toggle-card span {
  display: grid;
  gap: 4px;
}

.stats-admin-toggle-card strong {
  color: #f8fafc;
  font-size: 0.98rem;
  line-height: 1.25;
}

.stats-admin-toggle-card em {
  color: #b8c0cc;
  font-size: 0.9rem;
  line-height: 1.35;
  font-style: normal;
}

.stats-admin-toggle-card:has(input:checked) {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.09);
}

html.theme-light .stats-admin-toggle-card {
  border-color: rgba(30,41,59,0.12);
  background: rgba(30,41,59,0.025);
}

html.theme-light .stats-admin-toggle-card strong {
  color: #0f172a;
}

html.theme-light .stats-admin-toggle-card em {
  color: #475569;
}

html.theme-light .stats-admin-toggle-card:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.07);
}

@media (max-width: 980px) {
  .stats-admin-display-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stats-admin-display-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================================================== 
   v341: Stats responsive polish and semantic summary icons
   - Removes the decorative hero line overlay that stretched oddly at wide widths.
   - Lets leaderboard titles breathe at half-window widths instead of clipping.
   - Uses meaningful SVG summary-card icons.
   - Keeps the current Stats scroll position anchored during responsive resize.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trends-hero::after {
  display: none;
}

body[data-page-kind="stats"] .stats-summary-card__icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page-kind="stats"] .stats-leaderboard-main a,
body[data-page-kind="stats"] .stats-leaderboard-main strong {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1260px) {
  body[data-page-kind="stats"] .stats-leaderboard-grid.stats-leaderboard-showcase {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-leaderboard-row {
    grid-template-columns: 54px minmax(0, 1fr) minmax(132px, auto) minmax(68px, auto);
  }

  body[data-page-kind="stats"] .stats-leaderboard-votes {
    grid-column: auto;
    justify-self: end;
    text-align: right;
  }
}

@media (max-width: 920px) {
  body[data-page-kind="stats"] .stats-leaderboard-row {
    grid-template-columns: 54px minmax(0, 1fr) minmax(125px, auto);
  }

  body[data-page-kind="stats"] .stats-leaderboard-votes {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-leaderboard-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    border-radius: 16px;
  }

  body[data-page-kind="stats"] .stats-leaderboard-score,
  body[data-page-kind="stats"] .stats-leaderboard-votes {
    grid-column: 2 / -1;
    justify-self: stretch;
    text-align: left;
  }

  body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter--sm {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  body[data-page-kind="stats"] .stats-leaderboard-row {
    padding: 10px;
  }
}


/* ========================================================================== 
   v343: Stats hero tab active highlight polish
   - Adds a simple active-state highlight to the Stats section navigation tabs.
   - Keeps the effect static and professional, with no shimmer animation.
   - Makes the active tab readable in Light theme as well as Dark theme.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trends-tabs a {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"] {
  color: #d7eaff;
  border-color: rgba(96, 165, 250, 0.48);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.24), rgba(96, 165, 250, 0.12));
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

body[data-page-kind="stats"] .stats-trends-tabs a:active {
  transform: translateY(1px);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a:hover,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a:focus-visible {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.26);
  background: rgba(219, 234, 254, 0.76);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"] {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.38);
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(191, 219, 254, 0.68));
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.95);
}


/* ========================================================================== 
   v344: Stats active tab hover polish
   - Lets the selected Stats tab still react on hover/focus.
   - Keeps the active blue state, but adds a clear hover lift in Dark and Light mode.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:hover,
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:focus-visible {
  color: #f5fbff;
  border-color: rgba(147, 197, 253, 0.68);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(96, 165, 250, 0.19));
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.25),
    0 0 0 1px rgba(147, 197, 253, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:hover,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:focus-visible {
  color: #1747b0;
  border-color: rgba(37, 99, 235, 0.54);
  background:
    linear-gradient(180deg, rgba(191, 219, 254, 0.98), rgba(147, 197, 253, 0.74));
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.20),
    0 0 0 1px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.98);
  transform: translateY(-1px);
}


/* ========================================================================== 
   v345: Stats hero tab hover-only polish
   - Removes the visual selected-tab state from the Stats section buttons.
   - Keeps every Stats section button visually neutral until the user hovers or focuses it.
   - Leaves the resize scroll-anchor behavior untouched.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trends-tabs a,
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"] {
  color: inherit;
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  box-shadow: none;
  transform: none;
}

body[data-page-kind="stats"] .stats-trends-tabs a:hover,
body[data-page-kind="stats"] .stats-trends-tabs a:focus-visible,
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:hover,
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:focus-visible {
  color: #d7eaff;
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.18);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"] {
  color: #334155;
  border-color: rgba(30, 41, 59, 0.12);
  background: rgba(255,255,255,0.78);
  box-shadow: none;
  transform: none;
}

html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a:hover,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a:focus-visible,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:hover,
html.theme-light body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:focus-visible {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(219, 234, 254, 0.82);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

body[data-page-kind="stats"] .stats-trends-tabs a:active,
body[data-page-kind="stats"] .stats-trends-tabs a[aria-current="true"]:active {
  transform: translateY(1px);
}


/* ========================================================================== 
   v346: Stats anchor and hero cleanup
   - Keeps Stats section jump links from landing under the sticky site header.
   - Removes the redundant hero summary column after the duplicate metrics were
     removed from the Stats hero template.
   ========================================================================== */
body[data-page-kind="stats"] #stats-trend-overview,
body[data-page-kind="stats"] #stats-trending,
body[data-page-kind="stats"] #stats-leaderboards,
body[data-page-kind="stats"] #stats-vote-distribution {
  scroll-margin-top: 112px;
}

body[data-page-kind="stats"] .stats-trends-hero {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] #stats-trend-overview,
  body[data-page-kind="stats"] #stats-trending,
  body[data-page-kind="stats"] #stats-leaderboards,
  body[data-page-kind="stats"] #stats-vote-distribution {
    scroll-margin-top: 136px;
  }
}


/* ========================================================================== 
   v347: Stats hash reload and tab scroll cleanup
   - CSS is intentionally unchanged from v346; this version bumps the static
     asset path while the Stats template changes tab navigation behavior.
   ========================================================================== */


/* ========================================================================== 
   v348: Stats Phase 15 activity overview chart color isolation
   - Keeps the Activity overview Page views / Unique visitors / Total votes chart
     on fixed chart colors so Admin Stats leaderboard/distribution color changes
     do not recolor this unrelated site-activity chart.
   ========================================================================== */
body[data-page-kind="stats"] {
  --stats-trend-color-views: #60a5fa;
  --stats-trend-color-visitors: #36cfc0;
  --stats-trend-color-votes: #fbbf24;
}

body[data-page-kind="stats"] .stats-trend-key--views,
body[data-page-kind="stats"] .stats-trend-bar--views {
  background: var(--stats-trend-color-views, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-key--visitors,
body[data-page-kind="stats"] .stats-trend-bar--visitors {
  background: var(--stats-trend-color-visitors, #36cfc0);
}

body[data-page-kind="stats"] .stats-trend-key--votes,
body[data-page-kind="stats"] .stats-trend-bar--votes {
  background: var(--stats-trend-color-votes, #fbbf24);
}

body[data-page-kind="stats"] .stats-trend-bar--views {
  color: var(--stats-trend-color-views, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-bar--visitors {
  color: var(--stats-trend-color-visitors, #36cfc0);
}

body[data-page-kind="stats"] .stats-trend-bar--votes {
  color: var(--stats-trend-color-votes, #fbbf24);
}


/* ========================================================================== 
   v349: Stats Phase 16 configurable Activity overview chart colors
   - Lets Admin Stats page colors control the Activity overview chart colors.
   - Keeps the previous chart colors as the defaults.
   ========================================================================== */
body[data-page-kind="stats"] {
  --stats-trend-color-views: var(--stats-trend-color-views-admin, #60a5fa);
  --stats-trend-color-visitors: var(--stats-trend-color-visitors-admin, #36cfc0);
  --stats-trend-color-votes: var(--stats-trend-color-votes-admin, #fbbf24);
}

/* v352: Public feedback form and admin feedback inbox */
.feedback-shell{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.feedback-panel textarea,
.feedback-form textarea{
  width: 100%;
  min-height: 220px;
}
.admin-feedback-list{
  display: grid;
  gap: 14px;
}
.admin-feedback-item{
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
}
.admin-feedback-item--unread{
  border-color: rgba(29,111,227,0.42);
  box-shadow: 0 0 0 1px rgba(29,111,227,0.14), 0 14px 34px rgba(0,0,0,0.16);
}
.admin-feedback-item__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.admin-feedback-item__head h3{
  margin: 8px 0 0;
}
.admin-feedback-item__meta,
.admin-feedback-device{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.admin-feedback-item__meta{
  font-size: 13px;
  color: var(--muted);
}
.admin-feedback-item__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.admin-feedback-message{
  margin: 12px 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.admin-feedback-device{
  font-size: 13px;
  color: var(--muted);
}
.admin-feedback-ua{
  width: 100%;
  overflow-wrap: anywhere;
}
html.theme-light .admin-feedback-item{
  border-color: rgba(30,41,59,0.12);
}
html.theme-light .admin-feedback-item--unread{
  border-color: rgba(29,111,227,0.34);
  box-shadow: 0 0 0 1px rgba(29,111,227,0.10), 0 14px 34px rgba(16,24,40,0.10);
}
html.theme-light .admin-feedback-message{
  background: rgba(30,41,59,0.055);
}
@media (max-width: 680px){
  .admin-feedback-item__head{
    display: grid;
  }
  .admin-feedback-item__actions{
    justify-content: flex-start;
  }
}

/* Feedback triage controls */
.admin-feedback-summary-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-feedback-item--important{
  border-color: rgba(245,158,11,0.42);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.12), 0 14px 34px rgba(0,0,0,0.16);
}
.admin-feedback-item--archived{
  opacity: 0.82;
}
.admin-feedback-pill-important{
  border-color: rgba(245,158,11,0.34);
  background: rgba(245,158,11,0.12);
  color: inherit;
}
html.theme-light .admin-feedback-item--important{
  border-color: rgba(217,119,6,0.34);
  box-shadow: 0 0 0 1px rgba(217,119,6,0.10), 0 14px 34px rgba(16,24,40,0.10);
}
html.theme-light .admin-feedback-pill-important{
  border-color: rgba(217,119,6,0.30);
  background: rgba(217,119,6,0.10);
}

/* Feedback admin notes */
.admin-feedback-note-form{
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}
.admin-feedback-note-form label{
  font-weight: 700;
}
.admin-feedback-note-form textarea{
  width: 100%;
  min-height: 90px;
  resize: vertical;
}
.admin-feedback-note-meta{
  font-size: 12px;
}
.admin-feedback-note-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
html.theme-light .admin-feedback-note-form{
  border-color: rgba(30,41,59,0.12);
  background: rgba(30,41,59,0.035);
}

/* Feedback spam triage */
.admin-feedback-item--spam{
  border-color: rgba(239,68,68,0.42);
  opacity: 0.88;
}
.admin-feedback-pill-spam{
  border-color: rgba(239,68,68,0.34);
  background: rgba(239,68,68,0.12);
  color: inherit;
}
html.theme-light .admin-feedback-item--spam{
  border-color: rgba(220,38,38,0.34);
}
html.theme-light .admin-feedback-pill-spam{
  border-color: rgba(220,38,38,0.30);
  background: rgba(220,38,38,0.10);
}


/* Tablet/touch public lists: keep pager buttons on their own centered,
   wrapping row below the result count card in both portrait and landscape.
   Scoped to public list pages and coarse-pointer tablet widths so admin
   pagers, phone layouts, and normal desktop mouse layouts stay unchanged. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px){
  .public-list-page .pager{
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    justify-content: center !important;
    gap: 12px !important;
    row-gap: 10px !important;
    flex-wrap: wrap;
  }

  .public-list-page .pager .btn{
    flex: 0 0 auto;
  }

  .public-list-page .pager.pager-top{
    margin-top: 20px !important;
    margin-bottom: 22px !important;
  }

  .public-list-page .pager:not(.pager-top){
    margin-top: 16px !important;
    margin-bottom: 12px !important;
  }
}


/* Admin floating save control for editor/reorder pages. */
.admin-floating-save {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.40);
  border-radius: 18px;
  background: rgba(10, 12, 18, 0.92);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 34px rgba(29, 111, 227, 0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-page-kind="admin"] .admin-floating-save.is-visible {
  display: flex;
}

.admin-floating-save__button,
.admin-floating-save__public {
  min-width: 138px;
  justify-content: center;
}

.admin-floating-save__button {
  box-shadow: 0 10px 28px rgba(29, 111, 227, 0.34);
}

.admin-floating-save__public {
  min-width: 158px;
}

.admin-floating-save__button[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
  box-shadow: none;
}

html.theme-light .admin-floating-save {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18), 0 0 30px rgba(37, 99, 235, 0.14);
}

@media (max-width: 640px) {
  .admin-floating-save {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .admin-floating-save__button,
  .admin-floating-save__public {
    width: 100%;
  }
}

/* ========================================================================== 
   v361: Characters list episode/video counts
   - Show separate episode and video counts in the public Characters list.
   - Keep the desktop column clear while preserving compact mobile badges.
   ========================================================================== */
.public-list-page--characters .characters-table .characters-ev-heading-short{
  display:none;
}

@media (max-width: 1280px){
  .public-list-page--characters .characters-table .characters-ev-heading-long{
    display:none;
  }

  .public-list-page--characters .characters-table .characters-ev-heading-short{
    display:inline;
  }
}

.public-list-page--characters .characters-table td:nth-child(3) .character-count-pills,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:0;
  margin:0 auto;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit;
  line-height:1;
  white-space:nowrap;
}

.public-list-page--characters .characters-table td:nth-child(3) .character-count-pills::before,
html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills::before{
  content:none !important;
  display:none !important;
}

.public-list-page--characters .characters-table .character-count-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:42px;
  min-height:calc(var(--ui-control-height) - 12px);
  padding:calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
  border-radius:999px;
  font-size:calc(var(--ui-pill-font-size) - 2px);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(101, 170, 255, 0.32);
  color:#d6e7ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(64, 140, 255, 0.22), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(64, 140, 255, 0.12);
}

.public-list-page--characters .characters-table .character-count-pill::before{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  display:inline-block;
  background-color:currentColor;
  opacity:0.96;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.public-list-page--characters .characters-table .character-count-pill--episodes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm4 0H6v2h2V5Zm0 4H6v2h2V9Zm0 4H6v2h2v-2Zm0 4H6v2h2v-2Zm2 2h8V5h-8v14Z'/></svg>");
}

.public-list-page--characters .characters-table .character-count-pill--videos::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm6 2.4v6.2L15.5 12 10 8.9Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm6 2.4v6.2L15.5 12 10 8.9Z'/></svg>");
}

html.theme-light .public-list-page--characters .characters-table .character-count-pill{
  color:#2c5f9e;
  border-color:rgba(99, 153, 225, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(174, 206, 246, 0.46), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(147, 184, 230, 0.18);
}


/* ========================================================================== 
   v362: Characters list badge labels
   - Make audio episode and video count badges self-identifying on desktop and mobile.
   - Scope to the public Characters list only.
   ========================================================================== */
.public-list-page--characters .characters-table .character-count-pill{
  min-width:0;
  padding-left:10px;
  padding-right:12px;
}

.public-list-page--characters .characters-table .character-count-pill__label,
.public-list-page--characters .characters-table .character-count-pill__count{
  display:inline-block;
  line-height:1;
}

.public-list-page--characters .characters-table .character-count-pill__label{
  font-size:0.86em;
  font-weight:800;
  letter-spacing:0.02em;
}

.public-list-page--characters .characters-table .character-count-pill__count{
  font-weight:900;
}

.public-list-page--characters .characters-table .character-count-pill--episodes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
}

.public-list-page--characters .characters-table .character-count-pill--videos{
  border-color:rgba(147, 197, 253, 0.34);
  color:#cfe7ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(90, 180, 255, 0.20), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(90, 180, 255, 0.12);
}

html.theme-light .public-list-page--characters .characters-table .character-count-pill--videos{
  color:#25648a;
  border-color:rgba(80, 161, 208, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242, 250, 254, 0.95)),
    linear-gradient(135deg, rgba(164, 217, 245, 0.46), rgba(231, 246, 253, 0.90) 72%);
}

@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  .public-list-page--characters .row-meta.row-meta--compact-badges-mobile .badge-audio-episodes .badge-label,
  .public-list-page--characters .row-meta.row-meta--compact-badges-mobile .badge-videos .badge-label{
    display:inline !important;
  }

  .public-list-page--characters .row-meta.row-meta--compact-badges-mobile .badge-audio-episodes,
  .public-list-page--characters .row-meta.row-meta--compact-badges-mobile .badge-videos{
    min-width:78px;
    justify-content:center;
  }
}

.public-list-page--characters .row-meta .badge-audio-episodes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
}

.public-list-page--characters .row-meta .badge-videos::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm6 2.4v6.2L15.5 12 10 8.9Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm6 2.4v6.2L15.5 12 10 8.9Z'/></svg>");
}


/* ========================================================================== 
   v363: Characters list desktop badge cleanup
   - Hide zero-count Audio/Video badges by rendering them conditionally.
   - Keep mobile badge styling intact while making desktop badges flatter and clearer.
   ========================================================================== */
.public-list-page--characters .characters-table .character-count-empty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  font-weight:700;
  color:var(--muted);
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine){
  .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills{
    gap:8px;
  }

  .public-list-page--characters .characters-table .character-count-pill{
    min-height:28px;
    padding:6px 10px;
    border-radius:10px;
    gap:5px;
    font-size:13px;
    letter-spacing:0.01em;
    color:#dbeafe;
    border-color:rgba(125, 177, 238, 0.34);
    background:rgba(37, 59, 90, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 12px rgba(0,0,0,0.16);
  }

  .public-list-page--characters .characters-table .character-count-pill::before{
    width:13px;
    height:13px;
    flex-basis:13px;
  }

  .public-list-page--characters .characters-table .character-count-pill__label{
    font-size:12px;
    font-weight:800;
    opacity:0.92;
  }

  .public-list-page--characters .characters-table .character-count-pill__label::after{
    content:":";
  }

  .public-list-page--characters .characters-table .character-count-pill__count{
    font-size:13px;
    font-weight:900;
  }

  .public-list-page--characters .characters-table .character-count-pill--videos{
    color:#d9f1ff;
    border-color:rgba(108, 188, 235, 0.34);
    background:rgba(32, 70, 96, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 12px rgba(0,0,0,0.16);
  }

  html.theme-light .public-list-page--characters .characters-table .character-count-pill{
    color:#24588f;
    border-color:rgba(82, 132, 192, 0.28);
    background:rgba(243, 248, 254, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.92),
      0 4px 12px rgba(52, 91, 139, 0.10);
  }

  html.theme-light .public-list-page--characters .characters-table .character-count-pill--videos{
    color:#22617f;
    border-color:rgba(73, 151, 196, 0.30);
    background:rgba(241, 250, 254, 0.96);
  }
}


/* ========================================================================== 
   v364: Character Audio/Video badge palette binding
   - Tie both Audio and Video character badges to the Admin title palette's
     Audio/Video badge color.
   - Keep the existing mobile layout while sharing the same configurable hue.
   ========================================================================== */
.public-list-page--characters .characters-table .character-count-pill,
.public-list-page--characters .characters-table .character-count-pill--videos,
.public-list-page--characters .row-meta .badge-audio-episodes,
.public-list-page--characters .row-meta .badge-videos{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.24), rgba(14, 23, 39, 0.89) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.16),
    0 0 18px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
}

html.theme-light .public-list-page--characters .characters-table .character-count-pill,
html.theme-light .public-list-page--characters .characters-table .character-count-pill--videos,
html.theme-light .public-list-page--characters .row-meta .badge-audio-episodes,
html.theme-light .public-list-page--characters .row-meta .badge-videos{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.91) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 4px 12px rgba(52, 91, 139, 0.10),
    0 0 18px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.09);
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine){
  .public-list-page--characters .characters-table .character-count-pill,
  .public-list-page--characters .characters-table .character-count-pill--videos{
    color: var(--list-pill-episodes-color, #D6E7FF);
    border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
    background: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 12px rgba(0,0,0,0.16);
  }

  html.theme-light .public-list-page--characters .characters-table .character-count-pill,
  html.theme-light .public-list-page--characters .characters-table .character-count-pill--videos{
    color: var(--list-pill-episodes-color, #2C5F9E);
    border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34);
    background: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.92),
      0 4px 12px rgba(52, 91, 139, 0.10);
  }
}

/* ========================================================================== 
   v365: Character Audio/Video mobile badge palette specificity fix
   - Ensure compact mobile Audio and Video badges use the Admin title palette's
     Audio/Video badge color, matching the desktop count badges.
   - Use a narrowly scoped selector so other list badge styles are unchanged.
   ========================================================================== */
.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile .badge-audio-episodes,
.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile .badge-videos{
  color: var(--list-pill-episodes-color, #D6E7FF);
  border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.24), rgba(14, 23, 39, 0.89) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.08),
    0 3px 9px rgba(0,0,0,0.18),
    0 0 18px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
}

html.theme-light .public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile .badge-audio-episodes,
html.theme-light .public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile .badge-videos{
  color: var(--list-pill-episodes-color, #2C5F9E);
  border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.91) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.10),
    0 3px 9px rgba(54,82,122,0.10),
    0 0 18px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.09);
}


/* ========================================================================== 
   v366: Character Audio/Video mobile badge live palette fix
   - Give the mobile Characters list Audio and Video badges the same palette
     binding strength as the desktop badges.
   - Works with the live title color picker and the saved Admin Config palette.
   ========================================================================== */
@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  html body .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes,
  html body .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos{
    color: var(--list-pill-episodes-color, #D6E7FF) !important;
    border-color: rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.24), rgba(14, 23, 39, 0.89) 60%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 0 1px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.08),
      0 3px 9px rgba(0,0,0,0.18),
      0 0 18px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12) !important;
  }

  html.theme-light body .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes,
  html.theme-light body .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos{
    color: var(--list-pill-episodes-color, #2C5F9E) !important;
    border-color: rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.36) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.91) 72%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.88),
      0 0 0 1px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.10),
      0 3px 9px rgba(54,82,122,0.10),
      0 0 18px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.09) !important;
  }
}


/* ========================================================================== 
   v367: Character Audio/Video mobile badge text color guard
   - Keep the compact mobile Characters list Audio and Video badge text tied to
     the Admin Config Audio/Video badge color.
   - Overrides the generic public badge text-color override that can otherwise
     keep nested label/count text on the old blue palette.
   ========================================================================== */
@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes *,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos *{
    color: var(--list-pill-episodes-color, #D6E7FF) !important;
  }

  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-audio-episodes *,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos *{
    color: var(--list-pill-episodes-color, #2C5F9E) !important;
  }
}


/* ========================================================================== 
   v368: Character Audio/Video rounded desktop badge and icon alignment fix
   - Keep the Characters list Audio and Video count badges in the rounded pill
     style at full desktop width instead of switching to the flatter style.
   - Recenter the Audio headset mask on both the desktop count pill and the
     compact responsive badge.
   ========================================================================== */
.public-list-page--characters .characters-table .character-count-pill--episodes::before,
.public-list-page--characters .row-meta .badge-audio-episodes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  -webkit-mask-position:center center;
  mask-position:center center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.public-list-page--characters .characters-table .character-count-pill::before,
.public-list-page--characters .row-meta .badge-audio-episodes::before{
  align-self:center;
  vertical-align:middle;
  transform:translateY(0.5px);
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine){
  .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills{
    gap:9px;
  }

  .public-list-page--characters .characters-table .character-count-pill,
  .public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:34px;
    min-width:0;
    padding:8px 15px;
    border-radius:999px;
    gap:7px;
    font-size:13px;
    letter-spacing:0.01em;
    color:var(--list-pill-episodes-color, #D6E7FF);
    border-color:rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.38);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.24), rgba(14, 23, 39, 0.89) 60%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
  }

  .public-list-page--characters .characters-table .character-count-pill::before{
    width:14px;
    height:14px;
    flex:0 0 14px;
  }

  .public-list-page--characters .characters-table .character-count-pill__label{
    font-size:13px;
    font-weight:800;
    opacity:0.94;
  }

  .public-list-page--characters .characters-table .character-count-pill__count{
    font-size:14px;
    font-weight:900;
  }

  html.theme-light .public-list-page--characters .characters-table .character-count-pill,
  html.theme-light .public-list-page--characters .characters-table .character-count-pill--videos{
    color:var(--list-pill-episodes-color, #2C5F9E);
    border-color:rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.36);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
      linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.91) 72%);
    box-shadow:
      0 10px 22px rgba(53, 96, 150, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18),
      0 0 18px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.09);
  }
}


/* ========================================================================== 
   v369: Character desktop Audio/Video badge breathing room
   - Slightly relax the side-by-side desktop Audio and Video count badges so
     they keep the rounded pill look without feeling small or crowded.
   - Keep the scope limited to the public Characters list desktop count pills.
   ========================================================================== */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine){
  .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills,
  html.theme-light .public-list-page--characters .characters-table td:nth-child(3) .character-count-pills{
    gap:11px;
  }

  .public-list-page--characters .characters-table .character-count-pill,
  .public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:36px;
    padding:9px 16px;
    gap:8px;
  }

  .public-list-page--characters .characters-table .character-count-pill::before{
    width:15px;
    height:15px;
    flex:0 0 15px;
  }

  .public-list-page--characters .characters-table .character-count-pill__label{
    font-size:13.5px;
  }

  .public-list-page--characters .characters-table .character-count-pill__count{
    font-size:14.5px;
  }
}



/* ========================================================================== 
   v370: Character desktop Audio/Video badge visible spacing adjustment
   - Make the desktop public Characters list Audio and Video badges visibly more
     relaxed when side by side.
   - Use a stronger, narrowly scoped override so the change wins over older
     desktop badge sizing rules without affecting mobile badges or other lists.
   ========================================================================== */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .character-count-pills{
    gap:14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:40px !important;
    padding:10px 20px !important;
    gap:10px !important;
    border-radius:999px !important;
    font-size:14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size:14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size:15px !important;
  }
}


/* ========================================================================== 
   v372: Character desktop grouped badge extra left nudge
   - Move the public Characters list desktop Audio/Video badge group a little
     farther left for a better gap before the vote column.
   - Keep the earlier desktop-only spacing and padding refinements unchanged.
   - Mobile compact badges are unchanged.
   ========================================================================== */
@media (min-width: 1180px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width:188px !important;
    min-width:188px !important;
    padding-left:0 !important;
    padding-right:24px !important;
    text-align:left !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills{
    justify-content:flex-start !important;
    gap:18px !important;
    margin:0 !important;
    transform:translateX(-18px);
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:42px !important;
    padding:11px 22px !important;
    gap:11px !important;
  }
}


/* ========================================================================== 
   v374: Character full-width desktop action pill trim
   - Keep half-window desktop controls unchanged.
   - Trim the full-width desktop Audio/Video, Votes, and AIOWiki controls so
     they are only about 10-15% larger than the half-window desktop size.
   - Keep mobile and touch layouts unchanged.
   ========================================================================== */
@media (min-width: 1600px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width:194px !important;
    min-width:194px !important;
    padding-right:26px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills{
    gap:19px !important;
    transform:translateX(-18px);
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:43px !important;
    padding:11px 21px !important;
    gap:11px !important;
    font-size:14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size:14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size:15px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(5) .cell-fx{
    min-height:36px !important;
    padding:6px 9px !important;
    gap:4px !important;
    font-size:12.5px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(5) .cell-fx::before{
    width:13px !important;
    height:13px !important;
    flex-basis:13px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(6) .btn{
    min-width:90px !important;
    min-height:36px !important;
    padding:6px 10px !important;
    gap:4px !important;
    font-size:12.5px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(6) .btn::before{
    width:12px !important;
    height:12px !important;
    flex-basis:12px !important;
  }
}


/* ========================================================================== 
   v375: Character full-window Audio/Video badge size correction
   - Keep the half-window desktop Audio/Video badge size unchanged.
   - Make the full-window Audio/Video badges step up by about the same amount
     as the Votes and AIOWiki action pills instead of becoming much larger.
   - Scope only to the public Characters list wide desktop layout.
   ========================================================================== */
@media (min-width: 1600px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:36px !important;
    padding:6px 10px !important;
    gap:5px !important;
    font-size:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
    flex-basis:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size:13px !important;
  }
}


/* ========================================================================== 
   v376: Other public tabs full-window desktop badge size step
   - Keep half-window desktop sizing unchanged.
   - Add the same wide-desktop size step used on Characters to the public
     Albums, Club Seasons, Episodes, Elsewhere, Videos, and Arcs action badges.
   - Scope only to fine-pointer full-window desktop widths.
   ========================================================================== */
@media (min-width: 1600px) and (pointer: fine){
  html body main#main .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  html body main#main .public-list-page--albums .albums-table td:nth-child(5) .cell-fx,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx,
  html body main#main .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  html body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  html body main#main .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx{
    min-height:36px !important;
    padding:6px 9px !important;
    gap:4px !important;
    font-size:12.5px !important;
  }

  html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episodes{
    min-height:36px !important;
    padding:6px 10px !important;
    gap:5px !important;
    font-size:12px !important;
  }

  html body main#main .public-list-page--albums .albums-table td:nth-child(4) .cell-fx::before,
  html body main#main .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx::before,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx::before,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before{
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
    flex-basis:13px !important;
  }

  html body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn,
  html body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn,
  html body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn,
  html body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn{
    min-width:90px !important;
    min-height:36px !important;
    padding:6px 10px !important;
    gap:4px !important;
    font-size:12.5px !important;
  }

  html body main#main .public-list-page--albums .albums-table td:nth-child(6) .btn::before,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(6) .btn::before,
  html body main#main .public-list-page--episodes .episodes-table td:nth-child(6) .btn::before,
  html body main#main .public-list-page--elsewhere .elsewhere-table td:nth-child(6) .btn::before,
  html body main#main .public-list-page--videos .elsewhere-table td:nth-child(6) .btn::before,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(5) .btn::before{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
    flex-basis:12px !important;
  }
}


/* ========================================================================== 
   v377: Other public tab episode badge icon parity
   - Use the same headphones icon as the Characters tab Audio badge for
     episode-count badges on Albums, Club Seasons, and Arcs.
   - Keep the change scoped to episode-count badges only, so Episodes tab
     album/season info badges are not changed.
   ========================================================================== */
.public-list-page--albums .albums-table .row-meta--albums .badge-episodes::before,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes::before,
.public-list-page--arcs .arcs-table .row-meta .badge-episodes::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
}

@media (min-width: 1025px) and (pointer: fine){
  html body main#main .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
  html body main#main .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Zm-6 8.5V15a1 1 0 0 0 1 1h.5v-4.5H6Zm10.5 0V16H17a1 1 0 0 0 1-1v-3.5h-1.5Z'/></svg>");
  }
}


/* ========================================================================== 
   v378: Other tab episode icon alignment and Albums default direction
   - Recenter the headphones icon on other public tab episode-count badges so
     it matches the Characters tab Audio badge alignment.
   - Keep the icon change scoped to Albums, Club Seasons, and Arcs episode
     count badges.
   ========================================================================== */
.public-list-page--albums .albums-table .row-meta--albums .badge-episodes::before,
.public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes::before,
.public-list-page--arcs .arcs-table .row-meta .badge-episodes::before,
html body main#main .public-list-page--albums .albums-table td:nth-child(5) .cell-fx::before,
html body main#main .public-list-page--seasons .seasons-table td:nth-child(5) .cell-fx::before,
html body main#main .public-list-page--arcs .arcs-table td:nth-child(4) .cell-fx::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  -webkit-mask-position:center center;
  mask-position:center center;
  -webkit-mask-size:contain;
  mask-size:contain;
  align-self:center;
  vertical-align:middle;
  transform:translateY(0.5px);
}


/* ========================================================================== 
   v382: Public list title name polish
   - Give public list item names a slightly stronger but still clean presence.
   - Keep the existing Admin Config title color setting in control of color.
   - Add a subtle hover/focus underline for clickable names only.
   ========================================================================== */
.public-list-page .row-title{
  font-weight: 700;
  letter-spacing: 0.006em;
  text-wrap: pretty;
}

.public-list-page a.row-title{
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition:
    opacity 140ms ease,
    text-decoration-color 140ms ease,
    text-underline-offset 140ms ease;
}

.public-list-page a.row-title:hover,
.public-list-page a.row-title:focus-visible,
.public-list-page .row-link:hover a.row-title{
  opacity: 0.96;
  text-decoration-color: currentColor;
  text-underline-offset: 5px;
}

.public-list-page a.row-title:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}


/* ========================================================================== 
   v383: Responsive public list title name polish parity
   - Make the public list name polish visible in half-width/compact desktop layouts too.
   - Keep the change scoped to public list row titles only.
   - Preserve the existing Admin Config title color setting.
   ========================================================================== */
@media (max-width: 1179px), (hover: none) and (pointer: coarse){
  html body main#main .public-list-page .row-title{
    font-weight: 800 !important;
    letter-spacing: 0.008em;
  }

  html body main#main .public-list-page a.row-title{
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  html body main#main .public-list-page a.row-title:hover,
  html body main#main .public-list-page a.row-title:focus-visible,
  html body main#main .public-list-page .row-link:hover a.row-title{
    opacity: 0.96;
    text-decoration-color: currentColor;
    text-underline-offset: 5px;
  }
}


/* ========================================================================== 
   v384: Public list title weight reset and compact underline fix
   - Restore public list row titles to the original normal/semi-bold weight.
   - Keep the existing Admin Config title color setting in control of color.
   - Make the hover/focus underline work in compact and half-width list layouts.
   ========================================================================== */
.public-list-page .row-title,
html body main#main .public-list-page .row-title{
  font-weight: 650 !important;
  letter-spacing: normal !important;
}

.public-list-page a.row-title,
html body main#main .public-list-page a.row-title{
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 2px !important;
  text-decoration-skip-ink: auto;
}

.public-list-page a.row-title:hover,
.public-list-page a.row-title:focus-visible,
.public-list-page .row-link:hover a.row-title,
.public-list-page .row-link:focus-visible a.row-title,
html body main#main .public-list-page a.row-title:hover,
html body main#main .public-list-page a.row-title:focus-visible,
html body main#main .public-list-page .row-link:hover a.row-title,
html body main#main .public-list-page .row-link:focus-visible a.row-title{
  opacity: 0.96;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px !important;
}


/* ========================================================================== 
   v385: Album and season detail title name underline parity
   - Apply the public row-title hover/focus underline treatment to episode
     title links inside album and season detail lists.
   - Keep the original semi-bold title weight instead of the stronger text.
   - Keep the existing Admin Config title color setting in control.
   ========================================================================== */
body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-title,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-title,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail .row-title,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail .row-title{
  font-weight: 650 !important;
  letter-spacing: normal !important;
}

body[data-page-kind="album"] .page-album-detail .episodes-table--detail a.row-title,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail a.row-title,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail a.row-title,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail a.row-title{
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 2px !important;
  text-decoration-skip-ink: auto;
}

body[data-page-kind="album"] .page-album-detail .episodes-table--detail a.row-title:hover,
body[data-page-kind="album"] .page-album-detail .episodes-table--detail a.row-title:focus-visible,
body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-link:hover a.row-title,
body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-link:focus-visible a.row-title,
body[data-page-kind="album"] .page-album-detail .episodes-table--detail .row-link:focus-within a.row-title,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail a.row-title:hover,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail a.row-title:focus-visible,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-link:hover a.row-title,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-link:focus-visible a.row-title,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail .row-link:focus-within a.row-title,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail a.row-title:hover,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail a.row-title:focus-visible,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail .row-link:hover a.row-title,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail .row-link:focus-visible a.row-title,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail .row-link:focus-within a.row-title,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail a.row-title:hover,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail a.row-title:focus-visible,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail .row-link:hover a.row-title,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail .row-link:focus-visible a.row-title,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail .row-link:focus-within a.row-title{
  opacity: 0.96;
  text-decoration-color: currentColor !important;
}


/* ========================================================================== 
   v387: Mobile public list top corner rounding
   - Match the rounded desktop list header corners on compact mobile/touch list tables.
   - Target the actual rightmost visible header cells after responsive columns hide.
   - Keep the change scoped to public list tables only.
   ========================================================================== */
@media (max-width: 1179px), (pointer: coarse){
  html body main#main .public-list-page .data-table thead th:first-child{
    border-top-left-radius:15px !important;
  }

  html body main#main .public-list-page--albums .albums-table thead th:nth-child(3),
  html body main#main .public-list-page--seasons .seasons-table thead th:nth-child(3),
  html body main#main .public-list-page--characters .characters-table thead th:nth-child(4),
  html body main#main .public-list-page--episodes .episodes-table thead th:nth-child(4),
  html body main#main .public-list-page--elsewhere .elsewhere-table thead th:nth-child(4),
  html body main#main .public-list-page--videos .elsewhere-table thead th:nth-child(4),
  html body main#main .public-list-page--arcs .arcs-table thead th:nth-child(2){
    border-top-right-radius:15px !important;
  }
}


/* ========================================================================== 
   v388: Character desktop Audio/Video badge maximum size cap
   - Keep Characters list Audio and Video count badges from becoming larger at
     intermediate desktop widths than they are at full-window desktop width.
   - Reuse the existing full-window badge dimensions for all fine-pointer
     desktop layouts.
   - Scope only to the public Characters list Audio/Video count pills.
   ========================================================================== */
@media (min-width: 1180px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-height:36px !important;
    padding:6px 10px !important;
    gap:5px !important;
    font-size:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
    flex-basis:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size:12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size:13px !important;
  }
}
/* ========================================================================== 
   v389: Public feedback form layout cleanup
   - Keep full-width feedback rows full-width at tablet breakpoints.
   - Put the Submit feedback button on its own clean row on desktop.
   - Stack the feedback form fields on iPad/tablet portrait widths.
   ========================================================================== */
.feedback-form .admin-ops-form-field--full{
  grid-column:1 / -1;
}

.feedback-form .admin-ops-submit{
  grid-column:1 / -1;
  justify-content:flex-start;
}

.feedback-form .admin-ops-submit .btn{
  width:auto;
  min-width:200px;
}

@media (max-width: 920px){
  .feedback-form .admin-ops-form-field,
  .feedback-form .admin-ops-form-field--wide,
  .feedback-form .admin-ops-form-field--full,
  .feedback-form .admin-ops-submit{
    grid-column:1 / -1;
  }

  .feedback-form .admin-ops-submit .btn{
    width:100%;
    min-width:0;
  }
}


/* ========================================================================== 
   v391: Public feedback form compatibility cleanup
   - Scope the public Feedback form to its own grid rules.
   - Stack the form on iPad/tablet portrait before the generic admin grid can squeeze it.
   - Keep the submit action on a clean row.
   - Do not set the CSS resize property on the public Feedback textarea.
   ========================================================================== */
body[data-page-kind="feedback"] .feedback-shell{
  max-width:min(900px, 100%);
}

body[data-page-kind="feedback"] .feedback-form{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:18px;
  row-gap:14px;
  align-items:start;
}

body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field{
  grid-column:auto;
}

body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field--wide{
  grid-column:span 1;
}

body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field--full{
  grid-column:1 / -1;
}

body[data-page-kind="feedback"] .feedback-form textarea{
  min-height:220px;
}

body[data-page-kind="feedback"] .feedback-form .help-text{
  line-height:1.45;
}

body[data-page-kind="feedback"] .feedback-form .admin-ops-submit{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:2px;
}

body[data-page-kind="feedback"] .feedback-form .admin-ops-submit .btn{
  width:auto;
  min-width:220px;
}

@media (max-width: 980px), (hover: none) and (max-width: 1180px) and (orientation: portrait){
  body[data-page-kind="feedback"] .feedback-form{
    grid-template-columns:minmax(0, 1fr);
  }

  body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field,
  body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field--wide,
  body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field--full,
  body[data-page-kind="feedback"] .feedback-form .admin-ops-submit{
    grid-column:1 / -1;
  }

  body[data-page-kind="feedback"] .feedback-form textarea{
    min-height:240px;
  }

  body[data-page-kind="feedback"] .feedback-form .admin-ops-submit{
    justify-content:stretch;
  }

  body[data-page-kind="feedback"] .feedback-form .admin-ops-submit .btn{
    width:100%;
    min-width:0;
  }
}


/* ========================================================================== 
   v392: Mobile compact list badge row consistency
   - Force the compact under-title vote badge to keep the Audio/Video or
     episode-count badge on the next row instead of sometimes sharing a row.
   - Keep the change scoped to compact public-list mobile/touch badge rows only.
   - Leave desktop list badges, colors, icons, sorting, pagination, and templates unchanged.
   ========================================================================== */
@media (max-width: 680px), (hover: none) and (pointer: coarse) and (max-width: 1179px){
  .public-list-page .row-meta.row-meta--compact-badges-mobile > .badge-votes{
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    margin-right: 100%;
  }
}

/* ========================================================================== 
   v393: Episodes mobile Album/Season badge restore
   - Keep the v392 votes row break, but do not force all episode-style badges
     onto their own zero-width row.
   - Restore the Episodes tab Album/Season badge text after the mobile row-break
     change made those badges collapse to icon-only.
   - Keep the change scoped to compact public-list mobile/touch badge rows.
   ========================================================================== */
@media (max-width: 680px), (hover: none) and (pointer: coarse) and (max-width: 1179px){
  .public-list-page .row-meta.row-meta--compact-badges-mobile > .badge-episodes{
    margin-right: 0;
  }

  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-album,
  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-season{
    display: inline-flex;
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    overflow: hidden;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-album .badge-text,
  .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile > .badge-episode-season .badge-text{
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* ==========================================================================
   v394: Episode detail larger image button
   - Adds the Episodes vote-detail thumbnail action button styling.
   - Uses the same vote-info button shape/effects and ties its tint to the
     Admin Config title palette's Audio/Video badge sub-color.
   ========================================================================== */
body[data-page-kind="episode"] .episode-image-actions{
  width: min(100%, 420px);
  max-width: min(100%, 420px);
  display: flex;
  align-items: flex-start;
}

body[data-page-kind="episode"] .episode-image-open-btn{
  --episode-image-open-rgb: var(--list-pill-episodes-rgb, 214, 231, 255);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  border-color: rgba(var(--episode-image-open-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--episode-image-open-rgb), 0.16), rgba(var(--episode-image-open-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76);
}

body[data-page-kind="episode"] .episode-image-open-btn .detail-button-icon,
body[data-page-kind="episode"] .episode-image-open-btn .detail-button-text{
  color: inherit !important;
}

body[data-page-kind="episode"] .episode-image-open-btn .detail-button-icon svg{
  stroke: currentColor !important;
}

@media (pointer: fine){
  body[data-page-kind="episode"] .episode-image-open-btn:hover:not(:active),
  body[data-page-kind="episode"] .episode-image-open-btn:focus-visible{
    border-color: rgba(var(--episode-image-open-rgb), 0.50) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,0.27),
      0 0 0 1px rgba(var(--episode-image-open-rgb), 0.10),
      0 0 18px rgba(var(--episode-image-open-rgb), calc(0.11 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045);
  }
}

html.theme-light body[data-page-kind="episode"] .episode-image-open-btn{
  --episode-image-open-rgb: var(--list-pill-episodes-rgb, 44, 95, 158);
  border-color: rgba(var(--episode-image-open-rgb), 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--episode-image-open-rgb), 0.105), rgba(var(--episode-image-open-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82);
}

@media (pointer: fine){
  html.theme-light body[data-page-kind="episode"] .episode-image-open-btn:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .episode-image-open-btn:focus-visible{
    border-color: rgba(var(--episode-image-open-rgb), 0.48) !important;
    box-shadow:
      0 12px 23px rgba(15,23,42,0.095),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 16px rgba(var(--episode-image-open-rgb), calc(0.070 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(76, 114, 164, 0.065);
  }
}
/* ============================================================================
   v394 follow-up: Detail larger image buttons on all public detail/vote pages
   - Extends the View larger image action to Characters, Albums, Club Seasons,
     Elsewhere, Videos, and Arcs while keeping the Episode behavior.
   - The button tint uses the Admin Config title palette's Episodes/Audio color.
   ============================================================================ */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-actions{
  width: min(100%, 420px);
  max-width: min(100%, 420px);
  display: flex;
  align-items: flex-start;
}

body:is([data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-actions{
  margin-top: 10px;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn{
  --detail-image-open-rgb: var(--list-pill-episodes-rgb, 214, 231, 255);
  --glow-buttons-rgb: var(--detail-image-open-rgb);
  --glow-buttons-int: var(--glow-primary-int, 1);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  color: var(--list-pill-episodes-color, #D6E7FF) !important;
  border-color: rgba(var(--detail-image-open-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--detail-image-open-rgb), 0.16), rgba(var(--detail-image-open-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn .detail-button-icon,
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn .detail-button-text{
  color: inherit !important;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn .detail-button-icon svg{
  stroke: currentColor !important;
}

@media (pointer: fine){
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn:hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn:focus-visible{
    border-color: rgba(var(--detail-image-open-rgb), 0.50) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,0.27),
      0 0 0 1px rgba(var(--detail-image-open-rgb), 0.10),
      0 0 18px rgba(var(--detail-image-open-rgb), calc(0.11 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045);
  }
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn{
  --detail-image-open-rgb: var(--list-pill-episodes-rgb, 44, 95, 158);
  color: var(--list-pill-episodes-color, #2C5F9E) !important;
  border-color: rgba(var(--detail-image-open-rgb), 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--detail-image-open-rgb), 0.105), rgba(var(--detail-image-open-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82);
}

@media (pointer: fine){
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn:hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn:focus-visible{
    border-color: rgba(var(--detail-image-open-rgb), 0.48) !important;
    box-shadow:
      0 12px 23px rgba(15,23,42,0.095),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 16px rgba(var(--detail-image-open-rgb), calc(0.070 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(76, 114, 164, 0.065);
  }
}

body:is([data-page-kind="character"],[data-page-kind="album"]) .character-media-card .detail-image-actions{
  margin-top: 0;
}


/* ============================================================================
   v395: Tie detail-page helper buttons to the Admin Config title palette
   - Vote info uses the selected title palette's Votes button color.
   - View larger image uses the selected title palette's Audio/Video color.
   - AIOWiki uses the selected title palette's AIOWiki color.
   - Episode Album/Season context pills use the selected title color itself.
   ============================================================================ */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn{
  --detail-palette-color: var(--list-pill-episodes-color, #D6E7FF);
  --detail-palette-rgb: var(--list-pill-episodes-rgb, 101, 170, 255);
  --glow-buttons-rgb: var(--detail-palette-rgb);
  --glow-buttons-int: var(--glow-primary-int, 1);
}

body:is([data-page-kind="episode"],[data-page-kind="videos"]) .detail-vote-info-btn{
  --detail-palette-color: var(--list-pill-votes-color, #D7EFB3);
  --detail-palette-rgb: var(--list-pill-votes-rgb, 170, 214, 115);
  --glow-buttons-rgb: var(--detail-palette-rgb);
  --glow-buttons-int: var(--glow-primary-int, 1);
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  --detail-palette-color: var(--list-pill-aiowiki-color, #EAF3FF);
  --detail-palette-rgb: var(--list-pill-aiowiki-rgb, 93, 161, 255);
  --glow-buttons-rgb: var(--detail-palette-rgb);
  --glow-buttons-int: var(--glow-aiowiki-int, var(--glow-primary-int, 1));
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn){
  color: var(--detail-palette-color) !important;
  border-color: rgba(var(--detail-palette-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--detail-palette-rgb), 0.17), rgba(var(--detail-palette-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--detail-palette-rgb), 0.075),
    0 0 18px rgba(var(--detail-palette-rgb), calc(0.070 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn) :is(.detail-button-icon, .detail-button-text),
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn) .detail-button-icon svg{
  color: inherit !important;
  stroke: currentColor !important;
}

@media (pointer: fine){
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn):hover:not(:active),
  body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn):focus-visible{
    border-color: rgba(var(--detail-palette-rgb), 0.50) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,0.27),
      0 0 0 1px rgba(var(--detail-palette-rgb), 0.10),
      0 0 22px rgba(var(--detail-palette-rgb), calc(0.095 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045) !important;
  }
}

body[data-page-kind="episode"] .episode-context-item{
  --detail-context-color: var(--title-text-color, #9AD0FF);
  --detail-context-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 101, 170, 255));
  --glow-buttons-rgb: var(--detail-context-rgb);
  color: var(--detail-context-color) !important;
  border-color: rgba(var(--detail-context-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--detail-context-rgb), 0.15), rgba(var(--detail-context-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--detail-context-rgb), 0.070),
    0 0 18px rgba(var(--detail-context-rgb), calc(0.060 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

body[data-page-kind="episode"] .episode-context-item :is(.episode-context-label, .episode-context-value, .episode-context-icon, .episode-context-icon svg){
  color: var(--detail-context-color) !important;
  stroke: currentColor !important;
}

body[data-page-kind="episode"] .episode-context-item .episode-context-label{
  opacity: 0.82;
}

@media (pointer: fine){
  body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  body[data-page-kind="episode"] .episode-context-item[href]:focus-visible{
    border-color: rgba(var(--detail-context-rgb), 0.48) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,0.27),
      0 0 0 1px rgba(var(--detail-context-rgb), 0.095),
      0 0 22px rgba(var(--detail-context-rgb), calc(0.085 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.045) !important;
  }
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .detail-image-open-btn{
  --detail-palette-color: var(--list-pill-episodes-color, #2C5F9E);
  --detail-palette-rgb: var(--list-pill-episodes-rgb, 44, 95, 158);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="videos"]) .detail-vote-info-btn{
  --detail-palette-color: var(--list-pill-votes-color, #5A761F);
  --detail-palette-rgb: var(--list-pill-votes-rgb, 148, 184, 92);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) .vote-info-btn.aiowiki-btn{
  --detail-palette-color: var(--list-pill-aiowiki-color, #274A74);
  --detail-palette-rgb: var(--list-pill-aiowiki-rgb, 107, 156, 220);
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn){
  color: var(--detail-palette-color) !important;
  border-color: rgba(var(--detail-palette-rgb), 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--detail-palette-rgb), 0.115), rgba(var(--detail-palette-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--detail-palette-rgb), calc(0.045 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--detail-palette-rgb), 0.055) !important;
  text-shadow: none !important;
}

html.theme-light body[data-page-kind="episode"] .episode-context-item{
  --detail-context-color: var(--title-text-color, #1D2430);
  --detail-context-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 44, 95, 158));
  color: var(--detail-context-color) !important;
  border-color: rgba(var(--detail-context-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--detail-context-rgb), 0.105), rgba(var(--detail-context-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--detail-context-rgb), calc(0.035 * var(--glow-buttons-int))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--detail-context-rgb), 0.055) !important;
  text-shadow: none !important;
}

@media (pointer: fine){
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn):hover:not(:active),
  html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"],[data-page-kind="album"],[data-page-kind="season"]) :is(.detail-image-open-btn, .detail-vote-info-btn, .vote-info-btn.aiowiki-btn):focus-visible{
    border-color: rgba(var(--detail-palette-rgb), 0.48) !important;
    box-shadow:
      0 12px 23px rgba(15,23,42,0.095),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 18px rgba(var(--detail-palette-rgb), calc(0.060 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(var(--detail-palette-rgb), 0.065) !important;
  }

  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:hover:not(:active),
  html.theme-light body[data-page-kind="episode"] .episode-context-item[href]:focus-visible{
    border-color: rgba(var(--detail-context-rgb), 0.44) !important;
    box-shadow:
      0 12px 23px rgba(15,23,42,0.095),
      0 0 0 1px rgba(255,255,255,0.82),
      0 0 18px rgba(var(--detail-context-rgb), calc(0.050 * var(--glow-buttons-int))),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(var(--detail-context-rgb), 0.065) !important;
  }
}


/* ============================================================================
   v396: Episode list Album/Season badges follow the Episode title color
   - Makes the Episodes tab Album/Season pills match the Album/Season context
     button color used on Episode vote/detail pages.
   - Keeps the compact badge size and existing list layout unchanged.
   ============================================================================ */
.public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-album,
.public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-season,
.public-list-page--episodes .episodes-table .row-meta .badge-episode-album,
.public-list-page--episodes .episodes-table .row-meta .badge-episode-season{
  --episode-context-list-color: var(--title-text-color, #9AD0FF);
  --episode-context-list-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 101, 170, 255));
  color: var(--episode-context-list-color) !important;
  border-color: rgba(var(--episode-context-list-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--episode-context-list-rgb), 0.15), rgba(var(--episode-context-list-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--episode-context-list-rgb), 0.070),
    0 0 18px rgba(var(--episode-context-list-rgb), calc(0.060 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

.public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-album .badge-text,
.public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-season .badge-text,
.public-list-page--episodes .episodes-table .row-meta .badge-episode-album .badge-text,
.public-list-page--episodes .episodes-table .row-meta .badge-episode-season .badge-text{
  color: inherit !important;
}

html.theme-light .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-album,
html.theme-light .public-list-page--episodes .episodes-table .episode-album-season-badges .badge-episode-season,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-episode-album,
html.theme-light .public-list-page--episodes .episodes-table .row-meta .badge-episode-season{
  --episode-context-list-color: var(--title-text-color, #1D2430);
  --episode-context-list-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 44, 95, 158));
  color: var(--episode-context-list-color) !important;
  border-color: rgba(var(--episode-context-list-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--episode-context-list-rgb), 0.105), rgba(var(--episode-context-list-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--episode-context-list-rgb), calc(0.035 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--episode-context-list-rgb), 0.055) !important;
  text-shadow: none !important;
}
/* ============================================================================
   v397: Episode Album/Season badge text follows the Episode title color
   - Adds a final Episodes-tab-only guard so the badge text and masked icon
     use the same Title primary color as the badge border, glow, and tint.
   - Keeps the existing badge size, spacing, layout, and hover behavior intact.
   ============================================================================ */
html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-album,
html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-season,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season{
  --episode-context-list-color: var(--title-text-color, #9AD0FF);
  --episode-context-list-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 101, 170, 255));
  color: var(--episode-context-list-color) !important;
  border-color: rgba(var(--episode-context-list-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--episode-context-list-rgb), 0.15), rgba(var(--episode-context-list-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--episode-context-list-rgb), 0.070),
    0 0 18px rgba(var(--episode-context-list-rgb), calc(0.060 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-album .badge-text,
html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-season .badge-text,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album .badge-text,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season .badge-text{
  color: var(--episode-context-list-color) !important;
  -webkit-text-fill-color: var(--episode-context-list-color) !important;
}

html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album::before,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season::before{
  color: var(--episode-context-list-color) !important;
  background-color: currentColor !important;
}

html.theme-light body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-album,
html.theme-light body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-season,
html.theme-light body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album,
html.theme-light body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season{
  --episode-context-list-color: var(--title-text-color, #1D2430);
  --episode-context-list-rgb: var(--title-text-rgb, var(--list-pill-episodes-rgb, 44, 95, 158));
  color: var(--episode-context-list-color) !important;
  border-color: rgba(var(--episode-context-list-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.76) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--episode-context-list-rgb), 0.105), rgba(var(--episode-context-list-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.82) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--episode-context-list-rgb), calc(0.035 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--episode-context-list-rgb), 0.055) !important;
  text-shadow: none !important;
}


/* ============================================================================
   v398: Episode list number values follow the Episode title style
   - Makes the visible # column values use the same Admin Config Title color as
     the Episode row titles.
   - Keeps them as plain text, not badges, so they stay secondary and do not
     compete with the Album/Season, Votes, or AIOWiki pills.
   - Keeps the change scoped to the public Episodes list only.
   ============================================================================ */
body[data-page-kind="episodes"] .public-list-page--episodes .episodes-table tbody td:first-child .cell-fx,
html body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table tbody td:first-child .cell-fx{
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
  font-weight: 650;
  letter-spacing: normal;
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.13 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="episodes"] .public-list-page--episodes .episodes-table tbody td:first-child .cell-fx,
html.theme-light body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table tbody td:first-child .cell-fx{
  text-shadow: none !important;
}


/* ============================================================================
   v399: Album and season detail list number values follow the Title style
   - Makes the # column values inside Album and Club Season detail episode lists
     match the same Admin Config Title color used by the episode row titles.
   - Keeps the numbers as plain text, not badges, so the detail lists stay clean.
   - Keeps the change scoped to Album and Club Season detail pages only.
   ============================================================================ */
body[data-page-kind="album"] .page-album-detail .episodes-table--detail tbody td:first-child .cell-fx,
body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail tbody td:first-child .cell-fx,
html body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail tbody td:first-child .cell-fx,
html body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail tbody td:first-child .cell-fx{
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
  font-weight: 650;
  letter-spacing: normal;
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.13 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail tbody td:first-child .cell-fx,
html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail tbody td:first-child .cell-fx,
html.theme-light body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail tbody td:first-child .cell-fx,
html.theme-light body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail tbody td:first-child .cell-fx{
  text-shadow: none !important;
}


/* ============================================================================
   v400: Character detail iPad portrait containment
   - At iPad portrait widths, the desktop side nav leaves a narrower content
     column while the character detail grid was still using its side-by-side
     layout. That could let the image column consume the page and push/cut off
     the vote panel.
   - Stack only the character detail page in portrait tablet width and cap the
     media frame so the vote controls remain reachable.
   - Landscape and desktop character detail sizing stay unchanged.
   ============================================================================ */
@media (min-width: 741px) and (max-width: 900px) and (orientation: portrait){
  body[data-page-kind="character"] .page-characters-detail .character-detail-grid{
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-left{
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card{
    display: flex;
    width: 100%;
    align-items: center;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card .character-detail-media{
    width: 100%;
    max-width: clamp(300px, 52vw, 400px);
    height: min(48vh, 460px);
    margin: 0 auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card .character-detail-media-stage{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  body[data-page-kind="character"] .page-characters-detail .thumb-character-page,
  body[data-page-kind="character"] .page-characters-detail .thumb-character-page-video{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-photo-controls,
  body[data-page-kind="character"] .page-characters-detail .character-image-actions{
    justify-content: center;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-right{
    width: 100%;
    max-width: 100%;
  }
}


/* ============================================================================
   v401: Character detail mobile landscape containment
   - Short landscape phone/tablet viewports do not have enough vertical room for
     the desktop character image minimum height. That could make the thumbnail
     dominate the page and push the vote card below the visible area.
   - Keep the character image compact only in short landscape layouts, and keep
     the vote card beside it so the voting section remains available.
   - Portrait tablet and desktop landscape sizing stay unchanged.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  body[data-page-kind="character"] .page-characters-detail .character-detail-grid{
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-left{
    flex: 0 1 clamp(160px, 32vw, 250px);
    width: clamp(160px, 32vw, 250px);
    max-width: clamp(160px, 32vw, 250px);
    min-width: 0;
    display: block;
  }

  body[data-page-kind="character"] .page-characters-detail .character-detail-right{
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card{
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: stretch;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card .character-detail-media{
    width: 100%;
    max-width: 100%;
    height: min(42vh, 170px);
    margin: 0 auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-media-card .character-detail-media-stage{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  body[data-page-kind="character"] .page-characters-detail .thumb-character-page,
  body[data-page-kind="character"] .page-characters-detail .thumb-character-page-video{
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }

  body[data-page-kind="character"] .page-characters-detail .character-photo-controls,
  body[data-page-kind="character"] .page-characters-detail .character-image-actions,
  body[data-page-kind="character"] .page-characters-detail .character-detail-actions{
    justify-content: center;
  }

  body[data-page-kind="character"] .page-characters-detail .char-photo-switch{
    width: 100%;
  }

  body[data-page-kind="character"] .page-characters-detail .char-photo-switch a{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 6px 8px;
    font-size: 13px;
  }

  body[data-page-kind="character"] .page-characters-detail .detail-image-actions .btn,
  body[data-page-kind="character"] .page-characters-detail .character-detail-actions .btn{
    min-height: 34px;
    padding: 8px 12px;
    font-size: 13px;
  }
}


/* ========================================================================== 
   v390: Character half-window Audio/Video badge fit
   - Keep the full-window desktop badge size unchanged.
   - Give half-window desktop Audio and Video pills enough width/padding so the
     labels and counts do not look squeezed.
   - Scope only to the public Characters list fine-pointer desktop layout below
     the full-window breakpoint.
   ========================================================================== */
@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width:220px !important;
    min-width:220px !important;
    padding-right:18px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills{
    gap:12px !important;
    transform:none !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:7px 13px !important;
    gap:6px !important;
    font-size:13px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--episodes{
    min-width:108px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-width:96px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
    flex-basis:13px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    flex:0 0 auto !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size:13px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size:14px !important;
  }
}


/* ============================================================================
   v402: Character half-window Audio/Video badge size and position fix
   - Keep the two visible Characters list Audio/Video badges at their normal
     readable pill size in half-window desktop layouts.
   - Move the grouped badges left inside the EP / VID column instead of
     shrinking the pills when both Audio and Video are present.
   - Scope only to the public Characters list fine-pointer desktop layout below
     the full-window breakpoint.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 252px !important;
    min-width: 252px !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
    text-align: left !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-20px) !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--episodes{
    min-width: 122px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill--videos{
    min-width: 112px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill::before{
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    flex-basis: 14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v403: Character half-window dual Audio/Video badge hard fit
   - Add a real two-badge state so rows with both Audio and Video can be sized
     and positioned without changing single-badge rows.
   - Keep the dual badges full-size, non-shrinking, separated, and shifted left
     into the unused character-name whitespace at half-window desktop widths.
   - Avoid transform-based positioning so row hover motion rules cannot undo the
     left shift.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1599px){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi{
    position: relative !important;
    left: -76px !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes{
    min-width: 132px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos{
    min-width: 122px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before{
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    flex-basis: 15px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v404: Character half-window dual Audio/Video badge parity
   - A row with both badges now uses the same full-size Audio and Video pill
     metrics as the single-badge rows.
   - The pair is shifted left as one group so the pills do not have to shrink.
   - The :has() selector makes the rule work even if an older cached template
     renders without the explicit multi class.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1599px){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 282px !important;
    min-width: 282px !important;
    max-width: 282px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos){
    position: relative !important;
    left: -70px !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) > .character-count-pill--episodes{
    min-width: 128px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) > .character-count-pill--videos{
    min-width: 118px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) > .character-count-pill::before{
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    flex-basis: 14px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) .cell-fx.character-count-pills:has(.character-count-pill--episodes):has(.character-count-pill--videos) .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v405: Character desktop dual Audio/Video badge full-size pair
   - Do not compress Audio and Video when both badges are present.
   - Keep each badge at the same visual size as the single Audio-only or Video-only rows.
   - Move only the two-badge group left into unused Character-column whitespace so the full-size pair fits.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1840px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: relative !important;
    left: clamp(-58px, calc((100vw - 1600px) * 0.18), -18px) !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 20px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--episodes{
    min-width: 130px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    min-width: 118px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    flex-basis: 15px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v406: Character dual Audio/Video badge exact half-window layout
   - Rows with both Audio and Video use the same full-size pill treatment shown
     by the single-badge rows.
   - The EP / VID column is given real room for the full pair instead of
     shrinking either pill.
   - Only the two-badge group is left-aligned inside that column so the pair
     matches the requested desktop half-window example.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3) .th-sort{
    justify-content: center !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: relative !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--episodes{
    min-width: 128px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    min-width: 118px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    flex-basis: 15px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v407: Character half-window compact Audio/Video pair fix
   - The true half-window desktop layout hides the EP / VID table column and
     uses the under-title compact badge row instead.
   - When a character has both Audio and Video, keep both compact badges full
     size, readable, and separated instead of letting flex/table pressure shrink
     them smaller than single-badge rows.
   - Scope to the Characters list dual Audio/Video state only.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1179px){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 10px !important;
    row-gap: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 104px !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    gap: 7px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos::before{
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    flex-basis: 14px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-label{
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-count{
    font-size: 14px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v408: Character half-window EP / VID small badge restore
   - Restore the half-window desktop Characters list to the table-column layout
     shown by the single Audio-only and Video-only rows, not the mobile
     under-title badge row.
   - Keep dual Audio and Video pills in the EP / VID column at the compact
     desktop size instead of enlarging them or duplicating them under the name.
   - Scope to fine-pointer desktop windows so phone/tablet compact rows keep
     their existing responsive behavior.
   ============================================================================ */
@media (min-width: 1180px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile{
    display: none !important;
  }
}

@media (min-width: 681px) and (max-width: 1179px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av{
    display: none !important;
  }
}

@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3) .th-sort{
    justify-content: center !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}


/* ============================================================================
   v409: Character half-window dual badge width/position correction
   - Keep the half-window desktop Characters layout in the EP / VID column.
   - Use the same compact desktop badge height/text size as the single-badge
     rows, but reserve enough width for both Audio and Video when both exist.
   - Move only the two-badge group left so it matches the desired half-window
     example without bringing back the under-title mobile badge row.
   ============================================================================ */
@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3) .th-sort{
    justify-content: center !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: relative !important;
    left: auto !important;
    transform: translateX(-20px) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--episodes{
    min-width: 128px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    min-width: 108px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 13px !important;
    font-weight: 900 !important;
  }
}

/* ============================================================================
   v410: Character half-window dual badge actual breakpoint fix
   - The visible half-window desktop layout can fall below 1180 CSS px when
     browser zoom or Windows scaling is active, while still preserving the
     EP / VID table column.
   - Apply the compact two-badge width/position correction to that real
     column-preserving range too, so Audio and Video match the single-badge
     half-window size instead of squeezing.
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile{
    display: none !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    display: table-cell !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3) .th-sort{
    justify-content: center !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: relative !important;
    left: auto !important;
    transform: translateX(-20px) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--episodes{
    min-width: 128px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    min-width: 108px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 13px !important;
    font-weight: 900 !important;
  }
}


/* ============================================================================
   v411: Character half-window dual badge compact size correction
   - Rows with both Audio and Video now use the same compact badge sizing as
     single Audio-only or Video-only rows at half-window desktop widths.
   - Remove the forced wide minimums from the paired state while keeping nowrap
     text so labels and counts stay readable without becoming oversized.
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1599px){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: translateX(-14px) !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill--videos,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill--videos{
    min-width: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* ============================================================================
   v412: Character Audio/Video paired badge responsive parity
   - Make paired Audio + Video badges use the same actual badge dimensions as
     single Audio-only or Video-only badges at compact half-window widths.
   - Make full-window desktop sizing apply evenly to single and paired badges.
   - Keep the fix scoped to the public Characters list EP / VID column.
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1179px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile{
    display: none !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tbody,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table tr,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td{
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table th:nth-child(3),
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3){
    display: table-cell !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 28px !important;
    padding: 5px 12px 5px 10px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 9.46px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (min-width: 1180px) and (max-width: 1599px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    transform: none !important;
    gap: 8px !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 1600px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 10px 20px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    flex-basis: 16px !important;
    margin: 0 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* ============================================================================
   v413: Character full-window Audio/Video badge trim
   - Keep single and paired Audio/Video badges the same size and shape.
   - Trim only the full-window desktop size so it is not oversized.
   - Leave half-window compact sizing and mobile/touch layouts unchanged.
   ============================================================================ */
@media (min-width: 1600px) and (pointer: fine){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos),
  html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos){
    gap: 10px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill{
    min-height: 38px !important;
    padding: 7px 13px !important;
    gap: 6px !important;
    font-size: 12.5px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi > .character-count-pill::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) > .character-count-pill::before{
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    flex-basis: 13px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__label{
    font-size: 12.5px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills.character-count-pills--multi .character-count-pill__count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table td:nth-child(3) > .cell-fx.character-count-pills:has(> .character-count-pill--episodes):has(> .character-count-pill--videos) .character-count-pill__count{
    font-size: 13.5px !important;
  }
}

/* ============================================================================
   v414: Stats leaderboard Videos cards, jump buttons, and larger category pills
   - Adds lightweight jump buttons above the public Stats leaderboard grid.
   - Makes only the Stats leaderboard category pills larger for faster scanning.
   - Keeps the rest of the shared pill styling unchanged.
   ============================================================================ */
body[data-page-kind="stats"] .stats-leaderboard-card[id] {
  scroll-margin-top: 92px;
}

body[data-page-kind="stats"] .stats-leaderboard-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0 0 16px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page-kind="stats"] .stats-leaderboard-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: #e5edf7;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

body[data-page-kind="stats"] .stats-leaderboard-jump a:hover,
body[data-page-kind="stats"] .stats-leaderboard-jump a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.085);
  text-decoration: none;
}

body[data-page-kind="stats"] .stats-leaderboard-card .lb-cat-pill {
  min-height: 34px;
  padding: 8px 14px;
  font-size: 0.90rem;
  letter-spacing: 0.09em;
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a {
  border-color: rgba(30,41,59,0.12);
  background: rgba(255,255,255,0.84);
  color: #334155;
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a:hover,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a:focus-visible {
  border-color: rgba(30,41,59,0.22);
  background: rgba(255,255,255,0.96);
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-leaderboard-jump a {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 0.80rem;
  }

  body[data-page-kind="stats"] .stats-leaderboard-card .lb-cat-pill {
    min-height: 32px;
    padding: 7px 12px;
    font-size: 0.82rem;
  }
}


/* ========================================================================== 
   v415: Split Audio and Video badge palette colors
   ========================================================================== */
.public-list-page--characters .characters-table .badge-videos{
  color: var(--list-pill-videos-color, #F87171);
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.24), rgba(14, 23, 39, 0.89) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.08),
    0 3px 9px rgba(0,0,0,0.18),
    0 0 18px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.12);
}
.public-list-page--characters .characters-table .badge-videos .badge-label,
.public-list-page--characters .characters-table .badge-videos .badge-count{
  color: var(--list-pill-videos-color, #F87171);
}
html.theme-light .public-list-page--characters .characters-table .badge-videos{
  color: var(--list-pill-videos-color, #B91C1C);
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.28), rgba(232, 241, 252, 0.91) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.10),
    0 3px 9px rgba(54,82,122,0.10),
    0 0 18px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.09);
}
html.theme-light .public-list-page--characters .characters-table .badge-videos .badge-label,
html.theme-light .public-list-page--characters .characters-table .badge-videos .badge-count{
  color: var(--list-pill-videos-color, #B91C1C);
}

/* v415 final override: Video badges use the separate Video badge color setting. */
html body main#main .public-list-page.public-list-page--characters .characters-table .row-meta .badge.badge-videos,
html body main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-videos{
  color: var(--list-pill-videos-color, #F87171) !important;
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.24), rgba(14, 23, 39, 0.89) 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.08),
    0 3px 9px rgba(0,0,0,0.18),
    0 0 18px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.12) !important;
}
html body main#main .public-list-page.public-list-page--characters .characters-table .row-meta .badge.badge-videos *,
html body main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-videos *{
  color: var(--list-pill-videos-color, #F87171) !important;
}
html.theme-light body main#main .public-list-page.public-list-page--characters .characters-table .row-meta .badge.badge-videos,
html.theme-light body main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-videos{
  color: var(--list-pill-videos-color, #B91C1C) !important;
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.28), rgba(232, 241, 252, 0.91) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.10),
    0 3px 9px rgba(54,82,122,0.10),
    0 0 18px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.09) !important;
}
html.theme-light body main#main .public-list-page.public-list-page--characters .characters-table .row-meta .badge.badge-videos *,
html.theme-light body main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-videos *{
  color: var(--list-pill-videos-color, #B91C1C) !important;
}

/* v415: Character detail Videos count pill follows the Video badge color. */
html body[data-page-kind="character"] main#main .char-videos-count-pill,
html body[data-page-kind="character"] main#main .char-videos-count-pill *{
  color: var(--list-pill-videos-color, #F87171) !important;
}
html body[data-page-kind="character"] main#main .char-videos-count-pill{
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.22), rgba(14, 23, 39, 0.88) 60%) !important;
}
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill,
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill *{
  color: var(--list-pill-videos-color, #B91C1C) !important;
}
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill{
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.28), rgba(232, 241, 252, 0.91) 72%) !important;
}

/* v416: Character detail Videos count pill matches the Episodes pill weight; only the Video color differs. */
html body[data-page-kind="character"] main#main .char-videos-count-pill{
  --lb-color: var(--list-pill-videos-color, #F87171);
  color: var(--list-pill-videos-color, #F87171) !important;
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
    rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body[data-page-kind="character"] main#main .char-videos-count-pill *{
  color: inherit !important;
  text-shadow: none !important;
}
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill{
  --lb-color: var(--list-pill-videos-color, #B91C1C);
  color: var(--list-pill-videos-color, #B91C1C) !important;
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.12), rgba(255,255,255,0.90) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08) !important;
}
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill *{
  color: inherit !important;
}


/* ============================================================================
   v418: Stats light-mode text contrast
   - Keeps the change scoped to the public Stats tab in light mode.
   - Darkens low-emphasis labels and empty-state text that were too pale on
     white or tinted leaderboard cards.
   ============================================================================ */
html.theme-light body[data-page-kind="stats"] :is(
  .stats-trends-hero__metrics span,
  .stats-summary-card__top,
  .stats-summary-card__note,
  .stats-section-header p,
  .stats-last-votes span,
  .stats-trend-date,
  .stats-vote-mix span,
  .stats-mini-card-header p,
  .stats-category-activity-row__label span,
  .stats-trending-item__main span,
  .stats-trending-item__meta span,
  .stats-trending-item__rating span,
  .stats-category-activity-row__numbers span,
  .stats-distribution-overview span,
  .stats-distribution-note,
  .stats-distribution-summary span,
  .stats-distribution-topline span,
  .stats-distribution-row__label strong,
  .stats-leaderboard-card-title .muted,
  .stats-leaderboard-main span,
  .stats-leaderboard-score > span,
  .stats-leaderboard-votes > span,
  .lb-card .data-table th
) {
  color: #475569;
}

html.theme-light body[data-page-kind="stats"] .stats-empty-state {
  color: #334155;
  border-color: rgba(30, 41, 59, 0.16);
  background-color: rgba(255, 255, 255, 0.92);
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-rank span,
html.theme-light body[data-page-kind="stats"] .stats-distribution-topline strong {
  color: color-mix(in srgb, var(--lb-color) 42%, #0f172a 58%);
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main a:hover,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main a:focus-visible,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main a:hover,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main a:focus-visible {
  color: color-mix(in srgb, var(--lb-color) 46%, #0f172a 54%);
}

@supports not (color: color-mix(in srgb, #000 10%, white)) {
  html.theme-light body[data-page-kind="stats"] .stats-leaderboard-rank span,
  html.theme-light body[data-page-kind="stats"] .stats-distribution-topline strong,
  html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main a:hover,
  html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main a:focus-visible,
  html.theme-light body[data-page-kind="stats"] .stats-trending-item__main a:hover,
  html.theme-light body[data-page-kind="stats"] .stats-trending-item__main a:focus-visible {
    color: #1e293b;
  }
}


/* ============================================================================
   v419: Stats Leaderboards jump button hover/focus polish
   - Matches the Leaderboards category jump buttons to the blue hover/focus
     treatment used by the Stats section jump buttons.
   - Keeps the change scoped to the public Stats page only.
   ============================================================================ */
body[data-page-kind="stats"] .stats-leaderboard-jump a {
  color: inherit;
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  box-shadow: none;
  transform: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

body[data-page-kind="stats"] .stats-leaderboard-jump a:hover,
body[data-page-kind="stats"] .stats-leaderboard-jump a:focus-visible {
  color: #d7eaff;
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.18);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a {
  color: #334155;
  border-color: rgba(30, 41, 59, 0.12);
  background: rgba(255,255,255,0.78);
  box-shadow: none;
  transform: none;
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a:hover,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-jump a:focus-visible {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(219, 234, 254, 0.82);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

body[data-page-kind="stats"] .stats-leaderboard-jump a:active {
  transform: translateY(1px);
}


/* ============================================================================
   v421: Character paired Audio/Video touch compact text weight
   - Keep the v420 compact sizing for iPad portrait and phone landscape.
   - Normalize paired Audio + Video label/count font weight so those touch
     layouts match the other responsive layouts.
   - Leave single Audio-only / Video-only badges, desktop fine-pointer sizing,
     badge colors, sorting, and table behavior unchanged.
   ============================================================================ */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 681px) and (max-width: 1024px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 900px){
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av{
    gap: 6px 8px !important;
    row-gap: 6px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos{
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.005em !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes::before,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos::before{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    flex-basis: 12px !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-label,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-label{
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-audio-episodes .badge-count,
  html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile.character-row-meta--dual-av > .badge.badge-episodes.badge-videos .badge-count{
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
}
/* ============================================================================
   v422: Character Video badge palette specificity fix
   - Keep mobile/touch Video badges tied to the Video badge sub-color after
     AJAX pagination replaces the Characters list markup.
   - Tie desktop EP / VID column Video count pills to the same Video badge
     sub-color instead of the Audio/Episodes badge color.
   - Leave badge sizing, Votes badges, Audio badges, AIOWiki badges, sorting,
     pagination behavior, and unrelated tabs unchanged.
   ============================================================================ */
html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos,
html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos *{
  color: var(--list-pill-videos-color, #F87171) !important;
}
html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos{
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.24), rgba(14, 23, 39, 0.89) 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.08),
    0 3px 9px rgba(0,0,0,0.18),
    0 0 18px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.12) !important;
}
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos,
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos *{
  color: var(--list-pill-videos-color, #B91C1C) !important;
}
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .row-meta.row-meta--compact-badges-mobile > .badge.badge-episodes.badge-videos{
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.28), rgba(232, 241, 252, 0.91) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.10),
    0 3px 9px rgba(54,82,122,0.10),
    0 0 18px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.09) !important;
}

html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos,
html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos *{
  color: var(--list-pill-videos-color, #F87171) !important;
}
html body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos{
  border-color: rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.24), rgba(14, 23, 39, 0.89) 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.08),
    0 3px 9px rgba(0,0,0,0.18),
    0 0 18px rgba(var(--list-pill-videos-rgb, 248, 113, 113), 0.12) !important;
}
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos,
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos *{
  color: var(--list-pill-videos-color, #B91C1C) !important;
}
html.theme-light body[data-page-kind="characters"] main#main .public-list-page.public-list-page--characters .characters-table .character-count-pill.character-count-pill--videos{
  border-color: rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.28), rgba(232, 241, 252, 0.91) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.10),
    0 3px 9px rgba(54,82,122,0.10),
    0 0 18px rgba(var(--list-pill-videos-rgb, 185, 28, 28), 0.09) !important;
}


/* ============================================================================
   v423: Character detail episode/video count badge style match
   - Keeps the Episodes count badge on the Audio badge color.
   - Keeps the Videos count badge on the Video badge color.
   - Uses one shared pill treatment so the two linked-count badges match; only
     the configured color differs.
   ============================================================================ */
body[data-page-kind="character"] main#main .char-episodes-count-pill{
  --char-detail-count-pill-color: var(--list-pill-episodes-color, #D6E7FF);
  --char-detail-count-pill-rgb: var(--list-pill-episodes-rgb, 101, 170, 255);
}
body[data-page-kind="character"] main#main .char-videos-count-pill{
  --char-detail-count-pill-color: var(--list-pill-videos-color, #F87171);
  --char-detail-count-pill-rgb: var(--list-pill-videos-rgb, 248, 113, 113);
}
body[data-page-kind="character"] main#main :is(.char-episodes-count-pill, .char-videos-count-pill){
  --lb-color: var(--char-detail-count-pill-color);
  color: var(--char-detail-count-pill-color) !important;
  border-color: rgba(var(--char-detail-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
    rgba(var(--char-detail-count-pill-rgb), 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body[data-page-kind="character"] main#main :is(.char-episodes-count-pill, .char-videos-count-pill) *{
  color: inherit !important;
  text-shadow: none !important;
}
html.theme-light body[data-page-kind="character"] main#main .char-episodes-count-pill{
  --char-detail-count-pill-color: var(--list-pill-episodes-color, #2C5F9E);
  --char-detail-count-pill-rgb: var(--list-pill-episodes-rgb, 44, 95, 158);
}
html.theme-light body[data-page-kind="character"] main#main .char-videos-count-pill{
  --char-detail-count-pill-color: var(--list-pill-videos-color, #B91C1C);
  --char-detail-count-pill-rgb: var(--list-pill-videos-rgb, 185, 28, 28);
}
html.theme-light body[data-page-kind="character"] main#main :is(.char-episodes-count-pill, .char-videos-count-pill){
  color: var(--char-detail-count-pill-color) !important;
  border-color: rgba(var(--char-detail-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg, rgba(var(--char-detail-count-pill-rgb), 0.12), rgba(255,255,255,0.90) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08) !important;
}

/* ========================================================================== 
   v424: Admin config readability for color option labels and setting dividers
   - Make color option field labels easier to read on the Admin config page
   - Strengthen Admin config setting divider lines for easier visual tracking
   ========================================================================== */
.admin-config .config-item {
  border-top-width: 2px;
  border-top-color: #3d465a;
}

.admin-config .cfg-subdivider::after {
  height: 2px;
  background: #3d465a;
}

.admin-config .list-title-color-row .muted {
  color: #d8e2f0;
  font-size: calc(15px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.35;
}

html.theme-light .admin-config .config-item {
  border-top-color: rgba(30, 41, 59, 0.38);
}

html.theme-light .admin-config .cfg-subdivider::after {
  background: rgba(30, 41, 59, 0.38);
}

html.theme-light .admin-config .list-title-color-row .muted {
  color: #25344a;
}

.admin-config .config-item:first-of-type {
  border-top-width: 0;
}


/* ==========================================================================
   v425: Public list select sizing and focus/open consistency
   - Prevent the Characters Sort value "Episodes / Videos" from clipping at
     Extra Large UI scale.
   - Let public list Sort/Direction/Page size enhanced select triggers use the
     same open blue treatment as the Episodes Album selector on desktop.
   ========================================================================== */
@media (min-width: 681px) {
  .public-list-page--characters .characters-sort-filter {
    min-width: 240px !important;
  }

  .public-list-page--characters #charactersSort {
    width: 240px;
  }

  html.js .public-list-page--characters .characters-sort-filter .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active {
    width: 240px;
    min-width: 240px;
  }
}

html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display:focus-visible {
  border-color: rgba(83, 140, 255, 0.52);
  box-shadow: 0 16px 34px rgba(29,111,227,.18);
  background: #181818;
  outline: none;
}

html.theme-light .public-list-page .mobile-search .mobile-filter-select-popover.is-desktop-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display:focus-visible {
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  background: rgba(255,255,255,0.96);
}

/* ========================================================================== 
   v426: Feedback type select focus consistency
   - Match the Feedback type select's active/clicked treatment to the blue
     public select focus/open treatment used by the Episodes Album selector.
   ========================================================================== */
.feedback-form #feedbackType {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}

.feedback-form #feedbackType:focus,
.feedback-form #feedbackType:focus-visible,
.feedback-form #feedbackType:active {
  border-color: rgba(83, 140, 255, 0.52);
  box-shadow: 0 16px 34px rgba(29,111,227,.18);
  background: #181818;
  outline: none;
}

html.theme-light .feedback-form #feedbackType:focus,
html.theme-light .feedback-form #feedbackType:focus-visible,
html.theme-light .feedback-form #feedbackType:active {
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  background: rgba(255,255,255,0.96);
}


/* ========================================================================== 
   v427: Feedback type select open/close animation
   - Give the public Feedback type dropdown the same enhanced open/close menu,
     arrow rotation, and blue open treatment used by the Episodes Album control.
   - Scope the custom select behavior to the Feedback page only.
   ========================================================================== */
body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field.mobile-filter-field-open{
  position: relative;
  z-index: 90;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active{
  display: block;
  width: 100%;
  max-width: 100%;
  position: relative;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active.open{
  z-index: 91;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > select{
  display: none !important;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  display: block !important;
  width: 100%;
  min-height: var(--ui-control-height);
  text-align: left;
  padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 24px) var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  position: relative;
  box-sizing: border-box;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  content: "\25BE";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 45%;
  color: #b8c0cc;
  pointer-events: none;
  transition: transform .18s ease;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display,
html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display:focus-visible{
  border-color: rgba(83, 140, 255, 0.52);
  box-shadow: 0 16px 34px rgba(29,111,227,.18);
  background: #181818;
  outline: none;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display::after{
  transform: translateY(-50%) rotate(180deg);
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2200;
  max-height: min(320px, 50vh);
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #141414;
  box-shadow: 0 22px 42px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scaleY(0.98);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    transform .22s ease,
    visibility 0s linear .22s;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-options{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition:
    opacity .18s ease,
    transform .22s ease;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e7e7e7;
  box-sizing: border-box;
  line-height: 1.35;
  transition:
    background-color .16s ease,
    color .16s ease;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option + .mobile-filter-select-option{
  margin-top: 2px;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option:hover,
html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(29,111,227,.18);
  color: #ffffff;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(29,111,227,.24);
  color: #ffffff;
  font-weight: 600;
}

html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  background: rgba(255,255,255,0.90);
  border-color: rgba(30, 41, 59, 0.18);
  color: #1d2430;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  color: #5f6b7e;
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display,
html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display:focus-visible{
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  background: rgba(255,255,255,0.96);
  outline: none;
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  background: rgba(255,255,255,0.98);
  border-color: rgba(30, 41, 59, 0.16);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option{
  color: #1d2430;
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option:hover,
html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(59, 130, 246, 0.10);
  color: #0f172a;
}

html.theme-light body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(59, 130, 246, 0.14);
  color: #0f172a;
}

html.motion-off body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-off body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-off body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-off body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option,
html.motion-reduce body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-reduce body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-reduce body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-reduce body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-feedback-select-enhanced .mobile-filter-select-option{
  transition: none !important;
}


/* ==========================================================================
   v428: Club Seasons iPad list fit
   - Keep the Seasons public list from looking cut off on iPad Safari/Firefox.
   - Use the existing compact under-title badges on tablet/touch widths and
     remove the hidden metric columns from the table layout.
   - Scope only to the public Seasons tab.
   ========================================================================== */
@media (hover: none) and (max-width: 1400px), (max-width: 1024px){
  html body main#main .public-list-page--seasons .table-wrap table,
  html body main#main .public-list-page--seasons .seasons-table{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-thumb{
    display: table-column !important;
    visibility: visible !important;
    width: 120px !important;
  }

  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-title{
    display: table-column !important;
    visibility: visible !important;
    width: auto !important;
  }

  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-rating{
    display: table-column !important;
    visibility: visible !important;
    width: 130px !important;
  }

  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-votes,
  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-episodes,
  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-aiowiki{
    display: none !important;
    visibility: collapse !important;
    width: 0 !important;
  }

  html body main#main .public-list-page--seasons .seasons-table th:nth-child(4),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(4),
  html body main#main .public-list-page--seasons .seasons-table th:nth-child(5),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(5),
  html body main#main .public-list-page--seasons .seasons-table th:nth-child(6),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(6){
    display: none !important;
  }

  html body main#main .public-list-page--seasons .seasons-table th:nth-child(3),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(3){
    width: 130px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html body main#main .public-list-page--seasons .seasons-table td:nth-child(2),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(2) .cell-fx,
  html body main#main .public-list-page--seasons .seasons-table .row-title-line,
  html body main#main .public-list-page--seasons .seasons-table .row-title,
  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }

  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge-season-number{
    display: none !important;
  }

  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes,
  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge-episodes,
  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge-aiowiki,
  html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .btn-aiowiki{
    display: inline-flex !important;
    max-width: 100% !important;
  }
}

@media (hover: none) and (orientation: portrait) and (max-width: 1080px){
  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-thumb{
    width: 112px !important;
  }

  html body main#main .public-list-page--seasons .seasons-table col.seasons-col-rating,
  html body main#main .public-list-page--seasons .seasons-table th:nth-child(3),
  html body main#main .public-list-page--seasons .seasons-table td:nth-child(3){
    width: 126px !important;
  }
}

/* v429: Character detail Episodes/Videos animated dropdowns */
.page-characters-detail .character-detail-select-popover{
  display: block;
  width: 100%;
  position: relative;
}

.page-characters-detail .character-detail-select-popover > select.select{
  width: 100%;
  box-sizing: border-box;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active{
  display: block;
  width: 100%;
  position: relative;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open{
  z-index: 91;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > select.select{
  display: none !important;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  display: block !important;
  width: 100%;
  min-height: var(--ui-control-height);
  text-align: left;
  padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 24px) var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  position: relative;
  box-sizing: border-box;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  content: "\25BE";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 45%;
  color: #b8c0cc;
  pointer-events: none;
  transition: transform .18s ease;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
  border-color: rgba(83, 140, 255, 0.52);
  box-shadow: 0 16px 34px rgba(29,111,227,.18);
  background: #181818;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display::after{
  transform: translateY(-50%) rotate(180deg);
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2200;
  max-height: min(320px, 50vh);
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #141414;
  box-shadow: 0 22px 42px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scaleY(0.98);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    transform .22s ease,
    visibility 0s linear .22s;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-options{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition:
    opacity .18s ease,
    transform .22s ease;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e7e7e7;
  box-sizing: border-box;
  line-height: 1.35;
  transition:
    background-color .16s ease,
    color .16s ease;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option + .mobile-filter-select-option{
  margin-top: 2px;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:hover,
html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(29,111,227,.18);
  color: #ffffff;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(29,111,227,.24);
  color: #ffffff;
  font-weight: 600;
}

html.js .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  background: rgba(255,255,255,0.90);
  border-color: rgba(30, 41, 59, 0.18);
  color: #1d2430;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  color: #5f6b7e;
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  background: rgba(255,255,255,0.96);
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  background: rgba(255,255,255,0.98);
  border-color: rgba(30, 41, 59, 0.16);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  color: #1d2430;
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:hover,
html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(59, 130, 246, 0.10);
  color: #0f172a;
}

html.theme-light .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(59, 130, 246, 0.14);
  color: #0f172a;
}

html.motion-off .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-off .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-off .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-off .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option,
html.motion-reduce .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-reduce .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-reduce .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-reduce .page-characters-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  transition: none !important;
}

/* ==========================================================================
   v430: Dynamic direction for shared animated dropdowns
   - Keep all custom animated select menus inside the visible viewport.
   - Open downward when there is room and upward when the control is near the
     bottom of the screen. Native browser selects are untouched.
   ========================================================================== */
html.js .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-options{
  max-height: min(var(--aio-mobile-select-max-height, 320px), 50vh) !important;
}

html.js .mobile-filter-select-popover.is-enhanced-select-active.open-down > .mobile-filter-select-options{
  top: calc(100% + 6px);
  bottom: auto !important;
  transform-origin: top center !important;
}

html.js .mobile-filter-select-popover.is-enhanced-select-active.open-up > .mobile-filter-select-options{
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  transform: translateY(8px) scaleY(0.98) !important;
  transform-origin: bottom center !important;
}

html.js .mobile-filter-select-popover.is-enhanced-select-active.open-up.open > .mobile-filter-select-options{
  transform: translateY(0) scaleY(1) !important;
}

@media (max-width: 760px){
  html.js .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-options{
    max-height: min(var(--aio-mobile-select-max-height, 320px), 48vh) !important;
  }
}


/* =======================================================================
   v431: Touch/tablet vote slider thickness
   - Gives coarse-pointer touch layouts, including iPad portrait and landscape,
     the same thicker vote bar shape already used on narrow mobile screens.
   - Scoped only to the public vote slider pieces so vote math, buttons,
     forms, and unrelated layouts stay unchanged.
   ======================================================================= */
@media (hover: none) and (pointer: coarse){
  .vote-slider{ height: 44px; }
  .vote-slider input[type="range"]{ height: 44px; }
  .vote-range{ --vote-thumb-size: 28px; height: 44px; }
  .vote-range::-webkit-slider-runnable-track{ height: 44px; }
  .vote-range::-webkit-slider-thumb{ width: 28px; height: 28px; margin-top: 8px; }
  .vote-range::-moz-range-track{ height: 44px; }
  .vote-range::-moz-range-progress{ height: 44px; }
  .vote-range::-moz-range-thumb{ width: 28px; height: 28px; }
  .vote-overlay-label{ font-size: 16px; height: 24px; padding: 0 12px; }
}

/* ============================================================================
   v432: Center Character detail View larger image button on mobile portrait
   - Fixes the mobile portrait Character image action pill aligning left inside
     its full-width action row.
   - Scoped to Character detail mobile portrait only; leaves desktop, landscape,
     vote behavior, image switching, and other detail pages unchanged.
   ============================================================================ */
@media (max-width: 740px) and (orientation: portrait){
  body[data-page-kind="character"] .page-characters-detail .character-image-actions.detail-image-actions{
    justify-content: center;
  }
}

/* ============================================================================
   v433: Arc extra-content item badge and animated dropdowns
   - Adds a dedicated Item badge palette hook for Arc Elsewhere count badges.
   - Gives the Arc Item count badge the same spaced count/label treatment as
     linked Episodes/Videos badges.
   - Enables the existing animated detail dropdown behavior on Arc detail pages.
   ============================================================================ */
body[data-page-kind="arc"] main#main .arc-videos-count-pill{
  --arc-video-count-pill-color: var(--list-pill-videos-color, #F87171);
  --arc-video-count-pill-rgb: var(--list-pill-videos-rgb, 248, 113, 113);
  --lb-color: var(--arc-video-count-pill-color);
  color: var(--arc-video-count-pill-color) !important;
  border-color: rgba(var(--arc-video-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
    rgba(var(--arc-video-count-pill-rgb), 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body[data-page-kind="arc"] main#main .arc-videos-count-pill *{
  color: inherit !important;
  text-shadow: none !important;
}
html.theme-light body[data-page-kind="arc"] main#main .arc-videos-count-pill{
  --arc-video-count-pill-color: var(--list-pill-videos-color, #B91C1C);
  --arc-video-count-pill-rgb: var(--list-pill-videos-rgb, 185, 28, 28);
  color: var(--arc-video-count-pill-color) !important;
  border-color: rgba(var(--arc-video-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg, rgba(var(--arc-video-count-pill-rgb), 0.12), rgba(255,255,255,0.90) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08) !important;
}

body[data-page-kind="arc"] main#main .arc-items-count-pill{
  --arc-item-count-pill-color: var(--list-pill-items-color, #FBBF24);
  --arc-item-count-pill-rgb: var(--list-pill-items-rgb, 251, 191, 36);
  --lb-color: var(--arc-item-count-pill-color);
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 8px;
  color: var(--arc-item-count-pill-color) !important;
  border-color: rgba(var(--arc-item-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
    rgba(var(--arc-item-count-pill-rgb), 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body[data-page-kind="arc"] main#main .arc-items-count-pill *{
  color: inherit !important;
  text-shadow: none !important;
}
body[data-page-kind="arc"] main#main .arc-items-count-pill .arc-items-count-num{
  font-size: 15px;
  font-weight: 900;
}
body[data-page-kind="arc"] main#main .arc-items-count-pill .arc-items-count-label{
  color: inherit;
  font-weight: 800;
  opacity: 1;
}
html.theme-light body[data-page-kind="arc"] main#main .arc-items-count-pill{
  --arc-item-count-pill-color: var(--list-pill-items-color, #9A5A12);
  --arc-item-count-pill-rgb: var(--list-pill-items-rgb, 154, 90, 18);
  color: var(--arc-item-count-pill-color) !important;
  border-color: rgba(var(--arc-item-count-pill-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg, rgba(var(--arc-item-count-pill-rgb), 0.12), rgba(255,255,255,0.90) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08) !important;
}

.page-arcs-detail .character-detail-select-popover{
  display: block;
  width: 100%;
  position: relative;
}

.page-arcs-detail .character-detail-select-popover > select.select{
  width: 100%;
  box-sizing: border-box;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active{
  display: block;
  width: 100%;
  position: relative;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open{
  z-index: 91;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > select.select{
  display: none !important;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  display: block !important;
  width: 100%;
  min-height: var(--ui-control-height);
  text-align: left;
  padding: var(--ui-control-padding-y) calc(var(--ui-control-padding-x) + 24px) var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 10px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  position: relative;
  box-sizing: border-box;
  font-size: calc(1rem * var(--ui-font-scale));
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  content: "\25BE";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 45%;
  color: #b8c0cc;
  pointer-events: none;
  transition: transform .18s ease;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
  border-color: rgba(83, 140, 255, 0.52);
  box-shadow: 0 16px 34px rgba(29,111,227,.18);
  background: #181818;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display::after{
  transform: translateY(-50%) rotate(180deg);
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2200;
  max-height: min(320px, 50vh);
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #141414;
  box-shadow: 0 22px 42px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scaleY(0.98);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    transform .22s ease,
    visibility 0s linear .22s;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-options{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition:
    opacity .18s ease,
    transform .22s ease;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e7e7e7;
  box-sizing: border-box;
  line-height: 1.35;
  transition:
    background-color .16s ease,
    color .16s ease;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option + .mobile-filter-select-option{
  margin-top: 2px;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:hover,
html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(29,111,227,.18);
  color: #ffffff;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(29,111,227,.24);
  color: #ffffff;
  font-weight: 600;
}

html.js .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display{
  background: rgba(255,255,255,0.90);
  border-color: rgba(30, 41, 59, 0.18);
  color: #1d2430;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after{
  color: #5f6b7e;
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open > .mobile-filter-select-display{
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  background: rgba(255,255,255,0.96);
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  background: rgba(255,255,255,0.98);
  border-color: rgba(30, 41, 59, 0.16);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  color: #1d2430;
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:hover,
html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option:focus-visible{
  background: rgba(59, 130, 246, 0.10);
  color: #0f172a;
}

html.theme-light .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option.is-selected{
  background: rgba(59, 130, 246, 0.14);
  color: #0f172a;
}

html.motion-off .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-off .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-off .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-off .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option,
html.motion-reduce .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display,
html.motion-reduce .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-display::after,
html.motion-reduce .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options,
html.motion-reduce .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced .mobile-filter-select-option{
  transition: none !important;
}

/* ============================================================================
   v434: Arc detail extra-content dropdown overlay height
   - Lets Arc Videos/Elsewhere custom dropdown menus overlay nearby page content
     instead of shrinking to the small gap above the field.
   - Scoped to public Arc detail pages only.
   ============================================================================ */
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-section,
body[data-page-kind="arc"] .page-arcs-detail .character-detail-card,
body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover{
  overflow: visible;
}

html.js body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active.open{
  z-index: 3000;
}

html.js body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover.is-character-detail-select-enhanced.is-enhanced-select-active > .mobile-filter-select-options{
  max-height: min(320px, 50vh) !important;
}


/* ============================================================================
   v435: Shared custom dropdown overlay behavior
   - Lets shared animated custom select menus overlay nearby content instead of
     shrinking to the nearest card, form, or filter-row gap.
   - Keeps viewport-aware up/down placement and internal scrolling when needed.
   ============================================================================ */
html.js .mobile-filter-select-popover.is-enhanced-select-active.open{
  z-index: 3000 !important;
}

html.js .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-options{
  max-height: min(var(--aio-mobile-select-max-height, 320px), 50vh) !important;
}

html.js :is(.mobile-search, .mobile-search-body, .list-filters, .list-filters-row, .list-filters-actions),
html.js body[data-page-kind="feedback"] :is(.feedback-panel, .feedback-form, .feedback-form .admin-ops-form-field),
html.js body[data-page-kind="character"] .page-characters-detail :is(.character-detail-card, .character-detail-select-popover),
html.js body[data-page-kind="arc"] .page-arcs-detail :is(.arc-detail-section, .character-detail-card, .character-detail-select-popover){
  overflow: visible;
}

html.js .mobile-search .list-filters-row > div.mobile-filter-field-open,
html.js .mobile-search .list-filters-actions.mobile-filter-field-open,
html.js .public-list-page .mobile-search .list-filters-row > div.mobile-filter-field-open,
html.js .public-list-page .mobile-search .list-filters-actions.mobile-filter-field-open,
html.js body[data-page-kind="feedback"] .feedback-form .admin-ops-form-field.mobile-filter-field-open{
  z-index: 3000 !important;
}


/* ============================================================================
   v474: Mobile/tablet native dropdown fallback
   - Prevent public list dropdown menus from rendering behind or through list
     headers on mobile and tablet-sized viewports.
   - Keep the desktop animated dropdowns unchanged on larger pointer-fine screens.
   ============================================================================ */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px), (hover: none) and (max-width: 1400px) {
  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-enhanced-select-active > select.select,
  html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-enhanced-select-active > select,
  html.js body[data-page-kind="character"] .page-characters-detail .character-detail-select-popover.is-enhanced-select-active > select,
  html.js body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover.is-enhanced-select-active > select {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-display,
  html.js .public-list-page .mobile-search .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-options,
  html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-display,
  html.js body[data-page-kind="feedback"] .feedback-form .mobile-filter-select-popover.is-enhanced-select-active > .mobile-filter-select-options,
  html.js body[data-page-kind="character"] .page-characters-detail .character-detail-select-popover.is-enhanced-select-active > .mobile-filter-select-display,
  html.js body[data-page-kind="character"] .page-characters-detail .character-detail-select-popover.is-enhanced-select-active > .mobile-filter-select-options,
  html.js body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover.is-enhanced-select-active > .mobile-filter-select-display,
  html.js body[data-page-kind="arc"] .page-arcs-detail .character-detail-select-popover.is-enhanced-select-active > .mobile-filter-select-options {
    display: none !important;
  }
}

/* Voting log: make rows selectable for faster bulk actions. */
.admin-changelog-table--vote-log tbody tr[data-bulk-vote-row]{
  cursor:pointer;
}
.admin-changelog-table--vote-log tbody tr[data-bulk-vote-row]:focus-visible{
  outline:2px solid var(--accent, #3b82f6);
  outline-offset:-2px;
}
.admin-changelog-table--vote-log tbody tr.admin-changelog-row-selected > td{
  background:rgba(59,130,246,0.14);
}
.admin-changelog-table--vote-log tbody tr.admin-changelog-row-selected.admin-changelog-row-deleted > td{
  background:rgba(59,130,246,0.10);
}
html.theme-light .admin-changelog-table--vote-log tbody tr.admin-changelog-row-selected > td{
  background:rgba(37,99,235,0.12);
}
html.theme-light .admin-changelog-table--vote-log tbody tr.admin-changelog-row-selected.admin-changelog-row-deleted > td{
  background:rgba(37,99,235,0.09);
}

/* Voting log: filter/export and repeated-pattern tools. */
.admin-vote-log-matching-badge{
  align-self:center;
  white-space:normal;
}
.admin-vote-log-groups-wrap{
  max-height:420px;
  overflow:auto;
}
.admin-vote-log-groups-table th,
.admin-vote-log-groups-table td{
  font-size:0.9em;
  vertical-align:top;
}


/* ============================================================================
   v439: Voting log wide results layout
   - Keeps the filters and related-log sidebar together at the top on desktop.
   - Lets the Votes results panel span the full admin workspace width.
   ============================================================================ */
@media (min-width: 981px){
  .admin-changelog-page--votes{
    max-width:min(1760px, calc(100vw - 32px));
  }
  .admin-changelog-page--votes .admin-changelog-layout{
    grid-template-columns:minmax(0, 1fr) minmax(260px, 360px);
  }
  .admin-changelog-page--votes .admin-edit-main{
    display:contents;
  }
  .admin-changelog-page--votes .admin-edit-main > .admin-edit-panel{
    min-width:0;
  }
  .admin-changelog-page--votes .admin-edit-main > .admin-edit-panel[aria-labelledby="admin-vote-log-filters-heading"]{
    grid-column:1;
    grid-row:1;
  }
  .admin-changelog-page--votes .admin-edit-side{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .admin-changelog-page--votes .admin-edit-main > .admin-edit-panel[aria-labelledby="admin-vote-log-table-heading"]{
    grid-column:1 / -1;
    grid-row:2;
  }
  .admin-changelog-page--votes .admin-changelog-table-wrap{
    max-width:100%;
  }
}


/* ============================================================================
   v440: Soften public vote removal button
   - Keeps Remove my vote readable in dark and light modes.
   - Scopes the muted danger treatment to the public vote removal form only.
   ============================================================================ */
.vote-remove-form .btn.btn-danger,
.vote-remove-form button.btn-danger{
  color:#fff;
  background:
    linear-gradient(180deg, rgba(127, 29, 29, 0.88), rgba(91, 25, 25, 0.86));
  border:1px solid rgba(248, 113, 113, 0.42);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow:none;
}

.vote-remove-form .btn.btn-danger:hover,
.vote-remove-form button.btn-danger:hover{
  filter:brightness(1.04);
}

@media (pointer: fine){
  .vote-remove-form .btn.btn-danger:hover:not(:active),
  .vote-remove-form button.btn-danger:hover:not(:active){
    transform:translateY(-1px) scale(1.01);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
    filter:brightness(1.04);
  }
}

html.theme-light .vote-remove-form .btn.btn-danger,
html.theme-light .vote-remove-form button.btn-danger{
  color:#991b1b;
  background:
    linear-gradient(180deg, rgba(255, 247, 247, 0.98), rgba(254, 226, 226, 0.96));
  border:1px solid rgba(185, 28, 28, 0.48);
  box-shadow:
    0 7px 16px rgba(153, 27, 27, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  text-shadow:none;
}

html.theme-light .vote-remove-form .btn.btn-danger:hover,
html.theme-light .vote-remove-form button.btn-danger:hover{
  color:#7f1d1d;
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 1), rgba(254, 202, 202, 0.96));
  border-color:rgba(153, 27, 27, 0.60);
}

@media (pointer: fine){
  html.theme-light .vote-remove-form .btn.btn-danger:hover:not(:active),
  html.theme-light .vote-remove-form button.btn-danger:hover:not(:active){
    box-shadow:
      0 9px 18px rgba(153, 27, 27, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
}


/* ============================================================================
   v442: Episode linked count pill text follows TITLE badge sub-colors
   - The Featured Characters count pill text follows the Character badge color.
   - The Arcs & Sagas count pill text follows the Arc badge color.
   - Keep this last so generic badge/count text settings cannot mask the
     selected title palette badge colors.
   ============================================================================ */
body:is([data-page-kind="episode"],[data-page-kind="videos"]) main#main :is(
  .ep-characters-count-pill,
  .ep-characters-count-pill *,
  .ep-characters-count-num,
  .ep-characters-count-label
){
  color: var(--list-pill-characters-color, var(--lb-color, currentColor)) !important;
}

body[data-page-kind="episode"] main#main :is(
  .ep-arcs-count-pill,
  .ep-arcs-count-pill *,
  .ep-arcs-count-num,
  .ep-arcs-count-label
){
  color: var(--list-pill-arcs-color, var(--lb-color, currentColor)) !important;
}


/* ============================================================================
   v443: Hide redundant detail Votes column on iPad/tablet layouts
   - On Albums and Club Seasons detail pages, tablet/touch widths already show
     vote counts under each title, so remove the separate Votes table column
     between Rating and AIOWiki.
   - Scoped to iPad-class coarse-pointer portrait and landscape layouts only.
   ============================================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 681px) and (max-width: 1400px){
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail td:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail td:nth-child(4){
    display:none !important;
    width:0 !important;
    max-width:0 !important;
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    border-left-width:0 !important;
    border-right-width:0 !important;
    overflow:hidden !important;
  }
}

/* Global search result highlighting */
.global-search-match{
  border-radius: 0.22em;
  padding: 0 0.08em;
  background: rgba(255, 214, 80, 0.36);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
html.theme-light .global-search-match{
  background: rgba(250, 204, 21, 0.38);
  color: inherit;
}


/* ============================================================================
   v445: Keep mobile vote bar visible and stabilize touch dragging
   - Restores the custom vote bar on mobile and iPad.
   - Prevents page pull/scroll gestures from taking over while the user starts
     a drag on the vote slider.
   - Desktop styling and vote submission behavior are unchanged.
   ============================================================================ */
@media (hover: none) and (pointer: coarse){
  .vote-slider,
  .vote-slider input[type="range"],
  .vote-range{
    touch-action: none;
    -ms-touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ============================================================================
   v446: Stabilize fast mobile vote-slider drags
   - Keeps the custom vote bar visible on phone and iPad.
   - Prevents browser scroll/pull gestures while the vote slider is being
     manually tracked by touch/pointer JavaScript.
   - Scoped to active vote-slider drags only.
   ============================================================================ */
html.aio-vote-slider-dragging,
body.aio-vote-slider-dragging{
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: none) and (pointer: coarse){
  .vote-slider[data-aio-fast-touch-slider="1"]{
    cursor: pointer;
  }
}


/* ============================================================================
   v447: Mobile custom vote-slider surface
   - Phone/iPad only: the visible vote bar is a div-based touch surface.
   - The native range remains in the form as the submitted rating value, but it
     is no longer the visible dragged control once the mobile JS enables this
     class for coarse/touch devices.
   - Desktop keeps the existing native/custom-styled range control.
   ============================================================================ */
html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"]{
  --aio-mobile-vote-p: var(--p, 80%);
  height: 44px;
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .vote-range{
  position: absolute;
  left: 0;
  right: 12px;
  top: 0;
  width: auto;
  height: 44px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .aio-mobile-vote-surface{
  position: absolute;
  left: 0;
  right: 12px;
  top: 0;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #e2e5ea;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 20px rgba(0,0,0,0.28);
  cursor: pointer;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  z-index: 1;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .aio-mobile-vote-surface::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .aio-mobile-vote-fill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--aio-mobile-vote-p);
  border-radius: inherit;
  background: linear-gradient(90deg, #48b6ff 0, #1d6fe3 100%);
  pointer-events: none;
  z-index: 0;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .aio-mobile-vote-thumb{
  position: absolute;
  left: var(--aio-mobile-vote-p);
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.40);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"] .vote-overlay{
  z-index: 2;
}

html.aio-mobile-vote-slider-enabled .vote-slider[data-aio-mobile-custom-slider="1"]:focus-within .aio-mobile-vote-surface{
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}


/* ============================================================================
   v448: Desktop vote-bar tick marks
   - Desktop/fine-pointer layouts now draw the same 20% guide marks that the
     mobile custom vote slider shows.
   - The marks are drawn as a pointer-events-none overlay so Firefox desktop,
     WebKit desktop, and Chromium desktop use the same visual guide layer.
   - Mobile custom-slider behavior and vote submission behavior are unchanged.
   ============================================================================ */
@media (hover: hover) and (pointer: fine){
  .vote-range{
    background:
      linear-gradient(90deg, #48b6ff 0, #1d6fe3 var(--vote-fill-end), #e2e5ea var(--vote-fill-end), #e2e5ea 100%);
  }

  .vote-slider .vote-overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 20%);
    pointer-events: none;
    z-index: 0;
  }

  .vote-slider .vote-overlay-label{
    position: relative;
    z-index: 1;
  }
}


/* ============================================================================
   v449: Edge mobile-emulation live fill repaint fix
   - Mobile custom vote bar now uses a real fill element under the thumb instead
     of relying on a CSS variable inside the surface background gradient.
   - This keeps Chromium/Edge mobile-emulation fill repainting in step with the
     white thumb during active drags.
   - Tick marks remain a visual overlay and vote submission behavior is unchanged.
   ============================================================================ */


/* ============================================================================
   v450: Short landscape vote-detail thumbnail scaling
   - Matches the Character vote-detail short-landscape behavior for Episode,
     Arc, Elsewhere, and Videos vote pages.
   - Keeps the thumbnail/media column compact in short phone landscape viewports
     so the community rating and vote area can stay to the right instead of
     wrapping underneath.
   - Portrait/mobile stacking and vote submission behavior are unchanged.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character{
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere > :first-child,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere > :first-child,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere > :first-child,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character > :first-child{
    flex: 0 1 clamp(150px, 30vw, 230px);
    width: clamp(150px, 30vw, 230px);
    max-width: clamp(150px, 30vw, 230px);
    min-width: 0;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-card .split.split-elsewhere > :last-child,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card .split.split-elsewhere > :last-child,
  body[data-page-kind="videos"] .page-videos-detail .videos-detail-card .split.split-elsewhere > :last-child,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card .split.split-character > :last-child{
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-left,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-left,
  body[data-page-kind="videos"] .page-videos-detail .episode-left,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-left{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-thumb,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-thumb,
  body[data-page-kind="videos"] .page-videos-detail .episode-thumb,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-thumb-wrap{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page-kind="episode"] .page-episodes-detail .thumb-elsewhere-page,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .thumb-elsewhere-page,
  body[data-page-kind="videos"] .page-videos-detail .thumb-elsewhere-page,
  body[data-page-kind="arc"] .page-arcs-detail .thumb-arc-page{
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(42vh, 170px);
    object-fit: contain;
    padding: 10px;
    border-radius: 14px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-context,
  body[data-page-kind="episode"] .page-episodes-detail .episode-top-actions,
  body[data-page-kind="episode"] .page-episodes-detail .episode-image-actions,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-top-actions,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-image-actions,
  body[data-page-kind="videos"] .page-videos-detail .episode-top-actions,
  body[data-page-kind="videos"] .page-videos-detail .episode-image-actions,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-context,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-actions{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page-kind="episode"] .page-episodes-detail .detail-image-actions .btn,
  body[data-page-kind="episode"] .page-episodes-detail .episode-top-actions .btn,
  body[data-page-kind="episode"] .page-episodes-detail .episode-context-item,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .detail-image-actions .btn,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-top-actions .btn,
  body[data-page-kind="videos"] .page-videos-detail .detail-image-actions .btn,
  body[data-page-kind="videos"] .page-videos-detail .episode-top-actions .btn,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-actions .btn{
    min-height: 34px;
    padding: 8px 10px;
    font-size: 13px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-card,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-card,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-card,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-card{
    width: 100%;
    max-width: none;
    padding: 14px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-title,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-title,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-title,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-title{
    font-size: 18px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-stats,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-stats,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-stats,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-stats{
    gap: 8px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-stat,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-stat,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-stat,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-stat{
    padding: 10px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-stat-value,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-stat-value,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-stat-value,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-stat-value{
    font-size: 24px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .vote-summary-stat-note,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .vote-summary-stat-note,
  body[data-page-kind="videos"] .page-videos-detail .vote-summary-stat-note,
  body[data-page-kind="arc"] .page-arcs-detail .vote-summary-stat-note{
    font-size: 12px;
  }

  body[data-page-kind="episode"] .page-episodes-detail .episode-vote-block,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .episode-vote-block,
  body[data-page-kind="videos"] .page-videos-detail .episode-vote-block,
  body[data-page-kind="arc"] .page-arcs-detail .episode-vote-block{
    margin-top: 10px;
  }
}


@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card--no-thumb .split.split-elsewhere > :first-child,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .split.split-elsewhere.split-elsewhere-no-thumb > :first-child,
  body[data-page-kind="videos"] .page-videos-detail .elsewhere-detail-card--no-thumb .split.split-elsewhere > :first-child,
  body[data-page-kind="videos"] .page-videos-detail .split.split-elsewhere.split-elsewhere-no-thumb > :first-child,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :first-child{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  body[data-page-kind="elsewhere"] .page-elsewhere-detail .elsewhere-detail-card--no-thumb .split.split-elsewhere > :last-child,
  body[data-page-kind="elsewhere"] .page-elsewhere-detail .split.split-elsewhere.split-elsewhere-no-thumb > :last-child,
  body[data-page-kind="videos"] .page-videos-detail .elsewhere-detail-card--no-thumb .split.split-elsewhere > :last-child,
  body[data-page-kind="videos"] .page-videos-detail .split.split-elsewhere.split-elsewhere-no-thumb > :last-child,
  body[data-page-kind="arc"] .page-arcs-detail .arc-detail-card.arc-detail-card--no-thumb .split.split-character > :last-child{
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}

/* ========================================================================== 
   v450a: Album and season detail title banner parity
   - Adds the shared public detail title banner treatment to album and season
     detail pages, matching the other detail pages without touching page layout.
   ========================================================================== */
body[data-page-kind="album"] .page-album-detail > .album-title-panel,
body[data-page-kind="season"] .page-seasons-detail > .season-title-panel{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 14px 20px;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
}

body[data-page-kind="album"] .page-album-detail > .album-title-panel h1,
body[data-page-kind="season"] .page-seasons-detail > .season-title-panel h1{
  margin: 0;
}

html.theme-dark body[data-page-kind="album"] .page-album-detail > .album-title-panel,
html.theme-dark body[data-page-kind="season"] .page-seasons-detail > .season-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(29,111,227,0.20), transparent 62%),
    linear-gradient(180deg, rgba(18,22,33,0.94), rgba(15,17,22,0.94));
  border: 1px solid rgba(43,52,68,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.28);
}

html.theme-dim body[data-page-kind="album"] .page-album-detail > .album-title-panel,
html.theme-dim body[data-page-kind="season"] .page-seasons-detail > .season-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(99,179,237,0.14), transparent 62%),
    linear-gradient(180deg, rgba(27,31,39,0.96), rgba(24,28,36,0.96));
  border: 1px solid #2f3847;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(0,0,0,0.20);
}

html.theme-light body[data-page-kind="album"] .page-album-detail > .album-title-panel,
html.theme-light body[data-page-kind="season"] .page-seasons-detail > .season-title-panel{
  background:
    radial-gradient(800px 170px at 16% 0%, rgba(29,111,227,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(241,247,255,0.82));
  border: 1px solid rgba(109,139,200,0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 10px 24px rgba(16,24,40,0.08);
}

@media (max-width: 820px){
  body[data-page-kind="album"] .page-album-detail > .album-title-panel,
  body[data-page-kind="season"] .page-seasons-detail > .season-title-panel{
    padding: 10px 12px;
    border-radius: 16px;
  }
}

/* ========================================================================== 
   v451: Stronger High Contrast mode
   - Make the saved High Contrast On setting visibly stronger.
   - Keep all changes scoped to body.contrast-safeguard so normal styling is untouched.
   - Strengthen page surfaces, text, links, controls, tables, rating/vote bars,
     focus rings, settings controls, and detail cards.
   ========================================================================== */
body.contrast-safeguard{
  --focus-ring: #ffd166;
  --contrast-hc-page-bg: #05070b;
  --contrast-hc-page-text: #f8fbff;
  --contrast-hc-muted: #dbe7f5;
  --contrast-hc-surface: #0b111a;
  --contrast-hc-surface-raised: #101827;
  --contrast-hc-surface-strong: #162033;
  --contrast-hc-border: #8aa0bd;
  --contrast-hc-border-strong: #e2e8f0;
  --contrast-hc-link: #8fd8ff;
  --contrast-hc-link-hover: #c9efff;
  --contrast-hc-focus: #ffd166;
  --contrast-hc-blue-start: #6fd6ff;
  --contrast-hc-blue-end: #1b78ff;
  --contrast-hc-track: #26364d;
  background: var(--contrast-hc-page-bg);
  color: var(--contrast-hc-page-text);
}

html.theme-light body.contrast-safeguard{
  --focus-ring: #064ecf;
  --contrast-hc-page-bg: #f8fbff;
  --contrast-hc-page-text: #07111f;
  --contrast-hc-muted: #1f2f46;
  --contrast-hc-surface: #ffffff;
  --contrast-hc-surface-raised: #f2f7ff;
  --contrast-hc-surface-strong: #e4eefc;
  --contrast-hc-border: #4b607e;
  --contrast-hc-border-strong: #0f172a;
  --contrast-hc-link: #064ecf;
  --contrast-hc-link-hover: #042f84;
  --contrast-hc-focus: #064ecf;
  --contrast-hc-blue-start: #0076d6;
  --contrast-hc-blue-end: #004aa7;
  --contrast-hc-track: #cbd8ea;
}

body.contrast-safeguard a:not(.btn):not(.brand-lockup){
  color: var(--contrast-hc-link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

body.contrast-safeguard a:not(.btn):not(.brand-lockup):hover,
body.contrast-safeguard a:not(.btn):not(.brand-lockup):focus-visible{
  color: var(--contrast-hc-link-hover);
  text-decoration: underline;
}

body.contrast-safeguard :is(.muted, .tagline, .detail-stat, .security-status-sub, .security-status-details, .vote-hint, .episode-context, .config-help, .help-text){
  color: var(--contrast-hc-muted);
}

body.contrast-safeguard header.site-header{
  background:
    radial-gradient(circle at 12% 40%, rgba(111,216,255,0.20) 0%, rgba(111,216,255,0.10) 28%, transparent 54%),
    linear-gradient(180deg, #08111f 0%, #050914 100%);
  border-bottom-color: var(--contrast-hc-border-strong);
  box-shadow: 0 10px 32px rgba(0,0,0,0.54);
}

html.theme-light body.contrast-safeguard header.site-header{
  background:
    radial-gradient(circle at 12% 40%, rgba(0,118,214,0.18) 0%, rgba(0,118,214,0.08) 30%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  border-bottom-color: var(--contrast-hc-border-strong);
  box-shadow: 0 10px 26px rgba(15,23,42,0.18);
}

body.contrast-safeguard :is(.card, .table-wrap, .admin-edit-panel, .admin-card, .public-search-card, .episode-detail-section, .episode-linked-card, .album-detail-card, .season-detail-card, .arc-detail-card, .arc-detail-section, .character-detail-card, .elsewhere-detail-card, .elsewhere-detail-section, .videos-detail-card, .videos-detail-section, .vote-summary-card){
  background: var(--contrast-hc-surface);
  border-color: var(--contrast-hc-border);
  color: var(--contrast-hc-page-text);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.34);
}

html.theme-light body.contrast-safeguard :is(.card, .table-wrap, .admin-edit-panel, .admin-card, .public-search-card, .episode-detail-section, .episode-linked-card, .album-detail-card, .season-detail-card, .arc-detail-card, .arc-detail-section, .character-detail-card, .elsewhere-detail-card, .elsewhere-detail-section, .videos-detail-card, .videos-detail-section, .vote-summary-card){
  background: var(--contrast-hc-surface);
  border-color: var(--contrast-hc-border);
  color: var(--contrast-hc-page-text);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.04),
    0 10px 24px rgba(15,23,42,0.12);
}

body.contrast-safeguard :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="file"], textarea, select, .select-popover.enhanced .select-display, .mobile-filter-select-display, .title-color-select){
  background: var(--contrast-hc-surface-raised);
  color: var(--contrast-hc-page-text);
  border-color: var(--contrast-hc-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(0,0,0,0.30);
}

html.theme-light body.contrast-safeguard :is(input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="file"], textarea, select, .select-popover.enhanced .select-display, .mobile-filter-select-display, .title-color-select){
  background: var(--contrast-hc-surface-raised);
  color: var(--contrast-hc-page-text);
  border-color: var(--contrast-hc-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(15,23,42,0.10);
}

body.contrast-safeguard :is(input, textarea)::placeholder{
  color: var(--contrast-hc-muted);
  opacity: 1;
}

body.contrast-safeguard :is(.btn, button.btn, .btn-ghost, .input-clear-btn, .filter-chip, .badge, .status-pill, .lb-cat-pill):not(.btn-primary):not(.btn-danger){
  background: var(--contrast-hc-surface-raised);
  color: var(--contrast-hc-page-text);
  border-color: var(--contrast-hc-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 12px rgba(0,0,0,0.24);
}

body.contrast-safeguard :is(.btn, button.btn, .btn-ghost, .input-clear-btn, .filter-chip, .badge, .status-pill, .lb-cat-pill):not(.btn-primary):not(.btn-danger):hover{
  background: var(--contrast-hc-surface-strong);
  border-color: var(--contrast-hc-border-strong);
}

body.contrast-safeguard :is(.btn.btn-primary, button.btn-primary){
  background: linear-gradient(180deg, #238eff, #075ac8);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.42);
}

html.theme-light body.contrast-safeguard :is(.btn.btn-primary, button.btn-primary){
  background: linear-gradient(180deg, #075fcf, #004397);
  color: #ffffff;
  border-color: #0f172a;
}

body.contrast-safeguard .data-table thead th{
  background: var(--contrast-hc-surface-strong);
  color: var(--contrast-hc-page-text);
  border-bottom-color: var(--contrast-hc-border-strong);
}

body.contrast-safeguard .data-table tbody td,
body.contrast-safeguard th,
body.contrast-safeguard td{
  border-bottom-color: var(--contrast-hc-border);
}

body.contrast-safeguard .data-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.035);
}

html.theme-light body.contrast-safeguard .data-table tbody tr:nth-child(even) td{
  background: rgba(15,23,42,0.045);
}

body.contrast-safeguard .data-table tbody tr.row-link:hover td,
body.contrast-safeguard tr:hover td{
  background: var(--contrast-hc-surface-strong);
}

body.contrast-safeguard .data-table thead th.sortable .th-sort{
  color: var(--contrast-hc-page-text);
}

body.contrast-safeguard .data-table thead th.sortable .th-sort::before{
  opacity: 0.35;
}

body.contrast-safeguard .data-table thead th.sortable .th-sort::after{
  opacity: 0.90;
  border-top-color: currentColor;
}

body.contrast-safeguard .data-table thead th.sortable.is-active .th-sort{
  color: var(--contrast-hc-link-hover);
}

html.theme-light body.contrast-safeguard .data-table thead th.sortable.is-active .th-sort{
  color: var(--contrast-hc-link);
}

body.contrast-safeguard :is(.rating-meter__text, .vote-overlay-label){
  color: #ffffff;
  text-shadow:
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 0 6px rgba(0,0,0,0.90);
}

body.contrast-safeguard .rating-meter__bar{
  height: 9px;
  background: var(--contrast-hc-track);
  border-color: var(--contrast-hc-border-strong);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.75),
    0 0 0 1px rgba(0,0,0,0.35);
}

body.contrast-safeguard .rating-meter__fill{
  background: linear-gradient(90deg, var(--contrast-hc-blue-start), var(--contrast-hc-blue-end));
}

body.contrast-safeguard .rating-meter__mark{
  width: 3px;
  background: #ffffff;
  box-shadow:
    0 0 0 2px #000,
    0 0 8px rgba(255,255,255,0.58);
}

body.contrast-safeguard .vote-range{
  border: 2px solid var(--contrast-hc-border-strong);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.32) 0, rgba(0,0,0,0.32) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, var(--contrast-hc-blue-start) 0, var(--contrast-hc-blue-end) var(--vote-fill-end), var(--contrast-hc-track) var(--vote-fill-end), var(--contrast-hc-track) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    0 8px 20px rgba(0,0,0,0.36);
}

html.theme-light body.contrast-safeguard .vote-range{
  background:
    repeating-linear-gradient(90deg, rgba(15,23,42,0.22) 0, rgba(15,23,42,0.22) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, var(--contrast-hc-blue-start) 0, var(--contrast-hc-blue-end) var(--vote-fill-end), var(--contrast-hc-track) var(--vote-fill-end), var(--contrast-hc-track) 100%);
}

body.contrast-safeguard .vote-range::-webkit-slider-thumb,
body.contrast-safeguard .vote-range::-moz-range-thumb{
  background: #ffffff;
  border-color: #000000;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.42),
    0 9px 18px rgba(0,0,0,0.50);
}

body.contrast-safeguard .vote-range::-moz-range-track{
  background: var(--contrast-hc-track);
  border-color: var(--contrast-hc-border-strong);
}

body.contrast-safeguard .vote-range::-moz-range-progress{
  background: linear-gradient(90deg, var(--contrast-hc-blue-start), var(--contrast-hc-blue-end));
}

body.contrast-safeguard :is(.album-title-panel, .season-title-panel, .episode-title-panel, .arc-title-panel, .character-title-panel){
  background:
    radial-gradient(900px 180px at 14% 0%, rgba(111,216,255,0.24), transparent 62%),
    linear-gradient(180deg, var(--contrast-hc-surface-strong), var(--contrast-hc-surface));
  border-color: var(--contrast-hc-border-strong);
  color: var(--contrast-hc-page-text);
}

html.theme-light body.contrast-safeguard :is(.album-title-panel, .season-title-panel, .episode-title-panel, .arc-title-panel, .character-title-panel){
  background:
    radial-gradient(900px 180px at 14% 0%, rgba(0,118,214,0.16), transparent 62%),
    linear-gradient(180deg, #ffffff, #eaf3ff);
}

body.contrast-safeguard :is(.album-title-panel, .season-title-panel, .episode-title-panel, .arc-title-panel, .character-title-panel) h1{
  color: var(--contrast-hc-page-text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.70);
}

html.theme-light body.contrast-safeguard :is(.album-title-panel, .season-title-panel, .episode-title-panel, .arc-title-panel, .character-title-panel) h1{
  text-shadow: none;
}

body.contrast-safeguard header .mobile-style-toggle,
body.contrast-safeguard header .mobile-style-controls:not([hidden]),
body.contrast-safeguard header .header-select-popover.enhanced .select-options,
body.contrast-safeguard header .title-color-menu{
  background: var(--contrast-hc-surface);
  color: var(--contrast-hc-page-text);
  border-color: var(--contrast-hc-border-strong);
  box-shadow: 0 12px 28px rgba(0,0,0,0.42);
}

html.theme-light body.contrast-safeguard header .mobile-style-toggle,
html.theme-light body.contrast-safeguard header .mobile-style-controls:not([hidden]),
html.theme-light body.contrast-safeguard header .header-select-popover.enhanced .select-options,
html.theme-light body.contrast-safeguard header .title-color-menu{
  background: #ffffff;
  color: var(--contrast-hc-page-text);
  box-shadow: 0 12px 24px rgba(15,23,42,0.18);
}

body.contrast-safeguard header .header-select-popover.enhanced .select-option:hover,
body.contrast-safeguard header .header-select-popover.enhanced .select-option:focus-visible,
body.contrast-safeguard header .header-select-popover.enhanced .select-option.is-selected,
body.contrast-safeguard header .title-color-option:hover,
body.contrast-safeguard header .title-color-option:focus-visible,
body.contrast-safeguard header .title-color-option[aria-selected="true"]{
  background: var(--contrast-hc-surface-strong);
  color: var(--contrast-hc-page-text);
}

body.contrast-safeguard :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--contrast-hc-focus);
  outline-offset: 3px;
}


/* High Contrast follow-up: improve rating value readability in light mode.
   Keep the fix narrowly scoped to the rating text while High Contrast is on.
   This avoids changing the normal theme or the dark High Contrast appearance. */
html.theme-light body.contrast-safeguard .rating-meter__text{
  color: var(--contrast-hc-page-text);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.98),
    0 -1px 0 rgba(255,255,255,0.98),
    1px 0 0 rgba(255,255,255,0.98),
    -1px 0 0 rgba(255,255,255,0.98),
    0 0 8px rgba(255,255,255,0.96);
}


/* ============================================================================
   v457: Edge/Chromium complete vote-slider end caps
   - Keep Firefox on its native rounded ::-moz-range-progress behavior.
   - For WebKit-style range controls, draw the visible track/fill on the
     .vote-slider wrapper so the blue fill can have a real rounded right cap
     under the native thumb instead of a square gradient seam.
   - The fill sync script now special-cases 0% and 100% so the bar completes
     cleanly at both ends instead of leaving a blue nub or gray sliver.
   ============================================================================ */
@media (hover: hover) and (pointer: fine){
  html.aio-webkit-vote-range .vote-slider{
    isolation: isolate;
  }

  html.aio-webkit-vote-range .vote-slider::before,
  html.aio-webkit-vote-range .vote-slider::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    pointer-events: none;
  }

  html.aio-webkit-vote-range .vote-slider::before{
    right: 0;
    z-index: 0;
    background: #e2e5ea;
    border: 1px solid rgba(0,0,0,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 20px rgba(0,0,0,0.28);
  }

  html.aio-webkit-vote-range .vote-slider::after{
    z-index: 1;
    width: var(--vote-native-fill-end, var(--p, 80%));
    max-width: 100%;
    background: linear-gradient(90deg, var(--rating-meter-fill-start, #48b6ff), var(--rating-meter-fill-end, #1d6fe3));
  }

  html.aio-webkit-vote-range .vote-slider .vote-range{
    position: relative;
    z-index: 2;
    background: transparent !important;
    border-color: transparent;
    box-shadow: none;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-runnable-track{
    background: transparent;
  }

  html.aio-webkit-vote-range .vote-slider .vote-overlay{
    z-index: 3;
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider::before{
    background: var(--contrast-hc-track);
    border: 2px solid var(--contrast-hc-border-strong);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.36),
      0 8px 20px rgba(0,0,0,0.36);
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider::after{
    background: linear-gradient(90deg, var(--contrast-hc-blue-start), var(--contrast-hc-blue-end));
  }
}


/* ============================================================================
   v458: Edge/Chromium vote-slider thickness alignment
   - Slightly increases only the WebKit-style public vote slider surface so Edge
     visually matches Firefox more closely.
   - Keeps the Firefox native ::-moz-range-progress path unchanged.
   - Re-centers the WebKit thumb for the taller track at desktop and narrow
     desktop widths without touching vote values, routes, or form behavior.
   ============================================================================ */
@media (hover: hover) and (pointer: fine){
  html.aio-webkit-vote-range .vote-slider{
    height: 36px;
  }

  html.aio-webkit-vote-range .vote-slider input[type="range"],
  html.aio-webkit-vote-range .vote-slider .vote-range{
    height: 36px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-runnable-track{
    height: 36px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-thumb{
    margin-top: 7px;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 680px){
  html.aio-webkit-vote-range .vote-slider{
    height: 48px;
  }

  html.aio-webkit-vote-range .vote-slider input[type="range"],
  html.aio-webkit-vote-range .vote-slider .vote-range{
    height: 48px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-runnable-track{
    height: 48px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-thumb{
    margin-top: 10px;
  }
}


/* Edge GPU thumbnail anti-aliasing guard.
   Edge with graphics acceleration can make scaled public-list thumbnails look over-sharpened.
   v463 removes the compositor scale nudge and keeps the visible image at its
   intended CSS size. Stronger anti-aliasing is handled by the Edge-only
   high-quality canvas pre-resampler in static/js/edge_thumb_resample.js. */
html.edge-browser .public-list-page img.thumb.thumb-list {
  image-rendering: auto !important;
  image-rendering: smooth !important;
  filter: none !important;
  transform: none !important;
}


/* ============================================================================
   v464: Expanded UI Scale coverage with overflow guards
   - Routes more public list, Admin, rating, vote, header, and helper text through
     the existing UI scale variables.
   - Keeps thumbnails/artwork sizes and vote-bar geometry unchanged so Edge image
     resampling and existing list layout fixes are not disturbed.
   - Adds tablet/mobile wrapping guards so larger UI scale presets do not crowd or
     cut off controls.
   ============================================================================ */
body{
  --ui-text-xs: clamp(11px, calc(11px * var(--ui-font-scale)), 13px);
  --ui-text-sm: clamp(12px, calc(13px * var(--ui-font-scale)), 16px);
  --ui-text-md: clamp(14px, calc(16px * var(--ui-font-scale)), 20px);
  --ui-text-lg: clamp(16px, calc(18px * var(--ui-heading-scale)), 23px);
  --ui-row-title-size: clamp(15px, calc(16px * var(--ui-font-scale)), 22px);
  --ui-table-head-size: clamp(11px, calc(12px * var(--ui-font-scale)), 15px);
  --ui-rating-sm-text: clamp(13px, calc(14px * var(--ui-font-scale)), 17px);
  --ui-rating-lg-text: clamp(15px, calc(16px * var(--ui-font-scale)), 20px);
  --ui-admin-title-size: clamp(16px, calc(20px * var(--ui-heading-scale)), 25px);
  --ui-admin-panel-title-size: clamp(15px, calc(16px * var(--ui-heading-scale)), 21px);
}

/* Header and top controls */
header .tagline,
header .motion-select,
header .theme-select,
header .ui-scale-select,
.header-select-popover,
.header-select-popover option{
  font-size: var(--ui-text-sm);
  line-height: 1.25;
}
header .motion-select,
header .theme-select,
header .ui-scale-select{
  min-height: var(--ui-control-height);
  max-width: min(100%, 240px);
}

/* Shared tables and public/admin list rows */
.data-table th,
.table-wrap table th,
th{
  font-size: var(--ui-table-head-size);
  line-height: 1.25;
}
.data-table td,
.table-wrap table td{
  font-size: var(--ui-text-md);
  line-height: 1.35;
}
.row-title,
.data-table .row-title,
.admin-edit-page-frame__title{
  font-size: var(--ui-row-title-size);
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.row-meta,
.row-meta .badge,
.badge,
.status-pill,
.public-list-page .pager .btn,
.public-list-page .list-filters-actions .btn{
  font-size: var(--ui-text-sm);
  line-height: 1.25;
}
.row-title-line,
.row-meta{
  min-width: 0;
}
.data-table td,
.data-table th{
  min-width: 0;
}

/* Public filter cards and mobile search controls */
.public-list-page .list-filters,
.public-list-page .list-filters-row{
  min-width: 0;
}
.public-list-page .list-filters-row > div{
  max-width: 100%;
}
.public-list-page .label,
.mobile-search-toggle__label,
.mobile-search-toggle__meta,
.help-text,
.input-error,
.muted{
  font-size: var(--ui-text-sm);
  line-height: 1.4;
}
.public-list-page input,
.public-list-page select,
.public-list-page button,
.public-list-page .btn{
  max-width: 100%;
}

/* Rating/vote text only; bars, artwork, and thumbnails keep their existing sizes. */
.rating-meter--sm .rating-meter__text{
  font-size: var(--ui-rating-sm-text);
}
.rating-meter--lg .rating-meter__text{
  font-size: var(--ui-rating-lg-text);
}
.community-rating-num{
  font-size: clamp(24px, calc(26px * var(--ui-heading-scale)), 32px);
}
.vote-info-btn,
.vote-overlay-label,
.vote-number,
.vote-badge,
.vote-btn{
  font-size: var(--ui-text-md);
  line-height: 1.2;
}
.vote-summary-eyebrow,
.vote-summary-stat-label,
.vote-summary-stat-note{
  font-size: var(--ui-text-sm);
}
.vote-summary-title{
  font-size: clamp(18px, calc(20px * var(--ui-heading-scale)), 26px);
}
.vote-summary-stat-value{
  font-size: clamp(24px, calc(28px * var(--ui-heading-scale)), 34px);
}

/* Admin home/edit/config text */
.admin-tile-icon,
.admin-edit-toolbar__eyebrow,
.admin-edit-page-frame__eyebrow,
.admin-edit-page-frame__breadcrumbs,
.cfg-unsaved-sub{
  font-size: var(--ui-text-sm);
  line-height: 1.35;
}
.admin-tile-title,
.admin-edit-toolbar__title{
  font-size: var(--ui-admin-title-size);
  line-height: 1.2;
}
.admin-tile-desc,
.admin-edit-toolbar__sub,
.admin-edit-panel-head p{
  font-size: var(--ui-text-sm);
  line-height: 1.45;
}
.admin-edit-panel-head h2,
.config-label{
  font-size: var(--ui-admin-panel-title-size);
  line-height: 1.25;
}
.admin-config .config-item-left,
.admin-config .config-item-right,
.admin-config .config-item-right label,
.admin-config .switch-label,
.admin-config .cfg-subdivider,
.admin-config input,
.admin-config select,
.admin-config textarea,
.admin-config button,
.admin-config .btn{
  font-size: var(--ui-text-md);
  line-height: 1.35;
}
.admin-config .config-item-left,
.admin-config .config-item-right{
  min-width: 0;
}
.admin-config .config-item-right{
  width: 100%;
  max-width: 100%;
}
.admin-config .config-item-right :is(input, select, textarea){
  max-width: 100%;
}

/* Wider one-column breakpoints prevent the large presets from crowding on narrow desktop/tablet. */
@media (max-width: 820px){
  .admin-config .config-item{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-config .config-item-right{
    justify-self: stretch;
  }
  .admin-config .config-item-right > :is(input, select, textarea, label, .switch, .cfg-color-row){
    width: 100%;
    max-width: 100% !important;
  }
}

@media (max-width: 680px){
  body{
    --ui-row-title-size: clamp(15px, calc(15px * var(--ui-font-scale)), 18px);
    --ui-table-head-size: clamp(10.5px, calc(11px * var(--ui-font-scale)), 13px);
    --ui-text-md: clamp(14px, calc(15px * var(--ui-font-scale)), 18px);
  }
  header .motion-select,
  header .theme-select,
  header .ui-scale-select{
    max-width: 100%;
  }
  .public-list-page .list-filters-row{
    gap: 10px;
  }
  .public-list-page .list-filters-row > div,
  .public-list-page .list-filters-row > div:first-child{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100%;
  }
  .public-list-page .list-filters-actions{
    width: 100%;
  }
  .public-list-page .list-filters-actions .btn,
  .public-list-page .list-filters-actions button{
    width: 100%;
  }
  .data-table td,
  .table-wrap table td{
    line-height: 1.32;
  }
  .row-meta,
  .row-meta .badge,
  .badge{
    font-size: clamp(11px, calc(12px * var(--ui-font-scale)), 14px);
  }
}


/* ==========================================================================
   v468: High Contrast light-mode Vote button readability
   - Keep this scoped to light theme + saved High Contrast + public detail vote buttons.
   - Give the Vote button primary/Search-button contrast while preserving its
     existing layout, width, icon, and vote-specific identity.
   ========================================================================== */
html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn{
  --vote-button-rgb: 7, 95, 207;
  --vote-button-int: 1;
  color: #ffffff !important;
  background: linear-gradient(180deg, #075fcf 0%, #004397 100%) !important;
  border: 1px solid #0f172a !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.36),
    0 0 24px rgba(7, 95, 207, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
}

html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn :is(.detail-button-icon, .detail-button-text),
html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn .detail-button-icon svg{
  color: #ffffff !important;
  stroke: currentColor !important;
}

@media (pointer: fine){
  html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:hover:not(:active),
  html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) .vote-btn:focus-visible{
    background: linear-gradient(180deg, #096be3 0%, #004aa7 100%) !important;
    border-color: #0f172a !important;
    box-shadow:
      0 14px 30px rgba(15, 23, 42, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.42),
      0 0 28px rgba(7, 95, 207, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
    filter: brightness(1.02) saturate(1.03);
  }
}


/* ============================================================================
   v469: Consistent public vote feedback bubbles
   - Keeps the small vote-result bubbles visually consistent between Edge and
     Firefox on public detail voting panels.
   - Scopes the sizing and pill treatment to public detail vote feedback only.
   ============================================================================ */
body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  box-sizing: border-box;
  padding: 5px 15px;
  border-radius: 999px;
  font-size: clamp(15px, calc(16px * var(--ui-font-scale)), 20px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
}

html.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  color: #1d2430;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96));
  border: 1px solid rgba(28, 65, 116, 0.56);
  box-shadow:
    0 7px 16px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  color: #1d2430;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  border-color: #1c4174;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}


/* ============================================================================
   v470: Edge-only vote feedback bubble normalization
   - Keeps the Firefox v469 bubble result unchanged.
   - Softens only Edge/Chromium rendering for the public detail vote feedback
     pills and matching remove-vote pill so they do not look oversized/heavy.
   ============================================================================ */
html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  min-height: 32px;
  padding: 4px 13px;
  font-size: clamp(14px, calc(15px * var(--ui-font-scale)), 18px);
  font-weight: 400;
  line-height: 1.08;
}

html.edge-browser.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  color: #263244;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

html.edge-browser body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  box-shadow:
    0 5px 13px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html.edge-browser.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  color: #263244;
  border-color: #24476f;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger){
  min-height: 32px;
  padding: 5px 13px;
  border-radius: 16px;
  font-size: clamp(14px, calc(15px * var(--ui-font-scale)), 18px);
  font-weight: 400;
  line-height: 1.08;
}

html.edge-browser.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger){
  color: #8f1d1d;
  box-shadow:
    0 5px 13px rgba(153, 27, 27, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}


/* ============================================================================
   v471: Edge vote feedback/removal pill alignment
   - Keeps the Firefox v469/v470 result unchanged.
   - Tightens only Edge public detail vote feedback/removal pills so their
     sizes, text weight, color, and left alignment match the Firefox result.
   ============================================================================ */
html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form{
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
  text-align: left;
}

html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok),
html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger){
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: max-content;
  box-sizing: border-box;
  vertical-align: top;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
}

html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block :is(.badge, .flash.flash-ok){
  min-height: 32px;
  padding: 4px 12px;
  font-size: clamp(14px, calc(14px * var(--ui-font-scale)), 17px);
  font-weight: 400;
  line-height: 1.08;
}

html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger){
  min-height: calc(var(--ui-control-height) - 4px);
  padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
  border-radius: 16px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 400;
  line-height: 1;
  filter: none;
}

html.edge-browser.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger),
html.edge-browser.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger){
  color: #111827;
  background: linear-gradient(180deg, rgba(255, 247, 247, 0.98), rgba(254, 226, 226, 0.96));
  border-color: rgba(185, 28, 28, 0.48);
  box-shadow:
    0 7px 16px rgba(153, 27, 27, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

@media (pointer: fine){
  html.edge-browser.theme-light body:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger):hover:not(:active),
  html.edge-browser.theme-light body.contrast-safeguard:is([data-page-kind="episode"],[data-page-kind="character"],[data-page-kind="arc"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main .episode-vote-block .vote-remove-form :is(.btn.btn-danger, button.btn-danger):hover:not(:active){
    color: #111827;
    transform: translateY(-1px);
    filter: none;
    box-shadow:
      0 8px 17px rgba(153, 27, 27, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.80);
  }
}


/* ============================================================================
   v472: Vote slider browser parity
   - Keep the existing public vote slider markup and behavior unchanged.
   - Normalize the vote bar fill colors through shared variables so Firefox and
     Edge use the same blue stops.
   - Strengthen only the High Contrast vote bar outline.
   - Slightly enlarges only the desktop WebKit/Edge thumb to match Firefox.
   ============================================================================ */
.vote-slider{
  --vote-bar-blue-start: #48b6ff;
  --vote-bar-blue-end: #1d6fe3;
  --vote-bar-track-bg: #e2e5ea;
}

.vote-range{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, var(--vote-bar-blue-start) 0, var(--vote-bar-blue-end) var(--vote-fill-end), var(--vote-bar-track-bg) var(--vote-fill-end), var(--vote-bar-track-bg) 100%);
}

.vote-range::-moz-range-track{
  background: var(--vote-bar-track-bg);
}

.vote-range::-moz-range-progress{
  background: linear-gradient(90deg, var(--vote-bar-blue-start), var(--vote-bar-blue-end));
}

body.contrast-safeguard .vote-slider{
  --vote-bar-blue-start: var(--contrast-hc-blue-start);
  --vote-bar-blue-end: var(--contrast-hc-blue-end);
  --vote-bar-track-bg: var(--contrast-hc-track);
}

body.contrast-safeguard .vote-range{
  border-color: var(--contrast-hc-border-strong);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.32) 0, rgba(0,0,0,0.32) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, var(--vote-bar-blue-start) 0, var(--vote-bar-blue-end) var(--vote-fill-end), var(--vote-bar-track-bg) var(--vote-fill-end), var(--vote-bar-track-bg) 100%);
  box-shadow:
    0 0 0 1px var(--contrast-hc-border-strong),
    inset 0 1px 0 rgba(255,255,255,0.36),
    0 8px 20px rgba(0,0,0,0.36);
}

html.theme-light body.contrast-safeguard .vote-range{
  background:
    repeating-linear-gradient(90deg, rgba(15,23,42,0.22) 0, rgba(15,23,42,0.22) 1px, transparent 1px, transparent 20%),
    linear-gradient(90deg, var(--vote-bar-blue-start) 0, var(--vote-bar-blue-end) var(--vote-fill-end), var(--vote-bar-track-bg) var(--vote-fill-end), var(--vote-bar-track-bg) 100%);
}

body.contrast-safeguard .vote-range::-moz-range-track{
  background: var(--vote-bar-track-bg);
  border: 2px solid var(--contrast-hc-border-strong);
  box-shadow: 0 0 0 1px var(--contrast-hc-border-strong);
}

body.contrast-safeguard .vote-range::-moz-range-progress{
  background: linear-gradient(90deg, var(--vote-bar-blue-start), var(--vote-bar-blue-end));
}

@media (hover: hover) and (pointer: fine){
  html.aio-webkit-vote-range .vote-slider::before{
    background: var(--vote-bar-track-bg);
  }

  html.aio-webkit-vote-range .vote-slider::after{
    background: linear-gradient(90deg, var(--vote-bar-blue-start), var(--vote-bar-blue-end));
  }

  html.aio-webkit-vote-range .vote-slider .vote-range{
    --vote-thumb-size: 26px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-thumb{
    width: 26px;
    height: 26px;
    margin-top: 5px;
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider::before{
    background: var(--vote-bar-track-bg);
    border-color: var(--contrast-hc-border-strong);
    box-shadow:
      0 0 0 1px var(--contrast-hc-border-strong),
      inset 0 1px 0 rgba(255,255,255,0.36),
      0 8px 20px rgba(0,0,0,0.36);
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider::after{
    background: linear-gradient(90deg, var(--vote-bar-blue-start), var(--vote-bar-blue-end));
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider .vote-range{
    --vote-thumb-size: 28px;
  }

  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider .vote-range::-webkit-slider-thumb{
    width: 28px;
    height: 28px;
    margin-top: 4px;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 680px){
  html.aio-webkit-vote-range .vote-slider .vote-range{
    --vote-thumb-size: 28px;
  }

  html.aio-webkit-vote-range .vote-slider .vote-range::-webkit-slider-thumb,
  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider .vote-range::-webkit-slider-thumb{
    width: 28px;
    height: 28px;
    margin-top: 10px;
  }
}


/* ============================================================================
   v473: Edge high contrast vote slider full-fill outline
   - Keeps the v472 color and thumb parity work unchanged.
   - Adds only an outside rounded high-contrast ring to the WebKit/Edge vote
     slider wrapper so the dark outline remains visible when the fill is 100%.
   - Does not change vote values, form behavior, Firefox native range styling,
     routes, database schema, Admin pages, or unrelated layout.
   ============================================================================ */
@media (hover: hover) and (pointer: fine){
  html.aio-webkit-vote-range body.contrast-safeguard .vote-slider{
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--contrast-hc-border-strong);
  }
}


/* ==========================================================================
   v476: make Light top banner opacity apply in every header state
   - The High Contrast light-header override was fully opaque, so changing the
     Admin Config Light mode banner opacity could look like it had no effect
     when the optional top-header backdrop color was blank.
   - Re-apply the light header background at the end of the stylesheet with the
     opacity variable in the normal, custom-backdrop, and High Contrast paths.
   ========================================================================== */
html.theme-light body header#siteHeader.site-header{
  background:
    linear-gradient(180deg,
      rgba(248,251,254,var(--top-banner-opacity-light, 0.98)),
      rgba(235,240,247,var(--top-banner-opacity-light, 0.98)));
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg,
      rgba(250,251,253,var(--top-banner-opacity-light, 0.98)),
      rgba(242,246,251,var(--top-banner-opacity-light, 0.98)));
}

html.theme-light body.contrast-safeguard header#siteHeader.site-header{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg,
      rgba(255,255,255,var(--top-banner-opacity-light, 0.98)) 0%,
      rgba(238,245,255,var(--top-banner-opacity-light, 0.98)) 100%);
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg,
      rgba(255,255,255,var(--top-banner-opacity-light, 0.98)) 0%,
      rgba(238,245,255,var(--top-banner-opacity-light, 0.98)) 100%);
}

/* ==========================================================================
   v477: decouple Light top banner opacity from the optional backdrop color
   - Keep the real light-header background transparent and draw it on a pseudo
     layer whose opacity is controlled only by Light mode banner opacity.
   - The optional Top header backdrop color now only changes the tint layers;
     it no longer decides whether the header can be seen through.
   ========================================================================== */
html.theme-light body header#siteHeader.site-header{
  background: transparent !important;
  position: sticky;
  isolation: isolate;
}

html.theme-light body header#siteHeader.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgb(248,251,254),
      rgb(235,240,247));
  opacity: var(--top-banner-opacity-light, 0.98);
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(250,251,253), rgb(242,246,251));
}

html.theme-light body.contrast-safeguard header#siteHeader.site-header::after{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%);
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%);
}

html.theme-light body header#siteHeader.site-header > *{
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   v478: keep Light banner opacity independent when backdrop color is blank
   - Draw the Light header on its own pseudo layer with alpha in the gradient
     colors, not element opacity.
   - Leaving Top header backdrop (Light theme) blank now uses the same
     see-through base layer as the tinted path.
   - The optional backdrop color only adds tint wash layers.
   ========================================================================== */
html.theme-light body header#siteHeader.site-header{
  background: transparent !important;
  position: sticky;
  isolation: isolate;
}

html.theme-light body header#siteHeader.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(180deg,
      rgba(248,251,254,var(--top-banner-opacity-light, 0.98)),
      rgba(235,240,247,var(--top-banner-opacity-light, 0.98)));
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg,
      rgba(250,251,253,var(--top-banner-opacity-light, 0.98)),
      rgba(242,246,251,var(--top-banner-opacity-light, 0.98)));
}

html.theme-light body.contrast-safeguard header#siteHeader.site-header::after{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg,
      rgba(255,255,255,var(--top-banner-opacity-light, 0.98)) 0%,
      rgba(238,245,255,var(--top-banner-opacity-light, 0.98)) 100%);
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg,
      rgba(255,255,255,var(--top-banner-opacity-light, 0.98)) 0%,
      rgba(238,245,255,var(--top-banner-opacity-light, 0.98)) 100%);
}

html.theme-light body header#siteHeader.site-header > *{
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   v479: keep Top header backdrop tint from changing Light banner opacity
   - v478 still used rgba tint layers on the same pseudo background, which could
     add their own alpha when a hex backdrop color was configured.
   - Keep one painted header layer and apply the Light mode banner opacity to
     the whole layer, so the backdrop hex can change tint only, not transparency.
   ========================================================================== */
html.theme-light body header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light, 0.98) !important;
  background:
    linear-gradient(180deg,
      rgb(248,251,254),
      rgb(235,240,247)) !important;
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light, 0.98) !important;
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(250,251,253), rgb(242,246,251)) !important;
}

html.theme-light body.contrast-safeguard header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light, 0.98) !important;
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%) !important;
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light, 0.98) !important;
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%) !important;
}


/* ==========================================================================
   v480: keep High Contrast Dark and Dim top banner opacity adjustable
   - The High Contrast dark-header override used solid hex backgrounds, which
     made Dark and Dim headers look opaque regardless of Top banner opacity.
   - Re-apply the dark opacity variable in the High Contrast dark and dim paths
     without changing the Light theme pseudo-layer fix.
   ========================================================================== */
body.contrast-safeguard header#siteHeader.site-header{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(111,216,255,0.20) 0%,
      rgba(111,216,255,0.10) 28%,
      transparent 54%),
    linear-gradient(180deg,
      rgba(8,17,31,var(--top-banner-opacity-dark, 0.90)) 0%,
      rgba(5,9,20,var(--top-banner-opacity-dark, 0.90)) 100%) !important;
}

html.theme-dark body.contrast-safeguard header#siteHeader.site-header{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(111,216,255,0.20) 0%,
      rgba(111,216,255,0.10) 28%,
      transparent 54%),
    linear-gradient(180deg,
      rgba(8,17,31,var(--top-banner-opacity-dark, 0.90)) 0%,
      rgba(5,9,20,var(--top-banner-opacity-dark, 0.90)) 100%) !important;
}

html.theme-dim body.contrast-safeguard header#siteHeader.site-header{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(111,216,255,0.16) 0%,
      rgba(111,216,255,0.08) 28%,
      transparent 54%),
    linear-gradient(180deg,
      rgba(27,31,39,var(--top-banner-opacity-dark, 0.90)) 0%,
      rgba(19,22,30,var(--top-banner-opacity-dark, 0.90)) 100%) !important;
}


/* ===========================================================================
   v481: make High Contrast Dark/Dim header transparency affect the whole layer
   - v480 put the dark opacity on only the base linear gradient, while the
     High Contrast accent wash stayed on its own fixed-alpha background layer.
   - Draw High Contrast Dark/Dim header paint on a pseudo layer and apply the
     Dark mode banner opacity to that full layer, matching the Light fix.
   =========================================================================== */
html.theme-dark body.contrast-safeguard header#siteHeader.site-header,
html.theme-dim body.contrast-safeguard header#siteHeader.site-header{
  background: transparent !important;
  position: sticky;
  isolation: isolate;
}

html.theme-dark body.contrast-safeguard header#siteHeader.site-header::after,
html.theme-dim body.contrast-safeguard header#siteHeader.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--top-banner-opacity-dark, 0.90) !important;
}

html.theme-dark body.contrast-safeguard header#siteHeader.site-header::after{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(111,216,255,0.20) 0%,
      rgba(111,216,255,0.10) 28%,
      transparent 54%),
    linear-gradient(180deg, rgb(8,17,31) 0%, rgb(5,9,20) 100%) !important;
}

html.theme-dim body.contrast-safeguard header#siteHeader.site-header::after{
  background:
    radial-gradient(circle at 12% 40%,
      rgba(111,216,255,0.16) 0%,
      rgba(111,216,255,0.08) 28%,
      transparent 54%),
    linear-gradient(180deg, rgb(27,31,39) 0%, rgb(19,22,30) 100%) !important;
}

html.theme-dark body.contrast-safeguard header#siteHeader.site-header > *,
html.theme-dim body.contrast-safeguard header#siteHeader.site-header > *{
  position: relative;
  z-index: 1;
}

/* ===========================================================================
   v482: user-selectable banner transparency levels
   - Users can choose Banner Transparency Off/Low/Medium/High in the header
     Settings menu.
   - Admin Config supplies separate Light and Dark/Dim opacity percentages for
     Low, Medium, and High levels.
   =========================================================================== */
html.top-banner-transparency-off{
  --top-banner-opacity-light: 1;
  --top-banner-opacity-dark: 1;
}
html.top-banner-transparency-low{
  --top-banner-opacity-light: var(--top-banner-opacity-light-low, 1);
  --top-banner-opacity-dark: var(--top-banner-opacity-dark-low, 0.95);
}
html.top-banner-transparency-medium{
  --top-banner-opacity-light: var(--top-banner-opacity-light-medium, 0.98);
  --top-banner-opacity-dark: var(--top-banner-opacity-dark-medium, 0.90);
}
html.top-banner-transparency-high{
  --top-banner-opacity-light: var(--top-banner-opacity-light-high, 0.90);
  --top-banner-opacity-dark: var(--top-banner-opacity-dark-high, 0.80);
}

.cfg-top-banner-levels{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  justify-content: flex-end;
}
.cfg-top-banner-levels label{
  display: grid;
  gap: 4px;
  min-width: 86px;
  font-size: 12px;
  color: var(--muted, #9aa4b2);
}
.cfg-top-banner-levels input[type="number"]{
  width: 86px;
  max-width: 86px;
}

@media (max-width: 680px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}


/* ===========================================================================
   v483: Settings Banner Transparency label and desktop row fit
   - Rename the user-facing Banner Transparency control and fit it on the desktop row.
   - Keep desktop Settings row 2 to Title, Theme, and Banner Transparency.
   =========================================================================== */
@media (min-width: 681px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}


/* ===========================================================================
   v484: force Light banner transparency levels onto the painted header layer
   - Light mode draws its banner on ::after, so apply Off/Low/Medium/High
     directly to that layer instead of relying only on the shared variable.
   - Keeps Dark/Dim behavior and Admin Config keys unchanged.
   =========================================================================== */
html.theme-light.top-banner-transparency-off body header#siteHeader.site-header::after{
  opacity: 1 !important;
}

html.theme-light.top-banner-transparency-low body header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-low, 1) !important;
}

html.theme-light.top-banner-transparency-medium body header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-medium, 0.98) !important;
}

html.theme-light.top-banner-transparency-high body header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-high, 0.90) !important;
}


/* ===========================================================================
   v485: make Light Banner Transparency follow the Settings choice reliably
   - Resolve Off/Low/Medium/High to one active Light opacity variable on <html>.
   - Force the real Light header background transparent, then draw the visible
     Light paint only on ::after using that active opacity.
   - Keep Dark/Dim behavior unchanged.
   =========================================================================== */
html.theme-light.top-banner-transparency-off{
  --top-banner-opacity-light-active: 1;
}
html.theme-light.top-banner-transparency-low{
  --top-banner-opacity-light-active: var(--top-banner-opacity-light-low, 1);
}
html.theme-light.top-banner-transparency-medium{
  --top-banner-opacity-light-active: var(--top-banner-opacity-light-medium, 0.98);
}
html.theme-light.top-banner-transparency-high{
  --top-banner-opacity-light-active: var(--top-banner-opacity-light-high, 0.90);
}

html.theme-light body header#siteHeader.site-header{
  background: transparent !important;
  position: sticky;
  isolation: isolate;
}

html.theme-light body header#siteHeader.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    linear-gradient(180deg,
      rgb(248,251,254),
      rgb(235,240,247)) !important;
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(250,251,253), rgb(242,246,251)) !important;
}

html.theme-light body.contrast-safeguard header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%) !important;
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    radial-gradient(1100px 300px at 18% 0%, var(--header-backdrop-light, rgba(29,111,227,0.14)), transparent 62%),
    radial-gradient(900px 260px at 78% 18%, var(--header-backdrop-light-soft, rgba(29,111,227,0.10)), transparent 60%),
    radial-gradient(700px 220px at 98% 100%, var(--header-backdrop-light-faint, rgba(29,111,227,0.05)), transparent 72%),
    linear-gradient(180deg, var(--header-backdrop-base-top-light, rgba(29,111,227,0.07)), var(--header-backdrop-base-bottom-light, rgba(29,111,227,0.06))),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%) !important;
}

/* ===========================================================================
   v486: keep legacy Light header backdrop from breaking banner transparency
   - The old Top header backdrop (Light theme) hex could put the Light header
     back onto a separate tinted paint path. Use the normal Light paint layer
     for transparency instead, even when that legacy hex is still saved.
   - Dark/Dim behavior and the Banner Transparency setting values are unchanged.
   =========================================================================== */
html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(92, 129, 184, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 6px 16px rgba(16,24,40,0.06) !important;
}

html.theme-light body[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    linear-gradient(180deg,
      rgb(248,251,254),
      rgb(235,240,247)) !important;
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header{
  background: transparent !important;
  border-bottom: 1px solid var(--contrast-hc-border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(17,24,39,0.35),
    0 8px 22px rgba(17,24,39,0.10) !important;
}

html.theme-light body.contrast-safeguard[data-header-backdrop-light="1"] header#siteHeader.site-header::after{
  opacity: var(--top-banner-opacity-light-active, var(--top-banner-opacity-light, 0.98)) !important;
  background:
    radial-gradient(circle at 12% 40%,
      rgba(0,118,214,0.18) 0%,
      rgba(0,118,214,0.08) 30%,
      transparent 58%),
    linear-gradient(180deg, rgb(255,255,255) 0%, rgb(238,245,255) 100%) !important;
}


/* ===========================================================================
   v487: organize Settings controls on phone and tablet layouts
   - Keep the approved iPad landscape Settings layout unchanged.
   - Use a clean 3-column tablet portrait layout, a 2-column phone landscape
     layout, and a single-column phone portrait layout so the controls do not
     wrap into uneven rows.
   =========================================================================== */
@media (orientation: portrait) and (min-width: 681px) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    justify-self: end !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: min(620px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: end !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (orientation: portrait) and (max-width: 520px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 1 !important;
    grid-row: 6 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 !important;
    grid-row: 7 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}


/* ===========================================================================
   v488: tighter mobile Settings grid and shorter controls
   - Keep the approved iPad landscape Settings layout unchanged.
   - Reduce the mobile Settings panel width so dropdowns do not stretch too long.
   - Restore a true 2-column phone portrait grid with Media Night Light full-width.
   - Keep long labels from making controls tall by clipping them cleanly inside
     the compact mobile buttons.
   =========================================================================== */
@media (orientation: portrait) and (min-width: 681px) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    justify-self: end !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(540px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: end !important;
  }
}

@media (max-width: 680px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .motion-select,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .theme-select,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .title-color-select,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover.enhanced .select-display{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .title-color-select__label,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover.enhanced .select-display span{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (orientation: portrait) and (max-width: 520px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: center !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (orientation: portrait) and (max-width: 340px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(300px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{ grid-row: 1 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{ grid-row: 2 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{ grid-row: 3 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{ grid-row: 4 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{ grid-row: 5 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{ grid-row: 6 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{ grid-row: 7 !important; }
}


/* ===========================================================================
   v489: put Banner Transparency on its own phone portrait row
   - Keep the phone portrait Settings panel as a compact two-column grid.
   - Move Banner Transparency to a full-width row so the full label/value fits.
   - Keep Media Night Light full-width below it.
   - Shorten the phone landscape panel so controls do not stretch too wide.
   =========================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    width: min(500px, calc(100vw - 24px)) !important;
  }
}

@media (orientation: portrait) and (max-width: 520px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(340px, calc(100vw - 24px)) !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }
}

@media (orientation: portrait) and (max-width: 340px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(300px, calc(100vw - 20px)) !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{ grid-row: 1 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{ grid-row: 2 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{ grid-row: 3 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{ grid-row: 4 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{ grid-row: 5 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{ grid-row: 6 !important; }
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{ grid-row: 7 !important; }
}

/* ===========================================================================
   v490: keep phone Banner Transparency in the two-column Settings grid
   - Phone portrait keeps Banner Transparency beside Title instead of using a
     full-width row.
   - The Banner Transparency display stacks its label above the chosen value so
     the control fits in one grid box.
   - iPad portrait uses a narrower Settings panel so the boxes are less long.
   - iPad landscape is not changed.
   =========================================================================== */
@media (orientation: portrait) and (min-width: 681px) and (max-width: 1024px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    justify-self: end !important;
  }
}

@media (orientation: portrait) and (max-width: 520px){
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(350px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    justify-self: center !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #uiScaleSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--ui-scale{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #motionSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--motion{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #contrastSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--contrast{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #themeSetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--theme{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #titleColorControl{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #topBannerTransparencySetting,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency{
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) #mediaComfortControl{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .header-select-popover--top-banner-transparency .top-banner-transparency-select.select-display{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    min-height: 44px !important;
    padding-left: 9px !important;
    padding-right: 22px !important;
    font-size: 11.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .top-banner-transparency-display__label,
  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .top-banner-transparency-display__value{
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body header#siteHeader.site-header .mobile-style-controls:not([hidden]) .top-banner-transparency-display__value{
    font-weight: 700 !important;
  }
}

/* v493: arc date range and arc vote result pills */
.badge.arc-date-range-pill,
.badge.arc-vote-result-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.38rem 1.05rem;
  border-color: rgba(73, 93, 125, 0.78);
  border-radius: 999px;
  background: rgba(15, 19, 27, 0.72);
  color: #62a8ff;
  font-size: calc(16px * var(--ui-font-scale));
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.badge.arc-date-range-pill{
  padding: 0.28rem 0.92rem;
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1.1;
}

.arc-date-range-list-row{
  margin-top: 6px;
}

.arc-detail-date-range{
  display: flex;
  align-items: center;
}

html.theme-light .badge.arc-date-range-pill,
html.theme-light .badge.arc-vote-result-pill{
  border-color: rgba(29, 111, 227, 0.25);
  background: rgba(29, 111, 227, 0.07);
  color: #0b63ce;
}


/* v494: Arc detail episode number values follow the Title style */
body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table .episodes-table--detail tbody td:first-child .cell-fx,
html body[data-page-kind="arc"] main#main .page-arcs-detail .arc-detail-table .episodes-table--detail tbody td:first-child .cell-fx{
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
  font-weight: 650;
  letter-spacing: normal;
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.13 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="arc"] .page-arcs-detail .arc-detail-table .episodes-table--detail tbody td:first-child .cell-fx,
html.theme-light body[data-page-kind="arc"] main#main .page-arcs-detail .arc-detail-table .episodes-table--detail tbody td:first-child .cell-fx{
  text-shadow: none !important;
}

/* ============================================================================
   v495: Arc linked-count badges get dedicated type palettes.
   - Related Arcs use the Arc badge color.
   - Albums use the Album badge color.
   - Seasons use the Season badge color.
   - Elsewhere uses the Comic badge color while keeping the Elsewhere section name.
   ============================================================================ */
body[data-page-kind="arc"] main#main :is(.arc-arcs-count-pill, .arc-albums-count-pill, .arc-seasons-count-pill, .arc-comics-count-pill){
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 8px;
  color: var(--lb-color) !important;
  border-color: rgba(var(--arc-linked-count-pill-rgb, 251, 191, 36), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
    rgba(var(--arc-linked-count-pill-rgb, 251, 191, 36), 0.045) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body[data-page-kind="arc"] main#main :is(.arc-arcs-count-pill, .arc-albums-count-pill, .arc-seasons-count-pill, .arc-comics-count-pill) *{
  color: inherit !important;
  text-shadow: none !important;
}
body[data-page-kind="arc"] main#main .arc-arcs-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-arcs-rgb, 251, 191, 36);
  --lb-color: var(--list-pill-arcs-color, #FBBF24);
}
body[data-page-kind="arc"] main#main .arc-albums-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-albums-rgb, 167, 139, 250);
  --lb-color: var(--list-pill-albums-color, #A78BFA);
}
body[data-page-kind="arc"] main#main .arc-seasons-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-seasons-rgb, 52, 211, 153);
  --lb-color: var(--list-pill-seasons-color, #34D399);
}
body[data-page-kind="arc"] main#main .arc-comics-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-comics-rgb, var(--list-pill-items-rgb, 251, 191, 36));
  --lb-color: var(--list-pill-comics-color, var(--list-pill-items-color, #FBBF24));
}
body[data-page-kind="arc"] main#main :is(.arc-arcs-count-num, .arc-albums-count-num, .arc-seasons-count-num, .arc-comics-count-num){
  font-size: 15px;
  font-weight: 900;
}
body[data-page-kind="arc"] main#main :is(.arc-arcs-count-label, .arc-albums-count-label, .arc-seasons-count-label, .arc-comics-count-label){
  color: inherit;
  font-weight: 800;
  opacity: 1;
}
html.theme-light body[data-page-kind="arc"] main#main :is(.arc-arcs-count-pill, .arc-albums-count-pill, .arc-seasons-count-pill, .arc-comics-count-pill){
  color: var(--lb-color) !important;
  border-color: rgba(var(--arc-linked-count-pill-rgb, 154, 90, 18), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,253,0.96)),
    linear-gradient(135deg, rgba(var(--arc-linked-count-pill-rgb, 154, 90, 18), 0.12), rgba(255,255,255,0.90) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 1px 0 rgba(255,255,255,0.50),
    0 8px 18px rgba(37, 58, 88, 0.08) !important;
}
html.theme-light body[data-page-kind="arc"] main#main .arc-arcs-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-arcs-rgb, 154, 90, 18);
  --lb-color: var(--list-pill-arcs-color, #9A5A12);
}
html.theme-light body[data-page-kind="arc"] main#main .arc-albums-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-albums-rgb, 109, 40, 217);
  --lb-color: var(--list-pill-albums-color, #6D28D9);
}
html.theme-light body[data-page-kind="arc"] main#main .arc-seasons-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-seasons-rgb, 4, 120, 87);
  --lb-color: var(--list-pill-seasons-color, #047857);
}
html.theme-light body[data-page-kind="arc"] main#main .arc-comics-count-pill{
  --arc-linked-count-pill-rgb: var(--list-pill-comics-rgb, var(--list-pill-items-rgb, 154, 90, 18));
  --lb-color: var(--list-pill-comics-color, var(--list-pill-items-color, #9A5A12));
}


/* ============================================================================
   v496: Album and Season badges follow the Admin Tabs and Theme title palette
   - Album badges use the selected title option's Album badge color.
   - Season badges use the selected title option's Season badge color.
   - Badge text and nested badge text inherit the same Album/Season color.
   ============================================================================ */
html body main#main .public-list-page--albums .albums-table .row-meta--albums .badge.badge-album-number,
html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-album,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album,
html body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge.badge-episode-album{
  --aio-album-season-badge-color: var(--list-pill-albums-color, #A78BFA);
  --aio-album-season-badge-rgb: var(--list-pill-albums-rgb, 167, 139, 250);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--aio-album-season-badge-rgb), 0.18), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--aio-album-season-badge-rgb), 0.075),
    0 0 18px rgba(var(--aio-album-season-badge-rgb), calc(0.070 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge.badge-season-number,
html body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-season,
html body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season,
html body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge.badge-episode-season{
  --aio-album-season-badge-color: var(--list-pill-seasons-color, #34D399);
  --aio-album-season-badge-rgb: var(--list-pill-seasons-rgb, 52, 211, 153);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--aio-album-season-badge-rgb), 0.18), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--aio-album-season-badge-rgb), 0.075),
    0 0 18px rgba(var(--aio-album-season-badge-rgb), calc(0.070 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

html.theme-light body main#main .public-list-page--albums .albums-table .row-meta--albums .badge.badge-album-number,
html.theme-light body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-album,
html.theme-light body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-album,
html.theme-light body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge.badge-episode-album{
  --aio-album-season-badge-color: var(--list-pill-albums-color, #6D28D9);
  --aio-album-season-badge-rgb: var(--list-pill-albums-rgb, 109, 40, 217);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.78) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--aio-album-season-badge-rgb), 0.12), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.84) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--aio-album-season-badge-rgb), calc(0.040 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--aio-album-season-badge-rgb), 0.060) !important;
  text-shadow: none !important;
}

html.theme-light body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge.badge-season-number,
html.theme-light body main#main .public-list-page--episodes .episodes-table .episode-album-season-badges .badge.badge-episode-season,
html.theme-light body main#main .public-list-page--episodes .episodes-table .row-meta .badge.badge-episode-season,
html.theme-light body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge.badge-episode-season{
  --aio-album-season-badge-color: var(--list-pill-seasons-color, #047857);
  --aio-album-season-badge-rgb: var(--list-pill-seasons-rgb, 4, 120, 87);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.78) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--aio-album-season-badge-rgb), 0.12), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.84) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--aio-album-season-badge-rgb), calc(0.040 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--aio-album-season-badge-rgb), 0.060) !important;
  text-shadow: none !important;
}

html body main#main .public-list-page--albums .albums-table .row-meta--albums .badge.badge-album-number :is(.badge-text, .badge-count, .badge-label),
html body main#main .public-list-page--seasons .seasons-table .row-meta--seasons .badge.badge-season-number :is(.badge-text, .badge-count, .badge-label),
html body main#main .public-list-page--episodes .episodes-table :is(.episode-album-season-badges, .row-meta) .badge:is(.badge-episode-album, .badge-episode-season) :is(.badge-text, .badge-count, .badge-label),
html body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge:is(.badge-episode-album, .badge-episode-season) :is(.badge-text, .badge-count, .badge-label){
  color: var(--aio-album-season-badge-color) !important;
  -webkit-text-fill-color: var(--aio-album-season-badge-color) !important;
}

html body main#main .public-list-page--episodes .episodes-table .row-meta .badge:is(.badge-episode-album, .badge-episode-season)::before,
html body[data-page-kind="arc"] main#main .row-meta--arc-detail .badge:is(.badge-episode-album, .badge-episode-season)::before{
  color: var(--aio-album-season-badge-color) !important;
  background-color: currentColor !important;
}


/* v498 - larger shared Admin flash/message cards */
body[data-admin-root] .admin-edit-flash.admin-flash-card,
.admin-auth-flash{
  margin:16px 0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(96,165,250,0.48);
  background:linear-gradient(135deg, rgba(0,130,198,0.18), rgba(15,23,42,0.38));
  box-shadow:0 16px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
body[data-admin-root] .admin-edit-flash .badge,
.admin-auth-flash .badge{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#eaf6ff;
  font-size:16px;
  font-weight:650;
  line-height:1.55;
  letter-spacing:.005em;
  white-space:normal;
  overflow-wrap:anywhere;
  box-shadow:none;
}
body[data-admin-root] .admin-edit-flash .badge::before,
.admin-auth-flash .badge::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:10px;
  border-radius:999px;
  background:currentColor;
  opacity:.72;
  vertical-align:0.08em;
}
.admin-auth-flash{
  margin-top:14px;
}
html.theme-light body[data-admin-root] .admin-edit-flash.admin-flash-card,
html.theme-light .admin-auth-flash{
  border-color:rgba(0,98,150,0.26);
  background:linear-gradient(135deg, rgba(232,246,255,0.96), rgba(255,255,255,0.88));
  box-shadow:0 12px 28px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}
html.theme-light body[data-admin-root] .admin-edit-flash .badge,
html.theme-light .admin-auth-flash .badge{
  color:#174968;
}
@media (max-width: 640px){
  body[data-admin-root] .admin-edit-flash.admin-flash-card,
  .admin-auth-flash{
    padding:14px 15px;
    border-radius:16px;
  }
  body[data-admin-root] .admin-edit-flash .badge,
  .admin-auth-flash .badge{
    font-size:15px;
    line-height:1.5;
  }
}

/* ==========================================================================
   v499: Vote badge color fill consistency
   - Keep the change scoped to vote-count pills only.
   - Remove the white/glassy wash from vote badges so the selected vote color
     fills the whole pill more consistently across public list and detail pages.
   ========================================================================== */
body:is([data-page-kind="album"],[data-page-kind="albums"],[data-page-kind="season"],[data-page-kind="seasons"],[data-page-kind="arc"],[data-page-kind="arcs"],[data-page-kind="episode"],[data-page-kind="episodes"],[data-page-kind="character"],[data-page-kind="characters"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table .row-meta--albums .badge-votes,
  .public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.50);
  background:
    linear-gradient(180deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.36), rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.22)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.28), rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14)),
    rgba(14, 23, 39, 0.90);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.22),
    inset 0 0 0 1px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.12);
}

html.theme-light body:is([data-page-kind="album"],[data-page-kind="albums"],[data-page-kind="season"],[data-page-kind="seasons"],[data-page-kind="arc"],[data-page-kind="arcs"],[data-page-kind="episode"],[data-page-kind="episodes"],[data-page-kind="character"],[data-page-kind="characters"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table .row-meta--albums .badge-votes,
  .public-list-page--seasons .seasons-table .row-meta--seasons .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.44);
  background:
    linear-gradient(180deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.30), rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.17)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.24), rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.11)),
    rgba(248, 251, 241, 0.96);
  box-shadow:
    0 10px 22px rgba(70, 98, 44, 0.14),
    0 0 22px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.14),
    inset 0 0 0 1px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.14);
}

body.contrast-safeguard:is([data-page-kind="album"],[data-page-kind="albums"],[data-page-kind="season"],[data-page-kind="seasons"],[data-page-kind="arc"],[data-page-kind="arcs"],[data-page-kind="episode"],[data-page-kind="episodes"],[data-page-kind="character"],[data-page-kind="characters"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #D7EFB3);
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.58);
  background:
    linear-gradient(180deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.42), rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.24)),
    rgba(8, 14, 26, 0.94);
}

html.theme-light body.contrast-safeguard:is([data-page-kind="album"],[data-page-kind="albums"],[data-page-kind="season"],[data-page-kind="seasons"],[data-page-kind="arc"],[data-page-kind="arcs"],[data-page-kind="episode"],[data-page-kind="episodes"],[data-page-kind="character"],[data-page-kind="characters"],[data-page-kind="elsewhere"],[data-page-kind="videos"]) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #5A761F);
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.50);
  background:
    linear-gradient(180deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34), rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18)),
    rgba(248, 251, 241, 0.98);
}


/* ========================================================================== 
   v500: Restore original-style vote badge look
   - Keep the fully filled vote badges from the prior fix.
   - Shift vote badges and vote-count pills back to the softer original
     aqua/mint glass style the user approved.
   - Scope the change to vote badges/pills only.
   ========================================================================== */
:root{
  --vote-badge-original-dark-color:#d6f4ef;
  --vote-badge-original-dark-rgb:146, 224, 204;
  --vote-badge-original-light-color:#4f7b73;
  --vote-badge-original-light-rgb:132, 204, 188;
}

html:not(.theme-light) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--vote-badge-original-dark-color) !important;
  border-color: rgba(var(--vote-badge-original-dark-rgb), 0.44) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(var(--vote-badge-original-dark-rgb), 0.42), rgba(16, 26, 40, 0.88) 82%) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--vote-badge-original-dark-rgb), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}

html:not(.theme-light) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
) :is(*, .badge-icon, .cell-fx__icon){
  color: inherit !important;
}

html.theme-light main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--vote-badge-original-light-color) !important;
  border-color: rgba(var(--vote-badge-original-light-rgb), 0.48) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(242, 249, 247, 0.96)),
    linear-gradient(135deg, rgba(var(--vote-badge-original-light-rgb), 0.42), rgba(229, 242, 238, 0.92) 88%) !important;
  box-shadow:
    0 10px 22px rgba(63, 98, 91, 0.14),
    0 0 18px rgba(var(--vote-badge-original-light-rgb), 0.10),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--vote-badge-original-light-rgb), 0.20) !important;
}

html.theme-light main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
) :is(*, .badge-icon, .cell-fx__icon){
  color: inherit !important;
}


/* ========================================================================== 
   v501: Vote badge polish using the dynamic Title color palette
   - Keep vote badges tied to the selected Title color vote variables.
   - Match the more finished Audio badge treatment with stronger coordinated
     border, fill, highlight, and glow.
   - Scope the change to vote badges and vote-count pills only.
   ========================================================================== */
html:not(.theme-light) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #D7EFB3) !important;
  border-color: rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.44) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.34), rgba(14, 23, 39, 0.90) 62%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.10),
    0 4px 12px rgba(0,0,0,0.18),
    0 0 22px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.18) !important;
}

html:not(.theme-light) main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
) :is(*, .badge-icon, .badge-label, .badge-count, .cell-fx__icon){
  color: var(--list-pill-votes-color, #D7EFB3) !important;
}

html.theme-light main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
){
  color: var(--list-pill-votes-color, #5A761F) !important;
  border-color: rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248, 251, 241, 0.96)),
    linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.32), rgba(236, 244, 228, 0.92) 74%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.22),
    inset 0 0 0 1px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.08),
    0 4px 12px rgba(70, 98, 44, 0.11),
    0 0 18px rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.10) !important;
}

html.theme-light main#main :is(
  .public-list-page .row-meta .badge-votes,
  .public-list-page--albums .albums-table td:nth-child(4) .cell-fx,
  .public-list-page--seasons .seasons-table td:nth-child(4) .cell-fx,
  .public-list-page--characters .characters-table td:nth-child(5) .cell-fx,
  .public-list-page--episodes .episodes-table td:nth-child(5) .cell-fx,
  .public-list-page--elsewhere .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--videos .elsewhere-table td:nth-child(5) .cell-fx,
  .public-list-page--arcs .arcs-table td:nth-child(3) .cell-fx,
  .page-album-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-seasons-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx,
  .page-album-detail .row-meta--album-detail .badge-votes,
  .page-seasons-detail .row-meta--season-detail .badge-votes,
  .page-arcs-detail .row-meta--arc-detail .badge-votes
) :is(*, .badge-icon, .badge-label, .badge-count, .cell-fx__icon){
  color: var(--list-pill-votes-color, #5A761F) !important;
}

/* ========================================================================== 
   v502: Stats activity clarity refinements
   - Shows Activity overview new votes as count badges instead of a scaled bar.
   - Removes Trending activity progress-bar dependence from the public layout.
   - Replaces Category comparison chart presentation with an always-visible table.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trend-point {
  grid-template-rows: auto auto auto;
}

body[data-page-kind="stats"] .stats-trend-bars {
  gap: 5px;
  height: 144px;
}

body[data-page-kind="stats"] .stats-trend-vote-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}

body[data-page-kind="stats"] .stats-trend-vote-count span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lb-color-arcs, #fbbf24) 34%, rgba(255,255,255,0.13));
  background: color-mix(in srgb, var(--lb-color-arcs, #fbbf24) 18%, rgba(255,255,255,0.06));
  color: color-mix(in srgb, var(--lb-color-arcs, #fbbf24) 78%, white);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 18px color-mix(in srgb, var(--lb-color-arcs, #fbbf24) 22%, transparent);
}

body[data-page-kind="stats"] .stats-trend-vote-count--empty span {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  color: #7f8b9d;
  box-shadow: none;
}

body[data-page-kind="stats"] .stats-category-activity-row {
  grid-template-columns: minmax(160px, 1fr) minmax(170px, auto);
}

body[data-page-kind="stats"] .stats-activity-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(6,10,18,0.20), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-activity-table {
  width: 100%;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-page-kind="stats"] .stats-activity-table th,
body[data-page-kind="stats"] .stats-activity-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  text-align: center;
  vertical-align: middle;
}

body[data-page-kind="stats"] .stats-activity-table th:first-child,
body[data-page-kind="stats"] .stats-activity-table td:first-child {
  text-align: left;
}

body[data-page-kind="stats"] .stats-activity-table thead th {
  color: #aeb9ca;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-activity-table thead span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

body[data-page-kind="stats"] .stats-activity-table thead i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--lb-color, #60a5fa);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lb-color) 35%, transparent);
}

body[data-page-kind="stats"] .stats-activity-table tbody th {
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-activity-table td {
  color: #d7deea;
  font-size: 0.9rem;
  font-weight: 850;
}

body[data-page-kind="stats"] .stats-activity-table td.is-zero {
  color: #718095;
  font-weight: 750;
  opacity: 0.72;
}

body[data-page-kind="stats"] .stats-activity-table td.is-active {
  color: #f8fafc;
  font-weight: 950;
  background: rgba(255,255,255,0.055);
}

body[data-page-kind="stats"] .stats-activity-table .stats-activity-total {
  border-left: 1px solid rgba(255,255,255,0.09);
}

body[data-page-kind="stats"] .stats-activity-table tfoot th,
body[data-page-kind="stats"] .stats-activity-table tfoot td {
  border-bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
}

body[data-page-kind="stats"] .stats-activity-table tfoot th {
  color: #d9e2ef;
  font-size: 0.86rem;
  font-weight: 950;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-vote-count--empty span {
  border-color: rgba(30,41,59,0.10);
  background: rgba(255,255,255,0.56);
  color: #94a3b8;
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table-wrap {
  border-color: rgba(30,41,59,0.10);
  background:
    linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.72));
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table th,
html.theme-light body[data-page-kind="stats"] .stats-activity-table td {
  border-bottom-color: rgba(30,41,59,0.08);
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table thead th,
html.theme-light body[data-page-kind="stats"] .stats-activity-table td.is-zero {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table tbody th,
html.theme-light body[data-page-kind="stats"] .stats-activity-table td {
  color: #334155;
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table td.is-active {
  color: #0f172a;
  background: rgba(15,23,42,0.055);
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table .stats-activity-total,
html.theme-light body[data-page-kind="stats"] .stats-activity-table tfoot th,
html.theme-light body[data-page-kind="stats"] .stats-activity-table tfoot td {
  border-color: rgba(30,41,59,0.10);
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table tfoot th,
html.theme-light body[data-page-kind="stats"] .stats-activity-table tfoot td {
  background: rgba(15,23,42,0.035);
}

@media (max-width: 980px) {
  body[data-page-kind="stats"] .stats-category-activity-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trend-bars {
    height: 138px;
  }

  body[data-page-kind="stats"] .stats-trend-vote-count span {
    min-width: 22px;
    min-height: 21px;
    padding: 2px 7px;
    font-size: 0.7rem;
  }

  body[data-page-kind="stats"] .stats-activity-table-wrap {
    margin: 0 -2px;
  }
}


/* ========================================================================== 
   v503: Stats Activity overview grouped count chart
   - Replaces the floating vote bubbles with a normal third bar.
   - Uses one shared count scale for page views, visitors, and votes.
   - Adds visible axis labels and 7-day total chips for easier reading in Dark and Light mode.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trend-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px 0;
}

body[data-page-kind="stats"] .stats-trend-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.055);
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-trend-summary-pill strong {
  color: #f8fafc;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

body[data-page-kind="stats"] .stats-trend-chart--grouped {
  display: grid;
  grid-template-columns: minmax(30px, max-content) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-height: 260px;
  padding: 16px 14px 12px 12px;
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.22), rgba(255,255,255,0.025));
}

body[data-page-kind="stats"] .stats-trend-scale {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  align-items: start;
  padding: 0 0 24px 0;
  color: #9eaabc;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

body[data-page-kind="stats"] .stats-trend-scale span:last-child {
  align-self: end;
}

body[data-page-kind="stats"] .stats-trend-plot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 220px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 1px, transparent 1px) 0 0 / 100% 33.333%;
}

body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-point {
  min-width: 0;
  width: auto;
  height: auto;
  display: grid;
  grid-template-rows: minmax(178px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  height: 178px;
}

body[data-page-kind="stats"] .stats-trend-bar-wrap {
  position: relative;
  display: inline-flex;
  align-items: end;
  justify-content: center;
  width: 13px;
  height: 100%;
}

body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-bar {
  width: 9px;
  height: var(--bar-fill, 0%);
  min-height: 0;
  border-radius: 999px 999px 4px 4px;
  box-shadow: none;
}

body[data-page-kind="stats"] .stats-trend-bar-label {
  position: absolute;
  bottom: min(calc(var(--bar-fill, 0%) + 5px), calc(100% - 18px));
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15, 23, 42, 0.78);
  color: #edf4ff;
  font-size: 0.70rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-trend-bar-wrap--views .stats-trend-bar-label {
  color: color-mix(in srgb, var(--stats-trend-color-views, #60a5fa) 70%, #ffffff);
}

body[data-page-kind="stats"] .stats-trend-bar-wrap--visitors .stats-trend-bar-label {
  color: color-mix(in srgb, var(--stats-trend-color-visitors, #36cfc0) 72%, #ffffff);
}

body[data-page-kind="stats"] .stats-trend-bar-wrap--votes .stats-trend-bar-label {
  color: color-mix(in srgb, var(--stats-trend-color-votes, #fbbf24) 75%, #ffffff);
}

body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-date {
  color: #aeb9ca;
  font-size: 0.72rem;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-summary-pill {
  color: #334155;
  border-color: rgba(30, 41, 59, 0.12);
  background: rgba(255,255,255,0.78);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-summary-pill strong {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-chart--grouped {
  background:
    linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.72));
}

html.theme-light body[data-page-kind="stats"] .stats-trend-scale,
html.theme-light body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-date {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-plot {
  border-bottom-color: rgba(100, 116, 139, 0.24);
  background:
    linear-gradient(180deg, rgba(100, 116, 139, 0.15) 1px, transparent 1px) 0 0 / 100% 33.333%;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-bar-label {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.92);
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trend-summary-pill {
    flex: 1 1 150px;
    justify-content: center;
  }

  body[data-page-kind="stats"] .stats-trend-chart--grouped {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-plot {
    grid-auto-flow: column;
    grid-auto-columns: 64px;
    grid-template-columns: none;
    min-width: max-content;
    min-height: 216px;
  }

  body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-point {
    width: 64px;
  }

  body[data-page-kind="stats"] .stats-trend-chart--grouped .stats-trend-bars {
    height: 174px;
  }
}

/* ========================================================================== 
   v504: Stats Activity overview daily snapshots redesign
   - Splits the Activity overview into three readable daily chart rows.
   - Keeps page views, visitors, and votes on their own scales so small counts
     do not look like full bars.
   - Preserves the admin configured Activity overview colors.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trend-panel {
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 24px;
  border-color: rgba(96, 165, 250, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.13), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(54, 207, 192, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(13, 20, 33, 0.86), rgba(7, 11, 18, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 52px rgba(0,0,0,0.26);
}

body[data-page-kind="stats"] .stats-section-header--compact {
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 18px;
}

body[data-page-kind="stats"] .stats-section-header--compact h2 {
  margin-top: 10px;
  font-size: clamp(2rem, 5vw, 3.15rem);
  letter-spacing: -0.05em;
}

body[data-page-kind="stats"] .stats-section-header--compact p {
  max-width: 560px;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.35;
}

body[data-page-kind="stats"] .stats-trend-legend {
  max-width: 430px;
  padding-top: 4px;
}

body[data-page-kind="stats"] .stats-trend-legend span,
body[data-page-kind="stats"] .stats-trend-summary-pill {
  min-height: 38px;
  padding: 8px 13px;
  border-color: rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.16);
}

body[data-page-kind="stats"] .stats-trend-summary {
  gap: 10px;
  margin: 4px 0 18px 0;
}

body[data-page-kind="stats"] .stats-trend-summary-pill {
  gap: 9px;
  font-size: 0.95rem;
}

body[data-page-kind="stats"] .stats-trend-summary-pill strong {
  font-size: 1.22rem;
  line-height: 1;
}

body[data-page-kind="stats"] .stats-trend-key {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  box-shadow: 0 0 16px color-mix(in srgb, currentColor 38%, transparent);
}

body[data-page-kind="stats"] .stats-trend-key--views {
  color: var(--stats-trend-color-views, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-key--visitors {
  color: var(--stats-trend-color-visitors, #36cfc0);
}

body[data-page-kind="stats"] .stats-trend-key--votes {
  color: var(--stats-trend-color-votes, #fbbf24);
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot {
  display: block;
  min-height: 0;
  padding: 22px 14px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    linear-gradient(180deg, rgba(4, 8, 14, 0.24), rgba(255,255,255,0.015));
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body[data-page-kind="stats"] .stats-trend-row,
body[data-page-kind="stats"] .stats-trend-dates {
  display: grid;
  grid-template-columns: minmax(172px, 240px) minmax(36px, 42px) minmax(460px, 1fr);
  column-gap: 12px;
  min-width: 720px;
}

body[data-page-kind="stats"] .stats-trend-row {
  align-items: stretch;
  padding: 15px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

body[data-page-kind="stats"] .stats-trend-row:first-child {
  padding-top: 0;
}

body[data-page-kind="stats"] .stats-trend-row:last-of-type {
  padding-bottom: 10px;
  border-bottom: 0;
}

body[data-page-kind="stats"] .stats-trend-row-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 4px 0 0 2px;
}

body[data-page-kind="stats"] .stats-trend-row-label .stats-trend-key {
  width: 13px;
  height: 13px;
}

body[data-page-kind="stats"] .stats-trend-row-label strong,
body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key) {
  display: block;
}

body[data-page-kind="stats"] .stats-trend-row-label strong {
  color: #f7fbff;
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.015em;
}

body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key) {
  margin-top: 8px;
  color: #b4c0d2;
  font-size: 0.9rem;
  font-weight: 650;
}

body[data-page-kind="stats"] .stats-trend-row-scale {
  display: grid;
  grid-template-rows: auto 1fr auto 1fr auto;
  height: 82px;
  color: #b8c8de;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  text-align: right;
}

body[data-page-kind="stats"] .stats-trend-row-scale span:nth-child(1) {
  grid-row: 1;
}

body[data-page-kind="stats"] .stats-trend-row-scale span:nth-child(2) {
  grid-row: 3;
}

body[data-page-kind="stats"] .stats-trend-row-scale span:nth-child(3) {
  grid-row: 5;
}

body[data-page-kind="stats"] .stats-trend-row-plot,
body[data-page-kind="stats"] .stats-trend-dates-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 12px;
}

body[data-page-kind="stats"] .stats-trend-row-plot {
  position: relative;
  align-items: end;
  min-height: 82px;
  padding: 0 8px;
  border-left: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.24);
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

body[data-page-kind="stats"] .stats-trend-row-plot::before,
body[data-page-kind="stats"] .stats-trend-row-plot::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(176, 193, 213, 0.24) 0 5px, transparent 5px 10px);
}

body[data-page-kind="stats"] .stats-trend-row-plot::before {
  top: 0;
}

body[data-page-kind="stats"] .stats-trend-row-plot::after {
  top: 50%;
}

body[data-page-kind="stats"] .stats-trend-row-point {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 0;
  height: 82px;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: end;
  justify-content: center;
  width: clamp(24px, 3.2vw, 34px);
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(16px, 2vw, 24px);
  height: var(--bar-fill, 0%);
  min-height: 0;
  overflow: hidden;
  border-radius: 4px 4px 1px 1px;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 14px color-mix(in srgb, currentColor 20%, transparent);
  transform: translateZ(0);
  backface-visibility: hidden;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar--views {
  color: var(--stats-trend-color-views, #60a5fa);
  background: var(--stats-trend-color-views, #60a5fa);
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar--visitors {
  color: var(--stats-trend-color-visitors, #36cfc0);
  background: var(--stats-trend-color-visitors, #36cfc0);
  opacity: 1;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar--votes {
  color: var(--stats-trend-color-votes, #fbbf24);
  background: var(--stats-trend-color-votes, #fbbf24);
  opacity: 1;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-label {
  position: absolute;
  bottom: min(calc(var(--bar-fill, 0%) + 6px), calc(100% - 18px));
  left: 50%;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f8fc;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.72);
  white-space: nowrap;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-wrap[style="--bar-fill: 0%;"] .stats-trend-bar-label {
  color: #8d98aa;
  text-shadow: none;
}

body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-label {
  z-index: 3;
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trend-row-plot::before,
  body[data-page-kind="stats"] .stats-trend-row-plot::after {
    background: rgba(176, 193, 213, 0.22);
  }

  html.theme-light body[data-page-kind="stats"] .stats-trend-row-plot::before,
  html.theme-light body[data-page-kind="stats"] .stats-trend-row-plot::after {
    background: rgba(100, 116, 139, 0.22);
  }

  body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.26);
  }
}

body[data-page-kind="stats"] .stats-trend-dates {
  align-items: center;
  padding-top: 8px;
}

body[data-page-kind="stats"] .stats-trend-dates-list {
  padding: 0 8px;
}

body[data-page-kind="stats"] .stats-trend-dates-list span {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  color: #aeb9ca;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-panel {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.13), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244, 248, 253, 0.90));
  box-shadow: 0 18px 44px rgba(38, 74, 120, 0.12);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-legend span,
html.theme-light body[data-page-kind="stats"] .stats-trend-summary-pill {
  border-color: rgba(30, 41, 59, 0.13);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 8px 22px rgba(37, 58, 88, 0.08);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-chart--snapshot {
  border-color: rgba(30,41,59,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
}

html.theme-light body[data-page-kind="stats"] .stats-trend-row {
  border-bottom-color: rgba(30,41,59,0.09);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-row-label strong {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key),
html.theme-light body[data-page-kind="stats"] .stats-trend-row-scale,
html.theme-light body[data-page-kind="stats"] .stats-trend-dates-list span {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-trend-row-plot {
  border-left-color: rgba(30,41,59,0.20);
  border-bottom-color: rgba(30,41,59,0.26);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-row-plot::before,
html.theme-light body[data-page-kind="stats"] .stats-trend-row-plot::after {
  background: repeating-linear-gradient(90deg, rgba(100, 116, 139, 0.24) 0 5px, transparent 5px 10px);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-label {
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

html.theme-light body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-wrap[style="--bar-fill: 0%;"] .stats-trend-bar-label {
  color: #94a3b8;
  text-shadow: none;
}

@media (max-width: 980px) {
  body[data-page-kind="stats"] .stats-trend-legend {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-trend-chart--snapshot {
    margin: 0 -4px;
    padding: 18px 10px 14px;
  }

  body[data-page-kind="stats"] .stats-trend-row,
  body[data-page-kind="stats"] .stats-trend-dates {
    grid-template-columns: 150px 34px minmax(430px, 1fr);
    min-width: 640px;
    column-gap: 9px;
  }

  body[data-page-kind="stats"] .stats-trend-row-label strong {
    font-size: 0.92rem;
  }

  body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key) {
    font-size: 0.8rem;
  }

  body[data-page-kind="stats"] .stats-trend-row-scale,
  body[data-page-kind="stats"] .stats-trend-row-point,
  body[data-page-kind="stats"] .stats-trend-row-plot {
    height: 74px;
    min-height: 74px;
  }

  body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-label {
    font-size: 0.78rem;
  }

  body[data-page-kind="stats"] .stats-trend-dates-list span {
    font-size: 0.74rem;
  }
}

/* ========================================================================== 
   v505: Stats Category comparison daily snapshots table
   - Gives Category comparison the same polished dashboard-card treatment as
     Activity overview.
   - Keeps the data as a simple category-by-day count table for readability.
   ========================================================================== */
body[data-page-kind="stats"] .stats-category-comparison-panel {
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 24px;
  border-color: rgba(96, 165, 250, 0.20);
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(13, 20, 33, 0.84), rgba(7, 11, 18, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 52px rgba(0,0,0,0.24);
}

body[data-page-kind="stats"] .stats-category-comparison-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  margin: 10px 0 6px 0;
  color: #f7fbff;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.045em;
}

body[data-page-kind="stats"] .stats-category-comparison-header p {
  max-width: 560px;
  margin: 0;
  color: #b9c6d8;
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  line-height: 1.35;
}

body[data-page-kind="stats"] .stats-category-comparison-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  max-width: 560px;
  padding-top: 4px;
}

body[data-page-kind="stats"] .stats-category-comparison-summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--lb-color, #60a5fa) 24%, rgba(255,255,255,0.13));
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lb-color, #60a5fa) 13%, rgba(255,255,255,0.09)), rgba(255,255,255,0.045));
  color: #d8e2ef;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.16);
}

body[data-page-kind="stats"] .stats-category-comparison-summary i,
body[data-page-kind="stats"] .stats-category-snapshot-table tbody th i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--lb-color, #60a5fa);
  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color, #60a5fa) 42%, transparent);
}

body[data-page-kind="stats"] .stats-category-comparison-summary strong {
  color: #f8fafc;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1;
}

body[data-page-kind="stats"] .stats-activity-table-wrap--category-snapshot {
  padding: 10px;
  border-radius: 24px;
  border-color: rgba(255,255,255,0.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    linear-gradient(180deg, rgba(4, 8, 14, 0.24), rgba(255,255,255,0.015));
}

body[data-page-kind="stats"] .stats-category-snapshot-table {
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0 7px;
}

body[data-page-kind="stats"] .stats-category-snapshot-table th,
body[data-page-kind="stats"] .stats-category-snapshot-table td {
  border-bottom: 0;
}

body[data-page-kind="stats"] .stats-category-snapshot-table thead th {
  padding-top: 7px;
  padding-bottom: 9px;
  color: #aeb9ca;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody tr,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot tr {
  background: rgba(255,255,255,0.035);
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody tr {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-color, #60a5fa) 19%, rgba(255,255,255,0.08));
}

body[data-page-kind="stats"] .stats-category-snapshot-table tfoot tr {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.11);
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody th,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th {
  min-width: 160px;
  border-radius: 14px 0 0 14px;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody th span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #eef5ff;
  font-size: 0.94rem;
  font-weight: 950;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody td,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td {
  min-width: 66px;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-active {
  color: color-mix(in srgb, var(--lb-color, #60a5fa) 62%, white);
  background: color-mix(in srgb, var(--lb-color, #60a5fa) 15%, rgba(255,255,255,0.045));
  text-shadow: 0 1px 4px rgba(0,0,0,0.38);
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-zero,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-zero {
  color: #7f8b9d;
  opacity: 0.78;
}

body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total {
  border-left: 1px solid rgba(255,255,255,0.11);
  border-radius: 0 14px 14px 0;
  color: #f8fafc;
  font-weight: 950;
  background: rgba(255,255,255,0.06);
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody .stats-activity-total.is-active {
  background: color-mix(in srgb, var(--lb-color, #60a5fa) 22%, rgba(255,255,255,0.06));
}

body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td {
  color: #d9e2ef;
  background: rgba(255,255,255,0.055);
}

body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th {
  font-size: 0.9rem;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-active {
  color: #f8fafc;
  font-weight: 950;
}

html.theme-light body[data-page-kind="stats"] .stats-category-comparison-panel {
  border-color: rgba(37, 99, 235, 0.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244, 248, 253, 0.90));
  box-shadow: 0 18px 44px rgba(38, 74, 120, 0.12);
}

html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header p,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table thead th {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-category-comparison-summary span {
  border-color: color-mix(in srgb, var(--lb-color, #60a5fa) 22%, rgba(30,41,59,0.12));
  background: rgba(255,255,255,0.78);
  color: #334155;
  box-shadow: 0 8px 22px rgba(37, 58, 88, 0.08);
}

html.theme-light body[data-page-kind="stats"] .stats-category-comparison-summary strong,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody th span,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-active {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-activity-table-wrap--category-snapshot {
  border-color: rgba(30,41,59,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody tr,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot tr {
  background: rgba(255,255,255,0.78);
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody tr {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-color, #60a5fa) 18%, rgba(30,41,59,0.10));
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot tr {
  box-shadow: inset 0 0 0 1px rgba(30,41,59,0.10);
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-active {
  color: color-mix(in srgb, var(--lb-color, #60a5fa) 64%, #0f172a);
  background: color-mix(in srgb, var(--lb-color, #60a5fa) 13%, rgba(15,23,42,0.03));
  text-shadow: none;
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-zero,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-zero {
  color: #94a3b8;
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total {
  border-left-color: rgba(30,41,59,0.10);
  background: rgba(15,23,42,0.035);
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody .stats-activity-total.is-active {
  background: color-mix(in srgb, var(--lb-color, #60a5fa) 16%, rgba(15,23,42,0.04));
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td {
  background: rgba(15,23,42,0.035);
}

@media (max-width: 980px) {
  body[data-page-kind="stats"] .stats-category-comparison-header {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page-kind="stats"] .stats-category-comparison-summary {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-category-comparison-panel {
    padding: 16px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-category-comparison-summary span {
    flex: 1 1 145px;
    justify-content: center;
  }

  body[data-page-kind="stats"] .stats-activity-table-wrap--category-snapshot {
    margin: 0 -4px;
    padding: 8px;
    border-radius: 20px;
  }

  body[data-page-kind="stats"] .stats-category-snapshot-table {
    min-width: 720px;
  }

  body[data-page-kind="stats"] .stats-category-snapshot-table tbody th,
  body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th {
    min-width: 138px;
  }

  body[data-page-kind="stats"] .stats-category-snapshot-table tbody td,
  body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td {
    min-width: 58px;
    padding-left: 9px;
    padding-right: 9px;
  }
}

body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total.is-zero {
  color: #7f8b9d;
  font-weight: 800;
  background: rgba(255,255,255,0.035);
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total.is-zero {
  color: #94a3b8;
  background: rgba(15,23,42,0.025);
}


/* ========================================================================== 
   v506: Stats Category comparison total cells
   - Removes the pill-like rounded highlight from the Total column cells so the
     table reads as flat count boxes instead of rounded badges.
   ========================================================================== */
body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total {
  border-radius: 0;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody .stats-activity-total.is-active,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-active,
body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total.is-zero {
  border-radius: 0;
}


/* ========================================================================== 
   v507: Stats Trending activity clarity pass
   - Restyles Category activity as a clear count table/card hybrid.
   - Gives Top recent movers labeled columns, a visible rank, and separate
     latest-activity text without changing stats queries or vote logic.
   ========================================================================== */
body[data-page-kind="stats"] .stats-category-activity-list,
body[data-page-kind="stats"] .stats-trending-list {
  gap: 8px;
}

body[data-page-kind="stats"] .stats-category-activity-header,
body[data-page-kind="stats"] .stats-trending-list-header {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 13px 4px 13px;
  color: #8f9caf;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page-kind="stats"] .stats-category-activity-header {
  grid-template-columns: minmax(180px, 1.4fr) minmax(92px, 0.7fr) minmax(102px, 0.7fr) minmax(150px, 0.85fr);
}

body[data-page-kind="stats"] .stats-trending-list {
  counter-reset: stats-recent-movers;
}

body[data-page-kind="stats"] .stats-trending-list-header {
  grid-template-columns: minmax(260px, 1.55fr) minmax(92px, 0.55fr) minmax(132px, 0.75fr) minmax(118px, 0.62fr);
  padding-left: 48px;
}

body[data-page-kind="stats"] .stats-category-activity-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(92px, 0.7fr) minmax(102px, 0.7fr) minmax(150px, 0.85fr);
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-color) 8%, transparent);
}

body[data-page-kind="stats"] .stats-category-activity-row__label {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-category-activity-row__label strong::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--lb-color, #60a5fa);
  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color) 48%, transparent);
  vertical-align: 0.08em;
}

body[data-page-kind="stats"] .stats-category-activity-row__metric,
body[data-page-kind="stats"] .stats-category-activity-row__latest,
body[data-page-kind="stats"] .stats-trending-item__meta,
body[data-page-kind="stats"] .stats-trending-item__rating,
body[data-page-kind="stats"] .stats-trending-item__latest {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--lb-color) 18%, rgba(255,255,255,0.10));
  border-radius: 14px;
  background: color-mix(in srgb, var(--lb-color) 6%, rgba(255,255,255,0.035));
  text-align: right;
}

body[data-page-kind="stats"] .stats-category-activity-row__metric--month,
body[data-page-kind="stats"] .stats-trending-item__meta {
  border-color: color-mix(in srgb, var(--lb-color) 32%, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--lb-color) 12%, rgba(255,255,255,0.045));
}

body[data-page-kind="stats"] .stats-category-activity-row__metric strong,
body[data-page-kind="stats"] .stats-category-activity-row__latest strong,
body[data-page-kind="stats"] .stats-trending-item__meta strong,
body[data-page-kind="stats"] .stats-trending-item__rating strong,
body[data-page-kind="stats"] .stats-trending-item__latest strong {
  display: block;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.05;
}

body[data-page-kind="stats"] .stats-category-activity-row__metric span,
body[data-page-kind="stats"] .stats-category-activity-row__latest span,
body[data-page-kind="stats"] .stats-trending-item__latest span {
  display: block;
  color: #aab6c8;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.15;
}

body[data-page-kind="stats"] .stats-trending-item {
  position: relative;
  grid-template-columns: minmax(260px, 1.55fr) minmax(92px, 0.55fr) minmax(132px, 0.75fr) minmax(118px, 0.62fr);
  gap: 12px;
  padding: 13px 13px 13px 48px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-color) 8%, transparent);
  counter-increment: stats-recent-movers;
}

body[data-page-kind="stats"] .stats-trending-item::before {
  content: counter(stats-recent-movers);
  position: absolute;
  left: 13px;
  top: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--lb-color) 32%, rgba(255,255,255,0.16));
  border-radius: 999px;
  background: color-mix(in srgb, var(--lb-color) 13%, rgba(255,255,255,0.055));
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 950;
  transform: translateY(-50%);
}

body[data-page-kind="stats"] .stats-trending-item__main {
  min-width: 0;
}

body[data-page-kind="stats"] .stats-trending-item__meta,
body[data-page-kind="stats"] .stats-trending-item__rating,
body[data-page-kind="stats"] .stats-trending-item__latest {
  align-items: flex-end;
}

body[data-page-kind="stats"] .stats-trending-item__latest strong {
  font-size: 0.94rem;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-header,
html.theme-light body[data-page-kind="stats"] .stats-trending-list-header {
  color: #64748b;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row,
html.theme-light body[data-page-kind="stats"] .stats-trending-item {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-color) 12%, rgba(30,41,59,0.08));
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__latest,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__rating,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__latest {
  border-color: color-mix(in srgb, var(--lb-color) 18%, rgba(30,41,59,0.10));
  background: color-mix(in srgb, var(--lb-color) 6%, rgba(255,255,255,0.78));
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric--month,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta {
  border-color: color-mix(in srgb, var(--lb-color) 28%, rgba(30,41,59,0.12));
  background: color-mix(in srgb, var(--lb-color) 11%, rgba(255,255,255,0.82));
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric strong,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__latest strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__rating strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__latest strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item::before {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__latest span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__latest span {
  color: #64748b;
}

@media (max-width: 980px) {
  body[data-page-kind="stats"] .stats-category-activity-header,
  body[data-page-kind="stats"] .stats-trending-list-header {
    display: none;
  }

  body[data-page-kind="stats"] .stats-category-activity-row,
  body[data-page-kind="stats"] .stats-trending-item {
    grid-template-columns: 1fr;
  }

  body[data-page-kind="stats"] .stats-category-activity-row__metric,
  body[data-page-kind="stats"] .stats-category-activity-row__latest,
  body[data-page-kind="stats"] .stats-trending-item__meta,
  body[data-page-kind="stats"] .stats-trending-item__rating,
  body[data-page-kind="stats"] .stats-trending-item__latest {
    align-items: flex-start;
    text-align: left;
  }

  body[data-page-kind="stats"] .stats-trending-item {
    padding-left: 48px;
  }

  body[data-page-kind="stats"] .stats-trending-item::before {
    top: 15px;
    transform: none;
  }
}

@media (max-width: 720px) {
  body[data-page-kind="stats"] .stats-category-activity-row,
  body[data-page-kind="stats"] .stats-trending-item {
    border-radius: 16px;
  }

  body[data-page-kind="stats"] .stats-category-activity-row__metric,
  body[data-page-kind="stats"] .stats-category-activity-row__latest,
  body[data-page-kind="stats"] .stats-trending-item__meta,
  body[data-page-kind="stats"] .stats-trending-item__rating,
  body[data-page-kind="stats"] .stats-trending-item__latest {
    min-height: 0;
    padding: 8px 10px;
  }
}


/* ========================================================================== 
   v508: Stats readability and heading-size match
   - Strengthens non-zero Stats numbers and labels in Light and Dark mode.
   - Makes Activity overview and Category comparison headings match the
     Trending activity heading scale.
   - Keeps the change scoped to public Stats presentation only.
   ========================================================================== */
body[data-page-kind="stats"] .stats-section-header--compact h2,
body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  margin-top: 8px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

body[data-page-kind="stats"] .stats-section-header--compact p,
body[data-page-kind="stats"] .stats-category-comparison-header p,
body[data-page-kind="stats"] .stats-mini-card-header p,
body[data-page-kind="stats"] .stats-section-header p {
  color: #c7d2e2;
  font-weight: 650;
}

body[data-page-kind="stats"] .stats-category-activity-header,
body[data-page-kind="stats"] .stats-trending-list-header,
body[data-page-kind="stats"] .stats-category-snapshot-table thead th {
  color: #c5d0df;
  font-weight: 950;
}

body[data-page-kind="stats"] .stats-category-activity-row__label strong,
body[data-page-kind="stats"] .stats-trending-item__main a,
body[data-page-kind="stats"] .stats-trending-item__main strong,
body[data-page-kind="stats"] .stats-category-snapshot-table tbody th span,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th {
  color: #f8fafc;
  font-weight: 950;
}

body[data-page-kind="stats"] .stats-category-activity-row__label span,
body[data-page-kind="stats"] .stats-category-activity-row__metric span,
body[data-page-kind="stats"] .stats-category-activity-row__latest span,
body[data-page-kind="stats"] .stats-trending-item__main span,
body[data-page-kind="stats"] .stats-trending-item__meta span,
body[data-page-kind="stats"] .stats-trending-item__rating span,
body[data-page-kind="stats"] .stats-trending-item__latest span,
body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key),
body[data-page-kind="stats"] .stats-trend-row-scale,
body[data-page-kind="stats"] .stats-trend-dates-list span {
  color: #c4cfde;
  font-weight: 800;
}

body[data-page-kind="stats"] .stats-category-activity-row__metric strong,
body[data-page-kind="stats"] .stats-category-activity-row__latest strong,
body[data-page-kind="stats"] .stats-trending-item__meta strong,
body[data-page-kind="stats"] .stats-trending-item__rating strong,
body[data-page-kind="stats"] .stats-trending-item__latest strong,
body[data-page-kind="stats"] .stats-trend-summary-pill strong,
body[data-page-kind="stats"] .stats-category-comparison-summary strong {
  color: #ffffff;
  font-weight: 1000;
}

body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-active,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-active,
body[data-page-kind="stats"] .stats-category-snapshot-table tbody .stats-activity-total.is-active {
  color: #ffffff;
  font-weight: 1000;
  text-shadow: 0 1px 5px rgba(0,0,0,0.45);
}

body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total.is-zero,
body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-zero,
body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-zero,
body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-wrap[style="--bar-fill: 0%;"] .stats-trend-bar-label {
  color: #7f8b9d;
  opacity: 0.82;
}

html.theme-light body[data-page-kind="stats"] .stats-section-header--compact h2,
html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  color: #0f172a;
}

html.theme-light body[data-page-kind="stats"] .stats-section-header--compact p,
html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header p,
html.theme-light body[data-page-kind="stats"] .stats-mini-card-header p,
html.theme-light body[data-page-kind="stats"] .stats-section-header p {
  color: #334155;
  font-weight: 650;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-header,
html.theme-light body[data-page-kind="stats"] .stats-trending-list-header,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table thead th {
  color: #475569;
  font-weight: 950;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__label strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main a,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main strong,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody th span,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot th,
html.theme-light body[data-page-kind="stats"] .stats-trend-row-label strong,
html.theme-light body[data-page-kind="stats"] .stats-category-comparison-summary strong,
html.theme-light body[data-page-kind="stats"] .stats-trend-summary-pill strong {
  color: #0f172a;
  font-weight: 950;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__label span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric span,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__latest span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__main span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__rating span,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__latest span,
html.theme-light body[data-page-kind="stats"] .stats-trend-row-label span:not(.stats-trend-key),
html.theme-light body[data-page-kind="stats"] .stats-trend-row-scale,
html.theme-light body[data-page-kind="stats"] .stats-trend-dates-list span {
  color: #475569;
  font-weight: 800;
}

html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__metric strong,
html.theme-light body[data-page-kind="stats"] .stats-category-activity-row__latest strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__meta strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__rating strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item__latest strong,
html.theme-light body[data-page-kind="stats"] .stats-trending-item::before {
  color: #0f172a;
  font-weight: 1000;
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-active,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-active,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody .stats-activity-total.is-active {
  color: #0f172a;
  font-weight: 1000;
  text-shadow: none;
}

html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tbody td.is-zero,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table tfoot td.is-zero,
html.theme-light body[data-page-kind="stats"] .stats-category-snapshot-table .stats-activity-total.is-zero,
html.theme-light body[data-page-kind="stats"] .stats-trend-chart--snapshot .stats-trend-bar-wrap[style="--bar-fill: 0%;"] .stats-trend-bar-label {
  color: #94a3b8;
  opacity: 0.88;
}


/* ========================================================================== 
   v509: Stats heading weight normalization
   - Makes Activity overview, Trending activity, and Category comparison use
     the same heading weight so Category comparison no longer appears heavier.
   - Keeps the change scoped to public Stats headings only.
   ========================================================================== */
body[data-page-kind="stats"] .stats-section-header h2,
body[data-page-kind="stats"] .stats-section-header--compact h2,
body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  font-weight: 800;
}

html.theme-light body[data-page-kind="stats"] .stats-section-header h2,
html.theme-light body[data-page-kind="stats"] .stats-section-header--compact h2,
html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header h3 {
  font-weight: 800;
}


/* ========================================================================== 
   v511: Desktop-only Stats content width cap
   - Caps the public Stats content width on desktop so wide monitors do not
     stretch cards and charts too far horizontally.
   - Leaves mobile and tablet layout behavior unchanged.
   ========================================================================== */
@media (min-width: 981px) {
  body[data-page-kind="stats"] .stats-trends-page {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ========================================================================== 
   v512: Public Stats titles follow configured Title color
   - Applies the admin/user-selected Title color to Public Stats page headings
     and card title text only.
   - Leaves chart labels, table text, body copy, and stat numbers unchanged.
   ========================================================================== */
body[data-page-kind="stats"] .stats-trends-hero h1,
body[data-page-kind="stats"] .stats-section-header h2,
body[data-page-kind="stats"] .stats-section-header--compact h2,
body[data-page-kind="stats"] .stats-mini-card-header h3,
body[data-page-kind="stats"] .stats-category-comparison-header h3,
body[data-page-kind="stats"] .stats-summary-card__top > span:first-child,
body[data-page-kind="stats"] .lb-card-title-text {
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
}

body[data-page-kind="stats"] .stats-section-header h2,
body[data-page-kind="stats"] .stats-section-header--compact h2,
body[data-page-kind="stats"] .stats-mini-card-header h3,
body[data-page-kind="stats"] .stats-category-comparison-header h3,
body[data-page-kind="stats"] .stats-summary-card__top > span:first-child,
body[data-page-kind="stats"] .lb-card-title-text {
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.10 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="stats"] .stats-section-header h2,
html.theme-light body[data-page-kind="stats"] .stats-section-header--compact h2,
html.theme-light body[data-page-kind="stats"] .stats-mini-card-header h3,
html.theme-light body[data-page-kind="stats"] .stats-category-comparison-header h3,
html.theme-light body[data-page-kind="stats"] .stats-summary-card__top > span:first-child,
html.theme-light body[data-page-kind="stats"] .lb-card-title-text {
  text-shadow: none !important;
}

/* ========================================================================== 
   v513: Public Stats leaderboard item titles follow configured Title color
   - Applies the admin/user-selected Title color to leaderboard item titles.
   - Keeps leaderboard category pills, rank boxes, metadata, ratings, votes,
     chart labels, table text, and stat numbers unchanged.
   ========================================================================== */
body[data-page-kind="stats"] .stats-leaderboard-main a,
body[data-page-kind="stats"] .stats-leaderboard-main strong,
body[data-page-kind="stats"] .stats-leaderboard-main a:hover,
body[data-page-kind="stats"] .stats-leaderboard-main a:focus-visible {
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
}

body[data-page-kind="stats"] .stats-leaderboard-main a,
body[data-page-kind="stats"] .stats-leaderboard-main strong {
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.10 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main a,
html.theme-light body[data-page-kind="stats"] .stats-leaderboard-main strong {
  text-shadow: none !important;
}


/* ========================================================================== 
   v514: Public Stats item title color Pi fallback
   - Gives Stats item title links/strong text their own class and a legacy-safe
     fallback selector so Raspberry Pi deployments cannot leave them on the
     generic hyperlink blue while section titles use the configured title color.
   - Keeps category pills, rank boxes, metadata, rating pills, vote pills,
     chart labels, and table/count text unchanged.
   ========================================================================== */
body[data-page-kind="stats"] main#main .stats-trending-item-title,
body[data-page-kind="stats"] main#main .stats-trending-item-title:link,
body[data-page-kind="stats"] main#main .stats-trending-item-title:visited,
body[data-page-kind="stats"] main#main .stats-trending-item-title:hover,
body[data-page-kind="stats"] main#main .stats-trending-item-title:focus-visible,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:link,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:visited,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:hover,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:focus-visible,
body[data-page-kind="stats"] main#main .stats-trending-item__main > div > strong,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:link,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:visited,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:hover,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:focus-visible,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:link,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:visited,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:hover,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:focus-visible,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > strong,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:link,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:visited,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:hover,
body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:focus-visible {
  color: var(--title-text-color, #9AD0FF) !important;
}

html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title:link,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title:visited,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title:hover,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title:focus-visible,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:link,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:visited,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:hover,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > a:focus-visible,
html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item__main > div > strong,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:link,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:visited,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:hover,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:focus-visible,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:link,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:visited,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:hover,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > a:focus-visible,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-main > strong,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:link,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:visited,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:hover,
html.theme-light body[data-page-kind="stats"] main#main .lb-card .stats-leaderboard-table tbody td a:focus-visible {
  color: var(--title-text-color, #1D2430) !important;
}

/* ========================================================================== 
   v515: Public Stats item title color hard override
   - Bumps the stylesheet asset and repeats the Stats item-title override with
     both color and -webkit-text-fill-color so Pi/Linux browsers cannot keep
     leaderboard item titles on the generic link blue.
   - Keeps category pills, rank boxes, metadata, ratings, votes, charts, and
     tables unchanged.
   ========================================================================== */
body[data-page-kind="stats"] main#main .stats-trending-item-title,
body[data-page-kind="stats"] main#main .stats-trending-item-title:link,
body[data-page-kind="stats"] main#main .stats-trending-item-title:visited,
body[data-page-kind="stats"] main#main .stats-trending-item-title:hover,
body[data-page-kind="stats"] main#main .stats-trending-item-title:focus-visible,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:link,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:visited,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:hover,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title:focus-visible,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a:link,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a:visited,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a:hover,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a:focus-visible,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > strong {
  color: var(--title-text-color, #9AD0FF) !important;
  -webkit-text-fill-color: var(--title-text-color, #9AD0FF) !important;
  text-decoration-color: currentColor !important;
}

body[data-page-kind="stats"] main#main .stats-trending-item-title,
body[data-page-kind="stats"] main#main .stats-leaderboard-item-title,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > a,
body[data-page-kind="stats"] main#main .stats-leaderboard-main > strong {
  text-shadow: 0 0 12px rgba(var(--title-text-rgb, 154, 208, 255), calc(0.10 * var(--glow-primary-int, 1)));
}

html.theme-light body[data-page-kind="stats"] main#main .stats-trending-item-title,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-item-title,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-main > a,
html.theme-light body[data-page-kind="stats"] main#main .stats-leaderboard-main > strong {
  text-shadow: none !important;
}


/* ========================================================================== 
   v516: Firefox Android compact rating meter paint fix
   - Firefox Android can paint the small clipped rating fill with vertical
     striping when the color-mix gradient, glow shadow, rounded clipping, and
     narrow mobile bar width combine on low-percentage ratings.
   - Keep the normal blue meter look, but use a simpler fill paint path on
     Firefox touch/mobile so 30% style bars render as one smooth blue bar.
   ========================================================================== */
@supports (-moz-appearance: none) {
  @media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .rating-meter__bar,
    body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__bar {
      overflow: hidden;
      box-shadow: none;
    }

    .rating-meter__fill,
    body[data-page-kind="stats"] .stats-leaderboard-score .rating-meter__fill {
      background: linear-gradient(90deg, #91d8ff, #1d6fe3) !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }

    .rating-meter__mark {
      box-shadow: none;
    }
  }
}


/* Website JSON import preview-first instruction */
.admin-website-json-import-steps{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid rgba(143,185,255,.48);
  border-radius:12px;
  background:rgba(37,99,235,.13);
  color:#dbeafe;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}
.admin-website-json-import-steps strong{
  color:#ffffff;
}
html.theme-light .admin-website-json-import-steps{
  border-color:rgba(37,99,235,.38);
  background:rgba(37,99,235,.10);
  color:#1e3a8a;
}
html.theme-light .admin-website-json-import-steps strong{
  color:#172554;
}


/* Website JSON import preview readability */
.admin-edit-bulk-results--website-json .admin-edit-bulk-details--preview-items .admin-edit-bulk-list li{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow:hidden;
  line-height:1.35;
}
.admin-website-json-preview-line{
  display:block;
}
.admin-website-json-preview-line--main{
  padding:12px 14px;
  font-weight:800;
  color:#fff;
  background:rgba(255,255,255,0.06);
}
.admin-website-json-preview-line--field{
  display:grid;
  grid-template-columns:minmax(9rem, 12rem) minmax(0, 1fr);
  gap:8px 12px;
  align-items:start;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
}
.admin-website-json-preview-label{
  font-size:13px;
  font-weight:800;
  opacity:.82;
}
.admin-website-json-preview-value{
  min-width:0;
  overflow-wrap:anywhere;
}
html.theme-light .admin-website-json-preview-line--main{
  color:#0f172a;
  background:rgba(15,23,42,0.04);
}
html.theme-light .admin-website-json-preview-line--field{
  border-top-color:rgba(15,23,42,0.10);
  color:#1e293b;
}
@media (max-width: 640px){
  .admin-website-json-preview-line--field{
    grid-template-columns:1fr;
    gap:3px;
  }
}


/* v521: Edge anti-aliasing target expansion for public character images.
   The canvas resampler is controlled by Admin Config. These hints keep Edge's
   image interpolation neutral without changing hover transforms or layout. */
html.edge-browser body[data-page-kind="character"] img.thumb-character-page,
html.edge-browser body:is([data-page-kind="episode"],[data-page-kind="videos"]) img.episode-character-thumb,
html.edge-browser body[data-page-kind="characters"] img.thumb-character-list,
html.edge-browser .public-list-page--characters img.thumb-character-list {
  image-rendering: auto !important;
  image-rendering: smooth !important;
}

/* v522: Theme import preview episode assignments */
.admin-theme-import-preview-table{
  min-width:1080px;
}
.admin-theme-import-preview-episodes{
  min-width:320px;
  vertical-align:top;
}
.admin-theme-import-preview-episode-list{
  display:grid;
  gap:6px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.admin-theme-import-preview-episode{
  display:grid;
  grid-template-columns:minmax(3.5rem, auto) minmax(0, 1fr);
  gap:8px;
  align-items:start;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  line-height:1.35;
}
.admin-theme-import-preview-episode code{
  white-space:nowrap;
  font-weight:800;
}
.admin-theme-import-preview-episode span{
  min-width:0;
  overflow-wrap:anywhere;
}
html.theme-light .admin-theme-import-preview-episode{
  border-color:rgba(15,23,42,.10);
  background:rgba(15,23,42,.035);
}


/* ============================================================================
   v523: Themes list parity with Albums
   - Shared row-title color and size controls.
   - Album-style episode count badges in the Themes table.
   - Two-column table spacing after removing descriptions.
   ============================================================================ */
body[data-page-kind="themes"] .row-title,
body[data-page-kind="theme"] .row-title{
  font-size:var(--tab-row-title-font-size, 16px);
  color:var(--title-text-color);
}

.public-list-page--themes .themes-table .themes-episodes-column,
.public-list-page--themes .themes-table .themes-episodes-cell{
  width:1%;
  white-space:nowrap;
}

.public-list-page--themes .themes-table .themes-episodes-cell,
.public-list-page--themes .themes-table .themes-episodes-cell .cell-fx,
html body main#main .public-list-page--themes .themes-table .row-meta--themes{
  overflow:visible;
}

html body main#main .public-list-page--themes .themes-table .row-meta--themes{
  display:flex;
  align-items:center;
  margin-top:0;
}

.public-list-page--themes .themes-table .row-meta--themes .badge-episodes{
  color:var(--list-pill-episodes-color, #D6E7FF);
  border-color:rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.26), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light .public-list-page--themes .themes-table .row-meta--themes .badge-episodes{
  color:var(--list-pill-episodes-color, #2C5F9E);
  border-color:rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.30), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

.public-list-page--themes .themes-table .row-meta--themes .badge-episodes::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  flex:0 0 12px;
  background-color:currentColor;
  opacity:0.96;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center center;
  mask-position:center center;
  -webkit-mask-size:contain;
  mask-size:contain;
  align-self:center;
  vertical-align:middle;
  transform:translateY(0.5px);
}


/* Search page theme result linked episodes */
.global-search-result-link--theme{
  gap: 6px;
}
.search-theme-episodes{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.search-theme-episode{
  display: block;
  min-width: 0;
}
.search-theme-episode-title{
  display: block;
  min-width: 0;
  color: var(--title-text-color, #9ad0ff);
  font-weight: 800;
  line-height: 1.25;
}
.search-theme-episode-subtitle{
  margin-top: 3px;
}
.search-theme-more{
  display: block;
  margin-top: 0;
  color: var(--muted, #aeb7c8);
  font-size: 12px;
  line-height: 1.35;
}
.global-search-quick .search-theme-episodes{
  gap: 8px;
  margin-top: 6px;
}
.global-search-quick .search-theme-episode-title{
  line-height: 1.22;
}
.global-search-quick .search-theme-episode-subtitle{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.28;
}
.global-search-quick .search-theme-more{
  font-size: 11px;
}

/* ========================================================================== 
   v526: Arc episode badges and title-color parity
   - Keep Album and Season badges visible for Arc episode lists on desktop.
   - Reuse the same badge classes and configured palette as the Episodes tab.
   - Keep linked and unlinked episode titles tied to the shared Title color.
   ========================================================================== */
body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-title,
html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-title{
  color: var(--title-text-color) !important;
  -webkit-text-fill-color: var(--title-text-color) !important;
}

@media (min-width: 681px){
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-meta--arc-detail,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail{
    display: flex !important;
    margin-top: 8px;
    gap: 8px;
    row-gap: 7px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > :not(.badge-episode-album):not(.badge-episode-season),
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > :not(.badge-episode-album):not(.badge-episode-season){
    display: none !important;
  }
}

/* ========================================================================== 
   v526: Arc detail episode table Episodes-tab desktop parity
   - The Arc detail episode tables now use six columns like the Episodes tab:
     #, Title, Album/Season, Rating, Votes, and AIOWiki.
   - Override the older five-column Arc-detail nth-child styling so the new
     Album/Season column does not shift Votes/AIOWiki pill styles onto Rating.
   - Keep this scoped to Arc detail desktop/fine-pointer layouts only.
   ========================================================================== */
@media (min-width: 681px) and (pointer: fine){
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail{
    width:100%;
    table-layout:fixed;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(1),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(1){
    width:58px !important;
    max-width:58px;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2){
    min-width:0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) .cell-fx,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title-line,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-meta.row-meta--compact-badges-mobile{
    min-width:0;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title-line,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:180px !important;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .episode-album-season-badges,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .episode-album-season-badges .badge,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail .episode-album-season-badges .badge-text{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:126px !important;
    text-align:right;
    white-space:nowrap;
  }

  /* Cancel the older Arc-detail vote-pill styling that targeted column 4
     before the Album/Season column was added. */
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx{
    position:static !important;
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:inherit !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4) .cell-fx::before{
    content:none !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:84px !important;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .cell-fx{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:72px;
    max-width:100%;
    min-height:28px;
    margin:0 auto;
    padding:5px 7px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    color:var(--list-pill-votes-color, #D7EFB3);
    border:1px solid rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.26), rgba(14, 23, 39, 0.88) 58%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 24px rgba(var(--list-pill-votes-rgb, 170, 214, 115), 0.14);
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .cell-fx::before{
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5S14.34 11 16 11Zm-8 0c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11Zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.96 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5Z'/></svg>");
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(6),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6){
    width:100px !important;
    text-align:center;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6) .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    max-width:100%;
    min-height:28px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24), rgba(14, 23, 39, 0.90) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 0 26px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.14);
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6) .btn::before{
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6) .btn:hover,
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6) .btn:focus-visible{
    border-color:rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.50);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.30), rgba(14, 23, 39, 0.90) 62%);
    text-decoration:none;
  }

  html.theme-light body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5) .cell-fx{
    color:var(--list-pill-votes-color, #5A761F);
    border-color:rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 251, 241, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.28), rgba(236, 244, 228, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(70, 98, 44, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-votes-rgb, 148, 184, 92), 0.18);
  }

  html.theme-light body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6) .btn{
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 247, 254, 0.95)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.28), rgba(229, 238, 250, 0.90) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.18);
  }
}

@media (min-width: 1025px) and (max-width: 1220px) and (pointer: fine){
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3){
    width:150px !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    width:118px !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    max-width:104px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5){
    width:76px !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(6),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6){
    width:90px !important;
  }
}
/* ========================================================================== 
   v528: Arc detail current rating-meter parity
   - Keep the corrected Album and Season badge palette from v527.
   - Continue blocking the obsolete vote-pill styling from the Rating column.
   - Use the same newer rounded blue rating track and fill as the other tabs.
   ========================================================================== */
@media (min-width: 1025px){
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-album-season-badges{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-album-season-badges .badge-episodes{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: calc(var(--ui-control-height) - 12px) !important;
    padding: calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px) !important;
    border-radius: 999px !important;
    font-size: calc(var(--ui-pill-font-size) - 2px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: 1600px) and (pointer: fine){
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-album-season-badges .badge-episodes{
    min-height: 36px !important;
    padding: 6px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }
}

html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-album-season-badges, .row-meta--compact-badges-mobile) .badge.badge-episode-album{
  --aio-album-season-badge-color: var(--list-pill-albums-color, #A78BFA);
  --aio-album-season-badge-rgb: var(--list-pill-albums-rgb, 167, 139, 250);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--aio-album-season-badge-rgb), 0.18), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--aio-album-season-badge-rgb), 0.075),
    0 0 18px rgba(var(--aio-album-season-badge-rgb), calc(0.070 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-album-season-badges, .row-meta--compact-badges-mobile) .badge.badge-episode-season{
  --aio-album-season-badge-color: var(--list-pill-seasons-color, #34D399);
  --aio-album-season-badge-rgb: var(--list-pill-seasons-rgb, 52, 211, 153);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.030) 70%),
    radial-gradient(145% 170% at 50% -42%, rgba(var(--aio-album-season-badge-rgb), 0.18), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(13, 20, 33, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--aio-album-season-badge-rgb), 0.075),
    0 0 18px rgba(var(--aio-album-season-badge-rgb), calc(0.070 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.035) !important;
}

html.theme-light body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-album-season-badges, .row-meta--compact-badges-mobile) .badge.badge-episode-album{
  --aio-album-season-badge-color: var(--list-pill-albums-color, #6D28D9);
  --aio-album-season-badge-rgb: var(--list-pill-albums-rgb, 109, 40, 217);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.78) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--aio-album-season-badge-rgb), 0.12), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.84) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--aio-album-season-badge-rgb), calc(0.040 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--aio-album-season-badge-rgb), 0.060) !important;
  text-shadow: none !important;
}

html.theme-light body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-album-season-badges, .row-meta--compact-badges-mobile) .badge.badge-episode-season{
  --aio-album-season-badge-color: var(--list-pill-seasons-color, #047857);
  --aio-album-season-badge-rgb: var(--list-pill-seasons-rgb, 4, 120, 87);
  color: var(--aio-album-season-badge-color) !important;
  border-color: rgba(var(--aio-album-season-badge-rgb), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.78) 72%),
    radial-gradient(150% 170% at 50% -44%, rgba(var(--aio-album-season-badge-rgb), 0.12), rgba(var(--aio-album-season-badge-rgb), 0.00) 66%),
    rgba(247, 250, 255, 0.84) !important;
  box-shadow:
    0 10px 20px rgba(15,23,42,0.080),
    0 0 0 1px rgba(255,255,255,0.76),
    0 0 16px rgba(var(--aio-album-season-badge-rgb), calc(0.040 * var(--glow-primary-int, 1))),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(var(--aio-album-season-badge-rgb), 0.060) !important;
  text-shadow: none !important;
}

html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-album-season-badges, .row-meta--compact-badges-mobile) .badge:is(.badge-episode-album, .badge-episode-season) :is(.badge-text, .badge-count, .badge-label){
  color: var(--aio-album-season-badge-color) !important;
  -webkit-text-fill-color: var(--aio-album-season-badge-color) !important;
}

html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--compact-badges-mobile .badge:is(.badge-episode-album, .badge-episode-season)::before{
  color: var(--aio-album-season-badge-color) !important;
  background-color: currentColor !important;
}

@media (min-width: 681px){
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx{
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    white-space: normal !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx::before{
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    background: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter__text{
    color: #eaf3ff !important;
    -webkit-text-fill-color: #eaf3ff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.90), 0 0 10px rgba(0,0,0,0.55) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter__bar{
    height: 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.075) !important;
    box-shadow: none !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter__fill{
    border-radius: inherit !important;
    background: linear-gradient(90deg, color-mix(in srgb, #48b6ff 56%, white), #1d6fe3) !important;
    box-shadow: 0 0 18px color-mix(in srgb, #1d6fe3 24%, transparent) !important;
  }

  html.theme-light body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter__bar{
    background: rgba(100,116,139,0.14) !important;
  }

  html.theme-light body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter__text{
    color: var(--text, #1D2430) !important;
    -webkit-text-fill-color: var(--text, #1D2430) !important;
    text-shadow: none !important;
  }
}
/* ==========================================================================
   v529: Arc Album/Season alignment and Themes search cleanup
   - Center Arc detail Album/Season badges beneath their column heading.
   - The Themes list now relies entirely on automatic filtering and Reset.
   ========================================================================== */
@media (min-width: 1025px){
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-album-season-badges{
    justify-content: center !important;
  }
}


/* ==========================================================================
   v530: Themes list width and Episodes badge repair
   - Match the centered desktop width used by Theme detail episode lists.
   - Render each linked-episode count as a visible Episodes badge.
   ========================================================================== */
.public-list-page--themes{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.public-list-page--themes .card,
.public-list-page--themes .mobile-search{
  margin-bottom:0;
}

.public-list-page--themes .pager{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.public-list-page--themes .table-wrap{
  margin-top:0 !important;
}

@media (min-width: 1180px) and (pointer: fine){
  .public-list-page--themes{
    max-width:1320px;
    margin-right:auto;
    margin-left:auto;
  }
}

.public-list-page--themes .themes-table .themes-episodes-column,
.public-list-page--themes .themes-table .themes-episodes-cell{
  text-align:right;
}

html body main#main .public-list-page--themes .themes-table .themes-episodes-cell > .cell-fx{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:calc(var(--ui-control-height) - 12px);
  padding:calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
  border-radius:999px;
  font-size:calc(var(--ui-pill-font-size) - 2px);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  color:var(--list-pill-episodes-color, #D6E7FF);
  border-color:rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.26), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 28px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

html.theme-light body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  color:var(--list-pill-episodes-color, #2C5F9E);
  border-color:rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.30), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    0 10px 22px rgba(53, 96, 150, 0.14),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.18);
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  flex:0 0 12px;
  background-color:currentColor;
  opacity:0.96;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a5 5 0 0 1 10 0h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-6 9h1.5v5H7a1 1 0 0 1-1-1v-4Zm10.5 0H18v4a1 1 0 0 1-1 1h-.5v-5Z'/></svg>");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center center;
  mask-position:center center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

@media (max-width: 680px){
  html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge .badge-label{
    display:none;
  }
}


/* ==========================================================================
   v531: Themes Episodes badge parity with Arcs list
   - Reuse the compact badge treatment instead of the larger AIOWiki-like pill.
   - Keep the badge label visible on the Themes list at mobile widths.
   - Preserve Title color setting support for theme titles.
   ========================================================================== */
.public-list-page--themes .themes-table .row-title{
  color:var(--title-text-color);
}

html body main#main .public-list-page--themes .themes-table .themes-episodes-cell > .cell-fx{
  justify-content:flex-end;
}

html body main#main .public-list-page--themes .themes-table .themes-episodes-cell .row-meta--themes{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin-top:0;
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  flex:0 0 auto;
}

@media (max-width: 680px){
  html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge .badge-label{
    display:inline;
  }
}


/* ==========================================================================
   v532: Restore Themes Episodes badges and match the Arcs count badge
   - Keep the badge directly in the Episodes table cell so desktop visibility
     does not depend on responsive row metadata.
   - Show the compact icon + count format used by the Arcs tab.
   - Continue using the Title color option's Episodes palette variables.
   ========================================================================== */
html body main#main .public-list-page--themes .themes-table .themes-episodes-cell > .cell-fx{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:calc(var(--ui-control-height) - 12px);
  padding:calc(var(--ui-pill-padding-y) - 1px) calc(var(--ui-pill-padding-x) - 1px);
  border:1px solid rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.32);
  border-radius:999px;
  color:var(--list-pill-episodes-color, #D6E7FF);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.22), rgba(14, 23, 39, 0.88) 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 24px rgba(var(--list-pill-episodes-rgb, 101, 170, 255), 0.12);
  font-size:calc(var(--ui-pill-font-size) - 2px);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
}

html.theme-light body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  color:var(--list-pill-episodes-color, #2C5F9E);
  border-color:rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243, 248, 254, 0.95)),
    linear-gradient(135deg, rgba(var(--list-pill-episodes-rgb, 99, 153, 225), 0.28), rgba(232, 241, 252, 0.90) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 0 0 1px rgba(112,138,180,0.10),
    0 3px 9px rgba(54,82,122,0.10);
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge .badge-label{
  display:none !important;
}

html body main#main .public-list-page--themes .themes-table .row-title{
  color:var(--title-text-color);
}


/* ==========================================================================
   v533: Themes list medium-width Episodes column fit
   - Remove the oversized default table min-width for the simple two-column
     Themes list so the Episodes column no longer gets clipped at mid widths.
   - Keep the Episodes column on a compact fixed width and pull it closer to
     the Theme title instead of pinning it to the far right edge.
   ========================================================================== */
.public-list-page--themes .table-wrap table,
.public-list-page--themes .themes-table{
  min-width:0 !important;
  width:100%;
  table-layout:fixed;
}

.public-list-page--themes .themes-table .themes-episodes-column,
.public-list-page--themes .themes-table .themes-episodes-cell{
  width:132px;
  min-width:132px;
  max-width:132px;
  text-align:left;
}

html body main#main .public-list-page--themes .themes-table .themes-episodes-column .th-sort,
html body main#main .public-list-page--themes .themes-table .themes-episodes-column{
  text-align:left;
}

html body main#main .public-list-page--themes .themes-table .themes-episodes-cell > .cell-fx{
  justify-content:flex-start;
}

@media (max-width: 820px){
  .public-list-page--themes .themes-table .themes-episodes-column,
  .public-list-page--themes .themes-table .themes-episodes-cell{
    width:112px;
    min-width:112px;
    max-width:112px;
  }
}


/* ==========================================================================
   v534: Narrower centered Themes tables
   - Constrain only the results table on the Themes page and the linked
     Episodes table on Theme detail pages.
   - Keep search, summary, and pagination sections at their existing width.
   - Allow both table wrappers to return to full width on smaller screens.
   ========================================================================== */
.public-list-page--themes #themesResults > .table-wrap,
.public-list-page--theme-detail > .table-wrap{
  width:100%;
  max-width:1200px;
  margin-right:auto !important;
  margin-left:auto !important;
  box-sizing:border-box;
}

/* ==========================================================================
   v535: Pull Themes-page episode badges closer to titles
   - Narrow the Themes results table further so the Episodes badges feel more
     connected to the Theme titles on wide screens.
   - Tighten the Theme detail Episodes table as well for a matching compact
     presentation.
   - Keep search, summary, and pager sections at their existing width.
   ========================================================================== */
.public-list-page--themes .themes-table .themes-episodes-column,
.public-list-page--themes .themes-table .themes-episodes-cell{
  width:118px;
  min-width:118px;
  max-width:118px;
}

@media (max-width: 820px){
  .public-list-page--themes .themes-table .themes-episodes-column,
  .public-list-page--themes .themes-table .themes-episodes-cell{
    width:104px;
    min-width:104px;
    max-width:104px;
  }
}

.public-list-page--themes #themesResults > .table-wrap,
.public-list-page--theme-detail > .table-wrap{
  width:100%;
  margin-right:auto !important;
  margin-left:auto !important;
  box-sizing:border-box;
}

.public-list-page--themes #themesResults > .table-wrap{
  max-width:1000px;
}

.public-list-page--theme-detail > .table-wrap{
  max-width:1120px;
}

html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge{
  flex:0 0 auto;
}

@media (max-width: 680px){
  html body main#main .public-list-page--themes .themes-table .themes-episode-count-badge .badge-label{
    display:inline;
  }
}

/* ==========================================================================
   v536: Prevent Themes pager overlap with the results table
   - Add a little more breathing room below the top pager and above the table.
   - Keep the bottom pager spacing comfortable too.
   ========================================================================== */
.public-list-page--themes .pager.pager-top{
  margin-bottom:18px !important;
}

.public-list-page--themes .table-wrap{
  margin-top:6px !important;
}

.public-list-page--themes .pager:not(.pager-top){
  margin-top:14px !important;
}

/* ============================================================================
   v537: Theme import preview card redesign
   - Replaces the wide, clipped change table with responsive stacked cards.
   - Makes the summary metrics more compact.
   - Keeps long episode assignments inside independently scrollable panels.
   - Groups confirmation and the Apply action into a clear footer panel.
   ============================================================================ */
.admin-theme-import-summary-grid{
  grid-template-columns:repeat(auto-fit, minmax(135px, 1fr));
  gap:10px;
}
.admin-theme-import-summary-grid .admin-ops-stat-card{
  min-height:88px;
  padding:14px 16px;
}
.admin-theme-import-summary-grid .admin-ops-stat-card__label{
  font-size:12px;
  line-height:1.25;
}
.admin-theme-import-summary-grid .admin-ops-stat-card__value{
  margin-top:6px;
  font-size:26px;
  line-height:1;
}

.admin-theme-import-changes{
  margin-top:22px;
}
.admin-theme-import-changes > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:0 2px;
  cursor:pointer;
}
.admin-theme-import-changes__title{
  font-size:18px;
  font-weight:900;
  color:#fff;
}
.admin-theme-import-changes__count{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.admin-theme-import-change-list{
  display:grid;
  gap:14px;
  margin-top:10px;
}
.admin-theme-import-change-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.105);
  border-radius:16px;
  background:rgba(7,12,22,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}
.admin-theme-import-change-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.admin-theme-import-change-card__identity{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.admin-theme-import-change-status{
  flex:0 0 auto;
  margin-top:2px;
  text-transform:none;
}
.admin-theme-import-change-status--new{
  border-color:rgba(52,211,153,.42);
  background:rgba(16,185,129,.14);
  color:#a7f3d0;
}
.admin-theme-import-change-status--updated{
  border-color:rgba(96,165,250,.44);
  background:rgba(59,130,246,.15);
  color:#bfdbfe;
}
.admin-theme-import-change-status--renamed{
  border-color:rgba(192,132,252,.44);
  background:rgba(168,85,247,.14);
  color:#e9d5ff;
}
.admin-theme-import-change-status--unchanged{
  border-color:rgba(148,163,184,.30);
  background:rgba(148,163,184,.08);
  color:#cbd5e1;
}
.admin-theme-import-change-card__name-wrap{
  min-width:0;
}
.admin-theme-import-change-card__name-wrap h3{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.admin-theme-import-change-card__name-wrap code{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.66);
  font-size:12px;
  overflow-wrap:anywhere;
}
.admin-theme-import-change-card__badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
  max-width:52%;
}
.admin-theme-import-count-badge{
  border-color:rgba(148,163,184,.26);
  background:rgba(148,163,184,.08);
  color:#dbe5f2;
  white-space:nowrap;
}
.admin-theme-import-count-badge--added{
  border-color:rgba(52,211,153,.38);
  background:rgba(16,185,129,.12);
  color:#a7f3d0;
}
.admin-theme-import-count-badge--removed{
  border-color:rgba(248,113,113,.38);
  background:rgba(239,68,68,.12);
  color:#fecaca;
}
.admin-theme-import-change-card__body{
  display:grid;
  gap:14px;
  padding:16px 18px 18px;
}
.admin-theme-import-change-card__details{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  gap:10px 14px;
  align-items:start;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.admin-theme-import-change-card__details-label{
  color:rgba(255,255,255,.57);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.admin-theme-import-change-card__details p{
  margin:0;
  color:rgba(255,255,255,.91);
  line-height:1.45;
  overflow-wrap:anywhere;
}
.admin-theme-import-episodes-panel{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(2,6,14,.24);
}
.admin-theme-import-episodes-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:9px 13px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
.admin-theme-import-episodes-panel__header h4{
  margin:0;
  color:#fff;
  font-size:13px;
}
.admin-theme-import-episodes-panel__header span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  min-height:25px;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:900;
}
.admin-theme-import-change-card .admin-theme-import-preview-episode-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  max-height:294px;
  overflow:auto;
  padding:10px;
  scrollbar-gutter:stable;
}
.admin-theme-import-change-card .admin-theme-import-preview-episode{
  min-width:0;
  padding:8px 10px;
  background:rgba(255,255,255,.035);
}
.admin-theme-import-empty-episodes{
  padding:18px 14px;
  color:rgba(255,255,255,.58);
  font-size:13px;
}

.admin-theme-import-apply{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px 20px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(96,165,250,.31);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,255,255,.025));
}
.admin-theme-import-apply__copy h3{
  margin:0;
  color:#fff;
  font-size:16px;
}
.admin-theme-import-apply__copy p{
  margin:5px 0 0;
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.45;
}
.admin-theme-import-confirm{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:11px;
  align-items:start;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:rgba(2,6,14,.27);
  color:rgba(255,255,255,.91);
  line-height:1.45;
}
.admin-theme-import-confirm input{
  width:18px;
  height:18px;
  margin:2px 0 0;
}
.admin-theme-import-apply__actions{
  grid-column:2;
  grid-row:1;
}
.admin-theme-import-apply--disabled{
  grid-template-columns:1fr;
  border-color:rgba(248,113,113,.28);
  background:rgba(239,68,68,.075);
}

html.theme-light .admin-theme-import-changes__title,
html.theme-light .admin-theme-import-change-card__name-wrap h3,
html.theme-light .admin-theme-import-episodes-panel__header h4,
html.theme-light .admin-theme-import-apply__copy h3{
  color:#0f172a;
}
html.theme-light .admin-theme-import-changes__count,
html.theme-light .admin-theme-import-episodes-panel__header span{
  border-color:rgba(15,23,42,.12);
  background:rgba(15,23,42,.035);
  color:#475569;
}
html.theme-light .admin-theme-import-change-card{
  border-color:rgba(15,23,42,.11);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
html.theme-light .admin-theme-import-change-card__header{
  border-bottom-color:rgba(15,23,42,.09);
  background:linear-gradient(180deg, rgba(15,23,42,.035), rgba(15,23,42,.012));
}
html.theme-light .admin-theme-import-change-card__name-wrap code{
  color:#64748b;
}
html.theme-light .admin-theme-import-count-badge{
  border-color:rgba(15,23,42,.14);
  background:rgba(15,23,42,.04);
  color:#334155;
}
html.theme-light .admin-theme-import-change-card__details,
html.theme-light .admin-theme-import-episodes-panel,
html.theme-light .admin-theme-import-confirm{
  border-color:rgba(15,23,42,.10);
  background:rgba(15,23,42,.025);
}
html.theme-light .admin-theme-import-change-card__details-label,
html.theme-light .admin-theme-import-empty-episodes{
  color:#64748b;
}
html.theme-light .admin-theme-import-change-card__details p,
html.theme-light .admin-theme-import-confirm{
  color:#1e293b;
}
html.theme-light .admin-theme-import-episodes-panel__header{
  border-bottom-color:rgba(15,23,42,.09);
  background:rgba(15,23,42,.025);
}
html.theme-light .admin-theme-import-change-card .admin-theme-import-preview-episode{
  border-color:rgba(15,23,42,.10);
  background:rgba(15,23,42,.035);
}
html.theme-light .admin-theme-import-apply{
  border-color:rgba(37,99,235,.24);
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(15,23,42,.018));
}
html.theme-light .admin-theme-import-apply__copy p{
  color:#64748b;
}

@media (max-width: 780px){
  .admin-theme-import-change-card__header{
    flex-direction:column;
  }
  .admin-theme-import-change-card__badges{
    justify-content:flex-start;
    max-width:none;
  }
  .admin-theme-import-change-card .admin-theme-import-preview-episode-list{
    grid-template-columns:1fr;
  }
  .admin-theme-import-apply{
    grid-template-columns:1fr;
  }
  .admin-theme-import-apply__actions{
    grid-column:1;
    grid-row:auto;
  }
}
@media (max-width: 520px){
  .admin-theme-import-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .admin-theme-import-change-card__header,
  .admin-theme-import-change-card__body{
    padding-left:13px;
    padding-right:13px;
  }
  .admin-theme-import-change-card__identity{
    flex-direction:column;
    gap:8px;
  }
  .admin-theme-import-change-card__details{
    grid-template-columns:1fr;
    gap:4px;
  }
  .admin-theme-import-count-badge{
    white-space:normal;
  }
  .admin-theme-import-confirm{
    padding:12px;
  }
  .admin-theme-import-apply__actions .btn{
    width:100%;
  }
}

/* v537 follow-up: readable issue cards and an explicit disclosure marker. */
.admin-theme-import-changes > summary{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  justify-content:initial;
}
.admin-theme-import-changes > summary::-webkit-details-marker{
  display:none;
}
.admin-theme-import-changes > summary::before{
  content:"▸";
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1;
  transform:translateY(1px);
}
.admin-theme-import-changes[open] > summary::before{
  content:"▾";
}
.admin-theme-import-issues{
  margin-top:16px;
  overflow:hidden;
  border:1px solid rgba(251,191,36,.24);
  border-radius:13px;
  background:rgba(245,158,11,.055);
}
.admin-theme-import-issues__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:10px 14px;
  border-bottom:1px solid rgba(251,191,36,.18);
  background:rgba(245,158,11,.055);
}
.admin-theme-import-issues__header h3{
  margin:0;
  color:#fff;
  font-size:14px;
}
.admin-theme-import-issues__header > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  min-height:25px;
  padding:2px 8px;
  border:1px solid rgba(251,191,36,.26);
  border-radius:999px;
  color:#fde68a;
  font-size:12px;
  font-weight:900;
}
.admin-theme-import-issue-list{
  display:grid;
  gap:0;
}
.admin-theme-import-issue{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px;
  align-items:start;
  padding:13px 14px;
}
.admin-theme-import-issue + .admin-theme-import-issue{
  border-top:1px solid rgba(255,255,255,.075);
}
.admin-theme-import-issue__body{
  min-width:0;
}
.admin-theme-import-issue__context{
  display:flex;
  flex-wrap:wrap;
  gap:5px 14px;
  color:rgba(255,255,255,.65);
  font-size:12px;
}
.admin-theme-import-issue__context span{
  min-width:0;
  overflow-wrap:anywhere;
}
.admin-theme-import-issue__body p{
  margin:5px 0 0;
  color:rgba(255,255,255,.92);
  line-height:1.45;
  overflow-wrap:anywhere;
}
html.theme-light .admin-theme-import-changes > summary::before{
  color:#64748b;
}
html.theme-light .admin-theme-import-issues{
  border-color:rgba(217,119,6,.23);
  background:rgba(245,158,11,.055);
}
html.theme-light .admin-theme-import-issues__header{
  border-bottom-color:rgba(217,119,6,.17);
  background:rgba(245,158,11,.055);
}
html.theme-light .admin-theme-import-issues__header h3{
  color:#0f172a;
}
html.theme-light .admin-theme-import-issues__header > span{
  border-color:rgba(217,119,6,.25);
  color:#92400e;
}
html.theme-light .admin-theme-import-issue + .admin-theme-import-issue{
  border-top-color:rgba(15,23,42,.075);
}
html.theme-light .admin-theme-import-issue__context{
  color:#64748b;
}
html.theme-light .admin-theme-import-issue__body p{
  color:#1e293b;
}
@media (max-width: 520px){
  .admin-theme-import-issue{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* ============================================================================
   v538: Arc detail mobile episode metadata cleanup
   - Hide the redundant Album/Season table column on mobile and touch layouts.
   - Keep Rating as the visible right-side column.
   - Activate the Arc-detail Votes and AIOWiki pill treatment under each title.
   ============================================================================ */
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(3),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(5),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(6),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(6){
    display:none !important;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail th:nth-child(4),
  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4){
    display:table-cell !important;
    text-align:right;
    white-space:nowrap;
  }

  body[data-page-kind="arc"] .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    display:inline-flex;
    width:100%;
    max-width:112px;
  }

  body[data-page-kind="arc"] .page-arcs-detail .row-meta--arc-detail{
    justify-content:flex-start;
  }
}


/* ============================================================================
   v539: Arc detail mobile Rating wrapper cleanup
   - The fourth Arc-detail column is Rating after Album/Season was added.
   - Remove the obsolete Votes-pill decoration that still targeted column 4
     in mobile portrait and touch layouts.
   - Keep the existing Rating text, blue progress track, and right alignment.
   ============================================================================ */
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    color:inherit !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    outline:0 !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx::before{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    flex:0 0 0 !important;
    background:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    outline:0 !important;
  }
}


/* v540: Arc detail mobile/iPad compact badges parity
   - Restore Album/Season badges inside the compact Arc-detail metadata row.
   - Allow the compact metadata row to wrap so Album/Season, Votes, and AIOWiki fit on mobile and iPad touch layouts.
*/


/* ============================================================================
   v541: Arc detail touch-layout badge visibility parity
   - Preserve the correct phone-portrait compact metadata row on mobile
     landscape and iPad portrait/landscape layouts.
   - Override the obsolete v526 tablet rule that hid every compact badge except
     Album/Season above 680px.
   - Keep the duplicate episode-number and compact rating badges hidden because
     those values remain visible in their table columns.
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    align-content:flex-start !important;
    gap:6px !important;
    row-gap:7px !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-num,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-rating{
    display:none !important;
  }

  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-album,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-season,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-votes,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .btn-aiowiki,
  html body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-aiowiki{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* ============================================================================
   v542: Arc detail touch-capability layout repair
   - Detect touch-capable browsers independently of the primary pointer, so an
     iPad trackpad or attached mouse cannot switch the compact badges off.
   - Keep the touch layout at phone, tablet, and iPad landscape widths.
   - Hide the duplicate Album/Season, Votes, and AIOWiki table columns while
     showing those values in the compact metadata row below the title.
   ============================================================================ */
@media (max-width: 1500px) {
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail th:nth-child(3),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(3),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail th:nth-child(5),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(5),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail th:nth-child(6),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(6){
    display:none !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail th:nth-child(4),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4){
    display:table-cell !important;
    width:126px !important;
    text-align:right !important;
    white-space:nowrap !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    color:inherit !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    outline:0 !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) > .cell-fx::before{
    content:none !important;
    display:none !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(4) .rating-meter{
    display:inline-flex !important;
    width:100% !important;
    max-width:112px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    outline:0 !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    align-content:flex-start !important;
    gap:6px !important;
    row-gap:7px !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-num,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-rating{
    display:none !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-album,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-episode-season,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-votes,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .btn-aiowiki,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .row-meta--arc-detail > .badge-aiowiki{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}


/* ============================================================================
   v543: Episodes desktop badge cleanup + touch title alignment
   - Restore the intended desktop Episodes layout by hiding the under-title
     compact badge row when the dedicated desktop columns are visible.
   - Left-align the title block and compact metadata badges on touch layouts so
     phone portrait, phone landscape, and iPad rows anchor under the title
     instead of floating toward the center.
   - Apply the same touch alignment refinement to Arc detail episode rows.
   ============================================================================ */
@media (min-width: 1180px) and (pointer: fine) {
  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .row-meta.row-meta--compact-badges-mobile{
    display:none !important;
  }
}

@media (max-width: 1500px) {
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2),
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) > .cell-fx,
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-title-line,
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-title,
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-meta.row-meta--compact-badges-mobile,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) > .cell-fx,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title-line,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-meta.row-meta--arc-detail{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) > .cell-fx,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) > .cell-fx{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-title-line,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title-line{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    width:100% !important;
    min-width:0 !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-title,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-title{
    display:block !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table td:nth-child(2) .row-meta.row-meta--compact-badges-mobile,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail td:nth-child(2) .row-meta.row-meta--arc-detail{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    align-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    gap:6px !important;
    row-gap:7px !important;
  }
}


/* ============================================================================
   v544: semantic Episode/Arc responsive layout correction
   - Use explicit column and title-cell classes for the final responsive rules.
   - Hide the compact under-title metadata when full desktop columns are active,
     including Arc detail Episodes and Related Episodes.
   - On phone, landscape, and iPad layouts, move titles and badges left by
     reducing the number-column footprint and the title cell's left padding.
   ============================================================================ */

/* Standard narrow layout fallback, independent of pointer reporting. */
@media (max-width: 1179px) {
  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table :is(.episode-col-album-season, .episode-col-votes, .episode-col-aiowiki),
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-col-album-season, .episode-col-votes, .episode-col-aiowiki) {
    display:none !important;
  }

  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-rating,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-rating {
    display:table-cell !important;
  }

  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:flex !important;
  }

  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-number,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-number {
    width:48px !important;
    max-width:48px !important;
    padding-right:4px !important;
    padding-left:4px !important;
  }

  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-title,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-title {
    padding-left:2px !important;
    text-align:left !important;
  }
}

/* Touch-capable iPad/tablet layout, including trackpad and mouse use. */
@media (max-width: 1500px) {
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table :is(.episode-col-album-season, .episode-col-votes, .episode-col-aiowiki),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-col-album-season, .episode-col-votes, .episode-col-aiowiki) {
    display:none !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-rating,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-rating {
    display:table-cell !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:flex !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-number,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-number {
    width:48px !important;
    max-width:48px !important;
    padding-right:4px !important;
    padding-left:4px !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-title,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-title {
    padding-left:2px !important;
    text-align:left !important;
  }
}

@media (max-width: 1179px) {
  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack,
  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack > :is(.row-title-line, .episode-compact-meta),
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack > :is(.row-title-line, .episode-compact-meta) {
    width:100% !important;
    min-width:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}

@media (max-width: 1500px) {
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack,
  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack > :is(.row-title-line, .episode-compact-meta),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack > :is(.row-title-line, .episode-compact-meta) {
    width:100% !important;
    min-width:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack,
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta > :is(.badge-episode-num, .badge-episode-rating) {
    display:none !important;
  }

  html.aio-touch-input body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta > :is(.badge-episode-album, .badge-episode-season, .badge-votes, .badge-aiowiki),
  html.aio-touch-input body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta > :is(.badge-episode-album, .badge-episode-season, .badge-votes, .badge-aiowiki) {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* Desktop columns own these values.  v543 omitted Arc detail entirely. */
@media (min-width: 1180px) {
  html:not(.aio-touch-input) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta {
    display:none !important;
  }
}

@media (min-width: 681px) {
  html:not(.aio-touch-input) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:none !important;
  }
}

@media (min-width: 1501px) {
  body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta,
  body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:none !important;
  }
}


/* ============================================================================
   v545: Arc detail desktop badge-column restoration
   - Keep the dedicated Album/Season, Votes, and AIOWiki columns visible on
     non-touch desktop layouts, including reduced-width and zoomed desktops.
   - Keep the compact under-title metadata row hidden there so Album/Season is
     not duplicated.
   - Leave phone, tablet, iPad, and other touch-capable layouts on the compact
     metadata presentation established by v542-v544.
   ============================================================================ */
@media (min-width: 681px) {
  html:not(.aio-touch-input) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-col-album-season, .episode-col-votes, .episode-col-aiowiki) {
    display:table-cell !important;
  }

  html:not(.aio-touch-input) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-rating {
    display:table-cell !important;
  }

  html:not(.aio-touch-input) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:none !important;
  }
}


/* ============================================================================
   v546: Episodes half-window desktop column restoration
   - Keep the full #, Title, Album/Season, Rating, Votes, and AIOWiki columns
     on desktop-style half-window layouts from 1025px upward.
   - Restore the desktop number/title spacing that v544's narrow fallback
     overrode after the earlier half-window bridge.
   - Treat actual phones and tablets as compact layouts, while allowing a
     touch-capable Windows desktop to retain the desktop table presentation.
   - Apply the same desktop-device distinction to Arc detail tables so the
     prior badge-column restoration also works on touch-capable desktops.
   ============================================================================ */
@media (min-width: 1025px) {
  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table,
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table :is(.episode-col-album-season, .episode-col-rating, .episode-col-votes, .episode-col-aiowiki),
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail :is(.episode-col-album-season, .episode-col-rating, .episode-col-votes, .episode-col-aiowiki) {
    display:table-cell !important;
  }

  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-compact-meta,
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-compact-meta {
    display:none !important;
  }

  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-number,
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-number {
    width:58px !important;
    max-width:58px !important;
    padding:9px 8px !important;
    white-space:nowrap !important;
  }

  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-col-title,
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-col-title {
    padding:9px 8px !important;
    text-align:left !important;
  }

  html:not(.aio-mobile-touch-layout) body[data-page-kind="episodes"] main#main .public-list-page--episodes .episodes-table .episode-title-stack,
  html:not(.aio-mobile-touch-layout) body[data-page-kind="arc"] main#main .page-arcs-detail .episodes-table--detail .episode-title-stack {
    width:100% !important;
    min-width:0 !important;
    align-items:stretch !important;
  }
}


/* ============================================================================
   v547: iPad portrait Album/Season detail AIOWiki button parity
   - The iPad portrait detail layout keeps the dedicated AIOWiki column visible.
   - Give that Open button the same AIOWiki pill, external-link icon, palette,
     and light-theme treatment used by the current Episodes desktop table.
   - Scope the safeguard to actual mobile/tablet devices from 681px through
     1024px so desktop and phone layouts remain unchanged.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1024px) {
  html.aio-mobile-touch-layout body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open,
  html.aio-mobile-touch-layout body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open {
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    max-width:100%;
    min-height:28px;
    padding:5px 8px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    color:var(--list-pill-aiowiki-color, #EAF3FF);
    border:1px solid rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.44);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.32), rgba(14, 23, 39, 0.91) 62%);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.25),
      0 0 32px rgba(var(--list-pill-aiowiki-rgb, 93, 161, 255), 0.24),
      inset 0 1px 0 rgba(255,255,255,0.11),
      inset 0 0 0 1px rgba(255,255,255,0.035);
  }

  html.aio-mobile-touch-layout body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open::before,
  html.aio-mobile-touch-layout body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open::before {
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;
    display:inline-block;
    background-color:currentColor;
    opacity:0.96;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/></svg>");
  }

  html.theme-light.aio-mobile-touch-layout body[data-page-kind="album"] main#main .page-album-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open,
  html.theme-light.aio-mobile-touch-layout body[data-page-kind="season"] main#main .page-seasons-detail .episodes-table--detail td:nth-child(5) .btn-aiowiki.btn-open {
    color:var(--list-pill-aiowiki-color, #274A74);
    border-color:rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.40);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243, 247, 254, 0.96)),
      linear-gradient(135deg, rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.30), rgba(229, 238, 250, 0.92) 72%);
    box-shadow:
      0 10px 22px rgba(46, 87, 138, 0.14),
      0 0 20px rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.11),
      inset 0 1px 0 rgba(255,255,255,0.92),
      inset 0 -1px 0 rgba(var(--list-pill-aiowiki-rgb, 107, 156, 220), 0.20);
  }
}


/* ==========================================================================
   v548: Themes episode-count column spacing refinement
   - Narrow the centered Themes results table on desktop so episode counts sit
     closer to their related Theme titles.
   - Give the Episodes column a compact fixed width that pulls its left edge
     inward while keeping the heading aligned directly above every badge.
   - Preserve the existing full-width responsive table at smaller sizes.
   ========================================================================== */
.public-list-page--themes #themesResults > .table-wrap{
  max-width:900px;
}

@media (min-width:821px){
  .public-list-page--themes .themes-table .themes-episodes-column,
  .public-list-page--themes .themes-table .themes-episodes-cell{
    width:140px;
    min-width:140px;
    max-width:140px;
  }
}

/* ==========================================================================
   v549: Themes pager button separation
   - Increase horizontal spacing between pagination buttons so the current
     page outline does not crowd or overlap the neighboring controls.
   - Keep a compact responsive gap on phones while preserving clear separation.
   ========================================================================== */
.public-list-page--themes .pager{
  column-gap:16px !important;
  row-gap:12px !important;
}

.public-list-page--themes .pager .btn[aria-current="page"]{
  margin-inline:2px;
}

@media (max-width:680px){
  .public-list-page--themes .pager{
    column-gap:12px !important;
    row-gap:10px !important;
  }

  .public-list-page--themes .pager .btn[aria-current="page"]{
    margin-inline:1px;
  }
}

/* ==========================================================================
   v550: Themes top pager vertical clearance
   - Add space above the top pagination row so the selected page outline no
     longer overlaps the results summary card.
   - Preserve the existing table and bottom pager spacing.
   ========================================================================== */
.public-list-page--themes .pager.pager-top{
  margin-top:18px !important;
  margin-bottom:18px !important;
}

@media (max-width:680px){
  .public-list-page--themes .pager.pager-top{
    margin-top:14px !important;
  }
}


/* ==========================================================================
   v551: Sort landing parity and Themes header color parity
   - Sortable public lists now land at their results region so the top pager
     remains visible after a header sort, matching the Arcs tab behavior.
   - Keep Themes table header text on the same palette as every other list.
   ========================================================================== */
.themes-table thead th{
  color:#b8c0cc !important;
}

html.theme-dim .themes-table thead th{
  color:#c4cbd8 !important;
}

html.theme-light .themes-table thead th{
  color:#5b6777 !important;
}

.themes-table thead th.sortable .th-sort{
  color:inherit !important;
}


/* ============================================================================
   v552: Album and Season detail sticky episode headers
   - Enable the existing fixed sticky-header clone on desktop detail tables.
   - Use native sticky column headers on tablet/iPad layouts.
   - Keep phone layouts at 680px and below unchanged.
   ============================================================================ */
@media (min-width: 681px) and (max-width: 1024px),
       (hover: none) and (pointer: coarse) and (min-width: 681px) and (max-width: 1400px) {
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead {
    position: relative !important;
    top: auto !important;
    z-index: 9 !important;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-top, 0px) !important;
    z-index: 10090 !important;
    background: #11141b;
    background-clip: padding-box;
    box-shadow: 0 1px 0 #222;
  }

  html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th {
    background: #f6f8fc;
    box-shadow: 0 1px 0 rgba(30, 41, 59, 0.10);
  }

  html.theme-dim body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  html.theme-dim body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th {
    background: #171a21;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}


/* ============================================================================
   v553: Sortable header blue parity and portrait sticky detail headers
   - Keep every clickable sortable table heading blue in dark, dim, and light.
   - Re-enable native sticky Album/Season detail headings at phone portrait widths.
   - Preserve fixed-clone behavior on fine-pointer desktop layouts.
   ============================================================================ */
:root{
  --sortable-table-header-color:#9ad0ff;
}

html.theme-dark,
html.theme-dim{
  --sortable-table-header-color:#9ad0ff;
}

html.theme-light{
  --sortable-table-header-color:#1d6fe3;
}

.data-table thead th.sortable .th-sort{
  color:var(--sortable-table-header-color, #9ad0ff) !important;
}

@media (max-width:1024px),
       (hover:none) and (pointer:coarse) and (max-width:1400px){
  body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead{
    position:relative !important;
    top:auto !important;
    z-index:9 !important;
  }

  body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:var(--sticky-top, 0px) !important;
    z-index:10090 !important;
    background:#11141b;
    background-clip:padding-box;
    box-shadow:0 1px 0 #222;
  }

  html.theme-light body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  html.theme-light body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th{
    background:#f6f8fc;
    box-shadow:0 1px 0 rgba(30, 41, 59, 0.10);
  }

  html.theme-dim body[data-page-kind="album"] .page-album-detail .episodes-table--detail thead th,
  html.theme-dim body[data-page-kind="season"] .page-seasons-detail .episodes-table--detail thead th{
    background:#171a21;
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.06);
  }
}


/* ============================================================================
   v554: Fixed sticky-clone header surface parity
   - Fixed header clones are moved under <body>, outside their original detail
     page and table-wrapper ancestors. Give the clone its own explicit surface
     so its color cannot change when the original header is replaced on scroll.
   - Match the existing dark/dim and light desktop table-header surfaces.
   ============================================================================ */
.sticky-table-clone-wrap,
.sticky-table-clone-wrap .sticky-table-clone,
.sticky-table-clone-wrap .sticky-table-clone thead,
.sticky-table-clone-wrap .sticky-table-clone thead tr{
  background:#11141b !important;
}

.sticky-table-clone-wrap .sticky-table-clone thead th{
  background:#11141b !important;
  background-image:none !important;
  background-clip:padding-box !important;
  box-shadow:0 1px 0 #222 !important;
}

.sticky-table-clone-wrap .sticky-table-clone thead th:first-child{
  border-top-left-radius:15px;
}

.sticky-table-clone-wrap .sticky-table-clone thead th:last-child{
  border-top-right-radius:15px;
}

html.theme-light .sticky-table-clone-wrap,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead tr,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead th{
  background:rgba(246,249,253,0.90) !important;
  background-image:none !important;
}

html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead th{
  box-shadow:0 1px 0 rgba(30,41,59,0.14) !important;
}


/* ============================================================================
   v555: Sticky clone rendered-surface synchronization
   - The fixed clone now receives the source header's computed background,
     separator, borders, and corner radii from JavaScript.
   - Keep explicit CSS surfaces as a no-script/failure fallback.
   - Correct the dim fallback so it matches the native dim header.
   ============================================================================ */
html.theme-dim .sticky-table-clone-wrap,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead tr,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead th{
  background:#171a21 !important;
  background-image:none !important;
}

html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead th{
  box-shadow:0 1px 0 rgba(255,255,255,0.06) !important;
}


/* ============================================================================
   v556: Desktop sticky-clone single-layer surface parity
   - Paint the source table wrapper backdrop once on the fixed clone wrapper.
   - Keep cloned table/theader/row layers transparent so translucent light-mode
     header cells are not composited repeatedly and no longer change shade.
   - JavaScript still copies each source cell's exact rendered header styles.
   ============================================================================ */
.sticky-table-clone-wrap{
  background:#11141b !important;
}

.sticky-table-clone-wrap .sticky-table-clone,
.sticky-table-clone-wrap .sticky-table-clone thead,
.sticky-table-clone-wrap .sticky-table-clone thead tr,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead,
html.theme-light .sticky-table-clone-wrap .sticky-table-clone thead tr,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead,
html.theme-dim .sticky-table-clone-wrap .sticky-table-clone thead tr{
  background-color:transparent !important;
  background-image:none !important;
}

.sticky-table-clone-wrap .sticky-table-clone-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:none;
  pointer-events:none !important;
}

.sticky-table-clone-wrap .sticky-table-clone{
  position:relative !important;
  z-index:1 !important;
}

html.theme-light .sticky-table-clone-wrap{
  background-color:rgba(243,247,251,0.90) !important;
  background-image:none !important;
}

html.theme-dim .sticky-table-clone-wrap{
  background-color:#171a21 !important;
  background-image:none !important;
}

/* v557: Structured theme picker and Admin theme management */
.admin-theme-picker__controls{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.admin-theme-picker__controls input{
  min-width:0;
  flex:1 1 260px;
}
.admin-theme-picker__selected{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:42px;
  margin-top:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.admin-theme-picker__badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:6px 7px 6px 11px;
  border:1px solid rgba(87,166,255,.46);
  border-radius:999px;
  background:rgba(45,126,222,.14);
  line-height:1.2;
}
.admin-theme-picker__badge > span{
  overflow:hidden;
  text-overflow:ellipsis;
}
.admin-theme-picker__badge small{
  padding:2px 6px;
  border-radius:999px;
  background:rgba(77,196,126,.18);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.admin-theme-picker__badge button{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:inherit;
  font:inherit;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.admin-theme-picker__badge button:hover,
.admin-theme-picker__badge button:focus-visible{
  background:rgba(255,255,255,.18);
}
.admin-theme-picker__empty{
  align-self:center;
}
.admin-theme-manager{
  margin-top:20px;
}
.admin-theme-manager__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
}
.admin-theme-manager__search{
  display:grid;
  gap:6px;
  min-width:min(320px,100%);
  font-weight:700;
}
.admin-theme-create-form{
  display:grid;
  grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr) auto;
  align-items:end;
  gap:12px;
  margin:16px 0 20px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.admin-theme-create-form__field{
  display:grid;
  gap:6px;
}
.admin-theme-create-form__field label{
  font-weight:700;
}
.admin-theme-linked-episodes{
  margin:0 0 20px;
  padding:16px;
  border:1px solid rgba(87,166,255,.42);
  border-radius:14px;
  background:rgba(45,126,222,.09);
}
.admin-theme-linked-episodes__head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.admin-theme-linked-episodes__head h3,
.admin-theme-linked-episodes__head p{
  margin:0;
}
.admin-theme-linked-episodes__head p{
  margin-top:4px;
  color:var(--muted);
}
.admin-theme-linked-episodes__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px;
}
.admin-theme-linked-episodes__list a{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.1);
  text-decoration:none;
}
.admin-theme-linked-episodes__list a span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-theme-manager__table-wrap{
  overflow:visible;
}
.admin-theme-manager__table th:nth-child(1){width:34%;}
.admin-theme-manager__table th:nth-child(2){width:105px;}
.admin-theme-manager__table th:nth-child(3){width:120px;}
.admin-theme-manager__identity{
  display:grid;
  gap:4px;
}
.admin-theme-manager__identity code{
  width:max-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.admin-theme-manager__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.admin-theme-manager__actions form{
  margin:0;
}
.admin-theme-manager__edit{
  position:relative;
}
.admin-theme-manager__edit > summary{
  list-style:none;
  cursor:pointer;
}
.admin-theme-manager__edit > summary::-webkit-details-marker{
  display:none;
}
.admin-theme-manager__edit-panel{
  position:absolute;
  z-index:30;
  right:0;
  top:calc(100% + 8px);
  width:min(420px,calc(100vw - 40px));
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel, #171a21);
  box-shadow:0 18px 44px rgba(0,0,0,.32);
}
.admin-theme-manager__update-form,
.admin-theme-manager__merge-form{
  display:grid;
  gap:10px;
}
.admin-theme-manager__update-form label,
.admin-theme-manager__merge-form label{
  display:grid;
  gap:5px;
  font-weight:700;
}
.admin-theme-manager__merge-form{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.admin-theme-manager__empty{
  padding:18px 0 4px;
  text-align:center;
}
html.theme-light .admin-theme-picker__selected,
html.theme-light .admin-theme-create-form{
  background:rgba(20,57,96,.025);
}
html.theme-light .admin-theme-picker__badge{
  background:rgba(45,126,222,.1);
}
html.theme-light .admin-theme-picker__badge button{
  background:rgba(20,57,96,.08);
}
html.theme-light .admin-theme-manager__edit-panel{
  background:#fff;
  box-shadow:0 18px 44px rgba(20,57,96,.2);
}
html.theme-light .admin-theme-linked-episodes__list a{
  background:rgba(255,255,255,.72);
}
@media (max-width:900px){
  .admin-theme-manager__head{
    align-items:stretch;
    flex-direction:column;
  }
  .admin-theme-manager__search{
    width:100%;
  }
  .admin-theme-create-form{
    grid-template-columns:1fr;
  }
  .admin-theme-manager__table-wrap{
    overflow:auto;
  }
  .admin-theme-manager__table{
    min-width:760px;
  }
}
@media (max-width:600px){
  .admin-theme-picker__controls{
    flex-direction:column;
  }
  .admin-theme-picker__controls .btn{
    width:100%;
  }
  .admin-theme-linked-episodes__head{
    flex-direction:column;
  }
}

/* Mobile public search toggles: hide the active-filter count. */
@media (max-width: 760px) {
  html.js .mobile-search-toggle__meta {
    display: none !important;
  }
}


/* v559: Compact episode Theme picker */
.admin-theme-picker [data-theme-picker-fallback][hidden],
.admin-theme-picker [data-theme-picker-enhanced][hidden]{
  display:none !important;
}
.admin-theme-picker__enhanced{
  display:grid;
  gap:8px;
}
.admin-theme-picker__selected{
  align-items:center;
  min-height:0;
  margin-top:2px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  gap:6px;
}
.admin-theme-picker__badge{
  gap:5px;
  min-height:30px;
  padding:3px 4px 3px 9px;
  font-size:calc(13px * var(--ui-font-scale));
  line-height:1.15;
}
.admin-theme-picker__badge > span{
  white-space:nowrap;
}
.admin-theme-picker__badge small{
  padding:1px 5px;
  font-size:.66rem;
}
.admin-theme-picker__badge button{
  flex:0 0 22px;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  font-size:1rem;
}
.admin-theme-picker__empty{
  padding:3px 0;
  font-size:calc(13px * var(--ui-font-scale));
}
html.theme-light .admin-theme-picker__selected{
  background:transparent;
}