/* ═══════════════════════════════════════════════════════════════════════
   nema — stylesheet
   Design token system + 3-column app shell + component library
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TONE SYSTEM ─────────────────────────────────────────────────────── */

:root[data-tone="olive"] {
  --paper:      #f3efe4;
  --paper-2:    #ece7d8;
  --ink:        #2a3323;
  --ink-2:      #4a5440;
  --muted:      #8a8c7e;
  --rule:       #2a33231a;
  --accent:     #5b6b3a;
  --accent-2:   #3e4a26;
  --accent-soft:#dfe4c7;
  --warm:       #c98a5a;
}
:root[data-tone="bookshop"] {
  --paper:      #f4efe6;
  --paper-2:    #ebe4d5;
  --ink:        #1e2a1e;
  --ink-2:      #3a4636;
  --muted:      #857f6f;
  --rule:       #1e2a1e1a;
  --accent:     #1f3a1f;
  --accent-2:   #14281a;
  --accent-soft:#d9e3cf;
  --warm:       #b7542d;
}
:root[data-tone="linen"] {
  --paper:      #f6f2ea;
  --paper-2:    #ede8dc;
  --ink:        #2e3a2a;
  --ink-2:      #4f5a48;
  --muted:      #8f8e80;
  --rule:       #2e3a2a14;
  --accent:     #6a7d4b;
  --accent-2:   #4d5d34;
  --accent-soft:#e1e6cc;
  --warm:       #d69877;
}
:root[data-tone="kiln"] {
  --paper:      #ece5d5;
  --paper-2:    #e2d9c4;
  --ink:        #262420;
  --ink-2:      #45423a;
  --muted:      #847e6e;
  --rule:       #26242014;
  --accent:     #7a8b5f;
  --accent-2:   #5c6c43;
  --accent-soft:#dde2c7;
  --warm:       #b15e2e;
}

/* Default tone if no data-tone set */
:root {
  --paper:      #f3efe4;
  --paper-2:    #ece7d8;
  --ink:        #2a3323;
  --ink-2:      #4a5440;
  --muted:      #8a8c7e;
  --rule:       rgba(42,51,35,0.10);
  --accent:     #5b6b3a;
  --accent-2:   #3e4a26;
  --accent-soft:#dfe4c7;
  --warm:       #c98a5a;
  --shadow:     0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
}

/* Dark mode — all tones share the same dark palette */
:root.dark {
  --paper:      #1c1f17;
  --paper-2:    #23271d;
  --ink:        #ece7d8;
  --ink-2:      #c6c4b2;
  --muted:      #8a8c7e;
  --rule:       rgba(236,231,216,0.12);
  --accent:     #c2d28b;
  --accent-2:   #a8bd66;
  --accent-soft:#2b3220;
  --warm:       #e1a074;
  --shadow:     0 1px 3px rgba(0,0,0,0.4), 0 6px 24px rgba(0,0,0,0.3);
}

/* ── BASE RESET ──────────────────────────────────────────────────────── */

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

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: -0.005em;
}

button, input, select, textarea { font: inherit; }

/* ── UTILITIES ───────────────────────────────────────────────────────── */

.hidden { display: none !important; }

.serif   { font-family: 'Fraunces', serif; }
.display { font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: -0.025em; }
.mono    { font-family: 'JetBrains Mono', monospace; }

/* ═══════════════════════════════════════════════════════════════════════
   3-COLUMN APP SHELL
   ═══════════════════════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  min-height: 100vh;
  background: var(--paper);
}

/* Collapse right pane when not on write/analyze modes */
.app.pane-hidden {
  grid-template-columns: 240px 1fr;
}

/* ── USER-COLLAPSIBLE PANELS ─────────────────────────────────────────── */
.app.rail-collapsed                      { grid-template-columns: 52px 1fr 340px; }
.app.rail-collapsed.pane-hidden          { grid-template-columns: 52px 1fr; }
.app.pane-collapsed:not(.pane-hidden)    { grid-template-columns: 240px 1fr 48px; }
.app.rail-collapsed.pane-collapsed:not(.pane-hidden) { grid-template-columns: 52px 1fr 48px; }

/* Rail collapse button */
.rail-collapse-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.rail-collapse-btn:hover { background: var(--paper-2); color: var(--ink); }

/* Icon strip — hidden by default, shown only when collapsed */
.rail-icon-strip { display: none; }

/* Collapsed state: show strip, hide everything else */
.rail--collapsed .rail-icon-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  width: 100%;
  height: 100%;
}
.rail-strip-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding-top: 8px;
}
.rail-strip-expand {
  margin-bottom: 4px;
  opacity: .5;
}
.rail-strip-expand:hover { opacity: 1; }
.rail-strip-profile { margin-top: auto; }
.rail--collapsed .brand,
.rail--collapsed .new-btn,
.rail--collapsed .sectlabel,
.rail--collapsed .nav,
.rail--collapsed .scripts,
.rail--collapsed .rail-foot,
.rail--collapsed > div:not(.rail-icon-strip) { display: none !important; }

/* Strip icon buttons */
.rail-strip-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rail-strip-icon:hover { background: var(--paper-2); color: var(--ink); }
.rail-strip-icon.active { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }

/* Tooltip */
.rail-strip-icon::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 200;
}
.rail-strip-icon:hover::after { opacity: 1; }

/* Collapse button in pane header */
.pane-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.pane-collapse-btn:hover { background: var(--paper-2); color: var(--ink); }

/* Pane base */
.pane { position: relative; overflow: hidden; }
.pane-inner { display: contents; }

/* Collapsed strip — hidden by default */
.pane-collapsed-strip {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 6px;
  height: 100%;
  border-left: 1px solid var(--rule);
}

/* Collapsed state */
.pane--collapsed .pane-inner   { display: none; }
.pane--collapsed .pane-collapsed-strip { display: flex; }

/* Expand toggle button at top of strip */
.pane-strip-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.pane-strip-toggle:hover { background: var(--paper-2); color: var(--ink); }

/* Icon buttons in the collapsed strip */
.pane-strip-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.pane-strip-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pane-strip-icon:hover { background: var(--paper-2); color: var(--ink); }

/* Tooltip */
.pane-strip-icon::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 100;
}
.pane-strip-icon:hover::after { opacity: 1; }

/* ── LEFT RAIL ───────────────────────────────────────────────────────── */

.rail {
  padding: 22px 14px 22px 22px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: 'Archivo', sans-serif;
  letter-spacing: -0.02em;
}

.brand-wordmark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  font-family: 'Archivo', sans-serif;
}

.brand-logo-img {
  height: 16px;
  width: auto;
  display: block;
  opacity: 0.88;
}
:root.dark .brand-logo-img { filter: invert(1) brightness(0.9); }

/* Credits badge in rail */
.credits-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

.credits-badge--low {
  background: rgba(180, 60, 60, 0.08);
  border-color: rgba(180, 60, 60, 0.25);
  color: #b43c3c;
}

.sectlabel {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding: 0 8px 6px;
  font-weight: 500;
}

.new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
}

.new-btn:hover { background: var(--accent-2); }
.new-btn .plus { font-size: 16px; line-height: 0; margin-top: -2px; }

/* Rail navigation */
.rail .nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rail .nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.rail .nav a:hover { background: var(--paper-2); color: var(--ink); }
.rail .nav a.on, .rail .nav a.active {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 500;
}

.rail .nav a .i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: .85;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail .nav a .n {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.nav-beta-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-left: 4px;
  vertical-align: middle;
}
.nav-preview-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--gold, #b5a97a) 18%, transparent);
  color: var(--gold, #b5a97a);
  margin-left: 4px;
  flex-shrink: 0;
  line-height: 1.6;
}

/* Recent scripts list */
.rail .scripts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rail .scripts a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: .14s;
}

.rail .scripts a:hover { background: var(--paper-2); }
.rail .scripts a.on { background: var(--paper-2); color: var(--ink); }
.rail .scripts a b { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.rail .scripts a span { font-size: 11px; color: var(--muted); }

/* Saved project items in session list */
.session-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s;
}
.session-item:hover { background: var(--paper-2); }
.session-item.active { background: var(--paper-2); color: var(--ink); }

.session-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.session-item .session-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-item .session-meta {
  font-size: 11px;
  color: var(--muted);
}
.session-item-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.session-date {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.session-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.session-item:hover .session-delete { opacity: 1; }
.session-delete:hover { color: #b84040; }

.session-sample-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--gold, #b5a97a);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.8;
}
.session-item--sample { border-left: 2px solid var(--gold, #b5a97a); padding-left: 8px; }

.session-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  margin: 0;
}

/* Rail footer — profile */
.rail-foot {
  margin-top: auto;
  padding: 10px 8px 0;
  border-top: 1px solid var(--rule);
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  width: 100%;
  transition: background .14s;
}

.profile-btn:hover { background: var(--paper-2); }

.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink-2);
}

.profile-avatar-initial {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── CENTER ──────────────────────────────────────────────────────────── */

.center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Scrollable region below the topbar */
.center-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 40px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
  z-index: 10;
}

.crumbs {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}

.crumbs b { color: var(--ink); font-weight: 500; }
.crumbs .sep { opacity: .5; }

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-toggle {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.view-toggle-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}

.saved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.saved-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid transparent;
  font-size: 12.5px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}

.btn:hover { background: var(--paper-2); color: var(--ink); }
.btn.ghost { border-color: var(--rule); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.solid { background: var(--ink); color: var(--paper); border-color: transparent; }
.btn.solid:hover { background: var(--accent-2); }
.btn.accent { background: var(--accent); color: var(--paper); border-color: transparent; }
.btn.accent:hover { background: var(--accent-2); }
.btn .i { width: 14px; height: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── START SCREEN ────────────────────────────────────────────────────── */

.start-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
  max-width: 480px;
}

.start-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}

.start-wordmark-img {
  height: 54px;
  width: auto;
  display: block;
  margin: 0 auto 4px;
  opacity: 0.9;
}
:root.dark .start-wordmark-img { filter: invert(1) brightness(0.85); }

.start-tagline {
  font-size: 15px;
  color: var(--muted);
  margin: -8px 0 0;
  line-height: 1.5;
}

.start-drop-zone {
  width: 100%;
  border: 1.5px dashed var(--rule);
  border-radius: 14px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  background: transparent;
  color: var(--muted);
}

.start-drop-zone:hover,
.start-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.drop-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.drop-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.drop-browse {
  color: var(--accent-2);
  text-decoration: underline;
  cursor: pointer;
}

.start-or {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.start-or::before,
.start-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.start-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.start-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: .14s;
}

.start-action-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink);
}

