/* ============================================
   EchoWrite — AI Writing Studio
   Dark theme, distraction-free writing
   ============================================ */

/* Dark theme (default) */
:root, [data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-secondary: #161822;
  --bg-tertiary: #1c1f2e;
  --bg-elevated: #232636;
  --bg-hover: #2a2d40;
  --surface: #1c1f2e;
  --surface-2: #232636;
  --hover: #2a2d40;
  --text: #e8e9ed;
  --border: #2e3148;
  --border-light: #3a3d52;
  --text-primary: #e8e9ed;
  --text-secondary: #9da1b2;
  --text-muted: #6b6f82;
  --accent: #E8552D;
  --accent-hover: #d44a25;
  --accent-soft: rgba(232, 85, 45, 0.15);
  --orange: #E8552D; /* alias for accent — used by heading-style-btn.active, char-mode-btn.active, etc. */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #ef4444;
  --info: #60a5fa;
  --editor-bg: #1a1d2b;
  --editor-text: #d4d5db;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-writing: 'Merriweather', Georgia, serif;
  --sidebar-width: 260px;
  --scene-panel-width: 340px;
  --echo-width: 380px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --transition: 0.2s ease;
  --modal-bg: rgba(0,0,0,0.7);
  --wizard-overlay-bg: rgba(0,0,0,0.85);
}

/* Light theme */
[data-theme="light"] {
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f0f2;
  --bg-elevated: #ffffff;
  --bg-hover: #eaeaed;
  --surface: #f0f0f2;
  --surface-2: #ffffff;
  --hover: #eaeaed;
  --text: #1a1a1e;
  --border: #d8d8dc;
  --border-light: #e5e5e8;
  --text-primary: #1a1a1e;
  --text-secondary: #555566;
  --text-muted: #8888a0;
  --accent: #E8552D;
  --accent-hover: #d44a25;
  --accent-soft: rgba(232, 85, 45, 0.15);
  --orange: #E8552D; /* alias for accent — used by heading-style-btn.active, char-mode-btn.active, etc. */
  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --info: #2563eb;
  --editor-bg: #ffffff;
  --editor-text: #2a2a30;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --modal-bg: rgba(0,0,0,0.4);
  --wizard-overlay-bg: rgba(0,0,0,0.75);
}

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

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

/* ============ APP SHELL ============ */
.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-primary);
}

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

/* ============ SCREENS ============ */
.screen { display: none; flex: 1; min-height: 0; }
.screen.active { display: flex; }

/* ============ HOME SCREEN ============ */
#home-screen {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}
#home-screen.active {
  display: flex;
  overflow-y: auto;
}

/* Home Sidebar */
.home-sidebar {
  width: 240px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.home-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}

.home-logo-mark { font-size: 24px; }

.home-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.home-sidebar-nav {
  flex: 1 1 0;
  min-height: 0;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.home-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.home-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.home-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.home-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.home-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.sidebar-signout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  margin: 8px 0 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: var(--text-muted) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-signout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171 !important;
}

.home-sidebar-branding {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-sidebar-tagline {
  font-size: 11px;
  color: var(--text-muted);
}

.home-sidebar-version {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Home Main Content */
.home-main {
  flex: 1;
  overflow-y: auto;
  padding: 40px 48px;
}

.home-tab { display: none; }
.home-tab.active { display: block; }

.home-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.home-tab-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.home-tab-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}

.home-tab-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Feature Card (for Wizard tab) */
.home-feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  max-width: 500px;
}

.feature-card-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.home-feature-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.home-feature-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.tool-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition);
}

.tool-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tool-card-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.tool-card h4 {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.tool-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Home Goals */
.home-goals-content {
  max-width: 500px;
}

.btn-lg {
  padding: 12px 24px !important;
  font-size: 15px !important;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.project-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.project-card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.project-card-genre {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.project-card-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.project-card-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-hover);
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}

.project-card-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.project-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.project-card:hover .project-card-actions { opacity: 1; }
.project-card-delete {
  /* kept for backward compat — use .project-card-actions now */
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-icon { font-size: 64px; margin-bottom: 16px; }

.empty-state h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

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

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

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

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

/* Bug 40: btn-danger was used throughout but never defined */
.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  font-size: 16px;
  transition: all var(--transition);
}

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

.btn-icon-sm {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 13px;
  transition: all var(--transition);
}

.btn-icon-sm:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ============ WORKSPACE LAYOUT ============ */
#workspace-screen {
  flex-direction: row;
  overflow: hidden;
}

/* ============ SIDEBAR ============ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh; /* fallback */
  overflow: hidden;
  transition: width var(--transition), min-width var(--transition);
}

@supports (height: 100dvh) {
  .sidebar { height: 100dvh; }
}

.sidebar.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  padding: 12px 0 32px 0; /* bottom padding so last item never clips */
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.nav-section {
  margin-bottom: 4px;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  padding: 18px 20px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-right: 2px solid var(--accent);
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Sidebar Chapters */
.sidebar-chapters {
  flex: 0 1 200px;
  max-height: 24vh; /* prevent binder from squeezing nav items off-screen */
  min-height: 42px; /* header height when collapsed */
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex-basis 0.2s ease;
}

.sidebar-chapters.binder-collapsed {
  flex: 0 0 42px;
}

.sidebar-chapters.binder-collapsed .binder-tree,
.sidebar-chapters.binder-collapsed .chapter-list {
  display: none;
}

.sidebar-chapters.binder-collapsed .binder-panel-chevron {
  transform: rotate(-90deg);
}

/* No project open: show header only, tree hidden */
.sidebar[data-state="home"] .sidebar-chapters {
  flex: 0 0 42px;
}
.sidebar[data-state="home"] .sidebar-chapters .binder-tree,
.sidebar[data-state="home"] .sidebar-chapters .chapter-list,
.sidebar[data-state="home"] .sidebar-chapters .sidebar-footer {
  display: none;
}
.sidebar[data-state="home"] .sidebar-chapters .binder-header-tools {
  opacity: 0.3;
  pointer-events: none;
}

.sidebar-chapters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 8px 20px;
  flex-shrink: 0;
}

.binder-header-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  flex: 1;
}

.binder-panel-chevron {
  font-size: 9px;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.binder-header-tools {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.chapter-list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 8px;
}

.chapter-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.chapter-list-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.chapter-list-item.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.chapter-list-item .chapter-num {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 20px;
}

.chapter-list-item .chapter-words {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0; /* prevent footer from being squeezed off-screen */
}

.word-count-bar {
  width: 100%;
  height: 5px;
  background: var(--border); /* Bug 42: was var(--bg-hover) — too faint; border color gives better contrast */
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.word-count-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
}

.word-count-text {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ============ UNIFIED SIDEBAR COMPONENTS ============ */

/* Brand header */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo-mark { display: none; }
.sidebar-logo-text { display: none; }
.sidebar-logo-svg {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.sidebar-logo-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}
/* Logo text color: white on dark, dark on light */
.sidebar-logo-svg { color: #ffffff; }
[data-theme="light"] .sidebar-logo-svg { color: #1a1a2e; }
.sidebar-toggle-btn { color: var(--text-muted); flex-shrink: 0; }

/* Language switcher */
.sidebar-lang {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-lang .app-lang-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.sidebar-lang .app-lang-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-lang .app-lang-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Theme row — sits between lang flags and My Projects */
.sidebar-theme-row {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.theme-toggle-inline {
  width: 100%;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
}
.theme-toggle-inline:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Context bar */
.sidebar-context {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-ctx-home, .sidebar-ctx-project { display: flex; flex-direction: column; gap: 2px; }
.sidebar-projects-link {
  font-weight: 600;
  color: var(--accent) !important;
  background: var(--accent-soft);
  border-radius: var(--radius);
}
.sidebar-projects-link:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.sidebar-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}
.sidebar-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-back-btn i { font-size: 10px; }
.sidebar-project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsible section headers */
.nav-section-title.collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
  user-select: none;
  transition: color var(--transition);
}
.nav-section-title.collapsible:hover { color: var(--accent); opacity: 0.8; }
.nav-chevron {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.nav-section.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section.collapsed .nav-item { display: none; }

/* Project-scoped dim when no project open */
.sidebar[data-state="home"] .nav-section.project-scoped .nav-item,
.sidebar[data-state="home"] .nav-item.project-scoped {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
/* Section titles stay orange and readable — only the items dim */

/* Sidebar footer actions */
.sidebar-external-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.nav-item-external {
  opacity: 0.65;
  font-size: 12px !important;
}
.nav-item-external:hover { opacity: 1; }

.sidebar-footer-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.nav-item-signout {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.nav-item-signout:hover { color: var(--danger, #ef4444) !important; background: rgba(239,68,68,0.08) !important; }

/* ============ MAIN CONTENT ============ */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.page {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.page.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#page-manuscript.active {
  flex-direction: column;
  overflow: hidden;
}

/* ── Feature Hero — shared across all feature pages ─────────────────────── */
.feature-hero {
  text-align: center;
  padding: 40px 24px 32px;
  max-width: 820px;
  margin: 0 auto;
}
.fh-icon {
  font-size: 44px;
  color: var(--accent);
  margin-bottom: 14px;
  line-height: 1;
}
.fh-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}
.fh-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 22px;
}
.fh-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 auto 24px;
  max-width: 860px;
}
.fh-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: left;
}
.fh-step-arrow {
  display: flex;
  align-items: center;
  padding: 0 5px;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 20px;
  flex-shrink: 0;
}
.fh-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fh-step-body { flex: 1; }
.fh-step-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.fh-step-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.fh-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.fh-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 24px;
}
@media (max-width: 700px) {
  .fh-title { font-size: 22px; }
  .fh-sub { font-size: 14px; }
  .fh-steps { flex-direction: column; align-items: center; }
  .fh-step { max-width: 100%; width: 100%; }
  .fh-step-arrow { display: none; }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}

.page-header h2 {
  font-size: 22px;
  font-weight: 600;
}

/* ============ MANUSCRIPT EDITOR ============ */
.manuscript-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: visible;
  background: var(--bg-primary);
  transition: width 0.3s ease;
}
.manuscript-body-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.manuscript-sticky-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-primary);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 16px 0;
  flex-shrink: 0;
}
.manuscript-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 40px 0;
}

.manuscript-title-row {
  width: 100%;
  text-align: center;
  padding: 4px 0 2px;
}

.manuscript-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.chapter-title-input {
  width: 100%;
  max-width: 720px;
  background: none;
  border: none;
  font-family: var(--font-writing);
  font-size: clamp(14px, 4vw, 24px); /* scales down on narrow formats */
  font-weight: 700;
  color: var(--text-primary);
  outline: none;
  padding: 0;
  text-align: center;
  white-space: normal;   /* allow wrapping on narrow pages */
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

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

/* Ribbon meta bar */
.ribbon-meta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
  row-gap: 2px;
}
.ribbon-meta-left, .ribbon-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ribbon-meta-item { font-weight: 500; }
.ribbon-meta-sep { color: var(--border); }
.ribbon-meta-select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.ribbon-meta-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
  transition: all 0.15s;
}
.ribbon-meta-btn:hover { color: var(--accent); background: rgba(232,85,45,0.1); }
.ribbon-meta-label {
  font-size: 10px;
  color: var(--text-muted);
}
.page-size-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
}
.page-size-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.page-size-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Book page canvas */
.page-canvas {
  background: #fff;
  color: #1a1a1a;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12);
  /* Dimensions set by JS applyPageFormat() at 72px/inch */
  padding: 72px 96px; /* fallback before JS runs */
  margin: 0 auto 32px; /* no top margin — ruler sits flush on page top */
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

/* Page break marker line (in-flow, used for scroll navigation) */
.page-break-marker {
  width: 100%;
  border: none;
  border-top: 1px dashed rgba(160,160,160,0.3);
  margin: 8px 0;
  position: relative;
}
.page-break-marker::after {
  content: attr(data-label);
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 9px;
  color: #aaa;
  background: #fff;
  padding: 0 6px;
  font-family: var(--font-ui);
}

/* Page boundary overlay line (absolutely positioned on canvas, full-width) */
.page-boundary-line {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 4;
}
[data-theme="dark"] .page-boundary-line {
  border-top-color: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .page-boundary-line span {
  color: rgba(255,255,255,0.3) !important;
}
/* Page navigation bar */
.page-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 16px;
  width: 100%;
  max-width: 720px;
  user-select: none;
}
.page-nav-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.page-nav-btn:hover { color: var(--accent); border-color: var(--accent); }
.page-nav-btn:disabled { opacity: 0.3; cursor: default; }
.page-nav-btn:disabled:hover { color: var(--text-secondary); border-color: var(--border); }
.page-nav-info {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 100px;
  text-align: center;
}
/* Page break indicator between pages */
.page-break-indicator {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  position: relative;
}
.page-break-indicator::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  border-top: 2px dashed var(--border);
}
.page-break-label {
  background: var(--bg-primary);
  padding: 2px 12px;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 1;
  letter-spacing: 0.5px;
}
.page-canvas::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
}
/* Page sizes — proportional to real print dimensions at ~120px/inch
   US Letter  8.5×11"  → 1020px (capped 900)   margins 1"   = 120px h / 80px v
   US Trade   6×9"     → 720px                  margins 0.75"= 90px  h / 56px v
   Royal      6.14×9.21"→737px (rounded 740)    margins 0.75"= 88px  h / 55px v
   Digest     5.5×8.5" → 660px                  margins 0.625"=75px  h / 50px v
   A5         5.83×8.27"→700px                  margins 0.7" = 84px  h / 52px v  */
/* Page dimensions now set by JS applyPageFormat() — no CSS overrides needed */

[data-theme="dark"] .page-canvas {
  background: #1c1c24;
  color: var(--editor-text);
  box-shadow: 0 2px 30px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.05);
}

.editor {
  flex: 1;
  font-family: var(--font-writing);
  font-size: 16px;
  line-height: 1.85;
  color: inherit;
  outline: none;
  min-height: 120px; /* JS applyPageFormat() overrides this to match the page content area */
}

.editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
  font-style: italic;
}

.editor p { margin-bottom: 14px; }

/* Focus mode */
.focus-mode .workspace-sidebar,
.focus-mode .scene-panel,
.focus-mode .sidebar-footer,
.focus-mode .manuscript-header,
.focus-mode .ribbon,
.focus-mode .manuscript-toolbar-row .manuscript-meta { display: none !important; }
.focus-mode .manuscript-container { padding-top: 10px; }
.focus-mode .page-canvas { box-shadow: none; border-radius: 0; }
.focus-mode .main-content { background: var(--bg-primary); }
.focus-mode .focus-exit-btn { display: flex !important; }

.focus-exit-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  transition: all 0.2s;
}
.focus-exit-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* ============ FIND & REPLACE ============ */
.find-replace-bar {
  width: 100%;
  max-width: 780px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  animation: slideDown 0.15s ease;
}
.find-replace-bar.hidden { display: none; }
.find-replace-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.find-replace-row:last-child { margin-bottom: 0; }
.find-replace-row .input-field { flex: 1; padding: 5px 10px; font-size: 13px; }
.find-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; min-width: 50px; }
.find-highlight { background: rgba(232,85,45,0.35); border-radius: 2px; }
.find-highlight-active { background: rgba(232,85,45,0.7); }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ============ AI AUTOCOMPLETE ============ */
.autocomplete-ghost {
  color: var(--text-muted);
  opacity: 0.45;
  font-style: italic;
  pointer-events: none;
  border-left: 2px solid var(--accent);
  padding-left: 2px;
  animation: ghostFade 0.3s ease;
}
@keyframes ghostFade { from { opacity: 0; } to { opacity: 0.45; } }
[data-theme="light"] .autocomplete-ghost { opacity: 0.4; }

/* ============ SCENE PANEL ============ */
.scene-panel {
  width: 340px;
  min-width: 340px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  transition: width var(--transition), min-width var(--transition);
  overflow-y: auto;
}

.scene-panel.collapsed {
  width: 36px;
  min-width: 36px;
  background: transparent;
  border-left: none;
}

.scene-panel.collapsed .scene-panel-content { display: none; }

.scene-panel-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  transition: all var(--transition);
}

.scene-panel-toggle:hover { color: var(--text-primary); }

/* Collapsed: vertical tab with accent color */
.scene-panel.collapsed .scene-panel-toggle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--accent);
  color: #fff;
  border-radius: 8px 0 0 8px;
  padding: 16px 8px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  gap: 6px;
  height: auto;
  width: 36px;
  justify-content: center;
}
.scene-panel.collapsed .scene-panel-toggle:hover {
  background: #ff7b54;
  color: #fff;
}

.scene-panel.collapsed .scene-panel-toggle i {
  transform: rotate(180deg);
}
.scene-panel.collapsed .scene-toggle-text {
  display: inline;
}

.scene-panel-content {
  padding: 0 16px 16px;
}

.scene-field {
  margin-bottom: 16px;
}

.scene-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.scene-field input,
.scene-field textarea,
.scene-field select {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition);
}

.scene-field input:focus,
.scene-field textarea:focus {
  border-color: var(--accent);
}

.scene-field textarea {
  resize: vertical;
  min-height: 60px;
}

/* ============ CHAPTERS TABLE ============ */
.chapters-table {
  padding: 24px 32px;
}

.chapter-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all var(--transition);
}
.chapter-card:hover { border-color: rgba(232,85,45,0.3); }

.chapter-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background var(--transition);
}
.chapter-card-header:hover { background: var(--bg-tertiary, rgba(255,255,255,0.03)); }

