/* ============================================================
   myutil · 共享样式（archery 页 / 通用面板体系）
   Apple 设计语言落地：Parchment 页面底 + Pure White 细边工具卡
   + Action Blue 单强调色 + 发丝线分隔，除产品图外无任何阴影。
   颜色一律取自 /css/tokens.css 令牌。
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;
  font-family: var(--font-text);
  font-size: 13px; color: var(--ink); background: var(--canvas);
  letter-spacing: var(--track-body);
}

/* ---------- Element Plus 主色 → Action Blue（按钮 / 复选 / 开关 / 分页全跟随） ---------- */
:root {
  --el-color-primary: #0066cc;
  --el-color-primary-light-3: #4d94db;
  --el-color-primary-light-5: #7fb2e5;
  --el-color-primary-light-7: #b2d1ee;
  --el-color-primary-light-8: #cce0f5;
  --el-color-primary-light-9: #e5effa;
  --el-color-primary-dark-2: #0052a3;
  --el-border-radius-base: 8px;   /* {rounded.sm} 紧凑工具档 */
  --el-font-family: var(--font-text);
}
html.dark {
  /* EP 暗色策略下 light-N 为更深的混色；文本强调用 Sky Link Blue */
  --el-color-primary: #0066cc;
  --el-color-primary-light-3: #005ab3;
  --el-color-primary-light-5: #004e99;
  --el-color-primary-light-7: #00427f;
  --el-color-primary-light-8: #003b73;
  --el-color-primary-light-9: #10395c;
  --el-color-primary-dark-2: #3385d6;
  --el-text-color-primary: #f5f5f7;
  --el-text-color-regular: #d2d2d7;
  --el-text-color-secondary: #98989d;
  --el-text-color-placeholder: #6e6e73;
  --el-border-color: rgba(255, 255, 255, .12);
  --el-border-color-light: rgba(255, 255, 255, .08);
  --el-border-color-lighter: rgba(255, 255, 255, .06);
  --el-fill-color-blank: #252527;
  --el-fill-color-light: #2a2a2c;
  --el-fill-color: #2a2a2c;
  --el-fill-color-lighter: #252527;
  --el-bg-color: #252527;
  --el-bg-color-overlay: #2a2a2c;
}

#app { height: 100vh; display: flex; flex-direction: column; }

/* ===== Main Layout（与 text/diff/json 一致：无外卡，Parchment 底 + 白面贴边 + 发丝线分隔） ===== */
.app-body { flex: 1; display: flex; overflow: hidden; }

/* ===== Left Panel (Tree / History / Saved tabs) ===== */
.left-panel {
  width: 325px; min-width: 325px; max-width: 325px; flex-shrink: 0;
  background: var(--surface); color: var(--ink); display: flex; flex-direction: column;
  border-right: 1px solid var(--hairline-soft);
  transition: width .18s ease;
}
/* 折叠：左栏缩成 0，brand 图标留在原地作为展开触发器 */
body.left-collapsed .left-panel { width: 0 !important; min-width: 0 !important; border-right: 0; overflow: hidden; }
body.left-collapsed .left-toggle-expand { display: flex; }

