/* No external font imports: the binary is meant to be a self-contained
   desktop tool, so we leak no DNS to fonts.googleapis.com and don't block
   render on a remote stylesheet. Exo 2 references below fall back through
   system-ui to whichever font is installed (Inter on Win, system on macOS). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #0f1118;
  --bg2:           #161925;
  --surface:       rgba(255, 255, 255, 0.04);
  --surface2:      rgba(255, 255, 255, 0.08);
  --surface-solid: #1c1f2e;
  --border:        rgba(133, 0, 247, 0.18);
  --border-hi:     rgba(133, 0, 247, 0.55);
  --accent:        #8500f7;
  --accent-hover:  #a020ff;
  --accent-glow:   rgba(133, 0, 247, 0.45);
  --orange:        #f67400;
  --orange-glow:   rgba(246, 116, 0, 0.4);
  --text:          #f0f0ff;
  --muted:         #6868a0;
  --danger:        #da4453;
  --warn-bg:       rgba(246, 116, 0, 0.08);
  --warn-border:   rgba(246, 116, 0, 0.45);
  --radius:        12px;
}

/* ── Base ── */
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(133,0,247,0.12) 0%, transparent 70%);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Header ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
}

header {
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(22, 25, 37, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-hi);
}

header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #a855f7, #f67400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.header-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

.subtitle {
  color: var(--muted);
  font-size: 0.875rem;
}

.back-btn {
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  border: 1px solid var(--border-hi);
  padding: 5px 14px;
  border-radius: 20px;
  transition: color 0.2s, border-color 0.2s;
}
.back-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Layout ── */
main { padding: 32px 40px 0; position: relative; z-index: 1; }
section { margin-bottom: 36px; }

h2 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

.count { color: var(--accent); font-weight: 600; font-size: 0.85rem; }

/* ── Search ── */
.search-wrapper { position: relative; max-width: 440px; }

#actor-search,
#prod-search {
  width: 100%;
  padding: 11px 16px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#actor-search::placeholder,
#prod-search::placeholder { color: var(--muted); }
#actor-search:focus,
#prod-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow);
}

/* ── Dropdown ── */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(22, 25, 37, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  list-style: none;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(133,0,247,0.1);
}

.dropdown li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(133,0,247,0.08);
  transition: background 0.12s;
}
.dropdown li:last-child { border-bottom: none; }
.dropdown li:hover { background: rgba(133,0,247,0.12); }

.dropdown li img {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.drop-info { display: flex; flex-direction: column; gap: 2px; }
.drop-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.drop-meta  { font-size: 0.73rem; color: var(--muted); }

/* ── Actor grid ── */
.actor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 14px;
}

.actor-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
}
.actor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(133,0,247,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(133,0,247,0.15);
}
.actor-card.selected {
  /* The ring is drawn by ::after / body:not(.simple) variant; keep the
     base border unchanged so the inner content never shifts. */
  border-color: var(--accent);
}

/* .card-label inherits the card's rounded corners and provides the visual
   clipping window, so .actor-card itself can lose overflow:hidden when
   selected (needed for the outside gradient ring on selected). */
.card-label {
  border-radius: inherit;
  overflow: hidden;
}

.card-label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  height: 100%;
}

.card-label input[type=checkbox] {
  /* Visually hidden; selection state is driven by clicking the card body
     and shown via the .selected class. The input still exists so the form
     submits the checked IDs. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.card-label img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}

.card-label .title {
  padding: 7px 9px;
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 16px;
  color: var(--text);
  display: block;
  overflow: hidden;
  /* Fixed 2-line tall box: 2 × 16px line-height + 14px vertical padding = 46px.
     Titles are pre-truncated server-side; this just keeps every card's title
     strip the same height so short titles get matching whitespace. */
  height: 46px;
  box-sizing: border-box;
  background: rgba(15,17,24,0.7);
}

/* Bulk Delete button in the header; same look as the subtitle text. */
.delete-selected-btn {
  margin-left: auto;
  margin-right: -8px;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  flex-shrink: 0;
}
.delete-selected-btn:hover { color: var(--text); }
.delete-selected-btn[hidden] { display: none; }
/* When Delete is present, it owns right-alignment so the theme toggle just
   sits next to it instead of grabbing its own auto-margin. */
