/* ═══════════════════════════════════════════════════════════════════
   Developer Tools — The Mammoth Steppes
   Epic-fantasy developer theme: parchment ground, gold/indigo accents
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
    --parchment:      #f5ead5;
    --parchment-dark: #ead9bb;
    --parchment-mid:  #efe0c3;
    --ink:            #2a1f12;
    --ink-faded:      #5a4a38;
    --gold:           #b8861b;
    --gold-light:     #d4a83a;
    --gold-glow:      rgba(184, 134, 27, 0.25);
    --indigo:         #3d1e6d;
    --indigo-light:   #5a2f9e;
    --danger:         #8b1a1a;
    --danger-light:   #c0392b;
    --success:        #1a5c1a;
    --success-light:  #27ae60;
    --border:         rgba(184, 134, 27, 0.35);
    --shadow:         rgba(42, 31, 18, 0.18);
    --radius:         6px;
    --radius-lg:      12px;
    --font-body:      Georgia, 'Times New Roman', serif;
    --font-ui:        'Segoe UI', system-ui, sans-serif;
    --font-mono:      'Consolas', 'Cascadia Code', monospace;
    --transition:     0.2s ease;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
    font-family: var(--font-ui);
    font-size: 15px;
    background: var(--parchment);
    color: var(--ink);
    line-height: 1.6;
}

/* ── Fullscreen Overlay (Login / Unauthorized) ──────────────────── */
.fullscreen-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23ead9bb'/%3E%3Ccircle cx='30' cy='30' r='1' fill='%23b8861b' opacity='0.15'/%3E%3C/svg%3E"),
        var(--parchment);
    z-index: 1000;
}

.auth-card {
    background: var(--parchment);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 40px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
}

.auth-card--danger {
    border-color: var(--danger);
}

.auth-crest {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px var(--shadow));
}

.auth-title {
    font-family: var(--font-body);
    font-size: 1.8rem;
    color: var(--indigo);
    margin-bottom: 0.4rem;
}

.auth-sub {
    color: var(--ink-faded);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}


.auth-hint {
    color: var(--ink-faded);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* ── App Layout ─────────────────────────────────────────────────── */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── App Header ─────────────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--indigo);
    color: #fff;
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-title {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gold-light);
}

.header-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.03em;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-notes-btn {
    background: rgba(184, 134, 27, 0.2);
    border: 1px solid var(--gold);
    color: var(--gold-light);
    border-radius: var(--radius);
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition);
}

.header-notes-btn:hover {
    background: var(--gold);
    color: var(--indigo);
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
}

.user-name {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}

/* ── Tab Navigation ─────────────────────────────────────────────── */
.tab-nav {
    display: flex;
    background: var(--indigo);
    padding: 0 1.5rem;
    border-bottom: 2px solid var(--border);
    gap: 0.25rem;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
    color: rgba(255,255,255,0.65);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transition), border-color var(--transition);
    position: relative;
    bottom: -2px;
}

.tab-btn:hover { color: rgba(255,255,255,0.9); }

.tab-btn.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
    font-weight: 600;
}

/* ── Tab Content ────────────────────────────────────────────────── */
.tab-content {
    flex: 1;
    padding: 1.5rem;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

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

/* ── Panel Header ───────────────────────────────────────────────── */
.panel-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.panel-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.panel-header-text {
    flex: 1;
    min-width: 260px;
}


.panel-header h2 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: var(--indigo);
    margin-bottom: 0.3rem;
}

.panel-header p {
    color: var(--ink-faded);
    font-size: 0.9rem;
}

.panel-header code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--parchment-dark);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* ── Drop Zone ──────────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed var(--gold);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    background: var(--parchment-mid);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    user-select: none;
}

.drop-zone:hover,
.drop-zone.drag-over {
    background: rgba(184, 134, 27, 0.08);
    border-color: var(--gold-light);
    box-shadow: 0 0 0 4px var(--gold-glow);
}

.drop-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.drop-text  { font-size: 1.05rem; color: var(--ink); font-family: var(--font-body); margin-bottom: 0.3rem; }
.drop-sub   { font-size: 0.82rem; color: var(--ink-faded); }

/* ── Form File Badge ────────────────────────────────────────────── */
.form-file-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

.badge-icon { font-size: 1.1rem; }

/* ── Upload Form ────────────────────────────────────────────────── */
.upload-form {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 100px;
}

.form-group-grow { flex: 1; }

.form-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.form-group label small {
    font-size: 0.75rem;
    text-transform: none;
    font-weight: normal;
    letter-spacing: 0;
    color: var(--ink-faded);
    opacity: 0.8;
}

.required { color: var(--danger-light); }

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.form-group textarea { resize: vertical; line-height: 1.5; }

/* ── Input with Action Button ── */
.input-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-button input {
    flex: 1;
}

.file-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.52rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius);
}

.direct-upload-status {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: rgba(30, 107, 62, 0.08);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--success);
}

.direct-upload-status img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Progress Bar ───────────────────────────────────────────────── */
.progress-wrap {
    margin: 1rem 0;
}

.progress-track {
    height: 8px;
    background: var(--parchment-dark);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 0.4rem;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.progress-bar.done { background: linear-gradient(90deg, var(--success), var(--success-light)); }
.progress-label { font-size: 0.82rem; color: var(--ink-faded); }

/* ── Image Category Selector ────────────────────────────────────── */
.category-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.category-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.radio-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.35rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--parchment);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    user-select: none;
}

.radio-pill:hover { border-color: var(--gold-light); background: var(--parchment-mid); }
.radio-pill:has(input:checked) {
    border-color: var(--gold);
    background: rgba(184, 134, 27, 0.12);
    box-shadow: 0 0 0 3px var(--gold-glow);
    font-weight: 600;
}

.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Target Chapter Selector in Image Uploader ──────────────────── */
.image-chapter-group {
    background: var(--parchment-dark);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.15rem;
    margin-bottom: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.image-chapter-group.has-error {
    border-color: var(--danger-light);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.25);
}

