/* =========================================================
   库库出海 · 操作手册页专属样式（远洋信号版 Ocean Signal）
   暖纸白画布 + 深海军蓝 + 海洋蓝主色 + 信号橙强调
   与官网首页同一品牌语言（类名与结构保持不变）
   ========================================================= */
:root {
  --m-primary: #1b44c8;
  --m-primary-d: #142f97;
  --m-accent: #ff5a1f;
  --m-accent-ink: #c2410c;
  --m-ink: #0a1630;
  --m-ink-2: #101f42;
  --m-line: #e3ddcf;
  --m-line-strong: #d5cfbf;
  --m-muted: #5c6b84;
  --m-surface: #ffffff;
  --m-surface-2: #faf9f4;
  --m-bg: #f5f3ec;
  --m-shadow-sm: 0 1px 2px rgba(10, 22, 48, .06);
  --m-shadow: 0 14px 34px rgba(10, 22, 48, .10);
  --m-radius: 16px;
  --m-maxw: 1180px;
}

/* ===================== Hero（海军蓝整幅 + 橙色信号） ===================== */
.manual-hero {
  position: relative; overflow: hidden; color: #dbe3f2;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(27, 68, 200, .38), transparent 62%),
    radial-gradient(680px 420px at 96% 6%, rgba(255, 90, 31, .16), transparent 58%),
    var(--m-ink);
}
.manual-hero-bg { position: absolute; inset: 0; }
.manual-hero-bg::after {
  content: "MANUAL"; position: absolute; right: -1%; bottom: -6%;
  font-size: clamp(90px, 14vw, 180px); font-weight: 900; letter-spacing: .04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
  pointer-events: none; white-space: nowrap;
}
.manual-hero-inner {
  position: relative; max-width: var(--m-maxw); margin: 0 auto; padding: 76px 22px 82px; text-align: left;
}
.manual-hero-inner .badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 90, 31, .1); border: 1px solid rgba(255, 90, 31, .34);
  color: #ffc7ab; font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px;
}
.manual-hero-inner .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 10px rgba(255, 90, 31, .8); }
.manual-hero h1 { font-size: clamp(32px, 4.6vw, 50px); margin: 22px 0 14px; font-weight: 900; color: #fff; letter-spacing: -.025em; line-height: 1.14; }
.manual-hero .lead { color: #a9b6d4; font-size: 16.5px; max-width: 640px; margin: 0; line-height: 1.8; }

/* ===================== 目录子导航（sticky） ===================== */
.manual-toc {
  position: sticky; top: 58px; z-index: 40;
  background: rgba(245, 243, 236, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--m-line);
}
.manual-toc-inner { max-width: var(--m-maxw); margin: 0 auto; padding: 11px 22px; display: flex; align-items: center; gap: 14px; }
.manual-toc-title { font-size: 12.5px; font-weight: 800; color: var(--m-accent-ink); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.manual-toc-links { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.manual-toc-links a {
  color: var(--m-muted); font-weight: 700; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--m-line-strong); background: #fff; border-radius: 999px; padding: 6px 13px;
  transition: all .18s cubic-bezier(.2, .7, .2, 1);
}
.manual-toc-links a:hover { border-color: var(--m-primary); color: var(--m-primary); transform: translateY(-1px); }
.manual-toc-links a.active { background: var(--m-ink); color: #fff; border-color: var(--m-ink); box-shadow: 0 6px 16px rgba(10, 22, 48, .24); }

/* ===================== 主体容器 ===================== */
.manual-main { background: var(--m-bg); }
.manual-container { max-width: var(--m-maxw); margin: 0 auto; padding: 0 22px 80px; }

/* ===================== 模块区块 ===================== */
.manual-section { margin-top: 54px; scroll-margin-top: 132px; }
.manual-section:first-child { margin-top: 44px; }
.mod-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mod-head h2 {
  font-size: 24px; font-weight: 900; color: var(--text); letter-spacing: -.015em;
  border-left: 5px solid var(--m-accent); padding-left: 14px;
}
.mod-head .tag {
  font-size: 12px; color: var(--m-accent-ink); border: 1px solid rgba(255, 90, 31, .35);
  background: rgba(255, 90, 31, .08); border-radius: 12px; padding: 3px 11px; font-weight: 800; white-space: nowrap;
}
.mod-desc { color: var(--m-muted); font-size: 14.5px; margin: 12px 0 18px; line-height: 1.75; }

/* 子标题 ① ② ③ */
h3.blk {
  font-size: 16px; color: var(--m-primary); margin: 28px 0 12px; display: flex; align-items: center; gap: 9px; font-weight: 800;
}
h3.blk::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 0 4px rgba(255, 90, 31, .14); display: inline-block; flex: none; }

/* ===================== 表格（企业级卡片感） ===================== */
.tblwrap { overflow: hidden; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); box-shadow: var(--m-shadow-sm); }
.tblwrap + .tblwrap { margin-top: 16px; }
.tblwrap .scroll-x { overflow-x: auto; }
.tblwrap table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tblwrap th {
  background: var(--m-ink-2); color: #dbe3f2; font-size: 13px; text-align: left; padding: 12px 14px;
  border-bottom: 2px solid rgba(255, 255, 255, .1); white-space: nowrap; font-weight: 800; letter-spacing: .02em;
}
.tblwrap td { padding: 11px 14px; border-bottom: 1px solid #efece2; vertical-align: top; font-size: 13.5px; color: #2b3344; line-height: 1.65; }
.tblwrap tr:last-child td { border-bottom: none; }
.tblwrap tbody tr { transition: background .15s; }
.tblwrap tbody tr:hover { background: rgba(27, 68, 200, .04); }
.tblwrap td b { color: #0d1830; font-weight: 700; }
.tblwrap td code.el, .tblwrap code.el { white-space: normal; }

/* 内联代码 */
code.el {
  background: var(--m-surface-2); border: 1px solid var(--m-line); border-radius: 6px; padding: 1px 7px;
  color: var(--m-primary); font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ===================== 日志级别徽章 ===================== */
.lvl { display: inline-block; border-radius: 6px; font-size: 12px; padding: 1px 9px; font-weight: 700; white-space: nowrap; }
.lvl.info { background: rgba(96, 165, 250, .14); color: #2563eb; }
.lvl.ok   { background: rgba(34, 197, 94, .14);  color: #16a34a; }
.lvl.warn { background: rgba(251, 191, 36, .16); color: #b45309; }
.lvl.err  { background: rgba(248, 113, 113, .15); color: #dc2626; }

/* ===================== 提示框 ===================== */
.note {
  background: rgba(27, 68, 200, .05); border: 1px solid rgba(27, 68, 200, .22); border-radius: 12px;
  padding: 13px 17px; margin: 16px 0; font-size: 13.5px; color: #3a4256; line-height: 1.75;
}
.note b { color: var(--m-primary-d); }
.note.red { background: rgba(248, 113, 113, .05); border-color: rgba(248, 113, 113, .3); }
.note.red b { color: #dc2626; }

/* 图例 */
.leg { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 6px; font-size: 12.5px; color: var(--m-muted); }
.leg span { display: inline-flex; align-items: center; gap: 6px; }

/* ===================== 顶部返回条 ===================== */
.manual-back { display: inline-flex; align-items: center; gap: 7px; color: var(--m-muted); font-size: 13.5px; font-weight: 600; margin: 26px 0 -6px; transition: color .2s; }
.manual-back:hover { color: var(--m-primary); }

/* ===================== 响应式 ===================== */
@media (max-width: 900px) {
  .manual-hero-inner { padding: 54px 20px 60px; }
  .manual-toc { top: 56px; }
  .manual-toc-title { display: none; }
  .mod-head h2 { font-size: 20px; }
}
@media (max-width: 520px) {
  .manual-toc-links a { font-size: 12px; padding: 5px 11px; }
  .tblwrap th, .tblwrap td { padding: 9px 10px; font-size: 12.5px; }
}