header:has(.delete-selected-btn) .theme-toggle { margin-left: 0; }


/* ── Group headings (split view in productions) ── */
.group-heading {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.group-heading:first-of-type { margin-top: 8px; }
.group-count { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.chip-arrow { opacity: 0.75; font-size: 0.85em; margin-left: 2px; }

/* ── Sort chips ── */
.sort-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sort-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 4px;
}
/* Replaces the inline style="margin-left:18px" that used to separate the
   Group label from the Sort chips. Keeps presentation in the stylesheet. */
.sort-label.group-label { margin-left: 18px; }
.sort-chip {
  /* Reset UA button styling; these were anchors originally and inherited
     transparent backgrounds; <button> ships with a white background + native
     font that we need to clobber. */
  font: inherit;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sort-chip:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, 0.03);
}
.sort-chip.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(133,0,247,0.18);
}

/* ── Drag-and-drop reorder ── */
.actor-grid[data-sort="manual"] .actor-card { cursor: grab; }
.actor-grid[data-sort="manual"] .actor-card:active { cursor: grabbing; }
.actor-card.drag-hidden { display: none; }

.actor-card-placeholder {
  border: 2px dashed rgba(133, 0, 247, 0.45);
  border-radius: var(--radius);
  background: rgba(133, 0, 247, 0.06);
}

.drag-ghost {
  position: fixed;
  top: -9999px;
  left: -9999px;
  pointer-events: none;
  background: var(--surface-solid);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 24px var(--accent-glow);
  overflow: hidden;
}

/* ── Status badges ── */
.fetch-badge {
  position: absolute;
  bottom: 30px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.fetch-badge.pending {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  right: auto;
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.55);
  font-size: 0;          /* hide ⏳ emoji */
  color: transparent;
  pointer-events: auto;
  box-shadow: 0 0 14px rgba(0,0,0,0.4);
}
.fetch-badge.pending::after {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fetch-badge.failed {
  background: var(--danger);
  color: #fff;
  cursor: help;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(218,68,83,0.5);
}

/* ── Compare bar ──
   Fixed to the bottom-left so it floats above content while scrolling. The
   grid below gets bottom padding so the last row doesn't sit under the
   button when scrolled all the way down. */
.compare-bar {
  position: fixed;
  left: 20px;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
}
main { padding-bottom: 100px; }

#compare-btn,
.action-btn {
  padding: 9px 26px;
  background: linear-gradient(135deg, #9520ff 0%, #7a10e0 55%, #f67400 130%);
  /* Clip the gradient to the padding box so it doesn't bleed under the
     translucent border and leave a warm seam on the cooler (left) edge. */
  background-clip: padding-box;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: box-shadow 0.2s, opacity 0.15s, transform 0.1s;
  /* Gentle drop shadow toward the bottom-left, matches VI. */
  box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.45);
}
#compare-btn:hover:not(:disabled),
.action-btn:hover {
  box-shadow: -5px 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px var(--accent-glow);
  transform: translateY(-1px);
}
#compare-btn:active:not(:disabled),
.action-btn:active { transform: translateY(0); }
#compare-btn:disabled {
  background: #2a2540;
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.08);
  cursor: default;
  box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.4);
}

/* ── Notices ── */
.notice {
  padding: 13px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.notice.warning {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: #f67400;
}
.notice.error {
  background: rgba(218,68,83,0.08);
  border-color: rgba(218,68,83,0.4);
  color: #da4453;
}

.empty { color: var(--muted); font-size: 0.9rem; }

/* ── Compare page ── */
.compare-header { margin-bottom: 32px; }

.compared-actors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.compared-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 90px;
  font-size: 0.73rem;
  text-align: center;
  color: var(--muted);
}
.compared-card img {
  width: 90px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-hi);
  box-shadow: 0 0 12px rgba(133,0,247,0.2);
}

