@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600&family=Merriweather:wght@400;700&display=swap');

/* -----------------------------
   Default palette: DARK (science-fantasy)
------------------------------ */
:root {
    --bg-color:            #0e0e10;  /* editorial charcoal */
    --bg-elevated:         #16161a;  /* card / panel */
    --bg-raised:           #1f1f24;  /* modal, hover surface */
    --text-color:          #efe9dd;  /* warm paper */
    --text-muted:          #8b867d;  /* soft ink */
    --accent-primary:      #e6212c;  /* poster red */
    --accent-hover:        #ff2f3c;
    --accent-cool:         #6b7c8f;  /* cool steel-blue secondary */
    --accent-border:       #26262a;
    --accent-border-strong:#3a3a40;
    --accent-fg:           #ffffff;  /* foreground text on accent-primary bg */
    --danger:              #ff5b5b;
    --shadow-soft:         0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-lift:         0 12px 44px rgba(0, 0, 0, 0.65);

    --font-body: 'Merriweather', Georgia, serif;
    --font-display: 'Cinzel', 'Merriweather', Georgia, serif;
}

/* Sans-serif body option */
[data-font="sans"] { --font-body: 'Inter', system-ui, sans-serif; }

/* Light theme (parchment) */
[data-theme="light"] {
    --bg-color:            #e8e5df;   /* paper cream */
    --bg-elevated:         #f2efe9;
    --bg-raised:           #ffffff;
    --text-color:          #0e0e10;   /* deep ink */
    --text-muted:          #5e5b53;
    --accent-primary:      #c81a25;   /* slightly muted red for contrast on paper */
    --accent-hover:        #a51420;
    --accent-cool:         #4a5a6d;
    --accent-border:       #d0ccc3;
    --accent-border-strong:#a89f8f;
    --accent-fg:           #ffffff;
    --danger:              #c81a25;
    --shadow-soft:         0 6px 24px rgba(14, 14, 16, 0.10);
    --shadow-lift:         0 12px 44px rgba(14, 14, 16, 0.18);
}

/* -----------------------------
   Global
------------------------------ */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    transition: background-color 0.4s ease, color 0.4s ease;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* subtle depth wash so the page doesn't feel flat */
    background-image:
        radial-gradient(1200px 600px at 15% -10%, rgba(230, 33, 44, 0.06), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(107, 124, 143, 0.05), transparent 60%);
    background-attachment: fixed;
}

::selection {
    background-color: var(--accent-primary);
    color: var(--bg-color);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--accent-border);
    background-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
}

header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: var(--text-color);
    text-transform: uppercase;
}

header h1 .title-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.65rem;
    letter-spacing: 0.35em;
    color: var(--accent-primary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    opacity: 0.85;
}

button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
}

#settings-btn {
    color: var(--text-muted);
    padding: 0.4rem;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}
#settings-btn:hover {
    color: var(--accent-primary);
    background-color: var(--bg-elevated);
}

/* -----------------------------
   Reader Layout
------------------------------ */
#reader-container {
    max-width: 680px;
    margin: 3rem auto;
    padding-right: 130px;
    padding-left: 24px;
    line-height: 1.85;
    font-size: 1.08rem;
}

#story-content h1,
#story-content h2,
#story-content h3 {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-color);
}

#story-content h1 { font-size: 1.9rem; margin: 0 0 2rem; }
#story-content h2 { font-size: 1.4rem; margin: 2.5rem 0 1rem; }

#story-content p {
    margin: 0;
}

/* -----------------------------
   Margin Likert Scales
------------------------------ */
.paragraph-wrapper {
    position: relative;
    margin-bottom: 1.6rem;
}

.margin-likert {
    position: absolute;
    right: -118px;
    top: 6px;
    display: flex;
    gap: 5px;
    opacity: 0.18;                    /* faintly visible so readers know it's there */
    transition: opacity 0.25s ease;
}

.paragraph-wrapper:hover .margin-likert,
.margin-likert:has(input:checked),
.margin-likert:focus-within {
    opacity: 1;
}

/* Brief pulse when a rating is saved */
.margin-likert.saved {
    animation: saved-pulse 1.2s ease;
}
@keyframes saved-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(230, 33, 44, 0.5); }
    40%  { box-shadow: 0 0 0 8px rgba(230, 33, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 33, 44, 0); }
}

/* -----------------------------
   Radio circles
------------------------------ */
input[type="radio"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-border-strong);
    cursor: pointer;
    margin: 0;
    background-color: transparent;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

input[type="radio"]:hover {
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

input[type="radio"]:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(230, 33, 44, 0.25);
}

