/* ============================================================
   Zippy English Kids · 全站共享样式
   Child UI = 全英文 · 明亮活泼 · 大点击区
   Parent UI = 中文 · 简洁 · 数据面板
   ============================================================ */
:root{
  --zp-orange:#ff8a3d; --zp-orange-d:#f26a1b;
  --zp-yellow:#ffd23f; --zp-yellow-d:#f5b800;
  --zp-sky:#7fd4ff;   --zp-sky-d:#39a9e8;
  --zp-green:#6fce6a; --zp-green-d:#3fae42;
  --zp-pink:#ff9ec7;  --zp-purple:#b39bff;
  --zp-ink:#3b3b4f;   --zp-ink-l:#6b6b82;
  --zp-bg:#fff6e9;
  --card-bg:#ffffff;
  --radius:22px; --radius-s:14px;
  --shadow:0 8px 24px rgba(255,138,61,.16);
  --shadow-sm:0 4px 14px rgba(60,60,90,.10);
  --font-kid:'Comic Sans MS','Chalkboard SE','Baloo 2','Nunito',-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font-kid);color:var(--zp-ink);background:var(--zp-bg);overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
img,svg{display:block}

/* ---------- 通用大点击区按钮 ---------- */
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;min-width:64px;
  padding:14px 28px;border-radius:40px;font-size:22px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--zp-orange),var(--zp-orange-d));box-shadow:0 6px 0 rgba(0,0,0,.12),0 12px 22px rgba(255,138,61,.35);
  transition:transform .08s,box-shadow .08s;user-select:none}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.big-btn.green{background:linear-gradient(180deg,var(--zp-green),var(--zp-green-d));box-shadow:0 6px 0 rgba(0,0,0,.12),0 12px 22px rgba(111,206,106,.35)}
