/* ══════════════════════════════════════════════
   AI 汇 · 统一设计系统（黑线糖果风）
   所有页面引用此文件，页面内只放专属样式
   ══════════════════════════════════════════════ */

:root{
  --bg:#FFF8EF; --ink:#2D2A3E; --dim:#8B87A0; --line:#EFE8DC;
  --coral:#FF6B6B; --teal:#2EC4B6; --yellow:#FFD23F; --purple:#8B5CF6; --blue:#4D96FF;
  --orange:#FF9F43;
  --accent:var(--purple);          /* 每页可覆盖：标题徽章专属色 */
  --bd:2px solid var(--ink);       /* 标准描边 */
  --shadow:8px 8px 0 rgba(45,42,62,.12);  /* 卡片错位影 */
  --shadow-sm:4px 4px 0 var(--ink);       /* 按钮错位影 */
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.7;min-height:100vh;padding-top:76px;
  display:flex;flex-direction:column;
}
/* 点阵背景 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(139,92,246,.055) 1.6px,transparent 1.6px);
  background-size:40px 40px;
}

/* ── 固定顶栏 ── */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:76px;
  background:rgba(255,248,239,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.hd{max-width:1080px;margin:0 auto;height:100%;padding:0 20px;display:flex;align-items:center;gap:18px}
.logo{
  display:inline-block;font-size:18px;font-weight:900;background:var(--ink);color:#fff;
  padding:6px 14px;border-radius:12px;box-shadow:3px 3px 0 var(--yellow);flex:none;
  text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;
}
.logo:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--yellow)}

