:root {
    --primary: #06bbcc;
    --primary-dark: #047f8c;
    --primary-soft: #eafcfe;
    --cyan: #06b6d4;
    --violet: #0e9aaa;
    --green: #10b981;
    --amber: #f59e0b;
    --red: #ef4444;
    --navy: #0b1220;
    --navy-2: #111b2e;
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-2: #f9fafc;
    --text: #172033;
    --muted: #6b7280;
    --border: #e5eaf2;
    --border-strong: #d7dfeb;
    --shadow: 0 8px 28px rgba(21, 31, 51, .07);
    --sidebar-width: 244px;
    --results-width: 400px;
    --header-height: 76px;
    --status-height: 30px;
    --mono: "JetBrains Mono", Consolas, monospace;
}

html[data-theme="dark"] {
    --bg: #0d1422;
    --panel: #111a2a;
    --panel-2: #0d1625;
    --text: #e7edf7;
    --muted: #8b9ab0;
    --border: #243149;
    --border-strong: #33425d;
    --primary-soft: rgba(6, 187, 204, .16);
    --shadow: 0 10px 35px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: Inter, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: flex; background: var(--bg); }
.main-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 16px 13px 14px;
    color: #c5d0e0;
    background:
        radial-gradient(circle at 18% 0%, rgba(6, 187, 204, .28), transparent 29%),
        linear-gradient(180deg, #0a1120 0%, #101a2d 100%);
    border-right: 1px solid rgba(255,255,255,.06);
    transition: width .25s ease, transform .25s ease;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 1px 5px 18px; }
