/* =====================================================================
   界面皮肤（新前端，参考 docs/frontend-prototype）：暗黑 mono（默认）· 浅色 ice · 护眼 eye
   1) 每套皮肤只定义一组 CSS 变量（色板取自原型）；2) 下面「扁平化」一层统一覆盖 app.css 里旧的角标 / 发光 / 等宽大写标签。
   选择器写成 html[data-skin] …，优先级高于 app.css，所以三套皮肤共用同一套结构。
   ===================================================================== */

/* ---------- 暗黑（默认） ---------- */
[data-skin="mono"]{
  --bg:#0d111a;--bg0:#0a0e16;--card:#161c28;--card-a:#161c28;--card-b:#161c28;--panel:#1b2231;--input:#1b2231;
  --ink:#e6eaf2;--ink-hi:#f4f6fb;--mute:#8d97ab;--mute2:#6a7488;--line:#2a3345;--line2:#323d52;--line3:#3d4a63;
  --pri:#7b88ff;--pri-rgb:123,136,255;--pri-bg:#232a52;--ac-hi:#a3acff;--ac2:#6c9bff;--ac2-hi:#9bbcff;--ac2-rgb:108,155,255;--ac-bg-rgb:35,42,82;--ac2-bg-rgb:29,42,71;
  --ok:#3ccf82;--warn:#f2b73e;--err:#ff6b6b;--ok-t:#3ccf82;--warn-t:#f2b73e;--err-t:#ff8a8a;--on-ok:#06140d;--on-warn:#1a1100;
  --ok-soft:#14301f;--warn-soft:#3a2f12;--bad-soft:#3b1d1d;--info-soft:#1d2a47;
  --side:#090c13;--side-text:#8d97ab;--side-active:#1a2133;--code:#0a0e16;--console:#0a0e16;--mono-ink:#c9d3ff;
  --pipe-a:#161c28;--pipe-b:#161c28;--btn2:#7b88ff;--on-pri:#ffffff;--glow:none;--shadow:none;
}
html[data-skin="mono"]{color-scheme:dark}
/* ---------- 浅色 ---------- */
[data-skin="ice"]{
  --bg:#f3f5f9;--bg0:#e9edf4;--card:#ffffff;--card-a:#ffffff;--card-b:#ffffff;--panel:#f7f8fb;--input:#ffffff;
  --ink:#18202e;--ink-hi:#0b1220;--mute:#667085;--mute2:#8a93a6;--line:#e1e5ec;--line2:#d5dae4;--line3:#c5ccd9;
  --pri:#4b5bdc;--pri-rgb:75,91,220;--pri-bg:#eceefe;--ac-hi:#3a49c4;--ac2:#2f6fed;--ac2-hi:#2f6fed;--ac2-rgb:47,111,237;--ac-bg-rgb:236,238,254;--ac2-bg-rgb:233,240,254;
  --ok:#17955a;--warn:#c27c00;--err:#d23b3b;--ok-t:#17955a;--warn-t:#a86a00;--err-t:#d23b3b;--on-ok:#ffffff;--on-warn:#ffffff;
  --ok-soft:#e3f5eb;--warn-soft:#fff3d6;--bad-soft:#fde8e8;--info-soft:#e9f0fe;
  --side:#121828;--side-text:#a9b2c6;--side-active:#212a40;--code:#0f1624;--console:#0f1624;--mono-ink:#334155;
  --pipe-a:#ffffff;--pipe-b:#ffffff;--btn2:#4b5bdc;--on-pri:#ffffff;--glow:none;--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
}
html[data-skin="ice"]{color-scheme:light}
/* ---------- 护眼（豆沙绿，低饱和，不用纯白） ---------- */
[data-skin="eye"]{
  --bg:#dfe9cf;--bg0:#d3e0c0;--card:#eef4e2;--card-a:#eef4e2;--card-b:#eef4e2;--panel:#e5eed6;--input:#f3f8ea;
  --ink:#2f3a2c;--ink-hi:#1d2a1b;--mute:#66745f;--mute2:#82907a;--line:#cbd9b6;--line2:#bfcfa8;--line3:#adc095;
  --pri:#4f7d5c;--pri-rgb:79,125,92;--pri-bg:#d6e6cf;--ac-hi:#3f6a4c;--ac2:#3d7389;--ac2-hi:#3d7389;--ac2-rgb:61,115,137;--ac-bg-rgb:214,230,207;--ac2-bg-rgb:213,229,226;
  --ok:#3f8a4f;--warn:#a8741a;--err:#b4533f;--ok-t:#3f8a4f;--warn-t:#8f6314;--err-t:#b4533f;--on-ok:#ffffff;--on-warn:#ffffff;
  --ok-soft:#d3e8cf;--warn-soft:#f1e5c4;--bad-soft:#f1d9cf;--info-soft:#d5e5e2;
  --side:#34432f;--side-text:#c9d6bf;--side-active:#435540;--code:#2e3829;--console:#2e3829;--mono-ink:#3b4a36;
  --pipe-a:#eef4e2;--pipe-b:#eef4e2;--btn2:#4f7d5c;--on-pri:#ffffff;--glow:none;--shadow:none;
}
html[data-skin="eye"]{color-scheme:light}

/* =====================================================================
   扁平化：覆盖 app.css 里的赛博风（角标面板、霓虹发光、等宽大写标签、背景网格）
   ===================================================================== */
html[data-skin] body{background:var(--bg);background-image:none;color:var(--ink)}
html[data-skin] ::selection{background:rgba(var(--pri-rgb),.28)}
html[data-skin] ::-webkit-scrollbar-thumb{background:var(--line3)}
html[data-skin] a.tl,html[data-skin] .oc-lk{color:var(--pri)}

