/* ============================================================
   PdmDesign — HTML5 数据模型设计器样式
   布局: 深色标题栏(含菜单) / 左侧竖排工具条+树 / 右侧页签+面包屑+工具栏+网格
   主题: <html data-theme="light|dark">（js/theme.js 切换并持久化）
         主题色 --accent 可被 JS 覆盖实现自定义配色
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }

/* ---------------- 主题变量 ---------------- */
/* 派生色（--accent-hov 等）先给静态近似回退值：不支持 color-mix() 的旧内核
 * （Chrome ≤110 / Firefox ≤112 / Safari ≤16.1）不至丢色；
 * 支持的内核由文件末尾 @supports 块按当前主题 / 自定义主题色实时混色覆盖。 */
:root {
  color-scheme: light;   /* 原生控件 / 滚动条随主题（select 下拉、checkbox 等），三内核均支持 */
  --accent: #316ac5;
  --accent-hov: #2a5ba9;
  --accent-deep: #1f437c;
  --accent-soft: #e6edf8;
  --accent-outline: #a8c0e7;

  /* 浅色（默认） */
  --bg: #ffffff;
  --bg-2: #fafafa;   /* 工具栏 / 面板头 */
  --bg-3: #f0f0f0;   /* 侧栏工具条 */
  --bg-4: #efefef;   /* 页签栏 */
  --bg-5: #e4e4e4;   /* 非活动页签 */
  --bg-6: #f7f7f7;   /* 对话框底栏 */
  --bg-7: #f7f8fa;   /* 聊天消息区 */
  --bg-8: #fcfcfc;   /* 次级条 */
  --bg-9: #fbfbfb;   /* 主页背景 */
  --row-hover: #f3f6fc;
  --sel-bg: #cedbf1;
  --fg: #222;
  --fg-2: #3d3d3d;
  --fg-3: #555;
  --fg-4: #707070;
  --fg-5: #9a9a9a;
  --border: #d5d5d5;
  --border-2: #e2e2e2;
  --border-3: #ececec;
  --border-4: #dcdcdc;
  --th-bg: linear-gradient(#fdfdfd, #f0f0f0);
  --input-bg: #ffffff;
  --input-border: #b5b5b5;
  --btn-bg: #f5f5f5;
  --btn-border: #b5b5b5;
  --overlay: rgba(0, 0, 0, .32);
  --ok-fg: #1a7a1a;
  --danger: #c0392b;
  --danger-soft: #f9ebea;
  --brand-red: #cc0000;
  --flash-bg: #fff3c2;
  --er-canvas: #f4f5f0;
  --er-box-bg: #fffff2;
  --er-box-head: #d6e4f7;
  --er-box-border: #7f9db9;
  --er-box-fg: #222;
  --er-box-title: #1f3f77;
  --er-ref-line: #7f9db9;
  --scroll-track: #f4f4f4;
  --scroll-thumb: #c9c9c9;
  --scroll-thumb-hov: #a9a9a9;
  --shadow-1: rgba(0, 0, 0, .22);
  --shadow-2: rgba(0, 0, 0, .4);
  --err-bg: #fdecea;
  --err-bd: #f5c6c0;
  --err-fg: #b3261e;
  --code-inline-bg: #eef1f6;
  --titlebar-bg: linear-gradient(#3c3c3c, #1d1d1d);
  --titlebar-fg: #f0f0f0;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1d21;
  --bg-2: #202226;
  --bg-3: #15171a;
  --bg-4: #121316;
  --bg-5: #1f2126;
  --bg-6: #181a1e;
  --bg-7: #191b1f;
  --bg-8: #17181c;
  --bg-9: #16181b;
  --fg: #e4e6ea;
  --fg-2: #cfd2d8;
  --fg-3: #a9adb6;
  --fg-4: #8b909b;
  --fg-5: #676c76;
  --border: #34373e;
  --border-2: #2a2d33;
  --border-3: #27292f;
  --border-4: #303339;
  --th-bg: linear-gradient(#26282d, #212328);
  --input-bg: #141619;
  --input-border: #3d414a;
  --btn-bg: #26282e;
  --btn-border: #3d414a;
  --overlay: rgba(0, 0, 0, .55);
  --ok-fg: #57c985;
  --danger: #e07a6a;
  --danger-soft: rgba(224, 122, 106, .14);
  --brand-red: #e06060;
  --flash-bg: #4d441c;
  --er-canvas: #141519;
  --er-box-bg: #22252b;
  --er-box-head: #2b3340;
  --er-box-border: #4a5160;
  --er-box-fg: #cfd2d8;
  --er-box-title: #8fb4e3;
  --er-ref-line: #5f7ea8;
  /* 派生色暗色回退：accent-hov / accent-deep 向黑混不随背景变（沿用 :root 值），
     随背景混的四项在此给暗色近似值 */
  --accent-soft: #1e2635;
  --accent-outline: #243d66;
  --row-hover: #1c222b;
  --sel-bg: #202f48;

  --scroll-track: #1d1f23;
  --scroll-thumb: #3a3d44;
  --scroll-thumb-hov: #4a4e57;
  --shadow-1: rgba(0, 0, 0, .5);
  --shadow-2: rgba(0, 0, 0, .65);
  --err-bg: #3a2321;
  --err-bd: #5c3a35;
  --err-fg: #f0a69a;
  --code-inline-bg: #2b2e35;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  font-size: 13px; color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select:none;
}
.hidden { display: none !important; }

/* 表单控件主题化 */
input[type="text"], input[type="password"], input[type="search"], select, textarea {
  background: var(--input-bg); color: var(--fg);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="color"] {
  background: var(--input-bg); color: var(--fg); padding: 0; cursor: pointer;
}

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

/* ---------------- 底部状态栏 ---------------- */
#statusbar {
  height: 24px; flex: none; display: flex; align-items: center; gap: 18px;
  padding: 0 12px; background: var(--bg-2); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-4); white-space: nowrap; overflow: hidden;
  -webkit-user-select: none; user-select:none;
}
#st-left { flex: none; overflow: hidden; text-overflow: ellipsis; }
#st-mid { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
#st-right { flex: none; text-align: right; }
.st-editflag { color: var(--danger); font-weight: 600; }
.st-ok { color: var(--ok-fg); }

/* ---------------- 标题栏 ---------------- */
#titlebar {
  height: 38px; flex: none; position: relative;
  background: var(--titlebar-bg);
  color: var(--titlebar-fg); display: flex; align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, .6);
}
#menubar { display: flex; margin-left: 6px; height: 100%; align-items: stretch; }
.menu-item {
  display: flex; align-items: center; padding: 0 12px;
  font-size: 12.5px; cursor: default; border-radius: 2px;
}
.menu-item:hover, .menu-item.open { background: var(--accent); color: #fff; }
#apptitle {
  position: absolute; left: 50%; top: 0; height: 100%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  font-size: 13px; color: #f5f5f5; letter-spacing: 0.5px;
  pointer-events: none;
}
#winbtns { margin-left: auto; display: flex; height: 100%; }
.winbtn {
  width: 44px; display: grid; place-items: center; cursor: default; color: #ddd;
}
.winbtn:hover { background: #3f3f3f; color: #fff; }
.winbtn.close:hover { background: #e81123; color: #fff; }
/* 主题按钮：浅色时显示月亮、暗黑时显示太阳 */
#wb-theme .ic-sun { display: none; }
[data-theme="dark"] #wb-theme .ic-sun { display: block; }
[data-theme="dark"] #wb-theme .ic-moon { display: none; }

/* ---------------- 主题面板 ---------------- */
#themepanel {
  position: fixed; z-index: 250; width: 248px;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 3px 3px 10px var(--shadow-1); padding: 12px 12px 10px;
}
.tp-title { font-size: 12px; color: var(--fg-4); margin: 2px 0 7px; }
.tp-modes { display: flex; gap: 6px; margin-bottom: 14px; }
.tp-mode {
  flex: 1; text-align: center; padding: 6px 0; font-size: 12px; cursor: pointer;
  border: 1px solid var(--input-border); border-radius: 3px;
  color: var(--fg-2); background: var(--bg); -webkit-user-select: none; user-select:none;
}
.tp-mode:hover { border-color: var(--accent); color: var(--accent); }
.tp-mode.active { background: var(--accent); border-color: var(--accent-hov); color: #fff; }
.tp-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tp-sw {
  width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); padding: 0;
}
.tp-sw.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg-3); }
.tp-custom {
  width: 22px; height: 22px; border: 1px dashed var(--fg-5); border-radius: 4px;
  background: var(--input-bg); cursor: pointer; padding: 1px;
}
.tp-reset { font-size: 11.5px; color: var(--fg-4); cursor: pointer; margin-left: auto; }
.tp-reset:hover { color: var(--accent); text-decoration: underline; }

