@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap";:root{--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-title:"Outfit", sans-serif;--font-mono:"Fira Code", monospace;--bg-main:#0b0e13;--bg-card:#161a22;--bg-input:#1f232d;--bg-hover:#272b35;--border-color:#ffffff14;--border-focus:#3c83f6;--text-main:#f1f5f9;--text-muted:#94a3b8;--text-dark:#627084;--color-primary:#3c83f6;--color-primary-hover:#5593f7;--color-success:#22c35d;--color-danger:#e8304f;--color-warning:#f59f0a;--color-info:#0da2e7;--db-postgres:#336791;--db-supabase:#3ecf8e;--db-mysql:#00758f;--db-sqlserver:#e31c1c;--db-mongodb:#13aa52}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#303441;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#414858}h1,h2,h3,h4,h5{font-family:var(--font-title);letter-spacing:-.02em;font-weight:600}button{font-family:var(--font-sans);cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-primary), #0b64f4);color:#fff;box-shadow:0 4px 14px #2563eb4d}.btn-primary:hover{background:linear-gradient(135deg, var(--color-primary-hover), #2474f5);transform:translateY(-1px);box-shadow:0 6px 20px #2563eb66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-main)}.btn-secondary:hover{background:#303441;border-color:#ffffff26}.btn-danger{background:linear-gradient(135deg, var(--color-danger), #cf1736);color:#fff;box-shadow:0 4px 14px #ef44444d}.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ef444466}.btn-success{background:linear-gradient(135deg, var(--color-success), #1b9849);color:#fff;box-shadow:0 4px 14px #10b9814d}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98166}.form-group{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.form-group label{color:var(--text-muted);font-size:.85rem;font-weight:500}input,select,textarea{font-family:var(--font-sans);background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-main);border-radius:8px;outline:none;padding:.65rem .8rem;font-size:.95rem;transition:all .2s}input:focus,select:focus,textarea:focus{border-color:var(--border-focus);background-color:#262a36;box-shadow:0 0 0 3px #2563eb26}input::placeholder{color:var(--text-dark)}.app-container{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-card);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;width:280px;height:100%;display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.logo{font-size:1.3rem;font-family:var(--font-title);background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.6rem;font-weight:800;display:flex}.sidebar-content{flex:1;padding:1rem;overflow-y:auto}.sidebar-section{margin-bottom:1.5rem}.sidebar-section-title{text-transform:uppercase;color:var(--text-dark);letter-spacing:.05em;justify-content:space-between;align-items:center;margin-bottom:.6rem;padding-left:.5rem;font-size:.75rem;font-weight:700;display:flex}.sidebar-list{flex-direction:column;gap:.25rem;display:flex}.sidebar-item{color:var(--text-muted);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:.6rem;width:100%;padding:.6rem .8rem;font-size:.9rem;transition:all .15s;display:flex}.sidebar-item:hover{background-color:var(--bg-hover);color:var(--text-main)}.sidebar-item.active{color:#60a5fa;background-color:#2563eb26;font-weight:500}.sidebar-footer{border-top:1px solid var(--border-color);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.main-content{background-color:var(--bg-main);flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.main-header{border-bottom:1px solid var(--border-color);background-color:var(--bg-card);justify-content:space-between;align-items:center;height:64px;padding:0 1.5rem;display:flex}.main-header-info{align-items:center;gap:.8rem;display:flex}.db-badge{text-transform:uppercase;color:#fff;border-radius:20px;padding:.25rem .6rem;font-size:.75rem;font-weight:600}.badge-postgres{background-color:var(--db-postgres)}.badge-supabase{background-color:var(--db-supabase)}.badge-mysql{background-color:var(--db-mysql)}.badge-sqlserver{background-color:var(--db-sqlserver)}.badge-mongodb{background-color:var(--db-mongodb)}.content-body{flex-direction:column;flex:1;display:flex;overflow:hidden}.toolbar{border-bottom:1px solid var(--border-color);background-color:#1e293b26;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.toolbar-actions{align-items:center;gap:.75rem;display:flex}.filters-wrapper{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.filter-badge{background-color:var(--bg-hover);border:1px solid var(--border-color);border-radius:6px;align-items:center;gap:.4rem;padding:.35rem .6rem;font-size:.8rem;display:flex}.filter-badge button{color:var(--color-danger);background:0 0;border:none;padding:0;font-size:.8rem}.grid-container{background-color:var(--bg-main);flex:1;position:relative;overflow:auto}.data-table{border-collapse:collapse;text-align:left;width:100%;font-size:.85rem}.data-table th{background-color:var(--bg-card);border-bottom:2px solid var(--border-color);z-index:10;color:var(--text-muted);white-space:nowrap;padding:.8rem 1rem;font-weight:600;position:sticky;top:0}.data-table th.sortable{cursor:pointer}.data-table th.sortable:hover{color:var(--text-main);background-color:var(--bg-hover)}.data-table td{border-bottom:1px solid var(--border-color);white-space:nowrap;text-overflow:ellipsis;max-width:300px;padding:.75rem 1rem;overflow:hidden}.data-table tr:hover{background-color:#ffffff05}.row-actions{gap:.5rem;display:flex}.row-actions button{border-radius:4px;padding:.3rem .5rem;font-size:.75rem}.pk-badge{color:#f59e0b;background-color:#f59e0b26;border:1px solid #f59e0b4d;border-radius:4px;margin-left:.4rem;padding:.1rem .3rem;font-size:.65rem}.null-text{color:var(--text-dark);font-style:italic}.query-logger{border-top:1px solid var(--border-color);background-color:#08090d;flex-direction:column;flex-shrink:0;height:200px;display:flex}.query-logger-header{border-bottom:1px solid var(--border-color);color:var(--text-muted);text-transform:uppercase;background-color:#101318;justify-content:space-between;align-items:center;padding:.5rem 1rem;font-size:.75rem;font-weight:700;display:flex}.query-logger-content{font-family:var(--font-mono);color:#a7f3d0;white-space:pre-wrap;background-color:#0000;flex:1;padding:1rem;font-size:.85rem;line-height:1.5;overflow-y:auto}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background-color:#000000bf;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-container{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;width:500px;max-width:90vw;max-height:85vh;animation:.25s cubic-bezier(.16,1,.3,1) slideUp;display:flex;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0006}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;display:flex}.modal-body{flex:1;padding:1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-color);background-color:#1e293b1a;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;display:flex}.connection-screen{background-color:var(--bg-main);justify-content:center;align-items:center;width:100vw;height:100vh;padding:2rem;display:flex;overflow-y:auto}.connection-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;grid-template-columns:1fr 1fr;width:800px;max-width:100%;display:grid;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}@media (width<=768px){.connection-card{grid-template-columns:1fr}}.connection-info-panel{border-right:1px solid var(--border-color);background:linear-gradient(135deg,#1e293b,#0f172a);flex-direction:column;justify-content:space-between;padding:3rem 2.5rem;display:flex}.connection-form-panel{flex-direction:column;padding:2.5rem;display:flex}.db-selector{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.5rem;display:grid}.db-selector-btn{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.db-selector-btn:hover{background-color:var(--bg-hover);color:var(--text-main);border-color:#ffffff26}.db-selector-btn.active{border-color:var(--border-focus);color:var(--text-main);background-color:#2563eb1f}.db-selector-btn.active.postgres{border-color:var(--db-postgres);background-color:#33679126}.db-selector-btn.active.supabase{border-color:var(--db-supabase);background-color:#3ecf8e26}.db-selector-btn.active.mysql{border-color:var(--db-mysql);background-color:#00758f26}.db-selector-btn.active.sqlserver{border-color:var(--db-sqlserver);background-color:#e31c1c26}.db-selector-btn.active.mongodb{border-color:var(--db-mongodb);background-color:#13aa5226}.pagination{align-items:center;gap:.75rem;display:flex}.pagination span{color:var(--text-muted);font-size:.8rem}.pagination button{padding:.35rem .7rem;font-size:.8rem}.badge{border-radius:4px;padding:.2rem .5rem;font-size:.7rem;font-weight:600}.badge-danger{color:#f87171;background-color:#ef444426;border:1px solid #ef44444d}.badge-success{color:#34d399;background-color:#10b98126;border:1px solid #10b9814d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}