/* 领航者官网共享样式(深色科技风) — docs.html / flow.html 共用 */
:root {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color: #e7ecf6;
  background: #070a12;
  --ink: #e7ecf6;
  --muted: #94a1b8;
  --dim: #66718a;
  --line: rgba(148, 163, 200, .14);
  --line-strong: rgba(148, 163, 200, .26);
  --indigo: #6366f1;
  --cyan: #22d3ee;
  --green: #34d399;
  --card: rgba(148, 163, 200, .055);
  --card-strong: rgba(148, 163, 200, .1);
  --grad: linear-gradient(120deg, #818cf8, #22d3ee)
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse 60% 42% at 18% -4%, rgba(99, 102, 241, .16) 0, transparent 100%),
    radial-gradient(ellipse 52% 38% at 88% 4%, rgba(34, 211, 238, .1) 0, transparent 100%),
    #070a12;
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

a { color: inherit }
button, a { touch-action: manipulation }
::selection { background: rgba(99, 102, 241, .45) }

.shell { width: min(1180px, calc(100% - 40px)); margin: auto }

/* ── header ── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 18, .72);
  backdrop-filter: blur(18px)
}
.nav { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 22px }
.brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  font-size: 20px; font-weight: 850; letter-spacing: -.02em
}
.brand-mark {
  position: relative; width: 36px; height: 36px; border-radius: 13px;
  background: linear-gradient(140deg, #6366f1, #22d3ee);
  box-shadow: 0 8px 26px rgba(99, 102, 241, .45), inset 0 0 0 1px rgba(255, 255, 255, .22)
}
.brand-mark:before, .brand-mark:after {
  content: ""; position: absolute; border: 2px solid #fff; border-radius: 50%; inset: 8px
}
.brand-mark:after { inset: 13px; border-width: 1.5px; opacity: .9 }
.nav-links { display: flex; align-items: center; gap: 26px }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .18s }
.nav-links a:hover, .nav-links a.active { color: #fff }
.nav-actions { display: flex; gap: 10px }

/* ── buttons ── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
  font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s
}
.button.primary {
  background: linear-gradient(120deg, #6366f1, #14b8d4); color: #fff;
  box-shadow: 0 10px 30px rgba(79, 100, 229, .38), inset 0 0 0 1px rgba(255, 255, 255, .18)
}
.button.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(79, 100, 229, .5) }
.button.soft { border-color: var(--line-strong); background: var(--card); color: var(--ink) }
.button.soft:hover { border-color: rgba(148, 163, 200, .5); background: var(--card-strong) }

/* ── page hero ── */
.page-hero { padding: 88px 0 46px }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card);
  color: #a5b4fc; font-size: 11px; font-weight: 850; letter-spacing: .16em
}
.page-hero h1 {
  margin: 22px 0 0; font-size: clamp(44px, 5.4vw, 66px);
  line-height: 1.08; letter-spacing: -.045em
}
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.page-hero .lead { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8 }
.page-hero .crumbs { margin-bottom: 18px; color: var(--dim); font-size: 12.5px }
.page-hero .crumbs a { color: var(--dim); text-decoration: none }
.page-hero .crumbs a:hover { color: #a5b4fc }

/* ── sections ── */
.section { padding: 62px 0 }
.soft-section {
  background: linear-gradient(180deg, rgba(99, 102, 241, .05), rgba(34, 211, 238, .03));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)
}
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center }
.section-kicker { color: #818cf8; font-size: 12px; font-weight: 850; letter-spacing: .18em }
.section-head h2 { margin: 14px 0 12px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.04em }
.section-head p { margin: 0; color: var(--muted); line-height: 1.85 }
.section-head.left { margin-left: 0; text-align: left }

/* ── generic panel/card ── */
.panel {
  padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--card)
}
.panel h3 { margin: 0 0 10px; font-size: 17px }
.panel p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8 }
.panel-index {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid rgba(99, 102, 241, .4);
  background: linear-gradient(145deg, rgba(99, 102, 241, .2), rgba(34, 211, 238, .12));
  color: #a5b4fc; font-size: 12px; font-weight: 900
}
.panel p code, .doc-body code, td code {
  padding: 1px 7px; border-radius: 6px; border: 1px solid rgba(99, 102, 241, .35);
  background: rgba(99, 102, 241, .12); color: #a5b4fc;
  font-size: 11.5px; font-family: Consolas, Menlo, monospace
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }

/* ── kbd ── */
kbd {
  display: inline-block; padding: 2px 9px; border-radius: 7px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: rgba(148, 163, 200, .1); color: var(--ink);
  font-family: Consolas, Menlo, monospace; font-size: 12px; font-weight: 700
}

/* ── callout ── */
.callout {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148, 163, 200, .06);
  color: var(--muted); font-size: 12.5px; line-height: 1.75
}
.callout.warn { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); color: #fcd34d }
.callout.ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); color: #6ee7b7 }
.callout b { color: inherit }

/* ── tabs ── */
.tabs {
  display: inline-flex; gap: 6px; padding: 6px; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card)
}
.tab-btn {
  padding: 10px 26px; border: none; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 750;
  transition: background .18s, color .18s
}
.tab-btn:hover { color: #fff }
.tab-btn.active {
  background: linear-gradient(120deg, #6366f1, #14b8d4); color: #fff;
  box-shadow: 0 6px 20px rgba(79, 100, 229, .4)
}
.tab-pane { display: none }
.tab-pane.active { display: block }

/* ── badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .04em
}
.badge.a { border: 1px solid rgba(99, 102, 241, .5); background: rgba(99, 102, 241, .14); color: #a5b4fc }
.badge.b { border: 1px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .12); color: #6ee7b7 }

/* ── table ── */
.table-wrap {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden
}
table.doc {
  width: 100%; border-collapse: collapse; font-size: 13px
}
table.doc th, table.doc td {
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top
}
table.doc th { color: #c3cce0; font-size: 12px; letter-spacing: .06em; background: rgba(148, 163, 200, .06) }
table.doc tr:last-child td { border-bottom: none }
table.doc td { color: var(--muted); line-height: 1.7 }
table.doc td:first-child { color: var(--ink); white-space: nowrap }

/* ── vertical steps ── */
.step-list { display: grid; gap: 14px; position: relative }
.step-item {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card)
}
.step-num {
  display: flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid rgba(99, 102, 241, .45);
  background: linear-gradient(145deg, rgba(99, 102, 241, .22), rgba(34, 211, 238, .12));
  color: #a5b4fc; font-size: 15px; font-weight: 900
}
.step-item h3 { margin: 2px 0 8px; font-size: 16.5px }
.step-item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8 }
.step-item .step-tag { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px }
.step-item .step-tag span {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: 11px; font-weight: 700
}

/* ── faq (shared with index style) ── */
.faq-list { display: grid; gap: 10px }
.faq-list details {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  overflow: hidden; transition: border-color .2s
}
.faq-list details[open] { border-color: rgba(99, 102, 241, .5); background: var(--card-strong) }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 18px 20px; font-size: 14px; font-weight: 800
}
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary:after { content: "＋"; float: right; color: #818cf8 }
.faq-list details[open] summary:after { content: "－" }
.faq-list p { margin: 0; padding: 0 20px 18px; color: var(--muted); font-size: 13px; line-height: 1.8 }

/* ── footer ── */
.site-footer { margin-top: 60px; border-top: 1px solid var(--line); background: rgba(148, 163, 200, .03) }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; padding: 46px 0 }
.footer-brand p { max-width: 340px; color: var(--dim); font-size: 13px; line-height: 1.8 }
.footer-col strong { display: block; margin-bottom: 14px; font-size: 13px; color: #c3cce0 }
.footer-col a, .footer-col span {
  display: block; margin: 9px 0; color: var(--dim); text-decoration: none;
  font-size: 12.5px; transition: color .16s
}
.footer-col a:hover { color: #a5b4fc }
.copyright { padding: 17px 0 26px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px }

/* ── responsive ── */
@media(max-width:1180px) {
  .nav-links { gap: 16px }
  .nav-links a { font-size: 13px }
  .nav-actions .button { height: 38px; padding: 0 14px; font-size: 13px }
}
@media(max-width:930px) {
  .nav-links { display: none }
  .grid-2, .grid-3 { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: repeat(2, 1fr) }
}
@media(max-width:560px) {
  .shell { width: min(100% - 24px, 1180px) }
  .nav { height: 62px }
  .page-hero { padding: 44px 0 24px }
  .step-item { grid-template-columns: 1fr; gap: 10px }
  .footer-grid { grid-template-columns: 1fr }
  .table-wrap { overflow-x: auto }
  table.doc { min-width: 560px }
}