/* ============================================================
   账面 Quaesto 开放平台 — 样式系统
   token 承主站 DESIGN.md（forest green + amber / Space Grotesk）；
   版式按 Apple HIG「清晰 · 遵从 · 深度」。
   装饰服务于内容：光与层次用来分层，不用来炫技。
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Inter-700.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/SpaceGrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/SpaceGrotesk-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/SpaceGrotesk-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/JetBrainsMono-500.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root{
  --bg:#08090b; --bg-elevated:#101216; --bg-card:rgba(255,255,255,.028); --bg-card-hover:rgba(255,255,255,.055);
  --text:#f2f4f6; --text-secondary:#9ba3ad; --text-tertiary:#646d78;
  --primary:#10b981; --primary-deep:#064e3b; --primary-soft:rgba(16,185,129,.14);
  --accent:#f5a623; --accent-soft:rgba(245,166,35,.13);
  --border:rgba(255,255,255,.085); --border-strong:rgba(255,255,255,.15);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.55);
  --shadow-sm:0 2px 12px rgba(0,0,0,.28);

  --font-display:'Space Grotesk','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-body:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --cut-sm:6px; --r:12px; --r-lg:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1200px;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#fbfbfd; --bg-elevated:#ffffff; --bg-card:rgba(0,0,0,.022); --bg-card-hover:rgba(0,0,0,.045);
    --text:#0f1720; --text-secondary:#4d5866; --text-tertiary:#7b8794;
    --primary:#047857; --primary-soft:rgba(4,120,87,.09);
    --accent:#b45309; --accent-soft:rgba(180,83,9,.09);
    --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.16);
    --shadow-lg:0 22px 48px -16px rgba(15,23,32,.16);
    --shadow-sm:0 1px 3px rgba(15,23,32,.07);
  }
}
:root[data-theme="light"]{
  --bg:#fbfbfd; --bg-elevated:#ffffff; --bg-card:rgba(0,0,0,.022); --bg-card-hover:rgba(0,0,0,.045);
  --text:#0f1720; --text-secondary:#4d5866; --text-tertiary:#7b8794;
  --primary:#047857; --primary-soft:rgba(4,120,87,.09);
  --accent:#b45309; --accent-soft:rgba(180,83,9,.09);
  --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.16);
  --shadow-lg:0 22px 48px -16px rgba(15,23,32,.16);
  --shadow-sm:0 1px 3px rgba(15,23,32,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.7 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:var(--font-mono); font-size:.9em}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; letter-spacing:-.02em}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:3px;
}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky; top:0; z-index:60; border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:62px; gap:24px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); min-height:44px}
.brand:hover{text-decoration:none}
.brand-mark{
  font:700 15px/1 var(--font-display); letter-spacing:.05em; color:#fff;
  background:linear-gradient(135deg,var(--primary-deep),var(--primary));
  padding:7px 10px; border-radius:var(--cut-sm); box-shadow:0 2px 10px var(--primary-soft);
}
.brand-name{font:500 14.5px/1 var(--font-display); color:var(--text-secondary)}
.top nav{display:flex; align-items:center; gap:2px}
.top nav a{
  color:var(--text-secondary); font-size:14.5px; padding:10px 14px; min-height:44px;
  display:inline-flex; align-items:center; border-radius:8px; transition:color .16s,background .16s;
}
.top nav a:hover{color:var(--text); background:var(--bg-card); text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative; padding:104px 0 0; overflow:hidden}
.hero::before{                     /* 极细网格：秩序感，不是装饰 blob */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 22%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 22%,transparent 70%);
}
.hero::after{
  content:''; position:absolute; top:-32%; left:50%; width:120%; height:82%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(46% 52% at 50% 50%,var(--primary-soft),transparent 72%);
}
.hero .wrap{position:relative; z-index:1}
.hero-head{max-width:840px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  font:500 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-secondary); background:var(--bg-card);
  border:1px solid var(--border); border-radius:999px; padding:9px 15px;
}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary)}
.hero h1{
  font-size:clamp(36px,6.2vw,66px); font-weight:700; line-height:1.09;
  letter-spacing:-.035em; margin-bottom:26px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--primary),color-mix(in srgb,var(--primary) 52%,var(--accent)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  font-size:clamp(16.5px,1.5vw,19.5px); line-height:1.78; color:var(--text-secondary);
  max-width:620px; margin:0 0 34px;
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:60px}
.btn{
  display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 22px;
  font:500 15px/1 var(--font-display); cursor:pointer; border:1px solid transparent;
  border-radius:var(--r); transition:box-shadow .2s var(--ease),background .18s;
}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 76%,#0a7));
  color:#04120c; box-shadow:0 6px 22px -6px var(--primary-soft),0 1px 0 rgba(255,255,255,.18) inset;
}
.btn.primary:hover{text-decoration:none; box-shadow:0 12px 34px -8px var(--primary-soft)}
.btn.ghost{background:var(--bg-card); color:var(--text); border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--bg-card-hover); text-decoration:none}

