/* ============================================================
   浆果 AI · 果冻花园设计系统 v3（Jelly Garden）
   面向：小学生 + 家长 · 移动优先（小程序范式）
   基调：清爽、圆润、马卡龙色、Q 弹动效、卡通但不幼稚
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 主色：马卡龙五色 */
  --mint:#4FD1A5;   --mint-d:#2FB98A;   --mint-l:#E4FAF3;
  --sky:#5CB8FF;    --sky-d:#2F95E8;    --sky-l:#E3F3FF;
  --peach:#FF9F68;  --peach-d:#F57C3E;  --peach-l:#FFF0E6;
  --honey:#FFC94D;  --honey-d:#F0A800;  --honey-l:#FFF8E0;
  --berry:#FF7FA8;  --berry-d:#F05A8C;  --berry-l:#FFEBF1;
  --grape:#9B7BF5;  --grape-d:#7B57E0;  --grape-l:#F1ECFF;

  /* 中性 */
  --ink:#3A3153;
  --ink-2:#6E6685;
  --ink-3:#A29BB5;
  --line:#EFEAF7;
  --card:#FFFFFF;
  --bg:#FFFBF5;

  /* 圆角 / 阴影 / 动效 */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
  --sh-1:0 2px 10px rgba(90,70,150,.06);
  --sh-2:0 6px 22px rgba(90,70,150,.10);
  --sh-3:0 12px 34px rgba(90,70,150,.14);
  --sh-mint:0 8px 22px rgba(79,209,165,.32);
  --sh-sky:0 8px 22px rgba(92,184,255,.32);
  --sh-peach:0 8px 22px rgba(255,159,104,.32);
  --sh-berry:0 8px 22px rgba(255,127,168,.32);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.85,.36,1);

  /* 小程序安全区 */
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabbar-h:calc(64px + var(--safe-b));
  --font:'PingFang SC','HarmonyOS Sans','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
}

/* ---------- 2. 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img{display:block;max-width:100%;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
a{text-decoration:none;color:inherit;}

/* 容器：小程序 480 上限居中 */
.app{
  width:100%;max-width:520px;margin:0 auto;
  min-height:100dvh;position:relative;
  padding-bottom:var(--tabbar-h);
  overflow-x:hidden;
}