.image-chapter-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.45rem;
}

.image-chapter-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.image-chapter-controls select,
.image-chapter-controls input {
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--ink);
    min-width: 250px;
    flex: 1;
}

.custom-slug-wrap {
    display: flex;
    flex: 1;
    min-width: 230px;
}

.image-chapter-hint {
    font-size: 0.82rem;
    color: var(--ink-faded);
    margin-top: 0.5rem;
}

.image-chapter-hint code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--parchment-mid);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--indigo);
}

.path-placeholder {
    color: var(--danger-light);
    font-style: italic;
    font-weight: 600;
}

/* ── Banner Option in Image Uploader ── */
.banner-option-wrap {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.banner-toggle-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.banner-toggle-pill span code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--parchment-mid);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--gold-dark);
}

.banner-option-hint {
    font-size: 0.78rem;
    color: var(--ink-faded);
    margin-left: 0.25rem;
}

.category-path-display {
    font-size: 0.82rem;
    color: var(--ink-faded);
    margin-bottom: 1rem;
}

.category-path-display code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--parchment-dark);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* ── Image Preview Grid ─────────────────────────────────────────── */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.image-card {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
    position: relative;
}

.image-card:hover { box-shadow: 0 4px 16px var(--shadow); }

.image-card.uploaded { border-color: var(--success); }
.image-card.uploaded::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--success);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.image-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
}

.image-name {
    display: block;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem 0.1rem;
    word-break: break-all;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-size {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-faded);
    padding: 0 0.5rem 0.2rem;
}

.image-card.is-banner {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184, 134, 27, 0.35);
}

.image-card-banner-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--gold);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 2;
}

.image-card-dest {
    display: block;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--indigo);
    padding: 0 0.5rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-actions {
    display: flex;
    padding: 0.25rem 0.4rem 0.45rem;
    gap: 0.3rem;
}

/* ── Banner Studio (banner.webp + blur.webp preview card) ── */
.image-card.banner-studio {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    padding: 0.75rem;
}

.banner-studio-previews {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.banner-studio-frame {
    aspect-ratio: 16 / 9;
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.image-card.banner-studio .banner-studio-frame img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border: 0;
    display: block;
}

.banner-studio-blur {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: var(--ink-faded);
}

.banner-studio-frame--blur { width: 160px; flex-shrink: 0; }

.banner-studio-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.banner-studio-controls .image-name,
.banner-studio-controls .image-card-dest { padding: 0; }
.banner-studio-controls .image-card-actions { padding: 0; margin-top: auto; }

.banner-studio-note {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-faded);
}

@media (max-width: 760px) {
    .image-card.banner-studio { grid-template-columns: 1fr; }
}

.btn-card-action {
    flex: 1;
    font-size: 0.68rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--parchment);
    color: var(--ink);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-card-action:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: var(--parchment-mid);
}

.btn-card-action.active {
    background: var(--gold);
    color: #1a1a1a;
    border-color: var(--gold-dark);
    font-weight: 600;
}

/* ── Sub-Tab Nav (Browser) ──────────────────────────────────────── */
.sub-tab-nav {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.sub-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    color: var(--ink-faded);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    position: relative;
    bottom: -2px;
}

.sub-tab-btn:hover { color: var(--ink); }
.sub-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

/* ── Browser Content ────────────────────────────────────────────── */
.browser-content { min-height: 120px; }

.file-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    transition: box-shadow var(--transition);
}

.file-card:hover { box-shadow: 0 2px 10px var(--shadow); }

.file-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.file-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: var(--parchment-dark);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

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

.file-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--ink-faded);
    margin-top: 0.15rem;
}

.file-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-sm,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.2rem;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--gold);
    color: #fff;
}
.btn-primary:hover {
    background: var(--gold-light);
    box-shadow: 0 0 0 3px var(--gold-glow);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--parchment-dark);
    color: var(--ink);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--parchment-mid); }

.btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.75);
    padding: 0.4rem 0.85rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Ghost inside forms (dark bg context) */
.upload-form .btn-ghost,
.form-file-badge .btn-ghost {
    color: var(--ink-faded);
}
.upload-form .btn-ghost:hover,
.form-file-badge .btn-ghost:hover {
    background: var(--parchment-dark);
    color: var(--ink);
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    background: var(--parchment-dark);
    color: var(--ink);
    border: 1px solid var(--border);
}
.btn-sm:hover { background: var(--parchment-mid); }

.btn-danger {
    background: transparent;
    color: var(--danger-light);
    border: 1px solid rgba(192, 57, 43, 0.3);
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
}
.btn-danger:hover {
    background: rgba(192, 57, 43, 0.08);
    border-color: var(--danger-light);
}

.btn-google {
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    background: var(--indigo);
}
.btn-google:hover {
    background: var(--indigo-light);
    box-shadow: 0 0 0 3px rgba(61, 30, 109, 0.2);
}

.google-icon { flex-shrink: 0; }

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Form Actions ───────────────────────────────────────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

/* ── Loading / Empty / Error States ────────────────────────────── */
.loading, .empty, .error {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink-faded);
    font-style: italic;
}
.error { color: var(--danger-light); }

/* ── Toast Notifications ────────────────────────────────────────── */
.toast-area {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    background: var(--indigo);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    max-width: 320px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    border-left: 4px solid var(--gold);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.toast.show  { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--success-light); }
.toast-error   { border-left-color: var(--danger-light); background: #3d1212; }

/* ── Chapter Input Mode Switcher ────────────────────────────────── */
.input-mode-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    background: var(--parchment-mid);
    padding: 0.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-faded);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.mode-btn:hover {
    color: var(--ink);
    background: rgba(184, 134, 27, 0.08);
}

.mode-btn.active {
    background: var(--indigo);
    color: var(--gold-light);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(61, 30, 109, 0.25);
}

.mode-icon {
    font-size: 1.1rem;
}

.chapter-mode-panel {
    display: none;
}

