.navbar{height:var(--navbar-height);background:var(--color-bg-sidebar);border-bottom:1px solid var(--color-border);justify-content:space-between;padding:0 var(--space-lg)}.navbar,.navbar-left{display:flex;align-items:center}.navbar-left{gap:var(--space-md)}.logo,.logo-icon{display:flex;align-items:center}.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:10px;justify-content:center;box-shadow:0 4px 12px rgba(79,70,229,.3)}.navbar-title{font-size:var(--text-xl);font-weight:600;color:var(--color-text-primary)}.btn-home{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-home:hover{background:var(--color-bg-page);color:var(--color-primary)}.navbar-right{gap:var(--space-sm)}.btn-help,.navbar-right{display:flex;align-items:center}.btn-help{width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:var(--text-lg);font-weight:600;justify-content:center;transition:all .2s}.btn-help:hover{background:var(--color-bg-page);color:var(--color-text-primary)}.btn-reset{height:36px;padding:0 var(--space-md);border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;display:flex;align-items:center;gap:var(--space-xs);transition:color .2s}.btn-reset:hover{color:var(--color-danger)}.help-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;animation:help-fade-in .15s ease-out}@keyframes help-fade-in{0%{opacity:0}to{opacity:1}}.help-dialog{background:var(--color-bg-card);border-radius:var(--radius-lg);max-width:560px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:help-scale-in .15s ease-out}@keyframes help-scale-in{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.help-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;position:sticky;top:0;background:var(--color-bg-card);z-index:1}.help-header h2{font-size:var(--text-2xl);font-weight:600;color:var(--color-text-primary)}.help-close{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:all .15s}.help-close:hover{background:var(--color-bg-page);color:var(--color-text-primary)}.help-body{padding:16px 24px 24px}.help-section{margin-bottom:24px}.help-section:last-child{margin-bottom:0}.help-section-title{font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--color-border)}.help-section p{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.8}.help-steps{padding-left:20px;display:flex;flex-direction:column;gap:10px}.help-steps li{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.7}.help-steps li strong{color:var(--color-text-primary)}.help-faq{display:flex;flex-direction:column;gap:14px}.help-faq-item{background:var(--color-bg-page);border-radius:var(--radius-md);padding:12px 14px}.help-faq-q{font-weight:600;color:var(--color-text-primary);margin-bottom:4px}.help-faq-a,.help-faq-q{font-size:var(--text-sm)}.help-faq-a{color:var(--color-text-secondary);line-height:1.7}.help-shortcuts{list-style:none;display:flex;flex-direction:column;gap:6px}.help-shortcuts li{font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;align-items:center;gap:8px}kbd{padding:2px 8px;color:var(--color-text-primary);background:#f1f5f9;border:1px solid var(--color-border);border-radius:4px;box-shadow:0 1px 0 var(--color-border);white-space:nowrap}.help-faq-a code,kbd{display:inline-block;font-size:var(--text-xs);font-family:var(--font-mono)}.help-faq-a code{padding:1px 6px;color:var(--color-primary);background:var(--color-primary-light);border-radius:3px}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--color-bg-sidebar);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.progress-section{padding:var(--space-md);border-bottom:1px solid var(--color-border)}.progress-bar{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:var(--space-sm)}.progress-fill{height:100%;background:var(--color-primary);border-radius:3px;transition:width .3s ease}.progress-text{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--color-text-secondary)}.progress-title{font-size:var(--text-sm);color:var(--color-text-primary);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-nav{border-bottom:1px solid var(--color-border);max-height:200px;overflow-y:auto}.lesson-nav-title{padding:var(--space-sm) var(--space-md);font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.lesson-list{padding:0 var(--space-sm) var(--space-sm)}.lesson-item{width:100%;display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm);border:none;background:transparent;text-align:left;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;font-size:var(--text-sm);color:var(--color-text-secondary)}.lesson-item:hover{background:var(--color-bg-page)}.lesson-item.current{color:var(--color-primary);border-left:3px solid var(--color-primary);padding-left:calc(var(--space-sm) - 3px)}.lesson-item.current.completed{background:#dcfce7;color:#166534;border-left-color:var(--color-success)}.lesson-item.completed{color:var(--color-text-primary)}.lesson-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;background:var(--color-bg-page);border-radius:50%;flex-shrink:0}.lesson-item.current .lesson-number{background:var(--color-primary);color:#fff}.lesson-item.completed .lesson-number,.lesson-item.current.completed .lesson-number{background:var(--color-success);color:#fff}.lesson-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-check{flex-shrink:0}.lesson-content{flex:1;overflow-y:auto;background:var(--color-bg-page)}.lesson-content-inner{padding:var(--space-lg)}.markdown-content{font-size:var(--text-base);line-height:1.7;color:var(--color-text-primary)}.markdown-content h1{font-size:var(--text-2xl);margin:0 0 var(--space-lg) 0}.markdown-content h1,.markdown-content h2{font-weight:600;color:var(--color-text-primary)}.markdown-content h2{font-size:var(--text-xl);margin:var(--space-lg) 0 var(--space-md)}.markdown-content h3{font-size:var(--text-lg);font-weight:600;margin:var(--space-md) 0 var(--space-sm);color:var(--color-text-primary)}.markdown-content p{margin-bottom:var(--space-md)}.markdown-content code{background:#f1f5f9;color:#e879f9;padding:2px 6px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px}.markdown-content pre{background:var(--color-bg-editor);color:var(--color-text-light);padding:var(--space-md);border-radius:var(--radius-lg);border-left:4px solid var(--color-primary);overflow-x:auto;margin:var(--space-md) 0;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;box-shadow:0 2px 4px rgba(0,0,0,.1)}.code-block-wrapper{position:relative}.code-copy-btn{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:hsla(0,0%,100%,.1);color:hsla(0,0%,100%,.6);border-radius:var(--radius-sm);cursor:pointer;opacity:0;transition:all .2s}.code-block-wrapper:hover .code-copy-btn{opacity:1}.code-copy-btn:hover{background:hsla(0,0%,100%,.2);color:hsla(0,0%,100%,.9)}.markdown-content pre.hljs{background:#282c34;padding:var(--space-md);border-left:4px solid var(--color-primary)}.markdown-content pre code.hljs{background:transparent;color:inherit;padding:0}.markdown-content blockquote{background:#f0fdf4;border-left:4px solid var(--color-success);border-radius:var(--radius-lg);padding:var(--space-md);margin:var(--space-md) 0}.markdown-content ul{margin:var(--space-sm) 0 var(--space-md) var(--space-lg)}.markdown-content li{margin:var(--space-xs) 0}.practice-section{background:var(--color-primary-light);border-radius:var(--radius-lg);padding:var(--space-md);margin-top:var(--space-lg)}.practice-title{font-weight:600;color:var(--color-primary);margin-bottom:var(--space-sm)}.lesson-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.btn-use-example{flex:1;height:40px;border:1px solid var(--color-border);background:var(--color-bg-sidebar);color:var(--color-text-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;transition:all .2s}.btn-use-example:hover{background:var(--color-bg-page);color:var(--color-text-primary)}.btn-complete{flex:1;height:40px;border:none;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);transition:all .2s}.btn-complete:hover:not(:disabled){background:var(--color-primary-dark)}.btn-complete:disabled{background:var(--color-success);cursor:default}.completion-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.completion-modal{background:#fff;border-radius:var(--radius-xl);padding:var(--space-xl);max-width:420px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:scaleIn .3s ease}.completion-icon{font-size:64px;margin-bottom:var(--space-md);display:block;animation:bounce .6s ease}.completion-modal h2{font-size:var(--text-2xl);font-weight:700;margin:0 0 var(--space-md);color:var(--color-text-primary)}.completion-modal p{font-size:var(--text-base);line-height:1.7;color:var(--color-text-secondary);margin:0 0 var(--space-lg);white-space:pre-line}.completion-btn{display:inline-flex;align-items:center;gap:var(--space-sm);height:44px;padding:0 var(--space-xl);border:none;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:background .2s}.completion-btn:hover{background:var(--color-primary-dark)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.editor-panel{flex-direction:column;min-height:120px;flex-shrink:0}.editor-panel,.editor-toolbar{display:flex;background:var(--color-bg-sidebar);border-bottom:1px solid var(--color-border)}.editor-toolbar{height:var(--toolbar-height);align-items:center;justify-content:space-between;padding:0 var(--space-md)}.toolbar-left{display:flex;gap:var(--space-sm)}.btn-tool{height:32px;padding:0 var(--space-sm);display:flex;align-items:center;gap:var(--space-xs);border:none;background:#f1f5f9;color:#475569;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;transition:background .15s}.btn-tool:hover{background:#e2e8f0}.btn-tool svg{flex-shrink:0}.btn-execute{height:36px;padding:0 20px;display:flex;align-items:center;gap:var(--space-sm);border:none;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;transition:all .2s}.btn-execute:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:var(--shadow-lg)}.btn-execute:disabled{cursor:not-allowed}.btn-execute.loading{background:var(--color-primary)}.btn-execute.success{background:var(--color-success)}.btn-execute.error{background:var(--color-error)}.btn-execute .spinner{width:14px;height:14px}.play-icon{flex-shrink:0}.editor-container{flex:1;overflow:hidden}.monaco-editor .line-numbers,.monaco-editor .line-numbers-margin,.monaco-editor .margin{background-color:#1e1e1e!important;color:#6b6b6b!important;font-family:Fira Code,Consolas,Monaco,monospace!important;font-size:14px!important;line-height:21px!important;border-right:none!important;padding-right:8px!important}.monaco-editor .line-numbers:hover{background-color:#1e1e1e!important;color:#858585!important}.monaco-editor .view-lines{padding-left:8px}.monaco-editor{background-color:#1e1e1e!important}.monaco-editor .view-overlays .current-line{background-color:#2a2a2a!important;border:none!important}.result-table-container{width:100%;overflow:auto}.result-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.result-table th{background:var(--color-bg-page);text-align:left;font-weight:600;color:var(--color-text-primary);position:sticky;top:0}.result-table td,.result-table th{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);white-space:nowrap}.result-table td{max-width:300px;overflow:hidden;text-overflow:ellipsis}.result-table tbody tr:nth-child(odd){background:var(--color-bg-result)}.result-table tbody tr:nth-child(2n){background:var(--color-bg-page)}.result-table tbody tr:hover{background:#f1f5f9}.result-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:80px;gap:var(--space-sm);color:var(--color-text-secondary);font-size:var(--text-sm)}.result-empty .spinner{width:20px;height:20px}.result-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:80px;gap:var(--space-sm);padding:var(--space-lg)}.error-message{color:var(--color-error);font-size:var(--text-sm);text-align:center}.result-more{padding:var(--space-sm) var(--space-md);text-align:center;font-size:var(--text-xs);color:var(--color-text-secondary);border-top:1px solid var(--color-border);background:var(--color-bg-page)}.table-view{display:flex;flex-direction:column;height:100%}.table-controls{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);background:var(--color-bg-page);flex-shrink:0}.table-select{width:200px;height:32px;padding:0 var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-sidebar);font-size:var(--text-sm);color:var(--color-text-primary);cursor:pointer}.table-select:focus{outline:none;border-color:var(--color-primary)}.btn-reset-db{height:32px;padding:0 var(--space-md);border:none;background:transparent;color:var(--color-primary);font-size:var(--text-sm);font-weight:500;display:flex;align-items:center;gap:4px;transition:color .15s}.btn-reset-db:hover{color:var(--color-danger)}.table-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-sm);color:var(--color-text-secondary);font-size:var(--text-sm)}.table-view-tabs{display:flex;border-bottom:1px solid #e5e7eb;padding:0 12px;gap:0;flex-shrink:0;background:var(--color-bg-page)}.table-view-tab{padding:8px 16px;cursor:pointer;background:none;color:#6b7280;font-size:14px;border:none;border-bottom:2px solid transparent;display:flex;align-items:center;gap:4px;transition:all .15s ease}.table-view-tab:hover{color:#374151}.table-view-tab.active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:500}.table-view-content{flex:1;overflow:auto;padding:8px 12px}.table-structure-panel{height:100%;overflow:auto}.structure-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.structure-table th{background:var(--color-bg-sidebar);text-align:left;font-weight:600;position:sticky;top:0;z-index:1}.structure-table td,.structure-table th{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.type-cell{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--text-xs)}.table-data-panel{display:flex;flex-direction:column;height:100%}.table-data-scroll{flex:1;overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{background:var(--color-bg-sidebar);text-align:left;font-weight:600;position:sticky;top:0;z-index:1}.data-table td,.data-table th{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);white-space:nowrap}.data-table td{max-width:200px;overflow:hidden;text-overflow:ellipsis}.data-table tbody tr:nth-child(odd){background:var(--color-bg-result)}.data-table tbody tr:nth-child(2n){background:var(--color-bg-page)}.data-table tbody tr:hover{background:#f1f5f9}.data-more{padding:var(--space-sm) var(--space-md);text-align:center;font-size:var(--text-xs);color:var(--color-text-secondary);background:var(--color-bg-sidebar);border-top:1px solid var(--color-border);flex-shrink:0}.operation-log{padding:var(--space-sm)}.log-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:80px;gap:var(--space-sm);color:var(--color-text-secondary);font-size:var(--text-sm)}.log-item{background:var(--color-bg-sidebar);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);cursor:pointer;transition:all .15s}.log-item.expanded,.log-item:hover{background:var(--color-bg-page)}.log-header{display:flex;align-items:center;gap:var(--space-sm)}.log-index{width:32px;text-align:right;font-size:var(--text-xs);color:var(--color-text-secondary)}.log-index,.log-status-icon{flex-shrink:0}.log-sql{flex:1;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-time{flex-shrink:0}.log-summary,.log-time{font-size:var(--text-xs);color:var(--color-text-secondary)}.log-summary{margin-top:var(--space-xs);padding-left:56px}.log-item.error .log-summary{color:var(--color-error)}.log-details{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.detail-label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-xs)}.log-error-raw pre,.log-full-sql pre{background:var(--color-bg-editor);color:var(--color-text-light);padding:var(--space-sm);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);overflow-x:auto;white-space:pre-wrap;word-break:break-all}.log-error-raw pre{color:#ff79c6}.log-error-raw{margin-top:var(--space-sm)}.bottom-panel{flex:1;display:flex;flex-direction:column;min-height:120px;background:var(--color-bg-result);overflow:hidden}.result-tabs{height:var(--tabbar-height);padding:0 var(--space-md);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-bg-sidebar);gap:var(--space-md)}.result-tabs,.tab-btn{display:flex;align-items:center}.tab-btn{height:100%;padding:0 var(--space-sm);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;gap:4px;position:relative;transition:color .15s}.tab-btn:hover{color:var(--color-text-primary)}.tab-btn.active{color:var(--color-primary)}.tab-btn.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--color-primary);border-radius:2px 2px 0 0}.result-content{flex:1;overflow:auto}.statusbar{height:var(--statusbar-height);background:var(--color-bg-sidebar);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md);font-size:var(--text-xs);color:var(--color-text-secondary)}.status-left,.status-right{display:flex;align-items:center;gap:var(--space-md)}.status-item{display:flex;align-items:center;gap:var(--space-xs)}.status-connected{color:var(--color-success)}.v-resizer{width:6px;height:100%;background:#e5e7eb;cursor:col-resize;flex-shrink:0;position:relative;transition:background .2s;display:flex;align-items:center;justify-content:center}.v-resizer.dragging,.v-resizer:hover{background:var(--color-primary)}.v-resizer-handle{display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .2s;pointer-events:none}.v-resizer.dragging .v-resizer-handle,.v-resizer:hover .v-resizer-handle{opacity:1}.v-resizer-handle .handle-dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-light)}