/* ============================================================
   Reel Notes — app stylesheet
   ============================================================
   Visual language carried over from v4 nfo-editor.html:
     - Fraunces serif (italic for emphasis) + JetBrains Mono labels
     - Paper-cream background, dark ink, accent red
     - Subtle paper-noise texture
     - Hard-edged buttons, 4-8px offset shadows in accent color
     - §-numbered section labels in mono caps

   Loaded from /static/css/app.css. Single file, no preprocessor.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,800;1,9..144,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --paper: #f4efe6;
  --paper-dim: #ebe5d8;
  --paper-dark: #ddd5c5;
  --ink: #1a1614;
  --ink-soft: #4a423c;
  --ink-faint: #8a8278;
  --accent: #b8341c;
  --accent-soft: #e8d4cf;
  --green: #4a6b3a;
  --blue: #2c4f6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Fraunces', Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184, 52, 28, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(74, 66, 60, 0.04) 0%, transparent 50%);
  overflow: hidden;
}

body::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; opacity: 0.4; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative; z-index: 1;
}

/* ============================================================
   TOP NAV — Movies / People / Libraries / Settings tabs
   ============================================================ */

.topnav {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.topnav .brand {
  padding: 14px 22px;
  border-right: 1px solid var(--ink-soft);
  display: flex; flex-direction: column; justify-content: center;
}
.topnav .brand h1 {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 800;
  font-size: 22px; line-height: 1;
  letter-spacing: -0.02em;
}
.topnav .brand .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-top: 3px;
}

.nav-tabs {
  display: flex;
  flex: 1;
}

.nav-tab {
  background: none;
  border: none;
  border-right: 1px solid var(--ink-soft);
  color: var(--ink-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0 26px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-tab:hover { background: var(--ink-soft); color: var(--paper); }
.nav-tab.active { background: var(--paper); color: var(--ink); }

.nav-tab .badge {
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}
.nav-tab.active .badge { background: var(--ink); color: var(--paper); }

.topnav-spacer { flex: 1; }

.nav-status {
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.nav-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.nav-status .dot.green  { background: var(--green); box-shadow: 0 0 4px var(--green); }
.nav-status .dot.gray   { background: var(--ink-faint); }
.nav-status .dot.red    { background: var(--accent); box-shadow: 0 0 4px var(--accent); }

.nav-status button {
  background: none; border: none; color: inherit;
  font: inherit; cursor: pointer; padding: 0;
}
.nav-status button:hover { color: var(--paper); }

/* ============================================================
   VIEWS
   ============================================================ */

.views {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.view {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
}
.view.active { display: flex; }

/* ============================================================
   MOVIES VIEW — sidebar (entry list) | main (form) | preview
   ============================================================ */

#view-movies {
  display: none;
  grid-template-columns: 280px 1fr 340px;
}
#view-movies.active { display: grid; }

@media (max-width: 1100px) { #view-movies { grid-template-columns: 240px 1fr 300px; } }
@media (max-width: 880px) {
  body { overflow: auto; }
  .app { height: auto; }
  .views { overflow: visible; }
  #view-movies { grid-template-columns: 1fr; }
  .view { position: static; }
}

.sidebar {
  background: var(--paper-dim);
  border-right: 2px solid var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.panel-header { padding: 16px 18px 12px; border-bottom: 1px solid var(--ink); }
.panel-header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600; font-style: italic;
  font-size: 18px;
}
.panel-header .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft); margin-top: 4px;
}
.panel-header .header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

.stats-bar {
  padding: 10px 18px;
  background: var(--paper-dark);
  border-bottom: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
  display: flex; gap: 14px;
}

/* Library scope picker (tells the entry list which library to show) */
.library-scope {
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.library-scope button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--ink);
}
.library-scope button.active {
  background: var(--ink); color: var(--paper);
}
.library-scope button:hover:not(.active) { background: var(--paper-dark); }

/* Entry list inside the sidebar */
.entry-list {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.entry-row {
  padding: 10px 18px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.1s, border-left-color 0.1s;
}
.entry-row:hover { background: var(--paper); }
.entry-row.active {
  background: var(--paper);
  border-left-color: var(--accent);
}
.entry-row .er-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.entry-row .er-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 3px;
  display: flex; gap: 8px;
}
.entry-row.dirty .er-meta::before {
  content: '●'; color: var(--accent); font-size: 12px;
  margin-right: 2px;
}

.sidebar-actions {
  padding: 10px 18px;
  border-top: 1px solid var(--ink);
  background: var(--paper-dark);
  display: flex; gap: 6px; flex-direction: column;
}

/* Main column — entry form */
.main {
  padding: 24px 32px;
  overflow-y: auto;
  background: var(--paper);
}
.main.empty { display: flex; align-items: center; justify-content: center; }

.section-label {
  margin: 24px 0 10px;
  display: flex; align-items: center;
}
.section-label > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-soft);
  background: var(--paper);
  padding-right: 12px;
}
.section-label::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--ink-soft);
  opacity: 0.3;
}
.section-label .num {
  color: var(--accent);
  margin-right: 10px;
}
.section-label:first-child { margin-top: 0; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input[type="text"], .field input[type="number"], .field input[type="url"],
.field textarea, .field select {
  width: 100%;
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 15px; color: var(--ink);
  padding: 8px 12px;
  outline: none;
}
.field textarea { font-family: 'Fraunces', serif; min-height: 100px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 2px 2px 0 var(--accent-soft);
}

.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1; }

