:root{--bg-deep-dark:#292929;--bg-dark:#333333;--bg-editor:#3c3c3c;--border-color:#555555;--text-light:#d4d4d4;--text-dark:#888888;--active-blue:#007acc}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
.font-mono{font-family:'Consolas','Courier New',monospace}
::-webkit-scrollbar{width:6px;height:7px;}
::-webkit-scrollbar-track{background:var(--bg-dark)}
::-webkit-scrollbar-thumb{background:#6b6b6b;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#888888}
.tab-active{background-color:var(--bg-editor)!important;border-bottom:1px solid transparent;position:relative;top:1px}
.pinned-tab{border-left:3px solid var(--active-blue);background-color:var(--bg-light)!important}
.pinned-tab.tab-active{background-color:var(--bg-editor)!important}
#line-numbers,#note-editor{font-family:'Consolas','Courier New',monospace;font-size:1rem;line-height:1.6;padding-top:.5rem;padding-bottom:.5rem;box-sizing:border-box;}
#line-numbers{line-height:1.6;padding-top:.5rem;padding-bottom:.5rem;vertical-align:top;}
#note-editor{line-height:1.6;padding-top:.5rem;padding-bottom:.5rem;vertical-align:top;}
textarea{resize:none;border:none;outline:none;background-color:transparent}
#note-editor{overflow-y:scroll !important;max-height:calc(100vh - 120px);height:100%;padding-bottom:20px;}
#note-editor.word-wrap{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;}
#line-numbers{scrollbar-width:none;-ms-overflow-style:none;overflow-y:scroll !important;height:100%;max-height:calc(100vh - 120px);padding-bottom:20px;}
#line-numbers::-webkit-scrollbar{display:none;}
body.light-theme{--bg-deep-dark:#e0e0e0;--bg-dark:#f5f5f5;--bg-editor:#ffffff;--border-color:#cccccc;--text-light:#333333;--text-dark:#666666;--active-blue:#007acc}
#sidebar{width:240px}
#document-list {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-light);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

#document-list::-webkit-scrollbar {
    width: 6px;
}

#document-list::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 3px;
}

#document-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

#document-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-dark);
}

#editor-container.split-view {
    display: flex;
    flex-direction: row;
    position: relative;
}

#editor-container.split-view #line-numbers {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

#editor-container.split-view #note-editor {
    flex: 1;
    max-width: calc(50% - 48px);
}

#editor-container.split-view #markdown-preview {
    flex: 1;
    max-width: 50%;
    padding: 16px;
    background-color: var(--bg-editor);
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 120px);
}

#editor-container.split-view .resize-handle {
    width: 4px;
    background-color: transparent;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    z-index: 10;
}

#editor-container.split-view .resize-handle.hidden {
    display: none;
}

#editor-container.split-view .resize-handle:hover {
    background-color: var(--active-blue);
}

#editor-container.split-view .resize-handle:active {
    background-color: var(--active-blue);
}

#editor-container.split-view #markdown-preview::-webkit-scrollbar {
    display: none;
}

#markdown-preview h1, #markdown-preview h2, #markdown-preview h3, #markdown-preview h4, #markdown-preview h5, #markdown-preview h6 {
    color: var(--text-light);
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

#markdown-preview h1 {
    font-size: 2em;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.3em;
}

#markdown-preview h2 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.2em;
}

#markdown-preview h3 {
    font-size: 1.25em;
}

#markdown-preview h4 {
    font-size: 1.1em;
    color: var(--active-blue);
}

#markdown-preview h5 {
    font-size: 1em;
    color: var(--text-dark);
}

#markdown-preview h6 {
    font-size: 0.9em;
    color: var(--text-dark);
    font-style: italic;
}

#markdown-preview p {
    margin-bottom: 1em;
    color: var(--text-light);
}

#markdown-preview code {
    background-color: var(--bg-light);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: var(--text-light);
}

#markdown-preview pre {
    background-color: var(--bg-light);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1em;
}

#markdown-preview pre code {
    background-color: transparent;
    padding: 0;
}

#markdown-preview ul, #markdown-preview ol {
    margin-bottom: 1em;
    padding-left: 2em;
    color: var(--text-light);
}

#markdown-preview a {
    color: var(--active-blue);
    text-decoration: none;
}