/* Hero 视觉锚：产品实体本身 */
.showpiece{position:relative; margin-bottom:-1px}
.showpiece-inner{
  border:1px solid var(--border); border-bottom:none; background:var(--bg-elevated);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-lg); overflow:hidden;
}
.sp-bar{
  display:flex; align-items:center; gap:14px; padding:13px 20px;
  border-bottom:1px solid var(--border); background:var(--bg-card);
  font:500 12.5px/1 var(--font-mono); color:var(--text-tertiary); letter-spacing:.03em;
}
.sp-bar .dot{width:9px; height:9px; border-radius:50%; background:var(--border-strong)}
.sp-bar .who{margin-left:auto; color:var(--text-secondary)}
.sp-body{display:grid; grid-template-columns:1fr 1fr}
.sp-col{padding:26px 28px 34px; min-width:0}
.sp-col + .sp-col{border-left:1px solid var(--border)}
.sp-tag{
  display:inline-block; font:500 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:7px 10px; border-radius:6px; margin-bottom:18px;
}
.sp-tag.text{background:var(--primary-soft); color:var(--primary)}
.sp-tag.okf{background:var(--accent-soft); color:var(--accent)}
.sp-no{font:500 12.5px/1 var(--font-mono); color:var(--primary); display:block; margin-bottom:10px}
.sp-col p{margin:0; font-size:14.5px; line-height:1.85; color:var(--text-secondary)}
.sp-col strong{color:var(--text); font-weight:600}
.sp-step{font:600 16px/1.5 var(--font-display); color:var(--text); margin-bottom:10px}
.sp-link{
  margin-top:18px; padding-top:15px; border-top:1px dashed var(--border);
  font:500 12.5px/1.75 var(--font-mono); color:var(--accent);
}
.sp-link span{color:var(--text-tertiary)}

/* ---------- 通用章节 ---------- */
section.band{padding:96px 0; border-top:1px solid var(--border)}
section.band.tint{background:var(--bg-elevated)}
.sec-head{margin-bottom:44px; max-width:800px}
.sec-head h2{font-size:clamp(24px,3.2vw,38px); font-weight:700; line-height:1.22; margin-bottom:14px}
.sec-head p{margin:0; color:var(--text-secondary); font-size:16.5px; line-height:1.78}
.kicker{
  display:block; font:500 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); margin-bottom:16px;
}

/* ---------- 来源与完整性 / 统计 ---------- */
.prov-grid,.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.prov-cell{background:var(--bg-elevated); padding:26px 26px 28px}
.prov-cell dt{
  font:500 11.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-tertiary); margin-bottom:12px;
}
.prov-cell dd{margin:0; font:600 15.5px/1.5 var(--font-display); color:var(--text)}
.prov-cell dd small{display:block; margin-top:8px; font:400 13px/1.7 var(--font-body); color:var(--text-secondary)}
.prov-cell dd a{color:var(--text); text-decoration:underline; text-underline-offset:3px}

.stats div{background:var(--bg-elevated); padding:28px 26px}
.stats b{display:block; font:700 40px/1.1 var(--font-display); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--text); margin-bottom:6px}
.stats span{font-size:13.5px; color:var(--text-tertiary)}

