/* ======================================
   GrimoirePrint Website — Styles
   Dark fantasy theme — clean, premium
   ====================================== */

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

:root {
    --bg: #0c0a14;
    --surface: #141220;
    --surface-2: #1c1a2e;
    --border: rgba(200, 166, 78, 0.15);
    --text: #e8e4d8;
    --text-muted: #9a9488;
    --accent: #c8a64e;
    --accent-glow: rgba(200, 166, 78, 0.3);
    --heading-font: 'Cinzel', serif;
    --body-font: 'Inter', sans-serif;
    --preview-font: 'Crimson Text', 'Georgia', serif;
    --radius: 10px;
    --radius-sm: 6px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Nav ---- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 32px;
    gap: 12px;
    background: rgba(12, 10, 20, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.nav-logo-icon {
    font-size: 18px;
}

.nav-logo-text {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 24px;
    margin-left: auto;
    /* When the row still will not fit, the links are what gives: the account
       control is the one thing in the nav that has no second home. */
    min-width: 0;
    overflow: hidden;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--accent);
}

.nav-links a.nav-standard {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px solid rgba(200, 166, 78, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-left: 10px;
    transition: all 0.2s;
}

.nav-links a.nav-standard:hover {
    color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
    border-color: rgba(200, 166, 78, 0.5);
}

.nav-links a.nav-bug {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px dashed rgba(200, 166, 78, 0.4);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-left: 10px;
}

.nav-links a.nav-bug:hover {
    background: rgba(200, 166, 78, 0.1);
    border-color: var(--accent);
}

/* ---- Account control (sign in / signed-in chip) ----
   Outside .nav-links on purpose: the links row is hidden on a phone, and a
   sign-in that disappears with it is a sign-in nobody can find. */
.nav-account {
    display: flex;
    align-items: center;
    margin-left: 14px;
    flex-shrink: 0;
}

.nav-account[hidden] {
    display: none;
}

.nav-account-btn {
    font-family: inherit;
    /* Signed in the control is an <a>, and the nav underlines its links; the
       flex centring is what keeps the text in the middle of the full-width
       target it becomes inside the phone menu. */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(200, 166, 78, 0.08);
    border: 1px solid rgba(200, 166, 78, 0.4);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-account-btn:hover {
    background: rgba(200, 166, 78, 0.18);
    border-color: var(--accent);
}

/* ---- Phone-width menu ----
   The toggle is only given a size once nav.js has set data-nav-menu="ready":
   a page that fails to load the script keeps the nav it had rather than
   offering a button that does nothing. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid rgba(200, 166, 78, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent);
    cursor: pointer;
}

.nav-toggle:hover {
    background: rgba(200, 166, 78, 0.1);
    border-color: var(--accent);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    transition: transform 0.2s, top 0.2s;
}

.nav-toggle-bars::before {
    top: -6px;
}

.nav-toggle-bars::after {
    top: 6px;
}

/* Open, the bars are a close button. */
.nav[data-nav-open="true"] .nav-toggle-bars {
    background: transparent;
}

.nav[data-nav-open="true"] .nav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.nav[data-nav-open="true"] .nav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* The menu carries an account host of its own. Above the breakpoint the bar's
   host is the visible one, so this stays out of the row. */
.nav-account-menu {
    display: none;
}

/* ---- "Sign in to save your credits" ---- */
.signin-nudge {
    font-family: inherit;
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: 1px dashed rgba(200, 166, 78, 0.35);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.signin-nudge:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.signin-nudge[hidden] {
    display: none;
}

/* ---- Which account a purchase tops up ---- */
.buyer-account {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: -20px 0 28px;
}

.buyer-account[hidden] {
    display: none;
}

/* "Signed in as" breaks after itself, never inside itself. */
.buyer-account-lead {
    white-space: nowrap;
}

.buyer-account-email {
    font-weight: 600;
    color: var(--accent);
    /* A long address wraps rather than pushing the line off a phone. */
    overflow-wrap: anywhere;
}

.buyer-account-sep {
    opacity: 0.5;
}

.buyer-account-action {
    font-family: inherit;
    font-size: inherit;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(200, 166, 78, 0.4);
    padding: 0;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.buyer-account-action:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.buyer-account-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* In the dialog the line sits between the copy and the tiles, and the modal's
   own paragraph rule is more specific than the one above. */
.credits-modal-content .buyer-account {
    font-size: 12px;
    color: var(--text-muted);
    margin: -8px 0 16px;
}

/* ---- Sign-in dialog (reuses .credits-modal for its frame) ---- */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.account-input {
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2, #222);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    width: 100%;
}

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

/* .btn and .account-form both set a display, which beats the hidden attribute
   on its own. The dialog swaps between its two states with `hidden`. */
.account-form[hidden],
.account-modal .btn[hidden] {
    display: none;
}

.account-note {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
    color: var(--text-muted);
}

.account-note-ok {
    color: var(--accent);
}

.account-note-error {
    color: #e07a5f;
}

/* Self-serve API keys (SA10) on the account page */
.account-keys { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.account-key { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border: 1px solid var(--line, #d8d2c4); border-radius: 8px; flex-wrap: wrap; }
.account-key-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-key-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-key-label { font-size: 12px; opacity: 0.7; }
.account-key-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.account-key-form .account-input { margin: 0; flex: 1 1 12em; }
.account-key-secret { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--accent, #c8a24a);
    border-radius: 8px; background: rgba(200,162,74,0.08); }
.account-secret { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 6px;
    background: #241a10; color: #f0e6d2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all; user-select: all; }
.btn-quiet { background: transparent; border: 1px solid var(--line, #b9b1a0); color: inherit;
    padding: 5px 12px; border-radius: 6px; cursor: pointer; font: inherit; flex: none; }


.account-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.account-email {
    color: var(--accent);
}

.account-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 460px);
    font-size: 13px;
    color: var(--text);
    background: rgba(12, 10, 20, 0.96);
    border: 1px solid rgba(200, 166, 78, 0.35);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.account-toast-action {
    font-family: inherit;
    font-size: 12px;
    color: var(--accent);
    background: none;
    border: 1px solid rgba(200, 166, 78, 0.4);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    letter-spacing: 1px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), #a88a30);
    color: #0c0a14;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.btn-outline:hover {
    background: rgba(200, 166, 78, 0.1);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 11px;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-icon {
    font-size: 14px;
}

/* ---- Hero — Slim ---- */
.hero {
    padding: 72px 32px 20px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 30%, rgba(200, 166, 78, 0.06), transparent 60%);
}

.hero-content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.hero-text {
    flex: 1;
    min-width: 0;
}

.hero-image {
    flex-shrink: 0;
}

.hero-image img {
    width: 320px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(200, 166, 78, 0.1);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.hero-image img:hover {
    transform: rotate(2deg);
}

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        gap: 24px;
    }

    .hero-image img {
        width: 240px;
        transform: rotate(0deg);
    }
}

.hero-ornament {
    font-family: var(--heading-font);
    font-size: 14px;
    color: var(--accent);
    opacity: 0.5;
    letter-spacing: 6px;
    margin: 4px 0;
}

.hero h1 {
    font-family: var(--heading-font);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 0 40px rgba(200, 166, 78, 0.2);
    letter-spacing: 1px;
}

.hero-dot {
    color: var(--accent);
}

.hero-sub {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 4px;
    margin-top: 6px;
}

.hero-alt-link {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.hero-alt-link:hover {
    opacity: 1;
}

.hero-alt-link a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(200, 166, 78, 0.4);
    transition: border-color 0.2s;
}

.hero-alt-link a:hover {
    border-color: var(--accent);
}

/* ---- Converter ---- */
.converter {
    padding: 16px 0 50px;
}

.converter-app {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: clip;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* ---- Toolbar: Horizontal flex strip ---- */
.converter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(200, 166, 78, 0.04);
    border-bottom: 1px solid rgba(200, 166, 78, 0.08);
    align-items: flex-start;
}

.converter-toolbar label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.toolbar-controls {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toolbar-section {
    text-align: left;
}

/* ---- Actions: download, upload, credits (right side) ---- */
.toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 160px;
}

.toolbar-actions .btn-convert {
    justify-content: center;
    font-size: 12px;
    padding: 10px 16px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 2px 12px var(--accent-glow);
    white-space: nowrap;
}

.btn-upload-main {
    padding: 8px 14px;
    background: linear-gradient(135deg, #3a3555, #2a2845);
    color: var(--accent);
    border: 2px dashed rgba(200, 166, 78, 0.4);
    border-radius: var(--radius-sm);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-upload-main:hover {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
}

.toolbar-actions .btn-unlock {
    justify-content: center;
    text-align: center;
    font-size: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
}

.toolbar-actions .free-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: rgba(200, 166, 78, 0.08);
    border: 1px solid rgba(200, 166, 78, 0.15);
    border-radius: var(--radius-sm);
    min-width: 48px;
}

/* ---- Settings Gear (hidden on wide, visible on narrow) ---- */
.btn-settings-gear {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s;
    color: var(--accent);
}

.btn-settings-gear:hover {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
}


/* ---- Unified Thumb Grid: 10 columns ---- */
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

/* ---- Unified Thumb Button ---- */
.thumb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 3px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background: var(--surface-2);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.thumb-btn:hover {
    border-color: rgba(200, 166, 78, 0.3);
}

.thumb-btn.active {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ---- Swatch ---- */
.thumb-swatch {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.thumb-accents {
    display: flex;
    gap: 3px;
}

.thumb-accents span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.thumb-label {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.thumb-btn.active .thumb-label {
    color: var(--accent);
}

/* ---- "More" button — styled like Classic scheme thumb ---- */
.thumb-more {
    border-color: transparent;
    background: var(--surface-2);
}

.thumb-more:hover {
    border-color: rgba(200, 166, 78, 0.3);
}

.thumb-more-icon {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 900;
    color: rgba(88, 24, 13, 0.6);
    overflow: hidden;
}

/* ---- Locked states (shared padlock icon) ---- */
.scheme-thumb.scheme-locked,
.bg-thumb.bg-locked,
.dropcap-style-btn.dropcap-locked {
    opacity: 0.65;
    cursor: not-allowed;
}

.scheme-thumb.scheme-locked:hover,
.bg-thumb.bg-locked:hover,
.dropcap-style-btn.dropcap-locked:hover {
    opacity: 0.75;
}

.scheme-thumb.scheme-locked .thumb-swatch,
.bg-thumb.bg-locked .thumb-swatch,
.dropcap-style-btn.dropcap-locked .dropcap-preview {
    position: relative;
}

.scheme-thumb.scheme-locked .thumb-swatch::after,
.bg-thumb.bg-locked .thumb-swatch::after,
.dropcap-style-btn.dropcap-locked .dropcap-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    /* Grey SVG padlock — larger and more obvious */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

/* ---- Locked button (Advanced Settings) ---- */
.btn-locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Bg plain swatch ---- */
.bg-plain {
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
    position: relative;
}

.bg-plain::after {
    content: '∅';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.3);
}

/* ---- Drop Cap Previews — mini PDF mockup with letter + text lines ---- */
.dropcap-preview {
    font-size: 18px;
    line-height: 1;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Base parchment + full-width text lines below the letter area */
    background:
        linear-gradient(135deg, #f4edd8, #e8dfc4),
        repeating-linear-gradient(to bottom,
            transparent 0px, transparent 2px,
            rgba(88, 24, 13, 0.12) 2px, rgba(88, 24, 13, 0.12) 4px) 0 0 / 100% 100%;
    background-blend-mode: normal;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 3px 4px 3px 3px;
}

/* Text lines to the right of the letter */
.dropcap-preview::after {
    content: '';
    flex: 1;
    align-self: stretch;
    min-height: 18px;
    margin-left: 2px;
    background:
        repeating-linear-gradient(to bottom,
            rgba(88, 24, 13, 0.14) 0px, rgba(88, 24, 13, 0.14) 2px,
            transparent 2px, transparent 4px);
}

/* Full-width text lines below the letter, as a ::before pseudo */
.dropcap-preview::before {
    content: '';
    order: 1;
    width: 100%;
    flex: 0 0 auto;
    height: calc(100% - 21px);
    background:
        repeating-linear-gradient(to bottom,
            rgba(88, 24, 13, 0.12) 0px, rgba(88, 24, 13, 0.12) 2px,
            transparent 2px, transparent 4px);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.dropcap-preview-none {
    font-family: var(--heading-font);
    font-weight: 400;
    color: rgba(88, 24, 13, 0.4);
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
    align-items: center;
    justify-content: center;
}

.dropcap-preview-none::after,
.dropcap-preview-none::before {
    display: none;
}

.dropcap-preview-simple {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #58180d;
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
}

.dropcap-preview-gothic {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #d4a840;
    background: linear-gradient(145deg, #5a0e0e, #8b1a1a 40%, #3a0a0a);
    border: 1px solid #c8a64e;
    box-shadow: inset 0 0 4px rgba(200, 166, 78, 0.3);
}

.dropcap-preview-gothic::after,
.dropcap-preview-gothic::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 166, 78, 0.22) 0px, rgba(200, 166, 78, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-celtic {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #1a6b4a;
    background: linear-gradient(135deg, #f0ede4, #e4dcc8);
    border: 1px solid #6ab878;
    box-shadow: inset 0 0 0 1px rgba(42, 138, 90, 0.15);
}

.dropcap-preview-gilded {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px #d4a840, 0 0 3px rgba(200, 166, 78, 0.3);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(145deg, #8b6914 0%, #c8a64e 15%, #f0dfa0 35%, #d4a840 55%, #b8860b 70%, #f0dfa0 85%, #8b6914 100%);
}

.dropcap-preview-gilded::after,
.dropcap-preview-gilded::before {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: repeating-linear-gradient(to bottom, rgba(139, 105, 20, 0.18) 0px, rgba(139, 105, 20, 0.18) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-blackletter {
    font-family: 'UnifrakturMaguntia', 'Cinzel', serif;
    font-weight: 400;
    color: #f4edd8;
    background: linear-gradient(135deg, #2a2018, #1a1410);
    border: 2px solid #58180d;
    box-shadow: inset 0 0 6px rgba(200, 166, 78, 0.1);
}

.dropcap-preview-blackletter::after,
.dropcap-preview-blackletter::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 166, 78, 0.20) 0px, rgba(200, 166, 78, 0.20) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-uncial {
    font-family: 'Uncial Antiqua', 'Cinzel', serif;
    font-weight: 400;
    color: #5a2a0a;
    background: linear-gradient(135deg, #ede0c8, #dccfb0);
    border-top: 2px solid #c8a64e;
    border-bottom: 1px solid #b8a070;
    box-shadow: inset 0 0 8px rgba(200, 166, 78, 0.08);
}

.dropcap-preview-regal {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #f0dfa0;
    background: linear-gradient(145deg, #1a3a6a 0%, #0e2a5a 60%, #1a3a6a 100%);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px #d4a840, inset 0 0 8px rgba(212, 168, 64, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 6px rgba(240, 223, 160, 0.5);
}

.dropcap-preview-regal::after,
.dropcap-preview-regal::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 166, 78, 0.25) 0px, rgba(200, 166, 78, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-woodcut {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #f4edd8;
    background: linear-gradient(135deg, #1a1410 0%, #2a2018 30%, #1a1410 70%, #0e0a08 100%);
    border: 2px solid #58180d;
    box-shadow: inset 0 0 6px rgba(200, 166, 78, 0.15), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dropcap-preview-woodcut::after,
.dropcap-preview-woodcut::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 166, 78, 0.22) 0px, rgba(200, 166, 78, 0.22) 2px, transparent 2px, transparent 4px);
}

/* ---- Premium Drop Cap Preview Styles (19 new — manuscript-inspired) ---- */

.dropcap-preview-runic {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #c8c0b0;
    background: linear-gradient(135deg, #4a4a4a, #2e2e2e);
    border: 2px solid #666;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 2px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.dropcap-preview-runic::after,
.dropcap-preview-runic::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 192, 176, 0.22) 0px, rgba(200, 192, 176, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-elvish {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #1a6b3a;
    background: linear-gradient(135deg, #e8f5e0, #d0eac4);
    border: 1px solid #6ab878;
    text-shadow: 0 0 4px rgba(100, 200, 120, 0.2);
    font-style: italic;
    box-shadow: inset 0 0 0 1px rgba(42, 122, 74, 0.1);
}

.dropcap-preview-dragon {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #f0a020;
    background: linear-gradient(145deg, #4a0a0a, #6a1010 40%, #2a0505);
    border: 2px solid #8b2a0a;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.6), 0 0 16px rgba(255, 60, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(255, 100, 0, 0.15);
}

.dropcap-preview-dragon::after,
.dropcap-preview-dragon::before {
    background: repeating-linear-gradient(to bottom, rgba(240, 160, 32, 0.25) 0px, rgba(240, 160, 32, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-arcane-script {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #c090f0;
    background: linear-gradient(135deg, #1a102a, #2a1848);
    border: 2px solid #6a3a9a;
    text-shadow: 0 0 8px rgba(160, 100, 255, 0.5), 0 0 14px rgba(120, 60, 200, 0.3);
    box-shadow: inset 0 0 6px rgba(106, 58, 154, 0.2);
}

.dropcap-preview-arcane-script::after,
.dropcap-preview-arcane-script::before {
    background: repeating-linear-gradient(to bottom, rgba(176, 128, 224, 0.22) 0px, rgba(176, 128, 224, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-illuminated {
    font-size: 0;
    color: transparent;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.dropcap-preview-illuminated .dropcap-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.dropcap-preview-illuminated::after,
.dropcap-preview-illuminated::before {
    display: none;
}

.dropcap-preview-ornate {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #8b1a2a;
    background: linear-gradient(135deg, #f8ede0, #eedcc8);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px rgba(200, 166, 78, 0.3);
    text-shadow: 1px 1px 2px rgba(139, 26, 42, 0.2);
}

.dropcap-preview-medieval {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #4a2a0e;
    background: linear-gradient(135deg, #d8c8a8, #c4b48e);
    border: 2px solid #8a7050;
    box-shadow: inset 0 0 0 1px rgba(138, 112, 80, 0.2);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.dropcap-preview-manuscript {
    font-family: 'Uncial Antiqua', 'Cinzel', serif;
    font-weight: 400;
    color: #5a3a1a;
    background: linear-gradient(135deg, #ede0c8, #dccfb0);
    border: 1px solid #b8a070;
    border-top: 2px solid #8b6914;
    box-shadow: inset 0 0 4px rgba(139, 105, 20, 0.06);
}

.dropcap-preview-calligraphy {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #1a1a1a;
    background: linear-gradient(135deg, #f8f4ee, #efe8da);
    border: 1px solid #aaa;
    font-style: italic;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.dropcap-preview-filigree {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #d0d0d8;
    background: linear-gradient(135deg, #2a2a2e, #1a1a1e);
    border: 2px solid #888;
    box-shadow: inset 0 0 0 1px rgba(200, 200, 220, 0.15);
    text-shadow: 0 0 4px rgba(200, 200, 220, 0.4);
}

.dropcap-preview-filigree::after,
.dropcap-preview-filigree::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 200, 216, 0.22) 0px, rgba(200, 200, 216, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-stonecarved {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #9a9a90;
    background: linear-gradient(135deg, #5a5a52, #3e3e38);
    border: 2px solid #6a6a60;
    text-shadow: 2px 2px 0 #2a2a25, -1px -1px 0 rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

.dropcap-preview-stonecarved::after,
.dropcap-preview-stonecarved::before {
    background: repeating-linear-gradient(to bottom, rgba(154, 154, 144, 0.22) 0px, rgba(154, 154, 144, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-heraldic {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #f0dfa0;
    background: linear-gradient(145deg, #6a1020, #4a0a14);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px #d4a840, inset 0 0 4px rgba(212, 168, 64, 0.15);
    text-shadow: 0 0 4px rgba(212, 168, 64, 0.4);
}

.dropcap-preview-heraldic::after,
.dropcap-preview-heraldic::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 166, 78, 0.25) 0px, rgba(200, 166, 78, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-vine {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #2a6a1a;
    background: linear-gradient(135deg, #e0f0d8, #c8e4b8);
    border: 1px solid #6a9a50;
    box-shadow: inset 0 0 0 1px rgba(58, 122, 42, 0.1);
    text-shadow: 0 0 4px rgba(60, 140, 40, 0.2);
}

.dropcap-preview-flame {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #ff6a00;
    background: linear-gradient(145deg, #3a1005 0%, #5a1a08 40%, #1a0802 100%);
    border: 2px solid #c84a00;
    text-shadow: 0 0 8px rgba(255, 100, 0, 0.6), 0 0 16px rgba(255, 50, 0, 0.4), 0 -2px 4px rgba(255, 200, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(255, 100, 0, 0.1);
}

.dropcap-preview-flame::after,
.dropcap-preview-flame::before {
    background: repeating-linear-gradient(to bottom, rgba(255, 106, 0, 0.25) 0px, rgba(255, 106, 0, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-frost-script {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #5a9ac0;
    background: linear-gradient(135deg, #e8f4ff, #d0e8f8);
    border: 1px solid #8ac0e0;
    box-shadow: inset 0 0 4px rgba(138, 192, 224, 0.15);
    text-shadow: 0 0 4px rgba(160, 210, 255, 0.4);
}

.dropcap-preview-shadow {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #5a5a5a;
    background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
    border: 2px solid #333;
    text-shadow: 0 0 8px rgba(80, 80, 80, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.dropcap-preview-shadow::after,
.dropcap-preview-shadow::before {
    background: repeating-linear-gradient(to bottom, rgba(90, 90, 90, 0.25) 0px, rgba(90, 90, 90, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-eldritch {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #80e070;
    background: linear-gradient(135deg, #1a0a2a, #0e0520);
    border: 2px solid #4a2068;
    text-shadow: 0 0 8px rgba(100, 255, 80, 0.5), 0 0 14px rgba(80, 200, 60, 0.3);
    box-shadow: inset 0 0 6px rgba(74, 32, 104, 0.2);
}

.dropcap-preview-eldritch::after,
.dropcap-preview-eldritch::before {
    background: repeating-linear-gradient(to bottom, rgba(128, 224, 112, 0.22) 0px, rgba(128, 224, 112, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-dwarven {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #d4944a;
    background: linear-gradient(135deg, #3a2a1a, #2a1e12);
    border: 2px solid #a07030;
    text-shadow: 1px 1px 0 #1a1008, 0 0 6px rgba(200, 140, 60, 0.3);
    letter-spacing: 2px;
    box-shadow: inset 0 0 4px rgba(160, 112, 48, 0.15);
}

.dropcap-preview-dwarven::after,
.dropcap-preview-dwarven::before {
    background: repeating-linear-gradient(to bottom, rgba(212, 148, 74, 0.22) 0px, rgba(212, 148, 74, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-celestial {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #f0eaff;
    background: linear-gradient(145deg, #1a0a3a, #2a1460 30%, #180840);
    border: 2px solid #9070c0;
    box-shadow: inset 0 0 0 1px rgba(200, 180, 255, 0.12), inset 0 0 6px rgba(160, 120, 240, 0.1);
    text-shadow: 0 0 10px rgba(240, 230, 255, 0.7), 0 0 20px rgba(200, 180, 255, 0.4);
}

.dropcap-preview-celestial::after,
.dropcap-preview-celestial::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 180, 255, 0.25) 0px, rgba(200, 180, 255, 0.25) 2px, transparent 2px, transparent 4px);
}

/* ---- New Premium Drop Cap Preview Styles (10 new creative styles) ---- */

.dropcap-preview-ember {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #ff6a00;
    background: linear-gradient(145deg, #3a1005, #5a1a08 30%, #2a0802);
    border: 2px solid #c84a00;
    text-shadow: 0 0 8px rgba(255, 100, 0, 0.6), 0 0 16px rgba(255, 50, 0, 0.4), 0 -2px 4px rgba(255, 200, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(255, 100, 0, 0.15);
}

.dropcap-preview-ember::after,
.dropcap-preview-ember::before {
    background: repeating-linear-gradient(to bottom, rgba(255, 106, 0, 0.25) 0px, rgba(255, 106, 0, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-arcane {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #c090f0;
    background: linear-gradient(135deg, #1a102a, #2a1848);
    border: 2px solid #6a3a9a;
    text-shadow: 0 0 8px rgba(160, 100, 255, 0.5), 0 0 14px rgba(120, 60, 200, 0.3);
    box-shadow: inset 0 0 6px rgba(106, 58, 154, 0.2);
}

.dropcap-preview-arcane::after,
.dropcap-preview-arcane::before {
    background: repeating-linear-gradient(to bottom, rgba(176, 128, 224, 0.22) 0px, rgba(176, 128, 224, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-frost {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #5aaad0;
    background: linear-gradient(135deg, #e8f4ff, #d0e8f8);
    border: 1px solid #8ac0e0;
    box-shadow: inset 0 0 4px rgba(138, 192, 224, 0.15);
    text-shadow: 0 0 4px rgba(160, 210, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.dropcap-preview-verdant {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #2a8a3a;
    background: linear-gradient(135deg, #e0f0d8, #c8e4b8);
    border: 1px solid #4a9a40;
    box-shadow: inset 0 0 0 1px rgba(58, 122, 42, 0.1);
    text-shadow: 0 0 4px rgba(60, 140, 40, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.dropcap-preview-obsidian {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(135deg, #0a0a0e, #1a1a22 30%, #0e0e14);
    border: 2px solid #333;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(135deg, #6a6a80, #9090a8 20%, #7a60a0 40%, #60a0a0 60%, #a08060 80%, #8a8aa0);
    box-shadow: inset 0 0 8px rgba(100, 80, 160, 0.08);
}

.dropcap-preview-obsidian::after,
.dropcap-preview-obsidian::before {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: repeating-linear-gradient(to bottom, rgba(120, 120, 140, 0.22) 0px, rgba(120, 120, 140, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-celestial {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #f0eaff;
    background: linear-gradient(145deg, #1a0a3a, #2a1460 30%, #180840);
    border: 2px solid #9070c0;
    box-shadow: inset 0 0 0 1px rgba(200, 180, 255, 0.12), inset 0 0 6px rgba(160, 120, 240, 0.1);
    text-shadow: 0 0 10px rgba(240, 230, 255, 0.7), 0 0 20px rgba(200, 180, 255, 0.4);
}

.dropcap-preview-celestial::after,
.dropcap-preview-celestial::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 180, 255, 0.25) 0px, rgba(200, 180, 255, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-blood-ink {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #8b1a2a;
    background: linear-gradient(135deg, #f8ede0, #eedcc8);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px rgba(200, 166, 78, 0.3);
    text-shadow: 1px 1px 2px rgba(139, 26, 42, 0.2);
}

.dropcap-preview-copper {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(145deg, #3a2a1a, #2a1e12);
    border: 2px solid #a07030;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(145deg, #b87333 0%, #da8a44 20%, #cd7f32 40%, #50c878 55%, #4aad6a 65%, #b87333 80%, #da8a44 100%);
    box-shadow: inset 0 0 4px rgba(160, 112, 48, 0.15);
}

.dropcap-preview-copper::after,
.dropcap-preview-copper::before {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: repeating-linear-gradient(to bottom, rgba(184, 115, 51, 0.22) 0px, rgba(184, 115, 51, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-moonstone {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: transparent;
    background: linear-gradient(145deg, #1a1a2e, #222240 30%, #1e1e36);
    border: 2px solid #8888aa;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(135deg, #c0c0d8, #e8e0f0 25%, #d0d0e4 45%, #e4daf0 65%, #b8b8d0 85%, #d8d0e8);
    box-shadow: inset 0 0 6px rgba(180, 180, 220, 0.08);
}

.dropcap-preview-moonstone::after,
.dropcap-preview-moonstone::before {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: repeating-linear-gradient(to bottom, rgba(200, 200, 230, 0.22) 0px, rgba(200, 200, 230, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-engraved {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #9a9a90;
    background: linear-gradient(135deg, #5a5a52, #4e4e48 30%, #3e3e38);
    border: 2px solid #6a6a60;
    text-shadow: 2px 2px 0 #2a2a25, -1px -1px 0 rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

.dropcap-preview-engraved::after,
.dropcap-preview-engraved::before {
    background: repeating-linear-gradient(to bottom, rgba(154, 154, 144, 0.22) 0px, rgba(154, 154, 144, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-infernal {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    color: #e02020;
    background: linear-gradient(145deg, #1a0505, #2a0808 30%, #0e0202);
    border: 2px solid #6a1010;
    text-shadow: 0 0 8px rgba(255, 30, 30, 0.7), 0 0 16px rgba(200, 0, 0, 0.4);
    box-shadow: inset 0 0 6px rgba(200, 20, 20, 0.15);
}

.dropcap-preview-infernal::after,
.dropcap-preview-infernal::before {
    background: repeating-linear-gradient(to bottom, rgba(224, 32, 32, 0.25) 0px, rgba(224, 32, 32, 0.25) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-runic {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    color: #c8c0b0;
    background: linear-gradient(135deg, #4a4a4a, #2e2e2e);
    border: 2px solid #666;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 2px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.dropcap-preview-runic::after,
.dropcap-preview-runic::before {
    background: repeating-linear-gradient(to bottom, rgba(200, 192, 176, 0.22) 0px, rgba(200, 192, 176, 0.22) 2px, transparent 2px, transparent 4px);
}

.dropcap-preview-sylvan {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: #8b5a1a;
    background: linear-gradient(135deg, #f8ecd0, #f0dca8);
    border: 2px solid #c89840;
    box-shadow: inset 0 0 0 1px rgba(200, 152, 64, 0.15);
    text-shadow: 0 0 4px rgba(200, 140, 40, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- Image-Based Drop Cap Previews (show actual letter image) ---- */
.dropcap-preview-image {
    background: linear-gradient(135deg, #f4edd8, #e8dfc4);
    padding: 0;
    overflow: hidden;
}

.dropcap-preview-image::after,
.dropcap-preview-image::before {
    display: none;
}

/* Re-enable padlock overlay on locked image-based dropcap previews */
.drawer-thumb.drawer-locked .dropcap-preview-image::after {
    display: flex;
}

/* ---- Live Preview: illuminated dropcap images ---- */
.illuminated-dropcap {
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   LIVE PREVIEW: DROP CAP ::first-letter STYLES
   Mirrors fantasy.css rules scoped to the preview panel
   ========================================================================== */

/* ---- Base Drop Cap (Simple) ---- */
.preview-content.drop-cap-simple .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 3.2em;
    float: left;
    line-height: 0.85;
    padding-right: 0.08em;
    padding-top: 0.05em;
    color: var(--h3-color, #8b1a1a);
    font-weight: 900;
}

/* ---- GOTHIC — Gold on Crimson Manuscript Panel ---- */
.preview-content.drop-cap-gothic .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.5em;
    font-weight: 900;
    float: left;
    line-height: 0.72;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #d4a840;
    background: linear-gradient(145deg, #5a0e0e 0%, #8b1a1a 40%, #3a0a0a 100%);
    border: 3px double #c8a64e;
    box-shadow: inset 0 0 0 1px rgba(200, 166, 78, 0.3), inset 0 0 8px rgba(200, 166, 78, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 6px rgba(212, 168, 64, 0.4);
}

/* ---- CELTIC — Forest Green on Cream ---- */
.preview-content.drop-cap-celtic .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 700;
    float: left;
    line-height: 0.75;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #1a6b4a;
    background: linear-gradient(135deg, #f0ede4, #e4dcc8);
    border: 2px solid #2a8a5a;
    box-shadow: inset 0 0 0 2px rgba(42, 138, 90, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- GILDED — Gold Leaf in Framed Box ---- */
.preview-content.drop-cap-gilded .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.5em;
    font-weight: 900;
    float: left;
    line-height: 0.72;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    background: linear-gradient(145deg,
            #8b6914 0%, #c8a64e 15%, #f0dfa0 30%,
            #d4a840 45%, #b8860b 60%,
            #d4a840 75%, #f0dfa0 85%, #8b6914 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    border: 3px solid #c8a64e;
    box-shadow: inset 0 0 0 1px #d4a840, 0 2px 6px rgba(139, 105, 20, 0.3);
    filter: drop-shadow(1px 2px 1px rgba(139, 105, 20, 0.5));
}

/* ---- BLACKLETTER — Inked Panel with Fraktur ---- */
.preview-content.drop-cap-blackletter .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'UnifrakturMaguntia', 'Cinzel', serif;
    font-size: 4.5em;
    font-weight: 400;
    float: left;
    line-height: 0.68;
    padding: 0.06em 0.1em;
    margin-right: 0.08em;
    margin-bottom: 0.02em;
    color: #f4edd8;
    background: linear-gradient(135deg, #2a2018, #1a1410);
    border: 3px solid #58180d;
    box-shadow: inset 0 0 6px rgba(200, 166, 78, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

/* ---- UNCIAL — Manuscript Vellum Panel ---- */
.preview-content.drop-cap-uncial .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Uncial Antiqua', 'Cinzel', serif;
    font-size: 4em;
    font-weight: 400;
    float: left;
    line-height: 0.78;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #5a2a0a;
    background: linear-gradient(135deg, #ede0c8, #dccfb0);
    border-top: 3px solid #c8a64e;
    border-bottom: 2px solid #b8a070;
    border-left: 1px solid #c8a64e;
    border-right: 1px solid #c8a64e;
    box-shadow: inset 0 0 8px rgba(200, 166, 78, 0.08), 0 2px 4px rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 0 rgba(200, 166, 78, 0.2);
}

/* ---- REGAL — Deep Blue & Gold Frame ---- */
.preview-content.drop-cap-regal .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 3.8em;
    font-weight: 900;
    float: left;
    line-height: 0.82;
    padding: 0.1em 0.14em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: #f0dfa0;
    background: linear-gradient(145deg, #1a3a6a 0%, #0e2a5a 60%, #1a3a6a 100%);
    border: 3px double #c8a64e;
    box-shadow: inset 0 0 0 1px #d4a840, inset 0 0 10px rgba(212, 168, 64, 0.15), 0 2px 8px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 8px rgba(240, 223, 160, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* ---- WOODCUT — Block-Print with Texture ---- */
.preview-content.drop-cap-woodcut .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 3.8em;
    font-weight: 900;
    float: left;
    line-height: 0.82;
    padding: 0.1em 0.12em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: #f4edd8;
    background: linear-gradient(135deg, #1a1410 0%, #2a2018 30%, #1a1410 70%, #0e0a08 100%);
    border: 3px solid #58180d;
    box-shadow: inset 0 0 8px rgba(200, 166, 78, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: none;
}

/* ---- EMBER — Burning Orange-Red with Fire Glow ---- */
.preview-content.drop-cap-ember .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 900;
    float: left;
    line-height: 0.75;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #ff6a00;
    background: linear-gradient(145deg, #3a1005 0%, #5a1a08 30%, #2a0802 60%, #4a1206 100%);
    border: 3px solid #c84a00;
    box-shadow: inset 0 0 10px rgba(255, 100, 0, 0.2), inset 0 0 0 1px rgba(255, 160, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(255, 100, 0, 0.7), 0 0 20px rgba(255, 50, 0, 0.4), 0 -2px 6px rgba(255, 200, 0, 0.3);
}

/* ---- ARCANE — Purple Mystic with Energy Glow ---- */
.preview-content.drop-cap-arcane .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4em;
    font-weight: 700;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #c090f0;
    background: linear-gradient(135deg, #1a102a 0%, #2a1848 40%, #140a22 100%);
    border: 3px solid #6a3a9a;
    box-shadow: inset 0 0 0 1px rgba(160, 100, 255, 0.15), inset 0 0 10px rgba(106, 58, 154, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(160, 100, 255, 0.6), 0 0 20px rgba(120, 60, 200, 0.3);
}

/* ---- FROST — Icy Blue-White Crystalline ---- */
.preview-content.drop-cap-frost .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4em;
    font-weight: 700;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #5aaad0;
    background: linear-gradient(135deg, #e8f4ff 0%, #d0e8f8 40%, #c0daf0 100%);
    border: 2px solid #8ac0e0;
    box-shadow: inset 0 0 8px rgba(138, 192, 224, 0.2), inset 0 0 0 1px rgba(180, 220, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
    text-shadow: 0 0 6px rgba(160, 210, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- VERDANT — Deep Forest Green ---- */
.preview-content.drop-cap-verdant .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 700;
    float: left;
    line-height: 0.75;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #2a8a3a;
    background: linear-gradient(135deg, #e0f0d8 0%, #c8e4b8 40%, #d4ecc8 100%);
    border: 2px solid #4a9a40;
    box-shadow: inset 0 0 0 1px rgba(58, 122, 42, 0.12), inset 0 0 6px rgba(60, 140, 40, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
    text-shadow: 0 0 6px rgba(60, 140, 40, 0.25), 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- OBSIDIAN — Glossy Black Glass Oil-Slick ---- */
.preview-content.drop-cap-obsidian .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4em;
    font-weight: 900;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.12em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: transparent;
    background: linear-gradient(135deg, #0a0a0e 0%, #1a1a22 30%, #0e0e14 60%, #16161e 100%);
    border: 3px solid #333;
    box-shadow: inset 0 0 12px rgba(100, 80, 160, 0.08), inset 0 0 0 1px rgba(100, 100, 120, 0.2), 0 2px 8px rgba(0, 0, 0, 0.5);
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(135deg, #6a6a80, #9090a8 20%, #7a60a0 40%, #60a0a0 60%, #a08060 80%, #8a8aa0);
    text-shadow: none;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.6));
}

/* ---- CELESTIAL — Radiant White on Purple-Indigo ---- */
.preview-content.drop-cap-celestial .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4em;
    font-weight: 900;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.14em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: #f0eaff;
    background: linear-gradient(145deg, #1a0a3a 0%, #2a1460 30%, #180840 60%, #221050 100%);
    border: 3px solid #9070c0;
    box-shadow: inset 0 0 0 1px rgba(200, 180, 255, 0.12), inset 0 0 14px rgba(160, 120, 240, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 14px rgba(240, 230, 255, 0.8), 0 0 28px rgba(200, 180, 255, 0.4), 0 0 6px rgba(255, 255, 255, 0.5);
}

/* ---- BLOOD INK — Crimson Calligraphy ---- */
.preview-content.drop-cap-blood-ink .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4.5em;
    font-weight: 900;
    float: left;
    line-height: 0.72;
    padding: 0.06em 0.1em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #8b1a2a;
    background: linear-gradient(135deg, #f8ede0 0%, #eedcc8 40%, #e4d0b8 100%);
    border: 2px solid #c8a64e;
    box-shadow: inset 0 0 0 1px rgba(200, 166, 78, 0.2), inset 0 0 6px rgba(139, 26, 42, 0.06), 0 2px 4px rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 2px rgba(139, 26, 42, 0.25), 0 0 4px rgba(139, 26, 42, 0.1);
}

/* ---- COPPER — Weathered Patina Metallic ---- */
.preview-content.drop-cap-copper .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 900;
    float: left;
    line-height: 0.75;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: transparent;
    background: linear-gradient(145deg, #3a2a1a 0%, #2a1e12 40%, #342618 100%);
    border: 3px solid #a07030;
    box-shadow: inset 0 0 0 1px rgba(160, 112, 48, 0.2), inset 0 0 8px rgba(200, 140, 60, 0.1), 0 2px 6px rgba(0, 0, 0, 0.35);
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(145deg, #b87333 0%, #da8a44 20%, #cd7f32 40%, #50c878 55%, #4aad6a 65%, #b87333 80%, #da8a44 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(1px 2px 1px rgba(90, 60, 20, 0.5));
}

/* ---- MOONSTONE — Pearlescent Silver Ethereal ---- */
.preview-content.drop-cap-moonstone .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4em;
    font-weight: 700;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: transparent;
    background: linear-gradient(145deg, #1a1a2e 0%, #222240 30%, #1e1e36 60%, #2a2a44 100%);
    border: 2px solid #8888aa;
    box-shadow: inset 0 0 0 1px rgba(200, 200, 230, 0.12), inset 0 0 12px rgba(180, 180, 220, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(135deg, #c0c0d8, #e8e0f0 25%, #d0d0e4 45%, #e4daf0 65%, #b8b8d0 85%, #d8d0e8);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(200, 200, 240, 0.4));
}

/* ---- ENGRAVED — Debossed Stone Chiseled ---- */
.preview-content.drop-cap-engraved .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 900;
    float: left;
    line-height: 0.75;
    padding: 0.1em 0.12em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: #9a9a90;
    background: linear-gradient(135deg, #5a5a52 0%, #4e4e48 30%, #5a5a52 60%, #3e3e38 100%);
    border: 3px solid #6a6a60;
    box-shadow: inset 0 0 0 1px rgba(100, 100, 90, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 2px 2px 0 #2a2a25, -1px -1px 0 rgba(255, 255, 255, 0.12);
    letter-spacing: 1px;
}

/* ---- INFERNAL — Hellfire Red-Black ---- */
.preview-content.drop-cap-infernal .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 900;
    float: left;
    line-height: 0.75;
    padding: 0.08em 0.12em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #e02020;
    background: linear-gradient(145deg, #1a0505 0%, #2a0808 30%, #0e0202 60%, #1e0606 100%);
    border: 3px solid #6a1010;
    box-shadow: inset 0 0 12px rgba(200, 20, 20, 0.15), inset 0 0 0 1px rgba(255, 50, 50, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 12px rgba(255, 30, 30, 0.7), 0 0 24px rgba(200, 0, 0, 0.4), 0 0 4px rgba(255, 100, 0, 0.3);
}

/* ---- RUNIC — Nordic Stone-Carved ---- */
.preview-content.drop-cap-runic .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4em;
    font-weight: 900;
    float: left;
    line-height: 0.78;
    padding: 0.1em 0.12em;
    margin-right: 0.12em;
    margin-bottom: 0.02em;
    color: #c8c0b0;
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 30%, #4e4e4e 60%, #2e2e2e 100%);
    border: 3px solid #666;
    box-shadow: inset 0 0 0 1px rgba(100, 100, 100, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 2px;
}

/* ---- SYLVAN — Warm Amber-Gold Woodland ---- */
.preview-content.drop-cap-sylvan .doc-section .section-content>.drop-cap-target::first-letter {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 4.2em;
    font-weight: 700;
    float: left;
    line-height: 0.75;
    padding: 0.1em 0.14em;
    margin-right: 0.1em;
    margin-bottom: 0.02em;
    color: #8b5a1a;
    background: linear-gradient(135deg, #f8ecd0 0%, #f0dca8 30%, #e8d098 60%, #f4e4b8 100%);
    border: 2px solid #c89840;
    box-shadow: inset 0 0 0 1px rgba(200, 152, 64, 0.15), inset 0 0 8px rgba(180, 120, 40, 0.08), 0 2px 4px rgba(0, 0, 0, 0.15);
    text-shadow: 0 0 6px rgba(200, 140, 40, 0.25), 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- Suppress ::first-letter when image-based dropcap is active ---- */
.preview-content.drop-cap-royal-blue-gold .doc-section .section-content>.drop-cap-target::first-letter,
.preview-content.drop-cap-verdant-knotwork .doc-section .section-content>.drop-cap-target::first-letter,
.preview-content.drop-cap-gold-filigree .doc-section .section-content>.drop-cap-target::first-letter,
.preview-content .has-illuminated-dropcap::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* ---- Options Row (Columns, Paper, Advanced) ---- */
.toolbar-options-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    margin-top: 4px;
    align-items: end;
}

.option-columns {
    grid-column: 1 / 3;
}

.option-paper {
    grid-column: 4 / 6;
}

/* Grouped border for linked pairs */
.thumb-grid-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    border: 1.5px solid rgba(200, 166, 78, 0.25);
    border-radius: calc(var(--radius-sm) + 3px);
    padding: 3px;
    background: rgba(200, 166, 78, 0.03);
}

.option-thumbs label {
    display: block;
    margin-bottom: 3px;
}

/* Option icons in swatch-like containers */
.option-icon {
    font-size: 16px;
    line-height: 1;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--surface-1);
}

.option-thumb.active .thumb-label {
    color: var(--accent);
}

/* Advanced Settings button — match paper thumb height */
.btn-advanced-toggle {
    grid-column: 7 / 11;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}














/* Toolbar controls */
.toolbar-group select {
    padding: 7px 10px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
}

.toolbar-group label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: block;
}

/* Free Counter */
.free-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(200, 166, 78, 0.06);
    border: 1px solid rgba(200, 166, 78, 0.12);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.free-counter-num {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.free-counter-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Unlock button */
.btn-unlock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(200, 166, 78, 0.3);
    border-radius: var(--radius-sm);
    font-family: var(--heading-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-unlock:hover {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Advanced Settings Toggle */
.btn-advanced-toggle {
    padding: 10px 14px;
    background: rgba(200, 166, 78, 0.08);
    color: var(--accent);
    border: 1px solid rgba(200, 166, 78, 0.4);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 8px rgba(200, 166, 78, 0.3);
}

.btn-advanced-toggle:hover {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.15);
    color: var(--accent-glow, #e8c95a);
}

.btn-advanced-toggle.expanded {
    border-style: solid;
    color: var(--accent);
}

/* Advanced Settings Panel */
.advanced-settings {
    border-bottom: 1px solid rgba(200, 166, 78, 0.08);
    background: rgba(200, 166, 78, 0.02);
}

.advanced-settings-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 14px;
    padding: 14px 20px;
    align-items: end;
}

.advanced-group label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.advanced-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    opacity: 0.5;
}

textarea.advanced-input {
    height: 50px;
    resize: none;
}

.advanced-upgrade {
    display: flex;
    align-items: end;
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(200, 166, 78, 0.3);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-outline:hover {
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
}

/* ---- Editor / Preview — flex-wrap ---- */
.converter-panels {
    display: flex;
    flex-wrap: wrap;
    min-height: 460px;
}

.panel {
    flex: 1 1 320px;
    /* Without this a flex item floors at its content's min-content width, and
       the preview's two columns push the pane past the clipped .converter-app. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* The pane's own width, not the viewport's, decides whether two columns of
   preview text still fit — so its responsive rules key off a container query. */
.panel-preview {
    container-type: inline-size;
    container-name: preview-pane;
    /* Anchors the page-count chip, which sits outside the replaced #preview. */
    position: relative;
}

/* Gap between Markdown and Preview */
.panel-gap {
    flex: 0 0 1px;
    background: var(--border);
}

/* ===== PANEL TABS (Editor | Preview) ===== */
.panel-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    /* Narrow panes cannot fit the tabs and the action buttons on one line;
       without wrapping, Clear lands outside the clipped .converter-app. */
    flex-wrap: wrap;
}

.panel-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--body-font);
}

.panel-tab:hover {
    color: var(--text);
}

.panel-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.panel-tabs .editor-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* On narrow containers, only the active panel is visible.
   JS adds .is-narrow class via ResizeObserver. */
.converter-panels.is-narrow .panel-editor {
    display: none;
}

.converter-panels.is-narrow .panel-gap {
    display: none;
}

.converter-panels.is-narrow.showing-editor .panel-editor {
    display: flex;
}

.converter-panels.is-narrow.showing-editor .panel-preview {
    display: none;
}

.converter-panels.is-narrow.showing-editor .panel-gap {
    display: none;
}

.converter-panels.is-narrow.showing-preview .panel-editor {
    display: none;
}

.converter-panels.is-narrow.showing-preview .panel-preview {
    display: flex;
}

/* ===== NARROW VIEWPORT — JS adds .is-narrow via ResizeObserver ===== */
.converter-app.is-narrow .toolbar-controls {
    display: none;
}

.converter-app.is-narrow .toolbar-actions {
    display: none;
}

.converter-app.is-narrow .btn-settings-gear {
    display: flex;
}

/* Bottom bar: fixed to viewport bottom on narrow */
.converter-download-bar {
    display: none;
    padding: 10px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: 8px;
    align-items: center;
}

.converter-app.is-narrow .converter-download-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.btn-upload-bottom {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 12px;
}

.btn-download-bottom {
    flex: 1;
    font-size: 13px;
    padding: 10px 16px;
}

.free-counter-bottom {
    flex-direction: row;
    gap: 4px;
}

/* Settings Bottom-Sheet (opened by gear button) */
.settings-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 16px;
}

.settings-sheet.open {
    transform: translateY(0);
}

.settings-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.settings-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Editor action buttons (Clear, Undo, Populate) */
.editor-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.btn-editor-action {
    padding: 3px 8px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid rgba(200, 166, 78, 0.2);
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}

.btn-editor-action:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
    box-shadow: 0 0 6px rgba(200, 166, 78, 0.15);
}

.btn-editor-action:disabled {
    opacity: 0.35;
    cursor: default;
}

/* A finger needs more than the 22px these read at on a pointer device. The
   badge stays the size it is; only the hit area grows, and only where taps
   are how the page is driven. */
@media (pointer: coarse) {
    .btn-editor-action {
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .panel-tab {
        min-height: 44px;
    }
}

.panel-editor {
    border-right: none;
}

/* Cheat sheet at bottom of Markdown panel */
.cheatsheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(200, 166, 78, 0.04);
    border-top: 1px solid rgba(200, 166, 78, 0.08);
}

.cheatsheet-header {
    font-family: var(--heading-font);
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.cheatsheet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.cheatsheet-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

.cheatsheet-row code {
    background: rgba(200, 166, 78, 0.12);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.cheatsheet-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

#editor {
    flex: 1;
    width: 100%;
    padding: 16px;
    background: var(--surface);
    color: var(--text);
    border: none;
    resize: none;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.7;
}

#editor::placeholder {
    color: var(--text-muted);
}

#editor:focus {
    outline: none;
}

/* ---- Themed Scrollbars ---- */
#editor::-webkit-scrollbar,
.preview-content::-webkit-scrollbar {
    width: 10px;
}

#editor::-webkit-scrollbar-track,
.preview-content::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 5px;
}

#editor::-webkit-scrollbar-thumb,
.preview-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
    border: 2px solid var(--surface-2);
}

#editor::-webkit-scrollbar-thumb:hover,
.preview-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-glow);
}

#editor {
    scrollbar-color: var(--accent) var(--surface-2);
    scrollbar-width: thin;
}

.preview-content {
    scrollbar-color: var(--accent) var(--surface-2);
    scrollbar-width: thin;
}

/* ---- Preview Pane ----
   Mirrors the merged fantasy theme (styles/fantasy.css + the pdf-lib underlay).
   Print-only constructs are approximated: the full-bleed parchment underlay
   becomes the pane background plus a noise-texture/vignette overlay, and
   @page margins become pane padding. */
.preview-content {
    flex: 1;
    /* No pane padding: .preview-sheet carries the PDF's real @page margins. */
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--preview-font);
    font-size: 13px;
    line-height: 1.65;
    /* Long unbroken tokens (URLs, code) would otherwise set the pane's floor. */
    overflow-wrap: break-word;
    background-color: #fdf6e3;
    color: #1a1612;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    /* Parchment mottle + corner vignette — on-screen stand-in for the PDF's
       full-bleed underlay (same fractal-noise texture, alpha pre-baked).
       attachment:scroll keeps both fixed to the pane while content scrolls,
       approximating the underlay's per-page placement. */
    background-image:
        radial-gradient(ellipse 120% 120% at 50% 45%,
            transparent 60%,
            color-mix(in srgb, var(--table-alt-bg, #f5e6c8) 75%, transparent) 100%),
        url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.015%22%20numOctaves%3D%224%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.45%20%200%200%200%200%200.35%20%200%200%200%200%200.2%20%200%200%200%200.05%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22300%22%20height%3D%22300%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
    background-size: 100% 100%, 300px 300px;
    background-attachment: scroll, scroll;
}

/* Background image overlay — faded so text is readable */
.preview-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--preview-bg-image, none);
    background-size: auto min(100vh, 100%);
    background-position: top center;
    background-repeat: repeat-y;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.preview-content>*,
.preview-sheet>*:not(.preview-page-rules) {
    position: relative;
    z-index: 1;
}

/* ---- Page boundaries ----
   The sheet is the PDF's page box: its padding is the real @page margin, scaled
   against whatever width the pane got, so the boundaries move when the paper
   size or the mode's orientation does. Set from preview-pages.js; the fallbacks
   keep the pane readable if that script never runs. */
.preview-sheet {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: var(--pg-margin-top, 28px) var(--pg-margin-sides, 24px) var(--pg-margin-bottom, 28px);
    min-height: calc(var(--pg-usable, 0px) + var(--pg-margin-top, 0px) + var(--pg-margin-bottom, 0px));
}

/* One repeating gradient draws every boundary, so document length costs
   nothing; the mask turns the rule into dashes. Sits below the watermark's
   z-index 2 — a watermarked preview shows both. */
.preview-page-rules {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--pg-margin-top, 0px);
    bottom: var(--pg-margin-bottom, 0px);
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--pg-usable, 100%) - 1px),
            rgba(120, 92, 52, 0.55) calc(var(--pg-usable, 100%) - 1px),
            rgba(120, 92, 52, 0.55) var(--pg-usable, 100%));
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 14px);
    mask-image: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 14px);
}

/* Lives outside #preview, which is replaced wholesale on every keystroke. */
.preview-page-chip {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b563a;
    background: rgba(253, 246, 227, 0.92);
    border: 1px solid rgba(120, 92, 52, 0.3);
    pointer-events: none;
}

.preview-page-chip[hidden] {
    display: none;
}

/* Preview watermark — the on-screen half of the PDF's stamp, drawn only while
   app.js has flagged the render as watermarked (#preview.show-watermark).
   Tiled rather than centred once: the pane scrolls as a single document where
   the PDF repeats the mark on every page. */
.preview-content.show-watermark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27360%27%3E%3Ctext%20x%3D%27180%27%20y%3D%27180%27%20transform%3D%27rotate%28-35%20180%20180%29%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20font-family%3D%27Inter%2C%20-apple-system%2C%20Helvetica%2C%20Arial%2C%20sans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27700%27%20letter-spacing%3D%273%27%20fill%3D%27rgba%2880%2C60%2C30%2C0.20%29%27%3Egrimoireprint.com%3C%2Ftext%3E%3C%2Fsvg%3E');
    background-size: 360px 360px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 2;
}

/* ---- Sections ----
   Sections flow continuously (no tabs); each section's H2 gets one accent
   colour on its underline, mirroring fantasy.css. */
.preview-content .doc-section {
    position: relative;
}

.preview-content .doc-section.section-1 h2:first-child { border-bottom-color: var(--tab-1, #8b1a1a); }
.preview-content .doc-section.section-2 h2:first-child { border-bottom-color: var(--tab-2, #c8a64e); }
.preview-content .doc-section.section-3 h2:first-child { border-bottom-color: var(--tab-3, #1a6b4a); }
.preview-content .doc-section.section-4 h2:first-child { border-bottom-color: var(--tab-4, #4a3b8b); }
.preview-content .doc-section.section-5 h2:first-child { border-bottom-color: var(--tab-5, #1a4a8b); }
.preview-content .doc-section.section-6 h2:first-child { border-bottom-color: var(--tab-6, #8b4a1a); }
.preview-content .doc-section.section-7 h2:first-child { border-bottom-color: var(--tab-7, #5a1a5a); }
.preview-content .doc-section.section-8 h2:first-child { border-bottom-color: var(--tab-8, #2a6b6b); }

.preview-content.columns-2 .section-content {
    column-count: 2;
    column-gap: 20px;
    column-rule: 1px solid var(--rule-color, var(--accent));
    column-fill: balance;
    /* fantasy.css shrinks to 0.78em for print; keep it a touch larger on screen */
    font-size: 0.88em;
}

.preview-content.columns-2 h2 {
    column-span: all;
    -webkit-column-span: all;
}

/* Wide top-level tables span both columns; tables nested inside callouts
   (ability scores, roll tables) stay column-width, as in fantasy.css */
.preview-content.columns-2 .section-content>table,
.preview-content.columns-2 .toc-box {
    column-span: all;
    -webkit-column-span: all;
}

/* Stat blocks are column-width by default (sourcebook style);
   add WIDE to the marker to span both columns */
.preview-content.columns-2 .callout-wide {
    column-span: all;
    -webkit-column-span: all;
}

.preview-content.columns-2 .section-content>h3:has(+ table) {
    column-span: all;
    -webkit-column-span: all;
}

/* A two-column pane is at least both columns' min-content wide, so below the
   width where that fits the on-screen preview reads as one column. The PDF is
   still laid out in two — this is the screen approximation only. */
@container preview-pane (max-width: 460px) {
    .preview-content.columns-2 .section-content {
        column-count: 1;
        column-rule: none;
        font-size: 1em;
    }
}

/* Headings — fantasy.css proportions (28/18/14/11.5pt on an 11.5pt body) */
.preview-content h1 {
    font-family: var(--heading-font);
    font-size: 2.2em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--heading-color, #58180d);
    border-bottom: 3px solid var(--rule-color, #c9ad6a);
    padding-bottom: 0.4em;
    margin: 16px 0 0.6em;
}

/* Cover-page treatment — a document that opens with an H1 gets a full-bleed
   cover page in the PDF; on screen the leading H1 renders as a centred,
   framed cover banner instead. */
.preview-sheet>h1:first-child {
    text-align: center;
    border-bottom: none;
    border-top: 3px double var(--rule-color, #c9ad6a);
    border-bottom: 3px double var(--rule-color, #c9ad6a);
    padding: 0.6em 0.4em;
    margin: 4px 0 20px;
}

.preview-content .cover-subtitle {
    text-align: center;
    font-style: italic;
    font-size: 1.05em;
    color: var(--ink-secondary, #58473a);
    margin: -12px 0 16px;
}

.preview-content h2 {
    font-family: var(--heading-font);
    font-size: 1.45em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--heading-color, #58180d);
    border-bottom: 2px solid var(--rule-color, #c9ad6a);
    padding-bottom: 0.2em;
    margin: 14px 0 8px;
}

.preview-content h3 {
    font-family: var(--heading-font);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--h3-color, #8b1a1a);
    margin: 12px 0 6px;
}

.preview-content h4 {
    font-family: var(--heading-font);
    font-size: 0.95em;
    font-weight: 600;
    color: var(--ink-secondary, #58473a);
    margin: 10px 0 5px;
}

.preview-content h5 {
    font-family: var(--heading-font);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--heading-color, #58180d);
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-content h6 {
    font-family: var(--heading-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color, #1a1410);
    margin: 6px 0 3px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
}

/* Anti-orphan: headings and callout labels stay with following content */
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
    break-after: avoid;
    page-break-after: avoid;
}

.preview-content .callout {
    break-inside: avoid;
    page-break-inside: avoid;
}

.preview-content h3,
.preview-content .callout {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Text */
.preview-content p {
    margin: 6px 0;
}

.preview-content strong {
    font-weight: 700;
}

.preview-content em {
    font-style: italic;
}

.preview-content code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: 'SF Mono', monospace;
}

/* Plain quotes (non-callout) */
.preview-content blockquote:not(.callout) {
    border-left: 4px solid var(--rule-color, #c9ad6a);
    background: color-mix(in srgb, var(--table-alt-bg, #f5e6c8) 40%, transparent);
    font-style: italic;
    color: var(--ink-secondary, #58473a);
    margin: 10px 0;
    padding: 8px 14px;
}

.preview-content hr {
    border: none;
    height: 3px;
    background: linear-gradient(to right,
            transparent 0%,
            var(--rule-color, #c9ad6a) 15%,
            var(--accent, #c8a64e) 50%,
            var(--rule-color, #c9ad6a) 85%,
            transparent 100%);
    margin: 16px 0;
}

/* Lists */
.preview-content ul,
.preview-content ol {
    margin: 6px 0;
    padding-left: 22px;
}

.preview-content li {
    margin: 3px 0;
}

.preview-content ul li {
    list-style-type: disc;
}

.preview-content ul li::marker {
    color: var(--accent, #c8a64e);
}

/* Tables — clean parchment style (fantasy.css): no outer border, tinted header
   row with a gold rule, alternating parchment stripes */
.preview-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.85em;
    border: none;
}

.preview-content thead th {
    background: var(--table-alt-bg, #f5e6c8);
    color: var(--text-color, #1a1612);
    padding: 6px 10px;
    text-align: left;
    font-family: var(--heading-font);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid var(--rule-color, #c9ad6a);
}

.preview-content tbody td {
    padding: 5px 10px;
    border: none;
}

.preview-content tbody tr:nth-child(even) {
    background: transparent;
}

.preview-content tbody tr:nth-child(odd) {
    background: var(--table-alt-bg, #f5e6c8);
}

/* Callouts */
.preview-content .callout {
    border-radius: 5px;
    padding: 12px 14px;
    margin: 10px 0;
}

.preview-content .callout-label {
    display: block;
    font-family: var(--heading-font);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.preview-content .callout-body {
    font-size: 0.9em;
}

.preview-content .toc-box {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--accent, rgba(200, 166, 78, 0.4));
    border-radius: 5px;
}

.preview-content .toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.preview-content .toc-list li {
    margin-bottom: 6px;
    line-height: 1.3;
}

.preview-content .toc-sub {
    margin-left: 18px;
    font-size: 0.95em;
    opacity: 0.9;
}

.preview-content .toc-list a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.15s;
}

.preview-content .toc-list a:hover {
    color: var(--accent);
}

.preview-content .toc-main a {
    font-weight: 600;
    color: var(--heading-color);
}

.preview-content .callout-body p {
    margin: 3px 0;
}

/* ---- READ ALOUD (boxed text) ---- */
.preview-content .callout-read {
    background: var(--read-bg, #fef9ec);
    border: 2px solid var(--read-border, #c8a64e);
    border-left: 5px solid var(--read-border, #c8a64e);
    font-style: italic;
    box-shadow: inset 0 0 20px rgba(200, 166, 78, 0.08);
}

.preview-content .callout-read .callout-label {
    color: color-mix(in srgb, var(--read-border, #c8a64e) 45%, var(--text-color, #1a1612));
}

/* ---- GM NOTES (dark ink panel) ---- */
.preview-content .callout-gm {
    background: var(--gm-bg, #2a2220);
    color: var(--gm-text, #e8ddd0);
    border: none;
    border-left: 4px solid var(--gm-border, #8b1a1a);
    border-radius: 3px;
}

.preview-content .callout-gm .callout-label {
    color: var(--accent, #c8a64e);
    opacity: 1;
}

.preview-content .callout-gm strong {
    color: #fff;
}

/* ---- STAT BLOCK (sourcebook style) ---- */
.preview-content .callout-stat {
    background: var(--stat-bg, #fdf1dc);
    border: none;
    border-radius: 0;
    font-size: 0.88em;
    line-height: 1.4;
    padding: 8px 12px 10px;
    border-image: linear-gradient(to right,
            var(--stat-border, #c09060),
            var(--accent, #c8a64e) 20%,
            var(--gold-light, #f0dfa0) 50%,
            var(--accent, #c8a64e) 80%,
            var(--stat-border, #c09060)) 1;
    border-top: 4px solid;
    border-bottom: 4px solid;
    box-shadow: 0 1px 4px rgba(58, 40, 20, 0.15);
}

/* The creature name IS the label */
.preview-content .callout-stat .callout-label {
    display: none;
}

.preview-content .callout-stat .callout-body>p:first-child strong,
.preview-content .callout-stat .callout-body>strong:first-child {
    font-family: var(--heading-font);
    font-size: 1.55em;
    font-weight: 700;
    color: var(--h3-color, #8b1a1a);
    display: block;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.preview-content .callout-stat .callout-body em:first-of-type {
    font-size: 0.92em;
    color: var(--ink-secondary, #58473a);
}

.preview-content .callout-stat .callout-body hr {
    height: 2px;
    margin: 5px 0;
    background: linear-gradient(to right,
            transparent 0%,
            var(--accent, #c8a64e) 15%,
            var(--stat-border, #c09060) 50%,
            var(--accent, #c8a64e) 85%,
            transparent 100%);
}

.preview-content .callout-stat table {
    margin: 5px 0;
}

.preview-content .callout-stat thead th {
    background: none;
    color: var(--h3-color, #8b1a1a);
    font-size: 0.8em;
    padding: 2px 4px;
    text-align: center;
    border-bottom: 1px solid var(--stat-border, #c09060);
}

.preview-content .callout-stat tbody td {
    text-align: center;
    padding: 2px 4px;
    font-size: 0.85em;
}

.preview-content .callout-stat tbody tr:nth-child(even),
.preview-content .callout-stat tbody tr:nth-child(odd) {
    background: transparent;
}

/* ---- TREASURE ---- */
.preview-content .callout-loot {
    background: var(--loot-bg, #fefaee);
    border: 2px solid var(--loot-border, #c8a64e);
    border-left: 5px solid var(--loot-border, #c8a64e);
}

.preview-content .callout-loot .callout-label {
    color: color-mix(in srgb, var(--loot-border, #c8a64e) 45%, var(--text-color, #1a1612));
}

/* ---- SKILL CHECK ---- */
.preview-content .callout-skill {
    background: var(--skill-bg, #edf1f5);
    border: 2px solid var(--skill-border, #48688f);
    border-left: 5px solid var(--skill-border, #48688f);
}

.preview-content .callout-skill .callout-label {
    color: color-mix(in srgb, var(--skill-border, #48688f) 70%, var(--text-color, #1a1612));
}

.preview-content .callout-trap {
    background: #fdf0f0;
    border: 2px solid #c0392b;
    border-left: 5px solid #c0392b;
}

.preview-content .callout-trap .callout-label {
    color: #9c2d21;
}

.preview-content .callout-npc {
    background: #f5f0fa;
    border: 2px solid #8e44ad;
    border-left: 5px solid #8e44ad;
}

.preview-content .callout-npc .callout-label {
    color: #6f3488;
}

.preview-content .callout-quest {
    background: #fef9e7;
    border: 2px solid #d4a017;
    border-left: 5px solid #d4a017;
}

.preview-content .callout-quest .callout-label {
    color: #7d5c06;
}

.preview-content .callout-map {
    background: #faf6f0;
    border: 2px dashed #8b7355;
    border-left: 5px solid #8b7355;
}

.preview-content .callout-map .callout-label {
    color: #6b5340;
}

.preview-content .callout-dialogue {
    background: #fdf8f0;
    border: 2px solid var(--rule-color, #c9ad6a);
    border-left: 5px solid var(--rule-color, #c9ad6a);
    font-style: italic;
}

.preview-content .callout-dialogue .callout-label {
    color: var(--ink-secondary, #58473a);
    font-style: normal;
}

.preview-content .callout-note {
    background: #eef4fa;
    border: 2px solid #2980b9;
    border-left: 5px solid #2980b9;
}

.preview-content .callout-note .callout-label {
    color: #1f618d;
}

.preview-content .callout-tip {
    background: #eafaf1;
    border: 2px solid #27ae60;
    border-left: 5px solid #27ae60;
}

.preview-content .callout-tip .callout-label {
    color: #187a41;
}

.preview-content .callout-warning {
    background: #fef5e7;
    border: 2px solid #e67e22;
    border-left: 5px solid #e67e22;
}

.preview-content .callout-warning .callout-label {
    color: #a85a10;
}

.preview-content .callout-caution {
    background: #fdf0f0;
    border: 2px solid #e74c3c;
    border-left: 5px solid #e74c3c;
}

.preview-content .callout-caution .callout-label {
    color: #a92c1e;
}

.preview-content .callout-important {
    background: #f3eefa;
    border: 2px solid #7e57c2;
    border-left: 5px solid #7e57c2;
}

.preview-content .callout-important .callout-label {
    color: #5e3d9e;
}

.preview-content .callout-aside {
    background: var(--table-alt-bg, #f5e6c8);
    border: 1px solid var(--rule-color, #c9ad6a);
    border-top: 3px solid var(--rule-color, #c9ad6a);
    border-radius: 0;
    font-size: 0.9em;
}

.preview-content .callout-aside .callout-label {
    color: var(--ink-secondary, #58473a);
}

.preview-content .callout-table {
    background: var(--page-bg, #fdf6e3);
    border: 2px solid var(--rule-color, #c9ad6a);
    border-top: 4px solid var(--rule-color, #c9ad6a);
}

.preview-content .callout-table .callout-label {
    color: var(--h3-color, #8b1a1a);
}

.preview-content .callout-banner {
    background: var(--table-alt-bg, #f5e6c8);
    border: none;
    border-top: 4px solid var(--h3-color, #8b1a1a);
    border-bottom: 4px solid var(--h3-color, #8b1a1a);
    border-radius: 0;
    text-align: center;
    padding: 16px 20px;
}

.preview-content .callout-banner .callout-label {
    display: none;
}

.preview-content .callout-banner h1,
.preview-content .callout-banner h2,
.preview-content .callout-banner h3 {
    color: var(--h3-color, #8b1a1a);
    border: none;
    margin: 0 0 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.preview-content .callout-banner em {
    font-size: 0.85em;
    color: var(--ink-secondary, #58473a);
}

/* ---- Footnotes in Preview ---- */
.preview-content .footnotes {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 2px solid var(--rule-color, #c9ad6a);
    font-size: 0.85em;
    color: var(--ink-secondary, #58473a);
}

.preview-content .footnotes ol {
    padding-left: 1.5em;
}

.preview-content .footnote-ref a {
    color: var(--h3-color, #8b1a1a);
    text-decoration: none;
    font-weight: 600;
}

.preview-content .footnote-backref {
    color: var(--h3-color, #8b1a1a);
    text-decoration: none;
}

/* ---- Highlighted Text in Preview ---- */
.preview-content mark {
    background: linear-gradient(135deg, #fff3b0, #ffe066);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    color: inherit;
}

/* ---- Definition Lists in Preview ---- */
.preview-content dl {
    margin: 8px 0;
}

.preview-content dt {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--h3-color, #8b1a1a);
    margin-top: 6px;
    font-size: 1.05em;
}

.preview-content dd {
    margin-left: 1.5em;
    margin-bottom: 4px;
}

.preview-content .preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
}

.preview-content .preview-placeholder-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* ---- Section Headers ---- */
.section-header {
    text-align: center;
    margin-bottom: 36px;
}

.section-tag {
    display: inline-block;
    font-family: var(--heading-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.section-header h2 {
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 15px;
}

/* ---- Features ---- */
.features {
    padding: 70px 0;
    background: var(--surface);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-card {
    padding: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.3s;
}

.feature-card:hover {
    border-color: rgba(200, 166, 78, 0.3);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.feature-card h3 {
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
}

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

.feature-card code {
    background: rgba(200, 166, 78, 0.15);
    color: var(--accent);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ---- Pricing ---- */
.pricing {
    padding: 70px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}

.pricing-card {
    padding: 28px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    position: relative;
}

.pricing-featured {
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #0c0a14;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pricing-tier {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
}

.pricing-amount {
    font-family: var(--heading-font);
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
}

.pricing-period {
    color: var(--text-muted);
    font-size: 13px;
}

.pricing-features {
    list-style: none;
    margin: 20px 0;
    text-align: left;
}

.pricing-features li {
    padding: 5px 0;
    font-size: 13px;
    color: var(--text);
}

.pricing-features li.muted {
    color: var(--text-muted);
}

/* ---- Footer ---- */
.footer {
    padding: 50px 0 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
}

.footer-links h5 {
    font-family: var(--heading-font);
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.footer-links a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    padding: 2px 0;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero h1 {
        font-size: 1.8rem;
    }
}

/* Between the menu breakpoint and a wide desktop the nav carries more than
   there is room for. Tighten it, and drop the two duplicates, rather than let
   the end of the row — which is where the account control sits — be cut off
   the screen. */
@media (min-width: 900px) and (max-width: 1160px) {
    .nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nav-logo-text {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 12px;
        white-space: nowrap;
    }

    .nav-links a.nav-standard {
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 5px 9px;
        margin-left: 4px;
    }

    /* Both of these are duplicates at this width: Contact is the same
       destination as Feedback, and the hero carries the edition switch. The
       account control is not a duplicate of anything. */
    .nav-links a.nav-bug,
    .nav-links a.nav-standard {
        display: none;
    }

    .nav-account {
        margin-left: 8px;
    }

    .nav-account-btn {
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 5px 9px;
        max-width: 130px;
    }
}

/* ---- The nav below the desktop breakpoint ----
   Measured, the tightened row wants ~730px of a nav that has ~570 at this
   width, so it used to be hidden outright and Gallery, Guide, Pricing,
   Developers and Contact had no route on a phone at all. The same row is the
   menu behind the toggle here, sign-in included. */
@media (max-width: 899px) {
    .nav[data-nav-menu="ready"] {
        padding: 6px 16px;
    }

    .nav[data-nav-menu="ready"] .nav-toggle {
        display: flex;
    }

    /* Sign-in moves into the menu, where it gets a full-width target instead of
       the chip it had to shrink to to survive beside the logo. */
    .nav[data-nav-menu="ready"] > .nav-account {
        display: none;
    }

    .nav[data-nav-menu="ready"] .nav-links {
        display: none;
    }

    .nav[data-nav-menu="ready"][data-nav-open="true"] .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 4px 16px 12px;
        /* Opaque, unlike the bar above it: text scrolling underneath an open
           menu has to not read through the items. */
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
        /* The menu scrolls itself when it outgrows the screen; the page behind
           it is left alone, so opening it never traps a scroll. */
        max-height: 78vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav[data-nav-menu="ready"] .nav-links > a {
        display: flex;
        align-items: center;
        min-height: 48px;
        margin: 0;
        padding: 0 4px;
        font-size: 15px;
        letter-spacing: normal;
        text-align: left;
        border: 0;
        border-bottom: 1px solid rgba(200, 166, 78, 0.12);
        border-radius: 0;
        background: none;
    }

    .nav[data-nav-menu="ready"] .nav-links .nav-account-menu {
        display: flex;
        margin: 14px 0 0;
    }

    .nav[data-nav-menu="ready"] .nav-links .nav-account-menu[hidden] {
        display: none;
    }

    .nav[data-nav-menu="ready"] .nav-account-menu .nav-account-btn {
        width: 100%;
        min-height: 48px;
        max-width: none;
        font-size: 13px;
        text-align: center;
    }

    /* No script, no toggle — and then the row is all there is. It keeps the
       squeeze it had before the menu existed rather than being left at full
       desktop size in a nav that cannot hold it. */
    .nav:not([data-nav-menu="ready"]) .nav-links {
        gap: 12px;
    }

    .nav:not([data-nav-menu="ready"]) .nav-links a {
        font-size: 12px;
        white-space: nowrap;
    }

    .nav:not([data-nav-menu="ready"]) .nav-links a.nav-bug,
    .nav:not([data-nav-menu="ready"]) .nav-links a.nav-standard {
        display: none;
    }

    .nav:not([data-nav-menu="ready"]) .nav-account-btn {
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 5px 9px;
        max-width: 130px;
    }
}

@media (max-width: 600px) {
    .nav-logo-text {
        font-size: 14px;
        letter-spacing: 1px;
    }

    /* The width at which even the squeezed row does not fit. Unchanged from
       before the menu existed, and only reached with the script missing. */
    .nav:not([data-nav-menu="ready"]) .nav-links {
        display: none;
    }

    .nav-account {
        margin-left: 0;
    }

    .nav-account-btn {
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 5px 9px;
        max-width: 150px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Credits Modal ---- */
.credits-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.25s ease;
}

.credits-modal[hidden] {
    display: none;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.credits-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.credits-modal-content {
    position: relative;
    max-width: 480px;
    width: 90%;
    background: var(--surface, #1a1a2e);
    border: 1px solid rgba(200, 166, 78, 0.25);
    border-radius: var(--radius, 12px);
    padding: 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(200, 166, 78, 0.08);
}

.credits-modal-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.credits-modal-content h3 {
    font-family: var(--heading-font);
    color: var(--accent, #c8a64e);
    font-size: 1.4rem;
    margin: 0 0 10px;
}

.credits-modal-content p {
    color: var(--text-muted, #888);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.credits-modal-packs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.credits-modal-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 20px;
    background: var(--surface-2, #222);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    min-width: 90px;
}

/* The modal's pack tiles are the exhausted-state checkout, so they are buttons.
   Everything visual still comes from .credits-modal-pack above. */
button.credits-modal-pack {
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
}

button.credits-modal-pack:disabled {
    cursor: default;
    opacity: 0.55;
}

.credits-modal-pack.pack-popular {
    border-color: rgba(200, 166, 78, 0.5);
    background: rgba(200, 166, 78, 0.06);
}

.pack-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent, #c8a64e);
    color: #111;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.pack-amount {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text, #eee);
    line-height: 1;
}

.pack-label {
    font-size: 10px;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pack-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent, #c8a64e);
    margin-top: 4px;
}

.credits-modal-sub {
    font-size: 11px !important;
    color: var(--text-muted, #666) !important;
    font-style: italic;
    margin-bottom: 16px !important;
}

.credits-modal-content .btn-primary {
    min-width: 140px;
}

/* ---- Free Counter Warning States ---- */
.free-counter.credits-low {
    border-color: rgba(220, 160, 40, 0.4);
    background: rgba(220, 160, 40, 0.12);
}

.free-counter.credits-low .free-counter-num {
    color: #d4a020;
    animation: creditPulse 2s ease-in-out infinite;
}

.free-counter.credits-exhausted {
    border-color: rgba(200, 60, 60, 0.3);
    background: rgba(200, 60, 60, 0.08);
}

.free-counter.credits-exhausted .free-counter-num {
    color: #c83c3c;
}

@keyframes creditPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ---- Pricing Grid: 4 cards ---- */
@media (min-width: 900px) {
    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ======================================
   Slide-out Drawers
   ====================================== */

/* Overlay backdrop */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-out panel */
.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 901;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

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

.drawer-header h3 {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.drawer-close:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200, 166, 78, 0.1);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* ---- Paint Sample Card (Colour Scheme Drawer) ---- */
.paint-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.paint-card {
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--surface-2);
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.paint-card:hover {
    border-color: rgba(200, 166, 78, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.paint-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.paint-card.paint-locked {
    opacity: 0.65;
    cursor: not-allowed;
}

.paint-card.paint-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.paint-card.paint-locked .paint-swatch {
    position: relative;
}

.paint-card.paint-locked .paint-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
}

.paint-swatch {
    height: 48px;
    position: relative;
}

.paint-swatch-strip {
    position: absolute;
    top: 0;
    bottom: 0;
}

.paint-accents-row {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
}

.paint-accents-row span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
}

.paint-card-label {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    padding: 2px 4px 6px;
}

.paint-card.active .paint-card-label {
    color: var(--accent);
}

/* ---- Grid Layout (Background & Drop Cap Drawers) ---- */
.drawer-thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Featured dropcap thumbnails (image-based styles) — 2× width */
.drawer-thumb-featured {
    grid-column: span 2;
}

.drawer-thumb-featured .drawer-dropcap-preview {
    aspect-ratio: 1;
}

.drawer-thumb {
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--surface-2);
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    gap: 4px;
}

.drawer-thumb:hover {
    border-color: rgba(200, 166, 78, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.drawer-thumb.active {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.drawer-thumb.drawer-locked {
    opacity: 0.65;
    cursor: not-allowed;
}

.drawer-thumb.drawer-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.drawer-thumb.drawer-locked .drawer-thumb-img,
.drawer-thumb.drawer-locked .drawer-dropcap-preview {
    position: relative;
}

.drawer-thumb.drawer-locked .drawer-thumb-img::after,
.drawer-thumb.drawer-locked .drawer-dropcap-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px 36px;
}

/* Premium, unlocked by having credits → a gold star, not a padlock. The item is
   fully usable, so the star is a small corner badge and does not dim it. */
.paint-card.paint-premium .paint-swatch { position: relative; }
.paint-card.paint-premium .paint-swatch::after {
    content: '\2605'; /* ★ */
    position: absolute; top: 2px; right: 4px;
    color: #f0c860; font-size: 14px; line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}
.drawer-thumb.drawer-premium .drawer-thumb-img,
.drawer-thumb.drawer-premium .drawer-dropcap-preview { position: relative; }
.drawer-thumb.drawer-premium .drawer-thumb-img::after,
.drawer-thumb.drawer-premium .drawer-dropcap-preview::after {
    content: '\2605'; /* ★ */
    position: absolute; top: 3px; right: 5px;
    color: #f0c860; font-size: 15px; line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
/* The always-visible strip: a starred premium item is enabled and un-dimmed. */
.thumb-btn.premium-unlocked { opacity: 1; cursor: pointer; }
.thumb-btn.premium-unlocked .thumb-swatch,
.thumb-btn.premium-unlocked .dropcap-preview { position: relative; }
.thumb-btn.premium-unlocked .thumb-swatch::after,
.thumb-btn.premium-unlocked .dropcap-preview::after {
    content: '\2605'; /* ★ */
    position: absolute; top: 1px; right: 3px;
    color: #f0c860; font-size: 11px; line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

.drawer-thumb-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-thumb-label {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.drawer-thumb.active .drawer-thumb-label {
    color: var(--accent);
}

/* Drop cap preview in drawer — shows letter with text context */
.drawer-dropcap-preview {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    font-size: 36px;
    padding: 6px 8px 6px 6px;
    position: relative;
    overflow: hidden;
}

/* Text lines to the right of the letter (drawer) */
.drawer-dropcap-preview::after {
    content: '';
    flex: 1;
    align-self: stretch;
    min-height: 36px;
    margin-left: 4px;
    background:
        repeating-linear-gradient(to bottom,
            rgba(88, 24, 13, 0.14) 0px, rgba(88, 24, 13, 0.14) 3px,
            transparent 3px, transparent 7px);
}

/* Full-width text lines below the letter (drawer) */
.drawer-dropcap-preview::before {
    content: '';
    order: 1;
    width: 100%;
    flex: 0 0 auto;
    height: calc(100% - 42px);
    background:
        repeating-linear-gradient(to bottom,
            rgba(88, 24, 13, 0.12) 0px, rgba(88, 24, 13, 0.12) 3px,
            transparent 3px, transparent 7px);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* Dropcap drawer — 50% wider so featured thumbs fit 3-up */
#drawer-dropcaps {
    width: 630px;
}

#dropcap-drawer-grid,
#dropcap-drawer-grid-premium {
    grid-template-columns: repeat(6, 1fr);
}

/* ---- Background Hover Preview Popover ---- */
.bg-hover-preview {
    position: fixed;
    width: 300px;
    height: 400px;
    border-radius: 10px;
    border: 1px solid rgba(200, 166, 78, 0.3);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(200, 166, 78, 0.08);
    background-size: cover;
    background-position: center;
    z-index: 910;
    pointer-events: none;
    animation: bgPreviewFadeIn 0.18s ease-out;
    overflow: hidden;
}

.bg-hover-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    border-radius: 0 0 10px 10px;
}

@keyframes bgPreviewFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Drawer section divider */
.drawer-section-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.drawer-section-label:first-child {
    margin-top: 0;
}
/* ---- Provider sign-in buttons ----
   A light plate with the provider's own mark, inside our own dialog: this is
   the shape people already recognise from every other sign-in, and it is what
   both providers' branding guidance asks for. The marks are inline SVG, so
   there is no third-party request and no CSP change. */
.account-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.account-providers[hidden] {
    display: none;
}

.btn-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    text-decoration: none;
}

.btn-provider:hover {
    color: #1f1f1f;
    background: #f2f2f2;
    border-color: #c6c8ca;
    transform: none;
}

.provider-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Only drawn when there is something above it to divide from. */
.account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.account-divider[hidden] {
    display: none;
}

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

.account-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 14px;
}

/* ---- The account page ---- */
.account-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 24px 120px;
}

.account-page-header {
    text-align: center;
    margin-bottom: 44px;
}

.account-page-header h1 {
    font-family: var(--heading-font);
    font-size: 2.4rem;
    color: #fff;
    margin: 8px 0;
}

.account-page-email {
    font-size: 14px;
    color: var(--accent);
    margin: 0 0 8px;
    word-break: break-all;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.account-grid[hidden],
.account-page-signedout[hidden] {
    display: none;
}

.account-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.account-card-wide {
    max-width: 460px;
    margin: 0 auto;
}

/* The card is a flex column with flex-start items, so anything that should run
   its full width has to say so. Buttons deliberately do not. */
.account-card h2,
.account-card p,
.account-card .account-form,
.account-card .account-providers,
.account-card .account-divider,
.account-card .account-hint,
.account-card .account-note {
    align-self: stretch;
}

.account-card h2 {
    font-family: var(--body-font);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}

.account-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.account-card .account-balance-big {
    font-family: var(--heading-font);
    font-size: 3rem;
    line-height: 1;
    color: #fff;
    margin: 0;
}

/* The label under the number is part of it, not a paragraph after it. */
.account-card .account-card-sub {
    margin-top: -8px;
}

.account-card .account-card-note {
    font-size: 12px;
    color: var(--text-muted);
}

.account-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.account-method {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

/* The label, after the mark. A flex item will not wrap below its longest word
   without this, and an email address is one long word. */
.account-method > span:last-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-method:last-child {
    border-bottom: none;
}

/* The GitHub mark is drawn in currentColor, which on this page is parchment. */
.account-method .provider-mark {
    color: var(--text);
}

.provider-mark-email {
    width: 18px;
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
}

.account-providers-compact {
    width: 100%;
    margin: 4px 0 0;
}

@media (max-width: 720px) {
    .account-page {
        padding: 88px 18px 80px;
    }

    .account-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-page-header h1 {
        font-size: 1.9rem;
    }
}

/* Pre-purchase terms line: the Consumer Contracts Regulations want the
   cancellation right reachable before the buyer leaves for someone else's
   checkout, and this page is the last one we control. */
.buy-terms {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.85;
    margin: 22px 0 0;
}

.buy-terms a {
    color: inherit;
    text-decoration: underline;
}

.buy-terms a:hover {
    color: var(--accent);
}

/* Preview watermark caption — the label that tells a free user the stamp is
   ours and not theirs. Pinned to the pane like the page-count chip (which owns
   the bottom-right corner), and shown by the same class the stamp itself uses,
   so the two can never disagree. Preview-only: the PDF is rendered server-side
   from the Markdown, so nothing here can reach it. */
.preview-stamp-note {
    display: none;
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    margin: 0;
    max-width: calc(100% - 28px);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b563a;
    background: rgba(253, 246, 227, 0.92);
    border: 1px solid rgba(120, 92, 52, 0.3);
    pointer-events: none;
}

#preview.show-watermark ~ .preview-stamp-note {
    display: block;
}

/* Free-tier note under each Download button. Hidden in the markup and shown
   only once the server's balance says the next PDF is stamped, so a customer
   holding credits never sees it flash by while that answer is in flight. */
.watermark-note {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

.watermark-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.watermark-note a:hover {
    color: var(--accent);
}

.watermark-note[hidden] {
    display: none;
}

/* The toolbar's action column is sized by the Download button. The note is a
   sentence, so it would widen the column and eat the controls beside it: zero
   width keeps it out of that measurement, and the minimum stretches it back to
   whatever the column ended up being. */
.toolbar-actions .watermark-note {
    width: 0;
    min-width: 100%;
}

/* The sticky bottom bar is one row of controls; the note takes a line of its
   own beneath them rather than squeezing the button. Wrapping stops the
   Download button shrinking to fit that row, which is how the three controls
   used to share it, so it is told it may shrink again. */
.converter-download-bar {
    flex-wrap: wrap;
    row-gap: 6px;
}

.converter-download-bar .btn-download-bottom {
    min-width: 0;
}

.converter-download-bar .watermark-note {
    flex: 0 0 100%;
    /* Last on screen, so the counter stays on the controls' row, while the
       markup keeps it next to the button it is about. */
    order: 1;
}

.credits-modal-watermark {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}