/* ═══════════ ① 首页（对应样机一） ═══════════ */

.home-top{
  display:flex;align-items:center;gap:1.7rem;
  padding:.55rem var(--page-pad) .45rem;flex:none;
}
/* ── 顶部导航里的 AI老师 入口（首页和科目页共用） ── */
.ai-teacher{display:flex;align-items:center;gap:.55rem;padding:.28rem .7rem .28rem .3rem;
  border-radius:999px;transition:transform .18s,background .18s;}
.ai-teacher:active{transform:scale(.95);}
.ai-teacher .at-orb{
  width:1.85rem;height:1.85rem;border-radius:.6rem;display:grid;place-items:center;
  background:linear-gradient(150deg,#8f7bff,#4a2fd6);
  box-shadow:0 .3rem .7rem rgba(90,50,230,.5),inset 0 1px 0 rgba(255,255,255,.4);
}
.ai-teacher .at-orb .ic{width:1.1rem;height:1.1rem;color:#fff;}
.ai-teacher .at-txt{font-size:1.18rem;font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(20,8,70,.45);}

/* 导航项：首页和科目页**共用这一份**（科目页不再单独覆盖，否则两边会岔开） */
.subj-tabs{display:flex;align-items:center;gap:1.45rem;}
.subj-tab{
  position:relative;font-size:1.02rem;font-weight:600;color:rgba(255,255,255,.48);
  transition:color .2s,transform .2s,font-weight .2s;padding:.15rem 0;
}
.subj-tab.is-active{color:#fff;font-weight:800;font-size:1.5rem;transform:translateY(-1px);
  text-shadow:0 2px 14px rgba(120,200,255,.35);}
.subj-tab.is-active::after{
  content:"";position:absolute;left:50%;bottom:-.5rem;transform:translateX(-50%);
  width:.85rem;height:.14rem;border-radius:1rem;
  background:linear-gradient(90deg,rgba(94,240,192,.9),rgba(63,216,255,.9));
  box-shadow:0 0 8px rgba(94,240,208,.6);
}
.subj-tab:active{transform:scale(.94);}

/* ── 网格 ── */
/* 上/下内边距和科目页的 .bento 保持一致（都是 .9rem）：
   导航行只负责到内容区盒子为止，"导航 → 第一张卡"的实际间距要靠这里补。
   之前这里是 0，所以首页的卡片比科目页高 15px、顶到了导航下划线。 */
.home-grid{
  flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:.94fr 1fr;
  gap:1rem;padding:.9rem var(--page-pad) .9rem;
}
/* 首页六张卡：4 张"小卡"（标题 + 副标题 + 插图，各占 1 格）+ 2 张"宽卡"（各占 2 格）
   排布由 HTML 里的先后顺序决定：
     第 1 行 = 小 + 小 + 宽    第 2 行 = 宽 + 小 + 小
   颜色用 tokens.css 里的共享变量（和科目页同色系）。 */
.c-mini{grid-column:span 1;}
.c-wide{grid-column:span 2;}

.c-mini{background:linear-gradient(158deg,var(--c1),var(--c2));}
.c-teal  {--c1:var(--c-teal-1);  --c2:var(--c-teal-2);}
.c-tealb {--c1:var(--c-teal-b1); --c2:var(--c-teal-b2);}
.c-violet{--c1:var(--c-violet-1);--c2:var(--c-violet-2);}
.c-coral {--c1:var(--c-coral-1); --c2:var(--c-coral-2);}
.c-amber {--c1:var(--c-amber-1); --c2:var(--c-amber-2);}
.c-wide.c-violet{background:linear-gradient(140deg,var(--c-violet-1),var(--c-violet-2));}

/* ── 小卡 ── */
.c-mini{display:flex;flex-direction:column;padding:1.05rem 1.15rem .6rem;}
.c-mini::after{background:radial-gradient(68% 68% at 84% 82%,rgba(255,255,255,.2),transparent 62%);}
.cm-title{
  position:relative;z-index:2;font-size:1.28rem;font-weight:900;color:#fff;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.cm-sub{
  position:relative;z-index:2;font-size:.76rem;color:rgba(255,255,255,.84);
  margin-top:.28rem;font-weight:500;
}
.cm-art{
  position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:flex-end;
  justify-content:flex-end;margin:0 -.6rem -.35rem 0;
}
.cm-art svg{width:78%;height:auto;max-height:100%;filter:drop-shadow(0 .6rem 1rem rgba(0,0,0,.28));}

/* ── 宽卡（左文右图，结构一样，只是背景不同） ── */
.c-wide{display:block;}
.cw-body{
  position:relative;z-index:2;width:50%;height:100%;padding:1.25rem 0 1.2rem 1.4rem;
  display:flex;flex-direction:column;
}
.cw-title{font-size:1.42rem;font-weight:800;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(20,10,90,.4);}
.cw-list{margin-top:.55rem;display:flex;flex-direction:column;gap:.3rem;}
.cw-list li{font-size:.85rem;color:rgba(255,255,255,.86);font-weight:500;}
.cw-btn{
  margin-top:auto;width:100%;padding:.68rem 1rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:1rem;font-weight:900;color:#04413a;letter-spacing:.02em;
  background:linear-gradient(100deg,#63f2bb,#3fd8ff);
  box-shadow:0 .55rem 1.3rem rgba(63,216,255,.4),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .18s;
}
.cw-btn:active{transform:scale(.96);}
.cw-btn .ic{fill:currentColor;stroke:none;}
.cw-art{position:absolute;right:-.2rem;bottom:.35rem;width:56%;z-index:1;pointer-events:none;}
.cw-art svg{width:100%;height:auto;}

/* ── AI 精准学（靛蓝） ── */
.c-ai{display:flex;flex-direction:column;padding:1.05rem 1.15rem 1rem;
  background:linear-gradient(140deg,var(--c-indigo-1),var(--c-indigo-2));}
.c-ai::after{background:radial-gradient(78% 82% at 52% 44%,rgba(190,205,255,.16),transparent 66%);}
.cai-title{position:relative;z-index:2;font-size:1.32rem;font-weight:800;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(20,10,90,.4);}
.cai-scene{position:relative;z-index:2;flex:1;min-height:0;display:grid;place-items:center;margin-top:-.2rem;}
.cai-scene svg{width:74%;max-height:100%;height:auto;}
.cai-bottom{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:.9rem;flex:none;}
.cai-rec{min-width:0;}
.cai-rec .lbl{display:block;font-size:.72rem;color:rgba(255,255,255,.5);margin-bottom:.15rem;}
.cai-rec-txt{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.94);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18rem;}
.cai-btn{
  flex:none;padding:.55rem 1.5rem;border-radius:999px;font-size:.95rem;font-weight:900;color:#053a2c;
  background:linear-gradient(100deg,#8bfab4,#2fe0b0);
  box-shadow:0 .5rem 1.2rem rgba(47,224,176,.42),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .18s;
}
.cai-btn:active{transform:scale(.95);}