/* 左栏顶部：品牌块 */
.left-panel .panel-header {
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; min-height: 30px;
}
.left-panel .panel-header-brand { padding: 7px 10px; border-bottom: 1px solid var(--hairline-soft); gap: 6px; }
.brand-block { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.brand-block .logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px; width: 22px; height: 22px; padding: 0; background: var(--ink); color: var(--surface);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.brand-block .brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-block .brand-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.15;
  letter-spacing: var(--track-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-block .brand-sub {
  font-size: 10.5px; color: var(--ink-48); margin-top: 1px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 数据库分组头 */
.left-panel .panel-sub { border-bottom: 1px solid var(--hairline-soft); }
.left-panel .search-box { padding: 6px 8px; border-bottom: 1px solid var(--hairline-soft); }
.left-panel .tree-container { flex: 1; overflow: auto; padding: 4px 4px; min-height: 0; }
/* 左栏底部：连接状态 + 设置/主题 */
.left-panel .panel-foot {
  border-top: 1px solid var(--hairline-soft);
  padding: 6px 10px; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.left-panel .conn-status {
  font-size: 11px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--pearl); color: var(--ink-80);
  border: 1px solid var(--hairline-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.left-panel .conn-status.ok { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.left-panel .conn-status.err { background: var(--err-wash); color: var(--err); border-color: transparent; }
.left-panel .foot-actions { display: flex; align-items: center; gap: 4px; }
.left-panel .foot-actions .el-button { padding: 2px 9px; font-size: 11.5px; min-height: 22px; }
.left-panel .theme-btn {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-80);
  border-radius: var(--r-pill); height: 22px; min-width: 22px; padding: 0 8px;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.left-panel .theme-btn:hover { border-color: var(--link); color: var(--link); background: var(--link-wash); }
/* 折叠按钮（位于品牌块右侧） */
.left-toggle-collapse {
  flex: 0 0 22px; height: 22px; line-height: 20px; text-align: center;
  border: none; background: transparent; color: var(--ink-48);
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer; user-select: none;
  transition: background .12s, color .12s;
}
.left-toggle-collapse:hover { background: var(--link-wash); color: var(--link); }
/* 折叠后主区左上角浮现的展开按钮 */
.left-toggle-expand {
  display: none; position: absolute; top: 6px; left: 6px; z-index: 5;
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-80);
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer; user-select: none;
  align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.left-toggle-expand:hover { background: var(--link-wash); color: var(--link); border-color: var(--link); }

/* Custom Tree Styles */
.tree-container .tree-node { user-select: none; }
.tree-container .tree-node .node-label {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  cursor: pointer; font-size: 13px; white-space: nowrap;
  border-radius: var(--r-sm); transition: background .12s;
}
.tree-container .tree-node .node-label:hover { background: rgba(0, 0, 0, .045); }
.tree-container .tree-node .node-label.selected { background: var(--link-wash); color: var(--link); font-weight: 600; }
.tree-container .tree-node .node-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.tree-container .tree-node .node-text { overflow: hidden; text-overflow: ellipsis; }
.tree-container .tree-node .node-badge { font-size: 10px; color: var(--ink-48); margin-left: 4px; }
.tree-container .tree-children { margin-left: 16px; }
.tree-container .tree-node.loading .node-icon { animation: spin 1s linear infinite; }

/* ===== 水平拖拽条（编辑器 / 结果面板之间） ===== */
.resizer-h {
  height: 9px; cursor: row-resize; background: transparent;
  flex-shrink: 0; position: relative;
  margin: -1px 0; z-index: 3;
}
.resizer-h::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 3px; border-radius: var(--r-pill); background: var(--hairline);
  transition: background .15s;
}
.resizer-h:hover::after, .resizer-h.on::after { background: var(--blue-focus); }
body.dragging-h { cursor: row-resize; user-select: none; }
/* 折叠后为左上角展开按钮让位 */
body.left-collapsed .sql-tabs { padding-left: 34px; }

/* ===== Center Panel (Editor + Results) ===== */
.center-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface);
  position: relative;
}

/* SQL Tabs */
.sql-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 6px; border-bottom: 1px solid var(--hairline-soft);
  overflow-x: auto; flex-shrink: 0;
}
.sql-tab {
  padding: 5px 14px; background: transparent; color: var(--ink-48); font-size: 12px;
  cursor: pointer; border: none; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; max-width: 200px;
  border-radius: var(--r-pill); transition: background .12s, color .12s;
}
.sql-tab:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }
.sql-tab.active { background: var(--link-wash); color: var(--link); font-weight: 600; }
.sql-tab .tab-close { font-size: 14px; opacity: .45; border-radius: var(--r-pill); padding: 0 2px; }
.sql-tab .tab-close:hover { opacity: 1; color: var(--err); }
.sql-tab-add {
  padding: 4px 10px; background: transparent; color: var(--ink-48); font-size: 16px;
  cursor: pointer; border: none; border-radius: var(--r-pill); line-height: 1;
}
.sql-tab-add:hover { background: rgba(0, 0, 0, .045); color: var(--link); }

/* Editor Toolbar */
.editor-toolbar {
  min-height: 38px; background: var(--surface); display: flex; align-items: center;
  padding: 6px 12px; gap: 6px; border-bottom: 1px solid var(--hairline-soft); flex-shrink: 0;
}
.editor-toolbar .toolbar-label { font-size: 12px; color: var(--ink-48); margin-right: 2px; }
.editor-toolbar .el-select { width: 160px; }
.editor-toolbar .el-select .el-input__wrapper { min-height: 26px; }
.editor-toolbar .el-input-number { width: 90px; }
.editor-toolbar .el-input-number .el-input__wrapper { min-height: 26px; }
.editor-toolbar .spacer { flex: 1; }
.editor-toolbar .el-button { padding: 5px 14px; font-size: 12px; }
/* 工具条图标按钮（执行/保存/格式化） */
.editor-toolbar .toolbar-divider {
  width: 1px; height: 18px; background: var(--hairline); margin: 0 4px; flex-shrink: 0;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-80);
  border-radius: var(--r-sm); cursor: pointer; outline: none; line-height: 1;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.icon-btn:hover { background: var(--link-wash); border-color: var(--link); color: var(--link); }
.icon-btn:active { transform: scale(.95); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn:disabled:hover { background: var(--surface); border-color: var(--hairline); color: var(--ink-80); }
.icon-btn.icon-btn-primary {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.icon-btn.icon-btn-primary:hover {
  background: var(--blue-hover); border-color: var(--blue-hover); color: #fff;
}
.icon-btn.icon-btn-primary:active { background: var(--blue-active); border-color: var(--blue-active); }
.icon-btn.icon-btn-primary:disabled {
  background: rgba(0, 102, 204, .45); border-color: transparent; color: rgba(255, 255, 255, .75);
}
.icon-btn .spin {
  display: inline-block; width: 12px; height: 12px;
  border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CodeMirror（浅色编辑器：Pearl 代码槽） */
.editor-container { flex: 1; overflow: hidden; position: relative; min-height: 100px; }
.CodeMirror {
  height: 100% !important;
  font-size: 13px; line-height: 1.6;
  font-family: var(--font-mono);
  background: var(--surface); color: var(--code-fg);
}
.CodeMirror-gutters { background: var(--pearl); border-right: 1px solid var(--hairline-soft); }
.CodeMirror-linenumber { color: var(--ink-48); opacity: .7; }
.CodeMirror-cursor { border-left: 2px solid var(--caret); }
.CodeMirror-selected { background: var(--selection) !important; }
.CodeMirror ::selection { background: var(--selection); }

/* Results Section（高度由拖拽条控制，默认 45%） */
.results-section {
  height: 45%; min-height: 80px; max-height: 80vh; border-top: 1px solid var(--hairline-soft);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.results-header {
  min-height: 32px; background: var(--surface); display: flex; align-items: center;
  padding: 6px 14px; font-size: 12px; color: var(--ink-48);
  border-bottom: 1px solid var(--hairline-soft); flex-shrink: 0; gap: 12px;
}
.results-header .result-info { display: flex; gap: 12px; align-items: center; }
.results-header .result-info span { display: flex; align-items: center; gap: 2px; }
.results-table-container { flex: 1; overflow: auto; }

/* Results Table */
.results-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.results-table th {
  background: var(--pearl); padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--hairline-soft); position: sticky; top: 0; z-index: 1;
  white-space: nowrap; font-weight: 600; color: var(--ink-48);
}
.results-table td {
  padding: 5px 10px; border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis;
}
.results-table tr:hover td { background: var(--link-wash); }
.results-table .null-value { color: var(--ink-48); font-style: italic; opacity: .8; }
.results-table .num-value { color: var(--ok); text-align: right; }
/* 行号列 / 空数据行（由 archery.html 引用） */
.results-table td.row-num { text-align: center; color: var(--ink-48); opacity: .8; }
.results-table td.no-data-cell { text-align: center; padding: 20px; color: var(--ink-48); }

/* ===== Left Panel Tabs (数据库 / 历史 / 已保存) ===== */
.left-tabs {
  display: flex; gap: 0; padding: 4px 8px 0; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-soft);
}
.ltab {
  flex: 1; padding: 5px 4px; text-align: center; font-size: 12px;
  cursor: pointer; border: none; background: transparent; color: var(--ink-80);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  user-select: none;
  transition: color .12s, background .12s;
}
.ltab:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }
.ltab.active {
  color: var(--link); background: var(--link-wash);
  font-weight: 600;
  position: relative;
}
.ltab.active::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px;
  height: 2px; background: var(--link); border-radius: 1px;
}
.left-panel .left-tab-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.left-panel .tab-subhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px 3px; font-size: 10.5px; color: var(--ink-48); flex-shrink: 0;
}
.left-panel .tab-subhead .muted { color: var(--ink-48); font-size: 11px; }
.left-panel .tab-subhead .refresh-btn { color: var(--ink-48); padding: 0; font-size: 11px; }
.left-list { flex: 1; overflow: auto; padding: 4px 8px 8px; }
.left-panel .empty-state {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--ink-48); font-size: 12px; padding: 24px 12px;
}
.left-panel .empty-text { color: var(--ink-48); }

