/* ==========================================================================
   平台管理台视觉增强
   作用域全部限定在 #admin-body（平台管理各页的唯一容器），不影响前台任何页面。
   思路：先给每页一个「主题色」，再用这同一个色去渲染卡片顶部色带、标题区淡底、
   图标底、表格表头与斑马纹——同一页只有一个色相，避免变成彩虹堆砌。
   ========================================================================== */

/* ------------------------------ 1. 每页主题色 ------------------------------ */
/* 色相按页面语义分配：组织/用户=蓝，权限/授权=紫，接口=青，存储=金，日志=石板灰 */
#admin-body[data-tab='org']       { --ac:#3B6FF5; --ac-soft:#F2F6FF; --ac-ink:#2B54C7 }
#admin-body[data-tab='users']     { --ac:#2F6FE4; --ac-soft:#F1F6FE; --ac-ink:#2454B4 }
#admin-body[data-tab='grants']    { --ac:#7C4DFF; --ac-soft:#F5F2FF; --ac-ink:#5F35D6 }
#admin-body[data-tab='roles']     { --ac:#8A5CF6; --ac-soft:#F6F3FF; --ac-ink:#6B3FE0 }
#admin-body[data-tab='providers'] { --ac:#0EA5A5; --ac-soft:#EEFAFA; --ac-ink:#0B8282 }
#admin-body[data-tab='sources']   { --ac:#0F9D8C; --ac-soft:#EDFAF7; --ac-ink:#0B7D70 }
#admin-body[data-tab='storage']   { --ac:#C08A2E; --ac-soft:#FCF7EC; --ac-ink:#9A6D1F }
#admin-body[data-tab='branding']  { --ac:#DB2777; --ac-soft:#FDF1F7; --ac-ink:#B01A5E }
#admin-body[data-tab='logs']      { --ac:#5B708C; --ac-soft:#F4F7FA; --ac-ink:#44576F }
/* 兜底：仍未覆盖的页用品牌蓝 */
#admin-body{ --ac:#3B6FF5; --ac-soft:#F2F6FF; --ac-ink:#2B54C7 }

/* ------------------------------ 2. 卡片 ------------------------------ */
/* 顶部 3px 主题色带：给每张卡片一个明确的"起点"，但只占极小面积，不喧宾夺主 */
#admin-body .card{ position:relative }
#admin-body .card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 35%,#fff));
  border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:1;pointer-events:none;
}
#admin-body .card:has(> .card-head)::before{ border-radius:var(--r-lg) var(--r-lg) 0 0 }

/* 标题区：淡主题色渐隐，和纯白正文拉开层次 */
#admin-body .card > .card-head{
  background:linear-gradient(180deg,#fff,var(--ac-soft));
  border-bottom:1px solid color-mix(in srgb,var(--ac) 14%,transparent);
}
#admin-body .card > .card-head .icobox{
  background:var(--ac-soft);color:var(--ac);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 18%,transparent);
}
#admin-body .card > .card-head .icobox svg{ color:var(--ac) }
#admin-body .card > .card-head h3{ letter-spacing:-.015em }

/* 卡片内嵌的次级面板：用主题色极淡底代替纯白，避免"白上叠白"看不出边界 */
#admin-body .card .card{
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
#admin-body .card .card::before{ height:2px }

/* ------------------------------ 3. 表格 ------------------------------ */
#admin-body table thead th{
  background:var(--ac-soft);
  color:var(--ac-ink);font-weight:600;
  border-bottom:1px solid color-mix(in srgb,var(--ac) 16%,transparent);
}
#admin-body table tbody tr:nth-child(even){ background:color-mix(in srgb,var(--ac-soft) 55%,#fff) }
#admin-body table tbody tr:hover{ background:color-mix(in srgb,var(--ac-soft) 85%,#fff) }
#admin-body table tbody td{ border-bottom:1px solid var(--ink-100) }

