:root {
  --ink:#203340;
  --muted:#77838d;
  --green:#087e78;
  --border:#e1e7ec;
  --sidebar:252px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f5f7fa;
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-size:14px
}
button,input,select,textarea {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible {
  outline:3px solid #33b3a9;
  outline-offset:3px
}
button {
  font:inherit
}
.app-header {
  height:68px;
  background:white;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  gap:8px;
  position:sticky;
  top:0;
  z-index:1020
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:750;
  letter-spacing:-.9px;
  color:#153842;
  text-decoration:none
}
.brand-mark {
  display:block;
  width:40px;
  height:40px;
  flex-shrink:0
}
.brand-wordmark {
  line-height:1;
  white-space:nowrap
}
.brand-wordmark span {
  color:#087e78;
  font-weight:550
}
.header-divider {
  height:22px;
  width:1px;
  background:var(--border)
}
.private-label {
  color:#52736c;
  font-size:11px;
  white-space:nowrap;
  background:#edf6f1;
  padding:7px 9px;
  border-radius:20px
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#28a078;
  margin-right:5px
}
.icon-button {
  font-size:21px;
  padding:5px;
  color:#566a76;
  min-width:40px
}
.sidebar {
  --bs-offcanvas-width:290px;
  background:#fff!important;
  border-right:1px solid var(--border)!important
}
.sidebar .offcanvas-body {
  display:flex;
  flex-direction:column;
  padding:26px 18px
}
.sidebar-eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  color:#8b969f;
  font-weight:700;
  margin-bottom:12px
}
.database-button {
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:#edf6f4;
  border-radius:9px;
  color:#18695f;
  padding:12px 10px;
  text-align:left;
  font-weight:650;
  width:100%
}
.database-button>span:first-child {
  font-size:24px
}
.database-button small {
  display:block;
  font-size:10px;
  margin-top:4px;
  color:#76928c;
  font-weight:400
}
.object-count {
  background:#f0f3f5;
  border-radius:5px;
  padding:2px 6px;
  font-size:11px;
  color:#7b8993
}
.tree-item {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:transparent;
  border:0;
  text-align:left;
  padding:11px 10px;
  color:#627481;
  border-radius:7px;
  min-height:44px
}
.tree-item .tree-name {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:13px ui-monospace,monospace
}
.tree-item small {
  font-size:9px;
  color:#93a2aa;
  margin-left:auto
}
.tree-item:hover {
  background:#f6f8fa
}
.tree-item.active {
  background:#e9f4f1;
  color:#087e78;
  font-weight:650;
  box-shadow:inset 3px 0 #0d8d81
}
.sidebar-foot {
  margin-top:34px;
  border-top:1px solid var(--border);
  padding-top:18px;
  color:#8a979f;
  text-align:center
}
.sidebar-foot .btn {
  color:#71838e
}
.workspace {
  min-width:0;
  flex:1;
  padding:20px 16px 12px
}
.breadcrumb-line {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#8b969e;
  margin-bottom:24px;
  min-width:0
}
.breadcrumb-line button {
  border:0;
  background:transparent;
  color:#61867d;
  padding:0
}
.breadcrumb-line>span:last-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:24px
}
.page-heading h1 {
  font-size:clamp(22px,4vw,30px);
  font-weight:750;
  letter-spacing:-.6px;
  margin:6px 0 8px;
  overflow-wrap:anywhere
}
.page-heading p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  line-height:1.6
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:700;
  color:var(--green)
}
.btn {
  font-size:12px;
  min-height:42px;
  white-space:nowrap;
  border-radius:7px;
  padding:9px 13px;
  font-weight:550
}
.btn-sm {
  min-height:36px;
  padding:6px 10px
}
.btn-primary {
  --bs-btn-bg:#087e78;
  --bs-btn-border-color:#087e78;
  --bs-btn-hover-bg:#076961;
  --bs-btn-hover-border-color:#076961;
  --bs-btn-active-bg:#065a55;
  --bs-btn-active-border-color:#065a55;
  --bs-btn-disabled-bg:#78a6a0;
  --bs-btn-disabled-border-color:#78a6a0
}
.btn-light {
  background:#f2f5f7;
  color:#667a86;
  border-color:#e9eef1
}
.btn-outline-secondary {
  border-color:#d7e0e6;
  color:#627782
}
.form-control,.form-select {
  border-color:#dce4e9;
  font-size:16px;
  min-height:42px
}
.form-control:focus,.form-select:focus {
  border-color:#48a59a;
  box-shadow:0 0 0 3px #38a89918
}
.workspace-tabs {
  display:flex;
  gap:8px;
  border-bottom:1px solid #dce4e9;
  overflow-x:auto;
  white-space:nowrap;
  margin-bottom:24px;
  scrollbar-width:thin;
  overscroll-behavior-x:contain
}
.workspace-tab {
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:13px 14px 16px;
  color:#85919b;
  min-height:50px;
  flex-shrink:0;
  position:relative;
  font-size:12px;
  font-weight:550
}
.workspace-tab span {
  font-size:16px
}
.workspace-tab.active {
  color:var(--green);
  box-shadow:inset 0 -3px var(--green)
}
.workspace-tab:hover {
  color:var(--green)
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:24px
}
.stat-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:11px;
  padding:15px 12px;
  min-width:0
}
.stat-card>span {
  display:block;
  font-size:11px;
  color:#798b94
}
.stat-card strong {
  display:block;
  font-size:27px;
  line-height:1.3;
  margin:10px 0 6px;
  font-weight:650
}
.stat-card small {
  display:none;
  font-size:10px;
  color:#9aa5ae
}
.surface {
  background:#fff;
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 2px 3px #26404b02;
  min-width:0
}
.surface-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 16px;
  border-bottom:1px solid #edf0f3
}
.surface-heading h2 {
  font-size:14px;
  font-weight:650;
  margin:0
}
.surface-heading p {
  font-size:11px;
  color:#8997a1;
  margin:7px 0 0
}
.surface-footer {
  border-top:1px solid #edf0f3;
  padding:14px 16px;
  font-size:10px;
  color:#8b99a3
}
.table-responsive {
  max-width:100%;
  overscroll-behavior-x:contain;
  scrollbar-width:thin
}
.table {
  font-size:12px;
  margin:0;
  white-space:nowrap;
  --bs-table-color:#4b6472;
  --bs-table-hover-bg:#f7faf9
}
.table thead th {
  font-size:10px;
  font-weight:600;
  background:#f9fbfc;
  color:#83919c;
  border-bottom:1px solid #e8edf1;
  padding:12px 16px
}
.table td {
  padding:13px 16px;
  border-color:#eef2f5;
  vertical-align:middle;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis
}
.table tbody tr:last-child td {
  border-bottom:0
}
.table .name-link {
  color:#2d706c;
  border:0;
  background:transparent;
  font:600 12px ui-monospace,monospace;
  padding:7px 0;
  text-align:left
}
.type-badge {
  font:10px ui-monospace,monospace;
  color:#7c8e9a;
  background:#f0f4f6;
  border-radius:4px;
  padding:4px 7px
}
.pk-badge,.fk-badge {
  font:700 9px system-ui;
  border-radius:4px;
  padding:3px 5px;
  display:inline-block;
  vertical-align:middle
}
.pk-badge {
  background:#fff3cc;
  color:#9a780b
}
.fk-badge {
  background:#e8effd;
  color:#5b7cb5
}
.null-cell {
  color:#acb7bd;
  font-style:italic
}
.row-actions {
  display:flex;
  gap:7px
}
.row-actions .btn {
  min-width:42px;
  min-height:38px;
  padding:6px 9px;
  font-size:11px
}
.empty-state {
  text-align:center;
  padding:45px 20px;
  color:#8a9aa6
}
.empty-state strong {
  display:block;
  color:#59717c;
  font-size:14px;
  margin-bottom:8px
}
.helper-text {
  font-size:11px;
  color:#8998a2;
  line-height:1.8
}
.search-form {
  display:flex;
  gap:7px;
  flex:1;
  max-width:450px;
  min-width:0
}
.search-form .form-control {
  width:100%;
  min-width:0;
  font-size:13px
}
.query-preview {
  padding:12px 16px;
  background:#f6faf9;
  border-bottom:1px solid #e7efed;
  font:11px/1.7 ui-monospace,monospace;
  color:#62847c;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.pagination-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px
}
.pagination-footer .form-select {
  width:65px;
  font-size:12px;
  min-height:36px
}
.engine-badge {
  font:11px ui-monospace,monospace;
  background:#eff5f5;
  color:#6c8887;
  padding:5px 9px;
  border-radius:5px
}
.snippet-bar {
  display:flex;
  gap:7px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding-bottom:8px;
  scrollbar-width:thin
}
.snippet {
  flex:0 0 auto;
  font:600 11px ui-monospace,monospace;
  color:#628077;
  background:#f0f5f3;
  border:1px solid #e0eae6;
  min-height:40px
}
.snippet:hover {
  background:#dcece7
}
.editor-shell {
  border-radius:9px;
  overflow:hidden;
  background:#212121
}
.editor-title {
  color:#90a5a0;
  padding:10px 14px;
  font:11px monospace;
  border-bottom:1px solid #ffffff10
}
.editor-title span {
  display:inline-block;
  width:6px;
  height:6px;
  background:#54b0a0;
  border-radius:50%;
  margin-right:7px
}
.CodeMirror {
  height:280px;
  font:16px/1.8 ui-monospace,Consolas,monospace;
  padding-top:12px;
  max-width:100%
}
.CodeMirror textarea {
  font-size:16px!important
}
#sql-editor {
  width:100%;
  height:280px;
  background:#212121;
  color:white;
  border:0;
  padding:14px;
  font:16px/1.8 monospace
}
.run-button {
  min-width:145px
}
.ddl-preview {
  margin:0;
  padding:20px;
  color:#4c776b;
  background:#f9fbfa;
  font:12px/1.9 ui-monospace,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.danger-zone {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:20px;
  border:1px solid #efdddd;
  border-radius:10px;
  background:#fffafa
}
.danger-zone strong {
  font-size:12px
}
.danger-zone p {
  margin:5px 0 0;
  color:#a38d8d;
  font-size:11px
}
.record-fields {
  display:grid;
  gap:18px
}
.record-field {
  display:grid;
  gap:9px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafcfd
}
.field-label {
  display:flex;
  align-items:center;
  gap:8px;
  font:600 13px ui-monospace,monospace;
  overflow-wrap:anywhere
}
.field-controls {
  display:grid;
  grid-template-columns:1fr;
  gap:8px
}
.field-controls select {
  font-size:13px
}
.field-meta {
  font-size:10px;
  color:#899ba5
}
.form-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:24px
}
.new-column {
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  margin-bottom:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 115px;
  gap:10px;
  align-items:center
}
.new-column .form-control,.new-column .form-select {
  font-size:14px
}
.column-options {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:18px
}
.column-options .form-check-label {
  font-size:12px
}
.column-options .btn {
  margin-left:auto
}
.form-check-input {
  width:18px;
  height:18px;
  margin-top:0
}
.form-check {
  display:flex;
  gap:7px;
  align-items:center
}
.workspace-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
  padding:15px 0;
  font-size:10px;
  color:#a0aab2
}
.alert {
  font-size:12px;
  overflow-wrap:anywhere
}
.modal-content {
  border:0;
  border-radius:13px
}
.modal-title {
  font-weight:650
}
.modal-header,.modal-footer {
  border-color:#edf1f4
}
.modal-body .form-label {
  font-size:12px
}
.list-detail {
  margin:0;
  padding:12px 0;
  border-bottom:1px solid #eef2f4;
  font-size:12px;
  overflow-wrap:anywhere
}
.list-detail:last-child {
  border:0
}
.list-detail small {
  display:block;
  color:#8a99a2;
  margin-top:5px
}
.sql-result-heading {
  font-size:12px;
  font-weight:600;
  margin:18px 0 12px
}
.page-heading>.btn {
  display:none
}
.view-panel[hidden] {
  display:none!important
}
@media(min-width:576px) {
  .workspace {
    padding:26px
  }
  .field-controls {
    grid-template-columns:180px minmax(0,1fr)
  }
  .stat-card {
    padding:20px
  }
  .stat-card small {
    display:block
  }
  .page-heading>.btn {
    display:block
  }
}
@media(min-width:992px) {
  .app-layout {
    display:flex;
    align-items:flex-start
  }
  .sidebar {
    width:var(--sidebar)!important;
    flex:0 0 var(--sidebar);
    height:calc(100vh - 68px);
    position:sticky;
    top:68px;
    overflow-y:auto
  }
  .sidebar .offcanvas-body {
    min-height:100%;
    display:flex!important
  }
  .sidebar-foot {
    margin-top:auto;
    padding-top:25px
  }
  .workspace {
    padding:30px 34px;
    max-width:1650px
  }
  .app-header {
    padding:0 26px
  }
  .private-label {
    font-size:11px
  }
  .stats-grid {
    gap:18px
  }
  .stat-card strong {
    font-size:32px
  }
  .surface-heading {
    padding:20px 22px
  }
  .surface-footer {
    padding:15px 22px
  }
  .record-fields {
    max-width:900px
  }
  .CodeMirror {
    height:320px
  }
  .table td {
    padding:14px 22px
  }
  .table thead th {
    padding:13px 22px
  }
  .surface-heading .btn {
    flex-shrink:0
  }
}
@media(max-width:575px) {
  .app-header {
    padding:0 12px;
    height:60px
  }
  .brand {
    font-size:22px;
    gap:8px
  }
  .brand-mark {
    width:34px;
    height:34px
  }
  .private-label {
    font-size:9px;
    padding:6px 8px
  }
  .workspace-tabs {
    margin-left:-16px;
    margin-right:-16px;
    padding:0 10px
  }
  .workspace-tab {
    padding-left:12px;
    padding-right:12px
  }
  .surface-heading {
    align-items:flex-start
  }
  .surface-heading:has(.search-form) {
    flex-direction:column
  }
  .search-form {
    width:100%;
    max-width:none
  }
  .stat-card>span {
    font-size:9px
  }
  .new-column {
    grid-template-columns:minmax(0,1fr) 100px
  }
  .page-heading p {
    max-width:290px
  }
  .record-field {
    padding:12px
  }
}
:is(th,td).actions-sticky {
  position:sticky;
  left:0;
  background:#fff;
  z-index:1;
  border-right:1px solid #edf1f4
}
.table thead th.actions-sticky {
  background:#f9fbfc;
  z-index:2
}
body[aria-busy="true"] {
  cursor:progress
}
#sql-results {
  scroll-margin-top:84px
}
.modal-dialog-scrollable .modal-content>form {
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden
}
.modal-dialog-scrollable .modal-body {
  overflow-y:auto
}
:root {
  scroll-behavior:smooth
}
.page-heading p {
  font-size:13px
}
.table {
  font-size:13px
}
.table thead th {
  font-size:11px
}
.table .name-link {
  font-size:13px
}
.workspace-footer,.surface-footer {
  font-size:11px
}
.helper-text {
  font-size:12px
}
.stat-card small {
  font-size:11px
}
.sidebar-foot .small {
  font-size:11px
}
@media(max-width:575px) {
  .page-heading {
    flex-wrap:wrap
  }
  .page-heading>div {
    flex:1 1 100%
  }
  .page-heading>.btn {
    display:block;
    width:100%
  }
  .stat-card>span {
    font-size:11px
  }
  .row-actions .btn {
    min-height:44px
  }
  .workspace-tab {
    font-size:13px
  }
}