/* -----------------------------
   Checkpoint
------------------------------ */
#checkpoint-container {
    margin-top: 4rem;
    padding: 2rem;
    background-color: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: var(--shadow-soft);
}

#checkpoint-container h3 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    font-size: 1rem;
    text-transform: uppercase;
}

#checkpoint-container p {
    margin: 0;
    color: var(--text-muted);
}

.checkpoint-likert {
    display: flex;
    gap: 10px;
}
.checkpoint-likert input[type="radio"] {
    width: 22px;
    height: 22px;
}

textarea {
    width: 100%;
    min-height: 110px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.98rem;
    resize: vertical;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(230, 33, 44, 0.15);
}

#next-page-btn {
    background-color: var(--accent-primary);
    color: var(--accent-fg);
    padding: 0.85rem 1.75rem;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
    align-self: flex-start;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: background-color 0.2s, transform 0.1s;
}
#next-page-btn:hover { background-color: var(--accent-hover); }
#next-page-btn:active { transform: translateY(1px); }

/* -----------------------------
   Utilities
------------------------------ */
.hidden { display: none !important; }

/* -----------------------------
   Modals
------------------------------ */
#settings-modal,
#comment-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.2s ease;
}
#comment-modal { z-index: 2000; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background: var(--bg-elevated);
    padding: 2.25rem;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 320px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: var(--shadow-lift);
}
.modal-content h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    font-size: 1.1rem;
    text-transform: uppercase;
}
.modal-content label {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: -0.5rem;
}

select {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}

#toggle-dark {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--accent-border-strong);
    padding: 0.7rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}
#toggle-dark:hover { background-color: var(--bg-raised); }

.attribution {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-align: center;
    border-top: 1px solid var(--accent-border);
    padding-top: 1rem;
}

/* -----------------------------
   Authentication UI
------------------------------ */
#login-container,
#auth-wall-wrapper,
#not-found {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem;
}
#not-found.hidden { display: none !important; }

.login-box {
    background: var(--bg-elevated);
    padding: 3rem 2.5rem;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    text-align: center;
    max-width: 420px;
    box-shadow: var(--shadow-lift);
}

.login-box h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.login-box p {
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--accent-primary);
    color: var(--accent-fg);
    padding: 0.85rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    margin: 1.5rem auto 0;
    width: 100%;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    transition: background-color 0.2s;
}
.auth-btn:hover { background-color: var(--accent-hover); }

.auth-btn.sign-out {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--accent-border-strong);
    margin-top: 0.5rem;
}
.auth-btn.sign-out:hover {
    background-color: var(--bg-raised);
    color: var(--danger);
    border-color: var(--danger);
}

/* --- Official-style Google sign-in button --- */
.google-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    margin: 1.75rem auto 0;
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-family: 'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.18s ease, transform 0.08s ease, background-color 0.15s;
}
.google-signin-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(230, 33, 44, 0.15);
}
.google-signin-btn:active { transform: translateY(1px); }
.google-signin-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.4);
}
.google-signin-btn .g-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* -----------------------------
   Highlight Tooltip
------------------------------ */
#highlight-tooltip {
    position: absolute;
    background-color: var(--bg-raised);
    color: var(--text-color);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--accent-border-strong);
    box-shadow: var(--shadow-soft);
    z-index: 1500;
    pointer-events: auto;
    transition: top 0.2s ease-out;
}

.tooltip-btn {
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
}
.tooltip-btn:hover { color: var(--accent-hover); }

/* -----------------------------
   Modal close buttons
------------------------------ */
#close-btn, #close-comment-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-muted);
    transition: color 0.2s, background-color 0.2s;
}
#close-btn:hover, #close-comment-btn:hover {
    color: var(--danger);
    background-color: var(--bg-raised);
}

.quote-preview {
    font-style: italic;
    font-family: var(--font-body);
    border-left: 3px solid var(--accent-primary);
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 4px 4px 0;
}
[data-theme="light"] .quote-preview { background: rgba(0, 0, 0, 0.04); }

/* -----------------------------
   Toast
------------------------------ */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-raised);
    color: var(--text-color);
    padding: 0.7rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--accent-primary);
    font-size: 0.9rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 3000;
}
#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* -----------------------------
   Admin Dashboard
------------------------------ */
.dashboard-layout {
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-align: left;
}
.stat-card h3 {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-family: var(--font-display);
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}
.stat-card p {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: var(--font-display);
}

.admin-section-title {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    font-size: 0.9rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent-border);
}

.admin-entry {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 0.9rem;
}
.admin-entry.rating   { border-left-color: var(--accent-cool); }
.admin-entry.checkpoint { border-left-color: var(--text-muted); }

.admin-entry .meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
    letter-spacing: 0.02em;
}
.admin-entry .meta strong { color: var(--text-color); }
.admin-entry .body { margin: 0.4rem 0 0; line-height: 1.6; }

