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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    overflow: auto;
    color: var(--ember-text, #eadfcf);
    background:
        radial-gradient(circle at 12% 8%, rgba(200, 155, 91, 0.14), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(127, 161, 194, 0.12), transparent 22%),
        linear-gradient(180deg, var(--ember-bg-top, #221914) 0%, var(--ember-bg, #15110f) 45%, var(--ember-bg-bottom, #120d0b) 100%);
    padding-bottom: 2rem;
}

:root {
    --page-padding-top: 10mm;       /* add some top padding */
    --page-padding-right: 15mm;
    --page-padding-bottom: 20mm;
    --page-padding-left: 10mm;      /* reduced left padding */
}

.editor-container {
    display: flex;
    height: 100vh;
    align-items: stretch;
}

.editor-pane {
    flex: 1;
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.editor-toolbar {
    display: block;
    margin: 0 0 1rem 0;
    padding: 0.6rem 2rem;
    min-height: 58px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#toolbar button,
#toolbar select {
    background: linear-gradient(180deg, var(--ember-surface-strong, #332923), var(--ember-surface, #2a221d));
    color: var(--ember-text, #eadfcf);
    border: 1px solid var(--ember-line-soft, #5a4a3d);
    padding: 0.72rem 1.32rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-height: 38px;
    min-width: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#clearFormatBtn {
    margin-left: auto;
    flex-shrink: 0;
}

/* Hide Quill SVG icons completely since we're using text labels */
#toolbar button svg,
#toolbar .ql-picker-label svg {
    display: none !important;
}

/* Replace icons with text labels for better readability */
#toolbar button {
    position: relative;
    pointer-events: auto !important;
}

#toolbar button::before {
    display: none !important; /* hide Quill default icon */
}

#toolbar button::after {
    content: attr(data-label);
    color: var(--ember-text, #eadfcf);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 0 0.08rem;
    pointer-events: none;
}

#toolbar button:hover,
#toolbar select:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ember-surface-strong, #332923) 75%, var(--ember-accent, #c89b5b) 25%), color-mix(in srgb, var(--ember-surface, #2a221d) 82%, var(--ember-accent, #c89b5b) 18%));
    border-color: var(--ember-accent, #c89b5b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

#toolbar button.ql-active {
    background: linear-gradient(180deg, var(--ember-accent, #c89b5b), var(--ember-accent-strong, #ddb778));
    color: #1e1612;
    border-color: var(--ember-accent, #c89b5b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-weight: 700;
    transform: translateY(-2px) scale(1.08);
    z-index: 1;
}

#toolbar button.ql-active::after {
    color: #1e1612 !important;
    font-size: 0.9rem;
}

#toolbar select {
    min-width: 140px;
    max-width: 220px;
    padding: 0.7rem 1rem;
    flex-shrink: 0;
}

/* Specific width for font selector to prevent overlap */
#toolbar .ql-font {
    min-width: 200px;
    max-width: 220px;
}

/* Make color and background pickers more visible with text labels */
#toolbar .ql-color,
#toolbar .ql-background,
#toolbar .ql-size {
    position: relative;
    min-width: 110px;
    flex-shrink: 0;
}

#toolbar .ql-color .ql-picker-label,
#toolbar .ql-background .ql-picker-label {
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    position: relative;
}

#toolbar .ql-color .ql-picker-label::before,
#toolbar .ql-background .ql-picker-label::before {
    content: '';
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ember-line-soft, #5a4a3d) 72%, #fff 28%);
    background: var(--preview-color, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
}

#toolbar .ql-color .ql-picker-label[data-state="auto"]::before {
    background: repeating-linear-gradient(135deg, transparent 0 2px, rgba(127, 161, 194, 0.32) 2px 4px);
}

#toolbar .ql-background .ql-picker-label[data-state="off"]::before {
    background:
        linear-gradient(45deg, transparent 43%, #b56d61 44%, #b56d61 56%, transparent 57%),
        repeating-linear-gradient(135deg, transparent 0 2px, rgba(181, 109, 97, 0.35) 2px 4px);
}

/* Add text labels */
#toolbar .ql-color .ql-picker-label::after {
    content: none !important;
}

#toolbar .ql-background .ql-picker-label::after {
    content: none !important;
}

/* Align selector styling */
/* Specific width for align selector to prevent overlap */
#toolbar .ql-align {
    position: relative;
    min-width: 132px;
    max-width: 148px;
    flex-shrink: 0;
}

.ql-snow #toolbar .ql-align,
.ql-snow.ql-toolbar #toolbar .ql-align {
    width: auto !important;
}

/* Ensure align picker label is visible */
#toolbar .ql-align .ql-picker-label {
    width: 100%;
    padding: 0 1rem 0 0.7rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    position: relative;
}

#toolbar .ql-align .ql-picker-label::after {
    content: none !important;
}

#toolbar .ql-align .ql-picker-label.is-active,
#toolbar .ql-align .ql-picker-label.ql-active,
#toolbar .ql-align .ql-picker-label:hover {
    color: #ffffff !important;
}

#toolbar .ql-color .ql-picker-label,
#toolbar .ql-background .ql-picker-label {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

#toolbar .ql-align .ql-picker-label::before {
    display: none !important;
    content: none !important;
}