.app-brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
.app-logo { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, rgba(6,187,204,.35), rgba(6,182,212,.16)); border: 1px solid rgba(255,255,255,.12); }
.app-logo img { width: 37px; height: 37px; object-fit: contain; }
.brand-text { min-width: 0; }
.brand-text strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.brand-text strong em { color: #5ed6df; font-style: normal; }
.brand-text small { display: block; margin-top: 2px; color: #7789a5; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--panel); cursor: pointer; transition: .18s ease; }
.icon-button:hover { color: var(--primary); border-color: #8ddce4; background: var(--primary-soft); }
.sidebar-collapse { width: 30px; height: 30px; color: #788aa6; border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.04); }
.primary-nav { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.nav-label { margin: 13px 10px 7px; color: #53647e; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 20px; }
.nav-item {
    width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; margin: 3px 0; padding: 9px 11px; border: 0; border-radius: 10px; color: #9aabc2; background: transparent; text-decoration: none; text-align: left; font-size: 12px; font-weight: 600; cursor: pointer; transition: .18s ease;
}
.nav-item i { width: 18px; font-size: 14px; text-align: center; }
.nav-item span { flex: 1; white-space: nowrap; }
.nav-item b { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #9eb0ca; background: rgba(255,255,255,.07); font-size: 9px; }
.nav-item:hover { color: #f0f5ff; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(6,187,204,.90), rgba(70,81,217,.78)); box-shadow: 0 8px 20px rgba(67,56,202,.22); }
.nav-item.active i { color: #c9f9fc; }
.sidebar-bottom { margin-top: auto; }
.workspace-mini-card { display: flex; align-items: center; gap: 10px; margin: 12px 2px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.035); }
.workspace-mini-card > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #67e8f9; background: rgba(6,182,212,.12); }
.workspace-mini-card strong, .workspace-mini-card small { display: block; }
.workspace-mini-card strong { color: #dbe6f5; font-size: 10px; }
.workspace-mini-card small { margin-top: 2px; color: #667a97; font-size: 8px; line-height: 1.35; }
.sidebar-profile { display: flex; align-items: center; gap: 9px; padding: 11px 7px 2px; border-top: 1px solid rgba(255,255,255,.06); }
.avatar { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--primary), var(--violet)); font-size: 10px; font-weight: 800; }
.sidebar-profile div { min-width: 0; flex: 1; }
.sidebar-profile strong, .sidebar-profile small { display: block; }
.sidebar-profile strong { color: #d9e5f5; font-size: 10px; }
.sidebar-profile small { color: #6e819e; font-size: 8px; }
.sidebar-profile > i { color: #637591; font-size: 11px; }

.app-shell.sidebar-collapsed { --sidebar-width: 74px; }
.sidebar-collapsed .brand-text, .sidebar-collapsed .nav-item span, .sidebar-collapsed .nav-item b, .sidebar-collapsed .nav-label, .sidebar-collapsed .workspace-mini-card div, .sidebar-collapsed .sidebar-profile div, .sidebar-collapsed .sidebar-profile > i { display: none; }
.sidebar-collapsed .main-sidebar { padding-inline: 10px; }
.sidebar-collapsed .sidebar-top { justify-content: center; flex-wrap: wrap; }
.sidebar-collapsed .app-logo { width: 40px; height: 40px; flex-basis: 40px; }
.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .workspace-mini-card { justify-content: center; padding: 8px; }
.sidebar-collapsed .sidebar-profile { justify-content: center; }
.sidebar-collapsed .sidebar-collapse i { transform: rotate(180deg); }

.main-content { width: calc(100% - var(--sidebar-width)); min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; transition: width .25s ease, margin .25s ease; }
.top-header { height: var(--header-height); position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(16px); }
.header-title-wrap { min-width: 0; display: flex; align-items: center; gap: 11px; }
.header-title-wrap h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.header-title-wrap p { margin: 3px 0 0; color: var(--muted); font-size: 10px; font-weight: 600; }
.mobile-menu { display: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.header-select { height: 42px; min-width: 126px; display: flex; flex-direction: column; justify-content: center; padding: 5px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.header-select span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.header-select select { min-width: 0; padding: 0 15px 0 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; font-weight: 700; }
.database-select { min-width: 135px; }
.connection-badge { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #c9f0e1; border-radius: 999px; color: #05845e; background: #edfcf6; font-size: 9px; }
.connection-badge i, .system-online i, .status-connected i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
html[data-theme="dark"] .connection-badge { color: #6ee7b7; background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.22); }
.header-icon { width: 36px; height: 36px; }
.notification-button { position: relative; }
.notification-button span { width: 6px; height: 6px; position: absolute; top: 7px; right: 7px; border-radius: 50%; background: var(--red); border: 1px solid var(--panel); }
.profile-button { height: 42px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--panel); cursor: pointer; }
.profile-button .avatar { width: 32px; height: 32px; }
.profile-button span:nth-child(2) { text-align: left; }
.profile-button b, .profile-button small { display: block; line-height: 1.2; }
.profile-button b { font-size: 9px; }
.profile-button small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.profile-button > i { color: var(--muted); font-size: 8px; }

.studio-content { flex: 1; padding: 14px 16px 46px; }
.workspace-toolbar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 9px; }
.toolbar-right { color: var(--muted); font-size: 9px; }
.toolbar-right i { color: var(--primary); }
.button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--panel); font-size: 9px; font-weight: 700; cursor: pointer; transition: .17s ease; white-space: nowrap; }
.button:hover { color: var(--primary); border-color: #8ddce4; background: var(--primary-soft); }
.button.primary { color: white; border-color: var(--primary); background: var(--primary); box-shadow: 0 5px 14px rgba(6,187,204,.18); }
.button.primary:hover { color: white; background: var(--primary-dark); }
.button.run { min-width: 105px; color: white; border-color: #0da170; background: linear-gradient(135deg, #10b981, #07966a); box-shadow: 0 5px 14px rgba(16,185,129,.18); }
.button.run kbd { margin-left: 5px; padding: 1px 4px; border-radius: 4px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.16); font-size: 7px; }
.button.ghost { border-color: transparent; background: transparent; }
.button.subtle { background: var(--panel-2); }
.button.small { min-height: 29px; padding: 5px 9px; font-size: 8px; }
.button.full { width: 100%; }
.button.icon-only { width: 34px; padding: 0; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.mobile-more { display: none; }
.workspace-layout { height: min(610px, calc(100vh - 185px)); min-height: 440px; display: grid; grid-template-columns: minmax(350px, 1fr) 5px var(--results-width); overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); box-shadow: var(--shadow); }
.panel { min-width: 0; min-height: 0; background: var(--panel); }
.schema-panel { display: flex; flex-direction: column; border-right: 0; }
.panel-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; font-size: 11px; font-weight: 800; }
.panel-header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.panel-actions { display: flex; gap: 5px; }
.panel-actions .icon-button { width: 28px; height: 28px; border-color: transparent; background: transparent; }
.schema-tools { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.schema-tools label, .result-search { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); }
.schema-tools label i, .result-search i { color: var(--muted); font-size: 8px; }
.schema-tools input, .result-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 8px; }
.schema-tools .icon-button { width: 29px; height: 29px; }
.schema-tree { flex: 1; overflow: auto; padding: 7px 5px 12px; font-size: 9px; }
.schema-loading, .data-loading { padding: 18px; color: var(--muted); font-size: 9px; text-align: center; }
.tree-group { margin: 1px 0; }
.tree-row { min-height: 28px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 6px; color: var(--text); cursor: pointer; user-select: none; }
.tree-row:hover { background: var(--primary-soft); }
.tree-row .caret { width: 10px; color: var(--muted); font-size: 7px; transition: transform .15s; }
.tree-row.open .caret { transform: rotate(90deg); }
.tree-row .tree-icon { width: 14px; color: #f0a72c; text-align: center; }
.tree-row.database .tree-icon { color: var(--primary); }
.tree-row.column .tree-icon { color: var(--cyan); }
.tree-row .tree-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tree-meta { color: var(--muted); font-size: 7px; }
.tree-children { display: none; margin-left: 14px; }
.tree-group.open > .tree-children { display: block; }
.tree-row.selected { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.schema-empty { padding: 24px 10px; color: var(--muted); text-align: center; }
.schema-empty i { display: block; margin-bottom: 7px; color: var(--primary); font-size: 18px; }
.schema-footer { padding: 9px; border-top: 1px solid var(--border); }
.vertical-resizer { position: relative; z-index: 4; background: var(--border); cursor: col-resize; }
.vertical-resizer:hover, .vertical-resizer.dragging { background: var(--primary); }

.editor-panel { display: flex; flex-direction: column; border-inline: 1px solid var(--border); }
.query-tabs { min-height: 38px; display: flex; align-items: end; gap: 2px; padding: 5px 7px 0; border-bottom: 1px solid var(--border); background: var(--panel-2); overflow-x: auto; }
.query-tab { height: 32px; min-width: 118px; max-width: 180px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px 7px 0 0; color: var(--muted); background: transparent; font-size: 8px; cursor: pointer; }
.query-tab span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; }
.query-tab.active { color: var(--text); border-color: var(--border); border-bottom-color: var(--panel); background: var(--panel); font-weight: 700; }
.query-tab > i:first-child { color: var(--primary); }
.query-tab .close-tab { opacity: .45; }
.query-tab:hover .close-tab { opacity: 1; }
.dirty-dot { width: 5px; height: 5px; display: none; border-radius: 50%; background: var(--amber); }
.query-tab.dirty .dirty-dot { display: block; }
.new-tab { width: 28px; height: 28px; margin-bottom: 2px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.new-tab:hover { color: var(--primary); background: var(--primary-soft); }
.editor-actions { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.action-group { display: flex; align-items: center; gap: 3px; }
.editor-host { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--panel); }
.CodeMirror { height: 100%; color: var(--text); background: var(--panel); font-family: var(--mono); font-size: 11px; line-height: 1.72; }
.CodeMirror-gutters { border-right: 1px solid var(--border); background: var(--panel-2); }
.CodeMirror-linenumber { color: #98a4b7; padding: 0 8px 0 5px; }
.CodeMirror-cursor { border-left-color: var(--text); }
.CodeMirror-selected { background: rgba(6,187,204,.15) !important; }
.cm-s-default .cm-keyword { color: #6854d9; font-weight: 600; }
.cm-s-default .cm-string { color: #0b9367; }
.cm-s-default .cm-number { color: #c55a11; }
.cm-s-default .cm-comment { color: #8b97aa; font-style: italic; }
.cm-s-default .cm-operator { color: #cf3d69; }
html[data-theme="dark"] .cm-s-default { color: #d9e3f1; background: var(--panel); }
html[data-theme="dark"] .cm-s-default .CodeMirror-gutters { background: var(--panel-2); border-color: var(--border); }
html[data-theme="dark"] .cm-s-default .cm-keyword { color: #a9a1ff; }
html[data-theme="dark"] .cm-s-default .cm-string { color: #67e8b7; }
html[data-theme="dark"] .cm-s-default .cm-number { color: #f5b36a; }
.editor-footer { min-height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 13px; padding: 0 9px; border-top: 1px solid var(--border); color: var(--muted); background: var(--panel-2); font-family: var(--mono); font-size: 7px; }
.editor-footer i { color: var(--green); }

.results-panel { display: flex; flex-direction: column; overflow: hidden; }
.result-tabs { min-height: 42px; display: flex; align-items: end; gap: 2px; padding: 5px 5px 0; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.result-tab { height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.result-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.result-tab b { min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border-radius: 5px; color: var(--muted); background: var(--border); font-size: 7px; }
.result-fullscreen { width: 28px; height: 28px; margin: 0 2px 3px auto; border-color: transparent; background: transparent; }
.result-meta-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.result-meta-bar > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.result-meta-bar span { color: var(--muted); font-size: 7px; white-space: nowrap; }
.result-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; font-weight: 700; }
.result-status.ready { color: #087e5d; background: #ecfbf5; }
.result-status.running { color: #6d4b00; background: #fff8e7; }
.result-status.error { color: #b91c1c; background: #fff0f0; }
html[data-theme="dark"] .result-status.ready { color: #6ee7b7; background: rgba(16,185,129,.11); }
html[data-theme="dark"] .result-status.running { color: #fbbf24; background: rgba(245,158,11,.11); }
html[data-theme="dark"] .result-status.error { color: #fca5a5; background: rgba(239,68,68,.12); }
.result-search { width: 115px; min-height: 29px; padding: 5px 7px; }
.result-tab-content { display: none; min-height: 0; flex: 1; overflow: auto; }
.result-tab-content.active { display: block; }
.result-box { min-height: 100%; padding: 9px; font-size: 9px; }
.empty-state { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: var(--muted); text-align: center; }
.empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 18px; }
.empty-state h3 { margin: 0 0 5px; color: var(--text); font-size: 12px; font-weight: 800; }
.empty-state p { max-width: 260px; margin: 0 0 12px; font-size: 8px; line-height: 1.55; }
.empty-state.compact { min-height: 310px; }
.result-box .alert { padding: 8px 10px; margin-bottom: 7px; border-radius: 7px; font-size: 8px; }
.result-box .table-responsive { border: 1px solid var(--border); border-radius: 8px; }
.result-box table { margin: 0 !important; color: var(--text); border-color: var(--border); font-family: var(--mono); font-size: 8px; }
.result-box .table > :not(caption) > * > * { min-width: 82px; padding: 7px 8px; color: inherit; background: var(--panel); border-color: var(--border); white-space: nowrap; }
.result-box .table thead th, .result-box .table-dark th { position: sticky; top: 0; z-index: 2; color: var(--text) !important; background: var(--panel-2) !important; font-weight: 700; }
.result-box .table-striped > tbody > tr:nth-of-type(odd) > * { background: color-mix(in srgb, var(--panel-2) 58%, transparent); }
.result-box .badge { font-size: 7px; }
.messages-box { padding: 10px; }
.message-entry { display: flex; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.message-entry i { margin-top: 2px; color: var(--primary); }
.message-entry b, .message-entry span { display: block; }
.message-entry b { font-size: 9px; }
.message-entry span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.message-entry.error i { color: var(--red); }

.dashboard-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.dashboard-card { min-height: 155px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: 0 4px 16px rgba(21,31,51,.035); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-heading h3 { margin: 0; font-size: 10px; font-weight: 800; }
.card-heading p { margin: 2px 0 0; color: var(--muted); font-size: 7px; }
.link-button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 8px; font-weight: 700; cursor: pointer; }
.metric-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.metric-icon.violet { color: #078696; background: #eafcfe; }
.metric-icon.cyan { color: #0589a1; background: #e9fbfe; }
html[data-theme="dark"] .metric-icon.violet { background: rgba(14,154,170,.12); }
html[data-theme="dark"] .metric-icon.cyan { background: rgba(6,182,212,.12); }
.activity-list { display: grid; gap: 5px; }
.activity-item { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; }
.activity-item:hover { background: var(--panel-2); }
.activity-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #07966a; background: #eafaf4; font-size: 8px; }
.activity-icon.failed { color: #c62828; background: #fff0f0; }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { overflow: hidden; color: var(--text); font-family: var(--mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.activity-item small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.activity-item > span { color: var(--muted); font-size: 7px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.stats-grid div { padding: 8px 6px; border-radius: 8px; background: var(--panel-2); }
.stats-grid b, .stats-grid span { display: block; }
.stats-grid b { font-size: 13px; }
.stats-grid span { margin-top: 2px; color: var(--muted); font-size: 6px; }
.mini-chart { height: 45px; display: flex; align-items: end; gap: 5px; margin-top: 10px; padding: 0 5px; border-bottom: 1px solid var(--border); }
.mini-chart i { flex: 1; max-width: 18px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #49d2df, #06bbcc); opacity: .8; }
.database-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.database-summary div { padding: 7px 8px; border-radius: 7px; background: var(--panel-2); }
.database-summary span, .database-summary b { display: block; }
.database-summary span { color: var(--muted); font-size: 6px; }
.database-summary b { margin-top: 2px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.status-bar { height: var(--status-height); position: fixed; z-index: 850; right: 0; bottom: 0; left: var(--sidebar-width); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-top: 1px solid var(--border); color: var(--muted); background: var(--panel); font-family: var(--mono); font-size: 7px; transition: left .25s ease; }
.status-bar > div { display: flex; align-items: center; gap: 14px; }
.system-online, .status-connected { display: inline-flex; align-items: center; gap: 6px; }

.app-modal { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; padding: 20px; background: rgba(5,10,20,.48); backdrop-filter: blur(5px); }
.app-modal.open { display: grid; }
.modal-card { width: min(480px, 100%); max-height: 85vh; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 25px 80px rgba(0,0,0,.28); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 13px; }
.modal-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.modal-body { padding: 15px; color: var(--text); font-size: 9px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 11px 15px; border-top: 1px solid var(--border); }
.shortcut-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; }
.shortcut-list kbd { padding: 3px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; color: var(--text); background: var(--panel-2); font-family: var(--mono); }
.connection-details { display: grid; gap: 8px; }
.connection-details div { display: flex; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 7px; background: var(--panel-2); }
.connection-details span { color: var(--muted); }
.toast-stack { position: fixed; z-index: 2200; right: 17px; bottom: 44px; display: grid; gap: 8px; }
.app-toast { min-width: 230px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); font-size: 8px; animation: toast-in .2s ease; }
.app-toast i { color: var(--green); }
.app-toast.error i { color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.fullscreen-panel { position: fixed !important; z-index: 1900 !important; inset: 12px !important; width: auto !important; height: auto !important; border: 1px solid var(--border) !important; border-radius: 13px !important; box-shadow: 0 25px 80px rgba(0,0,0,.32) !important; }
.mobile-overlay { display: none; }

@media (max-width: 1280px) {
    :root { --results-width: 340px; }
    .editor-secondary-actions .button span { display: none; }
    .editor-secondary-actions .button { width: 32px; padding: 0; }
    .header-select.workspace-select { display: none; }
}

@media (max-width: 1020px) {
    :root { --sidebar-width: 74px; --results-width: 330px; }
    .main-sidebar { padding-inline: 10px; }
    .brand-text, .nav-item span, .nav-item b, .nav-label, .workspace-mini-card div, .sidebar-profile div, .sidebar-profile > i, .sidebar-collapse { display: none; }
    .sidebar-top, .nav-item, .workspace-mini-card, .sidebar-profile { justify-content: center; }
    .studio-content { padding-inline: 10px; }
    .workspace-layout { grid-template-columns: minmax(340px, 1fr) 5px var(--results-width); }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .recent-card { grid-column: 1 / -1; }
    .profile-button span:nth-child(2), .profile-button > i { display: none; }
}

@media (max-width: 760px) {
    :root { --sidebar-width: 0px; --header-height: 64px; }
    .main-sidebar { width: 244px; transform: translateX(-100%); }
    .app-shell.mobile-sidebar-open .main-sidebar { transform: translateX(0); }
    .app-shell.mobile-sidebar-open .mobile-overlay { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(5,10,20,.48); }
    .main-content { width: 100%; margin-left: 0; }
    .status-bar { left: 0; }
    .mobile-menu { display: inline-grid; }
    .main-sidebar .brand-text, .main-sidebar .nav-item span, .main-sidebar .nav-item b, .main-sidebar .nav-label, .main-sidebar .workspace-mini-card div, .main-sidebar .sidebar-profile div, .main-sidebar .sidebar-profile > i { display: block; }
    .main-sidebar .sidebar-top, .main-sidebar .nav-item, .main-sidebar .workspace-mini-card, .main-sidebar .sidebar-profile { justify-content: flex-start; }
    .top-header { padding-inline: 10px; }
    .header-title-wrap h1 { font-size: 13px; }
    .header-title-wrap p, .connection-badge b, .header-select, .header-icon:not(#themeToggle), .profile-button { display: none; }
    .connection-badge { width: 30px; padding: 0; justify-content: center; }
    .studio-content { padding: 8px 8px 48px; }
    .workspace-toolbar { align-items: flex-start; }
    .toolbar-right { display: none; }
    .workspace-layout { height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .vertical-resizer { display: none; }
    .editor-panel, .results-panel { min-height: 500px; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; box-shadow: var(--shadow); }
    .results-panel { min-height: 430px; margin-top: 9px; }
    .editor-secondary-actions .button { display: none; }
    .editor-secondary-actions .mobile-more, .editor-secondary-actions .button.icon-only:last-of-type { display: inline-flex; }
    .result-meta-bar { align-items: flex-start; flex-direction: column; }
    .result-meta-bar > div:last-child { width: 100%; }
    .result-search { flex: 1; width: auto; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .recent-card { grid-column: auto; }
    .status-bar { overflow-x: auto; white-space: nowrap; }
    .status-bar > div:last-child { display: none; }
}

/* Clean SQL output: show only returned data or the raw SQL error. */
.result-box:empty {
    min-height: 100%;
}

.sql-output-table {
    margin: 0;
}

.sql-output-table table {
    margin: 0;
}

.sql-empty-result,
.sql-output-note {
    padding: 14px 16px;
    color: var(--muted, #64748b);
    font-size: 0.88rem;
}

.sql-error-output {
    border-radius: 10px;
}


/* Small professional creator credit in the sidebar corner. */
.creator-signature {
    margin: 10px 4px 2px;
    padding: 9px 10px 2px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: #637591;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1.4;
}
.creator-signature span, .creator-signature strong { display: block; }
.creator-signature strong { margin-top: 1px; color: #aebdd1; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.sidebar-collapsed .creator-signature { display: none; }
@media (max-width: 1020px) { .creator-signature { display: none; } }
@media (max-width: 760px) { .main-sidebar .creator-signature { display: block; } }


/* Clean full-width SQL studio layout: sidebar/dashboard/status removed visually. */
.clean-sql-page .main-sidebar,
.clean-sql-page .dashboard-grid,
.clean-sql-page .status-bar,
.clean-sql-page .mobile-overlay,
.clean-sql-page .mobile-menu {
    display: none !important;
}

.clean-sql-page .app-shell {
    display: block;
    min-height: 100vh;
}

.clean-sql-page .main-content {
    width: 100% !important;
    min-height: 100vh;
    margin-left: 0 !important;
}

.clean-sql-page .top-header {
    padding-inline: 24px;
}

.clean-sql-page .studio-content {
    padding: 14px 16px 16px;
}

.clean-sql-page .workspace-toolbar {
    min-height: 50px;
    margin-bottom: 10px;
}

.clean-sql-page .workspace-layout {
    height: calc(100vh - 150px);
    min-height: 560px;
    grid-template-columns: minmax(520px, 1fr) 5px var(--results-width);
}

.clean-sql-page .editor-panel,
.clean-sql-page .results-panel {
    min-height: 0;
}

.clean-sql-page .editor-host,
.clean-sql-page .CodeMirror {
    min-height: 0;
}

@media (min-width: 1400px) {
    .clean-sql-page {
        --results-width: 470px;
    }
}

@media (max-width: 1020px) {
    .clean-sql-page .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .clean-sql-page .workspace-layout {
        grid-template-columns: minmax(420px, 1fr) 5px 340px;
    }
}

@media (max-width: 760px) {
    .clean-sql-page .top-header {
        padding-inline: 10px;
    }

    .clean-sql-page .studio-content {
        padding: 8px;
    }

    .clean-sql-page .workspace-layout {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}