.rating-pip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-cool);
    color: var(--bg-color);
    font-weight: 600;
    font-size: 0.8rem;
}

/* -----------------------------
   Reader: nav row + page indicator
------------------------------ */
#nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 3rem;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--accent-border-strong);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background-color 0.15s, opacity 0.2s;
}
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nav-btn:hover:not(:disabled) { background-color: var(--bg-raised); }
.nav-btn.primary {
    background-color: var(--accent-primary);
    color: var(--accent-fg);
    border-color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.nav-btn.primary:hover:not(:disabled) { background-color: var(--accent-hover); }
.page-indicator {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.finale {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
}
.finale h2 {
    font-family: var(--font-display);
    color: var(--accent-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}
.danger-text { color: var(--danger); }

/* Anonymous read mode — hide feedback controls, keep the text visible */
body.anon-mode .margin-likert,
body.anon-mode .comment-pip,
body.anon-mode #highlight-tooltip {
    display: none !important;
}
body.anon-mode .paragraph-wrapper { margin-bottom: 1.2rem; }

#anon-banner {
    max-width: 680px;
    margin: 1rem auto 2rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    color: var(--text-muted);
    text-align: center;
}
#anon-banner p { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
#anon-banner i { color: var(--accent-primary); width: 16px; height: 16px; }

.linky {
    color: var(--accent-primary);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.linky:hover { color: var(--accent-hover); }

/* Checkpoint history */
#checkpoint-history .history-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}
.history-entry {
    background: var(--bg-raised);
    border-left: 2px solid var(--accent-cool);
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.history-meta { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--text-muted); }
.history-when { }
.history-text { margin: 0; font-size: 0.95rem; }

/* -----------------------------
   Reader: comment pip + popover
------------------------------ */
.comment-pip {
    position: absolute;
    right: -46px;
    top: 2px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
}
.comment-pip:hover { background-color: var(--accent-primary); color: var(--bg-color); }
.comment-pip.pending {
    border-style: dashed;
}
.comment-pip .pip-count {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--bg-color);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.comment-pip .pip-count.hidden { display: none; }
.comment-pip i { width: 14px; height: 14px; }

#comment-popover {
    position: absolute;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lift);
    padding: 0.5rem;
    z-index: 1200;
    max-height: 60vh;
    overflow-y: auto;
}
.popover-comment {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--accent-border);
}
.popover-comment:last-child { border-bottom: none; }
.popover-comment blockquote {
    margin: 0 0 0.4rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--accent-primary);
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.popover-comment p { margin: 0; font-size: 0.95rem; }
.popover-row-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}
.popover-del {
    color: var(--danger);
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.popover-del:hover { background: rgba(255, 91, 91, 0.12); }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    background: var(--bg-raised);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tag.published { background: var(--accent-cool); color: var(--bg-color); }
.tag.draft { background: var(--bg-raised); color: var(--text-muted); }

/* -----------------------------
   Author Dashboard
------------------------------ */
.header-link {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.header-link:hover { color: var(--accent-primary); }

#tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--accent-border);
}
.tab-btn {
    padding: 0.6rem 1rem;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text-color); }
.tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--accent-border-strong);
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    transition: background-color 0.15s;
    cursor: pointer;
}
.btn:hover { background-color: var(--bg-raised); }
.btn.primary {
    background-color: var(--accent-primary);
    color: var(--accent-fg);
    border-color: var(--accent-primary);
    font-weight: 600;
}
.btn.primary:hover { background-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { color: var(--text-color); background: var(--bg-raised); }
.btn.danger {
    color: var(--danger);
    border-color: rgba(255, 91, 91, 0.4);
}
.btn.danger:hover { background: rgba(255, 91, 91, 0.12); }

.empty-state {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px dashed var(--accent-border-strong);
    border-radius: 12px;
}

.manuscript-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-left: 3px solid var(--accent-primary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}
.manuscript-card h3 { margin: 0 0 0.3rem; font-family: var(--font-display); letter-spacing: 0.04em; font-size: 1.05rem; }
.manuscript-card .meta { margin: 0; color: var(--text-muted); font-size: 0.85rem; }

.detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
    flex-wrap: wrap;
}
.detail-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.title-input {
    flex: 1;
    min-width: 260px;
    background: transparent;
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--accent-border);
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
}
.title-input:focus { outline: none; border-bottom-color: var(--accent-primary); }

.content-editor {
    width: 100%;
    min-height: 340px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 1rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    margin: 0.75rem 0 2rem;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.switch input { width: 16px; height: 16px; accent-color: var(--accent-primary); appearance: auto; border-radius: 3px; }

.feedback-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--accent-border);
    margin-top: 0.5rem;
}