/* Ensure dropdown is visible when expanded */
#toolbar .ql-align.ql-expanded .ql-picker-options {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#toolbar .ql-align .ql-picker-options {
    background: var(--ember-surface, #2a221d) !important;
    border: 1px solid var(--ember-line-soft, #5a4a3d) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
    padding: 0.35rem 0.25rem !important;
    z-index: 2001 !important;
    min-width: 140px;
}

#toolbar .ql-align .ql-picker-item {
    color: var(--ember-text, #eadfcf) !important;
    padding: 0.35rem 0.6rem !important;
    font-weight: 600;
    position: relative;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left;
    padding-right: 1.4rem !important;
}

#toolbar .ql-align .ql-picker-item::before {
    display: none !important;
    content: none !important;
}

#toolbar .ql-align .ql-picker-item:hover,
#toolbar .ql-align .ql-picker-item.ql-selected {
    color: #1e1612 !important;
    background: var(--ember-accent-strong, #ddb778) !important;
}

.ql-snow #toolbar .ql-align .ql-picker-item,
.ql-snow.ql-toolbar #toolbar .ql-align .ql-picker-item {
    width: 100% !important;
    padding-right: 1.4rem !important;
}

.editor-wrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#editor {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    position: relative;
    padding: 0;
    background: transparent;
    color: #2c1810;
    border: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
    box-sizing: border-box;
}

#editorMarkers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    z-index: 3;
}

.page-break-marker {
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 2px dashed rgba(60, 45, 25, 0.35);
}

.page-break-marker::after {
    content: 'Page ' attr(data-page);
    position: absolute;
    right: 0.6rem;
    top: -0.7rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(60, 45, 25, 0.75);
    background: rgba(244, 231, 215, 0.9);
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
}

#editor .ql-editor {
    padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left) !important;
    min-height: 297mm;
    font-family: 'Bookman Old Style', 'Book Antiqua', Palatino, serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

#editor .ql-editor.ql-blank::before {
    color: #2c1810;
    opacity: 1;
    font-style: normal;
    left: 0;
}

#editor .ql-container {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

/* Keep editor/preview content color tied to the active template.
   This overrides global paragraph color rules from ember-theme.css. */
#editor .ql-editor p,
#editor .ql-editor li,
#editor .ql-editor blockquote,
#editor .ql-editor h1,
#editor .ql-editor h2,
#editor .ql-editor h3,
#editor .ql-editor code,
#editor .ql-editor strong,
#editor .ql-editor em,
.page .page-content p,
.page .page-content li,
.page .page-content blockquote,
.page .page-content h1,
.page .page-content h2,
.page .page-content h3,
.page .page-content code,
.page .page-content strong,
.page .page-content em {
    color: inherit !important;
}

/* Quill toolbar customization */
.ql-snow .ql-stroke {
    stroke: #ffffff;
    stroke-width: 2;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #ffffff;
}

.ql-snow.ql-toolbar {
    background: transparent;
    border: none;
    padding: 0;
}

.ql-toolbar.ql-snow {
    border: none;
}

.ql-snow .ql-toolbar button,
.ql-snow .ql-toolbar select {
    background: transparent;
    border: none;
    padding: 0;
    min-height: auto;
}

/* Make picker arrows and small glyphs high contrast */
.ql-picker .ql-picker-label::before {
    color: #ffffff !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #ffffff !important;
}

/* Quill content classes applied to preview */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }

.ql-align-center,
#editor .ql-align-center,
.page-content .ql-align-center,
.parchment .ql-align-center { 
    text-align: center !important; 
}

.ql-align-right,
#editor .ql-align-right,
.page-content .ql-align-right,
.parchment .ql-align-right { 
    text-align: right !important; 
}

.ql-align-justify,
#editor .ql-align-justify,
.page-content .ql-align-justify,
.parchment .ql-align-justify { 
    text-align: justify !important; 
}

.ql-align-left,
#editor .ql-align-left,
.page-content .ql-align-left,
.parchment .ql-align-left { 
    text-align: left !important; 
}

.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }

/* Improve visibility of disabled toolbar icons */
.ql-snow .ql-toolbar button:disabled {
    opacity: 0.7;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.25));
}

.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: #999;
    stroke-width: 2.5;
}

.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: #999;
}

.ql-container.ql-snow {
    border: none;
}

