/* ============================================================
   柠檬英语 v3.0 —— 首页/会员/新模块样式
   ============================================================ */
:root {
  --lemon: #FFD93D;
  --lemon-d: #F5B800;
  --leaf: #6BCB3D;
  --leaf-d: #4CA82A;
  --cream: #FFFDF5;
}

/* ---------- 柠檬首页 ---------- */
.lemon-home { background: linear-gradient(180deg, #FFF6D6 0%, var(--cream) 340px); min-height: 100vh; }
.lm-hero { text-align: center; padding: 46px 20px 18px; position: relative; }
.lm-logo { font-size: 60px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(245,184,0,.35)); animation: lm-bounce 2.4s ease-in-out infinite; }
@keyframes lm-bounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.lm-title { font-size: 34px; font-weight: 800; color: #3D3800; margin: 8px 0 2px; letter-spacing: 2px; }
.lm-v3 {
  display: inline-block; margin-left: 6px; vertical-align: super;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0;
  color: #fff; background: linear-gradient(135deg,#FF8A4C,#FF5A5F);
  padding: 3px 6px; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(255,90,95,.4);
}
.lm-slogan { color: #8B8500; font-size: 14px; margin: 0; }
.lm-user-chip { position: absolute; top: 16px; right: 14px; background: #fff; border: 1px solid #F0E6B8; border-radius: 999px; padding: 7px 12px; font-size: 13px; color: #5A5400; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(245,184,0,.15); }
.lm-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.lm-badge-vip { background: #FFE9A8; color: #8A6200; }
.lm-badge-trial { background: #E3F6D5; color: #3E7A1E; }
.lm-badge-off { background: #F1F1F1; color: #999; }

/* 登录/注册 */
.lm-auth { margin: 18px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 12px 32px rgba(245,184,0,.14); }
.lm-auth-tabs { margin-bottom: 14px; }
.lm-auth-tabs button { font-size: 13.5px; }
.lm-form input { width: 100%; border: 1.5px solid #EFE7C0; background: #FFFDF3; border-radius: 14px; padding: 13px 15px; font-size: 16px; margin-bottom: 10px; box-sizing: border-box; outline: none; }
.lm-form input:focus { border-color: var(--lemon-d); background: #fff; }
.lm-form-err { color: #E0564B; font-size: 13px; min-height: 18px; margin: 0 2px 6px; }
.lm-form-tip { color: #A89F6B; font-size: 12.5px; text-align: center; margin-top: 10px; line-height: 1.6; }
.lm-btn { border: none; border-radius: 14px; padding: 13px 18px; font-size: 15px; background: #F2EFDF; color: #6B6600; }
.lm-btn:active { transform: scale(.97); }
.lm-btn-primary { background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-d) 100%); color: #4A3D00; font-weight: 700; width: 100%; box-shadow: 0 8px 20px rgba(245,184,0,.35); }
.lm-btn-big { font-size: 17px; padding: 15px 18px; margin-top: 14px; }
.lm-btn-vip { background: linear-gradient(135deg, #3D3800 0%, #6B6200 100%); color: #FFD93D; font-weight: 700; padding: 11px 16px; font-size: 14px; white-space: nowrap; }

/* 会员状态卡 */
.lm-member { margin: 0 18px 6px; background: linear-gradient(135deg, #FFF3BF 0%, #FFE9A8 100%); border: 1px solid #F5DF9A; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-member-title { font-weight: 800; font-size: 16px; color: #5A4A00; }
.lm-member-sub { font-size: 12.5px; color: #8A7800; margin-top: 3px; line-height: 1.5; }

/* 模块宫格 */
.lm-section-title { font-size: 18px; font-weight: 800; color: #3D3800; margin: 20px 20px 12px; }
.lm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px; }
.lm-card { display: block; text-decoration: none; background: #fff; border-radius: 20px; padding: 20px 16px 16px; box-shadow: 0 8px 22px rgba(60,50,0,.07); border: 1.5px solid transparent; }
.lm-card:active { transform: scale(.97); border-color: var(--lemon); }
.lm-card.lm-locked { opacity: .62; position: relative; }
.lm-card.lm-locked:active { border-color: #ddd; }
.lm-lock-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: linear-gradient(135deg,#9E9E9E,#757575);
  padding: 4px 7px; border-radius: 999px; letter-spacing: 1px;
}
.lm-card-icon { font-size: 38px; margin-bottom: 10px; }
.lm-card-name { font-size: 17px; font-weight: 800; color: #333; }
.lm-card-sub { font-size: 12px; color: #999; margin-top: 4px; }
.lm-c1 { background: linear-gradient(160deg, #E8F9E0 0%, #fff 70%); }
.lm-c2 { background: linear-gradient(160deg, #FFEEDD 0%, #fff 70%); }
.lm-c3 { background: linear-gradient(160deg, #FFF3D6 0%, #fff 70%); }
.lm-c4 { background: linear-gradient(160deg, #F3E9FF 0%, #fff 70%); }
.lm-c5 { background: linear-gradient(160deg, #E6F2FF 0%, #fff 70%); }
.lm-c6 { background: linear-gradient(160deg, #D6F5EF 0%, #fff 70%); }
.lm-foot { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 34px; }
.lm-link { background: none; border: none; color: #A89F6B; font-size: 13px; text-decoration: underline; }
.lm-ver { color: #C9C39A; font-size: 12px; }

/* 付费墙 */
.lm-vip { margin: 10px 18px 30px; background: linear-gradient(170deg, #3D3800 0%, #241F00 100%); border-radius: 24px; padding: 24px 18px; color: #fff; }
.lm-vip-head { text-align: center; margin-bottom: 18px; }
.lm-vip-crown { font-size: 40px; }
.lm-vip-head h2 { margin: 6px 0 4px; font-size: 22px; color: var(--lemon); }
.lm-vip-head p { margin: 0; font-size: 13px; color: #D8CF9A; }
.lm-plans { display: flex; gap: 10px; }
.lm-plan { position: relative; flex: 1; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,217,61,.25); border-radius: 16px; padding: 14px 10px; color: #fff; text-align: center; }
.lm-plan.on { border-color: var(--lemon); background: rgba(255,217,61,.14); }
.lm-plan-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--lemon); color: #4A3D00; font-size: 10.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.lm-plan-name { font-size: 13px; color: #D8CF9A; }
.lm-plan-price { font-size: 26px; font-weight: 800; color: var(--lemon); margin: 4px 0 2px; }
.lm-plan-sub { font-size: 11px; color: #B3AA7E; }
.lm-vip-note { text-align: center; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 12px; }

/* 支付弹窗 */
.lm-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 30px; }
.lm-modal-card { background: #fff; border-radius: 22px; padding: 26px 22px; width: 100%; max-width: 340px; text-align: center; }
.lm-pay-icon { font-size: 42px; }
.lm-pay-title { font-size: 15px; color: #666; margin-top: 4px; }
.lm-pay-amount { font-size: 34px; font-weight: 800; color: #222; margin: 6px 0 2px; }
.lm-pay-desc { font-size: 13px; color: #888; margin-bottom: 18px; }
.lm-pay-btns { display: flex; gap: 10px; }
.lm-pay-btns .lm-btn { flex: 1; }
.lm-modal-card .lm-vip-note { color: #BBB; }

/* Toast */
.lm-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: rgba(40,35,0,.92); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 200; max-width: 86%; text-align: center; }
.lm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 模块页通用 ---------- */
.mod-page { background: var(--bg); min-height: 100vh; }
.mod-bar { position: sticky; top: 0; z-index: 30; }
.mod-bar .bar-back { text-decoration: none; }
.seg-mini { padding: 3px; }
.seg-mini button { padding: 6px 9px; font-size: 14px; }
.home-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #fff; font-size: 20px; background: rgba(255,255,255,.18); border-radius: 14px; padding: 8px 12px 6px; }
.home-link span { font-size: 11px; margin-top: 2px; }

/* ---------- 音标学习 ---------- */
.ipa-guide { margin: 14px 16px 4px; background: #EAF7E3; border: 1px solid #CDEBC0; border-radius: 14px; padding: 12px 14px; font-size: 13px; color: #3E5A2E; line-height: 1.7; }
.ipa-guide-t { font-weight: 800; margin-bottom: 2px; }
.ipa-guide-note { background: #EAF3FF; border-color: #C9E0FB; color: #2F5C86; margin-top: 6px; }
.ipa-guide-note b { color: #1E4F86; }
.c-blue { color: #3B7DD8; font-weight: 700; }
.c-green { color: #4CA82A; font-weight: 700; }
.ipa-group-head { margin: 18px 16px 6px; display: flex; flex-direction: column; gap: 2px; }
.ipa-group-name { font-size: 18px; font-weight: 800; color: #2B2B2B; }
.ipa-group-name i { font-style: normal; font-size: 12px; color: #999; font-weight: 400; margin-left: 6px; }
.ipa-group-desc { font-size: 12px; color: #A0A0A0; }
.ipa-sec { margin: 8px 16px 4px; }
.ipa-sec-name { font-size: 13.5px; font-weight: 700; color: #7A7A7A; margin-bottom: 8px; }
.ipa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ipa-tile { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ipa-tile:active { transform: scale(.95); }
.ipa-tile b { font-size: 19px; font-weight: 700; }
.ipa-tile small { font-size: 11px; color: #AAA; }
.ipa-tile.ipa-vowel { border-color: #FFD1C4; background: #FFF6F3; }
.ipa-tile.ipa-vowel b { color: #E0564B; }
.ipa-tile.ipa-voiceless { border-color: #C9E0F7; background: #F3F9FF; }
.ipa-tile.ipa-voiceless b { color: #3B7DD8; }
.ipa-tile.ipa-voiced { border-color: #CDEBC0; background: #F4FBEF; }
.ipa-tile.ipa-voiced b { color: #4CA82A; }

.ipa-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 90; }
.ipa-sheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); position: relative; }
.ipa-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #F2F2F2; color: #888; font-size: 14px; }
.ipa-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 36px; }
.ipa-symbol { font-size: 42px; font-weight: 800; color: #2B2B2B; }
.ipa-kk { font-size: 13px; color: #888; line-height: 1.7; }
.ipa-kk b { color: #444; font-size: 15px; }
.ipa-tag { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-bottom: 3px; }
.ipa-tag-vowel { background: #FFE9E4; color: #E0564B; }
.ipa-tag-voiceless { background: #E3EFFF; color: #3B7DD8; }
.ipa-tag-voiced { background: #E5F6DC; color: #4CA82A; }
.ipa-play-big { margin-left: auto; width: 58px; height: 58px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-d) 100%); color: #fff; font-size: 22px; box-shadow: 0 8px 18px rgba(76,168,42,.35); }
.ipa-play-big:active { transform: scale(.94); }
.ipa-tip-box { background: #FFFBEA; border: 1px solid #F5E6B8; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: #6B5A00; line-height: 1.8; margin-bottom: 14px; }
.ipa-tip-t { font-weight: 800; margin-bottom: 3px; }
.ipa-block-t { font-size: 14px; font-weight: 800; color: #444; margin: 14px 0 8px; }
.ipa-words { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ipa-word { display: flex; flex-direction: column; align-items: stretch; gap: 3px; border: 1px solid var(--line); background: #FAFAFA; border-radius: 12px; padding: 10px 12px; text-align: left; }
.ipa-word:active { background: #F0F7EA; }
.w-head { display: flex; align-items: center; justify-content: space-between; }
.w-en { font-size: 16px; font-weight: 700; color: #333; }
.w-ipa { font-size: 12px; color: #4A90D9; line-height: 1.4; }
.w-ipa b { font-weight: 600; }
.w-cn { font-size: 12px; color: #999; }
.w-play { margin-left: auto; color: var(--leaf-d); font-size: 15px; }
.ipa-sents { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ipa-sent { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: #FAFAFA; border-radius: 12px; padding: 12px; text-align: left; }
.ipa-sent:active { background: #F0F7EA; }
.ipa-sent .s-txt { flex: 1; text-align: left; }
.ipa-sent .w-play { flex: 0 0 auto; }
.ipa-sent .s-txt b { display: block; font-size: 15px; color: #333; font-weight: 700; }
.ipa-sent .s-txt i { display: block; font-style: normal; font-size: 12.5px; color: #999; margin-top: 2px; }
.ipa-subnote { background: #EAF3FF; border: 1px solid #C9E0FB; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: #2F5C86; line-height: 1.8; margin-bottom: 14px; }
.ipa-subnote b { color: #1E4F86; }

/* ---------- 自然拼读 ---------- */
.ph-tabs { display: flex; gap: 8px; padding: 14px 16px 6px; overflow-x: auto; }
.ph-tab { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14px; color: #777; font-weight: 700; }
.ph-tab.on { background: #FFF0D6; border-color: #FFC978; color: #B45F00; }
.ph-level-desc { margin: 8px 18px 4px; font-size: 13px; color: #A08A5A; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 14px 24px; }
.ph-card { background: #fff; border-radius: 18px; padding: 14px 12px; box-shadow: 0 6px 16px rgba(180,120,0,.07); border: 1px solid #F7EBD2; }
.ph-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ph-letters { font-size: 30px; font-weight: 800; color: #E8880C; line-height: 1; }
.ph-ipa { font-size: 13px; color: #B3A27A; }
.ph-play { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: linear-gradient(135deg, #FFB84C 0%, #FF9F43 100%); color: #fff; font-size: 15px; box-shadow: 0 6px 14px rgba(255,159,67,.4); }
.ph-play:active { transform: scale(.93); }
.ph-words { display: flex; flex-direction: column; gap: 6px; }
.ph-word { display: flex; align-items: center; gap: 8px; background: #FFFBF2; border: 1px solid #F7EBD2; border-radius: 12px; padding: 8px 10px; }
.ph-word:active { background: #FFF3DC; }
.pw-emoji { font-size: 26px; }
.pw-en { font-size: 15px; font-weight: 700; color: #4A3A1A; }
.pw-cn { font-size: 11.5px; color: #B3A27A; margin-left: auto; }

/* ---------- 绘本童谣 ---------- */
.rh-tabs { margin: 14px 16px 4px; }
.rh-card { margin: 12px 16px; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 8px 20px rgba(90,60,140,.06); border: 1px solid #EFE7FA; }
.rh-head { display: flex; align-items: center; gap: 12px; }
.rh-emoji { font-size: 38px; }
.rh-titles b { display: block; font-size: 17px; color: #333; }
.rh-titles i { display: block; font-style: normal; font-size: 12.5px; color: #A08FC0; margin-top: 2px; }
.rh-play { margin-left: auto; border: none; border-radius: 999px; background: linear-gradient(135deg, #C99FFF 0%, #B983FF 100%); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 16px; box-shadow: 0 6px 14px rgba(185,131,255,.35); white-space: nowrap; }
.rh-play:active { transform: scale(.95); }
.rh-desc { font-size: 12.5px; color: #A08FC0; margin: 10px 0 8px; }
.rh-lyrics { background: #FAF6FF; border-radius: 14px; padding: 12px 14px; }
.rh-line { font-size: 14.5px; color: #5A4A78; line-height: 2; }
.rh-gap { height: 8px; }
.st-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.st-row { display: flex; align-items: center; gap: 10px; background: #FAF6FF; border-radius: 12px; padding: 10px 12px; border: 1.5px solid transparent; }
.st-row.playing { border-color: #B983FF; background: #F3EBFF; }
.st-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: #E9DCFF; color: #7A4FD0; font-size: 13px; }
.st-txt b { display: block; font-size: 14px; color: #4A3A66; font-weight: 700; line-height: 1.5; }
.st-txt i { display: block; font-style: normal; font-size: 12px; color: #A08FC0; margin-top: 2px; line-height: 1.5; }

/* ---------- 我的 / 会员页 ---------- */
.mine-hero { position: relative; text-align: center; padding: 18px 16px 6px; }
.mine-hero h1 { font-size: 20px; color: #4A3A1A; margin: 0; }
.mine-back { position: absolute; left: 12px; top: 14px; border: none; background: #FFFBF2; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: #B58900; line-height: 1; }
.mine-login-tip { margin: 16px; padding: 14px; background: #FFFBF2; border: 1px solid #F7EBD2; border-radius: 14px; text-align: center; font-size: 14px; color: #8a6d2b; }
.mine-login-tip a { color: #F5B800; font-weight: 700; text-decoration: none; }
.mine-block { margin: 14px 16px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 8px 20px rgba(255,180,0,.06); border: 1px solid #F3ECDD; }
.mine-block-t { font-size: 16px; font-weight: 800; color: #4A3A1A; margin-bottom: 10px; }
.mine-block-sub { font-size: 12.5px; color: #B3A27A; margin: 4px 0 10px; }
/* 我的页兑换码输入框（放大，便于手机输入） */
#codeInput {
  display: block; width: 100%; box-sizing: border-box;
  border: 1.5px solid #F0DDB0; background: #FFFBF2; border-radius: 14px;
  padding: 16px 16px; font-size: 18px; letter-spacing: 1px; margin-bottom: 12px;
  outline: none; color: #4A3A1A;
}
#codeInput:focus { border-color: var(--lemon); }
.mine-p { font-size: 13.5px; color: #6b5a36; line-height: 1.8; margin: 0 0 8px; }
.mine-feats { list-style: none; padding: 0; margin: 0; }
.mine-feats li { font-size: 13.5px; color: #6b5a36; line-height: 1.7; padding: 6px 0; border-bottom: 1px dashed #F0E8D8; }
.mine-feats li:last-child { border-bottom: none; }
.mine-price { margin-top: 10px; font-size: 13.5px; color: #4A3A1A; line-height: 1.9; }
.mine-price-note { font-size: 12px; color: #B3A27A; margin-top: 4px; }
.mine-contact-row { font-size: 14px; color: #4A3A1A; margin: 4px 0; }
.mine-contact-row b { color: #F5B800; }
.mine-contact-qr img { max-width: 160px; margin: 8px 0; border-radius: 10px; border: 1px solid #eee; }
.mine-contact-note { font-size: 12px; color: #B3A27A; margin-top: 6px; line-height: 1.6; }
.mine-notices { padding-left: 18px; margin: 0; }
.mine-notices li { font-size: 13px; color: #8a6d2b; line-height: 1.8; }
.mine-foot { text-align: center; color: #B3A27A; font-size: 12px; margin: 22px 16px 8px; }
.mine-logout { display: block; margin: 8px auto 30px; }

/* ---------- 首页兑换码框 ---------- */
.lm-redeem-box { background: #FFFBF2; border: 1px solid #F7EBD2; border-radius: 16px; padding: 14px; margin: 6px 0 12px; }
.lm-redeem-t { font-size: 16px; font-weight: 800; color: #4A3A1A; }
.lm-redeem-sub { font-size: 12.5px; color: #B3A27A; margin: 4px 0 10px; }
.lm-redeem-row { display: flex; gap: 8px; }
.lm-redeem-row input { flex: 1; min-width: 0; border: 1px solid #E8DDBF; border-radius: 12px; padding: 10px 12px; font-size: 14px; background: #FFFDF8; }
.lm-redeem-row input:focus { outline: none; border-color: #F5B800; }
.lm-redeem-row .lm-btn { white-space: nowrap; }
.lm-vip-contact { background: #FFF8E8; border: 1px solid #F3E2BC; border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.lm-vip-contact-t { font-size: 14.5px; font-weight: 700; color: #4A3A1A; margin-bottom: 8px; }
.lm-vip-contact-row { font-size: 14px; color: #4A3A1A; }
.lm-vip-contact-row b { color: #F5B800; }
.lm-vip-contact-note { font-size: 12px; color: #B3A27A; margin-top: 6px; line-height: 1.6; }

/* ---------- 首页：注册验证码行 ---------- */
.lm-form-code { display: flex; gap: 8px; margin-bottom: 10px; }
.lm-form-code input { flex: 1; min-width: 0; border: 1.5px solid #EFE7C0; background: #FFFDF3; border-radius: 14px; padding: 13px 15px; font-size: 16px; outline: none; }
.lm-form-code input:focus { border-color: var(--lemon-d); background: #fff; }
.lm-btn-code { flex: 0 0 auto; background: #FFF6D6; color: #8A6200; font-weight: 700; padding: 0 14px; font-size: 13px; white-space: nowrap; box-shadow: none; }
.lm-btn-code:disabled { opacity: .6; }
.lm-btn-code:active { transform: scale(.97); }

/* ---------- 首页底部导航栏 ---------- */
.lemon-home { padding-bottom: 84px; }
.lm-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: #fff; border-top: 1px solid #F0E6B8; box-shadow: 0 -6px 22px rgba(60,50,0,.08); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: #B3A27A; font-size: 22px; padding: 4px 0; }
.bn-item span { font-size: 11px; }
.bn-item:active { transform: scale(.95); }

/* ---------- 开通会员：返回按钮 / 放大输入框 ---------- */
.lm-vip { position: relative; }
.lm-vip-back { position: absolute; top: 14px; left: 14px; border: 1px solid rgba(255,217,61,.4); background: rgba(255,255,255,.08); color: var(--lemon); font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.lm-vip-back:active { transform: scale(.95); }
.lm-code-input { width: 100%; box-sizing: border-box; border: 1.5px solid rgba(255,217,61,.5); background: rgba(255,255,255,.95); border-radius: 14px; padding: 15px 16px; font-size: 17px; letter-spacing: 1px; margin-bottom: 12px; outline: none; color: #333; }
.lm-code-input:focus { border-color: var(--lemon); }
.lm-code-btn { margin-top: 2px; }

/* ---------- 一键复制按钮 ---------- */
.lm-copy { border: 1px solid #F5B800; background: #FFF8E0; color: #B58900; font-size: 12px; padding: 3px 12px; border-radius: 999px; margin-left: 8px; white-space: nowrap; }
.lm-copy:active { transform: scale(.95); }
.lm-contact-copy { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #4A3A1A; margin: 6px 0; }
.lm-contact-copy b { color: #F5B800; }

/* ---------- 绘本童谣版权说明 ---------- */
.rh-copy-note { margin: 12px 16px 0; background: #FFF8E8; border: 1px solid #F3E2BC; border-radius: 14px; padding: 11px 14px; font-size: 12.5px; color: #9A7B2B; line-height: 1.7; }
.lm-c7 { background: linear-gradient(160deg, #FFE8E8 0%, #fff 70%); }
.lm-c8 { background: linear-gradient(160deg, #FFE4D0 0%, #fff 70%); }

/* ---------- 已学标记 倒三角（goods / scene / hf 通用） ---------- */
.gw-learned-tag {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent transparent transparent transparent; /* 默认不可见 */
  pointer-events: none;
  z-index: 2;
}
.s-learned .gw-learned-tag {
  border-color: transparent #4CAF50 transparent transparent; /* 已学 → 绿色倒三角 */
}

/* 卡片已学态 */
.gw-card.s-learned {
  background: #f9fdf7;
  border-color: #c8e6c9;
}
.s-row.s-learned {
  background: #f9fdf7;
}

/* scene/hf 已学三角（CSS 伪元素，无需改 JS） */
.s-row {
  position: relative;
}
.s-row.s-learned::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent #4CAF50 transparent transparent;
  pointer-events: none;
}

/* 播放中脉冲效果 */
.s-row.playing {
  background: #e3f2fd !important;
  transition: background 0.2s;
}

/* 整行热区：可点击播放的磁条 */
.s-row { cursor: pointer; }

/* 话筒按钮（单击录音 / 长按跟读） */
.s-mic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #e0e0e0; background: #fafafa; color: #888;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding: 0; cursor: pointer; line-height: 1;
  position: relative;
  -webkit-touch-callout: none;   /* 禁止长按弹系统菜单 */
  -webkit-user-select: none;
  user-select: none;
  transition: all .15s ease;
}
.s-mic:active { transform: scale(.9); }
.s-mic.has-rec { border-color: #66BB6A; background: #E8F5E9; color: #2E7D32; font-size: 15px; }
.s-mic.recording { border-color: #EF5350; background: #FFEBEE; }
.s-mic.playing { border-color: #42A5F5; background: #E3F2FD; }
/* 扩大触控热区：视觉 44px，四周外扩 8px，实际可点约 60px */
.s-mic::before {
  content: '';
  position: absolute;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: 50%;
}

/* 录音中红色闪烁小点 */
.rec-pulse {
  display: inline-block; width: 10px; height: 10px;
  background: #EF5350; border-radius: 50%;
  animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ============================================================
   今日任务卡（首页）
   ============================================================ */
.task-card {
  margin: 14px 16px 4px; background: #fff; border-radius: 20px;
  padding: 16px; box-shadow: 0 8px 22px rgba(245,184,0,.10);
  border: 1px solid #F5E9C0;
}
.task-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.task-title { font-size: 16px; font-weight: 800; color: #3D3800; }
.task-date { font-size: 12px; color: #B3A27A; }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-group-title { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; }
.task-group-title span { font-size: 13px; font-weight: 800; color: #8A7800; }
.task-group-title::after { content: ''; flex: 1; height: 1px; background: #F3ECDD; }
.task-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: #FFFDF3; border: 1px solid #F3ECDD; border-radius: 14px;
  padding: 10px 12px; transition: all .12s ease;
}
.task-item:active { transform: scale(.98); background: #FFF6D6; }
.task-emoji { font-size: 24px; flex: 0 0 auto; }
.task-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task-info b { font-size: 14px; color: #4A3A1A; font-weight: 700; }
.task-info i { font-style: normal; font-size: 12px; color: #B3A27A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-arrow { font-size: 20px; color: #C9C39A; flex: 0 0 auto; }

/* ============================================================
   启蒙测评弹层（首页）
   ============================================================ */
.quiz-mask {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(40,35,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}
.quiz-panel {
  background: #fff; border-radius: 24px;
  width: 100%; max-width: 360px; max-height: 88vh; overflow-y: auto;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.quiz-head { text-align: center; margin-bottom: 20px; }
.quiz-title { font-size: 20px; font-weight: 800; color: #3D3800; }
.quiz-sub { font-size: 12.5px; color: #A89F6B; margin-top: 6px; line-height: 1.6; }
.quiz-q { margin-bottom: 18px; }
.quiz-q-t { font-size: 14.5px; font-weight: 700; color: #4A3A1A; margin-bottom: 10px; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-opt {
  flex: 0 0 auto; border: 1.5px solid #EFE7C0; background: #FFFDF3;
  border-radius: 999px; padding: 9px 15px; font-size: 14px; color: #6B5A00;
  cursor: pointer; transition: all .12s ease;
}
.quiz-opt:active { transform: scale(.95); }
.quiz-opt.on {
  background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-d) 100%);
  border-color: var(--lemon-d); color: #4A3D00; font-weight: 700;
}
.quiz-actions { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.quiz-submit {
  border: none; border-radius: 14px; padding: 14px 18px; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-d) 100%); color: #4A3D00;
  box-shadow: 0 8px 20px rgba(245,184,0,.35); cursor: pointer;
}
.quiz-submit:active { transform: scale(.97); }
.quiz-submit:disabled { background: #F2EFDF; color: #B8B39A; box-shadow: none; cursor: not-allowed; }
.quiz-skip { background: none; border: none; color: #A89F6B; font-size: 13px; text-decoration: underline; padding: 4px; }

/* 测评结果区 */
.quiz-result-head { text-align: center; margin-bottom: 18px; }
.quiz-result-icon { font-size: 52px; line-height: 1; margin-bottom: 8px; }
.quiz-result-title { font-size: 22px; font-weight: 800; color: #3D3800; }
.quiz-result-sub { font-size: 13px; color: #A89F6B; margin-top: 6px; line-height: 1.6; }
.quiz-result-advice {
  list-style: none; padding: 14px 16px; margin: 0 0 18px;
  background: #FFFDF3; border: 1px solid #F3ECDD; border-radius: 14px;
}
.quiz-result-advice li {
  font-size: 13.5px; color: #6B5A00; line-height: 1.8; padding: 6px 0 6px 18px;
  border-bottom: 1px dashed #F0E8D8; position: relative;
}
.quiz-result-advice li:last-child { border-bottom: none; }
.quiz-result-advice li::before { content: '✨'; position: absolute; left: 0; top: 6px; font-size: 12px; }

/* ============================================================
   个人档案页（profile.html）
   ============================================================ */
.pf-card { margin: 14px 16px; background: #fff; border-radius: 18px; padding: 22px 16px; box-shadow: 0 8px 20px rgba(255,180,0,.06); border: 1px solid #F3ECDD; }
.pf-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; cursor: pointer; }
.pf-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, #FFF6D6 0%, #FFE9A8 100%);
  border: 2px solid #F5DF9A;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1;
  box-shadow: 0 8px 20px rgba(245,184,0,.2);
}
.pf-avatar-hint { font-size: 12px; color: #B3A27A; }
.pf-field { display: flex; flex-direction: column; gap: 8px; }
.pf-label { font-size: 14px; font-weight: 700; color: #4A3A1A; }
.pf-field input {
  width: 100%; box-sizing: border-box; border: 1.5px solid #EFE7C0; background: #FFFDF3;
  border-radius: 14px; padding: 13px 15px; font-size: 16px; outline: none; color: #4A3A1A;
}
.pf-field input:focus { border-color: var(--lemon-d); background: #fff; }
.pf-block { margin: 14px 16px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 8px 20px rgba(255,180,0,.06); border: 1px solid #F3ECDD; }
.pf-block-t { font-size: 16px; font-weight: 800; color: #4A3A1A; margin-bottom: 10px; }
.pf-quiz-list { list-style: none; padding: 0; margin: 0 0 12px; }
.pf-quiz-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px dashed #F0E8D8; font-size: 14px; }
.pf-quiz-item:last-child { border-bottom: none; }
.pf-quiz-k { color: #B3A27A; }
.pf-quiz-v { color: #4A3A1A; font-weight: 600; }
.pf-quiz-empty { font-size: 13.5px; color: #B3A27A; line-height: 1.7; padding: 8px 0; }
.pf-requiz { width: 100%; }
.pf-save { display: block; margin: 4px 16px 30px; width: calc(100% - 32px); }

/* 我的页 → 个人档案入口 */
.pf-entry { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.pf-entry-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #FFF6D6 0%, #FFE9A8 100%); border: 1.5px solid #F5DF9A;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pf-entry-info { flex: 1; min-width: 0; }
.pf-entry-info b { display: block; font-size: 15px; color: #4A3A1A; font-weight: 700; }
.pf-entry-info i { display: block; font-style: normal; font-size: 12px; color: #B3A27A; margin-top: 2px; }
.pf-entry-arrow { font-size: 22px; color: #C9C39A; }

/* 档案页「更改密码」入口 */
.pf-change-pwd { width: 100%; background: #FFFDF3; border: 1.5px solid #EFE7C0; color: #8A6200; font-weight: 600; }

/* emoji 头像选择器 */
.pf-emoji-mask {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(40,35,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.pf-emoji-panel {
  background: #fff; border-radius: 22px; width: 100%; max-width: 340px;
  padding: 22px 18px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.pf-emoji-t { text-align: center; font-size: 16px; font-weight: 800; color: #3D3800; margin-bottom: 16px; }
.pf-emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.pf-emoji {
  aspect-ratio: 1; border: 2px solid #F3ECDD; background: #FFFDF5; border-radius: 16px;
  font-size: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .12s ease;
}
.pf-emoji:active { transform: scale(.93); }
.pf-emoji.on { border-color: var(--lemon-d); background: #FFF6D6; }
.pf-emoji-close { width: 100%; background: #F2EFDF; color: #6B6600; }