.chapter-card-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft, rgba(232,85,45,0.1));
  border-radius: 6px;
}

.chapter-card-info { flex: 1; min-width: 0; }

.chapter-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.chapter-card-status {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.chapter-card-pov {
  font-size: 11px;
  color: var(--text-secondary);
}

.chapter-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Chapter details (expandable) */
.chapter-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
  border-top: 0 solid var(--border);
}
.chapter-card-details.expanded {
  max-height: 600px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.chapter-detail-summary {
  font-family: var(--font-writing);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: var(--bg-primary);
  border-radius: 8px;
  margin-bottom: 12px;
}
.chapter-detail-summary i {
  color: var(--text-muted);
  margin-right: 6px;
}

.chapter-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chapter-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chapter-detail-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.chapter-detail-label i {
  color: var(--accent);
  width: 14px;
  text-align: center;
  margin-right: 3px;
}
.chapter-detail-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Chapter expand button - orange */
.chapter-expand-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}
.chapter-expand-btn:hover { background: #ff7b54; transform: scale(1.1); }

/* Section labels in detail view */
.chapter-detail-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.chapter-detail-section-label:first-of-type { margin-top: 4px; }

/* Missing field warning */
.chapter-detail-missing .chapter-detail-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-missing-msg {
  font-size: 11px;
  color: var(--warning, #f59e0b);
  font-style: italic;
}
.detail-missing-msg i { margin-right: 3px; }
.detail-na-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.detail-na-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Detail footer */
.chapter-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.chapter-detail-stats {
  font-size: 12px;
  color: var(--text-muted);
}

.status-draft { background: var(--bg-hover); color: var(--text-muted); }
.status-revised { background: rgba(96, 165, 250, 0.15); color: var(--info); }
.status-polished { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.status-final { background: rgba(52, 211, 153, 0.15); color: var(--success); }

/* ============ CHARACTERS ============ */
.characters-container {
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-content: start;
}

.character-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.character-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.character-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.character-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.character-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.character-card-name {
  font-size: 16px;
  font-weight: 600;
}

.character-card-role {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-protagonist { color: var(--accent); }
.role-antagonist { color: var(--danger); }
.role-supporting { color: var(--info); }
.role-minor { color: var(--text-muted); }

.character-card-detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ CHARACTER MODAL ============ */
.modal-lg { max-width: 700px; }

.char-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.char-form .full-width { grid-column: 1 / -1; }

.char-form label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.char-form input,
.char-form textarea,
.char-form select {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
}

.char-form textarea {
  resize: vertical;
  min-height: 80px;
}

.char-form input:focus,
.char-form textarea:focus {
  border-color: var(--accent);
}

.char-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ============ PLOT THREADS ============ */
.plot-container {
  padding: 24px 32px;
}

.plot-thread {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
}

.plot-thread-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.plot-thread-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ SCENES BOARD ============ */
.scenes-board {
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  align-content: start;
}

.scene-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.scene-card-chapter {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.scene-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.scene-card-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.scene-card-meta span {
  display: block;
  margin-bottom: 4px;
}

/* ============ RESEARCH ============ */
.research-container {
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-content: start;
}

.research-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.research-card-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 8px;
}

.research-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.research-card-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ STATS ============ */
.stats-container {
  padding: 24px 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.word-chart {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.word-chart-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.word-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
}

.word-chart-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.word-chart-bar:hover { opacity: 1; }

/* ── Analytics v2: Word Frequency + Sentence Stats ─────────── */
.stats-section { margin-top: 28px; }
.stats-section-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.stats-section-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }

/* Sentence distribution bar */
.sent-dist-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; margin-bottom: 8px; }
.sent-dist-seg { transition: width 0.6s ease; height: 100%; border-radius: 2px; }
.seg-short  { background: #3b82f6; }
.seg-medium { background: #22c55e; }
.seg-long   { background: #f97316; }
.seg-vlong  { background: #ef4444; }
.sent-dist-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.sdl-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.sdl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Word cloud */
.word-cloud { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 16px; background: var(--surface-2, var(--surface)); border-radius: 10px; line-height: 1.8; }
.wc-word { color: var(--accent); font-weight: 600; cursor: default; transition: opacity 0.15s; font-family: var(--font-writing, serif); }
.wc-word:hover { opacity: 1 !important; text-decoration: underline; }

/* Adverb tags */
.adverb-list { display: flex; flex-wrap: wrap; gap: 8px; }
.adverb-tag { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,0.06); color: var(--text); }
.adverb-tag.adverb-heavy { background: rgba(239,68,68,0.12); color: #dc2626; }
.adverb-tag strong { margin-left: 4px; }

/* ============ ECHO AI POPUP ============ */
.echo-popup {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: var(--echo-width);
  max-height: 500px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: all 0.3s ease;
}

.echo-popup.hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}

.echo-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.echo-avatar { font-size: 24px; }
.echo-name { font-weight: 600; font-size: 14px; }
.echo-subtitle { font-size: 12px; color: var(--text-muted); flex: 1; }
.echo-close { margin-left: auto; }

.echo-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-height: 220px;
}

.echo-message {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.echo-bot {
  background: var(--bg-tertiary);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  color: var(--text-secondary);
}

.echo-user {
  background: var(--accent-soft);
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  color: var(--text-primary);
  margin-left: 40px;
}

/* Echo loading dots */
.echo-dots { display: inline-flex; gap: 4px; align-items: center; }
.echo-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: echoDot 1.2s infinite;
}
.echo-dots span:nth-child(2) { animation-delay: 0.2s; }
.echo-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes echoDot { 0%,80%,100% { opacity:0.2; transform:scale(0.8); } 40% { opacity:1; transform:scale(1); } }

/* Echo transform actions */
.echo-transform-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Echo error */
.echo-message.echo-error { background: rgba(239,68,68,0.1); border-left: 3px solid #ef4444; }
.echo-message.echo-error .echo-msg-body { color: #ef4444; }

.echo-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}

.echo-action {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all var(--transition);
  white-space: nowrap;
}

.echo-action:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.echo-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.echo-input-area textarea {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  resize: none;
}

.echo-input-area textarea:focus {
  border-color: var(--accent);
}

.echo-send {
  padding: 8px 12px;
  align-self: flex-end;
}

/* ============ ECHO FAB ============ */
.echo-fab {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--accent, #E8552D);
  border: none;
  border-radius: 18px;
  padding: 12px 16px 10px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(232,85,45,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s;
  font-family: inherit;
}

.echo-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232,85,45,0.5), 0 4px 12px rgba(0,0,0,0.3);
}

.echo-fab-icon { font-size: 18px; }
.echo-fab-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* Echo FAB unread badge */
.echo-fab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.echo-fab-badge.hidden { display: none; }

/* Echo panel tabs */
.echo-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}
.echo-tab {
  flex: 1;
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}
.echo-tab:hover { color: var(--text-primary); background: var(--hover); }
.echo-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Echo tab panes */
.echo-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.echo-pane.hidden { display: none; }

/* Inbox badge on tab */
.echo-inbox-badge {
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  margin-left: 2px;
}
.echo-inbox-badge.hidden { display: none; }

/* Bug form elements */
.echo-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.echo-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.echo-select:focus { border-color: var(--accent); }
.echo-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.echo-textarea:focus { border-color: var(--accent); }
.echo-submit-btn {
  padding: 10px 16px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.echo-submit-btn:hover { opacity: .85; }
.echo-submit-btn:disabled { opacity: .5; cursor: wait; }

/* Severity radio buttons */
.echo-sev-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.echo-sev-opt:hover { border-color: var(--accent); }
.sev-low { color: #6ee7b7; }
.sev-med { color: #fbbf24; }
.sev-high { color: #f97316; }
.sev-crit { color: #ef4444; font-weight: 700; }

/* Inbox message rows */
.echo-inbox-msg {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.echo-inbox-msg:hover { background: var(--hover); }
.echo-inbox-msg.unread .echo-inbox-msg-subject { font-weight: 700; color: var(--text-primary); }
.echo-inbox-msg-subject { font-size: 13px; color: var(--text-secondary); flex: 1; }
.echo-inbox-msg-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.echo-inbox-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; }

/* ============ MODALS ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

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

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

/* Large modal — character forms, version history, etc. */
.modal.modal-lg {
  max-width: 640px;
  max-height: 90vh;
  width: 95%;
}
.modal.modal-lg .modal-body {
  max-height: calc(90vh - 60px);
  overflow-y: auto;
  padding: 16px 20px;
}

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

.modal-header h3 { font-size: 16px; font-weight: 600; }

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ============ SELECTION ============ */
::selection {
  background: rgba(232, 85, 45, 0.35);
  color: #ffffff;
}

/* ============ BLOCK BUSTER ============ */

.editor-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px 0;
}

.btn-block-buster {
  background: linear-gradient(135deg, var(--accent), #ff7b54);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-block-buster:hover {
  background: linear-gradient(135deg, #ff7b54, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 85, 45, 0.4);
}

.btn-block-buster:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.block-buster-panel {
  background: var(--bg-secondary);
  border: 1px solid rgba(232,85,45,0.27);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  animation: bbSlideIn 0.3s ease;
}

.block-buster-panel.hidden {
  display: none;
}

@keyframes bbSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bb-label {
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}

.bb-content {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-writing);
  font-size: 14px;
  line-height: 1.8;
  color: #c8c8d0;
  margin-bottom: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.bb-content p {
  margin-bottom: 12px;
}

.bb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.bb-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

.bb-error {
  padding: 12px;
  color: #ff6b6b;
  font-size: 13px;
}

/* ============ STORY WIZARD ============ */

.btn-inspiration {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-inspiration:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 85, 45, 0.3);
}

.btn-inspiration-sm {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(232,85,45,0.27);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-inspiration-sm:hover {
  background: rgba(232,85,45,0.13);
  border-color: var(--accent);
}

.empty-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

.empty-demo {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-demo-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
  width: 280px;
}

.empty-demo-sep::before,
.empty-demo-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-demo {
  background: rgba(232, 85, 45, 0.07);
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-demo:hover {
  border-style: solid;
  background: rgba(232, 85, 45, 0.14);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 85, 45, 0.2);
}

.btn-demo:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.empty-demo-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

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

.wizard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.wizard-overlay.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wizard-container {
  background: var(--bg-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  overflow: hidden; /* clip border-radius */
}

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

.wizard-header h2 {
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wizard-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* allow flex shrink */
}

/* Progress bar pinned at bottom of modal, never scrolls away */
.wizard-progress {
  height: 4px;
  background: var(--border);
  flex-shrink: 0;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff8a65);
  transition: width 0.4s ease;
}

/* Suppress browser :invalid red borders inside the wizard */
.wizard-body input:invalid,
.wizard-body textarea:invalid {
  box-shadow: none;
  outline: none;
  border-color: var(--border) !important;
}
.wizard-body input:focus,
.wizard-body textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 85, 45, 0.18);
}

.wizard-question h3 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 6px;
}

.wizard-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.wizard-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.wizard-option {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-option:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary, #1e2030);
  transform: translateY(-1px);
}

.wizard-option.selected {
  border-color: var(--accent);
  background: rgba(232,85,45,0.15);
  box-shadow: 0 0 12px rgba(232, 85, 45, 0.25);
}

.wizard-option-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.wizard-option.selected .wizard-option-label {
  color: #fff;
}

.wizard-option-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.wizard-option.selected .wizard-option-desc {
  color: var(--text-secondary);
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-step-count {
  color: var(--text-secondary);
  font-size: 13px;
}

.wizard-generating {
  text-align: center;
  padding: 60px 20px;
}

.wizard-generating h3 {
  color: #fff;
  margin-top: 20px;
}

.wizard-generating p {
  color: var(--text-muted);
  margin-top: 8px;
}

.wizard-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.wizard-result {
  animation: fadeIn 0.4s ease;
}

.wizard-plot-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(232,85,45,0.2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.wizard-plot-card h3 {
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 18px;
}

.wizard-plot-text {
  font-family: var(--font-writing);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
}

.wizard-plot-text p {
  margin-bottom: 12px;
}

.wizard-feedback-section {
  margin-bottom: 20px;
}

.wizard-feedback-section h4 {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.wizard-feedback-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: #e0e0e0;
  font-family: var(--font-ui);
  font-size: 13px;
  resize: vertical;
}

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

.wizard-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Wizard Setup Panel (post-plot choice cards) ── */
.ws-choice {
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
  user-select: none;
}
.ws-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.ws-choice-active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.ws-choice-icon { font-size: 26px; margin-bottom: 8px; }
.ws-choice-label { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.ws-choice-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.ws-choice-active .ws-choice-label { color: var(--accent); }

/* Handoff banner slide-up animation */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wizard-freetext {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s;
}

.wizard-freetext:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(232, 85, 45, 0.1);
}

.wizard-freetext::placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

/* ============ EDITOR TOOLBAR — TOOLS ============ */

/* ============ RIBBON TOOLBAR ============ */
.ribbon {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  user-select: none;
  width: 100%;
  flex-shrink: 0;
  overflow: visible;
}
/* AI ribbon row — wrapping, all tools visible, never clips */
.ribbon-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3px 8px;
  gap: 0;
  flex-wrap: wrap;
  overflow: visible;
  min-width: 0;
  width: 100%;
}
.ribbon-row:first-child { border-bottom: 1px solid var(--border); }
.ribbon-row-ai { padding: 3px 6px; }
/* Format row — collapsible, hidden by default */
/* Format row — always visible */
.ribbon-row-fmt {
  flex-wrap: wrap;
  overflow: visible;
  padding: 3px 6px;
  border-top: 1px solid var(--border);
}
.ribbon-row-fmt.expanded { /* kept for JS compatibility */ }
.ribbon-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  flex-shrink: 0;
}
.ribbon-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* AI tool buttons (row 2) */
.ribbon-ai-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-ui);
  white-space: nowrap;
  transition: all 0.15s;
}
.ribbon-ai-btn i { font-size: 12px; }
.ribbon-ai-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--text-primary);
}
.ribbon-ai-btn:active { background: rgba(255,255,255,0.1); }
.marketing-locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.5);
}
.ribbon-tool-btn {
  background: none !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
}
.ribbon-tool-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.ribbon-ai-featured {
  background: linear-gradient(135deg, var(--accent), #ff7b54);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 5px;
}
.ribbon-ai-featured:hover {
  background: linear-gradient(135deg, #ff7b54, var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,85,45,0.3);
}
.ribbon-ai-featured.ai-unlocked .ai-badge {
  background: rgba(76, 175, 125, 0.22);
  color: #5dbd8a;
  border-color: rgba(76, 175, 125, 0.5);
}

/* Ribbon sections with labels */
.ribbon-section {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  padding: 2px 6px;
  flex-shrink: 0;
  align-items: center;
}
.ribbon-section:last-child { border-right: none; }
/* Section labels — shown only in format row, hidden in AI rows */
.ribbon-section-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  width: 100%;
  opacity: 0.7;
}
/* Hide section labels in the AI rows (first ribbon-row) */
/* AI-row sections: vertical group with label on top, buttons below */
.ribbon-row-ai .ribbon-section {
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  padding: 3px 10px 4px 6px;
  gap: 3px;
  border-right: 1px solid var(--border);
}
.ribbon-row-ai .ribbon-section:last-child { border-right: none; }

/* Show group labels in AI rows — accent-colored category headers */
.ribbon-row-ai .ribbon-section-label {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent, #E8552D);
  opacity: 0.85;
  padding-bottom: 3px;
  margin-bottom: 1px;
  border-bottom: 1px solid rgba(232,85,45,0.25);
  width: 100%;
  white-space: nowrap;
  text-align: left;
}

/* Buttons inside each group — always wrap */
.ribbon-section-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  flex-wrap: wrap;
}

/* Format-row toggle button */
.ribbon-fmt-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 7px;
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}
.ribbon-fmt-toggle { display: none !important; } /* format row is always visible */

/* ============ CUSTOM RIBBON TOOLTIPS ============ */
.sw-tooltip {
  position: fixed;
  z-index: 99999;
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text, #e0e0e0);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 220px;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sw-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ NOTES SAVE BUTTON ============ */
.scene-notes-save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.scene-notes-save-row .notes-save-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.scene-notes-save-row .notes-save-btn:hover {
  background: var(--accent);
  color: #fff;
}
.scene-notes-save-row .notes-saved-msg {
  font-size: 11px;
  color: #4caf50;
  opacity: 0;
  transition: opacity 0.2s;
}
.scene-notes-save-row .notes-saved-msg.visible { opacity: 1; }

/* Responsive: sections stack in groups when ribbon wraps */
@media (max-width: 900px) {
  .ribbon-row { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .ribbon-section { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .ribbon-section:last-child { border-bottom: none; }
  .ribbon-row { row-gap: 0; }
}

/* ============ FORMAT RIBBON CONTROLS ============ */
.ribbon-group-row {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.ribbon-select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  height: 28px;
}
.ribbon-select:focus { border-color: var(--accent); outline: none; }
.ribbon-select-wide { min-width: 130px; }
.ribbon-fmt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.12s;
  font-family: var(--font-ui);
}
.ribbon-fmt-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--text-primary);
}
.ribbon-fmt-btn:active {
  background: rgba(255,255,255,0.12);
}
.ribbon-fmt-btn strong { font-size: 12px; }
.ribbon-fmt-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}
.ribbon-color-pick {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  padding: 2px;
}
.ribbon-color-pick::-webkit-color-swatch-wrapper { padding: 1px; }
.ribbon-color-pick::-webkit-color-swatch { border: none; border-radius: 2px; }