/* Share modal */
.share-url {
    padding: 0.6rem 0.8rem;
    background: var(--bg-color);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85rem;
    color: var(--accent-primary);
    word-break: break-all;
}
.share-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.qr-container {
    display: flex;
    justify-content: center;
    background: #e8e5df;
    padding: 1rem;
    border-radius: 8px;
}

/* Status chips */
.title-block { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 260px; }
.title-meta { display: flex; align-items: center; gap: 0.5rem; }
.status-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bg-raised);
    color: var(--text-muted);
}
.status-chip.draft { background: var(--bg-raised); color: var(--text-muted); }
.status-chip.published { background: var(--accent-cool); color: var(--bg-color); }
.status-chip.locked { background: rgba(230, 33, 44, 0.15); color: var(--accent-primary); border: 1px solid var(--accent-primary); }
.version-info {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}
.tag.version { background: rgba(107, 124, 143, 0.15); color: var(--accent-cool); border: 1px solid var(--accent-cool); }
.tag.locked { background: rgba(230, 33, 44, 0.15); color: var(--accent-primary); border: 1px solid var(--accent-primary); }

/* Locked banner */
.locked-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-soft);
}
.locked-icon {
    color: var(--accent-primary);
    background: rgba(230, 33, 44, 0.12);
    padding: 0.6rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.locked-banner h4 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
}
.locked-banner p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Locked / preview content render */
.content-preview {
    background: var(--bg-color);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.75rem 2rem;
    margin: 1rem 0 2rem;
    line-height: 1.75;
    color: var(--text-color);
}
.content-preview .preview-page {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--accent-border);
}
.content-preview .preview-page:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.content-preview h5 {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-weight: 500;
}
.content-preview p { margin: 0 0 1rem; }
.content-preview h1, .content-preview h2, .content-preview h3 {
    font-family: var(--font-display);
    color: var(--text-color);
    letter-spacing: 0.04em;
}

/* Preview modal */
.preview-modal-content {
    max-width: 780px !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.preview-modal-content .content-preview {
    overflow-y: auto;
    flex: 1;
    margin: 0;
}

/* Typo editor */
#typo-panel { margin: 1rem 0 2rem; }
.typo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg-elevated);
    padding: 1.25rem 1.4rem;
    border-radius: 10px;
    border: 1px solid var(--accent-cool);
    border-left: 3px solid var(--accent-cool);
    margin-bottom: 1.5rem;
}
.typo-header h4 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-cool);
    font-size: 0.9rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.typo-header .help-note { margin: 0; }
.typo-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.typo-page-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--accent-border);
}
.typo-page-label:first-child { margin-top: 0; }
.typo-page-break {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 1rem 0;
}
.typo-row { margin-bottom: 1rem; }
.typo-row-label {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}
.typo-row textarea {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
}
.typo-row textarea:focus {
    outline: none;
    border-color: var(--accent-cool);
    box-shadow: 0 0 0 3px rgba(107, 124, 143, 0.15);
}
.typo-row.typo-other .typo-row-label { color: var(--accent-primary); }
.typo-row.typo-other textarea {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9rem;
}

/* --- Reader intro / outro message modal --- */
#message-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    animation: fade-in 0.2s ease;
}
.message-body {
    max-height: 55vh;
    overflow-y: auto;
    line-height: 1.75;
    color: var(--text-color);
    padding: 0.25rem 0;
}
.message-body p { margin: 0 0 1rem; }
.message-body h1, .message-body h2, .message-body h3 {
    font-family: var(--font-display);
    color: var(--accent-primary);
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
}
.finale {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-color);
    line-height: 1.8;
}
.finale h1, .finale h2, .finale h3 {
    font-family: var(--font-display);
    color: var(--accent-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Author: message editor fields --- */
.messages-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}
.messages-panel .admin-section-title { margin-top: 0 !important; border-bottom: 1px solid var(--accent-border); }
.message-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.message-field label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}
.message-field label .help-note {
    display: block;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
.message-editor {
    width: 100%;
    min-height: 130px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
}
.message-editor:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(230, 33, 44, 0.15);
}
@media (max-width: 768px) {
    .message-fields { grid-template-columns: 1fr; }
}

/* ================================
   MOBILE ACTION BAR + SHEET (reader)
================================ */
.mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(22, 22, 26, 0.96) 0%, rgba(14, 14, 16, 0.99) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--accent-primary);
    padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}