.big-btn.blue{background:linear-gradient(180deg,var(--zp-sky),var(--zp-sky-d));box-shadow:0 6px 0 rgba(0,0,0,.12),0 12px 22px rgba(127,212,255,.35)}
.big-btn.yellow{color:#7a5600;background:linear-gradient(180deg,var(--zp-yellow),var(--zp-yellow-d));box-shadow:0 6px 0 rgba(0,0,0,.10),0 12px 22px rgba(245,184,0,.35)}
.big-btn.pink{background:linear-gradient(180deg,var(--zp-pink),#f76aa4);box-shadow:0 6px 0 rgba(0,0,0,.12),0 12px 22px rgba(255,158,199,.4)}
.big-btn.ghost{background:#fff;color:var(--zp-ink);box-shadow:0 4px 0 rgba(60,60,90,.10),0 10px 18px rgba(60,60,90,.10);border:2px solid #eee}
.big-btn.sm{min-height:52px;font-size:18px;padding:10px 20px}
.big-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 卡片 ---------- */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}
.card.soft{background:#fff;border:3px solid #fff0dd}

/* ---------- 儿童端顶栏 / 底部 ---------- */
.child-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:linear-gradient(90deg,#ffe9c9,#fff);border-bottom:3px solid #ffe0b0;box-shadow:0 4px 14px rgba(255,170,80,.15)}
.child-top .logo{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:900;color:var(--zp-orange-d)}
.child-top .spacer{flex:1}
.top-pill{background:#fff;border:2px solid #ffe0b0;border-radius:40px;padding:6px 14px;font-weight:800;display:flex;align-items:center;gap:6px;color:var(--zp-ink)}
.star-icon,.gem-icon{font-size:20px}

/* 底部 tab 导航（儿童端） */
.child-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:#fff;border-top:3px solid #ffe9c9;
  box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.child-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;font-size:12px;font-weight:800;color:var(--zp-ink-l)}
.child-tabs a .ico{font-size:26px;line-height:1}
.child-tabs a.on{color:var(--zp-orange-d)}
.child-tabs a.on .ico{transform:translateY(-3px)}
/* ---------- 页面容器 ---------- */
.wrap{max-width:820px;margin:0 auto;padding:18px 16px 30px}
.pad-bottom{padding-bottom:110px !important}
.center{text-align:center}
.h1{font-size:30px;font-weight:900;color:var(--zp-ink)}
.h2{font-size:24px;font-weight:900;color:var(--zp-ink)}
.sub{color:var(--zp-ink-l);font-size:16px}


/* ============================================================
   🎨 DESIGN SYSTEM v2 — 2026-09 全新视觉
   ============================================================ */

/* Google Fonts: Baloo 2 (圆润儿童字体) + Nunito */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root{
  /* 全新配色：紫蓝主调 + 橙粉点缀 */
  --zp-purple:#7c5cfc; --zp-purple-d:#5b3ddb;
  --zp-magenta:#ff5fa2; --zp-magenta-d:#e84488;
  --zp-cyan:#22d3ee; --zp-cyan-d:#06b6d4;
  --zp-mint:#34d399; --zp-mint-d:#10b981;
  --zp-sun:#fbbf24; --zp-sun-d:#f59e0b;
  --zp-ink:#2d2b55; --zp-ink-l:#6b6b9e;
  --zp-bg-1:#f5f3ff; --zp-bg-2:#fce7f3; --zp-bg-3:#e0f2fe;
  --card-bg:rgba(255,255,255,.75);
  --radius:24px; --radius-s:16px;
  --shadow-1:0 4px 14px rgba(124,92,252,.08);
  --shadow-2:0 10px 30px rgba(124,92,252,.12);
  --shadow-3:0 20px 50px rgba(124,92,252,.18);
  --font-kid:'Baloo 2','Nunito',-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* 渐变背景 */
body{
  font-family:var(--font-kid);
  background:linear-gradient(135deg,var(--zp-bg-1) 0%,var(--zp-bg-2) 50%,var(--zp-bg-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
}

/* 毛玻璃卡片 */
.card, .mod-card, .panel{
  background:var(--card-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-2);
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover, .mod-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-3);
}

/* 顶栏毛玻璃 */
.child-top{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(124,92,252,.1);
  box-shadow:0 4px 20px rgba(124,92,252,.08);
}
.child-top .logo{color:var(--zp-purple-d)}

/* 底部 tab 毛玻璃 */
.child-tabs{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(124,92,252,.1);
  box-shadow:0 -4px 20px rgba(124,92,252,.08);
}
.child-tabs a.on{color:var(--zp-purple)}
.child-tabs a.on .ico{transform:translateY(-3px) scale(1.15)}

/* 按钮弹性动画 */
.big-btn{
  background:linear-gradient(180deg,var(--zp-purple),var(--zp-purple-d));
  box-shadow:0 6px 0 var(--zp-purple-d), 0 12px 24px rgba(124,92,252,.35);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.big-btn:active{transform:translateY(5px) scale(.97); box-shadow:0 2px 0 var(--zp-purple-d), 0 6px 12px rgba(124,92,252,.3)}
.big-btn.green{background:linear-gradient(180deg,var(--zp-mint),var(--zp-mint-d)); box-shadow:0 6px 0 var(--zp-mint-d), 0 12px 24px rgba(52,211,153,.35)}
.big-btn.green:active{box-shadow:0 2px 0 var(--zp-mint-d), 0 6px 12px rgba(52,211,153,.3)}
.big-btn.blue{background:linear-gradient(180deg,var(--zp-cyan),var(--zp-cyan-d)); box-shadow:0 6px 0 var(--zp-cyan-d), 0 12px 24px rgba(34,211,238,.35)}
.big-btn.blue:active{box-shadow:0 2px 0 var(--zp-cyan-d), 0 6px 12px rgba(34,211,238,.3)}
.big-btn.ghost{background:rgba(255,255,255,.8); color:var(--zp-ink); border:2px solid rgba(124,92,252,.2)}

/* 卡片入场动画 */
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.wrap > *{animation:cardIn .4s ease both}
.wrap > *:nth-child(2){animation-delay:.05s}
.wrap > *:nth-child(3){animation-delay:.1s}
.wrap > *:nth-child(4){animation-delay:.15s}
.wrap > *:nth-child(5){animation-delay:.2s}

/* 答对粒子效果 */
@keyframes confetti{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}
.confetti{
  position:fixed;width:10px;height:10px;border-radius:50%;
  pointer-events:none;z-index:999;
  animation:confetti 1s ease-out forwards;
}

/* 顶部 pill 升级 */
.top-pill{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(124,92,252,.15);
  border-radius:30px;
  font-weight:800;
  box-shadow:var(--shadow-1);
}

/* 进度条升级 */
.pbar{background:rgba(124,92,252,.1); border-radius:20px; overflow:hidden}
.pbar>i{
  background:linear-gradient(90deg,var(--zp-purple),var(--zp-magenta));
  border-radius:20px;
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}

/* 标题字体升级 */
.h1{
  font-size:32px;
  font-weight:800;
  background:linear-gradient(135deg,var(--zp-purple-d),var(--zp-magenta-d));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* toast 升级 */
.toast{
  background:rgba(45,43,85,.9);
  backdrop-filter:blur(10px);
  border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* 弹窗升级 */
.modal-box{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  border-radius:28px;
  box-shadow:0 24px 60px rgba(124,92,252,.25);
  animation:pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* 词块/单词卡升级 */
.word-chip{
  background:rgba(255,255,255,.9);
  border:2px solid rgba(124,92,252,.2);
  border-radius:20px;
  box-shadow:var(--shadow-1);
  transition:all .15s;
}
.word-chip:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--zp-purple)}
.word-chip.on{background:linear-gradient(135deg,var(--zp-purple),var(--zp-purple-d)); color:#fff; border-color:transparent}

/* 关卡卡片升级 */
.mod-card{
  transition:all .2s ease;
}
.mod-card .emoji{
  font-size:36px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));
}
.mod-card:hover .emoji{transform:scale(1.15) rotate(-5deg)}
.mod-card .emoji, .mod-card .name{transition:transform .2s}

/* 句子拼装 answer 区 */
.answer-box{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  border:2px dashed rgba(124,92,252,.3);
}

/* Zippy 卡片横幅 */
.zippy-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#ffe3b8,#ffd2a3);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.zippy-banner .bubble{flex:1;background:#fff;border-radius:18px;padding:14px 16px;font-size:20px;font-weight:800;position:relative;box-shadow:var(--shadow-sm)}
.zippy-banner .bubble::before{content:"";position:absolute;left:-12px;top:22px;border:10px solid transparent;border-right-color:#fff}

/* ---------- 家长端 ---------- */
body.parent{background:#f4f7fb;font-family:var(--font-body)}
.parent-nav{display:flex;align-items:center;gap:14px;padding:14px 22px;background:#fff;border-bottom:1px solid #e6ebf2}
.parent-nav .brand{font-weight:800;color:#1f3a5f;font-size:18px}
.parent-nav .brand small{color:#9aa7bd;font-weight:600}
.parent-nav .spacer{flex:1}
.parent-nav a.pill{color:#1f3a5f;font-weight:600;padding:8px 14px;border-radius:10px}
.parent-nav a.pill.on,.parent-nav a.pill:hover{background:#eaf2ff;color:#2c6ec5}
.parent-wrap{max-width:1080px;margin:0 auto;padding:24px 20px 60px}
.panel{background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(31,58,95,.06);padding:22px;margin-bottom:18px}
.panel h3{font-size:18px;font-weight:700;color:#1f3a5f;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{background:linear-gradient(160deg,#eef4ff,#fff);border-radius:14px;padding:16px}
.stat .num{font-size:30px;font-weight:800;color:#2c6ec5}
.stat .lbl{font-size:13px;color:#7d8ba3;margin-top:4px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{background:#f2f6fc;color:#5a6b85;font-weight:700;padding:10px;text-align:left;border-radius:8px}
.tbl td{padding:10px;border-bottom:1px solid #eef2f8;color:#2a3850}
.btn{display:inline-flex;align-items:center;gap:6px;background:#2c6ec5;color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:#245ca6}
.btn.ghost{background:#fff;color:#2c6ec5;border:1.5px solid #cfe0f5}
.btn.danger{background:#fff;color:#d64545;border:1.5px solid #f3c2c2}
.btn.sm{padding:6px 12px;font-size:13px}
.input,select.input{width:100%;border:1.5px solid #dbe4f0;border-radius:10px;padding:11px 14px;font-size:15px;font-family:inherit}
.input:focus{outline:none;border-color:#2c6ec5}
label.fl{display:block;font-size:13px;font-weight:600;color:#5a6b85;margin:12px 0 6px}
.muted{color:#7d8ba3;font-size:13px}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.tag.free{background:#e8f7ec;color:#2e9e57}
.tag.plus{background:#eef4ff;color:#2c6ec5}
.tag.lock{background:#f1f3f7;color:#98a3b5}
.hr{border:none;border-top:1px solid #eef2f8;margin:16px 0}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}

/* 进度条 */
.pbar{height:16px;background:#eef0f5;border-radius:20px;overflow:hidden}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ffd23f);border-radius:20px;transition:width .5s}

/* 锁 / 徽章 */
.locked{filter:grayscale(.85);opacity:.55}

/* 反馈动画 */
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sparkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.pop{animation:pop .45s ease}
.floaty{animation:floaty 3s ease-in-out infinite}
.wiggle{animation:wiggle .5s ease}
.stars-big{font-size:44px;letter-spacing:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;background:rgba(40,40,60,.92);color:#fff;
  padding:12px 24px;border-radius:40px;font-size:16px;font-weight:700;z-index:200;display:none;max-width:86%;text-align:center}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(30,30,50,.5);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:24px;padding:28px;max-width:460px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .3s ease}
.modal-box h2{font-size:24px;margin-bottom:10px}

/* 网格关卡 */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.mod-card{background:#fff;border-radius:18px;padding:16px;text-align:center;box-shadow:var(--shadow-sm);border:3px solid transparent;transition:.15s}
.mod-card.on{border-color:var(--zp-orange);transform:translateY(-2px)}
.mod-card .emoji{font-size:44px;margin-bottom:6px}
.mod-card .name{font-weight:800;font-size:16px}
.mod-card .meta{font-size:12px;color:var(--zp-ink-l);margin-top:4px}
.unit-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.unit-row .tag{font-size:20px;font-weight:900}
.unit-row .info{flex:1}
.unit-row .info b{font-size:17px}
.unit-row .info .d{font-size:13px;color:var(--zp-ink-l)}
.unit-row .stars{color:#f5b800;font-size:16px}

/* 沉浸关卡画布 */
.level-stage{position:relative;max-width:900px;margin:0 auto;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.big-option{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:20px;padding:16px;
  box-shadow:var(--shadow-sm);min-width:120px;border:4px solid transparent;transition:.1s;font-size:18px;font-weight:800}
.big-option:hover{transform:translateY(-3px)}
.big-option.sel{border-color:var(--zp-green);background:#f0fbee}
.big-option .em{font-size:60px}
.word-chip{display:inline-block;background:#fff;border:3px solid #eee;border-radius:14px;padding:8px 18px;font-size:30px;font-weight:800;letter-spacing:4px;margin:4px;cursor:pointer;user-select:none}
.word-chip.used{opacity:.35;pointer-events:none}
.word-chip.hl{background:#fff3cf;border-color:#ffd23f}
.drag-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:70px}
.drop-tray{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.drop-slot{width:120px;height:120px;background:#fff;border:3px dashed #e6d9c4;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.drop-slot.filled{border-style:solid;border-color:var(--zp-green);background:#f0fbee}
.drop-slot .em{font-size:52px}

/* 语音跟读 */
.record-ring{width:150px;height:150px;border-radius:50%;background:linear-gradient(180deg,#ff8a3d,#f26a1b);display:flex;align-items:center;
  justify-content:center;font-size:20px;font-weight:900;color:#fff;box-shadow:0 0 0 0 rgba(255,138,61,.5);cursor:pointer;transition:transform .1s;user-select:none}
.record-ring.recording{animation:beat 1s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,60,60,.5)}70%{box-shadow:0 0 0 28px rgba(255,60,60,0)}100%{box-shadow:0 0 0 0 rgba(255,60,60,0)}}
.wave{display:flex;align-items:center;gap:4px;height:60px;justify-content:center}
.wave i{width:8px;border-radius:4px;background:var(--zp-orange);display:inline-block}

/* 鼓励反馈 */
.feedback{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:400;background:rgba(255,255,255,.0)}
.feedback.show{display:flex}
.fb-box{text-align:center;padding:30px 40px;border-radius:30px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.22);animation:pop .4s ease}

/* 家园 */
.home-sky{position:relative;height:240px;border-radius:var(--radius);background:linear-gradient(180deg,#bfe7ff,#e9f9ff);overflow:hidden;margin-bottom:16px}
.home-grass{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,#9ee37f,#6fce6a);border-radius:50% 50% 0 0}
.deco{position:absolute;font-size:40px;transition:.3s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.shop-item{background:#fff;border-radius:16px;padding:12px;text-align:center;box-shadow:var(--shadow-sm);position:relative}
.shop-item .em{font-size:42px}
.shop-item .cost{color:var(--zp-orange-d);font-weight:800;font-size:13px}

/* 口语伙伴 */
.chat-area{background:#f4f0ff;border-radius:20px;padding:20px;min-height:300px;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.chat-bubble{max-width:78%;padding:12px 16px;border-radius:18px;font-size:18px;line-height:1.5;font-weight:700}
.chat-bubble.zippy{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.chat-bubble.child{background:#b39bff;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.quick-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.quick-row button{background:#fff;border:2px solid #ddd5f0;border-radius:40px;padding:10px 16px;font-size:16px;font-weight:700;color:var(--zp-purple);font-family:inherit}

/* 响应式 */
@media(max-width:560px){
  .wrap{padding:14px 12px 30px}
  .h1{font-size:26px}
  .big-btn{font-size:19px;padding:12px 20px;min-height:56px}
  .mod-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .big-option{min-width:96px;padding:12px}
  .big-option .em{font-size:48px}
}

@keyframes zippyDance{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.zippy-dance{animation:zippyDance 0.4s ease-in-out 2}
@keyframes zippyBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.zippy-bounce{animation:zippyBounce 0.3s ease-in-out}

/* ============================================================
   🍎 APPLE GLASS DESIGN SYSTEM v3 — 苹果玻璃质感
   覆盖 v2：光晕动态背景 + 高饱和磨砂 + 内发光 + 细腻阴影
   追加在文件末尾，靠后层叠覆盖 v2，不破坏功能类名
   ============================================================ */
:root{
  --z-ink:#1c1a38; --z-ink-l:#5a5a7c;
  --z-acc1:#6d5df6; --z-acc2:#a855f7; --z-acc3:#ec4899;
  --z-cyan:#22d3ee; --z-mint:#34d399; --z-sun:#fbbf24;
  --z-glass:rgba(255,255,255,.48);
  --z-glass-hi:rgba(255,255,255,.78);
  --z-line:rgba(255,255,255,.68);
  --z-line-soft:rgba(160,140,255,.16);
  --z-blur:blur(26px) saturate(175%);
  --z-blur-lg:blur(40px) saturate(190%);
  --z-radius:30px; --z-radius-s:18px;
  --z-sh-1:0 4px 18px rgba(90,70,210,.10);
  --z-sh-2:0 14px 44px rgba(90,70,210,.16);
  --z-sh-3:0 26px 72px rgba(90,70,210,.26);
  --z-hi:inset 0 1px 0 rgba(255,255,255,.8);
  --z-hi-sm:inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---- 背景：苹果式光晕（aurora）---- */
body{
  background:
    radial-gradient(1200px 640px at 10% -8%, rgba(139,120,255,.30), transparent 60%),
    radial-gradient(980px 560px at 102% 2%, rgba(236,72,153,.20), transparent 55%),
    radial-gradient(1100px 720px at -6% 104%, rgba(34,211,238,.22), transparent 56%),
    radial-gradient(900px 540px at 104% 104%, rgba(52,211,153,.18), transparent 55%),
    linear-gradient(160deg,#f7f6ff 0%,#fbfaff 40%,#f5f3ff 100%);
  background-attachment:fixed;
  color:var(--z-ink);
}

/* ---- 卡片：高饱和磨砂玻璃 ---- */
.card, .mod-card, .panel, .word-chip, .big-option, .shop-item,
.unit-row, .chat-bubble.zippy, .drag-tray, .drop-slot, .search-box{
  background:linear-gradient(180deg,var(--z-glass-hi),var(--z-glass));
  backdrop-filter:var(--z-blur);
  -webkit-backdrop-filter:var(--z-blur);
  border:1px solid var(--z-line);
  box-shadow:var(--z-sh-2),var(--z-hi);
  border-radius:var(--z-radius);
}
.card.soft{border:1px solid var(--z-line);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5))}

/* 保留选中/激活态 */
.mod-card.on{border-color:var(--z-acc2);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,245,255,.6))}
.word-chip.on{background:linear-gradient(135deg,var(--z-acc1),var(--z-acc2));color:#fff;border-color:transparent}
.word-chip.hl{background:rgba(255,243,207,.9);border-color:var(--z-sun)}
.big-option.sel{border-color:var(--z-mint);background:linear-gradient(180deg,rgba(235,255,246,.92),rgba(255,255,255,.6))}
.drop-slot.filled{border-style:solid;border-color:var(--z-mint);background:rgba(235,255,246,.75)}

/* ---- 顶栏 / 底部 tab：深度磨砂 ---- */
.child-top{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38));
  backdrop-filter:var(--z-blur-lg);
  -webkit-backdrop-filter:var(--z-blur-lg);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 26px rgba(90,70,210,.10),var(--z-hi);
}
.child-tabs{
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.42));
  backdrop-filter:var(--z-blur-lg);
  -webkit-backdrop-filter:var(--z-blur-lg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:0 -6px 26px rgba(90,70,210,.10),var(--z-hi-sm);
}
.child-tabs a{color:var(--z-ink-l)}
.child-tabs a.on{color:var(--z-acc1)}

/* ---- 顶部 pill ---- */
.top-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.5));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--z-sh-1),var(--z-hi);
  color:var(--z-ink);
}

/* ---- 按钮：光泽渐变 + 内高光 ---- */
.big-btn{
  background:linear-gradient(180deg,#8f7fff 0%,#6d5df6 55%,#5b49f0 100%);
  box-shadow:0 6px 0 #4a39e0,0 16px 30px rgba(109,93,246,.36),inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:46px;
}
.big-btn:active{box-shadow:0 2px 0 #4a39e0,0 6px 12px rgba(109,93,246,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.big-btn.green{background:linear-gradient(180deg,#4adea6,#10b981 58%,#0ca678);box-shadow:0 6px 0 #0ca678,0 16px 30px rgba(16,185,129,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.big-btn.green:active{box-shadow:0 2px 0 #0ca678,0 6px 12px rgba(16,185,129,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.big-btn.blue{background:linear-gradient(180deg,#38d6f0,#06b6d4 58%,#0891b2);box-shadow:0 6px 0 #0891b2,0 16px 30px rgba(6,182,212,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.big-btn.blue:active{box-shadow:0 2px 0 #0891b2,0 6px 12px rgba(6,182,212,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.big-btn.yellow{background:linear-gradient(180deg,#ffd25a,#fbbf24 58%,#f59e0b);color:#6b4a00;box-shadow:0 6px 0 #d97706,0 16px 30px rgba(251,191,36,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.big-btn.yellow:active{box-shadow:0 2px 0 #d97706,0 6px 12px rgba(251,191,36,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.big-btn.pink{background:linear-gradient(180deg,#ff8bc1,#ec4899 58%,#db2777);box-shadow:0 6px 0 #be185d,0 16px 30px rgba(236,72,153,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.big-btn.pink:active{box-shadow:0 2px 0 #be185d,0 6px 12px rgba(236,72,153,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.big-btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));color:var(--z-ink);border:1px solid rgba(255,255,255,.8);box-shadow:var(--z-sh-1),var(--z-hi)}

/* ---- 标题渐变文字 ---- */
.h1{
  background:linear-gradient(135deg,var(--z-acc1),var(--z-acc2) 48%,var(--z-acc3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---- 弹窗 / toast ---- */
.modal-box{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));
  backdrop-filter:var(--z-blur-lg);
  -webkit-backdrop-filter:var(--z-blur-lg);
  border:1px solid rgba(255,255,255,.75);
  border-radius:32px;
  box-shadow:var(--z-sh-3),var(--z-hi);
}
.toast{
  background:rgba(28,26,56,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}

/* ---- 输入框 ---- */
.input,select.input,.search-box{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--z-sh-1),var(--z-hi-sm);
  border-radius:14px;
}

/* ---- 家长端：同样玻璃化 ---- */
body.parent{
  background:
    radial-gradient(1100px 600px at 8% -6%, rgba(109,93,246,.20), transparent 58%),
    radial-gradient(900px 540px at 104% 4%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(160deg,#eef2ff 0%,#f6f8ff 50%,#eef8ff 100%);
  background-attachment:fixed;
}
.parent-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5));
  backdrop-filter:var(--z-blur);
  -webkit-backdrop-filter:var(--z-blur);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 22px rgba(60,90,180,.08),var(--z-hi);
}
.parent-nav a.pill.on,.parent-nav a.pill:hover{background:rgba(232,242,255,.9);color:#2c6ec5}
.stat{
  background:linear-gradient(160deg,rgba(238,244,255,.92),rgba(255,255,255,.55));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--z-sh-1),var(--z-hi-sm);
  border-radius:16px;
}
.tbl th{background:rgba(240,246,255,.8);backdrop-filter:blur(8px)}
.btn{background:linear-gradient(180deg,#3b7fe0,#2c6ec5 60%,#245ca6);box-shadow:0 4px 0 #1e4f8f,0 10px 20px rgba(44,110,197,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));color:#2c6ec5;border:1px solid rgba(207,224,245,.9)}
.btn.danger{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));color:#d64545;border:1px solid rgba(243,194,194,.9)}

/* 卡片悬浮微抬升（苹果式） */
.card:hover,.mod-card:hover,.shop-item:hover,.unit-row:hover{
  transform:translateY(-3px);
  box-shadow:var(--z-sh-3),var(--z-hi);
}

@media(max-width:560px){
  .card,.mod-card,.panel{--z-radius:24px;border-radius:24px}
  .child-top,.child-tabs{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
}


/* ---- 🍎 光斑漂移呼吸动画 ---- */
body{animation:zAurora 26s ease-in-out infinite alternate}
@keyframes zAurora{
  0%  {background-position:0% 0%,100% 0%,0% 100%,100% 100%,0 0}
  100%{background-position:16% 10%,84% -6%,-6% 94%,106% 102%,0 0}
}
@media (prefers-reduced-motion: reduce){ body{animation:none} }