/* Quill picker (color, size) customization */
.ql-picker {
    color: var(--ember-text, #eadfcf) !important;
}

.ql-picker-label {
    color: var(--ember-text, #eadfcf);
    font-weight: 600;
}

.ql-snow .ql-picker-label {
    color: var(--ember-text, #eadfcf);
    font-weight: 600;
}

.ql-picker-options {
    background: var(--ember-surface, #2a221d) !important;
    border: 1px solid var(--ember-line-soft, #5a4a3d) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    padding: 0.35rem 0.25rem;
}

.ql-picker-item {
    color: var(--ember-text, #eadfcf) !important;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
}

#toolbar .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-item:hover,
#toolbar .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-item.ql-selected,
#toolbar .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-item.ql-selected:hover {
    color: #1e1612 !important;
    background: var(--ember-accent-strong, #ddb778) !important;
}

/* Keep swatch colors true to selected value; indicate selection via outline only. */
#toolbar .ql-color .ql-picker-item,
#toolbar .ql-background .ql-picker-item {
    border: 1px solid rgba(255, 255, 255, 0.16);
}

#toolbar .ql-color .ql-picker-item:hover,
#toolbar .ql-background .ql-picker-item:hover {
    filter: brightness(1.08);
}

#toolbar .ql-color .ql-picker-item.ql-selected,
#toolbar .ql-background .ql-picker-item.ql-selected {
    outline: 2px solid var(--ember-accent-strong, #ddb778);
    outline-offset: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.ql-picker.ql-expanded .ql-picker-options {
    z-index: 2000;
}

#editor img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 1rem 1rem 0;
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

#editor img.selected {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Image resize handles */
.resize-handle {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #4a90e2;
    border: 2px solid white;
    border-radius: 50%;
    z-index: 1000;
    cursor: pointer;
    display: none;
}

.resize-handle.show {
    display: block;
}

.resize-handle.nw { cursor: nw-resize; }
.resize-handle.ne { cursor: ne-resize; }
.resize-handle.sw { cursor: sw-resize; }
.resize-handle.se { cursor: se-resize; }
.resize-handle.n { cursor: n-resize; }
.resize-handle.s { cursor: s-resize; }
.resize-handle.e { cursor: e-resize; }
.resize-handle.w { cursor: w-resize; }

.preview-pane {
    flex: 1;
    background: linear-gradient(180deg, var(--ember-surface-strong, #332923), var(--ember-surface, #2a221d));
    overflow-y: auto; /* allow vertical scrolling for multiple pages */
    scrollbar-width: none; /* Firefox hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge hide scrollbar */
    padding: 0;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.preview-pane::-webkit-scrollbar {
    display: none; /* WebKit hide scrollbar */
}

.toolbar {
    width: min(96vw, 1500px);
    padding: 0.6rem 1.2rem;
    min-height: 58px;
    border: 1px solid var(--ember-line, #4b3c31);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ember-surface-strong, #332923) 84%, transparent), color-mix(in srgb, var(--ember-surface, #2a221d) 90%, transparent));
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.toolbar #toolbar {
    flex: 1 1 100%;
}

.toolbar-actions {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

#toolbar .ql-font,
#toolbar .ql-header {
    border-bottom: 2px solid transparent;
}

#toolbar .ql-header[data-preview="h1"] {
    font-size: 0.95rem;
    font-weight: 700;
    border-bottom-color: var(--ember-accent-strong, #ddb778);
}

#toolbar .ql-header[data-preview="h2"] {
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom-color: color-mix(in srgb, var(--ember-accent-strong, #ddb778) 72%, transparent);
}

#toolbar .ql-header[data-preview="h3"] {
    font-size: 0.86rem;
    font-weight: 700;
    border-bottom-color: color-mix(in srgb, var(--ember-accent-strong, #ddb778) 55%, transparent);
}

#toolbar .ql-header[data-preview="normal"] {
    border-bottom-color: transparent;
}

#toolbar .ql-size[data-preview="small"] {
    font-size: 0.82rem;
    border-bottom: 2px solid color-mix(in srgb, var(--ember-accent-strong, #ddb778) 35%, transparent);
}

#toolbar .ql-size[data-preview="normal"] {
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
}

#toolbar .ql-size[data-preview="large"] {
    font-size: 0.96rem;
    border-bottom: 2px solid color-mix(in srgb, var(--ember-accent-strong, #ddb778) 62%, transparent);
}

#toolbar .ql-size[data-preview="huge"] {
    font-size: 1rem;
    border-bottom: 2px solid var(--ember-accent-strong, #ddb778);
}

#toolbar .ql-picker-label.is-active,
#toolbar .ql-picker-label.ql-active,
#toolbar select.has-value {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ember-surface-strong, #332923) 62%, var(--ember-accent, #c89b5b) 38%), color-mix(in srgb, var(--ember-surface, #2a221d) 70%, var(--ember-accent, #c89b5b) 30%));
    color: #1e1612 !important;
    border-color: var(--ember-accent, #c89b5b) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember-accent-strong, #ddb778) 55%, transparent) inset;
}

#toolbar .ql-background .ql-clear-highlight-option {
    min-width: 78px;
    height: 18px;
    margin: 2px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.66rem;
    line-height: 1;
    color: #4b2621;
    border: 1px solid #8f3f36;
    background: linear-gradient(180deg, #fff3f2, #f2d6d3);
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}

#toolbar .ql-background .ql-clear-highlight-option:hover {
    filter: brightness(0.95);
}

#toolbar .ql-background .ql-picker-options .ql-picker-item {
    width: 18px;
    height: 18px;
    margin: 2px;
    padding: 0 !important;
    box-sizing: border-box;
}

#toolbar .ql-color .ql-picker-options .ql-picker-item {
    width: 18px;
    height: 18px;
    margin: 2px;
    padding: 0 !important;
    box-sizing: border-box;
}

.template-select {
    background: linear-gradient(180deg, var(--ember-surface-strong, #332923), var(--ember-surface, #2a221d));
    color: var(--ember-text, #eadfcf);
    border: 1px solid var(--ember-line-soft, #5a4a3d);
    padding: 0.62rem 1.2rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-height: 38px;
}

.template-select:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ember-surface-strong, #332923) 75%, var(--ember-accent, #c89b5b) 25%), color-mix(in srgb, var(--ember-surface, #2a221d) 82%, var(--ember-accent, #c89b5b) 18%));
    border-color: var(--ember-accent, #c89b5b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.template-select:focus,
.template-select:active {
    background: linear-gradient(180deg, var(--ember-accent, #c89b5b), var(--ember-accent-strong, #ddb778));
    border-color: var(--ember-accent, #c89b5b);
    color: #1e1612;
    box-shadow: 0 0 0 2px rgba(200, 155, 91, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    outline: none;
}

.print-btn {
    background: linear-gradient(180deg, var(--ember-accent, #c89b5b), var(--ember-accent-strong, #ddb778));
    color: #1e1612;
    border: 1px solid var(--ember-accent, #c89b5b);
    padding: 0.62rem 1.3rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.02em;
    transition: all 0.2s;
}

/* Light theme overrides for toolbar readability */
body.light .toolbar,
body.theme-light .toolbar {
    background: linear-gradient(180deg, rgba(255, 249, 242, 0.96), rgba(245, 235, 222, 0.92));
    border: 1px solid #cbb89f;
}

body.light #toolbar button,
body.theme-light #toolbar button,
body.light #toolbar select,
body.theme-light #toolbar select,
body.light .template-select,
body.theme-light .template-select {
    background: linear-gradient(180deg, #f5ebde, #ead9c4);
    color: #3a2b20;
    border-color: #bca489;
    box-shadow: 0 2px 8px rgba(70, 50, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.light #toolbar button::after,
body.theme-light #toolbar button::after {
    color: #2f241b !important;
}

body.light #toolbar button.ql-active::after,
body.theme-light #toolbar button.ql-active::after {
    color: #fff6ee !important;
}

body.light #toolbar .ql-background .ql-clear-highlight-option,
body.theme-light #toolbar .ql-background .ql-clear-highlight-option {
    color: #3c201c;
    border-color: #8f3f36;
    background: linear-gradient(180deg, #fff6f5, #f2d6d3);
}

body.light #toolbar .ql-color .ql-picker-label::after,
body.theme-light #toolbar .ql-color .ql-picker-label::after,
body.light #toolbar .ql-background .ql-picker-label::after,
body.theme-light #toolbar .ql-background .ql-picker-label::after,
body.light #toolbar .ql-align .ql-picker-label,
body.theme-light #toolbar .ql-align .ql-picker-label,
body.light .ql-picker,
body.theme-light .ql-picker,
body.light .ql-picker-label,
body.theme-light .ql-picker-label,
body.light .ql-snow .ql-picker-label,
body.theme-light .ql-snow .ql-picker-label,
body.light .ql-picker .ql-picker-label::before,
body.theme-light .ql-picker .ql-picker-label::before,
body.light .ql-snow .ql-picker.ql-expanded .ql-picker-label,
body.theme-light .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #3a2b20 !important;
}

body.light #toolbar .ql-align .ql-picker-label,
body.theme-light #toolbar .ql-align .ql-picker-label,
body.light #toolbar .ql-align .ql-picker-label.is-active,
body.theme-light #toolbar .ql-align .ql-picker-label.is-active,
body.light #toolbar .ql-align .ql-picker-label.ql-active,
body.theme-light #toolbar .ql-align .ql-picker-label.ql-active,
body.light #toolbar .ql-align .ql-picker-label:hover,
body.theme-light #toolbar .ql-align .ql-picker-label:hover {
    color: #ffffff !important;
}

body.light #toolbar .ql-picker-label.is-active,
body.theme-light #toolbar .ql-picker-label.ql-active,
body.theme-light #toolbar .ql-picker-label.is-active,
body.light #toolbar select.has-value,
body.theme-light #toolbar select.has-value {
    background: linear-gradient(180deg, #b2793f, #8f5e2a);
    color: #fff6ee !important;
    border-color: #8a5823 !important;
    box-shadow: 0 0 0 1px rgba(138, 88, 35, 0.35) inset;
}

body.light .print-btn,
body.theme-light .print-btn {
    color: #fff6ee;
}

body.light .ql-picker-options,
body.theme-light .ql-picker-options,
body.light #toolbar .ql-align .ql-picker-options,
body.theme-light #toolbar .ql-align .ql-picker-options {
    background: #fff8f0 !important;
    border-color: #bca489 !important;
}

body.light .ql-picker-item,
body.theme-light .ql-picker-item,
body.light #toolbar .ql-align .ql-picker-item,
body.theme-light #toolbar .ql-align .ql-picker-item,
body.light #toolbar .ql-align .ql-picker-item::before,
body.theme-light #toolbar .ql-align .ql-picker-item::before {
    color: #3a2b20 !important;
}

body.light .ql-picker-item:hover,
body.theme-light .ql-picker-item:hover,
body.light .ql-picker-item.ql-selected,
body.theme-light .ql-picker-item.ql-selected,
body.light #toolbar .ql-align .ql-picker-item:hover,
body.theme-light #toolbar .ql-align .ql-picker-item:hover,
body.light #toolbar .ql-align .ql-picker-item.ql-selected,
body.theme-light #toolbar .ql-align .ql-picker-item.ql-selected {
    background: #dec39f !important;
    color: #2a1d14 !important;
}

/* Do not recolor light-theme swatch cells when selected; keep true color and outline only. */
body.light #toolbar .ql-color .ql-picker-item.ql-selected,
body.theme-light #toolbar .ql-color .ql-picker-item.ql-selected,
body.light #toolbar .ql-background .ql-picker-item.ql-selected,
body.theme-light #toolbar .ql-background .ql-picker-item.ql-selected {
    background: unset !important;
    color: inherit !important;
    outline: 2px solid #8a5823;
    outline-offset: 1px;
}

.print-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.print-btn:active {
    transform: translateY(0);
}

/* ===== Paginated Preview (A4 pages) ===== */
#preview.pages {
    width: 210mm;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12mm; /* visible separation between pages */
    margin: 0;
    padding: 0 0 12mm 0;
}

.print-pages {
    display: none;
}

.page.parchment {
    width: 210mm;
    height: 297mm; /* A4 height */
    margin: 0;
    background:
        linear-gradient(to right, transparent 0%, rgba(139, 115, 85, 0.3) 5%, transparent 10%, transparent 90%, rgba(139, 115, 85, 0.3) 95%, transparent 100%),
        url('parchment-texture.svg'),
        linear-gradient(to bottom, #f4e7d7 0%, #f0dcc4 50%, #f4e7d7 100%);
    background-size: 100% 100%, cover, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
    background-position: center, center, center;
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.6),
        inset 0 0 100px rgba(101, 67, 33, 0.1);
    position: relative;
    color: #2c1810;
    line-height: 1.7;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden; /* JS controls pagination */
}

/* Sci-Fi template */
.page.parchment.scifi,
#editor .ql-editor.parchment.scifi {
    background:
        url('parchment-texture-scifi.svg'),
        linear-gradient(135deg, #0f1419 0%, #1a1a2e 50%, #0f3460 100%);
    background-size: cover, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 0 30px rgba(0, 217, 255, 0.4),
        inset 0 0 100px rgba(15, 52, 96, 0.3);
    color: #00ffff;
}

/* Sci-Fi Clean template */
.page.parchment.scifi-clean,
#editor .ql-editor.parchment.scifi-clean {
    background:
        url('parchment-texture-scifi-clean.svg'),
        linear-gradient(135deg, #0a0e27 0%, #1a2a4e 100%);
    background-size: cover, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 80px rgba(10, 14, 39, 0.4);
    color: #00ff88;
}

/* Cyberpunk Clean template */
.page.parchment.cyberpunk-clean,
#editor .ql-editor.parchment.cyberpunk-clean {
    background:
        url('parchment-texture-cyberpunk-clean.svg'),
        linear-gradient(135deg, #0d0221 0%, #14213d 100%);
    background-size: cover, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 0 25px rgba(255, 0, 110, 0.25),
        inset 0 0 100px rgba(13, 2, 33, 0.5);
    color: #ff006e;
}

/* Cyberpunk Rich template */
.page.parchment.cyberpunk-rich,
#editor .ql-editor.parchment.cyberpunk-rich {
    background:
        url('parchment-texture-cyberpunk-rich.svg'),
        linear-gradient(135deg, #0a0014 0%, #2d1b4e 50%, #0a0014 100%);
    background-size: cover, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 0 30px rgba(255, 0, 110, 0.4),
        0 0 60px rgba(0, 245, 255, 0.2),
        inset 0 0 100px rgba(10, 0, 20, 0.6);
    color: #e0e0ff;
}

/* Egyptian Papyrus template */
.page.parchment.egyptian,
#editor .ql-editor.parchment.egyptian {
    background:
        linear-gradient(90deg, rgba(218, 165, 32, 0.4) 0%, transparent 5%, transparent 95%, rgba(218, 165, 32, 0.4) 100%),
        linear-gradient(0deg, rgba(218, 165, 32, 0.3) 0%, transparent 8%, transparent 92%, rgba(218, 165, 32, 0.3) 100%),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(139, 115, 60, 0.08) 3px, rgba(139, 115, 60, 0.08) 5px),
        linear-gradient(to bottom, #e8d4a0 0%, #f5deb3 20%, #daa520 50%, #f5deb3 80%, #e8d4a0 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-position: center, center, center, center;
    box-shadow:
        0 0 50px rgba(218, 165, 32, 0.6),
        inset 0 0 100px rgba(139, 115, 60, 0.2),
        inset 0 10px 30px rgba(218, 165, 32, 0.3),
        inset 0 -10px 30px rgba(184, 134, 11, 0.3);
    border-left: 5px solid #8b6914;
    border-right: 5px solid #8b6914;
    border-top: 8px solid #daa520;
    border-bottom: 8px solid #daa520;
    color: #000000;
    font-family: 'Times New Roman', serif;
    position: relative;
}

.page.parchment.egyptian::before,
#editor .ql-editor.parchment.egyptian::before {
    content: '𓂀 𓆣 𓅓 𓊖 𓇯';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #8b6914;
    letter-spacing: 15px;
    opacity: 0.6;
}

.page.parchment.egyptian::after,
#editor .ql-editor.parchment.egyptian::after {
    content: '𓋹 𓊹 𓆙 𓃭 𓅱';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #8b6914;
    letter-spacing: 15px;
    opacity: 0.6;
}

/* Oriental Scroll template */
.page.parchment.oriental,
#editor .ql-editor.parchment.oriental {
    background:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%),
        linear-gradient(to bottom, #fef9e7 0%, #f9f3dd 50%, #fef9e7 100%);
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 0 30px rgba(101, 67, 33, 0.4),
        inset 0 0 60px rgba(139, 115, 85, 0.1);
    border-top: 4px solid #8b4513;
    border-bottom: 4px solid #8b4513;
    color: #000000;
    font-family: 'Georgia', serif;
}

/* Stone Tablet template */
.page.parchment.stone,
#editor .ql-editor.parchment.stone {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(100, 100, 100, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(80, 80, 80, 0.2) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 50%, rgba(90, 90, 90, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #8b8d8e 0%, #6d7073 25%, #545659 50%, #6d7073 75%, #8b8d8e 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, center, center, center;
    box-shadow:
        0 0 50px rgba(0, 0, 0, 0.8),
        inset 0 0 80px rgba(0, 0, 0, 0.4),
        inset -8px -8px 30px rgba(0, 0, 0, 0.5),
        inset 8px 8px 30px rgba(150, 150, 150, 0.3);
    border: 6px solid #3d3d3d;
    color: #000000;
    font-family: 'Times New Roman', serif;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

/* Steampunk Brass template */
.page.parchment.steampunk,
#editor .ql-editor.parchment.steampunk {
    background:
        radial-gradient(circle at 20% 30%, rgba(184, 134, 11, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(205, 127, 50, 0.2) 0%, transparent 25%),
        linear-gradient(135deg, #cd7f32 0%, #b8860b 25%, #daa520 50%, #b8860b 75%, #cd7f32 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, center;
    box-shadow:
        0 0 40px rgba(184, 134, 11, 0.6),
        inset 0 0 80px rgba(139, 90, 0, 0.3),
        inset 0 0 40px rgba(255, 215, 0, 0.1);
    border: 3px solid #8b5a00;
    color: #000000;
    font-family: 'Georgia', serif;
}

.page .page-content {
    height: 100%;
    padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
    box-sizing: border-box;
    font-family: 'Bookman Old Style', 'Book Antiqua', Palatino, serif;
    overflow: visible;
}

/* Override Quill defaults to prevent scrollbars inside pages */
.page .page-content.ql-editor {
    overflow: visible !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page .page-content.ql-editor::-webkit-scrollbar {
    display: none;
}

.parchment.ql-editor {
    width: 210mm;
    flex: 1;
    height: auto;
    min-height: 297mm;
    margin: 0;
    padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left) !important;
    box-sizing: border-box;
    border-left: 3px solid #8b6914;
    border-right: 3px solid #8b6914;
    border-top: 3px solid #8b6914;
    border-bottom: 3px solid #8b6914;
    background: 
        linear-gradient(to right, transparent 0%, rgba(139, 115, 85, 0.3) 5%, transparent 10%, transparent 90%, rgba(139, 115, 85, 0.3) 95%, transparent 100%),
        url('parchment-texture.svg'),
        linear-gradient(to bottom, #f4e7d7 0%, #f0dcc4 50%, #f4e7d7 100%);
    background-size: 100% 297mm, 100% 297mm, 100% 297mm;
    background-repeat: repeat-y, repeat-y, repeat-y;
    background-position: top center, top center, top center;
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.6),
        inset 0 0 100px rgba(101, 67, 33, 0.1);
    position: relative;
    font-family: 'Bookman Old Style', 'Book Antiqua', Palatino, serif;
    color: #2c1810;
    line-height: 1.7;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible; /* prevent inner scrollbars */
}

.parchment::before,
.parchment::after {
    display: none;
}

.parchment h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 0.5rem;
}

.parchment h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.parchment h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #6b3410;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.parchment p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.parchment strong {
    font-weight: 700;
    color: #4a2610;
}

.parchment em {
    font-style: italic;
    color: #5c3820;
}

.parchment ul, .parchment ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.parchment li {
    margin-bottom: 0.5rem;
}

.parchment blockquote {
    border-left: 4px solid #8b4513;
    margin: 1.5rem 0;
    padding-left: 1rem;
    font-style: italic;
    color: #5c3820;
    background: rgba(139, 69, 19, 0.05);
}

.parchment hr {
    border: none;
    border-top: 2px solid #8b7355;
    margin: 2rem 0;
    opacity: 0.6;
}

.parchment a {
    color: #5c2e10;
    text-decoration: underline;
}

.parchment pre {
    background: rgba(101, 67, 33, 0.1);
    border: 1px solid #a0826d;
    border-radius: 3px;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.parchment code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #4a2610;
}

.parchment img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 1rem 1rem 0;
    vertical-align: top;
    border: 2px solid #8b7355;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

/* Image alignment helpers to allow text wrapping */
#editor img.ql-align-center,
.parchment img.ql-align-center {
    display: block;
    margin: 0 auto 1rem auto;
    float: none;
}

#editor img.ql-align-right,
.parchment img.ql-align-right {
    float: right;
    margin: 0 0 1rem 1rem;
}

#editor img.ql-align-left,
.parchment img.ql-align-left {
    float: left;
    margin: 0 1rem 1rem 0;
}

/* ===== Custom Font Families ===== */
/* Default: Book Antiqua */
#editor .ql-editor,
.page .page-content,
.ql-font-bookman,
.ql-font-bookman * {
    font-family: 'Bookman Old Style', 'Book Antiqua', Palatino, serif !important;
}

/* Fantasy Fonts */
.ql-font-cinzel,
.ql-font-cinzel * {
    font-family: 'Cinzel', serif !important;
}

.ql-font-medievalsharp,
.ql-font-medievalsharp * {
    font-family: 'MedievalSharp', cursive !important;
}

.ql-font-unifraktur,
.ql-font-unifraktur * {
    font-family: 'UnifrakturMaguntia', cursive !important;
}

.ql-font-imfell,
.ql-font-imfell * {
    font-family: 'IM Fell English', serif !important;
}

.ql-font-almendra,
.ql-font-almendra * {
    font-family: 'Almendra', serif !important;
}

/* Modern Fonts */
.ql-font-roboto,
.ql-font-roboto * {
    font-family: 'Roboto', sans-serif !important;
}

.ql-font-inter,
.ql-font-inter * {
    font-family: 'Inter', sans-serif !important;
}

.ql-font-montserrat,
.ql-font-montserrat * {
    font-family: 'Montserrat', sans-serif !important;
}

/* Sci-Fi Fonts */
.ql-font-orbitron,
.ql-font-orbitron * {
    font-family: 'Orbitron', sans-serif !important;
}

.ql-font-exo,
.ql-font-exo * {
    font-family: 'Exo 2', sans-serif !important;
}

.ql-font-rajdhani,
.ql-font-rajdhani * {
    font-family: 'Rajdhani', sans-serif !important;
}

/* Font picker preview: render each menu item in its own family. */
#toolbar .ql-font .ql-picker-item[data-value="bookman"],
#toolbar .ql-font .ql-picker-label[data-value="bookman"],
#toolbar .ql-font .ql-picker-item:not([data-value]),
#toolbar .ql-font .ql-picker-label:not([data-value]) {
    font-family: 'Bookman Old Style', 'Book Antiqua', Palatino, serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="cinzel"],
#toolbar .ql-font .ql-picker-label[data-value="cinzel"] {
    font-family: 'Cinzel', serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="medievalsharp"],
#toolbar .ql-font .ql-picker-label[data-value="medievalsharp"] {
    font-family: 'MedievalSharp', cursive !important;
}

#toolbar .ql-font .ql-picker-item[data-value="unifraktur"],
#toolbar .ql-font .ql-picker-label[data-value="unifraktur"] {
    font-family: 'UnifrakturMaguntia', cursive !important;
}

#toolbar .ql-font .ql-picker-item[data-value="imfell"],
#toolbar .ql-font .ql-picker-label[data-value="imfell"] {
    font-family: 'IM Fell English', serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="almendra"],
#toolbar .ql-font .ql-picker-label[data-value="almendra"] {
    font-family: 'Almendra', serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="roboto"],
#toolbar .ql-font .ql-picker-label[data-value="roboto"] {
    font-family: 'Roboto', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="inter"],
#toolbar .ql-font .ql-picker-label[data-value="inter"] {
    font-family: 'Inter', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="montserrat"],
#toolbar .ql-font .ql-picker-label[data-value="montserrat"] {
    font-family: 'Montserrat', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="orbitron"],