/* Chip inputs (genre, tag, director, writer) */
.chip-input-wrap { display: flex; gap: 6px; }
.chip-input-wrap input { flex: 1; }
.chip-input-wrap .add-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0 14px; cursor: pointer;
}
.chip-input-wrap .add-btn:hover { background: var(--accent); border-color: var(--accent); }

.chip-list { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--paper-dark);
  border: 1px solid var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 6px 4px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .x {
  cursor: pointer;
  color: var(--ink-faint);
  font-weight: 700;
  padding: 0 2px;
}
.chip .x:hover { color: var(--accent); }

/* Star rating */
.rating-row { display: flex; gap: 2px; }
.rating-row button {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 4px;
}
.rating-row button.on { color: var(--accent); }
.rating-row button:hover { color: var(--accent); }

/* Cast strip in the entry form */
.cast-add-row { margin-bottom: 10px; }
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.cast-card {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  padding: 8px;
  text-align: center;
  position: relative;
}
.cast-card .photo {
  width: 100%; aspect-ratio: 1;
  background: var(--ink-faint); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 32px;
  background-size: cover; background-position: center;
}
.cast-card .name {
  font-family: 'Fraunces', serif;
  font-size: 13px; font-weight: 500;
  margin-top: 6px;
  line-height: 1.2;
}
.cast-card .remove {
  position: absolute; top: 4px; right: 4px;
  background: var(--ink); color: var(--paper);
  border: none; width: 20px; height: 20px;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: none;
}
.cast-card:hover .remove { display: block; }
.cast-card .remove:hover { background: var(--accent); }

/* Buttons */
button.primary {
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 18px;
  cursor: pointer;
}
button.primary:hover { background: var(--accent); border-color: var(--accent); }

button.secondary {
  background: var(--paper-dim); color: var(--ink);
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 18px;
  cursor: pointer;
}
button.secondary:hover { background: var(--paper-dark); }

button.danger {
  background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 18px;
  cursor: pointer;
}
button.danger:hover { background: var(--ink); border-color: var(--ink); }

/* Preview panel */
.preview-panel {
  background: var(--paper-dim);
  border-left: 2px solid var(--ink);
  padding: 22px 18px;
  overflow-y: auto;
}
.preview-poster {
  background: var(--ink); color: var(--paper);
  padding: 24px 16px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}
.preview-poster .pp-rule {
  width: 30%; margin: 0 auto 10px;
  border-bottom: 1px solid var(--paper-dark);
}
.preview-poster .pp-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; line-height: 1.3;
}
.preview-poster .pp-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-top: 8px;
}
.preview-cast-strip {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.preview-cast-strip .pcs {
  width: 32px; height: 32px;
  background: var(--ink-faint); color: var(--paper);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.preview-filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.preview-filename .label {
  display: block; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--ink-faint);
  margin-bottom: 4px;
}
.xml-preview {
  background: var(--ink); color: var(--paper-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; line-height: 1.5;
  padding: 12px;
  max-height: 280px; overflow-y: auto;
  white-space: pre;
}

/* Sources panel inside Movies — shows scrape results */
.sources-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.source-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  background: var(--paper-dim);
  border: 1px solid var(--ink-soft);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.source-row .title { color: var(--ink); }
.source-row .scraper { color: var(--ink-faint); }
.source-row button {
  font-family: inherit; font-size: 9px;
  text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: none; padding: 2px 8px;
  cursor: pointer;
}
.source-row button:hover { background: var(--accent); }

.empty-main { text-align: center; padding: 80px 20px; color: var(--ink-soft); max-width: 480px; }
.empty-main .em-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 28px; margin-bottom: 14px;
}
.empty-main .em-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  line-height: 1.8;
}