/* 侧栏：始终是深色（和原型一致），分组标题 + 圆角菜单项 */
html[data-skin] aside{background:var(--side);border-right:1px solid rgba(255,255,255,.06);color:var(--side-text)}
html[data-skin] aside h1{border-bottom:0;color:#fff;letter-spacing:0;font-size:15px;padding:16px 14px 12px}
html[data-skin] aside h1 small{font-family:inherit;letter-spacing:0;color:var(--side-text);font-size:11px}
html[data-skin] aside nav{padding:4px 8px}
html[data-skin] aside nav a{border-left:0;border-radius:8px;padding:8px 12px;margin:1px 0;font-size:14px;letter-spacing:0;color:var(--side-text)}
html[data-skin] aside nav a:hover{background:var(--side-active);color:#fff}
html[data-skin] aside nav a.on{background:var(--side-active);color:#fff;text-shadow:none;box-shadow:inset 3px 0 0 var(--pri);border-color:transparent}
html[data-skin] aside nav .ngrp{color:#5f6a84;opacity:1;padding:14px 12px 5px}
html[data-skin] aside .foot{border-top:1px solid rgba(255,255,255,.08);color:var(--side-text);font-family:inherit;font-size:11px;letter-spacing:0}
html[data-skin] .badge{background:var(--err);border:0;color:#fff;border-radius:10px;font-family:inherit;padding:0 7px}

/* 顶栏 + 页面标题（面包屑式小标签 + 标题） */
html[data-skin] header{background:var(--card);backdrop-filter:none;border-bottom:1px solid var(--line);font:13px/1.5 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:0;color:var(--mute)}
html[data-skin] header b{color:var(--ink);font-weight:600}
html[data-skin] header #clk{color:var(--mute)}
html[data-skin] .ptitle{border-bottom:0;padding-bottom:0;margin:0 0 14px;align-items:baseline}
html[data-skin] .ptitle:after{display:none}
html[data-skin] .ptitle .ey{font:12px -apple-system,"Microsoft YaHei",sans-serif;letter-spacing:0;color:var(--mute);margin:0 0 2px;text-transform:none}
html[data-skin] .ptitle h2{font-size:20px;letter-spacing:0;color:var(--ink-hi);text-shadow:none}

/* 面板 */
html[data-skin] .card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow-x:auto}
html[data-skin] .card:before,html[data-skin] .card:after,html[data-skin] .ovtop:before,html[data-skin] .ovtop:after,html[data-skin] .modal .box:before,html[data-skin] .modal .box:after,html[data-skin] .lx-form .cn{display:none}
html[data-skin] .card>h3{border-bottom:1px solid var(--line);padding:12px 16px;font-size:14px;letter-spacing:0;color:var(--ink-hi)}
html[data-skin] .card>h3:before{display:none}
html[data-skin] .card>h3 small{color:var(--mute)}
html[data-skin] .stats .card{padding:2px 0}
html[data-skin] .sech b{color:var(--ink-hi)}

/* 表格 */
html[data-skin] table{border-collapse:collapse}
html[data-skin] th{background:var(--panel);color:var(--mute);font:600 12px -apple-system,"Microsoft YaHei",sans-serif;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line)}
html[data-skin] td{border-bottom:1px solid var(--line)}
html[data-skin] tbody tr:last-child td{border-bottom:0}
html[data-skin] tbody tr:hover td,html[data-skin] tr:hover>td{background:var(--panel)}
html[data-skin] .mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;color:var(--mono-ink)}

/* 表单、按钮 */
html[data-skin] input,html[data-skin] select,html[data-skin] textarea{background:var(--input);border:1px solid var(--line);border-radius:8px;color:var(--ink)}
html[data-skin] input:focus,html[data-skin] select:focus,html[data-skin] textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16)}
html[data-skin] input::placeholder,html[data-skin] textarea::placeholder{color:var(--mute2)}
html[data-skin] label.f{font-family:inherit;letter-spacing:0}
html[data-skin] label.f>span{font-size:12px;color:var(--mute)}
html[data-skin] button{background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--ink);letter-spacing:0}
html[data-skin] button:hover{background:var(--panel);border-color:var(--line3);color:var(--ink);box-shadow:none}
html[data-skin] button.p{background:var(--pri);border-color:var(--pri);color:var(--on-pri);font-weight:600;box-shadow:none}
html[data-skin] button.p:hover{background:var(--pri);color:var(--on-pri);filter:brightness(1.08);box-shadow:none}
html[data-skin] button.d{background:var(--card);color:var(--err);border-color:var(--err)}
html[data-skin] button.d:hover{background:var(--bad-soft);color:var(--err);border-color:var(--err);box-shadow:none}
html[data-skin] button:disabled,html[data-skin] button:disabled:hover{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:none;opacity:.45}
html[data-skin] .seg{border-radius:8px;border-color:var(--line)}
html[data-skin] .seg button{border-radius:0;border-right-color:var(--line);background:var(--card)}
html[data-skin] .seg button.on,html[data-skin] .chip.on,html[data-skin] .skin-sw button.on{background:var(--pri-bg);color:var(--pri);box-shadow:none;border-color:var(--pri)}
html[data-skin] .seg button.on{border-color:transparent}
html[data-skin] .skin-sw button.on{border-color:transparent}
html[data-skin] .chip{border-radius:999px}
html[data-skin] .sw i{background:var(--line3)}
html[data-skin] .sw input:checked+i{background:var(--ok)}

