@zhhoceanfly/protoview 0.0.0-stage → 0.1.4

package/public/styles.css

@@ -0,0 +1,1568 @@
+:root, [data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0e1116;
+  --panel: #151a21;
+  --panel-2: #1b222c;
+  --border: #2c3542;
+  --text: #e8eef7;
+  --muted: #8b98a8;
+  --accent: #3b82f6;
+  --accent-2: #22d3ee;
+  --hover: color-mix(in srgb, var(--accent) 14%, transparent);
+  --active: color-mix(in srgb, var(--accent) 24%, transparent);
+  --ok: #34d399;
+  --danger: #f87171;
+  --warn: #fbbf24;
+  --table-head: #1a2230;
+  --input: #0f141b;
+  --shadow: 0 10px 30px rgba(0,0,0,.35);
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --sans: "Segoe UI", system-ui, sans-serif;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --bg: #f4f6f9;
+  --panel: #ffffff;
+  --panel-2: #f8fafc;
+  --border: #d7dee8;
+  --text: #1f2937;
+  --muted: #6b7280;
+  --accent: #2563eb;
+  --accent-2: #ea580c;
+  --hover: color-mix(in srgb, var(--accent) 8%, transparent);
+  --active: color-mix(in srgb, var(--accent) 12%, transparent);
+  --ok: #059669;
+  --danger: #dc2626;
+  --warn: #d97706;
+  --table-head: #f1f5f9;
+  --input: #ffffff;
+  --shadow: 0 10px 28px rgba(15,23,42,.08);
+}
+
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.45 var(--sans);
+}
+button, input, select, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; }
+button:disabled { opacity: .45; cursor: not-allowed; }
+
+#app {
+  --sidebar-w: 260px;
+  --rail-w: 22px;
+  display: grid;
+  grid-template-columns: var(--sidebar-w) var(--rail-w) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+#app > .sidebar {
+  grid-column: 1;
+  grid-row: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+#app > .sidebar-rail {
+  grid-column: 2;
+  grid-row: 1;
+}
+#app > .main {
+  grid-column: 3;
+  grid-row: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* 收起：侧栏宽度归零，轨道按钮始终占一列，右侧自适应 */
+#app.sidebar-collapsed {
+  --sidebar-w: 0px;
+}
+#app.sidebar-collapsed .sidebar {
+  visibility: hidden;
+  pointer-events: none;
+  border-right: 0;
+}
+
+.sidebar {
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.sidebar-rail {
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--panel-2);
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.sidebar-rail:hover {
+  color: var(--text);
+  background: var(--hover);
+  border-color: var(--accent);
+}
+.side-head {
+  padding: 12px 12px 8px;
+  border-bottom: 1px solid var(--border);
+  display: grid;
+  gap: 8px;
+}
+.brand-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+.brand {
+  font-weight: 700;
+  font-size: 14px;
+  letter-spacing: .02em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.brand span { color: var(--accent-2); }
+.icon-btn {
+  width: 30px; height: 30px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-btn:hover { border-color: var(--accent); }
+.side-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.side-meta-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+.side-meta { color: var(--muted); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.side-source-btn,
+.side-flow-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  box-sizing: border-box;
+  font-size: 11px;
+}
+.side-source-btn {
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 6px;
+}
+.side-flow-btn {
+  height: 26px;
+  padding: 0 10px;
+}
+.source-mode-row {
+  display: grid;
+  gap: 8px;
+  margin: 10px 0 12px;
+}
+.source-mode-opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-2);
+  cursor: pointer;
+}
+.source-mode-opt:has(input:checked) {
+  border-color: var(--accent);
+}
+.source-git-fields {
+  display: grid;
+  gap: 10px;
+}
+.source-dir-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.source-dir-row input { flex: 1; min-width: 0; }
+.source-dir-row .btn {
+  flex: 0 0 auto;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+}
+.side-flow-btn.primary {
+  background: linear-gradient(120deg, #2563eb, #0891b2);
+  border-color: transparent;
+  color: #fff;
+  font-weight: 650;
+  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
+  animation: sideFlowPulse 2.4s ease-in-out infinite;
+}
+[data-theme="light"] .side-flow-btn.primary {
+  background: linear-gradient(120deg, #2563eb, #ea580c);
+  box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4);
+}
+@keyframes sideFlowPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); transform: translateY(0); }
+  50% { box-shadow: 0 0 10px 2px rgba(37, 99, 235, 0.28); transform: translateY(-0.5px); }
+}
+.hidden { display: none !important; }
+.main.hidden, .flow-main.hidden { display: none !important; }
+.flow-topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+}
+.flow-hint { color: var(--muted); font-size: 12px; min-width: 0; }
+.http-path { flex: 0 1 180px; min-width: 120px; font-family: var(--mono); }
+.flow-node-transport {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: end;
+}
+.flow-node-transport label {
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+  min-width: 110px;
+}
+.flow-node-transport select,
+.flow-node-transport input {
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 7px 10px;
+  color: var(--text);
+}
+.flow-drawer-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: none;
+  justify-content: flex-end;
+  background: rgba(15, 23, 42, 0.28);
+}
+.flow-drawer-mask.show { display: flex; }
+.flow-drawer {
+  width: min(360px, 92%);
+  height: 100%;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  animation: flowDrawerIn 0.22s ease forwards;
+}
+@keyframes flowDrawerIn {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.flow-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+.flow-drawer-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+.flow-drawer-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.flow-stage {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 35%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
+    var(--bg);
+  cursor: grab;
+}
+.flow-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 0;
+  pointer-events: none;
+  color: var(--muted);
+  font-size: 14px;
+  letter-spacing: 0.02em;
+}
+.flow-empty.hidden { display: none !important; }
+.flow-world, .flow-edges {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4000px;
+  height: 3000px;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+.flow-edges { z-index: 1; }
+.flow-world { z-index: 2; pointer-events: none; }
+.flow-stage.drop-target {
+  outline: 2px dashed var(--accent);
+  outline-offset: -4px;
+  background:
+    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 55%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
+    color-mix(in srgb, var(--accent) 6%, var(--bg));
+}
+.flow-drag-ghost {
+  position: fixed;
+  z-index: 80;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--accent);
+  background: var(--panel);
+  color: var(--text);
+  font-size: 12px;
+  box-shadow: var(--shadow);
+  opacity: 0.95;
+}
+.flow-drag-ghost .flow-node-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
+  color: var(--accent);
+}
+.flow-node {
+  position: absolute;
+  width: 200px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  pointer-events: auto;
+  user-select: none;
+}
+.flow-node.ok { border-color: var(--ok); }
+.flow-node.fail { border-color: var(--danger); }
+.flow-node-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 10px 4px;
+  cursor: move;
+}
+.flow-node-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
+  color: var(--accent);
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+.flow-node-text { min-width: 0; }
+.flow-node-text strong {
+  display: block;
+  font-size: 13px;
+  line-height: 1.3;
+  word-break: break-all;
+}
+.flow-node-text span {
+  display: block;
+  color: var(--muted);
+  font-size: 10px;
+  font-family: var(--mono);
+  margin-top: 2px;
+  word-break: break-all;
+}
+.flow-node-result {
+  margin: 0 10px 10px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-family: var(--mono);
+  background: var(--panel-2);
+  color: var(--muted);
+}
+.flow-node-result.ok { color: var(--ok); }
+.flow-node-result.fail { color: var(--danger); }
+.flow-port {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--panel);
+  top: 30px;
+  cursor: crosshair;
+  pointer-events: auto;
+}
+.flow-port.in { left: -7px; }
+.flow-port.out { right: -7px; }
+.flow-edges { overflow: visible; }
+.flow-edge {
+  fill: none;
+  stroke: color-mix(in srgb, var(--muted) 70%, transparent);
+  stroke-width: 2.5;
+  pointer-events: stroke;
+}
+.flow-edge.ok { stroke: var(--ok); }
+.flow-edge.fail { stroke: var(--danger); }
+.flow-menu {
+  position: fixed;
+  z-index: 40;
+  min-width: 120px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  padding: 4px;
+}
+.flow-menu.hidden { display: none !important; }
+.flow-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 8px 10px;
+  border-radius: 6px;
+}
+.flow-menu button:hover { background: var(--hover); }
+.modal.flow-edit-modal {
+  width: min(720px, 94vw);
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.modal.flow-edit-modal .modal-head,
+.modal.flow-edit-modal .modal-foot {
+  flex: 0 0 auto;
+}
+.modal.flow-edit-modal .modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.flow-edit-h { margin: 14px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.flow-edit-h-sub {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+  margin-left: 6px;
+  opacity: .85;
+}
+.flow-edit-table { margin-bottom: 8px; }
+.flow-extract-tree {
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+.flow-extract-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+}
+.flow-extract-row .flow-extract-path {
+  font-family: var(--mono);
+  font-size: 11px;
+  word-break: break-all;
+}
+.flow-extract-row .flow-extract-type {
+  display: block;
+  color: var(--muted);
+  font-size: 10px;
+  margin-top: 2px;
+}
+.flow-extract-row input {
+  width: 100%;
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 6px 8px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.flow-extract-msg {
+  display: grid;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.flow-extract-msg-head {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.flow-extract-msg-head strong { font-size: 12px; }
+.flow-extract-msg-head span {
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--accent);
+}
+.flow-extract-children {
+  display: grid;
+  gap: 6px;
+  margin-left: 10px;
+  padding-left: 10px;
+  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+.flow-history-modal {
+  width: min(880px, 96vw);
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.flow-history-modal .modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+.flow-history-layout {
+  display: grid !important;
+  grid-template-columns: minmax(200px, 260px) 1fr;
+  gap: 12px;
+  height: min(60vh, 520px);
+  padding: 12px 14px !important;
+}
+.flow-history-list {
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-2);
+}
+.flow-history-item {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+.flow-history-item:hover { background: var(--hover); }
+.flow-history-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
+.flow-history-item .h-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.flow-history-item .h-top.ok { color: var(--ok); }
+.flow-history-item .h-top.fail { color: var(--danger); }
+.flow-history-item .h-meta {
+  color: var(--muted);
+  font-size: 10px;
+  font-family: var(--mono);
+}
+.flow-history-detail {
+  margin: 0;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-2);
+  padding: 12px;
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.flow-msg-tree {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+.flow-msg-empty { color: var(--muted); padding: 8px 0; }
+.flow-msg-field {
+  display: grid;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.flow-msg-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.flow-msg-name { font-weight: 600; font-size: 12px; }
+.flow-msg-type {
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--accent);
+}
+.flow-msg-type.rep { color: var(--warn, #d97706); }
+.flow-msg-comment { color: var(--muted); font-size: 11px; margin-left: auto; }
+.flow-msg-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+.flow-msg-row input,
+.flow-msg-row textarea,
+.flow-msg-row select {
+  width: 100%;
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 7px 10px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.flow-msg-row textarea { min-height: 64px; resize: vertical; }
+.flow-msg-children {
+  display: grid;
+  gap: 8px;
+  margin-left: 10px;
+  padding-left: 10px;
+  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+.flow-msg-rep-item {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
+}
+.flow-msg-rep-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.flow-msg-rep-bar strong { font-size: 12px; }
+.flow-msg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.flow-confirm-mask { z-index: 60; }
+.flow-confirm-modal { width: min(360px, 92vw); }
+.stress-path { flex: 1 1 100%; }
+.stress-path .source-dir-row { max-width: min(560px, 100%); }
+.stress-path .source-dir-row input { width: 100%; flex: 1; }
+.side-tools {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+.side-search {
+  width: 100%;
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--input);
+  outline: none;
+}
+.side-search:focus { border-color: var(--accent); }
+
+.tree {
+  overflow: auto;
+  padding: 8px;
+  min-height: 0;
+  flex: 1;
+}
+.node {
+  user-select: none;
+}
+.node-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  border-radius: 8px;
+  padding: 5px 8px;
+  color: var(--text);
+}
+.node-row:hover { background: var(--hover); }
+.node-row.active {
+  background: var(--active);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+.caret {
+  width: 14px;
+  color: var(--muted);
+  flex: 0 0 14px;
+  font-size: 10px;
+}
+.kind {
+  width: 16px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 11px;
+  flex: 0 0 16px;
+}
+.label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.count { color: var(--muted); font-size: 11px; }
+.children { margin-left: 12px; border-left: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); padding-left: 4px; }
+.children.collapsed { display: none; }
+.rpc-desc {
+  margin: 0 0 4px 36px;
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.empty-side { padding: 18px 10px; color: var(--muted); }
+
+.main {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  background: var(--bg);
+}
+/* Must override .main — otherwise 4-row grid collapses the canvas to 0 height */
+.main.flow-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  grid-template-rows: none;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+}
+.main.flow-main.hidden {
+  display: none !important;
+}
+.topbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+  flex-wrap: wrap;
+}
+.pill {
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 7px 10px;
+}
+.addr { flex: 1 1 140px; font-family: var(--mono); min-width: 100px; }
+.method {
+  flex: 1 1 140px;
+  font-family: var(--mono);
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 96px;
+}
+.btn {
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  border-radius: 8px;
+  padding: 7px 12px;
+}
+.btn:hover { border-color: var(--accent); }
+.btn.primary {
+  background: linear-gradient(120deg, #2563eb, #0891b2);
+  border-color: transparent;
+  color: #fff;
+  font-weight: 600;
+}
+[data-theme="light"] .btn.primary {
+  background: linear-gradient(120deg, #2563eb, #ea580c);
+}
+
+.tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.tab {
+  border: 0;
+  background: transparent;
+  padding: 10px 12px;
+  color: var(--muted);
+  border-bottom: 2px solid transparent;
+}
+.tab.active {
+  color: var(--text);
+  border-bottom-color: var(--accent-2);
+  font-weight: 600;
+}
+.tab .dirty { color: var(--accent-2); }
+
+.toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-2);
+  min-height: 42px;
+}
+.toolbar .spacer { flex: 1; }
+.toolbar .hint { color: var(--muted); font-size: 12px; }
+
+.workspace {
+  display: grid;
+  grid-template-rows: minmax(80px, var(--req-size)) 18px minmax(72px, 1fr);
+  min-height: 0;
+  --req-size: 62%;
+}
+.workspace.req-collapsed {
+  grid-template-rows: 0 18px minmax(0, 1fr);
+}
+.workspace.resp-collapsed {
+  grid-template-rows: minmax(0, 1fr) 18px 0;
+}
+.workspace.req-collapsed > .request-pane {
+  overflow: hidden;
+  visibility: hidden;
+}
+.workspace.req-collapsed > .request-pane .pane-body { display: none; }
+.workspace.resp-collapsed > .response-pane {
+  overflow: hidden;
+  visibility: hidden;
+}
+.workspace.resp-collapsed > .response-pane .toolbar,
+.workspace.resp-collapsed > .response-pane .response { display: none; }
+.split-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-2);
+  user-select: none;
+  z-index: 2;
+}
+.split-grip {
+  width: 48px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--muted) 55%, transparent);
+  cursor: row-resize;
+}
+.split-bar:hover .split-grip,
+.workspace.splitting .split-grip {
+  background: var(--accent);
+}
+.workspace.splitting { cursor: row-resize; }
+.workspace.splitting * { cursor: row-resize !important; }
+.split-btn {
+  width: 22px;
+  height: 18px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1;
+  padding: 0;
+}
+.split-btn:hover { color: var(--text); background: var(--hover); }
+.workspace.req-collapsed #collapseReqBtn { transform: rotate(180deg); }
+.workspace.resp-collapsed #collapseRespBtn { transform: rotate(180deg); }
+.pane {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  position: relative;
+}
+.request-pane { border-bottom: 0; }
+.response-pane { border-top: 0; }
+.pane-body {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+.view {
+  position: absolute;
+  inset: 0;
+  display: none;
+  overflow: auto;
+}
+.view.active { display: flex; flex-direction: column; }
+
+.message-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+.rpc-info {
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  overflow: auto;
+  padding: 12px 12px 16px;
+  min-height: 0;
+}
+.rpc-info-empty { color: var(--muted); font-size: 12px; }
+.rpc-info-title {
+  margin: 0 0 4px;
+  font-size: 16px;
+  letter-spacing: -0.02em;
+}
+.rpc-info-lead { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.rpc-info-meta {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  word-break: break-all;
+}
+.rpc-info-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.rpc-info-chip {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  color: var(--muted);
+  background: var(--panel-2);
+}
+.rpc-info-chip.warn {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
+}
+.rpc-info-row {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 6px;
+  margin: 4px 0;
+  font-size: 12px;
+}
+.rpc-info-row span { color: var(--muted); }
+.rpc-info-row code { font-family: var(--mono); word-break: break-all; }
+.rpc-info-def {
+  margin-top: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--input);
+  overflow: hidden;
+}
+.rpc-info-def summary {
+  cursor: pointer;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--muted);
+  user-select: none;
+}
+.rpc-info-def pre {
+  margin: 0;
+  padding: 0 10px 10px;
+  max-height: 220px;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+textarea.editor {
+  flex: 1;
+  width: 100%;
+  border: 0;
+  resize: none;
+  padding: 12px 14px;
+  background: var(--bg);
+  font-family: var(--mono);
+  font-size: 12px;
+  outline: none;
+  min-height: 120px;
+  line-height: 1.55;
+}
+.message-layout .editor { height: 100%; min-height: 0; }
+.stress-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  min-height: 0;
+  padding: 12px 14px 16px;
+  overflow: auto;
+}
+.stress-head { display: grid; gap: 8px; }
+.stress-modes { display: flex; gap: 8px; }
+.stress-mode.active {
+  border-color: var(--accent);
+  color: var(--text);
+  background: var(--active);
+}
+.stress-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.stress-note code { font-family: var(--mono); }
+.stress-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: end;
+}
+.stress-form label {
+  display: grid;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.stress-form input {
+  width: 96px;
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 7px 8px;
+}
+.stress-progress-wrap { display: grid; gap: 6px; }
+.stress-progress-bar {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.stress-progress-bar i {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, #2563eb, #22d3ee);
+}
+.stress-progress-text { font-size: 12px; color: var(--muted); font-family: var(--mono); }
+.stress-cmd {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--input);
+  padding: 10px 12px;
+  font-family: var(--mono);
+  font-size: 12px;
+  resize: vertical;
+}
+.stress-result {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  padding: 12px;
+  min-height: 140px;
+}
+.stress-empty { color: var(--muted); font-size: 12px; }
+.stress-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.stress-stat {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: var(--panel-2);
+}
+.stress-stat b { display: block; font-size: 16px; font-family: var(--mono); }
+.stress-stat span { color: var(--muted); font-size: 11px; }
+.stress-samples {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  font-family: var(--mono);
+}
+.stress-samples th, .stress-samples td {
+  border-top: 1px solid var(--border);
+  padding: 6px 8px;
+  text-align: left;
+}
+.stress-samples th { color: var(--muted); font-size: 11px; border-top: 0; }
+.stress-ok { color: var(--ok); }
+.stress-fail { color: var(--danger); }
+.stress-ghz.hidden, .stress-light.hidden { display: none; }
+.stress-log {
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.45;
+}
+@media (max-width: 960px) {
+  .message-layout { grid-template-columns: 1fr; }
+  .rpc-info { border-right: 0; border-bottom: 1px solid var(--border); max-height: 180px; }
+}
+
+.meta-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+.meta-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.meta-table th, .meta-table td {
+  border-bottom: 1px solid var(--border);
+  padding: 0;
+  vertical-align: middle;
+}
+.meta-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--table-head);
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  text-align: left;
+  padding: 8px 10px;
+  font-weight: 600;
+}
+.meta-table td input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding: 9px 10px;
+  outline: none;
+}
+.meta-table tr:hover td { background: var(--hover); }
+.meta-table .col-name { width: 22%; }
+.meta-table .col-value { width: 38%; }
+.meta-table .col-desc { width: 32%; }
+.meta-table .col-act { width: 8%; text-align: center; }
+.meta-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+.link {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  padding: 0;
+}
+.link.danger { color: var(--danger); }
+
+.history {
+  padding: 14px;
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  color: var(--muted);
+}
+.auth-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  min-height: 0;
+  padding: 14px 16px 18px;
+  overflow: auto;
+}
+.auth-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+.auth-title {
+  font-size: 12px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 700;
+}
+.auth-note {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 520px;
+}
+.auth-type { min-width: 150px; }
+.auth-body {
+  display: grid;
+  gap: 10px;
+  max-width: 520px;
+}
+.auth-field {
+  display: grid;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.auth-field input {
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: var(--text);
+  font-family: var(--mono);
+}
+.auth-field input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.auth-hint {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+.auth-preview {
+  margin-top: auto;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px dashed var(--border);
+  background: var(--panel-2);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  word-break: break-all;
+}
+.response-pane { min-height: 0; }
+.resp-title {
+  font-size: 12px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.tls-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 12px;
+  user-select: none;
+}
+.response {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  color: var(--text);
+  background: var(--bg);
+}
+.resp-empty { padding: 12px 14px; color: var(--muted); }
+.resp-block { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
+.resp-line { font-family: var(--mono); font-size: 12px; color: var(--muted); }
+.resp-error {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: var(--danger);
+  white-space: pre-wrap;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.resp-json {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--input);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow: auto;
+}
+.resp-json .k { color: #7dd3fc; }
+.resp-json .s { color: #86efac; }
+.resp-json .n { color: #fdba74; }
+.resp-json .b { color: #c4b5fd; }
+[data-theme="light"] .resp-json .k { color: #0369a1; }
+[data-theme="light"] .resp-json .s { color: #047857; }
+[data-theme="light"] .resp-json .n { color: #c2410c; }
+[data-theme="light"] .resp-json .b { color: #6d28d9; }
+.resp-badge {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+}
+.resp-badge.ok { color: var(--ok); }
+.resp-badge.err { color: var(--danger); }
+.resp-badge.wait { color: var(--warn); }
+.docs { padding: 0; font-family: var(--sans); white-space: normal; color: var(--text); }
+.doc-page { padding: 18px 20px 28px; max-width: 980px; }
+.doc-crumbs { color: var(--muted); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
+.doc-title { margin: 6px 0 4px; font-size: 26px; letter-spacing: -0.03em; }
+.doc-lead { margin: 0 0 8px; color: var(--muted); }
+.doc-file { margin: 0 0 16px; color: var(--muted); font-size: 12px; font-family: var(--mono); }
+.doc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.doc-card {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
+}
+.doc-card h3 { margin: 0; padding: 12px 14px 4px; font-size: 14px; font-family: var(--mono); }
+.doc-kicker {
+  padding: 12px 14px 0;
+  font-size: 11px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.doc-card table { width: 100%; border-collapse: collapse; }
+.doc-card th, .doc-card td { padding: 8px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); font-size: 12px; }
+.doc-card th { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-top: 0; }
+.doc-num { color: var(--muted); font-family: var(--mono); width: 36px; }
+.doc-type, .doc-name { font-family: var(--mono); }
+.doc-comment { color: var(--muted); }
+.doc-empty { padding: 18px; color: var(--muted); }
+.doc-toolbar { margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.doc-link {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
+  font-family: var(--mono);
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.doc-link:hover { color: var(--text); }
+.doc-chip {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  font-size: 11px;
+}
+.doc-nested { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
+.doc-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  text-align: left;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: inherit;
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.doc-row:hover { border-color: var(--accent); }
+.ai-btn {
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, #7dd3fc 45%, transparent);
+  background: linear-gradient(120deg, #0f172a, #1d4ed8 45%, #0891b2);
+  color: #f8fafc;
+  animation: aiPulse 2.4s ease-in-out infinite;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ai-spark {
+  display: inline-block;
+  margin-right: 4px;
+  flex-shrink: 0;
+  animation: aiSpin 3.2s linear infinite;
+}
+@keyframes aiPulse {
+  0%, 100% { box-shadow: 0 0 0 0 transparent; }
+  50% { box-shadow: 0 0 14px 1px color-mix(in srgb, #38bdf8 45%, transparent); }
+}
+@keyframes aiSpin { to { transform: rotate(360deg); } }
+.ai-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: color-mix(in srgb, var(--bg) 92%, #000);
+  overflow: auto;
+}
+.ai-overlay.show { display: block; }
+.ai-page { max-width: 920px; margin: 0 auto; padding: 28px 22px 48px; }
+.ai-top, .ai-actions, .ai-stage { display: flex; gap: 12px; }
+.ai-top { justify-content: space-between; align-items: flex-start; }
+.ai-stage { margin-top: 18px; align-items: flex-start; }
+.ai-game, .ai-reward {
+  flex: 1;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 16px;
+  background: var(--panel);
+}
+.ai-poem { margin: 8px 0 0; line-height: 1.8; color: var(--muted); }
+.ai-heart { color: #fb7185; margin-left: 6px; }
+.ai-heart.burst { font-size: 42px; text-align: center; animation: heartBeat 1.1s ease-in-out infinite; }
+.ai-board { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 10px; margin: 14px 0; }
+.ai-tile {
+  aspect-ratio: 1;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, #38bdf8 35%, var(--border));
+  background: var(--bg);
+  color: inherit;
+  font-size: 22px;
+  font-weight: 650;
+  cursor: pointer;
+}
+.ai-tile.selected { border-color: #f472b6; box-shadow: 0 0 0 2px color-mix(in srgb, #f472b6 45%, transparent); }
+.ai-tile.done { border-color: #34d399; }
+.ai-reward { text-align: center; }
+.ai-reward.hidden, .ai-game.hidden { display: none; }
+.ai-qr { width: min(260px, 100%); border-radius: 14px; margin: 12px auto; display: block; }
+@keyframes heartBeat { 50% { transform: scale(1.12); } }
+@media (max-width: 860px) { .ai-stage { flex-direction: column; } }
+@media (max-width: 960px) { .doc-pair { grid-template-columns: 1fr; } }
+
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.45);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 20px;
+}
+.modal-mask.show { display: flex; }
+.modal {
+  width: min(560px, 100%);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 650;
+}
+.modal-body { padding: 14px; display: grid; gap: 10px; }
+.modal-body label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
+.modal-body input, .modal-body textarea {
+  border: 1px solid var(--border);
+  background: var(--input);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 14px;
+  border-top: 1px solid var(--border);
+}
+.env-list { display: grid; gap: 8px; }
+.env-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel-2);
+}
+.env-item strong { display: block; }
+.env-item span { color: var(--muted); font-size: 12px; font-family: var(--mono); }
+
+/* 窄宽不再上下堆叠侧栏；由 JS 自动收起，右侧自适应 */
+@media (max-width: 900px) {
+  #app { --sidebar-w: 220px; }
+  .side-meta-row { flex-wrap: wrap; }
+  .topbar { gap: 6px; padding: 8px; }
+  .pill { padding: 6px 8px; }
+  .tabs { overflow-x: auto; flex-wrap: nowrap; }
+  .tab { padding: 8px 10px; white-space: nowrap; }
+}
+@media (max-width: 560px), (max-height: 420px) {
+  .brand { font-size: 12px; }
+  .toolbar .hint { display: none; }
+}