/* 生物智阅 design system — warm paper × emerald, AI = violet */
:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --bg:#F3F6F1;
  --surface:#FFFFFF;
  --ink:#182B24;
  --ink-2:#2E463C;
  --muted:#6C7E74;
  --faint:#9AA8A0;
  --line:#E2E9E1;
  --line-strong:#CFDBD1;
  --pri:#16A46B;
  --pri-dk:#0D7F52;
  --pri-soft:#E6F5ED;
  --ai:#6D5BD0;
  --ai-dk:#5646B8;
  --ai-soft:#EEEBFF;
  --warn:#D98A2B;
  --warn-soft:#FBF1E2;
  --err:#D64545;
  --err-soft:#FBEAEA;
  --radius:20px;
  --radius-sm:13px;
  --shadow:0 1px 2px rgba(24,43,36,.05),0 14px 34px -14px rgba(24,43,36,.14);
  --shadow-lg:0 2px 4px rgba(24,43,36,.05),0 28px 60px -20px rgba(24,43,36,.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--pri-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--pri-soft)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.brand:hover{text-decoration:none}
.brand img{height:38px;width:auto}
.brand .bn{font-size:1.06rem;font-weight:750;letter-spacing:.01em;white-space:nowrap}
.brand .bs{font-size:.82rem;color:var(--muted);font-weight:550;white-space:nowrap}
.top-nav{display:flex;gap:4px;margin-left:10px;flex-wrap:wrap}
.top-nav a{
  color:var(--ink-2);font-size:.92rem;font-weight:600;padding:8px 13px;border-radius:10px;
}
.top-nav a:hover{background:var(--bg);text-decoration:none}
.top-nav a[aria-current="page"]{background:var(--pri-soft);color:var(--pri-dk)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.demo-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);
  color:var(--muted);font-size:.82rem;font-weight:650;padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.demo-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--pri)}
@media (max-width:880px){.brand .bs{display:none}.top-nav{display:none}}

