/* ================================================
   AI 体测算法原理分析页面 - 主样式
   风格：深色科技 + 侧边栏导航 + 卡片布局
   ================================================ */

:root {
  --bg-0:     #080e1a;
  --bg-1:     #0d1526;
  --bg-2:     #111f35;
  --bg-card:  rgba(16,28,52,0.75);
  --bg-card-h:rgba(22,38,68,0.9);

  --blue:     #3b82f6;
  --blue-l:   #60a5fa;
  --cyan:     #06b6d4;
  --cyan-l:   #67e8f9;
  --green:    #10b981;
  --green-l:  #6ee7b7;
  --orange:   #f59e0b;
  --orange-l: #fcd34d;
  --purple:   #8b5cf6;
  --purple-l: #c4b5fd;
  --red:      #ef4444;
  --red-l:    #fca5a5;
  --amber:    #f97316;
  --amber-l:  #fdba74;

  --txt-1: #f1f5f9;
  --txt-2: #94a3b8;
  --txt-3: #475569;
  --txt-4: #1e3a5f;

  --border:   rgba(59,130,246,0.15);
  --border-b: rgba(59,130,246,0.4);

  --r:    12px;
  --r-sm:  8px;
  --r-xs:  5px;
  --shadow: 0 4px 28px rgba(0,0,0,0.5);
  --glow:   0 0 28px rgba(59,130,246,0.1);
  --trans:  all 0.3s cubic-bezier(0.4,0,0.2,1);

  --nav-w:  240px;
  --mono: 'Cascadia Code','Fira Code','Consolas',monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body {
  font-family:-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg-0);
  color:var(--txt-1);
  line-height:1.65;
  display:flex;
  min-height:100vh;
}
img { max-width:100%; display:block; }
a   { color:var(--blue-l); text-decoration:none; }

/* ── 自定义滚动条 ─── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-1); }
::-webkit-scrollbar-thumb { background:#2563eb; border-radius:3px; }

/* ── 顶部进度条 ─── */
#progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple));
  z-index:9999; transition:width .1s linear;
  box-shadow:0 0 8px rgba(59,130,246,0.6);
}

/* ════════════════════════════════════════
   侧边导航栏
════════════════════════════════════════ */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:var(--nav-w);
  background:rgba(8,14,26,0.95);
  border-right:1px solid var(--border);
  backdrop-filter:blur(12px);
  display:flex; flex-direction:column;
  z-index:100; overflow-y:auto;
}
.sidebar-logo {
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.logo-title {
  font-size:.95rem; font-weight:800;
  background:linear-gradient(135deg,var(--blue-l),var(--cyan-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:4px;
}
.logo-sub { font-size:.72rem; color:var(--txt-3); }

.sidebar-nav { flex:1; padding:12px 8px; }
.nav-section-title {
  font-size:.65rem; font-weight:700; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.1em;
  padding:4px 10px 8px; margin-top:8px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--txt-2); font-size:.84rem;
  cursor:pointer; transition:var(--trans);
  margin-bottom:2px;
  text-decoration:none;
}
.nav-item:hover {
  color:var(--txt-1);
  background:rgba(59,130,246,0.08);
}
.nav-item.active {
  color:var(--blue-l);
  background:rgba(59,130,246,0.12);
  border-left:3px solid var(--blue);
  padding-left:9px;
}
.nav-icon { font-size:1.1rem; flex-shrink:0; }
.nav-label { flex:1; }
.nav-badge {
  font-size:.65rem; padding:1px 7px;
  border-radius:10px; background:rgba(59,130,246,0.2);
  color:var(--blue-l); border:1px solid rgba(59,130,246,0.3);
}

.sidebar-footer {
  padding:14px 16px;
  border-top:1px solid var(--border);
  font-size:.72rem; color:var(--txt-3);
  flex-shrink:0;
}

/* ════════════════════════════════════════
   主内容区
════════════════════════════════════════ */
.main-wrap {
  margin-left:var(--nav-w);
  flex:1; min-width:0;
  padding:40px 44px;
  max-width:1080px;
}

/* ── Hero ─── */
.hero {
  margin-bottom:52px;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px;
  background:rgba(59,130,246,0.08);
  border:1px solid rgba(59,130,246,0.25);
  border-radius:50px; font-size:.76rem;
  color:var(--blue-l); margin-bottom:16px;
}
.hero-title {
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:900; line-height:1.2; margin-bottom:14px;
}
.hero-grad {
  background:linear-gradient(135deg,var(--blue-l),var(--cyan-l),var(--purple-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-desc {
  color:var(--txt-2); font-size:.97rem;
  max-width:640px; line-height:1.75; margin-bottom:32px;
}
.hero-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;
}
.hero-chip {
  padding:4px 12px; border-radius:20px;
  font-size:.78rem; border:1px solid;
}
.hc-b { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.3); color:var(--blue-l); }
.hc-g { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.3); color:var(--green-l); }
.hc-o { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3); color:var(--orange-l); }
.hc-p { background:rgba(139,92,246,.1); border-color:rgba(139,92,246,.3); color:var(--purple-l); }
.hc-r { background:rgba(239,68,68,.1);  border-color:rgba(239,68,68,.3);  color:var(--red-l); }

/* ── Summary cards ─── */
.summary-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-bottom:56px;
}
.sum-card {
  padding:16px; text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--r);
  backdrop-filter:blur(6px); transition:var(--trans);
}
.sum-card:hover { border-color:var(--border-b); transform:translateY(-2px); box-shadow:var(--glow); }
.sum-num {
  font-size:1.8rem; font-weight:800;
  background:linear-gradient(135deg,var(--blue-l),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sum-lbl { font-size:.72rem; color:var(--txt-3); margin-top:4px; line-height:1.3; }

/* ════════════════════════════════════════
   项目卡片
════════════════════════════════════════ */
.project-card {
  margin-bottom:56px;
  scroll-margin-top:20px;
}
.project-header {
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px; padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.project-icon-wrap {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; flex-shrink:0;
}
.pi-blue   { background:rgba(59,130,246,.15); }
.pi-green  { background:rgba(16,185,129,.15); }
.pi-orange { background:rgba(245,158,11,.15); }
.pi-red    { background:rgba(239,68,68,.15);  }
.pi-purple { background:rgba(139,92,246,.15); }
.pi-cyan   { background:rgba(6,182,212,.15);  }
.pi-amber  { background:rgba(249,115,22,.15); }

.project-name {
  font-size:1.35rem; font-weight:800; margin-bottom:2px;
}
.project-meta {
  display:flex; gap:8px; flex-wrap:wrap;
}
.meta-badge {
  padding:2px 9px; border-radius:10px;
  font-size:.72rem; border:1px solid;
}
.mb-b { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.3); color:var(--blue-l); }
.mb-g { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.3); color:var(--green-l); }
.mb-o { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3); color:var(--orange-l); }