/* ---------- 板块 ---------- */
.tracks{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px}
.track{
  display:flex; flex-direction:column; gap:13px; padding:28px; color:var(--text);
  border:1px solid var(--border); background:var(--bg-elevated); border-radius:var(--r-lg);
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
}
a.track:hover{text-decoration:none; border-color:var(--border-strong);
  transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.track-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.track h3{font-size:19px; font-weight:600}
.track p{margin:0; flex:1; font-size:14.5px; line-height:1.78; color:var(--text-secondary)}
.track .enter{font:500 14.5px/1 var(--font-display); color:var(--primary)}
.track.wip{opacity:.62}
.track.wip .enter{color:var(--text-tertiary)}
.chip{font:500 11px/1 var(--font-mono); letter-spacing:.07em; padding:6px 10px; border-radius:999px; white-space:nowrap}
.chip.live{background:var(--primary); color:#04120c}
.chip.wip{background:var(--bg-card-hover); color:var(--text-tertiary); border:1px solid var(--border)}

/* ---------- 接入 ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tabs button{
  appearance:none; background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-secondary); font:500 13.5px/1 var(--font-display);
  padding:12px 18px; min-height:44px; cursor:pointer; border-radius:999px;
  transition:color .16s,background .16s,border-color .16s;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--primary); border-color:var(--primary); color:#04120c}
.code{
  position:relative; border:1px solid var(--border); background:var(--bg-elevated);
  padding:22px 24px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.code pre{margin:0; overflow-x:auto; padding-right:84px; font:400 13.5px/1.9 var(--font-mono); color:var(--text)}
.code pre .c{color:var(--text-tertiary)}
.code .copy{
  position:absolute; top:16px; right:16px; min-height:34px; padding:0 14px;
  font:500 12.5px/1 var(--font-display); cursor:pointer; border-radius:8px;
  color:var(--text-secondary); background:var(--bg-card); border:1px solid var(--border-strong);
  transition:color .16s,background .16s;
}
.code .copy:hover{color:var(--text); background:var(--bg-card-hover)}
.code-note{margin:16px 0 0; font-size:14px; color:var(--text-tertiary)}

/* ---------- 校验门 ---------- */
.gates{border-top:1px solid var(--border)}
.gate{display:grid; grid-template-columns:54px 1fr 220px; gap:24px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--border)}
.gate .no{font:500 12.5px/1.75 var(--font-mono); color:var(--text-tertiary)}
.gate h4{font-size:16px; font-weight:600; margin-bottom:6px}
.gate p{margin:0; font-size:14.5px; line-height:1.75; color:var(--text-secondary)}
.gate .result{font:500 13.5px/1.75 var(--font-mono); color:var(--primary); text-align:right; font-variant-numeric:tabular-nums}
.gate .result.warn{color:var(--accent)}

/* ---------- 差异点 ---------- */
.points{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:4px 56px}
.point{padding:22px 0; border-top:1px solid var(--border)}
.point h4{font-size:16.5px; font-weight:600; margin-bottom:8px}
.point p{margin:0; font-size:14.5px; line-height:1.78; color:var(--text-secondary)}

/* ---------- 内容状态 ---------- */
.status-row{display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:start;
  padding:24px 0; border-top:1px solid var(--border)}
.status-row p{margin:0; font-size:15px; line-height:1.78; color:var(--text-secondary)}
.badge{font:500 12.5px/1 var(--font-mono); letter-spacing:.05em; padding:10px 12px; text-align:center; border-radius:8px}
.badge.ok{background:var(--primary-soft); color:var(--primary); border:1px solid var(--primary)}
.badge.draft{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent)}

/* ---------- 招募 ---------- */
.join p{font-size:16px; line-height:1.82; color:var(--text-secondary); margin:0 0 16px; max-width:860px}
.contact{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 32px; margin-top:28px;
  border:1px solid var(--border); background:var(--bg-elevated); padding:24px 28px; border-radius:var(--r-lg);
}
.contact div{display:flex; gap:16px; align-items:baseline; font-size:15px; padding:8px 0}
.contact span{color:var(--text-tertiary); font:400 12.5px/1 var(--font-mono); min-width:48px}

/* ---------- 页脚 ---------- */
footer{padding:64px 0 72px; background:var(--bg-elevated); border-top:1px solid var(--border)}
.foot-cols{display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:36px; margin-bottom:44px}
.foot-cols h5{font:500 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-tertiary); margin:0 0 16px}
.foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot-cols a{font-size:14.5px; color:var(--text-secondary)}
.foot-cols a:hover{color:var(--primary)}
.foot-about p{margin:0 0 12px; font-size:14px; line-height:1.78; color:var(--text-secondary); max-width:300px}
.fine{font-size:13px; color:var(--text-tertiary); margin:0 0 8px; line-height:1.78}
.foot-bottom{border-top:1px solid var(--border); padding-top:26px}

/* ---------- 子页（准则库 / API）沿用的旧类名兼容 ---------- */
.sec{margin:56px 0 20px; font-size:20px; font-weight:600; padding-bottom:12px; border-bottom:1px solid var(--border)}
.empty{color:var(--text-tertiary); font-size:14.5px; padding:20px 0}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .tracks{grid-template-columns:1fr}
  .sp-body{grid-template-columns:1fr}
  .sp-col + .sp-col{border-left:none; border-top:1px solid var(--border)}
  .prov-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding:64px 0 0}
  section.band{padding:60px 0}
  .prov-grid,.stats{grid-template-columns:1fr}
  .gate{grid-template-columns:1fr; gap:8px}
  .gate .result{text-align:left}
  .status-row{grid-template-columns:1fr; gap:12px}
  .badge{justify-self:start}
  .foot-cols{grid-template-columns:1fr}
  .brand-name{display:none}
  .top nav a{padding:10px 9px; font-size:13.5px}
}