:root {
    --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
    --font-num: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC", ui-monospace, monospace;
    --fs: 13px;
    --lh: 26px;
    --ctrl-h: 26px;
    --col-nodes: 280px;
    --topbar-h: 36px;
    --statusbar-h: 32px;
    --radius: 4px;
    --ring: 0 0 0 2px rgba(8, 127, 136, 0.16);
  }
  html[data-theme="light"] {
    --bg: #eef3f4;
    --panel: #ffffff;
    --field-bg: #f9fbfc;
    --row-alt: #f4f8f8;
    --line: rgba(28, 58, 74, 0.14);
    --fg: #10232d;
    --fg-2: #687c88;
    --fg-3: #9aaab3;
    --sel: rgba(8, 127, 136, 0.12);
    --sel-fg: #087f88;
    --accent: #087f88;
    --btn-bg: #ffffff;
    --btn-border: rgba(28, 58, 74, 0.18);
    --ok: #087f88;
    --track: #e6eaee;
    --switch-off: #c8d0d8;
    --dirty: #087f88;
    --dirty-bg: rgba(8, 127, 136, 0.14);
  }
  html[data-theme="dark"] {
    --bg: #0d1c24;
    --panel: #122830;
    --field-bg: #18323b;
    --row-alt: #153038;
    --line: rgba(255, 255, 255, 0.10);
    --fg: #e7eef0;
    --fg-2: #8aa0aa;
    --fg-3: #6d828b;
    --sel: rgba(8, 127, 136, 0.28);
    --sel-fg: #7ee0e6;
    --accent: #2aa8b0;
    --btn-bg: #18323b;
    --btn-border: rgba(255, 255, 255, 0.14);
    --ok: #7ee0e6;
    --track: #2a4148;
    --switch-off: #3a4c54;
    --dirty: #2aa8b0;
    --dirty-bg: rgba(42, 168, 176, 0.22);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
  body { font-family: var(--font-ui); font-size: var(--fs); }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  .app { height: 100dvh; display: grid; grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h); }
  .top, .status {
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap;
  }
  .status { border-bottom: 0; border-top: 1px solid var(--line); }
  .brand { font-weight: 600; }
  .muted { color: var(--fg-2); }
  .dim { color: var(--fg-3); }
  .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .grow { flex: 1; }
  .field {
    height: 26px; background: var(--field-bg); color: var(--fg);
    border: 1px solid var(--btn-border); border-radius: var(--radius); padding: 0 8px; outline: none;
  }
  .field { width: 160px; }
  .field:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
  #themeToggle { width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-2); padding: 0; display: grid; place-items: center; }
  #themeToggle svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  #themeToggle .when-dark { display: none; }
  #themeToggle[data-state="dark"] .when-light { display: none; }
  #themeToggle[data-state="dark"] .when-dark { display: block; }
  .chip { height: 22px; padding: 0 8px; border: 1px solid rgba(8, 127, 136, 0.35); color: var(--accent); background: rgba(8, 127, 136, 0.08); border-radius: var(--radius); display: inline-flex; align-items: center; }
  .chip.is-zero { border-color: var(--line); color: var(--fg-3); }
  .body { display: grid; grid-template-columns: var(--col-nodes) 6px 1fr; min-height: 0; }
  .nodes { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
  .split { position: relative; cursor: col-resize; touch-action: none; }
  .split::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px; background: var(--line);
  }
  .split:hover::before, .split.is-drag::before { width: 2px; background: var(--accent); }
  body.is-split { user-select: none; cursor: col-resize; }
  .search { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
  .search input { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--btn-border); border-radius: var(--radius); background: var(--field-bg); padding: 0 8px; outline: none; }
  .search input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
  .search button { width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-2); padding: 0; display: grid; place-items: center; flex: none; }
  .search button:hover { color: var(--accent); }
  .search button svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  #treeToggle .when-collapsed { display: none; }
  #treeToggle[data-state="collapsed"] .when-open { display: none; }
  #treeToggle[data-state="collapsed"] .when-collapsed { display: block; }
  .tree { overflow: auto; flex: 1; padding: 2px 0 8px; }
  .branch, .leaf {
    display: flex; align-items: center; width: 100%; height: var(--lh); gap: 2px;
    background: transparent; border: 0; text-align: left; padding-right: 6px; color: var(--fg);
  }
  .tw { width: 14px; flex: none; color: var(--fg-2); text-align: center; }
  .leaf.is-on { background: var(--sel); color: var(--sel-fg); }
  .leaf.is-on .tw { color: var(--sel-fg); }
  .mark { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--dirty); flex: none; }
  .params { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
  .pane-h {
    height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
    color: var(--fg-2); border-bottom: 1px solid var(--line);
  }
  .table-wrap { overflow: auto; flex: 1; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th {
    position: sticky; top: 0; background: var(--panel); z-index: 2; text-align: left;
    color: var(--fg-2); font-weight: 600; height: 18px; border-bottom: 1px solid var(--line); padding: 0 6px;
  }
  #rows tr { height: 24px; }
  #rows tr.is-open { height: auto; }
  #rows tr.is-open td { height: auto; padding-top: 4px; padding-bottom: 4px; }
  td { height: 24px; padding: 0 6px; vertical-align: middle; overflow: visible; }
  .val-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .val-head { display: flex; align-items: center; gap: 6px; width: 100%; height: var(--ctrl-h); }
  .val-head .mono {
    flex: 1 1 auto; min-width: 0; height: var(--ctrl-h); display: flex; align-items: center;
    padding: 0 6px; border: 1px solid var(--btn-border); border-radius: var(--radius);
    background: var(--field-bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .more { display: flex; align-items: center; gap: 8px; width: 280px; height: var(--ctrl-h); position: relative; }
  .reveal { width: var(--ctrl-h); height: var(--ctrl-h); flex: none; border: 1px solid var(--btn-border); border-radius: 4px; background: var(--field-bg); color: var(--fg-2); display: grid; place-items: center; padding: 0; }
  .reveal.is-on { color: var(--accent); border-color: var(--accent); background: rgba(8, 127, 136, 0.08); }
  .reveal svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
  .opts { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
  .opt { height: var(--ctrl-h); padding: 0 8px; border: 1px solid var(--btn-border); border-radius: 4px; background: var(--field-bg); color: var(--fg); }
  .opt.is-on { color: var(--accent); border-color: var(--accent); background: rgba(8, 127, 136, 0.1); font-weight: 600; }
  #hideSettings, #nodeRefresh { width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-2); padding: 0; display: grid; place-items: center; }
  #hideSettings svg, #nodeRefresh svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  #hideSettings.is-on { color: var(--accent); }
  #hideSettings:hover, #nodeRefresh:hover { color: var(--accent); }
  #hidePop {
    position: fixed; z-index: 30; width: 280px; padding: 8px;
    background: var(--panel); color: var(--fg); border: 1px solid var(--btn-border);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 35, 45, 0.16);
  }
  #hidePop .hide-h { color: var(--fg-2); font-weight: 600; margin-bottom: 6px; }
  #hideList { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
  #hideList .rule {
    display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--field-bg);
  }
  #hideList .rule span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-num); }
  #hideList .rule button { border: 0; background: transparent; color: var(--fg-2); padding: 0 2px; }
  #hideList .rule button:hover { color: var(--accent); }
  #hideForm { display: flex; gap: 6px; margin-top: 8px; }
  #hideForm input { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--btn-border); border-radius: var(--radius); background: var(--field-bg); padding: 0 8px; outline: none; }
  #hideForm input:focus { border-color: var(--accent); box-shadow: var(--ring); }
  #hideForm button { height: 26px; padding: 0 10px; border: 1px solid var(--btn-border); border-radius: var(--radius); background: var(--btn-bg); }
  #controlMode { height: 20px; padding: 0 8px; border: 1px solid var(--btn-border); border-radius: 4px; background: var(--field-bg); color: var(--fg-2); }
  html[data-controls="compact"] .table-wrap { overflow-x: hidden; overflow-y: auto; }
  html[data-controls="compact"] table,
  html[data-controls="compact"] #rows { width: 100%; min-width: 0; }
  html[data-controls="compact"] .text { width: 12em; min-width: 0; max-width: 12em; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  html[data-controls="compact"] .num { width: 7.5em; min-width: 7.5em; max-width: 7.5em; box-sizing: border-box; }
  html[data-controls="compact"] .now { flex: none; width: 4.5em; min-width: 4.5em; max-width: 4.5em; height: 100%; box-sizing: border-box; }
  th.only-compact { display: none; }
  html[data-controls="compact"] table,
  html[data-controls="compact"] thead,
  html[data-controls="compact"] tbody { display: block; }
  html[data-controls="compact"] thead {
    position: sticky; top: 0; z-index: 2; background: var(--panel);
  }
  html[data-controls="compact"] thead tr {
    display: grid;
    grid-template-columns: 96px 176px minmax(0, 1fr) 96px 176px minmax(0, 1fr);
    height: 22px; align-items: center;
  }
  html[data-controls="compact"] th.only-compact { display: block; }
  html[data-controls="compact"] #rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  html[data-controls="compact"] thead { display: none; }
  html[data-controls="compact"] .pcol {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content minmax(2.5em, 1fr);
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--line);
  }
  html[data-controls="compact"] .phead { display: contents; }
  html[data-controls="compact"] .phead span {
    position: sticky; top: 0; z-index: 2; height: 28px; display: flex; align-items: center;
    padding: 0 6px; background: var(--panel); color: var(--fg-2); font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  html[data-controls="compact"] .phead .orig-h { justify-content: flex-end; }
  html[data-controls="compact"] #rows tr { display: contents; }
  html[data-controls="compact"] #rows td {
    height: auto; min-height: 32px; min-width: 0; overflow: hidden;
    display: flex; align-items: flex-start; align-self: stretch; padding: 3px 6px;
    border-bottom: 1px solid var(--line);
  }
  html[data-controls="compact"] #rows td:nth-child(2) { overflow: hidden; }
  html[data-controls="compact"] .val-row { width: auto; max-width: 100%; height: auto; min-height: var(--ctrl-h); }
  html[data-controls="compact"] #rows td.name,
  html[data-controls="compact"] #rows td.orig {
    height: auto; min-height: 32px; min-width: 0; line-height: var(--ctrl-h);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-controls="compact"] #rows td.name { max-width: none; }
  html[data-controls="compact"] #rows td.orig { max-width: none; justify-content: flex-end; text-align: right; }
  th:nth-child(3), th:nth-child(6) { text-align: right; }
  html[data-controls="compact"] .val-head,
  html[data-controls="compact"] .val-col { width: auto; max-width: 100%; }
  html[data-controls="compact"] .spin { flex: none; width: auto; }
  html[data-controls="compact"] tr:nth-child(even):not(.is-dirty) td { background: transparent; }
  html[data-controls="compact"] .more { width: 16em; max-width: 16em; margin: 0; box-sizing: border-box; gap: 6px; }
  html[data-controls="compact"] .bound { width: auto; }
  tr:nth-child(even) td { background: var(--row-alt); }
  tr.is-dirty td { background: var(--dirty-bg); }
  tr.is-dirty td:first-child { box-shadow: inset 3px 0 0 var(--dirty); }
  tr.is-dirty .name, tr.is-dirty .now, tr.is-dirty .num, tr.is-dirty .text, tr.is-dirty .mono { color: var(--accent); font-weight: 600; }
  tr.is-ro .name, tr.is-ro .num, tr.is-ro .text { color: var(--fg-3); }
  .name { white-space: nowrap; }
  .val-row { display: flex; align-items: center; gap: 6px; min-height: var(--ctrl-h); height: auto; }
  .val-row.val-col { height: auto; align-items: flex-start; }
  .num, .text {
    border: 1px solid var(--btn-border); border-radius: var(--radius); background: var(--field-bg);
    color: var(--fg); outline: none; height: var(--ctrl-h); padding: 0 6px;
  }
  .num { width: 88px; text-align: left; font-variant-numeric: tabular-nums; }
  .text { width: 100%; }
  .num:focus, .text:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
  .val-row.is-range { display: block; height: auto; }
  .range { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 220px; height: var(--ctrl-h); }
  .spin { display: flex; align-items: stretch; height: var(--ctrl-h); flex: none; }
  .range .now {
    width: 52px; height: 100%; box-sizing: border-box; text-align: left; padding: 0 6px;
    border: 1px solid var(--btn-border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
    background: var(--field-bg); color: var(--fg); font-variant-numeric: tabular-nums; outline: none;
  }
  .range .now:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
  .pads { display: flex; flex-direction: column; width: 14px; }
  .nudge {
    flex: 1; margin: 0; padding: 0; line-height: 8px; font-size: 8px;
    border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--fg);
  }
  .nudge + .nudge { border-top: 0; }
  .range-track { position: relative; flex: 1; min-width: 80px; height: 18px; display: flex; align-items: center; }
  .bound { flex: none; width: 36px; color: var(--fg-2); font-size: 11px; font-family: var(--font-num); }
  .bound.min { text-align: right; }
  .bound.max { text-align: left; }
  .bubble {
    position: absolute; top: 0; z-index: 5; transform: translate(-50%, -100%);
    background: #4a4d52; color: #fff; font-family: var(--font-num); font-size: 11px;
    line-height: 16px; padding: 0 6px; border-radius: 4px; display: none; pointer-events: none;
  }
  .range.is-hot { position: relative; z-index: 6; }
  .range.is-hot .bubble { display: block; }
  input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; background: transparent; margin: 0; outline: none; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--track); border-radius: 1px; }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box;
  }
  .sw { width: 28px; height: 16px; border-radius: 8px; background: var(--switch-off); border: 0; position: relative; flex: none; padding: 0; }
  .sw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
  .sw.is-on { background: var(--accent); }
  .sw.is-on i { left: 14px; }
  .typ { font-family: var(--font-num); color: var(--fg-2); width: 28px; }
  .orig { color: var(--fg-2); font-family: var(--font-num); white-space: nowrap; text-align: right; }
  .btn { height: 26px; padding: 0 12px; background: var(--btn-bg); color: var(--fg); border: 1px solid var(--btn-border); border-radius: var(--radius); }
  .btn:hover { background: var(--field-bg); }
  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
  html[data-theme="dark"] .btn.primary { color: #fff; }
  .btn:disabled { color: var(--fg-3); background: var(--btn-bg); border-color: var(--line); cursor: not-allowed; }
  .ok { color: var(--ok); }
  .hint { color: var(--fg-3); margin-left: auto; }
  .restart-bar { min-height: 28px; padding: 4px 10px; background: var(--dirty-bg); color: var(--accent); border-bottom: 1px solid rgba(8, 127, 136, 0.28); font-size: 12px; line-height: 18px; }
  .restart-bar[hidden] { display: none; }
  .name.has-desc { cursor: help; }
  #descTip {
    position: fixed; z-index: 20; display: none; max-width: 260px;
    padding: 4px 8px; border-radius: 4px; background: #10232d; color: #fff;
    font-size: 12px; line-height: 16px; pointer-events: none;
  }

  .more.is-hot .bubble { display: block; }
  [hidden] { display: none !important; }
  .empty { padding: 14px 10px; color: var(--fg-2); }
  .is-bad { color: #a33d32; }
  html[data-theme="dark"] .is-bad { color: #f0a8a0; }
  #health.is-bad { color: #a33d32; }
  html[data-theme="dark"] #health.is-bad { color: #f0a8a0; }