*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#1e1e2e;color:#cdd6f4;overflow:hidden;height:100vh}.app-container{display:flex;flex-direction:column;height:100vh}.header{background:#181825;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #313244}.logo{font-size:20px;font-weight:700;color:#cba6f7;display:flex;align-items:center;gap:8px}.logo:before{content:"🐱";font-size:24px}.mode-tabs{display:flex;gap:8px}.mode-tab{padding:8px 16px;background:#313244;border:none;border-radius:6px;color:#cdd6f4;cursor:pointer;transition:all .2s;font-size:14px}.mode-tab:hover{background:#45475a}.mode-tab.active{background:#cba6f7;color:#1e1e2e}.header-actions{display:flex;gap:8px}.btn{padding:8px 16px;background:#313244;border:none;border-radius:6px;color:#cdd6f4;cursor:pointer;transition:all .2s;font-size:14px}.btn:hover{background:#45475a}.btn-primary{background:#cba6f7;color:#1e1e2e}.btn-primary:hover{background:#b4befe}.main-content{flex:1;display:flex;overflow:hidden}.sidebar{width:250px;background:#181825;border-right:1px solid #313244;display:flex;flex-direction:column;position:relative;transition:width .2s ease;overflow:hidden}.sidebar.collapsed{width:44px}.sidebar.collapsed .sidebar-title,.sidebar.collapsed .sidebar-header-actions .storage-info-btn,.sidebar.collapsed .sidebar-header-actions #newFileBtn{display:none}.sidebar.collapsed .sidebar-header{justify-content:center;padding:12px 4px}.sidebar.collapsed .sidebar-body{display:none}.sidebar-collapse-btn{padding:4px 8px;background:transparent;border:1px solid #45475a;border-radius:6px;color:#a6adc8;cursor:pointer;font-size:12px}.sidebar-collapse-btn:hover{background:#313244;color:#cdd6f4}.sidebar-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.sidebar-collapsed-icons{display:none;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;overflow-y:auto}.sidebar.collapsed .sidebar-collapsed-icons{display:flex}.sidebar-collapsed-icons .collapsed-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;font-size:16px;border:1px solid transparent;flex-shrink:0}.sidebar-collapsed-icons .collapsed-icon:hover{background:#313244}.sidebar-collapsed-icons .collapsed-icon.active{background:#45475a;border-color:#89b4fa}.sidebar-header{padding:12px;border-bottom:1px solid #313244;display:flex;justify-content:space-between;align-items:center}.sidebar-title{font-size:14px;font-weight:600;color:#cba6f7}.sidebar-header-actions{display:flex;gap:6px;align-items:center}.storage-info-btn{padding:4px 8px;background:transparent;border:1px solid #45475a;border-radius:6px;color:#a6adc8;cursor:pointer;font-size:12px}.storage-info-btn:hover{background:#313244;color:#cdd6f4}.storage-info{display:none;position:absolute;top:48px;left:12px;right:12px;background:#1e1e2e;border:1px solid #cba6f7;border-radius:6px;padding:12px;font-size:12px;color:#cdd6f4;z-index:100;box-shadow:0 8px 24px #00000080}.storage-info ul{margin:8px 0;padding-left:16px}.storage-info li{margin-bottom:4px}.file-list{flex:1;overflow-y:auto;padding:8px}.code-options{padding:12px;border-top:1px solid #313244;display:flex;flex-direction:column;gap:8px}.code-options-title{font-size:12px;font-weight:600;color:#cba6f7;text-transform:uppercase;letter-spacing:.5px}.code-options .toolbar-select,.code-options .toolbar-btn{width:100%}.file-item{padding:8px 12px;margin-bottom:4px;background:#313244;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.file-item:hover{background:#45475a}.file-item.active{background:#cba6f7;color:#1e1e2e}.file-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-kind-icon{margin-right:6px;font-size:12px}.file-actions{display:flex;gap:4px}.file-action-btn{padding:2px 6px;background:transparent;border:none;color:inherit;cursor:pointer;border-radius:3px;font-size:12px}.file-action-btn:hover{background:#ffffff1a}.editor-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.editor-toolbar{padding:8px 12px;background:#181825;border-bottom:1px solid #313244;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar-group{display:flex;gap:4px;padding-right:8px;border-right:1px solid #313244}.toolbar-group:last-child{border-right:none}.toolbar-btn{padding:6px 10px;background:#313244;border:none;border-radius:4px;color:#cdd6f4;cursor:pointer;font-size:13px;transition:all .2s}.toolbar-btn:hover{background:#45475a}.toolbar-btn.active{background:#cba6f7;color:#1e1e2e}.toolbar-select{padding:6px 10px;background:#313244;border:none;border-radius:4px;color:#cdd6f4;cursor:pointer;font-size:13px}.editor-content,.code-editor-container{flex:1;display:flex;overflow:hidden}.code-editor{flex:1;overflow:auto}.code-preview{flex:1;background:#fff;border-left:1px solid #313244}.code-preview iframe{width:100%;height:100%;border:none}.CodeMirror{height:100%;font-size:14px}.text-draw-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.text-editor-wrapper{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:20px;background:#fff}.text-editor-actions{display:flex;gap:8px;margin-bottom:12px;position:relative}.symbol-picker{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:#1e1e2e80;border:1px solid #45475a;border-radius:8px;box-shadow:0 8px 24px #00000080;padding:8px;z-index:100}.symbol-picker.active{display:block}.symbol-picker-grid{display:grid;grid-template-columns:repeat(8,36px);gap:2px}.symbol-picker-grid .symbol-btn{width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:#cdd6f4;font-size:17px;cursor:pointer}.symbol-picker-grid .symbol-btn:hover{background:#45475a;color:#89b4fa}#editor{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}.ql-toolbar.ql-snow{position:sticky;top:0;background:#f9f9f9;border:1px solid #ccc;border-radius:6px 6px 0 0;z-index:10}.ql-container.ql-snow{flex:1;min-height:0;border:1px solid #ccc;border-radius:0 0 6px 6px;font-size:16px}.ql-editor{color:#000!important}.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor li,.ql-editor blockquote{color:inherit}.ql-snow .ql-picker.ql-color .ql-picker-label,.ql-snow .ql-picker.ql-background .ql-picker-label{width:28px}.ql-snow .ql-picker-options{background:#fff;border:1px solid #ccc;border-radius:4px}.panel-splitter{flex:0 0 auto;height:4px;background:#313244;cursor:row-resize;user-select:none;-webkit-user-select:none}.panel-splitter:hover,.panel-splitter.dragging{background:#89b4fa}.drawing-canvas-container{position:relative;width:100%;height:400px;background:#fff}#drawingCanvas{cursor:crosshair;display:block}#drawingCanvas:focus{outline:2px solid rgba(59,130,246,.45);outline-offset:-2px}.paste-hint{position:absolute;display:none;transform:translate(-50%);background:#0f172ad9;color:#e2e8f0;font-size:11px;padding:4px 10px;border-radius:999px;pointer-events:none;white-space:nowrap;z-index:5}.drawing-tools{position:absolute;top:10px;left:10px;background:#1e1e2ee6;padding:8px;border-radius:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.drawing-tools .toolbar-btn{padding:5px 9px;font-size:12px}.drawing-tools .toolbar-select{padding:5px 8px;font-size:12px}.custom-ratio-row{display:flex;gap:4px;align-items:center}.custom-ratio-row[hidden]{display:none}.custom-ratio-input{width:52px;padding:5px 6px;background:#313244;border:none;border-radius:4px;color:#cdd6f4;font-size:12px;text-align:center}.custom-ratio-colon{color:#cdd6f4;font-size:12px}.tool-divider{width:1px;height:22px;background:#fff3;margin:0 2px}.zoom-level{width:54px;padding:5px 6px;background:#313244;border:none;border-radius:4px;color:#cdd6f4;font-size:12px;text-align:center}.color-picker{width:30px;height:30px;border:none;border-radius:4px;cursor:pointer}.pen-picker{display:flex;gap:4px;align-items:center}.pen-btn{display:flex;align-items:center;gap:5px;padding:4px 8px;font-size:11px;color:#cdd6f4;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer}.pen-btn:hover{background:#ffffff14}.pen-btn.active{background:#89b4fa26;border-color:#89b4fa}.pen-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:inline-block}.size-slider{width:80px;accent-color:#89b4fa}.math-input-container{padding:20px;background:#181825;border-top:1px solid #313244}.math-input{width:100%;padding:12px;background:#313244;border:1px solid #45475a;border-radius:6px;color:#cdd6f4;font-family:Courier New,monospace;font-size:14px;resize:vertical;min-height:80px}.math-preview{margin-top:12px;padding:16px;background:#fff;border-radius:6px;min-height:60px;display:flex;align-items:center;justify-content:center}.math-preview .katex{font-size:1.5em}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background:#1e1e2e;padding:24px;border-radius:12px;min-width:400px;max-width:600px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-title{font-size:18px;font-weight:600;color:#cba6f7}.modal-close{background:none;border:none;color:#cdd6f4;font-size:24px;cursor:pointer}.modal-body{margin-bottom:16px}.form-group{margin-bottom:12px}.form-label{display:block;margin-bottom:6px;font-size:14px;color:#cdd6f4}.form-input{width:100%;padding:8px 12px;background:#313244;border:1px solid #45475a;border-radius:6px;color:#cdd6f4;font-size:14px}.modal-footer{display:flex;justify-content:flex-end;gap:8px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#181825}::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#585b70}@media (max-width: 768px){.sidebar{width:200px}.header{flex-wrap:wrap;gap:8px}}