/* ============================================================
   儿童学习管理系统 · 设计令牌 (宝宝巴士风格 · 明亮·圆润·可爱)
   - 配色：天蓝 / 草绿 / 阳光黄 / 珊瑚 / 粉，自研机器人“豆豆”青色品牌色
   - 自研、免费、可开源；字体走系统圆体 + ZCOOL KuaiLe(开源)增强
   ============================================================ */
:root{
  /* —— 主题色板（明亮、安全、儿童友好） —— */
  --sky:#54C7F0;        --sky-deep:#2BA9E0;   --sky-soft:#E6F6FF;
  --grass:#7BC86C;      --grass-deep:#5BA84C; --grass-soft:#EAF7E6;
  --sun:#FFD24C;        --sun-deep:#FFB300;
  --coral:#FF8A65;      --coral-deep:#FF7043;
  --pink:#F472A8;       --purple:#B47BE0;
  --teal:#36C5C0;       --teal-deep:#1FA8A3;  --teal-soft:#E2F7F6;

  /* —— 中性 / 语义 —— */
  --cream:#FFF7EA;
  --bg:#EAF6FF;
  --bg2:#F4FBFF;
  --card:#FFFFFF;
  --card-soft:#F1F9FF;
  --text:#3C4A5A;       --text-soft:#8696A6;
  --line:#E6EFF6;
  --gold:#FFB300;
  --ok:#5BA84C;         --ok-soft:#EAF7E6;
  --warn:#FF8A65;       --danger:#EF5350;

  --brand:#36C5C0;      --brand-deep:#1FA8A3;

  /* —— 圆角（极圆，宝宝巴士观感） —— */
  --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* —— 字号（大字号，低年级友好） —— */
  --fs-xs:14px; --fs-sm:16px; --fs-md:19px; --fs-lg:24px; --fs-xl:32px; --fs-2xl:46px;

  /* —— 间距 —— */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;

  /* —— 阴影（柔和） —— */
  --shadow-sm:0 4px 12px rgba(46,120,180,.08);
  --shadow:0 10px 26px rgba(46,120,180,.14);
  --shadow-lg:0 16px 40px rgba(46,120,180,.20);

  /* —— 字体（圆体优先，开源增强） —— */
  --font:'ZCOOL KuaiLe','Baloo 2','PingFang SC','Microsoft YaHei','微软雅黑','Comic Sans MS',sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.3px;
}
button{font-family:inherit;cursor:pointer;border:none;outline:none;}
img,svg{user-select:none;}

/* —— 通用可爱按钮 —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-md);
  box-shadow:var(--shadow-sm);transition:transform .12s, box-shadow .12s;}
.btn:active{transform:scale(.94);box-shadow:var(--shadow);}
.btn-sky{background:linear-gradient(135deg,var(--sky),var(--sky-deep));color:#fff;}
.btn-grass{background:linear-gradient(135deg,var(--grass),var(--grass-deep));color:#fff;}
.btn-sun{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#5A3D00;}
.btn-coral{background:linear-gradient(135deg,var(--coral),var(--coral-deep));color:#fff;}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;}

/* —— 通用数据环 —— */
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.ring svg{transform:rotate(-90deg);}
.ring .ring-label{position:absolute;text-align:center;}

/* —— 漂浮/弹跳动画 —— */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bounceIn{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes cloudMove{from{transform:translateX(-10%)}to{transform:translateX(110%)}}