/* ── Diagram ─── */
.diagram-wrap {
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(59,130,246,0.15);
  margin-bottom:24px;
  background:#0b1120;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.diagram-wrap img {
  width:100%; height:auto; display:block;
}
.diagram-caption {
  padding:10px 16px;
  background:rgba(0,0,0,0.3);
  font-size:.75rem; color:var(--txt-3);
  border-top:1px solid rgba(59,130,246,0.08);
  text-align:center;
}

/* ── Algorithm panels ─── */
.algo-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:20px;
}
.algo-panel {
  padding:22px 22px 18px;
  background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--r);
  backdrop-filter:blur(6px);
}
.algo-panel:hover { border-color:var(--border-b); }
.algo-panel-head {
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px;
}
.algo-panel-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.api-score { background:rgba(16,185,129,.15); }
.api-anti  { background:rgba(239,68,68,.15);  }
.algo-panel-title {
  font-size:.9rem; font-weight:700;
}
.at-score { color:var(--green-l); }
.at-anti  { color:var(--red-l);   }

.algo-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.algo-item {
  display:flex; gap:10px;
  padding:10px 12px;
  background:rgba(0,0,0,0.15);
  border-radius:var(--r-sm);
  border-left:3px solid;
  font-size:.84rem; line-height:1.6;
}
.ai-s { border-left-color:var(--green); }
.ai-a { border-left-color:var(--red);   }
.ai-w { border-left-color:var(--orange);}
.item-bullet { font-size:1rem; flex-shrink:0; margin-top:1px; }
.item-content { color:var(--txt-2); }
.item-content strong { color:var(--txt-1); font-weight:600; }
.item-content code {
  background:rgba(59,130,246,.1); padding:1px 5px;
  border-radius:3px; font-family:var(--mono);
  font-size:.76rem; color:var(--cyan-l);
}

/* ── Key point highlight ─── */
.key-point {
  display:flex; gap:12px; padding:14px 16px;
  background:rgba(245,158,11,0.06);
  border:1px solid rgba(245,158,11,0.2);
  border-radius:var(--r-sm);
  font-size:.84rem; color:var(--txt-2);
  margin-top:14px;
}
.key-point-icon { font-size:1.1rem; flex-shrink:0; }

/* ── Section divider ─── */
.sec-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:52px 0;
}

/* ── Summary comparison table ─── */
.compare-table {
  width:100%; border-collapse:collapse;
  font-size:.84rem; margin-top:20px;
}
.compare-table th {
  padding:10px 14px; text-align:left;
  font-size:.71rem; font-weight:700; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:2px solid var(--border);
  background:rgba(0,0,0,.2);
}
.compare-table td {
  padding:11px 14px;
  border-bottom:1px solid rgba(30,58,95,.3);
  color:var(--txt-2); vertical-align:top;
}
.compare-table td:first-child { color:var(--txt-1); font-weight:500; }
.compare-table tr:hover td { background:rgba(59,130,246,0.03); }

/* ── Footer ─── */
.page-footer {
  padding:32px 0 8px;
  border-top:1px solid var(--border);
  text-align:center;
  font-size:.76rem; color:var(--txt-3);
  line-height:1.9;
}

/* ── Mobile toggle ─── */
.mobile-toggle {
  display:none;
  position:fixed; top:12px; left:12px; z-index:200;
  background:rgba(8,14,26,0.9); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; color:var(--txt-2);
  font-size:1.2rem; cursor:pointer; backdrop-filter:blur(8px);
}

/* ── Scroll reveal ─── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* ── Responsive ─── */
@media (max-width:1024px) {
  .algo-grid { grid-template-columns:1fr; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); transition:transform .3s ease; }
  .sidebar.open { transform:translateX(0); }
  .main-wrap { margin-left:0; padding:20px 16px 40px; }
  .mobile-toggle { display:block; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .summary-grid { grid-template-columns:1fr 1fr; }
  .hero-title { font-size:1.6rem; }
}