* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  color: #eaf0ff;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1030 0%, #1b1457 45%, #2a0f4d 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: -50%;
  background: radial-gradient(circle at 20% 20%, rgba(122,252,255,.18), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(255,122,200,.18), transparent 45%);
  animation: floatbg 16s ease-in-out infinite alternate; z-index: 0; pointer-events: none;
}
@keyframes floatbg { from { transform: translate(0,0) scale(1); } to { transform: translate(4%, -3%) scale(1.1); } }
#app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 16px 14px 48px; }
#toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(20,18,50,.92); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 15px; z-index: 99; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 80%;
  box-shadow: 0 6px 20px rgba(122,252,255,.3); border: 1px solid rgba(122,252,255,.4);
}
#toast.show { opacity: 1; }

/* 顶部个人信息 */
.topbar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.35); border-radius: 20px;
  padding: 14px 16px; backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(80,40,160,.35);
}
.avatar { font-size: 34px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff9ac1, #7afcff); border-radius: 16px; box-shadow: 0 0 18px rgba(122,252,255,.5); }
.topbar .info { flex: 1; }
.topbar .name { font-weight: 800; font-size: 17px; }
.topbar .ptline { margin-top: 2px; }
.topbar .points { color: #ffd54a; font-weight: 800; font-size: 18px; }
.topbar .sub { font-size: 12px; color: #aab4e6; }
.levelbar { height: 8px; background: rgba(255,255,255,.15); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.levelbar > i { display: block; height: 100%; background: linear-gradient(90deg, #7afcff, #b98bff); box-shadow: 0 0 10px #7afcff; }
.topbar .streak { text-align: center; font-weight: 800; color: #ff9a6b; font-size: 13px; line-height: 1.3; }

/* 今日目标 */
.goal { background: rgba(255,255,255,.08); border: 1px solid rgba(185,139,255,.35); border-radius: 20px; padding: 14px; margin: 14px 0;
  display: flex; align-items: center; gap: 14px; backdrop-filter: blur(10px); }
.goal .ring { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 0 8px rgba(122,252,255,.6)); }
.goal .gtxt { font-size: 13px; color: #c8d0f5; line-height: 1.5; }
.goal .gtxt b { color: #7afcff; font-size: 17px; }

.section-title { font-weight: 800; margin: 20px 4px 10px; font-size: 15px; color: #fff; letter-spacing: .5px; }
.section-title::before { content: ""; display: inline-block; width: 4px; height: 15px; background: linear-gradient(#7afcff,#ff9ac1); border-radius: 2px; margin-right: 8px; vertical-align: -2px; }

/* 单元地图 */
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.unit-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.3); border-radius: 18px; padding: 14px;
  position: relative; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .2s; backdrop-filter: blur(8px);
}
.unit-card:active { transform: scale(.97); }
.unit-card.done { border-color: rgba(255,213,74,.7); box-shadow: 0 0 18px rgba(255,213,74,.3); }
.unit-card.locked { opacity: .55; filter: grayscale(.4); }
.unit-card .idx { font-size: 12px; color: #fff; background: linear-gradient(135deg,#7afcff,#b98bff); display: inline-block; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.unit-card .lock { position: absolute; top: 12px; right: 12px; font-size: 18px; }
.unit-card h3 { margin: 8px 0 2px; font-size: 15px; font-weight: 800; }
.unit-card .th { font-size: 12px; color: #aab4e6; }
.unit-card .cols { display: flex; gap: 6px; margin-top: 10px; }
.cdot { font-size: 16px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.1); opacity: .5; }
.cdot.on { opacity: 1; background: rgba(122,252,255,.25); box-shadow: 0 0 8px rgba(122,252,255,.5); }
.unit-card .mpl { font-size: 11px; color: #7afcff; margin-top: 8px; }

/* 模拟训练 & 更多 */
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.extra-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,154,200,.35); border-radius: 18px; padding: 16px 12px; text-align: center; cursor: pointer; transition: transform .12s; backdrop-filter: blur(8px); }
.extra-card:active { transform: scale(.97); }
.extra-card.mock { border-color: rgba(122,252,255,.4); }
.extra-card.pet { border-color: rgba(255,213,74,.45); }
.extra-card .eicon { font-size: 32px; }
.extra-card .et { font-weight: 800; margin-top: 6px; font-size: 14px; }
.extra-card .es { font-size: 11px; color: #aab4e6; margin-top: 4px; }

.back { display: inline-flex; align-items: center; gap: 6px; color: #7afcff; font-weight: 700; margin: 4px 0 12px; cursor: pointer; }

.unit-head { margin-bottom: 12px; }
.unit-head .uh-en { font-weight: 800; font-size: 18px; }
.unit-head .uh-zh { font-size: 13px; color: #aab4e6; margin-top: 2px; }

/* 栏目 tab */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.tab { text-align: center; padding: 12px 8px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.3); cursor: pointer; backdrop-filter: blur(8px); }
.tab.locked { opacity: .5; border-color: rgba(255,255,255,.15); }
.tab.done { border-color: rgba(255,213,74,.6); }
.tab .ticon { font-size: 24px; }
.tab .tname { font-weight: 700; font-size: 13px; margin-top: 4px; }
.tab .tstat { font-size: 11px; color: #7afcff; margin-top: 2px; }

#stage { margin-top: 6px; }

.text-preview { background: rgba(255,255,255,.06); border: 1px dashed rgba(122,252,255,.4); border-radius: 16px; padding: 14px; margin-top: 10px; }
.text-preview .tp-title { font-weight: 700; margin-bottom: 8px; color: #7afcff; }
.text-preview div:not(.tp-title):not(#playAll) { font-size: 15px; line-height: 1.7; color: #dce3ff; }

.sentence { background: rgba(255,255,255,.06); border: 1px solid rgba(122,252,255,.25); border-radius: 18px; padding: 18px; margin-top: 10px; backdrop-filter: blur(8px); }
.sentence .txt { font-size: 21px; font-weight: 700; line-height: 1.6; }

.word-card { background: rgba(255,255,255,.06); border: 1px solid rgba(185,139,255,.3); border-radius: 22px; padding: 22px 18px; text-align: center; margin-top: 10px; backdrop-filter: blur(8px); min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.word-card .en { font-size: 36px; font-weight: 800; letter-spacing: .5px; }
.word-card .ph { color: #aab4e6; font-size: 15px; margin-top: 6px; }
.word-card .zh { color: #ff9ac1; font-weight: 700; font-size: 18px; margin-top: 10px; }
.word-card .pos { color: #aab4e6; font-size: 12px; }
.progress-dots { margin-top: 14px; font-size: 13px; color: #aab4e6; }

.bigbtn { display: block; width: 100%; border: none; border-radius: 16px; padding: 15px; font-size: 17px; font-weight: 800; margin-top: 12px; cursor: pointer; color: #0f1030; background: linear-gradient(135deg, #7afcff, #b98bff); box-shadow: 0 8px 20px rgba(122,252,255,.35); }
.bigbtn:active { transform: scale(.98); }
.bigbtn.ghost { background: rgba(255,255,255,.08); color: #eaf0ff; border: 1px solid rgba(122,252,255,.45); box-shadow: none; }
.bigbtn.listening { background: linear-gradient(135deg, #ffb347, #ff7a59); animation: pulse 1s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,140,80,.5);} 70%{box-shadow:0 0 0 14px rgba(255,140,80,0);} 100%{box-shadow:0 0 0 0 rgba(255,140,80,0);} }

.feedback { margin-top: 14px; font-size: 20px; font-weight: 800; min-height: 28px; text-align: center; }
.feedback.good { color: #5ef0a8; }
.feedback.mid { color: #ffd54a; }
.feedback.low { color: #ff8a8a; }
.stars { font-size: 22px; letter-spacing: 4px; text-align: center; }
.heard { font-size: 13px; color: #aab4e6; margin-top: 6px; text-align: center; }

.quiz { background: rgba(255,255,255,.06); border: 1px solid rgba(185,139,255,.3); border-radius: 18px; padding: 16px; margin-top: 10px; backdrop-filter: blur(8px); }
.quiz .q { font-size: 16px; font-weight: 700; line-height: 1.5; }
.quiz .explain { margin-top: 10px; font-size: 13px; color: #c8d0f5; background: rgba(255,213,74,.12); padding: 10px; border-radius: 10px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.opt { display: block; width: 100%; text-align: center; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); font-size: 15px; font-weight: 600; color: #eaf0ff; cursor: pointer; }
.opt.correct { border-color: #5ef0a8; background: rgba(94,240,168,.18); color: #5ef0a8; }
.opt.wrong { border-color: #ff8a8a; background: rgba(255,138,138,.15); }

.done-box { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,213,74,.5); border-radius: 22px; padding: 26px 18px; margin-top: 16px; backdrop-filter: blur(8px); box-shadow: 0 0 22px rgba(255,213,74,.25); }
.done-box .big { font-size: 46px; }
.done-box .pt { color: #ffd54a; font-weight: 800; font-size: 20px; margin-top: 8px; }

/* 模拟训练选择 */
.mock-sel { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.msel { background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.3); border-radius: 12px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.msel.locked { opacity: .45; }
.mock-item { margin-top: 6px; }
.mi-no { font-size: 13px; color: #7afcff; margin-bottom: 6px; font-weight: 700; }
.listen-q { background: rgba(255,255,255,.06); border: 1px solid rgba(122,252,255,.3); border-radius: 16px; padding: 16px; margin-top: 10px; font-size: 15px; line-height: 1.6; }
.listen-q b { color: #ffd54a; font-size: 18px; }

/* 单词游戏 */
.game-round { font-weight: 800; color: #7afcff; margin: 6px 0; }

/* 宠物 */
.pet-page { margin-top: 6px; }
.pet-stage { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,213,74,.4); border-radius: 22px; padding: 24px 16px; backdrop-filter: blur(8px); }
.pet-emoji { font-size: 80px; animation: bob 2.4s ease-in-out infinite; }
.pet-emoji.shine { filter: drop-shadow(0 0 16px #ffd54a); }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.pet-name { font-weight: 800; font-size: 18px; margin-top: 6px; }
.pet-evo { font-size: 12px; color: #aab4e6; margin-top: 4px; }
.bar { height: 9px; background: rgba(255,255,255,.15); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ffd54a, #ff9ac1); box-shadow: 0 0 8px #ffd54a; }
.pet-stats { margin-top: 14px; display: grid; gap: 12px; }
.pstat { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pstat > span { width: 96px; color: #c8d0f5; }
.pstat .bar { flex: 1; margin: 0; }
.pstat > b { width: 30px; text-align: right; color: #7afcff; }
.pet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pet-tip { font-size: 12px; color: #aab4e6; margin-top: 12px; line-height: 1.5; }

/* 选择页（年级/科目/版本） */
.sel-head { text-align: center; padding: 22px 0 14px; }
.sel-title { font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.sel-sub { font-size: 13px; color: #aab4e6; margin-top: 8px; }
.grade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grade-card { background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.3); border-radius: 18px; padding: 18px 10px; text-align: center; cursor: pointer; backdrop-filter: blur(8px); transition: transform .12s, box-shadow .2s; }
.grade-card:active { transform: scale(.96); }
.grade-card .g-num { font-size: 26px; font-weight: 800; background: linear-gradient(135deg,#7afcff,#ff9ac1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grade-card .g-label { font-size: 13px; color: #c8d0f5; margin-top: 4px; }
.sub-grid, .ver-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sub-card, .ver-card { background: rgba(255,255,255,.08); border: 1px solid rgba(185,139,255,.35); border-radius: 18px; padding: 18px 8px; text-align: center; cursor: pointer; backdrop-filter: blur(8px); transition: transform .12s; }
.sub-card:active, .ver-card:active { transform: scale(.96); }
.sub-card .s-name, .ver-card .v-name { font-weight: 800; font-size: 16px; }
.sub-card .s-tag, .ver-card .v-tag { font-size: 12px; color: #7afcff; margin-top: 6px; }
.sub-card.locked, .ver-card.locked { opacity: .5; filter: grayscale(.5); cursor: not-allowed; }
.sub-card.locked .s-tag, .ver-card.locked .v-tag { color: #ff9a6b; }

/* 登录 / 注册 / 改密 */
.auth-wrap { text-align: center; padding: 30px 6px 20px; }
.auth-logo { font-size: 64px; filter: drop-shadow(0 0 16px rgba(122,252,255,.5)); }
.auth-title { font-size: 20px; font-weight: 800; margin-top: 6px; }
.auth-sub { font-size: 13px; color: #aab4e6; margin-top: 4px; }
.auth-card { background: rgba(255,255,255,.08); border: 1px solid rgba(122,252,255,.35); border-radius: 22px; padding: 20px 18px; margin-top: 18px; backdrop-filter: blur(10px); }
.auth-card input { width: 100%; padding: 14px 14px; margin-top: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,10,30,.35); color: #eaf0ff; font-size: 15px; box-sizing: border-box; }
.auth-card input::placeholder { color: #9aa3cf; }
.auth-card .bigbtn { margin-top: 14px; }
.auth-msg { font-size: 13px; color: #ff8a8a; min-height: 16px; margin-top: 8px; }
.auth-links { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.auth-links a { color: #7afcff; font-size: 13px; text-decoration: none; cursor: pointer; }
.auth-tip { font-size: 12px; color: #aab4e6; margin-top: 16px; line-height: 1.6; }

/* 首页顶栏（课程/退出） */
.home-bar { display: flex; align-items: center; gap: 10px; margin: 10px 2px; font-size: 13px; }
.home-bar .course-tag { background: rgba(122,252,255,.15); border: 1px solid rgba(122,252,255,.4); border-radius: 10px; padding: 4px 10px; color: #7afcff; font-weight: 600; }
.home-bar .spacer { flex: 1; }
.home-bar a { color: #ff9ac1; text-decoration: none; cursor: pointer; font-weight: 600; }