/* ========== 支付大脑 · 开放平台 open.css ========== */

/* ---------- 布局骨架 ---------- */
.op-layout { display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.op-side {
  width:248px; flex-shrink:0; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:12px 10px;
  position:sticky; top:70px; max-height:calc(100vh - 90px); overflow-y:auto;
}
.op-main { flex:1; min-width:0; }

/* ---------- 顶部概览条 ---------- */
.op-overview {
  display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.op-ov-item {
  flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px;
}
.op-ov-item b { display:block; font-size:var(--fs-num); font-weight:800; color:var(--text); }
.op-ov-item span { display:block; font-size:var(--fs-xs); color:var(--dim); margin-top:3px; letter-spacing:0.3px; }
.op-ov-item.blue b { color:var(--blue); }
.op-ov-item.gold b { color:var(--gold); }
.op-ov-item.purple b { color:var(--purple); }

/* ---------- 权限提示条（师徒班专属） ---------- */
.op-mentor-bar {
  display:flex; align-items:center; gap:10px; background:rgba(114,46,209,0.05);
  border:1px solid rgba(114,46,209,0.25); border-radius:10px; padding:10px 14px; margin-bottom:14px;
}
.op-mentor-bar .tag { flex-shrink:0; }
.op-mentor-bar p { font-size:var(--fs-sm); color:var(--muted); line-height:1.7; }
.op-mentor-bar p b { color:var(--purple); }

/* ---------- 树形菜单 ---------- */
.op-cat { margin-bottom:4px; }
.op-cat-head {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  cursor:pointer; user-select:none;
}
.op-cat-head:hover { background:var(--panel2); }
.op-cat-head .op-caret {
  width:0; height:0; border-left:4px solid var(--dim); border-top:3px solid transparent;
  border-bottom:3px solid transparent; transition:transform .15s; flex-shrink:0;
}
.op-cat.open > .op-cat-head .op-caret { transform:rotate(90deg); }
.op-cat-head b { font-size:var(--fs-h3); font-weight:700; color:var(--text); letter-spacing:0.3px; }
.op-cat-head .op-count {
  font-size:var(--fs-2xs); color:var(--dim); background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; padding:1px 7px; margin-left:auto;
}
.op-cat-body { display:none; padding:2px 0 6px 12px; }
.op-cat.open > .op-cat-body { display:block; }

/* 系统层 */
.op-sys { margin-bottom:2px; }
.op-sys-head {
  display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:7px;
  cursor:pointer; user-select:none;
}
.op-sys-head:hover { background:var(--panel2); }
.op-sys-head .op-caret {
  width:0; height:0; border-left:4px solid var(--dim); border-top:3px solid transparent;
  border-bottom:3px solid transparent; transition:transform .15s; flex-shrink:0;
}
.op-sys.open > .op-sys-head .op-caret { transform:rotate(90deg); }
.op-sys-head b { font-size:var(--fs-body); font-weight:600; color:var(--text); }
.op-sys-head small { font-size:var(--fs-2xs); color:var(--dim); margin-left:auto; white-space:nowrap; }
.op-sys-body { display:none; padding:2px 0 4px 14px; }
.op-sys.open > .op-sys-body { display:block; }

/* 文档叶节点 */
.op-leaf {
  display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:7px;
  font-size:var(--fs-body); color:var(--muted); cursor:pointer;
  border-left:2px solid transparent;
}
.op-leaf:hover { background:var(--panel2); color:var(--text); }
.op-leaf.on { background:rgba(22,93,255,0.07); color:var(--blue); font-weight:600; border-left-color:var(--blue); }
.op-leaf .op-doc-ico { width:14px; height:14px; flex-shrink:0; color:inherit; opacity:0.75; }

/* ---------- 文档区 ---------- */
.op-doc-head { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px 14px; margin-bottom:12px; }
.op-crumb { font-size:var(--fs-xs); color:var(--dim); letter-spacing:0.3px; margin-bottom:8px; }
.op-crumb b { color:var(--muted); font-weight:600; }
.op-doc-title { font-size:var(--fs-h1); font-weight:900; color:var(--text); letter-spacing:0.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.op-doc-title .tag { flex-shrink:0; }
.op-doc-brief { font-size:var(--fs-body); color:var(--muted); line-height:1.8; margin-top:8px; }

/* 四件套 tab */
.op-tabs { display:flex; gap:6px; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; flex-wrap:wrap; }
.op-tab {
  font-size:var(--fs-sm); color:var(--muted); padding:6px 13px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:6px; letter-spacing:0.3px;
}
.op-tab:hover { color:var(--text); border-color:var(--line2); }
.op-tab.on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
.op-tab svg { width:13px; height:13px; }

/* ---------- 文档正文 ---------- */
.op-doc-body { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; line-height:1.85; }
.op-doc-body h4 { font-size:var(--fs-h3); font-weight:800; color:var(--text); margin:18px 0 10px; letter-spacing:0.3px; display:flex; align-items:center; gap:8px; }
.op-doc-body h4:first-child { margin-top:0; }
.op-doc-body h4::before { content:""; width:3px; height:14px; background:var(--blue); border-radius:2px; flex-shrink:0; }
.op-doc-body p { font-size:var(--fs-body); color:var(--muted); margin-bottom:10px; }
.op-doc-body ul { margin:0 0 12px 4px; list-style:none; }
.op-doc-body ul li { font-size:var(--fs-body); color:var(--muted); padding:3px 0 3px 16px; position:relative; }
.op-doc-body ul li::before { content:""; position:absolute; left:2px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:0.5; }
.op-doc-body ul li b { color:var(--text); font-weight:600; }

/* 名词速查 */
.op-terms { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0; }
.op-terms h4 { margin:0 0 8px !important; }
.op-terms h4::before { display:none; }
.op-term { display:flex; gap:10px; padding:5px 0; font-size:var(--fs-body); }
.op-term b { color:var(--blue); font-weight:700; flex-shrink:0; min-width:72px; }
.op-term span { color:var(--muted); }

/* 表格 */
.op-table { width:100%; border-collapse:collapse; margin:8px 0 14px; }
.op-table th { font-size:var(--fs-sm); font-weight:700; color:var(--text); text-align:left; background:var(--panel2); padding:8px 10px; border:1px solid var(--line); white-space:nowrap; }
.op-table td { font-size:var(--fs-sm); color:var(--muted); padding:7px 10px; border:1px solid var(--line); vertical-align:top; }
.op-table td:first-child { color:var(--text); font-weight:500; white-space:nowrap; }

/* 代码块 */
.op-code {
  font-family:var(--mono); font-size:var(--fs-sm); color:#c9d4e4; line-height:1.8;
  background:#1d2433; border:1px solid #2b3450; border-radius:10px;
  padding:13px 16px; margin:8px 0 14px; overflow-x:auto; white-space:pre;
}

/* 流程图 */
.op-flow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.op-node {
  font-size:var(--fs-sm); color:var(--text); background:var(--panel2);
  border:1px solid var(--line2); border-radius:8px; padding:5px 11px; white-space:nowrap; font-weight:500;
}
.op-node.done { color:var(--green); border-color:rgba(0,180,42,0.4); background:rgba(0,180,42,0.06); }
.op-node.fail { color:var(--red); border-color:rgba(245,63,63,0.4); background:rgba(245,63,63,0.05); }
.op-arrow { color:var(--dim); font-size:var(--fs-sm); }
.op-gap { width:18px; }

/* ---------- 待上线占位 ---------- */
.op-soon {
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:44px 30px; text-align:center;
}
.op-soon-ico { width:44px; height:44px; margin:0 auto 14px; color:var(--dim); }
.op-soon h3 { font-size:var(--fs-h1); font-weight:900; color:var(--text); letter-spacing:0.5px; display:flex; align-items:center; justify-content:center; gap:10px; }
.op-soon p { font-size:var(--fs-body); color:var(--muted); line-height:1.9; max-width:560px; margin:10px auto 0; }

/* ---------- 权限锁定卡 ---------- */
.op-lock {
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:46px 30px; text-align:center;
}
.op-lock-ico { width:46px; height:46px; margin:0 auto 16px; color:var(--purple); }
.op-lock h3 { font-size:var(--fs-h1); font-weight:900; color:var(--text); letter-spacing:0.5px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.op-lock-desc { font-size:var(--fs-body); color:var(--muted); line-height:1.95; max-width:600px; margin:12px auto 0; }
.op-lock-perks { display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.op-lock-perks span { font-size:var(--fs-sm); color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 13px; }
.op-lock-perks span b { color:var(--purple); font-weight:600; }
.op-lock-actions { display:flex; gap:10px; justify-content:center; margin-top:20px; }

/* ---------- 响应式 ---------- */
@media (max-width:900px) {
  .op-layout { flex-direction:column; }
  .op-side { width:100%; position:static; max-height:280px; }
}