/* 关卡导航：干净胶囊序列 */
.steps-nav{display:flex;gap:6px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.steps-nav::-webkit-scrollbar{display:none}
.pnav{
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--dim);
  padding:7px 14px;border-radius:999px;white-space:nowrap;border:var(--bd);border-color:transparent;
}
.pnav i{width:10px;height:10px;border-radius:50%;background:#E3DECF;flex:none}
.pnav.done{color:var(--teal)}
.pnav.done i{background:var(--teal)}
.pnav.now{color:var(--ink);background:#fff;border-color:var(--ink)}
.pnav.now i{background:var(--coral);animation:segpulse 1.4s infinite}
@keyframes segpulse{50%{opacity:.4}}
@media(max-width:720px){.steps-nav{display:none}}

/* 小汇模块计数 */
.core-pill{
  flex:none;display:flex;align-items:center;gap:9px;background:#fff;
  border:var(--bd);border-radius:999px;padding:6px 14px 6px 8px;
  box-shadow:3px 3px 0 rgba(45,42,62,.2);font-size:12.5px;font-weight:800;
}
.core-pill .face{width:30px;height:27px;background:url('xiaofang_100.png') center/contain no-repeat}
.core-pill.waiting{opacity:.55;border-style:dashed}

main{position:relative;z-index:1;flex:1;max-width:920px;width:100%;margin:0 auto;padding:44px 20px 60px}

/* ── 标题区 ── */
.ttl{text-align:center;margin-bottom:34px}
.ttl .chip{
  display:inline-block;font-size:12.5px;font-weight:800;color:#fff;
  background:var(--accent);border:var(--bd);
  border-radius:999px;padding:6px 18px;margin-bottom:18px;letter-spacing:.08em;
  box-shadow:3px 3px 0 rgba(45,42,62,.25);
}
.ttl h1{font-size:clamp(28px,4.6vw,40px);font-weight:900;line-height:1.35}
.ttl .sub{color:var(--dim);font-size:15.5px;margin-top:12px}

/* ── 场景切换 ── */
.scene{display:none;animation:fadeup .45s both}
.scene.show{display:block}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}

.lead{font-size:16.5px;color:#55516B;text-align:center;max-width:600px;margin:0 auto}
.lead b{color:var(--ink)}
.fine{font-size:13px;color:var(--dim);text-align:center;margin-top:12px}
.center-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ── 按钮：黑线糖果 · 按压感 ── */
.btn{
  font-family:inherit;font-size:16px;font-weight:800;border:var(--bd);
  border-radius:16px;padding:14px 34px;cursor:pointer;letter-spacing:.04em;
  background:var(--coral);color:#fff;box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .15s,opacity .2s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.cool{background:var(--teal)}
.btn.line{background:#fff;color:var(--ink)}

/* ── 提示条 ── */
.notice{
  max-width:760px;margin:26px auto 0;background:#FFF3D6;border:var(--bd);
  border-radius:16px;padding:15px 22px;font-size:14.5px;font-weight:600;text-align:center;
  box-shadow:4px 4px 0 rgba(45,42,62,.15);animation:popin .4s both;
}
.notice b{color:#B7791F}
@keyframes popin{from{transform:scale(.6);opacity:0}}

/* ── 回放流程 ── */
.loop{max-width:520px;margin:10px auto 0}
.loop-step{display:flex;gap:16px;align-items:flex-start;padding:13px 0;opacity:.22;transition:opacity .4s}
.loop-step.lit{opacity:1}
.loop-step .n{
  flex:none;width:40px;height:40px;border-radius:14px;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:900;
  border:var(--bd);box-shadow:3px 3px 0 rgba(45,42,62,.15);transition:all .3s;
}
.loop-step.lit .n{background:var(--yellow)}
.loop-step h4{font-size:15.5px}
.loop-step p{font-size:13px;color:var(--dim)}
.loop-line{width:3px;height:12px;background:var(--ink);margin-left:19px;border-radius:2px;opacity:.25}

/* ── Aha 三层 ── */
.aha-box{
  max-width:680px;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;
  border:var(--bd);box-shadow:var(--shadow);
}
.aha-layer{padding:20px 26px;border-bottom:2.5px dashed var(--line);opacity:0;transform:translateY(12px);transition:all .5s}
.aha-layer.lit{opacity:1;transform:none}
.aha-layer:last-child{border-bottom:none}
.aha-layer .k{font-size:11.5px;font-weight:900;letter-spacing:.2em;margin-bottom:6px}
.aha-layer.l1 .k{color:var(--blue)}
.aha-layer.l2{background:#F0FBF6}
.aha-layer.l2 .k{color:var(--teal)}
.aha-layer.l3{background:#F5F0FF}
.aha-layer.l3 .k{color:var(--purple)}
.aha-layer p{font-size:15px;font-weight:600}
.aha-layer .term{
  display:inline-block;font-size:15px;font-weight:900;color:#fff;margin-top:10px;
  background:var(--purple);border:var(--bd);
  border-radius:12px;padding:5px 16px;box-shadow:3px 3px 0 var(--ink);
}

/* ── 知识卡：米白正面 · 不歪斜 · 浮动 · 叠卡式双层影 ── */
.kcard-stage{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 0}
.kcard{
  width:264px;height:348px;border-radius:24px;position:relative;flex:none;
  background:linear-gradient(165deg,#ffffff 55%,#FFF3D6);
  border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--teal),11px 11px 0 rgba(45,42,62,.14);
  padding:26px 24px;
  animation:kflip .8s cubic-bezier(.34,1.4,.64,1) both,kfloat 4.5s 1s ease-in-out infinite;
}
.kcard::after{
  content:"★";position:absolute;top:10px;right:16px;font-size:24px;color:var(--yellow);
  -webkit-text-stroke:1.5px var(--ink);animation:starpop 2.2s ease-in-out infinite;
}
@keyframes kflip{from{transform:perspective(800px) rotateY(90deg);opacity:0}}
@keyframes kfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes starpop{50%{transform:scale(1.25) rotate(12deg)}}
.kcard .rare{font-size:11px;font-weight:900;letter-spacing:.25em;color:var(--purple)}
.kcard .big{font-size:38px;font-weight:900;margin:14px 0 6px;letter-spacing:.02em}
.kcard .one{font-size:14.5px;font-weight:700;line-height:1.75}
.kcard .detail{font-size:12.5px;color:var(--dim);margin-top:14px;border-top:2.5px dashed var(--line);padding-top:13px}
.kcard .foot{position:absolute;bottom:16px;left:24px;right:24px;font-size:11px;color:var(--dim);display:flex;justify-content:space-between}

/* 知识卡回看弹层（首页已过关卡 / 验收完成页，点击小卡浮现大卡） */
.cardmask{
  position:fixed;inset:0;z-index:90;background:rgba(45,42,62,.45);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.cardmask.show{display:flex}
.cardmask .kcard{flex:none;cursor:default;animation:kflip .55s cubic-bezier(.34,1.4,.64,1) both}
.cardmask .cnav{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;
}
.cardmask .cnav button{
  font-family:inherit;font-size:15px;font-weight:900;width:40px;height:40px;border-radius:50%;
  background:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);cursor:pointer;
}
.cardmask .cnav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cardmask .cnav span{font-size:12.5px;font-weight:800;color:#fff}
.cardmask .chint{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
}

.reward-text{max-width:360px}
.reward-text h3{font-size:22px;font-weight:900;margin-bottom:8px}
.reward-text p{font-size:14px;color:var(--dim)}
.mchip{
  display:inline-block;margin-top:14px;font-size:13px;font-weight:800;
  background:var(--yellow);border:var(--bd);border-radius:999px;padding:7px 18px;
  box-shadow:3px 3px 0 var(--ink);animation:popin .5s .3s backwards;
}

/* ── 底栏（sticky footer） ── */
footer{position:relative;z-index:1;text-align:center;color:var(--dim);font-size:12.5px;padding:0 0 40px}