/* Karma Console — cyber operations shell (extends user-provided design) */
:root {
  --bg: #05070d;
  --cyan: #a855f7;
  --violet: #7c3aed;
  --magenta: #cbd5e1;
  --grid: rgba(168, 85, 247, 0.05);
  --bg-base: #070b12;
  --bg-side: rgba(4, 8, 16, 0.92);
  --bg-card: rgba(12, 18, 28, 0.78);
  --border-glow: rgba(168, 85, 247, 0.35);
  --neon-cyan: #a855f7;
  --neon-mint: #c084fc;
  --neon-purple: #7c3aed;
  --text-main: #eef5ff;
  --text-dim: #94a3b8;
  --shadow-card: 0 20px 35px -12px rgba(0, 0, 0, 0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", monospace;
  color: var(--text-main);
  min-height: 100vh;
  overflow: hidden;
}
/* 官网同款背景层：霓虹渐变 + 网格 + 粒子网络 */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(100, 116, 139, 0.16), transparent 60%),
    radial-gradient(800px 600px at 90% 10%, rgba(168, 85, 247, 0.12), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(148, 163, 184, 0.08), transparent 60%),
    var(--bg);
}
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}
#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  position: relative;
  z-index: 2;
}
.sidebar {
  background: rgba(2, 6, 16, 0.88);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--border-glow);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3);
}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  background: linear-gradient(120deg, #ffffff, var(--neon-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand p {
  font-size: 10px;
  color: var(--neon-cyan);
  letter-spacing: 1px;
  margin-top: 4px;
}
.identity-box {
  background: rgba(0, 20, 32, 0.6);
  border-radius: 20px;
  border: 1px solid var(--border-glow);
  padding: 16px;
  margin-bottom: 24px;
}
.status::before {
  content: "●";
  margin-right: 6px;
  font-size: 12px;
  color: var(--neon-mint);
  text-shadow: 0 0 6px var(--neon-mint);
}
.id-main {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: #e9d5ff;
  margin: 10px 0 4px;
}
.id-sub { font-size: 12px; color: var(--text-dim); }
/* 切到子身份时把当前身份框染色：一眼能分出「现在不是主身份视角」。 */
.identity-box.scoped { border-color: rgba(148, 163, 184, 0.55); }
.identity-box.scoped .id-main { color: var(--neon-mint); }
.id-meta { display: flex; gap: 10px; margin-top: 12px; }
.mini {
  background: rgba(168, 85, 247, 0.08);
  border-radius: 14px;
  padding: 8px 10px;
  flex: 1;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.mini b { font-size: 13px; display: block; }
.mini span { font-size: 10px; color: #94a3b8; }
.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nav .nav-main {
  all: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  color: #cbd5e1;
  cursor: pointer;
  transition: 0.2s;
}
.nav .nav-main:hover {
  background: rgba(168, 85, 247, 0.1);
  color: #fff;
  transform: translateX(4px);
}
.nav .nav-main.active {
  background: linear-gradient(95deg, rgba(168, 85, 247, 0.2), rgba(148, 163, 184, 0.08));
  color: var(--neon-cyan);
  border-right: 2px solid var(--neon-cyan);
}
.icon { width: 28px; }

/* 主功能区 + 折叠子功能：点主项切页面并展开，点子项直接落到右边那一段。 */
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-caret { margin-left: auto; font-size: 10px; opacity: 0.65; transition: transform 0.2s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav .nav-main.parent-active {
  color: var(--neon-cyan);
  background: rgba(168, 85, 247, 0.07);
}
.nav-subs {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 16px;
  padding-left: 10px;
  border-left: 1px solid rgba(168, 85, 247, 0.22);
}
.nav-group.open .nav-subs { display: flex; }
/* 子项按能力位藏（如运营复核台的五个待办）：[hidden] 要压过上面那条 open 规则。 */
.nav-group.open .nav-subs[hidden] { display: none; }
.nav .nav-sub {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.18s;
}
.nav .nav-sub:hover { background: rgba(168, 85, 247, 0.1); color: #fff; transform: translateX(3px); }
.nav .nav-sub.active {
  background: linear-gradient(95deg, rgba(168, 85, 247, 0.18), rgba(148, 163, 184, 0.06));
  color: var(--neon-cyan);
  box-shadow: inset 2px 0 0 var(--neon-cyan);
}
/* 从子功能跳过去时闪一下：让人一眼看到「右边显示的就是它」 */
@keyframes navFlash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.55); }
}
.nav-flash { animation: navFlash 1.4s ease-out 1; }
/* 侧栏点了子功能：右边只留那一块，同页其它功能块先收起来 —— 没点的功能不该出现在眼前。 */
.focus-hidden { display: none !important; }
/* 确认区 / 争议区本来并排：只剩一个的时候占满整行，不留半边空位。 */
#center .pay-zones.single { grid-template-columns: 1fr; }
.side-warning {
  margin-top: auto;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 18px;
  padding: 14px;
  font-size: 12px;
}
.side-warning b { display: block; margin-bottom: 6px; color: #f0abfc; }
.main {
  overflow-y: auto;
  padding: 24px 28px;
}
.main::-webkit-scrollbar { width: 1px; height: 1px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.18), rgba(100, 116, 139, 0.85), rgba(148, 163, 184, 0.18));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}
.main::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.45), rgba(100, 116, 139, 1), rgba(148, 163, 184, 0.45));
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.75);
}

/* 所有可滚动区域统一为极细光影滚动条（身份选择页、面板、弹层都生效）。 */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.75) transparent;
  }
}
*::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.18), rgba(100, 116, 139, 0.85), rgba(148, 163, 184, 0.18));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.45), rgba(100, 116, 139, 1), rgba(148, 163, 184, 0.45));
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.75);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
.api-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(0, 30, 48, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
  /* 下拉面板以这一条为锚点：`.main` 是 overflow:auto 的滚动容器，
     面板一旦向左伸出它的边界就会被裁掉（点不到，看着像没反应）。 */
  position: relative;
}
.api-strip input {
  flex: 1 1 160px;
  min-width: 120px;
  background: #0c1220;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  color: #e2f0ff;
  font-size: 12px;
}
.lang-select {
  background: #0c1220;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  padding: 6px 8px;
  color: #e2f0ff;
  font-size: 12px;
  cursor: pointer;
}
/* 语言选择器：整体收窄一圈（原来下拉框写死 116px 宽、内距 8/12）。
   顶栏里它左边挨着「语言」、右边紧贴「连接钱包」，窄屏换成两行时
   整块还会被挤出视口。现在改成按内容自适应 + 更小的内距和圆角：
   中文约 76px、西语最长的 «Español (SV)» 约 96px。
   宽度不写死是为了避免西语/韩语选项被截断成 «Español (S…»。 */
.lang-select { flex: 0 0 auto; }
.lang-select > span { white-space: nowrap; }
.lang-select > select {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 8px;
  color-scheme: dark;
}
.lang-select option {
  background: #0c1220;
  color: #e2f0ff;
}
.lang-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.lang-select-wrap select.lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.lang-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 82px;
  padding: 6px 10px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  background: #0c1220;
  color: #e2f0ff;
  font-size: 12px;
  cursor: pointer;
}
.lang-select-button:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.75);
}
.lang-select-caret {
  font-size: 10px;
  opacity: 0.65;
}
.lang-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 12px;
  background: #0a1220;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}
.lang-select-wrap.open .lang-select-menu {
  display: block;
}
.lang-select-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfe8ff;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.lang-select-option:hover,
.lang-select-option.active {
  background: rgba(168, 85, 247, 0.14);
  color: #ffffff;
}
.api-status { font-size: 12px; color: var(--neon-mint); max-width: 420px; word-break: break-all; }
.api-status.err { color: #ff8a9a; }
.api-status.ok { color: #7ee2a8; }
.topbar {
  position: sticky;
  top: 0;
  background: rgba(4, 8, 18, 0.8);
  backdrop-filter: blur(12px);
  margin: -24px -28px 22px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border-glow);
  z-index: 10;
}
.topbar-inner { display: flex; flex-direction: column; gap: 12px; }
.topbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.page-title p { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.top-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- 子身份视角：顶部「主体身份卡 › 当前视角」状态栏 + 切换面板 ---- */
.sub-scope-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 40px;
  background: rgba(0, 20, 32, 0.6);
  border: 1px solid var(--border-glow);
  font-size: 11px;
  color: var(--text-dim);
  width: fit-content;
}
.sub-scope-bar code { font-family: monospace; font-size: 11px; color: #e9d5ff; }
.sub-scope-bar b { font-weight: 700; color: var(--neon-cyan); }
.sub-scope-arrow { opacity: 0.6; }
body.sub-scope-filtered .sub-scope-bar { border-color: rgba(148, 163, 184, 0.55); }
body.sub-scope-filtered .sub-scope-bar b { color: var(--neon-mint); }

.sub-switch-wrap { position: relative; }
.sub-switch-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  background: rgba(6, 12, 22, 0.98);
  border: 1px solid var(--border-glow);
  box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.8);
}
.sub-switch-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sub-switch-item:hover { background: rgba(168, 85, 247, 0.12); border-color: var(--border-glow); }
.sub-switch-item.active { background: rgba(100, 116, 139, 0.18); border-color: rgba(100, 116, 139, 0.6); }
/* 有卡但没认证完：列出来（点了去认证），但看着就像「还切不了」。 */
.sub-switch-item.pending { opacity: 0.62; color: var(--text-dim); }
.sub-switch-empty { padding: 10px 12px; font-size: 11px; color: var(--text-dim); cursor: pointer; }
.sub-switch-empty:hover { color: var(--neon-cyan); }