#markdown-preview a:hover {
    text-decoration: underline;
}

#markdown-preview blockquote {
    border-left: 4px solid var(--active-blue);
    margin: 1em 0;
    padding-left: 1em;
    color: var(--text-dark);
    font-style: italic;
}

#markdown-preview hr {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 2em 0;
}

#markdown-preview del {
    text-decoration: line-through;
    color: var(--text-dark);
    opacity: 0.7;
}

#markdown-preview u {
    text-decoration: underline;
    color: var(--text-light);
}

#markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#markdown-preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

#markdown-preview td, #markdown-preview th {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    color: var(--text-light);
}

#markdown-preview th {
    background-color: var(--bg-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    #document-list {
        max-height: calc(100vh - 100px);
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    #document-list::-webkit-scrollbar {
        width: 4px;
    }
    
    #editor-container.split-view #markdown-preview {
        max-height: calc(100vh - 80px);
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    #editor-container.split-view.preview-small #markdown-preview {
        flex: 0 0 30%;
        max-width: 30%;
    }
    
    #editor-container.split-view.preview-small #note-editor {
        flex: 0 0 calc(70% - 48px);
        max-width: calc(70% - 48px);
    }
    
    #editor-container.split-view.preview-medium #markdown-preview {
        flex: 0 0 45%;
        max-width: 45%;
    }
    
    #editor-container.split-view.preview-medium #note-editor {
        flex: 0 0 calc(55% - 48px);
        max-width: calc(55% - 48px);
    }
    
    #editor-container.split-view.preview-large #markdown-preview {
        flex: 0 0 70%;
        max-width: 70%;
    }
    
    #editor-container.split-view.preview-large #note-editor {
        flex: 0 0 calc(30% - 48px);
        max-width: calc(30% - 48px);
    }
}
.search-highlight{background-color:#ffff00!important;color:#000000!important;padding:1px 2px!important;border-radius:2px!important;font-weight:600!important}
.search-highlight-current{background-color:#92400e!important;color:#ffffff!important;padding:1px 2px!important;border-radius:2px!important;font-weight:600!important}
.hidden{display:none!important}
#lang-dropdown{max-height:200px;overflow-y:auto;z-index:9999}

#tabs-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    min-width: 0;
    width: 100%;
}

#tabs-container::-webkit-scrollbar {
    display: none;
}

button[type="submit"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

button[type="submit"]:disabled:hover {
    background-color: var(--active-blue) !important;
}

#sidebar-resize-handle {
    width: 4px;
    background-color: transparent;
    transition: all 0.2s ease;
}

#sidebar-resize-handle:hover {
    background-color: var(--active-blue);
    opacity: 1;
}

@media (max-width: 767px) {
    #sidebar-resize-handle {
        width: 8px;
        opacity: 0.3;
    }
    
    #sidebar-resize-handle:hover,
    #sidebar-resize-handle:active {
        opacity: 1;
        background-color: var(--active-blue);
    }
    
    .toolbar-mobile-hidden {
        display: none !important;
    }
    
    #toolbar-mobile-dropdown {
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    }
    
    #toolbar-mobile-dropdown.hidden {
        max-height: 0;
        opacity: 0;
    }
    
    #toolbar-mobile-dropdown:not(.hidden) {
        max-height: 200px;
        opacity: 1;
    }
    
    #toolbar-mobile-toggle svg {
        transition: transform 0.3s ease;
    }
    
    #toolbar-mobile-toggle.open svg {
        transform: rotate(180deg);
    }
    
    /* Help modals mobile optimization */
    #help-faq-modal,
    #help-shortcuts-modal,
    #help-privacy-modal,
    #help-about-modal {
        width: 95% !important;
        max-width: 95% !important;
        left: 2.5% !important;
        transform: none !important;
        max-height: 85vh !important;
        top: 10vh !important;
    }
}

.search-highlight {
    background-color: rgba(255, 255, 0, 0.3);
}

.search-highlight-current {
    background-color: rgba(255, 165, 0, 0.5);
    outline: 1px solid rgba(255, 165, 0, 1);
}

.table-cell {
    transition: background-color 0.5s ease-out;
}

.cell-flash-highlight {
    background-color: rgba(59, 130, 246, 0.4) !important;
}