/* ============================================================
   成长档案(需求 AU · 模块②,2026-10-18)
   我的 → 我的成长档案:打卡日历 / 连续天数 / 里程碑 / 成长足迹
   ★ 全部走主题变量(--primary / --grad / --card / --text2),
     11 套皮肤自动继承;body.dark 只补几处深色下会发灰的地方。
   ★ 回退:index.html 里删掉 archive.css 那一行 + h5.js 里删掉 pageArchive 段。
   ============================================================ */

/* ---------------- 顶部渐变卡 ---------------- */
.ar-hero{
  position:relative; overflow:hidden;
  border-radius:22px; padding:20px 20px 18px;
  background:var(--grad); color:#fff;
  box-shadow:0 12px 30px rgba(122,92,240,.26);
}
.ar-hero::before,.ar-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
}
.ar-hero::before{width:180px;height:180px;right:-52px;top:-72px}
.ar-hero::after{width:130px;height:130px;right:38px;bottom:-70px;opacity:.55}
.ar-hero-t{
  position:relative; z-index:1;
  font-size:13px; font-weight:600; letter-spacing:.4px;
  background:rgba(255,255,255,.22); border-radius:980px;
  padding:4px 11px; display:inline-block; backdrop-filter:blur(8px);
}
.ar-hero-n{position:relative;z-index:1;display:flex;align-items:baseline;gap:7px;margin-top:12px}
.ar-hero-n b{font-size:34px;line-height:1;font-weight:800;letter-spacing:-.5px}
.ar-hero-n span{font-size:13px;opacity:.9}
.ar-hero-s{position:relative;z-index:1;font-size:12px;opacity:.82;margin-top:8px}

/* ---------------- 四格数据 ---------------- */
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ar-cell{
  background:var(--card); border-radius:16px; padding:14px 14px 12px;
  border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:3px;
}
.ar-cell b{font-size:21px;font-weight:800;line-height:1.1;letter-spacing:-.3px;color:var(--text)}
.ar-cell b em{font-size:12px;font-weight:600;font-style:normal;color:var(--text2);margin-left:3px}
.ar-cell span{font-size:12px;color:var(--text2)}
.ar-cell.on{background:var(--tint);border-color:transparent}
.ar-cell.on b{color:var(--primary)}

/* ---------------- 打卡日历 ---------------- */
.ar-cal{padding:16px 14px 14px}
.ar-cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ar-cal-hd b{font-size:15px;font-weight:700}
.ar-cal-hd button{
  width:30px;height:30px;border-radius:50%;background:var(--card2);color:var(--text2);
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.ar-cal-hd button:disabled{opacity:.32}
.ar-cal-w{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  font-size:11px;color:var(--text2);text-align:center;margin-bottom:6px;
}
.ar-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ar-day{
  aspect-ratio:1/1; border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px; color:var(--text2);
  background:var(--card2);
}
.ar-day.blank{background:transparent}
.ar-day.on{color:#fff;font-weight:700}
/* 4 档用「同一色系不同明度」的实色,不用透明度 —— 透明叠白底时 4 档看着几乎一样 */
.ar-day.lv1{background:#DCCFFF;color:#5B3FD0}
.ar-day.lv2{background:#B79CFF;color:#fff}
.ar-day.lv3{background:#8B5CF6;color:#fff}
.ar-day.lv4{background:linear-gradient(135deg,#6D6BFA 0%,#B45CF6 55%,#FF7EB3 100%)}
.ar-day.today{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--primary)}
.ar-cal-lg{
  display:flex;align-items:center;gap:6px;justify-content:flex-end;
  margin-top:11px;font-size:11px;color:var(--text2);
}
.ar-cal-lg i{width:11px;height:11px;border-radius:4px;display:block}
.ar-cal-sum{
  display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text2);
}
.ar-cal-sum b{color:var(--text);font-size:14px;font-weight:700;margin-left:3px}

/* ---------------- 里程碑(横向滑动) ---------------- */
.ar-ms{
  display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ar-ms::-webkit-scrollbar{display:none}
.ar-msi{
  flex:0 0 104px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:13px 12px; text-align:center;
  box-shadow:var(--shadow);
}
.ar-msi-i{
  width:36px;height:36px;border-radius:12px;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;background:var(--card2);
}
.ar-msi b{display:block;font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3}
.ar-msi span{display:block;font-size:11px;color:var(--text2);margin-top:4px}
.ar-msi.hit{background:linear-gradient(150deg,#5B7CFA,#9B6BFA 60%,#FF7EB3);border-color:transparent}
.ar-msi.hit .ar-msi-i{background:rgba(255,255,255,.24)}
.ar-msi.hit b{color:#fff}
.ar-msi.hit span{color:rgba(255,255,255,.85)}

/* ---------------- 成长足迹(时间线) ---------------- */
.ar-tl{position:relative;padding-left:2px}
.ar-tld{margin-bottom:14px}
.ar-tld-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.ar-tld-h b{font-size:13px;font-weight:700}
.ar-tld-h span{font-size:12px;font-weight:700;color:var(--primary)}
.ar-tld-i{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:4px 14px; box-shadow:var(--shadow);
}
.ar-tli{display:flex;align-items:center;gap:10px;padding:10px 0}
.ar-tli+.ar-tli{border-top:1px solid var(--border)}
.ar-tli>i{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--primary); opacity:.65;
}
.ar-tli .grow{min-width:0;flex:1}
.ar-tli .grow b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.ar-tli .grow span{
  display:block;font-size:11.5px;color:var(--text2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ar-tli em{
  font-style:normal;font-size:13px;font-weight:700;color:var(--primary);
  flex:0 0 auto;
}

/* ---------------- 深色皮肤补丁(银河系 / 科技霓虹) ----------------
   ★ 深色皮肤是 body.theme-galaxy / body.theme-tech,**没有** body.dark。
   其余颜色都走变量(--card/--text/--text2/--border),会自动跟着变,
   这里只补两处写死的:最亮的那档日历格、里程碑未点亮时的图标底。 */
body.theme-galaxy .ar-day:not(.on),
body.theme-tech .ar-day:not(.on) { background: rgba(255, 255, 255, .06); color: var(--text2); }
body.theme-galaxy .ar-day.lv1,
body.theme-tech .ar-day.lv1 { background: #4B3A80; color: #E3DAFF; }
body.theme-galaxy .ar-cal-hd button,
body.theme-tech .ar-cal-hd button { background: rgba(255, 255, 255, .08); }
body.theme-galaxy .ar-msi:not(.hit) .ar-msi-i,
body.theme-tech .ar-msi:not(.hit) .ar-msi-i { background: rgba(255, 255, 255, .07); }