/* ------------------------------ 4. 组织树 ------------------------------ */
/* 四级组织各给一个极淡的底色，一眼能分出层级；不用灰色，避免看起来像"已停用" */
#admin-body .tree-node{ border:1px solid transparent }
#admin-body .tree-node[data-type='HQ']{
  background:#F1F5FF;border-color:#DCE6FF;
}
#admin-body .tree-node[data-type='OC']{
  background:#F3F0FF;border-color:#E4DCFF;
}
#admin-body .tree-node[data-type='BRANCH']{
  background:#EFFAF7;border-color:#D6F1EA;
}
#admin-body .tree-node[data-type='CUSTOMER']{
  background:#FDF8EE;border-color:#F3E6C9;
}
#admin-body .tree-node:hover{ filter:brightness(.985) }
#admin-body .tree-node.sel{ box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 30%,transparent) }
/* 层级标签：把行内浅色标签的边框补上，边界更清楚 */
#admin-body .tree-node .tag{ border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent) }

/* ------------------------------ 5. 键值信息（修截断） ------------------------------ */
/* 原样式对 .kv 的值做了 nowrap + ellipsis，接口地址 / Endpoint 会被切掉显示不全 */
#admin-body .kv b,#admin-body .kv span,#admin-body .kv div{
  white-space:normal;overflow:visible;text-overflow:clip;
  word-break:break-all;line-height:1.6;
}

/* ------------------------------ 6. 授权进度条 ------------------------------ */
/* 能力覆盖百分比：用主题色描边，和页面其他元素呼应 */
#admin-body .progress{ background:color-mix(in srgb,var(--ac) 12%,#fff) }
#admin-body .progress > i,#admin-body .progress > span{
  background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#fff));
}
/* 空状态与加载骨架的底色也跟随主题色 */
#admin-body .empty .ic{ background:var(--ac-soft);color:var(--ac) }

/* ------------------------------ 7. 接口连通性测试结果 ------------------------------ */
/* 未测试过时不留空白占位 */
#admin-body .pvd-test:empty{ display:none }
#admin-body .pvd-test{
  margin-top:11px;padding:11px 13px;border-radius:var(--r);
  background:var(--ink-25);border:1px solid var(--ink-150);
}
#admin-body .pvd-test-hd{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--t-13);margin-bottom:9px;
}
#admin-body .pvd-test-hd b{ font-weight:600 }
#admin-body .pvd-test-hd span{ font-size:var(--t-11);color:var(--ink-400) }
#admin-body .pvd-test-hd.ok{ color:var(--ok) }
#admin-body .pvd-test-hd.err{ color:var(--danger) }

/* 逐环节结果：一行一步，对错用色块区分，失败原因直接可读 */
#admin-body .pvd-test-step{
  display:flex;gap:9px;align-items:flex-start;
  padding:7px 0;border-top:1px dashed var(--ink-150);
  font-size:var(--t-12);line-height:1.7;
}
#admin-body .pvd-test-step:first-of-type{ border-top:none }
#admin-body .pvd-test-step > i{
  flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-style:normal;font-weight:700;line-height:1;
}
#admin-body .pvd-test-step.ok > i{ background:var(--ok-bg);color:var(--ok) }
#admin-body .pvd-test-step.err > i{ background:#FDECEC;color:var(--danger) }
#admin-body .pvd-test-step > div{ flex:1;min-width:0 }
#admin-body .pvd-test-step b{ font-weight:600;color:var(--ink-800);margin-right:7px }
#admin-body .pvd-test-step span{ color:var(--ink-600);word-break:break-all }

/* ------------------------------ 7. 小程序上线教程页 ------------------------------ */
#admin-body[data-tab='mp']{ --ac:#07A05A; --ac-soft:#EEFAF3; --ac-ink:#067C46 }

