/* ===================== 重置 & 基础 ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: linear-gradient(160deg, #e8f5e9 0%, #e3f2fd 40%, #f3e5f5 100%);
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

#app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f8fafb;
    position: relative;
}

#view-container {
    min-height: 100vh;
}

/* ===================== 通用组件 ===================== */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
    user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: #4CAF50; color: #fff; }
.btn-primary:hover { background: #43A047; }
.btn-secondary { background: #e0e0e0; color: #555; }
.btn-danger { background: #f44336; color: #fff; }
.btn-warn { background: #ff9800; color: #fff; }
.btn-large { width: 100%; padding: 16px; font-size: 18px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input-field {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.2s;
    background: #fff;
    outline: none;
}
.input-field:focus { border-color: #4CAF50; }

.card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.title-bar {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
    padding: 16px 20px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 16px rgba(76,175,80,0.3);
}

.loading-container {
    max-width: 400px;
    margin: 0 auto;
}

/* ===================== 头像选择 ===================== */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.avatar-option {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    background: #f0f0f0;
}
.avatar-option.selected { border-color: #4CAF50; transform: scale(1.1); }
.avatar-option:active { transform: scale(0.95); }

/* ===================== 进度卡片 ===================== */
.stat-row {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
}
.stat-item {
    text-align: center;
}
.stat-icon { font-size: 28px; }
.stat-value { font-size: 22px; font-weight: 700; color: #333; margin-top: 4px; }
.stat-label { font-size: 12px; color: #999; margin-top: 2px; }

/* ===================== 课程卡片 ===================== */
.lesson-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 16px;
}
.lesson-card:active { transform: scale(0.98); }
.lesson-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.lesson-info { flex: 1; }
.lesson-title { font-size: 16px; font-weight: 600; color: #333; }
.lesson-desc { font-size: 13px; color: #888; margin-top: 4px; }
.lesson-stars { font-size: 14px; color: #ff9800; margin-top: 6px; }

/* ===================== 学段选择卡片 ===================== */
.stage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    border-radius: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    text-align: center;
}
.stage-card:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ===================== 学科选择网格 ===================== */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (min-width: 480px) {
    .subject-grid { grid-template-columns: repeat(4, 1fr); }
}
.subject-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.subject-card:active { transform: scale(0.95); }

/* ===================== 年级筛选标签 ===================== */
.grade-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.grade-tab.active { background: #4CAF50; color: #fff; }

/* ===================== 课前学习 ===================== */
.study-header { background: linear-gradient(135deg,#4CAF50,#66BB6A); color:#fff; padding:18px 20px; border-radius:0 0 20px 20px; box-shadow:0 4px 16px rgba(76,175,80,.3); }
.study-header h2 { margin:0 0 4px; font-size:20px; }
.study-header p { margin:0; font-size:13px; opacity:.9; }
.study-section { background:#fff; margin:12px; border-radius:14px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.study-section-title { font-size:16px; font-weight:bold; color:#333; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.btn-read-all { background:#FF9800; color:#fff; border:none; border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; }
.btn-read-all:active { transform:scale(.95); }
.goal-list { margin:0; padding-left:20px; color:#444; line-height:1.8; font-size:14px; }
.goal-list li { margin-bottom:4px; }
.study-text { font-size:16px; line-height:2; color:#222; }
.study-paragraph { padding:10px 12px; margin:0 0 8px; border-radius:10px; background:#f8faf8; cursor:pointer; transition:background .2s, box-shadow .2s; border-left:3px solid transparent; }
.study-paragraph:hover { background:#eef7ee; }
.study-paragraph.speaking { background:#fff3e0; border-left-color:#FF9800; box-shadow:0 2px 10px rgba(255,152,0,.25); }
.study-tip { font-size:12px; color:#999; margin:6px 2px 0; }
.vocab-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.vocab-card { background:#f7f9ff; border:1px solid #e3e9ff; border-radius:12px; padding:10px; cursor:pointer; transition:transform .15s, box-shadow .15s, background .2s; }
.vocab-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(33,150,243,.18); }
.vocab-card.speaking { background:#fff3e0; border-color:#FF9800; }
.vocab-word { font-size:20px; font-weight:bold; color:#1a73e8; }
.vocab-pinyin { font-size:13px; color:#d84315; margin:2px 0; }
.vocab-meta, .vocab-words { font-size:11px; color:#777; line-height:1.5; }
.vocab-meaning { font-size:13px; color:#444; margin-top:4px; line-height:1.5; }
.vocab-speak { font-size:11px; color:#FF9800; margin-top:6px; text-align:right; }
.knowledge-card { background:#fff8f0; border-left:4px solid #FF9800; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.knowledge-title { font-weight:bold; color:#e65100; font-size:14px; margin-bottom:4px; }
.knowledge-content { font-size:14px; color:#555; line-height:1.7; }
.study-actions { padding:16px 12px 28px; }
.btn-start-game { width:100%; background:linear-gradient(135deg,#4CAF50,#66BB6A); color:#fff; border:none; border-radius:30px; padding:14px; font-size:17px; font-weight:bold; cursor:pointer; box-shadow:0 4px 16px rgba(76,175,80,.35); }
.btn-start-game:active { transform:scale(.98); }
.study-empty { color:#999; font-size:13px; }

/* 核心素养 & 核心概念（数学等非语英学科） */
.core-comp-grid { display:flex; flex-wrap:wrap; gap:8px; }
.core-comp-chip { background:linear-gradient(135deg,#e8f0fe,#e3f2fd); color:#1565c0; border:1px solid #bbdefb; border-radius:20px; padding:6px 14px; font-size:14px; font-weight:bold; }
.concept-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; }
.concept-card { background:#f3f8f3; border:1px solid #d7ebd7; border-left:4px solid #43a047; border-radius:10px; padding:10px 12px; }
.concept-term { font-size:16px; font-weight:bold; color:#2e7d32; margin-bottom:4px; }
.concept-exp { font-size:13px; color:#444; line-height:1.6; }

/* ===================== 关卡地图 ===================== */
.level-map {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 16px;
}
.level-node {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    font-weight: 700;
    color: #fff;
}
.level-node:active { transform: scale(0.92); }
.level-node.locked { background: #cfd8dc; cursor: not-allowed; opacity: 0.6; }
.level-node.word { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.level-node.reading { background: linear-gradient(135deg, #66BB6A, #43A047); }
.level-node.comprehension { background: linear-gradient(135deg, #FFA726, #FB8C00); }
.level-node.expression { background: linear-gradient(135deg, #AB47BC, #8E24AA); }
.level-node.review { background: linear-gradient(135deg, #26C6DA, #00ACC1); }
.level-node.concept { background: linear-gradient(135deg, #78909C, #455A64); }
.level-node.practice { background: linear-gradient(135deg, #26C6DA, #00ACC1); }
.level-node.calculate { background: linear-gradient(135deg, #FF7043, #E64A19); }
.level-node.listen { background: linear-gradient(135deg, #5C6BC0, #3949AB); }
.level-node.speak { background: linear-gradient(135deg, #EC407A, #C2185B); }
.level-node.boss {
    background: linear-gradient(135deg, #EF5350, #C62828);
    grid-column: span 2;
    aspect-ratio: 2;
    border-radius: 20px;
}
.level-node.completed { box-shadow: 0 0 0 3px #FFD700, 0 0 12px rgba(255,215,0,0.4); }
.level-num { font-size: 18px; }
.level-type-icon { font-size: 12px; margin-top: 2px; }
.level-stars-mini { position: absolute; top: -6px; right: -4px; font-size: 11px; }

/* ===================== 答题页面 ===================== */
.question-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    margin: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.question-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333;
    white-space: pre-wrap;
}
.question-hint {
    font-size: 14px;
    color: #888;
    background: #f5f5f5;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 12px;
}
.option-list { display: flex; flex-direction: column; gap: 10px; }
.option-item {
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.option-item:active { transform: scale(0.98); }
.option-item.selected { border-color: #4CAF50; background: #e8f5e9; }
.option-item.correct { border-color: #4CAF50; background: #c8e6c9; }
.option-item.wrong { border-color: #f44336; background: #ffcdd2; }
.option-label {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.option-item.selected .option-label { background: #4CAF50; color: #fff; }
.option-item.correct .option-label { background: #4CAF50; color: #fff; }
.option-item.wrong .option-label { background: #f44336; color: #fff; }

/* 填空题 */
.fill-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    margin-top: 8px;
    outline: none;
}
.fill-input:focus { border-color: #4CAF50; }
.fill-input.correct { border-color: #4CAF50; background: #e8f5e9; }
.fill-input.wrong { border-color: #f44336; background: #ffebee; }

/* 开放题 */
.open-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    resize: vertical;
    font-family: inherit;
    outline: none;
    margin-top: 8px;
}
.open-textarea:focus { border-color: #4CAF50; }

/* 录音 */
.record-container {
    text-align: center;
    padding: 20px 0;
}
.record-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f44336;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.record-btn:active { transform: scale(0.9); }
.record-btn.recording { background: #c62828; animation: pulse 1.2s infinite; }
.record-btn.playing { background: #4CAF50; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(244,67,54,0.4); }
    70% { box-shadow: 0 0 0 20px rgba(244,67,54,0); }
    100% { box-shadow: 0 0 0 0 rgba(244,67,54,0); }
}
.record-status { margin-top: 12px; font-size: 14px; color: #666; }
.record-timer { font-size: 20px; font-weight: 700; color: #f44336; margin-top: 8px; }

/* ===================== 进度条 ===================== */
.progress-bar-container {
    background: #e0e0e0;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin: 8px 0;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
    border-radius: 10px;
    transition: width 0.3s;
}

/* ===================== 排行榜 ===================== */
.rank-table { width: 100%; }
.rank-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}
.rank-row.me { background: #e8f5e9; border-radius: 8px; }
.rank-num {
    width: 32px; text-align: center;
    font-size: 18px; font-weight: 700;
}
.rank-num.top1 { color: #FFD700; }
.rank-num.top2 { color: #C0C0C0; }
.rank-num.top3 { color: #CD7F32; }
.rank-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: #f0f0f0;
    flex-shrink: 0;
}
.rank-info { flex: 1; }
.rank-name { font-size: 15px; font-weight: 600; }
.rank-stats { font-size: 12px; color: #999; margin-top: 2px; }

/* ===================== 弹窗/提示 ===================== */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 15px;
    z-index: 9999;
    pointer-events: none;
    animation: toastIn 0.3s;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    animation: modalIn 0.3s;
}
@keyframes modalIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.modal-icon { font-size: 56px; margin-bottom: 12px; }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.modal-body { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.6; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ===================== 朗读题 ===================== */
.reading-box {
    background: #F5FBF6;
    border: 1px solid #DCEFE0;
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
}
.reading-text {
    font-size: 17px;
    line-height: 2;
    color: #2E3A2F;
    letter-spacing: 0.5px;
    white-space: pre-wrap;
    padding: 4px 2px 12px;
}
.reading-text.speaking {
    background: #FFF7D6;
    border-radius: 8px;
    box-shadow: 0 0 0 3px #FFE9A3 inset;
}
.reading-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ===================== 课文朗读播放器 reader ===================== */
.reader-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.reader-rate { margin-left: auto; font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; }
.rate-group { display: inline-flex; gap: 4px; }
.rate-btn { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.rate-btn.active { background: #FF9800; color: #fff; border-color: #FF9800; }
.reader-legend { font-size: 12px; color: #888; margin-bottom: 8px; }
.lex-poly { color: #E65100; font-weight: 500; cursor: help; border-bottom: 1px dotted #E65100; }
.lex-neutral { color: #757575; cursor: help; border-bottom: 1px dotted #757575; }
.reader-body { display: flex; flex-direction: column; gap: 14px; }
.read-sentence { padding: 10px 12px; margin: 0 0 8px; border-radius: 10px; background: #f8faf8; cursor: pointer; transition: background .2s, box-shadow .2s; border-left: 3px solid transparent; line-height: 1.9; }
.read-sentence:hover { background: #eef7ee; }
.read-sentence.speaking { background: #fff3e0; border-left-color: #FF9800; box-shadow: 0 2px 10px rgba(255,152,0,.25); }
.read-text { font-size: 15px; color: #222; }
.read-pinyin { font-size: 12px; color: #999; margin-top: 3px; }
.follow-rec { margin-top: 8px; padding: 10px; background: #fff8e1; border-radius: 8px; }
.follow-tip { font-size: 13px; color: #F57F17; margin-bottom: 8px; }
.follow-tip.recording { color: #e53935; }

/* ===================== 星星动画 ===================== */
.star-animation {
    display: inline-block;
    animation: starPop 0.4s;
}
@keyframes starPop {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.3) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ===================== 顶部导航 ===================== */
.nav-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-back {
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    color: #333;
}
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.nav-spacer { width: 40px; }

/* ===================== 关卡头部 ===================== */
.level-header {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
    padding: 20px 16px;
    text-align: center;
}
.level-header.boss-header { background: linear-gradient(135deg, #EF5350, #C62828); }
.level-header h2 { font-size: 20px; margin-bottom: 4px; }
.level-header p { font-size: 13px; opacity: 0.9; }
.level-progress-text { font-size: 14px; margin-top: 8px; }

/* ===================== 底部按钮区 ===================== */
.bottom-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    z-index: 50;
}

/* ===================== 徽章 ===================== */
.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* ===================== 加载动画 ===================== */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== 响应式 ===================== */
@media (min-width: 600px) {
    #app {
        box-shadow: 0 0 40px rgba(0,0,0,0.1);
    }
}

/* ===================== 工具类 ===================== */
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.3s; }

/* ===================== 儿童拼音输入组件 ===================== */
.pinyin-wrap { background: linear-gradient(160deg,#f0f9ff,#fff7f0); border-radius:16px; padding:14px; margin-top:10px; }
.py-prompt { font-size:16px; font-weight:600; color:#333; text-align:center; margin-bottom:8px; }
.py-prompt b { color:#ff6b6b; font-size:20px; }
.py-progress { text-align:center; margin-bottom:8px; }
.py-dot { display:inline-block; width:22px; height:22px; line-height:22px; border-radius:50%; background:#e0e0e0; color:#888; font-size:12px; margin:0 2px; }
.py-dot.on { background:#4dabf7; color:#fff; }
.py-dot.done { background:#69db7c; color:#fff; }
.py-display { text-align:center; font-size:38px; font-weight:800; color:#1c7ed6; letter-spacing:2px; min-height:46px; padding:8px; background:#fff; border-radius:12px; box-shadow:inset 0 0 0 2px #d0ebff; margin-bottom:8px; }
.py-hint { text-align:center; font-size:12px; color:#e8590c; min-height:16px; margin-bottom:8px; }
.py-modes { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.py-mode { border:none; background:#fff; color:#495057; padding:7px 12px; border-radius:20px; font-size:13px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.py-mode.active { background:#4dabf7; color:#fff; }
.py-group { margin-bottom:10px; }
.py-group-title { font-size:12px; color:#868e96; margin:4px 0; }
.py-key-row, .py-card-row { display:flex; flex-wrap:wrap; gap:6px; }
.py-key { border:none; background:#fff; color:#343a40; min-width:38px; height:42px; padding:0 10px; border-radius:10px; font-size:18px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:transform .08s; }
.py-key:active { transform:scale(.94); }
.py-key.py-initial { background:#fff0f6; color:#c2255c; }
.py-key.py-final { background:#f3f0ff; color:#5f3dc4; }
.py-key.py-tone { background:#e6fcf5; color:#0c8599; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.py-tone-mark { font-size:14px; }
.py-key.sel { outline:3px solid #ffd43b; background:#fff9db; }
.py-card { background:#fff; border-radius:10px; padding:10px 12px; font-size:18px; cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.15); user-select:none; }
.py-card.py-initial { background:#fff0f6; color:#c2255c; }
.py-card.py-final { background:#f3f0ff; color:#5f3dc4; }
.py-card:active { cursor:grabbing; }
.py-drop { margin:8px 0; padding:14px; border:2px dashed #74c0fc; border-radius:12px; text-align:center; color:#495057; background:#f8f9fa; font-size:15px; }
.py-drop.over { background:#d0ebff; border-color:#1c7ed6; }
.py-tonegame { text-align:center; }
.py-tg-tip { font-size:13px; color:#495057; margin-bottom:10px; }
.py-tg-syllable { font-size:32px; font-weight:800; letter-spacing:2px; margin-bottom:12px; }
.py-vowel { display:inline-block; padding:2px 4px; border-radius:6px; }
.py-vowel.vowel { background:#e7f5ff; cursor:pointer; border:2px solid transparent; }
.py-vowel.vowel.over { border-color:#1c7ed6; }
.py-vowel.vowel.placed { background:#ffec99; outline:2px solid #fab005; }
.py-tg-hat { display:inline-block; background:#ffd43b; color:#664d03; font-weight:700; padding:8px 14px; border-radius:10px; cursor:grab; font-size:16px; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.py-tg-hat:active { cursor:grabbing; }
.py-speak { text-align:center; }
.py-speak-tip { font-size:13px; color:#495057; margin-bottom:10px; }
.py-speak-status { margin-top:10px; font-size:14px; color:#1c7ed6; min-height:20px; }
.py-actions { text-align:center; margin-top:10px; }

/* ===================== 主页面 3D 立体美化 ===================== */

/* --- 登录/注册页：明亮国风场景 --- */
.login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #5db4e8 0%, #9dd5f0 35%, #d4f0ff 65%, #fff8e7 100%);
    font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
/* 场景层 */
.ls-sky { position:absolute; inset:0; }
.ls-sun {
    position:absolute; top:9%; right:11%; width:64px; height:64px; border-radius:50%;
    background: radial-gradient(circle,#fff9c4 0%,#fff176 40%,#ffd54f 70%,rgba(255,213,79,0) 100%);
    animation: fcSunPulse 5s ease-in-out infinite; cursor:pointer; z-index:6;
}
@keyframes fcSunPulse {0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,213,79,.5))}50%{transform:scale(1.08);filter:drop-shadow(0 0 20px rgba(255,213,79,.7))}}
.ls-cloud {
    position:absolute; background:#fff; border-radius:50px; opacity:.85;
    filter: drop-shadow(0 4px 6px rgba(100,150,200,.15)); z-index:4;
}
.ls-cloud::before,.ls-cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.ls-c1 { top:11%; left:6%; width:80px; height:24px; animation: fcDrift 50s linear infinite; }
.ls-c1::before { width:40px; height:40px; top:-18px; left:12px; }
.ls-c1::after { width:30px; height:30px; top:-12px; left:42px; }
.ls-c2 { top:17%; left:58%; width:100px; height:28px; animation: fcDrift 65s linear infinite; animation-delay:-20s; }
.ls-c2::before { width:50px; height:50px; top:-22px; left:15px; }
.ls-c2::after { width:36px; height:36px; top:-15px; left:52px; }
.ls-c3 { top:7%; left:33%; width:60px; height:20px; animation: fcDrift 45s linear infinite; animation-delay:-10s; opacity:.7; }
.ls-c3::before { width:32px; height:32px; top:-14px; left:8px; }
@keyframes fcDrift { from{transform:translateX(-30vw)} to{transform:translateX(130vw)} }

.ls-mtn { position:absolute; left:0; right:0; width:100%; z-index:2; }
.ls-mtn-far { bottom:20%; height:25%; }
.ls-mtn-mid { bottom:16%; height:28%; }
.ls-mtn-near { bottom:12%; height:30%; }

.ls-academy { position:absolute; bottom:10%; left:0; right:0; height:40%; display:flex; justify-content:center; align-items:flex-end; z-index:3; }
.ls-academy svg { width:min(520px,88vw); height:100%; }

.ls-trees { position:absolute; bottom:0; left:0; right:0; height:20%; z-index:4; pointer-events:none; }
.ls-trees svg { position:absolute; bottom:0; height:115%; }
.ls-tree-l { left:-3%; }
.ls-tree-r { right:-3%; }

.ls-petal { position:absolute; width:12px; height:12px; opacity:0; animation: fcPetalFall 10s linear infinite; z-index:5; }
@keyframes fcPetalFall {0%{transform:translate(0,-20px) rotate(0);opacity:0}10%{opacity:.8}50%{transform:translate(30px,40vh) rotate(180deg);opacity:.6}100%{transform:translate(-20px,80vh) rotate(360deg);opacity:0}}
.ls-butterfly { position:absolute; width:20px; height:16px; animation: fcFly 15s ease-in-out infinite; opacity:.7; z-index:5; }
@keyframes fcFly {0%{transform:translate(0,0)}25%{transform:translate(60px,-30px)}50%{transform:translate(120px,10px)}75%{transform:translate(80px,40px)}100%{transform:translate(0,0)}}
.ls-butterfly svg { animation: fcFlap .3s ease-in-out infinite alternate; }
@keyframes fcFlap { from{transform:scaleX(1)} to{transform:scaleX(.6)} }

/* 昼夜：夜晚模式（太阳→月亮、星空、夜空） */
.login-page.is-night { background: linear-gradient(180deg,#0a1730 0%, #143055 45%, #2a4a6e 72%, #3d5e7e 100%); }
.login-page.is-night .ls-sun { background: radial-gradient(circle,#fffdf2 0%,#ffe9a8 55%,rgba(255,233,168,0) 100%); animation:none; box-shadow:0 0 26px rgba(255,240,180,.5); }
/* 月牙：用 mask 真正镂空（挖空处透明，星/云可透出），drop-shadow 光晕随月牙形 */
.login-page.is-night .ls-sun.is-moon { background: radial-gradient(circle at 40% 38%, #fff8e0 0%, #f4e3a1 72%, #e7cf85 100%); animation:none; -webkit-mask: radial-gradient(circle at 67% 60%, transparent 0 56%, #000 57%); mask: radial-gradient(circle at 67% 60%, transparent 0 56%, #000 57%); filter: drop-shadow(0 0 10px rgba(255,240,180,.55)); }
.ls-stars { position:absolute; inset:0; z-index:3; pointer-events:none; display:none; }
.ls-star { position:absolute; background:#fff; border-radius:50%; box-shadow:0 0 6px #fff; animation: fcTwinkle 3s ease-in-out infinite; }
@keyframes fcTwinkle {0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.login-page.is-night .ls-mtn { opacity:.5; filter:brightness(.58) saturate(.85); }
.login-page.is-night .ls-cloud { opacity:.32; }
.login-page.is-night .ls-academy { opacity:.62; filter:brightness(.72); }

/* 夜晚：品牌标题/副标/版权提亮为暖白淡金并加柔光，避免暗红文字在深蓝夜空下显得诡异难读 */
.login-page.is-night .brand-name { color:#fff4e0; text-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 18px rgba(255,225,170,.35); }
.login-page.is-night .brand-slogan { color:#ffe9c2; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.login-page.is-night .brand-sub { color:#ffe1c0; }
.login-page.is-night .brand-sep { color:#ffd479; }
.login-page.is-night .brand-logo-seal { filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.login-page.is-night .login-footer { color:rgba(255,248,230,.92); text-shadow:0 1px 4px rgba(0,0,0,.6); }
.login-page.is-night .login-footer .footer-line1 { color:#ffffff; }
.login-page.is-night .login-footer .footer-line2 { color:rgba(255,255,255,.88); }

/* 底部背景图（用户自定义 webp，替换现山坡地面；顶部需与夜空/天空自然过渡） */
.ls-ground { position:absolute; left:0; right:0; bottom:0; height:42%; z-index:8; pointer-events:none;
    background-image:url('../img/home-ground.webp'); background-size:cover; background-position:center bottom; background-repeat:no-repeat; }
.login-page.has-ground .ls-mtn,
.login-page.has-ground .ls-academy,
.login-page.has-ground .ls-trees { display:none; }

/* ===================== 招牌 / 主标志 ===================== */
@font-face {
    font-family: 'Ma Shan Zheng';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ma-shan-zheng.woff2') format('woff2');
}
.fc-kai { font-family: 'Ma Shan Zheng','STKaiti','KaiTi','Noto Serif SC',serif; }

/* 登录/注册页主标志：左印章 + 右文字横排 */
.brand-hero { position:absolute; top:30px; left:50%; transform:translateX(-50%); z-index:25; text-align:center; }
.brand-logo { display:inline-flex; align-items:center; gap:14px; }
.brand-logo-seal { width:58px; height:58px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(139,26,26,.35)); }
.brand-logo-text { flex:0 0 auto; text-align:center; white-space:nowrap; }
.brand-name { font-family:'Ma Shan Zheng','STKaiti','KaiTi',serif; font-size:40px; color:#7a1414; letter-spacing:8px; text-indent:8px; line-height:1; white-space:nowrap; text-shadow:0 2px 4px rgba(0,0,0,.12); }
.brand-slogan { margin-top:5px; font-size:13px; color:#5d4037; letter-spacing:3px; font-family:'STKaiti','KaiTi',serif; }
.brand-sub { margin-top:8px; font-size:12px; color:#6d4c41; letter-spacing:2px; font-family:'STKaiti','KaiTi',serif; }
.brand-sep { color:#c0392b; margin:0 5px; }

/* 内文页全局品牌小方印（右上角，点击回书院） */
.fc-brand-badge {
    position:fixed; top:9px; right:10px; z-index:130; width:36px; height:36px;
    cursor:pointer; border-radius:9px; overflow:hidden;
    box-shadow:0 2px 8px rgba(139,26,26,.3); transition:transform .15s; background:#8b1a1a;
}
.fc-brand-badge:active { transform:scale(.92); }
.fc-brand-badge svg { display:block; width:100%; height:100%; }

/* 声音开关 */
.login-sound {
    position:fixed; top:44px; right:16px; z-index:100; width:42px; height:42px; border-radius:50%;
    background:#fff; border:2px solid #ffb300; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:.2s; font-size:18px; box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.login-sound:hover { transform:scale(1.1); }
.login-sound.on { border-color:#e53935; box-shadow:0 0 12px rgba(229,57,53,.3); }

/* 返回（注册页） */
.login-back { position:fixed; top:44px; left:16px; z-index:100; width:42px; height:42px; border-radius:50%; background:#fff; border:2px solid #ffb300; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:24px; color:#5d4037; box-shadow:0 3px 10px rgba(0,0,0,.1); transition:.2s; }
.login-back:hover { transform:scale(1.1); }

/* 书童国风全身像 */
.fc-shutong { position:absolute; bottom:0; right:14px; z-index:35; width:132px; height:198px; pointer-events:auto; cursor:pointer; animation: fcShutongIn 1.2s ease-out .6s both; }
.fc-shutong:active { transform:scale(.95); }
.fc-shutong .st-hint { position:absolute; top:-8px; right:-2px; width:18px; height:18px; background:#e53935; border:2px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; animation: fcHintPulse 1.5s ease-in-out infinite; pointer-events:none; }
@keyframes fcHintPulse {0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
@keyframes fcShutongIn {0%{transform:translate(20px,20px) scale(.5);opacity:0}60%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
.shutong-eye { position:relative; width:100%; height:100%; }
.shutong-eye img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#fcShutongImg { filter:drop-shadow(0 4px 8px rgba(60,40,20,.22)); }
#fcShutongBlink { opacity:0; pointer-events:none; }
.fc-shutong.blinking #fcShutongBlink { animation: fcBlink 4s ease-in-out infinite; }
@keyframes fcBlink { 0%,90%,100%{opacity:0} 92%,96%{opacity:1} }
/* 气泡 */
.fc-shutong .bubble {
    position:absolute; bottom:100%; right:0; max-width:150px; white-space:normal; text-align:center; line-height:1.5;
    background:#fffef5; color:#3e2723; padding:8px 14px; border-radius:14px; font-size:12px;
    box-shadow:0 4px 14px rgba(0,0,0,.15); border:1.5px solid #ffb300; animation: fcShutongIn 1.2s ease-out 1s both; margin-bottom:4px;
}
.fc-shutong .bubble::after { content:''; position:absolute; bottom:-7px; right:18px; border:7px solid transparent; border-top-color:#fffef5; }
.fc-shutong .bubble::before { content:''; position:absolute; bottom:-9px; right:16px; border:8px solid transparent; border-top-color:#ffb300; z-index:-1; }
.fc-shutong .bubble-close { position:absolute; top:-6px; right:-6px; width:20px; height:20px; background:#fff; border:1.5px solid #e8d9b8; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#6d4c41; cursor:pointer; line-height:1; pointer-events:auto; transition:.15s; z-index:2; }
.fc-shutong .bubble-close:hover { background:#e53935; color:#fff; border-color:#e53935; }
.fc-egg-leaf { position:fixed; z-index:50; width:16px; height:16px; pointer-events:none; animation: fcEggLeaf 2s ease-in forwards; }
@keyframes fcEggLeaf {0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}20%{opacity:1;transform:translate(-8px,15px) rotate(90deg) scale(1)}100%{opacity:0;transform:translate(var(--lx),300px) rotate(540deg) scale(.6)}}

/* 卷轴卡片 */
.scroll-card { position:fixed; top:50%; left:50%; transform:translate(-50%,-42%); z-index:30; width:min(370px,90vw); }
.scroll-rod { height:16px; background:linear-gradient(180deg,#a0522d,#6d3f1e); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.2); position:relative; }
.scroll-rod::before,.scroll-rod::after { content:''; position:absolute; top:-2px; width:8px; height:20px; background:linear-gradient(180deg,#b8662f,#7a4520); border-radius:4px; }
.scroll-rod::before { left:-3px; } .scroll-rod::after { right:-3px; }
.scroll-body { background:linear-gradient(180deg,#fffef5 0%,#f5ecd9 100%); border-left:3px solid #e8d9b8; border-right:3px solid #e8d9b8; padding:24px 26px 20px; position:relative; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.scroll-body::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(180,160,120,.05) 28px,rgba(180,160,120,.05) 29px); pointer-events:none; }
.card-title { text-align:center; font-size:22px; font-weight:700; color:#3e2723; letter-spacing:4px; margin-bottom:2px; font-family:"STKaiti","KaiTi","Noto Serif SC",serif; }
.card-title .accent { color:#e53935; }
.card-sub { text-align:center; font-size:11px; color:#6d4c41; letter-spacing:2px; margin-bottom:20px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:#6d4c41; margin-bottom:5px; letter-spacing:1px; font-family:"STKaiti","KaiTi",serif; }
.bamboo-input { width:100%; padding:12px 14px; font-size:15px; color:#3e2723; background:#ffffff; border:2px solid #e8d9b8; border-radius:8px; outline:none; transition:.2s; font-family:inherit; box-shadow:inset 0 1px 3px rgba(0,0,0,.05); }
.bamboo-input::placeholder { color:#bcaaa4; }
.bamboo-input:focus { border-color:#e53935; box-shadow:0 0 0 3px rgba(229,57,53,.12); }
.avatar-section { margin-bottom:16px; }
.avatar-section label { display:block; font-size:13px; color:#6d4c41; margin-bottom:8px; letter-spacing:1px; font-family:"STKaiti","KaiTi",serif; }
.avatar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.avatar-opt { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:24px; background:#fff; border:2px solid #e8d9b8; border-radius:10px; cursor:pointer; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.avatar-opt.selected { border-color:#e53935; background:#ffebee; transform:scale(1.08); box-shadow:0 3px 10px rgba(229,57,53,.25); }
.avatar-opt:active { transform:scale(.92); }
.seal-btn { width:100%; padding:15px; margin-top:4px; border:none; cursor:pointer; font-size:20px; letter-spacing:8px; font-weight:700; color:#fff; background:linear-gradient(135deg,#e53935 0%,#b71c1c 100%); border-radius:10px; font-family:"STKaiti","KaiTi",serif; box-shadow:0 5px 0 #b71c1c,0 7px 14px rgba(229,57,53,.3); transition:.12s; position:relative; overflow:hidden; }
.seal-btn::before { content:''; position:absolute; inset:3px; border:1.5px solid rgba(255,255,255,.25); border-radius:7px; pointer-events:none; }
.seal-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #b71c1c,0 2px 6px rgba(229,57,53,.3); }
.seal-btn:disabled { opacity:.7; }
.card-link { text-align:center; margin-top:12px; }
.card-link a { font-size:13px; color:#e53935; text-decoration:none; letter-spacing:1px; font-family:"STKaiti","KaiTi",serif; }
.card-link a:hover { text-decoration:underline; }

/* 登录页底部版权（覆盖通用 site-footer，固定底部不抢戏） */
.login-page .site-footer { position:fixed; bottom:0; left:0; right:0; border-top:none; margin-top:0; padding:16px 6px 8px; background:linear-gradient(180deg, rgba(8,14,24,0) 0%, rgba(8,14,24,.6) 55%, rgba(8,14,24,.82) 100%); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); color:#ffffff; font-size:10px; z-index:30; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.login-footer .footer-line1 { font-size:11px; color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.login-footer .footer-line2 { font-size:9px; color:rgba(255,255,255,.88); margin-top:1px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.login-footer::before { display:none; }

/* 响应式 */
@media (max-width:640px) {
    .sprite, .bubble { display:none !important; }
    .brand-hero { top:12px; }
    .brand-logo { gap:9px; }
    .brand-logo-seal { width:42px; height:42px; }
    .brand-name { font-size:27px; letter-spacing:5px; text-indent:5px; white-space:nowrap; }
    .brand-slogan { font-size:10px; letter-spacing:1px; margin-top:2px; }
    .fc-brand-badge { width:32px; height:32px; top:8px; right:9px; }
    /* 卡片改为顶部定位、内部滚动，避免与固定页脚重叠 */
    .scroll-card {
        width:92vw; top:96px; bottom:auto;
        transform:translateX(-50%);
        max-height:calc(100vh - 124px);
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        padding:10px 0;
    }
    .scroll-body { padding:18px 18px 16px; }
    .card-title { font-size:18px; }
    .card-sub { margin-bottom:14px; }
    .field { margin-bottom:10px; }
    .field label { font-size:12px; margin-bottom:4px; }
    .bamboo-input { padding:10px 12px; font-size:15px; }
    .avatar-grid { gap:6px; }
    .avatar-opt { font-size:20px; }
    .seal-btn { font-size:17px; padding:12px; letter-spacing:6px; }
    .card-link { margin-top:10px; }
    .card-link a { font-size:12px; }
    .login-footer { font-size:9px; }
    .fc-shutong { width:104px; height:156px; right:8px; }
}
@media (max-height:680px) {
    .brand-hero { top:14px; }
    .brand-logo-seal { width:40px; height:40px; }
    .brand-name { font-size:26px; white-space:nowrap; }
    .scroll-card {
        top:84px; bottom:auto;
        transform:translateX(-50%);
        max-height:calc(100vh - 108px);
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        padding:10px 0;
    }
    .scroll-body { padding:16px 18px 14px; }
    .field { margin-bottom:10px; }
}

/* --- 3D 卡片通用 --- */
.card-3d {
    background: linear-gradient(145deg, #ffffff, #f5f9fa);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.8);
    transition: box-shadow 0.3s;
}

/* --- 3D 统计项 --- */
.stat-3d {
    background: linear-gradient(145deg, #ffffff, #f0f4f8);
    border-radius: 14px;
    padding: 14px 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-3d:active { transform: scale(0.95); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-3d .stat-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

/* --- 标题栏增强 --- */
.title-bar {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 50%, #81C784 100%);
    box-shadow: 0 6px 20px rgba(76,175,80,0.3), 0 2px 6px rgba(0,0,0,0.08);
}

/* --- 3D 学段卡片 --- */
.stage-card-3d {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
.stage-card-3d::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}
.stage-card-3d:active {
    transform: scale(0.97) translateY(2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.stage-card-icon {
    font-size: 52px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.stage-card-name { font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.stage-card-count { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 4px; }

/* --- 3D 学科卡片 --- */
.subject-card-3d {
    background: linear-gradient(145deg, #ffffff, #f5f8fa);
    border-radius: 18px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
}
.subject-card-3d:active { transform: scale(0.95) translateY(2px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.subject-card-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}
.subject-card-name { font-size: 16px; font-weight: 600; color: #333; }
.subject-card-count { font-size: 12px; color: #999; margin-top: 4px; }

/* --- 3D 课程卡片 --- */
.lesson-card {
    background: linear-gradient(145deg, #ffffff, #f8fafb);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}
.lesson-card:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* --- 按钮增强 --- */
.btn-primary {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    box-shadow: 0 3px 10px rgba(76,175,80,0.3);
}
.btn-primary:active { box-shadow: 0 1px 4px rgba(76,175,80,0.2); transform: scale(0.97); }
.btn-large { border-radius: 14px; }

/* --- 输入框增强 --- */
.input-field {
    border-radius: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

/* --- 导航栏增强 --- */
.nav-bar {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* --- 句型列表 --- */
.pattern-list { display:flex; flex-direction:column; gap:8px; }
.pattern-item {
    background: linear-gradient(145deg, #e8f5e9, #f1f8e9);
    border-left: 3px solid #4CAF50;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #2e7d32;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* 首页底部版权标记 */
.site-footer {
  text-align: center;
  padding: 18px 12px 22px;
  margin-top: 8px;
  font-size: 13px;
  color: #9aa0a6;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.site-footer::before {
  content: "🎓";
  margin-right: 6px;
}

/* 方寸书院：自学前置锁 */
.btn-start-game.disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);}
.btn-start-game.disabled:active{transform:none;}
.study-done-btn{background:linear-gradient(135deg,#8d6e63,#6d4c41);margin-right:10px;}
.study-done-btn:disabled{background:#cfcfcf;cursor:default;}

/* ===================== 数学语音教学播放器 ===================== */
.teach-player-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#f5efe2,#ede4d0);
  border:1px solid #d7c9a8;border-radius:12px;
  padding:10px 14px;margin:12px 0;
  box-shadow:0 2px 6px rgba(141,110,99,.08);
}
.teach-player-info{display:flex;align-items:center;gap:8px;}
.teach-player-icon{font-size:18px;}
.teach-player-seg{font-size:14px;color:#5d4037;font-weight:500;}
.teach-player-controls{display:flex;align-items:center;gap:8px;}
.teach-btn{
  background:#fff;border:1px solid #d7c9a8;border-radius:8px;
  width:36px;height:36px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;color:#5d4037;
}
.teach-btn:active{transform:scale(.92);background:#f5efe2;}
.teach-speed-group{display:flex;gap:2px;background:#e8dcc4;border-radius:8px;padding:2px;}
.teach-speed-btn{
  background:transparent;border:none;border-radius:6px;
  padding:4px 8px;font-size:12px;color:#8d6e63;cursor:pointer;
  transition:all .15s;
}
.teach-speed-btn.active{background:#fff;color:#5d4037;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.teach-prompt{
  background:linear-gradient(135deg,#fff8e1,#fff3c4);
  border:1px solid #ffe082;border-radius:12px;
  padding:14px 16px;margin:8px 0;text-align:center;
}
.teach-prompt-text{font-size:15px;color:#e65100;font-weight:500;margin-bottom:10px;}
.teach-prompt-btn{
  background:linear-gradient(135deg,#ff9800,#f57c00);
  color:#fff;border:none;border-radius:8px;
  padding:8px 24px;font-size:14px;cursor:pointer;
  transition:all .15s;
}
.teach-prompt-btn:active{transform:scale(.95);}
.teach-prompt.hidden{display:none;}

/* --- 语音课堂卡片（含"开始听讲"大按钮，兜底浏览器自动播放限制） --- */
.teach-card{
  background:linear-gradient(135deg,#f5efe2,#ede4d0);
  border:1px solid #d7c9a8;border-radius:14px;
  padding:14px 16px;margin:12px 0;
  box-shadow:0 2px 8px rgba(141,110,99,.10);
}
.teach-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.teach-card-icon{font-size:26px;}
.teach-card-headtext{flex:1;min-width:0;}
.teach-card-title{font-size:16px;font-weight:700;color:#5d4037;letter-spacing:1px;}
.teach-card-sub{font-size:13px;color:#8d6e63;margin-top:2px;}
.teach-start-btn{
  display:block;width:100%;
  background:linear-gradient(135deg,#8d6e63,#6d4c41);
  color:#fff;border:none;border-radius:10px;
  padding:13px 0;font-size:17px;font-weight:600;letter-spacing:2px;
  cursor:pointer;transition:all .15s;
  box-shadow:0 3px 8px rgba(109,76,65,.25);
}
.teach-start-btn:active{transform:scale(.97);}
.teach-start-btn.hidden{display:none;}
.teach-card .teach-player-controls{justify-content:center;gap:10px;}
.teach-card .teach-player-controls.hidden{display:none;}
.teach-card .teach-btn{width:auto;padding:0 14px;height:38px;font-size:14px;white-space:nowrap;}

/* ===================== 防沉迷·全屏调息页 ===================== */
.rest-page{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rest-bg{position:absolute;inset:0;background:linear-gradient(160deg,#e8e0d0,#d7c9a8,#c8b89a);}
.rest-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.3),transparent 70%);}
.rest-content{position:relative;z-index:1;text-align:center;padding:30px;max-width:360px;}
.rest-breath-circle{width:180px;height:180px;margin:0 auto 24px;position:relative;display:flex;align-items:center;justify-content:center;}
.breath-inner{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.6),rgba(141,110,99,.15));animation:breathe 4s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.5;}50%{transform:scale(1);opacity:.9;}}
.breath-text{position:relative;font-size:48px;font-weight:300;color:#5d4037;font-family:KaiTi,STKaiti,serif;}
.rest-title{font-size:26px;color:#5d4037;font-family:KaiTi,STKaiti,serif;margin-bottom:8px;letter-spacing:4px;}
.rest-subtitle{font-size:14px;color:#8d6e63;margin-bottom:24px;line-height:1.6;}
.rest-allowed{margin:20px 0;}
.rest-nav-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.rest-nav-btn{background:rgba(255,255,255,.5);border:1px solid #d7c9a8;border-radius:20px;padding:8px 16px;font-size:14px;color:#5d4037;cursor:pointer;}
.rest-nav-btn:active{transform:scale(.95);}
.rest-back-home{margin-top:20px;background:none;border:none;color:#8d6e63;font-size:13px;cursor:pointer;text-decoration:underline;}

/* ===================== 家长守护·PIN 页 ===================== */
.pin-page{padding:40px 24px;text-align:center;max-width:360px;margin:0 auto;}
.pin-page h2{font-size:22px;color:#5d4037;margin-bottom:8px;}
.pin-subtitle{font-size:13px;color:#8d6e63;margin-bottom:24px;}
.pin-input-row{display:flex;gap:12px;justify-content:center;margin-bottom:16px;}
.pin-dot{width:52px;height:60px;border:2px solid #d7c9a8;border-radius:10px;text-align:center;font-size:28px;font-weight:700;color:#5d4037;background:#faf6ee;outline:none;}
.pin-dot:focus{border-color:#8d6e63;box-shadow:0 0 0 3px rgba(141,110,99,.15);}
.pin-error{color:#e53935;font-size:13px;min-height:20px;margin-bottom:12px;}

/* ===================== 家长看板 ===================== */
.settings-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.settings-row label{font-size:14px;color:#5d4037;flex:1;}
.settings-row input,.settings-row select{width:90px;padding:6px 8px;border:1px solid #d7c9a8;border-radius:6px;font-size:14px;text-align:center;background:#faf6ee;}
.diag-section{margin-bottom:14px;}
.diag-title{font-size:13px;font-weight:600;color:#6d4c41;margin-bottom:6px;}
.diag-row{display:flex;justify-content:space-between;font-size:13px;color:#5d4037;padding:4px 0;border-bottom:1px dashed #e6dcc8;}
.diag-count{color:#e53935;font-weight:600;}
.diag-advice{margin-top:10px;padding:10px;background:#faf6ee;border-radius:8px;font-size:13px;color:#6d4c41;line-height:1.6;}
.diag-advice p{margin:2px 0;}
.beast-status-row{display:flex;justify-content:space-between;font-size:13px;color:#5d4037;padding:4px 0;border-bottom:1px dashed #e6dcc8;}

/* ===================== 修习战报 ===================== */
.report-card{background:linear-gradient(160deg,#faf6ee,#f0e6d2);border:2px solid #d7c9a8;border-radius:14px;padding:20px;position:relative;overflow:hidden;}
.report-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(141,110,99,.06),transparent 50%);pointer-events:none;}
.report-header{text-align:center;border-bottom:1px solid #d7c9a8;padding-bottom:12px;margin-bottom:16px;}
.report-academy{font-size:22px;font-weight:700;color:#8b1a1a;font-family:KaiTi,STKaiti,serif;letter-spacing:3px;}
.report-date{font-size:12px;color:#8d6e63;margin-top:4px;}
.report-nick{font-size:20px;font-weight:700;color:#5d4037;text-align:center;}
.report-realm{font-size:13px;color:#8d6e63;text-align:center;margin:4px 0 14px;}
.report-stats{display:flex;justify-content:space-around;text-align:center;margin-bottom:16px;}
.rs-num{display:block;font-size:24px;font-weight:700;color:#c0392b;}
.rs-label{font-size:12px;color:#8d6e63;}
.report-beast{text-align:center;margin-bottom:14px;}
.report-beast-rig{width:80px;height:80px;margin:0 auto 4px;}
.report-beast-rig .spirit-svg{width:100%;height:100%;}
.report-weak{background:rgba(229,57,53,.06);border-radius:8px;padding:10px;margin-bottom:12px;}
.rw-title{font-size:13px;font-weight:600;color:#c0392b;margin-bottom:6px;}
.rw-item{font-size:12px;color:#e53935;padding:2px 0;}
.report-advice{font-size:12px;color:#6d4c41;line-height:1.5;}
.report-advice p{margin:2px 0;}
.report-footer{text-align:center;font-size:11px;color:#bbb;margin-top:14px;border-top:1px solid #e6dcc8;padding-top:10px;}

/* ===================== 灵兽园 ===================== */
.garden-header{text-align:center;padding:20px 16px;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);}
.garden-header h2{font-size:20px;color:#2e7d32;margin-bottom:6px;}
.garden-header p{font-size:13px;color:#5d4037;}
.garden-grid{padding:12px;}
.beast-card{background:#fff;border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid #f0ebe0;}
.beast-card.locked{opacity:.6;}
.beast-card.claimable{opacity:1;border:2px solid #ffa726;box-shadow:0 2px 12px rgba(255,167,38,.2);}
.claimable-rig{background:linear-gradient(160deg,#fff8e1,#ffe0b2);}
.claimable-rig .beast-locked{font-size:48px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.15);opacity:.8;}}
.beast-claim-hint{text-align:center;font-size:13px;color:#e65100;font-weight:600;padding:4px;}
.btn-claim{background:#ffa726;color:#fff;border:none;font-weight:600;}
.btn-claim:active{transform:scale(.95);}
.beast-card-rig{width:100%;height:160px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#faf6ee,#f5efe2);position:relative;}
.beast-card-rig .spirit-svg{width:130px;height:130px;}
.locked-rig .beast-locked{font-size:48px;}
.beast-lock-hint{text-align:center;font-size:12px;color:#999;padding:4px;}
.beast-card-info{padding:12px;}
.beast-card-name{font-size:16px;font-weight:700;color:#5d4037;}
.beast-element{font-size:12px;color:#aaa;margin-left:6px;}
/* 灵兽四态徽章：绿(幼)→蓝(成)→金(灵)→紫(星灵)，与视觉一一对应 */
.beast-phase-badge{display:inline-block;font-size:11px;line-height:1;padding:3px 9px;border-radius:11px;margin-left:8px;vertical-align:middle;font-weight:600;letter-spacing:.5px;}
.beast-phase-badge.phase-0{background:#E8F5E9;color:#3F9C5F;border:1px solid #B7E1C0;}
.beast-phase-badge.phase-1{background:#E3F2FD;color:#2E73C7;border:1px solid #B9D8F5;}
.beast-phase-badge.phase-2{background:#FFF3D6;color:#B8860B;border:1px solid #F0DCA0;}
.beast-phase-badge.phase-3{background:#EDE7FB;color:#6B4FB0;border:1px solid #D2C4F0;}
.beast-card-desc{font-size:12px;color:#888;margin:4px 0 8px;line-height:1.4;}
.beast-stats-mini{display:flex;gap:12px;font-size:12px;color:#6d4c41;flex-wrap:wrap;margin-bottom:8px;}
.beast-card-actions{display:flex;gap:6px;flex-wrap:wrap;}
.btn-mini{background:#f5efe2;border:1px solid #d7c9a8;border-radius:16px;padding:5px 12px;font-size:12px;color:#5d4037;cursor:pointer;}
.btn-mini:active{transform:scale(.95);}
.beast-status-row span:last-child{font-size:12px;color:#888;}

/* 纪念册 */
.memorial-item{padding:10px 0;border-bottom:1px dashed #e6dcc8;text-align:left;}
.memorial-event{font-size:14px;font-weight:600;color:#8b1a1a;}
.memorial-desc{font-size:13px;color:#5d4037;margin:2px 0;}
.memorial-time{font-size:11px;color:#aaa;}

/* ===================== 灵兽 Rig 动画 ===================== */
.spirit-svg{width:100%;height:100%;}
.sr-body{transform-origin:center bottom;animation:idle-breathe 3s ease-in-out infinite;}
@keyframes idle-breathe{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.03);}}
.sr-head{transform-origin:center bottom;animation:idle-head 5s ease-in-out infinite;}
@keyframes idle-head{0%,100%{transform:translateY(0) rotate(0);}25%{transform:translateY(-1px) rotate(.5deg);}75%{transform:translateY(0) rotate(-.5deg);}}

/* 状态：开心 */
.st-happy .sr-body{animation:happy-bounce .5s ease-in-out 3;}
@keyframes happy-bounce{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.05);}}
.st-happy .sr-head{animation:happy-head .5s ease-in-out 3;}
@keyframes happy-head{0%,100%{transform:rotate(0);}50%{transform:rotate(5deg);}}

/* 状态：安慰 */
.st-comfort .sr-body{animation:comfort-sway 1.5s ease-in-out 2;}
@keyframes comfort-sway{0%,100%{transform:rotate(0);}25%{transform:rotate(-2deg);}75%{transform:rotate(2deg);}}

/* 状态：睡觉 */
.st-sleep .sr-body{animation:sleep-breath 4s ease-in-out infinite;transform:scaleY(.95);}
@keyframes sleep-breath{0%,100%{transform:scaleY(.95);}50%{transform:scaleY(.98);}}
.st-sleep .pupil{opacity:.3;}
.st-sleep::after{content:'Z z z';position:absolute;top:10%;right:15%;font-size:14px;color:#aaa;animation:sleep-z 2s ease-in-out infinite;}
@keyframes sleep-z{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:.8;transform:translateY(-6px);}}

/* 状态：兴奋 */
.st-excited .sr-body{animation:excited-jump .3s ease-in-out 4;}
@keyframes excited-jump{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-12px) scale(1.08);}}

/* 状态：调息趴下 */
.st-rest .sr-body{transform:scaleY(.85) translateY(8px);animation:rest-breathe 4s ease-in-out infinite;}
@keyframes rest-breathe{0%,100%{transform:scaleY(.85) translateY(8px);}50%{transform:scaleY(.88) translateY(8px);}}
.st-rest .pupil{opacity:.4;}

/* 待机小动作 */
.idle-blink .pupil{animation:blink .15s ease-in-out 2;}
@keyframes blink{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.1);}}
.idle-look .sr-head{animation:look-around .8s ease-in-out;}
@keyframes look-around{0%,100%{transform:rotate(0);}50%{transform:rotate(8deg);}}
.idle-stretch .sr-body{animation:stretch .6s ease-in-out;}
@keyframes stretch{0%,100%{transform:scale(1);}50%{transform:scale(1.05) translateY(-3px);}}

/* 触摸反馈 */
.pet-back .sr-body{animation:pet-back .6s ease-in-out;}
@keyframes pet-back{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

/* 灵气光环（高阶形态） */
.sr-aura{animation:aura-pulse 3s ease-in-out infinite;}
@keyframes aura-pulse{0%,100%{opacity:.2;transform:scale(1);}50%{opacity:.5;transform:scale(1.05);}}

/* 首页伴读灵兽容器 —— 居中、放大、文案紧贴 */
#home-companion{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  min-height:0;
}
#home-companion .companion-rig{
  width:clamp(168px, 52vw, 232px);
  height:clamp(168px, 52vw, 232px);
  display:flex;
  align-items:center;
  justify-content:center;
}
#home-companion .spirit-svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 8px 10px rgba(40,70,60,.22));
}
#home-companion .companion-label{
  margin-top:4px;
  font-size:13px;
  line-height:1.4;
  color:#8a7a66;
  text-align:center;
}
#home-companion .companion-lore{
  margin-top:4px;
  max-width:260px;
  font-size:12px;
  line-height:1.5;
  color:#a99a86;
  text-align:center;
}

/* 迷你伴读（自学/闯关视图内嵌） */
.mini-companion{
  display:flex;
  align-items:center;
  justify-content:center;
}
.mini-companion .spirit-svg{
  width:100%;
  height:100%;
  display:block;
}
.study-companion{
  width:clamp(96px, 32vw, 132px);
  height:clamp(96px, 32vw, 132px);
  margin:6px auto 2px;
}
.game-companion{
  width:clamp(78px, 26vw, 108px);
  height:clamp(78px, 26vw, 108px);
  margin:4px auto 2px;
}
/* 首页伴读：幼态微成长阶段提示 */
.companion-growth-pill{
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:#5BA86A;
  text-align:center;
}
/* 灵兽园：幼态微成长阶段徽章 */
.beast-growth-badge{
  display:inline-block;
  font-size:11px;
  line-height:1;
  padding:3px 9px;
  border-radius:11px;
  margin-left:6px;
  vertical-align:middle;
  font-weight:600;
  background:#EAF7EC;
  color:#3F9C5F;
  border:1px solid #C7E8CE;
}

/* 思过崖错题 */
.wrong-item{padding:12px;background:#faf6ee;border-radius:8px;margin-bottom:10px;border-left:3px solid #e53935;}
.wrong-q{font-size:14px;color:#333;margin-bottom:6px;}
.wrong-a{font-size:13px;margin:2px 0;}
.wrong-cause{font-size:12px;color:#ff9800;margin-top:4px;}

/* ===================== 书童使用说明弹窗 ===================== */
.guide-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:center; justify-content:center; animation:fadeIn .3s ease; }
.guide-panel { width:min(420px,92vw); max-height:80vh; background:linear-gradient(180deg,#fffef5,#f5ecd9); border-radius:16px; border:2px solid #d4a946; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden; display:flex; flex-direction:column; animation:guideSlideUp .4s ease; }
@keyframes guideSlideUp {0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
.guide-header { background:linear-gradient(135deg,#8b1a1a,#b71c1c); color:#ffd54f; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.guide-header-title { font-size:18px; font-weight:700; letter-spacing:2px; font-family:"STKaiti","KaiTi",serif; display:flex; align-items:center; gap:8px; }
.guide-close { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#ffd54f; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; }
.guide-close:hover { background:rgba(255,255,255,.3); }
.guide-body { padding:16px 20px; overflow-y:auto; flex:1; }
.guide-section { margin-bottom:16px; padding:14px; background:rgba(255,255,255,.6); border-radius:10px; border-left:3px solid #e53935; }
.guide-section-title { font-size:15px; font-weight:700; color:#3e2723; margin-bottom:8px; display:flex; align-items:center; gap:6px; font-family:"STKaiti","KaiTi",serif; }
.guide-section-title .num { width:22px; height:22px; border-radius:50%; background:#e53935; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-section-text { font-size:13px; line-height:1.8; color:#5d4037; }
.guide-voice-bar { display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:8px; border-top:1px dashed #e8d9b8; }
.guide-voice-btn { padding:6px 14px; font-size:12px; border:1.5px solid #e53935; border-radius:20px; background:#fff; color:#e53935; cursor:pointer; transition:.15s; font-family:"STKaiti","KaiTi",serif; white-space:nowrap; }
.guide-voice-btn:hover { background:#e53935; color:#fff; }
.guide-voice-btn.playing { background:#e53935; color:#fff; }
.guide-voice-btn::before { content:'🔊 '; }
.guide-voice-btn.playing::before { content:'⏸ '; }
.guide-all-voice { padding:10px 18px; font-size:14px; border:none; border-radius:8px; background:linear-gradient(135deg,#e53935,#b71c1c); color:#fff; cursor:pointer; font-family:"STKaiti","KaiTi",serif; letter-spacing:1px; box-shadow:0 3px 8px rgba(229,57,53,.3); transition:.15s; margin:0 20px 16px; }
.guide-all-voice:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(229,57,53,.4); }
.guide-all-voice.playing { background:#6d4c41; }

/* ===================== 忘记密码弹窗 ===================== */
.forgot-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:center; justify-content:center; animation:fadeIn .3s ease; }
.forgot-panel { width:min(380px,92vw); background:linear-gradient(180deg,#fffef5,#f5ecd9); border-radius:16px; border:2px solid #d4a946; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden; animation:guideSlideUp .4s ease; }
.forgot-header { background:linear-gradient(135deg,#8b1a1a,#b71c1c); color:#ffd54f; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.forgot-header-title { font-size:17px; font-weight:700; letter-spacing:2px; font-family:"STKaiti","KaiTi",serif; }
.forgot-body { padding:20px; }
.forgot-tabs { display:flex; gap:8px; margin-bottom:16px; }
.forgot-tab { flex:1; padding:10px; text-align:center; font-size:13px; border-radius:8px; cursor:pointer; transition:.15s; font-family:"STKaiti","KaiTi",serif; border:1.5px solid #e8d9b8; background:#fff; color:#6d4c41; }
.forgot-tab.active { border-color:#e53935; background:#ffebee; color:#e53935; font-weight:700; }
.forgot-tab-content { display:none; }
.forgot-tab-content.active { display:block; }
.forgot-info { font-size:13px; line-height:1.8; color:#5d4037; padding:14px; background:rgba(255,255,255,.6); border-radius:8px; border-left:3px solid #ffb300; }
.forgot-info strong { color:#e53935; }
.forgot-link { display:inline-block; padding:8px 16px; background:#e53935; color:#fff; border-radius:8px; text-decoration:none; font-size:13px; margin-top:8px; font-family:"STKaiti","KaiTi",serif; }
.forgot-field { margin-bottom:12px; }
.forgot-field label { display:block; font-size:12px; color:#6d4c41; margin-bottom:4px; font-family:"STKaiti","KaiTi",serif; }
.forgot-field input { width:100%; padding:10px 12px; font-size:14px; border:2px solid #e8d9b8; border-radius:8px; outline:none; transition:.2s; background:#fff; box-sizing:border-box; }
.forgot-field input:focus { border-color:#e53935; }
.forgot-submit { width:100%; padding:12px; border:none; border-radius:8px; background:linear-gradient(135deg,#e53935,#b71c1c); color:#fff; font-size:16px; cursor:pointer; font-family:"STKaiti","KaiTi",serif; letter-spacing:2px; margin-top:4px; box-shadow:0 3px 0 #b71c1c; transition:.12s; }
.forgot-submit:active { transform:translateY(2px); box-shadow:0 1px 0 #b71c1c; }
.forgot-link-text { text-align:center; margin-top:10px; }
.forgot-link-text a { font-size:12px; color:#e53935; text-decoration:none; font-family:"STKaiti","KaiTi",serif; }
.forgot-link-text a:hover { text-decoration:underline; }

/* ===================== 成长奇遇（成就图鉴 + 机缘宝箱） ===================== */
.reward-banner {
    margin-top:12px; padding:10px 12px; border-radius:10px; cursor:pointer;
    background:linear-gradient(135deg,#fff3e0,#ffe9c7); border:1px solid #ffcc80;
    color:#b26a00; font-size:13px; text-align:center; font-weight:600;
    box-shadow:0 2px 8px rgba(255,152,0,.18); animation:fcPulse 2s ease-in-out infinite;
}
.reward-banner:active { transform:scale(.98); }

.reward-toast {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
    min-width:240px; max-width:88vw; z-index:10000;
    background:linear-gradient(135deg,#fff8ef,#ffe9c7); border:1.5px solid #e0a93a;
    border-radius:14px; padding:12px 14px; box-shadow:0 8px 28px rgba(176,106,0,.3);
    animation:fcToastIn .35s ease; text-align:left;
}
.reward-toast .rt-head { font-size:14px; font-weight:700; color:#8b1a1a; font-family:"STKaiti","KaiTi",serif; margin-bottom:4px; }
.reward-toast .rt-body { font-size:13px; color:#5d4037; line-height:1.6; }
.reward-toast .rt-line { margin:2px 0; }
.reward-toast .rt-go { margin-top:8px; text-align:right; font-size:13px; font-weight:700; color:#e53935; cursor:pointer; }

.rw-stat-row { display:flex; gap:8px; }
.rw-stat { flex:1; text-align:center; background:#f7faf7; border-radius:10px; padding:10px 4px; }
.rw-stat-v { font-size:20px; font-weight:800; color:#2e7d32; }
.rw-stat-l { font-size:11px; color:#888; margin-top:2px; }

.ach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ach-card {
    background:#fff; border:2px solid #e0e0e0; border-radius:12px; padding:10px 6px; text-align:center;
    position:relative; transition:transform .15s, box-shadow .15s; box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.ach-card.locked { background:#f3f3f3; border-color:#e6e6e6; color:#bbb; filter:grayscale(1); opacity:.7; }
.ach-card:not(.locked):hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.ach-icon { font-size:30px; line-height:1; margin-bottom:6px; }
.ach-name { font-size:12px; font-weight:700; color:#3e2723; }
.ach-card.locked .ach-name { color:#999; }
.ach-desc { font-size:10px; color:#999; margin-top:3px; line-height:1.4; }
.ach-card.locked .ach-desc { color:#bbb; }
.tier-normal { border-color:#9aa7b0; }
.tier-normal:not(.locked) { background:linear-gradient(180deg,#fff,#f4f7f9); }
.tier-rare { border-color:#3f8cff; }
.tier-rare:not(.locked) { background:linear-gradient(180deg,#fff,#eaf2ff); }
.tier-epic { border-color:#a259ff; }
.tier-epic:not(.locked) { background:linear-gradient(180deg,#fff,#f3ecff); }
.tier-legend { border-color:#ff9d2e; }
.tier-legend:not(.locked) { background:linear-gradient(180deg,#fff,#fff3e0); box-shadow:0 2px 10px rgba(255,157,46,.25); }

.rw-sub { font-size:14px; color:#5d4037; margin:6px 0 8px; font-family:"STKaiti","KaiTi",serif; }
.treasure-chips { display:flex; flex-wrap:wrap; gap:8px; }
.title-chip-r {
    display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:16px;
    background:linear-gradient(135deg,#fff3e0,#ffe6c2); border:1px solid #ffcc80; color:#b26a00; font-size:13px; font-weight:600;
}

.chest-list { display:flex; flex-direction:column; gap:10px; }
.chest-card {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#fff; border:2px solid #e0e0e0; border-radius:12px; padding:12px 14px;
}
.chest-card.opened { background:#f6f6f6; border-style:dashed; border-color:#ddd; }
.chest-card.tier-normal { border-color:#9aa7b0; }
.chest-card.tier-rare { border-color:#3f8cff; }
.chest-card.tier-epic { border-color:#a259ff; }
.chest-card.tier-legend { border-color:#ff9d2e; box-shadow:0 2px 10px rgba(255,157,46,.2); }
.chest-info { min-width:0; }
.chest-label { font-size:14px; font-weight:700; color:#3e2723; }
.chest-desc { font-size:12px; color:#888; margin-top:2px; }
.chest-reward { font-size:12px; color:#2e7d32; font-weight:600; text-align:right; }
.chest-open-btn { white-space:nowrap; padding:8px 18px; font-size:14px; }

/* 宝箱开启动效 */
.chest-overlay {
    position:fixed; inset:0; z-index:2000; background:rgba(20,10,5,.62);
    display:flex; align-items:center; justify-content:center; animation:fadeIn .25s ease;
}
.chest-stage { text-align:center; position:relative; }
.chest-stage::after {
    content:''; position:absolute; left:50%; top:46%; width:160px; height:160px; transform:translate(-50%,-50%);
    border-radius:50%; background:radial-gradient(circle, rgba(255,213,79,.55), rgba(255,213,79,0) 70%); opacity:0;
}
.chest-stage.opening::after { animation:chestGlow .8s ease-out forwards; }
.chest-box { font-size:84px; line-height:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3)); position:relative; z-index:1; }
.chest-shaking { animation:chestShake .45s ease-in-out infinite; }
.chest-open { animation:chestBurst .6s ease-out forwards; }
.chest-hint { color:#ffd54f; font-size:14px; margin-top:14px; font-family:"STKaiti","KaiTi",serif; letter-spacing:1px; }
.chest-reveal { animation:fcToastIn .4s ease; }
.reveal-title { color:#ffd54f; font-size:22px; font-weight:800; font-family:"STKaiti","KaiTi",serif; margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.reveal-list { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.reveal-item { color:#fff; font-size:16px; font-weight:600; background:rgba(255,255,255,.12); border-radius:10px; padding:8px 14px; }

@keyframes chestShake {
    0%,100% { transform:rotate(-6deg) scale(1); }
    25% { transform:rotate(6deg) scale(1.04); }
    50% { transform:rotate(-4deg) scale(1.02); }
    75% { transform:rotate(4deg) scale(1.04); }
}
@keyframes chestBurst {
    0% { transform:scale(1) rotate(0); }
    40% { transform:scale(1.35) rotate(-8deg); }
    100% { transform:scale(1) rotate(0); filter:drop-shadow(0 0 18px rgba(255,213,79,.9)); }
}
@keyframes chestGlow { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes fcToastIn { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes fcPulse { 0%,100% { box-shadow:0 2px 8px rgba(255,152,0,.18); } 50% { box-shadow:0 2px 14px rgba(255,152,0,.4); } }

/* ===== 星宿商店 ===== */
.shop-balance-card {
    background: linear-gradient(135deg, #5b6cff 0%, #8a5bff 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 18px rgba(91,108,255,.28);
}
.shop-balance-label { font-size:13px; opacity:.9; }
.shop-balance-value { font-size:34px; font-weight:800; margin:4px 0; letter-spacing:1px; }
.shop-balance-hint { font-size:12px; opacity:.85; }
.shop-grid { display:flex; flex-direction:column; gap:10px; }
.shop-item {
    display:flex; align-items:center; gap:12px;
    padding:12px; border-radius:14px;
    background:rgba(255,255,255,.6);
    border:1px solid rgba(0,0,0,.05);
}
.shop-item.owned { background:rgba(255,255,255,.85); }
.shop-item.active { border-color:#5b6cff; box-shadow:0 2px 10px rgba(91,108,255,.2); }
.shop-icon { font-size:30px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7); border-radius:12px; flex-shrink:0; }
.shop-meta { flex:1; min-width:0; }
.shop-name { font-size:15px; font-weight:700; color:#3a2f2a; }
.shop-sub { font-size:12px; color:#9b8e86; margin-top:2px; }
.shop-action { flex-shrink:0; }
.shop-action .btn { white-space:nowrap; padding:8px 14px; font-size:13px; }

/* ===== 每日修行（#170 功能性解锁） ===== */
.goals-balance-card {
    background: linear-gradient(135deg, #ff9a3c 0%, #ff6f61 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 18px rgba(255,111,97,.28);
}
.goals-balance-label { font-size:13px; opacity:.95; }
.goals-balance-value { font-size:34px; font-weight:800; margin:4px 0; letter-spacing:1px; }
.goals-balance-hint { font-size:12px; opacity:.9; }

.goals-checkin { background: linear-gradient(135deg, #fff7ec 0%, #ffe9d6 100%); }
.goals-checkin-head { display:flex; align-items:center; justify-content:space-between; }
.goals-checkin-title { font-size:16px; font-weight:700; color:#7a4a2b; }
.goals-checkin-sub { font-size:12px; color:#a07a5e; margin-top:2px; }
.goals-streak-badge { font-size:18px; font-weight:800; color:#ff6f3c; background:rgba(255,111,60,.12); border-radius:12px; padding:4px 12px; }

.ci-calendar { display:flex; gap:6px; margin-top:12px; }
.ci-day {
    flex:1; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#b9a99d;
    background:rgba(255,255,255,.6); border-radius:10px; border:1px solid rgba(0,0,0,.04);
}
.ci-day.on { background:linear-gradient(135deg,#ffb259,#ff7e5f); color:#fff; box-shadow:0 2px 8px rgba(255,126,95,.35); }
.ci-day.today { border-color:#ff6f3c; }

.goals-locked { text-align:center; padding:22px 16px; background:rgba(255,255,255,.55); }
.goals-locked-icon { font-size:34px; }
.goals-locked-title { font-size:16px; font-weight:700; color:#7a6f67; margin-top:6px; }
.goals-locked-sub { font-size:13px; color:#a99e95; margin-top:4px; }

.goal-list { display:flex; flex-direction:column; gap:10px; }
.goal-item {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:12px; border-radius:14px; background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.05);
}
.goal-item.done { background:rgba(255,247,236,.9); border-color:rgba(255,159,60,.35); }
.goal-item.claimed { opacity:.72; }
.goal-meta { flex:1; min-width:140px; }
.goal-title { font-size:15px; font-weight:700; color:#3a2f2a; }
.goal-desc { font-size:12px; color:#9b8e86; margin-top:2px; }
.goal-progress { width:100%; height:8px; border-radius:6px; background:rgba(0,0,0,.06); overflow:hidden; }
.goal-bar { height:100%; background:linear-gradient(90deg,#ffb259,#ff7e5f); border-radius:6px; transition:width .4s ease; }
.goal-action { flex-shrink:0; }
.goal-action .btn { white-space:nowrap; padding:8px 14px; font-size:13px; }

/* ===== 灵兽皮肤换装 ===== */
.beast-skins { margin:8px 0 4px; }
.beast-skins-title { font-size:13px; color:#8d6e63; margin-bottom:6px; font-weight:700; }
.skin-chips { display:flex; flex-wrap:wrap; gap:8px; }
.skin-chip {
    display:inline-flex; align-items:center; gap:4px;
    border:2px solid #e0cfc2; background:#fff; color:#6d4c41;
    border-radius:999px; padding:4px 12px; font-size:13px; cursor:pointer;
    transition:all .2s ease; font-family:inherit;
}
.skin-chip .skin-ico { font-size:15px; }
.skin-chip:hover { border-color:#c8a27a; }
.skin-chip.skin-on { border-color:#ef6c00; background:#fff3e0; color:#ef6c00; font-weight:700; box-shadow:0 2px 8px rgba(239,108,0,.2); }

/* ===== 课程列表：年级 + 教材版本·分册 分组 ===== */
.grade-block { margin:10px 0 16px; }
.grade-title { font-size:16px; font-weight:800; color:#5d4037; margin:12px 2px 8px; padding-left:11px; border-left:4px solid #ffb74d; }
.vol-block { margin:4px 0 10px; }
.vol-title { font-size:13px; color:#8d6e63; background:#fff7e9; border-radius:8px; padding:5px 12px; margin:8px 0; display:inline-block; font-weight:700; }