/* ============================================================
   PEOPLE VIEW — grid + person detail page
   ============================================================ */

#view-people { flex-direction: column; }

.people-header {
  padding: 18px 26px;
  display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--ink);
  flex-shrink: 0;
}
.people-header .left { flex: 1; }
.people-header h2 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 22px;
}
.people-header .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft); margin-top: 4px;
}
.people-search input {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  font-family: 'Fraunces', serif;
  padding: 8px 12px; min-width: 220px;
}
.people-actions { display: flex; gap: 8px; }

.people-grid-wrap {
  flex: 1; overflow-y: auto;
  padding: 18px 26px;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.person-card {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.person-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }

.person-card .photo {
  aspect-ratio: 1;
  background: var(--ink-faint); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 56px;
  background-size: cover; background-position: center;
  position: relative;
}
.person-source-tag {
  position: absolute; top: 6px; right: 6px;
  background: var(--accent); color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; padding: 2px 4px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.person-source-tag.tmdb { background: var(--blue); }

.person-info { padding: 10px 12px; }
.person-name {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 14px;
  line-height: 1.3;
}
.person-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* ----------------------------------------
   Person Detail page (replaces grid when active)
   §15.4 layout: header strip → bio → expander → libraries → known for → related
   ---------------------------------------- */
.person-detail {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.person-detail.active { display: flex; }

.pd-back {
  padding: 12px 26px;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  cursor: pointer;
}
.pd-back:hover { background: var(--paper-dark); }

.pd-header {
  padding: 26px 32px;
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: var(--paper);
}
.pd-photo {
  width: 200px; height: 200px;
  background: var(--ink-faint);
  background-size: cover; background-position: center;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 80px;
}
.pd-meta h2 {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 600;
  font-size: 32px; line-height: 1.1;
  margin-bottom: 8px;
}
.pd-role-badge {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 3px 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.pd-life-line {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.pd-actions {
  margin-top: 18px;
  display: flex; gap: 8px;
}
.pd-source-line {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-top: 14px;
}

.pd-section {
  padding: 22px 32px;
  border-bottom: 1px solid var(--ink-soft);
}
.pd-section h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.pd-section h3 .actions { display: flex; gap: 8px; }
.pd-section h3 .actions button {
  background: none; border: 1px solid var(--ink-soft);
  font: inherit; font-size: 9px;
  padding: 2px 8px; cursor: pointer;
  color: var(--ink-soft);
}
.pd-section h3 .actions button:hover { background: var(--ink); color: var(--paper); }
.pd-section .bio-text {
  font-family: 'Fraunces', serif;
  font-size: 15px; line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
}

.bio-details-expander {
  border: 1px solid var(--ink-soft);
  background: var(--paper-dim);
}
.bio-details-expander summary {
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft);
  display: flex; justify-content: space-between;
  list-style: none;
}
.bio-details-expander summary::-webkit-details-marker { display: none; }
.bio-details-expander summary::after { content: '▶'; transition: transform 0.15s; }
.bio-details-expander[open] summary::after { transform: rotate(90deg); }
.bio-details-expander .bd-body { padding: 12px 16px; border-top: 1px solid var(--ink-soft); }
.bd-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px; padding: 6px 0;
  font-size: 13px;
}
.bd-row .key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.bd-row .val { font-family: 'Fraunces', serif; }

/* Library accordions in person detail */
.lib-accordion {
  border-top: 1px solid var(--ink-soft);
}
.lib-accordion:first-child { border-top: none; }
.lib-accordion summary {
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.lib-accordion summary::-webkit-details-marker { display: none; }
.lib-accordion summary::before { content: '▶'; transition: transform 0.15s; font-size: 8px; color: var(--ink-faint); }
.lib-accordion[open] summary::before { transform: rotate(90deg); }
.lib-accordion summary .count {
  font-size: 9px; color: var(--ink-faint);
  margin-left: auto;
}
.lib-accordion-body {
  padding: 8px 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.lib-thumb {
  background: var(--paper-dim);
  border: 1px solid var(--ink-soft);
  padding: 6px;
  cursor: pointer;
  text-align: center;
}
.lib-thumb:hover { background: var(--paper-dark); }
.lib-thumb .lt-poster {
  aspect-ratio: 2/3;
  background: var(--ink-faint);
  background-size: cover; background-position: center;
  margin-bottom: 6px;
}
.lib-thumb .lt-title {
  font-family: 'Fraunces', serif;
  font-size: 11px; line-height: 1.2;
  font-weight: 500;
}
.lib-thumb .lt-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; color: var(--ink-faint);
  margin-top: 2px;
}

/* Known For + Related People scrollers */
.scroll-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 6px;
}
.scroll-row .lib-thumb { flex: 0 0 130px; }

.related-card {
  flex: 0 0 110px;
  text-align: center;
  cursor: pointer;
}
.related-card .photo {
  width: 90px; height: 90px;
  background: var(--ink-faint); color: var(--paper);
  border-radius: 50%;
  background-size: cover; background-position: center;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 28px;
}
.related-card .name {
  font-family: 'Fraunces', serif; font-size: 12px;
  line-height: 1.2;
}
.related-card .shared {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--accent);
  margin-top: 2px;
}

.private-notes {
  background: rgba(184, 52, 28, 0.06);
  border: 1px dashed var(--accent);
  padding: 16px 20px;
  margin: 20px 32px;
}
.private-notes .label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 8px;
}
.private-notes .body {
  font-family: 'Fraunces', serif; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink);
}

