/* dbtool 样式：设计变量（--dt-*）与三套皮肤（深空/明亮/护眼），皮肤选择保存在 Cookie dbtool_skin。 */
:root {
  --dt-bg: #060a11; --dt-panel: #0b121e; --dt-raise: #132036;
  --dt-line: #1a2a42; --dt-line-hi: #27405f;
  --dt-fg: #d6e2f0; --dt-muted: #7a8ca6; --dt-dim: #4f6079;
  --dt-cyan: #38e1ff; --dt-cyan-rgb: 56, 225, 255; --dt-cyan-soft: rgba(56, 225, 255, .12);
  --dt-amber: #ffb547; --dt-amber-rgb: 255, 181, 71; --dt-amber-soft: rgba(255, 181, 71, .12);
  --dt-ok: #37d99a; --dt-ok-rgb: 55, 217, 154; --dt-ok-soft: rgba(55, 217, 154, .12);
  --dt-crit: #ff5577; --dt-crit-rgb: 255, 85, 119; --dt-crit-soft: rgba(255, 85, 119, .14);
  --dt-info: #6aa8ff; --dt-info-soft: rgba(106, 168, 255, .12);
  --dt-input: #0a111c; --dt-input-ro: #0d1522; --dt-sunken: rgba(0, 0, 0, .2);
  --dt-on-accent: #04121a; --dt-accent-hover: #6ae9ff;
  --dt-code-text: #c5d1df; --dt-code-kw: #6cc4e6; --dt-code-fn: #b8a2ec; --dt-code-str: #86d3a6;
  --dt-code-num: #e3b46c; --dt-code-cm: #5d6f88; --dt-code-op: #8292a8; --dt-code-ln: #4a5a72; --dt-code-ln-bg: #080e18;
  --dt-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --dt-f-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", "Noto Sans SC", system-ui, sans-serif;
  --dt-f-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  --dt-top-h: 48px;
  --dt-r: 6px; --dt-r-lg: 8px;
  color-scheme: dark;
}
:root[data-skin="light"] {
  color-scheme: light;
  --dt-bg: #f3f5f8; --dt-panel: #ffffff; --dt-raise: #eef2f7; --dt-line: #e3e8ef; --dt-line-hi: #cfd7e3;
  --dt-fg: #1d2735; --dt-muted: #5d6b7e; --dt-dim: #94a0b0;
  --dt-cyan: #1f6feb; --dt-cyan-rgb: 31, 111, 235; --dt-cyan-soft: rgba(31, 111, 235, .09);
  --dt-ok: #1a8f5c; --dt-ok-rgb: 26, 143, 92; --dt-ok-soft: rgba(26, 143, 92, .1);
  --dt-amber: #b7700a; --dt-amber-rgb: 183, 112, 10; --dt-amber-soft: rgba(219, 140, 20, .12);
  --dt-crit: #cf2c46; --dt-crit-rgb: 207, 44, 70; --dt-crit-soft: rgba(207, 44, 70, .09);
  --dt-info: #2f6fd0; --dt-info-soft: rgba(47, 111, 208, .09);
  --dt-input: #f8fafc; --dt-input-ro: #eef2f6; --dt-sunken: #f5f7fa;
  --dt-on-accent: #ffffff; --dt-accent-hover: #3b82f6;
  --dt-code-text: #24303f; --dt-code-kw: #1f5fbf; --dt-code-fn: #7b3fbf; --dt-code-str: #1a7f4b;
  --dt-code-num: #b05a00; --dt-code-cm: #8a96a6; --dt-code-op: #5d6b7e; --dt-code-ln: #94a0b0; --dt-code-ln-bg: #f1f4f8;
  --dt-shadow: 0 10px 28px rgba(20, 35, 60, .12);
}
:root[data-skin="sepia"] {
  color-scheme: light;
  --dt-bg: #f1ead9; --dt-panel: #f8f2e3; --dt-raise: #ece3cf; --dt-line: #e2d7bf; --dt-line-hi: #d3c5a7;
  --dt-fg: #3b3428; --dt-muted: #7a6e59; --dt-dim: #a89b80;
  --dt-cyan: #2f7d6d; --dt-cyan-rgb: 47, 125, 109; --dt-cyan-soft: rgba(47, 125, 109, .1);
  --dt-ok: #3f7d3a; --dt-ok-rgb: 63, 125, 58; --dt-ok-soft: rgba(63, 125, 58, .1);
  --dt-amber: #a66a12; --dt-amber-rgb: 166, 106, 18; --dt-amber-soft: rgba(166, 106, 18, .11);
  --dt-crit: #b2443a; --dt-crit-rgb: 178, 68, 58; --dt-crit-soft: rgba(178, 68, 58, .09);
  --dt-info: #3c6f96; --dt-info-soft: rgba(60, 111, 150, .1);
  --dt-input: #fbf7ec; --dt-input-ro: #f1e9d6; --dt-sunken: #f3ecda;
  --dt-on-accent: #fbf7ec; --dt-accent-hover: #3a917f;
  --dt-code-text: #3b3428; --dt-code-kw: #2f6f8f; --dt-code-fn: #7a4f8f; --dt-code-str: #4f7a2f;
  --dt-code-num: #a2611a; --dt-code-cm: #a3967b; --dt-code-op: #7a6e59; --dt-code-ln: #a89b80; --dt-code-ln-bg: #efe6d2;
  --dt-shadow: 0 10px 28px rgba(80, 60, 20, .14);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--dt-bg); color: var(--dt-fg); font: 13.5px/1.55 var(--dt-f-body); display: flex; flex-direction: column; }
