*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#1e1e1e;--bg-secondary:#252526;--bg-tertiary:#2d2d30;--bg-hover:#2a2d2e;--border:#3e3e42;--text-primary:#cccccc;--text-secondary:#9b9b9b;--text-muted:#6d6d6d;--accent:#007acc;--accent-hover:#1e8eda;--accent-soft:rgba(0, 122, 204, 0.15);--success:#3fb950;--error:#f85149;--warning:#d29922;--code-bg:#1e1e1e;--input-bg:#1e1e1e;--shadow:0 8px 24px rgba(0, 0, 0, 0.5);--header-bg:#3c3c3c}body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:.82rem;background:var(--bg-primary);color:var(--text-primary);line-height:1.5;height:100vh;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:.5rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{width:24px;height:24px;background:var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.9rem}.logo h1{font-size:1rem;font-weight:500;letter-spacing:-.3px;color:var(--text-primary)}.badge{background:var(--bg-tertiary);color:var(--text-secondary);padding:.15rem .5rem;border-radius:20px;font-size:.7rem;border:1px solid var(--border)}.header-actions{display:flex;gap:.3rem}.btn-icon{background:0 0;border:1px solid var(--border);color:var(--text-secondary);padding:.4rem .7rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.main{flex:1;display:flex;overflow:hidden}.sidebar{width:250px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-header{padding:.6rem .8rem;border-bottom:1px solid var(--border);font-weight:500;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;letter-spacing:.3px}.btn-small{background:0 0;border:1px solid var(--border);color:var(--text-secondary);padding:.2rem .5rem;border-radius:4px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:.2rem;transition:all .2s}.btn-small i{font-size:.9rem}.btn-small:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.db-selector{position:relative;margin:.4rem .4rem}.db-name{background:var(--bg-tertiary);padding:.4rem .4rem;border-radius:0;font-size:.85rem;font-weight:500;border:1px solid var(--border);display:flex;align-items:center;gap:.4rem;cursor:pointer;transition:all .2s;justify-content:flex-start}.db-name:hover{border-color:var(--accent);background:var(--bg-hover)}.db-name i:last-child{margin-left:auto;font-size:.8rem;color:var(--text-muted)}.db-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;margin-top:.2rem;z-index:100;box-shadow:var(--shadow);max-height:200px;overflow-y:auto;display:none}.db-dropdown.show{display:block}.db-option{padding:.5rem .8rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s;border-bottom:1px solid var(--border);font-size:.8rem}.db-option:last-child{border-bottom:none}.db-option:hover{background:var(--bg-hover);color:var(--text-primary)}.db-option.active{background:var(--accent-soft);color:var(--accent)}.db-size{margin-left:auto;font-size:.7rem;color:var(--text-muted)}.db-option i{width:18px;text-align:center;font-size:.9rem}.db-separator{padding:.25rem 0}.db-separator hr{border:none;border-top:1px solid var(--border);margin:0}.db-option.choose-db{color:var(--text-muted);font-style:italic}.db-option.choose-db:hover{background:0 0;color:var(--text-muted);cursor:default}.tree{flex:1;overflow-y:auto;padding:0}.tree-section{margin-bottom:0}.tree-section>.tree-item{font-weight:600;color:var(--text-primary);text-transform:uppercase;font-size:.7rem;letter-spacing:.5px;padding:.4rem .8rem;background:var(--bg-tertiary);border-left:none;margin-bottom:0;cursor:default;border-bottom:1px solid var(--border)}.tree-section>.tree-item i{font-size:.8rem;color:var(--text-secondary);width:18px}.tree-section>.tree-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tree-section>.tree-item:hover i{color:var(--text-secondary)}.tree-item{padding:.25rem .8rem .25rem 1.2rem;margin:0;cursor:pointer;display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.8rem;width:100%;border-left:2px solid transparent;transition:all .1s ease}.tree-item:hover{background:var(--bg-hover);color:var(--text-primary)}.tree-item.active{background:var(--accent-soft);color:var(--accent);border-left:2px solid var(--accent)}.tree-item i{width:18px;font-size:.8rem;text-align:center;color:var(--text-muted);flex-shrink:0}.tree-item:hover i{color:var(--text-secondary)}.tree-item.active i{color:var(--accent)}.tree-item.empty-section{color:var(--text-muted);font-style:italic;cursor:default}.tree-item.empty-section:hover{background:0 0;color:var(--text-muted)}.tree-item.empty-section i{color:var(--text-muted);opacity:.5}.empty-text{color:var(--text-muted);font-style:italic}.tree-children{margin-left:0;padding-left:.5rem}.tree-children .tree-item{padding-left:1.6rem}.tree-section:not(:last-child){border-bottom:1px solid var(--border);padding-bottom:0;margin-bottom:0}.tree-item[data-table] i.fa-table{color:#519aba}.tree-item[data-table] i.fa-box{color:#f9c859}.tree-item[data-table] i.fa-shopping-cart{color:#6cc644}.tree-item i.fa-eye{color:#6c71c4}.tree-item i.fa-clock{color:#f5871f}.workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary)}.editor-section{padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;font-size:.75rem;color:var(--text-secondary)}.editor-header i{margin-right:.3rem;font-size:.9rem}.editor-actions{display:flex;gap:.3rem}.editor-actions .btn-small{padding:.25rem .6rem;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px}.editor-actions .btn-small i{font-size:.9rem;margin:0;line-height:1}.sql-editor{width:100%;min-height:180px;background:var(--input-bg);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-family:'Fira Code','Cascadia Code','JetBrains Mono',monospace;font-size:.82rem;padding:.5rem .8rem;resize:vertical;outline:0}.sql-editor:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.sql-editor:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent);padding:.4rem 1.2rem;font-weight:500;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;border-radius:4px;box-shadow:none;outline:0}.btn-primary i{font-size:.95rem}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{background:var(--bg-tertiary);border-color:var(--border);color:var(--text-muted);cursor:not-allowed}.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shortcut-hint{color:var(--text-muted);font-size:.7rem}.shortcut-hint i{margin-right:.2rem;font-size:.8rem}.results-section{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:.6rem 1rem}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:var(--text-secondary);font-size:.75rem}.results-header i{margin-right:.3rem;font-size:.9rem}.results-actions{display:flex;gap:.3rem}.results-actions .btn-small{padding:.25rem .6rem;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:28px;height:28px}.results-actions .btn-small i{font-size:1rem;margin:0;line-height:1}.table-wrapper{flex:1;overflow:auto;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary)}.empty-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:var(--text-secondary);height:100%;min-height:300px}.empty-state h3,.error-state h3{margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.empty-state p,.error-state p{font-size:.85rem;color:var(--text-muted);max-width:300px}.error-state i{color:var(--error)}.null-value{color:var(--text-muted);font-style:italic;font-size:.8rem}.data-table{width:100%;border-collapse:collapse;font-size:.82rem}.data-table th i{display:none}.data-table th{text-align:left;padding:.45rem .8rem;background:var(--bg-tertiary);color:var(--text-primary);font-weight:600;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;font-size:.8rem;border-right:1px solid var(--border)}.data-table th:last-child{border-right:none}.data-table td{padding:.3rem .8rem;border-bottom:1px solid var(--border);color:var(--text-primary);border-right:1px solid var(--border)}.data-table td:last-child{border-right:none}.data-table tr:hover td{background:var(--bg-hover)}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;padding:.25rem 0;color:var(--text-secondary);font-size:.75rem;position:relative}.pagination-info{color:var(--text-muted);min-width:200px}.pagination-controls{display:flex;gap:8px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}.pagination-limit{min-width:100px;text-align:right}.page-separator{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;color:var(--text-muted);font-size:.8rem}.pagination-controls .btn-small{min-width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;margin:0 2px}.pagination-controls .btn-small.active{background:var(--accent);color:#fff;border-color:var(--accent)}.page-size{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;padding:.4rem 2rem .4rem 1rem;font-size:.8rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%239b9b9b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:12px;min-width:70px}.page-size:hover{border-color:var(--accent)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border)}@media (max-width:768px){.sidebar{width:200px}.logo h1{display:none}}@media (max-width:640px){.sidebar{display:none}}.db-name.disabled{opacity:.5;cursor:not-allowed}.db-name.disabled:hover{border-color:var(--border);background:var(--bg-tertiary)}.db-option.empty-section{color:var(--text-muted);font-style:italic;cursor:default}.db-option.empty-section:hover{background:0 0;color:var(--text-muted)}.db-option .db-size{margin-left:auto;font-size:.7rem;color:var(--accent)}body.light{--bg-primary:#ffffff;--bg-secondary:#f6f8fa;--bg-tertiary:#eaeef2;--bg-hover:#e1e4e8;--border:#d0d7de;--text-primary:#1f2328;--text-secondary:#656d76;--text-muted:#6e7781;--accent:#0969da;--accent-hover:#0a6bdd;--accent-soft:rgba(9, 105, 218, 0.1);--success:#1a7f37;--error:#cf222e;--warning:#9a6700;--code-bg:#f0f3f7;--input-bg:#ffffff;--shadow:0 8px 24px rgba(140,149,159,0.2)}body.light .sql-editor{background:var(--input-bg);color:var(--text-primary);border-color:var(--border)}body.light .db-name,body.light .db-option{background:var(--bg-secondary)}body.light .db-option:hover{background:var(--bg-hover)}body.light .tree-item:hover{background:var(--bg-hover)}body.light .data-table th{background:var(--bg-tertiary);color:var(--text-primary)}body.light .data-table td{color:var(--text-primary)}body.light .data-table tr:hover td{background:var(--bg-hover)}body.light .btn-icon,body.light .btn-small{border-color:var(--border);color:var(--text-secondary)}body.light .btn-icon:hover,body.light .btn-small:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}body.light .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}body.light .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}body.light .empty-state,body.light .error-state{background:var(--bg-secondary);border-color:var(--border)}body.light .empty-state p,body.light .error-state p{color:var(--text-secondary)}body.light .null-value{color:var(--text-muted)}#deleteDbBtn{display:inline-flex}#deleteDbBtn.hidden{display:none}