/* ============================================================
   AI Checker 准确率体系 · 设计蓝图站 · 共享设计系统
   蓝图风:冷纸底 + 墨蓝主调;语义色只在有含义处出现
   ============================================================ */
:root{
  --paper:#EEF1F4; --paper-2:#E5EAEE; --card:#FBFCFD; --card-2:#F4F7F9;
  --ink:#15232E; --ink-2:#3D4E59; --ink-3:#6C7A84; --line:#D4DCE2; --line-2:#C2CDD5;
  --blue:#1C4E6B; --blue-deep:#123244; --blue-tint:#E2EAEF; --blue-mid:#3E7396;
  --brass:#8F6A22; --brass-tint:#F2EAD6;
  --green:#2E6B4F; --green-tint:#E1EEE6;
  --red:#AF352A; --red-tint:#F4E2DF;
  --amber:#B4691F; --amber-tint:#F6E9D8;
  --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
p{margin:0 0 1rem}
strong,b{font-weight:600; color:var(--ink)}
a{color:var(--blue)}
.mono{font-family:var(--mono)}

/* ---------- top nav (shared across pages) ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(238,241,244,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:1.2rem; padding:.65rem clamp(1rem,3vw,1.6rem)}
.nav .brand{font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep); font-weight:700; text-decoration:none; white-space:nowrap}
.nav .links{display:flex; gap:.15rem; margin-left:auto; overflow-x:auto}
.nav .links a{
  font-size:.85rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:.32rem .7rem; border-radius:6px; white-space:nowrap;
}
.nav .links a:hover{background:var(--paper-2); color:var(--ink)}
.nav .links a.on{background:var(--blue); color:#fff; font-weight:600}

/* ---------- layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(1rem,3vw,1.6rem)}
.narrow{max-width:760px; margin-left:auto; margin-right:auto}
main{padding:clamp(1.4rem,4vw,2.6rem) 0 4rem}
section{margin:0 0 3rem}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.73rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem;
}
.eyebrow::before{content:""; width:1.7rem; height:2px; background:var(--blue)}
h1{
  font-family:var(--serif); font-weight:700; color:var(--blue-deep); text-wrap:balance;
  font-size:clamp(1.9rem,5.2vw,3rem); line-height:1.15; margin:0 0 .9rem; letter-spacing:.01em;
}
h2{font-weight:700; font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.28; text-wrap:balance; margin:.2rem 0 .9rem}
h3{font-size:1.05rem; font-weight:600; margin:1.5rem 0 .5rem; color:var(--blue-deep)}
.lede{font-size:clamp(1rem,2.2vw,1.12rem); color:var(--ink-2); max-width:62ch}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}

/* ---------- demo-data banner ---------- */
.demo-note{
  display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; color:var(--brass); background:var(--brass-tint); border:1px solid #E0D0A8;
  border-radius:20px; padding:.22rem .75rem; font-weight:600;
}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.25rem}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.9rem; margin:1.2rem 0}
.callout{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0; padding:1rem 1.15rem; margin:1.4rem 0; font-size:.95rem;
}
.callout .lbl{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:.35rem}
.callout.warn{border-left-color:var(--amber)} .callout.warn .lbl{color:var(--amber)}
.callout.good{border-left-color:var(--green)} .callout.good .lbl{color:var(--green)}
.callout p:last-child{margin-bottom:0}

/* ---------- badges / chips ---------- */
.badge{font-family:var(--mono); font-size:.67rem; letter-spacing:.05em; font-weight:600; padding:.16rem .55rem; border-radius:20px; white-space:nowrap; display:inline-block}
.b-blue{background:var(--blue-tint); color:var(--blue-deep)}
.b-green{background:var(--green-tint); color:var(--green)}
.b-red{background:var(--red-tint); color:var(--red)}
.b-amber{background:var(--amber-tint); color:var(--amber)}
.b-grey{background:var(--paper-2); color:var(--ink-3)}
.b-brass{background:var(--brass-tint); color:var(--brass)}