/* ---------- page shell ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:32px 24px 80px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:28px 18px 90px}
.display{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:800;letter-spacing:-.03em;line-height:1.16;text-wrap:balance}
.h1{font-size:clamp(1.45rem,2.3vw,1.9rem);font-weight:750;letter-spacing:-.022em;line-height:1.24;text-wrap:balance}
.h2{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.h3{font-size:1.01rem;font-weight:680}
.sub{color:var(--muted);font-size:1.02rem;line-height:1.75;margin-top:12px;max-width:58ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pri-dk);
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--pri);border-radius:2px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.mono{font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:28px;padding:clamp(30px,5vw,60px);
  background:
    radial-gradient(90% 120% at 88% -10%,rgba(22,164,107,.13),transparent 55%),
    linear-gradient(160deg,#FFFFFF 0%,#EFF7F1 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero .display{max-width:19ch}
.hero p.lead{margin-top:18px;font-size:1.09rem;color:var(--ink-2);max-width:50ch;line-height:1.8}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:center}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}}

/* paper → data visual (scan hero) */
.paper-stage{position:relative;display:flex;justify-content:center}
.paper-sheet{
  width:min(320px,72vw);aspect-ratio:1/1.41;background:#fff;border-radius:10px;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:26px 22px;position:relative;overflow:hidden;
}
.paper-sheet .ln{height:8px;border-radius:4px;background:#EAF0E9;margin-bottom:13px}
.paper-sheet .ln.t{width:62%;height:12px;background:#DCE7DC;margin-bottom:20px}
.paper-sheet .ln.s{width:84%}
.paper-sheet .ln.m{width:72%}
.scan-line{
  position:absolute;left:0;right:0;height:3px;top:0;
  background:linear-gradient(90deg,transparent,var(--pri),transparent);
  box-shadow:0 0 18px 3px rgba(22,164,107,.4);
  animation:scanMove 3.4s ease-in-out infinite;
}
@keyframes scanMove{0%,100%{top:6%}50%{top:88%}}
.data-chip{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:8px 13px;font-size:.83rem;font-weight:650;box-shadow:var(--shadow);white-space:nowrap;
}
.data-chip .k{color:var(--pri-dk)}
.data-chip.c1{right:-6px;top:14%}
.data-chip.c2{left:-14px;top:44%}
.data-chip.c3{right:2px;bottom:14%}
@media (max-width:880px){.data-chip{display:none}}

/* ---------- flow steps ---------- */
.flow{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.flow-step{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 17px;font-size:.92rem;font-weight:650;color:var(--ink-2);
}
.flow-step .n{
  width:24px;height:24px;border-radius:50%;background:var(--pri-soft);color:var(--pri-dk);
  display:grid;place-items:center;font-size:.8rem;font-weight:800;
}
.flow-step.hot .n{background:var(--pri);color:#fff}
.flow-step.ai .n{background:var(--ai-soft);color:var(--ai-dk)}

/* ---------- cards / bento ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.card-tight{padding:16px 18px;border-radius:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}
@media (max-width:980px){.bento,.g2,.g3,.g4{grid-template-columns:1fr}}
@media (max-width:720px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- KPI ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.kpi .k-label{font-size:.85rem;font-weight:650;color:var(--muted);letter-spacing:.04em}
.kpi .k-value{font-size:2.15rem;font-weight:800;letter-spacing:-.035em;margin-top:8px;line-height:1.02;font-feature-settings:"tnum"}
.kpi .k-note{font-size:.86rem;color:var(--faint);margin-top:6px}
.kpi .k-value .unit{font-size:1rem;font-weight:650;color:var(--muted);margin-left:3px;letter-spacing:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:13px;padding:11px 20px;font-size:.95rem;font-weight:700;letter-spacing:.01em;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(22,164,107,.35);outline-offset:2px}
.btn-primary{background:var(--pri);color:#fff;box-shadow:0 8px 20px -8px rgba(22,164,107,.55)}
.btn-primary:hover{background:var(--pri-dk)}
.btn-ai{background:var(--ai);color:#fff;box-shadow:0 8px 20px -8px rgba(109,91,208,.55)}
.btn-ai:hover{background:var(--ai-dk)}
.btn-ghost{background:#fff;border-color:var(--line-strong);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--pri);color:var(--pri-dk)}
.btn-soft{background:var(--pri-soft);color:var(--pri-dk)}
.btn-soft:hover{background:#D8EEE2}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  padding:5px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.02em;
}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-green{background:var(--pri-soft);color:var(--pri-dk)}
.chip-ai{background:var(--ai-soft);color:var(--ai-dk)}
.chip-warn{background:var(--warn-soft);color:#9C6314}
.chip-err{background:var(--err-soft);color:#A93232}
.chip-neutral{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.chip-ink{background:#EEF2EC;color:var(--ink-2)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field label{font-size:.88rem;font-weight:680;color:var(--ink-2)}
.field input,.field select,.field textarea{
  border:1px solid var(--line-strong);border-radius:12px;padding:11px 13px;background:#fff;width:100%;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(22,164,107,.16)
}
.field .hint{font-size:.84rem;color:var(--faint)}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:150px}

/* ---------- segmented / mode choice ---------- */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{
  border:none;background:transparent;border-radius:9px;padding:8px 15px;font-size:.9rem;
  font-weight:650;cursor:pointer;color:var(--muted);
}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(24,43,36,.1)}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.mode-grid{grid-template-columns:1fr}}
.mode-card{
  position:relative;text-align:left;border-radius:18px;padding:22px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mode-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mode-card[aria-pressed="true"]{border-color:var(--pri);box-shadow:0 0 0 3px rgba(22,164,107,.16),var(--shadow)}
.mode-card.ai[aria-pressed="true"]{border-color:var(--ai);box-shadow:0 0 0 3px rgba(109,91,208,.16),var(--shadow)}
.mode-card .m-icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--pri-soft);color:var(--pri-dk);font-weight:800;font-size:.95rem;
}
.mode-card.ai .m-icon{background:var(--ai-soft);color:var(--ai-dk)}
.mode-card .m-title{font-size:1.06rem;font-weight:750}
.mode-card .m-desc{font-size:.9rem;color:var(--muted);margin-top:6px;line-height:1.6}
.mode-card .m-check{
  position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:.72rem;color:transparent;
}
.mode-card[aria-pressed="true"] .m-check{background:var(--pri);border-color:var(--pri);color:#fff}
.mode-card.ai[aria-pressed="true"] .m-check{background:var(--ai);border-color:var(--ai)}

/* ---------- AI card (signature) ---------- */
.ai-panel{
  position:relative;border-radius:18px;padding:20px 22px;
  background:#FBFAFF;
  border:1px solid #E7E2F8;
}
.ai-panel .ai-tag{
  display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800;
  color:var(--ai-dk);letter-spacing:.06em;text-transform:uppercase;
}
.ai-panel .ai-tag::before{
  content:"AI";font-size:.68rem;background:var(--ai);color:#fff;border-radius:6px;padding:2px 6px;letter-spacing:.05em
}
.ai-item{
  background:#fff;border:1px solid #E8E3FB;border-radius:13px;padding:13px 15px;margin-top:10px;
}
.ai-item .t{font-weight:700;font-size:.95rem}
.ai-item .d{font-size:.88rem;color:var(--muted);margin-top:4px}

/* ---------- tables / bars / rings ---------- */
table.data{width:100%;border-collapse:collapse;font-size:.93rem}
table.data th{
  text-align:left;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700;
}
table.data td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data td.mono,table.data th.mono{font-feature-settings:"tnum"}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:#F8FBF7}

.bar-row{display:grid;grid-template-columns:112px 1fr 44px;gap:12px;align-items:center;margin:11px 0}
.bar-row .bl{font-size:.88rem;color:var(--muted);font-weight:650}
.bar-track{height:10px;background:#ECF1EA;border-radius:999px;overflow:hidden;display:block}
.bar-fill{display:block;height:100%;border-radius:999px;background:var(--pri)}
.bar-fill.alt{background:#7FC8A4}
.bar-fill.ai{background:var(--ai)}
.bar-fill.warn{background:var(--warn)}
.bar-val{font-size:.9rem;font-weight:750;text-align:right}

.ring-wrap{position:relative;display:grid;place-items:center}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-wrap .rv{position:absolute;font-size:1.28rem;font-weight:800;letter-spacing:-.02em}

/* ---------- lists / queue ---------- */
.list-item{
  display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:15px 17px;margin-bottom:10px;cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.list-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-1px);text-decoration:none}
.list-item[aria-current="true"]{border-color:var(--pri);box-shadow:0 0 0 3px rgba(22,164,107,.14)}
.list-item .li-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.list-item .li-title{font-size:1rem;font-weight:700;margin-top:7px;color:var(--ink)}
.list-item .li-meta{font-size:.85rem;color:var(--muted);margin-top:5px}

/* ---------- status / feedback ---------- */
.status-line{min-height:1.4em;font-size:.92rem;color:var(--muted)}
.status-line[data-tone="ok"]{color:var(--pri-dk)}
.status-line[data-tone="warn"]{color:#9C6314}
.status-line[data-tone="err"]{color:#A93232}
.empty{
  border:1px dashed var(--line-strong);border-radius:16px;padding:34px 20px;text-align:center;
  color:var(--muted);background:#FAFCF9;
}
.empty strong{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:6px}
.note{
  background:var(--pri-soft);border-radius:13px;padding:13px 16px;color:var(--pri-dk);
  font-size:.92rem;line-height:1.65;
}
.note.warn{background:var(--warn-soft);color:#8A5A16}
.note.plain{background:var(--bg);color:var(--muted)}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);margin:18px 0}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.footer{
  border-top:1px solid var(--line);margin-top:60px;padding:24px;text-align:center;
  color:var(--faint);font-size:.88rem;
}
.footer strong{color:var(--muted);font-weight:650}
.skip-link{
  position:absolute;left:12px;top:-48px;background:var(--pri);color:#fff;padding:10px 14px;
  border-radius:9px;font-weight:700;z-index:200;transition:top .15s ease;
}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}