/* 标签 / 状态 */
html[data-skin] .pill{border-radius:999px;font:12px -apple-system,"Microsoft YaHei",sans-serif;letter-spacing:0;background:var(--pri-bg);color:var(--pri);border:1px solid transparent}
html[data-skin] .pill.ok{background:var(--ok-soft);color:var(--ok-t);border-color:transparent}
html[data-skin] .pill.warn{background:var(--warn-soft);color:var(--warn-t);border-color:transparent}
html[data-skin] .pill.err{background:var(--bad-soft);color:var(--err-t);border-color:transparent}
html[data-skin] .pill.gray{background:var(--panel);color:var(--mute);border-color:var(--line)}
html[data-skin] .pill.run{background:var(--info-soft);color:var(--ac2)}
html[data-skin] .tag{border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--mute);font:12px -apple-system,"Microsoft YaHei",sans-serif}
html[data-skin] .note{background:var(--warn-soft);border:1px solid transparent;border-radius:10px;color:var(--warn-t)}
html[data-skin] .flow i{color:var(--mute)}
html[data-skin] .sev{border:0;border-radius:4px;color:#fff;font:700 11px -apple-system,sans-serif;letter-spacing:0}
html[data-skin] .sev.P1{background:var(--err)}html[data-skin] .sev.P2{background:var(--warn)}html[data-skin] .sev.P3{background:var(--mute2)}
html[data-skin] .mt{border:0;border-radius:6px;font:12px -apple-system,"Microsoft YaHei",sans-serif;letter-spacing:0;background:var(--info-soft);color:var(--ac2)}
html[data-skin] .mt.orch{background:var(--pri-bg);color:var(--pri)}html[data-skin] .mt.part{background:var(--ok-soft);color:var(--ok-t)}html[data-skin] .mt.alert{background:var(--warn-soft);color:var(--warn-t)}html[data-skin] .mt.cfg{background:var(--panel);color:var(--mute)}

/* 页签 */
html[data-skin] .tabs a{letter-spacing:0;text-shadow:none;background:none}
html[data-skin] .tabs a:hover{color:var(--ink)}
html[data-skin] .tabs a.on{color:var(--pri);border-color:var(--pri);text-shadow:none;background:none;font-weight:600}

/* 弹窗 / 提示：详情用弹窗 */
html[data-skin] .modal{background:rgba(10,14,22,.5);backdrop-filter:none}
html[data-skin] .modal .box{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
html[data-skin] .toast{background:#1d2536;border:0;border-radius:10px;color:#fff;font-family:inherit;box-shadow:0 6px 24px rgba(0,0,0,.3)}
html[data-skin] .toast.bad{background:#991b1b}
html[data-skin] .bar{background:var(--card);border-top:1px solid var(--line)}
html[data-skin] pre{background:var(--code);border:0;border-radius:10px}

/* 控制台式深色面板（日志、架构图、实时变更流、代码）：三套皮肤里都保持深色，文字用浅色 */
html[data-skin] .tick,html[data-skin] .logbox,html[data-skin] .archbox,html[data-skin] .archleg{background:var(--console);border-color:var(--line);border-radius:10px}
html[data-skin] .archstat{background:#0a0e16;border-radius:10px 10px 0 0;font-family:inherit}
html[data-skin] .archleg{border-radius:0 0 10px 10px}
html[data-skin] .tick{border:0;font:12.5px/1.8 ui-monospace,"SFMono-Regular",Consolas,monospace}
html[data-skin] .tick .t{color:#8d97ab}html[data-skin] .tick .i{color:#3ccf82}html[data-skin] .tick .u{color:#e9c46a}html[data-skin] .tick .x{color:#ff8a8a}html[data-skin] .tick .n{color:#d7e0f0}

/* ---------- 运行概览 ---------- */
html[data-skin] .ovtop{background:var(--card);border-radius:12px;box-shadow:var(--shadow);grid-template-columns:minmax(0,1fr) auto}
html[data-skin] .ovstate .lamp{box-shadow:none;font-family:inherit;background:var(--warn-soft)}
html[data-skin] .ovstate.ok .lamp{box-shadow:none;background:var(--ok-soft)}
html[data-skin] .ovstate.bad .lamp{box-shadow:none;background:var(--bad-soft);animation:none}
html[data-skin] .ovstate b{color:var(--ink-hi);letter-spacing:0}
html[data-skin] .ovctl{font-family:inherit;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
html[data-skin] .ovmod{background:var(--panel);border-radius:8px}
html[data-skin] .ovmod:hover{box-shadow:none}
html[data-skin] .ovmod small,html[data-skin] .ovmod b,html[data-skin] .ovcell .sub,html[data-skin] .ovc .row2,html[data-skin] .ovlist .tm,html[data-skin] .ovtile span{font-family:inherit;letter-spacing:0}
html[data-skin] .ovmod i.d,html[data-skin] .ovdot{box-shadow:none}
html[data-skin] .ovc{border-radius:12px}
html[data-skin] .ovc:hover{box-shadow:none;border-color:var(--pri)}
html[data-skin] .ovc .h{letter-spacing:0}
html[data-skin] .ovc .big b{font:700 26px/1 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;text-shadow:none;letter-spacing:-.02em}
html[data-skin] .ovcards{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){html[data-skin] .ovcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){html[data-skin] .ovcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-skin] .ovcov .bar{border-radius:4px;overflow:hidden}
html[data-skin] .ovtile{background:var(--panel);border-radius:8px}
html[data-skin] .ovatt li:hover{background:var(--panel)}
html[data-skin] .ovatt .t b,html[data-skin] .ovnode b,html[data-skin] .ovlist .nm{color:var(--ink-hi)}

/* 实时同步汇总（原来的深色大屏，改成扁平卡片） */
html[data-skin] .hero{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);color:var(--ink)}
html[data-skin] .hero .hgrid,html[data-skin] .hero:after{display:none}
html[data-skin] .hwrap{padding:16px 20px 4px}
html[data-skin] .hk{color:var(--mute);letter-spacing:.08em}
html[data-skin] .hbig b{font:700 36px/1 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink-hi);text-shadow:none}
html[data-skin] .hbig span{color:var(--mute);letter-spacing:.06em}
html[data-skin] .hs{color:var(--mute)}html[data-skin] .hs b{color:var(--ink-hi)}
html[data-skin] .hwave{height:80px}
html[data-skin] .hwave .ln2{filter:none;stroke:var(--pri)}
html[data-skin] .hwave .gl{stroke:var(--line)}
html[data-skin] .hkpi{padding:6px 20px 16px}
html[data-skin] .hkpi div{background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:none}
html[data-skin] .hkpi small{color:var(--mute);font-family:inherit;letter-spacing:0}
html[data-skin] .hkpi b{font:700 20px -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink-hi)}
html[data-skin] .hkpi b.ok{color:var(--ok);text-shadow:none}html[data-skin] .hkpi b.bad{color:var(--err)}
html[data-skin] .live{color:var(--ok)}html[data-skin] .live i{background:var(--ok);box-shadow:none}

/* 数据同步实时表（行点击进入架构图） */
html[data-skin] table.lvt td{vertical-align:middle}
html[data-skin] table.lvt tr.click{cursor:pointer}
html[data-skin] table.lvt .spk{width:96px;height:26px;display:inline-block;vertical-align:middle;margin-left:8px}
html[data-skin] table.lvt .spk .ln2{fill:none;stroke:var(--pri);stroke-width:1.6}html[data-skin] table.lvt .spk .ar{fill:rgba(var(--pri-rgb),.12)}
html[data-skin] .more{border-radius:10px;border:1px dashed var(--line3);background:var(--panel);color:var(--pri);letter-spacing:0}
html[data-skin] .more:hover{background:var(--pri-bg);box-shadow:none}
html[data-skin] .pf .lg.g{color:var(--ok)}html[data-skin] .pf .lg.y{color:var(--warn)}html[data-skin] .pf .lg.r{color:var(--err)}
html[data-skin] .kv .lag.ok{color:var(--ok)}html[data-skin] .kv .lag.warn{color:var(--warn)}html[data-skin] .kv .lag.bad{color:var(--err)}

/* 登录页：保留左右分屏，配色跟着皮肤变量走 */
html[data-skin] .login{background:var(--bg)}
html[data-skin] .lx-form{border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
html[data-skin] .lx-btn{background:var(--pri);border-color:var(--pri);color:var(--on-pri);letter-spacing:.2em;border-radius:8px}
html[data-skin] .lx-btn:hover{background:var(--pri);filter:brightness(1.08);color:var(--on-pri)}
html[data-skin] .lx-in{border-radius:8px;border-color:var(--line);background:var(--input)}
html[data-skin] .lx-in:focus-within{box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16)}
html[data-skin] .lx-copy h1,html[data-skin] .lx-copy h1 em{text-shadow:none}
html[data-skin] .lx-stats{border-radius:10px}

/* ---------- 页面工具条：筛选 chips + 搜索 + 主按钮在卡片外，表格在卡片里（和原型一致） ---------- */
html[data-skin] .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
html[data-skin] .toolbar input{width:auto}
html[data-skin] .toolbar .chips{margin:0}
html[data-skin] .card>table{width:100%}
html[data-skin] .matrix td,html[data-skin] .matrix th{text-align:center}
html[data-skin] .matrix td:first-child,html[data-skin] .matrix th:first-child{text-align:left}

/* =====================================================================
   DBA 风格层 —— 参考 D:\dba-tool\prototype\css\style.css 的版式与组件语言
   配色：dba-tool 的明亮 / 深空 / 护眼三套和数据平台现有的 ice / mono / eye 是同一套色板，这里不改色，只改「版式和组件」：
     · 外壳：深色侧栏（Logo 块 + 可折叠分组 + 底部信息卡）、白色顶栏（面包屑 + 页面标题 + 状态 + 帮助 + 主题 + 用户）
     · 内容：圆角 12px 的卡片（标题在卡片里，不再有分隔线）、表格放进圆角容器、状态用「圆点 + 文字」、操作按钮 8px 圆角
     · 登录页：左侧品牌渐变面板 + 功能卡片，右侧表单
   =================================================================== */

/* ---------- 0. 基础 ---------- */
html[data-skin] body{font:14px/1.55 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink)}
html[data-skin] a{color:var(--ac2)}
html[data-skin] code,html[data-skin] .mono{font-family:ui-monospace,"SFMono-Regular",Consolas,"Courier New",monospace}

/* ---------- 1. 外壳 ---------- */
html[data-skin] .app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
html[data-skin] aside{width:auto;position:sticky;top:0;height:100vh;overflow:auto;padding:16px 10px 12px;display:flex;flex-direction:column;background:var(--side);border-right:0}
html[data-skin] #brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;margin:0;color:#fff;font-weight:700;font-size:16px;line-height:1.25}
html[data-skin] #brand i{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#5b6cff,#9b6bdf);display:grid;place-items:center;font-style:normal;font-size:13px;letter-spacing:-.04em;flex:none}
html[data-skin="eye"] #brand i,html[data-skin="eye"] .login .lx-left .lg i{background:linear-gradient(135deg,#7fa86f,#4f7d5c)}
html[data-skin] #brand small{display:block;font-weight:400;font-size:11px;color:var(--side-text);margin-top:1px}
html[data-skin] aside nav{padding:0;flex:1}
html[data-skin] aside nav .ngrp{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;padding:14px 12px 6px;color:#5f6a84;opacity:1;cursor:pointer;user-select:none}
html[data-skin] aside nav .ngrp:after{content:"▾";font-size:10px;opacity:.6;transition:transform .15s}
html[data-skin] aside nav .ngrp.fold:after{transform:rotate(-90deg)}
html[data-skin] aside nav a.fold{display:none}
html[data-skin] aside nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:8px;margin:1px 0;font-size:14px;color:var(--side-text);text-decoration:none}
html[data-skin] aside nav a>span{display:flex;align-items:center;gap:10px;min-width:0}
html[data-skin] aside nav a>span>i.nm{font-style:normal}
html[data-skin] aside nav a:hover{background:var(--side-active);color:#fff}
html[data-skin] aside nav a.on{background:var(--side-active);color:#fff;box-shadow:inset 3px 0 0 var(--pri)}
html[data-skin] aside .badge{background:var(--err);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;border:0}
html[data-skin] aside .foot{margin:14px 6px 4px;padding:10px 12px;border-radius:10px;background:var(--side-active);border-top:0;font-size:12px;line-height:1.7;color:var(--side-text)}
html[data-skin] aside .foot b{color:#fff;font-size:13px}
html[data-skin] aside .sidestat{margin:10px 6px 0;padding:10px 12px;border-radius:10px;background:var(--side-active);font-size:12px;color:var(--side-text);display:grid;grid-template-columns:1fr auto;gap:3px 8px}
html[data-skin] aside .sidestat b{color:#fff;font-weight:600}

html[data-skin] main{min-width:0;display:flex;flex-direction:column;flex:none}
html[data-skin] header{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap;font:13px/1.5 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--mute)}
html[data-skin] header .sp{flex:1}
html[data-skin] header b{color:var(--ink);font-weight:600}
html[data-skin] #ptitle{margin:0;min-width:0}
html[data-skin] #ptitle .ptitle{display:block;margin:0;padding:0;border:0}
html[data-skin] #ptitle .ptitle>div:first-child{display:block}
html[data-skin] #ptitle .ey{font:12px/1.4 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:var(--mute);margin:0;text-transform:none}
html[data-skin] #ptitle h2{font-size:18px;line-height:1.3;margin:0;letter-spacing:0;color:var(--ink-hi)}
html[data-skin] #ptitle .ds{display:none}
html[data-skin] header .pill{border-radius:999px}
html[data-skin] header #clk{font-size:12px;color:var(--mute)}
html[data-skin] .hbtn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;cursor:pointer}
html[data-skin] .hbtn:hover{background:var(--panel);text-decoration:none}
html[data-skin] .skin-sw{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;gap:0}
html[data-skin] .skin-sw button{border:0;border-radius:0;background:var(--card);padding:5px 10px;font-size:12px;color:var(--mute);cursor:pointer}
html[data-skin] .skin-sw button+button{border-left:1px solid var(--line)}
html[data-skin] .skin-sw button.on{background:var(--pri-bg);color:var(--pri);font-weight:600}
html[data-skin] #hUser{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12.5px;color:var(--ink);white-space:nowrap}
html[data-skin] #hUser:before{content:attr(data-i);width:26px;height:26px;border-radius:50%;background:var(--pri);color:var(--on-pri);display:grid;place-items:center;font-size:12px;font-weight:600;text-transform:uppercase}
html[data-skin] #btnLogout{padding:5px 10px;font-size:12px}
html[data-skin] #view{padding:18px 24px 60px;width:100%}

/* ---------- 2. 卡片 / 表格 / 工具栏 ---------- */
html[data-skin] .card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px}
html[data-skin] .card>h3{border:0;padding:14px 16px 0;font-size:14px;color:var(--ink-hi);gap:8px}
html[data-skin] .card>h3 small{font-size:12px;color:var(--mute);font-weight:400}
html[data-skin] .card .bd{padding:12px 16px 16px}
html[data-skin] .card>table,html[data-skin] .card>.bd>table{width:calc(100% - 32px);margin:12px 16px 16px;border:1px solid var(--line);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden}
html[data-skin] .card>.bd>table{width:100%;margin:0}
html[data-skin] .card>table:first-child{margin-top:16px}
html[data-skin] th{background:var(--panel);color:var(--mute);font:600 12px -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;padding:8px 10px;white-space:nowrap;border-bottom:1px solid var(--line)}
html[data-skin] td{padding:8px 10px;border-bottom:1px solid var(--line)}
html[data-skin] tbody tr:last-child td,html[data-skin] table tr:last-child td{border-bottom:0}
html[data-skin] .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
html[data-skin] .toolbar .sp{flex:1}

/* ---------- 3. 按钮 / 标签 / 状态 ---------- */
html[data-skin] button{border-radius:8px;padding:6px 12px;font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
html[data-skin] button:hover{background:var(--panel);border-color:var(--line3)}
html[data-skin] button.p{background:var(--pri);border-color:var(--pri);color:var(--on-pri);font-weight:500}
html[data-skin] button.s{padding:2px 8px;font-size:12px;border-radius:6px}
html[data-skin] button.s.d,html[data-skin] button.d{color:var(--err);border-color:var(--err);background:var(--card)}
html[data-skin] .pill{display:inline-flex;align-items:center;gap:6px;padding:0 8px;border-radius:6px;line-height:20px;font-size:12px;border:1px solid transparent}
html[data-skin] .pill.ok:before,html[data-skin] .pill.warn:before,html[data-skin] .pill.err:before,html[data-skin] .pill.run:before,html[data-skin] .pill.gray:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
html[data-skin] .tag{border-radius:6px;line-height:20px;padding:0 8px;font-size:12px}
html[data-skin] .chip{border-radius:8px}
html[data-skin] .hint{color:var(--mute);font-size:12px}
html[data-skin] .note{border-radius:10px}

/* ---------- 4. 页签 / 表单 ---------- */
html[data-skin] .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
html[data-skin] .tabs a{padding:8px 14px;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;background:none}
html[data-skin] .tabs a.on{color:var(--pri);border-color:var(--pri);font-weight:600}
html[data-skin] label.f>span{font-size:12.5px;color:var(--mute)}
html[data-skin] input,html[data-skin] select,html[data-skin] textarea{border-radius:8px}

/* ---------- 5. 弹窗 / 提示 ---------- */
html[data-skin] .modal .box{border-radius:14px}
html[data-skin] .toast{left:50%;right:auto;top:auto;bottom:28px;transform:translateX(-50%) translateY(20px);border-radius:8px;background:#1b2230;font:14px/1.5 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;padding:8px 16px;max-width:min(560px,90vw)}
html[data-skin] .toast.on{transform:translateX(-50%)}

/* ---------- 6. 登录页：左侧品牌渐变 + 功能卡片，右侧表单 ---------- */
html[data-skin] .login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);background:var(--bg);overflow:auto}
html[data-skin] .login[hidden]{display:none}
html[data-skin] .login .lx-left{background:linear-gradient(150deg,#1a2140 0%,#2b2f6b 55%,#4b3a88 100%);color:#e8ebff;padding:48px 56px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden;border:0;min-width:0;flex:none}
html[data-skin="eye"] .login .lx-left{background:linear-gradient(150deg,#2f3d2b 0%,#3f5539 60%,#56704a 100%)}
html[data-skin] .login .lx-left .lx-bg,html[data-skin] .login .lx-left .lx-topo{display:none}
html[data-skin] .login .lx-brand{position:static;display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700}
html[data-skin] .login .lx-brand .lg{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#5b6cff,#9b6bdf);display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff;flex:none}
html[data-skin] .login .lx-brand b{font:700 22px/1.2 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:#fff;display:block}
html[data-skin] .login .lx-brand span{font-size:12px;color:#c3c8ef;letter-spacing:0;font-weight:400}
html[data-skin] .login .lx-copy{position:static;max-width:none;margin-top:12px}
html[data-skin] .login .lx-eyebrow{font:12px/1.4 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.06em;color:#aab1ee;margin:0 0 14px}
html[data-skin] .login .lx-copy h1{font-size:30px;line-height:1.35;font-weight:700;color:#fff;margin:0 0 12px;text-shadow:none;letter-spacing:0}
html[data-skin] .login .lx-copy h1 em{color:#fff;text-shadow:none;font-style:normal}
html[data-skin] .login .lx-copy p{color:#c3c8ef;font-size:14px;line-height:1.75;max-width:520px;margin:0}
html[data-skin] .login .lx-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px}
html[data-skin] .login .lx-feat div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;font-size:13px;color:#dfe3ff}
html[data-skin] .login .lx-feat b{display:block;color:#fff;margin-bottom:2px;font-size:13.5px}
html[data-skin] .login .lx-foot2{margin-top:auto;font-size:12px;color:#9aa1d6}
html[data-skin] .login .lx-stats{display:none}
html[data-skin] .login .lx-right{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 24px;position:relative;flex:none;min-width:0}
html[data-skin] .login .lx-form{width:min(400px,100%);padding:0;border:0;background:transparent;box-shadow:none}
html[data-skin] .login .lx-form h2{font-size:22px;margin:0 0 4px;color:var(--ink-hi);letter-spacing:0;font-weight:700}
html[data-skin] .login .lx-eyebrow.dim{display:none}
html[data-skin] .login .lx-sub{font-size:13px;color:var(--mute);margin:0 0 18px}
html[data-skin] .login .lx-form label{font-size:13px;color:var(--mute);letter-spacing:0;margin-bottom:14px}
html[data-skin] .login .lx-in{border-radius:8px;border:1px solid var(--line);background:var(--card);padding:0 12px;margin-top:6px}
html[data-skin] .login .lx-in input{padding:10px 0;font-size:14px;border:0;background:transparent;box-shadow:none;color:var(--ink)}
html[data-skin] .login .lx-btn{width:100%;padding:10px;font-size:15px;letter-spacing:0;font-weight:500;border-radius:8px}
html[data-skin] .login .lx-help{text-align:center;color:var(--mute);font-size:12px;margin-top:14px}
html[data-skin] .login .lx-skin{position:absolute;top:18px;right:20px}
html[data-skin] .login .lx-foot{display:none}
@media(max-width:900px){html[data-skin] .login{grid-template-columns:1fr}html[data-skin] .login .lx-left{display:none}}

/* ---------- 7. 顶栏收紧、侧栏底部三张信息卡 ---------- */
html[data-skin] #ptitle{flex:none}
html[data-skin] #ptitle h2,html[data-skin] #ptitle .ey{white-space:nowrap}
html[data-skin] aside .sidestat,html[data-skin] aside .foot{margin:8px 6px 0}

/* ---------- 8. 列表页：标题 + 统计 + 筛选 + 表格 合成一张卡片（dba-tool「实例列表」的版式） ---------- */
html[data-skin] .listcard{padding:16px}
html[data-skin] .listcard>h2{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-hi)}
html[data-skin] .listcard>h2 .sub{font-weight:400;color:var(--mute);font-size:12px}
html[data-skin] .listcard>h2 .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html[data-skin] .stat{display:flex;gap:30px;flex-wrap:wrap;margin:0 0 14px}
html[data-skin] .stat>div{min-width:84px}
html[data-skin] .stat b{display:block;font-size:20px;letter-spacing:-.02em;color:var(--ink-hi);line-height:1.3}
html[data-skin] .stat b.ok{color:var(--ok)}html[data-skin] .stat b.warn{color:var(--warn)}html[data-skin] .stat b.bad{color:var(--err)}
html[data-skin] .stat span{font-size:12px;color:var(--mute)}
html[data-skin] .tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
html[data-skin] .tbl-wrap>table{border:0;margin:0;width:100%;border-radius:0}
html[data-skin] .listcard>.toolbar,html[data-skin] .listcard>.chips{margin:0 0 12px}
html[data-skin] .tag.brand{background:var(--pri-bg);color:var(--pri);border-color:transparent}
html[data-skin] .small{font-size:12px}
html[data-skin] .muted{color:var(--mute)}

/* ---------- 9. 登录页补充 ---------- */
html[data-skin] .login .lx-deco{position:absolute;right:-50px;bottom:-30px;width:360px;opacity:.16;pointer-events:none}

/* ---------- 10. 侧栏底部紧凑：1360×800 的屏幕上整条侧栏不用滚动 ---------- */
html[data-skin] aside nav a{padding:6px 12px}
html[data-skin] aside nav .ngrp{padding:12px 12px 5px}
html[data-skin] aside .sidestat{padding:7px 12px;margin-top:6px}
html[data-skin] aside .foot{padding:7px 12px;font-size:11.5px;line-height:1.55}
html[data-skin] #brand{padding-bottom:12px}
html[data-skin] aside nav a{padding:5px 12px;margin:0}
html[data-skin] aside nav .ngrp{padding:10px 12px 4px}
html[data-skin] aside .sidestat{grid-template-columns:auto auto auto auto;justify-content:space-between;gap:0 6px;padding:6px 12px}
html[data-skin] aside .sidestat span{white-space:nowrap}
html[data-skin] aside .foot{padding:6px 12px;font-size:11px;line-height:1.5}
html[data-skin] aside{padding-top:12px}

/* ---------- 11. 顶栏时钟（xxxx年xx月xx日 24 小时制）与登录页状态行 ---------- */
html[data-skin] header #clk{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px}
html[data-skin] .login .lx-left .lx-status{position:absolute;right:56px;top:56px;display:flex;gap:16px;font:12.5px -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#c3c8ef;font-variant-numeric:tabular-nums}
html[data-skin] .login .lx-left .lx-status b{color:#8ee6b6;font-weight:600}

/* ---------- 12. 宽度自动填满 + 平板 / 手机 ----------
   · 内容区不再限制最大宽度，随窗口自动填满（宽屏、超宽屏都一样）
   · 1100px 以下：app.css 里旧的「图标窄栏」规则作废，侧栏保持完整宽度
   · 900px 以下（平板竖屏、手机）：侧栏变成抽屉，点顶栏左边的 ☰ 打开，点遮罩 / 菜单项 / 换页自动关闭
   · 700px 以下（手机）：顶栏收紧、内容边距变小、表格在卡片里横向滑动、输入框 16px（避免 iOS 聚焦时自动放大）、按钮加大触摸面积 */
html[data-skin] .navbtn{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;font-size:18px;line-height:1;border-radius:8px;flex:none}
html[data-skin] #navmask{display:none}
html[data-skin] header:after{content:"";display:none}
@media(max-width:1280px){
  html[data-skin] .hbtn{display:none}
}
@media(max-width:1140px){
  html[data-skin] header{position:static}
}
@media(max-width:1100px){
  html[data-skin] aside .foot{display:block}
  html[data-skin] aside .nm{display:inline}
  html[data-skin] aside nav a>span:first-child{font-size:inherit}
  html[data-skin] aside nav a .badge{position:static;font-size:11px;padding:0 7px}
}
@media(max-width:900px){
  html[data-skin] .app{display:block}
  html[data-skin] aside{position:fixed;left:0;top:0;bottom:0;height:100%;width:264px;max-width:84vw;z-index:60;transform:translateX(-104%);transition:transform .2s ease}
  html[data-skin] body.navopen aside{transform:none;box-shadow:0 0 40px rgba(0,0,0,.45)}
  html[data-skin] body.navopen{overflow:hidden}
  html[data-skin] #navmask{position:fixed;inset:0;background:rgba(10,14,24,.5);z-index:55}
  html[data-skin] body.navopen #navmask{display:block}
  html[data-skin] aside{flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  html[data-skin] aside>*{flex-shrink:0}
  html[data-skin] aside nav{display:block;flex:1 0 auto}
  html[data-skin] aside nav a{border:0;padding:9px 12px}
  html[data-skin] aside nav .ngrp{padding:12px 12px 6px}
  html[data-skin] .navbtn{display:inline-flex}
  html[data-skin] header{padding:10px 16px}
  html[data-skin] #view{padding:14px 16px 56px}
}
@media(max-width:700px){
  html[data-skin] header{position:static;padding:8px 12px;gap:8px}
  html[data-skin] header .sp,html[data-skin] .hbtn{display:none}
  html[data-skin] #ptitle{flex:1 1 0;min-width:0;order:1}
  html[data-skin] .navbtn{order:0}
  html[data-skin] #ptitle h2,html[data-skin] #ptitle .ey{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin] #ptitle h2{font-size:16px}
  html[data-skin] #hUser{order:2;font-size:0;gap:0;padding:3px}
  html[data-skin] #hUser:before{font-size:12px}
  html[data-skin] #btnLogout{order:3}
  html[data-skin] header:after{display:block;order:4;flex-basis:100%;height:0}
  html[data-skin] #hPend,html[data-skin] #hVer,html[data-skin] #clk,html[data-skin] header .skin-sw{order:5}
  html[data-skin] header .skin-sw{margin-left:auto}
  html[data-skin] #hVer{display:none}
  html[data-skin] header #clk{font-size:12px;padding:0}
  html[data-skin] #view{padding:12px 12px 56px}
  html[data-skin] .card{border-radius:10px}
  html[data-skin] .listcard{padding:12px}
  html[data-skin] .card .bd{padding:10px 12px 14px}
  html[data-skin] .card>h3{padding:12px 12px 0}
  html[data-skin] .listcard>h2 .right{margin-left:0;width:100%}
  html[data-skin] .listcard>h2 .right button{flex:1}
  html[data-skin] .stat{gap:12px 22px}
  html[data-skin] .toolbar input[style],html[data-skin] .toolbar select{width:100%!important;max-width:100%}
  html[data-skin] .tbl-wrap>table{min-width:640px}
  html[data-skin] .listcard .tbl-wrap>table{min-width:860px}
  html[data-skin] .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html[data-skin] .tabs a{white-space:nowrap;flex:none}
  html[data-skin] .ostats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html[data-skin] .ostats .card{min-width:0;padding:10px 12px;margin:0}
  html[data-skin] input,html[data-skin] select,html[data-skin] textarea{font-size:16px}
  html[data-skin] button{min-height:34px}
  html[data-skin] button.s{min-height:30px}
  html[data-skin] .tabs a{padding:8px 12px}
  html[data-skin] .modal .box{width:94vw;max-width:94vw;max-height:92vh}
  html[data-skin] #mbox .grid{grid-template-columns:minmax(0,1fr)!important}
  html[data-skin] .toast{max-width:92vw}
  html[data-skin] .login .lx-right{padding:20px 16px;min-height:100vh}
  html[data-skin] .login .lx-form{width:100%}
  html[data-skin] .login .lx-skin{top:12px;right:12px}
}
html[data-skin] aside .side-skin{display:none}
@media(max-width:1250px){
  html[data-skin] .ovtop{grid-template-columns:minmax(0,1fr)}
  html[data-skin] .ovtop>div+div{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:700px){
  html[data-skin] .ovcards{grid-template-columns:minmax(0,1fr)}
  html[data-skin] header .skin-sw{display:none}
  html[data-skin] aside .side-skin{display:inline-flex;margin:8px 6px 0;align-self:flex-start}
}

/* 页面底部的操作条（保存到草稿 / 保存并校验）：左右贴齐内容区的内边距，不再比窗口宽几个像素 */
html[data-skin] .bar{margin:0 -24px -60px;padding:10px 24px}
@media(max-width:900px){html[data-skin] .bar{margin:0 -16px -56px;padding:10px 16px}}
@media(max-width:700px){html[data-skin] .bar{margin:0 -12px -56px;padding:8px 12px;flex-wrap:wrap}}

/* 登录页（平板 / 手机）：左侧品牌面板收成一行「Logo + 平台名」，表单在下面；换皮肤按钮固定在右上角 */
@media(max-width:900px){
  html[data-skin] .login{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  html[data-skin] .login .lx-left{display:flex;background:var(--bg);color:var(--ink);padding:20px 20px 0;gap:0;min-height:0}
  html[data-skin] .login .lx-left>:not(.lx-brand){display:none}
  html[data-skin] .login .lx-brand b{display:none}
  html[data-skin] .login .lx-brand span{color:var(--ink-hi);font-size:18px;font-weight:700}
  html[data-skin] .login .lx-right{min-height:0;align-items:flex-start;padding:24px 20px 32px}
  html[data-skin] .login .lx-form{margin:0 auto;padding-top:8px}
  html[data-skin] .login .lx-skin{position:fixed;top:14px;right:12px;z-index:3}
}

/* ===== 多语言切换（中文 / English）：复用 .skin-sw 的外观；登录页放在皮肤切换下面 ===== */
html[data-skin] .login .lx-lang{position:absolute;top:56px;right:20px;z-index:3}
@media(max-width:900px){html[data-skin] .login .lx-lang{top:48px;right:12px}}
@media(max-width:700px){html[data-skin] .login .lx-lang{position:fixed;top:50px;right:12px;z-index:3}}

/* ===== 说明收纳：标题旁的 ⓘ 提示（ui-help.js） ===== */
.help{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:6px;border:1px solid var(--line);border-radius:50%;font-style:normal;font-weight:600;font-size:10px;line-height:1;letter-spacing:0;text-transform:none;color:var(--mute);background:transparent;cursor:help;vertical-align:1px;user-select:none}
.help b{font-weight:600}
.help:hover,.help:focus-visible,.help.on{color:var(--pri);border-color:var(--pri);outline:0}
.help-body{display:none}
h3 .help{vertical-align:2px}
#ptitle h2 .help{width:16px;height:16px;font-size:11px;vertical-align:3px}
#uihelp{position:fixed;z-index:2147483000;max-width:380px;padding:10px 13px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(15,23,42,.18);font-size:12.5px;line-height:1.7;font-weight:400;letter-spacing:0;text-transform:none;text-align:left}
#uihelp[hidden]{display:none}
#uihelp p{margin:0}
#uihelp p+p{margin-top:7px}
#uihelp b{color:var(--ink-hi,var(--ink))}

/* ===== 控制台化：表格密度 / 空状态（统一一套尺寸；以后要调密度，只改下面几个变量） ===== */
html[data-skin]{--tbl-fs:13px;--tbl-lh:20px;--tbl-py:10px;--tbl-px:12px;--tbl-edge:16px;--tbl-hfs:12px}
html[data-skin] #mbox,html[data-skin] table.chg,html[data-skin] .ovnote table{--tbl-py:6px;--tbl-px:10px;--tbl-edge:10px}   /* 紧凑档：弹窗里的表、展开行里的变更明细 */
html[data-skin] .md{--tbl-fs:14px;--tbl-lh:1.6;--tbl-py:8px;--tbl-px:10px;--tbl-edge:10px}   /* 文档档：用户手册里的表格保持文档排版 */
html[data-skin] table{font-size:var(--tbl-fs);line-height:var(--tbl-lh);font-variant-numeric:tabular-nums}
html[data-skin] th,html[data-skin] td{padding:var(--tbl-py) var(--tbl-px)}
html[data-skin] th{font-size:var(--tbl-hfs);line-height:var(--tbl-lh)}
html[data-skin] th:first-child,html[data-skin] td:first-child{padding-left:var(--tbl-edge)}
html[data-skin] th:last-child,html[data-skin] td:last-child{padding-right:var(--tbl-edge)}
html[data-skin] tr:has(td input:not([type=checkbox]):not([type=radio]),td select,td textarea) td{padding-top:6px;padding-bottom:6px}   /* 行内有输入框的编辑表：行高不被撑大 */
html[data-skin] td.nw,html[data-skin] th.nw{white-space:nowrap}   /* 时间 / 操作人这类短内容的列：不折行 */
@media(max-width:1100px){html[data-skin]{--tbl-px:10px;--tbl-edge:12px}}   /* 窄屏：左右内边距收一点，少折行 */

/* 空状态：表格里的「还没有……」整行、卡片里的空提示，统一成「插图 + 一行文字」 */
html[data-skin]{--empty-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 28 16 8h32l8 20'/%3E%3Cpath d='M8 28v12a2 2 0 0 0 2 2h44a2 2 0 0 0 2-2V28'/%3E%3Cpath d='M8 28h14a3 3 0 0 1 3 3 7 7 0 0 0 14 0 3 3 0 0 1 3-3h14'/%3E%3C/g%3E%3C/svg%3E")}
html[data-skin] td.hint[colspan],html[data-skin] .empty{text-align:center;color:var(--mute);font-size:13px;line-height:20px;margin:0;padding:36px 16px 40px}
html[data-skin] td.hint[colspan]:before,html[data-skin] .empty:before{content:"";display:block;width:56px;height:42px;margin:0 auto 10px;background-color:var(--line3);-webkit-mask:var(--empty-ico) center/contain no-repeat;mask:var(--empty-ico) center/contain no-repeat}
html[data-skin] .card .bd.empty{padding:32px 16px 36px}
html[data-skin] tr:hover>td.hint[colspan]{background:transparent}

/* 用户手册：从目录 / 页面「帮助」跳到某个标题时，不被吸顶的顶栏盖住（--hdr-h 由 drawDocLink 按顶栏实际高度设置） */
html[data-skin] .md :is(h1,h2,h3,h4){scroll-margin-top:calc(var(--hdr-h,64px) + 12px)}

/* 侧栏「数据源 / 任务」计数：英文标签比中文长，四列放不下，改成两行（标签 + 数值），数值不折行 */
html[lang=en][data-skin] aside .sidestat{grid-template-columns:1fr auto}
html[data-skin] aside .sidestat b{white-space:nowrap}

/* 侧栏顶部品牌区：英文副标题比中文长，放不下时用省略号，不越出侧栏 */
html[data-skin] aside h1 div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-skin] aside h1 small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[lang=en][data-skin] aside h1 small{font-size:10.5px}