:root { --panel-width: 350px; --panel-sep: 10px; --panel-collapsed: 24px; }
* { box-sizing: border-box; }

/* Layout */
.app-layout { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app-header { background: #fff; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.page-header { background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 0.75rem 1.5rem; flex-shrink: 0; }
.workspace { flex: 1; display: grid; grid-template-columns: var(--panel-width) var(--panel-sep) 1fr var(--panel-sep) var(--panel-width); overflow: hidden; background: #e9ecef; }
.left-panel, .right-panel { background: #f8f9fa; overflow-y: auto; padding: 1rem; }
.center-panel { background: #e9ecef; overflow-y: auto; }
.panel-title { font-weight: 600; font-size: 15px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid #dee2e6; }

/* Resize handles */
.resize-handle { cursor: col-resize; user-select: none; display: flex; flex-direction: column; align-items: center; background: #e9ecef; z-index: 10; padding: 2px 0; }
.resize-handle .slider { width: 4px; height: 40px; background: #ced4da; border-radius: 2px; margin: auto 0; }
.resize-handle:hover .slider { background: #4A90D9; }
.is-resizing { cursor: col-resize; user-select: none; }
.toggle-btn { background: #f8f9fa; border: 1px solid #dee2e6; cursor: pointer; padding: 0; color: #6c757d; display: flex; align-items: center; justify-content: center; width: 18px; height: 22px; border-radius: 3px; margin: 2px 0; }
.toggle-btn:hover { background: #e9ecef; color: #212529; }

/* Ribbon */
.toolbar-wrap { background: #fff; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.ribbon-tabs { display: flex; padding: 0 1rem; border-bottom: 1px solid #dee2e6; }
.ribbon-tab { padding: 6px 16px; border: none; background: none; cursor: pointer; font-size: 13px; color: #495057; border-bottom: 2px solid transparent; }
.ribbon-tab:hover { background: #e9ecef; }
.ribbon-tab.active { color: #1976d2; border-bottom-color: #1976d2; }
.ribbon-content { display: flex; padding: 4px 1rem; }
.ribbon-panel { display: none; align-items: center; gap: 4px; width: 100%; }
.ribbon-panel.active { display: flex; }
.ribbon-panel button, .ribbon-panel select { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid transparent; background: none; border-radius: 4px; cursor: pointer; color: #495057; font-size: 12px; white-space: nowrap; }
.ribbon-panel button:hover { background: #f1f3f5; border-color: #dee2e6; }
.ribbon-panel button.is-active { background: #e3f2fd; color: #1976d2; border-color: #bbdefb; }
.ribbon-panel button i { font-size: 16px; }
.ribbon-panel select { border: 1px solid #dee2e6; border-radius: 4px; }
.ribbon-panel .sep { width: 1px; align-self: stretch; background: #dee2e6; margin: 0 4px; }
.ribbon-panel .btn-var { color: #2fb344; }
.ribbon-panel .btn-cond { color: #f59f00; }
.ribbon-panel .btn-loop { color: #4A90D9; }
.ribbon-panel .btn-else { color: #8B5CF6; }

/* Editor — white page, fixed A4 width, margins from Pagination overlay */
.editor-content {
    outline: none;
    font-family: 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.6;
    background: #fff;
    width: 794px;
    max-width: 794px;
    margin: 0 auto;
    padding-left: var(--ctp-overlay-offset-left, 96px);
    padding-right: var(--ctp-overlay-offset-right, 96px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.editor-content p { margin-bottom: 0; }
.editor-content h1 { font-size: 2em; margin-bottom: 0.5em; }
.editor-content h2 { font-size: 1.5em; margin-bottom: 0.5em; }
.editor-content h3 { font-size: 1.17em; margin-bottom: 0.5em; }
.editor-content ul, .editor-content ol { padding-left: 2em; margin-bottom: 1em; }

/* Tables */
.editor-content table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 0; }
.editor-content td, .editor-content th { border: 1px solid #dee2e6; padding: 0; vertical-align: top; }
.editor-content td p, .editor-content th p { margin: 0; min-height: 1em; }

/* Tag badges — Tabler styling */
.tag-node { transition: box-shadow 0.15s; }
.tag-node:hover { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.tag-node.ProseMirror-selectednode { box-shadow: 0 0 0 2px var(--tblr-primary, #f47000); }
.tag-highlighted { box-shadow: 0 0 0 2px var(--tblr-primary, #f47000); background: rgba(244,112,0,0.1); }

/* Page break marker */
.page-break { display: block; width: 100%; height: 0; margin: 0; border: none; position: relative; }
.page-break::before { content: 'Разрыв страницы'; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: 12px; color: #6b7280; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 4px 10px; }
.page-break::after { content: ''; position: absolute; left: 0; right: 0; top: 0; transform: translateY(-50%); border-top: 1px dashed #d1d5db; }
.page-break.ProseMirror-selectednode { outline: 2px solid #3b82f6; outline-offset: 2px; }

@media print {
    .page-break::before, .page-break::after { display: none; }
    .tag-node { border: 1px solid #999; background: transparent; color: #000; }
}