/* 视角筛选提示：说清隐藏了多少条，避免空表被当成坏页面 */
.scope-note { margin: 8px 0 0; font-size: 11px; color: #6c8aac; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn {
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.06);
  border-radius: 40px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
  color: #e0f0ff;
}
.btn:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: var(--neon-cyan);
  transform: translateY(-1px);
}
.btn.primary {
  background: linear-gradient(105deg, #a855f7, #64748b);
  border: none;
  color: #0a0c12;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 200, 255, 0.3);
}
.btn.red {
  border-color: #ff5a7a;
  background: rgba(255, 90, 122, 0.1);
  color: #ffb7c6;
}
.grid { display: grid; gap: 20px; }
.metrics { grid-template-columns: repeat(5, 1fr); }
.card {
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-glow);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.metric { padding: 18px; position: relative; }
.metric .label { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.metric .value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #f0fcff;
  text-shadow: 0 0 4px rgba(168, 85, 247, 0.3);
}
.metric .hint { font-size: 11px; color: #6c8aac; margin-top: 8px; }
.layout-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.section { padding: 20px; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.section-header h3 { font-size: 18px; font-weight: 600; }
.section-header p { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.action-card {
  background: rgba(168, 85, 247, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.action-card:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: var(--neon-cyan);
  transform: translateY(-2px);
}
.action-card b { font-size: 15px; display: block; margin-bottom: 6px; }
.action-card span { font-size: 12px; color: #a1bbd4; line-height: 1.4; }
.timeline { display: flex; flex-direction: column; gap: 16px; }
.time-row { display: flex; gap: 14px; align-items: flex-start; }
.node {
  width: 10px;
  height: 10px;
  background: var(--neon-cyan);
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 8px var(--neon-cyan);
}
.time-row b { font-size: 14px; }
.time-row p { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
  font-size: 13px;
}
th { color: #8bc6ff; font-weight: 600; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
.badge.green { background: rgba(148, 163, 184, 0.12); color: #d8dde3; }
.badge.cyan { background: rgba(168, 85, 247, 0.12); color: #e9d5ff; }
.badge.yellow { background: rgba(255, 210, 90, 0.12); color: #ffe1a0; }
.badge.red { background: rgba(255, 90, 122, 0.12); color: #ffbecb; }
.progress { width: 100px; height: 6px; background: #1e2a3a; border-radius: 20px; overflow: hidden; }
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-mint));
  border-radius: 20px;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.flow-card {
  background: rgba(8, 14, 24, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 28px;
  padding: 22px;
}
.flow-card h3 { font-size: 18px; margin-bottom: 6px; }
.flow-card p { font-size: 12px; color: var(--text-dim); margin-bottom: 18px; }
.form { display: flex; flex-direction: column; gap: 14px; }
label {
  font-size: 12px;
  font-weight: 600;
  color: #9ab9db;
  display: block;
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  background: #0c1220;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 16px;
  padding: 10px 14px;
  color: #e2f0ff;
  font-size: 13px;
  font-family: inherit;
}
/* 复选框 / 单选不该吃上面输入框的 width:100% + 底色，还原成小方块。 */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--cyan, #a855f7);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}
textarea { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice {
  background: rgba(168, 85, 247, 0.06);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 16px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.notice.warn { background: rgba(255, 210, 90, 0.08); border-left-color: #ffd25a; }
.notice.red { background: rgba(255, 90, 122, 0.08); border-left-color: #ff5a7a; }
.task-list { display: flex; flex-direction: column; gap: 12px; }
.task-item {
  background: rgba(168, 85, 247, 0.04);
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.setting {
  background: rgba(168, 85, 247, 0.03);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.toggle-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
}
.switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #1e2a3c;
  border-radius: 34px;
  transition: 0.2s;
}
.slider:before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #c0e0ff;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .slider {
  background: linear-gradient(135deg, #a855f7, #64748b);
}
.switch input:checked + .slider:before {
  transform: translateX(24px);
  background: #0a0c12;
}
.settlement-preview {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .layout-2, .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 16px; }
  /* 顶栏靠负边距贴到 .main 内边距外面；窄屏 .main 内边距缩到 16px，
     负边距必须跟着缩，否则顶栏比容器宽 24px，右边那条会被切掉——
     看着就像「语言框和连接钱包挤在一起」。 */
  .topbar { margin: -16px -16px 18px; }
  .metrics { grid-template-columns: 1fr; }
}
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 顶部连接区：折叠设置 + 身份 chip */
.identity-chip {
  font-family: monospace;
  font-size: 12px;
  color: var(--neon-mint);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 100px;
  padding: 6px 12px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conn-settings { margin-left: auto; }
.conn-settings summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 16px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  color: #e0f0ff;
  user-select: none;
}
.conn-settings summary::-webkit-details-marker { display: none; }
.conn-settings summary:hover { background: rgba(168, 85, 247, 0.1); }
.conn-settings[open] summary { background: rgba(168, 85, 247, 0.12); border-color: var(--neon-cyan); }
.conn-settings-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 30, 48, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
}

.profile-switcher select {
  width: 100%;
  margin-top: 8px;
  background: rgba(255,255,255,0.04);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
}
.confidential-badge {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 9999;
  background: rgba(185,28,28,0.92);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
body.confidential [data-bind="total_locked_usdc"],
body.confidential [data-bind="available_credits"],
body.confidential [data-bind="in_progress_bucket"],
body.confidential [data-bind="pending_settlement_credits"],
body.confidential [data-bind="disputed_credits"],
body.confidential [data-bind="b_total_locked"],
body.confidential [data-bind="b_available"],
body.confidential [data-bind="b_in_progress"],
body.confidential [data-bind="b_pending"],
body.confidential [data-bind="b_disputed"],
body.confidential [data-bind="b_released"] {
  filter: blur(6px);
  user-select: none;
}


/* ---------- Agent 接入页 (#agents) ---------- */
/* 一条龙步骤条：四步排成一行，每步一颗按钮滚到那一段（#ag-flow）。 */
#agents .ag-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}
#agents .ag-flow .ag-step .btn { font-size: 12px; padding: 4px 10px; }
#agents .ag-step {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.16);
}
#agents .ag-step b { display: block; font-size: 13px; margin-bottom: 4px; }
#agents .ag-step span { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
#agents .ag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
#agents .field { display: flex; flex-direction: column; gap: 6px; }
#agents .field label { font-size: 12px; color: var(--text-dim); }
#agents .field input,
#agents .field select,
#agents .field textarea {
  background: rgba(6, 12, 20, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  color: var(--text-main);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
#agents .field textarea { resize: vertical; }
#agents .ag-spec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(168, 85, 247, 0.2);
}
#agents .ag-spec-head b { font-size: 14px; }
#agents .ag-spec-head span { font-size: 12px; color: var(--text-dim); }
#agents .ag-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#agents .ag-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#agents .ag-inline input[type="text"] { flex: 1; min-width: 140px; }
#agents .ag-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
#agents .ag-hint { font-size: 11px; color: #6c8aac; }
#agents .ag-spec-field code { font-size: 10px; color: var(--text-dim); }
#agents .muted { font-size: 12px; color: var(--text-dim); }
#agents .err { color: #ff8a9a; }
#agents .tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  color: #e9d5ff;
  margin-left: 6px;
  white-space: nowrap;
}
#agents .tag.ok { background: rgba(74, 222, 128, 0.14); color: #bbf7d0; }
#agents .tag.warn { background: rgba(255, 210, 90, 0.14); color: #ffe1a0; }
#agents .tag.muted { background: rgba(138, 167, 196, 0.14); color: var(--text-dim); }
#agents .agent-row {
  border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(10, 16, 26, 0.6);
}
#agents .agent-row[data-agent-row] { cursor: pointer; }
#agents .agent-row[data-agent-row]:hover { border-color: rgba(168, 85, 247, 0.45); }
#agents .agent-row.self {
  background: rgba(10, 16, 26, 0.35);
  border-style: dashed;
  border-color: rgba(138, 167, 196, 0.22);
}
#agents .agent-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#agents .agent-row-main code { font-size: 11px; color: var(--text-dim); }
#agents .agent-row-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
#agents .agent-row-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
#agents .agent-row-actions input {
  width: 150px;
  background: rgba(6, 12, 20, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  color: var(--text-main);
  padding: 7px 10px;
  font-size: 12px;
}
#agents .ag-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.05);
}
#agents .ag-result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#agents .ag-secret { margin-top: 12px; }
#agents .ag-secret-label { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
#agents .ag-secret code {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
#agents .ag-snippet { margin-top: 12px; }
#agents .ag-snippet pre {
  font-size: 11px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.9);
  overflow: auto;
}
#agents .ag-next { margin-top: 12px; font-size: 12px; }
#agents .ag-next ol { margin: 6px 0 0 18px; color: var(--text-dim); line-height: 1.7; }

/* 交付包 —— the one artifact an owner hands to an agent runtime */
#agents #ag-handoff-card[hidden] { display: none !important; }
#agents #ag-handoff .ag-snippet pre { max-height: 280px; }
#agents #ag-handoff .ag-secret { flex-wrap: wrap; }
/* 交付包里的密钥清单 / 自检命令：不用 <pre>（翻译引擎会整块跳过），
   改成一行一个 div，中文碎片也翻得到。 */
#agents #ag-handoff .ag-key-list,
#agents #ag-handoff .ag-check-lines {
  font-size: 11px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.9);
  overflow: auto;
  max-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.7;
}
#agents #ag-handoff .ag-key-line { white-space: nowrap; }
/* 每把钥匙一块：行下面接展开的「最近调用」。 */
#agents #ag-handoff .ag-key-item + .ag-key-item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 85, 247, 0.18);
}
#agents #ag-handoff .ag-key-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#agents #ag-handoff .ag-key-actions .btn { padding: 4px 10px; font-size: 11px; }
#agents #ag-handoff .ag-key-calls {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid rgba(168, 85, 247, 0.4);
  background: rgba(6, 12, 20, 0.6);
  border-radius: 6px;
  white-space: normal;
}
#agents #ag-handoff .ag-key-calls .ag-secret-label { font-size: 11px; }
#agents #ag-handoff .ag-key-calls ul { margin: 6px 0 0; padding-left: 16px; }
#agents #ag-handoff .ag-key-calls li,
#agents #ag-handoff .ag-key-calls .ag-hint { font-size: 11px; color: #9fb6cc; line-height: 1.7; white-space: normal; }
#agents #ag-handoff #ho-bind-code {
  width: 190px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(6, 12, 20, 0.85);
  color: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#agents #ag-handoff .tag.ok { border-color: rgba(74, 222, 128, 0.45); color: #7ee2a8; }

/* 账单：主身份总账 ↔ 子身份明细 */
#bills .bills-scope select {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(6, 12, 20, 0.72);
  color: inherit;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  max-width: 340px;
}
#bills #bill-ledger table { font-size: 12px; }
#bills #bill-ledger code { font-size: 11px; color: var(--text-dim); }
#bills #bill-ledger { overflow-x: auto; }

@media (max-width: 1100px) {
  #agents .ag-flow { grid-template-columns: repeat(2, 1fr); }
  #agents .ag-grid,
  #agents .ag-spec-grid { grid-template-columns: 1fr; }
}

/* ---------- 快捷锁仓 / 起步引导 ---------- */
.lock-quick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lock-quick .chip {
  border: 1px solid var(--border-glow);
  background: rgba(168, 85, 247, 0.08);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lock-quick .chip:hover { background: rgba(168, 85, 247, 0.2); }
.lock-quick .chip:active { transform: translateY(1px); }

#launch-guide[hidden] { display: none !important; }
#launch-guide .launch-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
#launch-guide .launch-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.16);
}
#launch-guide .launch-step b { font-size: 13px; }
#launch-guide .launch-step span { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

/* 子身份面板：一行 = 切换 + 一键授权 */
.sub-switch-row { display: flex; gap: 6px; align-items: center; }
.sub-switch-row .sub-switch-item { flex: 1; min-width: 0; }
.sub-switch-grant {
  flex: 0 0 auto;
  border: 1px solid var(--border-glow);
  background: transparent;
  color: var(--text-dim);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.sub-switch-grant:hover { color: var(--text-main); background: rgba(168, 85, 247, 0.14); }

@media (max-width: 1100px) {
  #launch-guide .launch-steps { grid-template-columns: 1fr; }
}

/* ───────────────────────── 入口门禁：先连钱包，再进操作台 ───────────────────────── */
/* 没有 JS 时 body 不会带 .gated：操作台照常可见，不会白屏。 */
body.gated .app { display: none; }
body.gated { overflow: hidden; }

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.entry-gate[hidden] { display: none; }
.entry-gate-card {
  width: min(460px, 100%);
  background: linear-gradient(160deg, rgba(12, 18, 28, 0.96), rgba(8, 12, 22, 0.96));
  border: 1px solid var(--border-glow);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 30px 28px 26px;
  text-align: center;
}
.entry-gate-logo {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.45);
}
.entry-gate-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.entry-gate-card h2 { font-size: 20px; margin-bottom: 10px; }
.entry-gate-card p { font-size: 13px; line-height: 1.75; color: var(--text-dim); }
.entry-gate-card p b { color: var(--text-main); }
.entry-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.entry-gate .api-status { display: block; margin: 0 auto 8px; }
.entry-gate-hint { font-size: 12px; color: #6c8aac; }
.entry-gate-lang {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  font-size: 12px;
  color: #8fa6c4;
}
.entry-gate-lang .lang-select { font-size: 12px; }

/* ───────────────────────── 主身份抬头 + 资金卡（总览第一屏） ───────────────────────── */
.id-home { padding: 20px 22px 18px; }
.id-home-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.id-home-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #04121a;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}
.id-home-who { flex: 1; min-width: 200px; }
.id-home-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.id-home-line b { font-size: 19px; letter-spacing: 0.4px; }
.id-home-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--cyan);
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.08);
}
.id-home-sub {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.id-home-dot { opacity: 0.5; }
.id-home-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.id-home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.id-home-stat {
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(8, 14, 24, 0.6);
}
.id-home-stat span { font-size: 12px; color: var(--text-dim); display: block; }
.id-home-stat b { font-size: 22px; }
.id-home-stat i { display: block; margin-top: 4px; font-size: 11px; color: #6c8aac; font-style: normal; }

.lock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(168, 85, 247, 0.12);
}
.lock-row-label { font-size: 12px; color: var(--text-dim); }
.lock-row input {
  width: 110px;
}
.id-home-hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
.id-home-confirm {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.06);
  font-size: 13px;
  line-height: 1.7;
}
.id-home-confirm .confirm-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.id-home-confirm .confirm-warn { color: #ffd479; }
.id-home-confirm .confirm-err { color: #ff8a9a; }
.id-home-subs { margin-top: 16px; display: grid; gap: 8px; }
.id-home-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 10px;
  background: rgba(8, 14, 24, 0.45);
}
.id-home-sub-row.is-active { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2) inset; }
.id-home-sub-id { font-weight: 600; }
.id-home-sub-meta { font-size: 12px; color: var(--text-dim); }
.id-home-sub-note { font-size: 12px; color: var(--text-dim); }