/* Keep .btn-tool for panels that still use it */
.btn-tool {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-tool:hover {
  color: var(--text-primary);
  border-color: rgba(232,85,45,0.27);
  background: rgba(232,85,45,0.07);
}

/* ============ CHARACTER GENERATOR ============ */

.char-gen-roster {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.char-gen-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}

.char-gen-role-icon {
  font-size: 24px;
}

.char-gen-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.char-gen-card-info strong {
  color: #e0e0e0;
  font-size: 15px;
}

.char-gen-role {
  color: var(--accent);
  font-size: 12px;
  text-transform: capitalize;
  font-weight: 500;
}

.char-gen-desc {
  color: var(--text-muted);
  font-size: 12px;
}

.char-gen-current {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(232,85,45,0.2);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
}

.char-gen-current strong {
  color: #e0e0e0;
}

.char-gen-transition {
  text-align: center;
  padding: 30px;
}

.char-gen-transition h3 {
  color: #4caf50;
  margin-bottom: 16px;
}

.char-gen-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.char-gen-summary-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.char-gen-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.char-gen-summary-header strong {
  color: #e0e0e0;
}

.char-gen-summary-text {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ============ CHAPTER PLOTTER ============ */

.chapter-plan-list {
  max-height: 450px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-plan-item {
  display: flex;
  gap: 14px;
  background: var(--bg-secondary);
  border: 1px solid #ffffff08;
  border-radius: 8px;
  padding: 12px;
}

.chapter-plan-num {
  background: var(--accent);
  color: #fff;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.chapter-plan-content strong {
  color: #e0e0e0;
  font-size: 13px;
}

.chapter-plan-content p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

.chapter-plan-events {
  display: inline-block;
  margin-top: 6px;
  color: rgba(232,85,45,0.6);
  font-size: 11px;
}

/* ============ FIRST LINE GENERATOR ============ */

.first-lines-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
}

.first-line-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-secondary);
  border: 1px solid #ffffff08;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.first-line-option:hover {
  border-color: var(--accent);
  background: rgba(232,85,45,0.07);
}

.first-line-num {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  min-width: 20px;
}

.first-line-text {
  color: #c8c8d0;
  font-family: var(--font-writing);
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
}

/* ============ CONSISTENCY CHECKER ============ */

.consistency-list {
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consistency-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-secondary);
}