/* 顶部概览 */
.mp-hero{ margin-bottom:14px }
.mp-facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px }
.mp-fact{
  border:1px solid var(--ink-150);border-radius:var(--r);padding:11px 13px;
  background:var(--ac-soft);min-width:0;
}
.mp-fact > span{ display:block;font-size:var(--t-11);color:var(--ink-500);margin-bottom:5px }
.mp-fact > b{
  display:block;font-size:var(--t-13);color:var(--ink-900);font-weight:600;
  word-break:break-all;line-height:1.5;
}
.mp-fact > em{ display:block;font-size:var(--t-11);color:var(--ink-400);font-style:normal;margin-top:4px;line-height:1.6 }
.mp-fact > button{ margin-top:8px }
.mp-fact.warn{ background:#FFF8EC;border-color:#F2E1BE }
.mp-fact.warn > em{ color:#9A6D1F }
.mp-fact.ok{ background:#EEFAF3;border-color:#CBEEDB }

/* 快速跳转 */
.mp-toc{ margin-bottom:14px }
.mp-toc-a{
  display:inline-flex;align-items:center;font-size:var(--t-12);
  padding:5px 11px;border-radius:var(--r-full);
  background:var(--ac-soft);color:var(--ac-ink);
  border:1px solid color-mix(in srgb,var(--ac) 16%,transparent);
  white-space:nowrap;
}
.mp-toc-a:hover{ background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac-ink) }

/* 步骤卡片 */
.mp-step{ margin-bottom:14px;scroll-margin-top:16px }
.mp-step .icobox{ border-radius:10px }
.mp-ul{ margin:0;padding-left:18px;font-size:var(--t-13);color:var(--ink-700);line-height:1.95 }
.mp-ul li{ margin-bottom:5px }
.mp-ul code,.mp-note code,.mp-step code{ font-family:var(--ff-num);font-size:.92em }

/* 行内代码 */
.mp-code{
  background:var(--ink-50);border:1px solid var(--ink-150);border-radius:5px;
  padding:1px 6px;color:var(--ink-800);word-break:break-all;
}

/* 补充说明条 */
.mp-note{
  margin-top:12px;padding:11px 14px;border-radius:var(--r);
  background:var(--ink-25);border-left:3px solid var(--ac);
  font-size:var(--t-12);color:var(--ink-600);line-height:1.85;
}

/* 文件改动块 */
.mp-file{ margin-bottom:12px }
.mp-file-h{
  display:flex;align-items:center;gap:6px;
  font-size:var(--t-12);font-weight:600;color:var(--ink-700);
  margin-bottom:6px;
}
.mp-pre{
  margin:0;padding:13px 15px;border-radius:var(--r);
  background:#0F1729;color:#D7E2F5;
  font-family:var(--ff-num);font-size:var(--t-12);line-height:1.85;
  overflow-x:auto;white-space:pre;
}
.mp-pre .c{ color:#7E90B0 }   /* 注释 */
.mp-pre .s{ color:#8BE0A8 }   /* 要填的值 */

/* 上线检查清单 */
.mp-check{
  display:flex;align-items:flex-start;gap:9px;
  padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--t-13);color:var(--ink-700);line-height:1.7;
  transition:background .14s var(--ease);
}
.mp-check:hover{ background:var(--ac-soft) }
.mp-check input{ width:15px;height:15px;margin:2px 0 0;accent-color:var(--ac);flex:none;cursor:pointer }
.mp-check input:checked + span{ color:var(--ink-400);text-decoration:line-through }

/* ==================== 小程序上线（傻瓜模式） ==================== */

/* 自检清单：用色块让用户一眼扫出哪项是红的 */
.mp-chks{ display:flex;flex-direction:column }
.mp-chk{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 2px;border-bottom:1px solid var(--ink-100);
}
.mp-chk:last-child{ border-bottom:none }
.mp-chk .mk{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.mp-chk .tx{ flex:1;min-width:0 }
.mp-chk .tx b{ display:block;font-size:var(--t-13);font-weight:600;color:var(--ink-900) }
.mp-chk .tx span{ display:block;font-size:var(--t-12);color:var(--ink-600);margin-top:3px;word-break:break-all }
.mp-chk .tx em{ display:block;font-size:var(--t-11);font-style:normal;color:var(--ink-400);margin-top:4px;line-height:1.65 }
.mp-chk.ok .mk{ background:#E4F7EC;color:#1F7A45 }
.mp-chk.bad .mk{ background:#FDE8E8;color:#C0392B }
.mp-chk.bad .tx em{ color:#B4443A }
.mp-chk.skip .mk{ background:var(--ink-100);color:var(--ink-400) }
.mp-chk.skip .tx b{ color:var(--ink-600) }

/* App 打包页的表单：窄的两列自适应，屏宽不够自动落成单列 */
.mp-form{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px }

/* 提示类信息（如「证书已就绪，只是本页用 http 打开的」）：
   用中性底色，与红色的待处理项区分开，避免把「已通过但有话说」渲染成错误 */
.mp-notice{
  margin-top:8px;padding:8px 11px;border-radius:var(--r-xs);
  background:var(--brand-50);border-left:2px solid var(--brand-400);
  font-size:var(--t-12);color:var(--ink-600);line-height:1.8;
}

/* 待处理项的「怎么办」：给一条可执行的下一步，而不是只说哪里不对 */
.mp-fix{
  margin-top:8px;padding:9px 12px;border-radius:var(--r-xs);
  background:var(--ink-25);border-left:2px solid var(--ac);
  font-size:var(--t-12);color:var(--ink-600);line-height:1.8;
}
/* 需要执行的命令：等宽字体 + 一键复制，省得用户手打域名打错 */
.mp-cmd{ display:flex;align-items:center;gap:8px;margin-top:7px }
.mp-cmd .mp-code{ flex:1;min-width:0;background:#fff;padding:5px 9px }

/* 步骤：编号圆点 + 内容 */
.mp-acts{ margin-bottom:14px }
.mp-act{ display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--ink-100) }
.mp-act:first-child{ padding-top:4px }
.mp-act:last-child{ border-bottom:none;padding-bottom:2px }
.mp-act-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ac);color:#fff;font-size:var(--t-12);font-weight:700;
}
.mp-act-b{ flex:1;min-width:0 }
.mp-act-b > b{ display:block;font-size:var(--t-14);color:var(--ink-900);margin-bottom:5px }

/* 域名清单：一条一行，右边带复制按钮 */
.mp-dom{ display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--ink-100) }
.mp-dom-l{ flex:none;width:152px;display:flex;align-items:center;gap:7px;flex-wrap:wrap }
.mp-dom-r{ flex:1;min-width:0;display:flex;flex-direction:column;gap:6px }
.mp-dom-v{ display:flex;align-items:center;gap:8px;font-size:var(--t-12);word-break:break-all }
.mp-dom-v .mp-code{ flex:1;min-width:0 }

/* 折叠区：排障资料默认收起，不吓人 */
.mp-fold{ margin-bottom:14px }
.mp-fold > summary{
  display:flex;align-items:center;gap:8px;
  padding:13px 18px;cursor:pointer;list-style:none;
  font-size:var(--t-13);font-weight:600;color:var(--ink-700);
}
.mp-fold > summary::-webkit-details-marker{ display:none }
.mp-fold > summary::after{ content:"▾";margin-left:auto;color:var(--ink-400);transition:.2s var(--ease) }
.mp-fold[open] > summary::after{ transform:rotate(180deg) }
.mp-fold > summary:hover{ background:var(--ink-25) }
.mp-fold[open] > summary{ border-bottom:1px solid var(--ink-100) }

@media (max-width:620px){
  .mp-dom{ flex-direction:column;gap:6px }
  .mp-dom-l{ width:auto }
}