/* ============================================================
   SETTINGS VIEW
   ============================================================ */

#view-settings { flex-direction: column; }

.settings-content {
  padding: 26px 32px;
  overflow-y: auto;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.settings-header { margin-bottom: 26px; }
.settings-header h2 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 26px;
}
.settings-header .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft); margin-top: 6px;
}

.settings-card {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  padding: 18px 22px;
  margin-bottom: 18px;
  position: relative;
}
.settings-card:hover { box-shadow: 4px 4px 0 var(--accent); }
.settings-card h3 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 500; font-size: 18px;
  margin-bottom: 6px;
}
.settings-card .desc {
  font-family: 'Fraunces', serif; font-size: 13px;
  color: var(--ink-soft); margin-bottom: 14px;
}
.settings-card .desc a { color: var(--accent); }
.settings-card .row { display: flex; gap: 8px; align-items: center; }
.settings-card .row input[type="text"], .settings-card .row input[type="password"] {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  padding: 8px 12px;
}
.settings-card.danger-zone { border-color: var(--accent); }
.settings-card.danger-zone:hover { box-shadow: 4px 4px 0 var(--accent); }

/* Toggle row */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; gap: 12px;
}
.toggle-row .label-block { flex: 1; }
.toggle-row .label-block .label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink);
}
.toggle-row .label-block .help {
  font-family: 'Fraunces', serif; font-size: 12px;
  color: var(--ink-soft); margin-top: 3px;
}
.toggle {
  position: relative; width: 42px; height: 22px;
  background: var(--ink-faint);
  cursor: pointer;
  flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--paper);
  transition: left 0.15s;
}
.toggle.on { background: var(--green); }
.toggle.on::after { left: 22px; }

/* Status text inside settings (e.g. TMDB key state) */
.status-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 10px; color: var(--ink-soft);
}
.status-line.ok { color: var(--green); }
.status-line.bad { color: var(--accent); }

/* ============================================================
   LIBRARIES VIEW (NEW IN PHASE 4)
   ============================================================ */

#view-libraries { flex-direction: column; }

.libs-content {
  padding: 26px 32px;
  overflow-y: auto;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.libs-header { margin-bottom: 26px; }
.libs-header h2 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 26px;
}
.libs-header .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft); margin-top: 6px;
}

.lib-block {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  margin-bottom: 18px;
}
.lib-block-header {
  background: var(--ink); color: var(--paper);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.lib-block-header h3 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; font-weight: 500;
}
.lib-block-header .lib-slug {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.15em;
}

.lib-block-body { padding: 18px 22px; }

.lib-paths-list {
  margin-bottom: 18px;
}
.lib-path-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-dark);
}
.lib-path-row:last-child { border-bottom: none; }
.lib-path-row .path {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  word-break: break-all;
}
.lib-path-row .path .label {
  font-family: 'Fraunces', serif;
  font-size: 11px; color: var(--ink-soft);
  font-style: italic;
  margin-left: 8px;
}
.lib-path-row .actions { display: flex; gap: 6px; }
.lib-path-row .actions button {
  background: var(--paper); border: 1px solid var(--ink-soft);
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 10px; cursor: pointer;
}
.lib-path-row .actions button:hover { background: var(--ink); color: var(--paper); }
.lib-path-row.disabled { opacity: 0.5; }