#toolbar .ql-font .ql-picker-label[data-value="orbitron"] {
    font-family: 'Orbitron', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="exo"],
#toolbar .ql-font .ql-picker-label[data-value="exo"] {
    font-family: 'Exo 2', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item[data-value="rajdhani"],
#toolbar .ql-font .ql-picker-label[data-value="rajdhani"] {
    font-family: 'Rajdhani', sans-serif !important;
}

#toolbar .ql-font .ql-picker-item,
#toolbar .ql-font .ql-picker-label {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.ql-snow #toolbar .ql-font .ql-picker-item::before,
.ql-snow #toolbar .ql-font .ql-picker-label::before,
.ql-snow.ql-toolbar #toolbar .ql-font .ql-picker-item::before,
.ql-snow.ql-toolbar #toolbar .ql-font .ql-picker-label::before {
    content: none !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item::before,
.ql-snow .ql-picker.ql-font .ql-picker-label::before {
    content: none !important;
}

#toolbar .ql-font .font-label-main {
    font: inherit;
}

#toolbar .ql-font .font-label-meta {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
}

/* (removed unused modal styles) */

/* Mobile responsive styles */
@media (max-width: 768px) {
    body {
        padding-bottom: 0;
        height: auto;
    }

    .editor-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .editor-pane {
        flex: none;
        height: 60vh;
        min-height: 400px;
        overflow: hidden;
    }

    .editor-toolbar {
        padding: 0.45rem 0.6rem; /* breathing room from borders */
        min-height: auto;
        max-height: none;
        overflow: visible;
        margin: 0;
        flex-shrink: 0;
        background: #1a1a1a;
    }

    #toolbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.34rem;
        width: 100%;
        align-items: stretch;
    }

    /* Full-width primary selector */
    #toolbar .ql-font {
        grid-column: 1 / -1;
    }

    #toolbar .ql-size {
        grid-column: span 2;
    }

    #toolbar .ql-align {
        grid-column: span 2;
    }

    #toolbar .ql-color,
    #toolbar .ql-background {
        grid-column: span 2;
    }

    #clearFormatBtn {
        grid-column: span 2;
        margin-left: 0;
    }

    #toolbar button,
    #toolbar select {
        padding: 0.35rem 0.34rem;
        font-size: 0.68rem;
        min-height: 38px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 7px;
        line-height: 1.05;
    }

    #toolbar button::after {
        font-size: 0.66rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
    }

    /* Shorter labels for mobile */
    #toolbar button.ql-bold::after { content: 'B'; }
    #toolbar button.ql-italic::after { content: 'I'; }
    #toolbar button.ql-underline::after { content: 'U'; }
    #toolbar button.ql-strike::after { content: 'S'; }
    #toolbar button.ql-code-block::after { content: '<>'; }
    #toolbar button.ql-blockquote::after { content: '❝❞'; }
    #toolbar button.ql-list[value="ordered"]::after { content: '1.'; }
    #toolbar button.ql-list[value="bullet"]::after { content: '•'; }
    #toolbar button.ql-link::after { content: '🔗'; }
    #toolbar button.ql-image::after { content: '🖼'; }

    #toolbar select {
        min-width: 0;
        max-width: none;
        font-size: 0.68rem;
        padding: 0.34rem 0.3rem;
        text-align: center;
        text-align-last: center;
    }

    #toolbar .ql-color .ql-picker-label::after {
        content: none !important;
        font-size: 0.66rem;
        font-weight: 700;
        white-space: nowrap;
        text-align: center;
    }

    #toolbar .ql-background .ql-picker-label::after {
        content: none !important;
        font-size: 0.66rem;
        font-weight: 700;
        white-space: nowrap;
        text-align: center;
    }

    #toolbar .ql-color .ql-picker-label,
    #toolbar .ql-background .ql-picker-label,
    #toolbar .ql-align .ql-picker-label {
        font-size: 0.66rem;
        color: #ffffff !important;
        width: 100%;
        justify-content: center;
    }

    #toolbar .ql-color .ql-picker-label::before,
    #toolbar .ql-background .ql-picker-label::before,
    #toolbar .ql-align .ql-picker-label::before {
        display: none;
    }

    /* Ensure dropdowns fit text without overflow */
    #toolbar .ql-color .ql-picker-options,
    #toolbar .ql-background .ql-picker-options {
        min-width: 140px;
        max-width: 200px;
    }

    /* Make picker labels more compact */
    .ql-picker-label {
        padding: 0 0.28rem !important;
    }

    .editor-wrapper {
        justify-content: flex-start;
        flex: 1;
        overflow: hidden;
    }

    #editor {
        width: 100%;
        max-width: 100%;
        min-height: 297mm;
        overflow-y: auto;
    }

    #editor .ql-editor {
        padding: 0.75rem !important;
        font-size: 0.95rem;
        min-height: 297mm;
    }

    .preview-pane {
        flex: 1;
        height: auto;
        min-height: 100vh;
        padding: 0.5rem;
        overflow-y: auto;
    }

    .toolbar {
        width: 100%;
        padding: 0.5rem;
        min-height: auto;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        align-items: stretch;
    }

    .template-select {
        width: 100%;
        min-width: 0;
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        min-height: 38px;
    }

    .print-btn {
        width: 100%;
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
        min-height: 38px;
        white-space: normal;
    }

    #preview.pages {
        width: 100%;
        max-width: 100%;
        gap: 1rem;
        padding: 0 0 1rem 0;
    }

    .page.parchment {
        width: 100%;
        height: 297mm;
        border: 2px solid #8b6914;
    }

    .page .page-content {
        padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
    }

    .parchment.ql-editor {
        width: 100%;
        border: 2px solid #8b6914;
        padding: 1rem !important;
    }

    .parchment h1 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .parchment h2 {
        font-size: 1.4rem;
        margin-top: 1.5rem;
        margin-bottom: 0.6rem;
    }

    .parchment h3 {
        font-size: 1.2rem;
        margin-top: 1rem;
        margin-bottom: 0.4rem;
    }

    .parchment p {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .parchment ul, .parchment ol {
        margin-left: 1.5rem;
    }

    /* Make images fully responsive on mobile */
    #editor img,
    .parchment img {
        max-width: 100%;
        margin: 0.5rem 0;
        float: none !important;
    }

    /* Ensure picker dropdowns are visible and scrollable */
    .ql-picker-options {
        max-height: 200px;
        overflow-y: auto;
        font-size: 0.75rem !important;
    }

    .ql-picker-item {
        padding: 0.4rem 0.5rem !important;
    }
}

