/* ============================================================
   四—六年级数学 · 知识图谱与诊断  —  共享样式
   浅色编辑风，无外链字体，适配离线/在线
   ============================================================ */
:root{
  --ink:#171a21;
  --ink2:#3d4551;
  --ink3:#727c8b;
  --ink4:#9aa3b0;
  --line:#e6e8ee;
  --line2:#eef0f4;
  --bg:#f6f7f9;
  --card:#ffffff;
  --brand:#2563eb;
  --brand-ink:#1d4ed8;
  --brand-tint:#eef3ff;

  --g4:#0f766e;   /* 四年级 青绿 */
  --g4t:#e6f5f2;
  --g5:#1d4ed8;   /* 五年级 蓝 */
  --g5t:#e8eeff;
  --g6:#7c3aed;   /* 六年级 紫 */
  --g6t:#f1ecfe;
  --g3:#64748b;   /* 三年级锚点 灰 */
  --g3t:#eef1f5;

  --hard:#e2504a;  /* 硬先修 */
  --soft:#c9a227;  /* 软先修 */

  --up:#0f7a5f;    /* 掌握/正向 */
  --warn:#b45309;
  --bad:#b42318;

  --shadow:0 1px 2px rgba(20,30,50,.05), 0 8px 24px -12px rgba(20,30,50,.14);
  --shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --radius:14px;
  --radius-sm:9px;
  --nav-h:58px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:#f1f3f6;padding:1px 6px;border-radius:5px}

/* ---------------- 顶部导航 ---------------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:1180px;margin:0 auto;height:100%;display:flex;align-items:center;gap:8px;padding:0 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.brand .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:14px;font-weight:800}
.brand small{color:var(--ink3);font-weight:500;font-size:12.5px;letter-spacing:.02em}
.nav-links{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav-links a{
  color:var(--ink2);font-size:14px;font-weight:600;padding:7px 13px;border-radius:9px;
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.nav-links a:hover{background:#f0f2f6;color:var(--ink);text-decoration:none}
.nav-links a.active{background:var(--brand-tint);color:var(--brand-ink)}

/* ---------------- 通用容器 ---------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:900px;margin:0 auto;padding:0 22px}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-size:14px;font-weight:650;font-family:inherit;
  padding:10px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:.15s;text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(37,99,235,.7)}
.btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink2)}
.btn-ghost:hover{border-color:#cfd6e0;background:#fafbfc;color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:9px}

/* ---------------- 徽标 ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;
  padding:2px 9px;border-radius:99px;line-height:1.7;white-space:nowrap}
.badge.g4{background:var(--g4t);color:var(--g4)}
.badge.g5{background:var(--g5t);color:var(--g5)}
.badge.g6{background:var(--g6t);color:var(--g6)}
.badge.g3{background:var(--g3t);color:var(--g3)}
.badge.domain{background:#f1f3f6;color:var(--ink2)}
.badge.kind{background:#fff;border:1px solid var(--line);color:var(--ink3)}
.badge.hard{background:#fdeceb;color:var(--hard)}
.badge.soft{background:#fbf5e0;color:#9a7a12}

/* ============================================================
   首页
   ============================================================ */
.hero{padding:64px 0 30px}
.hero .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:16px}
.hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.18;letter-spacing:-.025em;margin:0 0 18px;font-weight:800}
.hero h1 .accent{background:linear-gradient(120deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17px;color:var(--ink2);max-width:60ch;margin:0 0 28px;line-height:1.7}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 8px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.stat-card .n{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.stat-card .n small{font-size:15px;font-weight:600;color:var(--ink3);margin-left:2px}
.stat-card .l{font-size:13px;color:var(--ink3);margin-top:6px}

.section{padding:44px 0 10px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.section-head h2{font-size:23px;letter-spacing:-.015em;margin:0;font-weight:750}
.section-head .hint{color:var(--ink3);font-size:13.5px}

.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade-card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s}
.grade-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d9dee7}
.grade-card .gc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.grade-card .gc-badge{font-size:13px;font-weight:750;padding:4px 11px;border-radius:8px}
.grade-card.g4 .gc-badge{background:var(--g4t);color:var(--g4)}
.grade-card.g5 .gc-badge{background:var(--g5t);color:var(--g5)}
.grade-card.g6 .gc-badge{background:var(--g6t);color:var(--g6)}
.grade-card h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.grade-card .gc-meta{color:var(--ink3);font-size:13px;margin-bottom:16px;line-height:1.6}
.grade-card .gc-bar{height:5px;border-radius:3px;background:var(--line2);overflow:hidden;margin-bottom:16px}
.grade-card .gc-bar span{display:block;height:100%;border-radius:3px}
.grade-card.g4 .gc-bar span{background:var(--g4)}
.grade-card.g5 .gc-bar span{background:var(--g5)}
.grade-card.g6 .gc-bar span{background:var(--g6)}
.grade-card .gc-link{font-size:13.5px;font-weight:650}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.feature>p{flex:1 1 auto}
.feature .btn{margin-top:12px;align-self:flex-start}
.feature .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-ink);font-size:18px;margin-bottom:14px}
.feature h3{font-size:16px;margin:0 0 6px}
.feature p{font-size:13.5px;color:var(--ink2);margin:0 0 14px;line-height:1.62}