.chapter-mode-panel.active {
    display: block;
}

/* ── Epigraph Expander ─────────────────────────────────────────── */
.epigraph-details {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.epigraph-summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--indigo);
    list-style: none;
    user-select: none;
}

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

.epigraph-summary-title {
    font-size: 0.95rem;
}

.epigraph-summary-hint {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--ink-faded);
    font-style: italic;
}

.epigraph-fields {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.epigraph-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .epigraph-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* ── Sticky Composer Actions Bar ───────────────────────────────── */
.composer-sticky-bar {
    position: sticky;
    top: calc(var(--app-header-h, 57px) + 0.5rem);
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.85rem;
    background: var(--parchment-light, #faf6ee);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.sticky-bar-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.sticky-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-convert-top {
    font-size: 0.92rem;
    padding: 0.55rem 1.25rem;
    box-shadow: 0 3px 10px rgba(184, 134, 27, 0.32);
}

.btn-clear-top {
    font-size: 0.84rem;
    padding: 0.5rem 0.9rem;
}

/* Conversion Settings Dropdown */
.conversion-settings-dropdown {
    position: relative;
    user-select: none;
}

.settings-toggle-btn {
    list-style: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: var(--font-ui);
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--parchment-mid);
    color: var(--indigo);
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

.settings-toggle-btn::-webkit-details-marker {
    display: none;
}

.settings-toggle-btn:hover {
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--indigo);
}

.settings-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 320px;
    max-width: 90vw;
    background: #faf6ee;
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    z-index: 100;
}

.settings-dropdown-head {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--indigo);
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 0.15rem;
}

.settings-dropdown-menu .checkbox-pill {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 6px;
    background: var(--parchment);
}

.settings-dropdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
    color: var(--ink);
}

.settings-dropdown-row select {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* ── Editor Container & Toolbar ────────────────────────────────── */
.editor-container {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--parchment-dark);
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-tools {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tool-btn {
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-family: var(--font-ui);
    color: var(--ink);
    cursor: pointer;
    transition: all var(--transition);
}

.tool-btn:hover {
    background: var(--gold-glow);
    border-color: var(--gold);
    color: var(--indigo);
}

.tool-btn-guide {
    background: rgba(184, 134, 27, 0.18) !important;
    border-color: var(--gold) !important;
    color: var(--indigo) !important;
    font-weight: 600;
}

.tool-btn-guide:hover {
    background: var(--gold) !important;
    color: #fff !important;
}

.toolbar-stats {
    font-size: 0.8rem;
    color: var(--ink-faded);
    font-family: var(--font-mono);
}

.plain-text-area {
    width: 100%;
    min-height: 260px;
    padding: 1rem 1.25rem;
    background: #fffdf9;
    border: none;
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink);
    resize: vertical;
    box-sizing: border-box;
}

.plain-text-area:focus {
    outline: none;
    background: #ffffff;
}

/* ── Loaded Markdown File Badge ─────────────────────────────────── */
.loaded-file-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--parchment-dark);
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-family: var(--font-mono);
    color: var(--ink);
    flex-wrap: wrap;
    animation: fadeIn 0.2s ease-out;
}

.loaded-file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.loaded-file-name {
    font-weight: 600;
    color: var(--indigo);
}

.loaded-file-stats {
    font-size: 0.75rem;
    color: var(--ink-faded);
    background: rgba(184, 134, 27, 0.12);
    border: 1px solid rgba(184, 134, 27, 0.25);
    border-radius: 999px;
    padding: 1px 7px;
}

.loaded-file-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-xs {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-family: var(--font-ui);
    line-height: 1.2;
}

.file-pick-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}

.editor-container.drag-over {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── Chapter Edit Selector in Header ── */
.chapter-edit-selector-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--parchment-mid);
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.chapter-edit-select {
    min-width: 220px;
    max-width: 320px;
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    cursor: pointer;
    text-overflow: ellipsis;
}

.chapter-edit-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-glow);
}

/* ── Active Editing Chapter Banner ── */
.editing-chapter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(184, 134, 27, 0.15), rgba(61, 30, 109, 0.08));
    border: 1.5px solid var(--gold);
    border-radius: var(--radius);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px var(--gold-glow);
    animation: fadeIn 0.3s ease;
}

.editing-banner-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.editing-banner-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.editing-banner-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.editing-banner-title {
    font-size: 0.95rem;
    color: var(--indigo);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.editing-banner-meta {
    font-size: 0.78rem;
    color: var(--ink-faded);
}

.editing-banner-meta code {
    background: var(--parchment-dark);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    color: var(--ink);
}

.editing-banner-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Options Row ───────────────────────────────────────────────── */
.options-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.checkbox-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--parchment-mid);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
}

.checkbox-pill:hover {
    border-color: var(--gold);
    background: var(--parchment);
}

.checkbox-pill input[type="checkbox"] {
    accent-color: var(--gold);
    cursor: pointer;
}

.converter-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.btn-convert {
    font-size: 1rem;
    padding: 0.75rem 1.75rem;
    box-shadow: 0 4px 12px rgba(184, 134, 27, 0.3);
}

/* ── Form File Badge Extended ───────────────────────────────────── */
.form-file-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.badge-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.stats-chip {
    font-size: 0.78rem;
    background: rgba(184, 134, 27, 0.18);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 500;
}

/* ── HTML Source Details (Compact Collapsible) ─────────────────── */
.html-source-details {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow);
}

.html-source-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--parchment-dark);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--indigo);
    list-style: none;
    user-select: none;
    transition: background var(--transition);
}

.html-source-summary::-webkit-details-marker {
    display: none;
}

.html-source-summary:hover {
    background: var(--gold-glow);
}

.html-source-summary-hint {
    font-size: 0.78rem;
    font-weight: normal;
    color: var(--ink-faded);
    font-style: italic;
}

.html-source-body {
    padding: 1rem;
}

.html-source-body .html-source-editor {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #1e1e1e;
    color: #d4d4d4;
    resize: vertical;
    min-height: 180px;
    line-height: 1.5;
}