.consistency-item.consistency-high { border-left: 3px solid #ff4444; }
.consistency-item.consistency-medium { border-left: 3px solid #ffaa00; }
.consistency-item.consistency-low { border-left: 3px solid #4488ff; }

.consistency-icon { font-size: 16px; }

.consistency-detail strong {
  color: #e0e0e0;
  font-size: 13px;
}

.consistency-detail p {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.consistency-loc {
  color: var(--text-secondary);
  font-size: 11px;
}

/* ============ NAME GENERATOR ============ */

.name-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid #ffffff08;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.name-result-item:hover {
  border-color: var(--accent);
}

.name-result-item strong {
  color: #e0e0e0;
}

.name-meaning {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* ============ DAILY GOALS ============ */

.daily-goals {
  text-align: center;
}

.daily-goals-today {
  margin-bottom: 20px;
}

.daily-goals-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.daily-goals-circle svg {
  width: 100%;
  height: 100%;
}

.daily-goals-number {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 700;
  color: #e0e0e0;
}

.daily-goals-target {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--text-secondary);
}

.daily-goals-label {
  color: var(--text-muted);
  margin-top: 8px;
}

.daily-goals-streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.streak-fire { font-size: 24px; }
.streak-count { font-size: 18px; font-weight: 600; color: #e0e0e0; }

.goal-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 280px;
  margin: 0 auto;
}

.goal-day {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ============ BLURB / QUERY PREVIEW ============ */

.blurb-preview {
  background: var(--bg-secondary);
  border: 1px solid rgba(232,85,45,0.2);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 12px;
}

.blurb-text {
  font-family: var(--font-writing);
  font-size: 14px;
  line-height: 1.8;
  color: #c8c8d0;
}

/* ============ STYLE ANALYZER ============ */

.style-analysis {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #c8c8d0;
}

.style-analysis h4 {
  color: var(--accent);
  margin-bottom: 12px;
}

/* ============ WRITER'S JOURNEY ============ */

.journey-container {
  max-width: 700px;
}

.journey-path {
  position: relative;
  padding-left: 60px;
}

.journey-step {
  position: relative;
  margin-bottom: 36px;
}

.journey-step-icon {
  position: absolute;
  left: -60px;
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
  transition: all 0.3s;
}

.journey-step:hover .journey-step-icon {
  border-color: var(--accent);
  transform: scale(1.1);
}

.journey-step-line {
  position: absolute;
  left: -38px;
  top: 44px;
  width: 2px;
  height: calc(100% + 36px - 44px);
  background: var(--border);
  z-index: 1;
}

.journey-step:last-child .journey-step-line {
  display: none;
}

.journey-step-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.3s;
}

.journey-step:hover .journey-step-content {
  border-color: rgba(232,85,45,0.27);
  transform: translateX(4px);
}

.journey-step-content h3 {
  font-size: 17px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.journey-step-content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.journey-step-content strong {
  color: var(--accent);
}

.btn-journey {
  margin-top: 14px;
}

.journey-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.journey-cta {
  text-align: center;
  margin-top: 48px;
  padding: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.journey-cta h3 {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.journey-cta p {
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: 15px;
}

.journey-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ============ EXPORT ENGINE ============ */

.export-intro {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 14px;
}

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

.export-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.export-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.export-card-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.export-card h4 {
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 6px;
}

.export-card p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.export-card-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-extras h4 {
  font-size: 13px;
}

/* ============ THEME TOGGLE ============ */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-ui);
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.theme-toggle i {
  font-size: 14px;
}

.theme-icon-light { color: #fbbf24; }
.theme-icon-dark { color: #60a5fa; }

.theme-toggle-label {
  flex: 1;
  text-align: left;
}

/* Light theme specific overrides */
[data-theme="light"] .wizard-overlay {
  background: var(--wizard-overlay-bg);
}

[data-theme="light"] .wizard-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

[data-theme="light"] .wizard-option {
  background: var(--bg-primary);
  border-color: var(--border);
}

[data-theme="light"] .wizard-option:hover {
  background: var(--bg-hover);
}

[data-theme="light"] .modal-overlay {
  background: var(--modal-bg);
}

[data-theme="light"] .modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

[data-theme="light"] .editor {
  background: var(--editor-bg);
  color: var(--editor-text);
}

[data-theme="light"] .sidebar {
  background: var(--bg-secondary);
  border-right-color: var(--border);
}

[data-theme="light"] .project-card {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="light"] .echo-popup {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border);
}

[data-theme="light"] .bb-content,
[data-theme="light"] .block-buster-panel {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="light"] .btn-tool {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .ribbon-btn:hover,
[data-theme="light"] .ribbon-fmt-btn:hover,
[data-theme="light"] .ribbon-ai-btn:hover {
  background: rgba(0,0,0,0.05);
}
[data-theme="light"] .ribbon-btn:active,
[data-theme="light"] .ribbon-fmt-btn:active,
[data-theme="light"] .ribbon-ai-btn:active {
  background: rgba(0,0,0,0.1);
}

[data-theme="light"] .btn-secondary {
  background: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-primary);
}

/* ============ JOURNEY SUB-NAV ============ */

.home-nav-sub {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.home-nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.home-nav-subitem:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.home-nav-subitem.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.home-nav-subitem.active .nav-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============ JOURNEY PAGES ============ */

.journey-page {
  max-width: 900px;
}

.journey-page-intro {
  margin-bottom: 20px;
}

.journey-page-intro p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 14px;
}

.journey-page-intro strong {
  color: var(--accent);
}

.journey-page-empty {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
}

.journey-project-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.journey-project-selector label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.journey-project-selector select {
  flex: 1;
  max-width: 300px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
}

.journey-section-title {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.journey-project-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journey-project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.journey-project-card:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}

.journey-project-card strong {
  color: var(--text-primary);
  font-size: 14px;
}

.journey-project-card span {
  color: var(--text-muted);
  font-size: 12px;
}

/* ============ CHARACTER COMPARISON VIEW ============ */

.char-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.char-comparison-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition);
}

.char-comparison-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.char-comparison-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 6px;
}

.char-comparison-name {
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.char-field {
  margin-bottom: 12px;
}

.char-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.char-field p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ OUTLINE STATUS ============ */

.outline-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.outline-status {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.outline-status-draft { background: var(--bg-tertiary); color: var(--text-muted); }
.outline-status-revised { background: rgba(59,130,246,0.15); color: var(--info); }
.outline-status-polished { background: rgba(52,211,153,0.15); color: var(--success); }
.outline-status-final { background: var(--accent-soft); color: var(--accent); }

/* ============ QUICK NOTES ============ */
/* ============ REPORT & WORD EXPLORER ============ */
.report-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.report-content h4 { color: var(--accent); margin: 16px 0 8px; }
.report-content strong { color: var(--text-primary); }
.stat-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.word-chip {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.word-chip:hover { border-color: var(--accent); color: var(--accent); }
.word-section { margin-bottom: 12px; }
.word-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 6px; }
.word-explorer-result { padding: 8px 0; }

/* ============ INPUT FIELDS ============ */
.input-field {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-ui);
  transition: border-color 0.2s;
}
.input-field:focus { border-color: var(--accent); outline: none; }
.input-field::placeholder { color: var(--text-muted); }

/* ============ HOME NAV SECTIONS ============ */
.home-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 16px;
  opacity: 0.5;
}
.home-nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 4px 20px 2px;
  text-transform: uppercase;
}

.quick-notes-container { padding: 0; }
.quick-notes-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.quick-notes-empty h3 { color: var(--text-primary); margin-bottom: 8px; }
.quick-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.quick-note {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s;
}
.quick-note:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.quick-note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.quick-note-date { color: var(--text-muted); }
.quick-note-project {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.quick-note-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.quick-note:hover .quick-note-actions { opacity: 1; }
.quick-note-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.quick-note-actions button:hover { color: var(--accent); background: var(--bg-tertiary); }
.quick-note textarea {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-writing);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
  padding: 0;
  outline: none;
}
.quick-note textarea::placeholder { color: var(--text-muted); opacity: 0.5; }

/* Character Form Sections */
.char-form-sections { max-height: 75vh; overflow-y: auto; padding-right: 8px; }
.char-section {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 0;
}
.char-three-cols .char-section { margin-bottom: 0; }
.char-section legend {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent, #E8552D);
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.char-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.char-form-grid label { margin-bottom: 4px; display: block; font-size: 13px; color: var(--text-muted); }
.char-form-grid input, .char-form-grid textarea, .char-form-grid select { margin-top: 2px; }
.char-section + .char-section { margin-top: 20px; }
.char-form-grid .full-width { grid-column: 1 / -1; }
/* Portrait upload area in character form */
.char-portrait-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  flex-shrink: 0;
}
.char-portrait-preview {
  width: 110px;
  height: 140px;
  border-radius: 8px;
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-tertiary, #1a1a2e);
  color: var(--text-muted);
  font-size: 11px;
  transition: border-color 0.2s;
}
.char-portrait-preview:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.char-portrait-preview i { font-size: 24px; }
.char-portrait-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-form-ai-bar {
  display: none;
}

/* Character form header */
.char-header-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.char-header-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.char-header-name-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.char-header-name-row > div { min-width: 0; }
.char-name-input {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
}
.char-role-select {
  font-size: 13px !important;
  padding: 8px 10px !important;
}
.char-header-ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============ CHARACTER DETAIL FULL PAGE ============ */
.char-detail-page {
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.char-detail-page {
  font-family: var(--font-ui);
  font-size: 13px;
}
.char-detail-page label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.char-detail-page input,
.char-detail-page select,
.char-detail-page textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.char-detail-page input::placeholder,
.char-detail-page textarea::placeholder {
  font-style: italic;
  opacity: 0.45;
}
.char-detail-page input:focus,
.char-detail-page select:focus,
.char-detail-page textarea:focus {
  border-color: var(--accent);
  color: var(--text-primary);
  outline: none;
}
.char-detail-page .char-name-input {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.char-detail-page .char-section legend {
  font-family: var(--font-ui);
  font-size: 13px;
}
.char-essence-goals-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.char-essence-goals-row > .char-section {
  flex: 1;
  min-width: 0;
}
.char-detail-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.char-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.char-detail-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.char-detail-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.char-detail-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

/* Profile header */
.char-profile-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.char-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.char-portrait-lg {
  width: 140px !important;
  height: 180px !important;
}

/* Sidebar sections */
.char-sidebar-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.char-sidebar-section h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.char-sidebar-section {
  font-family: var(--font-ui);
  font-size: 12px;
}
.char-sidebar-empty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.char-sidebar-loading {
  color: var(--text-muted);
  font-size: 12px;
}
.char-appearance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}
.char-appearance-item:hover { background: var(--bg-hover); }
.char-appearance-chapter { font-weight: 500; }
.char-appearance-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 2px 8px;
  border-radius: 10px;
}
.char-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.char-stat {
  text-align: center;
  padding: 8px;
  background: var(--bg-primary);
  border-radius: 6px;
}
.char-stat-num {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.char-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.char-dialogue-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.char-dialogue-item:last-child { border-bottom: none; }
.char-dialogue-quote {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.4;
}
.char-dialogue-source {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Stacked form fields */
.char-form-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Inline rows */
.char-row-2 { display: flex; gap: 8px; }
.char-row-2 > div { flex: 1; min-width: 0; }
.char-row-3 { display: flex; gap: 8px; }
.char-row-3 > div { flex: 1; min-width: 0; }
/* Legacy compat */
.char-form-row-2 { display: flex; gap: 8px; }
.char-form-row-2 > div { flex: 1; min-width: 0; }
.char-form-row-3 { display: flex; gap: 8px; }
.char-form-row-3 > div { flex: 1; min-width: 0; }
.btn-accent {
  background: var(--accent, #E8552D);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-accent:hover { opacity: 0.9; }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }
.char-ai-status { font-size: 13px; font-weight: 500; }

/* Recycle Bin */
.trash-list { display: flex; flex-direction: column; gap: 8px; }
.trash-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.trash-item:hover { border-color: var(--accent); }
.trash-item-icon { font-size: 18px; color: var(--text-muted); width: 28px; text-align: center; }
.trash-item-info { flex: 1; min-width: 0; }
.trash-item-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.trash-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.trash-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* View Toggle */
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle-btn {
  padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; border: none; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; transition: all 0.15s;
}
.view-toggle-btn.active { background: var(--accent); color: white; }
.view-toggle-btn:hover:not(.active) { background: var(--bg-tertiary); }

/* Scene Cards Inline */
.scene-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.scene-card-inline {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: all 0.15s;
}
.scene-card-inline:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.scene-card-num { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.scene-card-inline .scene-card-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.scene-card-detail { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.scene-card-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* World Bible */
.world-bible-layout { display: flex; gap: 16px; height: calc(100vh - 180px); }
.world-types-sidebar { width: 192px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.world-type-group-label { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 3px; opacity: 0.6; }
.world-type-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); transition: all 0.15s;
}
.world-type-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.world-type-item.active { background: var(--bg-tertiary); color: var(--accent); font-weight: 600; }
/* World cross-references */
.world-crossrefs { display: flex; flex-wrap: wrap; gap: 6px; }
.world-crossref-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); cursor: pointer; color: var(--text-secondary); transition: all 0.15s; }
.world-crossref-tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.world-entries-grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; align-content: start; overflow-y: auto; padding-right: 8px;
}
.world-entry-card {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: all 0.15s; overflow: hidden;
}
.world-entry-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.world-entry-type-badge {
  padding: 8px 12px; color: white; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.world-entry-card-body { padding: 12px 14px; }
.world-entry-card-body h4 { margin: 0 0 4px; font-size: 15px; }
.world-entry-card-body p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.world-entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.world-tag {
  background: var(--bg-tertiary); border-radius: 4px; padding: 2px 8px;
  font-size: 11px; color: var(--text-muted);
}

/* Version History */
.version-history { max-height: 65vh; overflow-y: auto; }
.snapshot-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.snapshot-item:last-child { border-bottom: none; }
.snapshot-name { font-weight: 600; font-size: 14px; }
.snapshot-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.snapshot-actions { display: flex; gap: 6px; }
.diff-same { padding: 2px 8px; }
.diff-added { padding: 2px 8px; background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.diff-removed { padding: 2px 8px; background: rgba(244, 67, 54, 0.15); color: #F44336; text-decoration: line-through; }

/* Writing Streak */
.streak-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: #FF9800;
}

/* Relationship Map */
.relationship-map { width: 100%; overflow: auto; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border); }
.relationship-map canvas { display: block; margin: 0 auto; }

/* Corkboard */
/* ── Plot Grid (Dabble-beater) ──────────────────────────────── */
.plot-grid-toolbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px; }
.plot-grid-legend  { display:flex; flex-wrap:wrap; gap:10px; }
.pg-legend-item    { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted); }
.pg-dot            { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.plot-grid-wrap    { overflow:auto; max-height:calc(100vh - 260px); padding:0 0 24px; }
.plot-grid-table   { border-collapse:collapse; min-width:100%; font-size:13px; }
.plot-grid-table th, .plot-grid-table td { border:1px solid var(--border); }
.pg-corner         { width:180px; min-width:160px; background:var(--surface); position:sticky; left:0; z-index:3; top:0; }
.pg-thread-header  { min-width:120px; max-width:160px; padding:8px 10px; background:var(--surface); text-align:center; position:sticky; top:0; z-index:2; }
.pg-thread-title   { display:flex; flex-direction:column; align-items:center; gap:3px; }
.pg-thread-dot     { width:12px; height:12px; border-radius:50%; }
.pg-thread-name    { font-size:12px; font-weight:600; color:var(--text); text-align:center; line-height:1.3; }
.pg-thread-status  { font-size:9px; text-transform:uppercase; font-weight:700; padding:1px 5px; border-radius:8px; }
.pg-status-active    { background:rgba(34,197,94,0.15); color:#16a34a; }
.pg-status-resolved  { background:rgba(59,130,246,0.15); color:#1d4ed8; }
.pg-status-abandoned { background:rgba(156,163,175,0.15); color:var(--text-muted); }
.pg-thread-coverage  { font-size:10px; color:var(--text-muted); margin-top:3px; }
.pg-chapter-header   { padding:8px 12px; background:var(--surface); position:sticky; left:0; z-index:1; cursor:pointer; min-width:160px; }
.pg-chapter-header:hover { background:var(--hover); }
.pg-ch-num   { font-size:10px; font-weight:700; color:var(--text-muted); margin-right:6px; }
.pg-ch-title { font-weight:600; color:var(--text); font-size:13px; }
.pg-ch-words { font-size:10px; color:var(--text-muted); margin-left:6px; }
.pg-row-done .pg-chapter-header { background:rgba(34,197,94,0.06); }
.pg-cell { width:110px; min-width:90px; height:52px; cursor:pointer; transition:background 0.12s; position:relative; vertical-align:top; }
.pg-cell-empty:hover { background:var(--hover) !important; }
.pg-cell-empty:hover::after { content:'+'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; color:var(--text-muted); opacity:0.5; pointer-events:none; }
.pg-cell-active { }
.pg-cell-inner { padding:6px 8px; height:100%; display:flex; align-items:center; justify-content:center; }
.pg-cell-check { font-size:18px; font-weight:700; }
.pg-cell-note  { font-size:10px; line-height:1.3; color:var(--text); text-align:center; }
.plot-grid-hint    { text-align:center; font-size:11px; color:var(--text-muted); padding:8px; margin:0; }
.plot-grid-empty   { text-align:center; padding:60px; }
.plot-gap-banner   { margin:12px 16px; padding:12px 16px; border-radius:8px; background:rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.3); font-size:13px; }
.plot-gap-banner.plot-gap-ok    { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.3); color:#16a34a; }
.plot-gap-banner.plot-gap-error { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:#dc2626; }
.plot-gap-item  { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; }
.plot-gap-dot   { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.plot-gap-commentary { margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.1); font-size:12px; color:var(--text-muted); font-style:italic; line-height:1.5; }

/* ── Corkboard v2 ───────────────────────────────────────────── */
.corkboard-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; border-radius: 8px 8px 0 0;
}
.corkboard-toolbar select, .corkboard-toolbar input[type="text"] {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 12px;
}
.corkboard-toolbar input[type="text"] { width: 160px; }
.cork-label-filter { display: flex; align-items: center; gap: 5px; }
.cork-label-dot {
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.cork-label-dot:hover { transform: scale(1.2); }
.cork-label-dot.active { border-color: var(--text) !important; transform: scale(1.15); }
.cork-label-dot.none { background: #ccc; }
.cork-label-dot[data-label="red"]    { background: #ef4444; }
.cork-label-dot[data-label="orange"] { background: #f97316; }
.cork-label-dot[data-label="yellow"] { background: #eab308; }
.cork-label-dot[data-label="green"]  { background: #22c55e; }
.cork-label-dot[data-label="blue"]   { background: #3b82f6; }
.cork-label-dot[data-label="purple"] { background: #a855f7; }
.cork-size-btns { display: flex; gap: 2px; margin-left: auto; }
.cork-size-btn {
  padding: 3px 8px; font-size: 11px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface); color: var(--text-muted);
  cursor: pointer;
}
.cork-size-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cork-pacing-legend {
  display: flex; gap: 14px; padding: 6px 14px; font-size: 11px;
  background: rgba(0,0,0,0.04); border-bottom: 1px solid var(--border);
  align-items: center; flex-wrap: wrap;
}
.cork-pacing-legend-item { display: flex; align-items: center; gap: 5px; color: var(--text-muted); }
.cork-pacing-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.corkboard {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px; padding: 28px;
  background: linear-gradient(135deg, #8B6914 0%, #A0792C 50%, #8B6914 100%);
  border-radius: 0 0 8px 8px; min-height: 400px;
}
.corkboard.size-small { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 20px; }
.corkboard.size-large { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 28px; }
.cork-card {
  background: #FFFACD; color: #333; border-radius: 2px; padding: 14px 14px 10px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.3); cursor: pointer; position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: var(--font-writing);
  border-left: 4px solid transparent;
  min-height: 155px; display: flex; flex-direction: column;
  user-select: none;
}
.cork-card:nth-child(odd)  { transform: rotate(-0.8deg); }
.cork-card:nth-child(even) { transform: rotate(0.8deg); }
.cork-card:nth-child(3n)   { transform: rotate(-0.4deg); }
.cork-card:hover { transform: rotate(0deg) scale(1.03); box-shadow: 4px 6px 18px rgba(0,0,0,0.4); z-index: 2; }
/* Label colors */
.cork-card[data-label="red"]    { border-left-color: #ef4444; }
.cork-card[data-label="orange"] { border-left-color: #f97316; }
.cork-card[data-label="yellow"] { border-left-color: #eab308; }
.cork-card[data-label="green"]  { border-left-color: #22c55e; }
.cork-card[data-label="blue"]   { border-left-color: #3b82f6; }
.cork-card[data-label="purple"] { border-left-color: #a855f7; }
/* Pacing overlays */
.cork-card.pacing-low    { box-shadow: 2px 3px 8px rgba(59,130,246,0.45); }
.cork-card.pacing-mid    { box-shadow: 2px 3px 8px rgba(234,179,8,0.55); }
.cork-card.pacing-high   { box-shadow: 2px 3px 8px rgba(249,115,22,0.6); }
.cork-card.pacing-climax { box-shadow: 2px 3px 8px rgba(239,68,68,0.65); }
.cork-card.pacing-low::after,.cork-card.pacing-mid::after,.cork-card.pacing-high::after,.cork-card.pacing-climax::after {
  content: ''; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
}
.cork-card.pacing-low::after    { background: rgba(59,130,246,0.10); }
.cork-card.pacing-mid::after    { background: rgba(234,179,8,0.13); }
.cork-card.pacing-high::after   { background: rgba(249,115,22,0.13); }
.cork-card.pacing-climax::after { background: rgba(239,68,68,0.16); }
.cork-pin {
  width: 12px; height: 12px; border-radius: 50%; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.5);
}
.cork-card-header { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.cork-status-badge {
  font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 2px 6px;
  border-radius: 10px; cursor: pointer; user-select: none; color: #fff; flex-shrink: 0;
  transition: opacity 0.15s;
}
.cork-status-badge:hover { opacity: 0.75; }
.cork-ai-btn {
  margin-left: auto; background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 0 2px; opacity: 0.5; transition: opacity 0.15s; line-height: 1;
}
.cork-ai-btn:hover { opacity: 1; }
.cork-card-num  { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #aaa; margin-bottom: 1px; }
.cork-card-title { font-weight: 700; font-size: 13px; color: #1a1a1a; line-height: 1.3; margin-bottom: 5px; }
.cork-synopsis  { font-size: 11px; color: #555; line-height: 1.5; flex: 1; min-height: 36px; }
.cork-synopsis.placeholder { color: #bbb; font-style: italic; }
.cork-synopsis[contenteditable="true"] {
  outline: 1px dashed #E8552D; background: rgba(232,85,45,0.04);
  padding: 2px 4px; border-radius: 2px; cursor: text; user-select: text;
}
.cork-char-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.cork-char-tag  { font-size: 9px; background: rgba(0,0,0,0.07); border-radius: 10px; padding: 1px 6px; color: #666; font-weight: 500; }
.cork-card-footer { margin-top: 8px; padding-top: 5px; border-top: 1px dashed #ddd; display: flex; justify-content: space-between; font-size: 10px; color: #aaa; }
.cork-status-text { text-transform: capitalize; }
.cork-pacing-tip { font-size: 10px; color: #888; font-style: italic; margin-top: 4px; }
/* Context menu */
.cork-ctx-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  min-width: 176px;
  padding: 5px 0;
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.cork-ctx-item {
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background 0.1s;
  font-family: var(--font-ui);
}
.cork-ctx-item i { color: var(--accent); font-size: 12px; width: 14px; text-align: center; }
.cork-ctx-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.cork-ctx-item.danger { color: var(--danger); }
.cork-ctx-item.danger i { color: var(--danger); }
.cork-ctx-item.danger:hover { background: rgba(239, 68, 68, 0.1); }
.cork-ctx-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.cork-ctx-label {
  padding: 5px 14px 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cork-swatch-row { display: flex; gap: 7px; padding: 6px 14px 8px; }
.cork-swatch {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cork-swatch:hover { transform: scale(1.25); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.cork-swatch.active { border-color: var(--text-primary); }
.cork-swatch.none { background: var(--border); }
.cork-swatch[data-color="red"]    { background: #ef4444; }
.cork-swatch[data-color="orange"] { background: #f97316; }
.cork-swatch[data-color="yellow"] { background: #eab308; }
.cork-swatch[data-color="green"]  { background: #22c55e; }
.cork-swatch[data-color="blue"]   { background: #3b82f6; }
.cork-swatch[data-color="purple"] { background: #a855f7; }
.cork-status { text-transform: uppercase; font-weight: 600; }

/* Timeline */
.timeline { position: relative; padding: 20px 0; max-width: 800px; margin: 0 auto; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--border); transform: translateX(-50%); }
.timeline-event { position: relative; margin-bottom: 30px; display: flex; }
.timeline-left { justify-content: flex-end; padding-right: calc(50% + 20px); }
.timeline-right { justify-content: flex-start; padding-left: calc(50% + 20px); }
.timeline-dot {
  position: absolute; left: 50%; top: 16px; width: 14px; height: 14px;
  border-radius: 50%; transform: translateX(-50%); border: 3px solid var(--bg-primary); z-index: 1;
}
.timeline-card {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; max-width: 340px; cursor: pointer; transition: border-color 0.15s;
}
.timeline-card:hover { border-color: var(--accent); }
.timeline-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.timeline-ch-num { font-size: 11px; font-weight: 700; color: var(--accent); }
.timeline-ch-title { font-weight: 600; font-size: 14px; }
.timeline-detail { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* Writing Sprint */
.sprint-overlay {
  background: linear-gradient(135deg, #E8552D, #d32f2f); color: white;
  padding: 12px 20px; border-radius: 8px; margin: 8px 0; text-align: center;
  display: flex; align-items: center; gap: 16px; justify-content: center;
}
.sprint-timer { font-size: 28px; font-weight: 800; font-family: monospace; }
.sprint-stats { font-size: 14px; opacity: 0.9; }

/* Typewriter mode active button */
.ribbon-meta-btn-active { color: var(--accent) !important; background: rgba(232,85,45,0.15) !important; }
.ribbon-meta-sep { color: var(--border); margin: 0 4px; font-size: 14px; }

/* Prose Checker Highlights */
.prose-highlight { border-bottom: 2px wavy; cursor: help; }
.prose-passive_voice { border-color: #FF9800; background: rgba(255,152,0,0.1); }
.prose-adverbs { border-color: #9C27B0; background: rgba(156,39,176,0.1); }
.prose-repeated_words { border-color: #F44336; background: rgba(244,67,54,0.1); }
.prose-cliches { border-color: #E91E63; background: rgba(233,30,99,0.1); }
.prose-telling { border-color: #FF5722; background: rgba(255,87,34,0.1); }
.prose-wordy { border-color: #FFC107; background: rgba(255,193,7,0.1); }
.prose-weak_verbs { border-color: #607D8B; background: rgba(96,125,139,0.1); }
.prose-dialogue_tags { border-color: #00BCD4; background: rgba(0,188,212,0.1); }
.prose-report { padding: 16px; }
.prose-score { font-size: 24px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.prose-summary { display: flex; flex-wrap: wrap; gap: 12px; }
.prose-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.prose-stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.prose-stat-dot.prose-passive_voice { background: #FF9800; }
.prose-stat-dot.prose-adverbs { background: #9C27B0; }
.prose-stat-dot.prose-repeated_words { background: #F44336; }
.prose-stat-dot.prose-cliches { background: #E91E63; }
.prose-stat-dot.prose-telling { background: #FF5722; }
.prose-stat-dot.prose-wordy { background: #FFC107; }
.prose-stat-dot.prose-weak_verbs { background: #607D8B; }
.prose-stat-dot.prose-dialogue_tags { background: #00BCD4; }
.prose-issue-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; align-items: start; gap: 8px; }

/* Reference / Split Panel */
.ref-panel {
  width: 320px; flex-shrink: 0; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--bg-secondary);
  overflow: hidden;
}
.ref-panel.hidden { display: none; }
/* Split panel: manuscript + ref panel side by side */
/* ref-panel is now inside manuscript-body-row, no special page-level layout needed */
.ref-panel-header {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.ref-panel-header select { flex: 1; }
.ref-panel-body { flex: 1; overflow-y: auto; padding: 8px; }
.ref-card {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; cursor: pointer; font-size: 13px; transition: border-color 0.15s;
}
.ref-card:hover { border-color: var(--accent); }
.ref-card strong { display: block; margin-bottom: 2px; }
.ref-card-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.ref-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.ref-chapter-view h4 { margin: 0 0 12px; }
.ref-chapter-content {
  font-family: var(--font-writing); font-size: 13px; line-height: 1.7;
  color: var(--text-primary); max-height: calc(100vh - 200px); overflow-y: auto;
}

/* Text Markers */
.text-marker { border-radius: 2px; cursor: pointer; }
.text-marker:hover { opacity: 0.7; }
.marker-btn {
  width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer; padding: 0; transition: transform 0.1s;
}
.marker-btn:hover { transform: scale(1.2); }

/* Character Mentions */
.mentions-list { max-height: 60vh; overflow-y: auto; }
.mention-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s;
}
.mention-item:hover { background: var(--bg-tertiary); }
.mention-ch {
  width: 50px; height: 50px; border-radius: 8px; background: var(--accent);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.mention-title { font-weight: 600; font-size: 14px; }
.mention-count { font-size: 12px; color: var(--text-muted); }

/* Cover Upload */
.cover-upload-area {
  border: 2px dashed var(--border); border-radius: 8px; padding: 20px;
  text-align: center; cursor: pointer; transition: border-color 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px;
}
.cover-upload-area:hover { border-color: var(--accent); }
.cover-upload-zone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 16px;
  text-align: center; cursor: pointer; transition: border-color 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cover-upload-zone:hover, .cover-upload-zone.dragover { border-color: var(--accent); }

/* ============================================
   VISUAL TIMELINE
   ============================================ */

.timeline-container {
  overflow: auto;
  flex: 1;
  padding: 16px;
  position: relative;
}

.timeline-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.timeline-empty-icon { font-size: 48px; margin-bottom: 12px; }
.timeline-empty h3 { color: var(--text-primary); margin-bottom: 8px; }

.tl-grid {
  display: inline-block;
  min-width: 100%;
}

.tl-corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 20;
  width: var(--label-w);
  height: var(--header-h);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  float: left;
}

.tl-zoom-btn {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.tl-zoom-btn:hover { color: var(--accent); }

.tl-col-headers {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  margin-left: var(--label-w);
}

.tl-col-header {
  flex-shrink: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  cursor: grab;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-col-header:hover { background: var(--bg-hover); }
.tl-col-header:active { cursor: grabbing; }

.tl-col-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tl-col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-col-status {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tl-col-words {
  font-size: 10px;
  color: var(--text-muted);
}

.tl-add-col {
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  background: transparent;
  gap: 4px;
}
.tl-add-col:hover { color: var(--accent); border-color: var(--accent); }

.tl-body {
  clear: both;
}

.tl-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tl-row-label {
  position: sticky;
  left: 0;
  z-index: 10;
  width: var(--label-w);
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-row-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tl-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-row-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.tl-status-active { color: var(--success); background: rgba(52, 211, 153, 0.1); }
.tl-status-resolved { color: var(--info); background: rgba(96, 165, 250, 0.1); }

.tl-add-row {
  cursor: pointer;
}
.tl-add-label {
  color: var(--text-muted);
  border: none;
  gap: 8px;
}
.tl-add-label:hover { color: var(--accent); }

.tl-row-cells {
  display: flex;
  flex: 1;
}

.tl-cell {
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background 0.15s;
}
.tl-cell:hover { background: var(--bg-hover); }
.tl-cell-dragover { background: var(--accent-soft) !important; }

.tl-scene-card {
  background: var(--bg-elevated);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: var(--shadow);
}
.tl-scene-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tl-scene-card:active { cursor: grabbing; }

.tl-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.tl-card-summary {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}
.tl-card-pov {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.tl-add-scene {
  opacity: 0;
  transition: opacity 0.15s;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  margin-top: auto;
}
.tl-cell:hover .tl-add-scene { opacity: 1; }
.tl-add-scene:hover { color: var(--accent); border-color: var(--accent); }

/* Character Overlay */
.tl-char-overlay {
  margin-top: 12px;
  border-top: 2px solid var(--border);
  padding-top: 8px;
}
.tl-char-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}
.tl-char-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.tl-char-label {
  width: 180px;
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.tl-char-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 28px;
}
.tl-char-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.tl-char-toggle {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.15s;
}
.tl-char-toggle.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Timeline Minimap */
.timeline-minimap {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}
.tl-minimap-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-minimap-row {
  display: flex;
  gap: 1px;
}
.tl-minimap-cell {
  border-radius: 2px;
  transition: background 0.15s;
}

/* ============================================
   STORY TEMPLATES
   ============================================ */

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 16px;
}

.template-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.template-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.template-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.template-info h4 {
  color: var(--text-primary);
  margin-bottom: 2px;
}
.template-author {
  font-size: 12px;
  color: var(--text-muted);
}
.template-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
.template-stages {
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
  font-weight: 500;
}

/* Template Preview Modal */
.template-preview-author {
  color: var(--text-muted);
  font-size: 13px;
}
.template-preview-desc {
  color: var(--text-secondary);
  margin: 8px 0 20px;
  line-height: 1.6;
}
.template-stages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.template-stage {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.template-stage-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.template-stage-content strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}
.template-stage-content p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================
   TAGS
   ============================================ */

.tags-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.tags-empty-icon { font-size: 48px; margin-bottom: 12px; }
.tags-empty h3 { color: var(--text-primary); margin-bottom: 8px; }

.tags-layout {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tag-category-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.tag-item:hover {
  border-color: var(--tag-color, var(--accent));
  background: var(--bg-hover);
}

.tag-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.tag-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
}
.tag-remove {
  cursor: pointer;
  font-size: 10px;
  opacity: 0.7;
}
.tag-remove:hover { opacity: 1; }

.tag-detail-header {
  padding: 12px;
  margin-bottom: 8px;
}
.tag-detail-category {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tag-detail-desc {
  color: var(--text-secondary);
  margin-top: 4px;
  font-size: 13px;
}
.tag-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.tag-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
}
.tag-item-type {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 60px;
}
.tag-item-name {
  font-size: 13px;
  color: var(--text-primary);
}

/* Tag Picker */
.tag-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tag-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-picker-dropdown {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--text-primary);
  font-size: 12px;
  max-width: 200px;
}

/* ============================================
   PLACES
   ============================================ */

.places-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.places-empty-icon { font-size: 48px; margin-bottom: 12px; }
.places-empty h3 { color: var(--text-primary); margin-bottom: 8px; }

.places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}

.place-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
}
.place-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.place-card-image {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
}
.place-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-muted);
}

.place-card-body {
  padding: 14px;
}
.place-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.place-card-type {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.place-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}
.place-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* Scene Card Form */
.scene-card-form .form-row {
  display: flex;
  gap: 12px;
}
.sc-char-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-char-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.sc-color-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.sc-color-swatch:hover { transform: scale(1.2); }
.sc-color-swatch.active { border-color: var(--text-primary); transform: scale(1.2); }

/* AI Scene Suggestions */
.ai-scene-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.ai-scene-suggestion {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 12px;
  border-left: 3px solid var(--accent);
}
.ai-scene-suggestion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ai-scene-suggestion-header strong {
  color: var(--text-primary);
}
.ai-scene-chapter, .ai-scene-thread {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
}
.ai-scene-suggestion p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Place Form */
.place-form .form-row {
  display: flex;
  gap: 12px;
}

/* ============================================
   SERIES
   ============================================ */

.series-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.series-empty-icon { font-size: 48px; margin-bottom: 12px; }
.series-empty h3 { color: var(--text-primary); margin-bottom: 8px; }
.series-empty-section { color: var(--text-muted); padding: 20px; text-align: center; }

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
  padding: 16px;
}

.series-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.series-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.series-card-icon { font-size: 32px; flex-shrink: 0; }
.series-card-info h4 { color: var(--text-primary); margin-bottom: 2px; }
.series-card-genre { font-size: 12px; color: var(--accent); }
.series-card-desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.series-card-meta {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.series-detail { padding: 16px; }
.series-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.series-detail-header h2 { color: var(--text-primary); }
.series-detail-genre { color: var(--accent); font-size: 13px; }
.series-detail-desc { color: var(--text-secondary); font-size: 14px; margin-top: 4px; line-height: 1.6; }

.series-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.series-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.series-tab:hover { color: var(--text-primary); }
.series-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.series-tab-content { display: none; }
.series-tab-content.active { display: block; }

.series-section-header {
  margin-bottom: 16px;
}
.series-section-header h3 { color: var(--text-primary); }
.series-section-desc { color: var(--text-muted); font-size: 13px; margin: 4px 0 12px; }

.series-books-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.series-books-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.series-book-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  transition: all 0.15s;
}
.series-book-item:hover { border-color: var(--accent); }
.series-book-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  min-width: 30px;
}
.series-book-info {
  flex: 1;
}
.series-book-info strong { color: var(--text-primary); display: block; }
.series-book-info span { font-size: 12px; color: var(--text-muted); }

.series-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.series-char-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.series-char-card:hover { border-color: var(--accent); }
.series-char-avatar { font-size: 24px; }
.series-char-info strong { color: var(--text-primary); display: block; }
.series-char-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.series-char-appears { font-size: 11px; color: var(--text-secondary); display: block; margin-top: 2px; }

.series-lore-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.series-lore-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.series-lore-item:hover { border-color: var(--accent); }
.series-lore-icon { font-size: 24px; flex-shrink: 0; }
.series-lore-item strong { color: var(--text-primary); }
.series-lore-cat {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  margin-left: 8px;
}
.series-lore-item p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================
   BINDER TREE
   ============================================ */

.binder-tree {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 8px; /* Bug 36: extra bottom padding so last entry isn't clipped */
}

.binder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: all 0.1s;
  min-height: 28px;
  user-select: none;
}
.binder-item:hover { background: var(--bg-hover); }
.binder-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.binder-item.binder-dragging { opacity: 0.4; }
.binder-item.binder-drop-target {
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
}

.binder-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 8px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.binder-toggle.expanded { transform: rotate(90deg); }
.binder-toggle:hover { color: var(--text-primary); }
.binder-toggle-spacer { width: 16px; flex-shrink: 0; }

.binder-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.binder-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.binder-status {
  font-size: 10px;
  flex-shrink: 0;
}

.binder-words {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

.binder-children {
  /* Children are indented by inline padding */
}

/* Binder Context Menu */
.binder-context-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: 4px;
  min-width: 180px;
}
.binder-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.binder-menu-item:hover { background: var(--bg-hover); }
.binder-menu-item.danger { color: var(--danger); }
.binder-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); }
.binder-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ============================================
   SCRIVENINGS MODE
   ============================================ */

.scrivenings-container {
  padding: 0;
}

.scrivenings-section {
  border-left: 3px solid transparent;
  transition: border-color 0.15s;
}
.scrivenings-section.active {
  border-left-color: var(--accent);
}

.scrivenings-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.scrivenings-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.scrivenings-words {
  font-size: 11px;
  color: var(--text-muted);
}

.scrivenings-editor {
  min-height: 100px;
  padding: 20px 40px;
  font-family: var(--font-writing);
  font-size: 16px;
  line-height: 1.8;
  color: var(--editor-text);
  outline: none;
}

.scrivenings-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--accent);
  margin: 8px 0;
}

/* ============================================
   SPLIT EDITOR
   ============================================ */

.main-content.split-active {
  display: flex !important;
}
.main-content.split-active > .page.active {
  flex: 1;
  min-width: 0;
}

.split-editor-panel {
  width: 45%;
  min-width: 300px;
  border-left: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.split-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.split-editor-header select {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--text-primary);
  font-size: 12px;
  margin-right: 8px;
}

.split-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-family: var(--font-writing);
  font-size: 16px;
  line-height: 1.8;
  color: var(--editor-text);
  outline: none;
}

/* ============================================
   COMMENTS PANEL
   ============================================ */

.comments-panel-wrapper {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}
.comments-panel-wrapper.hidden { display: none; }

.comments-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.comments-panel {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.comments-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

.comments-section-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding: 4px 8px;
}

.comment-card {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 6px;
  border-left: 3px solid var(--accent);
}
.comment-card.resolved {
  opacity: 0.6;
  border-left-color: var(--success);
}

.comment-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.comment-type-icon { font-size: 14px; }
.comment-date { font-size: 11px; color: var(--text-muted); flex: 1; }
.comment-actions { display: flex; gap: 2px; }
.btn-icon-xs {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  font-size: 11px;
}
.btn-icon-xs:hover { background: var(--bg-hover); color: var(--text-primary); }

.comment-anchor {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  margin-bottom: 6px;
  border-left: 2px solid var(--warning);
}

.comment-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.comment-selected-preview {
  font-style: italic;
  color: var(--text-secondary);
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border-left: 3px solid var(--warning);
  font-size: 13px;
}

.comment-type-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.comment-type-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.comment-type-option:hover { border-color: var(--accent); }
.comment-type-option.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================
   COLLECTIONS
   ============================================ */

.collections-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.collections-empty h3 { color: var(--text-primary); margin-bottom: 8px; }

.collections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.collection-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.collection-card:hover { border-color: var(--accent); }
.collection-icon { font-size: 20px; }
.collection-info { flex: 1; }
.collection-info strong { color: var(--text-primary); display: block; }
.collection-info span { font-size: 12px; color: var(--text-muted); }

.col-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.col-chapter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
}
.col-chapter-check:hover { background: var(--bg-hover); }

/* ============================================
   ADVANCED COMPILE
   ============================================ */

.compile-advanced {
  max-height: 70vh;
  overflow-y: auto;
}
.compile-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.compile-section h4 {
  color: var(--text-primary);
  margin-bottom: 10px;
}

.compile-format-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.compile-format-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.15s;
  min-width: 70px;
}
.compile-format-option:hover { border-color: var(--accent); }
.compile-format-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.compile-format-icon { font-size: 24px; }

.compile-chapters {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compile-chapter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.compile-chapter-item:hover { background: var(--bg-hover); }
.compile-chapter-num {
  min-width: 24px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}
.compile-chapter-words {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================
   DEADLINE CALCULATOR
   ============================================ */

.deadline-stats {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.deadline-stat {
  text-align: center;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  min-width: 120px;
}
.deadline-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}
.deadline-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ============================================
   CUSTOM METADATA
   ============================================ */

.cm-field-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: 4px;
}
.cm-field-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}
.cm-field-type {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--bg-elevated);
  border-radius: 4px;
}

.custom-metadata-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.custom-metadata-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Corkboard drag states */
.cork-card.cork-dragging { opacity: 0.4; transform: scale(0.95); }
.cork-card.cork-drop-target { 
  border: 2px dashed var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --sidebar-width: 260px;
  }
  
  .app-layout {
    flex-direction: column;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 260px !important;
    min-width: 260px !important;
    height: 100dvh;
    height: 100%;
    transform: translateX(0);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  
  .sidebar.collapsed {
    transform: translateX(-100%);
    width: 260px !important;
    min-width: 260px !important;
    box-shadow: none;
  }
  
  /* ── Sidebar: tighten fixed sections, give nav room to breathe ── */

  /* Logo bar: smaller padding */
  .sidebar-brand {
    padding: 10px 12px !important;
  }

  /* Language switcher: tighter */
  .sidebar-lang {
    padding: 6px 10px !important;
  }
  .sidebar-lang .app-lang-btn {
    padding: 3px 4px !important;
    font-size: 9px !important;
  }

  /* Project context (< My Projects + project name + active item): compact */
  .sidebar-context {
    padding: 6px 12px !important;
  }
  .sidebar-projects-link {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .sidebar-project-name {
    font-size: 13px !important;
    padding: 2px 0 !important;
  }
  .sidebar-active-label {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  /* Nav items: tighter padding so more fit */
  .nav-section-title {
    padding: 10px 16px 2px !important;
    font-size: 9px !important;
  }
  .nav-item {
    padding: 7px 16px !important;
    font-size: 12px !important;
  }

  /* Nav: takes all remaining space, scrollable */
  .sidebar-nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    flex: 1 1 0 !important;
    min-height: 80px !important;
    padding: 6px 0 !important;
  }

  /* Binder: cap at 22% of viewport height so nav gets room */
  .sidebar-chapters {
    flex: 0 0 auto !important;
    max-height: 22vh !important;
    min-height: 42px !important;
  }
  /* Collapsed binder stays at header height only */
  .sidebar-chapters.binder-collapsed {
    max-height: 42px !important;
    flex: 0 0 42px !important;
  }

  /* Footer (word count + find/replace + settings): compact */
  .sidebar-footer {
    padding: 8px 12px !important;
  }
  .word-count-text {
    font-size: 10px !important;
  }
  .sidebar-footer-row {
    padding: 5px 0 !important;
    font-size: 12px !important;
  }
  
  .main-content {
    width: 100vw;
    min-width: 100vw;
  }
  
  /* Mobile hamburger toggle */
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  /* Overlay when sidebar is open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .sidebar-overlay.active {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

/* ═══ Beta Feature Flags ═══ */
/* Add .beta-hidden to hide features not ready for beta */
.beta-hidden { display: none !important; }

/* ═══ Toast Notifications ═══ */
#sw-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.sw-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.sw-toast.sw-toast-show {
  opacity: 1;
  transform: translateX(0);
}
.sw-toast-success { background: #16a34a; }
.sw-toast-error   { background: #dc2626; }
.sw-toast-warning { background: #d97706; }
.sw-toast-info    { background: #2563eb; }
.sw-toast-icon    { font-size: 16px; flex-shrink: 0; }
.sw-toast-msg     { line-height: 1.4; }

/* ═══ Character Generator — Mode Toggle ═══ */
.char-gen-selectable { align-items: flex-start; padding: 12px 14px; }
.char-mode-toggle { display: flex; gap: 4px; flex-shrink: 0; margin-left: 8px; }
.char-mode-btn {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--text-muted);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.char-mode-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.char-mode-btn.active.ai-mode { background: #6366f1; border-color: #6366f1; }
.char-mode-btn:hover:not(.active) { border-color: var(--orange); color: var(--text); }

/* ═══ Chapter Plotter — Selectable Rows ═══ */
.chapter-plan-selectable { cursor: pointer; transition: background 0.15s; }
.chapter-plan-selectable:hover { background: rgba(255,255,255,0.04); border-radius: 8px; }
.chapter-plan-selectable input[type="checkbox"] { cursor: pointer; accent-color: var(--orange); width: 15px; height: 15px; }

/* ═══ Plot Section Editor ═══ */
.plot-fix-btn {
  font-size: 12px; padding: 5px 12px; border-radius: 6px;
  color: var(--text-muted); border: 1px solid var(--border);
  transition: all 0.15s;
}
.plot-fix-btn:hover { color: var(--orange); border-color: var(--orange); }

.plot-section-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 14px;
  background: rgba(232, 85, 45, 0.08); border: 1px solid rgba(232, 85, 45, 0.3);
  border-radius: 8px; font-size: 13px; color: var(--orange);
  font-weight: 500;
}

/* Each paragraph becomes a selectable block in edit mode */
.wizard-plot-card.plot-section-mode .plot-para {
  border-radius: 6px; padding: 10px 12px; margin: 0 -12px;
  transition: background 0.15s, border 0.15s, box-shadow 0.15s;
  border: 2px solid transparent; user-select: none;
}
.wizard-plot-card.plot-section-mode .plot-para:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 85, 45, 0.25);
}
.wizard-plot-card.plot-section-mode .plot-para.marked-for-regen {
  background: rgba(232, 85, 45, 0.12);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(232, 85, 45, 0.2);
  position: relative;
}
.wizard-plot-card.plot-section-mode .plot-para.marked-for-regen::before {
  content: '↺';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--orange); opacity: 0.7;
}

.plot-section-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 0; margin-top: 16px;
  border-top: 1px solid var(--border);
}
.plot-sel-count {
  font-size: 12px; font-weight: 600; color: var(--orange);
  padding: 4px 10px; background: rgba(232, 85, 45, 0.1);
  border-radius: 12px;
}

/* ═══ Maps — Image Upload Drop Zone ═══ */
.map-drop-zone {
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 28px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.map-drop-zone:hover, .map-drop-zone.drag-over {
  border-color: var(--orange); background: rgba(232, 85, 45, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   SERIES BUILDER
═══════════════════════════════════════════════════════════════ */
.sb-page { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.sb-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 12px; }
.sb-header h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.sb-header h2 i { color: var(--accent); }
.sb-subtitle { color: var(--text-secondary); font-size: 14px; margin: 0; }
.sb-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }

/* Step indicator */
.sb-steps { display: flex; align-items: center; margin-bottom: 28px; gap: 0; }
.sb-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.sb-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-tertiary); color: var(--text-muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.sb-step span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sb-step.active .sb-step-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.sb-step.active span { color: var(--accent); font-weight: 600; }
.sb-step.done .sb-step-dot { border-color: var(--success); background: var(--success); color: #fff; }
.sb-step.done span { color: var(--success); }
.sb-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px; margin-bottom: 22px; min-width: 16px; }

/* Upload zone */
.sb-upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 36px 24px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 4px; }
.sb-upload-zone:hover, .sb-upload-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.sb-upload-zone h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-primary); }
.sb-upload-zone p { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.sb-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-muted); font-size: 12px; }
.sb-divider::before, .sb-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sb-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.sb-textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; padding: 10px 12px; resize: vertical; box-sizing: border-box; }
.sb-textarea:focus { outline: none; border-color: var(--accent); }
.sb-input { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; padding: 8px 12px; box-sizing: border-box; }
.sb-input:focus { outline: none; border-color: var(--accent); }
.sb-paste-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-align: right; }

/* Analyzing */
.sb-analyzing { text-align: center; padding: 40px 24px; }
.sb-analyzing h3 { font-size: 18px; margin: 0 0 8px; }
.sb-analyzing p { color: var(--text-muted); margin: 0 0 24px; }
.sb-spinner { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
.sb-analyzing-steps { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 0 auto; text-align: left; }
.sb-a-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); opacity: 0.4; transition: opacity 0.5s; }
.sb-a-step.active { opacity: 1; color: var(--text-primary); }
.sb-a-step i { color: var(--accent); width: 16px; text-align: center; }

/* Section titles */
.sb-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); margin-bottom: 14px; }
.sb-section-title i { font-size: 13px; }
.sb-directions-hint { font-size: 11px; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }

/* Series Bible grid */
.sb-bible-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-bible-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.sb-bible-card-wide { grid-column: 1 / -1; }
.sb-bible-card-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); margin-bottom: 6px; }
.sb-bible-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.sb-bible-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.sb-bible-threads { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sb-thread-tag { background: rgba(232,85,45,0.12); color: var(--accent); font-size: 11px; padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(232,85,45,0.2); }
.sb-thread-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.sb-world-rule { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.sb-tag-row, .sb-bible-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-theme-tag { background: var(--bg-hover); color: var(--text-primary); font-size: 11px; padding: 3px 10px; border-radius: 12px; }
.sb-rq-list { display: flex; flex-direction: column; gap: 8px; }
.sb-rq-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.sb-rq-item i { color: var(--info); margin-top: 2px; flex-shrink: 0; }
.sb-chars-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-char-chip { background: var(--bg-hover); border-radius: 8px; padding: 8px 12px; min-width: 140px; }
.sb-char-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sb-char-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }
.sb-char-sequel { font-size: 11px; color: var(--accent); margin-top: 4px; display: block; }

/* Direction cards */
.sb-directions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sb-direction-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.sb-direction-card:hover { border-color: var(--dir-color, var(--accent)); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.2); }
.sb-dir-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dir-color, var(--accent)); }
.sb-dir-icon { font-size: 22px; color: var(--dir-color, var(--accent)); margin-bottom: 2px; }
.sb-dir-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sb-dir-tagline { font-size: 12px; font-weight: 600; color: var(--dir-color, var(--accent)); font-style: italic; }
.sb-dir-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.sb-dir-hooks { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; }
.sb-dir-hook { font-size: 12px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.sb-dir-btn { margin-top: 8px; width: 100%; justify-content: center; background: var(--bg-hover); border-color: var(--dir-color, var(--border)); color: var(--text-primary); font-weight: 600; }
.sb-direction-card:hover .sb-dir-btn { background: var(--dir-color, var(--accent)); color: #fff; border-color: transparent; }

/* Developed treatment */
.sb-dev-section { margin-bottom: 32px; }
.sb-titles-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-title-chip { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.15s; }
.sb-title-chip:hover { border-color: var(--accent); color: var(--accent); }
.sb-logline { font-size: 16px; font-style: italic; color: var(--text-primary); line-height: 1.6; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.sb-synopsis { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
.sb-synopsis p { margin: 0 0 14px; }
.sb-opening-scene { font-size: 14px; font-style: italic; color: var(--text-secondary); line-height: 1.7; background: var(--bg-elevated); border-radius: 8px; padding: 16px; border: 1px solid var(--border); }
.sb-beats-list { display: flex; flex-direction: column; gap: 8px; }
.sb-beat { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.sb-beat-num { font-size: 11px; font-weight: 700; color: var(--accent); min-width: 36px; padding-top: 2px; }
.sb-beat-body { flex: 1; }
.sb-beat-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.sb-beat-summary { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.sb-beat-purpose { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.sb-beat-act { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; padding-top: 2px; white-space: nowrap; }
.sb-dev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sb-char-cards { display: flex; flex-direction: column; gap: 10px; }
.sb-char-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.sb-char-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.sb-char-card-role { font-size: 11px; color: var(--accent); text-transform: capitalize; margin-bottom: 6px; }
.sb-char-card-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.sb-char-card-rel { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.sb-world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sb-world-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.sb-world-type { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; letter-spacing: 0.5px; }
.sb-world-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.sb-world-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.sb-arc-hint { font-size: 14px; color: var(--text-secondary); line-height: 1.7; background: var(--bg-elevated); border-radius: 8px; padding: 16px; border-left: 3px solid var(--info); }
.sb-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--accent-soft), rgba(232,85,45,0.05)); border: 1px solid rgba(232,85,45,0.2); border-radius: 12px; padding: 24px; margin-top: 12px; flex-wrap: wrap; }
.sb-cta h3 { margin: 0 0 4px; color: var(--text-primary); }
.sb-cta p { margin: 0; color: var(--text-muted); font-size: 13px; }

/* Scaffold modal */
.sb-scaffold-modal { padding: 4px 0; }
.sb-scaffold-modal h3 { margin: 0 0 6px; font-size: 16px; }
.sb-scaffold-modal p { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.sb-scaffold-includes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: 8px; }
.sb-include-item { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.sb-suggestion-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sb-sug-chip { font-size: 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text-primary); transition: all 0.15s; }
.sb-sug-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Success */
.sb-success { text-align: center; padding: 48px 24px; }
.sb-success-icon { font-size: 52px; color: var(--success); margin-bottom: 16px; }
.sb-success h3 { font-size: 20px; margin: 0 0 8px; }
.sb-success p { color: var(--text-muted); margin: 0; }

/* Responsive */
@media (max-width: 700px) {
  .sb-bible-grid { grid-template-columns: 1fr; }
  .sb-dev-cols { grid-template-columns: 1fr; }
  .sb-steps { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .sb-step-line { display: none; }
  .sb-cta { flex-direction: column; text-align: center; }
}

/* ── Series Builder Landing Page ── */
.sb-landing-page { max-width: 860px; }
.sb-hero { text-align: center; padding: 16px 20px 32px; }
.sb-hero-icon { font-size: 48px; color: var(--accent); margin-bottom: 16px; }
.sb-hero h1 { font-size: 32px; font-weight: 800; color: var(--text-primary); margin: 0 0 12px; letter-spacing: -0.5px; }
.sb-hero-sub { font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto; }

.sb-how-section, .sb-outputs-section, .sb-upload-section { margin-bottom: 36px; }
.sb-how-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 16px; }

.sb-how-steps { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.sb-how-step { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 140px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.sb-how-arrow { display: flex; align-items: center; padding: 0 6px; color: var(--text-muted); font-size: 12px; margin-top: 22px; flex-shrink: 0; }
.sb-how-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 12px; }
.sb-how-step-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.sb-how-step-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.sb-outputs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.sb-output-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.sb-output-card i { font-size: 22px; color: var(--accent); margin-bottom: 10px; display: block; }
.sb-output-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.sb-output-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.sb-privacy-box { display: flex; align-items: flex-start; gap: 16px; background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 10px; padding: 18px 20px; margin-bottom: 36px; }
.sb-privacy-icon { font-size: 24px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.sb-privacy-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.sb-privacy-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.sb-privacy-body strong { color: var(--text-primary); }

@media (max-width: 700px) {
  .sb-how-steps { flex-direction: column; }
  .sb-how-arrow { display: none; }
  .sb-hero h1 { font-size: 24px; }
}

/* ══════════════════════════════════════════════════
   SLIDE-OUT DRAWER
══════════════════════════════════════════════════ */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 600; display: flex; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.drawer-overlay:not(.hidden) { opacity: 1; pointer-events: all; }
.drawer-overlay.hidden { display: none; }
.drawer { width: 440px; max-width: 100%; height: 100%; background: var(--bg-primary); display: flex; flex-direction: column; box-shadow: -6px 0 32px rgba(0,0,0,0.35); transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.drawer-overlay:not(.hidden) .drawer { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: var(--bg-primary); }
.drawer-field { display: flex; flex-direction: column; gap: 6px; }
.drawer-field label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; }
.drawer-field input, .drawer-field textarea, .drawer-field select { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; padding: 9px 12px; width: 100%; box-sizing: border-box; transition: border-color 0.15s; }
.drawer-field input:focus, .drawer-field textarea:focus, .drawer-field select:focus { outline: none; border-color: var(--accent); }
.drawer-field textarea { resize: vertical; min-height: 80px; }
.drawer-field select { cursor: pointer; }
.drawer-url-row { display: flex; gap: 8px; align-items: flex-start; }
.drawer-url-row input { flex: 1; }
.drawer-url-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; }
.drawer-url-preview img.favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.drawer-url-preview .preview-thumb { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.drawer-url-preview .preview-info { flex: 1; min-width: 0; }
.drawer-url-preview .preview-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-url-preview .preview-host { font-size: 11px; color: var(--text-muted); }
.drawer-color-row { display: flex; gap: 10px; align-items: center; }
.drawer-color-row input[type="color"] { width: 44px; height: 38px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; padding: 2px 4px; background: var(--bg-elevated); flex-shrink: 0; }
.drawer-color-row input[type="text"] { flex: 1; }
.drawer-upload-row { display: flex; flex-direction: column; gap: 8px; }
.drawer-upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.15s; color: var(--text-muted); font-size: 13px; }
.drawer-upload-zone:hover, .drawer-upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.drawer-upload-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.drawer-or-divider { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.drawer-or-divider::before, .drawer-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ══════════════════════════════════════════════════
   RESEARCH BOARD
══════════════════════════════════════════════════ */
.research-layout { display: flex; gap: 20px; height: calc(100% - 64px); }
.research-sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.research-sidebar h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin: 0 0 8px; padding: 0 8px; }
.research-folder-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: all 0.15s; }
.research-folder-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.research-folder-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.research-folder-item i { width: 14px; text-align: center; font-size: 12px; }
.folder-count { margin-left: auto; font-size: 11px; background: var(--bg-tertiary); border-radius: 10px; padding: 1px 7px; color: var(--text-muted); }
.research-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-content: start; overflow-y: auto; }
.research-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: default; transition: all 0.15s; display: flex; flex-direction: column; }
.research-card:hover { border-color: var(--accent); box-shadow: 0 3px 16px rgba(0,0,0,0.15); }
.research-card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; }
.research-type-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: capitalize; }
.research-card-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.research-card:hover .research-card-actions { opacity: 1; }
.research-card-image { width: 100%; height: 160px; overflow: hidden; }
.research-card-image img { width: 100%; height: 100%; object-fit: cover; }
.research-card h4 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0; padding: 0 12px 6px; line-height: 1.4; }
.research-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); text-decoration: none; padding: 0 12px 6px; }
.research-link:hover { text-decoration: underline; }
.research-link .link-favicon { width: 14px; height: 14px; border-radius: 2px; }
.research-content { font-size: 12px; color: var(--text-secondary); margin: 0; padding: 0 12px 8px; line-height: 1.5; }
.research-card-footer { padding: 8px 12px; border-top: 1px solid var(--border); margin-top: auto; }
.research-folder-tag { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

/* ══════════════════════════════════════════════════
   MOODBOARDS
══════════════════════════════════════════════════ */
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; align-content: start; }
.board-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.15s; position: relative; }
.board-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(0,0,0,0.2); transform: translateY(-2px); }
.board-card-preview { width: 100%; height: 120px; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.board-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.board-card-preview i { font-size: 32px; color: var(--text-dim); }
.board-card h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; padding: 12px 12px 4px; }
.board-card p { font-size: 12px; color: var(--text-muted); margin: 0; padding: 0 12px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-card-menu { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.15s; }
.board-card:hover .board-card-menu { opacity: 1; }
.moodboard-masonry { columns: 3; column-gap: 14px; }
@media (max-width: 900px) { .moodboard-masonry { columns: 2; } }
@media (max-width: 600px) { .moodboard-masonry { columns: 1; } }
.moodboard-item { break-inside: avoid; margin-bottom: 14px; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; transition: all 0.15s; }
.moodboard-item:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.moodboard-image img { width: 100%; display: block; }
.moodboard-caption { padding: 8px 10px; font-size: 12px; color: var(--text-secondary); background: var(--bg-elevated); }
.moodboard-color { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; border: none !important; }
.color-hex { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.color-name { font-size: 12px; color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.moodboard-text { padding: 16px; }
.moodboard-text p, .moodboard-quote p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.moodboard-quote { padding: 16px; border-left: 3px solid var(--accent); }
.moodboard-quote i { color: var(--accent); font-size: 18px; margin-bottom: 8px; display: block; }
.moodboard-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; color: white; font-size: 12px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 0.15s; z-index: 2; }
.moodboard-item:hover .moodboard-delete { display: flex; }
.moodboard-delete:hover { background: var(--danger); }

/* ── AI BADGE ──────────────────────────────────────────── */
.ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
  background: #2a2a2a;
  color: #777;
  border: 1px solid #3a3a3a;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.ai-unlocked .ai-badge {
  background: rgba(76, 175, 125, 0.18);
  color: #5dbd8a;
  border-color: rgba(76, 175, 125, 0.45);
  box-shadow: 0 0 6px rgba(76,175,125,0.15);
}
/* Lock state for free users */
.ribbon-ai-btn.ai-locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}
.ribbon-ai-btn.ai-locked:hover {
  background: rgba(232,85,45,0.06);
  border-color: rgba(232,85,45,0.2);
  color: var(--text-muted);
  opacity: 0.7;
}
.ribbon-ai-btn.ai-locked::after {
  content: '🔒';
  font-size: 9px;
  margin-left: 2px;
}

/* ── MANUSCRIPT RULERS ────────────────────────────────────── */
.ms-ruler {
  background: var(--bg-secondary, #efefef);
  position: relative;
  flex-shrink: 0;
  z-index: 10;
  user-select: none;
}
[data-theme="dark"] .ms-ruler { background: var(--bg-secondary, #1e1e1e); }

.ms-ruler-h {
  width: 100%;
  height: 28px;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg-secondary, #efefef);
  overflow: visible;
}
[data-theme="dark"] .ms-ruler-h { background: var(--bg-secondary, #1e1e1e); }

#pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  position: relative;
}

.ms-ruler-v {
  /* Moved into pages-container by JS — positioned absolutely */
  width: 28px;
  overflow: hidden;
}

/* Margin handle on ruler */
.ruler-margin-handle {
  position: absolute;
  bottom: 0;
  cursor: ew-resize;
  z-index: 20;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.ruler-margin-handle:hover { opacity: 1; }
.ruler-mark {
  position: absolute;
  color: #555;
  font-size: 8px;
  font-family: 'Inter', monospace;
  line-height: 1;
  pointer-events: none;
}
.ruler-mark.inch {
  color: #777;
  font-size: 9px;
}
/* Hide rulers in focus mode */
.focus-mode .ms-ruler { display: none; }

/* ── SAY THIS DIFFERENTLY / CONTEXT MENU ENHANCEMENTS ────── */
.sel-ctx-section-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555;
}
.sel-ctx-upgrade {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #E8552D;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.sel-ctx-upgrade:hover { background: rgba(232,85,45,0.08); }
.sel-ctx-item-disabled {
  padding: 6px 14px;
  font-size: 12px;
  color: #444;
  font-style: italic;
  cursor: default;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED MOBILE RESPONSIVE (375px — iPhone baseline)
   ═══════════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow globally */
html, body { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 768px) {
  /* ── Sidebar: hidden by default, slides in ── */
  .sidebar {
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }
  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
  }
  body.mobile-sidebar-open .sidebar-overlay {
    display: block !important;
  }

  /* ── Editor: full width, readable font ── */
  .manuscript-container { padding: 0 !important; }
  .manuscript-scroll-area { padding: 0 !important; }
  .page-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 16px !important;
    margin: 0 !important;
  }
  .editor {
    font-size: 16px !important;
    min-height: 60vh !important;
  }

  /* ── Toolbar: scroll horizontally ── */
  .editor-toolbar, .manuscript-toolbar-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 6px 8px !important;
  }
  .editor-toolbar::-webkit-scrollbar { display: none; }

  /* ── Ruler: hide on mobile ── */
  .ruler, .ruler-corner, .h-ruler, .v-ruler { display: none !important; }

  /* ── Modals: full screen ── */
  .modal, .modal.modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
  }
  .modal-body, .modal.modal-lg .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
  }
  /* Large tap target for close button */
  .modal-header .btn-icon,
  .modal-close,
  [onclick*="closeModal"],
  [onclick*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ── Project Cards: 1 column ── */
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .project-card { padding: 16px !important; }

  /* ── Buttons: min touch target ── */
  .btn, .btn-primary, .btn-secondary, .btn-icon,
  button:not(.editor-toolbar button):not(.nav-item) {
    min-height: 44px !important;
  }

  /* ── Top bar ── */
  .topbar, .app-topbar, .manuscript-header {
    padding: 0 8px !important;
    height: 48px !important;
    overflow-x: auto;
  }

  /* ── Nav items: scrollable tabs ── */
  .tab-bar, .tabs, .page-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* ── Panels: don't overflow (exclude scene-panel — handled separately) ── */
  .echo-panel {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ── Word count + meta bars ── */
  .manuscript-meta { display: none !important; }

  /* ── Characters/World panels ── */
  .characters-grid, .world-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* ── Even tighter on small phones ── */
  .page-canvas { padding: 16px 12px !important; }
  .editor { font-size: 16px !important; line-height: 1.75 !important; }
  
  .sidebar-brand { padding: 12px !important; }
  .sidebar-logo-text { font-size: 18px !important; }

  /* Project card delete always visible (no hover on mobile) */
  .project-card-delete { opacity: 1 !important; }

  /* Hide secondary nav items to save space */
  .nav-section-title { font-size: 10px !important; }
  .nav-item { padding: 8px 12px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════════
   MOBILE EDITOR FIXES — scene panel + scrolling
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* HIDE the AI/scene panel completely on mobile — use FAB instead */
  .scene-panel {
    display: none !important;
  }

  /* Writing screen: column layout, scrollable */
  #writing-screen,
  #writing-screen.active {
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  /* Manuscript takes all available space */
  .manuscript-container,
  #manuscript-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Manuscript scroll area scrollable */
  .manuscript-scroll-area {
    overflow-y: auto !important;
    flex: 1 !important;
  }

  /* Mobile AI tools FAB */
  .mobile-ai-fab {
    display: flex !important;
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E8552D;
    color: white;
    border: none;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(232,85,45,0.4);
    z-index: 300;
    cursor: pointer;
  }
}

/* ══════════════════════════════════════════════
   MOBILE EDITOR BOTTOM BAR + AI DRAWER
   ══════════════════════════════════════════════ */

/* Bottom formatting bar */
.mobile-editor-bar {
  display: none; /* shown via JS on mobile in writing screen */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  align-items: center;
  padding: 0 8px;
  gap: 2px;
  z-index: 250;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}
.mob-fmt-btn {
  min-width: 40px; min-height: 40px;
  padding: 0 10px;
  background: none; border: none;
  color: var(--text-secondary);
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}
.mob-fmt-btn:active { background: rgba(255,255,255,0.1); }
.mob-fmt-ai {
  margin-left: auto;
  background: rgba(232,85,45,0.15) !important;
  color: #E8552D !important;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px !important;
  border-radius: 20px !important;
  gap: 6px !important;
}
.mob-fmt-sep {
  width: 1px; height: 24px;
  background: var(--border);
  margin: 0 4px;
}

/* AI Drawer */
.mobile-ai-drawer {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  z-index: 400;
  flex-direction: column;
  max-height: 72vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}
.mobile-ai-drawer.open {
  transform: translateY(0);
}
.mobile-ai-drawer-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
  cursor: pointer;
}
.mobile-ai-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.mob-drawer-close {
  background: none; border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.mobile-ai-drawer-body {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 60px; /* space above bottom bar */
}
.mob-drawer-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.mob-drawer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mob-ai-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.mob-ai-btn:active { background: rgba(232,85,45,0.15); border-color: #E8552D; color: #E8552D; }
.mob-ai-btn i { color: #E8552D; font-size: 12px; }

.mobile-ai-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 399;
}

/* On mobile, add padding to editor so bottom bar doesn't cover text */
@media (max-width: 768px) {
  #writing-screen .page-canvas,
  #writing-screen .manuscript-scroll-area {
    padding-bottom: 64px !important;
  }
  /* Hide desktop ribbon on mobile */
  .ribbon {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════
   MOBILE HOME SCREEN FIXES
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Home sidebar is desktop-only — hide on mobile */
  .home-sidebar { display: none !important; }

  /* Home screen: fixed height column, overflow hidden — child scrolls */
  #home-screen,
  #home-screen.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100dvh !important;
    height: 100vh !important;
  }

  /* Main content area: THE scroll container on mobile */
  .home-main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 16px 120px !important; /* extra bottom for editor bar + safe area */
  }

  /* Header actions: stack vertically on mobile */
  .home-tab-header {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .home-tab-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .home-tab-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════
   MOBILE MANUSCRIPT FIXES
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Title row — add left padding so hamburger doesn't clip it */
  .manuscript-title-row {
    padding: 12px 16px 4px 56px !important; /* 56px = hamburger width + gap */
    box-sizing: border-box !important;
  }
  .chapter-title-input {
    font-size: 20px !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .manuscript-subtitle {
    text-align: left !important;
    padding-left: 0 !important;
  }

  /* Hide ruler completely on mobile */
  .ruler, .ruler-corner, .h-ruler, .v-ruler,
  .manuscript-ruler, [class*="ruler"] {
    display: none !important;
  }

  /* Page canvas — breathing room all sides */
  .page-canvas {
    padding: 20px 20px 100px 20px !important; /* extra bottom for bar + FAB */
  }

  /* Move Echo FAB above the bottom formatting bar on mobile */
  .echo-fab {
    bottom: 130px !important; /* above Story Mentor FAB on mobile */
    right: 16px !important;
    padding: 10px 14px 8px !important;
    opacity: 0.85 !important;
  }
  .echo-fab .echo-fab-icon { font-size: 16px !important; }
  .echo-fab .echo-fab-label { font-size: 9px !important; }

  /* Editor text — proper line width, no overflow */
  .editor, #editor {
    overflow-x: hidden !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Move the mobile AI FAB above the bottom bar */
  .mobile-ai-fab,
  #mobile-editor-bar ~ * .mobile-ai-fab {
    bottom: 60px !important; /* above the 52px bottom bar */
  }

  /* Prose/Scenes tab bar — center and give breathing room */
  .editor-tab-bar {
    padding: 8px 16px !important;
    justify-content: center !important;
  }
}

/* ── SYNOPSIS PAGE ─────────────────────────────────────────── */
.synopsis-page-body { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding: 24px 0 60px; }
.synopsis-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.synopsis-card-main { border-color: var(--accent); }
.synopsis-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.synopsis-card-label { font-weight: 600; font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.synopsis-card-label i { color: var(--accent); }
.synopsis-edit-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all .15s; }
.synopsis-edit-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.synopsis-card-content { padding: 18px; font-size: 15px; line-height: 1.8; color: var(--text); }
.synopsis-card-content p { margin: 0 0 12px; }
.synopsis-card-content p:last-child { margin-bottom: 0; }
.synopsis-placeholder { color: var(--text-muted, var(--text-secondary)); font-style: italic; }
.synopsis-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 18px; }
.synopsis-meta-item { display: flex; flex-direction: column; gap: 4px; }
.synopsis-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.synopsis-meta-value { font-size: 14px; font-weight: 500; color: var(--text); }

/* ══════════════════════════════════════════════
   MOBILE SCROLL FIX — manuscript scrollable
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ensure the scroll chain is unbroken */
  .app-shell,
  .app-main,
  #workspace-screen,
  #workspace-screen.active,
  #page-manuscript,
  .manuscript-container {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 1 !important;
  }

  /* The scroll area is the ONE scrollable element */
  #manuscript-scroll-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: calc(100dvh - 52px) !important; /* full viewport minus bottom bar */
    flex: none !important;
  }

  /* Page canvas fills width, content flows naturally */
  .page-canvas {
    min-height: 100% !important;
  }
}

/* ── Chapter Scene Image Button ──────────────────────────────── */
.chapter-scene-btn {
  opacity: 0;
  transition: opacity 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #888);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  flex-shrink: 0;
}
.chapter-scene-btn:hover {
  background: var(--accent, #E8552D);
  color: #fff;
}
.chapter-list-item:hover .chapter-scene-btn {
  opacity: 1;
}

/* ── Scene Preview Popup ────────────────────────────────────── */
.scene-preview-popup {
  position: fixed;
  width: 300px;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 9999;
  animation: fadeInUp 0.2s ease;
}
.scene-popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.scene-popup-close:hover { color: var(--text, #fff); }

/* ── AI Scene Badge on Moodboard ────────────────────────────── */
.scene-ai-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #E8552D;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.02em;
}

/* ── Sprint 1 Writing Features ─────────────────────────────── */

/* Scene breaks */
.scene-break {
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 18px;
  padding: 12px 0;
  letter-spacing: 8px;
  user-select: none;
  cursor: default;
  outline: none;
}

/* Scene break ornament picker */
#scene-break-picker {
  position: fixed;
  z-index: 9999;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  gap: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#scene-break-picker .sb-ornament {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text, #fff);
  transition: background 0.15s;
}
#scene-break-picker .sb-ornament:hover { background: var(--accent, #e8552d); color: #fff; }

/* DRAFT watermark */
.draft-watermark { position: relative; }
.draft-watermark::before {
  content: 'DRAFT';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 120px;
  font-weight: 900;
  color: rgba(232, 85, 45, 0.06);
  pointer-events: none;
  z-index: 0;
  letter-spacing: 20px;
  font-family: sans-serif;
  white-space: nowrap;
}
#draft-watermark-btn.active { color: var(--accent, #e8552d); font-weight: 700; }
#smart-punct-btn.active { color: var(--accent, #e8552d); }

/* Synonym submenu */
#synonym-popup {
  position: fixed;
  z-index: 10000;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 8px 0;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#synonym-popup .syn-item {
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #fff);
}
#synonym-popup .syn-item:hover { background: var(--accent, #e8552d); color: #fff; }
#synonym-popup .syn-loading, #synonym-popup .syn-empty {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-muted, #888);
}

/* Custom dictionary chips */
.dict-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, #2a2a3a);
  border: 1px solid var(--border, #333);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text, #fff);
}
.dict-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #888);
  padding: 0;
  line-height: 1;
  font-size: 14px;
}
.dict-chip button:hover { color: var(--accent, #e8552d); }

/* Visually suppress spellcheck squiggle for accepted words */
.sw-accepted {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════
   ANDROID MOBILE FIXES (2026-03-01)
   - Input zoom prevention (font-size >= 16px)
   - Safe area insets for notch/nav bar phones
   - Touch scrolling performance
   - Tap target minimum sizes (44px)
   - PWA install prompt (beforeinstallprompt)
   - overscroll-behavior to prevent page bounce
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Input zoom prevention (Android zooms on inputs < 16px) ── */
  input, textarea, select, [contenteditable] {
    font-size: 16px !important; /* Prevents Android zoom on focus */
  }

  /* ── Tap target minimum sizes (Android Material: 48px, Apple HIG: 44px) ── */
  .btn, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── Safe area insets for notch/punch-hole/nav-bar phones ── */
  .mobile-editor-bar {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Scrolling performance ── */
  #manuscript-scroll-area {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /* ── Prevent full-page bounce on overscroll ── */
  body {
    overscroll-behavior: none;
  }
}

/* ── PWA Install Banner (Android Chrome beforeinstallprompt) ── */
#pwa-install-banner {
  font-family: var(--font-ui, system-ui, sans-serif);
}

/* ── Wikilinks ─────────────────────────────────────────────── */
.sw-wikilink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
.sw-wikilink:hover {
  background: rgba(232, 85, 45, 0.1);
  border-radius: 3px;
}

#wikilink-suggest {
  position: fixed;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 500;
  min-width: 200px;
  max-width: 300px;
  overflow: hidden;
}
.wikilink-suggest-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wikilink-suggest-item:hover, .wikilink-suggest-item.active {
  background: var(--bg-hover);
}

/* ═══════════════════════════════════════════════════
   CHARACTER PAGE — MOBILE OVERRIDES
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Reduce page padding */
  .char-detail-page {
    padding: 12px 14px;
  }

  /* Topbar: stack actions below back button */
  .char-detail-topbar {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .char-detail-actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .char-detail-actions .btn {
    flex: 1;
    min-width: 80px;
    justify-content: center;
  }

  /* Main layout: stack sidebar below main form */
  .char-detail-layout {
    flex-direction: column;
  }
  .char-detail-sidebar {
    width: 100%;
    position: static;
    top: auto;
  }

  /* Profile header: stack portrait above info */
  .char-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px;
    gap: 14px;
  }
  .char-portrait-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .char-portrait-lg {
    width: 110px !important;
    height: 140px !important;
  }
  .char-profile-info {
    width: 100%;
  }

  /* Collapse all multi-column rows to single column */
  .char-row-2,
  .char-row-3 {
    flex-direction: column;
    gap: 10px;
  }

  /* Essence + Goals side-by-side → stack */
  .char-essence-goals-row {
    flex-direction: column;
    gap: 14px;
  }

  /* Slightly larger tap targets for inputs */
  .char-detail-page input,
  .char-detail-page select,
  .char-detail-page textarea {
    font-size: 16px; /* prevents iOS zoom */
    padding: 10px 12px;
  }

  /* Sidebar sections — full width, no overflow */
  .char-sidebar-section {
    width: 100%;
    box-sizing: border-box;
  }
  .char-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   CHARACTER PAGE — SCROLL FIX (mobile)
   .page is the scroll container; needs pb so content
   clears the Android nav bar (approx 60px) + safe area
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Bottom padding clears Android gesture nav + some breathing room */
    padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom)));
  }
  /* Manuscript page manages its own scroll — don't double-pad */
  #page-manuscript {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  /* Character form: let .page scroll, not the inner container */
  .char-form-sections {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0;
  }
}

/* ═══════════════════════════════════════════════════
   TRANSLATE PAGE
   ═══════════════════════════════════════════════════ */
.translate-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.translate-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.translate-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.translate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.translate-tab {
  flex: 1;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.translate-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.translate-project-info {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.translate-project-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.translate-stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.translate-stat {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.translate-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}
.translate-empty i { font-size: 28px; margin-bottom: 8px; opacity: 0.4; }
.translate-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}
.translate-upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.translate-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.translate-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 13px;
}
.translate-lang-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.translate-lang-option input[type="radio"] { accent-color: var(--accent); }
.translate-lang-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.translate-disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.translate-limit-note {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.translate-progress-bar-wrap {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}
.translate-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s ease;
}
/* Multi-language selector grid */
.translate-multilang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}
.translate-lang-check { cursor: pointer; }
.translate-lang-check input[type="checkbox"] { display: none; }
.translate-lang-check-card {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  transition: all var(--transition);
  position: relative;
  background: var(--bg-tertiary);
}
.translate-lang-check:hover .translate-lang-check-card { border-color: var(--accent); }
.translate-lang-check.selected .translate-lang-check-card {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.translate-lang-flag { font-size: 16px; flex-shrink: 0; }
.translate-lang-name { flex: 1; color: var(--text-primary); font-weight: 500; }
.translate-lang-check-badge {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.translate-lang-check.selected .translate-lang-check-badge { display: flex; }

/* Pricing calculator */
.translate-pricing {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 4px;
}
.translate-pricing-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 4px 0;
}
.translate-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 3px 0;
}
.translate-pricing-amount { font-weight: 700; color: var(--text-primary); }
.translate-pricing-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.translate-pricing-total { font-size: 15px; }
.translate-pricing-total-amt { font-size: 18px; color: var(--accent); }
.translate-pricing-extra { font-size: 12px; color: var(--text-muted); }

/* Per-language progress rows */
.translate-lang-progress-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.tlp-flag { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tlp-bar-wrap { height: 5px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; min-width: 60px; }
.tlp-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.tlp-status { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Language Formatting Guide — rolodex widget ─────────────────────────── */
/* ── Export page ─────────────────────────────────────────────────────────── */
.export-page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.export-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 24px;
}
.export-action-section { border-color: var(--accent); background: linear-gradient(135deg, rgba(232,85,45,0.04), var(--bg-elevated)); }
.export-section-hdr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.export-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.export-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.export-section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.export-optional { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.export-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.export-project-card {
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.export-project-card:hover { border-color: var(--accent); background: var(--bg-tertiary); }
.export-project-card.selected { border-color: var(--accent); background: rgba(232,85,45,0.06); }
.export-project-icon { font-size: 22px; color: var(--accent); margin-bottom: 8px; }
.export-project-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; line-height: 1.3; }
.export-project-meta { font-size: 11px; color: var(--text-muted); }
.export-project-check { position: absolute; top: 8px; right: 8px; color: var(--accent); font-size: 16px; }
.export-no-projects { text-align: center; padding: 32px; color: var(--text-muted); font-size: 14px; }
.export-no-projects i { font-size: 36px; opacity: .3; display: block; margin-bottom: 12px; }
.export-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.export-fmt-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.export-fmt-card:hover { border-color: var(--accent); }
.export-fmt-card.selected { border-color: var(--accent); background: rgba(232,85,45,0.06); }
.export-fmt-icon { font-size: 28px; margin-bottom: 8px; }
.export-fmt-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.export-fmt-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.export-fmt-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); }
.export-frontmatter { display: flex; flex-direction: column; gap: 14px; }
.export-fm-field { display: flex; flex-direction: column; gap: 6px; }
.export-fm-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 600px) {
  .export-page-wrap { padding: 0 16px 40px; }
  .export-format-grid { grid-template-columns: 1fr; }
  .export-project-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Translate page wrapper & full-width guide ───────────────────────────── */
.translate-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.translate-guide-full {
  margin-bottom: 20px !important;
  max-width: 100% !important;
}
/* Action button — centered, not a full bar */
.translate-action-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.translate-submit-btn {
  font-size: 15px;
  padding: 13px 40px !important;
  min-width: 240px;
  border-radius: 50px !important;
}

/* ── Compact page bar — for tool pages with complex toolbars ─────────────── */
.fh-page-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
  justify-content: space-between;
}
.fh-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.fh-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .fh-page-bar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .fh-bar-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .fh-bar-icon { font-size: 20px !important; }
  .fh-bar-title { font-size: 15px !important; }
  .fh-bar-sub { display: none; }
}
.fh-bar-icon {
  font-size: 28px;
  color: var(--accent);
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.fh-bar-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.fh-bar-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ── Translate step numbers ──────────────────────────────────────────────── */
.translate-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 6px;
  line-height: 1;
}
.translate-step-num--btn {
  background: rgba(255,255,255,0.25);
  margin-right: 8px;
}

/* ── Translate output format info ────────────────────────────────────────── */
.translate-output-info {
  margin-top: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.translate-output-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.translate-output-formats { display: flex; flex-direction: column; gap: 7px; }
.translate-output-fmt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.translate-output-fmt i { margin-top: 1px; flex-shrink: 0; width: 14px; text-align: center; }
.translate-output-fmt strong { color: var(--text-primary); }

.translate-guide-widget { padding: 0 !important; overflow: hidden; }
.translate-guide-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  transition: background 0.15s;
}
.translate-guide-hdr:hover { background: var(--bg-tertiary); }
.translate-guide-sub { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; flex: 1; }
#translate-guide-chev { color: var(--text-muted); font-size: 11px; transition: transform 0.2s; }
.translate-guide-body { padding: 14px 16px 16px; }
.translate-guide-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px;
}
.translate-guide-lang-name {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  text-align: center; flex: 1;
}
.translate-guide-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; padding: 0;
}
.translate-guide-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.translate-guide-card { font-size: 12px; }
.tg-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.tg-style {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--accent); margin-bottom: 10px;
}
.tg-example { background: var(--bg-secondary); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.tg-ex-row { margin-bottom: 6px; }
.tg-ex-row:last-child { margin-bottom: 0; }
.tg-ex-label {
  display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 2px;
}
.tg-ex-text {
  display: block; font-family: var(--font-writing, Georgia, serif);
  font-size: 12.5px; line-height: 1.5; padding: 4px 8px; border-radius: 5px;
}
.tg-en { font-style: italic; color: var(--text-muted); }
.tg-out { color: var(--text-primary); background: var(--bg-elevated); border-left: 2px solid var(--accent); }
.tg-notes { margin: 0; padding-left: 16px; color: var(--text-secondary); line-height: 1.65; }
.tg-notes li { margin-bottom: 3px; }
.tg-notes strong { color: var(--text-primary); font-family: monospace; font-size: 13px; }
.tg-notes em { color: var(--text-muted); }

/* ── Language Formatting Conventions Guide ───────────────────────────────── */
.translate-conventions-wrap {
  max-width: 1100px;
  margin: 24px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--bg-elevated);
}
.translate-conventions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  user-select: none;
  gap: 12px;
}
.translate-conventions-header:hover { background: var(--bg-tertiary); }
.translate-conventions-chevron { transition: transform 0.2s ease; color: var(--text-muted); font-size: 12px; }
.translate-conventions-wrap.open .translate-conventions-chevron { transform: rotate(180deg); }
.translate-conventions-body {
  display: none;
  padding: 20px;
}
.translate-conventions-wrap.open .translate-conventions-body { display: block; }
.translate-conventions-intro {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(232,85,45,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.translate-conventions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.translate-conv-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.translate-conv-lang {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.translate-conv-style {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.translate-conv-example {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.translate-conv-ex-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 3px;
  margin-top: 6px;
}
.translate-conv-ex-label:first-child { margin-top: 0; }
.translate-conv-ex-text {
  font-family: var(--font-writing, Georgia, serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
  padding: 5px 8px;
  border-radius: 5px;
}
.translate-conv-ex-text.en { color: var(--text-secondary); font-style: italic; background: transparent; }
.translate-conv-ex-text.target { background: var(--bg-elevated); border-left: 2px solid var(--accent); }
.translate-conv-notes {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.translate-conv-notes li { margin-bottom: 3px; }
.translate-conv-notes strong { color: var(--text-primary); font-family: monospace; font-size: 13px; }
.translate-conv-notes em { color: var(--text-muted); }
.translate-conventions-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.translate-conventions-footer strong { color: var(--text-primary); }

/* Translate 2-col layout */
.translate-layout-2col {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.translate-col-left, .translate-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Dropzone */
.translate-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}
.translate-dropzone:hover, .translate-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.translate-dropzone-icon { font-size: 32px; margin-bottom: 12px; color: var(--accent); }
.translate-dropzone-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.translate-dropzone-sub { font-size: 12px; color: var(--text-muted); }

/* File info strip */
.translate-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.translate-file-icon { font-size: 24px; color: var(--accent); flex-shrink: 0; }
.translate-file-details { flex: 1; min-width: 0; }
.translate-file-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.translate-file-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.translate-file-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px; flex-shrink: 0; }
.translate-file-clear:hover { color: var(--danger); }

/* Language pair */
.translate-lang-pair {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.translate-lang-col { flex: 1; }
.translate-lang-sublabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.translate-lang-arrow {
  font-size: 16px;
  color: var(--accent);
  padding-bottom: 8px;
  flex-shrink: 0;
}

/* Translation style options */
.translate-setting-group { margin-bottom: 14px; }
.translate-setting-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 10px;
}
.translate-style-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.translate-style-opt { cursor: pointer; }
.translate-style-opt input[type="radio"] { display: none; }
.translate-style-card {
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: all var(--transition);
  background: var(--bg-tertiary);
}
.translate-style-opt input:checked ~ .translate-style-card {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.translate-style-opt:hover .translate-style-card { border-color: var(--accent); }
.translate-style-icon { font-size: 20px; margin-bottom: 4px; }
.translate-style-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.translate-style-desc { font-size: 10px; color: var(--text-muted); line-height: 1.4; }

/* Toggles */
.translate-toggles { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.translate-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  cursor: pointer;
}
.translate-toggle-row:hover { background: var(--bg-secondary); }
.translate-toggle-info { flex: 1; }
.translate-toggle-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.translate-toggle-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 768px) {
  .translate-layout { padding: 14px; }
  .translate-layout-2col { grid-template-columns: 1fr; }
  .tg-card-body { grid-template-columns: 1fr; }
  .translate-lang-grid { grid-template-columns: 1fr 1fr; }
  .translate-style-options { grid-template-columns: 1fr; }
  .translate-lang-pair { flex-direction: column; gap: 8px; }
  .translate-lang-arrow { transform: rotate(90deg); padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════
   BOOK TRAILER PAGE
   ═══════════════════════════════════════════════════ */
.trailer-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trailer-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trailer-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.trailer-feature i {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.trailer-feature div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trailer-feature strong {
  font-size: 13px;
  color: var(--text-primary);
}
.trailer-feature span {
  font-size: 12px;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .trailer-layout { padding: 14px; }
}

/* ═══════════════════════════════════════════════════
   RELATIONSHIP WEBS
   ═══════════════════════════════════════════════════ */
.webs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 32px 32px;
  align-content: start;
}

/* ═══════════════════════════════════════════════════
   EDITOR TAB BAR (Prose / Scenes tabs)
   ═══════════════════════════════════════════════════ */
/* Tab-bar page counter — compact "p. 2 / 5" widget next to Prose|Scenes tabs */
.tab-page-counter {
  display: none; /* shown via JS when totalPages > 1 */
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-page-counter span {
  min-width: 42px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}
.page-nav-btn-sm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 3px;
  font-size: 10px;
  border-radius: 3px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.page-nav-btn-sm:hover:not(:disabled) { color: var(--accent); }
.page-nav-btn-sm:disabled { opacity: 0.3; cursor: default; }

.scenes-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  flex-shrink: 0; /* Bug 18: prevent Prose/Scenes tab text from clipping at narrow widths */
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  margin-bottom: -1px; /* sit flush on the border-bottom of the tab bar */
}
.scenes-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.scenes-tab-btn.active {
  color: var(--accent);
  border-color: var(--border) var(--border) var(--bg-primary) var(--border);
  background: var(--bg-primary);
}

/* ══════════════════════════════════════════════
   FORMAT CHECKBOX — aligned label + input
   ══════════════════════════════════════════════ */
.format-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.format-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
}

/* ══════════════════════════════════════════════
   STORY TROPES — legend + search bar
   ══════════════════════════════════════════════ */
.tropes-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-wrap: wrap;
}
.tropes-search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.tropes-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.tropes-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Ensure trope cards are uniform height */
.trope-card {
  display: flex;
  flex-direction: column;
}
.trope-card-body {
  flex: 1;
}

/* Plot grid: clarify 0/10 metric */
.pg-thread-coverage {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pg-thread-coverage::after {
  content: ' chaps';
  font-size: 9px;
  opacity: 0.7;
}

/* Plot grid: empty cells get a dashed affordance */
.pg-cell-empty {
  border: 1.5px dashed rgba(255,255,255,0.08) !important;
  transition: background 0.15s, border-color 0.15s;
}
.pg-cell-empty:hover {
  background: rgba(232,85,45,0.08) !important;
  border-color: rgba(232,85,45,0.3) !important;
  cursor: pointer;
}

/* ── Non-Fiction Wizard ────────────────────────────────────── */
.nf-branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}
.nf-branch-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #333);
  background: var(--bg-secondary, #1a1a2e);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.nf-branch-card:hover {
  border-color: var(--accent, #E8552D);
  background: rgba(232,85,45,0.07);
}
.nf-branch-card.selected {
  border-color: var(--accent, #E8552D);
  background: rgba(232,85,45,0.12);
}
.nf-branch-icon { font-size: 22px; margin-bottom: 2px; }
.nf-branch-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #eee);
  line-height: 1.3;
}
.nf-branch-desc {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}
.nf-subgenre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.nf-subgenre-card {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #333);
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-secondary, #ccc);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}
.nf-subgenre-card:hover {
  border-color: var(--accent, #E8552D);
  color: var(--accent, #E8552D);
}
.nf-subgenre-card.selected {
  border-color: var(--accent, #E8552D);
  background: rgba(232,85,45,0.12);
  color: var(--accent, #E8552D);
}
.nf-step-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nf-ai-assist-btn {
  align-self: flex-end;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--accent, #E8552D);
  background: rgba(232,85,45,0.1);
  color: var(--accent, #E8552D);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.nf-ai-assist-btn:hover {
  background: rgba(232,85,45,0.2);
}
.nf-ai-assist-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Book Launcher Modal ─────────────────────────────────── */
.book-launcher-container {
  background: var(--bg-primary, #0d0d14);
  border: 1.5px solid var(--border, #2a2a3e);
  border-radius: 20px;
  padding: 32px 28px 24px;
  width: min(880px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: launcherIn 0.2s ease;
}
@keyframes launcherIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.book-launcher-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.book-launcher-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent, #E8552D);
  margin-bottom: 4px;
}
.book-launcher-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary, #eee);
}
.book-launcher-sub {
  font-size: 14px;
  color: var(--text-secondary, #555);
  margin: 0 0 24px;
  line-height: 1.6;
}
.book-launcher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.blc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px 16px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1.5px solid var(--border, #2a2a3e);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.blc:hover {
  border-color: rgba(232,85,45,0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.blc-featured {
  border-color: rgba(232,85,45,0.45);
  background: linear-gradient(145deg, #1a1a2e, #1a0e0a);
}
.blc-featured .blc-title  { color: #fff; }
.blc-featured .blc-desc   { color: rgba(255,255,255,0.78); }
.blc-featured .blc-outputs { color: rgba(255,255,255,0.5); }
.blc-new {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--accent, #E8552D);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 2px 8px;
  border-radius: 20px;
}
.blc-icon { font-size: 26px; }
.blc-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent, #E8552D);
}
.blc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #eee);
  line-height: 1.2;
}
.blc-desc {
  font-size: 12px;
  color: var(--text-muted, #888);
  line-height: 1.55;
  flex: 1;
}
.blc-outputs {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  font-weight: 500;
}
.book-launcher-langs {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 4px 0 0;
}
@media (max-width: 700px) {
  .book-launcher-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .book-launcher-grid { grid-template-columns: 1fr; }
  .book-launcher-container { padding: 24px 16px 20px; }
}

/* ── AI Book Coach ─────────────────────────────────────────── */
.bc-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #9333ea, #E8552D);
  border: none;
  border-radius: 18px;
  padding: 12px 16px 10px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(147,51,234,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s;
  font-family: inherit;
}
.bc-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(147,51,234,0.5), 0 4px 12px rgba(0,0,0,0.3); }
.bc-fab i { font-size: 18px; }
.bc-fab-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.bc-fab-hidden { display: none !important; }

.bc-panel {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 1199;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: min(560px, calc(100vh - 140px));
  background: var(--bg-primary, #0d0d14);
  border: 1.5px solid rgba(147,51,234,0.4);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 56px rgba(0,0,0,0.6), 0 0 0 1px rgba(147,51,234,0.1);
  overflow: hidden;
  animation: bcSlideUp 0.22s ease;
}
@keyframes bcSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.bc-hidden { display: none !important; }

.bc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(147,51,234,0.2);
  background: linear-gradient(135deg, rgba(147,51,234,0.12), rgba(232,85,45,0.08));
  flex-shrink: 0;
}
.bc-header-left { display: flex; align-items: center; gap: 10px; }
.bc-avatar { font-size: 22px; }
.bc-title { font-size: 14px; font-weight: 800; color: var(--text-primary, #eee); }
.bc-subtitle { font-size: 11px; color: #a855f7; font-weight: 600; }
.bc-header-actions { display: flex; gap: 4px; }
.bc-icon-btn {
  background: none; border: none; color: var(--text-muted, #888);
  font-size: 13px; padding: 6px; border-radius: 6px; cursor: pointer;
  transition: color .15s, background .15s;
}
.bc-icon-btn:hover { color: var(--text-primary, #eee); background: rgba(255,255,255,0.07); }

.bc-status {
  padding: 8px 16px;
  font-size: 12px;
  color: #a855f7;
  background: rgba(147,51,234,0.07);
  text-align: center;
  flex-shrink: 0;
}

.bc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.bc-messages::-webkit-scrollbar { width: 4px; }
.bc-messages::-webkit-scrollbar-thumb { background: rgba(147,51,234,0.3); border-radius: 4px; }

.bc-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 8px;
  flex: 1;
}
.bc-welcome-icon { font-size: 36px; }
.bc-welcome-title { font-size: 13px; color: var(--text-secondary, #ccc); line-height: 1.6; }
.bc-starters { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.bc-starter-btn {
  padding: 8px 12px;
  background: rgba(147,51,234,0.08);
  border: 1px solid rgba(147,51,234,0.25);
  border-radius: 8px;
  color: var(--text-secondary, #ccc);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.bc-starter-btn:hover { background: rgba(147,51,234,0.18); border-color: rgba(147,51,234,0.5); color: #fff; }

.bc-msg { display: flex; align-items: flex-end; gap: 8px; }
.bc-msg-user { flex-direction: row-reverse; }
.bc-msg-avatar { font-size: 16px; flex-shrink: 0; margin-bottom: 2px; }
.bc-msg-bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.65;
}
.bc-msg-user .bc-msg-bubble {
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bc-msg-coach .bc-msg-bubble {
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-secondary, #ccc);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(147,51,234,0.15);
}
.bc-thinking-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.bc-thinking-bubble span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a855f7;
  animation: bcDot 1.2s ease-in-out infinite;
}
.bc-thinking-bubble span:nth-child(2) { animation-delay: .2s; }
.bc-thinking-bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes bcDot {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40%          { transform: scale(1.1); opacity: 1; }
}

.bc-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(147,51,234,0.15);
  flex-shrink: 0;
}
.bc-input {
  flex: 1;
  background: var(--bg-secondary, #1a1a2e);
  border: 1.5px solid rgba(147,51,234,0.25);
  border-radius: 12px;
  color: var(--text-primary, #eee);
  font-size: 13px;
  padding: 10px 13px;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  max-height: 140px;
  overflow-y: auto;
  transition: border-color .15s;
}
.bc-input:focus { outline: none; border-color: #9333ea; }
.bc-input::placeholder { color: var(--text-muted, #666); }
.bc-send-btn {
  background: linear-gradient(135deg, #9333ea, #E8552D);
  border: none;
  border-radius: 10px;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
  font-size: 13px;
}
.bc-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(147,51,234,0.4); }

.bc-footer {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted, #555);
  padding: 6px 12px 10px;
  flex-shrink: 0;
}

/* ── Book Coach Mode Bar ─────────────────────────────────── */
.bc-mode-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(147,51,234,0.12);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.bc-mode-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border, #333);
  background: none;
  color: var(--text-muted, #888);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
}
.bc-mode-btn:hover { border-color: #9333ea; color: #9333ea; }
.bc-mode-active { font-weight: 700; }

/* ── Book Coach Multi-Mode ───────────────────────────────── */
.bc-mode-row { display: flex; gap: 4px; flex-wrap: wrap; }
.bc-mode-all {
  border-color: rgba(255,255,255,0.2) !important;
  color: var(--text-muted, #888) !important;
  font-weight: 700 !important;
}
.bc-mode-all:hover { border-color: #E8552D !important; color: #E8552D !important; }
.bc-mode-all-on { border-color: #E8552D !important; color: #E8552D !important; background: rgba(232,85,45,0.1) !important; }
.bc-mode-hint {
  width: 100%;
  font-size: 10px;
  color: #a855f7;
  padding: 4px 2px 0;
  font-weight: 600;
}

/* ── Coach Chapter Review ────────────────────────────────── */
.bc-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, #0d0d14);
  animation: bcBadgePulse 2s ease-in-out infinite;
  font-size: 0;
}
@keyframes bcBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.bc-fab-has-badge { animation: bcFabShake 0.4s ease 0.5s; }
@keyframes bcFabShake {
  0%,100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

.bc-review-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: rgba(34,197,94,0.1);
  border: none;
  border-bottom: 1px solid rgba(34,197,94,0.2);
  color: #22c55e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.bc-review-btn:hover { background: rgba(34,197,94,0.18); }
.bc-review-wc {
  margin-left: auto;
  font-weight: 400;
  opacity: 0.7;
  font-size: 11px;
}