.mb-context {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.72rem;
}
.mb-focus-label {
    font-family: var(--font-display);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.mb-focus-preview {
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.mb-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mb-likert {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: 0.35rem;
}
.mb-pip {
    flex: 1;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--accent-border-strong);
    border-radius: 8px;
    position: relative;
    padding: 0;
    transition: background-color 0.15s, transform 0.08s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mb-pip:active { transform: scale(0.94); }
.mb-pip.filled {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.mb-pip.current::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}
.mb-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--accent-border-strong);
    color: var(--text-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s, transform 0.08s;
}
.mb-btn:active { transform: scale(0.92); }
.mb-btn i { width: 18px; height: 18px; }

/* Focused paragraph gets a subtle left border */
@media (max-width: 768px) {
    .paragraph-wrapper.focused {
        position: relative;
    }
    .paragraph-wrapper.focused::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 4px;
        bottom: 4px;
        width: 3px;
        background: var(--accent-primary);
        border-radius: 3px;
        opacity: 0.85;
    }
}

.mobile-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fade-in 0.18s ease;
}
.mobile-sheet-panel {
    background: var(--bg-elevated);
    color: var(--text-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    width: 100%;
    max-width: 640px;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    position: relative;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    max-height: 88vh;
    overflow-y: auto;
    animation: sheet-up 0.24s ease;
}
.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--accent-border-strong);
    border-radius: 2px;
    margin: -0.25rem auto 0.75rem;
}
@keyframes sheet-up {
    from { transform: translateY(20px); opacity: 0.9; }
    to   { transform: translateY(0);   opacity: 1;   }
}
.mobile-sheet-panel h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
}
.mobile-sheet-panel #sheet-close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-sheet-panel #sheet-close:hover { background: var(--bg-raised); color: var(--danger); }
.sheet-quote {
    background: var(--bg-color);
    color: var(--text-muted);
    border-left: 3px solid var(--accent-primary);
    padding: 0.7rem 0.9rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.55;
}
#sheet-input {
    width: 100%;
    min-height: 120px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    margin-bottom: 0.75rem;
}

.undo-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    transform: translateX(-50%);
    z-index: 3000;
    background: var(--bg-raised);
    color: var(--text-color);
    border: 1px solid var(--accent-primary);
    border-radius: 999px;
    padding: 0.55rem 0.75rem 0.55rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    box-shadow: var(--shadow-lift);
    animation: fade-in 0.16s ease;
}
.undo-toast #undo-toast-btn {
    color: var(--accent-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(230, 33, 44, 0.15);
}
.undo-toast #undo-toast-btn:hover { background: rgba(230, 33, 44, 0.28); }

/* Per-paragraph play button (desktop margin + mobile inline) */
.paragraph-play-btn {
    position: absolute;
    right: -46px;
    top: 34px;                 /* below the comment pip */
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--accent-cool);
    border: 1px solid var(--accent-cool);
    border-radius: 50%;
    cursor: pointer;
}
.paragraph-play-btn:hover { background: var(--accent-cool); color: var(--bg-color); }
.paragraph-play-btn i { width: 14px; height: 14px; }
@media (max-width: 768px) {
    .paragraph-play-btn {
        position: static;
        display: inline-flex;
        margin: 0.4rem 0 0;
        margin-left: auto;
    }
}

/* Show mobile bar on narrow screens; hide desktop margin controls there */
@media (max-width: 768px) {
    .mobile-bar { display: flex; }
    #reader-container { padding-bottom: 140px; }
    /* Hide the inline margin likert on mobile — the bottom bar takes over */
    .margin-likert { display: none !important; }
    /* Hide the highlight tooltip too — tap-to-select is unreliable on mobile,
       and the comment button on the bar is the primary path */
    #highlight-tooltip { display: none !important; }
}

/* ================================
   AUDIO PLAYER (reader)
================================ */
.audio-player {
    position: sticky;
    top: 3px;
    z-index: 40;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.1rem;
    margin: 1rem auto 1.5rem;
    max-width: 680px;
    box-shadow: var(--shadow-soft);
}
.audio-rating-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--accent-border);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.audio-rating-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
}
.audio-likert {
    display: flex;
    gap: 10px;
    position: relative;
}
.audio-likert input[type="radio"] { width: 22px; height: 22px; position: relative; }
.audio-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-basis: 100%;
    text-align: center;
}
audio#audio-el { display: none; }
.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.audio-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-raised);
    color: var(--text-color);
    border: 1px solid var(--accent-border-strong);
    border-radius: 50%;
    transition: background-color 0.15s, transform 0.1s, color 0.15s;
}
.audio-btn:hover { background: var(--bg-color); color: var(--accent-primary); }
.audio-btn.play {
    background: var(--accent-primary);
    color: var(--accent-fg);
    border-color: var(--accent-primary);
    width: 48px;
    height: 48px;
}
.audio-btn.play:hover { background: var(--accent-hover); color: var(--accent-fg); }
.audio-btn i { width: 18px; height: 18px; }
.audio-btn .tenlabel {
    position: absolute;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0;
    bottom: 4px;
}
.audio-scrubber {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#audio-seek {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-color);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    border: 1px solid var(--accent-border);
}
#audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(230, 33, 44, 0.25);
    cursor: pointer;
}
#audio-seek::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--accent-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.audio-time {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
}
.audio-time-sep { opacity: 0.5; }
.follow-toggle,
.audio-speed-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
.follow-toggle input { width: 14px; height: 14px; accent-color: var(--accent-primary); appearance: auto; border-radius: 3px; }