/* ── Reader Preview Card ────────────────────────────────────────── */
.reader-preview-card {
    background: #faf6ee;
    border: 1px solid rgba(184, 134, 27, 0.25);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.reader-preview-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(184, 134, 27, 0.2);
}

.preview-eyebrow {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b8941f;
    margin-bottom: 0.35rem;
}

.preview-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: #1a3a5c;
    font-weight: 600;
    line-height: 1.25;
}

/* ── Scoped Chapter Book Typography for Reader Preview ──────────── */
.reader-preview-surface {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.95;
    color: #2c2c2c;
}

.reader-preview-surface .chapter-epigraph {
    text-align: center;
    margin: 1.5rem auto 1.25rem;
    max-width: 520px;
    font-style: italic;
    color: #555555;
    font-size: 1rem;
    line-height: 1.8;
}

.reader-preview-surface .epigraph-attribution {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    color: #b8941f;
    letter-spacing: 0.5px;
    font-style: normal;
}

.reader-preview-surface .chapter-divider {
    height: 1px;
    max-width: 260px;
    margin: 1.5rem auto 2.2rem;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
}

.reader-preview-surface .chapter-body {
    max-width: 680px;
    margin: 0 auto;
}

.reader-preview-surface .chapter-body p {
    margin-bottom: 1.35rem;
    text-indent: 1.5em;
}

.reader-preview-surface .chapter-body p:first-of-type,
.reader-preview-surface .scene-break + p,
.reader-preview-surface .pull-quote + p,
.reader-preview-surface h2 + p,
.reader-preview-surface h3 + p {
    text-indent: 0;
}

.reader-preview-surface .chapter-body > p:first-of-type::first-letter {
    float: left;
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    line-height: 0.75;
    margin-right: 0.12em;
    margin-top: 0.1em;
    color: #d4af37;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

.reader-preview-surface h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    color: #2e5a8c;
    margin: 2.2rem 0 1rem;
    text-align: center;
    letter-spacing: 0.05em;
}

.reader-preview-surface h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: #b8941f;
    margin: 1.8rem 0 0.8rem;
    text-align: center;
}

.reader-preview-surface .scene-break {
    text-align: center;
    color: #d4af37;
    font-size: 1.1rem;
    letter-spacing: 0.6em;
    margin: 2.2rem 0;
    user-select: none;
}

.reader-preview-surface .pull-quote {
    border-left: none !important;
    background: transparent !important;
    text-align: center;
    max-width: 520px;
    margin: 2.2rem auto !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.18rem;
    font-style: italic;
    color: #2e5a8c;
    border-top: 1px solid #d4af37 !important;
    border-bottom: 1px solid #d4af37 !important;
    line-height: 1.65;
}

.reader-preview-surface .chapter-image {
    margin: 2rem auto;
    max-width: 560px;
    text-align: center;
}

.reader-preview-surface .chapter-image img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.reader-preview-surface .chapter-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #555555;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.3px;
}

.reader-preview-surface .chapter-end-ornament {
    text-align: center;
    color: #d4af37;
    font-size: 1.2rem;
    letter-spacing: 0.4em;
    margin: 2.5rem 0 1rem;
}

/* ── HTML Code Editor Panel ─────────────────────────────────────── */
.code-editor-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.code-editor-note {
    font-size: 0.82rem;
    color: var(--ink-faded);
    font-style: italic;
}

.html-source-editor {
    width: 100%;
    min-height: 380px;
    padding: 1rem;
    background: #1e1e24;
    color: #dcdcdc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.html-source-editor:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── Form Section Header ───────────────────────────────────────── */
.form-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.form-section-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--indigo);
}

/* ── File Browser Badges ────────────────────────────────────────── */
.file-path-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--indigo);
    background: rgba(184, 134, 27, 0.12);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 4px;
    display: block;
    margin-bottom: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-warning-root {
    display: inline-block;
    background: #fdf2f2;
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}

.badge-folder {
    display: inline-block;
    background: var(--gold-glow);
    color: var(--indigo);
    border: 1px solid var(--gold);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Explanatory Notes Side Panel (Collapsible Push-Aside) ───────── */
.notes-panel {
    position: fixed;
    top: var(--app-header-h, 57px);
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 92vw;
    background: var(--parchment);
    border-left: 3px solid var(--gold);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.25);
    z-index: 95;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.notes-panel.open {
    transform: translateX(0);
}

/* Header */
.notes-header {
    background: var(--indigo);
    color: #fff;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--gold);
    flex-shrink: 0;
}

.notes-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notes-header-icon {
    font-size: 1.7rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.notes-header-title h3 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--gold-light);
    line-height: 1.2;
}

.notes-header-sub {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
}

.notes-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notes-action-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(184, 134, 27, 0.5);
    color: #fff;
    border-radius: var(--radius);
    padding: 0.35rem 0.65rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.notes-action-btn:hover {
    background: var(--gold);
    color: var(--indigo);
    border-color: var(--gold-light);
}

.notes-close-btn {
    font-size: 1.1rem;
    padding: 0.35rem 0.65rem;
    line-height: 1;
}

.notes-pin-btn.active {
    background: var(--gold);
    color: var(--indigo);
    font-weight: 600;
}

/* Quick Navigation Bar */
.notes-quick-nav {
    display: flex;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    background: var(--parchment-dark);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.quick-nav-pill {
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.76rem;
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition);
}

.quick-nav-pill:hover {
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--indigo);
}

/* Body */
.notes-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--parchment-mid);
}

.notes-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border);
}

.notes-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.notes-section-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--indigo);
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.notes-section p {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.notes-callout {
    background: var(--parchment-mid);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0.85rem 0;
}

.notes-callout-warning {
    background: #fff5eb;
    border-left-color: #d97706;
    color: #78350f;
}

.notes-callout-gold {
    background: rgba(184, 134, 27, 0.1);
    border-left-color: var(--gold);
}

.notes-tree {
    background: #201a14;
    color: #e5d8c3;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0.75rem 0;
    border: 1px solid var(--border);
}

.notes-tree code {
    font-family: inherit;
}

.notes-list {
    margin-left: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notes-list strong {
    color: var(--indigo);
}

.notes-sublist {
    margin-left: 1.2rem;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Syntax Card with Interactive Insert Button */
.syntax-card {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.syntax-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.syntax-title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--indigo);
}

.btn-syntax-insert {
    background: var(--parchment);
    border: 1px solid var(--gold);
    color: var(--ink);
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-syntax-insert:hover {
    background: var(--gold);
    color: var(--indigo);
    box-shadow: 0 1px 4px var(--gold-glow);
}

.syntax-desc {
    font-size: 0.82rem;
    color: var(--ink-faded);
    margin-bottom: 0.45rem;
    line-height: 1.45;
}

.syntax-code {
    background: #251d16;
    color: #e8d5be;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    overflow-x: auto;
    display: block;
    margin-top: 0.35rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.syntax-hint {
    font-size: 0.78rem;
    color: var(--ink-faded);
    margin-top: 0.4rem;
    font-style: italic;
}

/* ── Side-by-Side Push-Aside Mode (Desktop & Large Screens) ──────── */
body.notes-open .tab-content {
    margin-right: 470px;
    max-width: calc(100% - 470px);
    transition: margin-right 0.3s ease, max-width 0.3s ease;
}

.header-notes-btn[aria-expanded="true"] {
    background: var(--gold);
    color: var(--indigo);
}

[draggable="true"] {
    cursor: grab;
    user-select: none;
}
[draggable="true"]:active {
    cursor: grabbing;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tab-content { padding: 1rem; }
    .form-row { flex-direction: column; }
    .form-group-grow { min-width: 0; }
    .file-card { flex-wrap: wrap; }
    .file-actions { width: 100%; justify-content: flex-start; }
    .header-user .user-name { display: none; }
    .notes-panel { width: 100vw; max-width: 100vw; top: 0; }
    body.notes-open .tab-content { margin-right: 0; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE COMPOSER — side-by-side editor + reader preview
   ═══════════════════════════════════════════════════════════════════ */


.plain-text-area.drag-over {
    background: #fff8e6;
    box-shadow: inset 0 0 0 2px var(--gold);
}

.composer-preview {
    display: flex;
    flex-direction: column;
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
    min-width: 0;
}

.live-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--parchment-dark);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
    font-size: 0.8rem;
}

.live-preview-label { font-weight: 600; color: var(--indigo); }

.live-preview-controls { display: flex; align-items: center; gap: 0.75rem; }

.mini-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; color: var(--ink-faded); }

.width-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.width-btn { background: var(--parchment); border: none; padding: 0.2rem 0.5rem; cursor: pointer; font-size: 0.85rem; }
.width-btn + .width-btn { border-left: 1px solid var(--border); }
.width-btn.active { background: var(--gold-glow); }

.live-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    min-height: 1.9rem;
    background: var(--parchment);
}
.live-status:empty { display: none; }

.live-chip {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #fffdf9;
    border: 1px solid var(--border);
    color: var(--ink-faded);
    white-space: nowrap;
}
.live-chip.chip-warn { background: #fdecea; border-color: #e0a39c; color: var(--danger); cursor: pointer; }
.live-chip.chip-info { background: #eef4fb; border-color: #a9c3e0; color: #1a3a5c; }
.live-chip.chip-muted { opacity: 0.75; }

.live-preview-scroll {
    overflow-y: auto;
    padding: 1rem;
    background: #ece3cf;
    max-height: 75vh;
}

.live-card { transition: max-width 0.25s ease; }
.live-card.is-phone {
    max-width: 390px;
    padding: 1.75rem 1.1rem;
}
.live-card.is-phone .reader-preview-surface { font-size: 1rem; }
.live-card.is-phone .preview-title { font-size: 1.4rem; }

.live-empty {
    text-align: center;
    color: var(--ink-faded);
    font-style: italic;
    font-size: 0.95rem;
}

/* The block your cursor is in */
.reader-preview-surface .live-current {
    box-shadow: -10px 0 0 -7px var(--gold);
    background: linear-gradient(to right, rgba(212, 175, 55, 0.07), transparent 60%);
    transition: background 0.3s ease;
}

/* Missing / pending images in the preview */
.reader-preview-surface figure[data-img-state="missing"],
.reader-preview-surface figure[data-img-state="loading"] {
    border: 2px dashed #d9a79f;
    border-radius: 6px;
    padding: 1rem;
    background: #fdf3f1;
    min-height: 4rem;
}
.reader-preview-surface figure[data-img-state="loading"] { border-color: var(--border); background: #faf6ee; }
.reader-preview-surface figure[data-img-state="missing"] img,
.reader-preview-surface figure[data-img-state="loading"] img { display: none; }
.reader-preview-surface figure[data-img-state="missing"]::before,
.reader-preview-surface figure[data-img-state="loading"]::before {
    content: "⚠ " attr(data-img-msg);
    display: block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-style: normal;
    color: var(--danger);
    margin-bottom: 0.4rem;
}
.reader-preview-surface figure[data-img-state="loading"]::before { content: "⏳ " attr(data-img-msg); color: var(--ink-faded); }
.reader-preview-surface figure[data-img-state="local"] { outline: 2px solid rgba(74, 144, 226, 0.35); outline-offset: 4px; border-radius: 4px; }

/* Match the book's heading font for drop caps; let the .drop-cap class take over */
.reader-preview-surface {
    --heading-font: 'Libre Bodoni', Georgia, serif;
}
.reader-preview-surface .chapter-body > p:first-of-type:not(.drop-cap)::first-letter {
    font-family: 'Libre Bodoni', Georgia, serif;
}

/* ── Narrow-screen Write / Preview switch ── */
.composer-switch {
    display: flex;
    gap: 0;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    width: max-content;
}
.composer-switch-btn {
    background: var(--parchment);
    border: none;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--ink);
}
.composer-switch-btn + .composer-switch-btn { border-left: 1px solid var(--border); }
.composer-switch-btn.active { background: var(--gold-glow); font-weight: 600; color: var(--indigo); }

/* ── Toolbar drop-down menus ── */
.tool-menu { position: relative; display: inline-block; }
.tool-menu > summary { list-style: none; display: inline-block; }
.tool-menu > summary::-webkit-details-marker { display: none; }
.tool-menu[open] > summary { background: var(--gold-glow); border-color: var(--gold); }
.tool-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 190px;
    background: #fffdf9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px var(--shadow);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}
.tool-menu-list button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--ink);
    cursor: pointer;
    text-transform: capitalize;
}
.tool-menu-list button:hover { background: var(--gold-glow); }
.tool-menu-glyphs { flex-direction: row; flex-wrap: wrap; width: 220px; }
.tool-menu-glyphs button { font-size: 1.3rem; color: #b8941f; width: 40px; justify-content: center; }
.menu-note { font-size: 0.72rem; color: var(--ink-faded); padding: 0.3rem 0.4rem; font-family: var(--font-ui); }
.menu-swatch { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 20px; overflow: hidden; container-type: normal; }
.menu-swatch .divider { margin: 0; width: 70px; font-size: 0.7rem; }
.menu-swatch .divider::before { font-size: 0.9rem; }

/* ── Image tray ── */
.image-tray {
    border-bottom: 1px solid var(--border);
    background: var(--parchment);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
}
.image-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.image-tray-title { font-weight: 600; color: var(--indigo); }
.image-tray-title code { font-weight: 400; font-size: 0.75rem; color: var(--ink-faded); }
.image-tray-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.image-tray-label { color: var(--ink-faded); }
.image-tray-select { font-size: 0.78rem; padding: 0.2rem; border: 1px solid var(--border); border-radius: 4px; background: #fffdf9; }
.image-tray-items { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.image-tray-empty { color: var(--ink-faded); font-style: italic; margin: 0.25rem 0; }
.tray-item {
    position: relative;
    flex: 0 0 104px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fffdf9;
    overflow: hidden;
}
.tray-item.is-local { border-color: #7ab3f5; }
.tray-item.is-used { box-shadow: inset 0 -3px 0 var(--gold); }
.tray-insert { display: block; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.tray-insert img, .tray-noimg { display: flex; width: 100%; height: 68px; object-fit: cover; align-items: center; justify-content: center; background: var(--parchment-dark); }
.tray-name { display: block; padding: 0.2rem 0.35rem; font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tray-insert:hover .tray-name { color: var(--indigo); text-decoration: underline; }
.tray-badges { position: absolute; top: 3px; left: 3px; right: 3px; display: flex; gap: 3px; align-items: flex-start; pointer-events: none; }
.tray-badge { font-size: 0.6rem; padding: 0 0.3rem; border-radius: 3px; background: rgba(255, 253, 249, 0.92); color: var(--ink); }
.badge-local { background: #1a3a5c; color: #fff; }
.badge-used { background: var(--gold); color: #fff; }
.tray-remove { margin-left: auto; pointer-events: auto; border: none; background: rgba(139, 26, 26, 0.85); color: #fff; border-radius: 3px; font-size: 0.65rem; cursor: pointer; padding: 0 0.3rem; }

.checkbox-pill-select select { margin-left: 0.35rem; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: #fffdf9; }

/* ── Pre-flight check ── */
.preflight {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: #fffdf9;
}
.preflight-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.preflight-head .form-section-title { margin: 0; }
.preflight-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: 0.85rem; }
.preflight-list li { padding: 0.25rem 0 0.25rem 1.6rem; position: relative; line-height: 1.45; }
.preflight-list li::before { position: absolute; left: 0; top: 0.25rem; }
.preflight-list .pf-ok::before { content: "✓"; color: var(--success-light); font-weight: 700; }
.preflight-list .pf-info::before { content: "ℹ"; color: #2e5a8c; }
.preflight-list .pf-warn { color: #7a4a00; }
.preflight-list .pf-warn::before { content: "⚠"; }
.preflight-list .pf-error { color: var(--danger); font-weight: 600; }
.preflight-list .pf-error::before { content: "✗"; }
.preflight-list code { font-size: 0.78rem; background: var(--parchment); padding: 0 0.25rem; border-radius: 3px; }
.dc-glyph { font-family: 'Libre Bodoni', Georgia, serif; color: #b8941f; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   COMPOSER LAYOUT
   < 1100px  : tools + editor, with a Write / Preview switch
   1100–1599 : tools above the editor, live preview alongside
   ≥ 1600px  : three columns — tool rail | editor | preview — sized to
               the window, each scrolling on its own so the tools never
               scroll away while you work through the text
   ═══════════════════════════════════════════════════════════════════ */

.tab-content:where(:has(#tab-chapters.active)) {
    max-width: 2600px;
}

.composer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "editor" "preview";
    gap: 0 1rem;
    margin-bottom: 1rem;
    /* --app-header-h is measured by dev.js (the purple header is sticky) */
    scroll-margin-top: calc(var(--app-header-h, 60px) + 0.75rem);
}

.composer-tools { grid-area: tools; min-width: 0; }
.composer-editor { grid-area: editor; min-width: 0; }
.composer-preview { grid-area: preview; }

/* Tools box joins onto the top of the editor box */
.composer-tools {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: visible;
}
.composer-tools .editor-toolbar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.composer-editor .editor-container {
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.composer-editor .plain-text-area { min-height: 420px; }

.tool-group { display: contents; }
.tool-group-label { display: none; }

@media (max-width: 1099px) {
    .composer-grid[data-view="write"] .composer-preview { display: none; }
    .composer-grid[data-view="preview"] .composer-editor,
    .composer-grid[data-view="preview"] .composer-tools { display: none; }
}

@media (min-width: 1100px) {
    .composer-switch { display: none; }
    .composer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tools preview" "editor preview";
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    .composer-preview {
        position: sticky;
        top: calc(var(--app-header-h, 60px) + 1rem);
        max-height: calc(100vh - var(--app-header-h, 60px) - 2rem);
    }
    .live-preview-scroll { max-height: none; flex: 1; }
    .composer-editor .plain-text-area { min-height: calc(100vh - 300px); }
}

/* ── Wide screens: left-hand tool rail ── */
@media (min-width: 1600px) {
    .composer-grid {
        grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tools editor preview";
        grid-template-rows: auto;
        align-items: stretch;
        height: calc(100vh - var(--app-header-h, 60px) - 1.5rem);
        min-height: 560px;
    }

    .composer-tools,
    .composer-editor,
    .composer-preview {
        min-height: 0;
        height: 100%;
    }

    /* Rail */
    .composer-tools {
        border-bottom: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px var(--shadow);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .composer-tools .editor-toolbar {
        flex-direction: column;
        align-items: stretch;
        border-radius: 0;
        padding: 0.75rem;
    }
    .composer-tools .toolbar-tools { flex-direction: column; gap: 0.9rem; }
    .tool-group { display: flex; flex-direction: column; gap: 0.3rem; }
    .tool-group-label {
        display: block;
        font-family: var(--font-ui);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-faded);
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.2rem;
        margin-bottom: 0.1rem;
    }
    .composer-tools .tool-btn { text-align: left; font-size: 0.82rem; padding: 0.35rem 0.6rem; }
    .composer-tools .toolbar-stats { order: -1; margin-bottom: 0.5rem; }

    /* Menus sit open inside the rail instead of dropping down */
    .composer-tools .tool-menu { display: block; }
    .composer-tools .tool-menu > summary { display: block; pointer-events: none; background: transparent; border-color: transparent; padding-left: 0.1rem; font-weight: 600; color: var(--indigo); }
    .composer-tools .tool-menu > summary .rail-hide { display: none; }
    .composer-tools .tool-menu-list {
        position: static;
        min-width: 0;
        width: auto;
        box-shadow: none;
        margin-top: 0.15rem;
    }
    .composer-tools .tool-menu-glyphs { display: grid; grid-template-columns: repeat(5, 1fr); }
    .composer-tools .tool-menu-glyphs button { width: auto; }
    .composer-tools .tool-menu-glyphs .menu-note { grid-column: 1 / -1; }

    /* Image tray always visible in the rail, as a 2-column grid */
    #tool-inline-image { display: none; }
    .composer-tools .image-tray { border-bottom: none; border-top: 1px solid var(--border); flex: 1; }
    .composer-tools .image-tray-head { flex-direction: column; align-items: stretch; }
    .composer-tools .image-tray-actions { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem; }
    .composer-tools .image-tray-actions label.tool-btn { grid-column: 1 / 2; text-align: center; }
    .composer-tools .image-tray-items { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
    .composer-tools .tray-item { flex: none; }
    .composer-tools .tray-insert img,
    .composer-tools .tray-noimg { height: 80px; }

    /* Editor fills its column; the text scrolls inside it */
    .composer-editor .editor-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-lg);
    }
    .composer-editor .plain-text-area {
        flex: 1;
        min-height: 0;
        resize: none;
    }

    /* Preview fills its column */
    .composer-preview { position: static; max-height: none; }
    .composer-preview .live-preview-scroll { min-height: 0; }
}

/* ── Landing Hero tab ──────────────────────────────────────────── */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
}
.hero-card {
    background: #fffdf9;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: 0 2px 10px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}
.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.hero-card-head .form-section-title { margin: 0; }
.hero-frame {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0b111b;
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-frame img,
.hero-frame canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-frame-empty {
    color: var(--ink-faded);
    font-size: 0.9rem;
    font-style: italic;
}
.hero-frame .hero-frame-empty { color: #a0b4c8; }
.hero-drop { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.hero-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 0.9rem;
    font-size: 0.88rem;
}
.hero-facts dt { color: var(--ink-faded); }
.hero-facts dd { margin: 0; overflow-wrap: anywhere; }
.hero-notes { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.hero-note {
    font-size: 0.86rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--gold);
    background: var(--parchment-mid);
}
.hero-note-ok   { border-left-color: var(--success-light); background: rgba(39, 174, 96, 0.08); }
.hero-note-warn { border-left-color: var(--danger-light);  background: rgba(192, 57, 43, 0.08); }
.hero-crop { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--ink-faded); }
.hero-crop input[type="range"] { width: 100%; accent-color: var(--gold); }
.hero-card-actions { display: flex; justify-content: flex-end; }
.hero-card .form-actions { margin-top: 0; }
.hero-history-hint { font-size: 0.86rem; color: var(--ink-faded); margin-bottom: 0.9rem; }
.hero-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.hero-history-list > .hero-frame-empty { grid-column: 1 / -1; }
.hero-history-card {
    background: #fffdf9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.hero-history-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    background: #0b111b;
}

/* ── Metadata Health & Conflict Modals ──────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 16, 12, 0.72);
    backdrop-filter: blur(4px);
    z-index: 1000;
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-card {
    background: var(--parchment);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    max-width: 620px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease-out;
}

.modal-card-wide {
    max-width: 960px;
    max-height: 88vh;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--parchment-dark);
    border-bottom: 1px solid var(--border);
}

.modal-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header-icon {
    font-size: 1.6rem;
}

.modal-header-title h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--indigo);
}

.modal-header-sub {
    font-size: 0.8rem;
    color: var(--ink-faded);
}

.modal-close-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--ink-faded);
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.modal-close-btn:hover {
    background: var(--parchment-mid);
    color: var(--ink);
    border-color: var(--border);
}

.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(88vh - 140px);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--parchment-mid);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal-footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conflict-intro {
    font-size: 0.95rem;
    color: var(--ink);
    margin-bottom: 1rem;
}

.conflict-comparison {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.conflict-box {
    flex: 1;
    background: #fffdf9;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.conflict-box--existing {
    border-color: rgba(192, 57, 43, 0.4);
    background: #fffafa;
}

.conflict-box--new {
    border-color: rgba(46, 125, 50, 0.4);
    background: #f7faf7;
}

.conflict-box-tag {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faded);
    margin-bottom: 0.35rem;
}

.conflict-box-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--indigo);
    margin-bottom: 0.25rem;
}

.conflict-box-slug code {
    font-size: 0.78rem;
    color: var(--ink-faded);
}

.conflict-arrow {
    font-size: 1.3rem;
    color: var(--gold);
}

.conflict-hint {
    font-size: 0.85rem;
    color: var(--ink-faded);
    margin: 0;
    line-height: 1.5;
}

.conflict-modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Metadata Health Status & Table ─────────────────────────────── */
.metadata-status-banner {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.metadata-status-banner--error {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.35);
    color: #8a1f11;
}

.metadata-status-banner--ok {
    background: rgba(46, 125, 50, 0.08);
    border: 1px solid rgba(46, 125, 50, 0.35);
    color: #1b5e20;
}

.metadata-status-issues-list {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
}

.metadata-status-issues-list li {
    margin-bottom: 0.25rem;
}

.metadata-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fffdf9;
}

.metadata-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.metadata-table th {
    background: var(--parchment-dark);
    padding: 0.65rem 0.85rem;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    border-bottom: 1px solid var(--border);
}

.metadata-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

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

.metadata-table tr.is-duplicate {
    background: rgba(192, 57, 43, 0.08);
}

.badge-duplicate {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(192, 57, 43, 0.15);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.3);
    margin-left: 0.35rem;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 0.35rem;
    line-height: 1;
}

.form-header-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.badge-status {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-status--published {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.3);
}

.badge-status--coming-soon {
    background: rgba(184, 134, 27, 0.12);
    color: #b8861b;
    border: 1px solid rgba(184, 134, 27, 0.3);
}

.badge-status--planned {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* ── Interactive Chapter Status Dropdown in Metadata Modal ──────── */
.meta-status-select {
    display: inline-block;
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 22px 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 8px 5px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.meta-status-select:focus {
    box-shadow: 0 0 0 2px rgba(184, 134, 27, 0.4);
}

.meta-status-select--published {
    background-color: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.35);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%232e7d32' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}
.meta-status-select--published:hover {
    background-color: rgba(46, 125, 50, 0.2);
    border-color: rgba(46, 125, 50, 0.6);
}

.meta-status-select--coming-soon {
    background-color: rgba(184, 134, 27, 0.14);
    color: #b8861b;
    border: 1px solid rgba(184, 134, 27, 0.45);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23b8861b' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}
.meta-status-select--coming-soon:hover {
    background-color: rgba(184, 134, 27, 0.22);
    border-color: rgba(184, 134, 27, 0.7);
}

.meta-status-select--planned {
    background-color: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.35);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%2364748b' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}
.meta-status-select--planned:hover {
    background-color: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.6);
}

.meta-status-select option {
    background: #fff;
    color: var(--ink, #2d261e);
    font-weight: 500;
    font-size: 0.8rem;
}

/* ── Metadata Health Drag-and-Drop & Renumbering UI ───────────────── */
.metadata-reorder-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.75rem;
}

.reorder-toolbar-hints {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--ink-faded);
}

.reorder-toolbar-icon {
    font-size: 1.15rem;
    color: var(--gold);
    line-height: 1;
}

.reorder-toolbar-options {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--ink);
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(184, 134, 27, 0.25);
}

.reorder-opt-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.reorder-start-num-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.input-inline-sm {
    width: 48px;
    padding: 2px 4px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    background: #fff;
    color: var(--ink);
    text-align: center;
}

.metadata-unsaved-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: rgba(184, 134, 27, 0.14);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--ink);
    animation: fadeIn 0.2s ease-out;
}

.metadata-unsaved-banner .unsaved-text {
    flex: 1;
}

.drag-handle-cell {
    width: 48px;
    text-align: center;
    padding: 0.4rem 0.25rem !important;
    user-select: none;
}

.drag-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.drag-grip {
    cursor: grab;
    font-size: 1.15rem;
    color: var(--ink-faded);
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all var(--transition);
}

.drag-grip:hover {
    color: var(--gold);
    background: rgba(184, 134, 27, 0.15);
}

.drag-grip:active {
    cursor: grabbing;
}

.order-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.btn-order-arrow {
    background: var(--parchment-mid);
    border: 1px solid var(--border);
    color: var(--ink-faded);
    font-size: 7px;
    width: 16px;
    height: 12px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-order-arrow:hover:not(:disabled) {
    background: var(--gold);
    color: #fff;
    box-shadow: 0 0 5px var(--gold-glow);
}

.btn-order-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.ch-num-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.badge-renumbered {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #8a5a00;
    background: rgba(184, 134, 27, 0.15);
    border: 1px solid rgba(184, 134, 27, 0.35);
    border-radius: 999px;
    padding: 1px 5px;
    margin-left: 0.3rem;
}

.draggable-chapter-row {
    transition: background 0.15s ease;
}

.draggable-chapter-row:hover td {
    background: rgba(184, 134, 27, 0.04);
}

.draggable-chapter-row.is-dragging {
    opacity: 0.35;
    background: rgba(184, 134, 27, 0.15) !important;
}

.draggable-chapter-row.drag-insert-before td {
    border-top: 2px solid var(--gold) !important;
    background: rgba(184, 134, 27, 0.08);
}

.draggable-chapter-row.drag-insert-after td {
    border-bottom: 2px solid var(--gold) !important;
    background: rgba(184, 134, 27, 0.08);
}

.btn-pulse-save {
    animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(184, 134, 27, 0.4);
    }
    50% {
        box-shadow: 0 0 10px 2px rgba(184, 134, 27, 0.6);
    }
}