body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#editor {
    font-family: Georgia, 'Times New Roman', serif;
}
#editor [data-was-heading] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* Smooth page transitions */
        #app {
            min-height: 100vh;
        }

        /* Editor paragraph spacing */
        #editor p, #editor h1, #editor h2 {
            margin: 0;
            padding: 0;
        }
        #editor p { margin-bottom: 0.25em; }
        /* Preserved headings (structure mode off) keep their visual size */
        #editor p[data-was-heading="1"] {
            font-size: 1.5em;
            margin-top: 0.5em;
            margin-bottom: 0.25em;
        }
        #editor p[data-was-heading="2"] {
            font-size: 1.25em;
            margin-top: 0.5em;
            margin-bottom: 0.25em;
        }
        #editor h1 {
            font-size: 1.5em;
            font-weight: 700;
            margin-top: 0.5em;
            margin-bottom: 0.25em;
        }
        #editor h2 {
            font-size: 1.25em;
            font-weight: 600;
            margin-top: 0.5em;
            margin-bottom: 0.25em;
        }

        /* Superscript / subscript (math formatting) */
        #editor sup {
            font-size: 0.75em;
            vertical-align: super;
            line-height: 0;
        }
        #editor sub {
            font-size: 0.75em;
            vertical-align: sub;
            line-height: 0;
        }

        /* Lists */
        #editor ul, #editor ol {
            margin: 0.25em 0;
            padding-left: 1.5em;
        }
        #editor ul { list-style-type: disc; }
        #editor ol { list-style-type: decimal; }
        #editor li { margin-bottom: 0.15em; }
        #editor ul ul { list-style-type: circle; }
        #editor ul ul ul { list-style-type: square; }

        /* Table of Contents */
        #editor .skriv-toc {
            background: #f5f5f4;
            border: 1px solid #d6d3d1;
            border-radius: 0.5rem;
            padding: 1rem 1.25rem;
            margin-bottom: 1em;
            user-select: none;
        }
        #editor .skriv-toc .toc-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: #44403c;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5em;
        }
        #editor .skriv-toc .toc-empty {
            font-size: 0.8rem;
            color: #a8a29e;
            font-style: italic;
        }
        #editor .skriv-toc .toc-entry {
            font-size: 0.875rem;
            color: #57534e;
            cursor: pointer;
            padding: 0.15em 0;
            transition: color 0.15s;
        }
        #editor .skriv-toc .toc-entry:hover {
            color: #059669;
        }
        #editor .skriv-toc .toc-h2 {
            padding-left: 1.25em;
        }

        /* Inline reference markers */
        #editor .skriv-ref {
            display: inline;
            font-size: 0.75em;
            color: #059669;
            font-weight: 600;
            cursor: pointer;
            vertical-align: super;
            line-height: 1;
            padding: 0 1px;
            transition: color 0.15s;
        }
        #editor .skriv-ref:hover {
            color: #047857;
            text-decoration: underline;
        }

        /* Reference list / bibliography */
        #editor .skriv-references {
            border-top: 1px solid #d6d3d1;
            margin-top: 2em;
            padding-top: 1em;
            user-select: none;
        }
        #editor .skriv-references .ref-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: #44403c;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5em;
        }
        #editor .skriv-references .ref-entry {
            font-size: 0.8rem;
            color: #57534e;
            padding: 0.2em 0;
            cursor: pointer;
            transition: color 0.15s;
            padding-left: 2em;
            text-indent: -2em;
        }
        #editor .skriv-references .ref-entry:hover {
            color: #059669;
        }
        #editor .skriv-references .ref-entry-orphan {
            opacity: 0.5;
        }

        /* Frame section headers — emerald themed */
        #editor .skriv-frame-section {
            background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
            border: 1px solid #a7f3d0;
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            margin: 1.25em 0 0.5em;
            user-select: none;
        }
        #editor .skriv-frame-section:first-child { margin-top: 0; }
        .frame-section-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #065f46;
            margin: 0;
        }
        .frame-section-instruction {
            font-size: 0.8rem;
            color: #6ee7b7;
            font-style: italic;
            margin: 0.25em 0 0;
        }

        /* Frame subsections — lighter */
        #editor .skriv-frame-subsection {
            border-left: 3px solid #a7f3d0;
            padding: 0.25rem 0.75rem;
            margin: 0.75em 0 0.25em;
            user-select: none;
        }
        .frame-subsection-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #047857;
            margin: 0;
        }

        /* Frame prompts — ghost text */
        #editor .skriv-frame-prompt {
            color: #a8a29e;
            font-style: italic;
            border-left: 2px solid #d6d3d1;
            padding-left: 0.75em;
            transition: color 0.2s, border-color 0.2s;
        }
        #editor .skriv-frame-prompt:hover {
            color: #78716c;
            border-color: #a7f3d0;
        }

        /* Line clamp for document previews */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* --- Writing Spinner panel --- */
        .skriv-spinner-panel {
            background: #fafaf9;
            border-top: 1px solid #e7e5e4;
            padding: 1rem 1.5rem;
            transition: all 0.2s;
        }
        .skriv-spinner-panel.hidden {
            display: none;
        }
        .spinner-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        .spinner-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: #44403c;
        }
        .spinner-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: #a8a29e;
            cursor: pointer;
            padding: 0 0.25rem;
            line-height: 1;
        }
        .spinner-close:hover {
            color: #57534e;
        }
        .spinner-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
            margin-bottom: 0.75rem;
        }
        .spinner-cat-btn {
            font-size: 0.7rem;
            padding: 0.25rem 0.625rem;
            border-radius: 9999px;
            border: 1px solid #d6d3d1;
            background: white;
            color: #78716c;
            cursor: pointer;
            transition: all 0.15s;
        }
        .spinner-cat-btn:hover {
            border-color: #a8a29e;
            color: #44403c;
        }
        .spinner-cat-btn.active {
            background: #065f46;
            border-color: #065f46;
            color: white;
        }
        .spinner-result {
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background: white;
            border: 1px solid #e7e5e4;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            color: #44403c;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: background 0.15s;
            font-family: monospace;
            letter-spacing: -0.01em;
        }
        .spinner-result:hover {
            background: #f5f5f4;
        }
        .spinner-result.spinning {
            color: #a8a29e;
        }
        .spinner-spin {
            font-size: 0.8rem;
            padding: 0.5rem 1.25rem;
            border-radius: 0.5rem;
            background: #065f46;
            color: white;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.15s;
        }
        .spinner-spin:hover {
            background: #047857;
        }

        /* --- Synonym popup --- */
        .skriv-synonym-popup {
            background: white;
            border: 1px solid #d6d3d1;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 0.5rem;
            z-index: 1000;
            min-width: 140px;
            max-width: 280px;
        }
        .synonym-title {
            font-size: 0.7rem;
            color: #a8a29e;
            padding: 0.25rem 0.5rem;
            margin-bottom: 0.25rem;
        }
        .synonym-option {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.375rem 0.5rem;
            font-size: 0.8rem;
            color: #44403c;
            background: none;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: background 0.1s;
        }
        .synonym-option:hover {
            background: #ecfdf5;
            color: #065f46;
        }
        .synonym-option .synonym-badge.academic {
            display: inline-block;
            margin-left: 0.5rem;
            padding: 0.1rem 0.35rem;
            font-size: 0.6rem;
            background: #dbeafe;
            color: #1e40af;
            border-radius: 0.2rem;
            vertical-align: middle;
        }

        /* --- Repetition radar highlights --- */
        .skriv-repeat-word {
            background: rgba(251, 191, 36, 0.2);
            border-bottom: 2px solid rgba(245, 158, 11, 0.5);
            border-radius: 2px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .skriv-repeat-word:hover {
            background: rgba(251, 191, 36, 0.35);
        }
        .skriv-repeat-word[data-has-synonym="true"] {
            cursor: help;
        }

        /* --- Sentence length highlights --- */
        .skriv-sentence-long {
            background: rgba(59, 130, 246, 0.12);
            border-radius: 2px;
            transition: background 0.15s;
        }
        .skriv-sentence-very-long {
            background: rgba(59, 130, 246, 0.22);
            border-bottom: 2px solid rgba(37, 99, 235, 0.4);
            border-radius: 2px;
            transition: background 0.15s;
        }

        /* --- Rhythm bar (sentence-length visualization) --- */
        .skriv-rhythm-bar {
            border-top: 1px solid #e7e5e4;
            background: #fafaf9;
            padding: 0.5rem 1rem;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .skriv-rhythm-bar.hidden {
            display: none;
        }
        .skriv-rhythm-inner {
            max-width: 48rem;
            margin: 0 auto;
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 32px;
        }
        .skriv-rhythm-inner .bar {
            flex: 1 1 0;
            min-width: 2px;
            max-width: 6px;
            border-radius: 1px 1px 0 0;
            transition: height 0.2s, background 0.2s;
        }
        .skriv-rhythm-avg {
            max-width: 48rem;
            margin: 0.25rem auto 0;
            font-size: 0.65rem;
            color: #a8a29e;
            text-align: right;
        }

        /* --- Paragraph Map (minimap) --- */
        .skriv-paragraph-map {
            position: absolute;
            top: 0;
            right: 0.5rem;
            width: 32px;
            height: 100%;
            z-index: 30;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .skriv-paragraph-map.hidden {
            display: none;
        }
        .pmap-bar {
            position: absolute;
            left: 4px;
            right: 4px;
            border-radius: 2px;
            opacity: 0.4;
            cursor: pointer;
            pointer-events: auto;
            transition: opacity 0.15s, transform 0.15s;
        }
        .pmap-bar:hover {
            opacity: 0.8;
            transform: scaleX(1.3);
        }
        .pmap-bar.pmap-active {
            opacity: 0.7;
        }
        /* Block type colors */
        .pmap-heading {
            background: #059669;
        }
        .pmap-paragraph {
            background: #a8a29e;
        }
        .pmap-list {
            background: #6b7280;
        }
        .pmap-frame {
            background: #6ee7b7;
            opacity: 0.25;
        }
        .pmap-image {
            background: #8b5cf6;
        }
        /* Viewport indicator */
        .pmap-viewport {
            position: absolute;
            left: 0;
            right: 0;
            border: 1.5px solid rgba(5, 150, 105, 0.3);
            border-radius: 3px;
            background: rgba(5, 150, 105, 0.04);
            pointer-events: none;
        }

        /* --- Image blocks --- */
        #editor .skriv-image-block {
            margin: 1em 0;
            position: relative;
            line-height: 0;
            border-radius: 8px;
            border: 1.5px solid transparent;
            padding: 0.625rem;
            box-sizing: border-box;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        #editor .skriv-image-block.selected {
            border-color: #059669;
            box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
        }
        #editor .skriv-image-block img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 0.25rem;
            cursor: grab;
            -webkit-user-drag: none;
            user-select: none;
        }
        #editor .skriv-image-flex-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 1rem;
            width: 100%;
            box-sizing: border-box;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        #editor .skriv-alignment-guide {
            position: absolute;
            left: -1rem;
            right: -1rem;
            height: 0;
            border-top: 2px dashed #059669;
            z-index: 20;
            pointer-events: none;
            display: none;
            opacity: 0.6;
        }
        #editor .skriv-image-block.skriv-valign-center .skriv-image-flex-container {
            align-items: center !important;
        }
        #editor .skriv-image-block.skriv-valign-bottom .skriv-image-flex-container {
            align-items: flex-end !important;
        }
        #editor .skriv-image-wrapper {
            position: relative;
            flex: 0 0 45%;
            min-width: 20%;
            max-width: 100%;
            transition: flex 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease;
        }
        #editor .skriv-image-block:not(.skriv-layout-side):not(.skriv-layout-side-reverse) .skriv-image-wrapper {
            flex: 1 1 100%;
            width: 100%;
            max-width: 100%;
        }
        #editor .skriv-image-sidetext {
            position: relative;
            flex: 1 1 0%;
            min-width: 120px;
            min-height: 80px;
            padding: 0.625rem 1.65rem 0.625rem 0.875rem;
            background: #fafaf9;
            border: 1px dashed #d6d3d1;
            border-radius: 6px;
            outline: none;
            font-size: 0.925rem;
            line-height: 1.6;
            color: #1c1917;
            user-select: text !important;
            -webkit-user-select: text !important;
            transition: flex 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s, background 0.15s, transform 0.2s ease, box-shadow 0.2s ease;
        }
        #editor .skriv-sidetext-drag-handle {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #78716c;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            cursor: grab;
            user-select: none;
            opacity: 0.6;
            transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
            z-index: 10;
        }
        #editor .skriv-image-sidetext:hover .skriv-sidetext-drag-handle,
        #editor .skriv-sidetext-drag-handle:hover {
            opacity: 1;
            background: rgba(5, 150, 105, 0.12);
            border-color: #059669;
            color: #059669;
        }
        #editor .skriv-sidetext-drag-handle:active {
            cursor: grabbing;
        }
        #editor .skriv-item-dragging {
            box-shadow: 0 8px 24px rgba(5, 150, 105, 0.18) !important;
            z-index: 10;
        }
        #editor .skriv-image-sidetext.skriv-item-dragging.skriv-align-middle::after {
            content: '';
            position: absolute;
            top: 50%;
            left: -8px;
            right: -8px;
            height: 0;
            border-top: 1.5px solid #059669;
            z-index: 30;
            pointer-events: none;
            opacity: 0.85;
        }
        #editor .skriv-resizing .skriv-image-wrapper,
        #editor .skriv-resizing .skriv-image-sidetext {
            transition: none !important;
        }
        #editor .skriv-image-sidetext:focus {
            background: #ffffff;
            border-style: solid;
            border-color: #059669;
            box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
        }
        #editor .skriv-image-sidetext:empty::before {
            content: attr(data-placeholder);
            color: #a8a29e;
            font-style: italic;
            pointer-events: none;
        }
        .dark #editor .skriv-image-sidetext {
            background: #1c1917;
            border-color: #44403c;
            color: #e7e5e4;
        }
        .dark #editor .skriv-image-sidetext:focus {
            background: #262626;
            border-color: #059669;
        }
        #editor .skriv-image-block.skriv-layout-side .skriv-image-flex-container,
        #editor .skriv-image-block.skriv-layout-side-reverse .skriv-image-flex-container {
            flex-wrap: nowrap !important;
        }
        #editor .skriv-image-block:not(.skriv-layout-side):not(.skriv-layout-side-reverse) .skriv-image-side-slot {
            display: none !important;
        }
        /* --- Smart Side Slot Placeholder & Multi-Element Layout --- */
        #editor .skriv-image-side-slot {
            flex: 1 1 0%;
            min-width: 130px;
            min-height: 90px;
            padding: 0.75rem;
            border: 2px dashed #a7f3d0;
            border-radius: 10px;
            background: #f0fdf4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-sizing: border-box;
            overflow: hidden;
            transition: all 0.2s ease;
            user-select: none;
        }
        #editor .skriv-image-side-slot:hover {
            border-color: #059669;
            background: #ecfdf5;
        }
        #editor .skriv-slot-prompt {
            font-size: 0.775rem;
            font-weight: 600;
            color: #047857;
            text-align: center;
            line-height: 1.3;
            word-break: break-word;
        }
        #editor .skriv-slot-chips {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.4rem;
            width: 100%;
        }
        #editor .skriv-slot-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border: 1.5px solid #059669;
            background: #ffffff;
            color: #059669;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.775rem;
            font-weight: 600;
            line-height: 1.3;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.15s ease;
        }
        #editor .skriv-slot-chip:hover {
            background: #059669;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(5, 150, 105, 0.2);
        }
        .dark #editor .skriv-image-side-slot {
            border-color: #44403c;
            background: #1c1917;
        }
        .dark #editor .skriv-slot-prompt {
            color: #a8a29e;
        }
        .dark #editor .skriv-slot-chip {
            background: #262626;
        }
        #editor .skriv-image-block.skriv-layout-dual-image .skriv-image-wrapper {
            flex: 1 1 50%;
        }
        /* --- PaperTek Context Menu --- */
        .skriv-context-menu {
            position: fixed;
            z-index: 2000;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
            padding: 4px 0 6px 0;
            min-width: 175px;
            font-size: 0.875rem;
            user-select: none;
            overflow: hidden;
        }
        .skriv-context-header {
            padding: 8px 14px 6px 14px;
            font-size: 0.775rem;
            font-weight: 700;
            color: #18181b;
            letter-spacing: 0.2px;
        }
        .skriv-context-divider-teal {
            height: 1.5px;
            background: #059669;
            width: 100%;
            margin-bottom: 4px;
        }
        .skriv-context-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            color: #1f2937;
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
        }
        .skriv-context-item:hover {
            background: #f8fafc;
            color: #059669;
        }
        .skriv-context-item.danger:hover {
            background: #fef2f2;
            color: #dc2626;
        }
        .skriv-context-divider {
            height: 1px;
            background: #f1f5f9;
            margin: 4px 0;
        }
        .dark .skriv-context-menu {
            background: #18181b;
            border-color: #3f3f46;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
        .dark .skriv-context-header {
            color: #f4f4f5;
        }
        .dark .skriv-context-divider-teal {
            background: #10b981;
        }
        .dark .skriv-context-item {
            color: #e4e4e7;
        }
        .dark .skriv-context-item:hover {
            background: #27272a;
            color: #10b981;
        }
        .dark .skriv-context-divider {
            background: #27272a;
        }
        #editor .skriv-image-flex-container .skriv-image-sidetext ~ .skriv-image-sidetext {
            display: none !important;
        }
        .skriv-image-handles {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .skriv-image-handles.hidden { display: none; }
        .skriv-image-handles .handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #059669;
            border: 2px solid white;
            border-radius: 2px;
            pointer-events: auto;
            cursor: nwse-resize;
            z-index: 5;
        }
        .handle-nw { top: 2px; left: 2px; }
        .handle-ne { top: 2px; right: 2px; cursor: nesw-resize; }
        .handle-sw { bottom: 2px; left: 2px; cursor: nesw-resize; }
        .handle-se { bottom: 2px; right: 2px; }
        .skriv-image-caption {
            font-size: 0.8rem;
            color: #78716c;
            font-style: italic;
            margin-top: 0.375rem;
            line-height: 1.4;
            min-height: 1.2em;
            outline: none;
            user-select: text;
        }
        .skriv-image-caption:empty::before {
            content: attr(data-placeholder);
            color: #d6d3d1;
            pointer-events: none;
        }
        /* Drag-over state */
        #editor.skriv-image-dragover {
            outline: 2px dashed #059669;
            outline-offset: -2px;
        }

        /* --- Image floating toolbar --- */
        .skriv-image-toolbar {
            position: fixed;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 4px 6px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(231, 229, 228, 0.8);
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            z-index: 50;
            font-size: 0.75rem;
            user-select: none;
            transition: opacity 0.15s;
        }
        .skriv-image-toolbar.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .skriv-image-toolbar button {
            padding: 4px 8px;
            border: none;
            background: none;
            border-radius: 4px;
            cursor: pointer;
            color: #57534e;
            font-size: 0.7rem;
            white-space: nowrap;
            transition: background 0.1s, color 0.1s;
        }
        .skriv-image-toolbar button:hover {
            background: #f5f5f4;
        }
        .skriv-image-toolbar button.active {
            background: #ecfdf5;
            color: #059669;
        }
        .skriv-image-toolbar .separator {
            width: 1px;
            height: 16px;
            background: #e7e5e4;
            margin: 0 4px;
        }
        .skriv-image-toolbar button.delete-btn {
            color: #dc2626;
        }
        .skriv-image-toolbar button.delete-btn:hover {
            background: #fef2f2;
        }

        /* --- Image shadow style --- */
        #editor .skriv-image-block.skriv-image-shadow img {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* --- Drag handle --- */
        .skriv-image-drag-handle {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.9);
            border: 1px solid #e7e5e4;
            border-radius: 4px;
            cursor: grab;
            font-size: 0.7rem;
            color: #a8a29e;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 4;
            letter-spacing: -2px;
            line-height: 1;
        }
        #editor .skriv-image-block:hover .skriv-image-drag-handle,
        #editor .skriv-image-block.selected .skriv-image-drag-handle {
            opacity: 1;
        }
        .skriv-image-drag-handle:active {
            cursor: grabbing;
        }

        /* --- Drop indicator for reorder --- */
        .skriv-drop-indicator {
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            background: #059669;
            border-radius: 2px;
            pointer-events: none;
            z-index: 40;
            transition: top 0.1s;
        }
        .spinner {
            animation: rotate 2s linear infinite;
        }

        /* --- Micro-animations --- */
        @keyframes dropdown-in {
            0% { opacity: 0; transform: scaleY(0.95); }
            100% { opacity: 1; transform: scaleY(1); }
        }
        .animate-dropdown-in {
            animation: dropdown-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-origin: top;
        }
        
        @keyframes modal-in {
            0% { opacity: 0; transform: scale(0.95) translateY(10px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        .animate-modal-in {
            animation: modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .collapse-transition {
            transition: height 0.2s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
            overflow: hidden;
        }

        /* --- Scrollbar styling (Mac-like) --- */
        .skriv-image-drag-ghost {
            position: fixed;
            pointer-events: none;
            opacity: 0.6;
            z-index: 100;
            transform: rotate(2deg);
            max-width: 200px;
            max-height: 150px;
            overflow: hidden;
            border-radius: 4px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        }

        /* --- Word count stats badge (clickable in document list) --- */
        .skriv-word-stats-badge {
            background: none;
            border: none;
            color: #059669;
            font-size: inherit;
            font-family: inherit;
            cursor: pointer;
            padding: 0;
            transition: color 0.15s;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 2px;
        }
        .skriv-word-stats-badge:hover {
            color: #047857;
        }

        /* --- Word count stats overlay --- */
        .skriv-stats-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            animation: statsOverlayFadeIn 0.15s ease-out;
        }
        @keyframes statsOverlayFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .skriv-stats-panel {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            max-width: 540px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 1.5rem;
            animation: statsPanelSlideUp 0.2s ease-out;
        }
        @keyframes statsPanelSlideUp {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .skriv-stats-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }
        .skriv-stats-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1c1917;
        }
        .skriv-stats-close {
            background: none;
            border: none;
            color: #a8a29e;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 0.375rem;
            transition: color 0.15s, background 0.15s;
        }
        .skriv-stats-close:hover {
            color: #57534e;
            background: #f5f5f4;
        }
        .skriv-stats-empty {
            text-align: center;
            padding: 2rem 1rem;
            color: #a8a29e;
            font-size: 0.875rem;
        }

        /* Summary cards */
        .skriv-stats-summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .skriv-stats-card {
            background: #fafaf9;
            border: 1px solid #e7e5e4;
            border-radius: 0.75rem;
            padding: 0.875rem 0.75rem;
            text-align: center;
        }
        .skriv-stats-card-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: #059669;
        }
        .skriv-stats-card-label {
            font-size: 0.7rem;
            color: #a8a29e;
            margin-top: 0.125rem;
        }

        /* Sections */
        .skriv-stats-section {
            margin-bottom: 1.5rem;
        }
        .skriv-stats-section:last-child {
            margin-bottom: 0;
        }
        .skriv-stats-section-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: #57534e;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.75rem;
        }

        /* Monthly chart */
        .skriv-stats-chart {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 100px;
            padding: 0;
        }
        .skriv-stats-chart-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }
        .skriv-stats-chart-bar-wrap {
            flex: 1;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .skriv-stats-chart-bar {
            width: 100%;
            max-width: 28px;
            background: linear-gradient(180deg, #059669, #6ee7b7);
            border-radius: 3px 3px 0 0;
            min-height: 2px;
            transition: height 0.3s ease-out;
            cursor: default;
        }
        .skriv-stats-chart-bar:hover {
            opacity: 0.8;
        }
        .skriv-stats-chart-label {
            font-size: 0.6rem;
            color: #a8a29e;
            margin-top: 4px;
            text-align: center;
        }

        /* Per-document breakdown */
        .skriv-stats-doc-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .skriv-stats-doc-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .skriv-stats-doc-title {
            font-size: 0.8rem;
            color: #44403c;
            width: 140px;
            flex-shrink: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .skriv-stats-doc-bar-wrap {
            flex: 1;
            height: 8px;
            background: #f5f5f4;
            border-radius: 4px;
            overflow: hidden;
        }
        .skriv-stats-doc-bar {
            height: 100%;
            background: linear-gradient(90deg, #059669, #6ee7b7);
            border-radius: 4px;
            min-width: 2px;
            transition: width 0.3s ease-out;
        }
        .skriv-stats-doc-count {
            font-size: 0.75rem;
            color: #78716c;
            font-weight: 500;
            min-width: 40px;
            text-align: right;
            flex-shrink: 0;
        }

        @media (max-width: 480px) {
            .skriv-stats-summary {
                grid-template-columns: 1fr;
            }
            .skriv-stats-doc-title {
                width: 100px;
            }
        }

        /* --- Mobile responsive --- */
        @media (max-width: 768px) {
            /* Top bar: horizontally scrollable */
            .skriv-toolbar-buttons {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 2px;
            }
            .skriv-toolbar-buttons::-webkit-scrollbar { display: none; }
            .skriv-toolbar-buttons > button,
            .skriv-toolbar-buttons > div { flex-shrink: 0; }
            /* Reduce horizontal padding */
            #doc-title { font-size: 1.25rem; }
            /* Image blocks: full width on mobile */
            #editor .skriv-image-block img { width: 100% !important; }
        }

        @media (max-width: 480px) {
            /* Icon-only toolbar buttons on phones */
            .skriv-toolbar-buttons > button {
                font-size: 0;
                gap: 0 !important;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            .skriv-toolbar-buttons > button svg {
                font-size: initial;
                width: 1rem;
                height: 1rem;
            }
            /* Keep export button text visible */
            .skriv-toolbar-buttons > div button { font-size: 0.75rem; }
            /* Back button: icon-only */
            #btn-back { font-size: 0; gap: 0 !important; }
            #btn-back svg { font-size: initial; }
        }
        /* ==========================================
         * DARK MODE
         * ========================================== */
        .dark body,
        html.dark body {
            background-color: #1c1917; /* stone-900 */
            color: #e7e5e4; /* stone-200 */
        }

        /* Editor text */
        .dark #editor { color: #e7e5e4; }
        .dark #editor h1, .dark #editor h2 { color: #fafaf9; }
        .dark #editor p[data-was-heading="1"],
        .dark #editor p[data-was-heading="2"] { color: #fafaf9; }

        /* Title input */
        .dark #doc-title {
            color: #fafaf9;
        }
        .dark #doc-title::placeholder { color: #78716c; }

        /* Cards & borders */
        .dark .group { background-color: #292524; border-color: #44403c; }
        .dark .group:hover { border-color: #57534e; }

        /* Frame sections */
        .dark .skriv-frame-section {
            background: linear-gradient(135deg, #1a2e23, #1c2721) !important;
            border-color: #2d5a3f !important;
        }

        /* TOC */
        .dark .skriv-toc-container {
            background: #292524 !important;
            border-color: #44403c !important;
        }
        .dark .skriv-toc-container a { color: #6ee7b7 !important; }

        /* References */
        .dark .skriv-ref-list {
            background: #292524 !important;
            border-color: #44403c !important;
        }
        .dark .skriv-ref-marker { color: #6ee7b7; }

        /* Modal overlay */
        .dark .skriv-modal-overlay { background: rgba(0, 0, 0, 0.7) !important; }
        .dark .skriv-modal-box {
            background: #292524 !important;
            border-color: #44403c !important;
            color: #e7e5e4 !important;
        }
        .dark .skriv-modal-box input,
        .dark .skriv-modal-box select {
            background: #1c1917 !important;
            border-color: #44403c !important;
            color: #e7e5e4 !important;
        }

        /* Toast */
        .dark .skriv-toast {
            background: #292524 !important;
            color: #e7e5e4 !important;
            border-color: #44403c !important;
        }

        /* Floating toolbar */
        .dark .skriv-floating-toolbar {
            background: rgba(41, 37, 36, 0.85) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
            border-color: #44403c !important;
        }
        .dark .skriv-floating-toolbar button { color: #e7e5e4 !important; }
        .dark .skriv-floating-toolbar button:hover { background: #44403c !important; }

        /* Search input */
        .dark #doc-search {
            background: #292524;
            border-color: #44403c;
            color: #e7e5e4;
        }
        .dark #doc-search:focus { border-color: #059669; }

        /* Rhythm bar & minimap */
        .dark .skriv-rhythm-bar { background: #292524 !important; border-color: #44403c !important; }
        .dark .skriv-paragraph-map { background: #292524 !important; border-color: #44403c !important; }

        /* Word stats overlay */
        .dark .skriv-word-stats-overlay { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4 !important; }

        /* Image blocks */
        .dark #editor .skriv-image-block { border-color: #44403c; }
        .dark #editor .skriv-image-block.selected { border-color: #059669; }
        .dark .skriv-image-toolbar {
            background: rgba(41, 37, 36, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-color: rgba(68, 64, 60, 0.6);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .dark .skriv-image-toolbar button {
            color: #d6d3d1;
        }
        .dark .skriv-image-toolbar button:hover {
            background: #44403c;
        }
        .dark .skriv-image-toolbar button.active {
            background: #064e3b;
            color: #6ee7b7;
        }
        .dark .skriv-image-toolbar .separator {
            background: #44403c;
        }
        .dark .skriv-image-drag-handle {
            background: rgba(41,37,36,0.9);
            border-color: #44403c;
            color: #78716c;
        }

        /* Spinner panel */
        .dark .skriv-spinner-panel { background: #292524 !important; border-color: #44403c !important; }

        /* ===== MOBILE RESPONSIVENESS ===== */

        /* --- Toolbar overflow handling --- */
        @media (max-width: 768px) {
            .skriv-toolbar-buttons {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                flex-wrap: nowrap;
                max-width: calc(100vw - 180px);
            }
            .skriv-toolbar-buttons::-webkit-scrollbar {
                display: none;
            }
            .skriv-toolbar-buttons button {
                flex-shrink: 0;
                padding: 0.375rem 0.5rem;
                font-size: 0.65rem;
            }
            .skriv-toolbar-buttons button svg {
                width: 14px;
                height: 14px;
            }
            /* Hide text labels on mobile, show only icons */
            .skriv-toolbar-buttons button span.btn-label {
                display: none;
            }
            #btn-export {
                flex-shrink: 0;
                padding: 0.375rem 0.5rem;
            }
            #btn-export .btn-label {
                display: none;
            }
            #btn-export svg {
                width: 14px;
                height: 14px;
            }

            /* The embedded language detector records its desktop position
               inline. Clamp the transient suggestion to the phone viewport
               so a resize or rotation cannot leave its actions off-screen. */
            .skriv-leksihjelp .lh-lang-hint {
                left: 8px !important;
                right: 8px !important;
                width: auto;
                max-width: none;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto;
                gap: 6px;
            }
        }

        /* --- Editor sizing --- */
        @media (max-width: 768px) {
            #editor {
                padding: 1rem !important;
                font-size: 1rem !important;
                min-height: calc(100vh - 140px) !important;
            }
            #writing-env {
                height: 100dvh; /* dynamic viewport height for mobile browsers */
            }
            /* Reduce top bar padding */
            #writing-env > div:first-child {
                padding: 0.5rem 0.75rem;
                gap: 0.5rem;
            }
        }

        /* --- Formatting toolbar (sticky bottom on mobile) --- */
        @media (max-width: 768px) {
            .skriv-editor-toolbar {
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                border-radius: 0 !important;
                border-top: 1px solid #e7e5e4;
                padding: 0.5rem;
                z-index: 60;
                background: white;
                justify-content: space-around;
                box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
            }
            .dark .skriv-editor-toolbar {
                background: #1c1917;
                border-color: #44403c;
            }
            /* Adjust editor bottom padding to not be hidden by toolbar */
            #editor {
                padding-bottom: 4rem !important;
            }
        }

        /* --- Image blocks on mobile --- */
        @media (max-width: 768px) {
            #editor .skriv-image-block img {
                width: 100% !important;
            }
            .skriv-image-toolbar {
                font-size: 0.6rem;
                padding: 3px 4px;
            }
            .skriv-image-toolbar button {
                padding: 3px 5px;
                font-size: 0.6rem;
            }
            .skriv-image-drag-handle {
                width: 28px;
                height: 28px;
                font-size: 0.85rem;
            }
        }

        /* --- Spinner panel on mobile --- */
        @media (max-width: 768px) {
            .skriv-spinner-panel {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                max-height: 50vh;
                overflow-y: auto;
                border-radius: 1rem 1rem 0 0;
                z-index: 55;
            }
            .spinner-categories {
                flex-wrap: wrap;
            }
            .spinner-cat-btn {
                font-size: 0.7rem;
                padding: 0.25rem 0.5rem;
            }
        }

        /* --- Table responsiveness --- */
        @media (max-width: 768px) {
            .skriv-table {
                font-size: 0.75rem;
                display: block;
                overflow-x: auto;
            }
            .skriv-table th, .skriv-table td {
                padding: 0.375rem 0.5rem;
                min-width: 80px;
            }
        }

        /* --- Frame sections on mobile --- */
        @media (max-width: 768px) {
            .skriv-frame-section {
                padding: 0.5rem 0.75rem;
                margin: 0.75em 0 0.25em;
            }
            .frame-section-instruction {
                font-size: 0.8rem;
            }
        }

        /* --- Progress panel positioning --- */
        @media (max-width: 768px) {
            .skriv-progress-trigger {
                bottom: 60px !important; /* above the fixed formatting toolbar */
            }
            .skriv-progress-panel {
                bottom: 100px !important;
            }
        }

        /* --- Synonym popup on mobile --- */
        @media (max-width: 768px) {
            .skriv-synonym-popup {
                position: fixed !important;
                bottom: 60px !important;
                left: 1rem !important;
                right: 1rem !important;
                top: auto !important;
                max-height: 40vh;
                overflow-y: auto;
                border-radius: 0.75rem;
            }
        }

        /* --- Touch targets (minimum 44px for accessibility) --- */
        @media (pointer: coarse) {
            .skriv-toolbar-buttons button {
                min-height: 44px;
                min-width: 44px;
            }
            .spinner-cat-btn {
                min-height: 40px;
                padding: 0.5rem 0.75rem;
            }
            .synonym-option {
                min-height: 44px;
                padding: 0.75rem;
            }
            .skriv-table th, .skriv-table td {
                min-height: 44px;
            }
        }

        /* --- Safe area insets (iPhone notch) --- */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            @media (max-width: 768px) {
                .skriv-editor-toolbar {
                    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
                }
                .skriv-spinner-panel {
                    padding-bottom: env(safe-area-inset-bottom);
                }
            }
        }

        /* --- Small phone (< 400px) --- */
        @media (max-width: 400px) {
            #btn-back span {
                display: none;
            }
            .skriv-toolbar-buttons button {
                padding: 0.25rem 0.375rem;
            }
        }

        /* Respect the operating system's reduced-motion preference across
           editor panels, drawers, highlights, and route transitions. */
        @media (prefers-reduced-motion: reduce) {
            html:focus-within {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                transition-delay: 0ms !important;
                scroll-behavior: auto !important;
            }
        }

    @media print {
        /* Hide all UI chrome */
        #writing-env > div:first-child, /* top bar */
        .skriv-editor-toolbar,
        .skriv-spinner-panel,
        .skriv-synonym-popup,
        .skriv-progress-trigger,
        .skriv-progress-panel,
        .skriv-focus-close,
        .skriv-focus-wordcount,
        .skriv-image-toolbar,
        .skriv-image-handles,
        .skriv-image-drag-handle,
        .skriv-table-toolbar,
        .skriv-feedback-panel,
        .skriv-version-panel,
        .skriv-tour-backdrop,
        .skriv-tour-spotlight,
        .skriv-tour-tooltip,
        .rhythm-bar,
        .skriv-rhythm-score,
        .pmap-container,
        [class*="toast"],
        .border-t.border-stone-200 /* bottom bar */ {
            display: none !important;
        }

        /* Hide frame scaffolding */
        .skriv-frame-section,
        .skriv-frame-subsection {
            display: none !important;
        }

        /* Reset editor container */
        #writing-env {
            height: auto !important;
            overflow: visible !important;
        }

        #editor {
            max-width: none !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            box-shadow: none !important;
            background: white !important;
            color: black !important;
            font-family: 'Times New Roman', Times, serif !important;
            font-size: 12pt !important;
            line-height: 1.5 !important;
        }

        /* Page setup */
        @page {
            margin: 2.5cm 2cm 2.5cm 3cm;
            size: A4;
        }

        /* Typography */
        #editor p {
            text-indent: 0.5cm;
            margin-bottom: 0;
            margin-top: 0;
            orphans: 2;
            widows: 2;
        }
        #editor h1 + p,
        #editor h2 + p,
        #editor h3 + p {
            text-indent: 0;
        }
        #editor h1 {
            font-size: 16pt;
            font-weight: bold;
            margin-top: 24pt;
            margin-bottom: 12pt;
            page-break-after: avoid;
        }
        #editor h2 {
            font-size: 14pt;
            font-weight: bold;
            margin-top: 18pt;
            margin-bottom: 8pt;
            page-break-after: avoid;
        }
        #editor h3 {
            font-size: 12pt;
            font-weight: bold;
            margin-top: 12pt;
            margin-bottom: 6pt;
            page-break-after: avoid;
        }

        /* Lists */
        #editor ul, #editor ol {
            margin-left: 1cm;
            text-indent: 0;
        }
        #editor li {
            text-indent: 0;
        }

        /* Blockquotes */
        #editor blockquote {
            margin-left: 1.5cm;
            font-style: italic;
            border: none !important;
        }

        /* Images */
        #editor .skriv-image-block {
            text-align: center;
            margin: 1em 0;
            page-break-inside: avoid;
            border: none !important;
        }
        #editor .skriv-image-block img {
            max-width: 70% !important;
            height: auto;
        }
        .skriv-image-caption {
            font-size: 10pt;
            text-align: center;
            font-style: italic;
        }

        /* Tables */
        .skriv-table {
            page-break-inside: avoid;
            border-collapse: collapse;
            width: 100%;
            font-size: 10pt;
        }
        .skriv-table th, .skriv-table td {
            border: 1px solid black !important;
            padding: 4pt 6pt;
        }
        .skriv-table th {
            background: #f0f0f0 !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        /* Remove all highlights and interactive styling */
        .skriv-repeat-word {
            background: none !important;
            border-bottom: none !important;
        }
        .skriv-sentence-highlight,
        .skriv-focus-fade,
        .skriv-focus-current {
            opacity: 1 !important;
            background: none !important;
        }

        /* Ghost prompts that haven't been edited — hide them */
        .skriv-frame-prompt {
            display: none !important;
        }

        /* Links */
        #editor a {
            color: black;
            text-decoration: underline;
        }
        #editor a::after {
            content: " (" attr(href) ")";
            font-size: 9pt;
            color: #555;
        }
    }