/* ============================================================
   码泓简单｜AI组件小店 · 账号域共享样式（JD-ACCT-1017）
   与 /h5/app/index.html 同一套令牌体系（saas-modern / --xia-*）
   零 emoji；图标走内联 SVG；三视口零横向溢出
   ============================================================ */
:root{
  --p50:#F0F9FF; --p100:#E0F2FE; --p300:#7DD3FC; --p500:#0EA5E9; --p600:#0284C7; --p700:#0369A1;
  --n0:#FFFFFF; --n50:#F8FAFC; --n100:#F1F5F9; --n200:#E2E8F0; --n300:#CBD5E1;
  --n500:#64748B; --n700:#334155; --n900:#0F172A;
  --s50:#ECFDF5; --s500:#10B981; --w50:#FFFBEB; --w500:#F59E0B; --d50:#FEF2F2; --d500:#EF4444;
  --ink:#0C6BA0; --ink-soft:#E6F0F5;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh1:0 1px 2px rgba(15,23,42,.06); --sh2:0 4px 16px rgba(15,23,42,.08); --sh3:0 14px 36px rgba(15,23,42,.12);
}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;height:100%}
body{
  background:var(--n50); color:var(--n900);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--p600);text-decoration:none}
a:hover{text-decoration:underline}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:16px;height:16px}
.ic-xs{width:12px;height:12px}

