/* ==========================================================================
   CivNode — Screen-Specific Layouts
   Each screen is a self-contained layout using the component library
   ========================================================================== */

/* ==========================================================================
   Global Shell
   ========================================================================== */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Top Bar --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.55rem 1.5rem;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-wordmark {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.topbar-logo {
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: opacity var(--transition);
}

.topbar-wordmark:hover .topbar-logo {
  opacity: 0.8;
}

.topbar-wordmark:hover {
  color: var(--accent);
}

.topbar-quote {
  font-style: italic;
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.6;
  line-height: 1.35;
  max-width: 42vw;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 0.15em;
}
/* Quote hidden when nav is present — they compete for horizontal space */
.topbar-quote { display: none; }

@media (min-width: 1400px) {
  /* Only show quote on very wide screens where there's room for both */
  .topbar-quote { display: -webkit-box; }
}

/* Primary navigation links in topbar */
.topbar-nav {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.topbar-nav-link {
  position: relative;
  padding: 0.3rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.topbar-nav-link::after {
  content: '';
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--border-subtle);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: background var(--transition);
}

.topbar-nav-link:hover {
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.topbar-nav-link:hover::after {
  background: var(--text-muted);
}

.topbar-nav-link.active {
  color: var(--accent);
}

.topbar-nav-link.active::after {
  background: var(--accent);
}

/* Hide topbar nav on mobile — mobile uses bottom nav */
@media (max-width: 768px) {
  .topbar-nav { display: none; }
}

/* Editor mode — hide nav links for maximum writing space */
.topbar.editor-focus .topbar-nav {
  display: none;
}

.topbar.editor-focus .topbar-quote {
  display: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-help-btn { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border-subtle); background: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-help-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-help-icon { display: inline-block; width: 16px; height: 16px; background: currentColor; mask-image: url('/icons/question.png'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/icons/question.png'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition:
    color var(--transition),
    background-color var(--transition);
}

.topbar-user:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

/* --- Menu icon --- */

.topbar-menu-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
}

/* --- Do Not Disturb toggle --- */

.dnd-toggle--active .action-icon {
  background-color: var(--accent, #c9a84c);
}

/* --- Floating search (bottom-left) --- */

.floating-search {
  position: relative;
  z-index: 4000;
}

.floating-search-trigger {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
  padding: 0;
  font-size: 0.95rem;
}

.floating-search-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.floating-search-trigger.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.floating-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  width: 380px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
  overflow: hidden;
}

.floating-search-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}

.floating-search-input::placeholder {
  color: var(--text-muted);
}

.floating-search-results {
  display: none;
  max-height: 280px;
  overflow-y: auto;
}

.floating-search-results.open {
  display: block;
}

.floating-search-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--transition);
}

.floating-search-item:hover {
  background: var(--bg-surface);
}

.floating-search-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.floating-search-badge--ai {
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  color: var(--text-muted);
}

.floating-search-empty {
  padding: 0.6rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.floating-search-section {
  padding: 0.4rem 0.7rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.floating-search-section:first-child {
  border-top: none;
}

.floating-search-item--mood {
  color: var(--accent);
}

.floating-search-badge--mood {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.floating-search-author {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
  padding-left: 0.5rem;
  white-space: nowrap;
}

/* --- Navigation Drawer --- */

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.25s ease;
}

.nav-drawer-backdrop.open {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3001;
  width: 260px;
  max-width: 85vw;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-subtle);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-drawer.open {
  transform: translateX(0);
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.nav-drawer-alias {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-drawer-alias:hover {
  color: var(--accent);
}

.nav-drawer-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  transition: color var(--transition);
}

.nav-drawer-close:hover {
  color: var(--text-primary);
}

.nav-drawer-section {
  padding: 0.8rem 1.4rem;
}

.nav-drawer-utils {
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.2rem;
}
.nav-drawer-utils .nav-drawer-link {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.nav-drawer-utils .nav-drawer-link:hover {
  color: var(--text-primary);
}

.nav-drawer-subtle {
  font-size: 0.75rem;
  opacity: 0.6;
}
.nav-drawer-subtle:hover {
  opacity: 1;
}

.nav-drawer-section-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
}

.nav-drawer-link {
  display: block;
  padding: 0.45rem 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.nav-drawer-link:hover {
  color: var(--text-primary);
}

.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.4rem;
}

/* --- Nav Drawer Hints --- */

.nav-drawer-link[data-hint] {
  position: relative;
}

.nav-drawer-link[data-hint]::after {
  content: attr(data-hint);
  display: block;
  position: absolute;
  left: -0.4rem;
  top: calc(100% + 0.15rem);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0.4s, transform 0.2s ease 0.4s;
  pointer-events: none;
  width: max-content;
  max-width: 220px;
  white-space: normal;
  z-index: 10;
  box-shadow: 0 4px 12px var(--shadow);
}

.nav-drawer-link[data-hint]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.nav-drawer[data-hints-off] .nav-drawer-link[data-hint]::after {
  display: none;
}

.nav-drawer-support-btn {
  width: 100%;
  padding: 0.55rem 1rem;
  background: var(--patron-gold);
  color: #000;
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition);
}

.nav-drawer-support-btn:hover {
  opacity: 0.85;
}

.nav-drawer-footer {
  margin-top: auto;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border-subtle);
}

.nav-drawer-logout {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color var(--transition);
}

.nav-drawer-logout:hover {
  color: var(--text-primary);
}

/* --- Main Content Area --- */

.main-content {
  flex: 1;
  padding-bottom: 4rem;
}

/* --- Mobile Bottom Nav --- */

.bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
  }

  .topbar {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
  }

  .topbar-wordmark {
    font-size: 0.95rem;
  }


  .server-status {
    display: none;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
    padding: 0.4rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0.4rem);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition);
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
    font-family: inherit;
  }

  .bottom-nav-item:hover,
  .bottom-nav-item.active {
    color: var(--accent);
  }

  .bottom-nav-icon {
    width: 20px;
    height: 20px;
    opacity: 0.45;
    transition: opacity var(--transition);
  }

  .bottom-nav-dark .bottom-nav-icon {
    filter: invert(1);
  }

  .bottom-nav-item:hover .bottom-nav-icon,
  .bottom-nav-item.active .bottom-nav-icon {
    opacity: 0.9;
  }

  .main-content {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Shared Search Input — local search bars used across screens
   ========================================================================== */

.search-input {
  width: 100%;
  padding: 0.5rem 1.75rem 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

/* ==========================================================================
   Sort Select — dropdown used alongside search inputs
   ========================================================================== */

.sort-select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  min-width: 140px;
}
.sort-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ==========================================================================
   Screen Transitions
   ========================================================================== */

.screen {
  animation: screen-enter 250ms ease forwards;
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Frontpage (The Agora)
   ========================================================================== */

.screen-frontpage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 4rem 1.5rem;
  position: relative;
}

.frontpage-side-panel {
  position: absolute;
  left: 2rem;
  top: 4rem;
  width: 220px;
  max-width: 220px;
}

.frontpage-side-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.frontpage-side-panel-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.frontpage-side-panel-body p {
  margin-bottom: 0.5rem;
}

.frontpage-side-panel-body p:last-child {
  margin-bottom: 0;
}

.civpage {
  max-width: var(--reading-width);
  width: 100%;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--bg-secondary);
  position: relative;
}

.civpage-enter {
  animation: civpage-enter 300ms ease forwards;
}

@keyframes civpage-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.civpage-exit {
  animation: civpage-exit 200ms ease forwards;
}

@keyframes civpage-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.civpage-swipe-exit {
  animation: civpage-swipe-exit 200ms ease forwards;
}

@keyframes civpage-swipe-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100px);
  }
}

.civpage-pull-indicator {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.civpage-pull-indicator.visible {
  opacity: 1;
}

/* --- Monument Header --- */

.civpage-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-primary) 70%, var(--accent) 30%);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.civpage-author {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

.civpage-author a {
  color: var(--text-secondary);
  transition: color var(--transition);
}

.civpage-author a:hover {
  color: var(--accent);
}

/* --- Moderation Confidence (admin/mod only) --- */

.civpage-confidence {
  display: inline-block;
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  background: var(--surface-secondary, rgba(128,128,128,0.08));
  padding: 0.1em 0.4em;
  border-radius: 3px;
  margin-left: 0.5rem;
  opacity: 0.6;
  vertical-align: middle;
}
.civpage-confidence.confidence-high {
  color: var(--danger, #c0392b);
  background: rgba(192,57,43,0.08);
  opacity: 1;
}
.civpage-confidence.confidence-mid {
  color: var(--warning, #e67e22);
  background: rgba(230,126,34,0.08);
  opacity: 1;
}
.civpage-revalidate-btn {
  display: inline-block;
  font-size: 0.6rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  background: var(--surface-secondary, rgba(128,128,128,0.1));
  border: 1px solid var(--border, rgba(128,128,128,0.2));
  padding: 0.1em 0.5em;
  border-radius: 3px;
  margin-left: 0.4rem;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.civpage-revalidate-btn:hover { background: var(--surface-hover, rgba(128,128,128,0.2)); }
.civpage-revalidate-btn:disabled { cursor: default; opacity: 0.7; }
.civpage-revalidate-btn.reval-pass { color: var(--success, #27ae60); border-color: var(--success, #27ae60); }
.civpage-revalidate-btn.reval-fail { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }

/* --- Monument Body --- */

.civpage-body {
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
}

.civpage-body p + p {
  margin-top: var(--reading-para-spacing);
}

.civpage-body blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  color: var(--text-secondary);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.civpage-body h2 { font-size: 1.35rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.75em; }
.civpage-body h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
.civpage-body-divider { display: flex; justify-content: center; margin: 1.25rem 0 1.5rem; opacity: 0.5; }
.civpage-body-divider svg { width: 200px; height: auto; display: block; }

.civpage-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.3);
  text-underline-offset: 0.15em;
}

.civpage-body a:hover {
  text-decoration-color: var(--accent-hover);
}

.civpage-body ul,
.civpage-body ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.civpage-body ul { list-style: disc; }
.civpage-body ol { list-style: decimal; }

.civpage-body li + li { margin-top: 0.3em; }

.civpage-body pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.85em;
}

.civpage-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-secondary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.civpage-body pre code {
  background: none;
  padding: 0;
}

/* --- Line Numbers (code blocks) --- */

.line-num {
  display: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text-muted);
  opacity: 0.5;
  text-align: right;
  padding-right: 1em;
  min-width: 2.5em;
}

body.show-line-numbers .line-num {
  display: inline-block;
}

.civpage-body img {
  border-radius: var(--radius);
  margin: 1.5em 0;
}

.civpage-body hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2.5em 0;
}

/* --- Enhanced Reading Mode --- */

.reading-enhanced .civpage-title {
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
}

/* Drop caps */
.reading-dropcap .civpage-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.6em;
  line-height: 0.75;
  padding-right: 0.08em;
  padding-top: 0.06em;
  color: var(--accent);
  font-weight: 700;
}

/* Scroll progress */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 1001;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* --- Sources --- */

.civpage-sources {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-subtle);
}

.civpage-sources-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.civpage-sources ol {
  list-style: decimal;
  padding-left: 1.2em;
}

.civpage-sources li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.3em;
}

.civpage-sources a {
  color: var(--accent);
  word-break: break-all;
}

.civpage-sources a:hover {
  color: var(--accent-hover);
}

/* --- Forum Threads --- */

.civpage-forum {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-subtle);
}

.civpage-forum-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.civpage-forum ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.civpage-forum li {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 0.3em;
}

.civpage-forum a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.civpage-forum a:hover {
  color: var(--accent);
}

/* --- Continuation --- */

.civpage-continuation {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.civpage-continuation-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.civpage-continuation-link {
  font-size: 1rem;
  font-style: italic;
}

/* --- Author Recommends (Featured Work) --- */

.civpage-featured-work {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.75rem;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle, var(--border));
  transition: border-color 0.2s;
}

.civpage-featured-work:hover {
  border-color: var(--accent);
}

.civpage-featured-thumb {
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.civpage-featured-thumb--fallback {
  filter: var(--icon-filter, invert(0.7));
  opacity: 0.5;
  object-fit: contain;
  padding: 8px;
  background: var(--bg-tertiary, var(--bg-secondary));
  border-radius: 3px;
}

.civpage-featured-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.civpage-featured-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.civpage-featured-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.civpage-featured-title:hover {
  color: var(--accent);
}

.civpage-featured-blurb {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* --- Author Links (Monument Footer) --- */

.civpage-author-links {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}

.civpage-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}

.civpage-author-link {
  color: var(--text-muted);
  text-decoration: none;
}

.civpage-author-link:hover {
  color: var(--text-secondary);
}

.civpage-author-link-sep {
  color: var(--text-muted);
  margin: 0 0.5rem;
}

/* --- Mood Tags --- */

.civpage-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.2rem;
}

/* --- Action Bar --- */

.civpage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.2rem;
}

.civpage-actions-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.civpage-actions-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.85em;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.action-btn:hover {
  color: var(--accent);
  background-color: var(--accent-subtle);
  border-color: var(--accent-subtle);
  box-shadow: var(--shadow-sm);
}

.action-btn:active {
  background-color: transparent;
}

.action-btn.resonated {
  color: var(--resonance);
}

.action-btn.resonated:hover {
  color: var(--resonance);
  background-color: rgba(212, 165, 116, 0.08);
}

/* Resonate pulse animation */
@keyframes resonate-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.action-btn.resonating {
  animation: resonate-pulse 400ms ease;
}

/* Resonate — primary action, stands out */
[data-action="resonate"] {
  border: 1px solid var(--border-subtle);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- CivPage Navigation Row --- */

.civpage-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

/* Previous button — muted, not prominent */
.action-prev {
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.action-prev:hover {
  color: var(--text-secondary);
  border-color: var(--border);
}

/* Next / Discover next button — accent-colored */
.action-next {
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent-subtle);
}

.action-next:hover {
  color: var(--accent);
  background-color: var(--accent-subtle);
  border-color: var(--accent);
}

/* Session counter between buttons */
.civpage-nav-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}

/* Keyboard hint below navigation */
.civpage-nav-hint {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.5;
  margin-top: 0.5rem;
  user-select: none;
  transition: opacity 600ms ease;
}

.civpage-nav-hint--faded {
  opacity: 0;
}

/* Exit animation going left (for "previous" navigation) */
.civpage-exit-left {
  animation: civpage-exit-left 200ms ease forwards;
}

@keyframes civpage-exit-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Swipe exit right (for swiping back to previous) */
.civpage-swipe-exit-right {
  animation: civpage-swipe-exit-right 200ms ease forwards;
}

@keyframes civpage-swipe-exit-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Report button — subtle, not prominent */
.action-report {
  color: var(--text-muted);
  font-size: 0.8rem;
  gap: 0.3em;
}

.action-report:hover {
  color: var(--error, #c44);
  background-color: rgba(204, 68, 68, 0.06);
  border-color: rgba(204, 68, 68, 0.06);
}

/* Action icons — inherit color from parent button */
.action-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  position: relative;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: -0.1em;
}

/* Filled overlay — fades in on hover for a soft "light up" effect */
.action-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.btn:hover .action-icon::after,
button:hover .action-icon::after,
a:hover .action-icon::after,
[role="button"]:hover .action-icon::after,
.action-icon:hover::after {
  opacity: 1;
}

.btn > .action-icon:first-child {
  margin-right: 0.2em;
}

.action-icon--flag {
  width: 0.85em;
  height: 0.85em;
  -webkit-mask-image: url('/icons/flag.png');
  mask-image: url('/icons/flag.png');
}

.action-icon--envelope {
  -webkit-mask-image: url('/icons/envelope.png');
  mask-image: url('/icons/envelope.png');
}

.action-icon--bookmark {
  -webkit-mask-image: url('/icons/bookmark.png');
  mask-image: url('/icons/bookmark.png');
}
.action-icon--bookmark-filled {
  -webkit-mask-image: url('/icons/bookmark-filled.png');
  mask-image: url('/icons/bookmark-filled.png');
}
.action-icon--highlighter {
  -webkit-mask-image: url('/icons/highlighter-line.png');
  mask-image: url('/icons/highlighter-line.png');
}

.action-icon--user {
  -webkit-mask-image: url('/icons/user.png');
  mask-image: url('/icons/user.png');
}

.action-icon--chevron-left {
  -webkit-mask-image: url('/icons/chevron-right.png');
  mask-image: url('/icons/chevron-right.png');
  transform: scaleX(-1);
}

.action-icon--chevron-right {
  -webkit-mask-image: url('/icons/chevron-right.png');
  mask-image: url('/icons/chevron-right.png');
}

.action-icon--search {
  -webkit-mask-image: url('/icons/search.png');
  mask-image: url('/icons/search.png');
}

.action-icon--hashtag {
  -webkit-mask-image: url('/icons/hashtag.png');
  mask-image: url('/icons/hashtag.png');
}

.action-icon--pencil {
  -webkit-mask-image: url('/icons/pencil.png');
  mask-image: url('/icons/pencil.png');
}

.action-icon--trash {
  width: 0.9em;
  height: 0.9em;
  -webkit-mask-image: url('/icons/trash.png?v=2');
  mask-image: url('/icons/trash.png?v=2');
}

.action-icon--send {
  -webkit-mask-image: url('/icons/send.png');
  mask-image: url('/icons/send.png');
}

.action-icon--add-image {
  -webkit-mask-image: url('/icons/add-image.png');
  mask-image: url('/icons/add-image.png');
}

.action-icon--plus {
  -webkit-mask-image: url('/icons/plus.png');
  mask-image: url('/icons/plus.png');
}

.action-icon--eye {
  -webkit-mask-image: url('/icons/eye.png');
  mask-image: url('/icons/eye.png');
}

.action-icon--eye-off {
  width: 0.85em;
  height: 0.85em;
  -webkit-mask-image: url('/icons/eye-off.png');
  mask-image: url('/icons/eye-off.png');
}

.action-icon--share {
  -webkit-mask-image: url('/icons/share.png');
  mask-image: url('/icons/share.png');
}

.action-icon--exit {
  -webkit-mask-image: url('/icons/exit.png');
  mask-image: url('/icons/exit.png');
}

.action-icon--bell {
  -webkit-mask-image: url('/icons/bell.png');
  mask-image: url('/icons/bell.png');
}

.action-icon--bell-ring {
  -webkit-mask-image: url('/icons/bell-ring.png');
  mask-image: url('/icons/bell-ring.png');
}

.action-icon--bell-slash {
  -webkit-mask-image: url('/icons/bell-slash.png');
  mask-image: url('/icons/bell-slash.png');
}

.action-icon--heart {
  -webkit-mask-image: url('/icons/heart.png');
  mask-image: url('/icons/heart.png');
}

.action-icon--heart-filled {
  -webkit-mask-image: url('/icons/heart-filled.png');
  mask-image: url('/icons/heart-filled.png');
}

.action-icon--thumbtack {
  -webkit-mask-image: url('/icons/thumbtack.png');
  mask-image: url('/icons/thumbtack.png');
}

.action-icon--cross {
  width: 0.75em;
  height: 0.75em;
  -webkit-mask-image: url('/icons/cross.png');
  mask-image: url('/icons/cross.png');
}

.action-icon--ban {
  -webkit-mask-image: url('/icons/ban.png');
  mask-image: url('/icons/ban.png');
}

.action-icon--arrow-left {
  -webkit-mask-image: url('/icons/arrow-left.png');
  mask-image: url('/icons/arrow-left.png');
}

.action-icon--arrow-right {
  -webkit-mask-image: url('/icons/arrow-right.png');
  mask-image: url('/icons/arrow-right.png');
}

.action-icon--civpage {
  -webkit-mask-image: url('/icons/civpage.png');
  mask-image: url('/icons/civpage.png');
}

.action-icon--comment {
  -webkit-mask-image: url('/icons/comment.png');
  mask-image: url('/icons/comment.png');
}

.action-icon--level-down {
  -webkit-mask-image: url('/icons/level-down.png');
  mask-image: url('/icons/level-down.png');
}

.action-icon--feather {
  -webkit-mask-image: url('/icons/feather.png');
  mask-image: url('/icons/feather.png');
}

.action-icon--newspaper {
  -webkit-mask-image: url('/icons/newspaper.png');
  mask-image: url('/icons/newspaper.png');
}

.action-icon--link {
  -webkit-mask-image: url('/icons/link.png');
  mask-image: url('/icons/link.png');
}

.action-icon--add-image {
  -webkit-mask-image: url('/icons/add-image.png');
  mask-image: url('/icons/add-image.png');
}

.action-icon--bookmark-add {
  -webkit-mask-image: url('/icons/bookmark-add.png');
  mask-image: url('/icons/bookmark-add.png');
}

.action-icon--horizontal-rule {
  -webkit-mask-image: url('/icons/horizontal-rule.png');
  mask-image: url('/icons/horizontal-rule.png');
}

.action-icon--section-divider {
  -webkit-mask-image: url('/icons/section-divider.png');
  mask-image: url('/icons/section-divider.png');
}

.action-icon--block-quote {
  -webkit-mask-image: url('/icons/block-quote.png');
  mask-image: url('/icons/block-quote.png');
}

.action-icon--list-bullet {
  -webkit-mask-image: url('/icons/list-bullet.png');
  mask-image: url('/icons/list-bullet.png');
}

.action-icon--task-list {
  -webkit-mask-image: url('/icons/task-list.png');
  mask-image: url('/icons/task-list.png');
}
.action-icon--task-list::after { -webkit-mask-image: url('/icons/task-list-filled.png'); mask-image: url('/icons/task-list-filled.png'); }

.action-icon--grip-vertical {
  -webkit-mask-image: url('/icons/grip-vertical.png');
  mask-image: url('/icons/grip-vertical.png');
}

.action-icon--brain-lightning {
  -webkit-mask-image: url('/icons/compass.png');
  mask-image: url('/icons/compass.png');
}

.action-icon--angle-right {
  width: 0.6em;
  height: 0.6em;
  -webkit-mask-image: url('/icons/angle-right.png');
  mask-image: url('/icons/angle-right.png');
}

.action-icon--refresh {
  -webkit-mask-image: url('/icons/refresh.png');
  mask-image: url('/icons/refresh.png');
}

.action-icon--compress {
  -webkit-mask-image: url('/icons/compress.png');
  mask-image: url('/icons/compress.png');
}

.action-icon--expand {
  -webkit-mask-image: url('/icons/expand.png');
  mask-image: url('/icons/expand.png');
}

.action-icon--letter-case {
  -webkit-mask-image: url('/icons/letter-case.png');
  mask-image: url('/icons/letter-case.png');
}

.action-icon--book-font {
  -webkit-mask-image: url('/icons/book-font.png');
  mask-image: url('/icons/book-font.png');
}

.action-icon--text-check {
  -webkit-mask-image: url('/icons/text-check.png');
  mask-image: url('/icons/text-check.png');
}

.action-icon--translate {
  -webkit-mask-image: url('/icons/translate.png');
  mask-image: url('/icons/translate.png');
}

.action-icon--comment-question {
  -webkit-mask-image: url('/icons/comment-question.png');
  mask-image: url('/icons/comment-question.png');
}

.action-icon--quote-right {
  -webkit-mask-image: url('/icons/quote-right.png');
  mask-image: url('/icons/quote-right.png');
}

.action-icon--table {
  -webkit-mask-image: url('/icons/table.png');
  mask-image: url('/icons/table.png');
}
.action-icon--table::after { -webkit-mask-image: url('/icons/table-filled.png'); mask-image: url('/icons/table-filled.png'); }

.action-icon--find-replace {
  -webkit-mask-image: url('/icons/find-replace.png');
  mask-image: url('/icons/find-replace.png');
}
.action-icon--find-replace::after { -webkit-mask-image: url('/icons/find-replace-filled.png'); mask-image: url('/icons/find-replace-filled.png'); }

.action-icon--callout {
  -webkit-mask-image: url('/icons/callout.png');
  mask-image: url('/icons/callout.png');
}
.action-icon--callout::after { -webkit-mask-image: url('/icons/callout-filled.png'); mask-image: url('/icons/callout-filled.png'); }

.action-icon--menu-burger {
  -webkit-mask-image: url('/icons/menu-burger.png');
  mask-image: url('/icons/menu-burger.png');
}

.action-icon--crown {
  -webkit-mask-image: url('/icons/crown.png');
  mask-image: url('/icons/crown.png');
}

.action-icon--shield {
  -webkit-mask-image: url('/icons/shield.png');
  mask-image: url('/icons/shield.png');
}

.action-icon--microphone {
  -webkit-mask-image: url('/icons/microphone.png');
  mask-image: url('/icons/microphone.png');
}

.action-icon--star {
  -webkit-mask-image: url('/icons/star.png');
  mask-image: url('/icons/star.png');
}

.action-icon--star-filled {
  -webkit-mask-image: url('/icons/star-filled.png');
  mask-image: url('/icons/star-filled.png');
}

.action-icon--volume {
  -webkit-mask-image: url('/icons/volume.png');
  mask-image: url('/icons/volume.png');
}

.action-icon--volume-mute {
  -webkit-mask-image: url('/icons/volume-mute.png');
  mask-image: url('/icons/volume-mute.png');
}

.action-icon--writing-assistant {
  -webkit-mask-image: url('/icons/writing-assistant.png');
  mask-image: url('/icons/writing-assistant.png');
}

.action-icon--palette {
  -webkit-mask-image: url('/icons/paint-bucket.png');
  mask-image: url('/icons/paint-bucket.png');
}

.action-icon--research {
  -webkit-mask-image: url('/icons/global-research.png');
  mask-image: url('/icons/global-research.png');
}

.action-icon--names {
  -webkit-mask-image: url('/icons/id-badge.png');
  mask-image: url('/icons/id-badge.png');
}
.action-icon--characters {
  -webkit-mask-image: url('/icons/book-user.png');
  mask-image: url('/icons/book-user.png');
}
.action-icon--family-tree {
  -webkit-mask-image: url('/icons/chart-tree.png');
  mask-image: url('/icons/chart-tree.png');
}

.action-icon--coach {
  -webkit-mask-image: url('/icons/graduation-cap.png');
  mask-image: url('/icons/graduation-cap.png');
}

.action-icon--explain {
  -webkit-mask-image: url('/icons/bulb.png');
  mask-image: url('/icons/bulb.png');
}

.action-icon--chat {
  -webkit-mask-image: url('/icons/bubble-discussion.png');
  mask-image: url('/icons/bubble-discussion.png');
}

.action-icon--ai-feedback {
  -webkit-mask-image: url('/icons/sparkles.png');
  mask-image: url('/icons/sparkles.png');
}

.action-icon--collaborate {
  -webkit-mask-image: url('/icons/people-group.png');
  mask-image: url('/icons/people-group.png');
}

.action-icon--revisions {
  -webkit-mask-image: url('/icons/time-past.png');
  mask-image: url('/icons/time-past.png');
}

.action-icon--plot {
  -webkit-mask-image: url('/icons/plot.png');
  mask-image: url('/icons/plot.png');
}

.action-icon--footnote {
  -webkit-mask-image: url('/icons/footnote.png');
  mask-image: url('/icons/footnote.png');
}

.action-icon--math {
  -webkit-mask-image: url('/icons/math.png');
  mask-image: url('/icons/math.png');
}

.action-icon--align-left {
  -webkit-mask-image: url('/icons/align-left.png');
  mask-image: url('/icons/align-left.png');
}
.action-icon--align-center {
  -webkit-mask-image: url('/icons/align-center.png');
  mask-image: url('/icons/align-center.png');
}
.action-icon--align-right {
  -webkit-mask-image: url('/icons/align-left.png');
  mask-image: url('/icons/align-left.png');
  transform: scaleX(-1);
}

/* --- Filled hover variants for action icons --- */

.action-icon--flag::after { -webkit-mask-image: url('/icons/flag-filled.png'); mask-image: url('/icons/flag-filled.png'); }
.action-icon--envelope::after { -webkit-mask-image: url('/icons/envelope-filled.png'); mask-image: url('/icons/envelope-filled.png'); }
.action-icon--bookmark::after { -webkit-mask-image: url('/icons/bookmark-filled.png'); mask-image: url('/icons/bookmark-filled.png'); }
.action-icon--user::after { -webkit-mask-image: url('/icons/user-filled.png'); mask-image: url('/icons/user-filled.png'); }
.action-icon--book-user::after { -webkit-mask-image: url('/icons/book-user-filled.png'); mask-image: url('/icons/book-user-filled.png'); }
.action-icon--pencil::after { -webkit-mask-image: url('/icons/pencil-filled.png'); mask-image: url('/icons/pencil-filled.png'); }
.action-icon--trash::after { -webkit-mask-image: url('/icons/trash-filled.png'); mask-image: url('/icons/trash-filled.png'); }
.action-icon--send::after { -webkit-mask-image: url('/icons/send-filled.png'); mask-image: url('/icons/send-filled.png'); }
.action-icon--plus::after { -webkit-mask-image: url('/icons/plus-filled.png'); mask-image: url('/icons/plus-filled.png'); }
.action-icon--eye::after { -webkit-mask-image: url('/icons/eye-filled.png'); mask-image: url('/icons/eye-filled.png'); }
.action-icon--eye-off::after { -webkit-mask-image: url('/icons/eye-off-filled.png'); mask-image: url('/icons/eye-off-filled.png'); }
.action-icon--share::after { -webkit-mask-image: url('/icons/share-filled.png'); mask-image: url('/icons/share-filled.png'); }
.action-icon--exit::after { -webkit-mask-image: url('/icons/exit-filled.png'); mask-image: url('/icons/exit-filled.png'); }
.action-icon--bell::after { -webkit-mask-image: url('/icons/bell-filled.png'); mask-image: url('/icons/bell-filled.png'); }
.action-icon--bell-ring::after { -webkit-mask-image: url('/icons/bell-ring-filled.png'); mask-image: url('/icons/bell-ring-filled.png'); }
.action-icon--heart::after { -webkit-mask-image: url('/icons/heart-filled.png'); mask-image: url('/icons/heart-filled.png'); }
.action-icon--thumbtack::after { -webkit-mask-image: url('/icons/thumbtack-filled.png'); mask-image: url('/icons/thumbtack-filled.png'); }
.action-icon--cross::after { -webkit-mask-image: url('/icons/cross-filled.png'); mask-image: url('/icons/cross-filled.png'); }
.action-icon--ban::after { -webkit-mask-image: url('/icons/ban-filled.png'); mask-image: url('/icons/ban-filled.png'); }
.action-icon--civpage::after { -webkit-mask-image: url('/icons/civpage-filled.png'); mask-image: url('/icons/civpage-filled.png'); }
.action-icon--comment::after { -webkit-mask-image: url('/icons/comment-filled.png'); mask-image: url('/icons/comment-filled.png'); }
.action-icon--chart::after { -webkit-mask-image: url('/icons/chart-filled.png'); mask-image: url('/icons/chart-filled.png'); }
.action-icon--feather::after { -webkit-mask-image: url('/icons/feather-filled.png'); mask-image: url('/icons/feather-filled.png'); }
.action-icon--newspaper::after { -webkit-mask-image: url('/icons/newspaper-filled.png'); mask-image: url('/icons/newspaper-filled.png'); }
.action-icon--link::after { -webkit-mask-image: url('/icons/link-filled.png'); mask-image: url('/icons/link-filled.png'); }
.action-icon--refresh::after { -webkit-mask-image: url('/icons/refresh-filled.png'); mask-image: url('/icons/refresh-filled.png'); }
.action-icon--letter-case::after { -webkit-mask-image: url('/icons/letter-case-filled.png'); mask-image: url('/icons/letter-case-filled.png'); }
.action-icon--compress::after { -webkit-mask-image: url('/icons/compress-filled.png'); mask-image: url('/icons/compress-filled.png'); }
.action-icon--expand::after { -webkit-mask-image: url('/icons/expand-filled.png'); mask-image: url('/icons/expand-filled.png'); }
.action-icon--book-font::after { -webkit-mask-image: url('/icons/book-font-filled.png'); mask-image: url('/icons/book-font-filled.png'); }
.action-icon--text-check::after { -webkit-mask-image: url('/icons/text-check-filled.png'); mask-image: url('/icons/text-check-filled.png'); }
.action-icon--translate::after { -webkit-mask-image: url('/icons/translate-filled.png'); mask-image: url('/icons/translate-filled.png'); }
.action-icon--comment-question::after { -webkit-mask-image: url('/icons/comment-question-filled.png'); mask-image: url('/icons/comment-question-filled.png'); }
.action-icon--quote-right::after { -webkit-mask-image: url('/icons/quote-right-filled.png'); mask-image: url('/icons/quote-right-filled.png'); }
.action-icon--menu-burger::after { -webkit-mask-image: url('/icons/menu-burger-filled.png'); mask-image: url('/icons/menu-burger-filled.png'); }
.action-icon--crown::after { -webkit-mask-image: url('/icons/crown-filled.png'); mask-image: url('/icons/crown-filled.png'); }
.action-icon--shield::after { -webkit-mask-image: url('/icons/shield-filled.png'); mask-image: url('/icons/shield-filled.png'); }
.action-icon--microphone::after { -webkit-mask-image: url('/icons/microphone-filled.png'); mask-image: url('/icons/microphone-filled.png'); }
.action-icon--star::after { -webkit-mask-image: url('/icons/star-filled.png'); mask-image: url('/icons/star-filled.png'); }
.action-icon--volume::after { -webkit-mask-image: url('/icons/volume-filled.png'); mask-image: url('/icons/volume-filled.png'); }
.action-icon--volume-mute::after { -webkit-mask-image: url('/icons/volume-mute-filled.png'); mask-image: url('/icons/volume-mute-filled.png'); }
.action-icon--writing-assistant::after { -webkit-mask-image: url('/icons/writing-assistant-filled.png'); mask-image: url('/icons/writing-assistant-filled.png'); }
.action-icon--research::after { -webkit-mask-image: url('/icons/global-research-filled.png'); mask-image: url('/icons/global-research-filled.png'); }
.action-icon--names::after { -webkit-mask-image: url('/icons/id-badge-filled.png'); mask-image: url('/icons/id-badge-filled.png'); }
.action-icon--characters::after { -webkit-mask-image: url('/icons/book-user-filled.png'); mask-image: url('/icons/book-user-filled.png'); }
.action-icon--family-tree::after { -webkit-mask-image: url('/icons/chart-tree-filled.png'); mask-image: url('/icons/chart-tree-filled.png'); }
.action-icon--coach::after { -webkit-mask-image: url('/icons/graduation-cap-filled.png'); mask-image: url('/icons/graduation-cap-filled.png'); }
.action-icon--explain::after { -webkit-mask-image: url('/icons/bulb-filled.png'); mask-image: url('/icons/bulb-filled.png'); }
.action-icon--chat::after { -webkit-mask-image: url('/icons/bubble-discussion-filled.png'); mask-image: url('/icons/bubble-discussion-filled.png'); }
.action-icon--ai-feedback::after { -webkit-mask-image: url('/icons/sparkles-filled.png'); mask-image: url('/icons/sparkles-filled.png'); }
.action-icon--collaborate::after { -webkit-mask-image: url('/icons/people-group-filled.png'); mask-image: url('/icons/people-group-filled.png'); }
.action-icon--revisions::after { -webkit-mask-image: url('/icons/time-past-filled.png'); mask-image: url('/icons/time-past-filled.png'); }
.action-icon--plot::after { -webkit-mask-image: url('/icons/plot-filled.png'); mask-image: url('/icons/plot-filled.png'); }
.action-icon--footnote::after { -webkit-mask-image: url('/icons/footnote-filled.png'); mask-image: url('/icons/footnote-filled.png'); }
.action-icon--math::after { -webkit-mask-image: url('/icons/math-filled.png'); mask-image: url('/icons/math-filled.png'); }
.action-icon--align-left::after { -webkit-mask-image: url('/icons/align-left-filled.png'); mask-image: url('/icons/align-left-filled.png'); }
.action-icon--align-center::after { -webkit-mask-image: url('/icons/align-center-filled.png'); mask-image: url('/icons/align-center-filled.png'); }
.action-icon--align-right::after { -webkit-mask-image: url('/icons/align-left-filled.png'); mask-image: url('/icons/align-left-filled.png'); }

/* Close icon via CSS pseudo-element — add to any button to replace × */
.icon-close {
  font-size: inherit;
  line-height: 1;
}

.icon-close::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url('/icons/close.png');
  mask-image: url('/icons/close.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: -0.05em;
}

/* --- Resting Badge --- */

.civpage-resting {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.8em;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 2em;
  margin-bottom: 1.5rem;
}

/* --- Feature Cards (anonymous visitors) --- */

/* --- Monument context line (unauthenticated) --- */

.civpage-context {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}

/* === Monument Visual Customization === */

.civpage--has-bg {
  overflow: hidden;
}
.civpage--has-bg > * {
  position: relative;
  z-index: 1;
}
.civpage-bg-layer {
  z-index: 0 !important;
}

.civpage--fullpage-bg .civpage-bg-layer {
  position: fixed;
  inset: 0;
  border-radius: 0;
  z-index: -1;
}

.civpage--has-corners {
  padding: 3rem 2.5rem;
}

.civpage-corner {
  position: absolute;
  pointer-events: none;
}
.civpage-corner--tl { top: 10px; left: 10px; }
.civpage-corner--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.civpage-corner--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.civpage-corner--br { bottom: 10px; right: 10px; transform: scale(-1); }

.civpage-corner-inset {
  position: absolute;
  pointer-events: none;
}
.civpage-corner-inset--tl { top: 20px; left: 20px; }
.civpage-corner-inset--tr { top: 20px; right: 20px; }
.civpage-corner-inset--bl { bottom: 20px; left: 20px; }
.civpage-corner-inset--br { bottom: 20px; right: 20px; }

.civpage-header-ornament {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.civpage-footer-ornament {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.civpage-title-underline {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-bottom: 0.3rem;
}

.civpage-sigil {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  opacity: 0.6;
}

.civpage-monogram {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
  opacity: 0.6;
}

/* Gilded shimmer animation */
@keyframes civpage-shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}
.civpage-shimmer {
  animation: civpage-shimmer 4s ease-in-out infinite;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .civpage-corner { width: 35px !important; height: 35px !important; }
  .civpage-corner-inset { width: 12px !important; height: 12px !important; }
}

/* --- Manifesto (replaces feature cards) --- */

.frontpage-manifesto {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  border-top: 1px solid var(--border-subtle);
}

.frontpage-manifesto-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.frontpage-manifesto-text:last-of-type {
  margin-bottom: 2rem;
}

.frontpage-manifesto-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Responsive --- */

@media (max-width: 1199px) {
  .frontpage-side-panel {
    display: none;
  }
}

@media (max-width: 639px) {
  .screen-frontpage {
    padding: 2rem 0.75rem;
    min-height: calc(100vh - 3.5rem);
    justify-content: flex-start;
    padding-top: 2rem;
  }

  .civpage {
    padding: 1.5rem 1.2rem;
  }

  .civpage--has-corners {
    padding: 2rem 1.5rem;
  }

  .civpage-title {
    font-size: 1.6rem;
  }

  .civpage-body {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .civpage-actions {
    flex-direction: column;
    gap: 0.8rem;
    align-items: stretch;
  }

  .civpage-actions-left,
  .civpage-actions-right {
    justify-content: center;
  }

  .civpage-nav-row {
    gap: 0.6rem;
  }

  .civpage-nav-hint {
    display: none;
  }

  .frontpage-manifesto {
    padding: 2rem 1rem 3rem;
  }

  .frontpage-manifesto-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   Auth Screens (Login / Register)
   ========================================================================== */

.screen-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 2rem 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-xl);
}

.auth-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.5;
}

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

.auth-form .input-group + .input-group {
  margin-top: 1rem;
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 3.2rem;
}

.auth-pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  font-family: var(--font-sans);
}

.auth-pw-toggle:hover {
  color: var(--text-primary);
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.auth-forgot {
  color: var(--accent);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.auth-forgot:hover {
  color: var(--accent-hover);
}

.auth-submit {
  margin-top: 1.5rem;
  width: 100%;
}

.auth-submit.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pw-req-list {
  list-style: none;
  padding: 0;
  margin-top: 8px;
  font-size: 0.75rem;
}

.pw-req-item {
  padding: 2px 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pw-req-item.met {
  color: var(--success);
}

.pw-req-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.pw-req-item.met .pw-req-dot {
  background: var(--success);
}

.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-footer a {
  color: var(--accent);
  font-weight: 500;
}

.auth-footer a:hover {
  color: var(--accent-hover);
}

.auth-error {
  padding: 0.7em 0.9em;
  background-color: rgba(204, 68, 68, 0.08);
  border: 1px solid rgba(204, 68, 68, 0.2);
  border-radius: var(--radius);
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* --- OAuth Buttons & Divider --- */

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  width: 100%;
}

.oauth-btn svg {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
}

.auth-divider-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: lowercase;
}

/* --- Connected Accounts (Settings) --- */

.oauth-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.oauth-account-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.oauth-account-name {
  font-weight: 600;
  min-width: 80px;
}

.oauth-account-email {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Registration Steps --- */

.auth-steps {
  position: relative;
  overflow: hidden;
}

.auth-step {
  display: none;
  animation: step-enter 300ms ease forwards;
}

.auth-step.active {
  display: block;
}

@keyframes step-enter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auth-step-back {
  animation: step-enter-back 300ms ease forwards;
}

@keyframes step-enter-back {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Progress dots */
.auth-progress {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

/* --- Registration: First Words (unused, kept for backwards compat) --- */

.auth-prompt {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* --- Registration: Welcome --- */

.auth-welcome {
  text-align: center;
}

.auth-welcome-greeting {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.auth-welcome-paths {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.auth-welcome-path {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 1em 1.2em;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  transition:
    color var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}

.auth-welcome-path:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}

/* --- Verify: Welcome Flow --- */

.verify-showcase {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.verify-showcase-card {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.verify-showcase-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.verify-showcase-card-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.verify-showcase-card-desc {
  font-size: 0.8rem;
  opacity: 0.7;
  line-height: 1.3;
}
.verify-ai-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.verify-ai-cards {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.verify-ai-card {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.verify-ai-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.verify-ai-card.selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.verify-ai-card-name {
  font-weight: 600;
  margin-bottom: 0.15rem;
  font-size: 0.9rem;
}
.verify-ai-card-desc {
  font-size: 0.8rem;
  opacity: 0.7;
}
.verify-walkthrough {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.8;
}

/* --- Captcha --- */

.captcha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.captcha-card {
  padding: 1.25rem 1rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  text-align: center;
  user-select: none;
}

.captcha-card:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-hover, var(--bg));
  transform: translateY(-1px);
}

.captcha-card:disabled {
  cursor: default;
  opacity: 0.7;
}

.captcha-card--selected {
  border-color: var(--accent);
}

.captcha-card--correct {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  animation: captcha-pulse 0.5s ease;
}

.captcha-card--wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  animation: captcha-shake 0.4s ease;
}

@keyframes captcha-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes captcha-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.captcha-status {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  min-height: 1.2em;
  color: var(--text-muted);
  transition: color 0.2s;
}

.captcha-status--error {
  color: #ef4444;
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .auth-card {
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
  }

  .auth-title {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   Editor Screen (Monument + Creative Writing)
   ========================================================================== */

.screen-editor {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}

/* --- Form / Reach meta row --- */

.editor-writing-meta {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.editor-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.editor-meta-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-meta-field select {
  min-width: 140px;
}

.editor-meta-spacer {
  margin-left: auto;
  position: relative;
}

.editor-export-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.3rem;
  min-width: 150px;
  padding: 0.3rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--shadow);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* --- Editor Breadcrumbs --- */

.editor-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.editor-breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
}

.editor-breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--text-muted);
}

.breadcrumb-current {
  color: var(--text-secondary);
}

/* --- Title Input --- */

input.editor-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.3em 0;
  width: 100%;
  letter-spacing: -0.02em;
  transition: border-color var(--transition);
}

input.editor-title::placeholder {
  color: var(--text-muted);
}

input.editor-title:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* No title indent — title stays left-aligned regardless of sidebar */

/* --- Formatting Toolbar --- */

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-secondary);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition);
  white-space: nowrap;
}

.toolbar-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border);
}

.toolbar-btn.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.toolbar-btn.tb-italic {
  font-style: italic;
}

.toolbar-btn-preview {
  font-size: 0.75rem;
  padding: 0 0.7em;
}

.toolbar-control-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.toolbar-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--border-subtle);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.toolbar-overflow-toggle {
  display: none;
}

/* --- Editor Area --- */

.editor-area {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  overflow: hidden;
}

/* --- Find & Replace --- */

.find-replace-bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.find-replace-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.find-replace-bar input {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  outline: none;
  flex: 1;
  min-width: 0;
}
.find-replace-bar input:focus {
  border-color: var(--accent);
}
.find-replace-bar .match-count {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 40px;
  text-align: center;
}
.find-replace-bar button {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.find-replace-bar button:hover {
  background: var(--accent-subtle);
  color: var(--text-primary);
}
.find-replace-bar .case-toggle {
  font-weight: 600;
  opacity: 0.5;
}
.find-replace-bar .case-toggle.active {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.find-match {
  background: rgba(201, 168, 76, 0.2);
  border-radius: 2px;
}
.find-match-active {
  background: rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 0 1px var(--accent);
}

/* --- Exploration Pane --- */

.exploration-pane { display: none; flex-direction: column; border-top: 2px solid var(--border); background: var(--bg-primary); min-height: 80px; overflow: hidden; }
.exploration-pane--open { display: flex; }

/* Maximize/restore toggle for editor and exploration pane */
.editor-area { position: relative; }
.editor-area-maximize {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
/* Only show when exploration pane is open */
.exploration-split-active .editor-area-maximize { display: flex; }
.editor-area:hover .editor-area-maximize { opacity: 1; }
.editor-area-maximize:hover { color: var(--accent); border-color: var(--accent); }

.exploration-maximize {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
}
.exploration-maximize:hover { color: var(--accent); }

.exploration-maximize-icon, .exploration-restore-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.exploration-maximize-icon {
  mask-image: url('/icons/maximize.png');
  -webkit-mask-image: url('/icons/maximize.png');
}
.exploration-restore-icon {
  mask-image: url('/icons/restore.png');
  -webkit-mask-image: url('/icons/restore.png');
}

/* Editor maximized: editor fills space, exploration collapses to header strip */
.editor-maximized .editor-area { flex: 1 !important; }
.editor-maximized .exploration-pane { flex: 0 !important; min-height: 0 !important; max-height: 36px; overflow: hidden; }
.editor-maximized .exploration-content { display: none; }
.editor-maximized .exploration-divider { display: none; }

/* Exploration maximized: exploration fills space, editor collapses to thin strip */
.exploration-maximized .editor-area { flex: 0 !important; max-height: 36px; overflow: hidden; min-height: 0 !important; }
.exploration-maximized .editor-area .editor-body-container { display: none; }
.exploration-maximized .exploration-pane { flex: 1 !important; }
.exploration-divider { height: 6px; cursor: row-resize; background: transparent; position: relative; flex-shrink: 0; }
.exploration-divider::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 3px; background: var(--border-subtle); border-radius: 2px; }
.exploration-divider:hover::after { background: var(--accent); }

/* Header with breadcrumbs and actions */
.exploration-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 1rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); flex-shrink: 0; }
.exploration-breadcrumbs { display: flex; align-items: center; gap: 0.15rem; overflow: hidden; flex: 1; min-width: 0; }
.exploration-breadcrumb-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.exploration-breadcrumb { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.exploration-breadcrumb-sep { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.exploration-header-actions { display: flex; gap: 0.35rem; align-items: center; flex-shrink: 0; }

/* Mode toggle: Plot / Draft */
.exploration-mode-toggle { display: flex; border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.exploration-mode-btn { font-size: 0.7rem; padding: 0.2rem 0.55rem; border: none; background: none; color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition); font-family: var(--font-sans); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.2rem; }
.exploration-mode-btn:hover { color: var(--text-primary); }
.exploration-mode-btn--active { background: var(--accent-subtle, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent); font-weight: 600; }
.exploration-mode-btn + .exploration-mode-btn { border-left: 1px solid var(--border-subtle); }

.exploration-close { background: none; border: none; font-size: 1.1rem; color: var(--text-muted); cursor: pointer; padding: 0 0.25rem; line-height: 1; }
.exploration-close:hover { color: var(--text-primary); }

.exploration-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.exploration-content-row { display: flex; flex: 1; overflow: hidden; }
.exploration-messages { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; min-width: 0; position: relative; }

/* Cast sidebar — scrollable list of characters encountered */
.exploration-cast { width: 64px; flex-shrink: 0; border-left: 1px solid var(--border-subtle); overflow-y: auto; display: none; flex-direction: column; align-items: center; padding: 0.5rem 0; gap: 0.5rem; }
.exploration-cast-title { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.exploration-cast-list { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.exploration-cast-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; cursor: pointer; transition: opacity 0.15s; }
.exploration-cast-item:hover { opacity: 0.8; }
.exploration-cast-portrait { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-subtle); transition: border-color 0.15s; }
.exploration-cast-item:hover .exploration-cast-portrait { border-color: var(--accent); }
.exploration-cast-initial { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; border: 2px solid var(--border-subtle); transition: border-color 0.15s; }
.exploration-cast-item:hover .exploration-cast-initial { border-color: var(--accent); }
.exploration-cast-name { font-size: 0.58rem; color: var(--text-muted); text-align: center; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exploration-input-area { display: flex; gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid var(--border-subtle); align-items: center; background: var(--bg-secondary); flex-wrap: wrap; }
.exploration-input { flex: 1; resize: none; font-size: 0.85rem; padding: 0.5rem 0.75rem; min-height: 2.2rem; max-height: 6rem; }

/* Loading state */
.exploration-loading { font-size: 0.82rem; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }
.exploration-send { flex-shrink: 0; align-self: center; height: 2.2rem; }

/* Exploration tag blocks */
.explore-draft { padding: 0.75rem 1rem; background: var(--bg-secondary); border-left: 3px solid var(--accent); border-radius: var(--radius); margin: 0.5rem 0; font-size: 0.9rem; line-height: 1.65; }
.explore-actions { display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap; }
.explore-action-btn { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; }
.explore-action-btn:hover { color: var(--accent); border-color: var(--accent); }
.explore-character, .explore-location, .explore-creature { padding: 0.6rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); margin: 0.35rem 0; }
.explore-entity-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
.explore-entity-body { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.explore-craft { padding: 0.75rem 1rem; border-left: 2px solid var(--text-muted); border-radius: 0 var(--radius) var(--radius) 0; margin: 0.5rem 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
.explore-craft-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; font-weight: 600; font-style: normal; }
/* ── Thread cards — clear visual separation between options ────────── */
.explore-thread-card { background: var(--bg-secondary); border-radius: var(--radius); border-left: 3px solid var(--accent); padding: 0.85rem 1rem; margin: 0.5rem 0; cursor: pointer; transition: background var(--transition); }
.explore-thread-card:hover { background: var(--bg-elevated); }
.explore-thread-card-title { font-family: var(--font-serif); font-size: 0.92rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; }
.explore-thread-card-body { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.6rem; }
.explore-thread-tradeoffs { display: flex; flex-direction: column; gap: 0.2rem; }
.explore-thread-tf { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.75rem; line-height: 1.4; }
.explore-thread-tf-gain { color: var(--success, #5a9a6a); }
.explore-thread-tf-cost { color: var(--text-muted); }
.explore-thread-tf-sym { font-weight: 700; width: 0.8rem; text-align: center; flex-shrink: 0; }
.explore-thread-card-actions { display: none; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); }
.explore-thread-card--open .explore-thread-card-actions { display: flex; }
.explore-thread-card--open { background: var(--bg-elevated); }
.explore-thread-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.explore-thread-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.explore-thread-group-label { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); width: 5.5rem; flex-shrink: 0; }

/* Button spinner (inline, for any action button) */
.btn-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; }
.explore-image { padding: 0.6rem 0.85rem; border: 1px dashed var(--border-subtle); border-radius: var(--radius); margin: 0.35rem 0; font-size: 0.82rem; color: var(--text-muted); }
.explore-text { font-size: 0.88rem; line-height: 1.6; color: var(--text-primary); margin: 0.35rem 0; }

/* (Old plot planner styles removed — see plot-designer screen) */

/* Selection action bar */
.explore-selection-bar { position: fixed; z-index: 100; display: flex; gap: 0.25rem; padding: 0.3rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.explore-selection-btn { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: none; background: none; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.explore-selection-btn:hover { color: var(--accent); }

.exploration-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin-bottom: 0.4rem; }
.exploration-pill { font-size: 0.72rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); white-space: nowrap; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 0.25rem; }
.exploration-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* Node number badge — used by tag-renderer.js and exploration-pane.js */
.exploration-node-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.exploration-node-number--sm { width: 16px; height: 16px; font-size: 0.55rem; }

/* Exploration highlight — marks text that spawned an AI exploration thread */
.exploration-highlight {
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 3s ease 2s, background-color 0.15s;
  opacity: 1;
}
.exploration-highlight--faded {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.exploration-highlight--faded:hover {
  opacity: 1;
}

/* (Old beat-ref-strip, act rooms, experiment cards, beat detail area removed — see plot-designer screen) */

/* ── Timeline layout (no vertical rail — cards provide structure) ── */

.exploration-timeline {
  position: relative;
  padding-left: 0.5rem;
}

/* Vertical rail line — removed, cards now show structure */
.exploration-timeline::before { display: none; }

/* Timeline node — collapsed row (default) */
.exploration-tl-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.1rem 0;
  margin: 0.1rem 0;
  border-radius: var(--radius);
  transition: background var(--transition);
}

/* Rail dot — hidden, replaced by thread card dots */
.exploration-tl-dot {
  display: none;
  position: absolute;
  left: -23px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-subtle);
  border: 2px solid var(--bg-primary);
  z-index: 1;
  flex-shrink: 0;
}
.exploration-tl-node--active > .exploration-tl-dot { background: var(--accent, #c9a84c); }
.exploration-tl-node--expanded > .exploration-tl-dot { background: var(--accent, #c9a84c); width: 12px; height: 12px; left: -24px; top: 9px; }

/* Header row (always visible, clickable) */
.exploration-tl-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}
.exploration-tl-header-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: -1px; }
.exploration-tl-header-row:hover .exploration-tl-headline { color: var(--text-primary); }

/* Headline text */
.exploration-tl-headline {
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exploration-tl-node--active .exploration-tl-headline { color: var(--text-primary); font-weight: 500; }
.exploration-tl-node--expanded .exploration-tl-headline { color: var(--text-primary); font-weight: 600; }

/* Timestamp */
.exploration-tl-time {
  font-size: 0.62rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Node number badge */
.exploration-tl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

/* Expanded response area (inline, below the headline row) */
.exploration-tl-body {
  display: none;
  padding: 0.6rem 0.5rem 0.75rem;
  margin: 0.15rem 0 0.3rem;
  border-left: 2px solid var(--accent, #c9a84c);
  margin-left: 6px;
}
.exploration-tl-node--expanded .exploration-tl-body { display: block; }

/* Query text shown in expanded state */
.exploration-tl-query {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-style: italic;
}

/* Response content wrapper */
.exploration-tl-response {
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Delete button on hover */
.exploration-tl-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.25rem;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.exploration-tl-header-row:hover .exploration-tl-delete { opacity: 0.5; }
.exploration-tl-delete:hover { opacity: 1 !important; color: var(--error, #e55); }

/* Branch fork area */
.exploration-tl-branches {
  padding: 0.2rem 0 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.exploration-tl-branch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background var(--transition);
  position: relative;
}
.exploration-tl-branch:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: -1px; }
.exploration-tl-branch:hover .exploration-tl-branch-label { color: var(--accent); }

/* Branch connector from rail */
.exploration-tl-branch::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 50%;
  width: 16px;
  height: 0;
  border-top: 1px dashed var(--border-subtle);
}

.exploration-tl-branch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.exploration-tl-branch--active .exploration-tl-branch-dot { background: var(--accent, #c9a84c); }
.exploration-tl-branch--explored .exploration-tl-branch-dot { background: var(--success, #4ad97a); }
.exploration-tl-branch--unexplored .exploration-tl-branch-dot { background: transparent; border: 1.5px dashed var(--text-muted); }

.exploration-tl-branch-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exploration-tl-branch--active .exploration-tl-branch-label { color: var(--accent); font-weight: 500; }
.exploration-tl-branch--explored .exploration-tl-branch-label { color: var(--text-secondary); }
.exploration-tl-branch--unexplored .exploration-tl-branch-label { color: var(--text-muted); }

.exploration-tl-branch-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active path rail highlight — gold line segment */
.exploration-tl-rail-active::before {
  background: var(--accent, #c9a84c) !important;
}

/* Thinking shimmer on timeline node — covers the entire node */
.exploration-tl-node--thinking {
  position: relative;
  overflow: hidden;
}
.exploration-tl-node--thinking::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 15%, transparent) 50%, transparent 100%);
  animation: shimmer-sweep 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Character portraits */
.exploration-portraits { display: flex; gap: 0.2rem; margin-right: 0.4rem; flex-shrink: 0; }
.exploration-portrait { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-subtle); }
.exploration-portrait--placeholder { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border-subtle); }

.explore-ripple { margin: 0.5rem 0; border-left: 2px solid var(--resonance, #d4a574); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--resonance, #d4a574) 4%, transparent); overflow: hidden; }
.explore-ripple-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; cursor: pointer; user-select: none; }
.explore-ripple-label { font-size: 0.78rem; font-style: italic; color: var(--text-muted); }
.explore-ripple-chevron { font-size: 0.65rem; color: var(--text-muted); }
.explore-ripple-body { display: none; padding: 0.3rem 0.75rem 0.5rem; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }
.explore-ripple--open .explore-ripple-body { display: block; }
.explore-family { padding: 0.6rem 0.85rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--success, #4a8a5a); border-radius: var(--radius); margin: 0.35rem 0; }
.explore-family-event { font-weight: 600; font-size: 0.82rem; color: var(--success, #4a8a5a); margin-bottom: 0.25rem; text-transform: capitalize; }

/* --- ProseMirror Editor --- */

.editor-body-container {
  background-color: var(--bg-secondary);
  border: none;
  border-radius: var(--radius);
  padding: 1.4em 1.6em;
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: auto;
  overscroll-behavior: contain;
}

.editor-body-container .ProseMirror {
  outline: none;
  min-height: 100%;
  white-space: pre-wrap;
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  caret-color: var(--accent);
  font-variant-ligatures: common-ligatures;
  font-kerning: auto;
  -webkit-text-size-adjust: 100%;
}

.editor-body-container .ProseMirror:focus {
  outline: none;
}

.editor-body-container .ProseMirror::selection {
  background: var(--accent-subtle);
}

/* Inline marks must not break vertical rhythm or become blocks */
/* Inline marks must not break vertical rhythm or become blocks */
.editor-body-container .ProseMirror strong,
.editor-body-container .ProseMirror em,
.editor-body-container .ProseMirror u,
.editor-body-container .ProseMirror s,
.editor-body-container .ProseMirror code,
.editor-body-container .ProseMirror mark,
.editor-body-container .ProseMirror a {
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
}

.editor-body-container .ProseMirror sub,
.editor-body-container .ProseMirror sup {
  display: inline;
  line-height: 0;
}

/* ProseMirror typography */

.editor-body-container .ProseMirror p {
  margin: 0 0 var(--reading-para-spacing) 0;
}

.editor-body-container .ProseMirror p:last-child {
  margin-bottom: 0;
}

.editor-body-container .ProseMirror h1,
.editor-body-container .ProseMirror h2,
.editor-body-container .ProseMirror h3 {
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  contain: layout style;
}

.editor-body-container .ProseMirror h1 {
  font-size: 2rem;
  margin: 0 0 0.5em;
  font-weight: 700;
}

.editor-body-container .ProseMirror h2 {
  font-size: 1.5rem;
  margin: 1.5em 0 0.5em;
  font-weight: 600;
}

.editor-body-container .ProseMirror h3 {
  font-size: 1.25rem;
  margin: 1.2em 0 0.4em;
  font-weight: 600;
}

.editor-body-container .ProseMirror blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  background: var(--accent-subtle);
  color: var(--text-secondary);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ProseMirror .callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
  padding: 0.75rem 1.25rem;
  padding-top: 0.5rem;
  margin: 1rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
}
.ProseMirror .callout-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.ProseMirror .callout-label:hover {
  opacity: 1;
}
.ProseMirror .callout-note { border-left-color: var(--accent); }
.ProseMirror .callout-note .callout-label { color: var(--accent); }
.ProseMirror .callout-warning { border-left-color: var(--error); }
.ProseMirror .callout-warning .callout-label { color: var(--error); }
.ProseMirror .callout-worldbuilding { border-left-color: #7c6bb5; }
.ProseMirror .callout-worldbuilding .callout-label { color: #7c6bb5; }
.ProseMirror .callout-idea { border-left-color: var(--success); }
.ProseMirror .callout-idea .callout-label { color: var(--success); }

.editor-body-container .ProseMirror pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 0.85em;
  font-family: var(--font-mono);
  line-height: 1.6;
  margin: 1.5em 0;
}

.editor-body-container .ProseMirror code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-secondary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.editor-body-container .ProseMirror pre code {
  background: none;
  padding: 0;
}

.editor-body-container .ProseMirror hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2.5em 0;
}

.editor-body-container .ProseMirror ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 1em 0;
}

.editor-body-container .ProseMirror ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 1em 0;
}

.editor-body-container .ProseMirror li {
  margin: 0.3em 0;
}

.editor-body-container .ProseMirror .task-list {
  list-style: none;
  padding-left: 0;
}
.editor-body-container .ProseMirror .task-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.editor-body-container .ProseMirror .task-checkbox {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.3rem;
  border: 2px solid var(--text-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.editor-body-container .ProseMirror .task-checkbox:hover {
  border-color: var(--accent);
}
.editor-body-container .ProseMirror .task-list-item.checked .task-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}
.editor-body-container .ProseMirror .task-list-item.checked .task-checkbox::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid var(--bg-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.editor-body-container .ProseMirror .task-list-item.checked .task-list-content {
  text-decoration: line-through;
  opacity: 0.5;
}
.editor-body-container .ProseMirror .task-list-content {
  flex: 1;
  min-width: 0;
}

.editor-body-container .ProseMirror a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.3);
  text-underline-offset: 0.15em;
}

.editor-body-container .ProseMirror img {
  max-width: 100%;
  height: auto;
}

/* ProseMirror tables */

.editor-body-container .ProseMirror .tableWrapper {
  overflow-x: auto;
  margin: 1rem 0;
}

/* Column resizing — StableTableView only recalculates colgroup on
   actual colwidth changes, eliminating layout jumps from decoration updates. */
.editor-body-container .ProseMirror.resize-cursor table {
  cursor: col-resize;
}

/* The columnResizing plugin inserts a div.column-resize-handle widget inside
   cells on hover. Without absolute positioning it's a block div that pushes
   content down, causing the table to jump. */
.editor-body-container .ProseMirror .column-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  pointer-events: none;
  z-index: 20;
}

.editor-body-container .ProseMirror table {
  border-collapse: collapse;
  table-layout: auto;
  overflow: visible;
}

.editor-body-container .ProseMirror td,
.editor-body-container .ProseMirror th {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  position: relative;
}

/* Table cell paragraphs: the columnResizing plugin inserts a widget div after
   the <p> inside each cell on hover, making <p> no longer :last-child and
   re-enabling its default bottom margin. Zero it out so rows don't jump. */
.editor-body-container .ProseMirror td > p,
.editor-body-container .ProseMirror th > p {
  margin-bottom: 0;
}

.editor-body-container .ProseMirror th {
  background: var(--bg-elevated);
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.editor-body-container .ProseMirror .selectedCell {
  background: var(--accent-subtle);
}

/* Column resizing disabled — its TableView nodeView causes layout jumps on
   every decoration change by resetting colgroup widths via updateColumnsOnResize.
   Tables use table-layout:auto with content-driven column widths instead. */

/* Table context menu */
.table-ctx-menu {
  position: fixed;
  z-index: 1000;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3em 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.table-ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45em 1em;
  font: 0.88rem var(--font-sans);
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
}

.table-ctx-item:hover:not(:disabled) {
  background: var(--accent-subtle);
}

.table-ctx-item:disabled {
  color: var(--text-muted);
  cursor: default;
}

.table-ctx-item--danger {
  color: var(--error);
}

.table-ctx-item--danger:hover {
  background: rgba(204,68,68,0.1);
}

.table-ctx-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.3em 0;
}

/* Mermaid diagrams */
.mermaid-block-wrapper {
  margin: 1em 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.mermaid-render {
  padding: 1.5em;
  display: flex;
  justify-content: center;
  background: var(--bg-surface);
  min-height: 60px;
}

.mermaid-render svg {
  max-width: 100%;
  height: auto;
}

.mermaid-placeholder {
  color: var(--text-muted);
  font: 0.9rem var(--font-sans);
  padding: 2em;
  text-align: center;
  cursor: pointer;
}

.mermaid-block-wrapper:hover:not(.mermaid-editing) {
  border-color: var(--accent);
  cursor: pointer;
}

.mermaid-block-wrapper.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
}

/* Edit mode */
.mermaid-editing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-color: var(--accent);
}

.mermaid-source-editor {
  font: 0.85rem/1.5 var(--font-mono);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: none;
  border-right: 1px solid var(--border-subtle);
  padding: 1em;
  resize: vertical;
  min-height: 120px;
  outline: none;
}

.mermaid-source-editor::placeholder {
  color: var(--text-muted);
}

.mermaid-live-preview {
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-surface);
  overflow: auto;
}

.mermaid-live-preview svg {
  max-width: 100%;
  height: auto;
}

.mermaid-error {
  color: var(--error);
  font: 0.8rem var(--font-mono);
  padding: 1em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Image node ── */

.pm-image {
    margin: 0.8em 0;
    text-align: center;
}

/* Display modes */
.pm-image[data-display="inline-left"] {
    float: left;
    margin: 0 1.2em 0.8em 0;
    max-width: 75%;
    text-align: left;
}
.pm-image[data-display="inline-right"] {
    float: right;
    margin: 0 0 0.8em 1.2em;
    max-width: 75%;
    text-align: right;
}
.pm-image[data-display="break-center"] {
    float: none;
    text-align: center;
    margin: 0.8em 0;
}
.pm-image[data-display="break-full"] {
    float: none;
    margin: 0.8em 0;
}
.pm-image[data-display="break-full"] .pm-image-img {
    width: 100%;
}

/* Backward compat: old data-align */
.pm-image[data-align="left"] { float: left; margin: 0 1.2em 0.8em 0; max-width: 75%; text-align: left; }
.pm-image[data-align="right"] { float: right; margin: 0 0 0.8em 1.2em; max-width: 75%; text-align: right; }
.pm-image[data-align="center"] { text-align: center; }

/* Float clearfix — non-paragraph blocks clear floats */
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3,
.ProseMirror blockquote, .ProseMirror hr,
.ProseMirror pre, .ProseMirror table,
.ProseMirror ol, .ProseMirror ul,
.ProseMirror .callout {
    clear: both;
}

/* Reader float clearfix */
.reader-chapter h1, .reader-chapter h2, .reader-chapter h3,
.reader-chapter blockquote, .reader-chapter hr,
.reader-chapter pre, .reader-chapter table,
.reader-chapter ol, .reader-chapter ul,
.reader-chapter .callout {
    clear: both;
}

/* Reader table styles */
.reader-chapter table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.8em 0;
}

.reader-chapter td,
.reader-chapter th {
    border: 1px solid var(--border);
    padding: 0.5em 0.75em;
    text-align: left;
    vertical-align: top;
}

.reader-chapter th {
    background: var(--bg-elevated);
    font-weight: 600;
}

/* Reader mermaid styles */
.reader-chapter .mermaid-block {
    margin: 1em 0;
    padding: 1.5em;
    display: flex;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.reader-chapter .mermaid-block svg {
    max-width: 100%;
    height: auto;
}

/* Reader float for images rendered as raw <img> via toDOM */
.reader-chapter img[data-display="inline-left"] {
    float: left;
    margin: 0 1.2em 0.8em 0;
    max-width: 75%;
}
.reader-chapter img[data-display="inline-right"] {
    float: right;
    margin: 0 0 0.8em 1.2em;
    max-width: 75%;
}
.reader-chapter img[data-display="break-full"] {
    width: 100%;
}

.pm-image-wrap {
    display: inline-block;
    position: relative;
}

.pm-image-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

.pm-image--selected .pm-image-wrap {
    outline: 2px solid var(--accent, #c9a84c);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* ── Resize handles (four corners) ── */

.pm-image-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent, #c9a84c);
    border: 2px solid var(--bg-surface, #16161e);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 5;
}

.pm-image-handle--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.pm-image-handle--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.pm-image-handle--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.pm-image-handle--se { bottom: -4px; right: -4px; cursor: nwse-resize; }

.pm-image-wrap:hover .pm-image-handle,
.pm-image--selected .pm-image-handle {
    opacity: 1;
}

/* ── Display mode toolbar ── */

.pm-image-toolbar {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    background: var(--bg-elevated, #1e1e28);
    border: 1px solid var(--border-subtle, #2a2a35);
    border-radius: 4px;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 5;
}

.pm-image-wrap:hover .pm-image-toolbar,
.pm-image--selected .pm-image-toolbar {
    opacity: 1;
}

.pm-image-toolbar-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-image-toolbar-btn:hover {
    background: var(--accent-subtle, rgba(201,168,76,0.08));
    color: var(--text-primary);
}

.pm-image-toolbar-btn--active {
    background: var(--accent-subtle, rgba(201,168,76,0.15));
    color: var(--accent, #c9a84c);
}

.pm-image-toolbar-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* ── Placeholder ── */

.pm-image-placeholder {
    padding: 2em;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* Collaboration cursors */

.pm-remote-cursor {
  position: relative;
  border-left: 2px solid;
  margin-left: -1px;
  margin-right: -1px;
  display: inline;
}

.pm-remote-cursor-label {
  position: absolute;
  top: -1.4em;
  left: -1px;
  font-size: 0.7rem;
  color: white;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.pm-remote-selection {
  /* background-color set inline by collaboration plugin */
}

/* ProseMirror gapcursor */

.ProseMirror .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: relative;
}

.ProseMirror .ProseMirror-gapcursor:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid var(--text-primary);
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

@keyframes ProseMirror-cursor-blink {
  to { visibility: hidden; }
}

/* Footnotes */

.footnote-ref { cursor: pointer; }
.footnote-number { color: var(--accent); font-size: 0.75em; cursor: pointer; }
.footnote-marker { cursor: pointer; }
.footnote-hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  max-width: 320px;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  line-height: 1.5;
  font-family: var(--font-serif);
}
.civpage-footnotes {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: var(--font-serif);
}
.civpage-footnotes ol { padding-left: 1.5rem; }
.civpage-footnotes li { margin-bottom: 0.3rem; }
.footnote-back { text-decoration: none; color: var(--accent); margin-left: 0.25rem; }
.footnote-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 260px;
  max-width: 400px;
}
.footnote-popover-input {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  resize: vertical;
}
.footnote-popover-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

/* Math */
.math-inline { cursor: pointer; padding: 0 2px; }
.math-display { cursor: pointer; text-align: center; margin: 1rem 0; }
.math-empty { color: var(--text-secondary); font-style: italic; font-size: 0.85em; }
.math-error { color: var(--error); font-family: var(--font-mono); font-size: 0.85em; }
.math-edit-input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  outline: none;
}
textarea.math-edit-input { width: 100%; resize: vertical; }

/* Code block editor wrapper */
.code-block-wrapper { position: relative; margin: 1rem 0; }
.code-lang-select {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  font-size: 0.7rem;
  padding: 2px 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.code-block-wrapper:hover .code-lang-select,
.code-lang-select:focus { opacity: 1; }

/* --- Section divider NodeView --- */

.section-divider-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
  cursor: pointer;
  user-select: none;
}

.section-divider-wrapper:hover {
  opacity: 0.8;
}

.section-divider-wrapper.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.section-divider-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-divider-inner svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Preview --- */

.editor-preview {
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  padding: 1.4em 1.6em;
  max-width: var(--reading-width);
}

.editor-preview p {
  margin: 0 0 var(--reading-para-spacing) 0;
}

.editor-preview p:last-child {
  margin-bottom: 0;
}

/* --- Status row --- */

.editor-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  gap: 0.75rem;
}

.editor-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.editor-stats-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}

.editor-word-limit {
  margin-left: -0.6rem;
  color: var(--text-muted);
}

.editor-word-limit.warn,
[data-word-count].warn {
  color: #c9a84c;
}

.editor-word-limit.over,
[data-word-count].over {
  color: var(--error);
  font-weight: 600;
}

/* --- Draft Indicator --- */

.editor-draft-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.editor-draft-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--text-muted);
  opacity: 0.3;
  transition: background-color var(--transition), opacity var(--transition);
}

.editor-draft-dot.just-saved {
  background-color: var(--success);
  opacity: 1;
  animation: save-pulse 2s ease-out forwards;
}

@keyframes save-pulse {
  0% { opacity: 1; transform: scale(1.4); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.3; transform: scale(1); }
}

.editor-draft-dot.saving {
  background-color: var(--accent);
  opacity: 1;
  animation: presence-pulse 1s ease-in-out infinite;
}

.editor-draft-dot.unsaved {
  background-color: var(--text-muted);
  opacity: 0.3;
}

.editor-autosave-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0 0.5rem;
}

/* --- Page Strip --- */

.editor-page-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  scrollbar-width: thin;
}

.page-card {
  flex-shrink: 0;
  width: 90px;
  padding: 0.5rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.page-card:hover {
  border-color: var(--border);
  background: var(--bg-elevated);
}

.page-card.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.page-card-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-card.active .page-card-num {
  color: var(--accent);
}

.page-card-preview {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.2rem;
  line-height: 1.3;
}

.page-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  border-style: dashed;
}

.page-card-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Mood Picker (used in modal) --- */

.mood-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --- Publish Bar (legacy) --- */

.editor-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* --- Monument Quality Panel --- */

.civpage-quality-panel {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.civpage-quality-title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.civpage-quality-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.civpage-quality-check {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.civpage-quality-check.pass {
  color: var(--success);
}

.civpage-quality-check.fail {
  color: var(--error);
}

.civpage-quality-icon {
  font-weight: 700;
  width: 1rem;
  text-align: center;
}

/* --- CivPage editor preview wrapper --- */

/* CivPage editor preview: the wrapper must grow to contain ALL content
   so that absolute-positioned corners sit at the true edges. The editor-area
   scrolls the whole wrapper rather than the body scrolling independently. */
.editor-area:has(.civpage--editor-preview) {
  overflow: auto;
  display: block;
}
.civpage--editor-preview {
  max-width: 720px;
  margin: 0 auto;
  overflow: visible;
  min-height: 100%;
}
.civpage--editor-preview .editor-body-container.civpage-body {
  overflow: visible;
  flex: none;
  background: none;
  border: none;
  padding: 0;
  min-height: 300px;
}
.civpage--editor-preview .civpage-title[contenteditable] {
  outline: none;
  cursor: text;
}
.civpage--editor-preview .civpage-title[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}

/* Inside the editor preview, .civpage-body is the ProseMirror container */
.civpage--editor-preview .civpage-body {
  /* Override the prose-renderer .civpage-body pointer-events — keep editable */
  pointer-events: auto;
  /* Match the writing editor's min-height */
  min-height: 400px;
}

/* The .editor-body-container class is added alongside .civpage-body */
.civpage--editor-preview .editor-body-container.civpage-body .ProseMirror {
  padding: 0;
}

/* --- Action Bar (writing editor) --- */

.editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 8px;
  border-top: 1px solid var(--border-subtle);
}

/* --- Page Setup (header/footer) --- */

.page-setup {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.page-setup-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color var(--transition);
}

.page-setup-toggle:hover {
  color: var(--text-secondary);
}

.page-setup-body {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.75rem 0;
}

.page-setup-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-setup-field label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-setup-field input {
  font-size: 0.85rem;
  padding: 0.4em 0.6em;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition);
}

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

/* --- Editor Layout (sidebar + main) --- */

.editor-layout {
  display: flex;
  align-items: stretch;
  margin-top: 1rem;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.editor-layout .editor-sidebar {
  display: none;
}

.editor-layout.has-sidebar .editor-sidebar {
  display: flex;
}

.editor-sidebar {
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow-y: auto;
}

.editor-main-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Column Resize Handles --- */

.resize-handle-col {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  touch-action: none;
}

.resize-handle-col::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background 0.15s, height 0.15s;
}

.resize-handle-col:hover::after {
  background: var(--accent);
  height: 60px;
}

.resize-handle-col.dragging::after {
  background: var(--accent);
  height: 60px;
}

.resize-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  cursor: col-resize;
}

.editor-sidebar--collapsed {
  display: none !important;
}

.editor-sidebar--collapsed + .resize-handle-col {
  display: none;
}

.sidebar-restore-strip {
  width: 6px;
  cursor: pointer;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}

.sidebar-restore-strip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background 0.15s;
}

.sidebar-restore-strip:hover::after {
  background: var(--accent);
}

.editor-layout.has-sidebar .editor-preview {
  border-radius: var(--radius);
}

/* --- Sidebar --- */

.sidebar-header {
  padding: 0.7rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.chapter-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.chapter-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.82rem;
  transition: background-color var(--transition);
  position: relative;
}

.chapter-item:hover {
  background: var(--bg-elevated);
}

.chapter-item.active {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

.chapter-num {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 1.4em;
}

.chapter-item.active .chapter-num {
  color: var(--accent);
}

.chapter-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-rename-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-size: inherit;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  outline: none;
}

.chapter-wc {
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chapter-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.15rem;
  line-height: 1;
  transition: opacity var(--transition), color var(--transition);
}

.chapter-item:hover .chapter-delete {
  opacity: 1;
}

.chapter-delete:hover {
  color: var(--error, #c44);
}

.chapter-add-btn {
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  flex-shrink: 0;
  transition: color var(--transition), background-color var(--transition);
}

.chapter-add-btn:hover {
  color: var(--accent);
  background: var(--bg-elevated);
}

/* --- Editor Mode Selector --- */

.editor-mode-selector {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.editor-mode-btn {
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
  white-space: nowrap;
}

.editor-mode-btn:not(:last-child) {
  border-right: 1px solid var(--border-subtle);
}

.editor-mode-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-elevated);
}

.editor-mode-btn.active {
  color: var(--accent);
  background: var(--accent-subtle);
  font-weight: 600;
}

/* --- Minimal Mode --- */

.mode-minimal .editor-toolbar,
.mode-minimal .editor-sidebar,
.mode-minimal .page-setup,
.mode-minimal .editor-writing-meta,
.mode-minimal .tool-column {
  display: none !important;
}
.mode-minimal .writing-editor-layout {
  padding-left: 0;
  padding-right: 0;
}

.mode-minimal .editor-body-container {
  border-radius: 0;
  border-top: none;
}

.mode-minimal .editor-meta {
  justify-content: center;
}

.mode-minimal .editor-meta .editor-draft-status,
.mode-minimal .editor-meta [data-page-info] {
  display: none;
}

body.hide-writing-stats .editor-stats,
body.hide-writing-stats .stats-bar {
  display: none !important;
}

body.writing-minimal .topbar {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

body.writing-minimal .topbar:hover {
  opacity: 1;
}

/* --- Collab Mode (placeholder) --- */

.mode-collab .editor-layout {
  /* Future: room for co-author panel */
}

/* --- Find & Replace --- */

.find-replace-bar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  animation: find-replace-in 0.15s ease;
}

@keyframes find-replace-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.find-replace-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.find-replace-input {
  width: 100%;
  max-width: 480px;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
}

.find-replace-input:focus {
  border-color: var(--accent);
}

.find-replace-info {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 60px;
}

.find-replace-toggle {
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.find-replace-toggle:hover {
  color: var(--text-secondary);
  background: var(--bg-elevated);
}

.find-replace-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.find-replace-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}

.find-replace-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.ai-panel-placeholder {
  color: var(--text-secondary, #888);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.9em;
}
.ai-panel-setup-prompt {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #888);
  font-size: 0.9em;
}
.ai-panel-setup-prompt p { margin-bottom: 12px; }
.ai-panel-setup-prompt .btn { font-size: 0.85em; }

/* --- Research Sidebar (now an inner element inside AI panel content) --- */

.research-sidebar {
  flex-direction: column;
  overflow: hidden;
  display: flex;
  flex: 1;
}

@keyframes research-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.research-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.research-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.research-expand-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.research-expand-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }

/* Search bar */
.research-search-bar {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.research-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  outline: none;
}
.research-search-input:focus { border-color: var(--accent); }
.research-search-input::placeholder { color: var(--text-muted); }

/* Loading state */
.research-loading {
  padding: 1.5rem 0.8rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Sidebar body (non-expanded mode) */
.research-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Internal split layout for expanded mode */
.research-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.research-tree-col {
  width: 150px;
  min-width: 120px;
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  padding: 0.3rem 0;
}

.research-content-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Folder tree */
.research-folder-tree {
  overflow-y: auto;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  max-height: 200px;
}

.research-folder-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 4px;
  gap: 4px;
}

.research-folder-row:hover {
  background: var(--bg-elevated);
}

.research-folder-row.active {
  background: var(--bg-active, var(--bg-elevated));
  font-weight: 600;
}

.research-folder-toggle {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  cursor: pointer;
}

.research-folder-toggle-spacer {
  flex-shrink: 0;
  width: 14px;
}

.research-folder-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 0.8rem;
}

.research-folder-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

/* Item list */
.research-items-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.research-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 4px;
}

.research-item-row:hover {
  background: var(--bg-elevated);
}

.research-item-row.active {
  background: var(--bg-active, var(--bg-elevated));
}

.research-item-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.research-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.research-type-badge {
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  flex-shrink: 0;
  text-transform: capitalize;
}

.research-empty {
  padding: 2rem 0.8rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Item preview */
.research-preview-container {
  flex-shrink: 0;
}

.research-item-preview {
  padding: 0.75rem 0.8rem;
  border-top: 1px solid var(--border-subtle);
}

.research-preview-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.research-preview-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.research-preview-url {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Item viewer (expanded mode) */
.research-item-viewer {
  min-height: 100px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* Backlinks section (wired in later tasks) */
.research-backlinks {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* New Folder button */
.research-new-folder-btn {
  padding: 4px 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
}
.research-new-folder-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Folder context menu */
.research-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 140px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 4px 0;
  font-size: 0.82rem;
}
.research-ctx-menu-item {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
}
.research-ctx-menu-item:hover {
  background: var(--bg-elevated);
}
.research-ctx-menu-item.danger {
  color: var(--danger, #e74c3c);
}
.research-ctx-menu-item.danger:hover {
  background: rgba(231, 76, 60, 0.1);
}

/* Editor context menu */
.editor-ctx-menu {
  position: fixed;
  z-index: 2000;
  background: var(--bg-elevated, #1e1e28);
  border: 1px solid var(--border-subtle, #2a2a35);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 180px;
  max-width: 280px;
  padding: 4px 0;
  font-family: var(--font-sans, system-ui);
  font-size: 0.82rem;
}

.editor-ctx-menu hr {
  border: none;
  border-top: 1px solid var(--border-subtle, #2a2a35);
  margin: 4px 0;
}

.editor-ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-primary, #d4d0c8);
  transition: background 0.1s;
  white-space: nowrap;
}

.editor-ctx-item:hover {
  background: var(--accent-subtle, rgba(201, 168, 76, 0.08));
}

.editor-ctx-item.disabled {
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.editor-ctx-shortcut {
  color: var(--text-muted, #5a5650);
  font-size: 0.72rem;
  margin-left: 1.5rem;
}

.editor-ctx-arrow {
  color: var(--text-muted);
  margin-left: 0.5rem;
  font-size: 0.7rem;
}

.editor-ctx-submenu {
  position: absolute;
  left: calc(100% - 2px);
  top: -4px;
  background: var(--bg-elevated, #1e1e28);
  border: 1px solid var(--border-subtle, #2a2a35);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 120px;
  padding: 4px 0;
}

.editor-ctx-submenu .editor-ctx-item {
  padding: 5px 10px;
}

/* Inline placeholders */
.ph-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-family: var(--font-sans, system-ui);
  font-size: 0.75rem;
  vertical-align: baseline;
  cursor: default;
  white-space: nowrap;
  user-select: none;
}

.ph-todo { background: rgba(234,179,8,0.15); color: #eab308; }
.ph-research { background: rgba(59,130,246,0.15); color: #3b82f6; }
.ph-plot { background: rgba(168,85,247,0.15); color: #a855f7; }
.ph-name { background: rgba(34,197,94,0.15); color: #22c55e; }

.ph-type {
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.ph-text {
  color: var(--text-primary, #d4d0c8);
  font-size: 0.78rem;
}

.ph-resolve {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 0.15rem;
  margin-left: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s;
  color: inherit;
  line-height: 1;
}

.ph-pill:hover .ph-resolve {
  opacity: 1;
}

/* Placeholder panel */
.ph-panel-header {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
}

.ph-panel-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.75rem 0.6rem;
  line-height: 1.5;
}

.ph-panel-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}

.ph-panel-item:hover {
  background: var(--accent-subtle, rgba(201,168,76,0.08));
}

.ph-panel-badge {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.ph-panel-text {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Folder inline rename input */
.research-folder-rename-input {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0 2px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

/* Add item row (+ button) */
.research-add-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
  flex-shrink: 0;
}

.research-add-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.research-add-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Add item dropdown menu */
.research-add-menu {
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 4px 0;
  font-size: 0.82rem;
}

.research-add-menu-item {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
}
.research-add-menu-item:hover {
  background: var(--bg-elevated);
}

.research-add-menu-input {
  width: calc(100% - 24px);
  margin: 4px 12px 8px;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  outline: none;
  font-family: inherit;
}
.research-add-menu-input:focus {
  border-color: var(--accent);
}

/* Entity items */
.research-item--entity { display: flex; align-items: center; gap: 0.5rem; }
.research-item--entity-thumb { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.research-item--entity-type { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }

.research-item--stale {
    opacity: 0.5;
    border-left: 3px solid var(--error);
}
.research-item--stale-label {
    font-size: 0.72rem;
    color: var(--error);
    font-style: italic;
}
.research-item--stale-dismiss {
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
}
.research-item--stale-dismiss:hover {
    color: var(--error);
}

/* Drag-and-drop visual feedback */
.research-sidebar.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary));
}

/* Header action buttons (export, import, expand) */
.research-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.research-action-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.research-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
}

/* Note editor textarea */
.research-note-editor {
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.5rem;
  outline: none;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}
.research-note-editor:focus {
  border-color: var(--accent);
}

/* Web link card */
.research-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.research-link-favicon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.research-link-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.research-link-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.research-link-image {
  max-width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 4px;
}

.research-link-open {
  display: inline-block;
  margin-top: 0.3rem;
  text-decoration: none;
  text-align: center;
}

/* Image preview */
.research-image-preview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
}

/* PDF viewer */
.research-pdf-viewer {
  width: 100%;
  height: 200px;
  max-height: 200px;
  border-radius: 4px;
}

/* Audio player */
.research-audio-player {
  width: 100%;
}

/* Video embed */
.research-video-embed {
  width: 100%;
  height: 180px;
  max-height: 180px;
  border-radius: 4px;
}

/* Web clip body */
.research-clip-body {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-y: auto;
  max-height: 200px;
  padding: 0.3rem 0;
}

/* Lightbox overlay */
.research-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-lightbox-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 4px;
}

.research-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.research-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Fullscreen content overlay -- extends lightbox pattern */
.research-content-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.research-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}

.research-overlay-video {
  width: 80vw;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.research-overlay-pdf {
  width: 90vw;
  height: 85vh;
  max-width: 1200px;
  border-radius: 8px;
}

.research-overlay-clip {
  max-width: 800px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 2rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.7;
}

.research-overlay-audio {
  max-width: 500px;
  width: 90vw;
  background: var(--bg-secondary);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
}

.research-overlay-audio .research-overlay-title {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.research-overlay-audio audio {
  width: 100%;
}

.research-overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.research-overlay-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.research-overlay-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.research-overlay-toolbar .btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
}

.research-overlay-toolbar .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Tag pills */
.research-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 0.4rem;
  min-height: 22px;
}

.research-tag-pill {
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.research-tag-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 1px 4px;
}
.research-tag-edit-btn:hover {
  color: var(--text-primary);
}

.research-tag-input {
  flex: 1;
  min-width: 80px;
  font-size: 0.78rem;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

/* Missing content state */
.research-missing-content {
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Editable title */
.research-inline-title {
  margin-bottom: 0.3rem;
}

.research-inline-title-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.research-inline-title-text:hover {
  border-bottom-color: var(--text-muted);
}

.research-inline-title-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 2px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

/* Content area within preview */
.research-content-area {
  margin-top: 0.5rem;
  position: relative;
}

/* Research item action toolbar */
.research-action-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.research-action-toolbar .btn {
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* Research Intelligence toggle */
.research-intelligence-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}
.research-intelligence-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.research-intelligence-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Research Indexing Progress */
.research-index-progress {
  padding: 0.5rem 0.75rem;
}
.research-index-bar {
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.research-index-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.research-index-status {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.research-index-active {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- Names Panel Content --- */

.names-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
}

.names-origin-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.names-gender-pills {
  display: flex;
  gap: 0.3rem;
}

.names-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.names-pill:hover { color: var(--text-primary); border-color: var(--border); }
.names-pill.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }

.names-full-toggle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.names-generate-btn {
  width: 100%;
}

.names-results {
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  flex: 1;
}

.names-result-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  color: var(--text-primary);
}
.names-result-text { flex: 1; min-width: 0; }
.names-result-item:hover { background: var(--bg-elevated); }
.names-result-item.copied { color: var(--success); }
.names-add-char-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 14px; cursor: pointer;
  margin-left: 0.5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.names-add-char-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.names-add-char-btn:disabled { opacity: 0.5; cursor: default; }

.names-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.names-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.names-avatar-regen {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.names-result-item:hover .names-avatar-regen {
  opacity: 1;
}

.names-regen-icon {
  width: 10px;
  height: 10px;
  filter: var(--icon-filter, none);
}

.names-roll-again {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.4rem 0;
  text-decoration: underline;
}
.names-roll-again:hover { color: var(--text-secondary); }

/* ─── Characters Panel ─── */
.char-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem;
}
.char-header-title { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.char-add-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-secondary); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.char-add-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.char-highlight-toggles {
  display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.5rem;
}
.char-highlight-toggle {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem;
  color: var(--text-muted); cursor: pointer;
}
.char-search {
  width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary);
  font-size: 0.78rem; margin-bottom: 0.5rem; outline: none;
}
.char-search:focus { border-color: var(--accent); }
.char-list { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; overflow-y: auto; }
.char-empty { font-size: 0.75rem; color: var(--text-muted); padding: 1rem 0; text-align: center; }
.char-card {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-secondary); overflow: hidden;
}
.char-card.expanded { border-color: var(--accent); }
.char-card-summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem;
  cursor: pointer;
}
.char-card-summary:hover { background: var(--bg-elevated); }
.char-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

.char-portrait {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg-elevated);
}

.char-portrait-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.char-portrait-row-btn {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.char-portrait-row-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.char-portrait-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--shadow);
  padding: 4px;
  min-width: 180px;
}

.char-portrait-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}

.char-portrait-menu-item:hover {
  background: var(--bg-hover);
}

.char-menu-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(0.6);
}
.char-card-info { min-width: 0; flex: 1; }
.char-card-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-card-role { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-card-tree-btn {
  flex-shrink: 0; background: none; border: none;
  cursor: pointer; padding: 0.15rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
  margin-left: auto;
}
.char-tree-icon {
  width: 18px; height: 18px;
  filter: brightness(0) invert(0.5);
}
.char-card-summary:hover .char-card-tree-btn { opacity: 1; }
.char-card-tree-btn:hover .char-tree-icon { filter: brightness(0) invert(1); }
.char-detail { padding: 0.5rem; border-top: 1px solid var(--border); }
.char-section { margin-bottom: 0.5rem; }
.char-section-header {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; padding: 0.25rem 0; user-select: none;
}
.char-section-header::before { content: '\25BE '; font-size: 0.6rem; }
.char-section-header.collapsed::before { content: '\25B8 '; }
.char-section-body { padding-left: 0.25rem; }
.char-field { margin-bottom: 0.35rem; position: relative; }
.char-field-label { display: block; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.1rem; }
.char-field-input {
  width: 100%; padding: 0.25rem 0.4rem; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg-primary); color: var(--text-primary);
  font-size: 0.75rem; font-family: inherit; resize: vertical;
}
.char-field-input:focus { border-color: var(--accent); outline: none; }
.char-save-status {
  position: absolute; top: 0; right: 0; font-size: 0.6rem;
  color: var(--text-muted); opacity: 1; transition: opacity 1.5s ease 0.8s;
}
.char-save-status.char-save-fade { opacity: 0; }
.char-save-status.char-save-error { color: var(--danger, #e74c3c); transition: none; }
.char-actions {
  display: flex; gap: 0.35rem; flex-wrap: wrap; padding-top: 0.5rem;
  border-top: 1px solid var(--border); margin-top: 0.5rem;
}
.char-tree-btn { width: 100%; margin-top: 0.5rem; }

/* ─── Late-Join Family Attachment Banner ─── */
.char-family-attach-banner {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem; margin: 0.25rem 0;
  background: var(--bg-elevated); border: 1px dashed var(--accent-muted, #7c93b0);
  border-radius: 6px; font-size: 0.72rem;
}
.char-family-attach-link {
  color: var(--accent); cursor: pointer; text-decoration: underline;
  font-size: 0.72rem; flex: 1;
}
.char-family-attach-link:hover { color: var(--text-primary); }
.char-family-attach-dismiss {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.85rem; padding: 0 0.15rem; line-height: 1;
}
.char-family-attach-dismiss:hover { color: var(--text-primary); }
.char-family-attach-msg {
  color: var(--text-muted); font-size: 0.72rem; flex: 1;
}
.char-family-attach-form {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%;
}
.char-family-attach-role-row {
  display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
}
.char-family-attach-select {
  font-size: 0.72rem; padding: 0.2rem 0.3rem;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 4px;
  flex: 1; min-width: 0;
}
.char-family-attach-actions {
  display: flex; gap: 0.3rem; justify-content: flex-end;
}

/* ─── In-Text Entity Recognition ─── */
.char-name-highlight {
  text-decoration: underline;
  text-decoration-color: var(--accent-muted, #7c93b0);
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Entity highlight styles — subtle visual differentiation by type */
.entity-highlight--character {
  border-bottom: 1px solid var(--accent-subtle);
  cursor: pointer;
  transition: border-color 0.2s;
}
.entity-highlight--character:hover {
  border-color: var(--accent);
}

.entity-highlight--location {
  border-bottom: 1px dashed var(--accent-subtle);
  cursor: pointer;
  transition: border-color 0.2s;
}
.entity-highlight--location:hover {
  border-color: var(--accent);
}

.entity-highlight--creature {
  border-bottom: 1px dotted var(--accent-subtle);
  cursor: pointer;
  transition: border-color 0.2s;
}
.entity-highlight--creature:hover {
  border-color: var(--accent);
}

/* Initials avatar for entities without images */
.entity-popover-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem;
  user-select: none;
}
.char-popover {
  position: fixed; z-index: 200;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 200px; display: flex; gap: 12px; align-items: flex-start;
}
.char-popover-portrait {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--bg-elevated);
}
.char-popover-info { flex: 1; min-width: 0; }
.char-popover-name { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.char-popover-role { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.char-popover-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ─── Family Tree Overlay ─── */
.family-tree-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(22, 22, 30, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  font-family: var(--font-tree);
}

/* --- Topbar --- */
.family-tree-topbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
  min-height: 48px; flex-wrap: wrap;
}

/* --- Tabs --- */
.family-tree-tabs {
  display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.family-tree-tabs::-webkit-scrollbar { display: none; }
.family-tree-tab {
  padding: 0.65rem 1rem; border: none; background: none;
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: color 0.15s; font-family: var(--font-tree);
}
.family-tree-tab:hover { color: var(--text-primary); }
.family-tree-tab.active {
  color: var(--accent); font-weight: 600;
}
.family-tree-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 0.5rem; right: 0.5rem;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.family-tree-tab-new {
  color: var(--text-muted); font-size: 1rem; font-weight: 700;
  padding: 0.65rem 0.75rem;
}
.family-tree-tab-new:hover { color: var(--accent); }

/* --- Actions --- */
.family-tree-actions {
  display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
}
.family-tree-action-btn {
  padding: 0.35rem 0.6rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: var(--font-tree);
}
.family-tree-action-btn:hover {
  border-color: var(--accent); color: var(--text-primary);
}
.family-tree-action-btn--close {
  border: none; background: none; font-size: 1rem; color: var(--text-muted);
  padding: 0.35rem 0.5rem;
}
.family-tree-action-btn--close:hover { color: var(--error); }

.family-tree-style-picker {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: var(--font-tree);
  cursor: pointer;
}

/* --- Progress bar (topbar, kept for backward compat) --- */
.family-tree-progress {
  width: 100%; height: 3px; background: var(--border);
  border-radius: 2px; overflow: hidden; flex-basis: 100%;
}
.family-tree-progress-bar {
  height: 100%; background: var(--accent);
  transition: width 0.3s ease; border-radius: 2px;
}
.family-tree-progress-text {
  font-size: 0.7rem; color: var(--text-muted); flex-basis: 100%;
  padding: 0.15rem 0 0.25rem;
}

/* --- Generation progress panel (overlay in main area) --- */
.gen-progress-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 90%); max-height: 70vh;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  box-shadow: var(--shadow-xl);
  z-index: 50; display: flex; flex-direction: column;
  font-family: var(--font-tree);
  animation: gen-panel-in 0.3s ease;
}
@keyframes gen-panel-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.gen-progress-header {
  font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.gen-progress-status {
  font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem;
  min-height: 1.2em;
}
.gen-progress-bar-wrap {
  width: 100%; height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden; margin-bottom: 0.35rem;
}
.gen-progress-bar-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 3px; transition: width 0.4s ease;
}
.gen-progress-panel--done .gen-progress-bar-fill {
  background: #22c55e;
}
.gen-progress-panel--error .gen-progress-bar-fill {
  background: var(--error);
}
.gen-progress-count {
  font-size: 0.72rem; color: var(--text-muted);
  text-align: right; margin-bottom: 0.75rem; min-height: 1em;
}
.gen-progress-list {
  flex: 1; overflow-y: auto; max-height: 280px;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.gen-progress-member {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem; padding: 0.4rem 0.6rem;
  background: var(--bg-secondary); border-radius: 6px;
  border-left: 3px solid var(--border);
  animation: gen-member-in 0.25s ease;
  opacity: 0.6;
}
.gen-progress-member--done {
  opacity: 1; border-left-color: var(--accent);
}
.gen-progress-member--error {
  opacity: 0.6; border-left-color: var(--error);
}
@keyframes gen-member-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 0.6; transform: translateX(0); }
}
.gen-progress-member-name {
  font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
}
.gen-progress-member-role {
  font-size: 0.7rem; color: var(--accent); font-weight: 500;
  text-transform: capitalize;
}
.gen-progress-member-detail {
  width: 100%; font-size: 0.7rem; color: var(--text-muted);
}

/* --- Topbar generation indicator --- */
.family-tree-topbar-gen {
  display: flex; align-items: center; gap: 0.5rem;
  margin-left: auto; padding: 0.25rem 0.5rem;
  font-size: 0.78rem; color: var(--text-secondary);
  animation: gen-pulse 1.5s ease-in-out infinite;
}
.family-tree-topbar-gen-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 250px;
}
.family-tree-cancel-btn {
  font-size: 0.72rem; padding: 0.2rem 0.5rem;
}
@keyframes gen-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- Generate Family button --- */
.family-tree-generate-btn {
  padding: 0.35rem 0.6rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: var(--font-tree); white-space: nowrap;
}
.family-tree-generate-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.family-tree-generate-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* --- Generation dialog --- */
.gen-dialog { max-width: 400px; }
.gen-dialog-mode { margin-bottom: 1rem; }
.gen-dialog-mode label { display: block; padding: 0.4rem 0; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.gen-dialog-mode input[type="radio"] { margin-right: 0.5rem; }
.gen-dialog-select { width: 100%; padding: 0.4rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 0.85rem; margin-top: 0.3rem; }
.gen-dialog-textarea { width: 100%; min-height: 80px; padding: 0.4rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 0.85rem; resize: vertical; margin-top: 0.3rem; }
.gen-depth-group { display: flex; gap: 0.3rem; margin: 0.5rem 0; }
.gen-depth-group label { font-size: 0.78rem; color: var(--text-muted); margin-right: 0.5rem; align-self: center; }
.gen-depth-btn { padding: 0.3rem 0.6rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; }
.gen-depth-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* --- Main area --- */
.family-tree-main {
  flex: 1; overflow: hidden; position: relative;
}
.family-tree-svg {
  width: 100%; height: 100%; display: block;
  cursor: grab;
}
.family-tree-svg:active { cursor: grabbing; }

/* --- Lines --- */
.family-tree-line--spouse {
  stroke: var(--border); stroke-width: 2;
}
.family-tree-line--spouse.family-tree-line--highlight {
  stroke: var(--accent);
}
.family-tree-line--spouse-ring {
  fill: none; stroke: var(--border); stroke-width: 1.5;
}
.family-tree-line--spouse-ring.family-tree-line--highlight {
  stroke: var(--accent);
}
/* Companion/bonded line styles */
.family-tree-line--companion {
  stroke: #8b7ec8; stroke-width: 2;
}
.family-tree-line--companion.family-tree-line--highlight {
  stroke: var(--accent);
}
.family-tree-line--companion-diamond {
  fill: none; stroke: #8b7ec8; stroke-width: 1.5;
}
.family-tree-line--companion-diamond.family-tree-line--highlight {
  stroke: var(--accent);
}
.family-tree-line--family {
  stroke: var(--border); stroke-width: 2.5; fill: none;
}
.family-tree-line--family.family-tree-line--highlight {
  stroke: var(--accent); stroke-width: 3;
}
.family-tree-line--social {
  stroke: var(--text-muted); stroke-width: 1.5;
  stroke-dasharray: 6 4; fill: none;
}
.family-tree-line--social.family-tree-line--highlight {
  stroke: var(--accent);
}

/* --- Family Tree Cards (180x200) --- */
.family-tree-card {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.25rem;
  padding: 0.75rem 0.5rem 0.6rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; height: 100%; box-sizing: border-box;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.2s;
  font-family: var(--font-tree);
}
.family-tree-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.15);
}
.family-tree-card.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}
.family-tree-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
}
.family-tree-card.deceased {
  opacity: 0.55;
  filter: saturate(0.4);
}
.family-tree-card-portrait {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 2px solid var(--border); margin-bottom: 0.15rem;
}
.family-tree-card-portrait--generating {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
}
.generating-spinner {
  width: 24px; height: 24px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
.family-tree-card-name {
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; text-align: center; line-height: 1.2;
  font-family: var(--font-tree);
}
.family-tree-card-meta {
  font-size: 0.68rem; color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; line-height: 1.3;
}
.family-tree-card-bio {
  font-size: 0.46rem; color: var(--text-muted); line-height: 1.35;
  text-align: center; max-width: 100%; margin-top: 0.15rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Creature cards: distinct border and subtle tint */
.family-tree-card--creature {
  border-style: dashed;
  border-color: #8b7ec8;
}
.family-tree-card--creature:hover {
  border-color: #a699d6;
  box-shadow: 0 0 16px rgba(139, 126, 200, 0.2);
}
.family-tree-card--creature.selected {
  border-color: #a699d6;
  box-shadow: 0 0 20px rgba(139, 126, 200, 0.3);
}
.family-tree-card-species {
  font-size: 0.66rem; color: #8b7ec8; text-align: center;
  font-style: italic; line-height: 1.2; margin-top: -0.1rem;
}
/* Deceased: grayscale portrait, muted text */
.family-tree-card.deceased .family-tree-card-portrait {
  filter: grayscale(1) brightness(0.7); opacity: 0.7;
}
.family-tree-card.deceased .family-tree-card-name {
  color: var(--text-muted);
}

/* Context menu for family tree cards */
.family-tree-ctx-menu {
  position: fixed;
  z-index: 10001;
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 0.3rem;
  min-width: 160px;
  box-shadow: var(--shadow-lg);
}

.family-tree-ctx-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.family-tree-ctx-menu-item:hover {
  background: var(--bg-tertiary, #2a2a3e);
}

.family-tree-ctx-menu-item--danger {
  color: var(--danger, #ef4444);
}

.family-tree-ctx-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.family-tree-ctx-menu-sep {
  height: 1px;
  background: var(--border-color, #333);
  margin: 0.25rem 0;
}

/* Hover "+" button on family tree cards */
.family-tree-card-ctx-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #444);
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.family-tree-card:hover .family-tree-card-ctx-btn {
  opacity: 1;
}

.family-tree-card-ctx-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Add-member floating menu */
.family-tree-add-menu {
  position: fixed; z-index: 1100;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.5rem; min-width: 220px;
  box-shadow: var(--shadow-xl);
  font-family: var(--font-tree);
}
.family-tree-add-menu-title {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;
}
.family-tree-add-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem; border-radius: 6px; cursor: pointer;
  border: none; background: none; width: 100%;
  color: var(--text-primary); font-size: 0.82rem; text-align: left;
}
.family-tree-add-menu-item:hover { background: var(--bg-hover, var(--bg-elevated)); }
.family-tree-add-menu-search {
  width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);
  font-size: 0.8rem; margin-bottom: 0.25rem; box-sizing: border-box;
}
.family-tree-add-menu-list {
  max-height: 180px; overflow-y: auto;
}
.family-tree-add-menu-char {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer;
  border: none; background: none; width: 100%;
  color: var(--text-primary); font-size: 0.8rem; text-align: left;
}
.family-tree-add-menu-char:hover { background: var(--bg-hover, var(--bg-elevated)); }
.family-tree-add-menu-char-name { font-weight: 600; }
.family-tree-add-menu-char-sub { font-size: 0.7rem; color: var(--text-muted); }

/* --- Bottom tray --- */
.family-tree-tray {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-top: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
  overflow-x: auto; min-height: 44px;
  font-family: var(--font-tree);
}
.family-tree-tray-label { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.family-tree-tray-empty { font-size: 0.72rem; color: var(--text-muted); }
.family-tree-tray-chip {
  padding: 0.3rem 0.6rem; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-primary); font-size: 0.72rem;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.family-tree-tray-chip:hover { border-color: var(--accent); background: var(--bg-elevated); }
.family-tree-tray-chip--creature {
  border-style: dashed; border-color: #8b7ec8;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.family-tree-tray-chip--creature:hover { border-color: #a699d6; }
.family-tree-tray-chip-species {
  font-size: 0.62rem; color: #8b7ec8; font-style: italic;
}
.family-tree-tray-separator {
  display: inline-block; width: 1px; height: 20px;
  background: var(--border); margin: 0 0.4rem; flex-shrink: 0;
}

/* --- Responsive: smaller cards on narrow screens --- */
@media (max-width: 600px) {
  .family-tree-topbar { padding: 0 0.5rem; min-height: 42px; }
  .family-tree-tab { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
  .family-tree-action-btn { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
  .family-tree-style-picker { font-size: 0.7rem; padding: 0.2rem 0.3rem; }
  .family-tree-generate-btn { padding: 0.25rem 0.5rem; font-size: 0.72rem; }
  .family-tree-tray { padding: 0.4rem 0.5rem; }
}

/* --- Split-view detail panel --- */
.family-tree-main.split-view {
  width: 60%;
  transition: width 0.3s ease;
}
.family-tree-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 1.5rem;
  font-family: var(--font-tree);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 10;
}
.family-tree-detail.open {
  transform: translateX(0);
}
.detail-close-btn {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  z-index: 2;
}
.detail-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
/* --- Detail Panel: Identity Zone --- */
.detail-identity {
  text-align: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.detail-portrait-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.detail-portrait {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border: 3px solid rgba(201,168,76,0.4);
  transition: border-color var(--transition, 180ms ease);
}
.detail-portrait:hover {
  border-color: var(--accent);
}
.detail-open-writing {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
}

.detail-name-readonly {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.detail-stat-value {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.detail-name {
  font-family: 'Literata', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.detail-bio-summary {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 90%;
  margin: 0 auto;
}
.detail-name-input {
  background: none;
  border: none;
  font-family: 'Literata', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
  padding: 0.1rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition, 180ms ease);
}
.detail-name-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* --- Detail Panel: Stats Zone (Inline Tags) --- */
.detail-stats-zone {
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.detail-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
}
.detail-stat-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.detail-stat-chip label {
  font-size: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: font-size 0.15s, margin 0.15s;
  overflow: hidden;
  margin: 0;
  line-height: 1;
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
}
.detail-stat-chip:hover label,
.detail-stat-chip:focus-within label {
  font-size: 0.6rem;
  margin-bottom: 0.15rem;
}
.detail-stat-chip input {
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.3rem 0.7rem;
  color: var(--text-primary);
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  font-size: 0.8rem;
  text-align: center;
  width: auto;
  min-width: 2.5rem;
  max-width: 10rem;
  box-sizing: border-box;
  transition: all var(--transition, 180ms ease);
}
.detail-stat-chip input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.detail-stat-chip input:hover {
  border-color: var(--border);
}
.detail-stat-chip input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-secondary);
}

/* --- Detail Panel: Narrative Sections --- */
.detail-narrative-zone {
  padding-top: 1.25rem;
}
.detail-field {
  margin-bottom: 0.75rem;
}
.detail-field label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
}
.detail-field input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  color: var(--text-primary);
  font-family: var(--font-tree);
  font-size: 0.85rem;
  box-sizing: border-box;
}
.detail-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.detail-section {
  margin-bottom: 0.25rem;
}
.detail-section-header {
  font-family: 'Literata', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem 0 0.3rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  transition: color var(--transition, 180ms ease);
}
.detail-section-header:hover {
  color: var(--text-primary);
}
.detail-section-header::after {
  content: '\25BE';
  font-size: 0.55rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  margin-left: auto;
}
.detail-section-header.collapsed::after {
  transform: rotate(-90deg);
}
.detail-section.collapsed .detail-field,
.detail-section.collapsed .detail-suggest-placeholder {
  display: none;
}
/* Narrative textarea — prose style */
.detail-section .detail-field textarea,
.detail-narrative-zone textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-family: 'Literata', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.65;
  box-sizing: border-box;
  min-height: 80px;
  resize: vertical;
  transition: border-color var(--transition, 180ms ease), background var(--transition, 180ms ease);
}
.detail-section .detail-field textarea:hover,
.detail-narrative-zone textarea:hover {
  background: rgba(255,255,255,0.02);
}
.detail-section .detail-field textarea:focus,
.detail-narrative-zone textarea:focus {
  outline: none;
  border-left-color: var(--accent);
  background: rgba(255,255,255,0.02);
}

/* --- AI Sparkle Icon --- */
.detail-sparkle {
  opacity: 0;
  color: var(--accent);
  font-size: 0.72rem;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0.15rem 0.25rem;
  border: none;
  background: none;
  line-height: 1;
}
.detail-section-header:hover .detail-sparkle,
.detail-sparkle:focus {
  opacity: 0.6;
}
.detail-sparkle:hover {
  opacity: 1;
  transform: scale(1.2);
}
.detail-sparkle--loading {
  opacity: 1;
  animation: sparkle-pulse 1s ease-in-out infinite;
}
@keyframes sparkle-pulse {
  0%, 100% { opacity: 1; color: var(--accent); }
  50% { opacity: 0.4; color: var(--text-muted); }
}

/* --- Saved Toast --- */
.detail-saved-toast {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.72rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  z-index: 3;
}
.detail-saved-toast.visible {
  opacity: 1;
}

/* --- Period Research (compact) --- */
.detail-research-btn {
  opacity: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s;
  padding: 0.15rem 0.4rem;
  border: none;
  background: none;
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
}
.family-tree-detail:hover .detail-research-btn {
  opacity: 0.6;
}
.detail-research-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.family-tree-add-menu-ai { color: var(--accent); font-weight: 500; }
.period-notes-content { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; font-family: 'Literata', Georgia, serif; }
.period-notes-content p { margin-bottom: 0.75rem; }
.detail-suggest-btn { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; margin-top: 0.3rem; }
.detail-suggest-btn:hover { border-color: var(--accent); color: var(--accent); }
.detail-suggest-btn:disabled { opacity: 0.5; cursor: default; }
.suggestion-cards { margin-top: 0.3rem; }
.suggestion-card { padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; margin-top: 0.3rem; transition: border-color 0.2s; line-height: 1.4; font-family: 'Literata', Georgia, serif; }
.suggestion-card:hover { border-color: var(--accent); }
.suggestion-more { font-size: 0.72rem; color: var(--text-muted); cursor: pointer; margin-top: 0.3rem; display: inline-block; }
.suggestion-more:hover { color: var(--accent); }
.detail-modifiers {
  margin-bottom: 0.75rem;
  min-height: 1rem;
  position: relative;
}
.modifier-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.75rem; }
.modifier-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.72rem; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.modifier-chip .modifier-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 0.8rem; line-height: 1; }
.modifier-chip .modifier-remove:hover { color: var(--error, #e74c3c); }
.modifier-add-btn { background: none; border: 1px dashed var(--border); border-radius: 12px; padding: 0.2rem 0.5rem; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; }
.modifier-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.modifier-picker { position: absolute; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; z-index: 20; max-height: 300px; overflow-y: auto; width: 250px; box-shadow: var(--shadow-lg); }
.modifier-picker-category { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.modifier-picker-category::after { content: '\25BC'; font-size: 0.55rem; transition: transform 0.2s; }
.modifier-picker-category.collapsed::after { transform: rotate(-90deg); }
.modifier-picker-items { overflow: hidden; }
.modifier-picker-items.collapsed { display: none; }
.modifier-picker-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.3rem 0.5rem; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; border-radius: 4px; }
.modifier-picker-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.modifier-picker-custom { width: 100%; margin-top: 0.3rem; padding: 0.3rem 0.5rem; font-size: 0.78rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); }
.modifier-picker-custom::placeholder { color: var(--text-muted); }
.resonance-char-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; font-size: 0.82rem; color: var(--text-secondary); }
.resonance-char-row label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; flex: 1; }
.resonance-char-row input[type="checkbox"] { margin-top: 0.15rem; }
.resonance-char-name { font-weight: 600; color: var(--text-primary); }
.resonance-char-reason { color: var(--text-muted); font-size: 0.75rem; }
.modifier-chip.resonating { animation: modifier-pulse 1s ease-in-out 2; }
@keyframes modifier-pulse {
  0%, 100% { border-color: var(--border); }
  50% { border-color: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb, 100,100,255), 0.4); }
}
.family-tree-card.resonance-highlight {
  animation: card-resonance 1.2s ease-in-out;
}
@keyframes card-resonance {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(var(--accent-rgb, 100,100,255), 0.6); }
}
.detail-delete-btn {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--error, #e74c3c);
  border-radius: 4px;
  color: var(--error, #e74c3c);
  cursor: pointer;
  font-size: 0.78rem;
  margin-top: 1rem;
  font-family: var(--font-tree);
}
.detail-delete-btn:hover {
  background: var(--error, #e74c3c);
  color: #fff;
}
.detail-saved {
  font-size: 0.7rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  right: 1.5rem;
  top: 0.5rem;
  pointer-events: none;
}
.detail-saved.show {
  opacity: 1;
}

/* Detail panel responsive */
@media (max-width: 768px) {
  .family-tree-main.split-view { width: 100%; }
  .family-tree-detail { width: 100%; }
}

/* ─── Collaboration Panel Content ─── */
.collab-sidebar-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.collab-sidebar-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
}
.collab-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.82rem;
}
.collab-role-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.collab-role-badge.partner {
    background: #7c3aed;
    color: #fff;
}
.collab-role-badge.editor {
    background: #0891b2;
    color: #fff;
}
.collab-role-badge.author {
    background: var(--accent, #e67e22);
    color: #fff;
}
.collab-invite-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.collab-invite-form input {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.collab-invite-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.collab-invite-row select {
    padding: 0.3rem 0.4rem;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    flex: 1;
}
.collab-invite-row button {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}
.collab-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    margin-left: auto;
    opacity: 0.5;
    display: flex;
    align-items: center;
}
.collab-remove-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(0.6);
}
.collab-remove-btn:hover {
    opacity: 1;
}
.collab-remove-btn:hover img {
    filter: brightness(0) invert(0.4) sepia(1) saturate(5) hue-rotate(0deg);
}

/* Session banner (collaboration) */
.session-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent-secondary);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.session-banner .session-banner-collab {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
}
.session-banner .session-banner-waiting {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Review view (side-by-side diff) */
.review-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.review-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.review-panels {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.review-left, .review-right {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.review-left {
    border-right: 1px solid var(--border);
    background: var(--bg-primary);
}
.review-right {
    background: var(--bg-primary);
}
.review-left-label, .review-right-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.review-diff-add {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border-left: 2px solid var(--success);
    padding: 0.2rem 0.5rem;
    margin: 0.15rem 0;
}
.review-diff-remove {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    border-left: 2px solid var(--error);
    padding: 0.2rem 0.5rem;
    margin: 0.15rem 0;
    text-decoration: line-through;
    opacity: 0.7;
}
.review-diff-same {
    padding: 0.2rem 0.5rem;
    margin: 0.15rem 0;
}
.review-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.review-controls .decline-note {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.review-controls .btn-accept {
    background: var(--success);
    color: var(--bg-primary);
}
.review-controls .btn-decline {
    background: var(--error);
    color: var(--bg-primary);
}

/* Inline comment floating button */
.inline-comment-btn {
    position: absolute;
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.inline-comment-btn:hover {
    opacity: 0.9;
}

/* Inline comment input popup */
.inline-comment-input {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inline-comment-input textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
    font-family: inherit;
}
.inline-comment-input .comment-actions {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
}
.inline-comment-input .comment-actions button {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

/* Comment list in sidebar */
.inline-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inline-comment-item {
    padding: 0.5rem;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 0.8rem;
}
.inline-comment-item .comment-anchor {
    font-size: 0.72rem;
    color: var(--accent);
    font-style: italic;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline-comment-item .comment-body {
    margin-bottom: 0.3rem;
    line-height: 1.4;
}
.inline-comment-item .comment-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.inline-comment-item .comment-actions-bar {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
}
.inline-comment-item .comment-actions-bar button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
}
.inline-comment-item .comment-actions-bar button:hover {
    color: var(--accent);
}
.inline-comment-item.resolved {
    opacity: 0.5;
}
.inline-comment-replies {
    margin-left: 0.75rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border);
    margin-top: 0.3rem;
}

/* --- Writing Editor Grid Layout & Tool Panels --- */

.writing-editor-layout {
  position: relative;
  height: calc(100vh - 3.25rem);
  max-width: 100rem;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  transition: padding 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.writing-editor-layout > .screen-editor {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0 0 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tool-column {
  position: fixed;
  top: 3.25rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 50;
}

.tool-column--empty {
  display: none;
}

.tool-column--left {
  left: 0;
}

.tool-column--right {
  right: 0;
}

.tool-btn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: left;
}

.tool-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tool-btn.active {
  background: var(--bg-hover);
  color: var(--color-primary);
}

.tool-btn .action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tool-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-column--open {
  width: 380px;
  overflow: visible;
}

.tool-column--left.tool-column--open {
  border-right: 1px solid var(--border);
}

.tool-column--right.tool-column--open {
  border-left: 1px solid var(--border);
}

.tool-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  flex: 1;
  min-height: 0;
  animation: tool-panel-in 0.18s ease;
  overflow: hidden;
}

@keyframes tool-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tool-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tool-tab-bar::-webkit-scrollbar { display: none; }

.tool-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

.tool-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tool-tab .action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tool-tab-label {
  display: none;
}

.tool-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  min-height: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.writing-focus .tool-column {
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9002;
}

body.writing-focus .tool-column:hover {
  opacity: 1;
}

body.writing-focus .tool-column--open {
  opacity: 1;
  z-index: 9001;
}

@media (max-width: 1366px) {
  .tool-btn-label {
    display: none;
  }

  .tool-btn {
    justify-content: center;
    padding: 6px;
  }

  .tool-column--open {
    width: 320px;
  }
}

@media (max-width: 1200px) {
  .editor-toolbar .toolbar-secondary {
    display: none;
  }

  .editor-toolbar .toolbar-overflow-toggle {
    display: inline-flex;
  }

  .editor-toolbar.toolbar--show-secondary .toolbar-secondary {
    display: inline-flex;
  }
}

@media (max-width: 899px) {
  .tool-column--open {
    width: 280px;
  }

  .writing-editor-layout {
    padding-left: 44px;
    padding-right: 44px;
  }
}

@media (max-width: 767px) {
  .writing-editor-layout {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }

  .tool-column {
    display: none !important;
  }
}

/* Mobile tools button — only visible on mobile */
.mobile-tools-btn {
  display: none !important;
}

@media (max-width: 767px) {
  .mobile-tools-btn {
    display: inline-flex !important;
  }
}

.mobile-tool-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px var(--shadow, rgba(0,0,0,0.15)); /* directional — intentionally not a variable */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: sheet-slide-up 0.2s ease;
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.mobile-tool-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-tool-sheet-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-tool-sheet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  min-width: 56px;
}

.mobile-tool-sheet-btn:hover,
.mobile-tool-sheet-btn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mobile-tool-sheet-btn .action-icon {
  font-size: 1.3rem;
  width: 1.3em;
  height: 1.3em;
}

.mobile-tool-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  max-height: 50vh;
}

.mobile-tool-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
}

/* ==========================================================================
   Collaborations Screen
   ========================================================================== */

.screen-collab {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Section headings */
.screen-collab .collaborations-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 2rem;
}

.screen-collab .collaborations-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Project / collaboration cards */
.screen-collab .collaboration-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 0.5rem;
}

.screen-collab .collaboration-item:hover {
    background: var(--surface-hover, var(--bg-tertiary, rgba(255,255,255,0.04)));
    border-color: var(--accent);
}

.screen-collab .collaboration-item .collab-work-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.screen-collab .collaboration-item .collab-author {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-left: auto;
}

/* Live indicator on cards */
.screen-collab .collaboration-item-live {
    border-left: 3px solid #e53935;
    padding-left: calc(1rem - 3px);
}

/* Invitation cards */
.screen-collab .invitation-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.screen-collab .invitation-item .invitation-text {
    flex: 1;
    color: var(--text-primary);
    line-height: 1.4;
}

.screen-collab .invitation-item .invitation-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.screen-collab .invitation-item .invitation-actions button {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
}

/* Fallback styles for collaborations section outside screen-collab (e.g. writing list) */
.collaborations-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.collaborations-section h3 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.collaboration-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.collaboration-item:hover {
    background: var(--bg-secondary);
}
.collaboration-item .collab-work-title {
    font-weight: 500;
    font-size: 0.85rem;
}
.collaboration-item .collab-author {
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.collaboration-item-live {
    border-left: 3px solid #e53935;
    padding-left: calc(0.5rem - 3px);
}
.collab-live-badge {
    display: inline-block;
    background: #e53935;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.04em;
    animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.collab-live-info {
    color: #e53935;
    font-size: 0.75rem;
    font-style: italic;
}
.invitation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}
.invitation-item .invitation-text {
    flex: 1;
}
.invitation-item .invitation-actions {
    display: flex;
    gap: 0.3rem;
}
.invitation-item .invitation-actions button {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

/* --- Collab Panel --- */

.collab-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  max-width: 80vw;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  z-index: 790;
  padding: 1rem;
  overflow-y: auto;
  animation: research-slide-in 0.2s ease;
  box-shadow: -4px 0 24px var(--shadow);
}

.collab-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

.collab-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
}

.collab-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.collab-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* --- Revision Panel --- */

.revision-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-top: 0.75rem;
  animation: find-replace-in 0.15s ease;
}

.revision-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.revision-list {
  max-height: 200px;
  overflow-y: auto;
}

.revision-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.4rem 0.8rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--transition);
}

.revision-item:hover {
  background: var(--bg-elevated);
}

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

.revision-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.revision-wc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.revision-diff {
  padding: 0.8rem;
  border-top: 1px solid var(--border-subtle);
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.78rem;
  line-height: 1.6;
}

.diff-line {
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-add {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.diff-del {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
  text-decoration: line-through;
}

/* --- Diff Line Numbers --- */

.diff-num {
  display: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text-muted);
  opacity: 0.5;
  text-align: right;
  padding-right: 0.8em;
  min-width: 2.5em;
}

body.show-line-numbers .diff-num {
  display: inline-block;
}

/* --- Stats Bar --- */

.stats-bar {
  margin-top: 0.4rem;
}

.stats-bar-toggles {
  display: flex;
  gap: 1rem;
}

.stats-bar-toggle,
.page-setup-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.2rem 0;
  transition: color var(--transition);
}

.stats-bar-toggle:hover,
.page-setup-toggle:hover {
  color: var(--text-secondary);
}

.stats-bar-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 0.8rem 0;
  animation: find-replace-in 0.15s ease;
}

.stats-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stats-bar-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stats-bar-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-bar-goal-item {
  position: relative;
}

.stats-bar-goal-input {
  width: 4.5rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border);
  border-radius: 0;
  color: var(--text-primary);
}

.stats-bar-goal-input::placeholder {
  color: var(--text-muted);
  font-weight: 600;
}

.stats-bar-goal-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.goal-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.2rem;
}

.goal-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.goal-progress-fill.complete {
  background: var(--success);
}

/* --- Writing Challenge Progress --- */

.stats-bar-challenge-item {
  position: relative;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.stats-bar-challenge-item:hover {
  opacity: 1;
}
.stats-bar-challenge-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.4;
}
.stats-bar-challenge-item:hover .stats-bar-challenge-text {
  color: var(--text-primary);
}
.challenge-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.challenge-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.challenge-progress-fill.complete {
  background: var(--success);
}

/* --- Typewriter Mode --- */

.typewriter-active {
  padding-top: 40vh !important;
  padding-bottom: 40vh !important;
}

.typewriter-active::before,
.typewriter-active::after {
  content: '';
  position: sticky;
  display: block;
  left: 0;
  right: 0;
  height: 35%;
  pointer-events: none;
  z-index: 1;
}

.typewriter-active::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-secondary), transparent);
}

.typewriter-active::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-secondary), transparent);
}

/* --- Outline Panel --- */

.outline-panel {
  border-top: 1px solid var(--border-subtle);
}

.outline-panel .sidebar-header {
  font-size: 0.65rem;
  padding: 0.5rem 0.9rem;
}

.outline-list {
  display: flex;
  flex-direction: column;
}

.outline-item {
  display: block;
  padding: 0.35rem 0.9rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition), background-color var(--transition);
}

.outline-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.outline-level-1 {
  font-weight: 600;
  padding-left: 0.9rem;
}

.outline-level-2 {
  padding-left: 1.6rem;
  font-size: 0.75rem;
}

.outline-level-3 {
  padding-left: 2.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* --- Focus Mode --- */

body.writing-focus {
  overflow: hidden;
}

body.writing-focus .nav-drawer,
body.writing-focus .site-header,
body.writing-focus header,
body.writing-focus nav,
body.writing-focus .notepad-trigger,
body.writing-focus .floating-search {
  display: none !important;
}

body.writing-focus #main {
  padding: 0;
  max-width: none;
}

body.writing-focus .screen-editor {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  padding: 3rem 2rem 2rem;
  background: var(--bg-primary);
  max-width: none;
}

body.writing-focus .page-setup,
body.writing-focus .editor-actions,
body.writing-focus .editor-export-menu,
body.writing-focus .auth-error {
  display: none !important;
}

body.writing-focus .editor-title {
  max-width: 65ch;
  margin: 0 auto 0.5rem;
}

body.writing-focus .editor-layout {
  max-width: 80ch;
  margin: 0 auto;
}

body.writing-focus .editor-layout.has-sidebar {
  max-width: calc(80ch + 250px);
}

body.writing-focus .editor-meta {
  max-width: 65ch;
  margin: 0.5rem auto 0;
}

.focus-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1.2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 9001;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.focus-bar-info {
  display: flex;
  gap: 1.5rem;
}

/* --- Zen Mode --- */

.zen-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: zen-fade-in 0.4s ease;
}

@keyframes zen-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.zen-container {
  flex: 1;
  width: 100%;
  max-width: var(--zen-width, var(--content-width));
  padding: 4rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.zen-header-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.zen-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.7;
}

.zen-textarea {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  caret-color: var(--accent);
}

.zen-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.4;
}

.zen-footer-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2rem;
  letter-spacing: 0.03em;
}

.zen-editor-container .ProseMirror {
  outline: none;
  min-height: 300px;
  white-space: pre-wrap;
  font-family: var(--font-serif);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  word-wrap: break-word;
  caret-color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
}

.zen-editor-container .ProseMirror:focus {
  outline: none;
}

.zen-editor-container .ProseMirror p {
  margin: 0 0 var(--reading-para-spacing) 0;
}

.zen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.4rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.zen-wc {
  opacity: 0.6;
}

.zen-exit {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}

.zen-exit:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* --- Editor Responsive --- */

@media (max-width: 767px) {
  .screen-editor {
    max-width: none;
    padding: 1.5rem 1rem;
  }

  .editor-title {
    font-size: 1.5rem;
  }

  .editor-body-container {
    min-height: 180px;
    font-size: 0.95rem;
    padding: 1em;
  }

  .editor-body-container .ProseMirror {
    min-height: 180px;
    font-size: 0.95rem;
  }

  .editor-toolbar {
    gap: 0.15rem;
    padding: 0.3rem;
  }

  .toolbar-btn {
    min-width: 1.7rem;
    height: 1.7rem;
    font-size: 0.72rem;
  }

  .editor-publish,
  .editor-actions {
    position: sticky;
    bottom: 0;
    background-color: var(--bg-primary);
    padding: 0.75rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    z-index: 100;
    flex-wrap: wrap;
  }

  .editor-mode-selector {
    order: -1;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .editor-mode-btn {
    flex: 1;
    text-align: center;
  }

  .editor-layout.has-sidebar .editor-sidebar {
    display: none;
  }

  .editor-layout.has-sidebar .editor-toolbar {
    border-radius: 0;
  }

  .editor-layout.has-sidebar .editor-body-container {
    border-radius: 0;
  }

  .editor-writing-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .editor-meta-field select {
    width: 100%;
  }

  .editor-meta-spacer {
    margin-left: 0;
  }

  .page-card {
    width: 75px;
  }

  .page-setup-body {
    flex-direction: column;
  }

  .editor-stats {
    gap: 0.6rem;
    font-size: 0.72rem;
  }

  .zen-container {
    padding: 2rem 1rem 1rem;
  }

  .zen-textarea {
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* ==========================================================================
   Forum Screen
   ========================================================================== */

.screen-forum {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* --- Forum Header --- */

.forum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.forum-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
}

/* --- Category Filter --- */

.forum-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* --- Thread List --- */

.thread-list {
  display: flex;
  flex-direction: column;
}

.thread-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1rem 0.9rem 1.2rem;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border);
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.4rem;
  background: var(--bg-surface);
}

.thread-item:hover {
  background-color: var(--accent-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--accent-subtle);
  border-left-color: var(--accent);
}

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

/* Thread type left-border colors */
.thread-item--announcement { border-left-color: var(--accent); }
.thread-item--question { border-left-color: var(--resonance); }
.thread-item--announcement:hover { border-left-color: var(--accent-hover); }
.thread-item--question:hover { border-left-color: var(--resonance); }

/* Pinned thread tint */
.thread-item--pinned { background: var(--accent-subtle); }

/* Unread thread bold title */
.thread-item--unread .thread-title { font-weight: 600; }

.thread-info {
  min-width: 0;
  flex: 1;
}

.thread-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.thread-excerpt {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.thread-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.thread-meta {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

.thread-stats {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: 0.15rem;
}

.thread-stats-zero {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.7;
}

.thread-pinned {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
}

.thread-locked {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.thread-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-right: 0.3rem;
}
.thread-tag-wip { background: var(--accent-primary); color: var(--bg-primary); }
.thread-tag-discussion { background: var(--text-muted); color: var(--bg-primary); }
.thread-tag-feedback { background: #b07d3a; color: #fff; }
.thread-tag-question { background: #3a7db0; color: #fff; }
.thread-tag-resolved { background: #3ab07d; color: #fff; }
.thread-tag-announcement { background: #b03a5c; color: #fff; }

.tag-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.tag-picker-btn {
  font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 3px;
  border: 1px solid var(--border-color); background: transparent;
  color: var(--text-secondary); cursor: pointer;
}
.tag-picker-btn.active {
  background: var(--accent-primary); color: var(--bg-primary);
  border-color: var(--accent-primary);
}

/* --- Thread Detail --- */

.thread-detail {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.thread-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: color var(--transition);
}

.thread-back:hover {
  color: var(--accent);
}

.thread-detail-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.thread-detail-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

.thread-original-post {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* --- Forum Posts / Replies --- */

.post {
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-xs);
}

.post:last-child {
  margin-bottom: 0;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.7rem;
}

.post-author {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.post-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.writing-page-header,
.writing-page-footer {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}
.writing-page-header {
  margin-top: 2rem;
  margin-bottom: 0;
}
.writing-page-footer {
  margin-top: 2rem;
}

.post-body {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  letter-spacing: 0.005em;
  max-width: none;
}

.post-body p + p {
  margin-top: var(--reading-para-spacing);
}

.thread-uuid-ref {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: color var(--transition);
  opacity: 0.6;
}

.thread-uuid-ref:hover {
  color: var(--accent);
  opacity: 1;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.post-action {
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.post-action:hover {
  color: var(--accent);
}

.post-action.liked {
  color: var(--resonance);
}

/* --- Reply Editor --- */

.reply-editor {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.reply-editor-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

/* --- Rich Editor Toolbar --- */

.rich-toolbar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.rich-toolbar-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--transition),
    background-color var(--transition);
}

.rich-toolbar-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

.rich-toolbar-btn.active {
  color: var(--accent);
  background-color: var(--accent-subtle);
}

.rich-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-forum,
  .thread-detail {
    padding: 1.5rem 1rem;
  }

  .forum-header {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }

  .thread-item {
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
    padding: 0.9rem 0.75rem 0.8rem 1rem;
  }

  .thread-detail-title {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Messages Screen
   ========================================================================== */

.screen-messages {
  display: flex;
  height: calc(100vh - 4rem);
  max-width: 960px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

/* --- Conversation List --- */

.messages-list {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.messages-list-header {
  padding: 1rem 1.2rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.conversation-item:hover {
  background-color: var(--bg-surface);
  box-shadow: inset 3px 0 0 var(--accent-subtle);
}

.conversation-item.active {
  background-color: var(--accent-subtle);
  box-shadow: inset 3px 0 0 var(--accent);
}

.conversation-item.is-group {
  background-color: rgba(255, 255, 255, 0.02);
}

.conversation-item.is-group:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.conversation-item.is-group.active {
  background-color: var(--accent-subtle);
}

.conversation-item.unread .conversation-name {
  font-weight: 600;
  color: var(--text-primary);
}

.conversation-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
}

.conversation-info {
  min-width: 0;
  flex: 1;
}

.conversation-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Message Thread --- */

.messages-thread {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.messages-thread-header {
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.messages-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* --- Message Bubbles --- */

.message {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

.message-outgoing {
  align-self: flex-end;
}

.message-incoming {
  align-self: flex-start;
}

.message-bubble {
  padding: 0.6em 0.9em;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}

.message-outgoing .message-bubble {
  background-color: var(--accent);
  color: var(--bg-primary);
  border-bottom-right-radius: var(--radius-sm);
}

.message-incoming .message-bubble {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.message-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  padding: 0 0.2em;
}

.message-outgoing .message-time {
  text-align: right;
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
  padding: 0 0.2em;
}

/* --- Bot Messages --- */

.message-bot .message-bubble {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
}
.message-bot .message-sender {
  color: var(--accent);
}

/* --- System Messages --- */

.message-system {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.3rem 0;
  max-width: 100%;
  align-self: center;
}
.message-system .message-bubble {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}

/* --- Action Messages --- */

.message-action .message-bubble {
  font-style: italic;
  background: transparent;
  padding: 0.2rem 0;
  border: none;
}

/* --- Message Image Thumbnails --- */

.msg-image-thumb {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-md);
  margin-top: 6px;
  cursor: pointer;
  display: block;
}

/* --- Date Separators --- */

.message-date-separator {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.6rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.message-date-separator::before,
.message-date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* --- Message Grouping --- */

.message-grouped {
  margin-top: -0.4rem;
}
.message-grouped .message-sender {
  display: none;
}

/* --- Compose Bar --- */

.messages-compose {
  position: relative;
  padding: 0.75rem 1.2rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  background: var(--bg-primary);
}

.messages-compose textarea {
  flex: 1;
  min-height: 2.4em;
  max-height: 8em;
  resize: none;
  border-radius: var(--radius-lg);
  padding: 0.5em 0.9em;
  font-size: 0.9rem;
  border-color: var(--border-subtle);
}

.messages-compose textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.messages-compose .btn {
  flex-shrink: 0;
  align-self: flex-end;
  border-radius: var(--radius-lg);
}

.messages-compose-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.messages-compose-inner textarea {
  flex: 1;
}

.messages-compose-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

/* Image attach button */
.msg-attach-btn {
  flex-shrink: 0;
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4em;
  border-radius: var(--radius);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.msg-attach-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.msg-attach-btn .action-icon {
  width: 1.25em;
  height: 1.25em;
}

/* Image preview in composer */
.msg-image-preview-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  margin-top: 0.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  max-width: 160px;
}

.msg-image-preview-wrap img {
  display: block;
  max-width: 160px;
  max-height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
}

.msg-image-preview-wrap .msg-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.msg-image-preview-wrap .msg-preview-remove:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.msg-image-preview-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.msg-image-preview-loading .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* --- Command Autocomplete --- */

.cmd-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
  z-index: 50;
  display: none;
}

.cmd-autocomplete-item {
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  transition: background-color var(--transition);
}

.cmd-autocomplete-item:hover,
.cmd-autocomplete-item.active {
  background: var(--bg-surface);
}

.cmd-autocomplete-name {
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.cmd-autocomplete-desc {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* --- Channel Banner --- */

.channel-banner {
  padding: 0.75rem 1.2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.channel-banner-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.channel-banner-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.channel-banner-modes {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.mode-icon {
  font-size: 0.85rem;
  cursor: default;
}

.channel-banner-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.channel-banner-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.channel-banner-motd {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.02);
}

/* --- Conversation Avatar --- */

.conversation-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.conversation-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
}

/* --- New Conversation Form --- */

.new-conversation-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 480px;
}

.new-conversation-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: -0.6rem;
}

/* --- Autocomplete --- */

.autocomplete-wrap {
  position: relative;
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color var(--transition);
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background-color: var(--bg-surface);
}

.autocomplete-alias {
  color: var(--text-primary);
  font-weight: 500;
}

.autocomplete-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.autocomplete-badge--patron {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Create Menu Dropdown --- */

.create-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
}

.create-menu-item {
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: normal;
  text-align: left;
}

.create-menu-item:hover {
  background: var(--bg-secondary);
}

/* --- Group Form --- */

.group-form {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.member-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}

.member-chip button:hover {
  color: var(--accent);
}

/* --- Group Thread Header --- */

.thread-group-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.member-count-badge {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 0.5rem;
}

.member-count-badge:hover {
  background: var(--bg-tertiary, var(--border));
  color: var(--text-primary);
}

.header-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.header-status-message {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.header-member-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* --- Member Sidebar --- */

/* Content wrapper: flex row holding chat column + optional member sidebar. */
.messages-thread-content {
  display: flex;
  flex: 1;
  min-height: 0;
}

.messages-chat-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.member-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.member-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.member-sidebar-list {
  padding: 0.4rem 0;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
}

.member-item:hover {
  background: var(--bg-secondary);
}

.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.member-alias {
  font-size: 0.85rem;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
}

.role-badge-creator {
  color: #d4a017;
}

.role-badge-op {
  color: #5b8def;
}

.role-badge-voice {
  color: #4caf50;
}

/* --- Empty conversation --- */

.messages-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-messages {
    flex-direction: column;
    height: calc(100vh - 3.5rem - 3.5rem - env(safe-area-inset-bottom, 0px));
  }

  .messages-list {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .messages-list.hidden {
    display: none;
  }

  .messages-thread.hidden {
    display: none;
  }

  .messages-thread {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Floating buttons are in the bottom-nav on mobile — no repositioning needed. */

  .messages-thread-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    font-size: 0.85rem;
    transition: color var(--transition);
  }

  .messages-thread-back:hover {
    color: var(--accent);
  }

  .message {
    max-width: 85%;
  }

  .member-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    z-index: 100;
    background: var(--bg-surface);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.3); /* directional — intentionally not a variable */
  }

  .member-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem;
    z-index: 1;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
  }
}

@media (min-width: 640px) {
  .messages-thread-back {
    display: none;
  }
}

/* ==========================================================================
   Encounter Screen
   ========================================================================== */

.screen-encounter {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.encounter-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.encounter-intro-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.encounter-intro-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 40ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Partner's CivPage Preview --- */

.encounter-civpage {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.encounter-civpage-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.8rem;
}

/* --- Encounter Chat --- */

.encounter-chat {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.encounter-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.encounter-chat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.encounter-timer {
  font-size: 0.8rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.encounter-chat-body {
  height: 300px;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.encounter-chat-compose {
  padding: 0.8rem 1.2rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 0.5rem;
}

.encounter-chat-compose input {
  flex: 1;
  border-radius: 2em;
  padding: 0.5em 1em;
}

/* --- Encounter Actions --- */

.encounter-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

/* --- No Encounter --- */

.encounter-none {
  text-align: center;
  padding: 4rem 2rem;
}

.encounter-none-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.encounter-none-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-encounter {
    padding: 1.5rem 1rem;
  }

  .encounter-chat-body {
    height: 250px;
  }

  .encounter-actions {
    flex-direction: column;
    width: 100%;
  }

  .encounter-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Settings Screen
   ========================================================================== */

.screen-settings {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.settings-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* --- Settings Sections --- */

.settings-section {
  margin-bottom: 2.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.settings-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Settings Bio --- */

.settings-bio-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  line-height: 1.5;
  box-sizing: border-box;
}

.settings-bio-textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.settings-bio-counter {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.25rem;
}

/* --- Blocked Users --- */

.blocked-users-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blocked-user-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.blocked-user-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.blocked-user-alias {
  font-size: 0.9rem;
  font-weight: 500;
}

.blocked-user-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: 0.5rem;
}

/* --- Patron Card (active subscriber) --- */

.patron-card {
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.04), transparent);
}

.patron-card-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.patron-card-since {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.patron-badge--warn {
  color: var(--error, #c0392b);
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.2);
}

.patron-badge--warn::before {
  background-color: var(--error, #c0392b);
}

.patron-badge--muted {
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.06);
  border-color: rgba(128, 128, 128, 0.15);
}

.patron-badge--muted::before {
  background-color: var(--text-muted);
}

.patron-card-warn {
  font-size: 0.85rem;
  color: var(--error, #c0392b);
  padding: 0.6rem 0.8rem;
  background: rgba(192, 57, 43, 0.06);
  border-radius: calc(var(--radius) / 2);
  margin-bottom: 1rem;
  line-height: 1.45;
}

.patron-card-notice {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.45;
}

.patron-card-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.patron-card-benefit {
  font-size: 0.85rem;
  color: var(--text-primary);
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.5;
}

.patron-card-benefit::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--patron-gold);
  font-weight: 600;
  font-size: 0.85rem;
}

.patron-card-actions {
  padding-top: 0.5rem;
}

/* --- Patron Offer (free users) --- */

.patron-offer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 400px;
}

.patron-offer-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.patron-offer-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--patron-gold);
}

.patron-offer-price {
  text-align: right;
}

.patron-offer-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.patron-offer-period {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.patron-offer-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.patron-offer-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.patron-offer-benefit {
  padding-left: 1.25rem;
  position: relative;
}

.patron-offer-benefit::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5em;
  height: 0.5em;
  background: var(--patron-gold);
  border-radius: 50%;
}

.patron-offer-benefit-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.patron-offer-benefit-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.patron-offer-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.4;
}

/* --- Patron Subscription Columns --- */

.patron-byok-callout {
  font-size: 0.9rem;
  color: var(--accent);
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent-subtle, rgba(201, 168, 76, 0.2));
  border-radius: var(--radius);
  background: var(--accent-bg, rgba(201, 168, 76, 0.04));
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.patron-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.patron-column {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.patron-column--patron {
  border-color: rgba(201, 168, 76, 0.3);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.04), transparent);
}

.patron-column-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.patron-column-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.patron-column--patron .patron-column-title {
  color: var(--patron-gold);
}

.patron-column-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.patron-column-price {
  text-align: right;
}

.patron-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.patron-feature-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.4;
}

.patron-feature-item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.patron-column--patron .patron-feature-item::before {
  color: var(--patron-gold);
}

.patron-feature-item--detailed {
  padding-left: 1.1rem;
  margin-bottom: 0.25rem;
}

.patron-feature-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.patron-feature-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

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

/* --- Theme Grid --- */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.theme-swatch {
  position: relative;
  height: 72px;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  transition:
    border-color var(--transition),
    transform var(--transition);
}

.theme-swatch:hover {
  transform: scale(1.03);
}

.theme-swatch.active {
  border-color: var(--accent);
}

.theme-swatch-bg {
  position: absolute;
  inset: 0;
}

.theme-swatch-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.35em 0.5em;
  font-size: 0.7rem;
  font-weight: 500;
}

.theme-swatch-accent {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.theme-section-label {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.6rem 0 0.1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.theme-section-label:first-child {
  padding-top: 0;
}

/* --- Custom Theme Swatches --- */

.theme-swatch-custom {
  border-style: dashed;
}

/* --- Theme Editor --- */

.theme-editor {
  display: flex;
  flex-direction: column;
}

.theme-color-picker {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  cursor: pointer;
}

.theme-color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.theme-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.theme-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

/* --- Showcase Background Picker --- */

.showcase-bg-preview {
  width: 100%;
  max-width: 500px;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background-color: var(--bg-secondary);
}

.showcase-bg-preview-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: filter 0.2s;
}

.showcase-bg-preview-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  pointer-events: none;
}

.showcase-bg-preview-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.showcase-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 0.75rem;
}

.showcase-bg-thumb {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}

.showcase-bg-thumb:hover {
  border-color: var(--text-muted);
  transform: scale(1.04);
}

.showcase-bg-thumb.active {
  border-color: var(--accent);
}

.showcase-slider-wrap {
  margin: 0.75rem 0;
}

.showcase-slider-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.showcase-slider {
  width: 100%;
  max-width: 400px;
  accent-color: var(--accent);
}

/* --- Soundscape List --- */

.soundscape-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.soundscape-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0.9em;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.soundscape-item:hover {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.soundscape-item.active {
  background-color: var(--accent-subtle);
  color: var(--accent);
}

.soundscape-item.playing::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  animation: presence-pulse 2s ease-in-out infinite;
}

/* --- Volume Slider --- */

.volume-slider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.volume-slider input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-elevated);
  border-radius: 2px;
  border: none;
  padding: 0;
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  transition: transform var(--transition);
}

.volume-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

.volume-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 2.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Feature Toggles --- */

.settings-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0;
}

.settings-toggle-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.settings-toggle-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.ai-level-intro {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.ai-level-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.ai-level-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 180ms ease;
}

.ai-level-card:hover {
  border-color: var(--text-muted);
}

.ai-level-card.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.ai-level-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.ai-level-card.selected .ai-level-dot {
  border-color: var(--accent);
}

.ai-level-card.selected .ai-level-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.ai-level-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

.ai-level-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.ai-level-guide-link {
  color: var(--accent);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
}

.ai-level-guide-link:hover {
  text-decoration: underline;
}

.settings-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.settings-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.settings-range-value {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 2.5em;
  text-align: center;
}

/* --- Storage Bar --- */

.storage-bar {
  margin-top: 0.5rem;
}

.storage-bar-track {
  height: 6px;
  background-color: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.storage-bar-fill {
  height: 100%;
  background-color: var(--accent);
  border-radius: 3px;
  transition: width 400ms ease;
}

.storage-bar-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* --- Alias Display --- */

.settings-alias {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.settings-alias-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-alias-cooldown {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-settings {
    padding: 1.5rem 1rem;
  }

  .theme-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .theme-swatch {
    height: 60px;
  }

  .settings-toggle-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .showcase-bg-preview {
    height: 150px;
  }

  .showcase-bg-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
}

/* ==========================================================================
   Notifications Screen
   ========================================================================== */

.screen-notifications {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.notifications-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.notification-list {
  display: flex;
  flex-direction: column;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 0.75rem;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.35rem;
  background: var(--bg-surface);
}

.notification-item:hover {
  background-color: var(--accent-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

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

/* Unread state */
.notification-item.unread {
  background-color: var(--bg-surface);
  border-left: 3px solid var(--accent);
}

.notification-item.unread .notification-text {
  color: var(--text-primary);
  font-weight: 500;
}

/* Read state */
.notification-item.read {
  opacity: 0.7;
}

.notification-item.read:hover {
  opacity: 1;
}

/* --- Notification Icon --- */

.notification-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background-color: var(--bg-secondary);
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.notification-icon.type-reply    { color: var(--accent); }
.notification-icon.type-letter   { color: var(--resonance); }
.notification-icon.type-encounter { color: var(--success); }
.notification-icon.type-message  { color: var(--accent); }
.notification-icon.type-resonance { color: var(--resonance); }

.notification-avatar {
  border-radius: 50%;
  object-fit: cover;
}

/* --- Notification Content --- */

.notification-content {
  min-width: 0;
  flex: 1;
}

.notification-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.notification-text strong {
  color: var(--text-primary);
}

.notification-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Closed state */
.notification-item.closed {
  opacity: 0.5;
  cursor: default;
}

.notification-item.closed:hover {
  background-color: transparent;
  opacity: 0.5;
}

.notification-closed-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

.notification-delete-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  margin-top: 0.3rem;
  transition: color var(--transition), border-color var(--transition);
}

.notification-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* --- Unread Indicator --- */

.notification-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-notifications {
    padding: 1.5rem 1rem;
  }

  .notification-item {
    padding: 0.8rem 0.4rem;
  }
}

/* ==========================================================================
   Guide Overlay
   ========================================================================== */

/* -- Guide overlay & container -- */
.guide-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.guide-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.guide-container { position: relative; display: flex; width: 90vw; max-width: 1060px; height: 85vh; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; z-index: 1; }
.guide-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); }
.guide-close:hover { color: var(--text-primary); background: var(--bg-hover); }

/* -- Sidebar navigation -- */
.guide-sidebar { width: 250px; min-width: 250px; background: var(--bg-secondary); border-right: 1px solid var(--border); padding: 1.5rem 0; overflow-y: auto; display: flex; flex-direction: column; }
.guide-sidebar-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; padding: 0 1.25rem 1rem; color: var(--accent); border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.5rem; letter-spacing: 0.01em; }
.guide-nav { list-style: none; margin: 0; padding: 0; }
.guide-nav li { margin: 0; }
.guide-nav-link { display: block; width: 100%; text-align: left; padding: 0.5rem 1.25rem; font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-secondary); background: none; border: none; cursor: pointer; border-left: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.guide-nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.guide-nav-link.active { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 600; }

/* -- Main content panel -- */
.guide-main { flex: 1; padding: 2rem 2.5rem; overflow-y: auto; }
.guide-content-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); padding-bottom: 0.75rem; border-bottom: 2px solid var(--accent); }
.guide-content-body { font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.75; color: var(--text-secondary); }

/* -- Intro & outro paragraphs -- */
.guide-intro { margin-bottom: 1.25rem; }
.guide-intro p { margin-bottom: 0.6rem; }
.guide-outro { margin-top: 1rem; }
.guide-outro p { margin-bottom: 0.6rem; }
.guide-content-body p { margin-bottom: 0.6rem; }

/* -- Elevated card for each list group -- */
.guide-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); padding: 1.1rem 1.25rem; margin-bottom: 0.9rem; }
.guide-card-title { font-family: var(--font-serif); font-size: 0.98rem; font-weight: 700; color: var(--accent); margin: 0 0 0.6rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border-subtle); letter-spacing: 0.01em; }
.guide-card ul { margin: 0 0 0 1.25rem; }
.guide-card li { margin-bottom: 0.4rem; line-height: 1.65; }
.guide-card li strong { color: var(--text-primary); }

/* -- Tip box -- */
.guide-tip { margin-top: 1.25rem; padding: 0.85rem 1.1rem; background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); }

/* -- Try-it button & prev/next nav -- */
.guide-try-btn { margin-top: 1.25rem; }
.guide-nav-row { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }

/* -- Mobile -- */
@media (max-width: 768px) {
  .guide-container { flex-direction: column; width: 95vw; height: 90vh; }
  .guide-sidebar { width: 100%; min-width: unset; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0.75rem 0; border-right: none; border-bottom: 1px solid var(--border); }
  .guide-sidebar-title { display: none; }
  .guide-nav { display: flex; padding: 0 0.75rem; gap: 0.25rem; }
  .guide-nav-link { white-space: nowrap; padding: 0.4rem 0.75rem; border-left: none; border-bottom: 2px solid transparent; font-size: 0.78rem; }
  .guide-nav-link.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .guide-main { padding: 1.25rem 1rem; }
  .guide-content-title { font-size: 1.25rem; }
  .guide-card { padding: 0.85rem 1rem; }
}

/* ==========================================================================
   Credits Screen
   ========================================================================== */

.screen-credits {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.credits-title {
  font-family: var(--font-display, var(--font-serif));
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.credits-intro {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.credits-category {
  margin-bottom: 2rem;
}

.credits-category-title {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.credits-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.credits-card {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}

.credits-card:hover {
  border-color: var(--accent);
  background-color: var(--surface-hover, rgba(128,128,128,0.06));
}

.credits-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.credits-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.credits-closing {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 1.5rem;
  text-align: center;
}

.credits-back {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 639px) {
  .screen-credits {
    padding: 1.5rem 1rem 2rem;
  }
  .credits-title {
    font-size: 1.3rem;
  }
  .credits-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Bookmarks Screen
   ========================================================================== */

.screen-bookmarks {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.bookmarks-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.bookmark-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.bookmark-filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.3rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition);
}

.bookmark-filter-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.bookmark-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.bookmark-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.bookmark-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.35rem;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--transition), opacity 0.2s, transform 0.2s, box-shadow var(--transition);
}

.bookmark-item:hover {
  background-color: var(--accent-subtle);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.bookmark-item:last-child {
  margin-bottom: 0;
}

.bookmark-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 1rem;
  flex-shrink: 0;
}

.bookmark-icon.type-civpage   { color: var(--accent); }
.bookmark-icon.type-writing    { color: var(--patron-gold, #d4a574); }
.bookmark-icon.type-forum_thread { color: var(--text-secondary); }
.bookmark-icon.type-letter     { color: var(--text-secondary); }

.bookmark-content {
  flex: 1;
  min-width: 0;
}

.bookmark-title-row {
  margin-bottom: 0.3rem;
}

.bookmark-title-text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookmark-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.bookmark-type-tag {
  background: var(--bg-surface);
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bookmark-author {
  font-style: italic;
}

.bookmark-remove-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
  flex-shrink: 0;
  align-self: center;
}

.bookmark-item:hover .bookmark-remove-btn {
  opacity: 1;
}

.bookmark-remove-btn:hover {
  color: var(--error, #e74c3c);
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .screen-bookmarks {
    padding: 1.5rem 1rem;
  }

  .bookmark-item {
    padding: 0.8rem 0.4rem;
  }

  .bookmark-remove-btn {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Letters Screen
   ========================================================================== */

.screen-letters {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.letters-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.letter-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-left: 2px solid var(--accent-subtle);
  padding-left: 1.2rem;
  box-shadow: var(--shadow-sm);
}

.letter-body {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  letter-spacing: 0.005em;
}

.letter-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.letter-sender {
  font-style: italic;
}

.letter-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 639px) {
  .screen-letters {
    padding: 1.5rem 1rem;
  }
}

/* ==========================================================================
   Groups Screen
   ========================================================================== */

.screen-groups,
.screen-workshop {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.group-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}

.group-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.group-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.group-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.group-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

@media (max-width: 639px) {
  .screen-groups,
  .screen-workshop {
    padding: 1.5rem 1rem;
  }
}

/* ==========================================================================
   Review Screen (Blind Peer Review)
   ========================================================================== */

.screen-review {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.review-case {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.review-case:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.review-case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.review-case-type {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  text-transform: capitalize;
}

.review-case-status {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2em 0.6em;
  border-radius: 2em;
}

.review-case-status.status-pending {
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.review-case-status.status-upheld {
  color: var(--error, #c0392b);
  background: rgba(192, 57, 43, 0.08);
}

.review-case-status.status-overturned {
  color: var(--accent);
  background: var(--accent-subtle);
}

.review-case-reason {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.review-case-snapshot {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
  white-space: pre-wrap;
}

.review-vote-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 639px) {
  .screen-review {
    padding: 1.5rem 1rem;
  }
}

/* ===================================================================
   WRITING VIEW
   =================================================================== */

.screen-writing-view {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

@media (max-width: 639px) {
  .screen-writing-view {
    padding: 1.5rem 1rem 3rem;
  }
}

/* --- Writing Comments --- */

.writing-comments {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.writing-comments-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
}

.writing-comment {
  padding: 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-xs);
}

.writing-comment:last-child {
  margin-bottom: 0;
}

.writing-comment-quote {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--accent);
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.5rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.writing-comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

.writing-comment-time {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.writing-comment-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.writing-comment-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.writing-comment-replies {
  margin-left: 1.2rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border-subtle);
}

.writing-comment-form {
  margin-top: 1.2rem;
}

.writing-comment-input {
  resize: vertical;
  min-height: 3rem;
}

.writing-comment-sel-info {
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.writing-reply-form {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
}

/* ===================================================================
   SERIES
   =================================================================== */

.screen-series {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.screen-series .card {
  margin-bottom: 1rem;
}

.screen-series .card + .card {
  margin-top: 0;
}

.series-drag-handle {
  cursor: grab;
  font-size: 1.3rem;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}

.series-drag-handle:active {
  cursor: grabbing;
}

.series-work-card.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (max-width: 639px) {
  .screen-series {
    padding: 1.5rem 1rem 3rem;
  }
}

/* ==========================================================================
   Admin Dashboard — Observatory
   ========================================================================== */

@keyframes adminCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes adminPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 1%); }
  30%  { transform: translate(-1%, 3%); }
  40%  { transform: translate(2%, -2%); }
  50%  { transform: translate(-3%, 2%); }
  60%  { transform: translate(1%, -1%); }
  70%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, -2%); }
  90%  { transform: translate(-1%, 1%); }
  100% { transform: translate(0, 0); }
}

.admin-screen {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.admin-noise {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grainDrift 8s steps(10) infinite;
}

.admin-loading {
  text-align: center;
  padding: 6rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  animation: adminPulse 1.5s ease-in-out infinite;
}

.admin-error {
  text-align: center;
  padding: 4rem 2rem 1rem;
  font-size: 0.95rem;
  color: var(--error);
}

/* --- Header --- */

.admin-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.admin-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.admin-timestamp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* --- Sections --- */

.admin-section {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}

.admin-section-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
  padding-left: 0.15rem;
}

.admin-section-title::before {
  content: '//';
  margin-right: 0.5em;
  color: var(--accent);
  opacity: 0.5;
}

/* --- Grid --- */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 0.6rem;
}

/* --- Cards --- */

.admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem 0.85rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: adminCardIn 0.4s ease both;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.admin-card:hover {
  border-color: var(--border-subtle);
  box-shadow: 0 0 0 1px var(--border);
}

.admin-card--accent .admin-card-value {
  color: var(--accent);
}

.admin-card--warn {
  border-color: rgba(204, 68, 68, 0.25);
}

.admin-card--warn .admin-card-value {
  color: var(--error);
}

.admin-card--warn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--error);
  opacity: 0.6;
}

.admin-card-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.admin-card-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.admin-card-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

/* --- Footer --- */

.admin-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

/* --- Responsive --- */

@media (max-width: 639px) {
  .admin-screen {
    padding: 1.5rem 1rem 3rem;
  }

  .admin-header {
    flex-direction: column;
    gap: 0.3rem;
  }

  .admin-title {
    font-size: 1.5rem;
  }

  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .admin-card {
    padding: 0.8rem;
  }

  .admin-card-value {
    font-size: 1.3rem;
  }
}

/* ---- Admin User Manager ---- */

.admin-users {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.admin-users-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.admin-users-tab {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.admin-users-tab:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.admin-users-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--accent);
}

.admin-users-search {
  margin-bottom: 1rem;
}

.admin-users-search .input {
  width: 100%;
  max-width: 320px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.admin-users-search .input::placeholder {
  color: var(--text-muted);
}

.admin-users-table {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-height: 100px;
}

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition);
}

.admin-user-row:hover:not(.admin-user-row--header) {
  background: var(--bg-surface);
}

.admin-user-row--header {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-size: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.admin-user-cell {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-cell:first-child {
  flex: 1.5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-user-cell:last-child {
  flex: 1.5;
}

.admin-user-alias {
  color: var(--accent);
  text-decoration: none;
}

.admin-user-alias:hover {
  text-decoration: underline;
}

.admin-user-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  line-height: 1.3;
}

.admin-user-badge--banned {
  background: rgba(204, 68, 68, 0.15);
  color: var(--error);
}

.admin-user-badge--admin {
  background: rgba(130, 80, 223, 0.15);
  color: rgb(160, 120, 240);
}

.admin-user-badge--mod {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(100, 160, 255);
}

.admin-user-badge--patron-active {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(60, 200, 110);
}

.admin-user-badge--patron-cancelled {
  background: rgba(150, 150, 150, 0.15);
  color: var(--text-muted);
}

.admin-user-badge--patron-past_due {
  background: rgba(234, 179, 8, 0.15);
  color: rgb(220, 180, 40);
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.admin-ban-group {
  position: relative;
  display: inline-block;
}

.admin-ban-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 90px;
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.admin-users-pag-info {
  min-width: 100px;
  text-align: center;
}

@media (max-width: 639px) {
  .admin-users-tabs {
    flex-wrap: wrap;
  }

  .admin-user-row {
    font-size: 0.65rem;
    gap: 0.3rem;
  }

  .admin-user-cell:first-child {
    flex: 1;
  }

  .admin-user-cell:last-child {
    flex: 1;
  }
}

/* ---- Competition Screens ---- */
.screen-competitions {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.comp-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.comp-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}

.comp-tab {
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  background: none;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}

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

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

.comp-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}

.comp-card:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.comp-card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.comp-card-title h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.comp-card-prompt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comp-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.comp-meta span {
  display: inline-flex;
  align-items: center;
}

.comp-meta .comp-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.comp-phase {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comp-phase-signup { background: var(--accent-subtle); color: var(--accent); }
.comp-phase-writing { background: rgba(76,175,80,0.15); color: #66bb6a; }
.comp-phase-voting { background: rgba(255,183,77,0.15); color: #ffb74d; }
.comp-phase-completed { background: rgba(129,199,132,0.15); color: #81c784; }
.comp-phase-cancelled { background: rgba(239,83,80,0.1); color: var(--error); }

/* Sections */
.comp-section {
  margin-top: 1.5rem;
}

.comp-section-msg {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.comp-section-title {
  margin: 0 0 1rem;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Detail page */
.comp-detail-header {
  margin-bottom: 2rem;
}

.comp-detail-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.comp-prompt {
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  margin: 1.25rem 0;
}

.comp-countdown {
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 500;
  margin: 0.75rem 0;
}

.comp-stats {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.comp-stats strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Entry cards */
.comp-entry-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.comp-entry-info {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.comp-entry-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
}

.comp-entry-card .entry-body {
  line-height: 1.7;
  color: var(--text-primary);
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

.comp-entry-card .entry-body.expanded { max-height: none; }

.comp-entry-card .read-more {
  color: var(--accent);
  cursor: pointer;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
}

/* Vote picker */
.comp-vote-picker {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}

.comp-vote-picker h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.comp-vote-picker select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Results */
.comp-results .result-entry {
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 1.75rem;
}

.comp-results .result-rank {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--accent);
  color: var(--bg-primary);
}

.comp-results .result-rank.rank-1 { background: var(--patron-gold); }
.comp-results .result-rank.rank-2 { background: #c0c0c0; color: #333; }
.comp-results .result-rank.rank-3 { background: #cd7f32; }

.comp-results .result-author {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.comp-results .result-points {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Praise */
.comp-praise-section {
  margin-left: 3rem;
  margin-bottom: 1.5rem;
}

.comp-praise-form {
  margin-top: 0.75rem;
}

.comp-praise-form textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 0.5rem;
}

/* Create form */
/* Competition ID */
.comp-id {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: monospace;
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* Creator actions */
.comp-creator-actions {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.comp-creator-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.comp-creator-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-danger {
  background: var(--error);
  color: #fff;
  border: 1px solid var(--error);
}

.btn-danger:hover {
  opacity: 0.85;
}

.comp-create-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.comp-create-form {
  max-width: 600px;
}

.comp-create-form .form-group {
  margin-bottom: 1.25rem;
}

.comp-create-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.comp-create-form input,
.comp-create-form select,
.comp-create-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition);
}

.comp-create-form input:focus,
.comp-create-form select:focus,
.comp-create-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.comp-create-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.comp-create-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

@media (max-width: 600px) {
  .comp-create-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Praise cards */
.praise-card {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-left: 2px solid var(--patron-gold);
}

.praise-card .praise-author {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.competition-template { position: relative; border: 1px solid var(--patron-gold); }
.competition-template .comp-badge {
    position: absolute; top: -8px; right: 8px; background: var(--patron-gold); color: #1a1a2e;
    font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* My Works */
.screen-my-works {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.my-works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.my-works-header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.my-works-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.my-work-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.my-work-card-main {
  flex: 1;
  min-width: 0;
}

.my-work-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-work-card-main:hover .my-work-title {
  color: var(--accent);
}

.my-work-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.my-work-reach {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.my-work-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

@media (max-width: 600px) {
  .screen-my-works {
    padding: 1.5rem 1rem;
  }
}

/* ==========================================================================
   Moderation Screen
   ========================================================================== */

.screen-moderation {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (max-width: 600px) {
  .screen-moderation {
    padding: 1.5rem 1rem;
  }
}

/* ==========================================================================
   Editor Maximize Mode
   ========================================================================== */

.editor-maximized .editor-writing-meta,
.editor-maximized .editor-publish,
.editor-maximized .editor-actions,
.editor-maximized .editor-stats,
.editor-maximized .page-setup {
  display: none !important;
}

.editor-maximized .editor-area {
  flex: 1;
}

.editor-maximized .editor-body-container {
  min-height: calc(100vh - 120px) !important;
}

.editor-maximized .editor-body-container .ProseMirror {
  min-height: calc(100vh - 160px);
}

/* Writing editor atmospheric background — ::before on .editor-area (non-scrolling)
   so the texture stays fixed while editor content scrolls over it. */
.editor--has-bg {
  position: relative;
}
.editor--has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--editor-bg);
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: var(--editor-bg-opacity, 0.3);
  pointer-events: none;
  z-index: 1;
}
/* Body container must be transparent so texture on .editor-area shows through */
.editor--has-bg .editor-body-container {
  background-color: transparent;
  position: relative;
  z-index: 2;
}
.editor--has-bg .ProseMirror {
  position: relative;
}

/* Solid color background (frames) — replaces the container background directly */
.editor--has-bg-color {
  background-color: var(--editor-bg-color) !important;
  border: var(--editor-bg-border, none) !important;
  border-radius: 12px;
}
.editor--has-bg-color .ProseMirror {
  color: var(--editor-bg-text, var(--text-primary));
}
.editor--has-bg-color .ProseMirror ::selection {
  background: color-mix(in srgb, var(--editor-bg-text, var(--text-primary)) 20%, transparent);
}

/* Editor background picker dropdown */
.editor-bg-picker {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 72px);
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.editor-bg-picker-item {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}
.editor-bg-picker-item:hover {
  border-color: var(--accent);
  opacity: 1;
}
.editor-bg-picker-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 1;
}
.editor-bg-picker-none {
  width: 72px;
  height: 72px;
  border: 2px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.editor-bg-picker-none:hover {
  border-color: var(--accent);
}

/* ==========================================================================
   Competition Mobile
   ========================================================================== */

@media (max-width: 639px) {
  .screen-competitions {
    padding: 1.5rem 1rem;
  }

  .comp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .comp-header h1 {
    font-size: 1.2rem;
  }

  .comp-detail-header h1 {
    font-size: 1.2rem;
  }

  .comp-praise-section {
    margin-left: 0;
  }

  .comp-card {
    padding: 1rem;
  }

  .comp-create-form {
    padding: 1.5rem 1rem;
  }

  .patron-offer {
    max-width: 100%;
  }

  .my-work-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem;
  }

  .my-work-actions {
    align-self: flex-end;
  }
}

/* ==========================================================================
   Mobile Responsiveness — Global Overrides
   ========================================================================== */

@media (max-width: 639px) {
  /* Hide standalone floating triggers on mobile — they live in bottom-nav now */
  .notepad-trigger {
    display: none !important;
  }
  .floating-search-trigger {
    display: none !important;
  }

  /* Floating search panel — anchored above bottom-nav */
  .floating-search {
    position: fixed;
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 4000;
    pointer-events: none;
  }
  .floating-search-panel {
    position: relative;
    pointer-events: auto;
    left: auto;
    right: 0;
    bottom: auto;
    width: calc(100vw - 1rem);
    max-width: none;
    margin: 0 0.5rem;
  }

  /* Notepad panel — anchored above bottom-nav, reset saved position */
  .notepad-panel {
    top: 4rem !important;
    bottom: auto !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 8rem) !important;
  }

  /* Topbar — tighter spacing */
  .topbar-right {
    gap: 0.4rem;
  }

  /* Headings — reduce large headings */
  h1, .thread-detail-title { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  /* Modals — tighter padding */
  .modal { padding: 1rem; }

  /* Containers — prevent overflow */
  .container-narrow { max-width: 100%; }

  /* Safe area for floating elements */
  .nav-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .modal-overlay {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Ensure 44px tap targets for civpage actions */
  .action-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Comfortable reading on mobile */
  .writing-content {
    line-height: 1.8;
  }

  .post-body {
    line-height: 1.75;
  }

  /* Consistent mobile content padding */
  .screen-writing-view,
  .screen-forum {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Avatars */
.user-popup-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.5rem;
}
.thread-author-avatar,
.post-author-avatar {
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.thread-author-avatar {
  width: 20px;
  height: 20px;
}
.post-author-avatar {
  width: 24px;
  height: 24px;
}

.settings-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 0.5rem;
}

/* ===== Live Co-Editing ===== */

/* Session banner live state */
.session-banner.live {
  border-left-color: var(--success);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { border-left-color: var(--success); }
  50% { border-left-color: color-mix(in srgb, var(--success) 50%, transparent); }
}

.session-banner .live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  margin-left: 0.5rem;
}

.session-banner .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: live-dot-blink 1.5s ease-in-out infinite;
}

@keyframes live-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.live-timer {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

/* Host / End Session / Join buttons */
.btn-live {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--success);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
  line-height: 1.4;
}

.btn-live:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-live:active {
  transform: translateY(0);
}

.btn-live.end {
  background: var(--error);
}

.btn-live.join {
  background: var(--accent);
}

.btn-live:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Follow/Detach toggle for book collab */
.btn-live.follow-toggle img {
  filter: brightness(0) invert(1);
  vertical-align: middle;
}
.host-chapter-indicator {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

/* Chapter sidebar presence dots */
.chapter-presence-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
.chapter-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Live session participants bar */
.live-participants {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
}

.live-participant-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  flex-shrink: 0;
}

.live-participant-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Remote cursor overlay */
.cursor-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.cursor-mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.remote-cursor-line {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  pointer-events: none;
  transition: transform 80ms ease-out;
  will-change: transform;
}

.remote-cursor-label {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
  transition: transform 80ms ease-out;
  will-change: transform;
  opacity: 0.9;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.remote-cursor-selection {
  position: absolute;
  border-radius: 2px;
  pointer-events: none;
  transition: transform 80ms ease-out, width 80ms ease-out;
  will-change: transform, width;
}


/* Collaboration preferences (settings page) */
.collab-prefs-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.collab-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

.collab-pref-row label {
  font-size: 0.82rem;
  color: var(--text);
}

.collab-pref-row .pref-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.collab-throttle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.collab-throttle-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
}

.collab-throttle-row .throttle-value {
  min-width: 3rem;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Mobile responsive — live session UI */
@media (max-width: 768px) {
  .live-participants {
    flex-wrap: wrap;
  }

  .remote-cursor-label {
    font-size: 0.55rem;
    padding: 1px 3px;
  }
}

/* Session control bar (author controls during live session) */
.session-control-bar {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-surface, #1e1e2e);
    border-bottom: 1px solid var(--border-color, #333);
    font-size: 0.8rem;
}
.session-control-bar .btn.active {
    background: var(--accent, #e67e22);
    color: #fff;
}
.session-connected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}
.session-user-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-primary, #111);
    border-radius: 4px;
    font-size: 0.78rem;
}
.session-user-name {
    color: var(--text-primary);
}
.session-ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: background-color 0.15s;
}
.session-ctrl-btn:hover {
    background: var(--bg-surface, #2a2a3a);
}
.session-ctrl-btn.active {
    color: #ef4444;
}
.session-ctrl-btn.kick {
    color: #ef4444;
}
.session-ctrl-btn.kick:hover {
    background: rgba(239, 68, 68, 0.15);
}
.session-no-users {
    color: var(--text-muted);
    font-style: italic;
}

/* Session status banner (shown to muted/spectator users) */
.session-status-banner {
    padding: 0.4rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.8rem;
    text-align: center;
}

/* Read-only visual indicator on editor */
.ProseMirror.session-readonly {
    border: 1px dashed var(--text-muted, #666) !important;
    opacity: 0.85;
}

/* -----------------------------------------------------------------------
   Research: Wikilinks + Backlinks
   ----------------------------------------------------------------------- */

.research-wikilink-dropdown {
  position: absolute;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  min-width: 180px;
}

.research-wikilink-option {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.research-wikilink-option.active,
.research-wikilink-option:hover {
  background: var(--bg-hover, #f0f0f0);
}

.research-wikilink {
  color: var(--link-color, #4f46e5);
  cursor: pointer;
  text-decoration: underline dotted;
}

.research-wikilink:hover {
  text-decoration: underline solid;
}

.research-backlinks-section:empty {
  display: none;
}

.research-backlinks-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #eee);
}

.research-backlinks-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.research-backlink-item {
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.research-backlink-item:hover {
  background: var(--bg-hover, #f0f0f0);
}

.research-note-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #eee);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Research Awareness (dual cursor) --- */

.research-presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

.research-presence-header {
  font-size: 11px;
  color: var(--text-secondary, #888);
  padding: 2px 12px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.research-remote-cursor {
  position: absolute;
  width: 2px;
  pointer-events: none;
  z-index: 10;
}

.research-remote-cursor-label {
  position: absolute;
  bottom: 100%;
  left: -2px;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.research-cursor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── AI Provider settings ── */

.ai-provider-list {
  margin: 16px 0;
}

.ai-provider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}

.ai-provider-row:hover {
  background: rgba(255,255,255,0.02);
}

.ai-provider-default {
  border-color: rgba(100, 160, 255, 0.3);
}

.ai-provider-star {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary, #888);
  padding: 4px;
  transition: color 0.15s;
}

.ai-provider-default .ai-provider-star {
  color: #f0c040;
}

.ai-provider-info {
  flex: 1;
  min-width: 0;
}

.ai-provider-name {
  font-weight: 500;
  margin-bottom: 2px;
}

.ai-provider-details {
  font-size: 0.85em;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-provider-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.settings-empty-text {
  color: var(--text-secondary, #888);
  font-style: italic;
  padding: 16px 0;
}

.ai-provider-form-overlay {
  background: var(--surface-1, var(--bg-secondary, #1a1a1a));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 20px;
  margin: 16px 0;
}

.ai-provider-form-overlay h3 {
  margin: 0 0 16px;
  font-size: 1.1em;
}

.ai-provider-form-row {
  margin-bottom: 12px;
}

.ai-provider-form-row label {
  display: block;
  font-size: 0.85em;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
}

.ai-provider-form-row input,
.ai-provider-form-row select {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2, var(--bg-elevated, #222));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--text-primary, var(--text, #eee));
  font-size: 0.95em;
  box-sizing: border-box;
}

.ai-provider-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .ai-provider-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ai-provider-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Grouped provider cards */
.ai-provider-group-card {
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}
.ai-provider-group-card:hover {
  background: rgba(255,255,255,0.02);
}

.ai-provider-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ai-provider-group-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ai-provider-group-name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.ai-provider-group-key {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  font-family: monospace;
  white-space: nowrap;
}

.ai-provider-group-models {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
}
.ai-provider-group-model-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.ai-provider-group-model-label {
  color: var(--text-muted, #888);
  min-width: 72px;
  flex-shrink: 0;
}
.ai-provider-group-model-value {
  color: var(--text-primary, var(--text, #eee));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-provider-group-default-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-subtle, rgba(100,160,255,0.15));
  color: var(--accent, #6090e0);
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 600px) {
  .ai-provider-group-header {
    flex-wrap: wrap;
  }
  .ai-provider-group-models {
    padding-left: 0;
  }
}

/* ---------- AI Setup Walkthrough ---------- */

.ai-setup-wrapper {
  padding: 24px 20px;
  position: relative;
}

.ai-setup-wrapper h3 {
  margin: 0 0 12px;
  font-size: 1.1em;
}

.ai-setup-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.ai-setup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.2s;
}

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

.ai-setup-dot.done {
  background: rgba(100, 200, 100, 0.6);
}

.ai-setup-close {
  position: absolute;
  top: 20px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
}

.ai-setup-close:hover {
  color: var(--text-primary);
}

.ai-setup-desc {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.ai-setup-note {
  color: var(--text-muted);
  font-size: 0.85em;
  margin-bottom: 20px;
}

.ai-setup-provider-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
}

.ai-setup-provider-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ai-setup-provider-item:hover {
  border-color: rgba(100, 160, 255, 0.3);
  background: var(--bg-elevated);
}

.ai-setup-provider-item.selected {
  border-color: var(--accent);
}

.ai-setup-provider-name {
  font-weight: 500;
  margin-bottom: 2px;
}

.ai-setup-provider-desc {
  font-size: 0.85em;
  color: var(--text-secondary);
}

.ai-setup-key-link {
  display: block;
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 0.9em;
}

.ai-setup-field {
  margin-bottom: 12px;
}

.ai-setup-field label {
  display: block;
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.ai-setup-field input {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2, var(--bg-elevated, #222));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--text-primary, var(--text, #eee));
  font-size: 0.95em;
  box-sizing: border-box;
}

.ai-setup-status {
  color: #e67;
  font-size: 0.9em;
  min-height: 1.4em;
  margin: 8px 0;
}

.ai-setup-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.ai-setup-features {
  margin: 12px 0 20px;
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.ai-setup-selected {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 12px;
}

/* ---------- AI Inline Toolbar ---------- */

.ai-inline-toolbar {
  position: absolute;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--bg-elevated, #2a2a2a);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  opacity: 0;
  animation: ai-toolbar-fadein 0.12s ease forwards;
  pointer-events: auto;
}

@keyframes ai-toolbar-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-toolbar-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #999);
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.ai-toolbar-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #eee);
}

.ai-toolbar-disabled .ai-toolbar-btn {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---------- AI Result Popover ---------- */

.ai-result-popover {
  position: absolute;
  min-width: 220px;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-elevated, #2a2a2a);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 101;
  animation: ai-toolbar-fadein 0.12s ease forwards;
}

.ai-result-loading {
  color: var(--text-secondary, #888);
  font-size: 0.9em;
  padding: 8px 12px;
}

.ai-result-error {
  color: #e67;
  font-size: 0.9em;
  padding: 8px 12px;
}

.ai-result-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary, #eee);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1.4;
  transition: background 0.1s;
}

.ai-result-suggestion:hover {
  background: rgba(255,255,255,0.06);
}

.ai-result-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}

.ai-result-pill {
  background: rgba(100, 160, 255, 0.12);
  border: 1px solid rgba(100, 160, 255, 0.2);
  color: var(--text-primary, #eee);
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.1s, border-color 0.1s;
}

.ai-result-pill:hover {
  background: rgba(100, 160, 255, 0.2);
  border-color: rgba(100, 160, 255, 0.4);
}

.ai-result-text {
  padding: 10px 12px;
  color: var(--text-primary, #eee);
  font-size: 0.9em;
  line-height: 1.5;
}

.ai-result-lang {
  padding: 0 12px 8px;
  color: var(--text-secondary, #888);
  font-size: 0.8em;
}

.ai-result-actions {
  display: flex;
  gap: 6px;
  padding: 4px 8px 8px;
}

.ai-result-ok {
  color: #6c6;
  padding: 8px 12px;
  font-size: 0.9em;
}

.ai-result-correction {
  padding: 6px 12px;
  font-size: 0.9em;
}

.ai-result-original {
  color: #e67;
  text-decoration: line-through;
}

.ai-result-fix {
  background: none;
  border: none;
  color: #6c6;
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
}

.ai-result-fix:hover {
  color: #8e8;
}

/* ---------- AI Explain Tab ---------- */
.ai-explain-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}

.ai-explain-word {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-primary, #eee);
}

.ai-explain-loading {
  color: var(--text-secondary, #888);
  font-style: italic;
}

.ai-explain-section {
  margin-bottom: 16px;
}

.ai-explain-section-title {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #888);
  margin: 0 0 6px;
}

.ai-explain-section-text {
  color: var(--text-primary, #eee);
  line-height: 1.6;
  margin: 0;
}

.ai-explain-examples {
  margin: 0;
  padding-left: 20px;
  color: var(--text-primary, #ddd);
  line-height: 1.8;
}

/* ---------- AI Chat Tab ---------- */
/* Writing Coach Tab */
.coach-rules-section { padding: 12px 16px; }
.coach-rules-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; padding: 8px 0;
  color: var(--text-primary, #eee); font-size: 0.9em; font-weight: 600;
}
.coach-rules-header::after {
  content: '\25BE'; font-size: 0.7em; transition: transform 0.15s;
}
.coach-rules-header.collapsed::after { transform: rotate(-90deg); }
.coach-category { margin-bottom: 12px; }
.coach-category-label {
  font-size: 0.8em; color: var(--text-secondary, #888); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px; display: flex; align-items: center;
  gap: 4px; cursor: pointer; user-select: none;
}
.coach-category-label::before {
  content: '\25BE'; font-size: 0.65em; transition: transform 0.15s;
}
.coach-category-label.collapsed::before { transform: rotate(-90deg); }
.coach-rule-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 4px 8px; font-size: 0.85em; color: var(--text-primary, #ddd);
}
.coach-rule-toggle {
  position: relative; width: 32px; height: 18px; flex-shrink: 0;
}
.coach-rule-toggle input {
  opacity: 0; width: 0; height: 0;
}
.coach-rule-toggle .toggle-track {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-subtle, rgba(255,255,255,0.12));
  border-radius: 9px; transition: background 0.2s; cursor: pointer;
}
.coach-rule-toggle input:checked + .toggle-track {
  background: var(--accent, #6a9fff);
}
.coach-rule-toggle .toggle-track::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; top: 2px; left: 2px;
  transition: transform 0.2s;
}
.coach-rule-toggle input:checked + .toggle-track::after {
  transform: translateX(14px);
}
.coach-check-btn {
  display: block; width: calc(100% - 32px); margin: 8px 16px;
  padding: 8px 0; background: var(--accent, #6a9fff); color: #fff;
  border: none; border-radius: var(--radius, 6px); cursor: pointer;
  font-size: 0.85em; font-weight: 500; transition: opacity 0.15s;
}
.coach-check-btn:hover { opacity: 0.85; }
.coach-check-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.coach-violations { padding: 8px 16px; }
.coach-violation-item {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg-primary, rgba(0,0,0,0.2));
  border-radius: var(--radius, 6px);
  border-left: 3px solid rgba(255, 180, 50, 0.6);
  font-size: 0.85em; color: var(--text-primary, #ddd);
  line-height: 1.5;
}
.coach-violation-item.suggestion {
  border-left-color: rgba(100, 160, 255, 0.5);
}
.coach-violation-rule {
  font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent, #6a9fff); margin-bottom: 4px; font-weight: 600;
}
.coach-violation-quote {
  font-style: italic; color: var(--text-secondary, #999);
  margin-bottom: 4px; font-size: 0.9em;
}
.coach-violation-suggest {
  color: var(--text-primary, #ddd);
}
.coach-violation-suggest.has-replacement {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--text-muted, #666);
  text-underline-offset: 2px;
}
.coach-violation-suggest.has-replacement:hover {
  text-decoration-color: var(--coach-underline, #e8922e);
  color: var(--coach-underline, #e8922e);
}
.coach-violation-item.applied {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}
.coach-violation-item.applied::after {
  content: 'Applied';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success, #4a8a5a);
  font-weight: 600;
}
.coach-empty {
  color: var(--text-secondary, #888); text-align: center;
  padding: 20px; font-size: 0.85em;
}
.ai-loading-state {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.ai-loading-spinner {
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--border, #555);
  border-top-color: var(--accent, #e8922e);
  border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
}

/* Coach violation highlights in editor */
.coach-highlight {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--coach-underline, #e8922e);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  transition: background 0.3s ease;
  border-radius: 2px;
}
.coach-highlight:hover {
  background: var(--coach-pulse-bg, rgba(232, 146, 46, 0.12));
}
@keyframes coach-pulse {
  0% { background: var(--coach-pulse-bg, rgba(232, 146, 46, 0.12)); }
  100% { background: transparent; }
}
.coach-highlight-pulse {
  animation: coach-pulse 0.4s ease-out forwards;
}
.coach-violation-item:hover {
  border-left-color: var(--coach-underline, #e8922e);
}

/* ProseMirror violation decorations */
.ai-violation {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  transition: background 0.15s ease;
}
.ai-violation-warning { text-decoration-color: rgba(255, 180, 50, 0.6); }
.ai-violation-suggestion { text-decoration-color: rgba(100, 160, 255, 0.5); }
.ai-violation:hover { background: rgba(255, 180, 50, 0.08); }

/* ── LanguageTool underlines ── */
.lt-underline { background: none; border-bottom: 2px solid; cursor: pointer; }
.lt-grammar { border-bottom-color: var(--error); }
.lt-spelling { border-bottom-color: var(--accent); }
.lt-style { border-bottom-color: #5588cc; }
.lt-underline:hover { background: rgba(204, 68, 68, 0.08); }

/* ── LanguageTool popover ── */
.lt-popover { position: absolute; z-index: 100; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.5rem; max-width: 280px; font-family: var(--font-sans); }
.lt-popover-primary { display: block; width: 100%; padding: 0.4rem 0.6rem; background: var(--accent-subtle); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-size: 0.88rem; cursor: pointer; font-family: var(--font-sans); text-align: center; font-weight: 500; }
.lt-popover-primary:hover { background: var(--accent); color: var(--bg-primary); }
.lt-popover-alts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.lt-popover-suggestion { padding: 0.2rem 0.5rem; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.75rem; cursor: pointer; font-family: var(--font-sans); }
.lt-popover-suggestion:hover { border-color: var(--accent); color: var(--accent); }
.lt-popover-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--border-subtle, var(--border)); }
.lt-popover-message { font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }
.lt-popover-dismiss { font-size: 0.7rem; color: var(--text-muted); cursor: pointer; border: none; background: none; padding: 0; font-family: var(--font-sans); white-space: nowrap; flex-shrink: 0; }
.lt-popover-dismiss:hover { color: var(--text-primary); }
.editor-ctx-lt-message { font-size: 0.78rem; color: var(--text-muted); padding: 0.3rem 0.75rem; cursor: default; font-style: italic; }

/* Coach style hint banner */
.coach-style-hint-banner {
  padding: 10px 16px;
  margin: 8px 0;
  background: var(--accent-subtle, rgba(232, 146, 46, 0.08));
  border-left: 3px solid var(--accent, #e8922e);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.85em;
  line-height: 1.5;
}
.coach-style-hint-label {
  font-weight: 600;
  color: var(--accent, #e8922e);
}

/* Plot Context panel */
.plot-panel-heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.1em;
  font-weight: 600;
  padding: 12px 16px 8px;
}
.plot-panel-label {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #666);
  padding: 8px 16px 2px;
}
.plot-panel-text {
  padding: 2px 16px 8px;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
}
.plot-panel-style-hint {
  padding: 4px 16px 8px;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--accent, #e8922e);
  font-style: italic;
}
.plot-panel-beats {
  padding: 4px 16px 8px;
}
.plot-panel-beat {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.plot-panel-beat:last-child { border-bottom: none; }
.plot-panel-beat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.plot-panel-beat-title {
  font-size: 0.85em;
  font-weight: 500;
}
.plot-panel-beat-type {
  font-size: 0.65em;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated, #2a2a2a);
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.plot-panel-beat-desc {
  font-size: 0.8em;
  color: var(--text-secondary, #aaa);
  padding-top: 2px;
  line-height: 1.4;
}

/* ── AI Usage Statistics ── */
.ai-usage-container { margin-top: 8px; }
.ai-usage-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
}
.ai-usage-tab {
  background: none; border: 1px solid var(--border-subtle, rgba(255,255,255,0.12));
  color: var(--text-secondary, #888); padding: 6px 16px; border-radius: var(--radius, 6px);
  cursor: pointer; font-size: 0.8em; transition: all 0.15s;
}
.ai-usage-tab:hover { color: var(--text-primary, #eee); }
.ai-usage-tab.active {
  background: var(--accent, #6a9fff); color: #fff;
  border-color: var(--accent, #6a9fff);
}
.ai-usage-loading, .ai-usage-empty {
  color: var(--text-secondary, #888); text-align: center;
  padding: 24px; font-size: 0.85em;
}
.ai-usage-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.ai-usage-card {
  background: var(--bg-primary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius, 6px); padding: 14px 12px; text-align: center;
}
.ai-usage-card-value {
  font-size: 1.5em; font-weight: 600;
  color: var(--text-primary, #eee); margin-bottom: 4px;
}
.ai-usage-card-label {
  font-size: 0.75em; color: var(--text-secondary, #888);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ai-usage-section { margin-bottom: 20px; }
.ai-usage-section-title {
  font-size: 0.8em; color: var(--text-secondary, #888);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ai-usage-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 0.85em;
}
.ai-usage-bar-label {
  width: 90px; color: var(--text-secondary, #aaa);
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  flex-shrink: 0;
}
.ai-usage-bar-wrap {
  flex: 1; height: 8px; background: var(--bg-primary, rgba(0,0,0,0.2));
  border-radius: 4px; overflow: hidden;
}
.ai-usage-bar-fill {
  height: 100%; background: var(--accent, #6a9fff);
  border-radius: 4px; transition: width 0.3s ease;
}
.ai-usage-bar-count {
  color: var(--text-secondary, #888); font-size: 0.85em;
  width: 40px; text-align: right; flex-shrink: 0;
}
.ai-usage-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 110px;
  padding-top: 10px;
}
.ai-usage-chart-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.ai-usage-chart-bar {
  width: 100%; max-width: 30px; background: var(--accent, #6a9fff);
  border-radius: 3px 3px 0 0; transition: height 0.3s ease;
  min-height: 2px;
}
.ai-usage-chart-label {
  font-size: 0.65em; color: var(--text-secondary, #888);
  margin-top: 4px;
}
.ai-usage-chart-count {
  font-size: 0.7em; color: var(--text-secondary, #999);
  margin-bottom: 4px;
}

/* Usage tab — storage, content inventory */
.usage-storage-bar {
  height: 8px;
  background: var(--bg-primary, rgba(0,0,0,0.2));
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.usage-storage-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.usage-storage-fill.green { background: var(--success, #4a8a5a); }
.usage-storage-fill.yellow { background: var(--warning, #e5a000); }
.usage-storage-fill.red { background: var(--error, #cc4444); }
.usage-storage-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary, #888);
}
.usage-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.usage-content-card {
  text-align: center;
  padding: 0.75rem;
  background: var(--bg-primary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius, 6px);
}
.usage-content-count {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #eee);
}
.usage-content-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  margin-top: 0.2rem;
}

/* Inline comment highlights */
.has-comment {
  background-color: rgba(99, 102, 241, 0.12);
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  transition: background-color 0.15s;
}
.has-comment:hover {
  background-color: rgba(99, 102, 241, 0.2);
}

/* Word limit enforcement flash */
@keyframes word-limit-flash {
  0%, 100% { color: var(--text-primary); }
  25%, 75% { color: var(--error); transform: scale(1.05); }
}
.word-limit-flash {
  animation: word-limit-flash 0.6s ease;
}

/* ==========================================================================
   Collaborative Canvas
   ========================================================================== */

.screen-canvas {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  background: var(--bg-primary);
}

.canvas-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  background: var(--bg-elevated, #f5f5f5);
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
  min-height: 40px;
  z-index: 10;
}

.canvas-topbar-back,
.canvas-topbar-close {
  background: none;
  border: none;
  color: var(--text-secondary, #666);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.canvas-topbar-back:hover,
.canvas-topbar-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.canvas-topbar-name {
  font-family: 'Literata', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #222);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  outline: none;
  min-width: 60px;
  max-width: 300px;
  transition: border-color 0.15s;
  cursor: text;
}

.canvas-topbar-name:hover {
  border-color: var(--border, #ccc);
}

.canvas-topbar-name:focus {
  border-color: var(--accent, #6a9fff);
  box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.15);
}

.canvas-topbar-spacer {
  flex: 1;
}

.canvas-topbar-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.canvas-topbar-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

/* Session indicator */
.canvas-session-indicator {
  margin-left: auto;
  font-size: 0.8rem;
  opacity: 0.7;
}
.canvas-session-indicator:hover {
  opacity: 1;
}

/* Session history panel */
.canvas-session-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 0.8rem;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}
.canvas-session-panel h4 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.canvas-session-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, #333);
}
.canvas-session-item:last-child {
  border-bottom: none;
}
.canvas-session-info {
  font-size: 0.8rem;
  color: var(--text-primary);
}
.canvas-session-detail {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.canvas-session-loading,
.canvas-session-empty {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  padding: 0.5rem 0;
}

.canvas-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: var(--bg-primary);
}

.canvas-viewport.grabbing {
  cursor: grabbing;
}

.canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.canvas-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}

.canvas-svg-layer path[data-arrow-hit] {
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-svg-layer path[data-arrow-id] {
  transition: stroke 0.12s, stroke-width 0.12s;
}

.canvas-svg-layer path[data-path-hit] {
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-svg-layer path[data-path-id] {
  transition: stroke 0.12s, stroke-width 0.12s;
}

.canvas-note {
  position: absolute;
  display: flex;
  background: var(--bg-elevated, #f5f5f5);
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 6px;
  box-shadow: var(--shadow-xs);
  font-family: 'Literata', serif;
  font-size: 0.9rem;
  color: var(--text-primary, #222);
  padding: 0;
  box-sizing: border-box;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.12s, border-color 0.12s;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.canvas-note.canvas-note--circle {
  border-radius: 50%;
}

.canvas-note:hover {
  box-shadow: var(--shadow-sm);
}

.canvas-note.selected {
  border-color: var(--accent, #6a9fff);
  box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.25), 0 2px 8px rgba(0,0,0,0.1);
}

.canvas-note.editing .canvas-note-text {
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.canvas-note.dragging {
  opacity: 0.85;
  box-shadow: var(--shadow-lg);
  z-index: 10;
}

.canvas-note-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  word-break: break-word;
  line-height: 1.5;
  white-space: pre-wrap;
}

.canvas-label {
  position: absolute;
  background: transparent;
  font-family: 'Literata', serif;
  color: var(--text-primary, #222);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  padding: 0.2rem;
  border: 1.5px solid transparent;
  border-radius: 4px;
}

.canvas-label.selected {
  border-color: var(--accent, #6a9fff);
  box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.25);
}

.canvas-label.editing {
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  border-color: var(--accent, #6a9fff);
}

.canvas-label.size-small { font-size: 0.85rem; }
.canvas-label.size-medium { font-size: 1.2rem; font-weight: 600; }
.canvas-label.size-large { font-size: 1.8rem; font-weight: 700; }

/* --- Canvas pure text element --- */
.canvas-text {
  position: absolute;
  font-family: 'Literata', serif;
  color: var(--text-primary);
  cursor: move;
  min-width: 40px;
  min-height: 20px;
  padding: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: none;
  -webkit-user-select: none;
}
.canvas-text.selected {
  outline: 2px solid var(--accent, #6a9fff);
  outline-offset: 2px;
}
.canvas-text.editing {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  outline: 2px solid var(--accent, #6a9fff);
  outline-offset: 2px;
}

.canvas-image {
  position: absolute;
  cursor: default;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.canvas-image.selected {
  box-shadow: 0 0 0 2px var(--accent);
}
.canvas-image img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* --- Canvas embed cards --- */
.canvas-embed {
  position: absolute;
  width: 260px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: default;
  font-family: 'Literata', serif;
  box-shadow: var(--shadow-xs);
}
.canvas-embed.selected {
  box-shadow: 0 0 0 2px var(--accent);
}
.canvas-embed-icon { font-size: 1.2rem; margin-bottom: 4px; }
.canvas-embed-title {
  font-weight: 600; font-size: 0.95rem;
  color: var(--text-primary); margin-bottom: 2px;
}
.canvas-embed-subtitle { font-size: 0.82rem; color: var(--text-secondary); }

/* --- Canvas frames (spatial containers) --- */
.canvas-frame {
  position: absolute;
  border: 2px solid var(--border, #333);
  border-radius: 6px;
  cursor: move;
  min-width: 100px;
  min-height: 80px;
}
.canvas-frame.selected {
  border-color: var(--accent, #6a9fff);
}
.canvas-frame.locked {
  opacity: 0.85;
  border-style: dashed;
  cursor: default;
}
.canvas-frame.locked::after {
  content: '\1F512';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  opacity: 0.6;
  pointer-events: none;
}
.canvas-frame-title {
  position: absolute;
  top: -22px;
  left: 4px;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  font-family: 'Literata', serif;
  white-space: nowrap;
  user-select: none;
  padding: 0 4px;
}

/* --- Embed picker dialog --- */
.canvas-embed-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.canvas-embed-picker {
  background: var(--bg-primary);
  border-radius: 12px; padding: 20px;
  width: 400px; max-height: 500px; overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.canvas-embed-picker h3 {
  margin: 0 0 12px; font-size: 1rem; color: var(--text-primary);
}
.canvas-embed-search {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 0.9rem; margin-bottom: 12px; box-sizing: border-box;
}
.canvas-embed-results { color: var(--text-secondary); font-size: 0.85rem; }
.canvas-embed-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.canvas-embed-result:hover { background: var(--bg-secondary); }
.canvas-embed-result-icon { font-size: 1.1rem; flex-shrink: 0; }
.canvas-embed-result-title { font-weight: 600; color: var(--text-primary); }
.canvas-embed-result-sub { color: var(--text-secondary); font-size: 0.8rem; }

.canvas-toolbar {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--bg-elevated, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  pointer-events: auto;
}

.canvas-toolbar-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.canvas-toolbar-swatch:hover {
  transform: scale(1.2);
}

.canvas-toolbar-swatch.active {
  border-color: var(--text-primary, #222);
}

.canvas-toolbar-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #666);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.canvas-toolbar-btn:hover {
  color: var(--error, #e53e3e);
  background: rgba(229, 62, 62, 0.08);
}

.canvas-toolbar-divider {
  width: 1px;
  height: 16px;
  background: var(--border, #e0e0e0);
  margin: 0 2px;
}

.canvas-selection-rect {
  position: absolute;
  border: 1.5px dashed var(--accent, #6a9fff);
  background: rgba(106, 159, 255, 0.08);
  pointer-events: none;
  z-index: 5;
}

.canvas-context-menu {
  position: fixed;
  background: var(--bg-elevated, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 140px;
  padding: 4px 0;
  overflow: hidden;
}

.canvas-context-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.9rem;
  background: none;
  border: none;
  color: var(--text-primary, #222);
  font-family: 'Literata', serif;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.canvas-context-item:hover {
  background: var(--bg-secondary);
}

.canvas-context-item.danger {
  color: var(--error, #e53e3e);
}

.canvas-context-item.danger:hover {
  background: rgba(229, 62, 62, 0.08);
}

.canvas-context-separator {
  height: 1px;
  background: var(--border, #e0e0e0);
  margin: 4px 0;
}

.canvas-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  transition: left 0.08s linear, top 0.08s linear;
}

.canvas-cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow-xs);
}

.canvas-cursor-label {
  position: absolute;
  top: 10px;
  left: 4px;
  font-size: 0.65rem;
  font-family: system-ui, sans-serif;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

.canvas-note.locked-remote,
.canvas-label.locked-remote,
.canvas-text.locked-remote,
.canvas-frame.locked-remote {
  border-style: dashed;
  opacity: 0.92;
}

/* Locked elements */
/* Grouped element highlight */
.canvas-note.grouped,
.canvas-label.grouped,
.canvas-text.grouped,
.canvas-image.grouped,
.canvas-embed.grouped,
.canvas-frame.grouped {
  outline: 2px dashed var(--accent, #6a9fff);
  outline-offset: 4px;
}

.canvas-note.locked,
.canvas-label.locked,
.canvas-text.locked,
.canvas-image.locked,
.canvas-embed.locked,
.canvas-frame.locked {
  opacity: 0.85;
  border-style: dashed;
  cursor: default;
}
.canvas-note.locked::after,
.canvas-label.locked::after,
.canvas-text.locked::after,
.canvas-image.locked::after,
.canvas-embed.locked::after,
.canvas-frame.locked::after {
  content: '\1F512';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  opacity: 0.6;
  pointer-events: none;
}

/* --- Tool Palette (left-side vertical strip) --- */

.canvas-tool-palette {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  background: var(--bg-elevated, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 15;
}

.canvas-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-secondary, #666);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.12s, color 0.12s;
}

.canvas-tool-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.canvas-tool-btn.active {
  background: var(--accent, #6a9fff);
  color: white;
}

.canvas-tool-divider {
  height: 1px;
  background: var(--border, #e0e0e0);
  margin: 0.2rem 0;
}

.canvas-pen-options {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.25rem;
}

.canvas-pen-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  margin: 0 auto;
  transition: border-color 0.12s, transform 0.12s;
}

.canvas-pen-color:hover {
  transform: scale(1.15);
}

.canvas-pen-color.active {
  border-color: var(--text-primary, #222);
}

.canvas-pen-width {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 auto;
  transition: background 0.12s;
}

.canvas-pen-width:hover {
  background: var(--bg-secondary);
}

.canvas-pen-width.active {
  background: var(--bg-secondary);
}

.canvas-pen-width-dot {
  border-radius: 50%;
  background: var(--text-primary, #222);
}

/* --- Eraser cursor circle --- */

.canvas-eraser-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-secondary, #666);
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.1s;
}

.canvas-eraser-cursor.visible {
  opacity: 1;
}

/* --- Minimap --- */

.canvas-minimap {
  position: absolute;
  bottom: 16px;
  right: 16px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  pointer-events: auto;
  cursor: pointer;
  z-index: 50;
  box-shadow: var(--shadow-md);
}

/* --- Shape elements (SVG) --- */

.canvas-shape-handle {
  fill: white;
  stroke: var(--accent);
  stroke-width: 1.5;
  cursor: nwse-resize;
}

.canvas-shape-selection {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
  pointer-events: none;
}

/* --- Arrow label inline edit input --- */

.canvas-arrow-label-input {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--accent, #6a9fff);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: 'Literata', serif;
  font-size: 12px;
  padding: 3px 10px;
  text-align: center;
  min-width: 60px;
  max-width: 200px;
  outline: none;
  z-index: 10;
}

/* Canvas responsive */
@media (max-width: 600px) {
  .canvas-topbar {
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }

  .canvas-topbar-name {
    font-size: 0.85rem;
    max-width: 160px;
  }

  .canvas-note {
    min-width: 120px;
    font-size: 0.85rem;
    padding: 0;
  }

  .canvas-toolbar {
    padding: 3px 4px;
    gap: 3px;
  }

  .canvas-toolbar-swatch {
    width: 18px;
    height: 18px;
  }

  .canvas-context-menu {
    min-width: 120px;
  }

  .canvas-tool-palette {
    left: 0.3rem;
    padding: 0.3rem;
    gap: 0.15rem;
  }

  .canvas-tool-btn {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Writing Assistant — underline styles
   ========================================================================== */

.wa-issue {
  cursor: pointer;
  position: relative;
}

/* Category colors */
.wa-spelling { --wa-color: var(--error); }
.wa-grammar { --wa-color: var(--accent); }
.wa-style { --wa-color: var(--text-muted); }

/* Wavy underline */
.wa-wavy {
  text-decoration: wavy underline var(--wa-color);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

/* Dotted underline */
.wa-dotted {
  text-decoration: none;
  border-bottom: 2px dotted var(--wa-color);
  padding-bottom: 1px;
}

/* Solid glow underline */
.wa-solid {
  text-decoration: none;
  border-bottom: 1.5px solid var(--wa-color);
  box-shadow: 0 2px 4px -1px var(--wa-color);
  padding-bottom: 1px;
}

/* Writing Assistant — suggestion popover */
.wa-popover {
  position: absolute;
  min-width: 200px;
  max-width: 340px;
  padding: 0.75rem;
  font-size: 0.85rem;
  z-index: 200;
  animation: ai-toolbar-fadein 0.15s ease;
}

.wa-popover-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.wa-popover-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
}

.wa-popover-message {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.wa-popover-preview {
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.wa-popover-original {
  text-decoration: line-through;
  color: var(--error);
}

.wa-popover-arrow {
  color: var(--text-muted);
}

.wa-popover-fix {
  color: var(--success);
  font-weight: 500;
}

.wa-popover-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* --- Writing Assistant toolbar button & controls popover --- */

.wa-toolbar-btn { position: relative; }
.wa-badge {
  position: absolute; top: -2px; right: -4px;
  background: var(--error); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
.wa-controls-popover .btn.active,
.settings-tab-panel .btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* --- Canvas template picker --- */

.canvas-template-picker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-elevated);
  border-radius: 12px; padding: 24px;
  box-shadow: var(--shadow-xl);
  z-index: 100; text-align: center; max-width: 520px;
}
.canvas-template-picker h3 {
  margin: 0 0 4px; color: var(--text-primary); font-size: 1.1rem;
}
.canvas-template-picker p {
  margin: 0 0 16px; color: var(--text-secondary); font-size: 0.85rem;
}
.canvas-template-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.canvas-template-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: left; transition: border-color 0.15s;
}
.canvas-template-card:hover { border-color: var(--accent); }
.canvas-template-card strong {
  color: var(--text-primary); font-size: 0.9rem; margin-bottom: 2px;
}
.canvas-template-card span { color: var(--text-secondary); font-size: 0.8rem; }
.canvas-template-blank { border-style: dashed; }

/* --- My Canvases screen --- */

.my-canvases-screen { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; }
.my-canvases-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;
}
.my-canvases-header h1 { font-size: 1.4rem; color: var(--text-primary); margin: 0; }
.my-canvases-list { display: flex; flex-direction: column; gap: 8px; }
.my-canvases-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.my-canvases-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.my-canvases-card strong { color: var(--text-primary); font-size: 0.95rem; }
.my-canvases-card span { color: var(--text-secondary); font-size: 0.82rem; }
.my-canvases-actions { margin-left: auto; flex-shrink: 0; }
.my-canvases-actions .btn { opacity: 0; transition: opacity 0.15s; }
.my-canvases-card:hover .my-canvases-actions .btn { opacity: 1; }

/* Cursor chat */
.canvas-chat-input {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--accent, #6a9fff);
  border-radius: 16px;
  color: var(--text-primary);
  font-family: 'Literata', serif;
  font-size: 0.8rem;
  padding: 4px 12px;
  min-width: 120px;
  max-width: 240px;
  outline: none;
  z-index: 20;
}

.canvas-chat-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 4px 10px;
  border-radius: 12px;
  color: #fff;
  font-family: 'Literata', serif;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  animation: chatFade 5s ease-in forwards;
}
.canvas-chat-alias {
  font-weight: 700;
}

@keyframes chatFade {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Reaction badges */
.canvas-reaction-badges {
  position: absolute;
  bottom: -22px;
  left: 0;
  display: flex;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
}
.canvas-reaction-badge {
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Comment pins */
.canvas-comment-pin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #6a9fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 20;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  transition: transform 0.15s;
}
.canvas-comment-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
}
.canvas-comment-pin.resolved {
  opacity: 0.3;
}
.canvas-comment-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--error, #e53e3e);
  color: #fff;
  font-size: 0.6rem;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.canvas-comment-thread {
  position: absolute;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 0.7rem;
  z-index: 30;
  box-shadow: var(--shadow-lg);
}
.canvas-comment-header {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.canvas-comment-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border, #333);
}
.canvas-comment-item:last-of-type {
  border-bottom: none;
}
.canvas-comment-reply {
  padding-left: 0.8rem;
}
.canvas-comment-meta {
  font-size: 0.7rem;
  color: var(--text-muted, #888);
}
.canvas-comment-content {
  font-size: 0.8rem;
  color: var(--text-primary);
  margin-top: 2px;
}
.canvas-comment-input-row {
  margin-top: 0.5rem;
}
.canvas-comment-input {
  width: 100%;
  background: var(--bg-primary, #111);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: 'Literata', serif;
  font-size: 0.8rem;
  padding: 4px 8px;
  outline: none;
  box-sizing: border-box;
}
.canvas-comment-actions {
  display: flex;
  gap: 6px;
  margin-top: 0.5rem;
}
.canvas-comment-action-btn {
  background: none;
  border: 1px solid var(--border, #333);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
}
.canvas-comment-action-btn.danger {
  color: var(--error, #e53e3e);
  border-color: var(--error, #e53e3e);
}

/* Presentation mode */
.canvas-presentation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;
}
.canvas-presentation-title {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Literata', serif;
  font-size: 1.2rem;
  color: var(--text-primary);
  background: var(--bg-surface, #1a1a1a);
  padding: 6px 20px;
  border-radius: 8px;
  pointer-events: auto;
}
.canvas-presentation-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface, #1a1a1a);
  padding: 8px 16px;
  border-radius: 24px;
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
}
.canvas-presentation-arrow {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}
.canvas-presentation-arrow:hover {
  color: var(--accent, #6a9fff);
}
.canvas-presentation-counter {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
  min-width: 40px;
  text-align: center;
}
.canvas-presentation-exit {
  background: none;
  border: 1px solid var(--border, #333);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 8px;
}
.canvas-presentation-exit:hover {
  border-color: var(--accent, #6a9fff);
}

/* Version history panel */
.canvas-history-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 280px;
  bottom: 0;
  background: var(--bg-surface, #1a1a1a);
  border-left: 1px solid var(--border, #333);
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.canvas-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #333);
}
.canvas-history-header h4 {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.canvas-history-close {
  background: none;
  border: none;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
}
.canvas-history-close:hover {
  color: var(--text-primary);
}
.canvas-history-list {
  overflow-y: auto;
  flex: 1;
}
.canvas-history-empty {
  padding: 16px;
  color: var(--text-muted, #888);
  text-align: center;
  font-size: 0.85rem;
}
.canvas-history-item {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #333);
  transition: background 0.15s;
}
.canvas-history-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.05));
}
.canvas-history-item.selected {
  background: rgba(99, 102, 241, 0.1);
  border-left: 3px solid var(--accent, #6366f1);
  padding-left: 13px;
}
.canvas-history-item-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.canvas-history-item-time {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.canvas-history-preview-banner {
  padding: 10px 16px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: center;
  border-bottom: 1px solid var(--border, #333);
}
.canvas-history-restore-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #333);
}
.canvas-history-restore-btn {
  width: 100%;
  padding: 8px;
  background: var(--accent, #6366f1);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.canvas-history-restore-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.canvas-history-restore-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.canvas-history-active {
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}

/* My Canvases — shared canvas indicators */
.my-canvases-shared-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.my-canvases-avatar {
  border-radius: 50%;
}
.my-canvases-role-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.my-canvases-type {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-faint, rgba(99, 102, 241, 0.1));
  color: var(--accent);
  width: fit-content;
}

/* --- Share panel --- */
.canvas-share-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 320px;
  bottom: 0;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}
.canvas-share-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.canvas-share-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.canvas-share-invite-group {
  margin-bottom: 12px;
}
.canvas-share-autocomplete-wrap {
  position: relative;
  margin-bottom: 8px;
}
.canvas-share-autocomplete-wrap input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}
.canvas-share-autocomplete-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}
.canvas-share-autocomplete-wrap input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.canvas-share-autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: var(--shadow-lg);
}
.canvas-share-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.canvas-share-autocomplete-item:hover {
  background: var(--bg-hover);
}
.canvas-share-ai-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  margin-left: auto;
}
.canvas-share-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.canvas-share-invite-row select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
}
.canvas-share-collab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.canvas-share-collab-item:last-child {
  border-bottom: none;
}
.canvas-share-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.canvas-share-role-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: auto;
  background: var(--bg-hover);
  color: var(--text-muted);
}
.canvas-share-role-badge.editor {
  background: #0891b2;
  color: #fff;
}
.canvas-share-role-badge.commenter {
  background: #7c3aed;
  color: #fff;
}
.canvas-share-role-badge.viewer {
  background: #64748b;
  color: #fff;
}
.canvas-share-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.canvas-share-remove-btn:hover {
  color: var(--danger);
}
.canvas-share-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.canvas-share-link-url {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-share-copy-btn, .canvas-share-revoke-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  color: var(--text-muted);
}
.canvas-share-copy-btn:hover {
  color: var(--accent);
}
.canvas-share-revoke-btn:hover {
  color: var(--danger);
}
.canvas-role-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-muted);
}

/* Hide global app chrome when canvas is open */
body.canvas-fullscreen .topbar,
body.canvas-fullscreen .bottom-nav,
body.canvas-fullscreen .floating-search,
body.canvas-fullscreen .notepad-trigger {
  display: none !important;
}
body.canvas-fullscreen #main {
  margin-top: 0;
  padding-bottom: 0;
}

/* --- Poll card --- */
.poll-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: var(--bg-secondary, var(--bg-primary));
}
.poll-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.poll-question {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
}
.poll-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
  border-radius: 3px;
  white-space: nowrap;
}
.poll-badge--open {
  background: #3ab07d;
  color: #fff;
}
.poll-badge--closed {
  background: var(--text-muted);
  color: var(--bg-primary);
}
.poll-deadline {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.poll-option-btn {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.poll-option-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-secondary, var(--bg-primary));
}
.poll-option-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.poll-result-row {
  position: relative;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
}
.poll-result-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent);
  opacity: 0.12;
  border-radius: var(--radius);
  transition: width 0.3s ease;
}
.poll-result-row--winner .poll-result-bar {
  opacity: 0.22;
}
.poll-result-row--winner .poll-result-label {
  font-weight: 700;
}
.poll-result-row--voted {
  border-color: var(--accent);
}
.poll-result-label {
  position: relative;
  z-index: 1;
  font-size: 0.92rem;
}
.poll-result-count {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.poll-option-voted {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--text-muted);
}
.poll-option-voted--selected {
  border-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}
.poll-info {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}


/* ==========================================================================
   Book Screens
   ========================================================================== */

.screen-my-books {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.screen-my-books .my-books-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.screen-my-books .my-books-header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 600px) {
  .screen-my-books {
    padding: 1.5rem 1rem;
  }
}

.book-create-form {
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.book-create-form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.book-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color var(--transition);
}

.book-card:hover {
  border-color: var(--accent);
}

.book-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.book-card-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.book-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.75rem;
}

.book-type-badge {
  font-size: 0.75rem;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* Book Dashboard */

.screen-book-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

.book-dashboard-back {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  display: inline-block;
}

.book-dashboard-back:hover {
  color: var(--accent);
}

.book-dashboard-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  cursor: text;
}

.book-dashboard-title:focus {
  outline: none;
  border-bottom: 2px solid var(--accent);
}

.book-metadata-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.book-subtitle-input {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.book-genre-select {
  margin-top: 0.5rem;
  max-width: 200px;
}

.book-blurb-area {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 60px;
}

.book-cover-section {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.book-cover-preview {
  width: 160px;
  height: 240px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.book-cover-placeholder {
  width: 160px;
  height: 240px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

.book-cover-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* Hero cover wrap — constrains cover image + buttons in the hero card */
.book-hero-cover-wrap {
  flex-shrink: 0;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  max-height: 100%;
}

.book-hero-cover-wrap .read-portrait {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
}

.book-hero-cover-wrap .book-cover-placeholder {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero inline details + blurb — moved into hero card next to cover */
.read-hero-details {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.read-hero-blurb {
  margin-top: 0.75rem;
  padding: 0.75rem 0.5rem 0.5rem;
  border-top: 1px solid var(--border-subtle);
  border: 1px solid transparent;
  border-top-color: var(--border-subtle);
  border-radius: var(--radius, 6px);
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.read-hero-blurb:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}
.read-hero-blurb .read-prose {
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.35rem;
}
.read-hero-blurb .read-prose--empty {
  font-style: italic;
  opacity: 0.5;
}

/* Actions bar — compact horizontal row for export, intel, adapt, delete */
.book-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.book-actions-bar-spacer {
  flex: 1;
}

/* Cover generation modal */
.cover-gen-modal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md, 1rem);
  min-width: 360px;
}
.cover-gen-prompt {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cover-gen-toggle {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin: 0.25rem 0;
}
.cover-gen-preview {
  display: flex;
  justify-content: center;
  padding: var(--gap-md, 1rem) 0;
}
.cover-gen-preview-img {
  max-height: 360px;
  width: auto;
  border-radius: var(--radius, 6px);
  box-shadow: var(--shadow-lg);
}
.cover-gen-status {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.cover-gen-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--text-muted, #5a5650);
  border-top-color: var(--accent, #c9a84c);
  border-radius: 50%;
  animation: cover-spin 0.8s linear infinite;
}
@keyframes cover-spin {
  to { transform: rotate(360deg); }
}

/* Image lightbox — fullscreen overlay */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius, 6px);
  box-shadow: var(--shadow-xl);
  cursor: default;
}

.book-dashboard-stats {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.book-progress-bar {
  width: 120px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.book-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.book-chapter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.book-chapter-section-header h2 {
  font-size: 1.3rem;
}

.book-chapter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: border-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.book-chapter-row:hover {
  border-color: var(--accent);
}

/* Part headers in chapter list */
.book-part-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  box-shadow: var(--shadow-xs);
}

.book-part-header:first-child {
  margin-top: 0;
}

.book-part-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  cursor: default;
}

/* Chapters indented under a part */
.book-chapter-indented {
  margin-left: 1rem;
}

.book-chapter-num {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 2rem;
  text-align: center;
}

.book-chapter-title {
  flex: 1;
  font-family: var(--font-serif);
  font-weight: 500;
}

.book-chapter-words {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.book-chapter-status {
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.book-chapter-status--draft {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.book-chapter-status--revised {
  background: var(--accent-subtle);
  color: var(--accent);
}

.book-chapter-status--final {
  background: rgba(74, 138, 90, 0.15);
  color: var(--success);
}

/* Book pricing section */
.book-pricing-section {
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.5rem 0;
  font-family: var(--font-sans);
}
.book-pricing-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.book-pricing-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.book-pricing-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}
.book-pricing-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.book-pricing-label input {
  width: 100px;
}
.book-chapter-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.book-chapter-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.book-chapter-title-wrap .book-chapter-title {
  flex: initial;
}
.book-chapter-scene-badge {
  font-size: 0.65rem;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-picker-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 22rem;
  max-width: 32rem;
  max-height: 20rem;
  display: flex;
  flex-direction: column;
}
.scene-picker-search {
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}
.scene-picker-list {
  overflow-y: auto;
  max-height: 16rem;
}
.scene-picker-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--transition);
}
.scene-picker-item:hover {
  background: var(--bg-elevated);
}
.scene-picker-item--active {
  background: var(--accent-subtle);
  font-weight: 600;
}
.scene-picker-item--clear {
  color: var(--error, #c44);
  border-bottom: 1px solid var(--border);
}
.scene-picker-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.book-delete-section {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Book Characters Section */

.book-characters-section {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.book-characters-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.book-character-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.book-character-row:hover {
  border-color: var(--accent);
}

.book-character-portrait {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.book-character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-character-portrait--sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.book-character-info {
  flex: 1;
  min-width: 0;
}

.book-character-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.book-character-name:hover {
  color: var(--accent, #4a9eff);
  text-decoration: underline;
}

.book-character-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.book-characters-collection-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
}

.book-characters-collection-link:hover {
  text-decoration: underline;
}

/* Book Character Picker */

.book-character-picker {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  margin-bottom: 0.75rem;
}

.book-character-picker-search {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

.book-character-picker-search:focus {
  outline: none;
  border-color: var(--accent);
}

.book-character-picker-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.book-character-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition);
}

.book-character-picker-item:hover {
  background: var(--bg-elevated);
}

.book-character-picker-name {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.book-character-picker-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.5rem;
  text-align: center;
}

/* Editor Character Panel — Book Linking */

.char-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
  padding: 0.4rem 0 0.15rem;
}

.char-section-label--other {
  color: var(--text-muted);
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.char-card--book-linked {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.char-book-badge {
  display: inline-block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  margin-left: 0.25rem;
  vertical-align: middle;
}

.char-card-link-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition), background-color var(--transition), border-color var(--transition);
}

.char-card-summary:hover .char-card-link-btn {
  opacity: 1;
}

.char-card-link-btn--linked {
  opacity: 0.7;
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.char-card-link-btn:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}

/* Chapter Panel (left margin in book mode) */
.chapter-panel-header {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.chapter-panel-header:hover {
  color: var(--accent);
}

.chapter-panel-list {
  flex: 1;
  overflow-y: auto;
}

.chapter-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  transition: background var(--transition);
}

.chapter-panel-item:hover {
  background: var(--bg-elevated);
}

.chapter-panel-item--active {
  background: var(--accent-subtle);
  border-left: 2px solid var(--accent);
}

.chapter-panel-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.chapter-panel-item--active .chapter-panel-item-title {
  color: var(--accent);
  font-weight: 500;
}

.chapter-panel-item-words {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.chapter-panel-add {
  margin: 0.75rem;
  width: calc(100% - 1.5rem);
}

/* Chapter Navigation (bottom of editor in book mode) */
.chapter-nav {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

/* ==========================================================================
   Book Reading View
   ========================================================================== */

.screen-book-read {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.book-read-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.book-read-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.book-read-subtitle {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 1rem;
}

.book-read-author {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.book-read-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.book-read-toc {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.book-read-toc h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.book-read-toc ol {
  list-style: decimal;
  padding-left: 1.5em;
}

.book-read-toc li {
  margin-bottom: 0.4em;
}

.book-read-toc a {
  color: var(--text-primary);
  text-decoration: none;
}

.book-read-toc a:hover {
  color: var(--accent);
}

.book-read-chapter {
  margin-bottom: 3rem;
}

.book-read-chapter-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.book-read-chapter-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Reader — paginated chapter view
   ========================================================================== */

.reader-root { padding: 0 !important; overflow: hidden; }
.reader-loading { padding: 4rem; text-align: center; color: var(--text-muted); }

.reader {
  display: flex;
  height: calc(100vh - 3rem);
  overflow: hidden;
}

/* Sidebar — split layout: chapters scroll, bookmarks pinned bottom */
.reader-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reader-sidebar-inner {
  padding: 1.25rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.reader-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
}

.reader-cover {
  width: 120px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 0.75rem;
}

.reader-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.reader-author {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  margin-top: 0.25rem;
}

.reader-author:hover { color: var(--accent); }

.reader-toc { display: flex; flex-direction: column; gap: 2px; }

.reader-toc-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}

.reader-toc-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.reader-toc-btn.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.reader-toc-btn--locked { opacity: 0.55; font-style: italic; }

/* Purchase prompt in reader */
.reader-purchase-prompt {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 2rem auto;
  max-width: 400px;
}
.reader-purchase-msg {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.reader-purchase-price {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.reader-purchase-btn {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  background: var(--accent);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s;
}
.reader-purchase-btn:hover { opacity: 0.85; }
.reader-purchase-login {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Preview fade — gradient overlay at end of truncated chapter */
.reader-preview-fade {
  height: 8rem;
  margin-top: -8rem;
  position: relative;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-primary) 100%
  );
}

.reader-preview-prompt {
  text-align: center;
  padding: 2rem 1.5rem 3rem;
}

.reader-preview-msg {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1.5rem;
}

/* Reader sidebar — part groups */
.reader-part-group { margin-bottom: 0.15rem; }

.reader-part-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  border-left: 2px solid var(--accent);
  background: var(--bg-elevated);
  transition: background var(--transition);
}
.reader-part-header:hover { background: var(--accent-subtle); }
.reader-part-header.active { background: var(--accent-subtle); border-left-color: var(--accent); }

.reader-part-chevron {
  font-size: 0.7rem;
  color: var(--text-muted);
  width: 0.8rem;
  flex-shrink: 0;
}

.reader-part-title { letter-spacing: 0.02em; }

.reader-part-chapters { padding-left: 0.75rem; }

.reader-part-group.collapsed .reader-part-chapters { display: none; }

/* Reading bookmarks — pinned to bottom 1/3 of sidebar */
.reader-bm-section {
  padding: 0.75rem 1.25rem 1rem;
}
.reader-bm-empty {
  font-size: 0.78rem;
  color: var(--reader-muted, var(--text-muted));
  opacity: 0.6;
  font-style: italic;
}
.reader-bm-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--reader-muted, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reader-bm-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.reader-bm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reader-bm-entry {
  position: relative;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm, 3px);
}
.reader-bm-chapter {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--reader-muted, var(--text-muted));
  margin-bottom: 0.15rem;
}
.reader-bm-snippet {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--reader-text, var(--text-secondary));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.reader-bm-del {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--reader-muted, var(--text-muted));
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  border-radius: 50%;
}
.reader-bm-entry:hover .reader-bm-del {
  display: flex;
}
.reader-bm-del:hover {
  color: var(--error, #c44);
}
@keyframes reader-flash-underline {
  0%   { text-decoration-color: var(--accent); }
  80%  { text-decoration-color: var(--accent); }
  100% { text-decoration-color: transparent; }
}
.reader-flash-mark {
  background: transparent;
  color: inherit;
  text-decoration: underline wavy;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  animation: reader-flash-underline 3s ease-out both;
}

/* ── Passage links — shareable deep links to paragraphs ───────────────── */

@keyframes passage-flash {
  0%   { background-color: color-mix(in srgb, var(--reader-accent, var(--accent)) 20%, transparent); }
  100% { background-color: transparent; }
}

.passage-highlight {
  animation: passage-flash 2s ease-out;
  border-radius: 3px;
}

.passage-link-btn {
  position: absolute;
  display: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  z-index: 5;
}

.passage-link-btn:hover {
  opacity: 0.7;
}

.passage-link-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background: var(--reader-accent, var(--accent));
  color: var(--reader-accent-text, #fff);
  animation: passage-toast-in 0.15s ease-out;
}

@keyframes passage-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.passage-link-icon {
  width: 14px;
  height: 14px;
  filter: var(--reader-icon-filter, brightness(0) invert(0.55));
}

/* --- Collapsible bottom sections wrapper --- */
.reader-bottom-sections {
  flex-shrink: 1;
  min-height: 0;
  max-height: 35vh;
  overflow-y: auto;
  border-top: 1px solid var(--reader-border, var(--border));
}
.reader-bm-header-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: var(--reader-muted, var(--text-muted));
  flex-shrink: 0;
}
/* --- Highlight section --- */
.reader-hl-section {
  padding: 0.75rem 1.25rem 1rem;
}
.reader-hl-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--reader-muted, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reader-hl-header-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: var(--reader-muted, var(--text-muted));
  flex-shrink: 0;
}
.reader-hl-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.reader-hl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reader-hl-empty {
  font-size: 0.78rem;
  color: var(--reader-muted, var(--text-muted));
  opacity: 0.6;
  font-style: italic;
}
.reader-hl-entry {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm, 3px);
}
.reader-hl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.reader-hl-info {
  flex: 1;
  min-width: 0;
}
.reader-hl-chapter {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--reader-muted, var(--text-muted));
  margin-bottom: 0.15rem;
}
.reader-hl-snippet {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--reader-text, var(--text-secondary));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.reader-hl-del {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--reader-muted, var(--text-muted));
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  border-radius: 50%;
}
.reader-hl-entry:hover .reader-hl-del {
  display: flex;
}
.reader-hl-del:hover {
  color: var(--error, #c44);
}

/* Part title pages in reader */
.reader-part-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 4rem 2rem;
}

.reader-part-page-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.reader-part-page-subtitle {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Main content */
.reader-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Toolbar */
.reader-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* reader-main is a flex column: toolbar (fixed) + scroll area */
.reader-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reader-scroll {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.reader-back {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem;
}

.reader-back:hover { color: var(--text-primary); }

.reader-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.reader-tb-title {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-progress {
  width: 80px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.reader-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.reader-settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
  font-size: 1rem;
}

.reader-settings-btn:hover { color: var(--text-primary); }

.reader-tb-nav {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.reader-tb-nav:hover { color: var(--text-primary); background: var(--bg-hover); }

.action-icon--settings {
  -webkit-mask-image: url('/icons/settings.png');
  mask-image: url('/icons/settings.png');
}

.reader-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.reader-setting-btns { display: flex; gap: 4px; }

/* Settings panel — adapts to reader theme via --reader-* properties */
.reader-settings {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--reader-border, var(--border-subtle));
  background: var(--reader-bg, var(--bg-elevated));
  color: var(--reader-text, var(--text-primary));
}

.reader-setting-label {
  font-size: 0.75rem;
  color: var(--reader-muted, var(--text-muted));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reader-setting-opt {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--reader-border, var(--border));
  border-radius: var(--radius-sm);
  background: none;
  color: var(--reader-muted, var(--text-secondary));
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

/* Chapter content — all colors from --reader-* properties */
.reader-chapter {
  max-width: 42rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  font-family: var(--font-serif);
  background: var(--reader-bg, inherit);
  color: var(--reader-text, inherit);
}

.reader-ch-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: var(--reader-muted, var(--text-muted));
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.reader-ch-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--reader-border, var(--border-subtle));
  color: var(--reader-text, inherit);
}

/* Drop caps — applied to .dropcap paragraph (skips datelines/headers) */
.reader-ch-body > p.dropcap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.6em;
  line-height: 0.75;
  padding-right: 0.08em;
  padding-top: 0.06em;
  color: var(--reader-accent, var(--accent));
  font-weight: 700;
}

/* Dateline paragraphs (dates, salutations) rendered as subtle headers */
.reader-ch-body > p.chapter-dateline {
  font-style: italic;
  color: var(--reader-muted, var(--text-muted));
  margin-bottom: 0.5rem;
}

/* Chapter divider */
.reader-ch-divider {
  text-align: center;
  margin: 1.5rem 0 2rem;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  color: var(--reader-muted, var(--text-muted));
  opacity: 0.5;
}

/* Chapter meta (reading time) */
.reader-ch-meta {
  text-align: center;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  color: var(--reader-muted, var(--text-muted));
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
}

/* Blockquotes in reader (epigraphs, etc.) */
.reader-ch-body blockquote {
  border-left: 3px solid var(--reader-accent, var(--accent));
  color: var(--reader-muted, var(--text-secondary));
}

/* ── Poetry-specific reader styles ─────────────────────────────────────── */

.reader-ch-body.poetry {
  line-height: 1.6;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Verse lines: tight spacing, each <p> is one line */
.reader-ch-body.poetry p {
  margin: 0;
  text-indent: -1.5em;
  padding-left: 1.5em;
}

/* Consecutive lines within a stanza: just line-height, no extra gap */
.reader-ch-body.poetry p + p {
  margin-top: 0;
}

/* Stanza breaks: whitespace-only paragraphs marked by JS */
.reader-ch-body.poetry p.stanza-break {
  visibility: hidden;
  margin: 0;
  padding: 0;
  height: 0.8em;
  line-height: 0;
}

/* No drop cap for poetry */
.reader-ch-body.poetry > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

/* Fixed bottom bar */
.reader-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--reader-border, var(--border-subtle));
  background: var(--reader-bg, var(--bg-surface));
  flex-shrink: 0;
}

.reader-bottom-info {
  font-size: 0.72rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--reader-muted, var(--text-muted));
  text-align: center;
  flex-shrink: 0;
}

.reader-bottom-btn {
  background: none;
  border: none;
  color: var(--reader-muted, var(--text-secondary));
  font-size: 0.72rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-bottom-btn:hover {
  color: var(--reader-accent, var(--accent));
}

/* Mobile */
@media (max-width: 767px) {
  .reader-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    z-index: 100;
    transition: left 0.25s ease;
    box-shadow: none;
  }

  .reader-sidebar.open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3); /* directional — intentionally not a variable */
  }

  .reader-menu-btn { display: block; }

  .reader-chapter { padding: 1.5rem 1rem 2rem; }
  .reader-ch-title { font-size: 1.4rem; }
}

/* ── Content protection for purchased books ──────────────────────────── */

/* Prevent text selection on purchased chapter body */
.reader-chapter.reader-purchased .reader-ch-body {
  user-select: none;
  -webkit-user-select: none;
}

/* Print-blocked message — hidden on screen, shown on print */
.reader-print-blocked {
  display: none;
}

@media print {
  .reader-chapter.reader-purchased {
    display: none !important;
  }
  .reader-print-blocked {
    display: block !important;
    text-align: center;
    padding: 4rem 2rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
  }
}

/* Home — unified screen */

.screen-home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.home-header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.home-actions {
  display: flex;
  gap: 0.5rem;
}

.resume-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.resume-bar span { color: var(--text-muted); font-size: 0.9rem; }
.resume-bar-link { color: var(--accent); font-size: 0.9rem; text-decoration: none; font-weight: 500; }
.resume-bar-link:hover { text-decoration: underline; }

/* --- Entity Hub --- */

.entity-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.entity-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.entity-hub-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.entity-hub-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.entity-hub-count {
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-serif);
}

.entity-hub-unlinked {
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.25rem;
}

.new-writing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.new-writing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.new-writing-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--accent-subtle);
}

.new-writing-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.new-writing-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.new-writing-card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* --- Home: Card Grid (shared by published + in-progress) --- */

.home-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.writing-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.writing-card:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.writing-card-cover {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.writing-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.writing-card-cover canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.writing-card-delete {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
  z-index: 1;
}

.writing-card:hover .writing-card-delete {
  opacity: 1;
}

.writing-card-delete:hover {
  background: var(--error);
}

.writing-card-info {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.writing-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.writing-card-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.writing-card-footer {
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Published gallery */
.published-section {
  margin-bottom: 2rem;
}

.published-section-title,
.in-progress-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.published-section-title::after,
.in-progress-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.published-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.published-card {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition);
}

.published-card:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.published-card-cover {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.published-card-cover img,
.published-card-cover canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.published-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.75rem 0.75rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.published-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem 0.75rem;
}

.in-progress-section {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .home-list,
  .published-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
  }

  .new-writing-cards {
    grid-template-columns: 1fr;
  }

  .screen-home {
    padding: 1.5rem 1rem;
  }
}

/* ===========================================================================
   Bot Simulation Admin Panel
   =========================================================================== */

.botsim-screen {
  max-width: 1100px;
}

/* ---- Control Bar ---- */

.botsim-control-bar {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(8px);
}

.botsim-control-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.botsim-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.botsim-control-group--wide {
  flex: 1;
  min-width: 160px;
}

.botsim-control-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.botsim-mult-value {
  color: var(--accent);
  font-weight: 700;
}

/* ---- Toggle Switch ---- */

.botsim-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}

.botsim-toggle.active {
  background: var(--accent);
}

.botsim-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform var(--transition);
}

.botsim-toggle.active::after {
  transform: translateX(16px);
}

.botsim-toggle--sm {
  width: 28px;
  height: 16px;
  border-radius: 8px;
}

.botsim-toggle--sm::after {
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
}

.botsim-toggle--sm.active::after {
  transform: translateX(12px);
}

.botsim-toggle--flame.active {
  background: var(--error);
}

.botsim-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Slider ---- */

.botsim-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.botsim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  transition: box-shadow var(--transition);
}

.botsim-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

.botsim-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.3);
}

/* ---- Small number input ---- */

.botsim-input-sm {
  width: 64px;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

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

/* ---- Gauge ---- */

.botsim-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.botsim-gauge-svg {
  display: block;
}

.botsim-gauge-fill {
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.botsim-gauge-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Action Buttons ---- */

.botsim-control-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.botsim-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition);
}

.botsim-btn:hover {
  border-color: var(--text-muted);
}

.botsim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.botsim-btn--accent {
  border-color: var(--accent);
  color: var(--accent);
}

.botsim-btn--accent:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--accent);
}

.botsim-btn--secondary {
  border-color: var(--border);
  color: var(--text-muted);
}

.botsim-btn--secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.botsim-btn--danger {
  border-color: var(--error);
  color: var(--error);
}

.botsim-btn--danger:hover {
  background: rgba(204, 68, 68, 0.1);
  border-color: var(--error);
}

/* ---- Bot Grid ---- */

.botsim-grid-section {
  position: relative;
  z-index: 1;
}

.botsim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* ---- Bot Card ---- */

.botsim-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  animation: adminCardIn 0.4s ease both;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.botsim-card:hover {
  border-color: var(--border-subtle);
  box-shadow: 0 0 0 1px var(--border);
}

.botsim-card--disabled {
  opacity: 0.45;
}

.botsim-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

/* ---- Avatar ---- */

.botsim-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bg-primary);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ---- Name Block ---- */

.botsim-card-name-block {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.botsim-card-alias {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.writing-card-badge {
  font-size: 0.7rem;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  white-space: nowrap;
}

.writing-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .screen-home {
    padding: 1.5rem 1rem;
  }
}

.botsim-card-alias:hover {
  text-decoration: underline;
}

.botsim-card-snippet {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Status Badge ---- */

.botsim-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.botsim-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.botsim-status--active {
  color: var(--success);
}

.botsim-status--active .botsim-status-dot {
  background: var(--success);
}

.botsim-status--idle {
  color: var(--text-muted);
}

.botsim-status--idle .botsim-status-dot {
  background: var(--text-muted);
}

.botsim-status--flamewar {
  color: var(--error);
}

.botsim-status--flamewar .botsim-status-dot {
  background: var(--error);
  animation: flamePulse 1s ease-in-out infinite;
}

.botsim-status--unseeded {
  color: #d4a83c;
}

.botsim-status--unseeded .botsim-status-dot {
  background: #d4a83c;
}

.botsim-status--disabled {
  color: var(--text-muted);
}

.botsim-status--disabled .botsim-status-dot {
  background: var(--text-muted);
  opacity: 0.4;
}

@keyframes flamePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* ---- Stats Row ---- */

.botsim-card-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.6rem;
}

.botsim-card-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.botsim-card-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.botsim-card-stat-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.botsim-card-last-active {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Card Controls ---- */

.botsim-card-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.botsim-card-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.botsim-card-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.botsim-card-toggle-label--flame {
  color: var(--error);
  opacity: 0.7;
}

.botsim-edit-btn {
  margin-left: auto;
}

/* ---- Detail Modal ---- */

.botsim-detail {
  min-width: 0;
}

.botsim-detail-tabs {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.botsim-detail-tab {
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}

.botsim-detail-tab:hover {
  color: var(--text-primary);
}

.botsim-detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.botsim-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ---- Form Fields ---- */

.botsim-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.botsim-field-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.botsim-field-readonly {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  padding: 0.4rem 0;
}

.botsim-textarea {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

.botsim-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.botsim-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

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

.botsim-input--num {
  width: 80px;
}

/* ---- Capabilities Grid ---- */

.botsim-caps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1rem;
}

.botsim-cap-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
  cursor: pointer;
}



/* ---- Radio Group ---- */

.botsim-radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.botsim-radio-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
  cursor: pointer;
}

.botsim-radio-item input[type="radio"] {
  accent-color: var(--accent);
}

/* ---- Hours Row ---- */

.botsim-hours-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.botsim-hours-sep {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---- Seed Status ---- */

.botsim-seed-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0;
}

.botsim-seed-status--done {
  color: var(--success);
}

.botsim-seed-status--pending {
  color: #d4a83c;
}

/* ---- Stats Grid ---- */

.botsim-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.botsim-stat-item {
  text-align: center;
}

.botsim-stat-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.botsim-stat-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.botsim-stat-times {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.botsim-stat-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---- Admin Dashboard Nav Card ---- */

.botsim-nav-card {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  animation: adminCardIn 0.4s ease both;
}

.botsim-nav-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.15);
}

.botsim-nav-card-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.botsim-nav-card-desc {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .botsim-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .botsim-screen {
    padding: 1.5rem 1rem 3rem;
  }

  .botsim-control-row {
    flex-direction: column;
    gap: 1rem;
  }

  .botsim-grid {
    grid-template-columns: 1fr;
  }

  .botsim-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .botsim-caps-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Manuscript Export Settings --- */

.settings-manuscript-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
}

.settings-manuscript-grid label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.settings-manuscript-grid select,
.settings-manuscript-grid input[type="text"] {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.settings-manuscript-grid .checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: span 2;
}

.settings-manuscript-reset {
  margin-top: 1rem;
}

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

  .settings-manuscript-grid .checkbox-row {
    grid-column: span 1;
  }
}

/* ==========================================================================
   Export Button Group (Book Dashboard)
   ========================================================================== */

.export-button-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.export-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

/* ==========================================================================
   My Characters
   ========================================================================== */

.screen-my-characters {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.my-chars-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.my-chars-header h1 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.my-chars-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* --- Filter bar --- */

.my-chars-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.my-chars-search {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.my-chars-search::placeholder {
  color: var(--text-muted);
}

.my-chars-search:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Character grid --- */

.my-chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.my-chars-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Skeleton cards --- */

.char-card-skeleton {
  height: 240px;
  border-radius: var(--radius);
}

/* --- Character card --- */

.char-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.char-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.char-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* --- Portrait --- */

.char-card-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}

.char-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-card-portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-card-portrait-placeholder span {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
  user-select: none;
}

/* --- Name --- */

.char-card-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
}

/* --- Era badge --- */

.char-card-era {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Tags --- */

.char-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}

.char-card-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.char-card-tag--more {
  color: var(--text-muted);
}

/* --- Indicators (published + forks) --- */

.char-card-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.char-card-published {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.char-card-forks {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* --- Updated timestamp --- */

.char-card-updated {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 0.25rem;
}

/* --- Create form --- */

.char-create-form-container {
  margin-bottom: 1.5rem;
}

.char-create-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.char-create-form h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem;
}

.char-create-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.char-create-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.char-create-form label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.char-create-form input,
.char-create-form select {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.char-create-form input:focus,
.char-create-form select:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Entity Detail Overlay --- */

.entity-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 3vh 1rem;
  animation: entity-overlay-in 200ms ease forwards;
}

.entity-detail-overlay--closing {
  animation: entity-overlay-out 150ms ease forwards;
}

.entity-detail-overlay-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  width: min(860px, 94vw);
  max-width: 860px;
  animation: entity-panel-in 200ms ease forwards;
}

.entity-detail-overlay--closing .entity-detail-overlay-panel {
  animation: entity-panel-out 150ms ease forwards;
}

@keyframes entity-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes entity-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes entity-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes entity-panel-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}

/* Legacy inline detail panel (families tab) */
.char-detail-panel {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.char-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

.char-detail-header h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.char-detail-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.char-detail-delete {
  color: var(--error, #e74c3c);
}

.char-detail-delete:hover {
  color: var(--error, #e74c3c);
  opacity: 0.8;
}

.char-detail-fork-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

/* --- Detail form --- */

.char-detail-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.char-detail-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

.char-detail-fieldset legend {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.5rem;
}

.char-detail-fieldset .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.char-detail-fieldset .form-group:last-child {
  margin-bottom: 0;
}

.char-detail-fieldset label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.char-detail-fieldset input,
.char-detail-fieldset select {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.char-detail-fieldset input:focus,
.char-detail-fieldset select:focus {
  outline: none;
  border-color: var(--accent);
}

.char-detail-fieldset textarea {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-family: var(--font-serif);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--transition);
}

.char-detail-fieldset textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Portrait in detail --- */

.char-detail-portrait-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}

.char-detail-no-portrait {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --- Timeline --- */

.char-detail-timeline-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.char-detail-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-subtle);
}

.char-timeline-event {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  position: relative;
}

.char-timeline-event::before {
  content: '';
  position: absolute;
  left: -1.3rem;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.char-timeline-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  min-width: 4rem;
}

.char-timeline-desc {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.6;
}

/* Collage timeline entries */
.char-timeline-collage {
  align-items: flex-start;
}

.char-timeline-collage-content {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  flex: 1;
  position: relative;
}

.char-timeline-collage-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-tertiary, #1a1a2e);
  flex-shrink: 0;
}

.char-timeline-collage-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.char-timeline-collage-label {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

.char-timeline-collage-medium {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.char-timeline-collage-regen {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.15rem 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.char-timeline-collage-content:hover .char-timeline-collage-regen {
  opacity: 1;
}

.char-timeline-collage-regen:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.char-timeline-collage-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color, #333);
}

.char-timeline-collage-cost {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.char-timeline-collage-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.char-timeline-collage-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.char-timeline-collage-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary, #1a1a2e);
  border-radius: 2px;
  overflow: hidden;
}

.char-timeline-collage-bar {
  height: 100%;
  background: var(--accent, #4a9eff);
  border-radius: 2px;
  transition: width 0.3s;
}

/* --- Save row --- */

.char-detail-save-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* --- Book assignment pills --- */

.book-assign-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.book-assign-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.book-assign-pill:hover {
  border-color: var(--border);
}

.book-assign-pill:disabled {
  opacity: 0.5;
  cursor: default;
}

.book-assign-pill--linked {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.book-assign-empty {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin: 0;
}

/* --- Creature-specific --- */

.creature-card-species {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
}

.char-detail-portrait-upload {
  margin-top: 0.75rem;
}

.char-detail-portrait-upload .btn-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Responsive --- */

@media (max-width: 600px) {
  .screen-my-characters {
    padding: 1rem 0.75rem 3rem;
  }

  .my-chars-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .my-chars-search {
    max-width: 100%;
  }

  .my-chars-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
  }

  .char-card-portrait {
    width: 90px;
    height: 90px;
  }

  .char-detail-panel {
    padding: 1rem;
  }

  .char-create-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Character Marketplace (Vault)
   ========================================================================== */

.screen-marketplace,
.screen-marketplace-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* --- Header --- */

.mp-header {
  margin-bottom: 2rem;
}

.mp-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.mp-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.mp-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0.25rem 0 1.25rem;
}

.mp-search-bar {
  max-width: 480px;
  margin-bottom: 1.25rem;
}

.mp-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.mp-search-input::placeholder {
  color: var(--text-muted);
}

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

/* --- Section Layout --- */

.mp-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mp-section {
  margin-bottom: 0.5rem;
}

.mp-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.mp-section-title {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 0.5rem;
}

.mp-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.mp-section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.mp-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .mp-section-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .mp-section-grid { grid-template-columns: repeat(2, 1fr); }
}

.mp-section-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.8rem;
}

.mp-paging-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mp-paging-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mp-paging-btn:disabled { opacity: 0.3; cursor: default; }

.mp-paging-info {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* --- Featured Row --- */

.mp-featured-section {
  margin-bottom: 2rem;
}

.mp-featured-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.mp-featured-row::-webkit-scrollbar {
  height: 6px;
}

.mp-featured-row::-webkit-scrollbar-track {
  background: transparent;
}

.mp-featured-row::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* --- Filter Pills --- */

.mp-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
}

.mp-filter-pill {
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
}

.mp-filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.mp-filter-pill--active {
  color: var(--bg-primary);
  background: var(--accent);
  border-color: var(--accent);
}

.mp-filter-pill--active:hover {
  color: var(--bg-primary);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Card Grid --- */

.mp-grid-section {
  margin-bottom: 2rem;
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

/* --- Cards --- */

.mp-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.mp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hover, var(--text-muted));
}

.mp-card--featured {
  min-width: 220px;
  max-width: 512px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.mp-card-info {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-card-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.mp-card-origin {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.mp-card-author {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* --- Portrait --- */

.mp-portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.mp-card .mp-portrait {
  width: 100% !important;
  height: auto !important;
  max-width: 512px;
  max-height: 512px;
  aspect-ratio: 3 / 4;
  border-radius: 0;
}

.mp-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
}

.mp-portrait-initial {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.6;
}

.mp-card--featured .mp-portrait-initial {
  font-size: 4rem;
}

/* --- Era Pill --- */

.mp-era-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-family: var(--font-sans);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.12);
  border-radius: 999px;
  width: fit-content;
}

/* --- Fork Badge --- */

.mp-fork-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mp-fork-badge svg {
  flex-shrink: 0;
}

/* --- Empty State --- */

.mp-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.mp-empty-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.mp-empty-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 400px;
}

/* ==========================================================================
   Marketplace Detail View
   ========================================================================== */

.screen-marketplace-detail {
  max-width: 1100px;
  margin: 0 auto;
}

.mp-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-back-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.mp-back-link:hover {
  color: var(--accent);
}

.mp-detail-author-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.mp-detail-author-link:hover {
  text-decoration: underline;
}

.mp-detail-forked-note {
  color: var(--text-muted);
  font-style: italic;
}

.mp-fork-success {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.mp-fork-dm-link {
  color: var(--accent);
  text-decoration: none;
}

.mp-fork-dm-link:hover {
  text-decoration: underline;
}

/* --- Marketplace Attribution Bar --- */

.mp-attribution-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.mp-attribution-bar a {
  color: var(--accent);
  text-decoration: none;
}

.mp-attribution-bar a:hover {
  text-decoration: underline;
}

.mp-fork-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --- Publish Analysis Dialog --- */

.mp-publish-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-publish-dialog {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 420px;
  width: 90vw;
  box-shadow: var(--shadow-xl);
}

.mp-publish-dialog h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

.mp-publish-dialog p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.mp-publish-dialog-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Marketplace Responsive --- */

@media (max-width: 600px) {
  .mp-title {
    font-size: 1.8rem;
  }

  .mp-search-bar {
    max-width: 100%;
  }

  .mp-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .mp-card--featured {
    min-width: 240px;
  }
}

/* --- Marketplace Tab Bar --- */

.mp-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.mp-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

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

.mp-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.mp-tab-panel {
  display: none;
}

.mp-tab-panel.active {
  display: block;
}

/* --- Marketplace Creatures/Families Card Extensions --- */

.mp-card-species {
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.15rem;
}

.mp-card-members {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.mp-card--book .mp-book-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  max-height: 512px;
  border-radius: 0;
}

.mp-card--book .mp-book-cover canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-card--book.mp-card--featured {
  min-width: 180px;
  max-width: 220px;
}

.mp-card--family {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.mp-fork-note {
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-style: italic;
}

/* --- Family Detail Members --- */

.mp-members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.mp-member-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.mp-member-card .mp-portrait {
  width: 60px !important;
  height: 80px !important;
  flex-shrink: 0;
}

.mp-member-info {
  min-width: 0;
}

.mp-member-name {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-serif);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-member-type {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.mp-member-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-top: 0.3rem;
}

.mp-member-badge--character {
  background: var(--accent-subtle);
  color: var(--accent);
}

.mp-member-badge--creature {
  background: rgba(76,175,80,0.15);
  color: #66bb6a;
}

/* --- Marketplace Blueprint --- */

.mp-blueprint-section {
  margin-bottom: 1.5rem;
}

.mp-blueprint-img {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Entity Shared Styles
   ========================================================================== */

.entity-icon {
  filter: invert(1) brightness(0.75);
  vertical-align: middle;
  flex-shrink: 0;
}

/* --- Work List Toolbar --- */

.work-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.work-list-type-filters {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.work-list-type-pill {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.work-list-type-pill:hover { border-color: var(--accent); color: var(--accent); }
.work-list-type-pill.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }

/* --- Work Card Grid --- */

.work-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.work-list-empty {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 2rem 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* --- Work Card (vertical) --- */

.work-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.work-card:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.work-card--skeleton {
  height: 200px;
  animation: work-card-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: var(--radius);
  background: var(--bg-surface);
}

@keyframes work-card-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.work-card-cover {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.work-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-cover canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-info {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.work-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.work-card-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.work-card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.75rem;
}

.work-card-genre {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.work-card-avatars {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.work-card-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.work-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-avatar--more {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.work-card-counts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.2rem;
}

.work-card-count-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.work-card-words {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

@media (max-width: 768px) {
  .work-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
  }
}

/* --- Work Detail --- */

.work-detail-header {
  margin-bottom: 0.75rem;
}

.work-detail-wrapper {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
  padding: 1.25rem 1.5rem;
}

.work-detail-title-row {
  margin-top: 0.5rem;
}

.work-detail-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.work-detail-meta {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.work-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.work-detail-section-header {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.35rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.work-detail-section-empty {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.25rem 0;
}

/* Cast grid — horizontal scroll */
.work-detail-characters-grid {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.work-detail-char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 88px;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.work-detail-char-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}

.work-detail-char-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-detail-char-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-detail-char-initial {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-muted);
}

.work-detail-char-name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-detail-char-role {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

/* World grid — two columns */
.work-detail-world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.work-detail-world-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.work-detail-world-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

/* Entity cards (locations, creatures) */
.work-detail-entity-card {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.work-detail-entity-card:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-subtle);
  box-shadow: var(--shadow-md);
}

.work-detail-entity-icon {
  font-size: 1rem;
  line-height: 1;
}

.work-detail-entity-info {
  flex: 1;
  min-width: 0;
}

.work-detail-entity-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.work-detail-entity-type {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.work-detail-entity-excerpt {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

/* Wide cards (plots, trees) */
.work-detail-wide-card {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.work-detail-wide-card:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-subtle);
  box-shadow: var(--shadow-md);
}

.work-detail-plots-grid,
.work-detail-trees-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Book detail — marketplace-style hero + personal warmth ─── */

.comp-hero {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin: 0.75rem 0 2rem 0;
}

.comp-hero-cover {
  width: 180px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comp-hero-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.comp-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.comp-hero-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.comp-hero-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.comp-hero-blurb {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.comp-hero-personal {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: auto;
}

.comp-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* ── Entity section headers ────────────────────────────────────────── */

.comp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-top: 1.5rem;
}

.comp-section-add {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  transition: border-color var(--transition), color var(--transition);
}

.comp-section-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.comp-section-add--accent {
  border-color: var(--accent);
  color: var(--accent);
}

.comp-section-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-style: italic;
}

/* ── Entity grid — responsive card layout ───────────────────── */

.comp-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem 0;
}

/* ── Entity picker (inline link/create panel) ──────────────────────────── */

.comp-entity-picker {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}

.comp-picker-create {
  width: 100%;
  margin-bottom: 0.5rem;
}

.comp-picker-search {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  margin-bottom: 0.4rem;
}

.comp-picker-search::placeholder { color: var(--text-muted); }

.comp-picker-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comp-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background var(--transition);
}

.comp-picker-item:hover { background: var(--bg-hover); }

.comp-picker-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.comp-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comp-picker-name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-picker-empty {
  padding: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.comp-picker-loading {
  padding: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Entity cards — horizontal with portrait ────────────────── */

.comp-entity-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.comp-entity-card:hover {
  border-color: var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

/* Portrait — 56px, round or square */
.comp-entity-portrait {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-entity-portrait--round {
  border-radius: 50%;
}

.comp-entity-portrait--square {
  border-radius: var(--radius);
}

.comp-entity-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comp-entity-initial {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-muted);
}

.comp-entity-info {
  flex: 1;
  min-width: 0;
}

.comp-entity-name {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.comp-entity-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Edit indicator — appears on hover */
.comp-card-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-card-edit img {
  filter: var(--icon-filter, none);
  opacity: 0.5;
}

.comp-entity-card:hover .comp-card-edit {
  opacity: 1;
}

/* ── Entity responsive ─────────────────────────────────────────────── */

@media (max-width: 640px) {
  .comp-hero {
    flex-direction: column;
  }

  .comp-hero-cover {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .comp-entity-grid {
    grid-template-columns: 1fr;
  }

  .comp-hero-actions {
    justify-content: center;
  }
}

/* Work list unassigned section */
.work-list-unassigned {
  margin-top: 1.25rem;
}

.unassigned-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.unassigned-header:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.unassigned-arrow {
  font-size: 0.7rem;
  transition: transform var(--transition);
}

.unassigned-body {
  padding: 0.5rem 0 0;
}

.unassigned-group-label {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.75rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-subtle);
}

.unassigned-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unassigned-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background var(--transition), box-shadow var(--transition);
}

.unassigned-card:hover {
  background: var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.unassigned-card-thumb {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
}

.unassigned-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unassigned-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.unassigned-card-name {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unassigned-card-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unassigned-card-tags {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.unassigned-card-tag {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.unassigned-card-assign {
  flex-shrink: 0;
}

/* Assign popover */
.assign-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
  min-width: 180px;
}

.assign-popover-item {
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}

.assign-popover-item:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.work-detail-error {
  color: var(--text-muted);
  font-family: var(--font-sans);
  padding: 1rem 0;
}


@media (max-width: 640px) {
  .work-detail-world-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cast Panel (Editor) ───────────────────────────────── */

.cast-section { margin-bottom: 1rem; }
.cast-section-heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  padding: 0 0.5rem;
}
.cast-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.cast-entry:hover { background: var(--bg-elevated); }
.cast-entry-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cast-entry-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cast-entry-portrait span {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.cast-entry-name {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.cast-entry-species {
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.cast-tree-row {
  padding: 0.35rem 0.5rem;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.cast-tree-row:hover { background: var(--bg-elevated); }
.cast-empty {
  padding: 1rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
}
.cast-empty-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
}
.cast-empty-link:hover { text-decoration: underline; }

/* ── Scene Cast Bar ── */
.scene-cast-bar { display: flex; align-items: center; padding: 0.3rem 0.5rem; gap: 0.35rem; border-bottom: 1px solid var(--border-subtle); min-height: 34px; overflow-x: auto; }
.scene-cast-bar:empty { display: none; }
.scene-cast-avatars { display: flex; gap: 0.3rem; align-items: center; }
.scene-cast-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-subtle); transition: border-color 0.15s, transform 0.15s; }
.scene-cast-avatar:hover { border-color: var(--accent); transform: scale(1.12); }
.scene-cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scene-cast-initial { font-size: 0.55rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.scene-cast-label { font-size: 0.62rem; color: var(--text-muted); margin-left: 0.25rem; white-space: nowrap; }

/* ── Inline Name Popover ── */
/* --- AI Suggestion Buttons --- */

.field-suggest-btn {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  vertical-align: middle;
  margin-left: 0.5rem;
}

.field-suggest-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}
.field-suggest-btn:hover img { opacity: 1 !important; }

.field-suggest-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.field-suggest-btn img.spinning {
  animation: spin-sparkle 1s linear infinite;
}
@keyframes spin-sparkle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Suggestion Popover --- */

.suggestion-popover {
  position: absolute;
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  margin-top: 0.25rem;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-serif);
  line-height: 1.5;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.suggestion-item:hover {
  background: var(--accent-subtle);
  border-color: var(--border);
}

.suggestion-item + .suggestion-item {
  margin-top: 0.25rem;
}

/* -- Premade Image Picker --------------------------------- */

.premade-picker-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.5rem 1rem;
}

.premade-picker-pill {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.premade-picker-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.premade-picker-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.premade-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  padding: 1rem 1.5rem 0.5rem;
}

.premade-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.premade-picker-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.premade-picker-item:hover .premade-picker-thumb {
  transform: scale(1.05);
  border-color: var(--border);
}

.premade-picker-item.selected .premade-picker-thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light, rgba(99, 102, 241, 0.25));
}

.premade-picker-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premade-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-style: italic;
}

.premade-picker-note {
  padding: 0.4rem 1.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: center;
}

/* ==========================================================================
   Personal letter compose
   ========================================================================== */

.screen-letter-compose {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.letter-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

.letter-compose-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.letter-compose-header-actions {
  display: flex;
  gap: 0.5rem;
}

.letter-compose-recipient {
  margin-bottom: 1rem;
  position: relative;
}

.letter-compose-recipient label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.letter-compose-recipient input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: var(--accent-subtle, rgba(99,102,241,0.12));
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.recipient-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.recipient-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.recipient-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.recipient-autocomplete-item:hover {
  background: var(--bg-hover);
}

.recipient-autocomplete-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.letter-compose-body {
  margin-bottom: 0.5rem;
  position: relative;
}

.letter-compose-body textarea {
  width: 100%;
  min-height: 300px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.7;
  resize: vertical;
  font-family: inherit;
}

.letter-compose-word-count {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.letter-compose-word-count.warning {
  color: var(--warning, #e5a000);
}

.letter-compose-word-count.error {
  color: var(--danger, #e53e3e);
}

.letter-compose-attachments {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.letter-image-previews {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.letter-image-preview {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.letter-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.letter-image-preview .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter-bookmark-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.letter-bookmark-card {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: var(--bg-surface-raised, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
}

.letter-bookmark-card .remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 0.9rem;
}

.letter-draft-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.6rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

/* Personal letter quick compose / search */
.letter-quick-compose {
  position: relative;
  margin-bottom: 0.5rem;
}

/* Personal letter inbox */
.letter-inbox-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  margin-bottom: 0.5rem;
}

.letter-inbox-card:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.letter-inbox-card--unread {
  border-left: 3px solid var(--accent, #6366f1);
}

.letter-inbox-card--unread .letter-inbox-sender {
  font-weight: 600;
}

.letter-inbox-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.letter-inbox-content {
  flex: 1;
  min-width: 0;
}

.letter-inbox-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}

.letter-inbox-sender {
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}

.letter-inbox-sender:hover {
  text-decoration: underline;
}

.letter-inbox-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.letter-inbox-preview {
  font-size: 0.85rem;
  color: var(--text-secondary, var(--text-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.letter-inbox-meta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.letter-read-receipt {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.letter-read-receipt--read {
  color: var(--success, #22c55e);
}

.letter-draft-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.letter-draft-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent, #6366f1);
}

/* ==========================================================================
   Letter Detail View
   ========================================================================== */

.screen-letter-detail {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.letter-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.letter-detail-back:hover {
  color: var(--text-primary);
}

.letter-detail-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.letter-detail-from {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.letter-detail-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.letter-detail-alias {
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.letter-detail-alias:hover {
  text-decoration: underline;
}

.letter-detail-direction {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.letter-detail-timestamp {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.letter-detail-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.letter-detail-images {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.letter-detail-images img {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.letter-detail-bookmarks {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.letter-detail-bookmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.letter-detail-bookmark:hover {
  background: var(--bg-hover);
}

.letter-detail-bookmark-type {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  background: var(--accent-subtle, rgba(99,102,241,0.12));
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.letter-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.letter-report-form {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

/* Lightbox */
.letter-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: pointer;
}

.letter-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  cursor: default;
}

.letter-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blueprint editor floating toolbar */
.bp-toolbar {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated, #1e1e28);
  border: 1px solid var(--border-subtle, #2a2a35);
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  font-size: 0.8rem;
  z-index: 100;
  pointer-events: auto;
  white-space: nowrap;
}

.bp-toolbar-name {
  color: var(--text-primary, #d4d0c8);
  cursor: text;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  min-width: 3rem;
}

.bp-toolbar-name:hover {
  background: rgba(255,255,255,0.05);
}

.bp-toolbar-name:focus {
  outline: 1px solid var(--accent, #c9a84c);
  background: var(--bg-surface, #16161e);
}

.bp-toolbar select {
  background: var(--bg-surface, #16161e);
  color: var(--text-primary, #d4d0c8);
  border: 1px solid var(--border-subtle, #2a2a35);
  border-radius: 3px;
  font-size: 0.75rem;
  padding: 0.1rem 0.2rem;
}

.bp-toolbar-delete {
  background: none;
  border: none;
  color: var(--text-muted, #5a5650);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.bp-toolbar-delete:hover {
  color: var(--error, #cc4444);
  background: rgba(255,255,255,0.05);
}

/* -----------------------------------------------------------------------
   Entity Read View (document mode toggle)
   ----------------------------------------------------------------------- */

/* ── Entity read view — elevated section cards ── */

.entity-read-view {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  font-family: var(--font-serif);
}

/* Portrait right-click context menu */
.portrait-ctx-menu {
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem 0;
  min-width: 180px;
}

.portrait-ctx-item {
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
}

.portrait-ctx-item:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}

/* Admin library image context menu */
.lib-image-menu {
  position: absolute;
  z-index: 9999;
  background: var(--bg-elevated, #1e1e28);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px 0;
  min-width: 160px;
  backdrop-filter: blur(8px);
}
.lib-image-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary, #eee);
}
.lib-image-menu-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.1));
}

/* Hero card with portrait left + identity right */
.entity-hero-card {
  padding: 1.5rem;
}

.entity-hero-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.entity-hero-left {
  flex-shrink: 0;
  width: 240px;
}

.entity-hero-left .char-detail-hero {
  text-align: center;
}

.entity-hero-left .char-detail-hero-portrait {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius);
}

.entity-hero-left .char-detail-hero-placeholder {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
}

.entity-hero-right {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .entity-hero-row {
    flex-direction: column;
  }

  .entity-hero-left {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}

.entity-read-view h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

/* Hero card — portrait + name + badges */
.entity-read-view .read-hero {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.entity-read-view .read-hero-text {
  flex: 1;
  min-width: 0;
}

.entity-read-view .read-hero-subtitle {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}
.entity-read-view [contenteditable] {
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  padding: 0.25rem 0.4rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: text;
}
.entity-read-view [contenteditable]:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}
.entity-read-view [contenteditable]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.entity-read-view .read-hero-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0.75rem 0 0;
}

.entity-read-view .read-portrait {
  width: 240px;
  flex-shrink: 0;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.entity-read-view .read-portrait--wide {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-position: center;
}

/* Section cards — elevated containers for each content group */
.entity-read-view .read-section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.entity-read-view .read-section-card-header {
  font-family: var(--font-sans, system-ui);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Identity grid — compact 2- or 3-col layout for short fields */
.entity-read-view .read-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.entity-read-view .read-identity-cell {
  min-width: 0;
}

/* Field label/value pairs */
.entity-read-view .read-field {
  margin-bottom: 1rem;
}

.entity-read-view .read-field:last-child {
  margin-bottom: 0;
}

.entity-read-view .read-field-label {
  font-family: var(--font-sans, system-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.entity-read-view .read-field-value {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Prose text blocks */
.entity-read-view .read-prose {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* Blockquote style for voice/worldview */
.entity-read-view .read-blockquote {
  font-size: 0.95rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
  white-space: pre-wrap;
}

/* Badges */
.entity-read-view .read-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.entity-read-view .read-badge {
  font-family: var(--font-sans, system-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Section title (used inside cards for sub-sections) */
.entity-read-view .read-section-title {
  font-family: var(--font-sans, system-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Timeline items */
.entity-read-view .read-timeline-item {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1rem;
  border-left: 2px solid var(--accent-subtle);
}

.entity-read-view .read-timeline-item:last-child {
  margin-bottom: 0;
}

.entity-read-view .read-timeline-marker {
  font-family: var(--font-sans, system-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

/* Expandable tree cards in read view */
.entity-read-view .read-tree-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.entity-read-view .read-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--bg-elevated);
  user-select: none;
  transition: background var(--transition);
}

.entity-read-view .read-tree-header:hover {
  background: var(--bg-surface);
}

.entity-read-view .read-tree-header-text {
  font-family: var(--font-sans, system-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.entity-read-view .read-tree-chevron {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.entity-read-view .read-tree-body {
  padding: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

/* Living Data section */
.living-data-section {
  border-left: 3px solid var(--accent);
}

.living-field {
  padding: 0.5rem 0;
  position: relative;
}

.living-field + .living-field {
  border-top: 1px solid var(--border);
}

.living-field-list {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}
.living-field-list li {
  margin-bottom: 0.15rem;
  line-height: 1.5;
}
.living-field-list li:last-child {
  margin-bottom: 0;
}

.living-source-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Mobile: hero stacks vertically, portrait goes full width */
@media (max-width: 768px) {
  .entity-read-view .read-hero {
    flex-direction: column;
  }
  .entity-read-view .read-portrait {
    width: 100%;
    max-width: 280px;
  }
  .entity-read-view .read-identity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .book-hero-cover-wrap {
    width: 100%;
    max-width: 200px;
  }
}

/* ── Book reader search ── */

.reader-search {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.reader-search-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.reader-search-results {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.reader-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
  border-radius: var(--radius);
}

.reader-search-result:hover {
  background: var(--bg-hover);
}

.reader-search-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.5rem;
}

/* ── Reader context menu ── */
.reader-ctx-menu { position: fixed; z-index: 1000; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.25rem 0; min-width: 180px; }
.reader-ctx-menu-item { display: block; width: 100%; padding: 0.4rem 0.75rem; border: none; background: none; color: var(--text-primary); font-size: 0.82rem; text-align: left; cursor: pointer; }
.reader-ctx-menu-item:hover { background: var(--bg-hover); }
.reader-ctx-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* ── Card context menu (entities) ── */
.card-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  padding: 4px 0;
  border-radius: 8px;
  background: var(--bg-elevated, #1e1e2e);
  border: 1px solid var(--border, #333);
  box-shadow: var(--shadow-xl);
  font-size: 0.85rem;
}
.card-ctx-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--text, #ccc);
  text-align: left;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  white-space: nowrap;
}
.card-ctx-item:hover {
  background: var(--bg-hover, #2a2a3e);
}
.card-ctx-item--danger {
  color: var(--danger, #e74c3c);
}
.card-ctx-item--danger:hover {
  background: rgba(231,76,60,0.15);
}
.card-ctx-item--disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.card-ctx-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--border, #333);
}
.card-ctx-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
  border-radius: 8px;
  background: var(--bg-elevated, #1e1e2e);
  border: 1px solid var(--border, #333);
  box-shadow: var(--shadow-xl);
}

/* ── Print stylesheet for book reader ── */
@media print {
  .reader-toolbar, .reader-sidebar, .reader-bottom-bar, .reader-settings,
  .reader-search, .reader-menu-btn, .highlight-picker,
  .highlight-remove-tooltip, .reader-progress { display: none !important; }
  .reader { display: block; }
  .reader-main { display: block; overflow: visible; }
  .reader-scroll { overflow: visible; }
  .reader-chapter { max-width: none; padding: 0; font-size: 12pt; line-height: 1.6; }
  .reader-ch-title { page-break-after: avoid; }
  .reader-ch-body { page-break-before: avoid; }
  .reader-ch-body img { max-width: 100%; page-break-inside: avoid; }
}

/* ==========================================================================
   Monument Customization Page
   ========================================================================== */

.customize-layout {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem;
}

.customize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.customize-header h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-primary);
}

.customize-preview-wrap {
  padding: 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.customize-tab-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle, #1e1e28);
  padding-bottom: 0;
}

.customize-tab {
  padding: 0.6rem 1.2rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.customize-tab:hover { color: var(--text-primary); }
.customize-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.customize-panel { display: none; }
.customize-panel.active { display: block; }

.customize-category-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.customize-pill {
  padding: 0.3em 0.8em;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, #1e1e28);
  background: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}

.customize-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.customize-pill.active { background: var(--accent-subtle, rgba(201,168,76,0.08)); border-color: var(--accent); color: var(--accent); }

.customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.customize-swatch {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 2px solid var(--border-subtle, #1e1e28);
  cursor: pointer;
  transition: border-color var(--transition);
  overflow: hidden;
  background-color: var(--bg-primary);
}

.customize-swatch:hover { border-color: var(--text-muted); }
.customize-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.customize-swatch--none { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-muted); background: var(--bg-secondary); opacity: 0.7; }
.customize-swatch--none:hover { opacity: 1; }
.customize-swatch--none.selected { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.customize-separator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.customize-separator-item {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--border-subtle, #1e1e28);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition);
}

.customize-separator-item:hover { border-color: var(--text-muted); }
.customize-separator-item.selected { border-color: var(--accent); }
.customize-separator-item svg { max-width: 100%; height: auto; }

.customize-corner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.customize-corner-item {
  padding: 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--border-subtle, #1e1e28);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition);
}

.customize-corner-item:hover { border-color: var(--text-muted); }
.customize-corner-item.selected { border-color: var(--accent); }

.customize-section-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 1.5rem 0 0.75rem;
  font-family: var(--font-sans);
}

.customize-clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.3em 0;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
}

.customize-clear-btn:hover { color: var(--text-secondary); }

.customize-enable-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  margin-top: 1rem;
  border-top: 1px solid var(--border-subtle, #1e1e28);
}

.customize-enable-row label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.customize-empty-msg {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
}

.customize-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.customize-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.customize-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  outline: none;
}
.customize-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.customize-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

.customize-color-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.customize-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.customize-color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--text-muted);
}
.customize-color-swatch.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

/* --- Customize Config Sections --- */

.customize-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.customize-section-heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.customize-section-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

@media (max-width: 640px) {
  .customize-header h2 { font-size: 1.15rem; }
  .customize-preview-wrap { padding: 1rem; }
  .customize-grid { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); }
  .customize-corner-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* --- Exploration Constants Panel --- */
.exploration-constants-panel { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); max-height: 40vh; overflow-y: auto; }
.exploration-constants-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.exploration-constant-card { border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.6rem; background: var(--bg-surface); }
.exploration-constant-card--disabled { opacity: 0.5; }
.exploration-constant-text { width: 100%; resize: vertical; min-height: 3rem; font-size: 0.82rem; font-family: var(--font-serif); line-height: 1.5; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 3px); padding: 0.5rem; color: var(--text-primary); }
.exploration-constant-text:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-subtle); }
.exploration-constant-actions { display: flex; justify-content: flex-end; gap: 0.35rem; margin-top: 0.35rem; }

/* --- Exploration Save/Load --- */
.exploration-load-overlay { padding: 1rem; }
.exploration-load-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); }
.exploration-load-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 0.35rem; }
.exploration-load-name { flex: 1; font-size: 0.82rem; font-weight: 500; }
.exploration-load-date { font-size: 0.7rem; color: var(--text-muted); }

/* --- Exploration Annotations --- */
.exploration-annotations { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); }
.exploration-annotation { font-size: 0.68rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-family: var(--font-sans); }
.exploration-annotation--echo { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.exploration-annotation--tone { background: color-mix(in srgb, var(--resonance, #d4a574) 10%, transparent); color: var(--resonance, #d4a574); border: 1px solid color-mix(in srgb, var(--resonance, #d4a574) 20%, transparent); }
.exploration-annotation--theme { background: color-mix(in srgb, var(--success, #4a8a5a) 10%, transparent); color: var(--success, #4a8a5a); border: 1px solid color-mix(in srgb, var(--success, #4a8a5a) 20%, transparent); }

/* ============================================================================
   Admin Image Management
   ============================================================================ */

.admin-images-screen {
  max-width: 1200px;
}

/* --- Controls bar --- */

.admin-img-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-img-category-select {
  width: auto;
  min-width: 140px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.admin-img-select-all {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.admin-img-select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.admin-img-selected-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* --- Status line --- */

.admin-img-status {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* --- Gallery grid --- */

.admin-img-gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.admin-img-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Gallery card --- */

.admin-img-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.admin-img-card:hover {
  border-color: var(--border-subtle);
  box-shadow: 0 0 0 1px var(--border);
}

/* Checkbox overlay */
.admin-img-card__checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
}

.admin-img-card__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.admin-img-card:hover .admin-img-card__checkbox input[type="checkbox"],
.admin-img-card__checkbox input[type="checkbox"]:checked {
  opacity: 1;
}

/* Thumbnail */
.admin-img-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-img-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-img-card__thumb--placeholder {
  opacity: 0.4;
}

.admin-img-card__thumb--placeholder svg {
  width: 60%;
  height: 60%;
}

/* Info section */
.admin-img-card__info {
  padding: 0.5rem 0.6rem 0.35rem;
}

.admin-img-card__name {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.admin-img-card__owner {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.admin-img-card__badges {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.admin-img-card__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.admin-img-card__badge--ai {
  background: rgba(201, 168, 76, 0.15);
  color: var(--accent);
}

.admin-img-card__status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.admin-img-card__status--blocked {
  background: rgba(204, 68, 68, 0.15);
  color: var(--error);
}

/* Actions row */
.admin-img-card__actions {
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem 0.4rem 0.4rem;
  border-top: 1px solid var(--border);
}

.admin-img-card__actions .btn {
  flex: 1;
  font-size: 0.65rem;
  padding: 0.25rem 0.3rem;
  text-align: center;
}

/* --- Pagination --- */

.admin-img-pagination {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.admin-img-pag-info {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Progress bar --- */

.admin-img-progress {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-top: 1rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.admin-img-progress::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--progress, 0%);
  background: var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: width 0.3s ease;
}

.admin-img-progress-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
}

/* --- Responsive --- */

@media (max-width: 1024px) {
  .admin-img-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .admin-img-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-img-controls {
    gap: 0.5rem;
  }

  .admin-img-selected-count {
    margin-left: 0;
  }
}

/* ==========================================================================
   Feedback Inbox / My Feedback
   ========================================================================== */

.screen-feedback-inbox, .screen-my-feedback { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.feedback-inbox-title { font-family: var(--font-serif); font-size: 1.8rem; margin-bottom: 1rem; }
.feedback-inbox-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.feedback-inbox-list { display: flex; flex-direction: column; gap: 0.75rem; }

.feedback-inbox-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.feedback-inbox-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.feedback-inbox-card.unread { border-left: 3px solid var(--accent); }

.feedback-inbox-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.feedback-inbox-quote { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 0.85rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-inbox-content-link { color: var(--accent); font-size: 0.8rem; font-family: var(--font-sans); white-space: nowrap; text-decoration: none; }
.feedback-inbox-content-link:hover { text-decoration: underline; }

.feedback-inbox-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.feedback-inbox-alias { color: var(--accent); font-size: 0.82rem; font-weight: 600; font-family: var(--font-sans); }
.feedback-inbox-time { color: var(--text-muted); font-size: 0.78rem; font-family: var(--font-sans); }
.feedback-inbox-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; }

.feedback-inbox-body-preview { font-family: var(--font-serif); font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); margin-bottom: 0.5rem; }

.feedback-inbox-badges { display: flex; gap: 0.35rem; justify-content: flex-end; }
.feedback-inbox-badge { font-size: 0.72rem; font-family: var(--font-sans); color: var(--text-muted); background: var(--bg-elevated); padding: 0.15em 0.5em; border-radius: var(--radius-sm); }

.feedback-inbox-empty { text-align: center; color: var(--text-muted); font-family: var(--font-serif); font-size: 0.95rem; padding: 3rem 1rem; }

/* ==========================================================================
   Forum Thread Type Selector
   ========================================================================== */

.thread-type-selector { display: flex; gap: 0.35rem; margin-bottom: 1rem; }
.thread-type-btn { font-family: var(--font-sans); font-size: 0.85rem; padding: 0.4em 1em; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: none; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.thread-type-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.thread-type-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

.thread-type-badge { font-size: 0.68rem; font-family: var(--font-sans); padding: 0.15em 0.5em; border-radius: var(--radius-sm); letter-spacing: 0.03em; font-weight: 500; }
.thread-type-question { background: color-mix(in srgb, var(--resonance) 12%, transparent); color: var(--resonance); }
.thread-type-announcement { background: var(--accent-subtle); color: var(--accent); }
.thread-type-passage_feedback { background: rgba(149, 117, 205, 0.15); color: #b39ddb; }

.thread-visibility-badge { font-size: 0.7rem; font-family: var(--font-sans); padding: 0.15em 0.5em; border-radius: var(--radius-sm); font-weight: 600; }
.thread-visibility-badge.private { background: rgba(204, 68, 68, 0.15); color: var(--error); }
.thread-visibility-badge.unlisted { background: rgba(138, 134, 128, 0.15); color: var(--text-muted); }

.thread-source-link { font-size: 0.82rem; color: var(--accent); font-family: var(--font-sans); text-decoration: none; }
.thread-source-link:hover { text-decoration: underline; }

/* ==========================================================================
   Civic Room
   ========================================================================== */

.screen-civic-room { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.civic-room-title { font-family: var(--font-serif); font-size: 2rem; color: var(--text-primary); }
.civic-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .civic-room-grid { grid-template-columns: 1fr; } }

.civic-section { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); }
.civic-section-title { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
.civic-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-subtle); }
.civic-section-header .civic-section-title { margin-bottom: 0; }

/* Channels */
.civic-channel-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.85rem; font-family: var(--font-sans); border-bottom: 1px solid var(--border-subtle); }
.civic-channel-item:last-of-type { border-bottom: none; }
.civic-channel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.civic-channel-dot.active { background: var(--success); }
.civic-channel-dot.expired { background: var(--error); }
.civic-channel-dot.disabled { background: var(--text-muted); }
.civic-channel-platform { font-weight: 600; color: var(--text-primary); text-transform: capitalize; }
.civic-channel-handle { color: var(--text-secondary); }

/* Posts */
.civic-post-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 0.5rem; cursor: pointer; transition: border-color var(--transition); }
.civic-post-item:hover { border-color: var(--accent); }
.civic-post-platform { font-size: 0.7rem; font-weight: 600; padding: 0.15em 0.5em; border-radius: var(--radius-sm); text-transform: uppercase; background: var(--bg-elevated); color: var(--text-secondary); }
.civic-post-body { flex: 1; font-size: 0.85rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); }
.civic-post-time { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; font-family: var(--font-sans); }
.civic-post-state { font-size: 0.7rem; padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-family: var(--font-sans); }
.civic-post-state.draft { background: var(--bg-elevated); color: var(--text-muted); }
.civic-post-state.queued { background: rgba(201,168,76,0.15); color: var(--accent); }
.civic-post-state.published { background: rgba(74,138,90,0.15); color: var(--success); }
.civic-post-state.error { background: rgba(204,68,68,0.15); color: var(--error); }

/* Threads & Canvases */
.civic-list-item { padding: 0.5rem 0; font-size: 0.85rem; font-family: var(--font-sans); border-bottom: 1px solid var(--border-subtle); }
.civic-list-item:last-child { border-bottom: none; }
.civic-list-item a { color: var(--text-primary); text-decoration: none; }
.civic-list-item a:hover { color: var(--accent); }
.civic-list-time { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.5rem; }

/* Composer Modal */
.civic-composer-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.civic-composer { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; width: 560px; max-width: calc(100vw - 2rem); max-height: 80vh; overflow-y: auto; }
.civic-composer-title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.civic-composer-channels { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.civic-composer-channel-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-family: var(--font-sans); cursor: pointer; }
.civic-composer-counter { font-size: 0.78rem; color: var(--text-muted); text-align: right; margin-top: 0.25rem; font-family: var(--font-sans); }
.civic-composer-schedule { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.civic-composer-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.civic-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 1.5rem; font-family: var(--font-serif); }

/* ==========================================================================
   Marketplace — Works-First Browse + Showcase
   ========================================================================== */

/* Marketplace Toolbar */
.mp-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* Book Cards */
.mp-book-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  cursor: pointer;
  transition: background var(--transition);
  box-shadow: var(--shadow-sm);
}

.mp-book-card:hover { background: var(--bg-elevated); }

.mp-book-cover {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.mp-book-cover canvas { width: 100%; height: 100%; object-fit: cover; }

.mp-book-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.mp-book-author {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.mp-book-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.mp-book-type-badge {
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.mp-book-price {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.mp-book-price--free {
  color: var(--success, var(--accent));
}

.mp-book-counts {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mp-book-count-item {
  font-family: var(--font-sans);
  font-size: 0.75rem;
}

.mp-book-fork-badge {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.mp-loading { color: var(--text-muted); font-family: var(--font-sans); padding: 2rem; text-align: center; }
.mp-error { color: var(--text-muted); font-family: var(--font-sans); padding: 1rem 0; }

/* Showcase Page */
.screen-marketplace-showcase {
  max-width: 1100px;
  margin: 0 auto;
}

.mp-showcase-hero {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mp-showcase-cover {
  width: 200px;
  min-width: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mp-showcase-cover img { width: 100%; height: auto; }
.mp-showcase-cover canvas { width: 100%; height: auto; }
.mp-showcase-cover-placeholder {
  width: 200px;
  height: 280px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-showcase-info { flex: 1; }

.mp-showcase-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  text-decoration: none;
  display: block;
}
.mp-showcase-title:hover { color: var(--accent); }

.mp-showcase-author {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.mp-showcase-author-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.mp-showcase-author-link:hover { text-decoration: underline; }

.mp-showcase-meta {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.mp-showcase-blurb {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.mp-showcase-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.mp-showcase-price {
  font-weight: 600;
  color: var(--accent);
  font-size: 1.1rem;
}

.mp-showcase-preview-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  text-decoration: none;
  cursor: pointer;
}
.mp-showcase-preview-note:hover { color: var(--accent); text-decoration: underline; }

.mp-showcase-section-header {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.25rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.mp-showcase-characters-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.mp-showcase-world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.mp-showcase-world-col { display: flex; flex-direction: column; gap: 0.5rem; }
.mp-showcase-world-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.mp-showcase-plots-grid,
.mp-showcase-trees-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-showcase-entity-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  box-shadow: var(--shadow-sm);
}

.mp-showcase-entity-card:hover { background: var(--bg-elevated); }

.mp-showcase-entity-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mp-showcase-entity-icon { font-size: 1.2rem; flex-shrink: 0; }
.mp-showcase-entity-name { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.mp-showcase-entity-sub { font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-muted); }

.mp-showcase-fork-btn { margin-left: auto; }

@media (max-width: 640px) {
  .mp-showcase-hero { flex-direction: column; align-items: center; text-align: center; }
  .mp-showcase-cover { width: 150px; min-width: 150px; }
  .mp-showcase-actions { justify-content: center; }
  .mp-showcase-world-grid { grid-template-columns: 1fr; }
}

/* ── Name Generator Popup ─────────────────────────────────────────────── */

.namegen-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 299;
}

.namegen-popup {
  position: fixed;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl);
  z-index: 300;
  padding: 0.75rem;
  font-family: var(--font-sans);
}

.namegen-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.namegen-close {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}

.namegen-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.namegen-select {
  flex: 1;
  padding: 0.35rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}

.namegen-gender-bar {
  display: flex;
  gap: 0.15rem;
}

.namegen-gender-pill {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition);
}

.namegen-gender-pill:hover { border-color: var(--accent); color: var(--accent); }
.namegen-gender-pill.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }

.namegen-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
}

.namegen-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
}

.namegen-row:hover { background: var(--bg-surface); }

.namegen-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  flex: 1;
}

.namegen-meaning {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.namegen-row-actions {
  display: flex;
  gap: 0.15rem;
}

.namegen-action-btn {
  padding: 0.15rem 0.3rem;
  font-size: 0.85rem;
  min-width: unset;
}

.namegen-regen {
  width: 100%;
  text-align: center;
}
/* ── Book detail — marketplace-style hero + personal warmth ─── */

.comp-hero {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin: 0.75rem 0 2rem 0;
}

.comp-hero-cover {
  width: 180px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comp-hero-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.comp-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.comp-hero-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.comp-hero-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.comp-hero-blurb {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.comp-hero-personal {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: auto;
}

.comp-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* ==========================================================================
   Prose Overlay — focused editing overlay for a single prose field
   ========================================================================== */

.prose-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: prose-overlay-in 200ms ease forwards;
}

.prose-overlay--closing {
  animation: prose-overlay-out 150ms ease forwards;
  pointer-events: none;
}

.prose-overlay-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
  animation: prose-panel-in 200ms ease forwards;
  overflow: hidden;
}

.prose-overlay--closing .prose-overlay-panel {
  animation: prose-panel-out 150ms ease forwards;
}

.prose-overlay-header {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.prose-overlay-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.prose-overlay-body .forum-editor {
  border: none;
  background: none;
}

.prose-overlay-body .forum-editor-content .ProseMirror {
  min-height: 240px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius, 6px);
  padding: 0.75rem;
  background: var(--bg-primary);
  transition: border-color var(--transition);
}

.prose-overlay-body .forum-editor-content .ProseMirror:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.prose-overlay-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

/* Animations */
@keyframes prose-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes prose-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes prose-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes prose-panel-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ==========================================================================
   Editable identity inputs — blend into read view, reveal on interaction
   ========================================================================== */

/* ==========================================================================
   Editable identity inputs — blend into read view, reveal on interaction
   ========================================================================== */

.read-identity-input {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  padding: 0.15rem 0.35rem;
  width: 100%;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.read-identity-input:hover {
  border-color: var(--border-subtle);
}

.read-identity-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.read-identity-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================================================================
   Clickable prose cards — cursor + hover accent border
   ========================================================================== */

.read-section-card--editable {
  cursor: pointer;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.read-section-card--editable:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Collapsed empty fields — compact single-line row */
.read-section-card--collapsed {
  padding: 0.6rem 1rem;
  margin-bottom: 0.25rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.read-section-card--collapsed .read-section-card-header {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.7rem;
  opacity: 0.5;
}
.read-section-card--collapsed:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: none;
}
.read-section-card--collapsed:hover .read-section-card-header {
  opacity: 0.8;
}

/* ==========================================================================
   Empty prose card placeholder
   ========================================================================== */

.read-prose--empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================================================================
   Entity Explorer Overlay
   ========================================================================== */

.entity-explorer-panel {
  max-width: 600px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.entity-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.entity-explorer-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entity-explorer-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.1rem 0.3rem;
  line-height: 1;
}

.entity-explorer-close:hover {
  color: var(--text-primary);
}

.entity-explorer-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  min-height: 200px;
}

.entity-explorer-you {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.4rem 0 0.15rem;
}

.entity-explorer-you b {
  color: var(--text-secondary);
  font-weight: 600;
}

.entity-explorer-response {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0.15rem 0 0.4rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--accent);
}

.entity-explorer-thinking {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.2rem 0;
}

.entity-explorer-input {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.entity-explorer-input input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.entity-explorer-input input::placeholder {
  color: var(--text-muted);
}

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

.entity-explorer-input button {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.entity-explorer-input button:hover {
  filter: brightness(1.1);
}

/* Explorer action buttons (save to location, import to plot) */
.entity-explorer-save-btn,
.entity-explorer-import-btn {
  display: block;
  margin: 0.4rem 0 0.6rem;
  background: var(--surface-raised, var(--surface-alt));
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.entity-explorer-save-btn:hover,
.entity-explorer-import-btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.entity-explorer-save-btn:disabled,
.entity-explorer-import-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.entity-explorer-save-done {
  color: var(--success);
  border-color: var(--success);
  cursor: default;
}

.entity-explorer-scene-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface-raised, var(--surface-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
}

.entity-explorer-scene-label {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.entity-explorer-scene-select {
  flex: 1;
  min-width: 120px;
  padding: 0.25rem 0.4rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.entity-explorer-import-confirm {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.entity-explorer-import-confirm:hover {
  filter: brightness(1.1);
}

.entity-explorer-import-confirm:disabled {
  opacity: 0.6;
  cursor: wait;
}

.entity-explorer-import-cancel {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.entity-explorer-import-cancel:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.entity-explorer-import-success {
  margin: 0.4rem 0 0.6rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface-raised, var(--surface-alt));
  border: 1px solid var(--success);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Plot Designer
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-plot-designer {
  max-width: var(--container-wide, 960px);
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
}

.plot-designer-loading {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 2rem 0;
}

.plot-designer-back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: color var(--transition);
}
.plot-designer-back:hover { color: var(--accent); }

.plot-designer-empty {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 2rem 1rem;
  text-align: center;
}

/* ─── Top Bar ───────────────────────────────────────────────────────────── */

.plot-designer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.plot-designer-topbar-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.plot-designer-topbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ─── Three-Panel Layout ────────────────────────────────────────────────── */

.plot-designer-panels {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  min-height: 60vh;
}

.plot-designer-nav,
.plot-designer-detail,
.plot-designer-evidence {
  background: var(--bg-surface);
  overflow-y: auto;
}

.plot-designer-nav {
  padding: 0.5rem 0;
  max-height: 70vh;
}

.plot-designer-detail {
  padding: 1.25rem 1.5rem;
  max-height: 70vh;
}

.plot-designer-evidence {
  padding: 0.75rem;
  max-height: 70vh;
}

/* ─── Left Panel: Nav ───────────────────────────────────────────────────── */

.plot-nav-act {
  margin-bottom: 0.25rem;
}

.plot-nav-act-header {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
}

.plot-nav-beat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}
.plot-nav-beat:hover { background: var(--bg-hover); color: var(--text-primary); }
.plot-nav-beat--active { background: var(--accent-subtle); color: var(--text-primary); }

.plot-nav-beat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plot-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--text-muted);
  background: transparent;
}
.plot-nav-dot--filled {
  background: var(--success);
  border-color: var(--success);
}
.plot-nav-dot--mapped {
  background: var(--accent);
  border-color: var(--accent);
}

/* ─── Center Panel: Detail ──────────────────────────────────────────────── */

.plot-detail-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.plot-detail-hint {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.plot-detail-refs {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.plot-detail-content-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
}

.plot-detail-content,
.plot-detail-notes {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 0.5rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-height: 4rem;
  outline: none;
  transition: border-color var(--transition);
}
.plot-detail-content:focus,
.plot-detail-notes:focus {
  border-color: var(--accent);
}

.plot-detail-content:empty::before,
.plot-detail-notes:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
  pointer-events: none;
}

.plot-detail-notes {
  min-height: 2.5rem;
  font-size: 0.88rem;
}

.plot-detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Right Panel: Evidence ─────────────────────────────────────────────── */

.plot-evidence-header {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.plot-evidence-loading,
.plot-evidence-empty {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 1rem 0;
}

.plot-evidence-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  transition: border-color var(--transition);
}
.plot-evidence-card:hover { border-color: var(--border); }

.plot-evidence-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  margin-right: 0.35rem;
}
.plot-evidence-badge--analysis { background: rgba(138,100,200,0.15); color: #b89ce8; }
.plot-evidence-badge--text_stats { background: rgba(74,138,90,0.15); color: #7cc08d; }
.plot-evidence-badge--semantic { background: rgba(201,168,76,0.15); color: var(--accent); }

.plot-evidence-confidence {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.plot-evidence-chapter {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.plot-evidence-text {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.plot-evidence-excerpt {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  margin: 0.35rem 0 0.35rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--accent);
}

.plot-evidence-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/* ─── Bottom Bar ────────────────────────────────────────────────────────── */

.plot-designer-bottombar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.plot-bottombar-progress {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.plot-bottombar-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
}

.plot-bottombar-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ─── Template Picker ───────────────────────────────────────────────────── */

.plot-designer-picker {
  max-width: 65ch;
  padding: 1rem 0;
}

.plot-designer-picker-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.plot-designer-picker-subtitle {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.plot-designer-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plot-designer-picker-card {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.plot-designer-picker-card:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.plot-designer-picker-card:disabled {
  opacity: 0.5;
  cursor: wait;
}

.plot-designer-picker-card-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.plot-designer-picker-card-desc {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plot-designer-picker-card-meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.plot-designer-picker-error {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--error);
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .plot-designer-panels {
    grid-template-columns: 180px 1fr;
  }
  .plot-designer-evidence {
    display: none;
  }
}

@media (max-width: 768px) {
  .plot-designer-panels {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .plot-designer-nav {
    max-height: 30vh;
    border-bottom: 1px solid var(--border-subtle);
  }
  .plot-designer-detail {
    max-height: none;
  }
  .screen-plot-designer {
    padding: 0.75rem;
  }
}

/* ========================================================================
   Story Intelligence pill bar + result panels
   ======================================================================== */
.si-pill-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-primary); }
.si-pill { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); white-space: nowrap; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 0.2rem; }
.si-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.si-pill--active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); font-weight: 600; }

/* Result container */
.si-results { padding: 0.5rem 0.75rem; max-height: 50vh; overflow-y: auto; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); }
.si-loading { color: var(--text-tertiary); font-size: 0.8rem; padding: 1rem; text-align: center; }
.si-empty { color: var(--text-tertiary); font-size: 0.8rem; padding: 0.75rem; font-style: italic; }
.si-error { color: var(--error); font-size: 0.8rem; padding: 0.75rem; }
.si-muted { color: var(--text-tertiary); font-size: 0.75rem; }

/* Tables */
.si-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.si-table th { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.si-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.si-table tbody tr:hover { background: var(--bg-hover); }

/* Presence grid — character-centric with dot strips */
.si-presence-list { display: flex; flex-direction: column; gap: 6px; }
.si-presence-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); }
.si-presence-name { display: flex; justify-content: space-between; align-items: center; }
.si-presence-label { font-weight: 500; font-size: 0.85rem; }
.si-presence-count { font-size: 0.75rem; font-weight: 600; color: var(--accent); opacity: 0.8; }
.si-presence-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.si-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.si-dot--present { background: var(--accent); }
.si-dot--absent { background: var(--border); opacity: 0.3; }
.si-clickable { cursor: pointer; border-radius: 3px; transition: background 0.15s; }
.si-clickable:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Cards */
.si-card-list { display: flex; flex-direction: column; gap: 0.4rem; }
.si-card { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.5rem 0.6rem; }
.si-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.si-card-name { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); }
.si-card-badge { display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-weight: 500; }
.si-badge-character { border-color: var(--accent); color: var(--accent); }
.si-badge-location { border-color: var(--success); color: var(--success); }
.si-card-body { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.si-passage { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; max-height: 100px; overflow-y: auto; }
.si-similarity-badge { font-size: 0.65rem; padding: 0.1rem 0.35rem; border-radius: 999px; background: var(--accent-subtle); color: var(--accent); font-weight: 600; border: 1px solid var(--accent); }

/* Pacing */
.si-pacing-list { display: flex; flex-direction: column; gap: 0.35rem; }
.si-pacing-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 0.5rem; align-items: center; }
.si-pacing-label { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-pacing-bar-wrap { height: 14px; background: var(--bg-primary); border-radius: 7px; overflow: hidden; border: 1px solid var(--border-subtle); }
.si-pacing-bar { height: 100%; border-radius: 7px; transition: width 0.3s ease; }
.si-pacing-meta { font-size: 0.68rem; color: var(--text-tertiary); white-space: nowrap; }
/* Tone-based bar colors using theme variables */
.si-tone-tension { background: var(--error); }
.si-tone-calm { background: var(--success); }
.si-tone-grief { background: var(--text-tertiary); }
.si-tone-joy { background: var(--warning); }
.si-tone-anger { background: var(--error); opacity: 0.8; }

/* POV */
.si-pov-list { display: flex; flex-direction: column; gap: 0.3rem; }
.si-pov-chapter { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.si-pov-title { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-pov-scenes { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.si-pov-badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 999px; font-weight: 500; border: 1px solid var(--border-subtle); }
.si-pov-first { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.si-pov-third { background: var(--bg-elevated); color: var(--text-secondary); }
.si-pov-mixed { background: var(--warning-subtle, var(--bg-elevated)); color: var(--warning); border-color: var(--warning); }
.si-pov-unknown { background: var(--bg-secondary); color: var(--text-tertiary); }
.si-pov-headhop { outline: 2px solid var(--error); outline-offset: 1px; }

/* Repetition */
.si-repetition-card { }
.si-repetition-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.3rem; }
.si-repetition-side { display: flex; flex-direction: column; gap: 0.25rem; }

/* Show/Tell */
.si-showtell-list { display: flex; flex-direction: column; gap: 0.3rem; }
.si-showtell-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 0.5rem; align-items: center; }
.si-showtell-label { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-showtell-bar-wrap { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border-subtle); }
.si-showtell-bar { height: 100%; }
.si-showtell-show { background: var(--success); }
.si-showtell-tell { background: var(--text-tertiary); opacity: 0.4; }
.si-showtell-meta { font-size: 0.68rem; color: var(--text-tertiary); white-space: nowrap; }
.si-expand-btn { font-size: 0.7rem; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0.1rem 0; text-decoration: underline; font-family: var(--font-sans); }
.si-expand-btn:hover { color: var(--accent-hover); }
.si-flagged-phrases { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0 0.25rem 100px; }
.si-flagged-phrase { font-size: 0.7rem; padding: 0.1rem 0.35rem; background: var(--error-subtle, var(--bg-elevated)); color: var(--error); border-radius: var(--radius-sm, 4px); border: 1px solid var(--error); }

/* Voice table */
.si-voice-name { font-weight: 500; white-space: nowrap; }
.si-voice-words { font-size: 0.7rem; color: var(--text-tertiary); font-style: italic; }

/* Readability */
.si-readability-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius); font-size: 0.78rem; color: var(--text-secondary); }
.si-metric { display: inline-flex; gap: 0.2rem; align-items: center; }
.si-metric strong { color: var(--text-primary); }
.si-outlier { background: var(--error-subtle, var(--bg-elevated)); }
.si-outlier td { color: var(--error); }

/* ── CivBook Revisions Panel ── */
.revision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.revision-row:last-child { border-bottom: none; }
.revision-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
}
.revision-date { color: var(--text-secondary); }
.revision-size { color: var(--text-muted); font-size: 0.75rem; }
.revision-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── CivBook Import Card ── */
.civbook-import-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface, var(--bg-card));
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
  text-align: center;
}
.civbook-import-card:hover {
  border-color: var(--accent);
  background: var(--accent-subtle, rgba(201,168,76,0.04));
}
.civbook-import-card.importing {
  pointer-events: none;
  opacity: 0.7;
}
.civbook-import-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.civbook-import-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.civbook-import-status {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
}
.civbook-import-errors {
  font-size: 0.78rem;
  color: var(--error, #c44);
  text-align: left;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
}
.civbook-import-warnings {
  font-size: 0.78rem;
  color: var(--warning, #c90);
  text-align: left;
  width: 100%;
}

/* ==========================================================================
   For You — Recommendation Section
   ========================================================================== */

.for-you-section {
  margin-bottom: 2rem;
}
.for-you-header {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.8;
}
.for-you-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.for-you-row::-webkit-scrollbar {
  height: 6px;
}
.for-you-row::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.for-you-card {
  flex: 0 0 160px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.for-you-card:hover {
  transform: translateY(-2px);
}
.for-you-cover {
  position: relative;
  width: 160px;
  height: 240px;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  background: var(--bg-secondary);
}
.for-you-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.for-you-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-secondary);
}
.for-you-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.for-you-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-top: 0.4rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.for-you-reason {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* =====================================================================
   Search mode toggle (Titles/Scenes)
   ===================================================================== */
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
}
.search-input-wrap .search-input {
  flex: 1;
}
.search-input-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: -2rem;
  margin-right: 0.25rem;
  opacity: 0.5;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-input-clear:hover { opacity: 1; }
.search-input-clear-icon {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--text-secondary);
  mask-image: url('/icons/cross.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('/icons/cross.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.search-mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  flex-shrink: 0;
}
.search-mode-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.search-mode-btn + .search-mode-btn {
  border-left: 1px solid var(--border);
}
.search-mode-btn.active {
  background: var(--accent);
  color: var(--bg-primary);
}
.search-mode-btn:hover:not(.active) {
  background: var(--bg-tertiary, var(--bg-secondary));
}

/* Scene search results */
.scene-results-header {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.scene-result-card {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary);
  transition: border-color 0.15s;
}
.scene-result-card:hover {
  border-color: var(--accent);
}
.scene-result-book {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.scene-result-chapter {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.scene-result-snippet {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  font-family: var(--font-serif);
  opacity: 0.85;
}
.scene-result-score {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ==========================================================================
   Entity Browser
   ========================================================================== */

.screen-entity-browser {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* --- Breadcrumb --- */

.eb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.eb-breadcrumb-link {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

.eb-breadcrumb-link:hover {
  text-decoration: underline;
}

.eb-breadcrumb-sep {
  color: var(--text-muted);
  margin: 0 0.15rem;
}

.eb-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

/* --- Toolbar --- */

.eb-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.eb-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eb-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}

.eb-search-input:focus {
  border-color: var(--accent);
}

.eb-scene-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.eb-scene-toggle input[type="checkbox"] {
  accent-color: var(--accent);
}

/* --- Filters --- */

.eb-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.eb-filter-select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}

.eb-filter-select:focus {
  border-color: var(--accent);
}

/* --- Controls row --- */

.eb-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.eb-sort-wrap,
.eb-view-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.eb-sort-label,
.eb-view-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.eb-sort-btn,
.eb-view-btn {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.eb-sort-btn:hover,
.eb-view-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.eb-sort-btn--active,
.eb-view-btn--active {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

.eb-result-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
}

.eb-actions-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Content --- */

.eb-content {
  position: relative;
}

/* --- Grid view --- */

.eb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* --- Cards --- */

.eb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.eb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hover, var(--text-muted));
}

.eb-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.eb-card-checkbox {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.eb-card-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elevated);
}

.eb-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eb-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
}

.eb-card-initial {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--eb-type-color, var(--accent));
  opacity: 0.3;
}

.eb-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.eb-card-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-card-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-card-fork {
  font-size: 0.72rem;
  color: var(--accent);
  opacity: 0.8;
}

/* --- List view --- */

.eb-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.eb-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}

.eb-row:hover {
  background: var(--bg-elevated);
  border-color: var(--border-hover, var(--text-muted));
}

.eb-row--selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.eb-row-checkbox {
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.eb-row-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.eb-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eb-row-thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--eb-type-color, var(--accent));
  opacity: 0.35;
}

.eb-row-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-row-meta {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-row-fork {
  font-size: 0.72rem;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0.8;
}

/* --- Load more / spinner / empty --- */

.eb-load-more {
  display: block;
  margin: 1.5rem auto 0;
}

.eb-spinner {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.eb-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- Scene results inside entity browser --- */

.eb-scene-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Responsive --- */

@media (max-width: 640px) {
  .screen-entity-browser {
    padding: 1rem;
  }
  .eb-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }
  .eb-control-row {
    gap: 0.5rem;
  }
  .eb-search-row {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOWCASE
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Background layers --- */

.showcase-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}

.showcase-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-primary);
}

/* --- Container --- */

.screen-showcase {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* --- Header --- */

.showcase-author {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.showcase-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.showcase-author-info {
  flex: 1;
  min-width: 0;
}

.showcase-display-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  font-weight: 600;
}

.showcase-alias-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.showcase-location {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.showcase-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.showcase-bio {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.6;
  max-width: 600px;
}

.showcase-social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.showcase-social-link {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.showcase-social-link:hover {
  color: var(--accent);
}

.showcase-author-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.sc-back {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.sc-back:hover {
  text-decoration: underline;
  color: var(--text-primary);
}

.sc-header-action {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition);
}

.sc-header-action:hover {
  color: var(--text-primary);
}

.sc-header-action--letter {
  color: var(--accent);
  font-weight: 500;
}

.sc-header-action--letter:hover {
  color: var(--accent-hover, var(--accent));
}

.sc-action-icon {
  width: 14px;
  height: 14px;
  filter: var(--icon-filter);
  vertical-align: -1px;
  margin-right: 0.3rem;
  opacity: 0.7;
}

.sc-header-action:hover .sc-action-icon { opacity: 1; }

.sc-follow--active {
  color: var(--accent);
}

.sc-follow--active .sc-action-icon {
  filter: var(--icon-filter-accent, var(--icon-filter));
  opacity: 1;
}

.sc-report {
  color: var(--text-muted);
}

.sc-report:hover {
  color: var(--error);
}

/* --- Toolbar --- */

.sc-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.sc-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sc-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}

.sc-search-input:focus {
  border-color: var(--accent);
}

.sc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sc-filter-select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}

.sc-filter-select:focus {
  border-color: var(--accent);
}

.sc-view-toggle {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.sc-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition);
}

.sc-view-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.sc-view-btn--active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* --- Grid --- */

.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

/* --- Cards --- */

.sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: 0 2px 8px var(--shadow);
}

.sc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
  border-color: var(--border-hover, var(--text-muted));
}

.sc-card-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elevated);
}

.sc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Cover context menu */
.sc-cover-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem 0;
  min-width: 160px;
  font-family: var(--font-sans);
}
.sc-cover-menu-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition), color var(--transition);
}
.sc-cover-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sc-card-title {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-card-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
}

.sc-card-note {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}

.sc-card-wc {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.sc-card-price {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.2rem;
}
.sc-card-price--free { color: var(--success, var(--accent)); }

/* --- Featured showcase card (first item, horizontal) --- */

.sc-featured {
  position: relative;
  display: flex;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  grid-column: 1 / -1;
  max-height: 280px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.sc-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--shadow);
}

.sc-featured-cover {
  width: 210px;
  min-width: 210px;
  max-height: 280px;
  overflow: hidden;
  flex-shrink: 0;
}

.sc-featured-cover .sc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc-featured-panel {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(var(--bg-rgb), 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--panel-text, var(--text-primary));
}

.sc-featured-panel .sc-card-badge {
  color: var(--panel-text, var(--accent));
  background: rgba(var(--bg-rgb), 0.3);
}

.sc-featured-panel .sc-card-wc {
  color: var(--panel-text-muted, var(--text-muted));
}

.sc-featured-panel .sc-card-note {
  color: var(--panel-text-muted, var(--text-secondary));
}

.sc-featured-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--panel-text, var(--text-primary));
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-featured-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sc-featured-excerpt {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--panel-text-muted, var(--text-secondary));
  line-height: 1.65;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Mobile: stack featured card vertically */
@media (max-width: 767px) {
  .sc-featured {
    flex-direction: column;
    max-height: none;
  }

  .sc-featured-cover {
    width: 100%;
    min-width: 0;
    max-height: 240px;
  }

  .sc-featured-panel {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* --- List view --- */

.sc-list {
  display: flex;
  flex-direction: column;
}

.sc-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  transition: background var(--transition);
}

.sc-row:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.sc-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.sc-row:hover {
  background: var(--bg-elevated);
}

.sc-row-thumb {
  width: 40px;
  height: 54px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.sc-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-row-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.3;
}

.sc-row-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-row-type {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.85;
  flex-shrink: 0;
}

.sc-row-note {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc-row-wc {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Resonance ornaments --- */

.showcase-ornament {
  position: absolute;
  pointer-events: none;
}

.showcase-ornament--underline {
  display: flex;
  justify-content: center;
  color: var(--resonance);
}

.showcase-ornament--underline svg {
  width: 60%;
  height: auto;
}

.showcase-ornament--corner {
  color: var(--resonance);
}

.showcase-ornament--corner svg {
  width: 16px;
  height: 16px;
}

.showcase-ornament--sigil {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--resonance);
  margin-right: 0.35rem;
}

.showcase-ornament--sigil svg {
  width: 18px;
  height: 18px;
}

/* --- Forum section --- */

.showcase-forum {
  margin-top: 3rem;
}

.showcase-forum-heading {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel-text-muted, var(--text-secondary));
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--bg-rgb), 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
}

.showcase-forum-search {
  margin-bottom: 0.75rem;
}

.showcase-forum-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  transition: border-color var(--transition);
}

.showcase-forum-search-input::placeholder {
  color: var(--text-muted);
}

.showcase-forum-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.showcase-forum-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  transition: background var(--transition);
}

.showcase-forum-row:hover {
  background: var(--bg-elevated);
}

.showcase-forum-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-forum-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Load more --- */

.sc-load-more {
  display: block;
  margin: 1.5rem auto 0;
}

/* --- Empty state --- */

.sc-empty {
  text-align: center;
  padding: 3rem 1rem;
}

.sc-empty-text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Showcase badge on My Writing cards --- */

.card-showcase-badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY EDIT (standalone route — loading state only, overlay handles the rest)
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-entity-edit {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.entity-edit-loading {
  text-align: center;
  font-family: var(--font-serif);
  color: var(--text-secondary);
}

.entity-edit-error {
  text-align: center;
  font-family: var(--font-serif);
  color: var(--error);
}

/* --- Entity overlay action buttons row --- */

.entity-overlay-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle, var(--border));
}

.entity-overlay-actions .btn {
  min-width: 0;
}

.entity-overlay-delete {
  color: var(--error);
  opacity: 0.7;
  transition: opacity var(--transition);
  margin-left: auto;
}

.entity-overlay-delete:hover {
  opacity: 1;
}

/* --- Showcase hub (My Writing) --- */

.showcase-hub {
  margin-bottom: 1.25rem;
}

.showcase-hub-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.showcase-hub-link:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.showcase-hub-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask-image: url('/icons/book-user.png');
  mask-image: url('/icons/book-user.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.showcase-hub-text {
  display: flex;
  flex-direction: column;
}

.showcase-hub-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.showcase-hub-count {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* --- Earnings & Purchases Screens --- */
.screen-earnings, .screen-purchases {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.screen-earnings h2, .screen-purchases h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.earnings-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
.earnings-card {
  flex: 1;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.earnings-card-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.earnings-card-value {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}
.earnings-section-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.earnings-table, .purchases-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}
.earnings-table th, .purchases-table th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.earnings-table td, .purchases-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.earnings-fee { color: var(--text-muted); }
.earnings-share { font-weight: 600; color: var(--accent); }

/* --- Link Preview Cards --- */

.link-preview-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  margin: 0.5rem 0;
  max-width: 36rem;
}

.link-preview-card:hover {
  background-color: var(--accent-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.link-preview-image {
  width: 4rem;
  height: 5rem;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  flex-shrink: 0;
}

.link-preview-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.link-preview-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.link-preview-inline {
  border-bottom: 1px dashed var(--accent);
}

/* ==========================================================================
   The Board
   ========================================================================== */

.screen-board {
  position: relative;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.board--has-bg > .board-content { position: relative; z-index: 1; }

.board-bg-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-repeat: repeat;
  background-size: 300px;
  pointer-events: none;
  z-index: 0;
}

/* Content wrapper */
.board-content {
  max-width: 960px;
  margin: 0 auto;
}

/* Header row: title + dateline */
.board-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.board-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.board-dateline {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Accent rule below header */
.board-rule {
  border: none;
  border-top: 2px solid var(--accent);
  margin-bottom: 1.5rem;
}

/* Two-column grid */
.board-columns {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

.board-main { min-width: 0; }
.board-sidebar { min-width: 0; }

/* Board sections */
.board-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.board-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.board-section-header img {
  width: 16px; height: 16px;
  filter: var(--icon-filter);
  opacity: 0.7;
}

/* Board items */
.board-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
  cursor: pointer;
  transition: background var(--transition);
}
.board-item:last-child { border-bottom: none; }
.board-item:hover { background: var(--bg-elevated); }

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

.board-item-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.board-item-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.board-item-meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.board-item-preview {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 0.25rem;
}

.board-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.board-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--radius-sm);
}

.board-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--accent);
}

.board-cover-thumb {
  width: 48px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.board-pinned {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.board-pinned img {
  filter: var(--icon-filter-accent, var(--icon-filter));
}

/* Clickable name links within board items */
.board-name-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.board-name-link:hover { color: var(--accent); }

/* Personal banner — accent-left-bordered section for logged-in notifications */
.board-personal-banner {
  background: var(--bg-surface);
  border: 1px solid var(--accent-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.personal-banner-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.personal-banner-item {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
  padding: 0.25rem 0;
  cursor: pointer;
  transition: color var(--transition);
}
.personal-banner-item:hover { color: var(--accent); }

.personal-banner-item .time {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* Following section — accent-bordered, above announcements */
.board-following {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.board-following .board-section-header {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.board-following .board-section-header img {
  filter: var(--icon-filter-accent, var(--icon-filter));
  opacity: 1;
}

.board-following-empty {
  padding: 0.75rem 1rem;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.following-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
  cursor: pointer;
  transition: background var(--transition);
}
.following-row:last-child { border-bottom: none; }
.following-row:hover { background: var(--bg-elevated); }

.following-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

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

.following-text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.4;
}

.following-text .actor {
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition);
}
.following-text .actor:hover { color: var(--accent); }

.following-text .action { color: var(--text-secondary); }

.following-text .target {
  font-style: italic;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition);
}
.following-text .target:hover { color: var(--accent); }

.following-detail {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.following-manage {
  display: block;
  text-align: center;
  padding: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
  cursor: pointer;
  transition: color var(--transition);
  user-select: none;
}
.following-manage::after {
  content: ' \25BE';
  font-size: 0.7em;
  opacity: 0.5;
}
.following-manage--open::after {
  content: ' \25B4';
}
.following-manage:hover { color: var(--accent); }

.following-manage-panel {
  display: none;
  border-top: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
}
.following-manage-panel--open { display: block; }

.following-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
  transition: background var(--transition);
}
.following-manage-row:last-child { border-bottom: none; }
.following-manage-row:hover { background: var(--bg-elevated); }

.following-manage-name {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition);
}
.following-manage-name:hover { color: var(--accent); }

.following-manage-unfollow {
  font-size: 0.7rem;
  padding: 0.2em 0.6em;
  flex-shrink: 0;
}

.following-manage-empty {
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Activity stream sidebar — sticky */
.board-stream {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
  position: sticky;
  top: 4rem;
}

.stream-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
  cursor: pointer;
  transition: background var(--transition);
  font-size: 0.85rem;
}
.stream-row:last-child { border-bottom: none; }
.stream-row:hover { background: var(--bg-elevated); }

.stream-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.4rem;
}

/* Stream dot colours — event-type semantic colours defined as CSS classes */
.stream-dot--publish    { background: var(--accent); }
.stream-dot--chapter    { background: var(--color-green, #6ba36b); }
.stream-dot--forum      { background: var(--color-blue, #5b8fcc); }
.stream-dot--civpage    { background: var(--color-purple, #c07acc); }
.stream-dot--showcase   { background: var(--color-orange, #cc8844); }
.stream-dot--collection { background: var(--color-teal, #44aabb); }
.stream-dot--competition { background: var(--color-red, #cc5555); }

.stream-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  line-height: 1.4;
}

.stream-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.stream-link:hover { color: var(--accent); }

.stream-text .actor {
  font-weight: 600;
}

.stream-text .action { color: var(--text-secondary); }

.stream-text .target {
  font-style: italic;
}

.stream-time {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Bottom cards row */
.board-bottom-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.board-bottom-card {
  background: var(--bg-surface);
  border: 1px solid var(--accent-subtle);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.board-bottom-card:hover { border-color: var(--accent); }

.board-bottom-card-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

/* Follow button active state — CivPage action bar */
.action-btn.following {
  color: var(--accent);
  border-color: var(--accent);
}

/* Follow button active state — forum thread actions */
.post-action.following {
  color: var(--accent);
}

/* Follow icon for action bars */
.action-icon--follow {
  -webkit-mask-image: url('/icons/follow.png');
  mask-image: url('/icons/follow.png');
}

/* Responsive: single column on mobile, no sticky */
@media (max-width: 768px) {
  .screen-board { padding: 1rem 0.75rem; }
  .board-title { font-size: 1.6rem; }
  .board-columns { grid-template-columns: 1fr; }
  .board-stream { position: static; }
  .board-bottom-cards { grid-template-columns: 1fr; }
}

/* ---- Visibility Stats (CivPage + Showcase) ---- */
.visibility-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.visibility-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.visibility-card:hover {
  border-color: var(--accent);
}

.visibility-count {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--accent);
  min-width: 2.5rem;
  text-align: center;
}

.visibility-info {
  display: flex;
  flex-direction: column;
}

.visibility-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.visibility-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.visibility-card--expandable {
  cursor: pointer;
  flex-wrap: wrap;
}

.visibility-card--expandable .visibility-label::after {
  content: ' \25BE';
  font-size: 0.7em;
  opacity: 0.5;
}

.visibility-card--open .visibility-label::after {
  content: ' \25B4';
}

.visibility-timestamps {
  display: none;
  width: 100%;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.visibility-card--open .visibility-timestamps {
  display: block;
}

.visibility-timestamp {
  padding: 0.2rem 0;
}

@media (max-width: 768px) {
  .visibility-stats { grid-template-columns: 1fr; }
}