.note-box{margin:30px 0;background:#fff;border:1px solid var(--line);border-left:3px solid var(--ink4);
  border-radius:10px;padding:16px 20px;font-size:13px;color:var(--ink3);line-height:1.7}
.note-box b{color:var(--ink2)}

footer.site{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 44px;color:var(--ink3);font-size:12.5px}

@media(max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grade-grid,.feature-grid{grid-template-columns:1fr}
  .hero{padding:40px 0 20px}
}

/* ============================================================
   手机 / 微信内置浏览器适配
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}

/* 微信内底部提示条 */
.wx-tip{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(23,26,33,.95);color:#fff;font-size:12.5px;line-height:1.55;
  box-shadow:0 -8px 24px -14px rgba(0,0,0,.6);
}
.wx-tip.show{display:flex;align-items:center;gap:10px}
.wx-tip .tx{flex:1;min-width:0}
.wx-tip .tx b{color:#ffd479;font-weight:700}
.wx-tip .tc{
  flex:none;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);
  color:#fff;font-family:inherit;font-size:12px;font-weight:650;padding:6px 12px;border-radius:8px;cursor:pointer;
}
.wx-tip .tc:active{background:rgba(255,255,255,.22)}

/* 分享按钮（复制链接） */
.share-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

@media(max-width:680px){
  :root{--nav-h:52px}
  .nav-in{padding:0 12px;gap:4px}
  .brand{font-size:15px;gap:7px}
  .brand .logo{width:23px;height:23px;font-size:12px;border-radius:6px}
  .brand small{display:none}
  .nav-links{gap:0}
  .nav-links a{font-size:12.5px;padding:6px 8px;border-radius:7px}
  .wrap,.narrow{padding:0 16px}
  .hero{padding:26px 0 14px}
  .hero .kicker{font-size:11px;margin-bottom:12px}
  .hero h1{font-size:27px}
  .hero p.lead{font-size:14.5px;margin-bottom:20px}
  .hero-actions{gap:9px}
  .hero-actions .btn{flex:1 1 auto}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px 15px;border-radius:12px}
  .stat-card .n{font-size:24px}
  .stat-card .n small{font-size:11.5px}
  .stat-card .l{font-size:11.5px;margin-top:4px}
  .section{padding:28px 0 6px}
  .section-head{gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .section-head h2{font-size:19px}
  .section-head .hint{font-size:12px}
  .grade-card{padding:18px;border-radius:12px}
  .grade-card h3{font-size:17px}
  .feature{padding:18px;border-radius:12px}
  footer.site{margin-top:32px;padding:20px 0 40px;font-size:12px}
  .note-box{padding:14px 16px}
}
/* 四个导航项 + 窄屏：品牌名让位给导航，避免折行 */
@media(max-width:430px){
  .nav-in{padding:0 10px;gap:2px}
  .brand{font-size:0;gap:0}
  .brand .logo{font-size:13px}
  .nav-links{gap:0}
  .nav-links a{font-size:12px;padding:6px 7px;letter-spacing:-.2px}
}
@media(hover:none){
  .grade-card:hover{transform:none}
  .titem:hover{background:transparent}
  .rel-item:hover{border-color:var(--line2);background:#fcfdfe}
}