/* ── Production results grid ── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.prod-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prod-card:hover {
  border-color: rgba(133,0,247,0.4);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 16px rgba(133,0,247,0.12);
}

.prod-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.prod-poster {
  width: 52px;
  height: 78px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-hi);
}
.prod-poster.placeholder {
  background: var(--surface2);
  border-color: var(--border);
}

.prod-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.prod-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-sub { font-size: 0.75rem; color: var(--muted); }

.prod-roles { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }

.role-entry {
  display: flex;
  align-items: center;
  gap: 10px;
}

.actor-thumb {
  width: 42px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.actor-thumb.placeholder {
  background: var(--surface2);
  border-color: var(--border);
}

.role-text { display: flex; flex-direction: column; gap: 2px; }
.actor-role-name { font-size: 0.83rem; font-weight: 600; color: var(--text); }
.char-name { font-size: 0.72rem; color: var(--muted); }

/* ── Theme toggle button ── */
.theme-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-hi);
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle.active {
  background: linear-gradient(90deg, #a855f7, #f67400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 4px rgba(246, 116, 0, 0.35));
}

/* ── Pretty mode extras ── */

/* Aurora background orbs */
body:not(.simple)::before,
body:not(.simple)::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body:not(.simple)::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(133,0,247,0.22) 0%, transparent 70%);
  top: -220px; left: -180px;
  animation: aurora-drift 28s ease-in-out infinite alternate;
}
body:not(.simple)::after {
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(246,116,0,0.16) 0%, transparent 70%);
  bottom: -160px; right: -120px;
  animation: aurora-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift {
  0%   { transform: translate(0,    0)   scale(1);    }
  33%  { transform: translate(50px, 30px) scale(1.08); }
  66%  { transform: translate(-25px,55px) scale(0.96); }
  100% { transform: translate(35px,-25px) scale(1.04); }
}

/* Exo 2 for h2 */
body:not(.simple) h2 {
  font-family: 'Exo 2', system-ui, sans-serif;
}

/* Subtle gradient border on cards */
body:not(.simple) .actor-card {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(133,0,247,0.35), rgba(246,116,0,0.18)) border-box;
  border: 1px solid transparent;
}
body:not(.simple) .actor-card.selected {
  /* Keep the base 1px transparent gradient border so layout doesn't shift.
     The visible selected ring is drawn as a ::after pseudo-element below,
     positioned with negative inset so it sits OUTSIDE the card and doesn't
     resize the image. */
  overflow: visible;
  box-shadow: 0 0 22px var(--accent-glow);
}