a { color: var(--dt-cyan); }
:focus-visible { outline: 2px solid var(--dt-cyan); outline-offset: 2px; }
* { scrollbar-color: var(--dt-line-hi) transparent; }
code, .mono { font-family: var(--dt-f-mono); }
[hidden] { display: none !important; }

/* 外壳（侧栏 / 顶栏）样式见 shell.css；这里只保留皮肤切换与用户框 */
.spacer { flex: 1; }
.skins { display: flex; gap: 4px; }
.skins button { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--dt-line-hi); cursor: pointer; padding: 0; }
.skins button[aria-pressed="true"] { outline: 2px solid var(--dt-cyan); outline-offset: 1px; }
.skins [data-skin-set="dark"] { background: #0b121e; } .skins [data-skin-set="light"] { background: #fff; } .skins [data-skin-set="sepia"] { background: #f1ead9; }
.userbox { display: flex; align-items: center; gap: 10px; color: var(--dt-muted); }
.userbox form { margin: 0; }

/* 通用控件：文本类输入、下拉、文本域共用同一套外观（Ace 编辑器自带的隐藏 textarea 除外） */
button, select, input, textarea { font: inherit; color: var(--dt-fg); }
select, textarea:not(.ace_text-input),
input:not([type]), input[type=text], input[type=password], input[type=search], input[type=url], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=week] {
  height: 30px; padding: 0 9px; background: var(--dt-input); border: 1px solid var(--dt-line-hi); border-radius: var(--dt-r);
  transition: border-color .15s, box-shadow .15s;
}
textarea:not(.ace_text-input) { height: auto; min-height: 60px; padding: 6px 9px; line-height: 1.5; resize: vertical; }
select:hover, textarea:not(.ace_text-input):hover, input:not([type=checkbox]):not([type=radio]):hover { border-color: var(--dt-dim); }
select:focus, textarea:not(.ace_text-input):focus, input:not([type=checkbox]):not([type=radio]):focus { outline: 0; border-color: var(--dt-cyan); box-shadow: 0 0 0 3px var(--dt-cyan-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--dt-cyan); }
::placeholder { color: var(--dt-dim); opacity: 1; }
select:disabled, textarea:not(.ace_text-input):disabled, input:disabled { background: var(--dt-input-ro); color: var(--dt-dim); cursor: not-allowed; }
input[readonly] { background: var(--dt-input-ro); }
.btn { height: 30px; padding: 0 13px; background: var(--dt-raise); border: 1px solid var(--dt-line-hi); border-radius: var(--dt-r); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; transition: border-color .15s, background-color .15s, color .15s; }
.btn:hover { border-color: var(--dt-cyan); }
.btn.primary { background: var(--dt-cyan); border-color: var(--dt-cyan); color: var(--dt-on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--dt-accent-hover); }
.btn.danger { border-color: var(--dt-crit); color: var(--dt-crit); }
.btn.ghost { background: transparent; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { border-color: var(--dt-line-hi); }
.btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.badge { display: inline-flex; align-items: center; padding: 1px 8px; font-size: 12px; border-radius: 4px; border: 1px solid var(--dt-line-hi); color: var(--dt-muted); white-space: nowrap; }
.badge.prod { background: var(--dt-crit-soft); border-color: var(--dt-crit); color: var(--dt-crit); }
.badge.test { background: var(--dt-ok-soft); border-color: var(--dt-ok); color: var(--dt-ok); }
.alert { padding: 9px 14px; border-radius: var(--dt-r); border: 1px solid; margin: 0 0 10px; }
.alert.err { background: var(--dt-crit-soft); border-color: var(--dt-crit); color: var(--dt-crit); }
.alert.warn { background: var(--dt-amber-soft); border-color: var(--dt-amber); color: var(--dt-amber); }
.alert.info { background: var(--dt-cyan-soft); border-color: var(--dt-cyan); color: var(--dt-cyan); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 1px 8px; border: 1px solid var(--dt-line); border-radius: 4px; color: var(--dt-muted); background: var(--dt-sunken); }
.chip.ok { color: var(--dt-ok); border-color: var(--dt-ok); background: var(--dt-ok-soft); }
.chip.warn { color: var(--dt-amber); border-color: var(--dt-amber); background: var(--dt-amber-soft); }

/* 工作台 */
.env-stripe { height: 3px; flex: none; background: transparent; }
.env-stripe[data-env="prod"] { background: var(--dt-crit); }
.env-stripe[data-env="test"] { background: var(--dt-ok); }
.wb-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--dt-panel); border-bottom: 1px solid var(--dt-line); flex-wrap: wrap; }
.wb-top select { min-width: 160px; }
.wb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.wb-side { border-right: 1px solid var(--dt-line); background: var(--dt-panel); display: flex; flex-direction: column; min-height: 0; }
.wb-side .search { padding: 8px; }
.wb-side .search input { width: 100%; }
#tree { overflow: auto; padding: 0 6px 12px; flex: 1; }
.tbl { display: flex; width: 100%; align-items: center; gap: 6px; padding: 3px 8px; background: none; border: 0; border-radius: 4px; cursor: pointer; text-align: left; font-family: var(--dt-f-mono); font-size: 12.5px; }
.tbl:hover { background: var(--dt-cyan-soft); }
.tbl .ico { color: var(--dt-muted); }
.tree-hint { padding: 12px 8px; color: var(--dt-dim); font-size: 12.5px; }
.wb-main { min-width: 0; display: flex; flex-direction: column; padding: 8px 12px 12px; gap: 8px; overflow: auto; }
.tabs { display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap; border-bottom: 1px solid var(--dt-line); }
.tab { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; color: var(--dt-muted); cursor: pointer; background: none; }
.tab.on { background: var(--dt-input); border-color: var(--dt-line); color: var(--dt-fg); margin-bottom: -1px; }
.tab .x { opacity: .6; padding: 0 2px; border-radius: 3px; }
.tab .x:hover { opacity: 1; background: var(--dt-raise); }
.editor-wrap { height: 220px; min-height: 100px; resize: vertical; overflow: hidden; border: 1px solid var(--dt-line-hi); border-radius: 4px; background: var(--dt-input); }
#editor { width: 100%; height: 100%; font-size: 13px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .hint { color: var(--dt-dim); font-size: 12px; }
.result { border: 1px solid var(--dt-line); border-radius: 4px; background: var(--dt-panel); min-height: 120px; display: flex; flex-direction: column; min-width: 0; }
.res-meta { display: flex; gap: 12px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--dt-line); color: var(--dt-muted); font-size: 12.5px; flex-wrap: wrap; }
.res-meta .spacer { flex: 1; }
.res-empty { padding: 36px 12px; text-align: center; color: var(--dt-dim); }
.grid-wrap { overflow: auto; max-height: 52vh; }
table.grid { border-collapse: collapse; font: 12.5px var(--dt-f-mono); }
table.grid th { position: sticky; top: 0; background: var(--dt-sunken); backdrop-filter: blur(2px); text-align: left; font-weight: 600; padding: 5px 10px; border-bottom: 1px solid var(--dt-line-hi); white-space: nowrap; color: var(--dt-fg); }
table.grid td { padding: 4px 10px; border-bottom: 1px solid var(--dt-line); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
table.grid tr:hover td { background: var(--dt-cyan-soft); }
table.grid td.null { color: var(--dt-dim); font-style: italic; }
table.grid td.num { text-align: right; color: var(--dt-code-num); }
table.grid .rn { color: var(--dt-code-ln); text-align: right; background: var(--dt-code-ln-bg); position: sticky; left: 0; }
table.grid th.rn { z-index: 1; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--dt-line-hi); border-top-color: var(--dt-cyan); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* 登录页 */
.login-wrap { flex: 1; display: grid; place-items: center; padding: 24px; }
.login-card { width: 360px; background: var(--dt-panel); border: 1px solid var(--dt-line); border-radius: 8px; padding: 28px; box-shadow: var(--dt-shadow); }
.login-card h1 { margin: 0 0 18px; font-size: 18px; }
.login-card label { display: block; margin: 12px 0 4px; color: var(--dt-muted); font-size: 12.5px; }
.login-card input { width: 100%; height: 36px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 18px; height: 36px; }

@media (max-width: 800px) { .wb-body { grid-template-columns: 1fr; } .wb-side { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--dt-line); } }

