/* ============================================================
   AI OPC H5 - 文档页样式（商业策划书 / 系统功能规划）
   移动端 APP 视觉：深蓝渐变头 + 折叠章节卡片 + 卡片化表格
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --navy:#0b2a6b;
  --primary:#1a6bff;
  --violet:#4f46e5;
  --grad:linear-gradient(135deg,#0b2a6b 0%,#1a6bff 55%,#4f46e5 100%);
  --bg:#f2f6fc;
  --card:#ffffff;
  --text:#0f1e3d;
  --dim:#6b7a99;
  --line:#e7eefb;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --radius:18px;
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  padding-bottom:env(safe-area-inset-bottom);
}
a{ color:inherit; text-decoration:none; }

/* ---------------- 顶部导航栏 ---------------- */
.doc-navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--grad); color:#fff;
}
.doc-back{
  flex:none; width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); font-size:15px;
}
.doc-titles{ flex:1; min-width:0; }
.doc-titles h1{ font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-titles p{ font-size:11px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }

/* ---------------- 文档头信息条 ---------------- */
.doc-meta{ margin:14px 16px 2px; display:flex; flex-wrap:wrap; gap:8px; }
.doc-meta span{
  font-size:12px; background:#fff; border:1px solid var(--line);
  color:var(--dim); padding:5px 11px; border-radius:999px;
}

/* ---------------- 内容容器 ---------------- */
.doc-wrap{ padding:8px 14px 48px; }

/* ---------------- 折叠章节卡片 ---------------- */
.sec{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin:10px 0; overflow:hidden; box-shadow:0 2px 12px rgba(20,60,150,.05);
}
.sec-head{
  display:flex; align-items:center; gap:11px;
  padding:14px; cursor:pointer; user-select:none;
}
.sec-head .ico{
  flex:none; width:36px; height:36px; border-radius:12px;
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.sec-head h2{ flex:1; font-size:15px; font-weight:700; line-height:1.4; }
.sec-head .arr{ flex:none; color:var(--dim); font-size:13px; transition:transform .25s; }
.sec.open .sec-head .arr{ transform:rotate(180deg); }
.sec-body{ display:none; padding:4px 16px 16px; border-top:1px dashed var(--line); }
.sec.open .sec-body{ display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }

/* ---------------- 章节内文字 ---------------- */
.sec-body h3{
  font-size:14px; font-weight:700; margin:16px 0 8px;
  padding-left:10px; border-left:3px solid var(--primary);
}
.sec-body h3:first-child{ margin-top:12px; }
.sec-body p{ font-size:13px; color:#33415e; margin:8px 0; }
.sec-body ul{ list-style:none; margin:6px 0; }
.sec-body ul>li{ position:relative; padding:5px 0 5px 18px; font-size:13px; color:#33415e; }
.sec-body ul>li::before{
  content:""; position:absolute; left:3px; top:13px;
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,#1a6bff,#4f46e5);
}
.sec-body ul ul{ margin:2px 0 2px 12px; }
.sec-body ul ul>li::before{ width:4px; height:4px; background:#9db8f5; }
.sec-body b,.sec-body strong{ color:#0f2a6b; }

/* ---------------- 强调块 ---------------- */
.tip,.ok,.warn{
  margin:10px 0; padding:11px 13px 11px 38px; border-radius:13px;
  font-size:13px; position:relative; line-height:1.6;
}
.tip{ background:#eef4ff; color:#2553a0; }
.ok{ background:#e9f9ef; color:#157347; }
.warn{ background:#fef5e7; color:#9a6700; }
.tip i,.ok i,.warn i{ position:absolute; left:13px; top:13px; font-size:15px; }

/* ---------------- 数据键值对 ---------------- */
.kv{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.kv-row{
  display:flex; align-items:center; gap:10px;
  background:#f7faff; border:1px solid var(--line); border-radius:12px;
  padding:9px 12px; font-size:13px;
}
.kv-row span{ flex:none; width:70px; color:var(--dim); }
.kv-row b{ flex:1; color:var(--text); font-weight:600; }

/* ---------------- 卡片化表格（移动端） ---------------- */
.dlist{ display:flex; flex-direction:column; gap:10px; margin:10px 0; }
.dcard{
  background:#f7faff; border:1px solid var(--line); border-radius:13px;
  padding:11px 13px;
}
.dcard .d-title{ font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.dcard .d-title .num{ flex:none; font-size:11px; color:#fff; background:var(--grad); border-radius:7px; padding:1px 7px; }
.dline{ display:flex; gap:8px; font-size:13px; padding:3px 0; }
.dline span{ flex:none; min-width:64px; color:var(--dim); font-size:12px; padding-top:1px; }
.dline b{ flex:1; font-weight:500; color:#33415e; }
.dline .tag{ flex:none; }

/* 优先级标签 */
.p0,.p1,.p2,.p3{ font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.p0{ background:#e62e3b; color:#fff; }
.p1{ background:#f5a623; color:#fff; }
.p2{ background:#1a6bff; color:#fff; }
.p3{ background:#8a94a6; color:#fff; }

/* ---------------- 步骤流 ---------------- */
.flow{
  margin:10px 0; padding:12px 14px; border-radius:13px;
  background:#0f1e3d; color:#dbe7ff; font-size:13px;
  font-family:"SF Mono",Consolas,Menlo,monospace; line-height:1.8;
  white-space:pre-wrap; word-break:break-all;
}
.flow b{ color:#fff; }

/* ---------------- FAQ ---------------- */
.faq{ margin:10px 0; display:flex; flex-direction:column; gap:9px; }
.faq-item{ background:#f7faff; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.faq-q{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; font-size:13.5px; font-weight:700; color:var(--navy);
  cursor:pointer; user-select:none;
}
.faq-q .faq-num{
  flex:none; width:20px; height:20px; border-radius:7px; background:var(--grad); color:#fff;
  font-size:12px; display:flex; align-items:center; justify-content:center;
}
.faq-q .faq-arr{ margin-left:auto; color:var(--dim); font-size:12px; transition:transform .25s; }
.faq-item.open .faq-arr{ transform:rotate(180deg); }
.faq-a{ display:none; padding:0 13px 12px; font-size:13px; color:#33415e; }
.faq-item.open .faq-a{ display:block; }

/* ---------------- 底部署名 ---------------- */
.doc-foot{
  margin:22px 4px 0; padding:16px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line); text-align:center;
  font-size:12px; color:var(--dim); line-height:2;
}
.doc-foot .brand{ font-weight:700; color:var(--navy); font-size:13px; }

/* 返回顶部 */
#docTop{
  position:fixed; right:16px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:60;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad); color:#fff; font-size:15px;
  box-shadow:0 6px 18px rgba(26,107,255,.4);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#docTop.show{ opacity:1; pointer-events:auto; }