/* ============ 小医导诊 · 初始化门户样式 ============ */
:root {
  --teal: #0e9f8a;
  --teal-deep: #0b7a6b;
  --teal-ink: #0f2942;
  --bg: #f5f9f8;
  --card: #ffffff;
  --line: #dcebe7;
  --muted: #5f7a74;
  --danger: #e0533d;
  --ok: #17a673;
  --warn: #d98218;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(15, 41, 66, .07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--bg); color: var(--teal-ink); line-height: 1.65;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
code { background: #eaf5f2; border-radius: 5px; padding: 1px 7px; font-size: .88em; color: var(--teal-deep); }

/* ---- 顶栏 ---- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teal-ink); }
.brand-logo { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 17px; }
.brand-text i { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); font-size: 14px; padding: 7px 12px; border-radius: 8px; transition: .18s; }
.nav a:hover { color: var(--teal-deep); background: #eaf5f2; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #b7c4c1; }
.pill-live.on { color: var(--ok); border-color: #bfe8d9; }
.pill-live.on .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(23,166,115,.15); animation: pulse 1.6s infinite; }
.pill-live.off { color: var(--danger); border-color: #f3c9c2; }
.pill-live.off .dot { background: var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(23,166,115,0); } }

/* ---- HERO ---- */
.hero { background:
  radial-gradient(1000px 480px at 85% -10%, rgba(14,159,138,.14), transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(255,138,92,.10), transparent 60%);
  padding: 74px 0 64px; }
.hero-inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: center; }
.tag { display: inline-block; font-size: 12.5px; letter-spacing: .12em; color: var(--teal-deep); background: #e2f3ef; border: 1px solid #c5e8e0; padding: 4px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.22; font-weight: 800; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--teal); font-size: .62em; display: block; margin-top: 10px; font-weight: 700; }
.lead { margin-top: 20px; font-size: 16.5px; color: #3d554f; max-width: 640px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; font-size: 12.5px; color: var(--muted); }
.btn { appearance: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; padding: 12px 26px; border-radius: 11px; transition: .18s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(14,159,138,.32); }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-ghost { background: #fff; color: var(--teal-deep); border: 1.5px solid #bfe0d9; }
.btn-ghost:hover { border-color: var(--teal); background: #f2faf8; }
.hero-mascot svg { width: 100%; max-width: 290px; display: block; margin: 0 auto; filter: drop-shadow(0 14px 24px rgba(14,159,138,.18)); }
.eye { animation: blink 3.4s infinite; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.arm { animation: wave-arm 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes wave-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.wave { animation: wavex 2.6s linear infinite; }
@keyframes wavex { to { stroke-dashoffset: -22; } }

/* ---- 区块通用 ---- */
.section { padding: 64px 0; }
.section-alt { background: #eef6f4; }
.section-head { max-width: 760px; margin-bottom: 30px; }
.section-head h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.section-head p { color: var(--muted); font-size: 14.5px; }
.note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* ---- 自检 ---- */
.probe-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.probe-summary { font-size: 13.5px; color: var(--muted); }
.probe-summary b.ok { color: var(--ok); }
.probe-summary b.bad { color: var(--danger); }
.probe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 16px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 15px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.pcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #d5e4e0; transition: .3s; }
.pcard.ok::before { background: var(--ok); }
.pcard.bad::before { background: var(--danger); }
.pcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pcard-name { font-weight: 700; font-size: 15px; }
.pcard-ms { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pcard-ep { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 3px 0 9px; }
.pcard-state { font-size: 13px; color: var(--muted); min-height: 38px; }
.pcard.ok .pcard-state { color: #2c4a44; }
.pcard .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #cbe3dd; border-top-color: var(--teal); border-radius: 50%; animation: rot .8s linear infinite; vertical-align: -2px; margin-right: 7px; }
@keyframes rot { to { transform: rotate(360deg); } }
.st-ok { color: var(--ok); font-weight: 700; }
.st-bad { color: var(--danger); font-weight: 700; }

/* ---- 语音试听 ---- */
.voice-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.voice-form { display: flex; flex-direction: column; gap: 14px; }
.voice-form label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.voice-form input, .voice-form select { font: inherit; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fbfdfd; color: var(--teal-ink); }
.voice-form input:focus, .voice-form select:focus { outline: none; border-color: var(--teal); }
.voice-out { display: flex; flex-direction: column; gap: 14px; justify-content: center; background: #f4faf8; border: 1px dashed #c5e4dc; border-radius: 12px; padding: 22px; }
.voice-status { font-size: 13.5px; color: var(--muted); }
.voice-status.ok { color: var(--ok); }
.voice-status.err { color: var(--danger); }
audio { width: 100%; }

/* ---- 架构 ---- */
.arch-lane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 18px; }
.lane-title { font-weight: 800; font-size: 15px; margin-bottom: 16px; color: var(--teal-deep); }
.flow-line { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.fnode { flex: 1 1 120px; min-width: 118px; background: #f4faf8; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 10px; text-align: center; font-size: 13.5px; font-weight: 700; }
.fnode i { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.fnode-hot { border-color: #9ad8cb; background: #e8f7f3; }
.fnode-danger { border-color: #f0c4ba; background: #fdf1ee; color: #a33c2b; flex: 2 1 300px; }
.farrow { align-self: center; color: #9fbcb5; font-weight: 700; }
.flow-line-sub { margin-top: 12px; }
.arch-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.arch-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.arch-box h3 { font-size: 15.5px; margin-bottom: 12px; }
.arch-box ul { list-style: none; }
.arch-box li { font-size: 13.5px; color: #3d554f; padding: 5px 0 5px 18px; position: relative; }
.arch-box li::before { content: "▸"; position: absolute; left: 0; color: var(--teal); }
.arch-box li b { color: var(--teal-ink); }

/* ---- 语言矩阵 ---- */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.matrix th { background: #e8f4f0; text-align: left; padding: 13px 18px; font-size: 13px; color: var(--teal-deep); }
.matrix td { padding: 13px 18px; border-top: 1px solid var(--line); }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.b-hi { background: #dff4ea; color: #147a52; }
.b-mid { background: #fdf3e2; color: #a36a12; }
.b-ok { background: #e5f0fd; color: #2563c9; }
.lang-chips, .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; color: #33504a; }

/* ---- 工作流 ---- */
.flow-refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.ref-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.ref-ours { border: 1.5px solid var(--teal); background: #f0faf7; }
.ref-stars { font-size: 12.5px; font-weight: 800; color: var(--warn); margin-bottom: 6px; }
.ref-ours .ref-stars { color: var(--teal-deep); }
.ref-card h4 { font-size: 15px; margin-bottom: 7px; }
.ref-card p { font-size: 12.8px; color: var(--muted); }
.node-palette { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.palette-title { font-weight: 800; font-size: 14px; margin: 4px 0 12px; color: var(--teal-ink); }
.palette-title + .chips { margin-top: 0; margin-bottom: 18px; }
.chip-node { background: #eef7f4; border-color: #c9e7de; font-weight: 600; }

/* ---- 路线图 ---- */
.roadmap { list-style: none; position: relative; }
.roadmap::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: #cfe6e0; }
.roadmap li { display: flex; gap: 20px; padding: 14px 0; position: relative; }
.rm-dot { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #fff; border: 2.5px solid #cfe6e0; margin-top: 2px; z-index: 1; }
.roadmap li.done .rm-dot { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 5px rgba(14,159,138,.15); }
.roadmap li.done .rm-dot::after { content: "✓"; color: #fff; display: grid; place-items: center; height: 100%; font-size: 14px; font-weight: 800; }
.roadmap li > div:last-child { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; box-shadow: var(--shadow); }
.roadmap b { font-size: 15.5px; display: inline-block; margin-right:10px; }
.roadmap span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.roadmap em { font-style: normal; float: right; font-size: 12.5px; color: var(--ok); font-weight: 700; }

/* ---- 页脚 ---- */
.footer { background: var(--teal-ink); color: #b9cdd8; padding: 26px 0; font-size: 12.5px; }
.footer-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer code { background: rgba(255,255,255,.1); color: #cfe8e0; }

/* ---- 响应式 ---- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-mascot { order: -1; }
  .hero-mascot svg { max-width: 190px; }
  .arch-cols, .flow-refs { grid-template-columns: 1fr 1fr; }
  .voice-card { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .arch-cols, .flow-refs { grid-template-columns: 1fr; }
  .nav { display: none; }
  .topbar-inner { justify-content: space-between; }
}