/* ---------- 顶栏 ---------- */
.topbar{
  height:56px;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:var(--n0);border-bottom:1px solid var(--n200);
  position:sticky;top:0;z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.brand b{font-size:15px;letter-spacing:.2px;white-space:nowrap}
.brand b em{font-style:normal;color:var(--p600)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill-btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--n200);
  background:var(--n0);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;
  cursor:pointer;color:var(--n700);white-space:nowrap;
}
.pill-btn:hover{border-color:var(--p300);color:var(--p700);text-decoration:none}
.pill-btn.primary{background:var(--p500);border-color:var(--p500);color:#fff}
.pill-btn.primary:hover{background:var(--p600);border-color:var(--p600);color:#fff}
.who{font-size:12.5px;color:var(--n500);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 骨架 ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;height:calc(100vh - 60px)}
.side{background:var(--n0);border-right:1px solid var(--n200);overflow:auto;padding:14px 10px 40px}
.side .grp{font-size:11px;letter-spacing:.6px;color:var(--n500);padding:14px 12px 6px;text-transform:uppercase}
.navitem{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--n700);cursor:pointer;margin-bottom:2px;
}
.navitem:hover{background:var(--n100);text-decoration:none}
.navitem.is-on{background:var(--p50);color:var(--p700);font-weight:600}
.navitem.is-on .ic{color:var(--p600)}
.navitem .num{margin-left:auto;font-size:11px;color:var(--n500)}
.stage{overflow:auto;padding:22px 28px 40px}
.wrap{max-width:1060px}

/* ---------- 通用 ---------- */
.crumb{font-size:12px;color:var(--n500);margin-bottom:8px}
.crumb b{color:var(--n700);font-weight:600}
h1.sct{font-size:21px;margin:0 0 6px;letter-spacing:.2px}
p.scd{color:var(--n500);font-size:13px;margin:0 0 20px;max-width:860px}
.card{background:var(--n0);border:1px solid var(--n200);border-radius:var(--r-md);box-shadow:var(--sh1)}
.card+.card{margin-top:16px}
.card-h{padding:14px 18px;border-bottom:1px solid var(--n200);display:flex;align-items:center;gap:10px}
.card-h h3{margin:0;font-size:15px}
.card-h .tail{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-b{padding:16px 18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.muted{color:var(--n500);font-size:12.5px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:2px 9px;
  border-radius:var(--r-pill);background:var(--n100);color:var(--n700);border:1px solid var(--n200);white-space:nowrap}
.tag.ok{background:var(--s50);color:#047857;border-color:#A7F3D0}
.tag.warn{background:var(--w50);color:#B45309;border-color:#FDE68A}
.tag.dim{background:var(--n50);color:var(--n500)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--n200);background:var(--n0);
  color:var(--n700);border-radius:var(--r-sm);padding:8px 14px;font-size:13px;cursor:pointer}
.btn:hover{border-color:var(--p300);color:var(--p700)}
.btn.primary{background:var(--p500);border-color:var(--p500);color:#fff}
.btn.primary:hover{background:var(--p600);border-color:var(--p600);color:#fff}
.btn.danger{color:#B91C1C;border-color:#FECACA;background:#FEF2F2}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12px}

/* ---------- 空态 ---------- */
.empty{padding:34px 20px;text-align:center;color:var(--n500)}
.empty .eic{width:44px;height:44px;margin:0 auto 10px;color:var(--n300);stroke:currentColor;
  fill:none;stroke-width:1.5}
.empty b{display:block;color:var(--n700);font-size:14.5px;margin-bottom:4px;font-weight:600}
.empty span{font-size:12.5px}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:600;color:var(--n500);font-size:12px;
  padding:9px 12px;border-bottom:1px solid var(--n200);background:var(--n50);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--n100);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto}

/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--n700);font-weight:600;margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--n500);margin-top:5px}
.input{width:100%;border:1px solid var(--n200);border-radius:var(--r-sm);padding:9px 12px;
  font-size:13.5px;font-family:inherit;color:var(--n900);background:var(--n0);outline:none}
.input:focus{border-color:var(--p300);box-shadow:0 0 0 3px var(--p50)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}

/* ---------- 提示条 ---------- */
.notice{border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;line-height:1.65;
  background:var(--p50);border:1px solid var(--p100);color:var(--p700)}
.notice.warn{background:var(--w50);border-color:#FDE68A;color:#92400E}
.notice.err{background:var(--d50);border-color:#FECACA;color:#B91C1C}
.notice.ok{background:var(--s50);border-color:#A7F3D0;color:#047857}
.notice+.notice{margin-top:10px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--n200);margin-bottom:18px;overflow-x:auto}
.tab{padding:9px 16px;font-size:13.5px;color:var(--n500);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab:hover{color:var(--n700)}
.tab.is-on{color:var(--p700);border-bottom-color:var(--p500);font-weight:600}

/* ---------- 文档页 ---------- */
.docgrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.docnav{background:var(--n0);border:1px solid var(--n200);border-radius:var(--r-md);padding:10px;position:sticky;top:12px}
.docnav .dgrp{font-size:11px;letter-spacing:.6px;color:var(--n500);padding:10px 10px 6px;text-transform:uppercase}
.docnav a{display:block;padding:7px 10px;border-radius:var(--r-sm);font-size:13px;color:var(--n700)}
.docnav a:hover{background:var(--n100);text-decoration:none}
.docnav a.is-on{background:var(--p50);color:var(--p700);font-weight:600}
.docbody{background:var(--n0);border:1px solid var(--n200);border-radius:var(--r-md);padding:22px 26px;min-height:360px}
.docbody h2{font-size:16px;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--n100)}
.docbody h2:first-child{margin-top:0}
.docbody h3{font-size:14px;margin:16px 0 8px}
.docbody p{margin:0 0 12px;font-size:13.5px;line-height:1.8;color:var(--n700)}
.docbody ul,.docbody ol{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.9;color:var(--n700)}
.docbody code{background:var(--n100);padding:1.5px 5px;border-radius:4px;font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.docbody pre{background:#0F172A;color:#E2E8F0;padding:14px 16px;border-radius:var(--r-sm);
  overflow-x:auto;font-size:12.5px;line-height:1.7;margin:0 0 14px}
.docbody pre code{background:none;color:inherit;padding:0}
.docbody table{width:100%;border-collapse:collapse;font-size:12.8px;margin:0 0 14px}
.docbody th{background:var(--n50);text-align:left;padding:8px 10px;border:1px solid var(--n200);font-weight:600}
.docbody td{padding:8px 10px;border:1px solid var(--n200);color:var(--n700)}
.docbody blockquote{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--p300);
  background:var(--p50);color:var(--p700);font-size:13px}
.docbody strong{color:var(--n900)}

/* ---------- 密钥卡 ---------- */
.keycard{border:1px solid var(--n200);border-radius:var(--r-md);padding:14px 16px;background:var(--n0)}
.keycard+.keycard{margin-top:10px}
.keycard .kh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.keycard .kh b{font-size:14px}
.keycard .kh .tail{margin-left:auto;display:flex;gap:8px}
.reveal{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--w50);
  border:1px solid #FDE68A}
.reveal .kv{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;
  color:#92400E;background:#fff;border:1px solid #FDE68A;border-radius:6px;padding:9px 11px;margin:8px 0}

/* ---------- 移动端 ---------- */
@media (max-width:860px){
  .shell{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 60px)}
  .side{display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--n200);
    padding:8px 10px;position:sticky;top:56px;z-index:20;background:var(--n0)}
  .side .grp{display:none}
  .navitem{margin-bottom:0;white-space:nowrap;padding:7px 12px;font-size:13px}
  .navitem .num{display:none}
  .stage{padding:16px 14px 32px}
  .g2,.g3{grid-template-columns:1fr}
  .docgrid{grid-template-columns:1fr}
  .docnav{position:static;margin-bottom:14px}
  .topbar{padding:0 12px;gap:8px}
  .brand b{font-size:14px}
  .who{display:none}
}
@media (max-width:420px){
  .pill-btn{padding:6px 11px;font-size:12.5px}
  .docbody{padding:16px}
  h1.sct{font-size:19px}
}