:root {
    color-scheme: light;
    --page: #f3f6fb; --surface: #ffffff; --raised: #ffffff; --inset: #f7f9fc; --sidebar: #fafbfe;
    --text-1: #18243b; --text-2: #526079; --muted: #69788f;
    --grid: #edf1f7; --axis: #cbd5e3; --border: #e1e7f0; --hover: #f3f7fd;
    --accent: #3569e8; --accent-weak: #edf3ff; --accent-ink: #2858ca;
    --s1: #3569e8; --s2: #c98217; --s3: #168765; --s4: #9561cf;
    --good-text: #16815c; --good-weak: #eaf8f1; --warn: #966116; --warn-weak: #fff8e8;
    --err: #c63949; --err-weak: #fff0f2; --on-accent: #fff;
    --band: rgba(105,120,143,.12);
    --shadow: 0 2px 4px rgba(24,36,59,.025), 0 4px 16px rgba(24,36,59,.025);
    --overlay: rgba(15,23,42,.46); --focus: color-mix(in srgb, var(--accent) 38%, transparent);
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #0d1422; --surface: #151f30; --raised: #1c2940; --inset: #111b2b; --sidebar: #111b2b;
    --text-1: #e6edf9; --text-2: #b2bfd4; --muted: #92a2bb;
    --grid: #223047; --axis: #3a4a64; --border: #2a3850; --hover: #1c2b43;
    --accent: #477df1; --accent-weak: #203458; --accent-ink: #a0c1ff;
    --s1: #81acff; --s2: #efb95d; --s3: #5dcba6; --s4: #b898ec;
    --good-text: #6ed7ae; --good-weak: #17362f; --warn: #efc579; --warn-weak: #362e20;
    --err: #ff9da9; --err-weak: #3c2532;
    --band: rgba(146,162,187,.16);
    --shadow: 0 2px 8px rgba(0,0,0,.10);
    --overlay: rgba(3,8,18,.68);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scrollbar-gutter: stable; }
  [hidden] { display: none !important; }
  body.modal-open { overflow: hidden; }
  body {
    font: 14px/1.6 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--page); color: var(--text-1);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }
  a { color: var(--accent-ink); text-decoration: none; }
  .app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
  .app.nav-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .nav-collapsed .nav-label, .nav-collapsed .count, .nav-collapsed .brand > div:last-child,
  .nav-collapsed .side-foot { display: none; }
  .nav-collapsed .brand { padding: 14px 0; justify-content: center; }
  .nav-collapsed .nav a { justify-content: center; padding: 9px; }
  .nav-collapsed .nav .grp { font-size: 0; padding: 6px; }
  .side-scrim { display: none; }

  /* sidebar */
  .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
          background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; }
  .brand { display: flex; align-items: center; gap: 12px; padding: 24px 20px; }
  .logo { width: 36px; height: 36px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; flex: none; box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 22%, transparent); }
  .brand b { font-size: 18px; letter-spacing: -.3px; }
  .brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
  .nav { padding: 0 12px 24px; display: grid; gap: 4px; }
  .nav .grp { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; padding: 24px 12px 8px; }
  .nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--text-2); position: relative; }
  .nav a svg { width: 18px; height: 18px; flex: none; }
  .nav a:hover { background: var(--hover); color: var(--text-1); }
  .nav a.active { background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; }
  .nav a.active::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .nav .count { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: 6px; text-align: center; font-size: 11px; color: var(--muted); background: var(--grid); font-weight: 500; }
  .nav .count:empty { display: none; }
  .side-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
  .side-foot .row { display: flex; align-items: center; gap: 6px; }
  .side-foot svg { width: 13px; height: 13px; }

  /* top bar */
  .main { min-width: 0; }
  .topbar { position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center; gap: 12px;
            padding: 0 32px; background: color-mix(in srgb, var(--surface) 95%, transparent);
            backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .topbar h1 { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: -.3px; }
  .topbar .crumb { color: var(--muted); font-size: 12px; padding-left: 16px; border-left: 1px solid var(--border); }
  .topbar .spacer { flex: 1; }
  .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
              background: transparent; color: var(--text-2); cursor: pointer; flex: none; }
  .icon-btn:hover { color: var(--text-1); background: var(--hover); }
  .icon-btn svg { width: 17px; height: 17px; }
  .avatar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
  .avatar i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-weak); color: var(--accent-ink);
              display: grid; place-items: center; font-style: normal; font-weight: 600; }

  .content { padding: 24px 32px 32px; min-width: 0; container-type: inline-size; max-width: 1800px; margin-inline: auto; }
  .proto { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; margin-bottom: 12px; border-radius: 8px;
           border: 1px solid var(--border); color: var(--text-2); font-size: 12px; background: var(--surface); }
  .proto > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
  .proto .grow { flex: 1; }
  .proto summary { cursor: pointer; }
  .proto details p { margin: 6px 0 0; }
  section.page { display: none; }
  section.page.on { display: block; }

  /* layout */
  .grid { display: grid; gap: var(--space-4); align-items: start; }
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; min-width: 0; }
  .workspace-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .workspace-columns.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-main-side { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .mt { margin-top: 24px; }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
  .card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 0; }
  .card-h h3 { margin: 0; font-size: 15px; font-weight: 650; }
  .card-h p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
  .card-h .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  .card-b { padding: 16px 24px 24px; }
  .card-b.flush { padding: 16px 0 0; border-radius: 0 0 12px 12px; }
  .card > .card-b.flush:first-child { padding-top: 0; border-radius: 12px; }
  .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .toolbar .spacer { flex: 1; }
  .hint { color: var(--muted); font-size: 12.5px; }

  /* stat tiles */
  .tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
  .tile { padding: 20px 24px; height: 100%; min-height: 132px; display: flex; flex-direction: column; }
  .tile .label { color: var(--text-2); font-size: 12px; font-weight: 500; }
  .tile .value { font-size: 28px; font-weight: 650; letter-spacing: -.6px; line-height: 1.3; margin: 8px 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
  .tile .value svg { width: 20px; height: 20px; flex: none; }
  .tile .sub { color: var(--muted); font-size: 11px; margin-top: auto; }

  /* controls */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; cursor: pointer;
         border: 1px solid var(--border); background: var(--raised); color: var(--text-1); font: inherit; font-size: 13px; white-space: nowrap; }
  .btn:hover { background: var(--hover); }
  .btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
  .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #102044); }
  .btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 24%, var(--border)); }
  .btn.danger:hover { background: var(--err-weak); }
  .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
  .btn.sm { height: 32px; padding: 0 12px; font-size: 12px; }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }
  .btn svg { width: 15px; height: 15px; }
  .linkbtn { border: 0; background: none; color: var(--accent-ink); cursor: pointer; font: inherit; font-size: 13px; padding: 0; white-space: nowrap; }
  .seg { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--border); background: var(--page); }
  .seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 7px; cursor: pointer; }
  .seg button.on { background: var(--raised); color: var(--text-1); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
  .inp { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--axis);
         background: var(--raised); color: var(--text-1); font: inherit; font-size: 13px; min-width: 0; width: 100%; }
  .toolbar .inp { width: min(320px, 100%); }
  textarea.inp { height: auto; padding: 8px 10px; resize: vertical; }
  .inp:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
  .inp::placeholder { color: var(--muted); opacity: .8; }
  .inp:disabled { background: var(--inset); color: var(--muted); cursor: not-allowed; }
  .field { display: grid; gap: 8px; align-content: start; min-width: 0; }
  .field > span { font-size: 12px; color: var(--text-2); font-weight: 500; }
  .field > em { font-style: normal; font-size: 12px; color: var(--muted); }
  .field.bad .inp { border-color: var(--err); background: var(--err-weak); }
  .err { color: var(--err); font-size: 12px; }
  .err:empty { display: none; }
  .form { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .form .full { grid-column: 1 / -1; }
  .form .opt { padding: 2px 0; border-bottom: 0; gap: 10px; min-height: 30px; }
  .form .sec { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 13px;
               border-top: 1px solid var(--border); padding-top: 16px; margin-top: 8px; }
  .form .sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .form .sec small { font-weight: 400; font-size: 12px; color: var(--muted); }
  .form .adv-row { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
  .advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .advanced-groups { columns: 2; column-gap: 10px; }
  .advanced-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
  .advanced-toolbar .inp { flex: 1; }
  .form-group { border: 1px solid var(--border); border-radius: 8px; min-width: 0; overflow: hidden; break-inside: avoid-column; margin-bottom: 10px; }
  .form-group > summary { display: flex; align-items: center; gap: 7px; padding: 9px 10px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
  .form-group > summary::-webkit-details-marker { display: none; }
  .form-group > summary::before { content: '›'; color: var(--muted); font-size: 16px; line-height: 1; }
  .form-group[open] > summary::before { transform: rotate(90deg); }
  .form-group > summary small { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
  .form-group[open] > summary { border-bottom: 1px solid var(--border); background: var(--hover); }
  .form-group > .form { padding: 10px; grid-template-columns: minmax(0, 1fr); }
  .form-group .group-hint { margin: 0; grid-column: 1 / -1; }
  .advanced-empty { grid-column: 1 / -1; color: var(--muted); padding: 8px 0; }
  .menu { position: fixed; z-index: 70; min-width: 168px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; display: grid; padding: 4px; border-radius: 9px;
          background: var(--raised); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
  .menu button { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 13px;
                 color: var(--text-1); cursor: pointer; white-space: nowrap; }
  .menu button:hover { background: var(--hover); }
  .menu button.danger { color: var(--err); border-top: 1px solid var(--border); margin-top: 3px; border-radius: 0 0 6px 6px; }
  .menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
  .menu button[disabled] { opacity: .45; cursor: not-allowed; }
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
  .tabs button { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
                 border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs button.on { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
  .kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; }
  .kvs div span { display: block; color: var(--muted); font-size: 12px; }
  .kvs div b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .checks { display: flex; gap: 6px 16px; flex-wrap: wrap; }
  .tg { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
  .tg input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; }
  .tg span { position: absolute; inset: 0; border-radius: 999px; background: var(--axis); transition: .15s; cursor: pointer; }
  .tg span::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
  .tg input:checked + span { background: var(--accent); }
  .tg input:checked + span::before { transform: translateX(14px); }
  .tg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
  .opt:last-child { border-bottom: 0; }
  .opt b { font-weight: 500; display: block; }
  .opt small { color: var(--muted); font-size: 12.5px; display: block; }
  .chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-1); cursor: pointer; }
  .chk input { accent-color: var(--accent); width: 15px; height: 15px; }

  /* tables */
  .tbl-wrap { overflow: auto; max-height: 640px; max-height: min(640px, 70dvh); scrollbar-color: var(--axis) transparent; }
  table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  th { text-align: left; font-weight: 600; color: var(--text-2); padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 11px; background: var(--inset); position: sticky; top: 0; z-index: 2; }
  td { padding: 16px; border-bottom: 1px solid var(--grid); vertical-align: middle; line-height: 1.6; }
  tr:last-child td { border-bottom: 0; }
  tbody tr:hover td { background: var(--hover); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  td.empty { text-align: center; color: var(--muted); padding: 48px 24px; background: var(--surface); }
  td.empty::before { content: ''; display: block; width: 32px; height: 24px; margin: 0 auto 16px; border: 2px solid var(--axis); border-radius: 6px; background: linear-gradient(var(--axis),var(--axis)) center 8px / 14px 2px no-repeat, linear-gradient(var(--axis),var(--axis)) center 14px / 8px 2px no-repeat; }
  td .main-t { font-weight: 500; white-space: nowrap; }
  td .sub-t { color: var(--muted); font-size: 12px; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td.meter-cell { width: 120px; }
  .mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
  .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
  .data-table .actions { flex-wrap: nowrap; gap: 4px; }
  .data-table.has-actions th:last-child { width: 1%; }
  .data-table.has-actions th:last-child, .data-table.has-actions td:last-child { position: sticky; right: 0; background: var(--surface); border-left: 1px solid var(--border); }
  .data-table.has-actions tbody tr:hover td:last-child { background: var(--raised); }
  .data-table.has-actions th:last-child { z-index: 3; background: var(--inset); }
  .connection-cell { display: flex; align-items: center; gap: 7px; }
  .resource-meters { display: grid; gap: 4px; min-width: 108px; }
  .resource-meters > div { display: flex; align-items: center; gap: 5px; }
  .resource-meters small { width: 26px; color: var(--muted); font-size: 10px; flex: none; }
  .resource-meters .meter-row { flex: 1; }

  /* chips / status */
  .pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
          border: 1px solid var(--border); font-size: 12px; color: var(--text-2); background: var(--raised); white-space: nowrap; }
  .pill.solid { background: var(--accent); color: #fff; border-color: transparent; }
  .st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-1); }
  .st svg { width: 15px; height: 15px; flex: none; }
  .st.small { font-size: 12.5px; }
  .st.small svg { width: 13px; height: 13px; }
  .node-chips { display: flex; gap: 4px 10px; flex-wrap: wrap; }
  .type { display: inline-block; min-width: 58px; text-align: center; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
          background: var(--page); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
  .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent-weak); border-top-color: var(--accent); animation: sp .8s linear infinite; flex: none; display: inline-block; }
  .pend { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid var(--axis); flex: none; display: inline-block; }
  @keyframes sp { to { transform: rotate(360deg); } }

  /* meters */
  .meter { height: 6px; border-radius: 3px; background: var(--accent-weak); overflow: hidden; }
  .meter > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
  .meter-row { display: grid; grid-template-columns: 44px 1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }
  .meter-row.compact { grid-template-columns: 1fr 36px; }
  .meter-row b { font-weight: 500; text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; }
  .usage { min-width: 130px; }
  .usage .meter { margin-top: 5px; }

  /* node cards */
  .node-card { padding: 16px; display: grid; gap: 12px; align-content: start; }
  .node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .node-head b { font-size: 16px; }
  .node-head .st { margin-left: auto; }
  .node-sub { color: var(--muted); font-size: 12.5px; margin-top: -8px; }
  .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .kv div span { display: block; color: var(--muted); font-size: 12px; }
  .kv div b { font-size: 17px; font-weight: 600; }
  .kv div b small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 2px; }
  .node-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-2);
               border-top: 1px solid var(--grid); padding-top: 10px; }
  .add-card { border-style: dashed; box-shadow: none; display: grid; place-items: center; text-align: center; min-height: 220px; padding: 20px; color: var(--text-2); }
  .add-card .plus { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed var(--axis); display: grid; place-items: center; margin: 0 auto 10px; color: var(--muted); }
  .add-card .plus svg { width: 18px; height: 18px; }

  /* events */
  .events { list-style: none; margin: 0; padding: 0; }
  .events li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--grid); }
  .events li:last-child { border-bottom: 0; }
  .events svg { width: 16px; height: 16px; margin-top: 2px; }
  .events time { display: block; color: var(--muted); font-size: 12px; }
  .events p { margin: 0; font-size: 13px; }

  /* chart */
  .legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-2); padding: 4px 16px 0; }
  .lk { display: inline-block; width: 16px; height: 2px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
  .sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--band); }
  .chart-host { position: relative; padding: 0 8px 4px; }
  .chart-host svg { display: block; width: 100%; outline: none; }
  .chart-host svg:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
  .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
  .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
  .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
  .band { fill: var(--band); }
  .ser { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .ser.a { stroke: var(--s1); }
  .ser.b { stroke: var(--s2); }
  .dot-a { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
  .dot-b { fill: var(--s2); stroke: var(--surface); stroke-width: 2; }
  .end-label { fill: var(--text-2); font-size: 12px; }
  .end-label .v { fill: var(--text-1); font-weight: 600; }
  .evt-line { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
  .evt-badge { fill: var(--surface); stroke: var(--axis); stroke-width: 1; }
  .evt-num { fill: var(--text-2); font-size: 10.5px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
  .xhair { stroke: var(--text-2); stroke-width: 1; shape-rendering: crispEdges; }
  .tip { position: absolute; pointer-events: none; z-index: 5; min-width: 168px; padding: 9px 11px; border-radius: 9px;
         background: var(--raised); border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.14); font-size: 12.5px; display: none; }
  .tip .t { color: var(--muted); margin-bottom: 4px; }
  .tip .r { display: flex; align-items: center; gap: 8px; line-height: 1.8; }
  .tip .r b { font-variant-numeric: tabular-nums; min-width: 72px; }
  .tip .r span { color: var(--text-2); }
  .tip .n { color: var(--muted); border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 4px; }
  .evt-notes { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 16px 14px; color: var(--text-2); font-size: 12.5px; }
  .evt-notes span b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--axis);
                      font-size: 10.5px; margin-right: 6px; color: var(--text-2); }
  .table-view { max-height: 330px; overflow: auto; margin: 6px 16px 14px; border: 1px solid var(--border); border-radius: 8px; display: none; }
  .table-view th { position: sticky; top: 0; background: var(--surface); }

  /* misc blocks */
  .code { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, "Cascadia Mono", monospace; font-size: 12.5px; line-height: 1.6;
          background: var(--page); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; white-space: pre; overflow: auto; color: var(--text-1); }
  .callout { display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-2); }
  .callout > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
  .callout b { color: var(--text-1); font-weight: 600; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
  .steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .steps li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
                      font-size: 12px; font-weight: 600; background: var(--accent-weak); color: var(--accent-ink); }
  .steps li p { margin: 2px 0 6px; }
  .stepper { display: flex; flex-wrap: wrap; }
  .stepper div { flex: 1 1 120px; padding: 10px 12px 10px 0; font-size: 12.5px; color: var(--text-2); }
  .stepper div b { display: flex; align-items: center; gap: 6px; color: var(--text-1); font-weight: 500; margin-bottom: 2px; }
  .stepper div b i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px;
                     background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; flex: none; }
  .steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .steplist li { display: flex; gap: 10px; align-items: center; }
  .steplist li svg { width: 16px; height: 16px; flex: none; }
  .steplist li .spin { width: 15px; height: 15px; }
  .split { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .big-entry { font-size: 30px; font-weight: 600; line-height: 1.2; }
  .muted { color: var(--muted); }
  .t2 { color: var(--text-2); }
  .good-text { color: var(--good-text); }

  /* modal & toast */
  .modal-bg { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 50; padding: 24px; }
  .modal { width: min(600px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
           border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .modal.wide { width: min(780px, 100%); }
  .modal:has(.advanced-fields:not([hidden])) { width: min(900px, 100%); }
  .modal-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); flex: none; }
  .modal-h h3 { margin: 0; font-size: 17px; font-weight: 650; }
  .modal-b { padding: 24px; display: grid; gap: 16px; overflow: auto; overscroll-behavior: contain; min-height: 0; }
  .modal-b > p { margin: 0; }
  .modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; flex-wrap: wrap; border-top: 1px solid var(--border); flex: none; background: var(--inset); border-radius: 0 0 14px 14px; }
  .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; transition: .2s; z-index: 80;
           background: var(--text-1); color: var(--surface); padding: 12px 20px; border-radius: 12px; box-shadow: 0 8px 32px var(--overlay); font-size: 13px; pointer-events: none; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
  .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

  @container (max-width: 760px) {
    .workspace-columns, .workspace-columns.equal, .cols-main-side { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 1280px) {
    .toolbar > .hint, .topbar .crumb { display: none; }
  }
  @media (max-width: 1100px) {
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topbar > .hint { display: none; }
  }
  @media (max-width: 760px) {
    .app, .app.nav-collapsed { grid-template-columns: minmax(0, 1fr); }
    .side { position: fixed; left: 0; top: 0; width: min(280px, calc(100vw - 48px)); height: 100dvh; z-index: 45; transform: translateX(-100%); transition: transform .18s ease; }
    .app.nav-open .side { transform: translateX(0); }
    .app.nav-open .side-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); border: 0; z-index: 44; }
    body.nav-open { overflow: hidden; }
    .nav-collapsed .nav-label, .nav-collapsed .count, .nav-collapsed .brand > div:last-child { display: block; }
    .nav-collapsed .side-foot { display: block; }
    .nav-collapsed .brand { padding: 14px; justify-content: flex-start; }
    .nav-collapsed .nav a { justify-content: flex-start; padding: 8px 10px; }
    .nav-collapsed .nav .grp { font-size: 11.5px; padding: 12px 10px 4px; }
    .content { padding: 16px 16px 24px; }
    .topbar { padding: 0 12px; height: 64px; gap: 8px; }
    .avatar { margin-left: auto; }
    .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proto .linkbtn { font-size: 12px; }
    .proto .summary-note { display: none; }
    .toolbar .inp { max-width: 100%; }
    .seg { max-width: 100%; overflow-x: auto; flex: 1 1 auto; }
    .seg button { white-space: nowrap; padding: 4px 9px; }
  }
  @media (max-width: 600px) {
    .form, .advanced-fields { grid-template-columns: minmax(0, 1fr); }
    .advanced-groups { columns: 1; }
    .modal-bg { padding: 8px; }
    .modal { max-height: calc(100dvh - 16px); border-radius: 10px; }
    .modal-b { padding: 16px; }
    .modal-h, .modal-f { padding: 12px 16px; }
    .advanced-toolbar { flex-wrap: wrap; }
    .advanced-toolbar .inp { flex-basis: 100%; }
    .card-h { flex-wrap: wrap; }
    .card-h .right { margin-left: auto; }
  }

  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; align-items: stretch; }
  .page > .card, .page > div:not(.grid):not(.workspace-columns):not(.stack) > .card { margin-bottom: 16px; }
  .page > .workspace-columns + * { margin-top: 24px; }
  .page > .grid + .card { margin-top: 24px; }
  #login-root:not([hidden]) { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(ellipse at 50% 10%, var(--accent-weak), transparent 65%), var(--page); }
  .login-card { width: min(420px, 100%); padding: 32px; border-radius: 16px; box-shadow: 0 16px 64px color-mix(in srgb, var(--text-1) 7%, transparent); }
  .login-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--on-accent); background: var(--accent); margin-bottom: 24px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent); }
  .login-mark svg { width: 28px; height: 28px; }
  .login-card h1 { font-size: 28px; font-weight: 650; letter-spacing: -.8px; margin: 0; }
  .login-card .hint { margin: 8px 0 24px; font-size: 13px; }
  .login-card .field { display: grid; margin: 16px 0; }
  .login-card .inp, .login-card .btn { height: 44px; }
  .login-card .btn { width: 100%; justify-content: center; }
  .metric-chart { display: block; width: 100%; height: 180px; overflow: visible; }
  .chart-legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-2); font-size: 11px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid); }
  .chart-legend > span { display: inline-flex; align-items: center; gap: 8px; }
  .chart-key { width: 8px; height: 8px; border-radius: 50%; background: var(--series); flex: none; }
  .metric-series { stroke: var(--series); }
  .chart-empty { min-height: 180px; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; background: var(--inset); }
  .chart-empty > svg { width: 32px; height: 32px; color: var(--axis); }
  .result-code { max-height: 55vh; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
  .target-text { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  #connection-error { margin-bottom: 12px; }
  #connection-error { color: var(--err); background: var(--err-weak); border-color: color-mix(in srgb, var(--err) 20%, var(--border)); }
  #bootstrap-password-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 20px; margin-bottom: 24px; background: var(--accent-weak); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); box-shadow: none; }
  #bootstrap-password-banner p { flex: 1 1 360px; margin: 0; color: var(--accent-ink); font-size: 12px; line-height: 1.8; }
  #bootstrap-password-banner .btn { height: 32px; font-size: 12px; padding-inline: 12px; }
  #account-name { display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--border); color: var(--text-2); font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #account-name::before { content: ''; width: 24px; height: 24px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 35%, var(--accent-ink) 3px, transparent 3.5px), radial-gradient(ellipse at 50% 100%, var(--accent-ink) 7px, transparent 7.5px), var(--accent-weak); }
  #refresh-hint { font-size: 11px; }
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  :where(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
  :where(button, a) { transition: background-color .15s, border-color .15s, color .15s; }
  .st.status-good { color: var(--good-text); }
  .st.status-warn { color: var(--warn); }
  .st.status-crit, .st.status-serious { color: var(--err); }
  .st.status-off, .st.status-info { color: var(--muted); }
  .st.status-swap { color: var(--accent-ink); }
  td .pill { margin-right: 8px; font-size: 11px; background: var(--inset); }
  td .st { margin-block: 2px; }
  .tile .label { display: flex; align-items: center; gap: 8px; }
  .tile .label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .tile:first-child .label::before { background: var(--good-text); }
  .tile:nth-child(3) .label::before { background: var(--warn); }
  .callout { background: var(--inset); padding: 16px; border-radius: 8px; line-height: 1.8; }
  .code { background: var(--inset); font-size: 12px; border-radius: 8px; }
  .menu { padding: 8px; box-shadow: 0 8px 32px var(--overlay); }
  .menu button { min-height: 36px; }
  .form .adv-row { margin-top: 8px; padding-top: 16px; }
  .form-group { margin-bottom: 12px; }
  .form-group > summary { padding: 12px; }
  .advanced-fields { gap: 16px; }
  .seg { padding: 4px; }
  .seg button { min-height: 32px; }
  .result-code { line-height: 1.8; }
  @media (max-width: 1000px) { .cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 760px) {
    .workspace-columns, .workspace-columns.equal { grid-template-columns: minmax(0,1fr); }
    #account-name, #refresh-hint { display: none; }
    .cols-4 { gap: 12px; margin-bottom: 16px; }
    .tile { padding: 16px; min-height: 124px; }
    .tile .value { font-size: 24px; }
    .topbar .spacer { min-width: 0; }
    .card-h { padding: 16px 16px 0; }
    .card-b { padding: 16px; }
    .card-b.flush { padding-inline: 0; }
    .metric-chart { height: 160px; }
    .mt { margin-top: 16px; }
    .grid { gap: 16px; }
    .toolbar { gap: 8px; }
    .toolbar .inp { flex: 1 1 160px; width: 100%; }
    #bootstrap-password-banner { padding: 16px; margin-bottom: 16px; }
    #bootstrap-password-banner p { flex-basis: 100%; }
    .data-table.has-actions th:last-child, .data-table.has-actions td:last-child { position: static; }
    .btn.sm { min-height: 36px; }
    .icon-btn { width: 40px; height: 40px; }
    .nav-collapsed .brand { padding: 24px 20px; }
    .nav-collapsed .nav a { padding: 8px 12px; }
    .nav-collapsed .nav .grp { font-size: 11px; padding: 24px 12px 8px; }
    .login-card { padding: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }