:root{--primary:#1a73e8;--primary-rgb:26, 115, 232;--primary-hover:#1557b0;--bg:#f5f5f5;--surface:#fff;--surface-secondary:#f8f9fa;--text:#202124;--text-secondary:#5f6368;--border:#dadce0;--tab-bg:#eceef1;--shadow-sm:0 1px 2px 0 #3c40434d;--shadow-md:0 4px 12px #00000014;--radius-sm:8px;--radius-md:12px;--radius-lg:24px;--font-sans:"Inter", system-ui, -apple-system, sans-serif}[data-theme=dark]{--bg:#141414;--surface:#1e1e1e;--surface-secondary:#2d2d2d;--text:#e8eaed;--text-secondary:#9aa0a6;--border:#3c4043;--tab-bg:#2d2d2d;--primary:#8ab4f8;--primary-rgb:138, 180, 248}[data-theme=sepia]{--bg:#f4ecd8;--surface:#fdf6e3;--surface-secondary:#eee8d5;--text:#5b4636;--text-secondary:#839496;--border:#d5beab;--tab-bg:#eee8d5;--primary:#b58900}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text);flex-direction:column;height:100vh;transition:background .3s,color .3s;display:flex;overflow:hidden}header{background-color:var(--surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.logo-section{align-items:center;gap:10px;display:flex}.logo-text{letter-spacing:-.02em;font-size:18px;font-weight:600}.logo-icon{width:20px;height:20px;color:var(--primary)}.user-section{align-items:center;gap:8px;display:flex}.header-center{flex:1;justify-content:center;min-width:0;display:flex}.toolbar{background-color:var(--surface-secondary);border-radius:var(--radius-md);align-items:center;gap:2px;padding:4px;display:flex}.toolbar-btn.small-icon{padding:4px}.btn.small{white-space:nowrap;padding:6px 10px;font-size:13px}#auth-buttons{align-items:center;display:flex}#user-info{align-items:center;gap:8px;display:flex}.toolbar-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.toolbar-btn:hover{background-color:var(--border);color:var(--text)}.toolbar-btn i{width:18px;height:18px}.toolbar-sep{background-color:var(--border);width:1px;height:20px;margin:0 4px}.app-sub-header{background-color:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;height:48px;padding:0 20px;display:flex}.sub-header-actions{align-items:center;gap:8px;display:flex}.flex-spacer{flex:1}.tabs-container{background-color:var(--surface-secondary);scrollbar-width:none;gap:4px;padding:8px 8px 0;display:flex;overflow-x:auto}.tabs-container::-webkit-scrollbar{display:none}.tab{background-color:var(--tab-bg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;min-width:140px;max-width:220px;height:40px;color:var(--text-secondary);border:1px solid #0000;border-bottom:none;align-items:center;padding:8px 16px;font-size:13px;transition:all .2s;display:flex}.tab.active{background-color:var(--surface);color:var(--text);border-color:var(--border);font-weight:500;box-shadow:0 -2px 8px #00000008}.tab-title{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tab-close{opacity:.3;border-radius:50%;margin-left:8px;padding:2px;display:flex}.tab:hover .tab-close{opacity:.8}.tab-close:hover{background:#0000001a}.tab-unsaved{background-color:var(--primary);border-radius:50%;width:6px;height:6px;margin-right:8px;display:none}.unsaved .tab-unsaved{display:block}main{background-color:var(--bg);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}#editor-wrapper{background:var(--bg);flex-direction:column;flex:1;align-items:center;height:100%;padding:0;display:flex;overflow-y:auto}#editor-container{background:var(--surface);width:100%;max-width:1000px;min-height:100%;box-shadow:var(--shadow-md);position:relative;flex-direction:column!important;display:flex!important}.ql-toolbar.ql-snow{z-index:50;background:var(--surface);flex-shrink:0;max-width:1000px;position:sticky;top:0;border:none!important;border-bottom:1px solid var(--border)!important;width:100%!important;display:block!important}.ql-container.ql-snow{font-size:110%;border:none!important;flex-direction:column!important;flex:1 0 auto!important;width:100%!important;display:flex!important}.ql-editor{min-height:800px;line-height:1.8;flex:1!important;height:auto!important;padding:60px 80px!important;overflow-y:visible!important}.btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.btn.small{padding:4px 10px;font-size:12px}.btn.compact{padding:4px 8px;font-size:12px}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-sm);border:none}.btn-primary:hover{opacity:.9}.btn-outline{border-color:var(--border);color:var(--text);border-radius:var(--radius-sm);background:0 0}.btn-outline:hover{background:var(--surface-secondary)}.user-section button{flex-shrink:0}#install-btn{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:none}#install-btn:hover{background:var(--primary-hover)}.user-avatar{border:1px solid var(--border);border-radius:50%;width:30px;height:30px}#save-status-container{color:var(--text-secondary);font-size:13px;font-weight:500;transition:color .3s}.status-icon{margin-right:4px}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{color:var(--text);background:var(--surface-secondary)}.modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0006;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal.visible{display:flex}.glass{background:rgba(var(--primary-rgb), .05);background-color:var(--surface);border:1px solid rgba(var(--primary-rgb), .2);box-shadow:0 20px 50px #0003}.modal-content{border-radius:var(--radius-md);width:90%;max-width:450px;padding:24px}.modal-content.wide{max-width:650px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.close-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none}.settings-grid{grid-template-columns:1fr 1fr;gap:30px;display:grid}.settings-section h3{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:4px;font-size:14px}.setting-item{margin-bottom:20px}.setting-item label{margin-bottom:8px;font-size:13px;display:block}.theme-bubbles{gap:10px;display:flex}.theme-bubble{cursor:pointer;border:2px solid #0000;border-radius:50%;width:32px;height:32px}.theme-bubble.active{border-color:var(--primary)}.theme-bubble.light{background:#fff;border:1px solid #ddd}.theme-bubble.dark{background:#141414}.theme-bubble.sepia{background:#fdf6e3;border:1px solid #d5beab}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:12px;margin-top:20px;padding-top:16px;display:flex}.search-panel{border-radius:var(--radius-md);z-index:200;flex-direction:column;gap:12px;width:300px;padding:16px;display:none;position:absolute;top:20px;right:20px}.search-panel.visible{display:flex}.search-header{justify-content:space-between;font-size:14px;font-weight:600;display:flex}.search-input-group input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);padding:8px 12px}.search-actions{grid-template-columns:1fr 1fr 2fr 2fr;gap:4px;display:grid}footer{background:var(--surface);border-top:1px solid var(--border);justify-content:space-between;align-items:center;height:28px;padding:0 20px;font-size:11px;display:flex}.status-indicator{align-items:center;gap:6px;display:flex}.status-icon{width:14px;height:14px;color:var(--primary)}.status-icon.spin{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){.header-center{display:none}.settings-grid{grid-template-columns:1fr}.ql-editor{padding:30px 20px!important}.logo-text{display:none}}[data-theme=dark] .ql-snow .ql-stroke{stroke:#e8eaed}[data-theme=dark] .ql-snow .ql-fill{fill:#e8eaed}[data-theme=dark] .ql-snow .ql-picker{color:#e8eaed}[data-theme=dark] .ql-snow .ql-picker-options{background:#2d2d2d;border-color:#3c4043}[data-theme=sepia] .ql-snow .ql-stroke{stroke:#5b4636}[data-theme=sepia] .ql-snow .ql-fill{fill:#5b4636}[data-theme=sepia] .ql-snow .ql-picker{color:#5b4636}[data-theme=sepia] .ql-snow .ql-picker-options{background:#eee8d5;border-color:#d5beab}