/* ---------------- 主区域 ---------------- */
#main { flex: 1; display: flex; min-height: 0; }

/* 左侧 */
#sidebar { width: 400px; min-width: 200px; display: flex; position: relative; background: var(--bg); }
/* 折叠态：只留图标工具条（宽度 = #sidetool），树区隐藏 */
#sidebar.collapsed { width: 37px !important; min-width: 37px; }
#sidebar.collapsed #treewrap { display: none; }
#sidebar.collapsed #sbcollapse { right: -8px; }
#sbsplitter {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 30;
  transition: background .12s;
}
#sbsplitter:hover, body.sb-resizing #sbsplitter {
  background: var(--accent-soft);
  outline: 1px solid var(--accent-outline);
}
/* 拖动分隔条期间：全局拖拽光标 + 禁止选中文本 */
body.sb-resizing { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }
body.sb-resizing iframe, body.sb-resizing svg { pointer-events: none; }
/* 折叠 / 展开按钮（贴在侧栏右缘的小凸舌） */
#sbcollapse {
  position: absolute; right: -6px; top: 8px; width: 12px; height: 38px; z-index: 31;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 3px 2px 2px 3px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--fg-4); font-size: 11px; line-height: 1; font-family: Consolas, monospace;
  -webkit-user-select: none; user-select:none;
}
#sbcollapse:hover {
  color: var(--accent); border-color: var(--accent-outline); background: var(--accent-soft);
}
#sidetool {
  width: 36px; flex: none; background: var(--bg-3);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px; gap: 3px;
}
.stbtn {
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer;
  display: grid; place-items: center;
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
.stbtn:hover { background-color: var(--accent-soft); outline: 1px solid var(--accent-outline); }
/* 激活态（AI 面板开着时侧栏 AI 按钮常亮，与悬停同色以示"已选中"） */
.stbtn.on { background-color: var(--accent-soft); outline: 1px solid var(--accent-outline); }
/* 竖排工具条图标（CSS 绘制，蓝灰配色） */
.stbtn[data-act="home"]   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='1' fill='%234a90d9'/%3E%3Crect x='1' y='1' width='14' height='4' fill='%232f6db3'/%3E%3Cpath d='M1 8h14M1 11.5h14M6 5v11M11 5v11' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); }
.stbtn[data-act="import"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='3.5' rx='6.5' ry='2.5' fill='%2377b3e8' stroke='%232f6db3'/%3E%3Cpath d='M1.5 3.5v9c0 1.4 2.9 2.5 6.5 2.5s6.5-1.1 6.5-2.5v-9' fill='%23a8cef0' stroke='%232f6db3'/%3E%3Cpath d='M1.5 8c0 1.4 2.9 2.5 6.5 2.5s6.5-1.1 6.5-2.5' fill='none' stroke='%232f6db3'/%3E%3C/svg%3E"); }
.stbtn[data-act="export"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.5' width='14' height='4' rx='1' fill='%2377b3e8' stroke='%232f6db3'/%3E%3Crect x='1' y='9.5' width='14' height='4' rx='1' fill='%23a8cef0' stroke='%232f6db3'/%3E%3Ccircle cx='3.5' cy='4.5' r='0.9' fill='%23fff'/%3E%3Ccircle cx='3.5' cy='11.5' r='0.9' fill='%23fff'/%3E%3C/svg%3E"); }
.stbtn[data-act="find"]   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%232f6db3' stroke-width='2'/%3E%3Cpath d='M10 10 L14.5 14.5' stroke='%232f6db3' stroke-width='2.4'/%3E%3C/svg%3E"); }
.stbtn[data-act="about"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3' fill='%23555'/%3E%3Cpath d='M2 14c0-3 2.7-4.5 6-4.5s6 1.5 6 4.5z' fill='%23555'/%3E%3C/svg%3E"); }
.stbtn[data-act="layout"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='5.5' height='12' rx='1' fill='%2377b3e8' stroke='%232f6db3'/%3E%3Crect x='9.5' y='2' width='5.5' height='12' rx='1' fill='none' stroke='%232f6db3' stroke-dasharray='2 1.5'/%3E%3Cpath d='M6.6 8h2.6M9.2 8l-1.7-1.7M9.2 8l-1.7 1.7' stroke='%232f6db3' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); }

#treewrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
#treefilter { overflow: hidden; }
#tree { flex: 1; overflow: auto; padding: 3px 2px 20px; outline: none; }
#tree:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 3px; }

/* 树节点 */
.tnode {
  display: flex; align-items: center; height: 24px; white-space: nowrap;
  font-size: 13px; color: var(--fg); cursor: default; padding-right: 10px;
}
.tnode:hover { background: var(--accent-soft); }
.tnode.sel { background: var(--accent); color: #fff; }
.tnode .arrow {
  width: 16px; flex: none; text-align: center; color: var(--fg-4);
  font-family: Consolas, monospace; font-size: 10px;
}
.tnode.sel .arrow { color: #dce8f8; }
.tnode .arrow.leaf { visibility: hidden; }
.tnode .ico { width: 18px; height: 16px; flex: none; margin-right: 4px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.tnode .lbl { overflow: hidden; text-overflow: ellipsis; }
.tnode .cnt { color: var(--fg-3); margin-left: 1px; }
.tnode.sel .cnt { color: #e3ecf9; }
/* 图标: 我的PDM(网格) */
.ico.root { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='1' fill='%234a90d9'/%3E%3Crect x='1' y='1' width='14' height='4' fill='%232f6db3'/%3E%3Cpath d='M1 8h14M1 11.5h14M6 5v11M11 5v11' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); }
/* 图标: 模型文件 */
.ico.model { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 16'%3E%3Cpath d='M1 1h8l4 4v10H1z' fill='%23f8c860' stroke='%23c8961e'/%3E%3Cpath d='M9 1v4h4' fill='%23ffe9b3' stroke='%23c8961e'/%3E%3Crect x='3' y='8' width='8' height='5' fill='%23fff' stroke='%232f6db3'/%3E%3Cpath d='M3 9.5h8M3 11.5h8M6 8v5' stroke='%232f6db3' stroke-width='0.8'/%3E%3C/svg%3E"); }
/* 图标: 数据表(蓝色网格) */
.ico.table, .tabico.table {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 16 15'%3E%3Crect x='0.5' y='0.5' width='15' height='14' fill='%23fff' stroke='%232f6db3'/%3E%3Crect x='0.5' y='0.5' width='15' height='3.5' fill='%234a90d9'/%3E%3Cpath d='M0.5 7.5h15M0.5 11h15M5.5 4v10.5M10.5 4v10.5' stroke='%234a90d9' stroke-width='0.9'/%3E%3C/svg%3E");
}
/* 图标: 物理图/ER */
.ico.diagram, .tabico.diagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 16 15'%3E%3Crect x='0.5' y='1' width='6' height='5' fill='%23d6e4f7' stroke='%232f6db3'/%3E%3Crect x='9.5' y='8.5' width='6' height='5' fill='%23d6e4f7' stroke='%232f6db3'/%3E%3Cpath d='M3.5 6v4h6' fill='none' stroke='%232f6db3' stroke-dasharray='2 1.4'/%3E%3C/svg%3E");
}

/* ---------------- 右侧内容区 ---------------- */
#content { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

/* 页签栏（不放滚动条：宽度不够时由 views.trimTabbar 自动关闭最左侧页签） */
#tabbar {
  display: flex; flex: none; background: var(--bg-4);
  border-bottom: 1px solid var(--border); overflow-x: hidden; overflow-y: hidden;
  scrollbar-width: none;
}
#tabbar::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 5px; flex: none;
  height: 30px; padding: 0 6px 0 10px; font-size: 12.5px; color: var(--fg-2);
  border-right: 1px solid var(--border); cursor: default; white-space: nowrap;
  background: var(--bg-5);
}
.tab:hover { background: var(--bg-2); }
.tab.active { background: var(--bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
.tab .tabico { width: 16px; height: 14px; flex: none; background-repeat: no-repeat; background-size: contain; background-position: center; }
.tab .tabico.app {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%231f3f77'/%3E%3Ctext x='12' y='17' font-size='14' font-weight='bold' fill='%23fff' text-anchor='middle' font-family='Arial'%3ED%3C/text%3E%3C/svg%3E");
}
.tab .tname { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tab .tname.unsaved { color: var(--danger); }
.tab .tclose {
  width: 17px; height: 17px; flex: none; display: grid; place-items: center;
  border-radius: 3px; color: var(--fg-4); font-size: 13px; font-family: Arial;
}
.tab .tclose:hover { background: var(--border-3); color: var(--danger); }
.tab.active .tclose:hover { background: #e81123; color: #fff; }
.tab.pinned .tclose { display: none; }

#viewhost { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.view.active { display: flex; }

/* 面包屑 */
.crumbbar {
  height: 32px; flex: none; display: flex; align-items: center;
  padding: 0 10px 0 8px; border-bottom: 1px solid var(--border-2);
  font-size: 12.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden;
}
.crumb-accent { width: 3px; height: 16px; background: var(--brand-red); margin-right: 7px; flex: none; }
.crumb-root { color: var(--brand-red); cursor: pointer; }
.crumb-root:hover { text-decoration: underline; }
.crumb-sep { color: var(--fg-5); margin: 0 6px; }
.crumb-seg { cursor: pointer; }
.crumb-seg:hover { color: var(--accent); text-decoration: underline; }
.crumb-cur { color: var(--fg); font-weight: 600; }

/* 工具栏 */
.toolbar {
  height: 36px; flex: none; display: flex; align-items: center; gap: 1px;
  padding: 0 8px; border-bottom: 1px solid var(--border-2); background: var(--bg-2);
}
.tbtn {
  min-width: 28px; height: 26px; padding: 0 5px; display: flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: 3px; cursor: pointer; color: var(--fg-2); font-size: 11.5px;
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}
.tbtn:hover { background-color: var(--accent-soft); outline: 1px solid var(--accent-outline); }
/* 图标 + 文字按钮：背景图靠左，文字右移，避免叠在图标上 */
.tbtn.ico-text {
  background-position: 6px center;
  padding-left: 25px;
  justify-content: flex-start;
}
.tbtn.logo {
  background: none; width: 24px; height: 24px; border-radius: 4px; margin-right: 6px;
  background-color: var(--accent-deep); color: #fff; font-weight: 700; font-size: 13px; font-family: Arial;
}
.tbtn.logo:hover { outline: none; background-color: var(--accent-hov); }
.tbtn.ic-er { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='none' stroke='%23555'/%3E%3Crect x='2' y='2' width='5' height='4' fill='%234a90d9'/%3E%3Crect x='9' y='10' width='5' height='4' fill='%234a90d9'/%3E%3Cpath d='M4.5 6v6.5H9' fill='none' stroke='%23555'/%3E%3C/svg%3E"); }
.tbtn.ic-cursor { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 1 L4 13 L7.2 10.2 L9.4 14.6 L11.4 13.6 L9.2 9.3 L13 8.8 Z' fill='%23fff' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E"); }
.tbtn.ic-copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='5' y='1' width='9' height='11' fill='%23fff' stroke='%23555'/%3E%3Crect x='1.5' y='4.5' width='9' height='10' fill='%23d6e4f7' stroke='%23555'/%3E%3C/svg%3E"); }
.tbtn.ic-sql { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctext x='0' y='7' font-size='6.5' font-family='Consolas,monospace' font-weight='bold' fill='%232f6db3'%3E%26lt;%26gt;%3C/text%3E%3Ctext x='8' y='14' font-size='6' font-family='Consolas,monospace' font-weight='bold' fill='%23333'%3ESQL%3C/text%3E%3C/svg%3E"); }
.tbtn.ic-edit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 11.5 L2 14 L4.5 14 L12 6.5 L9.5 4 Z' fill='%23f2c04a' stroke='%23b98a1e'/%3E%3Cpath d='M10.5 3 L13 5.5' stroke='%23555'/%3E%3C/svg%3E"); }
.tbtn span.mplus { font-weight: 800; color: var(--accent-deep); font-size: 12.5px; font-family: Arial; }
.tbtn:hover span.mplus { color: var(--accent); }
.tsep { width: 1px; height: 18px; background: var(--border-2); margin: 0 5px; }
.toolbar .tspacer { flex: 1; }
.tbtn.primary {
  background: var(--accent); color: #fff; padding: 0 14px; font-weight: 600;
  border-radius: 3px;
}
.tbtn.primary:hover { background: var(--accent-hov); outline: none; }
.tbtn.plainbtn { color: var(--danger); }
.tbtn.plainbtn:hover { background: var(--danger-soft); outline: 1px solid var(--danger); }

/* ---------------- 数据表网格 ---------------- */
.gridwrap { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
table.pgrid { border-collapse: collapse; width: 100%; font-size: 13px; table-layout: fixed; }
.pgrid col.c-pk { width: 44px; }
.pgrid col.c-cnt { width: 70px; }
.pgrid col.c-code { width: 180px; }
.pgrid col.c-name { width: 220px; }
.pgrid col.c-type { width: 160px; }
.pgrid col.c-len { width: 100px; }
.pgrid col.c-null { width: 70px; }
.pgrid col.c-ai { width: 56px; }
.pgrid col.c-def { width: 110px; }
.pgrid col.c-cmt { width: 180px; }
/* 列宽拖拽手柄（表头右缘竖条，悬停高亮；拖动改列宽，双击恢复自适应） */
.pgrid th .col-rs {
  position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 5;
}
.pgrid th .col-rs::after {
  content: ''; position: absolute; top: 20%; bottom: 20%; left: 2px; width: 3px;
  border-radius: 2px; background: transparent;
}
.pgrid th .col-rs:hover::after { background: var(--accent); }
/* 末列手柄收进内缘：right:-3px 会让最后一级手柄越出表格右缘，把 gridwrap 撑出 2-3px 横向滚动 */
.pgrid th:last-child .col-rs { right: 0; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; }
body.col-resizing { user-select: none; -webkit-user-select: none; }
/* 编辑模式字段行拖拽排序（views.setupRowDrag）：源行半透明 + 目标行插入指示线 + 全局抓取光标 */
body.row-reordering, body.row-reordering * { cursor: grabbing !important; }
body.row-reordering { user-select: none; -webkit-user-select: none; }
.pgrid tr.drag-src td { opacity: .45; }
.pgrid tr.drag-above td { box-shadow: inset 0 2px 0 var(--accent); }
.pgrid tr.drag-below td { box-shadow: inset 0 -2px 0 var(--accent); }
.pgrid td.td-cmt { color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgrid th.sortable { cursor: pointer; -webkit-user-select: none; user-select:none; }
.pgrid th.sortable:hover { color: var(--accent); }
.pgrid th.sortable[data-dir="asc"]::after { content: " ▲"; font-size: 9px; color: var(--accent); }
.pgrid th.sortable[data-dir="desc"]::after { content: " ▼"; font-size: 9px; color: var(--accent); }
.pgrid th {
  position: sticky; top: 0; z-index: 2;
  background: var(--th-bg);
  border: 1px solid var(--border-4); border-top: none; border-left: none;
  font-weight: 400; color: var(--fg-2); text-align: left;
  padding: 6px 9px; white-space: nowrap;
}
.pgrid td {
  border: 1px solid var(--border-3); border-left: none;
  padding: 5px 9px; color: var(--fg-2); height: 27px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 隔行底色：宽字段网格扫读不串行（悬停/选中/闪烁规则声明在后且带 !important，不受影响）
   首行 rgba 为不支持 color-mix() 的旧内核回退 */
.pgrid tbody tr:nth-child(even) td { background: rgba(34, 34, 34, .035); background: color-mix(in srgb, var(--fg) 3.5%, var(--bg)); }
.pgrid tbody tr:hover td { background: var(--row-hover); }
.pgrid tr.sel td { background: var(--sel-bg) !important; }
.pgrid td.td-code { font-weight: 700; color: var(--fg); }
.pgrid td.editable { cursor: text; }
.pgrid td .chk {
  display: inline-block; width: 14px; height: 14px; line-height: 14px;
  text-align: center; color: var(--ok-fg); font-weight: 700; cursor: pointer;
  font-family: Consolas, monospace; font-size: 13px; border-radius: 2px;
}
.pgrid td .chk:hover { background: rgba(26, 122, 26, .22); background: color-mix(in srgb, var(--ok-fg) 22%, var(--bg)); }
.pgrid td .chk.off { color: var(--fg-5); font-weight: 400; }
.pgrid td .chk.ro { cursor: default; }
.pgrid td .chk.ro:hover { background: transparent; }
.pgrid td input.cell-edit {
  width: 100%; height: 22px; border: 1px solid var(--accent); padding: 0 4px;
  font: inherit; color: var(--fg); background: var(--input-bg); outline: none; -webkit-user-select: text; user-select:text;
}
/* 数据类型组合框：▼ 按钮叠在输入框右端（views.cellTypeSelect） */
.pgrid td.type-cell { position: relative; }
.pgrid td.type-cell input.cell-edit { padding-right: 22px; }
.pgrid td .type-drop {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: grid; place-items: center;
  font-size: 9px; color: var(--fg-3); background: var(--input-bg);
  border: 1px solid var(--border-2); border-radius: 2px; cursor: pointer; -webkit-user-select: none; user-select:none;
}
.pgrid td .type-drop:hover { color: var(--fg); border-color: var(--accent); }
.pgrid td select.cell-edit {
  width: 100%; height: 24px; border: 1px solid var(--accent); padding: 0 2px;
  font: inherit; font-size: 12.5px; color: var(--fg); background: var(--input-bg); outline: none;
}
.pgrid tr.flash td { background: var(--flash-bg) !important; }
.pgrid tr.flash { transition: none; }
.grid-empty { padding: 40px; color: var(--fg-4); text-align: center; }
.grid-empty-row td { padding: 26px 0; color: var(--fg-4); text-align: center; }

/* 查看模式提示（单元格不可编辑时的虚线观感由 JS 控制 title） */
.view-ro .pgrid td.editable { cursor: default; }

/* 表备注条 */
.tnote {
  flex: none; min-height: 30px; line-height: 20px; padding: 5px 10px;
  border-top: 1px solid var(--border-2); color: var(--fg-3); font-size: 12.5px;
  overflow: hidden; background: var(--bg);
}
.tnote b { color: var(--fg-2); }
.tnote .edit-flag { color: var(--danger); font-weight: 600; }
.tnote .edit-flag.ok { color: var(--ok-fg); }

/* ---------------- 主页视图 ---------------- */
.homeview { align-items: center; justify-content: flex-start; overflow: auto; background: var(--bg-9); }
/* width:100% —— 列向 flex 的子项默认收缩为内容宽度，会导致特性网格掉成单栏 */
.home-inner { width: 100%; max-width: 760px; padding: 42px 30px 56px; text-align: center; }
.home-logo {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 14px;
  background: var(--accent-deep); color: #fff; font-size: 40px; font-weight: 700;
  font-family: Arial; display: grid; place-items: center;
  box-shadow: 0 6px 18px var(--shadow-1);
}
.home-title { font-size: 26px; font-weight: 700; color: var(--accent-deep); }
.home-sub { color: var(--fg-4); margin: 8px 0 24px; font-size: 13px; }
.home-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 26px; }
.hbtn {
  padding: 9px 26px; font-size: 13.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--btn-border); background: var(--bg); color: var(--fg);
}
.hbtn:hover { border-color: var(--accent); color: var(--accent); }
.hbtn.primary { background: var(--accent); border-color: var(--accent-hov); color: #fff; }
.hbtn.primary:hover { background: var(--accent-hov); color: #fff; }

/* 已打开的模型（最近文件卡片） */
.home-models { margin-bottom: 22px; text-align: left; }
.home-models h3 { font-size: 13px; color: var(--fg-3); font-weight: 600; margin-bottom: 8px; }
.home-models h3 .h-cnt {
  font-weight: 400; color: var(--fg-5); margin-left: 6px;
  background: var(--bg-3); border-radius: 8px; padding: 1px 8px; font-size: 11.5px;
}
.home-model-card {
  background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden;
}
.home-model-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--border-3); font-size: 12.8px; color: var(--fg-2);
}
.home-model-item:last-child { border-bottom: none; }
.home-model-item:hover { background: var(--bg-2); }
.home-model-item .m-name { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-model-item .m-cnt { color: var(--fg-5); font-size: 12px; flex: none; }
.home-model-item .m-open { color: var(--accent); cursor: pointer; margin-left: auto; flex: none; font-size: 12.5px; }
.home-model-item .m-open:hover { text-decoration: underline; }

/* 功能特性：标题 + 描述卡片，两栏网格（内容区窄时自动减列） */
.home-feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px 30px; text-align: left;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 20px 24px;
}
.home-feats .feat { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.home-feats .feat::before { content: "✓"; color: var(--ok-fg); font-weight: 700; flex: none; margin-top: 1px; }
.home-feats .feat .f-body { min-width: 0; }
.home-feats .feat .f-t { color: var(--fg-2); font-size: 12.8px; font-weight: 600; line-height: 1.5; }
.home-feats .feat .f-d { color: var(--fg-5); font-size: 12px; line-height: 1.6; margin-top: 2px; }

/* ---------------- ER 图视图 ---------------- */
.erwrap { flex: 1; min-height: 0; overflow: hidden; position: relative; background: var(--er-canvas); cursor: grab; }
.erwrap.panning { cursor: grabbing; }
.ersvg { width: 100%; height: 100%; display: block; }
.erbox { cursor: pointer; }
.erbox rect.frame { fill: var(--er-box-bg); stroke: var(--er-box-border); }
.erbox rect.head { fill: var(--er-box-head); stroke: var(--er-box-border); }
.erbox.selected rect.frame, .erbox.selected rect.head { stroke: #e36c09; stroke-width: 1.6; }
.er-marquee {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px dashed #e36c09; background: rgba(227, 108, 9, 0.08);
}
.erbox text { font-size: 10.5px; fill: var(--er-box-fg); font-family: "Microsoft YaHei", sans-serif; pointer-events: none; }
.erbox text.h { font-weight: 700; fill: var(--er-box-title); }
.erbox:hover rect.frame { stroke: #e36c09; }
.erref { cursor: default; }
.erref path { fill: none; stroke: var(--er-ref-line); stroke-width: 1.2; pointer-events: none; }
.erref:hover path { stroke: #e36c09; stroke-width: 1.8; }
/* 关系线右键命中区（透明加宽描边；pointer-events:stroke 不受透明影响）。
   规则须压过上面的 hover/hl 染色，否则 9px 命中线会以橙色显形 */
.erref .erref-hit { fill: none; stroke: transparent; stroke-width: 9; pointer-events: stroke; }
.erref:hover .erref-hit, .erref.hl .erref-hit { stroke: transparent; }
.erref polygon { fill: var(--er-ref-line); pointer-events: none; }
.erref:hover polygon { fill: #e36c09; }
.erref text.card { font-size: 9px; fill: var(--fg-4); font-family: "Microsoft YaHei", sans-serif; pointer-events: none; }
.erref.hl path { stroke: #e36c09; stroke-width: 2; }
.erref.hl polygon { fill: #e36c09; }
.erref.hl text.card { fill: #e36c09; font-weight: 700; }
/* 列名推断关系：虚线 + 半透明，与模型中真实建立的 Reference 区分 */
.erref.infer path { stroke-dasharray: 7 5; opacity: .78; }
.erref.infer polygon { opacity: .78; }
.erref.infer:hover path, .erref.infer.hl path { stroke-dasharray: none; opacity: 1; }
.erref.infer:hover polygon, .erref.infer.hl polygon { opacity: 1; }
.zoompct { min-width: 46px; text-align: center; font-size: 12px; color: var(--fg-3); cursor: pointer; -webkit-user-select: none; user-select:none; }
.zoompct:hover { color: var(--accent); }
.erpkg rect.frame { fill: rgba(128, 128, 128, 0.06); stroke: var(--er-box-border); stroke-dasharray: 6 3; }
.erpkg text { fill: var(--er-box-title); font-family: "Microsoft YaHei", sans-serif; pointer-events: none; }
.erpkg { cursor: pointer; }
.erpkg:hover rect.frame { stroke: #e36c09; }
.erlinktemp { fill: none; stroke: #e36c09; stroke-width: 1.6; stroke-dasharray: 7 4; pointer-events: none; }
.erbox.erlink-target rect.frame, .erbox.erlink-target rect.head { stroke: #e36c09; stroke-width: 2; }
.erfk-dir { flex: 1; font-size: 13px; }
.erfk-dir b { color: var(--accent); }

/* ---------------- 索引 / 外键对话框 ---------------- */
.ix-list { border: 1px solid var(--border-3); border-radius: 3px; max-height: 260px; overflow: auto; }
.ix-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--border-3); font-size: 12.5px;
}
.ix-row:last-child { border-bottom: none; }
.ix-row .ix-name { flex: none; width: 180px; font-family: Consolas, monospace; }
.ix-row .ix-u { flex: none; width: 34px; text-align: center; font-size: 11px; color: var(--fg-4);
  border: 1px solid var(--border-3); border-radius: 8px; padding: 1px 6px; }
.ix-row .ix-u.yes { color: var(--accent); border-color: var(--accent-outline); }
.ix-row .ix-cols { flex: 1; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-2); }
.ix-colbox { display: flex; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--input-border);
  border-radius: 2px; background: var(--input-bg); max-height: 120px; overflow: auto; font-size: 12.5px; }

/* ---------------- 右键菜单 / 下拉 ---------------- */
#ctxmenu, #dropdown {
  position: fixed; z-index: 200; min-width: 180px;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 3px 3px 8px var(--shadow-1); padding: 2px; font-size: 12.8px;
}
.ctx-item { padding: 6px 22px 6px 14px; cursor: default; white-space: nowrap; display: flex; justify-content: space-between; gap: 18px; }
.ctx-item:hover { background: var(--accent); color: #fff; }
.ctx-item.disabled { color: var(--fg-5); pointer-events: none; }
.ctx-item .hotkey { color: var(--fg-5); font-size: 11.5px; }
.ctx-item:hover .hotkey { color: #dce8f8; }
.ctx-sep { height: 1px; background: var(--border-2); margin: 3px 2px; }

/* ---------------- 对话框 ----------------
 * #modalhost 为栈容器；每层模态独占 .modal-layer 遮罩（后入者在上），
 * 上层关闭不移除下层——对话框内再弹确认框不再销毁底层弹窗 */
#modalhost {
  position: fixed; inset: 0; z-index: 300;
}
.modal-layer {
  position: absolute; inset: 0;
  background: var(--overlay); display: grid; place-items: center;
}
.dialog {
  background: var(--bg); min-width: 440px; max-width: min(900px, 88vw);
  max-height: 86vh; display: flex; flex-direction: column;
  border: 1px solid var(--border); box-shadow: 0 10px 34px var(--shadow-2);
}
.dlg-title {
  height: 34px; flex: none; display: flex; align-items: center;
  background: var(--titlebar-bg); color: #fff;
  padding: 0 12px; font-size: 13px;
}
.dlg-body { padding: 16px 18px; overflow: auto; font-size: 13px; color: var(--fg); -webkit-user-select: text; user-select:text; }
.dlg-foot {
  flex: none; padding: 10px 14px; border-top: 1px solid var(--border-2);
  display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-6);
}
.btn {
  min-width: 82px; padding: 6px 14px; font-size: 12.8px; cursor: pointer;
  background: var(--btn-bg); color: var(--fg);
  border: 1px solid var(--btn-border); border-radius: 2px; font-family: inherit;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent-hov); color: #fff; }
.btn.primary:hover { background: var(--accent-hov); }
.btn.btn-x { min-width: 30px; padding: 4px 8px; color: var(--danger); }
.btn.btn-x:hover { background: var(--danger-soft); border-color: var(--danger); }
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.form-row label { width: 76px; flex: none; color: var(--fg-2); text-align: right; }
.form-row input[type="text"], .form-row input[type="password"], .form-row select, .form-row textarea {
  flex: 1; padding: 5px 8px; border: 1px solid var(--input-border); font: inherit;
  color: var(--fg); background: var(--input-bg);
  border-radius: 2px; outline: none; -webkit-user-select: text; user-select:text;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); }
.form-hint { color: var(--fg-5); font-size: 12px; margin: -6px 0 12px 86px; }
.sql-area {
  width: 100%; height: 46vh; resize: vertical; border: 1px solid var(--input-border);
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.5;
  padding: 8px; outline: none; -webkit-user-select: text; user-select:text; white-space: pre;
  background: var(--input-bg); color: var(--fg);
}
.find-input { width: 100%; padding: 7px 9px; border: 1px solid var(--input-border); font: inherit; color: var(--fg); background: var(--input-bg); outline: none; margin-bottom: 8px; -webkit-user-select: text; user-select:text; }
.find-input:focus { border-color: var(--accent); }
.find-list { max-height: 46vh; overflow: auto; border: 1px solid var(--border-2); }
.find-item { padding: 6px 10px; cursor: default; font-size: 12.8px; display: flex; gap: 8px; border-bottom: 1px solid var(--border-3); }
.find-item:hover { background: var(--accent-soft); }
.find-item .fc { font-weight: 700; color: var(--accent-deep); }
.find-item .fn { color: var(--fg-3); }
.find-item .fm { margin-left: auto; color: var(--fg-5); font-size: 11.5px; }
/* 模型检查对话框 */
.ck-summary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ck-summary .ck-title { color: var(--fg-3); font-size: 12.5px; margin-right: 4px; }
.ck-chip {
  border: 1px solid var(--border-2); border-radius: 12px; padding: 2px 10px;
  font-size: 12px; cursor: pointer; color: var(--fg-3); -webkit-user-select: none; user-select:none;
}
.ck-chip:hover { border-color: var(--accent); color: var(--accent); }
.ck-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.ck-list .find-item { align-items: baseline; }
.ck-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 3px; }
.ck-badge.sev-error { color: #fff; background: var(--danger); }
.ck-badge.sev-warn { color: var(--err-fg); background: var(--err-bg); border: 1px solid var(--err-bd); }
.ck-badge.sev-advice { color: var(--fg-3); background: var(--bg-3); border: 1px solid var(--border-2); }
.ck-list .ck-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.about-logo { width: 60px; height: 60px; border-radius: 12px; background: var(--accent-deep); color: #fff; font-size: 32px; font-weight: 700; font-family: Arial; display: grid; place-items: center; margin: 0 auto 12px; }
.about-text { text-align: center; color: var(--fg-3); line-height: 1.9; font-size: 12.8px; }
.about-text h2 { color: var(--accent-deep); margin: 0 0 4px; font-size: 19px; }
.help-text { line-height: 2.0; color: var(--fg-2); font-size: 12.8px; }
.help-text h4 { margin: 10px 0 2px; color: var(--accent-deep); }
.help-text kbd {
  background: var(--bg-3); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 3px; padding: 0 5px; font-family: Consolas, monospace; font-size: 11.5px;
  color: var(--fg-2);
}
/* 对话框页签（AI 设置等） */
.dlg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-2); margin-bottom: 14px; }
.dlg-tab {
  padding: 6px 16px; cursor: pointer; color: var(--fg-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; -webkit-user-select: none; user-select:none;
}
.dlg-tab:hover { color: var(--accent); }
.dlg-tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------------- Toast ---------------- */
/* 纯展示元素：不拦截下方控件（如 AI 输入框）的鼠标操作 */
#toasthost { position: fixed; right: 18px; bottom: 22px; z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  background: rgba(35, 35, 35, .94); color: #fff; padding: 9px 16px;
  border-radius: 4px; font-size: 12.8px; max-width: 420px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); animation: tin .18s ease-out;
}
.toast.err { background: rgba(178, 34, 34, .96); }
.toast.ok::before { content: "✔ "; color: #7fe07f; }
@keyframes tin { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- 滚动条 ---------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hov); }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
/* Firefox 无 ::-webkit-scrollbar 私有伪元素，用标准属性补同一套主题色。
 * Chrome 121+ / Safari 18.2+ 起标准属性优先、私有样式自动停用（同色系，宽度趋近）；
 * 更旧的 Chromium / Safari 不识别标准属性，仍走上方私有样式，互不影响 */
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }

/* ---------------- AI 助手面板 ---------------- */
#aipanel {
  width: 380px; flex: none; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border); min-height: 0;
}
#aihead {
  height: 44px; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-bottom: 1px solid var(--border-2); background: var(--bg-2);
}
#aititle { font-weight: 700; color: var(--accent-deep); font-size: 13.5px; white-space: nowrap; }
#aisessionsel {
  flex: 1; min-width: 0; height: 28px; border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 12.5px; padding: 0 5px; background: var(--input-bg); color: var(--fg); outline: none;
}
#aiheadbtns { display: flex; gap: 4px; }
.aibtn {
  width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
  border-radius: 4px; color: var(--fg-3); font-size: 16px; -webkit-user-select: none; user-select:none;
}
.aibtn:hover { background: var(--accent-soft); color: var(--accent-deep); }
.aibtn.disabled { opacity: .35; }
/* 文字化按钮（新建/改名/删除/历史/设置/收起）：无边框短词，悬停浅底 */
.aibtn.txt {
  width: auto; height: 26px; display: inline-flex; align-items: center;
  padding: 0 7px; font-size: 12px; line-height: 1; color: var(--fg-2); white-space: nowrap;
}
#aisubbar {
  flex: none; display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border-3);
  background: var(--bg-8);
}
#aisubbar select {
  flex: 1; min-width: 0; height: 27px; border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 12.5px; background: var(--input-bg); color: var(--fg); outline: none;
}
#aimsgs { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; background: var(--bg-7); }
.aimsg { margin-bottom: 10px; display: flex; flex-direction: column; }
.aimsg .aiwho { font-size: 11px; color: var(--fg-5); margin-bottom: 3px; padding-left: 2px; display: flex; align-items: center; width: 100%; }
/* AI 回复底部操作条（复制 / 导出 / 重新生成），挂在气泡下；▾ 为分裂按钮的菜单箭头 */
.aimsg .aiact { cursor: pointer; font-size: 11px; color: var(--fg-5); -webkit-user-select: none; user-select:none; }
.aimsg .aiact:hover { color: var(--accent); }
.aimsg .aiact.regen.hidden { display: none; }
.aimsg .aibar { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-left: 2px; }
.aimsg .aibar .aisplit { display: inline-flex; align-items: baseline; }
.aimsg .aibar .cv { font-size: 9px; padding: 0 2px; opacity: .75; }
.aimsg .aibubble {
  max-width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 12.8px;
  line-height: 1.65; word-break: break-word; -webkit-user-select: text; user-select:text;
}
.aimsg.user { align-items: flex-end; }
.aimsg.user .aibubble { background: var(--accent); color: #fff; border-top-right-radius: 2px; white-space: pre-wrap; }
.aimsg.assistant .aibubble { background: var(--bg); border: 1px solid var(--border-2); border-top-left-radius: 2px; }
.aimsg .aibubble.err { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err-fg); }
/* Token 用量 meta 行（气泡下方小字） */
.aimsg .aimeta { font-size: 10.5px; color: var(--fg-5); margin-top: 3px; padding-left: 2px; }
/* 失败重试行：错误文案 + ↻ 重试按钮（保留已流式输出的内容时追加在内容下方） */
.aimsg .aierrrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.aimsg .aierrrow .aierrtext { font-size: 12px; color: var(--err-fg); flex: 1; }
.aimsg .aierrrow .airetry {
  border: 1px solid var(--border-2); background: var(--bg); color: var(--fg);
  border-radius: 4px; font-size: 11.5px; padding: 2px 8px; cursor: pointer;
}
.aimsg .aierrrow .airetry:hover { border-color: var(--accent); color: var(--accent); }
/* 消息附图（视觉消息）：用户气泡内缩略图行，点击放大预览 */
.aimsg.user .aibubble .aiimgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aimsg.user .aibubble .aiimgs img {
  max-height: 96px; max-width: 180px; border-radius: 6px; cursor: zoom-in; display: block;
  border: 1px solid rgba(255, 255, 255, .35);
}
/* 用户消息操作条（✏ 编辑 / 🗑 删除）：弱化常显，悬停恢复 */
.aimsg .aibar.userbar { opacity: .55; }
.aimsg .aibar.userbar:hover { opacity: 1; }
/* 行内编辑态（编辑并重发）：气泡内 textarea + 操作按钮 */
.aimsg.user .aibubble .ai-edit-ta {
  display: block; width: 100%; min-height: 72px; resize: vertical;
  border: 1px solid var(--input-border); border-radius: 6px; padding: 6px 8px;
  font: inherit; font-size: 12.5px; line-height: 1.6; box-sizing: border-box;
  background: var(--input-bg); color: var(--fg); outline: none;
}
.aimsg.user .aibubble .ai-edit-ta:focus { border-color: var(--accent); }
.aimsg .ai-editrow { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.aimsg .ai-editsave, .aimsg .ai-editcancel {
  border: 1px solid var(--border-2); background: var(--bg); color: var(--fg);
  border-radius: 4px; font-size: 11.5px; padding: 3px 10px; cursor: pointer; font-family: inherit;
}
.aimsg .ai-editsave { background: var(--accent); border-color: var(--accent); color: #fff; }
.aimsg .ai-editsave:hover { filter: brightness(1.08); }
.aimsg .ai-editcancel:hover { border-color: var(--accent); color: var(--accent); }
/* 「加载更早消息」分页行（消息区顶部，长会话不全量渲染） */
.ai-more { text-align: center; margin-bottom: 10px; }
.ai-morebtn {
  border: 1px dashed var(--border-2); background: var(--bg); color: var(--fg-3);
  border-radius: 12px; font-size: 11.5px; padding: 3px 12px; cursor: pointer; font-family: inherit;
}
.ai-morebtn:hover { border-color: var(--accent); color: var(--accent); }
.aimsg .aibubble pre {
  background: #1e1e2e; color: #d8dee9; padding: 8px 10px; border-radius: 6px;
  overflow-x: auto; font-size: 12px; line-height: 1.5; position: relative; margin: 6px 0;
  font-family: Consolas, "Courier New", monospace; white-space: pre;
}
.aimsg .aibubble pre .sqlcopy {
  position: absolute; top: 5px; right: 5px; font-size: 12px; padding: 3px 10px;
  background: #3b4252; color: #cbd3e0; border: none; border-radius: 3px; cursor: pointer;
}
.aimsg .aibubble pre .sqlcopy:hover { background: #4c566a; }
.aimsg .aibubble pre .sqlimport {
  position: absolute; top: 5px; right: 54px; font-size: 12px; padding: 3px 10px;
  background: #2e4157; color: #9fc3ec; border: none; border-radius: 3px; cursor: pointer;
}
.aimsg .aibubble pre .sqlimport:hover { background: #3a5170; }
.aimsg .aibubble code.inline {
  background: var(--code-inline-bg); border-radius: 3px; padding: 1px 5px;
  font-family: Consolas, monospace; font-size: 12px;
}
.aimsg .aibubble b { color: var(--accent-deep); }
.aimsg .aibubble p { margin: 4px 0; }
.aimsg .aibubble .md-h1, .aimsg .aibubble .md-h2, .aimsg .aibubble .md-h3 { font-weight: 700; margin: 10px 0 4px; line-height: 1.4; }
.aimsg .aibubble .md-h1 { font-size: 14.5px; }
.aimsg .aibubble .md-h2 { font-size: 13.5px; }
.aimsg .aibubble .md-h3 { font-size: 12.5px; color: var(--fg-2); }
.aimsg .aibubble hr { border: none; border-top: 1px solid var(--border-2); margin: 8px 0; }
.aimsg .aibubble ul, .aimsg .aibubble ol { margin: 4px 0; padding-left: 20px; }
.aimsg .aibubble li { margin: 2px 0; }
.aimsg .aibubble blockquote { margin: 6px 0; padding: 2px 8px; border-left: 3px solid var(--border-2); color: var(--fg-3); }
.aimsg .aibubble table { border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; max-width: 100%; }
.aimsg .aibubble th, .aimsg .aibubble td { border: 1px solid var(--border-2); padding: 3px 7px; text-align: left; vertical-align: top; }
.aimsg .aibubble th { background: var(--bg-8); font-weight: 600; white-space: nowrap; }
.aimsg .aibubble a { color: var(--accent); }
.aimsg.typing .aibubble::after {
  content: '▌'; animation: aiblink 0.9s infinite; color: var(--accent);
}
@keyframes aiblink { 50% { opacity: 0; } }
#aiinputwrap { flex: none; display: flex; padding: 8px; border-top: 1px solid var(--border-2); background: var(--bg-2); }
#aiinputbox { flex: 1; min-width: 0; position: relative; display: flex; }
/* 底部内边距为悬浮按钮预留空间：滚动到最后一行时文字也不会压在按钮下 */
#aiinput {
  flex: 1; width: 100%; resize: none; border: 1px solid var(--input-border); border-radius: 6px; padding: 7px 10px 40px;
  font: inherit; font-size: 12.8px; line-height: 1.5; color: var(--fg); background: var(--input-bg);
  outline: none; overflow-y: auto; -webkit-user-select: text; user-select:text;
}
#aiinput:focus { border-color: var(--accent); }
/* 输入框顶缘高度手柄：上拉加高（5→10 行）、下拉减高、双击恢复默认 */
#aiinresize { position: absolute; left: 0; right: 0; top: -5px; height: 10px; cursor: row-resize; z-index: 2; }
#aiinresize::before {
  content: ''; position: absolute; left: 50%; top: 3px; transform: translateX(-50%);
  width: 30px; height: 3px; border-radius: 2px; background: var(--border-2);
}
#aiinresize:hover::before, #aiinresize.dragging::before { background: var(--accent); }
/* 发送 / 放大悬浮在输入框右下角（ChatGPT 式），不占独立列 */
#aifabs { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 6px; align-items: center; z-index: 2; }
#aiexpand {
  flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--input-border); border-radius: 6px;
  background: var(--bg); color: var(--fg-2); font-size: 11.5px; font-family: inherit;
  cursor: pointer; white-space: nowrap; box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
}
#aiexpand:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 📎 附加图片（视觉模型）：与放大 / 发送同排悬浮 */
#aiattach {
  flex: none; height: 28px; padding: 0 9px; border: 1px solid var(--input-border); border-radius: 6px;
  background: var(--bg); color: var(--fg-2); font-size: 14px; font-family: inherit;
  cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
}
#aiattach:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#aisend {
  flex: none; height: 28px; padding: 0 16px; border: none; border-radius: 6px; background: var(--accent);
  color: #fff; font-size: 12.8px; cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
}
#aisend:disabled { background: #a2bce5; background: color-mix(in srgb, var(--accent) 45%, var(--bg)); cursor: default; }
#aisend:hover:not(:disabled) { filter: brightness(1.08); }
/* 放大编辑弹窗：textarea 自适应内容（宽按最长行、高按行数，超出上限内部滚动） */
.ai-expand-ta {
  display: block; width: 100%; min-height: 200px; resize: none;
  border: 1px solid var(--input-border); border-radius: 6px; padding: 8px 10px;
  font: inherit; font-size: 12.8px; line-height: 1.5; color: var(--fg); background: var(--input-bg);
  outline: none; overflow-y: auto; -webkit-user-select: text; user-select:text;
}
.ai-expand-ta:focus { border-color: var(--accent); }
/* 推荐操作行：快捷指令 + 清空上下文（单行横向滚动，隐藏滚动条，滚轮可横滚） */
#aiactbar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--bg-2);
}
#aiquicks {
  flex: 1; min-width: 0; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
#aiquicks::-webkit-scrollbar { display: none; }
.ai-quick {
  flex: none; padding: 4px 10px; border: 1px solid var(--input-border); border-radius: 13px;
  background: var(--bg); color: var(--fg-2); font-size: 12px; font-family: inherit;
  cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.ai-quick:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 快捷条上的「清空」无会话时置灰（沿用 .aibtn.disabled 的语义） */
.ai-quick.disabled { opacity: .35; }
.ai-empty { text-align: center; color: var(--fg-5); font-size: 12.5px; padding: 30px 14px; line-height: 2; }
.ai-empty .chips { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ai-chip {
  display: inline-block; padding: 5px 12px; border: 1px solid var(--input-border); border-radius: 14px;
  cursor: pointer; background: var(--bg); color: var(--fg-2); font-size: 11.5px; font-family: inherit;
}
.ai-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 右键「询问 AI」定位引用条（输入框上方，随下一条消息发送） */
#airefs { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 8px 0; background: var(--bg-2); }
#airefs.hidden { display: none; }
.ai-ref {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 5px 2px 9px; border: 1px solid var(--input-border); border-radius: 12px;
  background: var(--bg); font-size: 11.5px; color: var(--fg-2);
}
.ai-ref .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ai-ref .x { cursor: pointer; color: var(--fg-5); padding: 0 4px; border-radius: 8px; line-height: 1.2; }
.ai-ref .x:hover { color: var(--err-fg); background: var(--err-bg); }
/* 待发图片缩略图条（📎 / 粘贴 / 拖放加入）：引用条同位，× 移除、点图放大预览 */
#aiimgs { flex: none; display: flex; gap: 8px; padding: 7px 8px 0; flex-wrap: wrap; }
#aiimgs.hidden { display: none; }
#aiimgs .aiimg { position: relative; display: inline-block; }
#aiimgs .aiimg img {
  height: 52px; max-width: 92px; object-fit: cover; border-radius: 6px; display: block;
  border: 1px solid var(--border-2); cursor: zoom-in; background: var(--bg);
}
#aiimgs .aiimg .x {
  position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-2); color: var(--fg-3);
  font-size: 11px; line-height: 14px; text-align: center; cursor: pointer; -webkit-user-select: none; user-select:none;
}
#aiimgs .aiimg .x:hover { color: var(--err-fg); border-color: var(--err-fg); }
/* 用户气泡内的定位引用块：半透明白底左线，区别于提问正文 */
.aimsg.user .aibubble .aiquote {
  background: rgba(255, 255, 255, .17); border-left: 3px solid rgba(255, 255, 255, .6);
  border-radius: 4px; padding: 4px 8px; margin-bottom: 6px;
  white-space: pre-wrap; text-align: left; font-size: 11.8px; line-height: 1.7;
}
.aimsg.user .aibubble .aitext { white-space: pre-wrap; }
/* 历史会话抽屉（🕘 打开）：覆盖 head 以下全部区域；搜索标题与消息内容，
 * 点条目恢复会话、🗑 删除会话；标题/摘要命中词用 <mark> 高亮 */
#aihist {
  position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; background: var(--bg);
  border-top: 1px solid var(--border-2); box-shadow: -6px 4px 18px rgba(0, 0, 0, .14);
}
#aihist.hidden { display: none; }
.aihist-top { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; }
#aihistsearch {
  flex: 1; min-width: 0; height: 28px; border: 1px solid var(--input-border); border-radius: 4px;
  font: inherit; font-size: 12.5px; padding: 0 8px; background: var(--input-bg);
  color: var(--fg); outline: none; -webkit-user-select: text; user-select:text;
}
#aihistsearch:focus { border-color: var(--accent); }
#aihistcount { flex: none; padding: 2px 10px 6px; font-size: 11px; color: var(--fg-5); }
#aihistlist { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border-3); }
.aihist-item { padding: 7px 10px 8px; border-bottom: 1px solid var(--border-3); cursor: pointer; }
.aihist-item:hover { background: var(--accent-soft); }
.aihist-item.cur { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.aihist-item .aihist-row { display: flex; align-items: center; gap: 6px; }
.aihist-item .t {
  flex: 1; min-width: 0; font-size: 12.8px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aihist-item .del {
  flex: none; font-size: 12px; line-height: 1; opacity: .5; cursor: pointer;
  padding: 3px 4px; border-radius: 3px; -webkit-user-select: none; user-select:none;
}
.aihist-item .del:hover { opacity: 1; background: var(--err-bg); }
.aihist-item .meta {
  font-size: 11px; color: var(--fg-5); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aihist-item .snip {
  font-size: 11.5px; color: var(--fg-3); margin-top: 3px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.aihist-item mark {
  background: rgba(49, 106, 197, .22); background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-deep); padding: 0 1px; border-radius: 2px;
}
.aihist-empty { text-align: center; color: var(--fg-5); font-size: 12px; padding: 26px 14px; line-height: 1.9; }
.aibtn.on { background: var(--accent-soft); color: var(--accent-deep); }
.stbtn[data-act="ai"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l1.7 3.9L13.6 6 10.5 8.8l.8 4.2L8 10.9 4.7 13l.8-4.2L2.4 6l3.9-1.1z' fill='%23f2c04a' stroke='%23c8961e' stroke-width='0.8'/%3E%3Ccircle cx='12.5' cy='12' r='2.6' fill='%234a90d9'/%3E%3Ctext x='12.5' y='13' font-size='3' fill='%23fff' text-anchor='middle' font-family='Arial'%3EAI%3C/text%3E%3C/svg%3E"); }
.stbtn[data-act="theme"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='%23f5d061' stroke='%23b98a1e'/%3E%3Cpath d='M8 1.6a6.4 6.4 0 0 1 0 12.8z' fill='%234a4a4a'/%3E%3C/svg%3E"); }

/* ---------------- 列表过滤框 ---------------- */
.grid-filter {
  margin-left: auto; height: 24px; width: 190px;
  border: 1px solid var(--input-border); border-radius: 3px;
  background: var(--input-bg); color: var(--fg);
  font: inherit; font-size: 12px; padding: 0 8px; outline: none; -webkit-user-select: text; user-select:text;
}
.grid-filter:focus { border-color: var(--accent); }
.pgrid tr.row-open { cursor: pointer; }
.tnote .f-count { color: var(--fg-4); }

/* ---------------- AI 面板拖宽 ---------------- */
#aipanel { position: relative; }
#airesize {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 35;
}
.home-model-item .m-del { color: var(--fg-5); cursor: pointer; margin-left: 10px; }
.home-model-item .m-del:hover { color: var(--danger); text-decoration: underline; }
.home-model-item .m-ren { color: var(--fg-5); cursor: pointer; margin-left: 10px; }
.home-model-item .m-ren:hover { color: var(--accent); text-decoration: underline; }
.home-model-item .m-copy { color: var(--fg-5); cursor: pointer; margin-left: 10px; }
.home-model-item .m-copy:hover { color: var(--accent); text-decoration: underline; }
#aisend.stopping { background: var(--danger, #c0392b); }

/* ---------------- AI 设置：供应商卡片 ---------------- */
.btn.btn-sm { min-width: 52px; padding: 4px 10px; font-size: 12px; }
.prov-card {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 10px 12px 8px; margin-bottom: 10px; background: var(--bg);
}
.prov-card.default-card { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.prov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.prov-head input.prov-name { width: 160px; font-weight: 600; }
.prov-head-sp { flex: 1; }
.prov-default {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; color: var(--fg-3); -webkit-user-select: none; user-select:none; cursor: pointer;
}
.prov-test-status { font-size: 11.5px; color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.prov-test-status.ok { color: var(--ok-fg); }
.prov-test-status.err { color: var(--danger); }
.prov-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.prov-row > label, .prov-row + .prov-hint { flex: none; }
.prov-row > label {
  width: 64px; flex: none; color: var(--fg-4); font-size: 12px; text-align: right;
}
.prov-row input[type="text"], .prov-row input[type="password"], .prov-row input[type="number"] {
  flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--input-border);
  border-radius: 2px; font: inherit; font-size: 12.5px; outline: none;
  background: var(--input-bg); color: var(--fg); -webkit-user-select: text; user-select:text;
}
.prov-row input:focus { border-color: var(--accent); }
.prov-row select.prov-modelsel, .prov-row select.prov-typesel {
  flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--input-border);
  border-radius: 2px; font: inherit; font-size: 12.5px; outline: none;
  background: var(--input-bg); color: var(--fg); cursor: pointer;
}
.prov-row select.prov-modelsel:focus, .prov-row select.prov-typesel:focus { border-color: var(--accent); }
.prov-row select.prov-modelsel:disabled, .prov-row select.prov-typesel:disabled { color: var(--fg-5); cursor: default; }
.prov-row select.prov-typesel { flex: none; width: 128px; }
.prov-preset.on { border-color: var(--accent); color: var(--accent); }
#wb-ai.on { background: #3f3f3f; color: #fff; }
.prov-key-wrap { flex: 1; min-width: 0; display: flex; gap: 5px; }
.prov-key-wrap input { flex: 1; }
.prov-hint { font-size: 11.5px; color: var(--fg-5); margin: 2px 0 6px 72px; line-height: 1.6; }
.prov-empty { padding: 26px; text-align: center; color: var(--fg-5); font-size: 12.5px; }
.prov-dft-block {
  width: 100%; font-size: 12px; line-height: 1.6;
  background: var(--bg-2); color: var(--fg-3);
  border: 1px dashed var(--border); border-radius: 3px; padding: 6px 8px;
  outline: none; -webkit-user-select: text; user-select:text;
}

/* ER 图拖拽表框 */
.erbox:hover { cursor: grab; }
.erbox:active { cursor: grabbing; }
.fk-sec { padding: 6px 10px; font-size: 11.5px; color: var(--fg-4); background: var(--bg-8); border-bottom: 1px solid var(--border-3); }
.fk-maprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--border-3); border-radius: 3px; margin-top: 4px; font-size: 12.5px; font-family: Consolas, monospace; }

/* ---------------- 树内过滤 ---------------- */
#treefilter {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--border-2); background: var(--bg-2);
}
#treefilter input {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--input-border); border-radius: 3px;
  background: var(--input-bg); color: var(--fg); outline: none;
}
#treefilter input:focus { border-color: var(--accent); }
#treefilter-count {
  flex: none; font-size: 11px; color: var(--accent); white-space: nowrap; cursor: pointer;
}
#treefilter-count.empty { color: var(--fg-5); }