@media (max-width: 480px) {
    #toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #toolbar .ql-size,
    #toolbar .ql-align,
    #toolbar .ql-color,
    #toolbar .ql-background,
    #clearFormatBtn {
        grid-column: span 3;
    }

    .toolbar-actions {
        grid-template-columns: 1fr;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .editor-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .editor-pane {
        flex: none;
        height: 50vh;
        min-height: 400px;
    }

    .preview-pane {
        flex: none;
        height: 50vh;
        min-height: 400px;
    }

    #editor {
        width: 100%;
        max-width: 210mm;
    }

    #preview.pages {
        width: 100%;
        max-width: 210mm;
    }

    .page.parchment {
        width: 100%;
        max-width: 210mm;
        height: 297mm;
    }

    .toolbar {
        width: 100%;
        max-width: min(100%, 1100px);
    }

    .editor-toolbar {
        padding: 0.6rem 1rem;
    }

    #toolbar button,
    #toolbar select {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Print only the generated preview pages. */
    body > *:not(.editor-container) {
        display: none !important;
    }

    .editor-container > *:not(.preview-pane) {
        display: none !important;
    }

    .preview-pane > *:not(#printPreview) {
        display: none !important;
    }

    .editor-pane,
    .toolbar {
        display: none !important;
    }

    .editor-container {
        display: block;
    }

    .preview-pane {
        background: white;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible;
        width: 210mm;
    }

    #editor {
        display: none !important;
    }

    #editorMarkers {
        display: none !important;
    }

    #printPreview.pages {
        width: 210mm;
        margin: 0;
        padding: 0 !important;
        gap: 0 !important;
        display: block !important;
        position: static;
    }

    .print-pages {
        display: block !important;
    }

    .print-pages .page {
        width: 210mm;
        height: 297mm;
        margin: 0 !important;
        padding: 0 !important;
        page-break-after: always;
        page-break-inside: avoid;
        break-after: page;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .print-pages .page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .print-pages .page .page-content {
        padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
        margin: 0 !important;
    }

    @page {
        size: A4;
        margin: 0;
    }
}