.audio-speed-label select {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    padding: 0.25rem 0.4rem;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.audio-speed-label select:focus { outline: none; border-color: var(--accent-primary); }

/* Diegetic bloom on the rating pip */
.diegetic-bloom {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
    animation: diegetic-bloom 0.85s ease-out forwards;
    pointer-events: none;
}
@keyframes diegetic-bloom {
    0%   { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(3.5); }
}

/* Marks list */
.audio-marks {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--accent-border);
}
.audio-marks-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.audio-marks-head h4 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}
.audio-mark {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--accent-border);
}
.audio-mark:last-child { border-bottom: none; }
.mark-play {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: var(--bg-raised);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8rem;
}
.mark-play:hover { background: var(--accent-primary); color: var(--bg-color); }
.mark-play i { width: 12px; height: 12px; }
.mark-rating { display: flex; gap: 4px; }
.mark-rating input[type="radio"] { width: 12px; height: 12px; }
.mark-comment {
    background: transparent;
    color: var(--text-color);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--accent-border);
    padding: 0.35rem 0.2rem;
    font-family: inherit;
    font-size: 0.9rem;
}
.mark-comment:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-color);
    border-radius: 4px;
}
.mark-delete {
    color: var(--danger);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.mark-delete:hover { background: rgba(255, 91, 91, 0.12); }
.mark-delete i { width: 14px; height: 14px; }

/* Now-playing paragraph glow */
.paragraph-wrapper.now-playing {
    position: relative;
}
.paragraph-wrapper.now-playing::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-primary);
    box-shadow: 0 0 12px rgba(230, 33, 44, 0.65);
    border-radius: 3px;
    animation: playing-pulse 2s ease-in-out infinite;
}
@keyframes playing-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ================================
   AUDIO UPLOAD & ALIGNER (author)
================================ */
.audio-current {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.audio-current audio { width: 100%; }
.audio-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.audio-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-color);
    border: 1px dashed var(--accent-border-strong);
    border-radius: 8px;
    flex-wrap: wrap;
}
.progress-track {
    height: 6px;
    background: var(--bg-color);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0 0.4rem;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    transition: width 0.2s ease;
}

/* Aligner overlay */
.aligner-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}
.aligner-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.aligner-head h3 {
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    text-transform: uppercase;
    font-size: 1rem;
}
.aligner-actions { display: flex; gap: 0.5rem; }
#aligner-audio { width: 100%; margin-bottom: 1rem; }
.aligner-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}
.aligner-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    flex-wrap: wrap;
}
.btn.large { padding: 0.8rem 1.5rem; font-size: 1rem; }
.aligner-current-paragraph {
    padding: 1rem 1.25rem;
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
}
.aligner-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
#aligner-current-text { margin: 0; line-height: 1.7; font-size: 1.05rem; }
#aligner-list {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    max-height: 40vh;
    overflow-y: auto;
}
.align-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--accent-border);
    cursor: pointer;
    font-size: 0.9rem;
}
.align-row:last-child { border-bottom: none; }
.align-row:hover { background: var(--bg-raised); }
.align-row.current { background: rgba(230, 33, 44, 0.12); }
.align-row.done .align-time { color: var(--accent-cool); font-weight: 600; }
.align-time { font-family: 'SFMono-Regular', Consolas, monospace; color: var(--text-muted); }
.align-text { color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Per-paragraph audio mode picker */
.audio-mode-choices {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 0;
}
.audio-mode-choices .help-note {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.7rem;
}
.paragraph-audio-status {
    background: var(--bg-color);
    border: 1px solid var(--accent-cool);
    border-left: 3px solid var(--accent-cool);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.paragraph-audio-status p { margin: 0 0 0.75rem; }

/* Recording overlay */
.recording-overlay { padding-bottom: 3rem; }
.record-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    flex: 1;
}
@media (max-width: 900px) {
    .record-body { grid-template-columns: 1fr; }
}
.record-stage {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.record-progress-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.record-progress-label strong { color: var(--accent-primary); }
.record-current-paragraph {
    padding: 1rem 1.25rem;
    background: var(--bg-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    min-height: 120px;
}
.record-current-paragraph p { margin: 0.4rem 0 0; line-height: 1.75; font-size: 1.05rem; }
.record-transport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.record-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: 4px solid rgba(255, 91, 91, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background-color 0.2s;
    box-shadow: 0 6px 24px rgba(255, 91, 91, 0.4);
}
.record-btn:hover { transform: scale(1.05); }
.record-btn i { width: 32px; height: 32px; }
.record-btn.is-recording {
    background: var(--accent-primary);
    border-color: rgba(230, 33, 44, 0.35);
    animation: rec-pulse 1.2s ease-in-out infinite;
    color: var(--accent-fg);
}
@keyframes rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.5); }
    50%      { box-shadow: 0 0 0 20px rgba(255, 91, 91, 0);   }
}
.record-controls-row, .record-nav-row {
    display: flex;
    gap: 0.5rem;
}