/* ---------------- 跨内核兼容：派生色实时混色 ----------------
 * 支持 color-mix() 的内核（Chrome 111+ / Firefox 113+ / Safari 16.2+）按当前
 * --accent / --bg 实时计算，自定义主题色即时生效；不支持的内核保留上面的静态近似值。
 * 暗色只覆盖随背景混的四项；accent-hov / accent-deep 向黑混与背景无关，
 * danger-soft 暗色本就有静态 rgba，均沿用不重复声明。 */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --accent-hov: color-mix(in srgb, var(--accent) 86%, #000);
    --accent-deep: color-mix(in srgb, var(--accent) 63%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --accent-outline: color-mix(in srgb, var(--accent) 42%, var(--bg));
    --row-hover: color-mix(in srgb, var(--accent) 6%, var(--bg));
    --sel-bg: color-mix(in srgb, var(--accent) 24%, var(--bg));
    --danger-soft: color-mix(in srgb, var(--danger) 10%, var(--bg));
  }
  [data-theme="dark"] {
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --accent-outline: color-mix(in srgb, var(--accent) 42%, var(--bg));
    --row-hover: color-mix(in srgb, var(--accent) 6%, var(--bg));
    --sel-bg: color-mix(in srgb, var(--accent) 24%, var(--bg));
  }
}