/* 权限申请、审批、查询权限等内容页 */
.page { width: 100%; margin: 0; padding: 16px clamp(12px, 1.1vw, 20px) 40px; overflow: auto; flex: 1; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; min-height: 32px; }
.page-head h1 { font-size: 18px; font-weight: 600; margin: 0; }
.inline-form { display: flex; gap: 6px; margin: 0; }
.card { background: var(--dt-panel); border: 1px solid var(--dt-line); border-radius: var(--dt-r-lg); padding: 16px 18px; margin-bottom: 16px; }
.card h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; }
.muted { color: var(--dt-muted); }
.login-card.wide { width: 440px; }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--dt-line-hi); color: var(--dt-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
table.list td { padding: 9px 12px; border-bottom: 1px solid var(--dt-line); vertical-align: top; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list td.num { text-align: right; font-family: var(--dt-f-mono); }
table.list td.empty { text-align: center; color: var(--dt-dim); padding: 28px; }
table.list tr:hover td { background: var(--dt-cyan-soft); }
.row-actions { white-space: nowrap; }
.st { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; border: 1px solid var(--dt-line-hi); white-space: nowrap; }
.st.waiting { color: var(--dt-amber); border-color: var(--dt-amber); background: var(--dt-amber-soft); }
.st.passed { color: var(--dt-ok); border-color: var(--dt-ok); background: var(--dt-ok-soft); }
.st.rejected { color: var(--dt-crit); border-color: var(--dt-crit); background: var(--dt-crit-soft); }
.st.aborted { color: var(--dt-muted); }
.pager { display: flex; align-items: center; gap: 8px; padding-top: 10px; color: var(--dt-muted); font-size: 12.5px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 16px; }
.form-grid label, .form-grid .lbl { display: block; font-size: 12.5px; color: var(--dt-muted); }
.form-grid label select, .form-grid label input { display: block; width: 100%; margin-top: 4px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .radio { display: inline-flex; gap: 6px; align-items: center; margin-right: 18px; color: var(--dt-fg); }
.form-grid .radio input { width: auto; margin: 0; }
.check-list { max-height: 180px; overflow: auto; border: 1px solid var(--dt-line); border-radius: 4px; padding: 6px 8px; margin-top: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 12px; background: var(--dt-input); }
.check-list label { display: flex; gap: 6px; align-items: center; color: var(--dt-fg); font-family: var(--dt-f-mono); font-size: 12.5px; margin: 0; }
.check-list label input { width: auto; margin: 0; }
.check-list .hint { color: var(--dt-dim); grid-column: 1 / -1; padding: 6px 0; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
dl.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; }
dl.kv dt { color: var(--dt-muted); }
dl.kv dd { margin: 0; word-break: break-all; }
ol.flow { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 10px; flex-wrap: wrap; align-items: center; }
ol.flow li { padding: 6px 12px; border: 1px solid var(--dt-line-hi); border-radius: 4px; color: var(--dt-muted); display: flex; flex-direction: column; min-width: 90px; }
ol.flow li small { font-size: 11px; }
ol.flow li.passed { border-color: var(--dt-ok); color: var(--dt-ok); }
ol.flow li.current { border-color: var(--dt-amber); color: var(--dt-amber); background: var(--dt-amber-soft); }
ol.flow li + li::before { content: none; }
.review-box { margin-top: 12px; border-top: 1px solid var(--dt-line); padding-top: 12px; }
.review-box textarea { width: 100%; background: var(--dt-input); color: var(--dt-fg); border: 1px solid var(--dt-line-hi); border-radius: 4px; padding: 6px 8px; font: inherit; }
ul.log { list-style: none; padding: 0; margin: 0; font-size: 13px; }
ul.log li { padding: 5px 0; border-bottom: 1px solid var(--dt-line); }
ul.log time { color: var(--dt-dim); font-family: var(--dt-f-mono); margin-right: 8px; }
.btn.ghost.danger { border-color: transparent; }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }

/* 通知渠道管理 */
.rule-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--dt-line); }
.rule-row .rule-value input, .rule-row .rule-value select { min-width: 220px; }
.rule-events { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
label.mini { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; color: var(--dt-muted); margin: 0; }
label.mini input { width: auto; margin: 0; }
.form-grid label.check { display: flex; align-items: center; gap: 6px; color: var(--dt-fg); margin-top: 22px; }
.form-grid label.check input { width: auto; margin: 0; }
.small { font-size: 12px; margin: 6px 0 0; }
.actions .spacer { flex: 1; }

/* SQL 工单 */
.st.running { color: var(--dt-cyan); border-color: var(--dt-cyan); background: var(--dt-cyan-soft); }
table.list tr.lv-warn td { background: var(--dt-amber-soft); }
table.list tr.lv-err td { background: var(--dt-crit-soft); }
table.list td.wrap { white-space: pre-wrap; word-break: break-all; min-width: 280px; }
pre.sqlbox { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-all; background: var(--dt-input); border: 1px solid var(--dt-line); border-radius: 4px; padding: 8px 10px; font-size: 12.5px; }
.card h2 { display: flex; align-items: center; gap: 8px; }
.card h2 .spacer { flex: 1; }
#rollback-box { margin-bottom: 10px; }

/* 自适应铺满：宽屏下把相关的卡片并排，窄屏自动叠成一列 */
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; align-items: stretch; }
.dgrid > .card { margin-bottom: 0; min-width: 0; }
.dgrid + .card, .dgrid + .dgrid, .card + .dgrid { margin-top: 14px; }
.dgrid { margin-bottom: 14px; }
.editor-wrap.tall { height: clamp(240px, 42vh, 600px); }
dl.kv { grid-template-columns: minmax(96px, max-content) 1fr; }
.page > .card > table.list { min-width: 640px; }
.card { overflow-x: auto; }
table.list tr.sum td { font-weight: 600; border-top: 2px solid var(--dt-line-hi); }
#wf-batch-list .lbl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 表头与列内容对齐：由 /static/js/shell/tablealign.js 按每列数据格的对齐方式加上；放在文件末尾，同等优先级下覆盖 table.list th / table.grid th 的 text-align:left */
table th.ta-r { text-align: right; }
table th.ta-c { text-align: center; }