.lib-add-path { display: flex; gap: 8px; margin-bottom: 14px; }
.lib-add-path input { flex: 1; }

.lib-scrapers-list {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--paper-dark);
}
.lib-scraper-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--paper-dark);
  border: 1px solid var(--ink-soft);
  padding: 4px 10px;
  cursor: pointer;
}
.lib-scraper-chip.enabled {
  background: var(--green); color: var(--paper); border-color: var(--green);
}

.scan-result {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; line-height: 1.6;
}

/* ============================================================
   TOAST + MODAL
   ============================================================ */

.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--ink); color: var(--paper);
  padding: 14px 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 999; max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { box-shadow: 4px 4px 0 var(--ink); background: var(--accent); }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 22, 20, 0.65);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
  padding: 24px 28px;
  max-width: 640px; width: 92%;
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.modal h2 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; margin-bottom: 10px;
}
.modal p {
  font-size: 14px; line-height: 1.6;
  margin-bottom: 14px; color: var(--ink-soft);
}
.modal-body {
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 4px;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  flex-shrink: 0;
}
.modal-actions button {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  cursor: pointer; transition: all 0.15s;
}
.modal-actions button:hover { background: var(--paper-dark); }
.modal-actions button.primary { background: var(--ink); color: var(--paper); }
.modal-actions button.primary:hover { background: var(--accent); border-color: var(--accent); }
.modal-actions button.danger { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.modal-actions button.danger:hover { background: var(--ink); border-color: var(--ink); }

.modal input[type="text"], .modal input[type="url"], .modal input[type="password"],
.modal input[type="number"], .modal input[type="date"],
.modal textarea, .modal select {
  width: 100%;
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 15px; padding: 10px 12px;
  margin-bottom: 12px;
  outline: none;
}
.modal textarea { min-height: 80px; resize: vertical; }
.modal label.field-label {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 4px; margin-top: 8px;
}

/* Cast picker modal — search box, tabs (library / scrapers), result grid */
.picker-search { position: relative; margin-bottom: 14px; }
.picker-search input {
  width: 100%;
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  padding: 10px 12px;
  font-size: 15px;
}
.picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 12px;
}
.picker-tab {
  background: none; border: none;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.picker-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.picker-results {
  max-height: 50vh; overflow-y: auto;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.picker-card {
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  cursor: pointer;
  padding: 8px;
  text-align: center;
}
.picker-card:hover { background: var(--paper-dark); }
.picker-card .ppic {
  aspect-ratio: 1;
  background: var(--ink-faint); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 36px;
  background-size: cover; background-position: center;
  margin-bottom: 6px;
}
.picker-card .pname {
  font-family: 'Fraunces', serif; font-size: 13px;
  font-weight: 500; line-height: 1.2;
}
.picker-card .pmeta {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--ink-faint);
  margin-top: 3px;
}
.picker-empty {
  padding: 30px 20px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-faint);
}

/* Person edit modal sections */
.modal-section {
  border-top: 1px solid var(--paper-dark);
  margin-top: 18px;
  padding-top: 14px;
}
.modal-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.modal-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 10px;
}

/* Per-field NFO override toggle (small inline) */
.nfo-override {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--ink-faint);
  cursor: pointer;
}
.nfo-override input { margin: 0; }

/* Chip multi-select for grooming/circumcision/etc. */
.chip-multi {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.chip-multi-opt {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--paper-dim);
  border: 1px solid var(--ink-soft);
  padding: 4px 10px;
  cursor: pointer;
}
.chip-multi-opt.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ============================================================
   LOGIN OVERLAY (shown if /api/auth/me returns unauthenticated)
   ============================================================ */

.login-overlay {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
}
.login-overlay.show { display: flex; }
.login-card {
  background: var(--paper-dim);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
  padding: 32px 36px;
  width: 380px; max-width: 92%;
}
.login-card .brand {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 800;
  font-size: 28px; line-height: 1; margin-bottom: 4px;
}
.login-card .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-bottom: 22px;
}
.login-card label {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.login-card input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.login-card .login-error {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--accent); margin-bottom: 10px; min-height: 14px;
  text-transform: uppercase; letter-spacing: 0.1em;
}