/* History & Saved Items（工具卡：发丝线，无阴影） */
.history-item, .saved-item {
  padding: 8px 10px; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  margin-bottom: 6px; cursor: pointer; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.history-item:hover, .saved-item:hover { border-color: var(--link); background: var(--link-wash); }
.saved-item .item-title {
  font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-item .item-sql, .saved-item .item-sql {
  font-size: 11px; color: var(--ink-80);
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.history-item .item-meta, .saved-item .item-meta {
  display: flex; gap: 6px; font-size: 10.5px; color: var(--ink-48); align-items: center;
  flex-wrap: wrap;
}
.history-item .item-meta .tag { padding: 1px 7px; border-radius: var(--r-pill); }
.history-item .item-meta .tag.ok { background: var(--ok-wash); color: var(--ok); }
.history-item .item-meta .tag.err { background: var(--err-wash); color: var(--err); }
.history-item .item-time { margin-left: auto; }
.saved-item .item-tag {
  background: var(--pearl); color: var(--ink-80); padding: 1px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saved-item .item-spacer { flex: 1; }
.history-item .item-del, .saved-item .item-del {
  flex: 0 0 18px; height: 18px; line-height: 16px; text-align: center; padding: 0;
  border: none; background: transparent; color: var(--ink-48);
  border-radius: var(--r-sm); font-size: 14px; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.history-item:hover .item-del, .saved-item:hover .item-del { opacity: 1; }
.history-item .item-del:hover, .saved-item .item-del:hover {
  background: var(--err-wash); color: var(--err);
}
.saved-item .item-link {
  border: none; background: transparent; color: var(--link); padding: 1px 4px;
  font: inherit; font-size: 10.5px; cursor: pointer; border-radius: var(--r-sm);
}
.saved-item .item-link:hover { background: var(--link-wash); }

/* ===== Empty States ===== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-48); gap: 8px;
}
.empty-state .empty-icon { font-size: 36px; }
.empty-state .empty-text { font-size: 13px; }

/* ===== Dialogs ===== */
.el-dialog { border-radius: var(--r-lg); }
.settings-dialog .el-dialog__body { padding: 20px; }
.settings-form .el-form-item { margin-bottom: 16px; }
.settings-form .el-form-item__label { font-size: 13px; }
.settings-form .el-input__inner, .settings-form .el-textarea__inner { font-size: 13px; }
.settings-form .form-tip { font-size: 11px; color: var(--ink-48); line-height: 1.5; margin-top: 4px; }

.save-query-dialog .el-dialog { width: 420px; }

/* ===== Animations ===== */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Context Menu ===== */
.context-menu {
  position: fixed; z-index: 9999;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
  min-width: 140px; padding: 5px;
}
.context-menu .ctx-item {
  padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; border-radius: var(--r-sm);
}
.context-menu .ctx-item:hover { background: var(--link-wash); color: var(--link); }

/* ===== 新增工具类（archery.html 模板引用） ===== */
.left-panel .refresh-btn { color: var(--ink-48); padding: 0; font-size: 12px; }
.tree-tip { padding: 20px; text-align: center; color: var(--ink-48); font-size: 12px; }
.ddl-pre {
  margin: 0; background: var(--pearl); color: var(--code-fg); border: 1px solid var(--hairline-soft);
  padding: 14px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.6;
  font-family: var(--font-mono);
  white-space: pre-wrap; word-break: break-all; max-height: 500px; overflow: auto;
}

/* ============================================================
   暗色模式（html[data-theme="dark"] 触发）
   瓦片阶梯映射：页面底 #1d1d1f · 卡片 #252527 · 悬停 #2a2a2c
   Element Plus 由 dark/css-vars.css + html.dark 处理，此处覆盖自有控件与 CodeMirror
   ============================================================ */
html[data-theme="dark"] {
  html, body { background: var(--canvas); color: var(--ink); }
  .brand-block .logo-badge { background: var(--ink); color: var(--canvas); }
  .left-panel .panel-foot { background: var(--canvas); }
  .left-panel .conn-status { background: var(--pearl); color: var(--ink-80); border-color: var(--hairline-soft); }
  .left-panel .theme-btn { background: var(--pearl); border-color: var(--hairline); color: var(--ink-80); }
  .left-panel .theme-btn:hover { background: var(--link-wash); border-color: var(--link); color: var(--link); }
  .editor-toolbar .toolbar-divider { background: var(--hairline); }
  .icon-btn { background: var(--pearl); border-color: var(--hairline); color: var(--ink-80); }
  .icon-btn:hover { background: var(--link-wash); border-color: var(--link); color: var(--link); }
  .icon-btn.icon-btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
  .icon-btn.icon-btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
  .icon-btn.icon-btn-primary:active { background: var(--blue-active); border-color: var(--blue-active); }

  /* 面板与骨架 */
  .left-panel, .center-panel {
    background: var(--surface); box-shadow: none;
  }
  .left-panel { border-right-color: var(--hairline-soft); }
  .left-toggle-collapse { color: var(--ink-48); }
  .left-toggle-collapse:hover { background: var(--pearl); color: var(--link); }
  .left-toggle-expand { background: var(--pearl); border-color: var(--hairline); color: var(--ink-80); }
  .left-toggle-expand:hover { background: var(--link-wash); color: var(--link); border-color: var(--link); }
  .left-panel .panel-header { color: var(--ink); border-bottom-color: var(--hairline-soft); }
  .left-panel .search-box { border-bottom-color: var(--hairline-soft); }
  .tree-container .tree-node .node-label { color: var(--ink-80); }
  .tree-container .tree-node .node-label:hover { background: var(--pearl); }
  .tree-container .tree-node .node-label.selected { background: var(--link-wash); color: var(--link); }
  .tree-container .tree-node .node-badge { color: var(--ink-48); }
  .tree-tip { color: var(--ink-48); }
  .resizer-h::after { background: var(--hairline); }
  .resizer-h:hover::after, .resizer-h.on::after { background: var(--blue-on-dark); }

  /* SQL 页签 / 工具栏 */
  .sql-tabs, .editor-toolbar, .results-header { border-color: var(--hairline-soft); }
  .sql-tab { color: var(--ink-48); }
  .sql-tab:hover { background: var(--pearl); color: var(--ink); }
  .sql-tab.active { background: var(--link-wash); color: var(--link); }
  .sql-tab .tab-close:hover { color: var(--err); }
  .sql-tab-add { color: var(--ink-48); }
  .sql-tab-add:hover { background: var(--pearl); color: var(--link); }
  .editor-toolbar .toolbar-label { color: var(--ink-48); }
  .left-panel .refresh-btn { color: var(--ink-48); }

  /* CodeMirror：暗色编辑器 */
  .CodeMirror { background: var(--surface); color: var(--code-fg); }
  .CodeMirror-gutters { background: var(--canvas); border-right-color: var(--hairline-soft); }
  .CodeMirror-linenumber { color: var(--ink-48); }
  .CodeMirror-cursor { border-left-color: var(--caret); }
  .CodeMirror-selected, .CodeMirror ::selection { background: var(--selection) !important; }
  .CodeMirror-matchingbracket { outline-color: rgba(255, 255, 255, .4); color: inherit !important; }
  .CodeMirror span.cm-keyword, .CodeMirror span.cm-atom { color: #569cd6; }
  .CodeMirror span.cm-number { color: #b5cea8; }
  .CodeMirror span.cm-def, .CodeMirror span.cm-builtin { color: #dcdcaa; }
  .CodeMirror span.cm-variable, .CodeMirror span.cm-variable-2,
  .CodeMirror span.cm-variable-3, .CodeMirror span.cm-property { color: #9cdcfe; }
  .CodeMirror span.cm-operator, .CodeMirror span.cm-bracket { color: #d4d4d4; }
  .CodeMirror span.cm-comment { color: #6a9955; }
  .CodeMirror span.cm-string, .CodeMirror span.cm-string-2 { color: #ce9178; }
  .CodeMirror span.cm-meta { color: #c586c0; }
  .CodeMirror span.cm-tag { color: #569cd6; }
  .CodeMirror span.cm-attribute { color: #9cdcfe; }
  .CodeMirror span.cm-qualifier { color: #d7ba7d; }
  .CodeMirror span.cm-error { color: #f14c4c; }

  /* 结果表格 */
  .results-table th { background: var(--canvas); color: var(--ink-48); border-bottom-color: var(--hairline-soft); }
  .results-table td { border-bottom-color: var(--hairline-soft); }
  .results-table tr:hover td { background: var(--pearl); }
  .results-table .null-value { color: var(--ink-48); }
  .results-table .num-value { color: var(--ok); }
  .results-table td.row-num, .results-table td.no-data-cell { color: var(--ink-48); }

  /* 左栏 tab 与历史 / 已保存 */
  .left-tabs { border-bottom-color: var(--hairline-soft); }
  .ltab { color: var(--ink-80); }
  .ltab:hover { background: var(--pearl); color: var(--ink); }
  .ltab.active { color: var(--link); background: var(--link-wash); }
  .ltab.active::after { background: var(--link); }
  .tab-subhead, .tab-subhead .muted { color: var(--ink-48); }
  .tab-subhead .refresh-btn { color: var(--ink-48); }
  .history-item, .saved-item { background: var(--surface); border-color: var(--hairline-soft); }
  .history-item:hover, .saved-item:hover { border-color: var(--link); background: var(--link-wash); }
  .saved-item .item-title { color: var(--ink); }
  .history-item .item-sql, .saved-item .item-sql { color: var(--ink-80); }
  .history-item .item-meta, .saved-item .item-meta { color: var(--ink-48); }
  .saved-item .item-tag { background: var(--pearl); color: var(--ink-80); }
  .saved-item .item-link { color: var(--link); }
  .saved-item .item-link:hover { background: var(--link-wash); }
  .history-item .item-del, .saved-item .item-del { color: var(--ink-48); }
  .history-item .item-del:hover, .saved-item .item-del:hover { background: var(--err-wash); color: var(--err); }

  /* 弹层 / 菜单 / 其他 */
  .empty-state { color: var(--ink-48); }
  .settings-form .form-tip { color: var(--ink-48); }
  .context-menu { background: var(--tile-2); border-color: var(--hairline); }
  .context-menu .ctx-item { color: var(--ink); }
  .context-menu .ctx-item:hover { background: var(--link-wash); color: var(--link); }
  .ddl-pre { background: var(--canvas); color: var(--code-fg); border-color: var(--hairline-soft); }
}