.start-action-btn .i {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── EDITOR WRAP ─────────────────────────────────────────────────────── */

.editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--paper-2);
}

/* Upload meta bar */
.upload-meta {
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.upload-meta-file,
.upload-meta-fields {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}

.upload-meta-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}

.upload-meta-file svg { flex-shrink: 0; opacity: .7; }

.upload-meta-file span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-clear-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s;
}

.upload-clear-btn:hover { color: var(--ink); }

.upload-meta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.upload-field {
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  width: 100%;
  transition: border-color .14s;
}

.upload-field:focus {
  outline: none;
  border-color: var(--accent);
}

.upload-meta-fields .upload-field:nth-last-child(1):nth-child(odd),
.upload-meta-fields .upload-field:nth-last-child(2):nth-child(odd) {
  grid-column: 1 / -1;
}

/* Analysis choice — quick vs full */
.analysis-choice {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--rule);
}

.analysis-choice-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
}

.analysis-choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.analysis-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.analysis-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.analysis-card--full {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
}

.analysis-card--full:hover,
.analysis-card--selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.analysis-run-btn {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.analysis-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.analysis-card-time {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}

.analysis-card-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.analysis-card-features li {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.analysis-card-features li::before {
  content: "·  ";
  color: var(--accent);
}

/* Writing surface — scrollable tray holding the page */
.writing {
  flex: 1;
  background: var(--paper-2);
  transition: background .2s;
  overflow-y: auto;
  padding: 32px 24px 120px;
  min-height: 0;
}

/* Paged tray mode — gray background, screenplay-page floats as discrete sheet */
.writing.paged {
  background: #b8b4ab;
  padding: 40px 24px 120px;
}
:root.dark .writing.paged { background: #1a1d18; }

.writing.paged .screenplay-page {
  box-shadow: 0 4px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 0;
}

/* ── POST-ANALYSIS PANEL ─────────────────────────────────────────────── */

.post-analysis-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper-2);
  /* Fill the center-body height so tabs sit at top */
  height: 100%;
}

.post-analysis-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
  /* Stick to top of center-body scroll container */
  position: sticky;
  top: 0;
  z-index: 5;
}

.pat {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  letter-spacing: -0.01em;
}

.pat:hover   { color: var(--ink); }
.pat.active  { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.pat-spacer  { flex: 1; }

.pat-export {
  font-size: 11px;
  padding: 6px 12px;
  margin: 6px 0;
}

.pat-panel {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.pat-panel--summary {
  padding: 32px 60px 80px;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
}

.pat-panel--edit {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pat-edit-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pat-edit-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

/* Sticky page counter — shows current page / total while scrolling */
.page-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
  transition: opacity .15s;
  opacity: 0;
  pointer-events: none;
}
.page-counter.visible { opacity: 1; }

/* View controls toolbar */
.view-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.view-ctrl-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-ctrl-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.view-ctrl-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.6;
  transition: background .12s, border-color .12s, color .12s;
  font-family: 'Inter', sans-serif;
}
.view-ctrl-btn:hover { background: var(--paper-2); border-color: var(--accent); color: var(--ink); }

.view-ctrl-display {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}

.view-ctrl-select {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  font-family: 'Inter', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8c7e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.view-ctrl-select:hover { border-color: var(--accent); }
.view-ctrl-select:focus { border-color: var(--accent); }

.view-ctrl-divider {
  width: 1px;
  height: 14px;
  background: var(--rule);
}

.pat-panel--edit .writing {
  flex: 1;
}

/* ── Screenplay page container ─────────────────────────────────────── */
/* 8.5" wide at 96dpi = 816px. --sp-page-width overridden by view toolbar. */
.screenplay-page {
  background: #fff;
  max-width: var(--sp-page-width, 816px);
  margin: 0 auto;
  padding: 0;
  box-shadow: 0 2px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
  border-radius: 2px;
  position: relative;
  color: #111;
}

:root.dark .screenplay-page {
  background: #1e211a;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
  color: #e8e3d8;
}

/* ── Cover page ─────────────────────────────────────────────────────── */
.screenplay-cover {
  min-height: 1056px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 96px 80px;
  border-bottom: 2px solid #d0ccc4;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  position: relative;
}

:root.dark .screenplay-cover { border-bottom-color: rgba(255,255,255,0.08); color: #e8e3d8; }

.screenplay-cover .cover-title {
  font-size: 16pt;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 40px;
  line-height: 1.3;
  font-family: 'Courier New', Courier, monospace;
}

.screenplay-cover .cover-byline {
  font-size: 12pt;
  margin: 0 0 6px;
  font-family: 'Courier New', Courier, monospace;
  color: inherit;
}

.screenplay-cover .cover-author {
  font-size: 12pt;
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
}

/* ── Screenplay editor body ─────────────────────────────────────────── */

.script {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--sp-font-size, 12pt);
  line-height: 1.65;
  color: #111;
  min-height: 600px;
  outline: none;
  word-break: break-word;
  caret-color: var(--accent-2);
  /* Standard screenplay margins at 96dpi/12pt:
     top 1" = 6em, right 1" = 6em, bottom 1" = 6em, left 1.5" = 9em */
  padding: 6em 6em 6em 9em;
}

:root.dark .script { color: #e8e3d8; }

.script:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
  white-space: pre;
}

/* ── Screenplay element classes — all em-based so they scale ────────
   At 12pt Courier (16px), 1em ≈ 1 character width × ~1.67 (monospace).
   Using inch-to-em at 96dpi: 1" = 96px = 6em @ 16px.
   - Character name: 2.2" from text start = 13.2em
   - Dialogue left:  1.0" from text start = 6em
   - Dialogue right: 1.5" from text start = 9em (right padding)
   - Parenthetical:  1.6" from text start = 9.6em
   ─────────────────────────────────────────────────────────────────── */

.script div { white-space: pre-wrap; min-height: 1.65em; }

/* Blank lines get a full line-height of whitespace */
.script div.sl-blank { min-height: 1.65em; display: block; }

.script div.sl-slugline {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 1.65em;
  margin-bottom: 0.2em;
}

/* Action: top margin creates paragraph separation when blank-line divs are absent */
.script div.sl-action { margin: 0; line-height: 1.65; }
.script div.sl-action + div.sl-action { margin-top: 1em; }

.script div.sl-character {
  margin-top: 1em;
  margin-bottom: 0;
  padding-left: 13.2em;
  text-transform: uppercase;
}

.script div.sl-dialogue {
  padding-left: 6em;
  padding-right: 9em;
  margin: 0;
}

.script div.sl-parenthetical {
  padding-left: 9.6em;
  padding-right: 12.5em;
  margin: 0;
}

.script div.sl-transition {
  text-align: right;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: 0;
}

.script div.sl-transition.sl-fade-in,
.script div.sl-transition.sl-fade-out {
  text-align: left;
}

/* Page break separator — full-width gray band spanning the entire white card.
   Uses position:relative so it works inside contenteditable without clipping issues.
   left:-9em shifts it to the card's left edge; width:calc(100%+15em) fills to right edge
   (9em left-pad + 6em right-pad = 15em total script horizontal padding). */
.sl-page-break {
  position: relative;
  left: -9em;
  width: calc(100% + 15em);
  height: 44px;
  background: #c8c3bb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6em;
  pointer-events: none;
  user-select: none;
  white-space: normal;
  min-height: 0 !important;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.13),
    inset 0 -4px 8px rgba(0,0,0,0.10);
}

.sl-page-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 60px,
    rgba(255,255,255,0.06) 60px,
    rgba(255,255,255,0.06) 61px
  );
}

:root.dark .sl-page-break {
  background: #252820;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.35);
}

.sl-page-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  white-space: nowrap;
  position: relative;
}

:root.dark .sl-page-num { color: rgba(255,255,255,0.35); }

/* View controls toggle (page separators) */
.view-ctrl-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.view-ctrl-toggle input[type="checkbox"] { display: none; }
.view-ctrl-toggle-track {
  width: 26px;
  height: 14px;
  border-radius: 99px;
  background: var(--rule);
  border: 1px solid var(--rule);
  position: relative;
  transition: background .15s;
  flex-shrink: 0;
}
.view-ctrl-toggle-track::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s, background .15s;
}
.view-ctrl-toggle input:checked + .view-ctrl-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.view-ctrl-toggle input:checked + .view-ctrl-toggle-track::after {
  transform: translateX(12px);
  background: #fff;
}

/* Flash / highlight on jump */
@keyframes sl-flash-anim {
  0%   { background: rgba(91,107,58,0.25); }
  100% { background: transparent; }
}
.sl-flash { animation: sl-flash-anim 1.2s ease-out forwards; }

/* Nema focus: persistent olive highlight on scene block when jumping from flagged scene */
.sl-nema-focus {
  background: rgba(91, 107, 58, 0.13) !important;
  box-shadow: inset 3px 0 0 var(--accent);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%235b6b3a' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%235b6b3a'/%3E%3Cline x1='12' y1='2' x2='12' y2='6' stroke='%235b6b3a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='18' x2='12' y2='22' stroke='%235b6b3a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='12' x2='6' y2='12' stroke='%235b6b3a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='18' y1='12' x2='22' y2='12' stroke='%235b6b3a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, crosshair;
  transition: background 0.2s, box-shadow 0.2s;
}

/* Inline drop zone (below page when editor is empty) */
.inline-drop-zone {
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-top: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.inline-drop-zone:hover,
.inline-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Generic input/select/textarea */
input,
select,
textarea {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 10px 12px;
  transition: border-color .14s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── LUMEN CHAT ──────────────────────────────────────────────────────── */

.manual-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  gap: 20px;
}

.composer-card {
  max-width: 760px;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

.composer-toolbar {
  padding: 14px 18px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.toolbar-label { letter-spacing: 0.01em; }

.composer-frame {
  padding: 12px 14px 14px;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: none;
  line-height: 1.55;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
}

.composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.footer-note, .status-inline {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.send-btn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .14s;
  flex-shrink: 0;
}

.send-btn:hover { background: var(--accent-2); }

.conversation-panel {
  max-width: 760px;
  width: 100%;
  flex: 1;
}

.message-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

body.manual-chat-active .message-feed {
  min-height: calc(100dvh - 200px);
  padding-bottom: 120px;
}

body.manual-chat-active .composer-card {
  position: fixed;
  bottom: 16px;
  left: 240px; /* rail width */
  right: 340px; /* pane width */
  max-width: none;
  width: auto;
  z-index: 20;
}

.message {
  max-width: min(640px, 82%);
  border-radius: 14px;
  padding: 9px 14px;
  line-height: 1.55;
  font-size: 14px;
}

.user-message {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.assistant-message {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.assistant-message p { margin: 0 0 8px; }
.assistant-message p:last-child { margin-bottom: 0; }
.assistant-message ul, .assistant-message ol { margin: 4px 0 8px; padding-left: 20px; }
.assistant-message li { margin-bottom: 4px; }
.assistant-message h3, .assistant-message h4 { margin: 10px 0 6px; font-size: 14px; }
.assistant-message code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--rule); padding: 1px 4px; border-radius: 3px; }
.assistant-message strong { color: var(--ink); font-weight: 600; }

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingPulse 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ── ENGINE PANEL ────────────────────────────────────────────────────── */

.engine-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px 60px;
  max-width: 1100px;
  width: 100%;
}

.engine-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.engine-header-left {}
.engine-header-left .sectlabel { margin-bottom: 2px; }

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

.engine-status-text {
  font-size: 12.5px;
  color: var(--muted);
}

/* Engine subtabs */
.engine-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 20px 0 0;
}

.engine-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.engine-tab:hover { color: var(--ink); }
.engine-tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }

.engine-tab-panel { padding-top: 24px; }

/* Progress bar */
.engine-progress {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#engineProgressLabel {
  font-size: 12.5px;
  color: var(--muted);
}

.progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.progress-bar-fill, .progress-bar .progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease;
}

/* Corpus profiles (success / mixed) */
.corpus-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 680px) { .corpus-profiles { grid-template-columns: 1fr; } }

.profile-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-success { border-top: 3px solid #2d6a4f; }
.profile-mixed   { border-top: 3px solid #b84040; }

.profile-signal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.profile-signal-label {
  font-size: 12px;
  color: var(--muted);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-signal-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--rule);
  border-radius: 99px;
  overflow: hidden;
}

.profile-signal-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

.profile-signal-bar.strong   { background: #2d6a4f; }
.profile-signal-bar.moderate { background: #c8952a; }
.profile-signal-bar.weak     { background: #b84040; }

.profile-signal-pct {
  font-size: 11px;
  color: var(--muted);
  width: 30px;
  text-align: right;
}

.profile-feat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}

.profile-feat-row:last-child { border-bottom: none; }
.profile-feat-row strong { color: var(--ink); font-weight: 500; }

/* ── Engine film grid ─────────────────────────────────────────────────── */
.engine-film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.engine-film-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.engine-film-card.outcome-success { border-left: 3px solid #2d6a4f; }
.engine-film-card.outcome-mixed   { border-left: 3px solid #c8952a; }
.engine-film-card.outcome-failure { border-left: 3px solid #b84040; }
.engine-film-card.outcome-unknown { border-left: 3px solid var(--rule); }

.engine-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.engine-card-title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.oscar-badge {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 2px;
}

.engine-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.engine-card-meta {
  font-size: 12px;
  color: var(--muted);
  width: 100%;
}

.engine-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* Outcome badge */
.outcome-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.outcome-badge.outcome-success { background: rgba(45,106,79,0.12); color: #2d6a4f; }
.outcome-badge.outcome-mixed   { background: rgba(200,149,42,0.12); color: #c8952a; }
.outcome-badge.outcome-failure { background: rgba(184,64,64,0.10); color: #b84040; }
.outcome-badge.outcome-unknown { background: var(--paper-2); color: var(--muted); border: 1px solid var(--rule); }

/* Score pill */
.score-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Feature pills row */
.engine-feat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Both class names used by the renderer */
.feat-pill,
.engine-feat-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--muted);
}

/* Craft analysis collapsible */
.engine-craft-details {
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}

.engine-craft-summary-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.engine-craft-summary-toggle::-webkit-details-marker { display: none; }
.engine-craft-summary-toggle::before {
  content: '▶';
  font-size: 7px;
  transition: transform .14s;
  flex-shrink: 0;
}
.engine-craft-details[open] .engine-craft-summary-toggle::before { transform: rotate(90deg); }
.engine-craft-summary-toggle .craft-signal-row { flex: 1; flex-wrap: wrap; }

.engine-craft-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}

/* Signal pills inside craft toggle */
.craft-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.craft-signal-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
}

.craft-signal-pill.signal-strong {
  background: rgba(45,106,79,0.12);
  color: #2d6a4f;
  border-color: rgba(45,106,79,0.2);
}
.craft-signal-pill.signal-moderate {
  background: rgba(200,149,42,0.10);
  color: #c8952a;
  border-color: rgba(200,149,42,0.2);
}
.craft-signal-pill.signal-weak {
  background: rgba(184,64,64,0.08);
  color: #b84040;
  border-color: rgba(184,64,64,0.2);
}

/* Craft summary text */
.craft-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* Craft lists (strengths / weaknesses / key factors) */
.craft-list {
  font-size: 12.5px;
}

.craft-list strong {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
}

.craft-list ul {
  margin: 0;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.craft-list li {
  color: var(--ink-2);
  line-height: 1.5;
}

.craft-list.strengths strong  { color: #2d6a4f; }
.craft-list.weaknesses strong { color: #b84040; }
.craft-list.key-factors strong { color: var(--accent-2); }

/* No-data placeholder */
.no-data-small {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.no-data {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* Secondary button */
.secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.secondary-btn:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.secondary-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Incomplete panel */
.incomplete-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.incomplete-intro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.incomplete-intro code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink-2);
}

.incomplete-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  overflow-x: auto;
  display: block;
}

.incomplete-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.incomplete-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

.incomplete-table tr:last-child td { border-bottom: none; }
.incomplete-title { font-weight: 600; color: var(--ink) !important; min-width: 140px; }
.cell-missing { color: #b84040 !important; font-style: italic; }
.cell-ok { color: var(--muted) !important; }

.meta-tag {
  display: inline-block;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  margin: 1px 2px;
  color: var(--ink-2);
}

/* Test results table */
.test-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.test-summary {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.test-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.test-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.test-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: middle;
}

.test-table tr:last-child td { border-bottom: none; }

.test-table .test-sample {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-status-badge, .test-method-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.status-good    { background: rgba(45,106,79,0.10); color: #2d6a4f; }
.status-partial { background: rgba(200,149,42,0.10); color: #c8952a; }
.status-poor,
.status-missing,
.status-error   { background: rgba(184,64,64,0.08); color: #b84040; }

.method-text-layer { background: var(--accent-soft); color: var(--accent-2); }
.method-ocr        { background: rgba(200,149,42,0.10); color: #c8952a; }

.test-row-good    td { background: transparent; }
.test-row-partial td { background: rgba(200,149,42,0.02); }
.test-row-poor td,
.test-row-error td,
.test-row-missing td { background: rgba(184,64,64,0.02); }

/* ── ANALYSIS PROGRESS OVERLAY ───────────────────────────────────────── */

.analyze-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.analyze-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 260px;
}

.nema-loader-word {
  font-family: 'Archivo', sans-serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--accent);
  animation: nemaBreath 2.4s ease-in-out infinite;
  user-select: none;
}

@keyframes nemaBreath {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.analyze-bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.analyze-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 400ms ease;
}

.film-fact-box {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: left;
  margin-top: 8px;
}

.film-fact-label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}

.film-fact-text {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  transition: opacity 400ms ease;
  min-height: 38px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT PANE
   ═══════════════════════════════════════════════════════════════════════ */

.pane {
  border-left: 1px solid var(--rule);
  padding: 22px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--paper);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.pane-head-t {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pane-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  display: inline-block;
}

.pane-dot.active { background: var(--accent); }

.pane-head-by, #engineNote {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.pane-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  text-align: center;
}

.pane-empty p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Quick results */
.pane-quick {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.pane-quick-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.pane-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}

.quick-extraction-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.quick-extraction-badge.badge-text {
  background: var(--accent-soft);
  color: var(--accent-2);
}

.quick-extraction-badge.badge-ocr {
  background: rgba(200,149,42,0.12);
  color: #c8952a;
}

.quick-results-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity .14s;
}
.quick-results-close:hover { opacity: 1; }

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}

.quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px;
  background: var(--paper-2);
}

.quick-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.quick-stat-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.quick-warnings {
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
}

.quick-warning {
  font-size: 12px;
  color: #b84040;
  line-height: 1.5;
  padding: 2px 0;
}

.quick-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.quick-section:last-child { border-bottom: none; }

.quick-char-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-char-row {
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  align-items: center;
  gap: 8px;
}

.quick-char-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-char-bar-wrap {
  height: 4px;
  background: var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.quick-char-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 400ms ease;
}

.quick-char-cues {
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
}

.quick-scene-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-scene-list::-webkit-scrollbar { width: 3px; }
.quick-scene-list::-webkit-scrollbar-track { background: transparent; }
.quick-scene-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

.quick-scene-row {
  display: grid;
  grid-template-columns: 24px 1fr 36px;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
}

.quick-scene-num {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quick-scene-heading {
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-scene-lines {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── PANE FULL RESULTS ───────────────────────────────────────────────── */

.pane-results {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── New flat report section (replaces collapsible details) ──────────── */
.report-section {
  border-bottom: 1px solid var(--rule);
  padding: 28px 0 32px;
}
.report-section:last-of-type { border-bottom: none; }
.report-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.report-section-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-family: 'Fraunces', serif;
}
.report-section-sub {
  font-size: 11px;
  color: var(--muted);
  padding-top: 4px;
}
.voice-secondary {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
}

/* Collapsible sections (kept for backwards compat) */
.pane-section {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}

.pane-section summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.pane-section summary::-webkit-details-marker { display: none; }

.pane-section summary::before {
  content: '▶';
  font-size: 7px;
  color: var(--muted);
  transition: transform .14s;
}

.pane-section[open] summary::before { transform: rotate(90deg); }

.pane-section-body {
  padding: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Voice — Fraunces serif paragraph for executive summary */
.voice {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}

.voice em { color: var(--accent-2); font-style: italic; }

.pane-engine-note {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin: 0;
}

/* Projections strip */
.projections-strip {
  display: flex;
  gap: 0;
  align-items: flex-start;
  flex-shrink: 0;
}

.proj-stat {
  text-align: left;
  padding: 0 20px;
  border-left: 1px solid var(--rule);
}
.proj-stat:first-child { border-left: none; padding-left: 0; }

.proj-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.proj-lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
  font-weight: 600;
}

/* Dim score grid */
.dim-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.dim-score-card {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.dim-score-card--good { border-color: rgba(45,106,79,0.3); }
.dim-score-card--mid  { border-color: rgba(200,149,42,0.3); }
.dim-score-card--low  { border-color: rgba(184,64,64,0.3); }

.dim-score-card .dim-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}

.dim-score-card .dim-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.dim-score-card--good .dim-value { color: #2d6a4f; }
.dim-score-card--mid  .dim-value { color: #c8952a; }
.dim-score-card--low  .dim-value { color: #b84040; }

.dim-score-card .dim-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Report lists */
.report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.report-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.report-list li:last-child { border-bottom: none; }

.report-list li::before {
  content: '–';
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.report-list--positive li::before { content: '✓'; color: #2d6a4f; }
.report-list--warning  li::before { content: '!'; color: #c8952a; font-weight: 700; }

/* Report blocks */
.report-block {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.report-block-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Story section items */
.story-item, .act-item {
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.story-item:last-child, .act-item:last-child { border-bottom: none; }

/* Character items */
.character-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.character-item:last-child { border-bottom: none; }

.char-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.char-detail {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Metric items */
.metric-item {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.metric-copy strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 3px;
}

.metric-copy p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

.score-badge {
  min-width: 46px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 300ms ease;
}

.metric-detail summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  padding: 6px 0 0;
}
.metric-detail summary::-webkit-details-marker { display: none; }

.metric-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.metric-detail-label {
  display: inline-block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.metric-detail p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Priority list items — numbered editorial style */
.priority-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.priority-item:last-child { border-bottom: none; }

.priority-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  line-height: 1.4;
}

.priority-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.priority-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.priority-dim {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.priority-sev {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.priority-sev--critical { color: #b84040; }
.priority-sev--high     { color: #c8952a; }
.priority-sev--medium   { color: var(--muted); }
.priority-sev--low      { color: var(--muted); }

.priority-issue {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.priority-action {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* Legacy badge classes — kept for compat */
.priority-badge { display: none; }
.priority-text { color: var(--ink); }

/* Scene note items */
.scene-note-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-2);
  border-left: 3px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 6px;
  transition: background .12s, border-color .12s, transform .1s;
}
.scene-note-item:last-child { margin-bottom: 0; }

.scene-note-item--clickable {
  cursor: pointer;
}
.scene-note-item--clickable:hover {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  transform: translateX(2px);
}
.scene-note-item--clickable:active { transform: translateX(3px); }

/* Severity accent colours */
.scene-note-item--high   { border-left-color: #b84040; }
.scene-note-item--low    { border-left-color: #2d6a4f; }
.scene-note-item--medium { border-left-color: #8a7c50; }
.scene-note-item--high.scene-note-item--clickable:hover   { border-left-color: #b84040; background: rgba(184,64,64,.07); }
.scene-note-item--low.scene-note-item--clickable:hover    { border-left-color: #2d6a4f; background: rgba(45,106,79,.07); }

.sn-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.scene-note-item .sn-note {
  color: var(--ink-2);
  margin: 0;
}

.sn-goto {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  opacity: 0;
  transition: opacity .12s;
  white-space: nowrap;
}
.scene-note-item--clickable:hover .sn-goto { opacity: 1; }

/* Comparable items */
.comparable-item {
  font-size: 13px;
  color: var(--ink-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.comparable-item:last-child { border-bottom: none; }

/* Two-column layout helper */
.report-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Act grid */
.act-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Engine note */
.engine-note {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin: 0;
}

/* ── EMOTIONAL ENGINE ─────────────────────────────────────────────────── */

.emotional-overall {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 0;
}

.emotional-arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 600px) { .emotional-arc-grid { grid-template-columns: 1fr; } }

.emotional-arc-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.emotional-arc-card .ea-phase {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.emotional-arc-card .ea-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.emotional-arc-card .ea-notes {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.emotional-char-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.emotional-char-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.emotional-char-card .ec-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.emotional-char-card .ec-journey {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.emotional-char-card .ec-arc {
  font-size: 11.5px;
  color: var(--accent-2);
  font-weight: 500;
}

.emotional-char-card .ec-consistency {
  font-size: 11px;
  color: var(--muted);
}

.emotional-scene-note {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-2);
  border-left: 3px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.5;
}

.emotional-scene-note--high     { border-left-color: #b84040; }
.emotional-scene-note--medium   { border-left-color: #c8952a; }
.emotional-scene-note--strength { border-left-color: #2d6a4f; }

.emotional-sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.emotional-col { display: flex; flex-direction: column; gap: 4px; }

.emotional-strengths, .emotional-priorities {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
}

.emotional-strength-item {
  font-size: 13px;
  color: var(--ink);
  padding: 5px 0 5px 12px;
  border-left: 2px solid #2d6a4f;
  line-height: 1.55;
  list-style: none;
}

.emotional-priority-item {
  font-size: 13px;
  color: var(--ink);
  padding: 5px 0 5px 12px;
  border-left: 2px solid #b84040;
  line-height: 1.55;
  list-style: none;
}

.emotional-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.emotional-pending code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-2);
}

/* ── EMOTIONAL SECTION — MISSING CLASSES ────────────────────────────── */

/* Arc cards use .arc-label / .arc-text in renderEmotional */
.emotional-arc-card .arc-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
}
.emotional-arc-card .arc-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Character journey cards */
.ec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ec-arc-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.ec-arc-badge--complete   { background: rgba(45,106,79,.1);  color: #2d6a4f; border-color: rgba(45,106,79,.25); }
.ec-arc-badge--incomplete { background: rgba(184,64,64,.08); color: #b84040; border-color: rgba(184,64,64,.2); }
.ec-arc-badge--flat       { background: rgba(120,120,120,.08); color: var(--muted); }
.ec-arc-badge--inverted   { background: rgba(200,149,42,.1); color: #c8952a; border-color: rgba(200,149,42,.25); }

.ec-journey {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ec-journey-start, .ec-journey-end { flex: 1; }
.ec-arrow { color: var(--muted); flex-shrink: 0; padding-top: 1px; }

.ec-key-moment {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--paper);
  border-left: 2px solid var(--accent);
}
.ec-weakness {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(184,64,64,.05);
  border-left: 2px solid #b84040;
}

/* Thematic thread cards */
.thematic-thread-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.thematic-thread-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tt-theme {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tt-strength {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.tt-strength--strong      { background: rgba(45,106,79,.1);  color: #2d6a4f; border-color: rgba(45,106,79,.25); }
.tt-strength--developing  { background: rgba(200,149,42,.1); color: #c8952a; border-color: rgba(200,149,42,.25); }
.tt-strength--underdeveloped { background: rgba(184,64,64,.08); color: #b84040; border-color: rgba(184,64,64,.2); }
.tt-body { display: flex; flex-direction: column; gap: 4px; }
.tt-body p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* Tone analysis block */
.tone-analysis-block {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tone-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tone-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.tone-consistency {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.tone-consistency--consistent       { background: rgba(45,106,79,.1);  color: #2d6a4f; border-color: rgba(45,106,79,.25); }
.tone-consistency--mostly-consistent { background: rgba(200,149,42,.1); color: #c8952a; border-color: rgba(200,149,42,.25); }
.tone-consistency--inconsistent     { background: rgba(184,64,64,.08); color: #b84040; border-color: rgba(184,64,64,.2); }
.tone-shifts {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tone-shifts li { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.tone-recommendation {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  font-style: italic;
}

/* Scene-level observation header */
.emotional-scene-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.esn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.esn-location {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
}
.esn-dim {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.esn-observation { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* ── SCRIPT ISSUE HIGHLIGHTS (editor) ───────────────────────────────── */

.script-issue-line {
  background: rgba(200,149,42,.12);
  border-left: 2px solid #c8952a;
  padding-left: 6px;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.script-issue-line:hover { background: rgba(200,149,42,.22); }
.script-issue-line--high {
  background: rgba(184,64,64,.1);
  border-left-color: #b84040;
}
.script-issue-line--high:hover { background: rgba(184,64,64,.18); }
.script-issue-line--strength {
  background: rgba(45,106,79,.08);
  border-left-color: #2d6a4f;
}
.script-issue-line--strength:hover { background: rgba(45,106,79,.14); }

/* ── ISSUES PANEL (right pane, edit mode) ───────────────────────────── */

.issues-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Top-level Active / Resolved tabs */
.issues-top-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--rule);
}
.issues-top-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.issues-top-tab:hover { color: var(--ink); }
.issues-top-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.issues-top-tab-count {
  font-size: 10px;
  font-weight: 600;
  background: rgba(99,102,241,.15);
  color: #818cf8;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.issues-top-tab-count.hidden { display: none; }

/* Resolved cards */
.resolved-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  overflow-y: auto;
}
.resolved-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.resolved-card-scene {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.resolved-card-header { display: flex; align-items: center; gap: 6px; }
.resolved-card-original {
  font-size: 11.5px;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}
.resolved-card-change {
  font-size: 11px;
  color: rgba(34,197,94,.85);
  margin: 0;
}
.resolved-restore-btn {
  align-self: flex-start;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.resolved-restore-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink-3);
}

.issues-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--rule);
}
.issues-panel-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.issues-panel-count {
  font-size: 10px;
  color: var(--muted);
}
.issue-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
.issue-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s;
}
.issue-item:hover { background: var(--paper-2); }
.issue-item.active { background: var(--paper-2); border-left: 2px solid var(--accent); padding-left: 14px; }
.issue-item-location {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.issue-item-obs { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.issue-item-sev {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 99px;
  width: fit-content;
}
.issue-item-sev--high     { background: rgba(184,64,64,.1); color: #b84040; }
.issue-item-sev--medium   { background: rgba(200,149,42,.1); color: #c8952a; }
.issue-item-sev--strength { background: rgba(45,106,79,.1); color: #2d6a4f; }

.issues-export-row {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── EDIT MODE PANE LAYOUT ───────────────────────────────────────────── */

/* Flush layout: no outer padding, no gap, inner scroll only */
.pane.pane--edit {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* Give pane-head its own padding in edit mode */
.pane.pane--edit .pane-head {
  padding: 14px 16px 12px;
  flex-shrink: 0;
}

/* writeToolsPane fills remaining height */
.pane.pane--edit #writeToolsPane {
  flex: 1;
  min-height: 0;
  gap: 0;
}

/* issues-panel fills writeToolsPane */
.pane.pane--edit .wpt-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Active/resolved panels fill issues-panel */
#issuesActivePanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#issuesResolvedPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Issue + resolved lists scroll independently */
.issue-list {
  flex: 1;
  min-height: 0;
}

.resolved-list {
  flex: 1;
  min-height: 0;
}

/* Keep header/tabs from shrinking */
.issues-panel-header,
.issues-top-tabs,
.issue-type-tabs,
.issue-cat-tabs {
  flex-shrink: 0;
}

/* ── EDIT ANALYSIS — category tabs + scene groups + issue cards ─────── */

/* Type filter (All / Line Edits / Notes) */
.issue-type-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
}
.issue-type {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  letter-spacing: 0.01em;
}
.issue-type:hover { color: var(--ink); border-color: var(--ink-3); }
.issue-type.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.issue-cat-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.issue-cat {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: .12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.issue-cat:hover { color: var(--ink); background: var(--paper-2); }
.issue-cat.active { background: var(--ink); color: var(--paper); }

/* Scene group */
.edit-scene-group {
  border-bottom: 1px solid var(--rule);
}
.edit-scene-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 8px;
  background: var(--paper-2);
  gap: 8px;
  cursor: pointer;
  transition: background .12s;
}
.edit-scene-header:hover { background: var(--paper); }
.edit-scene-header--nav { cursor: pointer; }
.edit-scene-header--nav:hover .edit-scene-slug { color: var(--accent); }
.edit-scene-header:hover .edit-scene-slug { color: var(--accent); }
.edit-scene-slug {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .12s;
}
.edit-scene-count {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Individual issue card */
.edit-issue {
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--issue-color, var(--rule));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background .1s;
}
.edit-issue:last-child { border-bottom: none; }
.edit-issue:hover { background: var(--paper-2); }
.edit-issue.active { background: color-mix(in oklab, var(--issue-color, var(--accent)) 8%, var(--paper)); }

.edit-issue-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-issue-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid;
}
.edit-issue-sev {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: auto;
}
.edit-issue-sev--high   { background: rgba(220,38,38,.1);  color: #dc2626; }
.edit-issue-sev--medium { background: rgba(249,115,22,.1); color: #ea7010; }
.edit-issue-sev--low    { background: rgba(91,107,58,.1);  color: #5b6b3a; }

.edit-issue-original {
  font-size: 11.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding: 4px 6px;
  background: var(--paper-2);
  border-radius: 4px;
}
.edit-issue-explanation {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}
.edit-issue-suggestion {
  font-size: 11.5px;
  color: var(--accent-2);
  font-weight: 500;
  line-height: 1.45;
  padding: 4px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.edit-suggestion-label {
  font-weight: 700;
  margin-right: 3px;
}

/* issue-list scrollable area */
.issue-list {
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}

/* ── SCENE DETAIL OVERLAY ──────────────────────────────────────────────── */

.issue-scene-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
}
.isd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  gap: 8px;
}
.isd-back {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  background: none;
  border: none;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: background .12s;
}
.isd-back:hover { background: var(--paper-2); }

.isd-nav-btns {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}
.isd-nav-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 8px;
  transition: background .12s, color .12s;
}
.isd-nav-btn:hover { background: var(--paper-2); color: var(--ink); }
.isd-nav-btn:disabled { opacity: .3; cursor: default; }
.isd-nav-count {
  font-size: 11px;
  color: var(--ink-3);
  min-width: 36px;
  text-align: center;
}

.isd-undo {
  font-size: 11px;
  font-weight: 600;
  color: #b84040;
  background: rgba(184,64,64,.08);
  border: 1px solid rgba(184,64,64,.2);
  padding: 3px 10px;
  cursor: pointer;
  border-radius: 99px;
  transition: background .12s;
}
.isd-undo:hover { background: rgba(184,64,64,.15); }

.isd-slug {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--rule);
}

/* Scene detail sub-tabs (Line Edits / Notes) */
.isd-type-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
}
.isd-type-tab {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.isd-type-tab:hover { color: var(--ink); }
.isd-type-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.isd-tab-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-3);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.isd-type-tab.active .isd-tab-count { background: var(--accent); color: var(--paper); }

/* Advisory note card */
.isd-issue--advisory {
  background: color-mix(in oklab, var(--paper-2) 60%, transparent);
  border-left-style: dashed;
}
.isd-advisory-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.isd-issue-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ISD issue card */
.isd-issue {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--issue-color, var(--rule));
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: background .1s;
}
.isd-issue:hover { background: var(--paper-2); }
.isd-issue--active { background: color-mix(in oklab, var(--issue-color, var(--accent)) 6%, var(--paper)); }
.isd-issue--applied { opacity: .55; }

.isd-issue-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.isd-issue-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid;
}
.isd-issue-sev {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: auto;
}
.isd-issue-sev--high   { background: rgba(220,38,38,.1);  color: #dc2626; }
.isd-issue-sev--medium { background: rgba(249,115,22,.1); color: #ea7010; }
.isd-issue-sev--low    { background: rgba(91,107,58,.1);  color: #5b6b3a; }

.isd-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.isd-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.isd-original {
  font-size: 11.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding: 4px 8px;
  background: var(--paper-2);
  border-radius: 4px;
}
.isd-explanation {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.isd-fix-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
}
.isd-suggestion {
  font-size: 11.5px;
  color: var(--accent-2);
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
  padding: 4px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.isd-apply-btn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, opacity .12s;
}
.isd-apply-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.isd-apply-btn:disabled { opacity: .5; cursor: default; }
.isd-apply-btn--remove { background: #dc2626; border-color: #dc2626; }
.isd-apply-btn--remove:hover { background: #b91c1c; border-color: #b91c1c; }
.isd-suggestion--remove { color: #dc2626; background: rgba(220,38,38,.08); font-style: italic; }

/* Per-card undo button — appears in the fix row after Apply */
.isd-card-undo-btn {
  padding: 3px 8px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.isd-card-undo-btn:hover { background: var(--paper-2); color: var(--ink); }

/* Fixed card state */
.isd-issue--fixed {
  opacity: .75;
  border-left: 2px solid rgba(34,197,94,.4);
}

/* Resolve button — sits in the header row */
.isd-resolve-btn {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 4px;
  color: rgba(99,102,241,.7);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.isd-resolve-btn:hover {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.6);
  color: #818cf8;
}
.isd-resolve-btn--restore {
  color: rgba(34,197,94,.8);
  border-color: rgba(34,197,94,.3);
  font-size: 11px;
  padding: 2px 6px;
  white-space: nowrap;
}
.isd-resolve-btn--restore:hover {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.6);
  color: rgb(34,197,94);
}

/* Resolved card — fade + slide out */
@keyframes issue-resolve-out {
  0%   { opacity: 1; transform: translateX(0); max-height: 200px; }
  60%  { opacity: 0; transform: translateX(12px); }
  100% { opacity: 0; max-height: 0; padding: 0; margin: 0; }
}
.isd-issue--resolved {
  animation: issue-resolve-out 0.3s ease-out forwards;
  pointer-events: none;
  overflow: hidden;
}

.isd-empty { padding: 16px 14px; font-size: 12px; color: var(--muted); font-style: italic; }

/* Scene list row dots */
.edit-scene-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.edit-scene-dots {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.edit-scene-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  opacity: .7;
}

/* Per-div underline — always applied to the issue's line */
.sl-issue-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sl-issue-underline--phrasing        { text-decoration-color: rgba(59,130,246,.8); }
.sl-issue-underline--word-choice     { text-decoration-color: rgba(168,85,247,.8); }
.sl-issue-underline--description     { text-decoration-color: rgba(8,145,178,.8); }
.sl-issue-underline--pacing          { text-decoration-color: rgba(249,115,22,.8); }
.sl-issue-underline--character       { text-decoration-color: rgba(91,107,58,.8); }
.sl-issue-underline--scene-structure { text-decoration-color: rgba(220,38,38,.8); }

/* Inline text marks — precise text-level issue highlights */
mark.sl-issue-mark {
  display: inline;
  color: inherit;
  font: inherit;
  padding: 1px 2px;
  border-radius: 2px;
  transition: background 0.2s, box-shadow 0.2s;
}
mark.sl-issue-mark--phrasing        { background: rgba(59,130,246,.13);  border-bottom: 1.5px solid rgba(59,130,246,.7); }
mark.sl-issue-mark--pacing          { background: rgba(249,115,22,.13);  border-bottom: 1.5px solid rgba(249,115,22,.7); }
mark.sl-issue-mark--word-choice     { background: rgba(168,85,247,.13);  border-bottom: 1.5px solid rgba(168,85,247,.7); }
mark.sl-issue-mark--character       { background: rgba(91,107,58,.14);   border-bottom: 1.5px solid rgba(91,107,58,.7); }
mark.sl-issue-mark--description     { background: rgba(8,145,178,.13);   border-bottom: 1.5px solid rgba(8,145,178,.7); }
mark.sl-issue-mark--scene-structure { background: rgba(220,38,38,.13);   border-bottom: 1.5px solid rgba(220,38,38,.7); }

/* Active / selected mark */
mark.sl-issue-mark--active {
  background: rgba(99,102,241,.28) !important;
  border-bottom: 2px solid #6366f1 !important;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(99,102,241,.3), inset 0 0 0 1px rgba(99,102,241,.2);
  animation: mark-active-pulse 1.8s ease-out forwards;
}
@keyframes mark-active-pulse {
  0%   { background: rgba(99,102,241,.42); box-shadow: 0 2px 18px rgba(99,102,241,.5), inset 0 0 0 1px rgba(99,102,241,.3); }
  100% { background: rgba(99,102,241,.20); box-shadow: 0 2px 8px rgba(99,102,241,.2),  inset 0 0 0 1px rgba(99,102,241,.15); }
}


/* Applied mark — green persistent highlight until Resolve */
mark.sl-issue-mark--applied {
  background: rgba(34, 197, 94, .18) !important;
  border-bottom: 1.5px solid rgba(34, 197, 94, .7) !important;
  border-radius: 2px;
}

/* Active line fallback — border only, no background fill */
.sl-issue-line--active {
  border-left: 2px solid rgba(99,102,241,.6) !important;
}

/* Applied fix — left border only; inline mark handles the specific highlight */
.sl-issue-applied-line {
  border-left: 2px solid rgba(34, 197, 94, .5) !important;
}

/* ── PDF EXPORT / PRINT ─────────────────────────────────────────────── */

@media print {
  body { background: #fff; color: #000; font-family: 'Inter', sans-serif; }
  .rail, .topbar, .pane, #uploadPanel, #analysisChooser, #enginePanel,
  .post-analysis-tabs, .analyze-overlay, .error-modal, .corpus-modal,
  .pat-panel--edit, #patEdit { display: none !important; }

  .app { display: block !important; }
  #appMain { width: 100% !important; max-width: 820px; margin: 0 auto; padding: 0; }
  .post-analysis-panel { display: block !important; }
  .pat-panel--summary { display: block !important; padding: 0; }
  .pane-results { padding: 0; }

  .print-header { display: flex !important; align-items: center; justify-content: space-between; padding: 20px 0 16px; border-bottom: 2px solid #000; margin-bottom: 24px; }
  .print-header-brand { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; }
  .print-header-meta  { font-size: 11px; color: #666; }

  details { display: block !important; }
  details > summary { list-style: none; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #666; border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; margin-bottom: 12px; }
  details > summary::marker, details > summary::-webkit-details-marker { display: none; }

  .pane-section { page-break-inside: avoid; margin-bottom: 28px; }
  .emotional-arc-grid { grid-template-columns: repeat(3,1fr); }
  .emotional-arc-card, .emotional-char-card, .thematic-thread-card { page-break-inside: avoid; }

  .projections-strip, .dim-score-grid { page-break-inside: avoid; }
  .corpus-grid { display: none; }

  a { color: #000; text-decoration: none; }
  button, .quick-results-close, .pat-export { display: none !important; }
}

.print-header { display: none; }

/* ── CORPUS PANEL ────────────────────────────────────────────────────── */

.corpus-panel { display: flex; flex-direction: column; gap: 12px; }

.corpus-count {
  font-size: 12.5px;
  color: var(--muted);
}

.corpus-intro {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

.corpus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.corpus-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  padding: 14px 16px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}

.corpus-card:hover { background: var(--paper); border-color: var(--ink); }
.corpus-card:focus-visible { outline: 2px solid var(--accent); }

.corpus-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.corpus-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.corpus-card-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.corpus-card-match {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-2);
  white-space: nowrap;
}

.corpus-card-scores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.corpus-card-scores span {
  font-size: 10.5px;
  color: var(--muted);
}

.corpus-card-scores strong { color: var(--ink); font-weight: 600; }

/* Corpus modal */
.corpus-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity .2s;
}

.corpus-modal.hidden { display: none; }

.corpus-modal-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow);
}

.corpus-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: background .14s;
}

.corpus-modal-close:hover { background: var(--rule); color: var(--ink); }

.corpus-modal-header { display: flex; flex-direction: column; gap: 6px; }
.corpus-modal-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.corpus-modal-meta { font-size: 13px; color: var(--muted); }

.corpus-modal-scores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.corpus-modal-scores .score-item {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.corpus-modal-scores .score-item .score-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.corpus-modal-scores .score-item .score-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.corpus-feature-table h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.corpus-feature-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.corpus-feature-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}

.corpus-feature-table td {
  padding: 8px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}

.corpus-feature-table tr:last-child td { border-bottom: none; }

.corpus-modal-notes h4, .corpus-modal-review h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.corpus-modal-notes p, .corpus-modal-review p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

.corpus-modal-outcome {
  font-size: 13px;
  color: var(--ink-2);
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}

.corpus-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.corpus-modal-tags span {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
}

/* Test results */
.test-results {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace;
}

/* Incomplete panel */
.incomplete-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.incomplete-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--warm);
  color: var(--paper);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* ── AUTH MODAL ──────────────────────────────────────────────────────── */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.auth-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal.hidden { display: none; }

.auth-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow);
  transform: translateY(12px);
  transition: transform .22s;
}

.auth-modal--visible .auth-card { transform: translateY(0); }

.auth-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0;
}

.auth-card-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-provider-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s, border-color .14s;
  width: 100%;
}

.auth-provider-btn:hover {
  background: var(--paper);
  border-color: var(--ink);
}

.auth-provider-btn svg { flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-form input {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  width: 100%;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-submit-btn {
  padding: 11px;
  border-radius: 9px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
}

.auth-submit-btn:hover { background: var(--accent-2); }

.auth-error {
  font-size: 12.5px;
  color: #b84040;
  padding: 8px 12px;
  background: rgba(184,64,64,0.07);
  border-radius: 7px;
  border-left: 2px solid #b84040;
}

.auth-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  transition: background .14s;
}

.auth-close-btn:hover { background: var(--rule); }

/* Signed-in view inside auth modal */
.auth-signed-in {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.auth-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-2);
  border: 2px solid var(--rule);
}

.auth-signed-in .auth-username {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.auth-signed-in .auth-email {
  font-size: 13px;
  color: var(--muted);
}

.auth-sign-out-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: background .14s;
}

.auth-sign-out-btn:hover { background: var(--paper); color: var(--ink); }

/* ── ERROR MODAL ─────────────────────────────────────────────────────── */

.error-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.error-modal.hidden { display: none; }

.error-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
}

.error-title {
  font-size: 16px;
  font-weight: 700;
  color: #b84040;
  margin: 0;
}

.error-message {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

.error-dismiss-btn {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
  transition: background .14s;
}

.error-dismiss-btn:hover { background: var(--accent-2); }

/* ── ACCESS GATE ─────────────────────────────────────────────────────── */

.access-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: 40px 24px;
}

.access-gate-card {
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.access-gate-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 auto;
}

.access-gate-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}

.access-gate-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.access-gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.access-gate-form input {
  padding: 12px 14px;
  border-radius: 10px;
  text-align: center;
  letter-spacing: 0.12em;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

.access-gate-form button {
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
}

.access-gate-form button:hover { background: var(--accent-2); }

.access-gate-error {
  font-size: 13px;
  color: #b84040;
}

/* ── MISC UTILITIES ──────────────────────────────────────────────────── */

.engine-note-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  letter-spacing: 0.02em;
}

/* SVG icons inline */
.i {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

/* ── AUTH MODAL (additional component styles) ────────────────────────── */

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .14s;
}
.auth-close:hover { background: var(--rule); }

.auth-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 4px;
}

.auth-wordmark-img {
  height: 22px;
  width: auto;
  display: block;
  margin-bottom: 4px;
  opacity: 0.88;
}
:root.dark .auth-wordmark-img { filter: invert(1) brightness(0.85); }

.auth-headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.auth-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.auth-provider-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}

.auth-tab {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .14s;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.auth-form-error {
  font-size: 12.5px;
  color: #b84040;
  margin: 0;
}

.auth-back-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  transition: color .14s;
  text-align: left;
}
.auth-back-btn:hover { color: var(--ink); }

.auth-terms {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
  text-align: center;
}

.auth-profile-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 10px 0;
}

.auth-profile-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.auth-profile-email {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.auth-profile-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--paper-2);
  border-radius: 8px;
  border: 1px solid var(--rule);
}

.auth-credits-label {
  font-size: 12px;
  color: var(--muted);
}

.auth-credits-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.auth-signout-btn {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: background .14s;
}
.auth-signout-btn:hover { color: var(--ink); background: var(--paper); }

/* ── PANE SUBSECTIONS ────────────────────────────────────────────────── */

.pane-subsection-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}
.pane-subsection-label:first-child { margin-top: 0; }

.overview-sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.strength-label { color: #2d6a4f; }
.risk-label     { color: #b84040; }

/* Strength / risk line items */
.sw-item {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  padding: 5px 0 5px 11px;
  border-left: 2px solid var(--rule);
  margin-bottom: 5px;
}
.sw-item:last-child { margin-bottom: 0; }
.sw-item--strength { border-left-color: #2d6a4f; color: var(--ink); }
.sw-item--risk     { border-left-color: #b84040; color: var(--ink); }
.sw-item--empty    { color: var(--muted); font-style: italic; border-left: none; padding-left: 0; }

/* ── Craft Breakdown cards ─────────────────────────────────────────── */
.craft-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--paper);
}
.craft-card:last-child { margin-bottom: 0; }

.craft-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.craft-observation {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.craft-detail {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
}

.craft-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}

.craft-detail--works .craft-label { color: #2d6a4f; }
.craft-detail--fix   .craft-label { color: #b84040; }

.craft-text {
  color: var(--ink);
  flex: 1;
}

:root.dark .craft-card { background: var(--paper-2); }
:root.dark .craft-detail--works .craft-label { color: #5aad7a; }
:root.dark .craft-detail--fix   .craft-label { color: #e07070; }

.conflict-list,
.thematic-thread-list,
.tone-analysis-block,
.emotional-scene-notes,
.char-roster-grid,
.relationship-map,
.turning-points-list,
.dialogue-stats-row,
.voice-diff-bar,
.dialogue-char-list,
.theme-list,
.tone-by-act,
.pacing-curve,
.priority-list,
.scene-note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.char-roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dialogue-stats-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.pane-results-footer {
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
}

/* Character breakdown cards (Claude narrative) */
.char-breakdown-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.char-breakdown-card--lead {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
}

.cbd-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.cbd-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cbd-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.cbd-field p {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.cbd-field--strength .cbd-label { color: #5a9e7a; }
.cbd-field--risk    .cbd-label { color: #b84040; }

/* ── FORMAT ASSISTANT ────────────────────────────────────────────────── */

.format-assistant {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Current element chip */
.format-element-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.format-element-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--muted);
  width: fit-content;
  transition: background .15s, color .15s, border-color .15s;
}

.format-element-chip.fmt-slugline     { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent); }
.format-element-chip.fmt-character    { background: rgba(45,106,79,0.10); color: #2d6a4f; border-color: rgba(45,106,79,0.25); }
.format-element-chip.fmt-character-contd { background: rgba(45,106,79,0.06); color: #2d6a4f; border-color: rgba(45,106,79,0.20); border-style: dashed; }
.format-element-chip.fmt-action       { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); }
.format-element-chip.fmt-parenthetical{ background: rgba(200,149,42,0.09); color: #c8952a; border-color: rgba(200,149,42,0.22); }
.format-element-chip.fmt-transition   { background: rgba(99,99,200,0.08); color: #5858c8; border-color: rgba(99,99,200,0.2); }

.format-element-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Section labels inside format assistant */
.format-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Issues list */
.format-issues {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.format-issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.format-issue {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--paper-2);
  border-left: 2px solid var(--rule);
}

.format-issue--error  { border-left-color: #b84040; background: rgba(184,64,64,0.05); }
.format-issue--warn   { border-left-color: #c8952a; background: rgba(200,149,42,0.05); }
.format-issue--info   { border-left-color: var(--accent); background: var(--accent-soft); }

.fi-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 1px;
  flex-shrink: 0;
}

.fi-msg { color: var(--ink-2); }

.format-issue--error .fi-msg { color: #b84040; }
.format-issue--warn  .fi-msg { color: #c8952a; }

/* Quick insert templates */
.format-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.format-template-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  cursor: pointer;
  text-align: left;
  transition: background .13s, border-color .13s;
}

.format-template-btn:hover {
  background: var(--paper);
  border-color: var(--ink);
}

.ftb-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.ftb-preview {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tip panel */
.format-tip {
  padding: 14px;
  background: var(--paper-2);
  border-radius: 10px;
  border: 1px solid var(--rule);
}

.format-tip-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  font-family: 'Fraunces', serif;
}

/* ── WRITE PANE TABS ─────────────────────────────────────────────────────
   Three tabs inside the write-mode right pane: Format | Scenes | Tools
   ──────────────────────────────────────────────────────────────────── */

.write-pane-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin: -14px -14px 16px;
  padding: 0 6px;
}

.wpt {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .12s;
}

.wpt:hover { color: var(--ink); }
.wpt.active { color: var(--ink); border-bottom-color: var(--accent); }

.wpt-panel { display: flex; flex-direction: column; gap: 14px; }
.wpt-panel.hidden { display: none; }

/* ── SCENE OUTLINE (Scenes tab) ──────────────────────────────────────── */

.scene-outline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scene-outline-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
}

.scene-outline-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}

.scene-outline-item:hover {
  background: var(--paper-2);
  border-color: var(--rule);
}

.scene-outline-num {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  min-width: 20px;
  padding-top: 1px;
  flex-shrink: 0;
}

.scene-outline-slug {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-2);
  line-height: 1.4;
  word-break: break-word;
}

/* ── WRITE TOOLS (Tools tab) ─────────────────────────────────────────── */

.write-tool {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
}

.write-tool-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.write-tool-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.write-tool-desc {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.write-tool-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.write-tool-spinner {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 0;
  font-style: italic;
}

/* Scene feedback result blocks */
.tool-feedback-item {
  background: var(--paper-2);
  border-radius: 8px;
  padding: 9px 11px;
  border-left: 3px solid var(--rule);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tool-feedback-item--high   { border-left-color: #b84040; }
.tool-feedback-item--medium { border-left-color: #c8952a; }
.tool-feedback-item--low    { border-left-color: var(--accent); }

.tool-feedback-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}

.tool-feedback-note {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}

.tool-feedback-fix {
  font-size: 11px;
  color: var(--ink);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--rule);
  font-style: italic;
}

/* Line landing cards (three ways to land this) */
.alt-line-card {
  background: var(--paper-2);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  transition: border-color .12s, background .12s;
}

.alt-line-card[data-line] {
  cursor: pointer;
}

.alt-line-card[data-line]:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.alt-line-card--action {
  cursor: default;
  border-left: 3px solid #7b8f6a;
}

.alt-line-type {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 5px;
}

.alt-line-card--subtext .alt-line-type { color: #8b7ecb; }
.alt-line-card--direct  .alt-line-type { color: #c8952a; }
.alt-line-card--action  .alt-line-type { color: #7b8f6a; }

.alt-line-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  font-family: 'Courier New', Courier, monospace;
}

.alt-line-card--action .alt-line-text {
  font-family: inherit;
  font-style: italic;
  color: var(--ink-2);
}

.alt-line-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
  font-style: italic;
  line-height: 1.4;
}

.alt-line-swap-hint {
  font-size: 9px;
  color: var(--accent);
  margin-top: 4px;
  letter-spacing: 0.03em;
}

/* Beat tracker items */
.beat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.beat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.beat-item:last-child { border-bottom: none; }

.beat-item-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.beat-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.beat-match  { color: var(--accent); font-size: 11px; font-weight: 700; }
.beat-missing { color: var(--muted); font-size: 11px; }

.beat-scene {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}

.beat-craft-note {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
  border-left: 2px solid var(--rule);
  padding-left: 7px;
  margin-top: 2px;
}

/* ── REFINE BAR (Analysis → Edit) ────────────────────────────────────── */

.refine-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 16px;
}

.refine-bar-text { flex: 1; min-width: 0; }

.refine-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
}

.refine-desc {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

/* Scene flash highlight when jumping to a scene */
@keyframes scene-flash {
  0%   { background: rgba(130, 157, 100, 0.28); box-shadow: inset 3px 0 0 var(--accent); }
  100% { background: transparent; box-shadow: none; }
}

.script > div.sl-flash {
  animation: scene-flash 2s ease-out forwards;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .app {
    grid-template-columns: 220px 1fr 300px;
  }
}

@media (max-width: 880px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .rail {
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }

  .pane {
    position: static;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 40px 60px;
  max-width: 980px;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* ── System status cards ─────────────────────────────────────────────── */

.admin-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.astat-icon { font-size: 18px; flex-shrink: 0; }

.astat-body { flex: 1; min-width: 0; }

.astat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.astat-value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.astat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.astat-badge--ok    { background: rgba(34,197,94,.14); color: #15803d; }
.astat-badge--warn  { background: rgba(200,149,42,.14); color: #c8952a; }
.astat-badge--off   { background: var(--paper); color: var(--muted); border: 1px solid var(--rule); }
.astat-badge--info  { background: rgba(99,102,241,.12); color: #6366f1; }

/* ── Section labels ──────────────────────────────────────────────────── */

.admin-section { display: flex; flex-direction: column; gap: 14px; }

.admin-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

/* ── Architecture flow diagram ───────────────────────────────────────── */

.arch-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.arch-arrow {
  display: flex;
  align-items: center;
  padding: 0 4px;
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.arch-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  border-right: 1px solid var(--rule);
}
.arch-stage:last-child { border-right: none; }

.arch-stage-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.arch-api-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(99,102,241,.14);
  color: #6366f1;
  letter-spacing: 0.05em;
}

.arch-stage--input  .arch-stage-label { color: #2d6a4f; }
.arch-stage--local  .arch-stage-label { color: var(--accent-2); }
.arch-stage--ai     .arch-stage-label { color: #6366f1; }
.arch-stage--output .arch-stage-label { color: var(--ink-2); }

.arch-nodes { display: flex; flex-direction: column; gap: 5px; }

.arch-node {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.arch-node--sub {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  padding-left: 4px;
  font-style: italic;
}

.arch-corpus-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.arch-corpus-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.arch-corpus-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.arch-corpus-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  color: var(--ink-2);
}

/* ── Engine registry ─────────────────────────────────────────────────── */

.engine-registry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.eng-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 11px;
  border-left: 3px solid var(--rule);
  transition: border-color .15s;
}

.eng-card--active   { border-left-color: rgba(34,197,94,.6); }
.eng-card--api      { border-left-color: rgba(99,102,241,.6); }
.eng-card--standby  { border-left-color: rgba(200,149,42,.5); }
.eng-card--legacy   { border-left-color: var(--rule); opacity: .65; }

.eng-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eng-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.eng-card-badges { display: flex; gap: 5px; align-items: center; }

.eng-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.eng-badge--active  { background: rgba(34,197,94,.14); color: #15803d; }
.eng-badge--api     { background: rgba(99,102,241,.12); color: #6366f1; }
.eng-badge--standby { background: rgba(200,149,42,.12); color: #c8952a; }
.eng-badge--legacy  { background: var(--paper); color: var(--muted); border: 1px solid var(--rule); }
.eng-badge--missing { background: rgba(184,64,64,.10); color: #b84040; }
.eng-badge--type    { background: var(--paper); color: var(--ink-3); border: 1px solid var(--rule); font-weight: 500; }

.eng-card-desc {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

.eng-card-req {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.eng-card-req strong { color: #b84040; font-weight: 600; }

/* ── Endpoint table ──────────────────────────────────────────────────── */

.endpoint-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 11px;
  overflow: hidden;
}

.ep-row {
  display: grid;
  grid-template-columns: 90px 220px 1fr 80px;
  gap: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  font-size: 12px;
}
.ep-row:last-child { border-bottom: none; }
.ep-row.ep-head {
  background: var(--paper-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ep-method {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  width: fit-content;
}
.ep-method--post { background: rgba(99,102,241,.12); color: #6366f1; }
.ep-method--get  { background: rgba(34,197,94,.12); color: #15803d; }

.ep-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-2);
}

.ep-desc { color: var(--ink-3); font-size: 12px; }

.ep-req {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  text-align: center;
}
.ep-req--api    { background: rgba(99,102,241,.12); color: #6366f1; }
.ep-req--none   { color: var(--muted); }
.ep-req--credit { background: rgba(200,149,42,.12); color: #c8952a; }

/* ── Legacy list ─────────────────────────────────────────────────────── */

.legacy-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legacy-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
  border-left: 3px solid var(--rule);
}

.legacy-item--deprecated { border-left-color: rgba(184,64,64,.4); }
.legacy-item--hidden     { border-left-color: rgba(200,149,42,.4); }

.legacy-flag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
}
.legacy-flag--deprecated { background: rgba(184,64,64,.10); color: #b84040; }
.legacy-flag--hidden     { background: rgba(200,149,42,.10); color: #c8952a; }

.legacy-name { font-size: 12.5px; font-weight: 600; color: var(--ink); flex-shrink: 0; }

.legacy-desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* ── Admin tabs ──────────────────────────────────────────────────────────── */

.admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-top: -12px;
}

.admin-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  letter-spacing: -0.01em;
}

.admin-tab:hover { color: var(--ink); }

.admin-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.admin-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}

/* ── User management ─────────────────────────────────────────────────────── */

.user-mgmt-form {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 22px 18px;
}

.user-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.user-field { display: flex; flex-direction: column; gap: 5px; }

.user-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.user-field-input,
.user-field-select {
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.user-field-input:focus,
.user-field-select:focus { border-color: var(--accent); }

.user-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.user-form-error {
  font-size: 12px;
  color: #b84040;
  flex: 1;
}

.user-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  margin-left: 6px;
}

.user-table-wrap {
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.user-table-head {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 0.8fr 0.9fr 0.7fr 36px;
  gap: 0;
  padding: 8px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.user-table-row {
  display: grid;
  grid-template-columns: 24px 1.2fr 1.8fr 0.8fr 0.9fr 0.7fr 36px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  transition: background .1s;
}
.user-table-row:hover { background: var(--paper-2); }

.utd-expand-cell { display: flex; align-items: center; }
.utd-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.utd-expand-btn:hover { color: var(--ink); background: var(--rule); }
.utd-expand-btn--open { color: var(--accent); }

.utd-analyses-panel {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 12px 14px 14px 38px;
}
.utd-analyses-loading,
.utd-analyses-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.utd-analyses-table { font-size: 12px; }
.utd-analyses-head {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 0.9fr 0.7fr 0.7fr;
  gap: 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.utd-analyses-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 0.9fr 0.7fr 0.7fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  align-items: center;
}
.utd-analyses-row:last-child { border-bottom: none; }
.utd-ar-file { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utd-ar-cost { color: var(--accent); font-weight: 600; }
.utd-ar-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.utd-ar-status--success { background: rgba(39,174,96,.12); color: #27ae60; }
.utd-ar-status--failed  { background: rgba(192,57,43,.1);  color: #c0392b; }
.utd-quota { font-size: 12px; color: var(--ink-2); }
.utd-quota--exceeded { color: #c0392b; font-weight: 600; }
.utd-ar-ts   { display: flex; flex-direction: column; gap: 1px; }
.utd-ar-time { font-size: 10px; color: var(--muted); }
.utd-ar-error-row {
  grid-column: 1 / -1;
  padding: 4px 8px 6px;
  font-size: 11px;
  color: #c0392b;
  background: rgba(192,57,43,.05);
  border-radius: 4px;
  margin-top: -4px;
  word-break: break-all;
}
.utd-ar-error-label { font-weight: 600; margin-right: 4px; }

.user-table-empty {
  padding: 20px 14px;
  font-size: 13px;
  color: var(--muted);
}

.utd-name  { font-weight: 600; color: var(--ink); }
.utd-email { color: var(--ink-2); font-size: 12.5px; }
.utd-date  { color: var(--muted); font-size: 12px; }

.utd-actions {
  display: flex;
  gap: 6px;
}

.user-role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 99px;
}
.user-role-badge--admin {
  background: rgba(99,102,241,.12);
  color: #6366f1;
}
.user-role-badge--user {
  background: var(--accent-soft);
  color: var(--accent-2);
}

.user-action-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.user-action-btn:hover { background: var(--paper-2); color: var(--ink); }

.user-action-btn--danger { color: #b84040; border-color: rgba(184,64,64,.25); }
.user-action-btn--danger:hover { background: rgba(184,64,64,.08); }

/* ── User table kebab menu ───────────────────────────────────────────────── */

.utd-kebab-cell { display: flex; justify-content: flex-end; }

.utd-kebab-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
  line-height: 1;
}
.utd-kebab-btn:hover { background: var(--rule); color: var(--ink); }

.utd-kebab-menu {
  position: absolute;
  z-index: 9999;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 140px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.utd-kebab-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  transition: background .1s;
}
.utd-kebab-item:hover { background: var(--paper-2); }
.utd-kebab-item--danger { color: #c0392b; }
.utd-kebab-item--danger:hover { background: rgba(192,57,43,.08); }

/* ── Edit User Modal ─────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.hidden { display: none; }

.modal-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.modal-close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--rule); color: var(--ink); }

.modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--rule);
}

.modal-field-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}

/* ── Architecture To Do checklist ────────────────────────────────────────── */

.arch-todo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.arch-todo-intro {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.arch-todo-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.arch-phase {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.arch-phase-label {
  padding: 10px 14px;
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

/* ── Cost estimator card ─────────────────────────────────────────────────── */

.arch-cost-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
}

.arch-cost-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}

.arch-cost-table { display: flex; flex-direction: column; }

.arch-cost-row {
  display: grid;
  grid-template-columns: 1.4fr 2.4fr 0.8fr;
  gap: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  align-items: center;
}
.arch-cost-row:last-child { border-bottom: none; }

.arch-cost-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  padding-top: 6px;
  padding-bottom: 6px;
}

.arch-cost-total {
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-2);
  border-top: 1px solid var(--rule) !important;
}

.arch-cost-val {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.arch-cost-free { color: #15803d; }

.arch-cost-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  background: var(--paper-2);
}

/* ── Architecture checklist items (accordion) ────────────────────────────── */

.arch-todo-item {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background .1s;
}
.arch-todo-item:last-child { border-bottom: none; }

.arch-todo-item--done .arch-item-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.arch-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}

.arch-item-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.arch-item-check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.arch-item-title {
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  transition: color .15s;
  cursor: default;
}

.arch-steps-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, background .12s;
  font-family: inherit;
}
.arch-steps-btn:hover {
  color: var(--ink);
  background: var(--paper-2);
}

/* Steps panel */
.arch-steps-panel {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 14px 18px 14px 46px;
}

.arch-steps-list {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-steps-list li {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.65;
  padding-left: 4px;
}

.arch-steps-list li br + br { display: none; }

/* Monospaced lines within steps (code blocks) */
.arch-steps-list li {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── LOGIN SCREEN ─────────────────────────────────────────────────────── */

.login-screen {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.login-screen.hidden {
  display: none;
}

.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.login-brand {
  text-align: center;
}

.login-tagline {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.login-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.login-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.login-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.login-input:focus {
  border-color: var(--accent);
}

.login-input::placeholder {
  color: var(--muted);
}

.login-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s, opacity 0.15s;
}

.login-submit:hover { background: var(--accent-2); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.login-error {
  font-size: 13px;
  color: #c0392b;
  margin: 0;
  text-align: center;
}

.login-error.hidden { display: none; }

/* ── PRE-BETA TESTS TAB ─────────────────────────────────────── */
.prebeta-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.prebeta-section:last-child { border-bottom: none; }

.prebeta-desc {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 16px;
  line-height: 1.5;
  max-width: 520px;
}

.prebeta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.prebeta-row-label {
  font-size: 13.5px;
  color: var(--ink-1);
  font-weight: 500;
}

.prebeta-role-toggle {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.prebeta-role-btn {
  background: transparent;
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.prebeta-role-btn.active {
  background: var(--accent);
  color: #1a1a18;
  font-weight: 600;
}

/* ── ONBOARDING TOUR ────────────────────────────────────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.tour-overlay.hidden { display: none; }

.tour-spotlight {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10001;
  animation: tour-pulse 2s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { outline-color: rgba(181,169,122,0.5); }
  50%       { outline-color: rgba(181,169,122,1); }
}

.tour-card {
  position: fixed;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 26px 20px;
  width: 360px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.1);
  pointer-events: all;
  z-index: 10002;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.tour-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}

.tour-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 22px;
}

.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-skip {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.6;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.15s;
}
.tour-skip:hover { opacity: 1; }

.tour-nav { display: flex; gap: 8px; }

.tour-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tour-btn:hover { opacity: 0.85; }
.tour-btn--back {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.tour-btn.hidden { display: none; }

.tour-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 16px;
}
.tour-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  transition: background 0.2s, border-color 0.2s;
}
.tour-dot.active {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── FEED ───────────────────────────────────────────────────── */
.feed-panel {
  padding: 0;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.feed-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
  backdrop-filter: blur(8px);
}

.feed-header h2 {
  margin: 0;
}

/* ── Compose box ── */
.feed-compose {
  display: flex;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 2px solid var(--rule);
  background: var(--paper);
}

.feed-compose-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3.5px rgba(0,0,0,0.14);
}

.feed-compose-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-compose-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  font-family: inherit;
  min-height: 64px;
}
.feed-compose-input::placeholder { color: var(--ink-2); opacity: 0.5; }

.feed-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.feed-char-count {
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.45;
}

/* ── Post list ── */
.feed-list {
  display: flex;
  flex-direction: column;
}

.feed-empty {
  font-size: 14px;
  color: var(--ink-2);
  opacity: 0.55;
  text-align: center;
  padding: 60px 24px;
}

/* ── Individual post card ── */
.feed-post {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.12s;
}
.feed-post:hover { background: var(--paper-2); }

.feed-post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3.5px rgba(0,0,0,0.14);
}

.feed-post-body {
  flex: 1;
  min-width: 0;
}

.feed-post-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.feed-post-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.feed-post-time {
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.55;
}

.feed-post-content {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.feed-post-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.feed-comment-toggle {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  transition: color 0.15s;
}
.feed-comment-toggle:hover { color: var(--accent); }

.feed-like-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  transition: color 0.15s;
}
.feed-like-btn:hover { color: #e05a6e; }
.feed-like-btn--liked { color: #e05a6e; }
.feed-like-count { font-size: 12px; font-variant-numeric: tabular-nums; }

.feed-delete-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.35;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.15s, color 0.15s;
  margin-left: auto;
}
.feed-delete-btn:hover { opacity: 1; color: #c0392b; }

/* ── @ mention highlight ── */
.feed-mention {
  color: var(--accent);
  font-weight: 600;
}

/* ── Mention autocomplete dropdown ── */
.feed-mention-dropdown {
  position: absolute;
  z-index: 9999;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.feed-mention-item {
  background: none;
  border: none;
  text-align: left;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.1s;
}
.feed-mention-item:hover { background: var(--paper-2); }

/* ── Comments thread ── */
.feed-comments {
  margin-top: 12px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.feed-comments.hidden { display: none; }

.feed-comments-list {
  display: flex;
  flex-direction: column;
}

.feed-comment {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.feed-comment:last-child { border-bottom: none; }

.feed-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  color: rgba(255,255,255,0.95);
  margin-top: 1px;
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px rgba(0,0,0,0.12);
}

.feed-comment-body { flex: 1; min-width: 0; }

.feed-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 3px;
}

.feed-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.feed-comment-time {
  font-size: 11px;
  color: var(--ink-2);
  opacity: 0.5;
}

.feed-comment-text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.feed-comment-compose {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.feed-comment-compose-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.95);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px rgba(0,0,0,0.12);
}

.feed-comment-input {
  flex: 1;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.feed-comment-input:focus { border-color: var(--accent); }
.feed-comment-input::placeholder { color: var(--ink-2); opacity: 0.45; }

.feed-comment-submit {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.feed-comment-submit:hover { opacity: 0.85; }
.feed-comment-submit:disabled { opacity: 0.5; cursor: default; }

/* ── WRITERS ROOM ─────────────────────────────────────────────────────────── */
.wr-panel {
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wr-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--rule);
}
.wr-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 24px 0;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--gold, #b5a97a) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold, #b5a97a) 30%, transparent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.wr-preview-banner svg { flex-shrink: 0; color: var(--gold, #b5a97a); }
.wr-desc {
  margin: 16px 24px 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.wr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 12px;
}
.wr-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wr-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: none;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.wr-filter-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: 0.75;
}
.wr-filter.active,
.wr-filter:hover { background: var(--paper-2); color: var(--ink); }
.wr-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 24px 32px;
}
.wr-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s;
}
.wr-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.wr-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.95);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3.5px rgba(0,0,0,0.14);
}
.wr-card-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.wr-author {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wr-posted { font-size: 11px; color: var(--muted); }
.wr-genre-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.wr-badge-icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}
.wr-genre-badge--thriller { background: color-mix(in srgb, #c0392b 12%, transparent); color: #c0392b; }
.wr-genre-badge--comedy   { background: color-mix(in srgb, #e67e22 12%, transparent); color: #d4751f; }
.wr-genre-badge--scifi    { background: color-mix(in srgb, #2980b9 12%, transparent); color: #2980b9; }
.wr-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 0;
}
.wr-logline {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.wr-card-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.wr-stat { font-size: 11px; color: var(--muted); }
.wr-card-actions { margin-left: auto; }
.wr-action-btn {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-2);
  cursor: not-allowed;
  opacity: 0.5;
}