/* ============================================
   BOOK STUDIO — CHECKBOX LEGEND
   ============================================ */
.bk-checkbox-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}
.bk-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bk-legend-item strong {
    color: var(--text, #e2e8f0);
}

/* ============================================
   BOOK STUDIO — MAIN TABS
   ============================================ */
.book-main-tabs {
    display: flex;
    gap: 4px;
    margin: 1rem 0 0;
    border-bottom: var(--tc-glass-border);
}
.book-main-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
    border-radius: 0;
}
.book-main-tab.active {
    color: var(--primary, #a855f7);
    border-bottom-color: var(--primary, #a855f7);
    font-weight: 600;
}
.book-main-tab:hover:not(.active) {
    color: var(--text-primary, #e2e8f0);
}
.book-main-pane {
    display: none;
    padding-top: 1rem;
}
.book-main-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================
   BOOK STUDIO — TOP BAR
   ============================================ */
.bk-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--tc-glass-bg-topbar);
    backdrop-filter: blur(var(--tc-glass-blur));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    margin-bottom: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}
.bk-topbar-left, .bk-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bk-topbar-center { flex: 1; min-width: 120px; }
.bk-topbar-title {
    font-weight: 600;
    font-size: 0.92rem;
    text-align: center;
}
.bk-topbar-select { max-width: 180px; }
.bk-topbar-model { max-width: 160px; }
.bk-topbar-status { white-space: nowrap; }

/* Project ⋯ menu */
.bk-proj-menu-wrap {
    position: relative;
    display: inline-flex;
}
.bk-proj-menu-btn { letter-spacing: 2px; padding: 2px 8px; }
.bk-proj-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 200;
    overflow: hidden;
}
.bk-proj-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-primary, #f1f5f9);
    cursor: pointer;
    white-space: nowrap;
}
.bk-proj-menu-item:hover { background: var(--tc-glass-bg-hover); }
.bk-proj-menu-danger { color: #f87171 !important; }
.bk-proj-menu-danger:hover { background: rgba(248,113,113,0.1) !important; }

/* ============================================
   BOOK STUDIO — 3-PANE CSS GRID
   ============================================ */
.bk-3pane {
    display: grid;
    grid-template-columns:
        var(--bk-binder-width, 240px) 4px 1fr 4px var(--bk-inspector-width, 280px);
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
    gap: 0;
}

/* Pane shared styles */
.bk-binder, .bk-editor, .bk-inspector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
}

/* ── Resizer handles ─────────────────────── */
.bk-resizer {
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    position: relative;
    z-index: 5;
    overflow: visible;
}
.bk-resizer:hover, .bk-resizer.active {
    background: var(--primary, #a855f7);
}
.bk-resizer::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -4px; right: -4px;
}

/* ── Collapse handles (inside resizer divs, extending into binder/inspector) ── */
.bk-collapse-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    background: var(--tc-glass-bg, #1a1a2e);
    color: var(--text-muted, #94a3b8);
    font-size: 0.55rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}
.bk-collapse-handle:hover {
    background: var(--primary, #a855f7);
    color: #fff;
}
/* Left handle extends LEFT into binder space (away from editor) */
.bk-collapse-left { left: -14px; }
/* Right handle extends RIGHT into inspector space (away from editor) */
.bk-collapse-right { right: -14px; }

/* ── Binder collapsed state ───────────────── */
.bk-3pane.binder-collapsed {
    grid-template-columns:
        0px 4px 1fr 4px var(--bk-inspector-width, 280px);
}
.bk-3pane.binder-collapsed .bk-binder {
    display: none;
}
.bk-3pane.binder-collapsed .bk-collapse-left {
    left: -14px;
}

/* ── Inspector collapsed state ───────────── */
.bk-3pane.inspector-collapsed {
    grid-template-columns:
        var(--bk-binder-width, 240px) 4px 1fr 4px 0px;
}
.bk-3pane.inspector-collapsed .bk-inspector {
    display: none;
}
.bk-3pane.inspector-collapsed .bk-collapse-right {
    right: -14px;
}

/* Both collapsed */
.bk-3pane.binder-collapsed.inspector-collapsed {
    grid-template-columns: 0px 4px 1fr 4px 0px;
}

/* ── Inspector close state (X button) ─────── */
.bk-3pane.inspector-closed {
    grid-template-columns:
        var(--bk-binder-width, 240px) 4px 1fr 0px 0px;
}
.bk-3pane.inspector-closed .bk-inspector,
.bk-3pane.inspector-closed #bkResizerRight {
    display: none;
}

/* ============================================
   BINDER PANE (left)
   ============================================ */
.bk-binder-header, .bk-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: var(--tc-glass-border);
    flex-shrink: 0;
}
.bk-binder-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.bk-import-progress {
    padding: 6px 10px 4px;
    border-top: var(--tc-glass-border);
}
.bk-import-progress-track {
    background: var(--tc-glass-bg);
    border-radius: var(--tc-radius-sm);
    height: 4px;
    overflow: hidden;
}
.bk-import-progress-bar {
    height: 100%;
    background: var(--primary, #a855f7);
    border-radius: 4px;
    width: 0%;
    transition: width 0.35s ease;
}
.bk-import-progress-label {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}
.bk-tree-empty-import {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 1.5rem 0.75rem;
    text-align: center;
}
.bk-tree-empty-import p {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin: 0;
}
.bk-import-empty-btn {
    font-size: 0.78rem;
}
#bkImportDocBtn {
    font-size: 0.75rem;
    white-space: nowrap;
}
.bk-pane-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #94a3b8);
}
.bk-binder-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.bk-binder-footer {
    padding: 4px 10px;
    border-top: var(--tc-glass-border);
    flex-shrink: 0;
    font-size: 0.72rem;
}
.bk-tree-empty {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    padding: 1.5rem 0.5rem;
    margin: 0;
}