/* ---------- grade cells (scorecard heatmap) ---------- */
.grade{
  font-family:var(--mono); font-weight:700; display:flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
  min-height:44px; font-size:.95rem;
}
.grade:hover{transform:scale(1.06); box-shadow:0 4px 14px -6px rgba(18,50,68,.35); z-index:2}
.g-A{background:var(--green-tint); color:var(--green); border-color:#BFDCCB}
.g-B{background:#EAF1E4; color:#5A7A3E; border-color:#D2E0C4}
.g-C{background:var(--amber-tint); color:var(--amber); border-color:#E6C99B}
.g-D{background:var(--red-tint); color:var(--red); border-color:#E4B7B0}
.g-x{background:var(--paper-2); color:var(--line-2); border-color:var(--line); cursor:default}
.g-x:hover{transform:none; box-shadow:none}

/* ---------- data tables ---------- */
.tbl-scroll{overflow-x:auto; margin:1.1rem 0; border:1px solid var(--line); border-radius:9px; background:var(--card)}
table.data{border-collapse:collapse; width:100%; font-size:.83rem; min-width:640px}
table.data th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:.6rem .8rem; border-bottom:1.5px solid var(--line); background:var(--card-2); white-space:nowrap;
}
table.data td{padding:.55rem .8rem; border-bottom:1px solid var(--paper-2); vertical-align:top; line-height:1.5}
table.data tr:last-child td{border-bottom:none}
table.data td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- code blocks ---------- */
pre.code{
  background:var(--blue-deep); color:#D7E2E8; border-radius:9px; padding:1rem 1.2rem; overflow-x:auto;
  font-family:var(--mono); font-size:.78rem; line-height:1.65; margin:1.1rem 0;
}
pre.code .k{color:#8FB4C8} pre.code .s{color:#9BD3B4} pre.code .c{color:#6C8494} pre.code .n{color:#E8C87E}

/* ---------- mock UI chrome (for product mockups) ---------- */
.mock{
  border:1px solid var(--line-2); border-radius:12px; background:var(--card); overflow:hidden;
  box-shadow:0 14px 40px -22px rgba(18,50,68,.35); margin:1.4rem 0;
}
.mock-bar{
  display:flex; align-items:center; gap:.5rem; background:var(--card-2); border-bottom:1px solid var(--line);
  padding:.5rem .9rem;
}
.mock-bar .dots{display:flex; gap:.32rem}
.mock-bar .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block}
.mock-bar .addr{
  font-family:var(--mono); font-size:.7rem; color:var(--ink-3); background:var(--paper);
  border:1px solid var(--line); border-radius:5px; padding:.14rem .7rem; margin-left:.4rem;
}
.mock-body{padding:clamp(.8rem,2.4vw,1.4rem)}

/* mock UI atoms */
.ui-btn{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600;
  border-radius:7px; padding:.4rem .85rem; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); cursor:default;
}
.ui-btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.ui-btn.ghost{background:transparent}
.ui-input{
  font-family:var(--mono); font-size:.78rem; color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line); border-radius:7px; padding:.4rem .7rem;
}
.ui-pane{border:1px solid var(--line); border-radius:9px; background:var(--card); overflow:hidden}
.ui-pane .hd{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding:.5rem .85rem; background:var(--card-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.5rem;
}
.ui-pane .bd{padding:.85rem}

/* ---------- KPI stat blocks ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin:1rem 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:9px; padding:.75rem .9rem}
.stat .v{font-family:var(--mono); font-size:1.45rem; font-weight:700; color:var(--blue-deep); font-variant-numeric:tabular-nums; line-height:1.2}
.stat .v.red{color:var(--red)} .stat .v.amber{color:var(--amber)} .stat .v.green{color:var(--green)}
.stat .k{font-size:.75rem; color:var(--ink-3); margin-top:.15rem; line-height:1.35}

/* ---------- flow arrows ---------- */
.flow-h{display:flex; align-items:stretch; gap:.4rem; overflow-x:auto; padding-bottom:.3rem}
.flow-h .fstep{
  flex:1; min-width:130px; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:.75rem .8rem; display:flex; flex-direction:column; gap:.3rem;
}
.flow-h .fstep .fn{font-family:var(--mono); font-size:.66rem; color:var(--blue); font-weight:700; letter-spacing:.06em}
.flow-h .fstep .ft{font-size:.84rem; font-weight:600; line-height:1.3}
.flow-h .fstep .fs{font-size:.73rem; color:var(--ink-3); line-height:1.4}
.flow-h .farr{display:flex; align-items:center; color:var(--line-2); flex:0 0 auto; font-size:1rem}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line); margin-top:2rem; padding:1.4rem 0 2.5rem;
  font-family:var(--mono); font-size:.74rem; color:var(--ink-3); line-height:1.7;
}

/* ---------- reveal animation ---------- */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none}
  .grade{transition:none}
  html{scroll-behavior:auto}
}