/* ---------- 给 agent 授权向导（#ag-wizard）----------
   2026-10-13 之后只剩两点：选一张已经建好的子身份卡 + 给这台 agent 起名字。
   类型 / 权限 / 额度 / 单笔 / 日限 在「身份 · 认证」建卡时就定了，这里只读展示
   （.agw-card），不再让用户在三个页面之间找。 */
#ag-wizard .agw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 14px 0 4px;
}
#ag-wizard .agw-steps li {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.28);
}
#ag-wizard .agw-steps b { display: block; font-size: 13px; margin-bottom: 3px; }
#ag-wizard .agw-steps span { font-size: 11px; color: var(--text-dim); }
#ag-wizard .agw-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(168, 85, 247, 0.2);
}
/* 只读的「这张卡已经定好的边界」：一格一项，告诉用户这些东西不用再填一次。 */
#ag-wizard .agw-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
#ag-wizard .agw-card li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(12, 24, 44, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.18);
}
#ag-wizard .agw-card b { font-size: 11px; font-weight: 500; color: var(--text-dim); }
#ag-wizard .agw-card span { font-size: 12px; overflow-wrap: anywhere; }
#ag-wizard .agw-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#ag-wizard .agw-block-head b { font-size: 14px; }
#ag-wizard .agw-block-head span { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
#ag-wizard .agw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#ag-wizard .agw-label { font-size: 12px; color: var(--text-dim); min-width: 92px; }
#ag-wizard .agw-row input,
#ag-wizard .agw-row select {
  background: rgba(6, 12, 20, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  color: var(--text-main);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
#ag-wizard .agw-row input[type="text"] { min-width: 200px; flex: 1; }
#ag-wizard .agw-row select { min-width: 240px; max-width: 100%; }
#ag-wizard .agw-note { font-size: 12px; color: #6c8aac; line-height: 1.7; margin-top: 8px; }
#ag-wizard .agw-row .chip {
  border: 1px solid var(--border-glow);
  background: rgba(168, 85, 247, 0.08);
  color: var(--text-main);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
#ag-wizard .agw-row .chip:hover { background: rgba(168, 85, 247, 0.2); }
#ag-wizard .agw-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#ag-wizard .agw-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.05);
}
#ag-wizard .agw-result[hidden] { display: none; }

