/* ============ RELATIONSHIP WEBS ============ */
.webs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.web-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; position: relative; }
.web-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.web-card-icon { font-size: 32px; color: var(--orange); margin-bottom: 12px; }
.web-card h3 { font-size: 16px; margin-bottom: 4px; }
.web-card p { font-size: 13px; color: var(--text-muted); }
.web-card-actions { position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity 0.2s; }
.web-card:hover .web-card-actions { opacity: 1; }

.web-canvas-wrapper { width: 100%; height: calc(100vh - 200px); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; cursor: grab; }
.web-canvas-wrapper:active { cursor: grabbing; }
.web-canvas { width: 100%; height: 100%; transform-origin: 0 0; }
.web-node { cursor: grab; }
.web-node:active { cursor: grabbing; }
.web-node.connectable { cursor: crosshair; }
.web-node.connectable circle:hover { stroke: #fff; stroke-width: 3; }
.web-connect-hint { background: rgba(232,85,45,0.1); border: 1px solid rgba(232,85,45,0.3); color: var(--orange); padding: 8px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; text-align: center; }
.web-connect-hint-idle { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); color: #6366f1; }
.web-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ============ RESEARCH BOARD ============ */
.research-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.research-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; height: fit-content; }
.research-sidebar h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; }
.research-folder-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-muted); transition: all 0.2s; }
.research-folder-item:hover { background: var(--bg-hover); color: var(--text); }
.research-folder-item.active { background: rgba(232,85,45,0.1); color: var(--orange); }
.folder-count { margin-left: auto; font-size: 11px; opacity: 0.6; }
.research-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.research-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.research-card:hover { border-color: var(--orange); }
.research-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.research-type-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.research-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.research-card:hover .research-card-actions { opacity: 1; }
.research-card-image { margin: -16px -16px 12px; border-radius: 12px 12px 0 0; overflow: hidden; max-height: 180px; }
.research-card-image img { width: 100%; height: 100%; object-fit: cover; }
.research-card h4 { font-size: 15px; margin-bottom: 6px; }
.research-link { font-size: 12px; color: var(--orange); text-decoration: none; display: block; margin-bottom: 8px; }
.research-content { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.research-card-footer { margin-top: 10px; }
.research-folder-tag { font-size: 11px; color: var(--text-dim); }

/* ============ MOODBOARDS ============ */
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.board-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; text-align: center; }
.board-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.board-card-preview { width: 100%; height: 120px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--text-dim); margin-bottom: 12px; }
.board-card h3 { font-size: 15px; margin-bottom: 4px; }
.board-card p { font-size: 12px; color: var(--text-muted); }
.moodboard-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.moodboard-item { position: relative; border-radius: 10px; overflow: hidden; transition: all 0.2s; }
.moodboard-item:hover { transform: scale(1.02); }
.moodboard-image img { width: 100%; display: block; border-radius: 10px; }
.moodboard-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff; padding: 20px 12px 10px; font-size: 12px; }
.moodboard-color { width: 100%; height: 120px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.color-hex { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.color-name { font-size: 11px; color: rgba(255,255,255,0.8); }
.moodboard-text { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.moodboard-quote { border-left: 3px solid var(--orange); font-style: italic; }
.moodboard-text p { font-size: 14px; line-height: 1.6; }
.moodboard-delete { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); border: none; color: #fff; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.moodboard-item:hover .moodboard-delete { opacity: 1; }

/* ============ INTERACTIVE MAPS ============ */
.maps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.map-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.map-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.map-card-preview { height: 160px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.map-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.map-placeholder { font-size: 48px; color: var(--text-dim); }
.map-card-info { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.map-card-info h3 { font-size: 15px; }
.map-canvas-wrapper { width: 100%; height: calc(100vh - 240px); background: #111; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; }
.map-canvas { transform-origin: 0 0; }
.map-image { max-width: 100%; display: block; user-select: none; }
.map-placeholder-large { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); font-size: 64px; gap: 16px; }
.map-placeholder-large p { font-size: 14px; }
.map-pin { position: absolute; transform: translate(-50%, -100%); font-size: 24px; cursor: pointer; transition: all 0.2s; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.map-pin:hover { transform: translate(-50%, -100%) scale(1.2); }
.pin-label { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; white-space: nowrap; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.7); padding: 2px 6px; border-radius: 4px; margin-top: 4px; }
.map-pin-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.map-pin-list h4 { width: 100%; font-size: 13px; color: var(--text-muted); }
.map-pin-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; }
.map-pin-item:hover { border-color: var(--orange); }

/* ============ THESAURUS ============ */
.thesaurus-panel { position: fixed; z-index: 10000; width: 300px; background: var(--bg-elevated, #1e1e1e); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden; }
.thesaurus-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.thesaurus-header h4 { font-size: 14px; }
.thesaurus-loading { padding: 20px; text-align: center; color: var(--text-muted); }
.thesaurus-section { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.thesaurus-section:last-of-type { border-bottom: none; }
.thesaurus-section h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.thesaurus-words { display: flex; flex-wrap: wrap; gap: 6px; }
.thesaurus-word { padding: 4px 10px; background: rgba(232,85,45,0.1); color: var(--orange); border-radius: 4px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.thesaurus-word:hover { background: var(--orange); color: #fff; }
.thesaurus-word.related { background: rgba(59,130,246,0.1); color: #3b82f6; }
.thesaurus-word.related:hover { background: #3b82f6; color: #fff; }
.thesaurus-word.antonym { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.thesaurus-word.antonym:hover { background: #8b5cf6; color: #fff; }
.thesaurus-tip { padding: 6px 14px; font-size: 11px; color: var(--text-dim); text-align: center; border-top: 1px solid var(--border); }

/* ============ READ TO ME ============ */
.tts-controls { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.tts-controls.hidden { display: none !important; }
.tts-playback-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tts-playback-row .btn-sm { padding: 4px 12px; font-size: 12px; }
.tts-rate-select, .tts-voice-select { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 11px; padding: 3px 6px; }
.tts-current-word { font-size: 13px; color: var(--orange); font-weight: 600; min-width: 60px; }
/* Voice picker */
.tts-voice-picker { display: flex; flex-direction: column; gap: 6px; }
.tts-voice-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tts-voice-label { font-size: 11px; font-weight: 700; color: var(--text-muted); min-width: 52px; text-transform: uppercase; letter-spacing: 0.5px; }
.tts-voice-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tts-voice-btn { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-secondary); cursor: pointer; font-family: inherit; transition: all 0.15s; min-width: 76px; }
.tts-voice-btn:hover { border-color: var(--orange); background: rgba(232,85,45,0.06); }
.tts-voice-btn.active { border-color: var(--orange); background: rgba(232,85,45,0.12); }
.tts-voice-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tts-voice-style { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-top: 2px; }
.tts-voice-genre { font-size: 9px; color: var(--orange); white-space: nowrap; margin-top: 2px; opacity: 0.8; }

/* ============ REVISION LAYERS ============ */
.revision-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.revision-header h4 { font-size: 13px; }
.revision-list { display: flex; flex-direction: column; gap: 4px; }
.revision-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.revision-item:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }
.revision-item.active { background: rgba(232,85,45,0.1); color: var(--orange); }
.revision-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.revision-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s; }
.revision-item:hover .revision-actions { opacity: 1; }
.revision-hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

/* ============ DIFF VIEW ============ */
.diff-view { font-family: monospace; font-size: 12px; }
.diff-line { padding: 2px 8px; border-bottom: 1px solid var(--border); }
.diff-num { display: inline-block; width: 30px; color: var(--text-dim); margin-right: 8px; }
.diff-added { background: rgba(34,197,94,0.1); }
.diff-removed { background: rgba(239,68,68,0.1); }
.diff-changed { background: rgba(245,158,11,0.08); }

/* TTS .btn-sm override */
.tts-controls .btn-sm { padding: 4px 10px; font-size: 12px; }

/* ============ REVISION PANEL ============ */
.revision-panel-wrapper { width: 260px; border-left: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; }
.revision-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; }
.revision-panel { padding: 12px; }
.revision-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.revision-list { display: flex; flex-direction: column; gap: 6px; }
.revision-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; font-size: 13px; }
.revision-item:hover { background: var(--bg-hover); }
.revision-item.active { background: var(--orange-alpha, rgba(232,85,45,0.1)); border: 1px solid var(--orange); }
.revision-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.revision-compare-btn { font-size: 11px; padding: 2px 8px; margin-left: auto; }
.revision-diff { padding: 16px; font-size: 13px; line-height: 1.6; }

/* ============ WRITING SESSIONS ============ */
.session-active-banner { display: flex; align-items: center; gap: 24px; padding: 16px 24px; background: linear-gradient(135deg, rgba(232,85,45,0.1), rgba(255,107,53,0.05)); border: 1px solid var(--orange); border-radius: 12px; margin-bottom: 24px; }
.session-timer { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.session-live-words { font-size: 16px; opacity: 0.8; }
.sessions-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.session-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
.stat-icon { font-size: 24px; margin-bottom: 8px; }
.stat-value { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; }
.daily-progress-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.daily-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.daily-progress-bar { height: 12px; background: var(--bg-elevated, #1e1e2e); border-radius: 6px; overflow: hidden; }
.daily-progress-fill { height: 100%; background: linear-gradient(90deg, var(--orange), #ff6b35); border-radius: 6px; transition: width 0.5s ease; }
.daily-target-setting { margin-top: 12px; font-size: 13px; opacity: 0.7; }
.daily-target-setting .input-sm { width: 80px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); }
.week-heatmap-section, .month-heatmap-section, .recent-sessions-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.week-heatmap-section h3, .month-heatmap-section h3, .recent-sessions-section h3 { margin: 0 0 16px 0; font-size: 16px; }
.week-heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-day-label { font-size: 11px; text-transform: uppercase; opacity: 0.6; }
.week-day-bar-container { width: 32px; height: 80px; background: var(--bg-elevated, #1e1e2e); border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.week-day-bar { width: 100%; background: var(--orange); border-radius: 4px 4px 0 0; transition: height 0.3s; min-height: 0; }
.week-day-words { font-size: 11px; opacity: 0.7; }
.week-day.today .week-day-label { color: var(--orange); font-weight: 600; }
.month-heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 11px; background: var(--bg-elevated, #1e1e2e); }
.month-day.intensity-1 { background: rgba(232,85,45,0.15); }
.month-day.intensity-2 { background: rgba(232,85,45,0.3); }
.month-day.intensity-3 { background: rgba(232,85,45,0.5); }
.month-day.intensity-4 { background: rgba(232,85,45,0.7); color: #fff; }

/* ============ BOOK FORMATTING ENGINE ============ */
.format-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; height: calc(100vh - 120px); }
.format-controls { overflow-y: auto; padding-right: 8px; }
.format-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.format-section h3 { margin: 0 0 12px 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.format-label { display: block; font-size: 12px; margin: 8px 0 4px; opacity: 0.7; }
.format-select { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text); font-size: 13px; }
.format-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); font-size: 13px; }
.format-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.format-field { min-width: 0; overflow: hidden; } /* Bug 25/26: prevent label/slider clipping in 2-col layout */
.format-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.format-checkbox input { accent-color: var(--orange); }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preset-btn { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: 12px; cursor: pointer; transition: all 0.15s; }
.preset-btn:hover { border-color: var(--orange); }
.preset-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.heading-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.heading-style-btn { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.heading-style-btn:hover { border-color: var(--orange); }
.heading-style-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.scene-break-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.scene-break-btn { display: flex; flex-direction: column; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); cursor: pointer; transition: all 0.15s; }
.scene-break-btn:hover { border-color: var(--orange); }
.scene-break-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.scene-break-preview { font-size: 16px; line-height: 1.2; min-height: 20px; }
.scene-break-label { font-size: 10px; opacity: 0.7; }
.margin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.matter-checklist { display: flex; flex-direction: column; gap: 4px; }

/* Preview Pane */
.format-preview-pane { display: flex; flex-direction: column; overflow: hidden; }
.preview-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.preview-header span { flex: 1; text-align: center; font-weight: 600; }
.preview-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.preview-spread { display: flex; gap: 4px; justify-content: center; align-items: flex-start; overflow: auto; flex: 1; padding: 20px; background: #666; border-radius: 8px; transform-origin: top center; transition: transform 0.2s; }
.preview-page { box-shadow: 0 2px 12px rgba(0,0,0,0.3); flex-shrink: 0; box-sizing: border-box; }

/* ============ COLLABORATION ============ */
.collab-indicator { width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; }
.collab-indicator.connected { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.collab-indicator.disconnected { background: #666; }
.collab-presence-inline { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; }
.collab-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; margin-left: -6px; border: 2px solid var(--bg-card); }
.collab-avatar:first-child { margin-left: 0; }
.collab-count { font-size: 11px; opacity: 0.6; margin-left: 4px; }
.binder-presence-dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.collab-typing { padding: 4px 16px; font-size: 12px; color: var(--orange); font-style: italic; }

/* Remote Cursors */
.remote-cursor { position: absolute; width: 2px; height: 18px; pointer-events: none; z-index: 10; }
.remote-cursor-flag { position: absolute; top: -18px; left: 0; font-size: 10px; padding: 1px 6px; border-radius: 3px; color: #fff; white-space: nowrap; }

/* Suggestion Mode */
.editor.suggestion-mode { border: 2px dashed #f59e0b !important; }
#suggestion-mode-btn.active { background: #f59e0b; color: #fff; }

/* Suggestions Panel */
.suggestions-panel-wrapper { width: 280px; border-left: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; }
.suggestions-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.suggestions-list { padding: 8px; }
.suggestion-item { padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.suggestion-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.suggestion-author { font-weight: 600; }
.suggestion-time { opacity: 0.5; }
.suggestion-diff { font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
.suggestion-diff del { background: rgba(239,68,68,0.15); color: #ef4444; text-decoration: line-through; padding: 0 2px; border-radius: 2px; }
.suggestion-diff ins { background: rgba(34,197,94,0.15); color: #22c55e; text-decoration: none; padding: 0 2px; border-radius: 2px; }
.suggestion-note { font-size: 12px; opacity: 0.7; margin-bottom: 8px; padding: 6px 8px; background: var(--bg-elevated, #1e1e2e); border-radius: 4px; }
.suggestion-actions { display: flex; gap: 6px; }
.btn-success { background: #22c55e; color: #fff; border: none; }
.btn-success:hover { background: #16a34a; }
.suggestion-delete { font-size: 11px; opacity: 0.6; font-style: italic; }

/* Collab Page */
.collab-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.collab-section h3 { margin: 0 0 16px 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.invite-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-form .input-field { flex: 1; min-width: 200px; }
.invite-link-result { margin-top: 12px; padding: 12px; background: var(--bg-elevated, #1e1e2e); border-radius: 8px; }
.invite-link-box { display: flex; gap: 6px; margin-top: 8px; }
.invite-link-box .input-field { flex: 1; font-size: 12px; }
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.role-card { padding: 16px; border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.role-icon { font-size: 28px; margin-bottom: 8px; }
.role-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.role-desc { font-size: 12px; opacity: 0.7; line-height: 1.5; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-member { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.team-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.team-info { flex: 1; }
.team-name { font-weight: 600; font-size: 14px; }
.team-role { font-size: 12px; opacity: 0.6; text-transform: capitalize; }
.team-actions { display: flex; gap: 6px; align-items: center; }
.team-actions .input-sm { padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); }
.activity-feed { max-height: 300px; overflow-y: auto; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05)); }
.activity-icon { width: 24px; text-align: center; padding-top: 2px; }
.activity-content { font-size: 13px; line-height: 1.5; }
.activity-time { font-size: 11px; opacity: 0.4; margin-left: 8px; }
.panel-empty-state { text-align: center; padding: 24px; opacity: 0.55; font-size: 14px; }

/* Team Chat */
.collab-chat-container { display: flex; flex-direction: column; height: 300px; }
.collab-chat-messages { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-msg { font-size: 13px; padding: 6px 10px; background: var(--bg-elevated, #1e1e2e); border-radius: 8px; max-width: 80%; }
.chat-msg.mine { align-self: flex-end; background: var(--orange); color: #fff; }
.chat-author { font-weight: 600; font-size: 11px; display: block; }
.chat-msg.mine .chat-author { display: none; }
.chat-text { display: block; }
.chat-time { font-size: 10px; opacity: 0.5; display: block; text-align: right; }
.collab-chat-input { display: flex; gap: 6px; padding: 8px 0 0; border-top: 1px solid var(--border); }
.collab-chat-input .input-field { flex: 1; }

/* ============ AI CO-WRITER PANEL ============ */
.ai-cowriter-panel { width: 340px; border-left: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; display: flex; flex-direction: column; }
.ai-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ai-panel-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.codex-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: rgba(34,197,94,0.15); color: #16a34a; border: 1px solid rgba(34,197,94,0.3); white-space: nowrap; cursor: help; }
.codex-badge.codex-empty { background: rgba(156,163,175,0.15); color: var(--text-muted); border-color: var(--border); }
.ai-panel-body { padding: 12px; flex: 1; overflow-y: auto; }
.ai-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.ai-action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: 11px; cursor: pointer; transition: all 0.15s; text-align: left; }
.ai-action-btn:hover { border-color: var(--orange); background: rgba(232,85,45,0.05); }
.ai-action-btn i { color: var(--orange); width: 14px; text-align: center; }
.ai-tone-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.ai-tone-row label { white-space: nowrap; }
.ai-tone-row select { flex: 1; }
.ai-custom-prompt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ai-custom-prompt textarea { padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text); font-size: 13px; resize: vertical; font-family: inherit; }
.ai-result-container { border: 1px solid var(--orange); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.ai-result-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(232,85,45,0.1); flex-wrap: wrap; gap: 6px; }
.ai-result-header span { font-weight: 600; font-size: 13px; }
.ai-result-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-result-text { padding: 12px; font-size: 13px; line-height: 1.7; max-height: 300px; overflow-y: auto; }
.ai-loading { display: flex; align-items: center; gap: 10px; padding: 16px; justify-content: center; }
.ai-loading-dots { display: flex; gap: 4px; }
.ai-loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: aiDot 1.4s infinite both; }
.ai-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDot { 0%,80%,100% { transform: scale(0.3); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }

/* ============ GRAMMAR PANEL ============ */
.grammar-panel { width: 340px; border-left: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; display: flex; flex-direction: column; }
.grammar-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.grammar-panel-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.grammar-panel-body { padding: 12px; flex: 1; overflow-y: auto; }
.grammar-checks-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.grammar-check-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: 13px; cursor: pointer; transition: all 0.15s; }
.grammar-check-btn:hover { border-color: var(--orange); }
.grammar-check-btn i { color: var(--orange); width: 16px; text-align: center; }
.grammar-results { padding: 4px; }
.grammar-score { text-align: center; margin-bottom: 16px; }
.score-circle { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.score-circle.good { background: rgba(34,197,94,0.15); color: #22c55e; border: 3px solid #22c55e; }
.score-circle.okay { background: rgba(245,158,11,0.15); color: #f59e0b; border: 3px solid #f59e0b; }
.score-circle.needs-work { background: rgba(239,68,68,0.15); color: #ef4444; border: 3px solid #ef4444; }
.score-label { font-size: 12px; opacity: 0.6; }
.grammar-summary { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.grammar-section { margin-bottom: 16px; }
.grammar-section h4 { font-size: 13px; margin: 0 0 8px 0; }
.grammar-section ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.grammar-issue { padding: 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; font-size: 12px; }
.grammar-issue code { background: rgba(239,68,68,0.1); padding: 1px 4px; border-radius: 3px; font-size: 12px; display: block; margin-bottom: 4px; }
.grammar-issue.error { border-left: 3px solid #ef4444; }
.grammar-issue.warning { border-left: 3px solid #f59e0b; }
.issue-desc { display: block; margin-bottom: 4px; opacity: 0.8; }
.issue-fix { display: block; color: #22c55e; font-style: italic; }
.grammar-all-clear { text-align: center; padding: 24px; color: #22c55e; font-size: 16px; }
.grammar-text-result { font-size: 13px; line-height: 1.7; }

/* ============ FOCUS / ZEN MODE ============ */
.focus-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; transition: all 0.3s; }
.focus-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); flex-shrink: 0; }
.focus-stats { display: flex; align-items: center; gap: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.focus-divider { opacity: 0.3; }
.focus-controls { display: flex; align-items: center; gap: 10px; }
.focus-select { padding: 4px 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(0,0,0,0.3); color: inherit; font-size: 12px; }
.focus-volume { width: 80px; accent-color: var(--orange); }
.focus-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.focus-toggle input { accent-color: var(--orange); }
.focus-exit-btn { padding: 6px 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; background: rgba(239,68,68,0.2); color: #ef4444; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.focus-exit-btn:hover { background: rgba(239,68,68,0.4); }
.focus-editor-wrapper { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 40px 20px; }
.focus-editor-wrapper #pages-container { max-width: 700px; width: 100%; }
.focus-goal-bar { height: 4px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.focus-goal-fill { height: 100%; background: var(--orange); transition: width 0.5s; border-radius: 0 2px 2px 0; }

/* ============ NAME GENERATOR ============ */
.name-gen-modal { max-width: 900px; width: 95vw; max-height: 85vh; }
.name-gen-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 400px; }
.name-gen-controls { display: flex; flex-direction: column; gap: 12px; }
.name-gen-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.name-cat-btn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.name-cat-btn:hover { border-color: var(--orange); }
.name-cat-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.name-cat-btn i { width: 14px; text-align: center; }
.name-gen-options { display: flex; flex-direction: column; gap: 10px; }
.name-gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-gen-field label { display: block; font-size: 12px; margin-bottom: 4px; opacity: 0.7; }
.name-gen-results { border: 1px solid var(--border); border-radius: 10px; overflow-y: auto; max-height: 500px; }
.name-gen-list { padding: 8px; }
.name-result { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05)); cursor: pointer; transition: background 0.15s; }
.name-result:hover { background: rgba(232,85,45,0.05); }
.name-result:last-child { border-bottom: none; }
.name-text { font-weight: 600; font-size: 14px; min-width: 140px; }
.name-meaning { font-size: 12px; opacity: 0.6; flex: 1; }
.name-copy { margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.name-result:hover .name-copy { opacity: 1; }

/* ============ IMPORT ============ */
.import-options { display: flex; flex-direction: column; gap: 8px; }
.import-option { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.import-option:hover { border-color: var(--orange); background: rgba(232,85,45,0.05); }
.import-option strong { display: block; font-size: 14px; }
.import-option span { font-size: 12px; opacity: 0.6; }
.import-progress { padding: 20px; text-align: center; }
.import-result { margin-top: 16px; }
.import-success { text-align: center; padding: 16px; }
.import-success h3 { margin: 12px 0 8px; }
.import-chapter-list { margin-top: 12px; max-height: 200px; overflow-y: auto; text-align: left; }
.import-chapter-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05)); }
.import-wc { margin-left: auto; font-size: 11px; opacity: 0.5; }
.import-errors { margin-top: 12px; text-align: left; font-size: 12px; color: #ef4444; }

/* ============ QUERY LETTER & PITCH ============ */
.query-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.query-tab { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 13px; transition: all 0.15s; }
.query-tab:hover { border-color: var(--orange); }
.query-tab.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.query-panel { display: none; }
.query-panel.active { display: block; }
.query-layout { display: grid; grid-template-columns: 350px 1fr; gap: 20px; min-height: 500px; }
.query-form { display: flex; flex-direction: column; gap: 8px; }
.query-form h3 { margin: 0; }
.query-hint { font-size: 13px; opacity: 0.6; line-height: 1.5; margin: 0; }
.query-field { display: flex; flex-direction: column; gap: 4px; }
.query-field label { font-size: 12px; opacity: 0.7; }
.query-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.query-result-pane { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.query-result { padding: 20px; min-height: 300px; }
.query-output { }
.query-output-actions { display: flex; gap: 6px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.query-output-text { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.query-error { color: #ef4444; padding: 20px; text-align: center; }

/* ============ COVER DESIGNER ============ */
.cover-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; height: calc(100vh - 120px); }
.cover-controls { overflow-y: auto; padding-right: 8px; }
.cover-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.cover-section h3 { margin: 0 0 10px; font-size: 14px; }
.cover-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cover-template-btn { padding: 8px; border: 2px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.cover-template-btn:hover { opacity: 0.8; }
.cover-template-btn.active { border-color: var(--orange); box-shadow: 0 0 8px var(--orange); }
.cover-preview-pane { display: flex; align-items: center; justify-content: center; background: #333; border-radius: 12px; overflow: hidden; }
.cover-canvas { box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.cover-slider { width: 100%; accent-color: var(--orange); }
.cover-file-input { font-size: 12px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .format-layout { grid-template-columns: 1fr; height: auto; }
  .format-preview-pane { min-height: 600px; }
  .sessions-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .research-layout { grid-template-columns: 1fr; }
  .research-sidebar { display: none; }
  .web-canvas-wrapper { height: 60vh; }
  .map-canvas-wrapper { height: 50vh; }
  .sessions-stats-grid { grid-template-columns: 1fr 1fr; }
  .format-layout { grid-template-columns: 1fr; }
  .preview-spread { flex-direction: column; align-items: center; }
  .ai-cowriter-panel, .grammar-panel { width: 100%; position: fixed; bottom: 0; left: 0; right: 0; height: 50vh; z-index: 100; border-left: none; border-top: 2px solid var(--orange); }
  .name-gen-layout { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: 1fr; }
  .focus-top-bar { flex-direction: column; gap: 8px; }
  .focus-controls { flex-wrap: wrap; justify-content: center; }
  .query-layout { grid-template-columns: 1fr; }
  .cover-layout { grid-template-columns: 1fr; height: auto; }
}

/* ── Enhanced Front Matter / Typography Items 4 & 7 ── */
.matter-content { margin: 4px 0 8px 22px; }
.matter-hidden { display: none; }
.format-textarea { width: 100%; min-height: 60px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--text-primary); font-family: inherit; font-size: 12px; resize: vertical; box-sizing: border-box; }
.format-textarea:focus { outline: none; border-color: var(--orange); }

/* ── Item 5: Manuscript Markers ── */
.marker-todo { background: rgba(255,165,0,0.25); border-left: 2px solid #FFA500; padding: 0 2px; }
.marker-research { background: rgba(33,150,243,0.2); border-left: 2px solid #2196F3; padding: 0 2px; }
.marker-revise { background: rgba(255,235,59,0.35); border-left: 2px solid #FFC107; padding: 0 2px; }
.marker-question { background: rgba(156,39,176,0.2); border-left: 2px solid #9C27B0; padding: 0 2px; }
.marker-note { background: rgba(76,175,80,0.2); border-left: 2px solid #4CAF50; padding: 0 2px; }
.markers-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 300px; background: var(--bg-card); border-left: 1px solid var(--border); z-index: 80; overflow-y: auto; transform: translateX(100%); transition: transform 0.2s; }
.markers-panel.open { transform: translateX(0); }
.markers-panel-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.marker-item { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.marker-item:hover { background: var(--bg-hover); }
.marker-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 6px; }
.chip-todo { background: rgba(255,165,0,0.2); color: #D97706; }
.chip-research { background: rgba(33,150,243,0.2); color: #1976D2; }
.chip-revise { background: rgba(255,235,59,0.3); color: #B45309; }
.chip-question { background: rgba(156,39,176,0.2); color: #7B1FA2; }
.chip-note { background: rgba(76,175,80,0.2); color: #388E3C; }

/* ── Item 2: Scene-Native Writing ── */
.scenes-tab-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.scenes-tab-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.scene-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: var(--bg-card); }
.scene-item:hover { border-color: var(--orange); }
.scene-item.active { border-color: var(--orange); background: var(--bg-hover); }
.scene-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.scene-editor-wrap { display: flex; flex-direction: column; height: 100%; }
.scene-editor-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.scene-editor-meta input, .scene-editor-meta select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text-primary); font-size: 12px; }
.scene-wc-badge { font-size: 11px; color: var(--text-muted); padding: 4px 10px; }

/* ── Autosave status indicator ── */
.save-status-indicator {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.save-status-indicator.saving {
  opacity: 1;
  color: var(--text-muted);
  background: transparent;
}
.save-status-indicator.saved {
  opacity: 1;
  color: #22c55e;
  background: rgba(34,197,94,0.08);
}
.save-status-indicator.unsaved {
  opacity: 1;
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
}
@keyframes spin { to { transform: rotate(360deg); } }
.save-spin { display: inline-block; animation: spin 1s linear infinite; }

/* ── Selection AI rewrite menu ── */
.sel-ctx-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 9999;
  min-width: 200px;
  padding: 4px 0;
  font-size: 13px;
}
.sel-ctx-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.sel-ctx-item {
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}
.sel-ctx-item:hover { background: var(--bg-hover, rgba(0,0,0,0.06)); }
.sel-ctx-item.loading { opacity: 0.5; cursor: wait; pointer-events: none; }
.sel-ctx-divider { border: none; border-top: 1px solid var(--border); margin: 3px 0; }
.sel-ctx-preview {
  margin: 0 10px 6px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-height: 80px;
  overflow: hidden;
  font-style: italic;
}

/* ── Panel hidden state fixes ── */
/* Without these, classList.toggle('hidden') on these panels is a no-op */
.suggestions-panel-wrapper.hidden { display: none !important; }
.revision-panel-wrapper.hidden    { display: none !important; }
/* Note: .markers-panel uses transform slide — no hidden rule needed */

/* ── Prose / Scenes tab visibility ── */
/* Inactive tab: bump to text-primary so the pen icon is clearly legible */
.scenes-tab-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scenes-tab-btn:hover:not(.active) {
  background: var(--bg-hover, rgba(0,0,0,0.08));
  border-color: var(--text-muted);
}
.scenes-tab-btn.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  font-weight: 600;
}

/* ── Item 8: NaNoWriMo Mode ── */
.nano-banner { background: linear-gradient(135deg, #E8552D, #c0392b); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; margin: -4px -4px 8px -4px; }
.nano-progress-bar { height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.nano-progress-fill { height: 100%; background: #fff; border-radius: 3px; transition: width 0.5s; }
.nano-stats { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; }
.nano-stat { display: flex; flex-direction: column; align-items: center; }
.nano-stat-val { font-size: 18px; font-weight: 800; }
.nano-stat-lbl { font-size: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }
.nano-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nano-badge { font-size: 18px; opacity: 0.3; transition: all 0.3s; cursor: help; }
.nano-badge.earned { opacity: 1; transform: scale(1.2); }

/* ── Codex Mention Timeline ── */
.mention-timeline { display: flex; gap: 2px; flex-wrap: wrap; margin: 10px 0; }
.mention-seg { width: 18px; height: 18px; border-radius: 3px; cursor: pointer; transition: transform 0.1s; }
.mention-seg:hover { transform: scale(1.3); }
.mention-seg-0 { background: var(--border); }
.mention-seg-1 { background: #90CAF9; }
.mention-seg-2 { background: #42A5F5; }
.mention-seg-3 { background: #1565C0; }
.mention-list-item { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.mention-list-item:hover { background: var(--bg-hover); }
.mention-count-badge { display: inline-block; background: var(--orange); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 10px; font-weight: 700; margin-left: 6px; }
.mention-snippet { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   SETTINGS PAGE v2
   ═══════════════════════════════════════════════════ */

.settings-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - 60px);
  overflow: hidden;
}

/* Left nav */
.settings-nav {
  width: 220px;
  min-width: 220px;
  padding: 24px 12px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.settings-nav-item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
}

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

.settings-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.settings-nav-item.active i { opacity: 1; }

.settings-nav-danger { color: #e74c3c !important; }
.settings-nav-danger:hover { background: rgba(231,76,60,0.1) !important; }
.settings-nav-danger.active { background: rgba(231,76,60,0.12) !important; color: #e74c3c !important; }

.settings-nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.settings-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}

/* Right content */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  max-width: 780px;
}

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

/* Section header */
.settings-section-header {
  margin-bottom: 24px;
}

.settings-section-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.settings-section-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* Card */
.settings-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

/* Avatar */
.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.settings-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #b03820);
  color: white;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -1px;
}

.settings-avatar-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.settings-avatar-email { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.settings-avatar-since { font-size: 11px; color: var(--text-muted); margin-top: 4px; opacity: 0.7; }

/* Fields */
.settings-field {
  margin-bottom: 20px;
}
.settings-field:last-child { margin-bottom: 0; }

.settings-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.settings-input {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

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

.settings-field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
  display: block;
}

/* Buttons */
.settings-btn-primary {
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.settings-btn-primary:hover { background: var(--accent-hover); }

.settings-btn-outline {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.settings-btn-danger-solid {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #e74c3c;
  background: transparent;
  color: #e74c3c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.settings-btn-danger-solid:hover { background: #e74c3c; color: white; }

/* Toggle group (theme / language) */
.settings-toggle-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.settings-toggle-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 24px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 100px;
}
.settings-toggle-option i { font-size: 18px; }
.settings-toggle-option span { font-size: 13px; font-weight: 600; }
.settings-toggle-option small { font-size: 10px; opacity: 0.6; }
.settings-toggle-option:hover { border-color: var(--accent); color: var(--text-primary); }
.settings-toggle-option.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.settings-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}
.settings-lang-option:hover { border-color: var(--accent); color: var(--text-primary); }
.settings-lang-option.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Toggle switch */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.settings-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.settings-toggle-row:first-child { padding-top: 0; }

.settings-toggle-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.settings-toggle-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.settings-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: 0.3s;
}
.settings-switch-slider:before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.settings-switch input:checked + .settings-switch-slider { background: var(--accent); }
.settings-switch input:checked + .settings-switch-slider:before { transform: translateX(20px); }

/* Billing */
.settings-billing-card { position: relative; }

.settings-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.settings-plan-title-group { display: flex; align-items: center; gap: 12px; }

.settings-plan-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--accent);
}

.settings-plan-name-big { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.settings-plan-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.settings-plan-badge-pill {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-plan-badge-free { background: var(--bg-hover); color: var(--text-muted); }
.settings-plan-badge-writer { background: #2563EB22; color: #60a5fa; }
.settings-plan-badge-pro { background: var(--accent-soft); color: var(--accent); }
.settings-plan-badge-lifetime { background: #7c3aed22; color: #a78bfa; }

.settings-plan-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.settings-plan-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-plan-feature-item i {
  color: var(--accent);
  width: 14px;
  text-align: center;
  font-size: 11px;
}

.settings-plan-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Usage stats */
.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.settings-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.settings-usage-stat {
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.settings-usage-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.settings-usage-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.settings-usage-bar-wrap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.settings-usage-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.settings-usage-bar {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 6px;
  overflow: hidden;
}

.settings-usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.5s ease;
}

/* Plan comparison */
.settings-plan-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.settings-plan-option {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  position: relative;
  transition: border-color 0.15s;
}

.settings-plan-option.settings-plan-featured {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.settings-plan-option.settings-plan-current { border-color: #10b981; }

.settings-plan-badge-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-plan-opt-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-plan-opt-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin: 8px 0;
}

.settings-plan-opt-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.settings-plan-opt-features {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settings-plan-opt-features li {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-plan-opt-features li i { font-size: 10px; width: 12px; }
.settings-plan-opt-features li.feat-on i { color: var(--accent); }
.settings-plan-opt-features li.feat-off { opacity: 0.4; }
.settings-plan-opt-features li.feat-off i { color: var(--text-muted); }

.settings-plan-cta {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 4px;
}

/* File history */
.settings-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-history-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
}

.settings-history-info { flex: 1; min-width: 0; }

.settings-history-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-history-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-history-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Trash in settings */
.settings-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.settings-search-input {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
}

.settings-trash-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-trash-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.settings-trash-info { flex: 1; min-width: 0; }
.settings-trash-name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-trash-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-trash-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Danger zone */
.settings-danger-card { border-color: rgba(231,76,60,0.25); }

.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.settings-danger-row:first-child { padding-top: 0; }
.settings-danger-row:last-child { border-bottom: none; padding-bottom: 0; }

.settings-danger-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.settings-danger-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Empty state */
.settings-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.settings-empty-state i { font-size: 32px; opacity: 0.3; margin-bottom: 12px; display: block; }
.settings-empty-state p { font-size: 14px; margin: 0; }
.settings-empty-state small { font-size: 12px; opacity: 0.7; margin-top: 4px; display: block; }

/* Responsive narrow */
@media (max-width: 600px) {
  .settings-nav { width: 180px; min-width: 180px; }
  .settings-content { padding: 20px 16px; }
  .settings-plan-compare { grid-template-columns: 1fr; }
  .settings-usage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════
   MOODBOARDS v2
   ═══════════════════════════════════════════════════ */

/* Board list */
.board-card { display:flex;flex-direction:column;cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--bg-secondary);transition:transform .15s,box-shadow .15s;position:relative; }
.board-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.25); }
.board-card-preview { height:160px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--text-muted);font-size:36px; }
.board-card-preview img { width:100%;height:100%;object-fit:cover; }
.board-card-body { padding:14px 14px 8px;flex:1; }
.board-card-body h3 { font-size:15px;font-weight:700;margin:0 0 4px;color:var(--text-primary); }
.board-card-body p { font-size:12px;color:var(--text-muted);margin:0; }
.board-card-menu { display:flex;gap:4px;padding:8px 10px;border-top:1px solid var(--border);opacity:0;transition:opacity .15s; }
.board-card:hover .board-card-menu { opacity:1; }
.board-codex-badge { display:inline-flex;align-items:center;gap:4px;font-size:10px;background:var(--accent-soft);color:var(--accent);padding:2px 8px;border-radius:10px;margin-top:4px;font-weight:600; }

/* Board view */
.mb-board-desc { color:var(--text-muted);font-size:13px;margin:0 0 16px;padding:0 2px; }
.mb-actions-row { gap:6px!important;flex-wrap:wrap; }
.mb-mode-toggle { display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden; }
.mb-mode-btn { padding:6px 10px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;font-size:13px; }
.mb-mode-btn.active { background:var(--accent);color:white; }
.btn-ai { border-color:var(--accent)!important;color:var(--accent)!important; }
.btn-ai:hover,.btn-ai.active,.btn-primary.btn-ai { background:var(--accent)!important;color:white!important; }

/* Board items */
.moodboard-masonry { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;align-items:start; }
.moodboard-item { border-radius:12px;overflow:hidden;position:relative;cursor:default;transition:box-shadow .15s; }
.moodboard-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.3); }
.moodboard-item:hover .mb-item-actions { opacity:1; }
.moodboard-image img { width:100%;display:block;min-height:100px;object-fit:cover; }
.mb-img-err { padding:32px;text-align:center;color:var(--text-muted);background:var(--bg-tertiary); }
.moodboard-caption { padding:8px 10px;font-size:12px;color:var(--text-secondary);background:var(--bg-secondary);border-top:1px solid var(--border); }
.moodboard-color { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px 14px;min-height:100px; }
.color-hex { font-size:12px;font-weight:700;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:monospace; }
.color-name { font-size:11px;color:rgba(255,255,255,.65); }
.moodboard-text,.moodboard-quote { padding:16px;background:var(--bg-secondary);border:1px solid var(--border); }
.moodboard-text p,.moodboard-quote p { font-size:14px;color:var(--text-primary);margin:8px 0 0; }
.mb-quote-icon { color:var(--accent);font-size:18px; }
.mb-item-actions { position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;z-index:5; }
.mb-action-btn { width:28px;height:28px;border-radius:6px;border:none;background:rgba(0,0,0,.6);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .15s;backdrop-filter:blur(4px); }
.mb-action-btn:hover { background:rgba(0,0,0,.85); }
.mb-action-del:hover { background:rgba(231,76,60,.8)!important; }

/* Canvas mode */
.mb-canvas-board { position:relative;min-height:700px;background:repeating-conic-gradient(var(--bg-hover) 0% 25%,transparent 0% 50%) 0 0/20px 20px;border:1px solid var(--border);border-radius:12px;overflow:auto; }
.mb-canvas-item { position:absolute;cursor:grab;user-select:none;min-width:120px;box-shadow:0 4px 12px rgba(0,0,0,.3); }
.mb-canvas-item:active { cursor:grabbing; }
.mb-canvas-item .moodboard-image { height:auto; }

/* Palette extraction */
.mb-palette-overlay { position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;padding:12px;z-index:10;border-radius:12px; }
.mb-palette-title { font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px; }
.mb-palette-swatches { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.mb-palette-swatch { border-radius:8px;height:50px;position:relative;cursor:default;overflow:hidden; }
.mb-palette-add { position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:4px;border:none;background:rgba(0,0,0,.5);color:white;cursor:pointer;font-size:10px;opacity:0;transition:opacity .15s; }
.mb-palette-swatch:hover .mb-palette-add { opacity:1; }
.mb-palette-hex { position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:9px;color:rgba(255,255,255,.8);font-family:monospace;text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* AI Scene drawer */
.mb-ai-intro { display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--accent-soft);border-radius:10px;font-size:13px;color:var(--text-secondary);margin-bottom:4px; }
.mb-ai-scene-result { background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:16px; }
.mb-ai-output { font-size:14px;color:var(--text-primary);line-height:1.7; }
.mb-ai-output h4 { color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin:12px 0 6px; }

/* Unsplash tabs */
.mb-img-tabs { display:flex;gap:0;margin-bottom:14px;border:1px solid var(--border);border-radius:8px;overflow:hidden; }
.mb-tab-btn { flex:1;padding:8px;border:none;background:var(--bg-hover);color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;border-right:1px solid var(--border); }
.mb-tab-btn:last-child { border-right:none; }
.mb-tab-btn:hover { color:var(--text-primary); }
.mb-tab-btn.active { background:var(--accent);color:white; }
.mb-tab-panel { margin-bottom:8px; }
.mb-unsplash-search-row { display:flex;gap:8px;margin-bottom:12px; }
.mb-unsplash-search-row input { flex:1; }
.mb-unsplash-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:280px;overflow-y:auto;border-radius:8px; }
.mb-unsplash-item { border-radius:6px;overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;transition:border-color .15s,transform .1s; }
.mb-unsplash-item:hover { transform:scale(1.02); }
.mb-unsplash-item.selected { border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft); }
.mb-unsplash-item img { width:100%;height:80px;object-fit:cover;display:block; }
.mb-unsplash-credit { position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:rgba(255,255,255,.8);font-size:8px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mb-unsplash-attr { font-size:10px;color:var(--text-muted);text-align:center;margin-top:6px; }
.mb-unsplash-attr a { color:var(--accent); }
.mb-unsplash-error { padding:20px;text-align:center;font-size:13px;color:var(--text-muted);background:var(--bg-tertiary);border-radius:8px; }

/* ═══════════════════════════════════════════════════
   RESEARCH BOARD v2
   ═══════════════════════════════════════════════════ */

/* Search bar */
.rb-search-bar { display:flex;align-items:center;gap:6px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:6px 12px;min-width:200px;flex:1;max-width:300px; }
.rb-search-bar i { color:var(--text-muted);font-size:12px; }
.rb-search-bar input { border:none;background:transparent;color:var(--text-primary);font-size:13px;outline:none;flex:1;width:100%; }
.rb-search-clear { border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:0;font-size:11px; }

/* AI Panel */
.rb-ai-panel { max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .35s;opacity:0;margin-bottom:0; }
.rb-ai-panel.open { max-height:500px;opacity:1;margin-bottom:16px; }
.rb-ai-panel-inner { background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:1px solid var(--accent);border-radius:14px;padding:20px;box-shadow:0 4px 24px rgba(232,85,45,.1); }
.rb-ai-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px; }
.rb-ai-header span:first-child { font-size:15px;font-weight:700;color:var(--text-primary); }
.rb-ai-tag { font-size:11px;color:var(--text-muted);background:var(--bg-hover);padding:3px 10px;border-radius:10px; }
.rb-ai-input-row { display:flex;gap:8px; }
.rb-ai-input-row input { flex:1;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:14px;outline:none; }
.rb-ai-input-row input:focus { border-color:var(--accent); }
.rb-ai-response { margin-top:16px;border-top:1px solid var(--border);padding-top:16px; }
.rb-ai-loading { color:var(--text-muted);font-size:13px; }
.rb-ai-answer { font-size:14px;color:var(--text-primary);line-height:1.7;white-space:pre-wrap; }
.rb-ai-answer-actions { display:flex;gap:8px;margin-top:12px; }
.rb-ai-error { color:#e74c3c;font-size:13px; }

/* Research cards enhanced */
.research-card { background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:default;transition:box-shadow .15s,border-color .15s; }
.research-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.2);border-color:var(--border-light); }
.research-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.research-card-actions { display:flex;gap:2px;opacity:0;transition:opacity .15s; }
.research-card:hover .research-card-actions { opacity:1; }
.research-type-badge { font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px; }
.research-card h4 { font-size:14px;font-weight:700;margin:0 0 6px;color:var(--text-primary); }
.research-content { font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0; }
.research-link { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);text-decoration:none;margin-bottom:6px; }
.research-link:hover { color:var(--accent); }
.link-favicon { width:14px;height:14px;border-radius:2px; }
.research-card-image { margin:0 -14px 10px;overflow:hidden;max-height:140px; }
.research-card-image img { width:100%;object-fit:cover;display:block; }
.research-card-footer { margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px; }
.research-folder-tag { font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px; }
.rb-card-tags { display:flex;gap:4px;flex-wrap:wrap; }

/* Tag chips */
.rb-tag-chip { display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:all .15s;border:1px solid transparent; }
.rb-tag-chip:hover,.rb-tag-chip.active { background:var(--accent);color:white; }
.rb-tag-chip.small { font-size:9px;padding:1px 6px; }
.rb-tag-chip.editable { cursor:default; }
.rb-tag-chip.editable i { cursor:pointer;opacity:.6; }
.rb-tag-chip.editable i:hover { opacity:1; }

/* Tag input */
.rb-tag-input-wrap { display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg-hover);min-height:40px;cursor:text; }
.rb-tag-input-wrap:focus-within { border-color:var(--accent); }
.rb-tag-input-wrap input { border:none;background:transparent;color:var(--text-primary);font-size:13px;outline:none;min-width:120px;flex:1; }

/* Tag cloud in sidebar */
.rb-tag-cloud { display:flex;flex-wrap:wrap;gap:5px;margin-top:6px; }

/* Summarize button in drawer */
.rb-summarize-btn { display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;margin-left:8px;font-weight:600;transition:all .15s;vertical-align:middle; }
.rb-summarize-btn:hover { background:var(--accent);color:white; }

/* Misc */
.label-opt { font-weight:400;text-transform:none;color:var(--text-muted);font-size:11px; }

/* ═══════════════════════════════════════════════════
   TTS USAGE METER
   ═══════════════════════════════════════════════════ */

.tts-usage-meter {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
}

.tts-usage-meter.warning { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.tts-usage-meter.over    { border-color: rgba(231,76,60,.4);  background: rgba(231,76,60,.06); }

.tts-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.tts-usage-label { font-weight: 600; color: var(--text-secondary); }
.tts-usage-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.tts-usage-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tts-usage-bar-track {
  flex: 1;
  height: 5px;
  background: var(--bg-hover);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.tts-usage-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .4s ease;
}

.tts-usage-bar-preview {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  opacity: .3;
  border-radius: 0 5px 5px 0;
}

.tts-usage-pct {
  font-size: 10px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.tts-usage-reset  { font-size: 10px; color: var(--text-muted); margin-top: 5px; }
.tts-usage-alert  { font-size: 11px; margin-top: 6px; font-weight: 600; }
.tts-usage-warn   { color: #f59e0b; }
.tts-usage-over   { color: #e74c3c; }

/* Chapter estimate */
.tts-chapter-est {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

.tts-chapter-est i { color: var(--accent); }

/* Voice footer */
.tts-voice-footer {
  font-size: 10px;
  color: var(--text-muted);
  padding: 6px 2px 0;
}

/* EL error box */
.tts-el-error {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.tts-el-error-title {
  color: #ef4444;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════
   TTS LANGUAGE BADGE
   ═══════════════════════════════════════════════════ */

.tts-lang-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.tts-lang-badge.tts-lang-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.tts-lang-model {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-weight: 600;
}

.tts-lang-active .tts-lang-model {
  background: rgba(232,85,45,.15);
  color: var(--accent);
}

.tts-lang-note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
}

.tts-lang-active .tts-lang-note { color: var(--accent); opacity: .8; }

.tts-lang-change {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s;
}

.tts-lang-change:hover { color: var(--accent); }

.tts-lang-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.tts-lang-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.tts-lang-tab:hover { border-color: rgba(255,255,255,0.2); color: var(--text-primary); }
.tts-lang-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tts-lang-tab-count { opacity: .75; font-size: 10px; font-weight: 700; }
.tts-lang-tab.active .tts-lang-tab-count { opacity: .9; }

.tts-multilang-note {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(232,85,45,0.06);
  border: 1px solid rgba(232,85,45,0.15);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0 4px;
  line-height: 1.5;
}

/* ── Dialogue Formatter ─────────────────────────── */
.dialogue-fmt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.dialogue-fmt-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(232,85,45,0.15);
  color: var(--accent);
  border: 1px solid rgba(232,85,45,0.3);
}
.dialogue-fmt-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.dialogue-fmt-example {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
  font-style: italic;
  line-height: 1.6;
}
.dialogue-fmt-example b { color: var(--text-primary); font-style: normal; }
.dialogue-fmt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Word Doctor ────────────────────────────────────── */
.wd-score-bar { display:flex; align-items:center; gap:16px; padding:16px; background:var(--bg-hover,rgba(255,255,255,0.04)); border-radius:10px; margin-bottom:12px; }
.wd-score-ring { width:72px; height:72px; border-radius:50%; border:4px solid var(--score-color,#4CAF50); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.wd-score-num { font-size:22px; font-weight:800; color:var(--score-color,#4CAF50); line-height:1; }
.wd-score-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.wd-summary { flex:1; }
.wd-grade { font-size:28px; margin-bottom:4px; }
.wd-summary p { font-size:13px; color:var(--text-muted); line-height:1.5; margin:0; }
.wd-tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; flex-wrap:wrap; }
.wd-tab { background:none; border:none; color:var(--text-muted); font-size:12px; font-weight:600; padding:4px 10px; border-radius:6px; cursor:pointer; transition:all 0.15s; }
.wd-tab.active { background:var(--orange-glow,rgba(232,85,45,0.15)); color:var(--orange); }
.wd-tab-badge { background:var(--bg-hover,rgba(255,255,255,0.08)); border-radius:8px; padding:1px 5px; font-size:10px; margin-left:3px; }
.wd-pane { max-height:260px; overflow-y:auto; }
.wd-item { padding:10px 12px; border-radius:8px; margin-bottom:8px; border:1px solid var(--border); }
.wd-overused { border-left:3px solid #FF9800; }
.wd-cliche { border-left:3px solid #F44336; }
.wd-weak { border-left:3px solid #9E9E9E; }
.wd-item-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.wd-word { font-weight:700; font-size:13px; }
.wd-count { font-size:11px; color:var(--text-muted); background:var(--bg-hover,rgba(255,255,255,0.06)); padding:2px 6px; border-radius:4px; }
.wd-note { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.wd-context { font-size:11px; color:var(--text-muted); font-style:italic; margin-bottom:4px; }
.wd-alts { display:flex; flex-wrap:wrap; gap:4px; }
.wd-alt-chip { font-size:11px; padding:2px 8px; border-radius:10px; background:rgba(232,85,45,0.12); color:var(--orange); border:1px solid rgba(232,85,45,0.25); cursor:pointer; }
.wd-none { font-size:13px; color:var(--text-muted); padding:8px 0; }
.wd-freq-chart { display:flex; flex-direction:column; gap:6px; }
.wd-freq-bar { display:flex; align-items:center; gap:8px; font-size:12px; }
.wd-freq-word { width:80px; flex-shrink:0; font-weight:600; }
.wd-freq-fill { height:6px; border-radius:3px; background:var(--orange); flex:1; transition:width 0.3s; }
.wd-freq-num { width:24px; text-align:right; color:var(--text-muted); font-size:11px; }

/* ── Author DNA ─────────────────────────────────────── */
.dna-section-title { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin:12px 0 8px; }
.dna-match { padding:12px; border-radius:10px; border:1px solid var(--border); margin-bottom:8px; }
.dna-primary { border-color:rgba(232,85,45,0.4); background:rgba(232,85,45,0.04); }
.dna-match-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.dna-author { font-weight:700; font-size:15px; margin-bottom:2px; }
.dna-known-for { font-size:11px; color:var(--text-muted); }
.dna-similarity-ring { text-align:center; flex-shrink:0; }
.dna-sim-num { font-size:20px; font-weight:800; color:var(--orange); display:block; line-height:1; }
.dna-sim-label { font-size:10px; color:var(--text-muted); }
.dna-traits { display:flex; flex-wrap:wrap; gap:4px; }
.dna-trait-chip { font-size:11px; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,0.06); color:var(--text-muted); }
.dna-fingerprint { display:grid; grid-template-columns:1fr; gap:6px; }
.dna-fp-row { display:flex; justify-content:space-between; font-size:12px; padding:5px 8px; background:rgba(255,255,255,0.03); border-radius:5px; }
.dna-fp-key { color:var(--text-muted); font-weight:600; }
.dna-fp-val { color:var(--text); text-align:right; max-width:60%; }
.dna-list { font-size:13px; color:var(--text-muted); padding-left:16px; line-height:1.7; }
.dna-develop li { color:var(--orange); }
.dna-genre-fit { margin-top:12px; font-size:13px; color:var(--text-muted); padding:8px 12px; background:rgba(255,255,255,0.03); border-radius:6px; }

/* ── Chapter Health Score ───────────────────────────── */
.hs-hero { display:flex; align-items:center; gap:20px; padding:16px; background:var(--bg-hover,rgba(255,255,255,0.04)); border-radius:10px; margin-bottom:16px; }
.hs-score-ring { width:80px; height:80px; border-radius:50%; background:conic-gradient(var(--hs-color,#4CAF50) var(--hs-deg,0deg), rgba(255,255,255,0.08) 0deg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hs-score-inner { width:64px; height:64px; border-radius:50%; background:var(--bg-card,#1a1a1a); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hs-total { font-size:24px; font-weight:800; color:var(--hs-color,#4CAF50); line-height:1; }
.hs-max { font-size:10px; color:var(--text-muted); }
.hs-grade-block { flex:1; }
.hs-grade { font-size:36px; font-weight:800; line-height:1; margin-bottom:6px; }
.hs-encourage { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }
.hs-dims { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.hs-dim { }
.hs-dim-header { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:4px; }
.hs-dim-score { font-weight:700; }
.hs-dim-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin-bottom:3px; overflow:hidden; }
.hs-dim-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.hs-dim-note { font-size:11px; color:var(--text-muted); }
.hs-callout { padding:10px 12px; border-radius:8px; margin-bottom:8px; }
.hs-best { background:rgba(76,175,80,0.08); border-left:3px solid #4CAF50; }
.hs-weak { background:rgba(255,152,0,0.08); border-left:3px solid #FF9800; }
.hs-fix { background:rgba(232,85,45,0.08); border-left:3px solid var(--orange); }
.hs-callout-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; color:var(--text-muted); }
.hs-quote { font-style:italic; font-size:13px; color:var(--text); margin:0; line-height:1.5; }
.hs-fix-text { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }

/* ── Writing Stats ──────────────────────────────────── */
.ws-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.ws-stat { background:var(--bg-hover,rgba(255,255,255,0.04)); border-radius:8px; padding:10px; text-align:center; }
.ws-num-big { font-size:20px; font-weight:800; color:var(--text); display:block; line-height:1; margin-bottom:3px; }
.ws-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.ws-readability { margin-bottom:14px; }
.ws-rl-header { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:6px; }
.ws-rl-score { font-weight:700; }
.ws-rl-bar { height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
.ws-rl-fill { height:100%; border-radius:4px; transition:width 0.5s; }
.ws-section-title { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin:12px 0 8px; }
.ws-freq { display:flex; flex-direction:column; gap:5px; }
.ws-freq-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.ws-word { width:90px; font-weight:600; flex-shrink:0; }
.ws-bar { flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.ws-bar-fill { height:100%; border-radius:3px; background:var(--orange); }
.ws-num { width:24px; text-align:right; color:var(--text-muted); font-size:11px; }
.ws-longest-sent { font-size:12px; font-style:italic; color:var(--text-muted); padding:8px 12px; background:rgba(255,255,255,0.03); border-radius:6px; border-left:2px solid var(--border); }

/* ── Onboarding Tour ──────────────────────────────────────────────────────── */
.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(1px);
}
.tour-card {
  position: absolute;
  background: #1e1e1e;
  border: 1px solid var(--orange, #E8552D);
  border-radius: 12px;
  padding: 24px;
  width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: tourFadeIn 0.25s ease;
  z-index: 1;
}
@keyframes tourFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-icon { font-size: 28px; margin-bottom: 10px; }
.tour-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.tour-desc  { font-size: 13px; color: #aaa; line-height: 1.5; margin-bottom: 16px; }
.tour-dots  { display: flex; gap: 6px; margin-bottom: 14px; }
.tour-dot   { width: 8px; height: 8px; border-radius: 50%; background: #444; transition: background 0.2s; }
.tour-dot.active { background: var(--orange, #E8552D); }
.tour-nav   { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-final-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tour-final-actions .btn { flex: 1; font-size: 12px; }

/* ── Notification Bell ────────────────────────────────────────────────────── */
.notif-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell { background: none; border: none; color: #aaa; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 16px; transition: color 0.2s; }
.notif-bell:hover { color: #fff; background: rgba(255,255,255,0.07); }
.notif-badge { position: absolute; top: 2px; right: 2px; background: var(--orange, #E8552D); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center; pointer-events: none; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 320px; max-height: 400px; overflow-y: auto;
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 500; display: none;
}
.notif-panel.open { display: block; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; font-weight: 600; color: #fff; }
.notif-panel-header button { background: none; border: none; color: #888; cursor: pointer; font-size: 12px; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background 0.15s; }
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { background: rgba(232,85,45,0.07); }
.notif-item-icon { font-size: 14px; color: var(--orange, #E8552D); flex-shrink: 0; margin-top: 2px; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 600; color: #f0f0f0; }
.notif-item-msg   { font-size: 12px; color: #888; margin-top: 2px; }
.notif-item-time  { font-size: 11px; color: #555; margin-top: 4px; }
.notif-item-dismiss { background: none; border: none; color: #555; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.notif-empty { padding: 32px 16px; text-align: center; color: #666; font-size: 13px; }

/* ── Writing Goals Widget ─────────────────────────────────────────────────── */
.writing-goals-widget { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.writing-goals-widget h3 { font-size: 14px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.goal-stat { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 12px; }
.goal-stat-label { font-size: 11px; color: #666; margin-bottom: 4px; }
.goal-stat-value { font-size: 20px; font-weight: 700; color: #fff; }
.goal-stat-sub   { font-size: 11px; color: #888; margin-top: 2px; }
.goal-progress-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.goal-progress-fill { height: 100%; background: var(--orange, #E8552D); border-radius: 3px; transition: width 0.5s ease; }
.week-chart { display: flex; align-items: flex-end; gap: 4px; height: 48px; margin-top: 12px; }
.week-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.week-bar { width: 100%; background: rgba(232,85,45,0.3); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 0.4s ease; }
.week-bar.today { background: var(--orange, #E8552D); }
.week-bar-label { font-size: 9px; color: #555; }

/* ── Originality Badges ──────────────────────────────────────────────────── */
.originality-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
  cursor: pointer; user-select: none; vertical-align: middle;
}
.originality-badge.clean { background: #14532d22; color: #4ade80; border: 1px solid #4ade8044; }
.originality-badge.warn { background: #7c150022; color: #f87171; border: 1px solid #f8717144; }
.originality-badge.info { background: #78350f22; color: #fbbf24; border: 1px solid #fbbf2444; }

/* ── Sprint 2: Header & Footer ─────────────────────────────────────────── */
.page-hf-header, .page-hf-footer {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted);
  padding: 6px 0; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  user-select: none; pointer-events: none;
}
.page-hf-footer {
  border-top: 1px solid var(--border-light, #e0e0e0);
  border-bottom: none; margin-top: 24px; margin-bottom: 0;
}
.hf-zone { flex: 1; }
.hf-center { text-align: center; }
.hf-right { text-align: right; }
.hf-input { background: var(--bg-input, #2a2a2a); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 4px 8px; font-size: 12px; box-sizing: border-box; }

/* ── Sprint 2: Footnotes ────────────────────────────────────────────────── */
.footnotes-area {
  border-top: 1px solid var(--border); margin-top: 40px; padding-top: 16px;
}
.footnote-item {
  font-size: 12px; color: var(--text-secondary); display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-start;
}
.footnote-text { flex: 1; min-height: 1em; outline: none; border-bottom: 1px dashed transparent; }
.footnote-text:focus { border-bottom-color: var(--accent); }
.fn-delete-btn { opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.footnote-item:hover .fn-delete-btn { opacity: 1; }
.sw-footnote-ref { color: var(--accent, #E8552D); cursor: pointer; font-size: 0.75em; }
.fn-flash { background: rgba(232,85,45,0.2); border-radius: 4px; transition: background 0.5s; }

/* ── Sprint 2: Drop Caps ────────────────────────────────────────────────── */
.drop-cap {
  float: left; font-size: 4em; line-height: 0.8;
  margin: 0.1em 0.1em 0 0;
  font-family: var(--font-writing, Georgia, serif);
  font-weight: 700;
}
.drop-cap-plain { color: var(--text); }
.drop-cap-colored { color: var(--accent, #E8552D); }
.drop-cap-outlined {
  color: transparent; -webkit-text-stroke: 2px var(--accent, #E8552D);
}
.drop-cap-picker {
  background: var(--bg-card, #1e1e1e); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.dcp-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.dcp-options { display: flex; gap: 8px; }
.dcp-opt {
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-hover); font-size: 18px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dcp-opt:hover { background: var(--accent); color: #fff; }
.dcp-colored { color: var(--accent, #E8552D); }
.dcp-outlined { color: transparent; -webkit-text-stroke: 1.5px var(--accent, #E8552D); }
.dcp-remove { font-size: 12px; color: var(--text-muted); }

/* ── Sprint 2: Word Heatmap ─────────────────────────────────────────────── */
.word-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.word-chip {
  padding: 4px 10px; border-radius: 20px;
  background: var(--bg-card, #1e1e1e); cursor: pointer;
  transition: background 0.2s;
}
.word-chip:hover { background: var(--accent); color: #fff; }
.word-chip.overused { background: rgba(232,85,45,0.15); color: #E8552D; }
.hm-overused-row td { background: rgba(232,85,45,0.05); }

/* ── Sprint 2: Comment Threads ──────────────────────────────────────────── */
.comment-replies { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.comment-reply { margin-bottom: 6px; }
.reply-author { font-size: 11px; font-weight: 600; color: var(--accent); margin-right: 6px; }
.reply-date { font-size: 10px; color: var(--text-muted); }
.reply-text { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.comment-reply-form { display: flex; gap: 6px; margin-top: 8px; }
.reply-input {
  flex: 1; background: var(--bg-input, #2a2a2a); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; font-size: 12px; color: var(--text);
}
.reply-input:focus { outline: none; border-color: var(--accent); }
.resolved-badge {
  font-size: 11px; background: #14532d33; color: #4ade80; border-radius: 10px;
  padding: 1px 6px; margin-left: 4px;
}
.comment-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #E8552D); color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; padding: 1px 5px; vertical-align: top; margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Tropes Library
══════════════════════════════════════════════════════════ */
.tropes-panel-content { padding: 16px; }

.trope-genre-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.trope-genre-tab {
  background: var(--bg-card, #2a2a2a); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px; font-size: 12px; cursor: pointer;
  color: var(--text-muted); transition: all 0.2s;
}
.trope-genre-tab:hover { border-color: var(--accent); color: var(--text); }
.trope-genre-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.trope-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.trope-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  cursor: pointer; transition: all 0.2s; background: var(--bg-card);
  position: relative;
}
.trope-card:hover { border-color: var(--accent); }
.trope-card.selected { border-color: var(--accent); background: rgba(232,85,45,0.08); }
.trope-check {
  position: absolute; top: 8px; right: 8px; color: var(--accent);
  font-size: 14px; font-weight: 700;
}
.trope-emoji { font-size: 24px; margin-bottom: 6px; }
.trope-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.trope-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.trope-footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.trope-sel-count { font-size: 13px; color: var(--accent); font-weight: 600; flex: 1; }

/* ═══════════════════════════════════════════════════════════
   Marketing Copy Generator
══════════════════════════════════════════════════════════ */
.marketing-panels { display: flex; flex-direction: column; gap: 16px; padding: 16px; max-width: 820px; }

.marketing-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.marketing-section.marketing-locked { opacity: 0.6; }

.marketing-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--text);
}
.marketing-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marketing-lock-msg { font-size: 11px; color: var(--text-muted); font-style: italic; }

.marketing-output {
  width: 100%; background: var(--bg-input, #1e1e1e); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; font-size: 13px; color: var(--text);
  resize: vertical; font-family: inherit; line-height: 1.5;
  box-sizing: border-box;
}
.marketing-output:focus { outline: none; border-color: var(--accent); }

.marketing-taglines-cards { display: flex; flex-direction: column; gap: 8px; }
.marketing-tagline-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-input, #1e1e1e); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.marketing-tagline-text { font-size: 13px; color: var(--text); flex: 1; font-style: italic; }
.marketing-tagline-raw { font-size: 13px; color: var(--text); white-space: pre-wrap; }

.marketing-plan-badge {
  display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px;
  padding: 1px 6px; text-transform: uppercase; margin-right: 4px;
}
.marketing-plan-badge.free { background: rgba(255,255,255,0.1); color: var(--text-muted); }
.marketing-plan-badge.paid { background: var(--accent); color: #fff; }

.btn-xs { padding: 3px 8px; font-size: 11px; }

/* ============ TRUE STORY WIZARD (ts-) ============ */

/* Entry button */
.ts-wizard-entry-btn {
  border: 1px solid rgba(232, 85, 45, 0.4);
  color: var(--accent, #E8552D);
  background: rgba(232, 85, 45, 0.06);
  transition: all 0.2s;
}
.ts-wizard-entry-btn:hover {
  background: rgba(232, 85, 45, 0.15);
  border-color: var(--accent, #E8552D);
}

/* Kids Book Wizard — age badge in option labels */
.kb-ages-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(232, 85, 45, 0.12);
  color: var(--accent, #E8552D);
  border: 1px solid rgba(232, 85, 45, 0.3);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Wizard container sizing */
.ts-wizard-container {
  max-width: 680px;
}

/* Form fields */
.ts-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.ts-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #eee);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}
.ts-textarea:focus { outline: none; border-color: var(--accent, #E8552D); }

.ts-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #eee);
  font-size: 13px;
  font-family: inherit;
}
.ts-input:focus { outline: none; border-color: var(--accent, #E8552D); }

.ts-select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #eee);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

/* Person rows (Step 3) */
.ts-person-row {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 10px;
  padding: 14px;
}

/* Checkbox rows (Step 4) */
.ts-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.ts-checkbox-row:hover { border-color: var(--accent, #E8552D); }

/* Source chips */
.ts-source-chip {
  font-size: 11px;
  background: rgba(232, 85, 45, 0.1);
  border: 1px solid rgba(232, 85, 45, 0.25);
  color: var(--accent, #E8552D);
  padding: 3px 10px;
  border-radius: 20px;
  cursor: default;
}

/* Documentation level chips */
.ts-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: default;
}
.ts-doc-documented { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #10b981; }
.ts-doc-inferred   { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.35); color: #f59e0b; }
.ts-doc-invented   { background: rgba(107, 114, 128, 0.15); border: 1px solid rgba(107, 114, 128, 0.35); color: #9ca3af; }

/* Step 8 preview panel */
.ts-preview-panel {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
}
.ts-preview-row { display: flex; flex-direction: column; gap: 8px; }

.ts-slider {
  width: 100%;
  accent-color: var(--accent, #E8552D);
  cursor: pointer;
}

.ts-doc-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Generate button */
.ts-generate-btn {
  background: linear-gradient(135deg, #E8552D, #c0392b);
  font-weight: 700;
  padding: 12px 24px;
  font-size: 15px;
}

/* Progress steps */
.ts-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.ts-progress-step {
  font-size: 13px;
  color: var(--text-muted, #888);
  padding-left: 24px;
  position: relative;
  transition: all 0.3s;
}
.ts-progress-step::before {
  content: '○';
  position: absolute;
  left: 0;
  color: var(--text-muted, #888);
}
.ts-progress-step.active { color: var(--text-primary, #eee); font-weight: 600; }
.ts-progress-step.active::before { content: '◉'; color: var(--accent, #E8552D); }
.ts-progress-step.done { color: #10b981; }
.ts-progress-step.done::before { content: '✓'; color: #10b981; }

/* Source map preview (success state) */
.ts-source-map-preview {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 auto;
  max-width: 360px;
}
.ts-map-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  border-radius: 10px;
  min-width: 80px;
}
.ts-map-stat-num { font-size: 28px; font-weight: 800; line-height: 1; }
.ts-map-stat-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* Source Map Panel chapter rows */
.ts-chapter-map-row {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.ts-chapter-map-row:hover { border-color: var(--accent, #E8552D); }

/* ════════════════════════════════════════════════════════
   ILLUSTRATION ENGINE
   ════════════════════════════════════════════════════════ */

.illus-page { padding: 24px; max-width: 1400px; }
.illus-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.illus-title { font-size: 22px; font-weight: 700; color: #f0f0f0; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.illus-subtitle { color: #888; font-size: 14px; margin: 0; }
.illus-usage-badge { border: 1px solid #c084fc; border-radius: 20px; padding: 6px 14px; font-size: 12px; color: #c084fc; white-space: nowrap; }

.illus-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .illus-layout { grid-template-columns: 1fr; } }

.illus-panel { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; }
.illus-panel-title { font-size: 15px; font-weight: 700; color: #e0e0e0; margin: 0 0 18px; }

.illus-section-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.illus-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: #666; }
.illus-consistency-badge { background: rgba(192,132,252,0.12); color: #c084fc; border: 1px solid rgba(192,132,252,0.25); border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Style Picker */
.illus-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.illus-style-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 10px 8px; text-align: left; cursor: pointer; transition: all 0.15s; font-family: inherit; display: flex; flex-direction: column; gap: 2px; }
.illus-style-btn:hover { border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.06); }
.illus-style-btn.active { border-color: #c084fc; background: rgba(192,132,252,0.12); }
.illus-style-icon { font-size: 18px; }
.illus-style-label { font-size: 13px; font-weight: 600; color: #e0e0e0; }
.illus-style-desc { font-size: 11px; color: #777; line-height: 1.3; }

/* Select / textarea */
.illus-select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e0e0e0; font-size: 13px; padding: 9px 12px; font-family: inherit; appearance: none; }
.illus-select:focus { outline: none; border-color: #c084fc; }
.illus-textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #f0f0f0; font-size: 14px; padding: 12px; resize: vertical; min-height: 90px; font-family: inherit; box-sizing: border-box; line-height: 1.5; }
.illus-textarea:focus { outline: none; border-color: #c084fc; }

/* Character checkboxes */
.illus-char-checkboxes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.illus-char-check { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.07); transition: background 0.1s; }
.illus-char-check:hover { background: rgba(255,255,255,0.04); }
.illus-char-check input { accent-color: #c084fc; width: 15px; height: 15px; cursor: pointer; }
.illus-char-name { font-size: 13px; color: #e0e0e0; flex: 1; }
.illus-char-anchored { font-size: 14px; title: 'Visual profile set'; }
.illus-char-no-anchor { font-size: 14px; opacity: 0.7; }
.illus-empty-chars { color: #666; font-size: 13px; font-style: italic; padding: 8px 0; }

/* Generate button */
.illus-generate-btn { width: 100%; margin-top: 18px; padding: 14px; background: linear-gradient(135deg, #c084fc, #a855f7); border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.15s, transform 0.15s; font-family: inherit; }
.illus-generate-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.illus-generating-status { width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #c084fc; font-size: 13px; padding: 14px 0; }
.illus-spinner { width: 18px; height: 18px; border: 2px solid rgba(192,132,252,0.3); border-top-color: #c084fc; border-radius: 50%; animation: illus-spin 0.7s linear infinite; }
@keyframes illus-spin { to { transform: rotate(360deg); } }

/* Gallery */
.illus-gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.illus-count { font-size: 12px; color: #666; }
.illus-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.illus-gallery-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.illus-card { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; position: relative; transition: border-color 0.15s; }
.illus-card:hover { border-color: rgba(192,132,252,0.4); }
.illus-card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer; }
.illus-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.illus-card:hover .illus-card-img-wrap img { transform: scale(1.03); }
.illus-card-style-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.65); color: #e0e0e0; font-size: 11px; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px); }
.illus-card-body { padding: 10px 12px 10px; }
.illus-card-title { font-size: 12px; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.illus-card-meta { font-size: 11px; color: #555; margin-top: 2px; }
.illus-card-delete { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.65); border: none; border-radius: 50%; width: 24px; height: 24px; color: #999; cursor: pointer; font-size: 12px; display: none; align-items: center; justify-content: center; }
.illus-card:hover .illus-card-delete { display: flex; }
.illus-card-delete:hover { color: #ef4444; }

/* Character Visual Profiles */
.illus-char-profiles-section { margin-top: 32px; }
.illus-char-profiles-header { margin-bottom: 20px; }
.illus-char-profiles-desc { color: #888; font-size: 14px; margin: 6px 0 0; }
.illus-char-profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.illus-char-profile-card { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; }
.illus-char-profile-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.illus-char-portrait { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(192,132,252,0.3); }
.illus-char-portrait-placeholder { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #555; font-size: 20px; }
.illus-char-profile-name { font-size: 15px; font-weight: 700; color: #f0f0f0; }
.illus-char-profile-role { font-size: 12px; color: #888; text-transform: capitalize; }
.illus-ref-sheet-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(192,132,252,0.3); cursor: pointer; margin-left: auto; transition: border-color 0.15s; }
.illus-ref-sheet-thumb:hover { border-color: #c084fc; }

.illus-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.illus-profile-row { display: flex; flex-direction: column; gap: 4px; }
.illus-profile-row-full { grid-column: 1 / -1; }
.illus-profile-row label { font-size: 11px; font-weight: 600; color: #777; text-transform: uppercase; letter-spacing: 0.04em; }
.illus-profile-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #555; }
.illus-profile-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #e0e0e0; font-size: 13px; padding: 8px 10px; font-family: inherit; }
.illus-profile-input:focus { outline: none; border-color: #c084fc; }
.illus-profile-textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #e0e0e0; font-size: 13px; padding: 8px 10px; font-family: inherit; resize: vertical; width: 100%; box-sizing: border-box; min-height: 60px; }
.illus-profile-textarea:focus { outline: none; border-color: #c084fc; }

.illus-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.illus-profile-save-btn { flex: 1; padding: 9px 14px; background: rgba(192,132,252,0.15); border: 1px solid rgba(192,132,252,0.3); border-radius: 8px; color: #c084fc; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
.illus-profile-save-btn:hover { background: rgba(192,132,252,0.25); }
.illus-refsheet-btn { flex: 1; padding: 9px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #aaa; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
.illus-refsheet-btn:hover { background: rgba(255,255,255,0.09); color: #e0e0e0; }
.illus-refsheet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.illus-profile-status { margin-top: 10px; font-size: 12px; padding: 6px 10px; border-radius: 6px; }
.illus-profile-status.ok { background: rgba(34,197,94,0.1); color: #4ade80; }
.illus-profile-status.err { background: rgba(239,68,68,0.1); color: #f87171; }

/* Lightbox */
.illus-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.illus-lightbox-inner { position: relative; max-width: 900px; width: 100%; }
.illus-lightbox-inner img { width: 100%; border-radius: 12px; display: block; max-height: 80vh; object-fit: contain; }
.illus-lightbox-meta { color: #aaa; font-size: 13px; margin-top: 12px; text-align: center; }
.illus-lightbox-close { position: absolute; top: -12px; right: -12px; background: #333; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 32px; height: 32px; color: #e0e0e0; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.illus-lightbox-close:hover { background: #444; }

/* ── Sidebar secondary nav (Blog / FAQ / Pricing / About) ── */
.sidebar-secondary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 2px;
}
.sidebar-secondary-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #555;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.sidebar-secondary-link:hover {
  color: #aaa;
  background: rgba(255,255,255,0.05);
}
.sidebar-secondary-link i {
  font-size: 10px;
  opacity: 0.7;
}