/* Context checkboxes in binder tree */
.bk-ctx-cb {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 2px;
    cursor: pointer;
    accent-color: var(--primary, #a855f7);
    opacity: 0.5;
    transition: opacity 0.12s;
}
.bk-ctx-cb:hover,
.bk-ctx-cb:checked,
.bk-tree-node-row:hover .bk-ctx-cb,
.bk-tree-folder-row:hover .bk-ctx-cb,
.bk-tree-part-row:hover .bk-ctx-cb { opacity: 1; }

/* Reading tracker checkbox (orange) */
.bk-read-cb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 2px;
    cursor: pointer;
    border: 2px solid #f59e0b;
    border-radius: 2px;
    background: transparent;
    position: relative;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s;
}
.bk-read-cb:checked {
    background: #f59e0b;
}
.bk-read-cb:checked::after {
    content: '\2713';
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 10px;
    color: #1a1a2e;
    font-weight: bold;
}
.bk-read-cb:indeterminate {
    background: rgba(245, 158, 11, 0.4);
}
.bk-read-cb:hover,
.bk-read-cb:checked,
.bk-tree-node-row:hover .bk-read-cb,
.bk-tree-folder-row:hover .bk-read-cb,
.bk-tree-part-row:hover .bk-read-cb { opacity: 1; }

/* Strikethrough when marked as read */
.bk-tree-node-row.read-done .bk-tree-label,
.bk-tree-folder-row.read-done .bk-tree-label,
.bk-tree-part-row.read-done .bk-tree-label {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Audiobook selection checkbox (red) */
.bk-audio-cb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 2px;
    cursor: pointer;
    border: 2px solid #ef4444;
    border-radius: 2px;
    background: transparent;
    position: relative;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s;
}
.bk-audio-cb:checked {
    background: #ef4444;
}
.bk-audio-cb:checked::after {
    content: '\2713';
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
}
.bk-audio-cb:indeterminate {
    background: rgba(239, 68, 68, 0.4);
}
.bk-audio-cb:hover,
.bk-audio-cb:checked,
.bk-tree-node-row:hover .bk-audio-cb,
.bk-tree-folder-row:hover .bk-audio-cb,
.bk-tree-part-row:hover .bk-audio-cb { opacity: 1; }