@media (max-width: 1100px) {
  #ag-wizard .agw-steps,
  #ag-wizard .agw-card { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #ag-wizard .agw-steps,
  #ag-wizard .agw-card { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   配对码接入（#ag-pair）
   与授权向导同源，但入口不同：agent 先发起，主人只做批准 + 划额度。
   保持和 #ag-wizard 一样的密度，别让两张卡片看起来像两个产品。
------------------------------------------------------------------ */
#ag-pair .pair-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#ag-pair .pair-label { font-size: 12px; color: var(--text-dim); min-width: 92px; }
#ag-pair .pair-row input[type="text"] {
  min-width: 200px;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: rgba(6, 12, 20, 0.7);
  color: var(--text-main);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#ag-pair .pair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
#ag-pair .pair-grid .field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
#ag-pair .pair-grid input,
#ag-pair .pair-grid select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: rgba(6, 12, 20, 0.7);
  color: var(--text-main);
}
#ag-pair .pair-request {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  background: rgba(8, 14, 24, 0.55);
}
#ag-pair .pair-request[hidden] { display: none; }
#ag-pair .pair-request-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
#ag-pair .pair-request-head span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px;
  color: var(--neon-cyan);
}
#ag-pair .pair-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#ag-pair .pair-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-dim);
  padding: 4px 12px 4px 0;
  white-space: nowrap;
  vertical-align: top;
}
#ag-pair .pair-table td { padding: 4px 0; word-break: break-all; }
#ag-pair .pair-hint { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }
/* 公钥指纹：批准前唯一能核对的锚点，单独亮出来给主人读。 */
#ag-pair .pair-fp {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  background: rgba(8, 14, 24, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.6px;
  word-break: break-all;
}
#ag-pair .pair-perms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
#ag-pair .pair-perm {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  background: rgba(8, 14, 24, 0.5);
  font-size: 12px;
  cursor: pointer;
}
#ag-pair .pair-perm input { margin-right: 6px; }
#ag-pair .pair-perm b { font-size: 12px; }
#ag-pair .pair-perm span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-dim); }
#ag-pair .pair-grant-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(168, 85, 247, 0.2);
}
#ag-pair .pair-grant-head b { font-size: 14px; }
#ag-pair .pair-grant-head span { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
#ag-pair #pair-grant[hidden] { display: none; }
#ag-pair .pair-result { font-size: 13px; line-height: 1.7; }
#ag-pair .pair-result b { display: block; margin-bottom: 4px; }
#ag-pair .pair-result.err { color: #ff8b8b; }
/* 行业硬指标表单：和「接入一个 Agent」共用 karma-service-spec.js 渲染的同一份 DOM。 */
#ag-pair #pair-spec-wrap { margin-top: 4px; }
#ag-pair .pair-hint[hidden] { display: none; }
#ag-pair .pair-hint.err { color: #ff8b8b; }