/* ---------- 3. 天空背景（随时段变化）---------- */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#BFE6FF 0%,#E8F6FF 38%,#FFF9F0 78%,#FFFBF5 100%);
  transition:background 1.2s var(--ease-out);
}
.sky.dawn  {background:linear-gradient(180deg,#FFD3B6 0%,#FFE9D6 40%,#FFF9F0 80%,#FFFBF5 100%);}
.sky.day   {background:linear-gradient(180deg,#BFE6FF 0%,#E8F6FF 40%,#FFF9F0 80%,#FFFBF5 100%);}
.sky.dusk  {background:linear-gradient(180deg,#C6B6FF 0%,#FFD9E4 45%,#FFF6EC 82%,#FFFBF5 100%);}
.sky.night {background:linear-gradient(180deg,#2E2A55 0%,#4A4478 35%,#8E85B8 70%,#FFFBF5 100%);}
.sky.night .sun{opacity:0;}
.sky.night .cloud{opacity:.25;}
.sky svg{position:absolute;inset:0;width:100%;height:100%;}

/* 太阳 / 月亮 */
.orb{
  position:absolute;top:26px;right:26px;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#FFF3B8,#FFD24D 62%,#FFB627);
  box-shadow:0 0 0 10px rgba(255,210,77,.18),0 0 34px rgba(255,190,60,.55);
  transition:all 1s var(--ease-out);
  animation:breathe 4.5s ease-in-out infinite;
}
.sky.night .orb{
  background:radial-gradient(circle at 34% 30%,#FFFDF2,#E9E4FF 60%,#C9BEFF);
  box-shadow:0 0 0 8px rgba(201,190,255,.16),0 0 30px rgba(180,170,255,.5);
}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* 云朵 */
.cloud{
  position:absolute;background:#fff;border-radius:999px;opacity:.85;
  filter:blur(.2px);
  animation:drift linear infinite;
}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%;}
.cloud.c1{width:74px;height:26px;top:70px;left:-90px;animation-duration:52s;}
.cloud.c1::before{width:34px;height:34px;top:-15px;left:12px;}
.cloud.c1::after{width:26px;height:26px;top:-10px;left:40px;}
.cloud.c2{width:56px;height:20px;top:132px;left:-70px;animation-duration:70s;animation-delay:-22s;opacity:.7;}
.cloud.c2::before{width:26px;height:26px;top:-12px;left:9px;}
.cloud.c2::after{width:20px;height:20px;top:-8px;left:30px;}
.cloud.c3{width:90px;height:30px;top:196px;left:-110px;animation-duration:88s;animation-delay:-50s;opacity:.5;}
.cloud.c3::before{width:40px;height:40px;top:-18px;left:16px;}
.cloud.c3::after{width:30px;height:30px;top:-12px;left:52px;}
@keyframes drift{from{transform:translateX(0);}to{transform:translateX(calc(100vw + 220px));}}

/* ---------- 4. 顶部问候 ---------- */
.hd{
  position:relative;z-index:2;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 6px;
  display:flex;align-items:center;gap:12px;
}
.avatar{
  width:48px;height:48px;border-radius:18px;flex:0 0 auto;
  background:linear-gradient(145deg,#FFE7A8,#FFC94D);
  display:grid;place-items:center;font-size:26px;
  box-shadow:0 6px 16px rgba(255,201,77,.42);
  animation:wave 3.2s ease-in-out infinite;
}
@keyframes wave{0%,86%,100%{transform:rotate(0);}90%{transform:rotate(-9deg);}94%{transform:rotate(9deg);}}
.hd-txt{flex:1;min-width:0;}
.hd-hello{font-size:19px;font-weight:800;letter-spacing:.2px;}
.hd-sub{font-size:12.5px;color:var(--ink-2);margin-top:3px;font-weight:500;}
.hd-btn{
  width:42px;height:42px;border-radius:15px;background:rgba(255,255,255,.86);
  box-shadow:var(--sh-1);display:grid;place-items:center;font-size:19px;
  transition:transform .18s var(--ease-bounce);
}
.hd-btn:active{transform:scale(.9);}

/* ---------- 5. 时钟 + 打卡环主卡 ---------- */
.hero{
  position:relative;z-index:2;margin:14px 16px 0;
  display:grid;grid-template-columns:1fr auto;gap:10px;
  background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  border-radius:var(--r-xl);
  padding:20px 20px 18px;
  box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.9);
  animation:rise .5s var(--ease-out) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.clock-time{
  font-size:44px;font-weight:800;line-height:1;
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--sky-d),var(--grape));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.clock-time .colon{display:inline-block;animation:pulseColon 1.6s ease-in-out infinite;}
@keyframes pulseColon{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.9);}}
.clock-meta{font-size:12px;color:var(--ink-3);margin-top:8px;font-weight:600;letter-spacing:.4px;}
.clock-greet{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:12px;padding:6px 12px;border-radius:999px;
  background:var(--mint-l);color:var(--mint-d);
  font-size:12px;font-weight:700;
}

/* 打卡圆环 */
.ring{position:relative;width:96px;height:96px;flex:0 0 auto;align-self:center;}
.ring svg{transform:rotate(-90deg);}
.ring-track{stroke:#F0EBF9;stroke-width:10;fill:none;stroke-linecap:round;}
.ring-fill{
  stroke:url(#ringGrad);stroke-width:10;fill:none;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;
  transition:stroke-dashoffset 1s var(--ease-out);
  filter:drop-shadow(0 3px 6px rgba(79,209,165,.4));
}
.ring-txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:19px;font-weight:800;color:var(--mint-d);line-height:1;
}
.ring-txt small{display:block;font-size:10px;color:var(--ink-3);font-weight:600;margin-top:2px;}

/* ---------- 6. 区块标题 ---------- */
.sec{position:relative;z-index:2;margin:26px 16px 0;}
.sec-hd{display:flex;align-items:baseline;gap:8px;margin:0 4px 12px;}
.sec-t{font-size:16.5px;font-weight:800;letter-spacing:.2px;}
.sec-badge{
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;
  background:var(--honey-l);color:var(--honey-d);
}
.sec-more{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:600;}

/* ---------- 7. 任务清单（打卡）---------- */
.tasks{
  background:var(--card);border-radius:var(--r-lg);
  padding:6px 4px;box-shadow:var(--sh-2);
}
.task{
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;border-radius:var(--r-md);
  transition:background .2s;cursor:pointer;
}
.task+.task{border-top:1px solid var(--line);}
.task:active{background:#FAF7FF;}
.task-ico{
  width:42px;height:42px;border-radius:14px;flex:0 0 auto;
  display:grid;place-items:center;font-size:21px;
}
.task-ico.i1{background:var(--mint-l);}
.task-ico.i2{background:var(--sky-l);}
.task-ico.i3{background:var(--peach-l);}
.task-ico.i4{background:var(--berry-l);}
.task-body{flex:1;min-width:0;}
.task-name{font-size:14.5px;font-weight:700;}
.task-desc{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.task-ck{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  border:2.5px solid #E3DCF2;display:grid;place-items:center;
  color:transparent;font-size:15px;font-weight:900;
  transition:all .26s var(--ease-bounce);
}
.task.done .task-ck{
  background:linear-gradient(140deg,var(--mint),var(--mint-d));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 12px rgba(79,209,165,.4);
  transform:scale(1.06);
}
.task.done .task-name{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px;}

/* ---------- 8. 学科大卡（2×2）---------- */
.subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.subj{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);padding:16px 16px 14px;
  min-height:118px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--sh-2);cursor:pointer;
  transition:transform .2s var(--ease-bounce),box-shadow .2s;
}
.subj:active{transform:scale(.965);box-shadow:var(--sh-1);}
.subj.cn  {background:linear-gradient(145deg,#FFE6EF,#FFD0E0);box-shadow:var(--sh-berry);}
.subj.math{background:linear-gradient(145deg,#E2F4FF,#C4E8FF);box-shadow:var(--sh-sky);}
.subj.en  {background:linear-gradient(145deg,#FFF3DC,#FFE2AE);box-shadow:var(--sh-peach);}
.subj.ai  {background:linear-gradient(145deg,#EDE7FF,#DCD2FF);box-shadow:0 8px 22px rgba(155,123,245,.3);}
.subj-emoji{font-size:30px;line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.1));}
.subj-name{font-size:17px;font-weight:800;margin-top:8px;}
.subj-sub{font-size:11px;font-weight:600;opacity:.62;margin-top:2px;}
.subj-count{
  position:absolute;top:12px;right:12px;
  font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
}
.subj::after{
  content:'';position:absolute;right:-24px;bottom:-24px;
  width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.34);
}

/* ---------- 9. 横向滑动卡（游戏/工具）---------- */
.hscroll{
  display:flex;gap:12px;overflow-x:auto;padding:4px 16px 10px;
  margin:0 -16px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none;}
.gcard{
  flex:0 0 152px;scroll-snap-align:start;
  background:var(--card);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--sh-2);
  transition:transform .2s var(--ease-bounce);
}
.gcard:active{transform:scale(.96);}
.gcard-img{
  width:100%;height:76px;border-radius:var(--r-sm);margin-bottom:10px;
  display:grid;place-items:center;font-size:34px;
}
.gcard-t{font-size:13.5px;font-weight:800;}
.gcard-d{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.45;}

/* ---------- 10. 底部 TabBar（小程序）---------- */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:520px;z-index:50;
  height:var(--tabbar-h);padding:6px 10px var(--safe-b);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(240,235,247,.9);
  box-shadow:0 -6px 24px rgba(90,70,150,.07);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:3px 0;border-radius:14px;
  color:var(--ink-3);font-size:10.5px;font-weight:700;
  transition:color .2s,transform .2s var(--ease-bounce);
}
.tab-ico{font-size:21px;line-height:1;transition:transform .26s var(--ease-bounce);filter:grayscale(.55);opacity:.72;}
.tab.on{color:var(--grape-d);}
.tab.on .tab-ico{transform:translateY(-3px) scale(1.14);filter:none;opacity:1;}
.tab.on::before{
  content:'';position:absolute;top:0;width:22px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--grape),var(--sky));
}
.tab{position:relative;}

/* ---------- 11. 面板切换 ---------- */
.panel{display:none;animation:fadeUp .34s var(--ease-out);}
.panel.on{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- 12. 通用小组件 ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  font-size:13px;font-weight:700;background:#fff;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease-bounce);
}
.pill:active{transform:scale(.95);}
.pill.on{background:linear-gradient(135deg,var(--grape),#B49BFF);color:#fff;box-shadow:0 6px 18px rgba(155,123,245,.4);}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{
  background:var(--card);border-radius:var(--r-md);padding:14px 10px;
  text-align:center;box-shadow:var(--sh-1);
}
.stat-n{font-size:22px;font-weight:800;line-height:1;}
.stat-l{font-size:10.5px;color:var(--ink-3);margin-top:5px;font-weight:600;}

/* 空白/提示 */
.empty{
  text-align:center;padding:38px 20px;color:var(--ink-3);font-size:13px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.empty-ico{font-size:40px;margin-bottom:10px;opacity:.7;}

/* 焦点环（无障碍） */
:focus-visible{outline:3px solid rgba(92,184,255,.5);outline-offset:3px;border-radius:8px;}

/* 减小动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}