body:not(.simple) .actor-card.selected::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius) + 3px);
  padding: 3px;
  background: linear-gradient(135deg, var(--accent), var(--orange)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Selected: fill the title strip with the same gradient as the ring so the
   selection reads top-to-bottom instead of just a thin frame. */
body:not(.simple) .actor-card.selected .card-label .title {
  background: linear-gradient(135deg, rgba(133, 0, 247, 0.55), rgba(246, 116, 0, 0.55));
  color: #fff;
}
body:not(.simple) #compare-btn:not(:disabled),
body:not(.simple) .action-btn {
  background: linear-gradient(135deg, #8500f7, #c040ff 60%, #f67400);
  /* The `background` shorthand above resets background-clip, so re-assert it
     here to keep the gradient off the translucent border (no warm edge seam). */
  background-clip: padding-box;
  box-shadow: 0 0 16px var(--accent-glow), 0 0 8px rgba(246, 116, 0, 0.18);
}
body:not(.simple) #compare-btn:hover:not(:disabled),
body:not(.simple) .action-btn:hover {
  box-shadow: 0 0 28px var(--accent-glow), 0 0 14px rgba(246, 116, 0, 0.28), 0 4px 12px rgba(0,0,0,0.4);
}

/* ── Simple mode overrides ── */
body.simple {
  background-image: none;
}
body.simple header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg2);
}
body.simple header h1 {
  background: none;
  -webkit-text-fill-color: var(--accent);
  filter: none;
}
body.simple .actor-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
}
body.simple .actor-card:hover {
  box-shadow: none;
  transform: translateY(-2px);
  border-color: rgba(133,0,247,0.35);
}
body.simple .actor-card.selected {
  /* Same approach: keep layout, use outline (which doesn't take space) for the ring. */
  border-color: var(--accent);
  outline: 3px solid var(--accent);
  outline-offset: 0;
  box-shadow: none;
  background: var(--surface-solid);
}
body.simple .prod-card,
body.simple .compare-bar,
body.simple .dropdown,
body.simple .notice {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.simple .prod-card { background: var(--surface-solid); }
body.simple .prod-card:hover { box-shadow: none; }
body.simple #compare-btn,
body.simple .action-btn {
  background: var(--accent);
  box-shadow: none;
}
body.simple #compare-btn:hover:not(:disabled),
body.simple .action-btn:hover {
  background: var(--accent-hover);
  box-shadow: none;
  transform: none;
}
body.simple #actor-search:focus,
body.simple #prod-search:focus { box-shadow: none; }
body.simple .fetch-badge.pending,
body.simple .fetch-badge.failed { box-shadow: none; }
body.simple .compared-card img { box-shadow: none; }

/* ── Tab nav ──────────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 4px;
  padding: 0 40px;
  background: rgba(15, 17, 24, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.tab-link {
  padding: 12px 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}

.tab-link:hover { color: var(--text); }

.tab-link.active {
  color: var(--text);
  border-bottom-color: transparent;
}

body:not(.simple) .tab-link.active {
  background: linear-gradient(90deg, #a855f7, #f67400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-bottom-color: transparent;
}

body.simple .tab-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg2);
}

/* ── Media badge ──────────────────────────────────────────────────────────── */
.media-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 2;
  pointer-events: none;
}
.media-badge.movie { color: #c4a4ff; border-color: rgba(168, 85, 247, 0.3); }
.media-badge.tv    { color: #ffb877; border-color: rgba(246, 116, 0, 0.3); }
/* Split layout already tells you the media type via section headings, so the
   per-card badge becomes redundant, so hide it in that mode. */
form[data-group="split"] .media-badge { display: none; }

/* ── Compare-productions card variants ───────────────────────────────────── */
.actor-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.actor-photo.placeholder {
  background: var(--surface2);
  border-color: var(--border);
  box-shadow: none;
}

.prod-thumb {
  width: 42px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border-hi);
}
.prod-thumb.placeholder {
  background: var(--surface2);
  border-color: var(--border);
}

body.simple .actor-photo { box-shadow: none; }

/* ── Settings tab attention pulse ────────────────────────────────────────── */
.tab-link.settings-link {
  margin-left: auto;
  padding-right: 0;        /* "Activate Media Match": text right edge aligns with nav right edge */
}
/* When configured, "Settings" is much shorter, so push it left to center under Pretty Mode button. */
.tab-link.settings-link:not(.needs-key) { padding-right: 22px; }

.tab-link.needs-key {
  color: var(--orange);
  animation: settings-pulse 1.8s ease-in-out infinite;
}
@keyframes settings-pulse {
  0%, 100% {
    text-shadow: 0 0 4px rgba(246,116,0,0.5);
  }
  50% {
    text-shadow: 0 0 10px rgba(246,116,0,0.9), 0 0 18px rgba(246,116,0,0.5);
  }
}

/* ── Settings page ───────────────────────────────────────────────────────── */
.settings-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
body.simple .settings-section {
  background: var(--surface-solid);
  backdrop-filter: none;
}
/* A second subsection within the settings card (e.g. Library) gets a divider
   and breathing room so its heading doesn't butt against the section above. */
.settings-block {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hi);
}
.settings-heading {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
}
.settings-help {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.settings-help a { color: var(--accent); }
.settings-help a:hover { color: var(--accent-hover); }
.settings-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}
.settings-input {
  flex: 1;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  font-family: monospace;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-keystatus {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.key-ok {
  color: #6fcf77;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.key-masked {
  font-family: monospace;
  color: var(--muted);
  font-size: 0.85rem;
}
.empty-link { color: var(--accent); text-decoration: none; }
.empty-link:hover { color: var(--accent-hover); text-decoration: underline; }

.settings-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0 16px;
}

/* ── Clickable cards on compare results ──────────────────────────────────── */
.role-entry-link,
.prod-info-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.role-entry-link:hover,
.prod-info-link:hover {
  background: rgba(133,0,247,0.10);
}

/* compared-card on the compare page is now a link */
a.compared-card {
  text-decoration: none;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s;
}
a.compared-card:hover { transform: translateY(-2px); }
a.compared-card:hover span { color: var(--text); }

/* Card body (the label) is clickable to toggle selection; pointer hint.
   It's also keyboard-focusable (tabindex=0 in the template), and Space /
   Enter toggle the hidden checkbox via app.js. The focus ring is drawn
   slightly outside the card to mirror the .selected ring style. */
.card-label { cursor: pointer; }
.card-label:focus { outline: none; }
.card-label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── Actor profile page (/actor/{id}) ────────────────────────────────────── */
.va-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.va-card-wide { max-width: none; }

.va-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.va-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.va-photo.placeholder {
  background: var(--surface2);
  border-color: var(--border);
  box-shadow: none;
}

.va-name-block { display: flex; flex-direction: column; gap: 4px; }

.va-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.va-rolecount {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.va-roles {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.va-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 18px;
}

.char-thumb {
  width: 42px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.char-thumb.placeholder {
  background: var(--surface2);
  border-color: var(--border);
}

.anime-title {
  font-size: 0.72rem;
  color: var(--muted);
}

body.simple .va-card {
  background: var(--surface-solid);
  backdrop-filter: none;
}
body.simple .va-photo { box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════
   Anime tab: rules unique to the merged-in Voice Inspector views.
   Shared classes (.va-card, .va-info, .va-photo, .char-thumb, .notice,
   .sort-chip, .compare-bar, #compare-btn, .card-label, .fetch-badge,
   .drag-ghost, etc.) are already defined above and intentionally reused.
   ══════════════════════════════════════════════════════════════════ */

#anime-search {
  width: 100%;
  padding: 11px 16px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#anime-search::placeholder { color: var(--muted); }
#anime-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow);
}

/* ── Anime grid ── */
.anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 14px;
}

.anime-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
}
.anime-card:hover {
  transform: translateY(-3px);
  border-color: rgba(133,0,247,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(133,0,247,0.15);
}
.anime-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 28px var(--accent-glow);
  transform: translateY(-2px);
}

.anime-grid[data-sort="manual"] .anime-card { cursor: grab; }
.anime-grid[data-sort="manual"] .anime-card:active { cursor: grabbing; }
.anime-card.drag-hidden { display: none; }

.anime-card-placeholder {
  border: 2px dashed rgba(133, 0, 247, 0.45);
  border-radius: var(--radius);
  background: rgba(133, 0, 247, 0.06);
}

/* Year badge: visible only when sorting by year. Top-right of the card. */
.year-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 14px;
  letter-spacing: 0.4px;
  z-index: 2;
  pointer-events: none;
}

/* ── VA results grid (anime compare) ── */
.va-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* Linkified VA header on compare results */
.va-info-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.va-info-link:hover { background: rgba(133,0,247,0.12); }

/* Selected anime shown at the top of the compare / VA pages */
.compared-anime {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Pretty-mode extras for anime cards ── */
body:not(.simple) .anime-card {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(133,0,247,0.35), rgba(246,116,0,0.18)) border-box;
  border: 1px solid transparent;
}
body:not(.simple) .anime-card.selected {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--accent), var(--orange)) border-box;
  box-shadow: 0 0 22px var(--accent-glow);
}

/* ── Simple-mode overrides for anime cards ── */
body.simple .anime-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
}
body.simple .anime-card:hover {
  box-shadow: none;
  transform: translateY(-2px);
  border-color: rgba(133,0,247,0.35);
}
body.simple .anime-card.selected {
  border-color: var(--accent);
  box-shadow: none;
  background: var(--surface-solid);
}
body.simple #anime-search:focus { box-shadow: none; }