/* Binder tree nodes */
.bk-tree-node-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--tc-radius-sm);
    margin: 1px 4px;
    font-size: 0.82rem;
    color: var(--text-primary, #e2e8f0);
    transition: background 0.1s;
    user-select: none;
    border: 1px solid transparent;
}
.bk-tree-node-row:hover {
    background: var(--tc-glass-bg-hover);
}
.bk-tree-node-row.selected {
    background: var(--tc-glass-bg-active);
    color: var(--primary, #a855f7);
    font-weight: 600;
}
.bk-tree-node-row.drag-over {
    border-top: 2px solid var(--primary, #a855f7);
}
.bk-tree-toggle {
    width: 14px;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.bk-tree-toggle.expanded { transform: rotate(90deg); }
.bk-tree-icon {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.bk-tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bk-tree-status {
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-left: auto;
}
.bk-tree-status.final { color: #22c55e; }
.bk-tree-status.draft { color: var(--text-muted, #64748b); }
.bk-tree-children {
    padding-left: 16px;
}
.bk-tree-children.collapsed {
    display: none;
}
.bk-tree-part-row {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary, #a855f7);
    opacity: 0.75;
    padding: 10px 8px 4px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.bk-tree-folder-row {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    padding: 6px 8px 3px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    border-left: 2px solid rgba(168,85,247,0.25);
    margin-left: -2px;
}

/* ============================================
   EDITOR PANE (center)
   ============================================ */
.bk-editor {
    min-width: 0;
}
.bk-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 3rem 1.5rem;
    text-align: center;
}
.bk-editor-empty[hidden] {
    display: none !important;
}
.bk-editor-workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.bk-editor-workspace[hidden] {
    display: none !important;
}
.bk-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: var(--tc-glass-border);
    background: var(--tc-glass-bg-topbar);
    flex-shrink: 0;
    min-height: 48px;
}
.bk-editor-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.bk-editor-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bk-editor-path {
    display: none; /* path hidden — chapter title provides enough context */
}
.bk-editor-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #e2e8f0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
/* Divider between button groups */
.bk-header-divider {
    width: 1px;
    height: 18px;
    background: rgba(148,163,184,0.08);
    flex-shrink: 0;
}
.book-chapter-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: var(--tc-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.book-chapter-badge.draft {
    background: var(--tc-glass-bg);
    color: #94a3b8;
}
.book-chapter-badge.final {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* Quill editor area — fills remaining space */
.bk-editor-quill {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bookEditorToolbar {
    border-bottom: var(--tc-glass-border);
    background: var(--tc-glass-bg-topbar);
    padding: 6px 8px;
    flex-shrink: 0;
    z-index: 10;
}
/* Show native tooltips immediately on toolbar items */
#bookEditorToolbar button[title],
#bookEditorToolbar select[title] {
    cursor: pointer;
}
#bookEditorToolbar .ql-stroke { stroke: var(--text-secondary, #94a3b8); }
#bookEditorToolbar .ql-fill { fill: var(--text-secondary, #94a3b8); }
#bookEditorToolbar .ql-picker-label { color: var(--text-secondary, #94a3b8); }
#bookEditorToolbar .ql-picker-options {
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur));
    border-color: rgba(148,163,184,0.08);
}
#bookEditorToolbar .ql-picker-item { color: var(--text-secondary, #94a3b8); }
#bookEditorToolbar .ql-picker-item:hover,
#bookEditorToolbar .ql-picker-item.ql-selected { color: var(--primary, #22c55e); }
#bookEditorToolbar button:hover .ql-stroke,
#bookEditorToolbar button.ql-active .ql-stroke { stroke: var(--primary, #22c55e); }
#bookEditorToolbar button:hover .ql-fill,
#bookEditorToolbar button.ql-active .ql-fill { fill: var(--primary, #22c55e); }

#bookChapterEditor { flex: 1; overflow-y: auto; }
#bookChapterEditor .ql-editor {
    min-height: 300px; padding: 1rem 1.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem; line-height: 1.7;
    color: var(--text-primary, #e2e8f0);
}
#bookChapterEditor .ql-editor.ql-blank::before {
    color: var(--text-muted, #64748b); font-style: italic;
}
#bookChapterEditor.ql-container { border: none; }
#bookEditorToolbar.ql-toolbar { border: none; }

/* Document View Mode */
.book-doc-view #bookChapterEditor {
    max-width: 720px; margin: 0 auto;
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur));
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border-radius: var(--tc-radius-sm); min-height: 60vh; max-height: none;
}

/* Status bar */
.book-editor-status-bar {
    display: flex; align-items: center; gap: 1rem;
    padding: 4px 12px; font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    background: var(--tc-glass-bg-topbar);
    border-top: var(--tc-glass-border);
    flex-shrink: 0;
}
.book-status-spacer { flex: 1; }
.book-status-save { color: var(--primary, #22c55e); }
.book-status-save.unsaved { color: #f59e0b; }
.book-status-muted { opacity: 0.7; }

/* Unified small action buttons in editor header */
.btn-xs {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--tc-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-ghost {
    background: transparent;
    border: var(--tc-glass-border);
    color: var(--text-secondary, #94a3b8);
}
.btn-ghost:hover { background: var(--tc-glass-bg-hover); color: var(--text-primary, #e2e8f0); }
.btn-ghost.active { background: var(--primary, #22c55e); color: #fff; border-color: var(--primary); }

/* Narrate (speak) button */
.btn-narrate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: var(--tc-glass-border);
    color: var(--text-secondary, #94a3b8);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--tc-radius-sm);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.btn-narrate:hover { background: rgba(99,102,241,0.1); color: #818cf8; border-color: #818cf8; }
.btn-narrate.narrating { background: rgba(99,102,241,0.18); color: #818cf8; border-color: #818cf8; }
.btn-narrate.bk-narrate-paused { background: rgba(234,179,8,0.13); color: #fbbf24; border-color: #fbbf24; }
.btn-narrate.bk-narrate-paused:hover { background: rgba(234,179,8,0.22); }
.btn-narrate svg { flex-shrink: 0; }

/* Download audio button (anchor styled as icon button) */
.btn-narrate-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    color: #94a3b8;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.btn-narrate-download:hover { background: rgba(34,197,94,0.12); color: #4ade80; border-color: #4ade80; }
.btn-narrate-download svg { flex-shrink: 0; }

/* Skip back / forward buttons */
.btn-narrate-skip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 7px;
    height: 26px;
    background: transparent;
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.btn-narrate-skip:hover { background: rgba(99,102,241,0.1); color: #818cf8; border-color: #818cf8; }
.btn-narrate-skip-label { line-height: 1; }

/* ── Karaoke reading bar ─────────────────────────────────────── */
.bk-reading-bar {
    background: var(--tc-glass-bg-sidebar);
    border-top: var(--tc-glass-border);
    border-bottom: var(--tc-glass-border);
    padding: 10px 14px 6px;
    height: 80px;
    min-height: 44px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
}
.bk-reading-bar-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.bk-reading-bar-handle::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgba(148,163,184,0.15);
    transition: background 0.15s;
}
.bk-reading-bar-handle:hover::before {
    background: rgba(148,163,184,0.3);
}
.bk-reading-bar-words {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    line-height: 1.9;
}
.bk-word {
    font-size: 0.82rem;
    color: #64748b;
    border-radius: var(--tc-radius-sm);
    padding: 1px 3px;
    transition: color 0.08s, background 0.08s;
    cursor: pointer;
}
.bk-word:hover {
    color: #cbd5e1;
    background: rgba(99,102,241,0.15);
}
.bk-word.active {
    color: #f1f5f9;
    background: rgba(99,102,241,0.35);
    font-weight: 600;
}

.book-export-dropdown { position: relative; display: inline-block; }
.book-export-menu {
    position: absolute; bottom: 100%; left: 0;
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 20; min-width: 160px; margin-bottom: 4px;
}
.book-export-option {
    display: block; width: 100%; padding: 6px 12px; text-align: left;
    background: none; border: none; color: var(--text-primary, #e2e8f0);
    font-size: 0.8rem; cursor: pointer;
}
.book-export-option:hover { background: var(--tc-glass-bg-hover); }

/* ============================================
   INSPECTOR PANE (right)
   ============================================ */
.bk-inspector-body {
    flex: 1;
    overflow-y: auto;
}
.bk-inspector-section {
    border-bottom: var(--tc-glass-border);
}
.bk-inspector-section summary {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: var(--text-secondary, #94a3b8);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.bk-inspector-section summary::-webkit-details-marker { display: none; }
.bk-inspector-section summary::before {
    content: '\25B6';
    font-size: 0.55rem;
    transition: transform 0.15s;
    display: inline-block;
}
.bk-inspector-section[open] summary::before {
    transform: rotate(90deg);
}
.bk-inspector-section-body {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bk-inspector-textarea {
    font-size: 0.45rem;
    line-height: 1.3;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 6px 8px;
}
.bk-inspector-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 4px;
}
.bk-inspector-row .btn {
    flex-shrink: 0;
}
.bk-inspector-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bk-inspector-field .form-label {
    font-size: 0.72rem;
    margin: 0;
}

/* Metadata grid */
.bk-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    font-size: 0.78rem;
}
.bk-meta-label {
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
}
.bk-meta-value {
    color: var(--text-primary, #e2e8f0);
}

/* Guardrails */
.book-guardrails-textarea {
    min-height: 80px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
}
.bk-unsaved-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--warning, #e67e22);
    display: inline-block;
}

/* Source content */
.book-source-file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: var(--tc-radius-sm);
    border: 1px solid rgba(34, 197, 94, 0.2);
    font-size: 0.78rem;
}

/* Generation progress bar */
.bk-gen-progress-wrap {
    margin-top: 8px;
}
.bk-gen-progress-wrap[hidden] { display: none !important; }
.bk-gen-progress-track {
    height: 4px;
    background: var(--tc-glass-bg);
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
}
.bk-gen-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary, #a855f7);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.bk-gen-progress-bar.indeterminate {
    width: 40%;
    animation: bk-gen-pulse 1.4s ease-in-out infinite;
}
@keyframes bk-gen-pulse {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.bk-gen-progress-label {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 4px;
    display: block;
}

/* Generation status (legacy, keep for compat) */
.book-gen-status {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    padding: 4px 8px;
    background: var(--tc-glass-bg);
    border-radius: var(--tc-radius-sm);
}
.book-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

/* ============================================
   BINDER CONTEXT MENU
   ============================================ */
.bk-context-menu {
    position: fixed;
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    z-index: 9999;
    min-width: 160px;
    padding: 4px 0;
}
.bk-ctx-option {
    display: block;
    width: 100%;
    padding: 6px 14px;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary, #e2e8f0);
    font-size: 0.8rem;
    cursor: pointer;
}
.bk-ctx-option:hover {
    background: var(--tc-glass-bg-hover);
}
.bk-ctx-danger {
    color: #ef4444;
}
.bk-ctx-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   BOOK STUDIO — FULLSCREEN MODE
   ============================================ */
#book-tab-book.bk-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9990;
    background: var(--bg-body, #0f172a);
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#book-tab-book.bk-fullscreen .bk-topbar {
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
#book-tab-book.bk-fullscreen .bk-3pane {
    flex: 1;
    height: auto;
    border-radius: 0;
}
#book-tab-book.bk-fullscreen .bk-binder,
#book-tab-book.bk-fullscreen .bk-editor,
#book-tab-book.bk-fullscreen .bk-inspector {
    border-radius: 0;
}
/* ============================================
   BOOK STUDIO — RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .bk-3pane {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .bk-binder {
        max-height: 200px;
    }
    .bk-inspector {
        max-height: 300px;
    }
    .bk-resizer {
        display: none;
    }
    .bk-3pane.inspector-closed .bk-inspector {
        display: none;
    }
    .bk-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-topbar-left, .bk-topbar-center, .bk-topbar-right {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .book-main-tabs { gap: 0; }
    .book-main-tab { padding: 8px 14px; font-size: 0.85rem; }
}

/* ============================================
   BOOK STUDIO — COMPILE PANEL
   ============================================ */

/* Overlay backdrop */
.bk-compile-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Main panel container */
.bk-compile-panel {
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-xl);
    width: 92%;
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header bar */
.bk-compile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: var(--tc-glass-border);
    flex-shrink: 0;
}
.bk-compile-header h3 {
    color: var(--text-primary, #f1f5f9);
    font-size: 1.1rem;
}
.bk-compile-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Body: flex row of sidebar + content */
.bk-compile-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left sidebar navigation */
.bk-compile-sidebar {
    width: 170px;
    min-width: 170px;
    padding: 12px 8px;
    border-right: var(--tc-glass-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    background: var(--tc-glass-bg-sidebar);
}

/* Tab buttons in sidebar */
.bk-compile-tab {
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-muted, #94a3b8);
    border-radius: var(--tc-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.bk-compile-tab:hover {
    background: var(--tc-glass-bg-hover);
    color: var(--text-primary, #f1f5f9);
}
.bk-compile-tab.active {
    background: var(--primary, #22c55e);
    color: #fff;
    font-weight: 500;
}

/* Right content area */
.bk-compile-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 0;
}

/* Tab panes (show/hide) */
.bk-compile-pane {
    display: none;
}
.bk-compile-pane.active {
    display: block;
}
.bk-compile-pane h4 {
    margin: 0 0 16px 0;
    color: var(--text-primary, #f1f5f9);
    font-size: 1rem;
}

/* Form field container */
.bk-compile-field {
    margin-bottom: 14px;
}
.bk-compile-field > label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}
.bk-compile-field > label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary, #f1f5f9);
}

/* Category selection grid (Compile For tab) */
.bk-compile-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 12px 0;
}
.bk-compile-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid rgba(148,163,184,0.08);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.bk-compile-category-card:hover {
    border-color: var(--text-muted, #64748b);
}
.bk-compile-category-card:has(input:checked) {
    border-color: var(--primary, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}
.bk-compile-category-card input[type="radio"] {
    display: none;
}
.bk-compile-category-label {
    font-size: 0.85rem;
    color: var(--text-primary, #f1f5f9);
}

/* Layout grid (Section Layouts, Separators, Page, Typography tabs) */
.bk-compile-layout-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bk-compile-layout-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bk-compile-layout-label {
    width: 160px;
    min-width: 160px;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

/* Contents tree (checkboxes) */
.bk-compile-contents-tree {
    max-height: 420px;
    overflow-y: auto;
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    padding: 8px;
}
.bk-compile-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 0;
    font-size: 0.88rem;
    color: var(--text-primary, #f1f5f9);
}
.bk-compile-tree-row.depth-0 { padding-left: 4px; font-weight: 600; }
.bk-compile-tree-row.depth-1 { padding-left: 24px; }
.bk-compile-tree-row.depth-2 { padding-left: 44px; }
.bk-compile-tree-row.depth-3 { padding-left: 64px; }
.bk-compile-tree-row .bk-compile-tree-type {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-glass-bg);
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
}
.bk-compile-tree-row .bk-compile-tree-words {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

/* Preset row */
.bk-compile-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer bar */
.bk-compile-footer {
    padding: 12px 20px;
    border-top: var(--tc-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
}
.bk-compile-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Progress bar in footer */
.bk-compile-progress {
    flex: 1;
    min-width: 0;
}
.bk-compile-progress-track {
    height: 6px;
    background: var(--tc-glass-bg-input);
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
    margin-bottom: 4px;
}
.bk-compile-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary, #22c55e);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Preview section */
.bk-compile-preview-outline {
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    padding: 12px;
    max-height: 350px;
    overflow-y: auto;
}
.bk-compile-preview-outline ol {
    margin: 0;
    padding-left: 24px;
}
.bk-compile-preview-outline li {
    padding: 4px 0;
    font-size: 0.88rem;
    color: var(--text-primary, #f1f5f9);
}
.bk-compile-preview-outline li.part-item {
    font-weight: 700;
    margin-top: 8px;
}
.bk-compile-preview-outline li .preview-type {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    margin-left: 6px;
}

/* Preview meta line */
.bk-compile-preview-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
}
.bk-compile-preview-icon { font-size: 0.8rem; }
.bk-compile-preview-row {
    font-size: 0.83rem;
    padding: 3px 0;
    color: var(--text-primary, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Preview warnings — collapsible, at the bottom */
.bk-compile-warnings-details {
    margin-top: 12px;
}
.bk-compile-warnings-summary {
    font-size: 0.82rem;
    color: #eab308;
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
}
.bk-compile-warnings {
    margin-top: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.bk-compile-warning {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    padding: 2px 0;
}

/* ── Light mode overrides ── */
[data-theme="light"] .bk-compile-panel {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .bk-compile-header {
    border-color: #e2e8f0;
}
[data-theme="light"] .bk-compile-header h3 {
    color: #1e293b;
}
[data-theme="light"] .bk-compile-sidebar {
    border-color: #e2e8f0;
    background: #f8fafc;
}
[data-theme="light"] .bk-compile-tab {
    color: #64748b;
}
[data-theme="light"] .bk-compile-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1e293b;
}
[data-theme="light"] .bk-compile-tab.active {
    background: var(--primary, #22c55e);
    color: #fff;
}
[data-theme="light"] .bk-compile-pane h4 {
    color: #1e293b;
}
[data-theme="light"] .bk-compile-category-card {
    border-color: #e2e8f0;
}
[data-theme="light"] .bk-compile-category-label {
    color: #1e293b;
}
[data-theme="light"] .bk-compile-contents-tree {
    border-color: #e2e8f0;
}
[data-theme="light"] .bk-compile-tree-row {
    color: #1e293b;
}
[data-theme="light"] .bk-compile-footer {
    border-color: #e2e8f0;
}
[data-theme="light"] .bk-compile-preview-outline {
    border-color: #e2e8f0;
}
[data-theme="light"] .bk-compile-preview-outline li {
    color: #1e293b;
}
[data-theme="light"] .bk-compile-overlay {
    background: rgba(0, 0, 0, 0.4);
}

/* ── Mobile: stack sidebar above content ── */
/* ============================================
   BOOK STUDIO — MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    /* Stack panes vertically on mobile */
    .bk-3pane {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .bk-3pane .bk-resizer {
        display: none;
    }
    .bk-3pane .bk-binder {
        max-height: 200px;
        min-height: 120px;
        border-radius: var(--tc-radius-sm) var(--tc-radius-sm) 0 0;
        overflow-y: auto;
    }
    .bk-3pane .bk-editor {
        flex: 1;
        min-height: 300px;
        border-radius: 0;
    }
    .bk-3pane .bk-inspector {
        max-height: 250px;
        overflow-y: auto;
        border-radius: 0 0 var(--tc-radius-sm) var(--tc-radius-sm);
    }
    /* Collapsed states still work */
    .bk-3pane.binder-collapsed .bk-binder { display: none; }
    .bk-3pane.inspector-collapsed .bk-inspector,
    .bk-3pane.inspector-closed .bk-inspector { display: none; }

    /* Topbar wraps */
    .bk-topbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .bk-topbar-left, .bk-topbar-right {
        flex-wrap: wrap;
    }

    /* Editor toolbar wraps */
    .bk-editor-tabs {
        flex-wrap: wrap;
        gap: 2px;
    }
    .bk-editor-tabs .btn {
        font-size: 0.7rem;
        padding: 4px 6px;
    }

    /* Checkbox legend compact */
    .bk-checkbox-legend {
        font-size: 0.68rem;
        padding: 4px 8px;
    }
}

@media (max-width: 768px) {
    .bk-compile-body {
        flex-direction: column;
    }
    .bk-compile-sidebar {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: var(--tc-glass-border);
        padding: 8px;
        gap: 4px;
    }
    .bk-compile-tab {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    .bk-compile-content {
        padding: 16px;
    }
    .bk-compile-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bk-compile-layout-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .bk-compile-layout-label {
        width: auto;
        min-width: unset;
    }
    .bk-compile-panel {
        width: 98%;
        max-height: 90vh;
        border-radius: var(--tc-radius-lg);
    }
    .bk-compile-header-right {
        flex-wrap: wrap;
    }
}

/* ============================================
   iPHONE PRO MAX / LARGE PHONE OPTIMIZATIONS
   (430px - iPhone 15/16/17 Pro Max)
   ============================================ */
@media (max-width: 430px) {

    /* --- Top bar: compact for small screens --- */
    .top-bar-left {
        display: none !important;
    }

    .top-bar {
        padding: 0 10px !important;
    }

    .top-bar-right {
        gap: 6px !important;
    }

    /* Hide "Buy Credits" — redundant on mobile, accessible via More menu */
    .btn-buy-credits {
        display: none !important;
    }

    /* Compact screenshot / upload icon buttons */
    .top-bar-right .btn-icon,
    .top-bar-right .btn-small {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    /* --- Page sections: reduce horizontal padding --- */
    .page-section {
        padding: 12px !important;
    }

    .page-section-header,
    .section-header {
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }

    .section-title,
    .page-section-title {
        font-size: 1rem !important;
    }

    /* --- Form groups: tighter spacing --- */
    .form-group {
        margin-bottom: 12px !important;
    }

    .form-label {
        font-size: 0.82rem !important;
    }

    /* --- Code Assistant: fit within mobile viewport --- */
    #page-code .code-assistant-container {
        padding: 0 8px 8px !important;
    }

    .goose-chat-history {
        /* bottom nav (64px) + safe area + top bar (56px) + input area (~120px) + controls (~40px) */
        max-height: calc(100dvh - 56px - 64px - env(safe-area-inset-bottom) - 180px) !important;
        min-height: 180px !important;
    }

    /* Fullscreen mode on mobile: account for safe areas */
    #page-code.code-fullscreen-mode {
        padding-bottom: calc(env(safe-area-inset-bottom)) !important;
    }

    #page-code.code-fullscreen-mode .goose-chat-history {
        max-height: none !important;
    }

    /* Stack goose controls vertically on very small screens */
    .goose-controls {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .goose-toolbar-right {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .goose-tool-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-height: 36px !important;
    }

    /* --- Input textarea: taller touch area --- */
    #goose-input {
        min-height: 44px !important;
        font-size: 16px !important; /* prevent iOS auto-zoom */
    }

    /* --- Gallery / card grids: single column --- */
    .gallery-grid,
    .video-gallery,
    .image-gallery {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* --- Buttons: minimum touch target --- */
    .btn, button {
        min-height: 40px !important;
    }

    /* --- Code blocks in chat: horizontal scroll, don't overflow --- */
    .code-block {
        max-width: 100% !important;
        overflow-x: auto !important;
        font-size: 0.78rem !important;
    }

    /* --- Goose send button: bigger touch target --- */
    #goose-send {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }

    /* --- Copy button: always visible on touch devices --- */
    .copy-msg-btn {
        opacity: 0.7 !important;
    }

    /* --- Stats strip: hide on 430px to save space --- */
    .stats-strip {
        display: none !important;
    }

    /* --- Dashboard gauges: smaller --- */
    .gauge {
        width: 48px !important;
        height: 48px !important;
    }

    .gauge-label {
        font-size: 0.65rem !important;
    }
}

/* ====================================================================
   BOOK STUDIO — WORKFLOW SELECTOR MODAL
   ==================================================================== */

.bk-workflow-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    padding: 16px;
}

.bk-workflow-panel {
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    max-width: 860px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bk-workflow-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: var(--tc-glass-border);
    flex-shrink: 0;
}

.bk-workflow-header-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary, #f1f5f9);
}

.bk-workflow-header-desc {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: 0;
}

.bk-workflow-dismiss-btn {
    background: none;
    border: var(--tc-glass-border);
    color: var(--text-muted, #64748b);
    border-radius: var(--tc-radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: 12px;
    min-height: unset;
}

.bk-workflow-dismiss-btn:hover {
    background: var(--tc-glass-bg-hover);
    color: var(--text-primary, #f1f5f9);
}

.bk-workflow-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.bk-workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.bk-workflow-card {
    border: 2px solid rgba(148,163,184,0.08);
    border-radius: var(--tc-radius-md);
    padding: 14px;
    cursor: pointer;
    background: var(--tc-glass-bg);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    user-select: none;
}

.bk-workflow-card:hover {
    border-color: var(--primary, #a855f7);
    background: var(--tc-glass-bg-hover);
}

.bk-workflow-card.selected {
    border-color: var(--primary, #a855f7);
    background: var(--tc-glass-bg-active);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}

.bk-workflow-card-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 4px;
}

.bk-workflow-card-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0 0 10px;
    line-height: 1.5;
}

.bk-workflow-example-tree {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.72rem;
    background: var(--tc-glass-bg-sidebar);
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    padding: 8px 10px;
    margin: 0;
    white-space: pre;
    overflow-x: hidden;
    line-height: 1.7;
    color: #a8c0d6;
    list-style: none;
}

.bk-workflow-example-tree li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bk-workflow-custom-form {
    margin-top: 16px;
    background: var(--tc-glass-bg-sidebar);
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    padding: 16px;
}

.bk-workflow-custom-label {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0 0 12px;
    font-weight: 500;
}

.bk-workflow-custom-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bk-workflow-custom-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 4px;
}

.bk-workflow-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: var(--tc-glass-border);
    flex-shrink: 0;
}

.bk-workflow-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin-right: auto;
}

/* === WORKFLOW BADGE === */
.bk-workflow-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: var(--tc-radius-xl);
    cursor: pointer;
    border: 1px solid;
    font-weight: 500;
    line-height: 1.4;
    transition: opacity 0.15s;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: unset;
}

.bk-workflow-badge:hover { opacity: 0.8; }

.bk-workflow-badge--set {
    background: rgba(168,85,247,0.12);
    border-color: rgba(168,85,247,0.4);
    color: var(--primary, #a855f7);
}

.bk-workflow-badge--unset {
    background: var(--tc-glass-bg);
    border-color: rgba(148,163,184,0.08);
    color: var(--text-muted, #64748b);
}

/* === IMPORT REVIEW PANEL === */
.bk-review-panel {
    margin: 10px 8px;
    border-left: 3px solid #f59e0b;
    background: rgba(245,158,11,0.06);
    border-radius: var(--tc-radius-sm);
    padding: 10px 12px;
}

.bk-review-panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bk-review-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(245,158,11,0.12);
    font-size: 0.72rem;
}

.bk-review-row:last-of-type {
    border-bottom: none;
}

.bk-review-source {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary, #94a3b8);
}

.bk-review-confidence {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: var(--tc-radius-md);
    font-weight: 600;
    flex-shrink: 0;
}

.bk-review-confidence--high {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
}

.bk-review-confidence--med {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

.bk-review-confidence--low {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}

.bk-review-level-select {
    background: var(--tc-glass-bg);
    border: var(--tc-glass-border-subtle);
    border-radius: var(--tc-radius-sm);
    color: #e2e8f0;
    font-size: 0.72rem;
    padding: 2px 6px;
    cursor: pointer;
    flex-shrink: 0;
    min-height: unset;
}

.bk-review-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

/* Responsive: single-column grid at ≤600px */
@media (max-width: 600px) {
    .bk-workflow-grid {
        grid-template-columns: 1fr;
    }
    .bk-workflow-custom-fields {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   BOOK STUDIO — HUMANIZE & EVALUATE MODALS
   ==================================================================== */

/* Toolbar button accents */
.bk-humanize-btn { color: #a78bfa; }
.bk-humanize-btn:hover:not(:disabled) { background: rgba(167,139,250,0.1); color: #c4b5fd; }
.bk-evaluate-btn { color: #38bdf8; }
.bk-evaluate-btn:hover:not(:disabled) { background: rgba(56,189,248,0.1); color: #7dd3fc; }
.bk-humanize-btn:disabled,
.bk-evaluate-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Shared modal overlay */
.bk-he-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.68);
    backdrop-filter: blur(4px);
    padding: 16px;
}

/* Panel container */
.bk-he-panel {
    background: var(--tc-glass-bg);
    backdrop-filter: blur(var(--tc-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur-heavy));
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
}

.bk-he-panel--humanize { max-width: 840px; }
.bk-he-panel--evaluate { max-width: 680px; }
.bk-he-panel--reword   { max-width: 680px; }
.bk-reword-preview {
    background: var(--tc-glass-bg-sidebar);
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #94a3b8;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.bk-reword-preview--original { opacity: 0.7; }
.bk-reword-btn { color: #a78bfa; }
.bk-reword-btn:hover { color: #c4b5fd; background: rgba(167,139,250,0.08); }

/* Header */
.bk-he-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: var(--tc-glass-border);
    flex-shrink: 0;
}

.bk-he-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 3px;
    color: #e2e8f0;
}

.bk-he-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

.bk-he-close-btn {
    background: none;
    border: var(--tc-glass-border);
    color: #94a3b8;
    border-radius: var(--tc-radius-sm);
    width: 28px;
    height: 28px;
    min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: 12px;
}

.bk-he-close-btn:hover {
    background: var(--tc-glass-bg-hover);
    color: #e2e8f0;
}

/* Body */
.bk-he-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bk-he-body--center {
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.bk-he-body--diff {
    min-height: 300px;
    max-height: 50vh;
    padding: 0;
}

/* Footer */
.bk-he-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    border-top: var(--tc-glass-border);
    flex-shrink: 0;
}

/* Config rows */
.bk-he-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bk-he-row--col {
    flex-direction: column;
    align-items: stretch;
}

.bk-he-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #cbd5e1;
    min-width: 130px;
    flex-shrink: 0;
}

.bk-he-label-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Radio intensity group */
.bk-he-radio-group {
    display: flex;
    gap: 16px;
}

.bk-he-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: #cbd5e1;
    cursor: pointer;
}

.bk-he-radio input[type="radio"] { cursor: pointer; }

/* Toggle */
.bk-he-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.bk-he-toggle input[type="checkbox"] { display: none; }

.bk-he-toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--tc-glass-bg-hover);
    border: var(--tc-glass-border);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.bk-he-toggle-track::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    top: 2px;
    left: 2px;
    transition: transform 0.2s, background 0.2s;
}

.bk-he-toggle input:checked + .bk-he-toggle-track {
    background: rgba(167,139,250,0.25);
    border-color: rgba(167,139,250,0.5);
}

.bk-he-toggle input:checked + .bk-he-toggle-track::after {
    transform: translateX(16px);
    background: #a78bfa;
}

.bk-he-toggle-label {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Protected phrases textarea */
.bk-he-protected-input {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.78rem;
    resize: vertical;
    min-height: 80px;
}

/* Spinner */
.bk-he-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--tc-glass-bg-hover);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: bkHeSpin 0.8s linear infinite;
    margin-bottom: 12px;
}

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

.bk-he-progress-msg {
    font-size: 0.82rem;
    color: #94a3b8;
    text-align: center;
    margin: 0;
}

.bk-he-progress-hint {
    font-size: 0.73rem;
    color: #64748b;
    text-align: center;
    margin: 4px 0 0;
}

/* Warnings */
.bk-he-warnings {
    margin: 0 22px;
    padding: 10px 14px;
    border-left: 3px solid #f59e0b;
    background: rgba(245,158,11,0.07);
    border-radius: var(--tc-radius-sm);
    font-size: 0.78rem;
    color: #fbbf24;
}

.bk-he-warnings ul { margin: 4px 0 0; padding-left: 16px; }
.bk-he-warnings li { margin-bottom: 3px; }

/* Preview view toggle */
.bk-he-preview-mode-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

.bk-he-view-btn.active {
    background: rgba(167,139,250,0.15);
    color: #c4b5fd;
    border-color: rgba(167,139,250,0.4);
}

/* Diff view */
.bk-he-diff-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    overflow: hidden;
}

.bk-he-diff-pane {
    overflow-y: auto;
    padding: 16px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
    word-break: break-word;
}

.bk-he-diff-pane:first-child {
    border-right: var(--tc-glass-border);
    background: rgba(239,68,68,0.03);
}

.bk-he-diff-pane:last-child {
    background: rgba(34,197,94,0.03);
}

.bk-he-diff-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    margin-bottom: 10px;
    display: block;
}

/* Single-pane "after" view */
.bk-he-after-wrap {
    padding: 16px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary, #94a3b8);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    height: 100%;
}

/* Evaluate: score cards */
.bk-eval-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bk-eval-card {
    background: var(--tc-glass-bg);
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-md);
    padding: 14px 16px;
}

.bk-eval-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bk-eval-acronym {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--tc-glass-bg);
    border: var(--tc-glass-border);
    border-radius: var(--tc-radius-sm);
    padding: 2px 7px;
    color: #93c5fd;
    flex-shrink: 0;
}

.bk-eval-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
}

.bk-eval-score {
    font-size: 0.92rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bk-eval-score--na { color: #64748b; }

.bk-eval-bar-track {
    height: 6px;
    background: var(--tc-glass-bg);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}

.bk-eval-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.bk-eval-notes {
    font-size: 0.80rem;
    color: #b0bfd0;
    line-height: 1.65;
}

.bk-eval-notes ul { margin: 0; padding-left: 18px; }
.bk-eval-notes li { margin-bottom: 4px; }

/* Score color helpers */
.bk-eval-score--good  { color: #4ade80; }
.bk-eval-score--ok    { color: #fbbf24; }
.bk-eval-score--warn  { color: #f87171; }
.bk-eval-bar--good  { background: #4ade80; }
.bk-eval-bar--ok    { background: #fbbf24; }
.bk-eval-bar--warn  { background: #f87171; }