@media (max-width: 1100px) {
  #ag-pair .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ag-pair .pair-perms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #ag-pair .pair-grid,
  #ag-pair .pair-perms { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   收付中心（#center）
   主身份：总览 + 支出/收入明细；切子身份：该身份的收付明细。
   每一行都能点开详情；确认区 / 争议区按订单状态分色。
------------------------------------------------------------------ */
.pay-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-sync { font-size: 11px; color: #6c8aac; }
.pay-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
/* display:grid 会盖掉 [hidden] 自带的 display:none，主身份/子身份统计必须显式隐藏。 */
.pay-stats[hidden] { display: none; }
.pay-stat {
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(8, 14, 24, 0.6);
}
.pay-stat span { font-size: 12px; color: var(--text-dim); display: block; }
.pay-stat b { font-size: 22px; }
.pay-stat i { display: block; margin-top: 4px; font-size: 11px; color: #6c8aac; font-style: normal; }

.pay-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}
.pay-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.pay-tab:hover { color: #e0f0ff; }
.pay-tab.active { color: #0a0c12; background: linear-gradient(105deg, #a855f7, #64748b); }
.pay-count {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 1px 8px;
}
.pay-tab.active .pay-count { background: rgba(10, 12, 18, 0.25); }

.pay-list { margin-top: 10px; display: flex; flex-direction: column; }
.pay-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.08);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pay-row:hover { background: rgba(168, 85, 247, 0.05); }
.pay-row:focus-visible { outline: 1px solid var(--neon-cyan); outline-offset: -1px; }
.pay-row.pay-phase-active { border-left-color: rgba(168, 85, 247, 0.6); }
.pay-row.pay-phase-confirm { border-left-color: #f6c445; }
.pay-row.pay-phase-dispute { border-left-color: #ff5a7a; }
.pay-row.pay-phase-closed { border-left-color: rgba(138, 167, 196, 0.4); }
.pay-role { font-size: 11px; font-weight: 700; text-align: center; border-radius: 6px; padding: 2px 0; }
.pay-role-out { color: #ffb7c6; background: rgba(255, 90, 122, 0.12); }
.pay-role-in { color: #9df5d2; background: rgba(168, 85, 247, 0.12); }
.pay-main { min-width: 0; }
.pay-main b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-main i { display: block; margin-top: 2px; font-size: 11px; color: #6c8aac; font-style: normal; }
.pay-amount { font-size: 14px; font-weight: 700; white-space: nowrap; }
.pay-amount em { font-size: 10px; color: var(--text-dim); font-style: normal; }
.pay-status { font-size: 11px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; }
.pay-status-active { color: #e9d5ff; background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.35); }
.pay-status-confirm { color: #ffdf9a; background: rgba(246, 196, 69, 0.1); border-color: rgba(246, 196, 69, 0.4); }
.pay-status-dispute { color: #ffb7c6; background: rgba(255, 90, 122, 0.1); border-color: rgba(255, 90, 122, 0.4); }
.pay-status-closed { color: #9fb6cd; background: rgba(138, 167, 196, 0.1); border-color: rgba(138, 167, 196, 0.3); }
.pay-time { font-size: 11px; color: #6c8aac; white-space: nowrap; }
.pay-empty { padding: 18px 4px; font-size: 12px; color: #6c8aac; line-height: 1.7; }

#center .pay-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.pay-zone-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pay-zone-hint { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.pay-zone-list { margin-top: 8px; }
.pay-zone-list .pay-row { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.pay-zone-list .pay-time { display: none; }

/* 确认区最上面那一小段：agent 等人的授权请求（点确认 / 拒绝）。 */
.pay-auth-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
}
.pay-auth-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-left: 3px solid #f6c445;
  border-bottom: 1px solid rgba(168, 85, 247, 0.08);
}
.pay-auth-row b { display: block; font-size: 13px; }
.pay-auth-row i { display: block; margin-top: 3px; font-size: 11px; font-style: normal; color: var(--text-dim); }
.pay-auth-actions { display: flex; gap: 8px; }
.pay-auth-busy { opacity: 0.55; }

.pay-detail { margin-top: 20px; }
.pay-detail-warn {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 138, 76, 0.12);
  border: 1px solid rgba(255, 138, 76, 0.35);
  color: #ffb27a;
  font-size: 12px;
}
.pay-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pay-detail-head b { font-size: 16px; }
.pay-detail-sub { display: block; margin-top: 2px; font-size: 11px; color: #6c8aac; }
.pay-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 20px;
  margin-top: 14px;
}
.pay-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.1);
}
.pay-detail-row span { color: var(--text-dim); }
.pay-detail-row b { font-weight: 600; text-align: right; word-break: break-all; }
.pay-detail h4 { margin-top: 18px; font-size: 13px; }
.pay-history { margin-top: 8px; display: flex; flex-direction: column; }
.pay-history-row {
  display: grid;
  grid-template-columns: 120px 190px minmax(0, 1fr);
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.06);
}
.pay-history-time { color: #6c8aac; }
.pay-history-row i { font-style: normal; color: var(--text-dim); }

.pay-create { margin-top: 20px; }
.pay-create .split { margin-top: 14px; }

@media (max-width: 1100px) {
  #center .pay-zones { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pay-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 6px; }
  .pay-status, .pay-time { grid-column: 2 / -1; }
  .pay-history-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 身份 · 认证（#identity）----------
   身份 = 认证：连钱包拿到 KID，证件 + 刷脸在本地加密后才提交；核验通过 = 身份卡生效。
   子身份共用主身份这一个资金账户，只分角色 / 权限 / 额度 / 边界。 */
:root { --accent: var(--cyan); }

#identity .idv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
#identity .idv-kv {
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(8, 14, 24, 0.6);
}
#identity .idv-kv b { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; }
#identity .idv-kv span { font-size: 14px; font-weight: 600; word-break: break-all; }
#identity .field { display: flex; flex-direction: column; gap: 6px; }
#identity .field label { font-size: 12px; color: var(--text-dim); }

.idv-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-dim);
  border: 1px solid rgba(138, 167, 196, 0.35);
  background: rgba(138, 167, 196, 0.1);
}
.idv-badge.on { color: var(--cyan); border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.1); }
.idv-badge.bad { color: #ff8a9a; border-color: rgba(255, 138, 154, 0.45); background: rgba(255, 138, 154, 0.1); }

.idv-pipeline { list-style: none; margin-top: 16px; display: grid; gap: 12px; }
.idv-pipeline > li {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  background: rgba(8, 14, 24, 0.5);
}
.idv-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.idv-step-head b { font-size: 14px; }
.idv-step-head span { font-size: 12px; color: var(--text-dim); }

/* 服务商核验与人工复核是两条并排的通道：服务商没接入时那张卡要看得出的灰，
   另一张在页头标「当前路径」—— 走哪条不用猜。 */
.card.is-off { opacity: .55; filter: grayscale(.45); }
.card.is-off .idv-badge { opacity: .9; }
.card.is-off .btn { cursor: not-allowed; }
.idv-hint { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }

.idv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* .idv-row 自己写了 display:flex，会盖掉 [hidden] 的 UA 默认值 —— 建卡向导按身份类型切换，必须显式一条。 */
.idv-row[hidden] { display: none !important; }
.idv-file { cursor: pointer; }
.idv-thumb img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(168, 85, 247, 0.3); }

.idv-consent, .idv-perm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.idv-consent { margin-top: 10px; line-height: 1.6; }
/* 灰按钮旁边的「还差什么」：默认是提醒色，凑齐了转成通过色。 */
.idv-need { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: #ffd9a8; font-family: var(--font-content); }
.idv-need.ok { color: var(--neon-mint, #4ade80); }
.idv-req { color: #ff8a9a; }
.idv-perms { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
/* 全局 input 是 width:100%，勾选框必须还原本宽，否则整行被它撑开、文字被挤到最右边。 */
#identity input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--cyan); }

.idv-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(168, 85, 247, 0.12); }
.idv-block > b { font-size: 13px; }

.idv-sub-list { margin-top: 14px; display: grid; gap: 8px; font-size: 13px; color: var(--text-dim); }
.idv-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 10px;
  background: rgba(8, 14, 24, 0.45);
}
/* 参考脸拿不到时的分流块：原因一行 + 「去主身份页刷脸激活」一跳，卡不用重建。 */
.idv-face-route {
  flex-basis: 100%;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 138, 154, 0.35);
  border-radius: 10px;
  background: rgba(255, 138, 154, 0.06);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
.idv-face-route p { margin: 0 0 8px; }
.idv-face-route .idv-face-route-lead { color: var(--text-main); }

.idv-sub-main b { font-size: 13px; color: var(--text-main); }
.idv-sub-main span { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.idv-sub-meta { font-size: 12px; color: var(--text-dim); }

.idv-rules { margin: 14px 0 0 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--text-dim); }
.idv-rules b { color: var(--text-main); }

@media (max-width: 720px) {
  #identity .idv-grid { grid-template-columns: 1fr; }
  .idv-pipeline > li { padding: 12px; }
}

/* 身份页的高级工具区（默认收起），避免和主流程抢注意力。 */
#identity [data-idv-advanced] { padding: 16px 20px; }
#identity [data-idv-advanced] .idv-adv-summary { cursor: pointer; font-size: 13px; color: var(--text-dim); }
#identity [data-idv-advanced][open] .idv-adv-summary { margin-bottom: 14px; }
#identity [data-idv-advanced] .idv-adv-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(168, 85, 247, 0.12); }

/* ---------------------------------------------------------------- 订单状态图（首页） */
/* 一笔单走到哪一步，用泳道看；已过可争议期的单自动退场，版面只留还要处理的。 */
.order-board-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-sides { display: flex; gap: 6px; }
.order-totals {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; font-size: 12px; color: var(--text-dim);
}
.order-totals b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.order-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.order-lane {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
  padding: 10px;
  border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 14px;
  background: rgba(8, 14, 26, 0.6);
}
.order-lane[data-lane="confirm"] { border-color: rgba(250, 204, 21, 0.28); }
.order-lane[data-lane="dispute"] { border-color: rgba(248, 113, 113, 0.32); }
.order-lane[data-lane="done"] { opacity: 0.72; }
.order-lane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em;
}
.order-lane-head b { color: var(--text-main); font-size: 12px; }
.order-lane-count { font-variant-numeric: tabular-nums; }
.order-lane-body { display: flex; flex-direction: column; gap: 8px; }
.order-lane-empty { font-size: 11px; color: var(--text-dim); opacity: 0.6; }
.order-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left;
  padding: 10px;
  border: 1px solid rgba(120, 160, 255, 0.18);
  border-radius: 12px;
  background: rgba(16, 24, 44, 0.85);
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.order-card:hover { transform: translateY(-1px); border-color: var(--border-glow); }
.order-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-side-tag {
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(120, 160, 255, 0.3);
  color: var(--text-dim); font-size: 11px; white-space: nowrap;
}
.order-side-tag.is-out { color: #ffd479; border-color: rgba(255, 212, 121, 0.35); }
.order-side-tag.is-in { color: #7ee2a8; border-color: rgba(126, 226, 168, 0.35); }
.order-card-amount { color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-card-amount em { color: var(--text-dim); font-style: normal; font-size: 11px; }
.order-card-title { color: #fff; font-weight: 600; line-height: 1.35; }
.order-card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--text-dim); font-size: 11px;
}
/* ---------------------------------------------------------------- 助理任务执行看板（任务执行页） */
/* 只回答「这个助理正在让 agent 做什么」：订单 / 任务内容 / 金额 / 进度，一张卡片一单。 */
.task-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.task-empty {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed rgba(120, 160, 255, 0.25);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}
.task-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 160, 255, 0.18);
  border-radius: 14px;
  background: rgba(16, 24, 44, 0.85);
  color: var(--text-main);
}
.task-card.task-phase-confirm { border-color: rgba(250, 204, 21, 0.28); }
.task-card.task-phase-dispute { border-color: rgba(248, 113, 113, 0.32); }
.task-card.task-phase-closed { opacity: 0.72; }
.task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.task-amount { color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.task-amount em { color: var(--text-dim); font-style: normal; font-size: 11px; }
.task-title { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.task-desc {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 10px;
  border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 10px;
  background: rgba(8, 14, 24, 0.5);
}
.task-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.task-meta span { min-width: 0; }
.task-meta i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim); }
.task-meta b { display: block; margin-top: 3px; font-size: 12px; color: var(--text-main); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .task-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 开发者 / 测试用的结算流转后台细节默认完全不露出来，助理页只保留上面的任务看板。 */
#settlement-flow-dev[hidden] { display: none !important; }
.order-empty {
  margin-top: 12px; padding: 14px;
  border: 1px dashed rgba(120, 160, 255, 0.25);
  border-radius: 12px;
  color: var(--text-dim); font-size: 12px; line-height: 1.6;
}
/* 每单一条横向流水线：一张单就是一条线，5 单就是 5 条线，看得更清楚。 */
.order-pipeline {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border: 1px solid rgba(120, 160, 255, 0.18);
  border-radius: 14px;
  background: rgba(16, 24, 44, 0.85);
  color: var(--text-main);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.order-pipeline:hover { transform: translateY(-1px); border-color: var(--border-glow); }
.op-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-title { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.op-amount { margin-left: auto; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.op-amount em { color: var(--text-dim); font-style: normal; font-size: 11px; }
.op-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-dim); font-size: 11px; }
.op-rail { display: flex; align-items: flex-start; width: 100%; margin-top: 2px; overflow-x: auto; }
.op-rail .of-step { min-width: 84px; }
/* ------------------------------------------------- 单笔订单状态图（动态）
   点订单图里的一张单 -> 这一块展开：上面是订单号/对方/创建时间/合同，
   下面是这笔生意的专属阶段线，走到哪一步哪一步亮蓝灯。 */
.of-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.of-head-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.of-no { font-size: 12px; color: var(--text-dim); }
.of-no b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #fff; letter-spacing: 0.02em; word-break: break-all;
}
.of-tag {
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--text-dim); font-size: 11px; white-space: nowrap;
}
.of-amount { color: #fff; font-variant-numeric: tabular-nums; }
.of-amount em { color: var(--text-dim); font-style: normal; font-size: 11px; }

.of-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.of-meta-item {
  padding: 10px 12px; border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 10px; background: rgba(8, 14, 24, 0.5);
}
.of-meta-item i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim); }
.of-meta-item b { display: block; margin-top: 4px; font-size: 13px; color: var(--text-main); word-break: break-all; }
.of-meta-item span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-dim); }
.of-meta-item .btn { margin-top: 4px; }
.of-contract {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, 0.18); border-radius: 12px;
  background: rgba(8, 14, 24, 0.5);
}
.of-contract-grid { display: grid; gap: 8px; }
.of-contract-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font-size: 12px; }
.of-contract-row span { color: var(--text-dim); }
.of-contract-row code {
  color: var(--text-main); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; white-space: pre-wrap;
}
.of-empty { margin: 0; font-size: 12px; color: var(--text-dim); }

.of-rail-wrap {
  position: relative; margin-top: 18px; padding: 22px 8px 12px;
  border: 1px solid rgba(168, 85, 247, 0.14); border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9, 16, 28, 0.85), rgba(6, 10, 20, 0.85)),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 42px);
  overflow-x: auto;
}
.of-rail { display: flex; align-items: flex-start; width: 100%; }
/* 步数少就把它们摊开铺满，步数多就横向滚动 —— 不硬塞，也不留大片空白。 */
.of-step { position: relative; flex: 1 1 0; min-width: 96px; padding: 0 3px; text-align: center; }
.of-step::before {
  content: ""; position: absolute; top: 13px; left: 0; width: 100%; height: 1px;
  border-radius: 1px; background: rgba(120, 160, 255, 0.18);
}
.of-step:first-child::before { left: 50%; width: 50%; }
.of-step:last-child::before { width: 50%; }
.of-step.is-done::before,
.of-step.is-live::before,
.of-step.is-warn::before {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.9), rgba(168, 85, 247, 0.12));
  background-size: 200% 100%;
  animation: ofFlow 2.6s linear infinite;
}
@keyframes ofFlow { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.of-dot {
  position: relative; z-index: 1; display: block; width: 26px; height: 26px; margin: 0 auto;
  border: 2px solid rgba(120, 160, 255, 0.35); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(20, 32, 56, 0.95), rgba(8, 12, 22, 0.95));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.of-step.is-milestone .of-dot { width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; }
.of-step.is-done .of-dot { border-color: rgba(168, 85, 247, 0.75); background: radial-gradient(circle at 50% 40%, #a855f7, #6b21a8); }
.of-step.is-skip .of-dot { border-style: dashed; border-color: rgba(250, 204, 21, 0.65); }
.of-step.is-todo .of-dot { opacity: 0.5; }
.of-step.is-live .of-dot {
  border-color: #d8b4fe;
  background: radial-gradient(circle at 50% 40%, #f3e8ff, #a855f7 55%, #4c1d95);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16), 0 0 22px 4px rgba(168, 85, 247, 0.5);
  animation: ofPulse 1.9s ease-in-out infinite;
}
.of-step.is-live .of-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  border: 2px solid rgba(168, 85, 247, 0.55);
  animation: ofRing 1.9s ease-out infinite;
}
.of-step.is-warn .of-dot {
  border-color: #fca5a5;
  background: radial-gradient(circle at 50% 40%, #fee2e2, #ef4444 55%, #7f1d1d);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16), 0 0 22px 4px rgba(248, 113, 113, 0.45);
  animation: ofPulse 1.9s ease-in-out infinite;
}
.of-step.is-warn .of-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  border: 2px solid rgba(248, 113, 113, 0.55);
  animation: ofRing 1.9s ease-out infinite;
}
@keyframes ofPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ofRing { 0% { transform: scale(0.8); opacity: 0.85; } 100% { transform: scale(1.6); opacity: 0; } }

.of-label { display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--text-main); }
.of-at { display: block; margin-top: 3px; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.of-hint { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; color: var(--text-dim); opacity: 0.75; }
.of-step.is-todo .of-label, .of-step.is-todo .of-hint { opacity: 0.55; }
.of-step.is-live .of-label { color: #f3e8ff; font-weight: 700; text-shadow: 0 0 12px rgba(168, 85, 247, 0.55); }
.of-step.is-skip .of-at { color: rgba(250, 204, 21, 0.85); }

.of-foot {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.of-foot b { color: var(--text-main); }

@media (max-width: 900px) { .of-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .of-meta { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .of-step.is-done::before,
  .of-step.is-live::before,
  .of-step.is-warn::before,
  .of-step.is-live .of-dot,
  .of-step.is-warn .of-dot { animation: none; }
  .of-step.is-live .of-dot::after,
  .of-step.is-warn .of-dot::after { display: none; }
}


/* ======================================================================
   「选择身份」+ 三张认证页 + 字体分区（功能区 / 操作区）
   最后加载，所以这里的规则一律压在老规则上面；改这里不会牵动上半部分的骨架。
   ====================================================================== */

:root {
  /* 操作区（右边内容）：读字的字体，商业文档的感觉 —— 字号稳、行距松。 */
  --font-content: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  /* 功能区（左边导航）：控制台的字体，偏窄、字距大，和右边一眼分得开。 */
  --font-nav: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui,
    "PingFang SC", "Microsoft YaHei UI", sans-serif;
  /* 标题：比正文更紧、更重，做层级而不是靠字号硬砸。 */
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
    system-ui, "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

/* ---- 操作区：正文 ------------------------------------------------------ */
body {
  font-family: var(--font-content);
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
.main { font-family: var(--font-content); }
.section-header h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: 0.015em;
}
.section-header p { line-height: 1.75; letter-spacing: 0.012em; }
.idv-hint { line-height: 1.8; letter-spacing: 0.012em; }
.idv-step-head b { font-family: var(--font-display); letter-spacing: 0.02em; }
.field label { letter-spacing: 0.03em; }
.field input, .field select, .field textarea, .out, .api-status { font-family: var(--font-content); }
/* 数字与编号仍旧用等宽：对齐才看得懂账。 */
#idv-master-id, #idv-master-wallet, .ip-id, .id-card, code, pre.out, .idv-kv span b {
  font-variant-numeric: tabular-nums;
}

/* ---- 功能区：导航与身份条 ---------------------------------------------- */
.sidebar { font-family: var(--font-nav); }
.brand h1 { font-family: var(--font-display); letter-spacing: 0.02em; }
.identity-box .id-top span { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.identity-box .id-main {
  font-family: var(--font-nav);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav .nav-main {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.06em;
}
.nav .nav-main .icon {
  font-size: 15px;
  letter-spacing: 0;
  filter: saturate(1.2);
}
.nav .nav-sub {
  font-family: var(--font-content);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
.nav .nav-sub.active { font-weight: 600; letter-spacing: 0.04em; }

/* ---- 「切换身份」面板 -------------------------------------------------- */
.id-picker { margin-top: 12px; }
.id-picker-btn {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.id-picker-btn:hover { border-color: var(--border-glow); background: rgba(168, 85, 247, 0.12); }
.id-picker-head { display: flex; align-items: center; justify-content: space-between; }
.id-picker-title {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.id-picker-caret { font-size: 10px; color: var(--text-dim); }
.id-picker-now {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neon-cyan);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.id-picker-panel {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 12px;
  background: rgba(6, 12, 22, 0.96);
  box-shadow: var(--shadow-card);
}
/* display:flex 会盖掉 [hidden] 自带的 display:none —— 不写这一行，身份列表就一直露在侧栏里。 */
.id-picker-panel[hidden] { display: none !important; }
.id-picker-item {
  all: unset;
  display: block;
  padding: 9px 11px;
  border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.id-picker-item:hover { background: rgba(168, 85, 247, 0.1); border-color: var(--border-glow); }
/* 有卡但没认证完：可见、可点（去认证），但不是一张能切的身份。 */
.id-picker-item.pending { opacity: 0.65; }
.id-picker-item.pending .ip-name { color: var(--text-dim); }
.id-picker-item.active {
  background: rgba(100, 116, 139, 0.16);
  border-color: rgba(100, 116, 139, 0.6);
}
.id-picker-item .ip-name {
  display: block;
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.id-picker-item .ip-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.id-picker-item .ip-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neon-cyan);
  letter-spacing: 0.02em;
}
.id-picker-item .ip-role {
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.alloc-tag {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-style: normal;
  color: var(--text-dim);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
}
.id-picker-empty {
  margin: 2px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
  cursor: pointer;
}
.id-picker-empty:hover { color: var(--neon-cyan); }

/* ---- 主身份页头（任何认证视图下都露着）--------------------------------- */
.card.id-hero {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(100, 116, 139, 0.06));
  border-color: rgba(168, 85, 247, 0.28);
}
.card.id-hero .section-header h3 { font-size: 16px; }
.card.id-hero .idv-grid { margin-top: 10px; }

/* ---- 高级工具里的两块 ------------------------------------------------ */
.idv-adv-inner { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(168, 85, 247, 0.18); }
.idv-adv-inner:first-of-type { border-top: none; padding-top: 0; }
.idv-adv-inner h3 { font-family: var(--font-display); font-size: 15px; }

/* ---- 复核台：机器结论 + 人工裁决 --------------------------------------- */
.rv-item {
  list-style: none;
  padding: 14px 16px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 10px;
  background: rgba(9, 14, 24, 0.5);
}
.rv-item + .rv-item { margin-top: 12px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-head b { font-family: var(--font-display); font-size: 14.5px; letter-spacing: 0.015em; }
.rv-kind {
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 1px 8px;
}
.rv-pill {
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 1px 9px;
  border: 1px solid transparent;
}
.rv-pill.ok { color: #7ee2a8; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.12); }
.rv-pill.err { color: #ff8a9a; border-color: rgba(255, 138, 154, 0.45); background: rgba(255, 138, 154, 0.12); }
.rv-pill.warn { color: #f5d48a; border-color: rgba(245, 212, 138, 0.4); background: rgba(245, 212, 138, 0.1); }
.rv-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: var(--text-dim); }
.rv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rv-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.rv-check {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.05);
  font-size: 12.5px;
  line-height: 1.7;
}
.rv-check b { font-weight: 600; }
.rv-check .rv-state { color: var(--text-dim); font-size: 11.5px; }
.rv-check.ok .rv-state { color: #7ee2a8; }
.rv-check.err .rv-state { color: #ff8a9a; }
.rv-check.warn .rv-state { color: #f5d48a; }
.rv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
  transform: translateY(-1px);
}
.rv-check.ok { color: #7ee2a8; }
.rv-check.err { color: #ff8a9a; }
.rv-check.warn { color: #f5d48a; }
.rv-check b, .rv-note { color: var(--text-main); }
.rv-note { flex-basis: 100%; margin-left: 15px; font-size: 11.5px; color: var(--text-dim); }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rv-reason {
  flex: 1 1 240px;
  min-width: 180px;
  font-family: var(--font-content);
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(4, 8, 16, 0.6);
  color: var(--text-main);
}
#rv-deny { color: #f5d48a; }
#rv-deny code { color: var(--neon-cyan); }

/* ---- 仲裁台：运维全景 + 派庭 / 投票 / 执行 ------------------------------ */
.arb-stat { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 0 10px 10px 0; border: 1px solid rgba(168, 85, 247, 0.16); border-radius: 12px; background: rgba(8, 14, 24, 0.6); }
.arb-stat-k { font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-dim); }
.arb-stat-v { font-family: var(--font-display); font-size: 18px; color: var(--text-main); }
.arb-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.arb-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(168, 85, 247, 0.14); border-radius: 10px; background: rgba(8, 14, 24, 0.45); font-size: 12.5px; }
.arb-line b { font-weight: 600; color: var(--text-main); }
.arb-line.err { border-color: rgba(255, 138, 154, 0.4); }
.arb-line.warn { border-color: rgba(245, 212, 138, 0.35); }
.arb-dim { color: var(--text-dim); font-size: 11.5px; }
.arb-note { flex-basis: 100%; margin-left: 2px; font-size: 11.5px; color: var(--text-dim); }
.arb-pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(168, 85, 247, 0.35); color: var(--text-dim); }
.arb-empty { list-style: none; padding: 6px 2px; font-size: 12.5px; color: var(--text-dim); }
.arb-sub { margin: 14px 0 4px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-dim); }
.arb-actions-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
#arb-deny { color: #f5d48a; }

/* ---- 验证者网络：机器节点的只读看板 ------------------------------------ */
.vn-stat { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 0 10px 10px 0; border: 1px solid rgba(168, 85, 247, 0.16); border-radius: 12px; background: rgba(8, 14, 24, 0.6); }
.vn-stat-k { font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-dim); }
.vn-stat-v { font-family: var(--font-display); font-size: 18px; color: var(--text-main); }
.vn-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12.5px; }
.vn-table th { padding: 8px 10px; text-align: left; font-weight: 600; color: var(--text-dim); border-bottom: 1px solid rgba(168, 85, 247, 0.2); white-space: nowrap; }
.vn-table td { padding: 8px 10px; color: var(--text-main); border-bottom: 1px solid rgba(168, 85, 247, 0.1); }
.vn-pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(168, 85, 247, 0.35); color: var(--text-dim); }
.vn-pill.ok { color: #7ee2a8; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.12); }
.vn-empty { padding: 14px; text-align: center; color: var(--text-dim); }
#vn-deny { color: #f5d48a; }

/* 主身份页：三步走 —— ① 连接钱包 ② 锁仓 USDC ③ 授权给身份，一步一行，不摊开。 */
.mst-step {
  border-top: 1px solid rgba(168, 85, 247, 0.14);
  padding: 18px 2px 6px;
  margin-top: 16px;
}
.mst-step:first-of-type { border-top: none; margin-top: 8px; }
.mst-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mst-head b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; }
.mst-state { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.mst-body { padding-left: 2px; }
.mst-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mst-select {
  min-width: 240px;
  max-width: 100%;
  background: rgba(8, 14, 24, 0.85);
  color: var(--text-main);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}
.mst-select:focus { outline: none; border-color: var(--border-glow); }
.mst-select option { background: #0a1220; color: var(--text-main); }
#mst-auth-amount { min-width: 180px; }

/* ── 主身份视角：侧栏只留「身份 · 认证」+「账单」+「设置」 ────────────── */
.nav-scope-hidden { display: none !important; }

/* 特权工作面（仲裁台 / 验证者网络）：不在白名单里就整组不画。
   .nav-group 自己写了 display:flex，会盖掉 [hidden] 的 UA 默认值，所以要显式一条。 */
.nav-group[hidden] { display: none !important; }

/* ── 主身份页：总账单 + 激活闸门 + 每身份一行额度 ──────────────────────── */
.mst-block {
  margin-top: 18px;
  padding: 16px 2px 2px;
  border-top: 1px solid rgba(168, 85, 247, 0.14);
}
.mst-block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mst-block-head b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; }
.mst-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-dim); }
.mst-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.mst-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 12px;
  background: rgba(8, 14, 24, 0.6);
}
.mst-metric-k { font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-dim); }
.mst-metric-v { font-family: var(--font-display); font-size: 20px; color: var(--text-main); }
.mst-metric-u { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-dim); }
.mst-metric-h { margin-top: 4px; font-size: 10.5px; line-height: 1.5; color: var(--text-dim); opacity: 0.75; }
.mst-empty { margin: 0; font-size: 12.5px; color: var(--text-dim); }

/* 激活闸门：未激活时是提示条，激活后变安静的一条绿。 */
.mst-gate {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(245, 212, 138, 0.35);
  border-left: 3px solid #f5d48a;
  border-radius: 12px;
  background: rgba(245, 212, 138, 0.06);
}
.mst-gate.on {
  border-color: rgba(168, 85, 247, 0.3);
  border-left-color: var(--neon-cyan);
  background: rgba(168, 85, 247, 0.06);
}
.mst-gate-dot { font-size: 12px; color: #f5d48a; line-height: 1; }
.mst-gate.on .mst-gate-dot { color: var(--neon-cyan); }
.mst-gate-text { flex: 1 1 320px; min-width: 220px; }
.mst-gate-text b { display: block; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.02em; }
.mst-gate-text p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.mst-gate .btn { flex: 0 0 auto; }

/* 每个身份一行：左边是谁，中间三个数，右边三个动作。 */
.mst-alloc { display: flex; flex-direction: column; gap: 10px; }
.mst-alloc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 12px;
  background: rgba(8, 14, 24, 0.55);
}
.mst-alloc-row.is-idle { border-style: dashed; opacity: 0.86; }
.mst-alloc-name { flex: 1 1 200px; min-width: 160px; }
.mst-alloc-name b { display: block; font-family: var(--font-display); font-size: 13.5px; }
.mst-alloc-sub { font-size: 11px; color: var(--text-dim); }
.mst-alloc-nums {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}
.mst-alloc-nums b { color: var(--text-main); font-family: var(--font-display); }
.mst-alloc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mst-alloc-actions input {
  width: 120px;
  background: rgba(8, 14, 24, 0.85);
  color: var(--text-main);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
}
.mst-alloc-actions input:focus { outline: none; border-color: var(--border-glow); }
.mst-alloc-actions .btn { padding: 9px 12px; font-size: 12px; }
.mst-alloc-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- 接入确认（设置页）：匹配码激活 ---------------------------------- */
/* agent 申请绑定公钥后，主人在这里输匹配码 + 钱包签名，绑定才生效。
   卡片高亮 + 侧栏红点，都是为了「不在设置页时也能看见」。 */
#ag-bind-requests.attention {
  border-color: rgba(255, 93, 93, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 93, 93, 0.22);
}
#ag-bind-requests .ag-hint { font-size: 12px; color: #6c8aac; margin: 8px 0 0; line-height: 1.7; }
#ag-bind-requests .ag-secret-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
#ag-bind-requests .ag-snippet {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.18);
}
#ag-bind-requests input[type="text"] {
  width: 190px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(6, 12, 20, 0.85);
  color: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#ag-bind-requests input[type="text"]:focus { outline: none; border-color: var(--border-glow); }
#ag-bind-requests .err { font-size: 12px; color: #ff8a8a; margin: 8px 0 0; }

/* 侧栏红点：有待确认的接入请求（红）或未读站内提醒（紫）时挂在「设置」上 */
.nav .nav-main.has-pending,
.nav .nav-main.has-notice { position: relative; }
.nav .nav-main.has-pending::after,
.nav .nav-main.has-notice::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #ff5d5d;
  box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.16);
}
.nav .nav-main.has-notice:not(.has-pending)::after {
  background: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
}

/* 提示弹窗：新接入请求出现时，把主人叫到输码框。只导流，签名仍在卡片里做。 */
.bind-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 14, 0.72);
}
.bind-modal[hidden] { display: none; }
.bind-modal-box {
  width: min(460px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: #0d1522;
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.bind-modal-box h4 { margin: 0 0 10px; font-size: 15px; color: var(--text-main); }
.bind-modal-box p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.75; color: var(--text-dim); }
.bind-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* ---- 已授权 · 一键取消绑定（设置页） -------------------------------- */
/* 已经绑了 agent 公钥的钥匙列在这里，随时可以摘掉公钥（回到「未激活」）。
   它和「接入确认」是一对：那张卡管进得来，这张卡管退得掉。 */
#ag-bound-keys .ag-hint { font-size: 12px; color: #6c8aac; margin: 8px 0 0; line-height: 1.7; }
#ag-bound-keys .ag-secret-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
#ag-bound-keys .ag-snippet {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.18);
}
#ag-bound-keys .err { font-size: 12px; color: #ff8a8a; margin: 8px 0 0; }
#ag-bound-keys li { font-size: 12px; color: #9fb6cc; line-height: 1.7; }
/* 有未读的钥匙提醒（取消绑定这类不可逆动作）时，卡片也跟着高亮一下 */
#ag-bound-keys.attention {
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.22);
}

