* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "Microsoft YaHei", sans-serif;
  background: #1e1e1e;
  color: #d4d4d4;
  min-height: 100vh;
}
.page-header {
  background: #2d2d30;
  padding: 14px 24px;
  border-bottom: 1px solid #3e3e42;
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}
.page-header h1 { font-size: 16px; font-weight: 600; color: #fff; }
.page-header .actions { display: flex; gap: 8px; }
.btn { padding: 7px 16px; border: none; border-radius: 3px; cursor: pointer; font-size: 13px; transition: all .15s; }
.btn-primary { background: #0e639c; color: #fff; }
.btn-primary:hover { background: #1177bb; }
.btn-success { background: #097120; color: #fff; }
.btn-success:hover { background: #0a8025; }
.btn-default { background: #3e3e42; color: #ccc; border: 1px solid #4e4e52; }
.btn-default:hover { background: #4e4e52; color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.container { max-width: 1400px; margin: 80px auto 60px auto; padding: 0 20px; }
.card { background: #252526; border: 1px solid #3e3e42; border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
.card-header { padding: 12px 18px; border-bottom: 1px solid #3e3e42; background: #2d2d30; display: flex; align-items: center; gap: 8px; }
.card-header h2 { font-size: 14px; font-weight: 600; color: #e0e0e0; }
.card-header .badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #0e639c; color: #9cdcfe; }
.card-body { padding: 18px; }
.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #bbb; }
.form-group label .required { color: #f48771; margin-left: 2px; }
.form-control { width: 100%; padding: 8px 12px; border: 1px solid #3e3e42; border-radius: 4px; font-size: 13px; font-family: inherit; background: #1e1e1e; color: #d4d4d4; }
.form-control:focus { outline: none; border-color: #0e639c; box-shadow: 0 0 0 2px rgba(14,99,156,.3); }
.form-control option { background: #252526; color: #d4d4d4; }
.tree-node-l1 { border-left: 2px solid #0e639c; padding-left: 12px; margin-bottom: 16px; }
.tree-node-l1 > .node-title { font-size: 14px; font-weight: 700; color: #4fc1ff; padding: 8px 12px; background: rgba(14,99,156,0.15); border-radius: 4px 4px 0 0; display: flex; gap: 8px; }
.tree-node-l2 { border-left: 2px solid #2d7d32; padding-left: 12px; margin: 8px 0; }
.tree-node-l2 > .node-title { font-size: 13px; font-weight: 600; color: #89d185; padding: 6px 12px; background: rgba(45,125,50,0.12); border-radius: 4px; }
.tree-node-l3 { border-left: 2px solid #cc6600; padding-left: 12px; margin: 6px 0 6px 1px; }
.tree-node-l3 > .node-title { font-size: 13px; font-weight: 600; color: #e8a33d; padding: 5px 10px; background: rgba(204,102,0,0.10); border-radius: 4px; }
.tree-leaves { padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 0 0 4px 4px; }
.leaf-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #333; }
.leaf-row:last-child { border-bottom: none; }
.leaf-label { flex: 0 0 260px; font-size: 13px; color: #d4d4d4; }
.leaf-label .eng { display: block; font-size: 11px; color: #6a6a6a; margin-top: 2px; font-family: "Consolas", monospace; }
.leaf-control { flex: 1; }
.leaf-control select { width: 100%; padding: 6px 10px; border: 1px solid #3e3e42; border-radius: 4px; font-size: 13px; background: #1e1e1e; color: #d4d4d4; }
.leaf-control select:focus { outline: none; border-color: #0e639c; }
.leaf-control select option { background: #252526; }
.leaf-control input[type="number"], .leaf-control input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid #3e3e42; border-radius: 4px; font-size: 13px; background: #1e1e1e; color: #d4d4d4; }
.leaf-explan { flex: 0 0 200px; font-size: 12px; color: #6a6a6a; }
.loading { text-align: center; padding: 40px; color: #666; font-size: 14px; }
.result-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 1000; }
.result-modal.show { display: flex; }
.result-box { background: #252526; border: 1px solid #3e3e42; border-radius: 8px; width: 1080px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; }
.result-header { padding: 14px 20px; border-bottom: 1px solid #3e3e42; display: flex; justify-content: space-between; align-items: center; }
.result-header h3 { font-size: 15px; color: #e0e0e0; }
.result-close { cursor: pointer; font-size: 22px; color: #888; border: none; background: none; line-height: 1; }
.result-close:hover { color: #fff; }
.result-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
#resultJson, #resultResponse { background: #1e1e1e; max-height: 440px; height: 350px; border: 1px solid #3e3e42; border-radius: 4px; overflow: hidden; }
#resultJson .CodeMirror, #resultResponse .CodeMirror { height: 350px; font-size: 12px; font-family: "Consolas", "Courier New", monospace; }
.CodeMirror-gutters { background: #1e1e1e !important; border-right: 1px solid #3e3e42 !important; }
.CodeMirror-linenumber { color: #666 !important; }
.result-panels { display: flex; gap: 16px; }
.result-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-panel .panel-title { font-size: 12px; font-weight: 600; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.response-empty { color: #666; font-style: italic; font-size: 12px; padding: 14px; }
#btnRequest.loading { opacity: .6; pointer-events: none; }
.result-footer { padding: 12px 20px; border-top: 1px solid #3e3e42; display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); padding: 10px 24px; border-radius: 4px; font-size: 13px; z-index: 2000; opacity: 0; transition: opacity .3s; pointer-events: none; }
.toast.show { opacity: 1; }
.toast.success { background: #097120; color: #fff; }
.toast.error { background: #a1260d; color: #fff; }
.footer { text-align: center; padding: 0 20px; color: #fff; font-size: 12px; position: fixed; bottom: 0; left: 0; right: 0; height: 36px; line-height: 36px; background: #007acc; border-top: 1px solid #3e3e42; z-index: 1000; }