.record-list {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    padding: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}
.rec-row {
    display: grid;
    grid-template-columns: 70px 45px 1fr 55px;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-color);
    border-left: 3px solid transparent;
    align-items: center;
}
.rec-row:hover { background: var(--bg-raised); }
.rec-row.current { background: rgba(230, 33, 44, 0.12); border-left-color: var(--accent-primary); }
.rec-row.done { color: var(--text-color); }
.rec-row.local { border-left-color: var(--accent-cool); }
.rec-num {
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.rec-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-dur {
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: right;
}
.rec-badge {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
}
.rec-badge.saved { background: var(--accent-cool); color: var(--bg-color); }
.rec-badge.local { background: var(--accent-primary); color: var(--bg-color); }
.rec-badge.empty { background: var(--bg-raised); color: var(--text-muted); }

/* --- Recording editor (trim + normalize + revert) --- */
.rec-editor {
    background: var(--bg-color);
    border: 1px solid var(--accent-border);
    border-top: 2px solid var(--accent-cool);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.rec-editor-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cool);
    font-size: 0.8rem;
}
.rec-editor-title i { width: 14px; height: 14px; }
.rec-editor-title .rec-clip-len {
    margin-left: auto;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.8rem;
}

.rec-quick-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rec-quick-tools .btn i { width: 14px; height: 14px; }

.rec-trim-slider {
    padding: 0.5rem 0;
}
.rec-trim-track {
    position: relative;
    height: 14px;
    background: var(--bg-raised);
    border-radius: 999px;
    margin: 0 12px;
}
.rec-trim-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-cool));
    border-radius: 999px;
    opacity: 0.7;
}
.rec-trim-handle {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border: 2px solid var(--bg-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    touch-action: none;
}
.rec-trim-handle:hover, .rec-trim-handle:focus { outline: none; box-shadow: 0 0 0 4px rgba(230, 33, 44, 0.28); }
.rec-trim-handle.end { background: var(--accent-cool); }

.rec-trim-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.55rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.rec-trim-times #rec-trim-selection-t {
    color: var(--accent-cool);
    font-weight: 600;
}

.rec-trim-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

kbd {
    background: var(--bg-raised);
    border: 1px solid var(--accent-border-strong);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8rem;
    color: var(--accent-primary);
}

/* Spinner: any lucide loader icon inside a button spins */
@keyframes spin { to { transform: rotate(360deg); } }
button i[data-lucide="loader"],
button i[data-lucide="loader-2"] { animation: spin 0.9s linear infinite; transform-origin: center; }

/* Reading progress bar */
#progress-bar {
    height: 3px;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 50;
}
#progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    box-shadow: 0 0 8px rgba(230, 33, 44, 0.4);
    transition: width 0.35s ease;
}

/* Save status indicator (author auto-save) */
.save-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    min-width: 80px;
    transition: opacity 0.2s;
}
.save-status.typing { color: var(--text-muted); }
.save-status.saving { color: var(--accent-primary); }
.save-status.saved  { color: var(--accent-cool); }
.save-status.error  { color: var(--danger); }

/* Feedback head row with export button */
.feedback-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

/* --- Heatmap --- */
.heatmap-page {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.heatmap-page-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--accent-border);
}
.heatmap-page-head h5 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.hm-paragraph {
    position: relative;
    padding: 0.75rem 1rem;
    padding-right: 100px;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    line-height: 1.7;
    transition: transform 0.15s;
}
.hm-paragraph:hover { transform: translateX(2px); }
.hm-paragraph p { margin: 0; color: var(--text-color); font-size: 0.95rem; }
.hm-side {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-raised);
    color: var(--text-color);
    border: 1px solid var(--accent-border-strong);
}
.hm-badge i { width: 12px; height: 12px; }
.hm-badge.comments { color: var(--accent-primary); border-color: var(--accent-primary); }
.hm-badge.ratings  { color: var(--accent-cool);    border-color: var(--accent-cool); }
.hm-other {
    padding: 0.4rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.75;
}
.hm-other h1, .hm-other h2, .hm-other h3 {
    font-family: var(--font-display);
    color: var(--accent-primary);
    letter-spacing: 0.05em;
    margin: 0;
    font-style: normal;
}

