:root{--bg:#fff;--text:#333;--border:#ddd;--header-bg:#f8f9fa;--link:#0366d6;--hover-bg:#f5f5f5;--scrollbar:#ccc;--scrollbar-track:#f1f1f1;--code-bg:#f6f8fa;--input-bg:#fff;--error:#f56565;--accent:#4a90e2;--toast-bg:rgba(0,0,0,.8);--toast-text:#fff;--pane-header-bg:#f0f0f0;--pane-header-text:#333}
[data-theme="dark"]{--bg:#1a1a1a;--text:#eee;--border:#444;--header-bg:#252525;--link:#58a6ff;--hover-bg:#2c2c2c;--scrollbar:#555;--scrollbar-track:#2a2a2a;--code-bg:#2a2a2a;--input-bg:#252525;--error:#ff6b6b;--accent:#3a7bc8;--toast-bg:rgba(255,255,255,.8);--toast-text:#333;--pane-header-bg:#2a2a2a;--pane-header-text:#eee}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0;background:var(--bg);color:var(--text);height:100vh;transition:background-color .3s ease,color .3s ease;overflow:hidden}
.app-container{position:relative;display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}
.markdown-container{display:grid;grid-template-columns:1fr 250px 1fr;gap:10px;height:calc(100vh - 20px);padding:10px;overflow:hidden;transition:grid-template-columns .3s ease}
.markdown-container.input-collapsed{grid-template-columns:250px 1fr;gap:10px}
.input-pane,.toc-pane,.preview-pane{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:4px;overflow:hidden;position:relative}
.pane-header{background:var(--pane-header-bg);color:var(--pane-header-text);padding:8px;font-weight:500;border-bottom:1px solid var(--border);display:flex;justify-content:center;align-items:center;text-align:center}
textarea{width:100%;height:100%;padding:10px;border:none;resize:none;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:14px;line-height:1.5;background-color:var(--input-bg);color:var(--text);outline:none;overflow:auto}
textarea:focus{outline:none}
.toc-content,.preview-content{padding:10px;overflow-y:auto;height:100%}
.toc-content{font-size:14px}
.toc-content ul{list-style-type:none;padding-left:15px;margin:5px 0}
.toc-content li{margin:5px 0;cursor:pointer;transition:background-color .2s}
.toc-content li:hover{background-color:var(--hover-bg);border-radius:3px}
.toc-content a{color:var(--link);text-decoration:none;display:block;padding:3px 5px;border-radius:3px}
.toc-content a:hover{text-decoration:none;background-color:var(--hover-bg)}
.toc-content .toc-h1{margin-left:0}
.toc-content .toc-h2{margin-left:10px}
.toc-content .toc-h3{margin-left:20px}
.toc-content .toc-h4{margin-left:30px}
.toc-content .toc-h5{margin-left:40px}
.toc-content .toc-h6{margin-left:50px}
.preview-content{line-height:1.6;word-wrap:break-word}
.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}
.preview-content h1{padding-bottom:.3em;font-size:2em;border-bottom:1px solid var(--border)}
.preview-content h2{padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid var(--border)}
.preview-content h3{font-size:1.25em}
.preview-content h4{font-size:1em}
.preview-content p{margin-top:0;margin-bottom:16px}
.preview-content a{color:var(--link);text-decoration:none}
.preview-content a:hover{text-decoration:underline}
.preview-content img{max-width:100%;box-sizing:content-box;background-color:var(--bg)}
.preview-content code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;padding:.2em .4em;margin:0;font-size:85%;background-color:var(--code-bg);border-radius:3px}
.preview-content pre{margin-top:0;margin-bottom:16px;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:var(--code-bg);border-radius:3px}
.preview-content pre code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}
.preview-content blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5;margin:0 0 16px 0}
.preview-content table{display:block;width:100%;overflow:auto;border-spacing:0;border-collapse:collapse;margin-top:0;margin-bottom:16px}
.preview-content table th{font-weight:600;padding:6px 13px;border:1px solid var(--border)}
.preview-content table td{padding:6px 13px;border:1px solid var(--border)}
.preview-content table tr{background-color:var(--bg);border-top:1px solid var(--border)}
.preview-content table tr:nth-child(2n){background-color:var(--code-bg)}
.preview-content ol,.preview-content ul{padding-left:2em;margin-top:0;margin-bottom:16px}
.preview-content li{margin-top:.25em}
.control-btn{position:absolute;top:10px;background:none;border:none;font-size:20px;cursor:pointer;z-index:10;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:rgba(0,0,0,.1);color:var(--text);transition:background-color .2s}
.control-btn:hover{background-color:rgba(0,0,0,.2)}
.fullscreen-btn{right:60px}
.theme-btn{right:15px}
.copy-btn{right:105px}
.home-btn{position:absolute;top:10px;left:10px;text-decoration:none;font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:rgba(0,0,0,.1);color:var(--text);transition:background-color .2s;z-index:10}
.home-btn:hover{background-color:rgba(0,0,0,.2)}
.file-drop-zone{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);color:white;display:flex;align-items:center;justify-content:center;font-size:1.5rem;z-index:5}
.toast{position:fixed;bottom:20px;right:20px;padding:10px 15px;background:var(--toast-bg);color:var(--toast-text);border-radius:4px;z-index:1000;max-width:300px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.version{position:fixed;bottom:5px;right:10px;font-size:.8rem;opacity:.7;z-index:5}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#888}
@media (max-width:1024px){.markdown-container{grid-template-columns:1fr}
.toc-pane,.preview-pane{display:none}
.markdown-container.show-toc{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.markdown-container.show-preview{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.markdown-container.show-toc .toc-pane,.markdown-container.show-preview .preview-pane{display:flex}}
.slide-in-right{animation:slideInRight .3s ease-out}
.slide-out-left{animation:slideOutLeft .3s ease-in}
@keyframes slideInRight{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}
.input-pane{transition:transform .3s ease,opacity .3s ease}
.input-toggle-btn{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:var(--header-bg);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:4px;cursor:pointer;z-index:10;font-size:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.input-toggle-btn:hover{background:var(--hover-bg)}
.toast{position:fixed;bottom:20px;right:20px;background:var(--toast-bg);color:var(--toast-text);padding:12px 20px;border-radius:4px;font-size:14px;z-index:1000;transition:all .3s ease}
.version{position:fixed;bottom:5px;right:5px;font-size:10px;color:var(--text);opacity:.5;z-index:1000}