/* ---------------------------------------------------------------- 节点层
   去中心化的接入面：顶栏一颗胶囊 + 一个下拉，设置页一张卡片。
   绿色=可用，红色=连不上，灰色=还没测过。 */
.node-wrap { flex: 0 0 auto; }
.node-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 100px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: #0c1220;
  color: #e2f0ff;
  font-size: 12px;
  cursor: pointer;
  max-width: 260px;
}
.node-chip:hover { background: rgba(168, 85, 247, 0.12); }
.node-chip.is-down { border-color: #ff8a9a; }
.node-chip-key { color: var(--text-dim); white-space: nowrap; }
.node-chip-name {
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.node-chip-ms { color: var(--text-dim); font-family: monospace; }
.node-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #64748b; }
.node-dot.ok { background: #34d399; box-shadow: 0 0 6px #34d399; }
.node-dot.down { background: #ff8a9a; box-shadow: 0 0 6px #ff8a9a; }
.node-dot.unknown { background: #64748b; }
.node-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 60;
  width: min(440px, 100%);
  padding: 14px;
  background: #0a1523;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.12s ease-out;
}
.node-menu-head b { display: block; font-size: 13px; color: #e2f0ff; margin-bottom: 4px; }
.node-menu-head p { margin: 0 0 10px; font-size: 11px; line-height: 1.6; color: var(--text-dim); }
.node-menu-list, .node-settings-list { display: grid; gap: 6px; }
.node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
}
.node-row.is-current { border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.07); }
.node-row-label {
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.node-row-kind, .node-row-state { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.node-row-url {
  font-size: 10px;
  color: var(--text-dim);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-row-ms { font-family: monospace; font-size: 11px; color: var(--neon-mint); }
.btn.small { padding: 4px 10px; font-size: 11px; border-radius: 8px; }
.btn.ghost { background: transparent; }
.node-menu-foot { display: flex; gap: 8px; margin-top: 10px; }
.node-status { margin-top: 8px; font-size: 11px; color: var(--neon-mint); min-height: 14px; word-break: break-all; }
.node-toast { font-size: 12px; color: #fde68a; }
.node-auto { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #e2f0ff; margin-top: 6px; }
.node-auto-hint { margin: 4px 0 12px; font-size: 11px; color: var(--text-dim); }
.node-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.node-add b { flex: 0 0 100%; font-size: 12px; color: #e2f0ff; }
.node-add input {
  background: #0c1220;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  padding: 7px 10px;
  color: #e2f0ff;
  font-size: 12px;
}
.node-add input[data-node-add-base] { flex: 1 1 260px; }
.node-copy { margin-top: 14px; }
.node-copy p { margin: 0 0 6px; font-size: 12px; color: #e2f0ff; }
.node-endpoint {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0c1220;
  border: 1px dashed rgba(168, 85, 247, 0.35);
  font-size: 12px;
  color: var(--neon-mint);
  word-break: break-all;
  margin-bottom: 8px;
}

/* ---- 安全验证 · 2FA（设置页卡片 + 动额度前的弹窗） ---------------------- */
/* 不记名的钥匙 + 授权额度 = 谁拿到谁能花，所以「加额 / 减额 / 取消授权」和
   「停用钥匙 / 取消绑定」都要过一次手机验证器生成的 6 位码。
   绑定 / 换恢复码 / 解绑在设置页那张卡里；弹窗只在动钱前出现。
   渲染见 scripts/cyber-console-2fa.js。 */
#k2fa-card .k2fa-state { margin: 0 0 8px; font-size: 12.5px; color: var(--text-main); }
#k2fa-card .k2fa-state.k2fa-on { color: var(--neon-cyan); }
#k2fa-card .k2fa-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.7; color: #6c8aac; }
#k2fa-card .k2fa-hint.k2fa-good { color: var(--neon-mint); }
#k2fa-card .k2fa-hint.k2fa-bad { color: #ff8a9a; }
#k2fa-card .k2fa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#k2fa-card .k2fa-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
#k2fa-card .k2fa-inline input {
  flex: 0 1 190px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0c1220;
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
}
#k2fa-card .k2fa-inline input:focus { outline: none; border-color: var(--border-glow); }
#k2fa-card .k2fa-secret {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0c1220;
  border: 1px dashed rgba(168, 85, 247, 0.35);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--neon-mint);
  word-break: break-all;
}
#k2fa-card .k2fa-codes { margin-top: 12px; }
#k2fa-card .k2fa-codes ol { margin: 8px 0 12px; padding-left: 22px; }
#k2fa-card .k2fa-codes li { font-size: 12.5px; color: var(--text-main); }
#k2fa-card .k2fa-codes code { font-family: var(--font-display); letter-spacing: 0.1em; }

.k2fa-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 14, 0.72);
}
.k2fa-modal[hidden] { display: none; }
.k2fa-box {
  width: min(400px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: #0d1522;
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.k2fa-box h3 { margin: 0 0 8px; font-size: 15px; color: var(--text-main); }
.k2fa-box .k2fa-sub { margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.k2fa-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0a1220;
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.28em;
  text-align: center;
}
.k2fa-box input:focus { outline: none; border-color: var(--border-glow); }
.k2fa-box .k2fa-err { margin: 8px 0 0; min-height: 16px; font-size: 11.5px; line-height: 1.6; color: #ff8a9a; opacity: 0; }
.k2fa-box .k2fa-err.on { opacity: 1; }
.k2fa-box .k2fa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* 交接码：主人在操作台看到、亲手交给 agent 的那串码。要大到能照着念，
   所以按「一遍看清」来排，而不是按普通提示文案。 */
.pair-handoff-code {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--neon-cyan, #d8b4fe);
  border-radius: 12px;
  background: rgba(75, 214, 255, 0.08);
}
.pair-handoff-code .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 6px;
  font-weight: 700;
  color: var(--neon-cyan, #d8b4fe);
}
.pair-handoff-code .meta { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-dim, #9fb4c8); }
.pair-handoff-code .meta.err { color: #ff8a9a; }

/* Karma Console — centered Earth globe background (golden light) */
.bg-globe {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bg-globe::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(130vmin, 1500px);
  height: min(130vmin, 1500px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(168, 85, 247, 0.20), rgba(168, 85, 247, 0) 52%),
    radial-gradient(circle at 72% 22%, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0) 48%),
    radial-gradient(circle at 50% 78%, rgba(100, 116, 139, 0.16), rgba(100, 116, 139, 0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255, 196, 96, 0.10), rgba(255, 196, 96, 0) 62%);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.22),
    0 0 110px rgba(168, 85, 247, 0.18),
    0 0 170px rgba(100, 116, 139, 0.15);
  filter: blur(8px);
}
.bg-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(168, 85, 247, 0.035) 0 1px, rgba(168, 85, 247, 0) 1px 4px),
    radial-gradient(circle at 50% 50%, rgba(3, 6, 12, 0.12) 0%, rgba(3, 6, 12, 0.42) 58%, rgba(3, 6, 12, 0.94) 100%);
}
.bg-globe canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter:
    drop-shadow(0 0 34px rgba(168, 85, 247, 0.22))
    drop-shadow(0 0 80px rgba(100, 116, 139, 0.20))
    drop-shadow(0 0 46px rgba(255, 190, 90, 0.24));
}
.bg-globe .globe-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76vmin, 860px);
  height: min(76vmin, 860px);
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.96;
  filter:
    drop-shadow(0 0 34px rgba(168, 85, 247, 0.22))
    drop-shadow(0 0 80px rgba(100, 116, 139, 0.20))
    drop-shadow(0 0 46px rgba(255, 190, 90, 0.24));
}
.globe-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(72vmin, 760px);
  height: min(72vmin, 760px);
  border-radius: 50%;
  background-image: url("../assets/earth-texture.jpg");
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: globe-pan 90s linear infinite;
  box-shadow:
    inset -70px -50px 150px rgba(0, 0, 0, 0.62),
    inset 40px 26px 90px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 200, 110, 0.16),
    0 0 120px rgba(255, 180, 80, 0.34);
  opacity: 0.55;
  display: none;
}
.bg-globe.fallback .globe-fallback { display: block; }
@keyframes globe-pan {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

/* ---- 「选择身份」面板里的分组小标题 ------------------------------------
   面板现在分两段：上面是「身份与岗位」（验证者 / 仲裁者两个申请表），
   下面是「注册代理身份」（现有的子身份卡）。没有小标题这两段会连成一片，
   用户会以为「验证者身份」也是一张能切过去的子身份卡。 */
.sub-switch-head,
.id-picker-head-row {
  margin: 2px 2px 0;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sub-switch-item.sub-switch-role { color: var(--neon-cyan); }
.id-picker-item.role-entry .ip-name { color: var(--neon-cyan); }

/* ---- 验证者身份 / 仲裁者身份：两步流程 + 口径表 --------------------------- */
.role-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.role-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 12px;
  background: rgba(8, 14, 24, 0.6);
}
.role-step b { font-family: var(--font-nav); font-size: 13px; color: var(--text-main); }
.role-step span { font-family: var(--font-content); font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

.rate-table { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rate-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 10px;
  background: rgba(8, 14, 24, 0.5);
}
.rate-row .rate-k {
  flex: 0 0 132px;
  font-family: var(--font-content);
  font-size: 12px;
  color: var(--text-dim);
}
.rate-row .rate-v {
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}
.rate-row .rate-h { font-size: 11.5px; font-style: normal; color: var(--text-dim); }
.rate-table:empty::before {
  content: "—";
  color: var(--text-dim);
  font-size: 12px;
}


/* 验证者身份页：节点签名的「待签文字」。
   原样展示、不翻译（PRE 在 i18n 里本来就跳过），所以这段永远是机器可读的原文。 */
#vi-sign-msg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow: auto;
}