/* --- Readers list --- */
.reader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}
.reader-info { flex: 1; min-width: 0; }
.reader-email { margin: 0 0 0.2rem; }
.reader-meta { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.reader-progress {
    position: relative;
    width: 160px;
    height: 22px;
    background: var(--bg-color);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--accent-border);
    flex-shrink: 0;
}
.reader-progress-bar {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    height: 100%;
    transition: width 0.3s;
}
.reader-progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 0.75rem;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- EasyMDE dark-theme overrides --- */
.EasyMDEContainer .editor-toolbar {
    background: var(--bg-elevated);
    border-color: var(--accent-border);
    border-radius: 8px 8px 0 0;
    opacity: 1;
}
.EasyMDEContainer .editor-toolbar a {
    color: var(--text-color) !important;
    border: none;
}
.EasyMDEContainer .editor-toolbar a:hover,
.EasyMDEContainer .editor-toolbar a.active {
    background: var(--bg-raised);
    color: var(--accent-primary) !important;
    border-color: transparent;
}
.EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--accent-border);
    border-right: none;
}
.EasyMDEContainer .CodeMirror {
    background: var(--bg-color);
    color: var(--text-color);
    border-color: var(--accent-border);
    border-radius: 0 0 8px 8px;
    padding: 0.5rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.95rem;
    min-height: 340px;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--accent-primary); }
.EasyMDEContainer .CodeMirror-selected { background: rgba(230, 33, 44, 0.20) !important; }
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    background: var(--bg-elevated);
    color: var(--text-color);
    border-color: var(--accent-border);
    padding: 1rem 1.25rem;
}
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview-side h1,
.EasyMDEContainer .editor-preview-side h2 {
    font-family: var(--font-display);
    color: var(--accent-primary);
    border: none;
}
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen,
.editor-preview-side {
    background: var(--bg-color);
}

/* Users list */
.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}
.user-email { margin: 0; }
.user-meta { margin: 0; color: var(--text-muted); font-size: 0.85rem; }

/* -----------------------------
   Responsive: mobile
------------------------------ */
@media (max-width: 768px) {
    header {
        padding: 0.9rem 1rem;
    }
    header h1 {
        font-size: 1rem;
        letter-spacing: 0.06em;
    }
    header h1 .title-eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.3em;
    }

    /* Reader — drop the right-margin gutter, put likert inline */
    #reader-container {
        max-width: 100%;
        margin: 1.5rem auto;
        padding: 0 1rem;
        font-size: 1rem;
        line-height: 1.75;
    }
    .paragraph-wrapper {
        margin-bottom: 1.25rem;
    }
    .margin-likert {
        position: static;
        opacity: 1;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.4rem;
        border-top: 1px dashed var(--accent-border);
        gap: 8px;
    }
    input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    #checkpoint-container {
        margin-top: 2.5rem;
        padding: 1.25rem;
        border-radius: 8px;
    }
    #next-page-btn {
        width: 100%;
        text-align: center;
    }

    /* Modals: full-bleed sheet on small screens */
    .modal-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 12px 12px 0 0;
        padding: 1.5rem 1.25rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        overflow-y: auto;
    }
    #settings-modal,
    #comment-modal {
        align-items: flex-end;
    }

    .login-box {
        padding: 2rem 1.5rem;
    }

    /* Highlight tooltip becomes a floating action bar at the bottom */
    #highlight-tooltip {
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
    }
    .tooltip-btn {
        font-size: 0.95rem;
        padding: 0.4rem 0.75rem;
    }

    /* Admin dashboard */
    .dashboard-layout {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Nav row */
    #nav-row {
        flex-direction: column;
        gap: 0.75rem;
        margin: 1.5rem 0 2rem;
    }
    .nav-btn { width: 100%; justify-content: center; }
    .page-indicator { order: -1; }

    /* Comment pip — right-align inline instead of gutter */
    .comment-pip {
        position: static;
        margin-top: 0.4rem;
        margin-left: auto;
        display: inline-flex;
    }
    .paragraph-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Author dashboard */
    .detail-head { flex-direction: column; align-items: stretch; }
    .detail-actions { justify-content: space-between; }
    .manuscript-card { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .user-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    #tabs { overflow-x: auto; }
}